How to Build a Budgeting Tool with Lovable

1Build an envelope budgeting app. Create these Supabase tables:
2
3- budget_periods: id, user_id, name (e.g. 'June 2024'), start_date (date), end_date (date), income_amount (numeric), is_active (bool default false), created_at
4- envelopes: id, user_id, period_id (FK budget_periods), name, allocated_amount (numeric), spent_amount (numeric default 0), color (hex), icon (emoji), sort_order (int), created_at
5- transactions: id, user_id, envelope_id (FK envelopes), amount (numeric, always positive), description, transaction_date (date), created_at
6
7Create a PostgreSQL trigger function update_envelope_spent() that:
8- On transactions INSERT: UPDATE envelopes SET spent_amount = spent_amount + NEW.amount WHERE id = NEW.envelope_id
9- On transactions DELETE: UPDATE envelopes SET spent_amount = spent_amount - OLD.amount WHERE id = OLD.envelope_id
10- Attach as AFTER INSERT OR DELETE trigger on transactions table
11
12RLS: all tables require user_id = auth.uid().
13
14Create a computed column view envelope_summary: all envelope columns plus remaining_amount (allocated_amount - spent_amount) and percent_used ((spent_amount / NULLIF(allocated_amount, 0)) * 100).

1Build the main budget view at src/pages/Budget.tsx:
2
31. Period selector at top: Select dropdown showing all budget_periods for the user, 'New Period' Button
42. Zero-sum summary Banner below period selector:
5   - Show: Period Income: $X | Allocated: $Y | Unallocated: $Z
6   - If sum of allocated_amount > income_amount: show red Banner 'Over-allocated by $Z. Reduce envelope amounts to match your income.'
7   - If unallocated > 0: show blue Banner 'You have $Z to allocate.'
8   - If exactly zero: show green Banner 'Your budget is balanced.'
93. Envelope Cards grid (2-3 columns):
10   - Each Card: envelope icon + name, allocated amount, spent amount, remaining amount
11   - shadcn/ui Progress component: value = percent_used from envelope_summary view
12   - Progress color: green if percent_used < 75, yellow if 75-99, red if >= 100
13   - 'Add Transaction' Button on each Card
14   - Overflow indicator: 'Over by $X' text in red if spent > allocated
15   - Card drag handle for reordering (updates sort_order)
164. 'Add Envelope' Button (floating, bottom right) opens a Dialog with: name Input, icon Emoji picker (simple Select of common emojis), color Select, allocated amount Input

1// src/components/budgeting/AddTransactionDialog.tsx
2import { useState } from 'react'
3import { useForm } from 'react-hook-form'
4import { zodResolver } from '@hookform/resolvers/zod'
5import { z } from 'zod'
6import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
7import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form'
8import { Input } from '@/components/ui/input'
9import { Button } from '@/components/ui/button'
10import { supabase } from '@/integrations/supabase/client'
11import { useQueryClient } from '@tanstack/react-query'
12
13const schema = z.object({
14  amount: z.coerce.number().positive('Amount must be greater than 0'),
15  description: z.string().min(1, 'Description is required'),
16  transaction_date: z.string().min(1, 'Date is required'),
17})
18
19type FormValues = z.infer<typeof schema>
20
21interface Props {
22  envelopeId: string
23  envelopeName: string
24  userId: string
25  open: boolean
26  onOpenChange: (open: boolean) => void
27}
28
29export function AddTransactionDialog({ envelopeId, envelopeName, userId, open, onOpenChange }: Props) {
30  const queryClient = useQueryClient()
31  const [isSubmitting, setIsSubmitting] = useState(false)
32
33  const form = useForm<FormValues>({
34    resolver: zodResolver(schema),
35    defaultValues: {
36      amount: undefined,
37      description: '',
38      transaction_date: new Date().toISOString().split('T')[0],
39    },
40  })
41
42  async function onSubmit(values: FormValues) {
43    setIsSubmitting(true)
44    const { error } = await supabase.from('transactions').insert({
45      user_id: userId,
46      envelope_id: envelopeId,
47      amount: values.amount,
48      description: values.description,
49      transaction_date: values.transaction_date,
50    })
51    setIsSubmitting(false)
52    if (!error) {
53      queryClient.invalidateQueries({ queryKey: ['envelopes'] })
54      form.reset()
55      onOpenChange(false)
56    }
57  }
58
59  return (
60    <Dialog open={open} onOpenChange={onOpenChange}>
61      <DialogContent className="sm:max-w-md">
62        <DialogHeader>
63          <DialogTitle>Add to {envelopeName}</DialogTitle>
64        </DialogHeader>
65        <Form {...form}>
66          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
67            <FormField control={form.control} name="amount" render={({ field }) => (
68              <FormItem>
69                <FormLabel>Amount</FormLabel>
70                <FormControl><Input type="number" step="0.01" placeholder="0.00" {...field} /></FormControl>
71                <FormMessage />
72              </FormItem>
73            )} />
74            <FormField control={form.control} name="description" render={({ field }) => (
75              <FormItem>
76                <FormLabel>Description</FormLabel>
77                <FormControl><Input placeholder="Coffee, groceries..." {...field} /></FormControl>
78                <FormMessage />
79              </FormItem>
80            )} />
81            <FormField control={form.control} name="transaction_date" render={({ field }) => (
82              <FormItem>
83                <FormLabel>Date</FormLabel>
84                <FormControl><Input type="date" {...field} /></FormControl>
85                <FormMessage />
86              </FormItem>
87            )} />
88            <Button type="submit" className="w-full" disabled={isSubmitting}>
89              {isSubmitting ? 'Adding...' : 'Add Transaction'}
90            </Button>
91          </form>
92        </Form>
93      </DialogContent>
94    </Dialog>
95  )
96}

1Build budget period management at src/pages/Periods.tsx:
2
31. Periods list: show all budget_periods for the user as Cards with: period name, date range, income amount, total allocated, total spent, is_active Badge
42. 'New Period' Dialog:
5   - Period name Input (default: 'Month Year' from current date)
6   - Start date and end date DatePickers (default: first and last day of next month)
7   - Income amount Input
8   - 'Copy envelopes from' Select: show previous periods. If selected, will copy envelope names, colors, icons, allocated amounts (not spent amounts) from that period
9   - On submit: create budget_period, optionally copy envelopes with spent_amount = 0
103. 'Set Active' Button on each period Card: sets is_active = true for this period and false for all others. The main Budget page shows the active period by default.
114. Period detail view: clicking a period Card shows a read-only summary of that period's envelopes and total spending (for reviewing past periods)
125. Delete period Button: only allowed if period has no transactions. Show a Tooltip explaining this restriction.