How to Build Budgeting tool with V0

1// Paste this prompt into V0's AI chat:
2// Build an envelope budgeting tool with Supabase. Create these tables:
3// 1. budgets: id (uuid PK), user_id (uuid FK to auth.users), name (text), month (date), total_income (numeric), created_at (timestamptz)
4// 2. envelopes: id (uuid PK), budget_id (uuid FK), category (text), allocated (numeric), spent (numeric default 0), color (text)
5// 3. transactions: id (uuid PK), envelope_id (uuid FK), user_id (uuid FK), amount (numeric), description (text), date (date), type (text CHECK in 'expense','income','transfer'), created_at (timestamptz)
6// Add a database trigger: on transactions INSERT/UPDATE/DELETE, recalculate envelopes.spent as SUM of related expense transactions.
7// Add RLS so each user sees only their own budgets, envelopes, and transactions.

1// Paste this prompt into V0's AI chat:
2// Build a budget overview page at app/budget/page.tsx (Server Component).
3// Requirements:
4// - Fetch the current month's budget and envelopes from Supabase
5// - Display summary Cards at the top: Total Income, Total Allocated, Total Spent, Remaining
6// - Show each envelope as a Card with:
7//   - Category name and color indicator dot
8//   - Progress bar (shadcn/ui Progress) showing spent/allocated ratio
9//   - Text showing "$X of $Y spent" and remaining amount
10//   - Progress color changes: green (<70%), yellow (70-90%), red (>90%)
11// - Add a "New Envelope" Button that opens a Dialog for creating an envelope
12// - Add a PieChart (Recharts) showing spending distribution across envelopes
13// - Month selector at the top to switch between months
14// - If no budget exists for the current month, show a "Create Budget" CTA

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 addTransaction(
12  userId: string,
13  envelopeId: string,
14  amount: number,
15  description: string,
16  date: string,
17  type: 'expense' | 'income' | 'transfer'
18) {
19  const { error } = await supabase.from('transactions').insert({
20    envelope_id: envelopeId,
21    user_id: userId,
22    amount,
23    description,
24    date,
25    type,
26  })
27
28  if (error) throw new Error(error.message)
29  revalidatePath('/budget')
30}
31
32export async function deleteTransaction(transactionId: string) {
33  const { error } = await supabase
34    .from('transactions')
35    .delete()
36    .eq('id', transactionId)
37
38  if (error) throw new Error(error.message)
39  revalidatePath('/budget')
40}
41
42export async function rolloverBudget(userId: string, currentBudgetId: string) {
43  const { data: currentEnvelopes } = await supabase
44    .from('envelopes')
45    .select('category, allocated, color')
46    .eq('budget_id', currentBudgetId)
47
48  const nextMonth = new Date()
49  nextMonth.setMonth(nextMonth.getMonth() + 1)
50  nextMonth.setDate(1)
51
52  const { data: newBudget } = await supabase.from('budgets').insert({
53    user_id: userId,
54    name: nextMonth.toLocaleDateString('en-US', { month: 'long', year: 'numeric' }),
55    month: nextMonth.toISOString().split('T')[0],
56    total_income: 0,
57  }).select().single()
58
59  if (newBudget && currentEnvelopes) {
60    await supabase.from('envelopes').insert(
61      currentEnvelopes.map((e) => ({
62        budget_id: newBudget.id,
63        category: e.category,
64        allocated: e.allocated,
65        color: e.color,
66      }))
67    )
68  }
69
70  revalidatePath('/budget')
71}

1// Paste this prompt into V0's AI chat:
2// Build a transactions page at app/transactions/page.tsx.
3// Requirements:
4// - Table of all transactions with columns: Date, Description, Category (from envelope), Amount, Type Badge
5// - Date range filter using two DatePicker components (from and to)
6// - Select filter for envelope/category
7// - Select filter for type (expense, income, transfer)
8// - Sortable columns (click header to sort by date, amount)
9// - Amount shows negative for expenses (red) and positive for income (green)
10// - "Add Transaction" Button opens a Dialog with:
11//   - Select for envelope (fetches from current month's envelopes)
12//   - Input for amount with currency formatting
13//   - Input for description
14//   - DatePicker for date
15//   - RadioGroup for type (expense, income, transfer)
16// - Use Server Components for initial data fetch with client-side filter state

1import { NextRequest, NextResponse } from 'next/server'
2import { createClient } from '@supabase/supabase-js'
3import Papa from 'papaparse'
4
5const supabase = createClient(
6  process.env.SUPABASE_URL!,
7  process.env.SUPABASE_SERVICE_ROLE_KEY!
8)
9
10export async function POST(req: NextRequest) {
11  const formData = await req.formData()
12  const file = formData.get('file') as File
13  const userId = formData.get('user_id') as string
14  const budgetId = formData.get('budget_id') as string
15
16  const text = await file.text()
17  const { data: rows } = Papa.parse(text, { header: true, skipEmptyLines: true })
18
19  const { data: envelopes } = await supabase
20    .from('envelopes')
21    .select('id, category')
22    .eq('budget_id', budgetId)
23
24  const transactions = (rows as Record<string, string>[]).map((row) => {
25    const amount = Math.abs(parseFloat(row.Amount || row.amount || '0'))
26    const description = row.Description || row.description || ''
27    const date = row.Date || row.date || new Date().toISOString().split('T')[0]
28    const type = parseFloat(row.Amount || '0') < 0 ? 'expense' : 'income'
29
30    const matchedEnvelope = envelopes?.find((e) =>
31      description.toLowerCase().includes(e.category.toLowerCase())
32    )
33
34    return {
35      envelope_id: matchedEnvelope?.id || envelopes?.[0]?.id,
36      user_id: userId,
37      amount,
38      description,
39      date,
40      type,
41    }
42  }).filter((t) => t.envelope_id && t.amount > 0)
43
44  const { error } = await supabase.from('transactions').insert(transactions)
45  if (error) return NextResponse.json({ error: error.message }, { status: 500 })
46
47  return NextResponse.json({ imported: transactions.length })
48}