# How to Build a Client Invoicing Tool with V0 - Tool: v0 - Difficulty: Intermediate - Compatibility: V0 Premium or Free tier, Supabase free tier, Stripe account - Last updated: April 2026 ## TL;DR Build a professional invoicing tool that lets freelancers create branded invoices with auto-calculated totals, send them to clients via email, and collect payments through Stripe Payment Links. V0 generates the invoice builder form with dynamic line items while Supabase handles sequential invoice numbering with advisory locks to prevent race conditions. ## Before you start - A V0 account (free or Premium) - A Supabase project with the database tables created - A Stripe account with Payment Links enabled - A Resend account and API key for email delivery - Basic familiarity with React forms and TypeScript ## Step-by-step guide ### 1. Set Up the Supabase Schema with Generated Columns *Generated columns in PostgreSQL automatically calculate tax and totals from line item data, eliminating manual math errors and keeping your invoice amounts always in sync.* Create the database tables for clients, invoices, line items, and business settings. The invoices table uses GENERATED ALWAYS AS columns for tax_amount and total so the database enforces correct calculations. Create a Supabase function with advisory_lock for sequential invoice numbering. ``` -- Create clients table create table clients ( id uuid primary key default gen_random_uuid(), user_id uuid references auth.users not null, company_name text not null, contact_name text not null, email text not null, address jsonb default '{}', created_at timestamptz default now() ); -- Create invoices table with generated columns create table invoices ( id uuid primary key default gen_random_uuid(), user_id uuid references auth.users not null, client_id uuid references clients not null, invoice_number text unique not null, status text check (status in ('draft','sent','viewed','paid','overdue')) default 'draft', issue_date date default current_date, due_date date default (current_date + interval '30 days'), subtotal numeric default 0, tax_rate numeric default 0, tax_amount numeric generated always as (subtotal * tax_rate / 100) stored, total numeric generated always as (subtotal + subtotal * tax_rate / 100) stored, notes text, stripe_payment_link text, paid_at timestamptz, created_at timestamptz default now() ); -- Create line items with generated amount create table line_items ( id uuid primary key default gen_random_uuid(), invoice_id uuid references invoices on delete cascade not null, description text not null, quantity numeric not null default 1, unit_price numeric not null default 0, amount numeric generated always as (quantity * unit_price) stored ); -- Business settings create table settings ( id uuid primary key default gen_random_uuid(), user_id uuid references auth.users unique not null, business_name text, logo_url text, address jsonb default '{}', default_tax_rate numeric default 0, payment_terms int default 30 ); -- Sequential invoice numbering function create or replace function next_invoice_number(p_user_id uuid) returns text language plpgsql as $$ declare v_year text := to_char(now(), 'YYYY'); v_max int; v_next text; begin perform pg_advisory_xact_lock(hashtext(p_user_id::text || v_year)); select coalesce( max(cast(split_part(invoice_number, '-', 3) as int)), 0 ) into v_max from invoices where user_id = p_user_id and invoice_number like 'INV-' || v_year || '-%'; v_next := 'INV-' || v_year || '-' || lpad((v_max + 1)::text, 4, '0'); return v_next; end; $$; -- Enable RLS alter table clients enable row level security; alter table invoices enable row level security; alter table line_items enable row level security; alter table settings enable row level security; create policy "Users manage own clients" on clients for all using (auth.uid() = user_id); create policy "Users manage own invoices" on invoices for all using (auth.uid() = user_id); create policy "Users manage own line items" on line_items for all using (invoice_id in (select id from invoices where user_id = auth.uid())); create policy "Users manage own settings" on settings for all using (auth.uid() = user_id); ``` **Expected result:** All tables created with generated columns for automatic calculations and a race-condition-safe invoice numbering function. ### 2. Build the Invoice Builder Form with Dynamic Line Items *The invoice builder is the core of the app. Dynamic line items let users add, remove, and edit rows while seeing real-time totals, making the invoicing process feel professional and intuitive.* Prompt V0 to generate an invoice creation page with a client selector, date pickers, and a dynamic line items table where rows can be added and removed. Each row auto-calculates its amount, and the footer shows subtotal, tax, and total. Use prompt queuing to first generate the form layout, then add the calculation logic. ``` // app/invoices/new/page.tsx 'use client'; import { useState } from 'react'; import { useRouter } from 'next/navigation'; import { createClient } from '@/lib/supabase/client'; import { Button } from '@/components/ui/button'; import { Input } from '@/components/ui/input'; import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'; import { Textarea } from '@/components/ui/textarea'; import { Trash2, Plus } from 'lucide-react'; type LineItem = { id: string; description: string; quantity: number; unit_price: number; }; export default function NewInvoicePage() { const router = useRouter(); const supabase = createClient(); const [clientId, setClientId] = useState(''); const [taxRate, setTaxRate] = useState(0); const [notes, setNotes] = useState(''); const [items, setItems] = useState([ { id: crypto.randomUUID(), description: '', quantity: 1, unit_price: 0 } ]); const [saving, setSaving] = useState(false); const subtotal = items.reduce((sum, item) => sum + item.quantity * item.unit_price, 0); const taxAmount = subtotal * taxRate / 100; const total = subtotal + taxAmount; function addItem() { setItems([...items, { id: crypto.randomUUID(), description: '', quantity: 1, unit_price: 0 }]); } function removeItem(id: string) { if (items.length > 1) setItems(items.filter(i => i.id !== id)); } function updateItem(id: string, field: keyof LineItem, value: string | number) { setItems(items.map(i => i.id === id ? { ...i, [field]: value } : i)); } async function handleSubmit() { setSaving(true); const { data: { user } } = await supabase.auth.getUser(); if (!user) return; // Get next invoice number via RPC const { data: invoiceNumber } = await supabase.rpc('next_invoice_number', { p_user_id: user.id }); // Create invoice const { data: invoice, error } = await supabase.from('invoices').insert({ user_id: user.id, client_id: clientId, invoice_number: invoiceNumber, subtotal, tax_rate: taxRate, notes }).select().single(); if (error || !invoice) { setSaving(false); return; } // Insert line items await supabase.from('line_items').insert( items.map(item => ({ invoice_id: invoice.id, description: item.description, quantity: item.quantity, unit_price: item.unit_price })) ); router.push(`/invoices/${invoice.id}`); } return (
New Invoice
setTaxRate(Number(e.target.value))} />
Description Qty Unit Price Amount {items.map(item => ( updateItem(item.id, 'description', e.target.value)} /> updateItem(item.id, 'quantity', Number(e.target.value))} /> updateItem(item.id, 'unit_price', Number(e.target.value))} /> ${(item.quantity * item.unit_price).toFixed(2)} ))}