How to Build CRM system with V0

1// Paste this prompt into V0's AI chat:
2// Build a CRM system with Supabase. Create these tables:
3// 1. contacts: id (uuid PK), owner_id (uuid FK to auth.users), company (text), name (text), email (text), phone (text), source (text), tags (text[]), created_at (timestamptz)
4// 2. pipelines: id (uuid PK), org_id (uuid FK), name (text), stages (jsonb DEFAULT '[{"name":"Lead","order":0},{"name":"Qualified","order":1},{"name":"Proposal","order":2},{"name":"Won","order":3},{"name":"Lost","order":4}]')
5// 3. deals: id (uuid PK), contact_id (uuid FK), pipeline_id (uuid FK), stage (text), title (text), value (numeric), expected_close (date), owner_id (uuid FK), created_at (timestamptz), updated_at (timestamptz)
6// 4. activities: id (uuid PK), deal_id (uuid FK), user_id (uuid FK), type (text CHECK in 'call','email','meeting','note'), content (text), created_at (timestamptz)
7// Add RLS policies scoped by owner_id matching auth.uid().

1// Paste this prompt into V0's AI chat:
2// Build a Kanban deal board at app/deals/page.tsx.
3// Requirements:
4// - 'use client' component using @hello-pangea/dnd for drag-and-drop
5// - Columns for each pipeline stage (Lead, Qualified, Proposal, Won, Lost)
6// - Deal Cards in each column showing: title, value (formatted as currency), contact name, expected close date, owner Avatar
7// - Drag a Card between columns to change its stage
8// - On drop, optimistically update the local state and call a Server Action to update deals.stage in Supabase
9// - If the Server Action fails, revert the optimistic state and show an error toast
10// - Column headers show the count of deals and total value
11// - Add a "+" Button on each column header to create a new deal in that stage
12// - Use shadcn/ui Card for deal tiles, Badge for stage labels, Avatar for owners
13// - Add Tabs to switch between Kanban and list Table views

1import { createClient } from '@supabase/supabase-js'
2import { ContactTable } from '@/components/contact-table'
3import { Button } from '@/components/ui/button'
4import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
5
6const supabase = createClient(
7  process.env.SUPABASE_URL!,
8  process.env.SUPABASE_SERVICE_ROLE_KEY!
9)
10
11export default async function ContactsPage() {
12  const { data: contacts } = await supabase
13    .from('contacts')
14    .select('*, deals(id, title, value, stage)')
15    .order('created_at', { ascending: false })
16
17  const totalContacts = contacts?.length ?? 0
18  const withDeals = contacts?.filter((c) => c.deals?.length > 0).length ?? 0
19
20  return (
21    <div className="space-y-6">
22      <div className="flex items-center justify-between">
23        <h1 className="text-3xl font-bold">Contacts</h1>
24        <Button>Add Contact</Button>
25      </div>
26      <div className="grid gap-4 md:grid-cols-3">
27        <Card>
28          <CardHeader><CardTitle>Total Contacts</CardTitle></CardHeader>
29          <CardContent className="text-3xl font-bold">{totalContacts}</CardContent>
30        </Card>
31        <Card>
32          <CardHeader><CardTitle>With Active Deals</CardTitle></CardHeader>
33          <CardContent className="text-3xl font-bold">{withDeals}</CardContent>
34        </Card>
35      </div>
36      <ContactTable contacts={contacts ?? []} />
37    </div>
38  )
39}

1'use server'
2
3import { createClient } from '@supabase/supabase-js'
4import { revalidatePath } from 'next/cache'
5
6const supabase = createClient(
7  process.env.SUPABASE_URL!,
8  process.env.SUPABASE_SERVICE_ROLE_KEY!
9)
10
11export async function updateDealStage(dealId: string, stage: string) {
12  const { error } = await supabase
13    .from('deals')
14    .update({ stage, updated_at: new Date().toISOString() })
15    .eq('id', dealId)
16
17  if (error) throw new Error(error.message)
18  revalidatePath('/deals')
19}
20
21export async function logActivity(
22  dealId: string,
23  userId: string,
24  type: 'call' | 'email' | 'meeting' | 'note',
25  content: string
26) {
27  const { error } = await supabase.from('activities').insert({
28    deal_id: dealId,
29    user_id: userId,
30    type,
31    content,
32  })
33
34  if (error) throw new Error(error.message)
35  revalidatePath(`/deals/${dealId}`)
36}
37
38export async function createDeal(
39  contactId: string,
40  pipelineId: string,
41  title: string,
42  value: number,
43  stage: string,
44  ownerId: string
45) {
46  const { error } = await supabase.from('deals').insert({
47    contact_id: contactId,
48    pipeline_id: pipelineId,
49    title,
50    value,
51    stage,
52    owner_id: ownerId,
53  })
54
55  if (error) throw new Error(error.message)
56  revalidatePath('/deals')
57}

1// Paste this prompt into V0's AI chat:
2// Build two features:
3// 1. Revenue forecast at app/forecast/page.tsx:
4//    - Assign probability weights to pipeline stages: Lead=10%, Qualified=30%, Proposal=60%, Won=100%, Lost=0%
5//    - Calculate weighted pipeline value: SUM(deal.value * stage_probability)
6//    - Show summary Cards: Total Pipeline Value, Weighted Forecast, Deals Closing This Month
7//    - BarChart (Recharts) showing deal values by stage
8//    - Table of deals sorted by expected_close date with stage Badge and weighted value
9// 2. Global search using shadcn/ui Command (Cmd+K):
10//    - Search across contacts (by name, company, email) and deals (by title)
11//    - Show results grouped by type with icons
12//    - Navigate to contact or deal detail page on selection
13//    - Use Supabase full-text search with to_tsvector on searchable columns