How to Build a CRM System with Lovable

1Create a CRM application with Supabase. Set up these tables:
2- contacts: id, org_id, first_name, last_name, email, phone, company, owner_id, created_at
3- pipelines: id, org_id, name, created_at
4- deals: id, org_id, contact_id, pipeline_id, title, value, stage, owner_id, position, created_at, updated_at
5- activities: id, org_id, contact_id, deal_id, type (call|email|note|meeting), body, created_by, created_at
6
7Enable RLS on all tables. Add policies so users can only read/write rows where org_id matches their profile's org_id. Use Supabase Auth for authentication.

1Build a Kanban pipeline board component at src/components/pipeline/KanbanBoard.tsx.
2
3Requirements:
4- Fetch deals from Supabase grouped by stage
5- Render columns for stages: Lead, Qualified, Proposal, Negotiation, Won, Lost
6- Each card shows: contact name, deal title, formatted value (e.g. $12,500), owner avatar
7- Use shadcn/ui Card for each deal card
8- Use shadcn/ui Badge with color coding: Lead=gray, Qualified=blue, Proposal=yellow, Negotiation=orange, Won=green, Lost=red
9- Implement drag-and-drop: when a card is dropped into a new column, optimistically update the UI immediately, then call supabase.from('deals').update({ stage: newStage }).eq('id', dealId)
10- Show a loading skeleton while deals are fetching
11- Add a + button at the top of each column to create a new deal in that stage

1Add Supabase Realtime to the KanbanBoard component. Subscribe to postgres_changes on the deals table. When an UPDATE event fires, update the local deals state to reflect the new stage and position. Clean up the subscription on component unmount. Show a subtle toast notification (use Sonner) when a deal is moved by another user, e.g. 'John moved Acme Corp deal to Won'.

1import { useState } from 'react'
2import { useQuery } from '@tanstack/react-query'
3import { supabase } from '@/integrations/supabase/client'
4import {
5  Sheet,
6  SheetContent,
7  SheetHeader,
8  SheetTitle,
9} from '@/components/ui/sheet'
10import { Badge } from '@/components/ui/badge'
11import { Avatar, AvatarFallback } from '@/components/ui/avatar'
12import { DataTable } from '@/components/ui/data-table'
13import type { ColumnDef } from '@tanstack/react-table'
14
15type Contact = {
16  id: string
17  first_name: string
18  last_name: string
19  email: string
20  company: string
21  owner_id: string
22}
23
24const columns: ColumnDef<Contact>[] = [
25  {
26    accessorFn: (row) => `${row.first_name} ${row.last_name}`,
27    header: 'Name',
28    cell: ({ getValue, row }) => (
29      <div className="flex items-center gap-2">
30        <Avatar className="h-7 w-7">
31          <AvatarFallback>{row.original.first_name[0]}</AvatarFallback>
32        </Avatar>
33        <span>{getValue() as string}</span>
34      </div>
35    ),
36  },
37  { accessorKey: 'email', header: 'Email' },
38  { accessorKey: 'company', header: 'Company' },
39]
40
41export function ContactsTable() {
42  const [selected, setSelected] = useState<Contact | null>(null)
43
44  const { data: contacts = [] } = useQuery({
45    queryKey: ['contacts'],
46    queryFn: async () => {
47      const { data, error } = await supabase.from('contacts').select('*').order('created_at', { ascending: false })
48      if (error) throw error
49      return data as Contact[]
50    },
51  })
52
53  return (
54    <>
55      <DataTable columns={columns} data={contacts} onRowClick={setSelected} />
56      <Sheet open={!!selected} onOpenChange={() => setSelected(null)}>
57        <SheetContent className="w-[420px]">
58          <SheetHeader>
59            <SheetTitle>{selected?.first_name} {selected?.last_name}</SheetTitle>
60          </SheetHeader>
61          <div className="mt-4 space-y-2 text-sm">
62            <p className="text-muted-foreground">{selected?.email}</p>
63            <Badge variant="outline">{selected?.company}</Badge>
64          </div>
65        </SheetContent>
66      </Sheet>
67    </>
68  )
69}

1Build a DealDialog component at src/components/pipeline/DealDialog.tsx.
2
3Requirements:
4- Accept a deal prop and an onClose callback
5- Show a shadcn/ui Dialog with two sections: Deal Info (form) and Activity Log
6- Deal Info form fields: title (Input), value (Input, number), stage (Select with the 6 stages), owner (Select from team members), contact (Select from contacts)
7- Use react-hook-form + zod for validation
8- On submit, call supabase.from('deals').update(...).eq('id', deal.id)
9- Activity Log section: show activities filtered by deal_id, ordered by created_at desc
10- Each activity row shows: type Badge (call/email/note/meeting), body text, created_by name, relative time (e.g. '2 hours ago')
11- Add a Textarea at the bottom to log a new activity, with a Submit button that inserts into the activities table

1Review and harden the RLS policies for production. For each table (contacts, deals, activities, pipelines), ensure:
21. Row-Level Security is enabled
32. There is a SELECT policy: 'auth.uid() = owner_id OR org_id = (SELECT org_id FROM profiles WHERE id = auth.uid())'
43. There is an INSERT policy that sets org_id automatically from the user's profile
54. There is an UPDATE policy that matches the SELECT policy
65. Add a profiles table if it doesn't exist: id (references auth.users), org_id, full_name, avatar_url
7
8Show me the SQL for all policies.