Build a Billing System in Lovable

Build a B2B billing system. Stack: React + Vite + TypeScript + Tailwind + shadcn/ui (already scaffolded), React Router v6 for routes, Supabase JS client against Lovable Cloud.

## Database schema (one migration)

IMPORTANT: Create the sequence BEFORE the invoices table:
`CREATE SEQUENCE IF NOT EXISTS invoices_seq START 1;`

Create six tables in the public schema:

1. `profiles` — id uuid PK references auth.users.id, full_name text, email text not null, role text default 'admin' check in ('admin','finance','viewer'), created_at timestamptz default now(). RLS: own read; role enforced via JWT app_metadata.

2. `customers` — id uuid PK default gen_random_uuid(), display_name text not null, billing_email text not null, billing_address jsonb, tax_id text, currency text default 'USD' check in ('USD','EUR','GBP','CAD','AUD'), stripe_customer_id text, payment_terms_days int default 30, created_at timestamptz default now(). RLS: admin/finance read/write; viewer read-only.

3. `invoices` — id uuid PK default gen_random_uuid(), invoice_number text unique (NULL until finalize — DO NOT set as DEFAULT from sequence), customer_id uuid not null references customers(id), status text not null default 'draft' check in ('draft','sent','paid','overdue','void','refunded'), currency text not null default 'USD', subtotal_cents int not null default 0, tax_cents int not null default 0, total_cents int not null default 0, issued_at timestamptz, due_at timestamptz, paid_at timestamptz, void_reason text, notes text, pdf_storage_path text, stripe_payment_link_url text, created_at timestamptz default now(). RLS: admin/finance all; viewer read.

4. `line_items` — id uuid PK, invoice_id uuid not null references invoices(id) on delete cascade, description text not null, quantity numeric not null default 1, unit_price_cents int not null, amount_cents int not null (= ROUND(quantity * unit_price_cents), computed and stored — never calculated in JS), position int default 0, created_at timestamptz default now(). RLS: same as parent invoice. ADD CONSTRAINT: a BEFORE INSERT/UPDATE trigger on line_items that RAISEs EXCEPTION if the parent invoice.status != 'draft'.

5. `payments` — id uuid PK, invoice_id uuid not null references invoices(id), stripe_payment_intent_id text unique, amount_cents int not null, currency text not null, status text check in ('succeeded','pending','failed','refunded'), paid_at timestamptz, payment_method text, created_at timestamptz default now(). RLS: admin/finance all; webhook-only write via SECURITY DEFINER.

6. `stripe_events` — id uuid PK, stripe_event_id text unique not null, event_type text not null, received_at timestamptz default now(), processed_at timestamptz. RLS: no client access; webhook-only writes.

## Required functions and triggers

Create as part of the migration:

A. `has_role(check_role text) RETURNS boolean LANGUAGE plpgsql SECURITY DEFINER STABLE` — reads `(auth.jwt() -> 'app_metadata' ->> 'role') = check_role`.

B. `finalize_invoice(p_invoice_id uuid) RETURNS text LANGUAGE plpgsql SECURITY DEFINER` — assigns gap-free invoice number and transitions status:
```sql
CREATE FUNCTION finalize_invoice(p_invoice_id uuid) RETURNS text LANGUAGE plpgsql SECURITY DEFINER AS $$
DECLARE new_num text;
BEGIN
  SELECT 'INV-' || extract(year from now())::text || '-' || lpad(nextval('invoices_seq')::text, 5, '0') INTO new_num;
  UPDATE invoices
    SET invoice_number = new_num,
        status = 'sent',
        issued_at = now(),
        due_at = now() + (SELECT payment_terms_days * interval '1 day' FROM customers WHERE id = customer_id)
    WHERE id = p_invoice_id AND status = 'draft' AND invoice_number IS NULL;
  IF NOT FOUND THEN RAISE EXCEPTION 'Invoice not found, not draft, or already finalized'; END IF;
  RETURN new_num;
END; $$;
```

C. `apply_payment(p_invoice_id uuid, p_pi_id text, p_amount_cents int) RETURNS void LANGUAGE plpgsql SECURITY DEFINER` — inserts payments row + transitions invoice to 'paid'.

D. Trigger `line_items_draft_only` BEFORE INSERT OR UPDATE OR DELETE ON line_items — if parent invoice.status != 'draft', RAISE EXCEPTION 'Cannot modify line items on a finalized invoice'.

