How to Build Sales funnel app with V0

1// Paste this prompt into V0's AI chat:
2// Build a sales funnel app. Create a Supabase schema with:
3// 1. pipelines: id (uuid PK), owner_id (uuid FK), name (text), created_at (timestamptz)
4// 2. stages: id (uuid PK), pipeline_id (uuid FK), name (text), position (integer), color (text), created_at (timestamptz)
5// 3. deals: id (uuid PK), pipeline_id (uuid FK), stage_id (uuid FK), owner_id (uuid FK), contact_name (text), contact_email (text), company (text), value (integer), currency (text DEFAULT 'USD'), expected_close_date (date), probability (integer CHECK 0-100), status (text CHECK open/won/lost), lost_reason (text), created_at (timestamptz), updated_at (timestamptz)
6// 4. deal_activities: id (uuid PK), deal_id (uuid FK), user_id (uuid FK), activity_type (text CHECK note/call/email/meeting/stage_change), description (text), metadata (jsonb), created_at (timestamptz)
7// 5. contacts: id (uuid PK), owner_id (uuid FK), name (text), email (text), company (text), phone (text), created_at (timestamptz)
8// RLS: users see only deals where owner_id = auth.uid().
9// Create a default pipeline with stages: Lead, Qualified, Proposal, Negotiation, Closed Won, Closed Lost.
10// Generate SQL migration and TypeScript types.

1// Paste this prompt into V0's AI chat:
2// Build a sales pipeline page at app/pipeline/page.tsx.
3// Requirements:
4// - Kanban board with columns for each stage, ordered by position
5// - Each column header shows stage name with colored Badge, deal count, and total value
6// - Deal Cards showing: contact_name, company, value (formatted as currency), probability Badge, expected_close_date
7// - Drag-and-drop deals between columns using @dnd-kit/core
8// - On drop: call Server Action moveDealToStage() which:
9//   1. Updates deal's stage_id
10//   2. Inserts a deal_activities record with activity_type 'stage_change' and metadata {from_stage, to_stage}
11// - Deal Card DropdownMenu: View Details, Mark Won, Mark Lost (opens Dialog for lost_reason)
12// - "Add Deal" Button per column opens Sheet with deal form (contact_name, company, value, probability, expected_close_date)
13// - Tabs for switching between Pipeline (kanban), List (Table view), and Analytics
14// - 'use client' for the kanban board
15// - Use shadcn/ui Card, Badge, Avatar, Sheet, DropdownMenu, Tabs, Table, Button, Dialog

1// Paste this prompt into V0's AI chat:
2// Build a deal detail page at app/deals/[id]/page.tsx.
3// Requirements:
4// - Header: contact_name, company, value (large), stage Badge (colored), probability
5// - Quick actions: DropdownMenu with Move to Stage (nested menu of all stages), Mark Won, Mark Lost, Edit
6// - Two-column layout:
7//   - Left: Activity timeline (deal_activities ordered by created_at DESC)
8//     - Each activity: Avatar, activity_type Badge (note=blue, call=green, email=purple, meeting=orange, stage_change=gray), description, timestamp
9//     - Stage change activities show "Moved from {from_stage} to {to_stage}" from metadata
10//     - "Add Activity" form at top with activity_type Select, description Textarea, "Log" Button
11//   - Right: Deal details Card (contact info, value, probability, dates) + Contact Card
12// - Server Actions: logActivity(), updateDeal()
13// - Server Components for data fetching
14// - Use shadcn/ui Card, Badge, Avatar, Select, Textarea, Button, DropdownMenu, Separator

1// Paste this prompt into V0's AI chat:
2// Build a pipeline analytics page at app/pipeline/analytics/page.tsx.
3// Requirements:
4// - Top row: metric Cards showing total pipeline value, average deal size, win rate %, average time to close
5// - Conversion funnel: horizontal bar chart (Recharts BarChart) showing deal count at each stage
6//   - Labels between bars showing conversion percentage from one stage to the next
7//   - Data comes from a Supabase RPC function 'get_conversion_stats' that:
8//     - Queries deal_activities WHERE activity_type = 'stage_change'
9//     - Groups by from_stage and to_stage
10//     - Computes conversion percentage for each transition
11// - Revenue forecast: Recharts LineChart showing expected revenue by month
12//   - Based on deals' expected_close_date and value * (probability / 100)
13// - Stage breakdown: Table showing each stage's deal count, total value, average time in stage
14// - Date range filter with Calendar + Popover DatePicker
15// - Server Components for data fetching — call the RPC function directly
16// - Use shadcn/ui Card, Table, Badge, Calendar, Popover, Button