How to Build a Finance Tracker with Lovable

1Build a personal finance tracker. Create these Supabase tables:
2
3- categories: id, user_id, name, type (income|expense), icon (text, emoji), color (hex string), created_at
4- transactions: id, user_id, category_id (FK categories), amount (numeric, positive always), type (income|expense), description, transaction_date (date), is_recurring (bool default false), created_at
5- budgets: id, user_id, category_id (FK categories), month (date, always first day of month e.g. 2024-01-01), budget_amount (numeric), created_at, UNIQUE(user_id, category_id, month)
6- recurring_transactions: id, user_id, category_id (FK categories), amount (numeric), type (income|expense), description, frequency (daily|weekly|monthly), next_due_date (date), is_active (bool default true), created_at
7
8Create two Supabase views:
91. category_spending: user_id, category_id, category_name, category_color, month (first day), total_amount — groups transactions by user+category+month
102. monthly_summary: user_id, month, income_total, expense_total, net — groups by user+month with conditional sums
11
12RLS: all tables require user_id = auth.uid() for all operations.

1Build the transaction management UI:
2
31. Transaction list page at src/pages/Transactions.tsx:
4   - Fetch transactions for the current user with category join, ordered by transaction_date DESC
5   - DataTable columns: Date, Category (Badge with category color), Description, Amount (green for income, red for expense), Actions (edit/delete)
6   - Filter row above table: month picker (Select showing last 12 months), type filter (All/Income/Expense), category Select
7   - Summary row at top: total income (green), total expenses (red), net (positive=green, negative=red)
8
92. Add Transaction Dialog (opened by a floating Add Button):
10   - Form fields: Type toggle (Income/Expense), Category Select (filtered by selected type), Amount Input (numeric), Description Input, Date DatePicker (default today), Is Recurring Switch
11   - If Is Recurring is on, show Frequency Select (Daily/Weekly/Monthly)
12   - On submit: insert into transactions. If recurring, also insert into recurring_transactions with next_due_date = transaction_date + frequency interval
13   - Zod schema validates: amount > 0, date is not in future, category is required

1// src/components/charts/SpendingPieChart.tsx
2import { PieChart, Pie, Cell, Tooltip, Legend, ResponsiveContainer } from 'recharts'
3import { useQuery } from '@tanstack/react-query'
4import { supabase } from '@/integrations/supabase/client'
5
6interface Props {
7  userId: string
8  month: string
9}
10
11export function SpendingPieChart({ userId, month }: Props) {
12  const { data } = useQuery({
13    queryKey: ['category-spending', userId, month],
14    queryFn: async () => {
15      const { data, error } = await supabase
16        .from('category_spending')
17        .select('category_name, category_color, total_amount')
18        .eq('user_id', userId)
19        .eq('month', month)
20      if (error) throw error
21      return data ?? []
22    },
23  })
24
25  if (!data?.length) return <p className="text-muted-foreground text-sm">No expense data for this month.</p>
26
27  return (
28    <ResponsiveContainer width="100%" height={320}>
29      <PieChart>
30        <Pie
31          data={data}
32          dataKey="total_amount"
33          nameKey="category_name"
34          cx="50%"
35          cy="50%"
36          outerRadius={100}
37          label={({ category_name, percent }) =>
38            `${category_name} ${(percent * 100).toFixed(0)}%`
39          }
40        >
41          {data.map((entry, index) => (
42            <Cell key={index} fill={entry.category_color} />
43          ))}
44        </Pie>
45        <Tooltip formatter={(value: number) => `$${value.toFixed(2)}`} />
46        <Legend />
47      </PieChart>
48    </ResponsiveContainer>
49  )
50}

1Build a budgets page at src/pages/Budgets.tsx:
2
31. Budget Cards grid (2 columns on desktop, 1 on mobile):
4   - Each Card shows: category icon + name, month label, budget_amount (limit), spent_amount (from category_spending view), remaining amount
5   - Progress bar: width = (spent_amount / budget_amount) * 100, capped at 100%
6   - Progress bar color: green if < 75%, yellow if 75-99%, red if >= 100%
7   - Show 'Over budget by $X' text in red if spent > budget
8   - Cards sorted by: over-budget first, then by percentage used descending
9
102. Set Budget Dialog (Button on each card or Add Budget Button):
11   - Category Select (expense categories only)
12   - Month picker (Select)
13   - Budget amount Input
14   - On submit: upsert into budgets (update if category+month exists, insert if new)
15
163. Month selector at page top to switch which month's budgets are shown (default: current month)
17
18Query: join budgets with category_spending view on category_id + month to get both budget_amount and spent_amount in one query.

1Create a Supabase Edge Function at supabase/functions/process-recurring/index.ts that:
2
31. Is triggered by a pg_cron job: SELECT cron.schedule('process-recurring-daily', '0 6 * * *', $$SELECT net.http_post(url:='https://your-project.supabase.co/functions/v1/process-recurring', headers:='{"Authorization": "Bearer YOUR_SERVICE_ROLE_KEY"}'::jsonb) AS request_id$$);
4
52. Function logic:
6   - Use SUPABASE_SERVICE_ROLE_KEY from Deno.env.get()
7   - Query all active recurring_transactions WHERE next_due_date <= today
8   - For each due recurring transaction:
9     a. Insert a new row into transactions (copying category_id, amount, type, description, user_id)
10     b. Set transaction_date = next_due_date
11     c. Update next_due_date: daily = +1 day, weekly = +7 days, monthly = +1 month (use date-fns addDays/addWeeks/addMonths)
12   - Return JSON summary: { processed: number, errors: string[] }
13
143. Add CORS headers and handle OPTIONS preflight