Seed: 1 customer + 1 draft invoice with 2 line items.

## Layout

Create `src/layouts/AppLayout.tsx` — fixed left sidebar (240px) with nav: Dashboard, Invoices, Customers, Payments, Settings + bottom user menu. Main area with breadcrumbs and filter bar in top-right.

Create `src/components/AdminGuard.tsx` — wraps AppLayout routes; checks JWT app_metadata.role IN ('admin','finance'); redirects to /login if not authorized.

## Pages

Create routes in src/App.tsx:
- `/login` (Login.tsx) — sign in form
- `/dashboard` (Dashboard.tsx) — 3 metric cards: outstanding receivables (SUM total_cents WHERE status IN ('sent','overdue')), paid this month, overdue count
- `/invoices` (InvoicesList.tsx) — table with status chips, customer name, total, due date; filter by status and customer
- `/invoices/new` (InvoiceNew.tsx) — CustomerPicker combobox + notes + currency dropdown; on submit creates draft invoice and redirects to /invoices/:id
- `/invoices/:id` (InvoiceView.tsx) — EITHER edit mode (status='draft': editable InvoiceEditor with line items) OR view mode (status='sent'/'paid': read-only thread with Finalize/Void/Mark Paid buttons). Finalize button calls finalize_invoice() RPC then calls finalize-invoice Edge Function for Stripe Payment Link and PDF generation.
- `/customers` (CustomersList.tsx) — CRUD table of customers
- `/customers/:id` (CustomerView.tsx) — customer detail with invoice history and total revenue
- `/payments` (PaymentsLog.tsx) — log of all payments with filter by customer and date
- `/settings` (Settings.tsx) — org name, from-email, default currency, invoice number prefix, payment terms default
- `/pay/:invoiceNumber` (PublicInvoiceView.tsx) — PUBLIC route, no auth required. Read invoice by invoice_number, verify signed token in query string (?token=), display invoice line items + total + 'Pay Now' button that redirects to stripe_payment_link_url. Render 404 if token missing or invalid — do not confirm the invoice exists without a valid token.

## Components

Build:
- `InvoiceTable` — sortable/filterable invoice list with StatusChip and customer name
- `InvoiceEditor` — sortable line items rows with description, quantity (number input), unit price (CurrencyInput), amount (computed display). Auto-recalculates subtotal_cents + tax_cents + total_cents on every change. Saves on blur.
- `StatusChip` — gray draft / blue sent / emerald paid / rose overdue / amber void
- `CustomerPicker` — combobox (shadcn Command) searching customers by display_name or billing_email
- `CurrencyInput` — dollar/cent input that converts to integer cents on blur (Math.round(value * 100)); never uses parseFloat on stored values
- `AmountDisplay` — formats cents to currency string: (amount_cents / 100).toLocaleString(locale, {style:'currency', currency: invoice.currency})
- `PayButton` — links to stripe_payment_link_url; disabled with tooltip if invoice not yet finalized

## Edge Functions

Scaffold four functions in supabase/functions/:

1. `finalize-invoice/index.ts` — after finalize_invoice() RPC assigns number: creates Stripe Payment Link, calls generate-pdf to get PDF, uploads to invoice-pdfs/${customer_id}/${invoice_id}.pdf, sends Resend invoice email to customer's billing_email with PDF attachment and payment link.

2. `stripe-webhook/index.ts` — reads `const body = await req.text()`; validates `await stripe.webhooks.constructEventAsync(body, sig, secret)`; idempotency check against stripe_events; on payment_intent.succeeded calls apply_payment() RPC.

3. `generate-pdf/index.ts` — accepts invoice JSON, renders HTML template, converts to PDF via @pdf-lib (pure JS, no browser) and returns the PDF buffer.

4. `send-dunning-email/index.ts` — scheduled cron function; queries invoices WHERE status='sent' AND due_at < now(); groups by days_overdue (3/7/14/30); updates status to 'overdue' on first detection; sends Resend dunning email per escalation stage.

## Styling
Light + dark mode via shadcn ThemeProvider. Primary color emerald-600 (money). Status chips as above. Amount columns right-aligned, monospaced (font-mono). Invoice editor rows: compact 40px density. PDF preview sidebar: 320px fixed panel with iframe showing signed URL to generated PDF.