How to Build a Sales Funnel App with Lovable

1Create a sales funnel app with Supabase. Set up these tables:
2
3- leads: id, org_id, name, email, company, source (organic|paid|referral|outbound), stage (text), value (numeric), owner_id, notes (text), next_action (text), next_action_date (date), created_at, updated_at
4
5- stage_transitions: id, lead_id, from_stage (text, nullable), to_stage (text), transitioned_by (uuid references auth.users), transitioned_at (timestamptz default now())
6
7Create a Postgres trigger on leads: after UPDATE of stage, insert a row into stage_transitions with from_stage = OLD.stage and to_stage = NEW.stage.
8
9Enable RLS on both tables. For leads: users can read/write rows where org_id matches their profile org_id. For stage_transitions: users can read rows where lead_id is in (SELECT id FROM leads WHERE org_id = user's org_id).
10
11Seed with 30 sample leads spread across 6 stages: Awareness, Interest, Consideration, Intent, Evaluation, Purchase.

1import { useQuery } from '@tanstack/react-query'
2import { supabase } from '@/integrations/supabase/client'
3import { FunnelChart, Funnel, Tooltip, LabelList, ResponsiveContainer } from 'recharts'
4import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card'
5
6type FunnelMetric = {
7  stage: string
8  lead_count: number
9  total_value: number
10  conversion_rate: number
11}
12
13const STAGE_COLORS = ['#6366f1', '#8b5cf6', '#a78bfa', '#c4b5fd', '#ddd6fe', '#ede9fe']
14
15export function SalesFunnelChart() {
16  const { data: metrics = [], isLoading } = useQuery<FunnelMetric[]>({
17    queryKey: ['funnel_metrics'],
18    queryFn: async () => {
19      const { data, error } = await supabase.from('funnel_metrics').select('*')
20      if (error) throw error
21      return data
22    },
23  })
24
25  const chartData = metrics.map((m, i) => ({
26    value: m.lead_count,
27    name: m.stage,
28    fill: STAGE_COLORS[i % STAGE_COLORS.length],
29    conversionRate: m.conversion_rate,
30    totalValue: m.total_value,
31  }))
32
33  if (isLoading) return <div className="h-64 animate-pulse bg-muted rounded-lg" />
34
35  return (
36    <Card>
37      <CardHeader><CardTitle>Sales Funnel</CardTitle></CardHeader>
38      <CardContent>
39        <ResponsiveContainer width="100%" height={360}>
40          <FunnelChart>
41            <Tooltip
42              formatter={(value, name, props) => [
43                `${value} leads · $${props.payload.totalValue.toLocaleString()} · ${props.payload.conversionRate}% conv.`,
44                props.payload.name,
45              ]}
46            />
47            <Funnel dataKey="value" data={chartData} isAnimationActive>
48              <LabelList position="center" fill="#fff" stroke="none" dataKey="name" />
49            </Funnel>
50          </FunnelChart>
51        </ResponsiveContainer>
52      </CardContent>
53    </Card>
54  )
55}

1Build a StagMetricCards component at src/components/funnel/StageMetricCards.tsx.
2
3Requirements:
4- Read from the same funnel_metrics query (use React Query's useQuery with the same queryKey so it shares the cached result)
5- Render a horizontal scrollable row of Cards on mobile, a grid of 3 on md+ screens
6- Each card shows:
7  - Stage name as CardTitle
8  - Lead count in large bold text
9  - Pipeline value formatted as currency
10  - Conversion badge: if conversion_rate < 20% show a red Badge, 20-50% yellow, 50%+ green
11  - A mini sparkline (just a simple 3-bar BarChart with hardcoded last-3-days trend data for now) using Recharts inside the card
12- At the top of the card row, show a summary strip: 'X total leads in pipeline · $Y total value'

1Build a LeadsTable component at src/components/funnel/LeadsTable.tsx.
2
3Requirements:
4- Fetch leads from Supabase with columns: id, name, email, company, source, stage, value, owner_id, created_at
5- Use TanStack Table v8 with columns: Name, Company, Stage (Badge), Value (currency), Source (Badge), Date
6- Add filter controls above the table:
7  - Stage select (all stages + 'All')
8  - Source select (organic, paid, referral, outbound, 'All')
9  - Date range picker defaulting to last 30 days
10- Clicking any row opens a LeadDetailSheet
11- LeadDetailSheet shows: name, email, company, current stage selector (Select with all stages), value Input, owner, notes Textarea, next_action Input, next_action_date DatePicker, and a stage history timeline showing all stage_transitions for this lead ordered by transitioned_at desc
12- Saving the Sheet calls supabase.from('leads').update(...).eq('id', lead.id) — the Postgres trigger automatically records the stage transition

1Add a period comparison feature to the SalesFunnelChart component.
2
3Requirements:
4- Add a 'Compare to previous period' toggle (shadcn/ui Switch) above the funnel chart
5- When enabled, fetch two datasets from Supabase:
6  1. Current period leads grouped by stage (date range = selected period)
7  2. Previous period leads grouped by stage (date range = same duration shifted back)
8- Render both datasets in a grouped BarChart with two bars per stage: current (indigo) and previous (gray)
9- Show a legend labeling the two series
10- Keep the FunnelChart visible for the current period; place the comparison BarChart below it in a collapsible Collapsible component
11- Also add a top-right Publish reminder: show a Button 'Publish latest changes' that opens the Lovable publish flow (just navigate to the correct URL or show instructions in a Dialog)