import { requireWorkspaceRole } from "@/lib/rbac"; import { createFileRoute } from "@tanstack/react-router"; import { useState, useMemo, useEffect } from "react"; import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"; import { useServerFn } from "@tanstack/react-start"; import { FileText, Plus, Printer, Download, Mail, Trash2, CheckCircle2, XCircle, Search, Palette, Loader2, Receipt, RefreshCw, FileMinus, } from "lucide-react"; import { toast } from "sonner"; import { AppTopbar } from "@/components/app/app-topbar"; import { useActiveOrganization } from "@/hooks/use-organization"; import { Button } from "@/components/ui/button"; import { Badge } from "@/components/ui/badge"; import { Card } from "@/components/ui/card"; import { Input } from "@/components/ui/input"; import { DatePicker, fromDateString, toDateString } from "@/shared/components"; import { Label } from "@/components/ui/label"; import { Checkbox } from "@/components/ui/checkbox"; import { Textarea } from "@/components/ui/textarea"; import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs"; import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell, } from "@/components/ui/table"; import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogTrigger, DialogDescription, } from "@/components/ui/dialog"; import { Sheet, SheetContent, SheetHeader, SheetTitle } from "@/components/ui/sheet"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select"; import { ScrollArea } from "@/components/ui/scroll-area"; import { listBillingDocuments, getBillingDocument, createBillingDocument, issueBillingDocument, voidBillingDocument, markDocumentSent, deleteBillingDocument, listDocumentTemplates, upsertDocumentTemplate, listTaxRates, } from "@/lib/billing/documents.functions"; import { downloadDocumentPdf, printDocumentPdf, type DocumentLike, type TemplateLike, } from "@/lib/billing/document-pdf"; import { useTenantCurrency } from "@/hooks/use-currency"; import { useTenantTimezone, useZonedDateFormatter } from "@/hooks/use-timezone"; import { formatInTimezone } from "@/lib/datetime/timezone"; export const Route = createFileRoute("/_authenticated/billing-documents")({ beforeLoad: requireWorkspaceRole("owner", "admin"), staticData: { breadcrumb: "Billing Documents" }, head: () => ({ meta: [ { title: "Billing Documents" }, { name: "description", content: "Manage invoices, credit notes, receipts, and refund receipts with branded templates, tax rules, and localization.", }, ], }), component: BillingDocumentsPage, }); type DocType = "invoice" | "credit_note" | "receipt" | "refund_receipt"; const DOC_ICONS: Record = { invoice: FileText, credit_note: FileMinus, receipt: Receipt, refund_receipt: RefreshCw, }; const DOC_LABELS: Record = { invoice: "Invoices", credit_note: "Credit notes", receipt: "Receipts", refund_receipt: "Refund receipts", }; const LOCALES = [ { value: "en-US", label: "English (US)" }, { value: "en-GB", label: "English (UK)" }, { value: "de-DE", label: "Deutsch" }, { value: "es-ES", label: "Español" }, { value: "fr-FR", label: "Français" }, { value: "pt-BR", label: "Português (BR)" }, { value: "it-IT", label: "Italiano" }, { value: "nb-NO", label: "Norsk" }, { value: "hi-IN", label: "हिन्दी" }, { value: "ar-SA", label: "العربية" }, ]; const CURRENCIES = [ "USD", "EUR", "GBP", "ZAR", "INR", "NOK", "SEK", "AUD", "CAD", "BRL", "AED", "SGD", "JPY", "CHF", "NZD", "HKD", "MXN", "NGN", "KES", "GHS", "ZMW", ]; function money(cents: number, currency: string, locale = "en-US") { return new Intl.NumberFormat(locale, { style: "currency", currency }).format(cents / 100); } function statusBadge(status: string) { const variants: Record = { draft: "bg-muted text-muted-foreground", issued: "bg-blue-500/15 text-blue-600 dark:text-blue-400", sent: "bg-purple-500/15 text-purple-600 dark:text-purple-400", paid: "bg-emerald-500/15 text-emerald-600 dark:text-emerald-400", void: "bg-red-500/15 text-red-600 dark:text-red-400", refunded: "bg-amber-500/15 text-amber-600 dark:text-amber-400", }; return ( {status} ); } function BillingDocumentsPage() { const tz = useTenantTimezone(); const { active: org } = useActiveOrganization(); const qc = useQueryClient(); const [tab, setTab] = useState("invoice"); const [search, setSearch] = useState(""); const [openNew, setOpenNew] = useState(false); const [openTpl, setOpenTpl] = useState(false); const [selectedId, setSelectedId] = useState(null); const listFn = useServerFn(listBillingDocuments); const tplListFn = useServerFn(listDocumentTemplates); const ratesFn = useServerFn(listTaxRates); const documents = useQuery({ queryKey: ["billing-documents", org?.id, tab, search], enabled: !!org?.id, queryFn: () => listFn({ data: { organization_id: org!.id, type: tab, search: search || undefined } }), }); const templates = useQuery({ queryKey: ["billing-doc-templates", org?.id], enabled: !!org?.id, queryFn: () => tplListFn({ data: { organization_id: org!.id } }), }); const taxRates = useQuery({ queryKey: ["tax-rates"], queryFn: () => ratesFn() }); const refresh = () => { qc.invalidateQueries({ queryKey: ["billing-documents"] }); qc.invalidateQueries({ queryKey: ["billing-doc-templates"] }); }; return (
setSearch(e.target.value)} />
setTab(v as DocType)}> {(Object.keys(DOC_LABELS) as DocType[]).map((t) => { const Icon = DOC_ICONS[t]; return ( {DOC_LABELS[t]} ); })} {(Object.keys(DOC_LABELS) as DocType[]).map((t) => ( {documents.isLoading ? (
) : (documents.data ?? []).length === 0 ? (

No {DOC_LABELS[t].toLowerCase()} yet.

) : ( Number Customer Issued Status Total {(documents.data ?? []).map((d: any) => ( setSelectedId(d.id)} > {d.number}
{d.customer_name ?? "—"}
{d.customer_email && (
{d.customer_email}
)} {formatInTimezone( d.issued_at ?? d.created_at, tz, { dateStyle: "medium" }, d.locale, )} {statusBadge(d.status)} {money(d.total_cents, d.currency, d.locale)} ))}
)} ))}
{openNew && org && ( { setOpenNew(false); refresh(); }} /> )} {openTpl && org && ( )} {selectedId && ( setSelectedId(null)} onChanged={refresh} /> )}
); } // -------------------- New Document Dialog -------------------- interface LineDraft { description: string; quantity: number; unit_amount_cents: number; tax_rate_id?: string | null; } function NewDocumentDialog({ open, onOpenChange, organizationId, defaultType, templates, taxRates, onCreated, }: { open: boolean; onOpenChange: (v: boolean) => void; organizationId: string; defaultType: DocType; templates: any[]; taxRates: any[]; onCreated: () => void; }) { const [type, setType] = useState(defaultType); const [templateId, setTemplateId] = useState( templates.find((t) => t.is_default)?.id ?? "", ); const tenantCurrency = useTenantCurrency(); const [customerName, setCustomerName] = useState(""); const [customerEmail, setCustomerEmail] = useState(""); const [customerTaxId, setCustomerTaxId] = useState(""); const [currency, setCurrency] = useState(tenantCurrency); // Sync currency when org data loads asynchronously (useState initial value // is captured at first render before the org query resolves). useEffect(() => { setCurrency(tenantCurrency); }, [tenantCurrency]); const [locale, setLocale] = useState("en-US"); const [notes, setNotes] = useState(""); const [dueAt, setDueAt] = useState(""); const [discount, setDiscount] = useState(0); const [taxExempt, setTaxExempt] = useState(false); const [items, setItems] = useState([ { description: "", quantity: 1, unit_amount_cents: 0, tax_rate_id: null }, ]); const createFn = useServerFn(createBillingDocument); const issueFn = useServerFn(issueBillingDocument); const totals = useMemo(() => { let sub = 0; let tax = 0; for (const it of items) { const line = Math.round(it.quantity * it.unit_amount_cents); sub += line; if (!taxExempt && it.tax_rate_id) { const r = taxRates.find((t) => t.id === it.tax_rate_id); if (r) tax += Math.round((line * Number(r.rate_percent)) / 100); } } return { sub, tax, total: sub - discount + tax }; }, [items, discount, taxExempt, taxRates]); const create = useMutation({ mutationFn: async (issue: boolean) => { const doc = await createFn({ data: { organization_id: organizationId, type, template_id: templateId || undefined, customer_name: customerName || undefined, customer_email: customerEmail || undefined, customer_tax_id: customerTaxId || undefined, currency, locale, discount_cents: discount, line_items: items .filter((i) => i.description) .map((i) => ({ description: i.description, quantity: Number(i.quantity), unit_amount_cents: Number(i.unit_amount_cents), tax_rate_id: i.tax_rate_id || undefined, })), notes: notes || undefined, due_at: dueAt ? new Date(dueAt).toISOString() : undefined, tax_exempt: taxExempt, }, }); if (issue) await issueFn({ data: { id: (doc as any).id } }); return doc; }, onSuccess: () => { toast.success("Document created"); onCreated(); }, onError: (e: any) => toast.error(e?.message ?? "Failed"), }); return ( New billing document Create an invoice, credit note, receipt, or refund receipt with tax and localization.
setCustomerName(e.target.value)} />
setCustomerEmail(e.target.value)} />
setCustomerTaxId(e.target.value)} />
setDueAt(toDateString(d))} />
setTaxExempt(v === true)} />
{items.map((it, idx) => (
setItems((s) => s.map((r, i) => (i === idx ? { ...r, description: e.target.value } : r)), ) } /> setItems((s) => s.map((r, i) => (i === idx ? { ...r, quantity: Number(e.target.value) } : r)), ) } /> setItems((s) => s.map((r, i) => i === idx ? { ...r, unit_amount_cents: Math.round(Number(e.target.value) * 100) } : r, ), ) } />
))}
setDiscount(Math.round(Number(e.target.value) * 100))} />