create-crm-starter 0.1.0

package/template/extras/estimates-invoices/_shared/src/app/(dashboard)/invoices/[id]/page.tsx

@@ -0,0 +1,168 @@
+import Link from 'next/link';
+import { notFound } from 'next/navigation';
+import { Badge } from '@/components/ui/badge';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { getInvoice } from '@/lib/invoices/data';
+import {
+  INVOICE_STATUS_LABEL,
+  INVOICE_STATUS_VARIANT,
+  PAYMENT_METHOD_LABEL,
+} from '@/lib/invoices/types';
+import { PayInvoiceButton } from '@/components/invoices/pay-invoice-button';
+import { SendInvoiceEmailButton } from '@/components/invoices/send-invoice-email-button';
+import { formatCurrency, formatDate } from '@/lib/utils';
+
+interface PageProps { params: Promise<{ id: string }>; }
+
+export default async function InvoiceDetailPage({ params }: PageProps) {
+  const { id } = await params;
+  const invoice = await getInvoice(id);
+  if (!invoice) notFound();
+
+  const overdueDays =
+    invoice.dueDate && invoice.amountDue > 0 && new Date(invoice.dueDate) < new Date()
+      ? Math.floor((Date.now() - new Date(invoice.dueDate).getTime()) / 86_400_000)
+      : 0;
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <Link href="/invoices" className="text-muted-foreground text-sm hover:underline">← Invoices</Link>
+        <div className="mt-1 flex items-center gap-3">
+          <h1 className="text-3xl font-bold tracking-tight">{invoice.invoiceNumber}</h1>
+          <Badge variant={INVOICE_STATUS_VARIANT[invoice.status]}>
+            {INVOICE_STATUS_LABEL[invoice.status]}
+          </Badge>
+          <div className="ml-auto flex items-center gap-2">
+            <SendInvoiceEmailButton invoiceId={invoice.id} />
+            {invoice.amountDue > 0 && (
+              <PayInvoiceButton invoiceId={invoice.id} amountDue={invoice.amountDue} />
+            )}
+          </div>
+        </div>
+        <Link href={`/customers/${invoice.customerId}`} className="text-muted-foreground hover:underline">
+          {invoice.customerName}
+        </Link>
+        {invoice.jobId && (
+          <span className="text-muted-foreground ml-2 text-sm">
+            · from <Link href={`/jobs/${invoice.jobId}`} className="underline">job #{invoice.jobId.slice(-6)}</Link>
+          </span>
+        )}
+      </div>
+      <div className="grid grid-cols-1 gap-4 md:grid-cols-4">
+        <Card>
+          <CardHeader><CardTitle className="text-sm font-medium">Total</CardTitle></CardHeader>
+          <CardContent className="text-2xl font-bold">{formatCurrency(invoice.total)}</CardContent>
+        </Card>
+        <Card>
+          <CardHeader><CardTitle className="text-sm font-medium">Paid</CardTitle></CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold text-emerald-600">{formatCurrency(invoice.amountPaid)}</div>
+            <div className="text-muted-foreground mt-1 text-xs">
+              {invoice.total > 0
+                ? Math.round((invoice.amountPaid / invoice.total) * 100)
+                : 0}% of total
+            </div>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader><CardTitle className="text-sm font-medium">Due now</CardTitle></CardHeader>
+          <CardContent>
+            <div className={`text-2xl font-bold ${invoice.amountDue > 0 && invoice.status === 'overdue' ? 'text-destructive' : ''}`}>
+              {formatCurrency(invoice.amountDue)}
+            </div>
+            {overdueDays > 0 && (
+              <div className="text-destructive mt-1 text-xs font-bold">
+                {overdueDays} day{overdueDays === 1 ? '' : 's'} overdue
+              </div>
+            )}
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader><CardTitle className="text-sm font-medium">Due date</CardTitle></CardHeader>
+          <CardContent className="text-sm">
+            {invoice.dueDate ? (
+              <div className="font-medium">{formatDate(invoice.dueDate)}</div>
+            ) : (
+              <span className="text-muted-foreground">No due date</span>
+            )}
+            {invoice.sentAt && (
+              <div className="text-muted-foreground mt-1 text-xs">Sent {formatDate(invoice.sentAt)}</div>
+            )}
+            {invoice.paidAt && (
+              <div className="text-emerald-600 mt-1 text-xs">Paid {formatDate(invoice.paidAt)}</div>
+            )}
+          </CardContent>
+        </Card>
+      </div>
+      <Card>
+        <CardHeader><CardTitle>Line items</CardTitle></CardHeader>
+        <CardContent className="p-0">
+          <table className="w-full text-sm">
+            <thead className="text-muted-foreground bg-muted/50 text-xs uppercase">
+              <tr>
+                <th className="px-4 py-3 text-left font-medium">Description</th>
+                <th className="px-4 py-3 text-right font-medium">Qty</th>
+                <th className="px-4 py-3 text-right font-medium">Unit price</th>
+                <th className="px-4 py-3 text-right font-medium">Subtotal</th>
+              </tr>
+            </thead>
+            <tbody className="divide-border divide-y">
+              {invoice.lineItems.map((li, i) => (
+                <tr key={i}>
+                  <td className="px-4 py-3">{li.description}</td>
+                  <td className="px-4 py-3 text-right">{li.qty}</td>
+                  <td className="px-4 py-3 text-right">{formatCurrency(li.unitPrice)}</td>
+                  <td className="px-4 py-3 text-right font-medium">{formatCurrency(li.qty * li.unitPrice)}</td>
+                </tr>
+              ))}
+            </tbody>
+            <tfoot className="bg-muted/30">
+              <tr>
+                <td colSpan={3} className="px-4 py-3 text-right text-muted-foreground">Total</td>
+                <td className="px-4 py-3 text-right font-bold">{formatCurrency(invoice.total)}</td>
+              </tr>
+            </tfoot>
+          </table>
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle>Payments ({invoice.payments.length})</CardTitle>
+        </CardHeader>
+        <CardContent>
+          {invoice.payments.length === 0 ? (
+            <p className="text-muted-foreground text-sm">No payments yet.</p>
+          ) : (
+            <table className="w-full text-sm">
+              <thead className="text-muted-foreground text-xs uppercase">
+                <tr>
+                  <th className="py-2 text-left font-medium">Date</th>
+                  <th className="py-2 text-left font-medium">Method</th>
+                  <th className="py-2 text-left font-medium">Note</th>
+                  <th className="py-2 text-right font-medium">Amount</th>
+                </tr>
+              </thead>
+              <tbody className="divide-border divide-y">
+                {invoice.payments.map((p) => (
+                  <tr key={p.id}>
+                    <td className="text-muted-foreground py-2">{formatDate(p.recordedAt)}</td>
+                    <td className="py-2">{PAYMENT_METHOD_LABEL[p.method]}</td>
+                    <td className="text-muted-foreground py-2 text-xs">{p.note ?? '—'}</td>
+                    <td className="py-2 text-right font-medium">{formatCurrency(p.amount)}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          )}
+        </CardContent>
+      </Card>
+      {invoice.notes && (
+        <Card>
+          <CardHeader><CardTitle>Notes</CardTitle></CardHeader>
+          <CardContent className="text-sm whitespace-pre-wrap">{invoice.notes}</CardContent>
+        </Card>
+      )}
+    </div>
+  );
+}

package/template/extras/estimates-invoices/_shared/src/app/(dashboard)/invoices/page.tsx

@@ -0,0 +1,100 @@
+import Link from 'next/link';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { getInvoices } from '@/lib/invoices/data';
+import { INVOICE_STATUS_LABEL, INVOICE_STATUS_VARIANT } from '@/lib/invoices/types';
+import { formatCurrency, formatDate } from '@/lib/utils';
+
+export default async function InvoicesPage() {
+  const invoices = await getInvoices();
+  const ar = invoices
+    .filter((i) => i.status !== 'paid' && i.status !== 'void' && i.status !== 'draft')
+    .reduce((acc, i) => acc + i.amountDue, 0);
+  const overdue = invoices
+    .filter((i) => i.status === 'overdue')
+    .reduce((acc, i) => acc + i.amountDue, 0);
+  const collected = invoices.reduce((acc, i) => acc + i.amountPaid, 0);
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-3xl font-bold tracking-tight">Invoices</h1>
+          <p className="text-muted-foreground mt-1 text-sm">{invoices.length} total</p>
+        </div>
+      </div>
+      <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
+        <Card>
+          <CardHeader><CardTitle className="text-base">Open A/R</CardTitle></CardHeader>
+          <CardContent>
+            <div className="text-3xl font-bold">{formatCurrency(ar)}</div>
+            <p className="text-muted-foreground mt-1 text-xs">Sent + partially-paid + overdue</p>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader><CardTitle className="text-base">Overdue</CardTitle></CardHeader>
+          <CardContent>
+            <div className={`text-3xl font-bold ${overdue > 0 ? 'text-destructive' : ''}`}>
+              {formatCurrency(overdue)}
+            </div>
+            <p className="text-muted-foreground mt-1 text-xs">Past due date</p>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader><CardTitle className="text-base">Collected</CardTitle></CardHeader>
+          <CardContent>
+            <div className="text-3xl font-bold">{formatCurrency(collected)}</div>
+            <p className="text-muted-foreground mt-1 text-xs">All-time across all invoices</p>
+          </CardContent>
+        </Card>
+      </div>
+      <Card>
+        <CardHeader><CardTitle>All invoices</CardTitle></CardHeader>
+        <CardContent className="p-0">
+          <table className="w-full text-sm">
+            <thead className="bg-muted/50 text-muted-foreground text-xs uppercase">
+              <tr>
+                <th className="px-4 py-3 text-left font-medium">Invoice #</th>
+                <th className="px-4 py-3 text-left font-medium">Customer</th>
+                <th className="px-4 py-3 text-left font-medium">Status</th>
+                <th className="px-4 py-3 text-left font-medium">Due</th>
+                <th className="px-4 py-3 text-right font-medium">Total</th>
+                <th className="px-4 py-3 text-right font-medium">Due now</th>
+              </tr>
+            </thead>
+            <tbody className="divide-border divide-y">
+              {invoices.map((i) => (
+                <tr key={i.id} className="hover:bg-muted/30">
+                  <td className="px-4 py-3 font-mono text-xs">
+                    <Link href={`/invoices/${i.id}`} className="hover:underline font-medium">
+                      {i.invoiceNumber}
+                    </Link>
+                  </td>
+                  <td className="px-4 py-3">{i.customerName}</td>
+                  <td className="px-4 py-3">
+                    <Badge variant={INVOICE_STATUS_VARIANT[i.status]}>
+                      {INVOICE_STATUS_LABEL[i.status]}
+                    </Badge>
+                  </td>
+                  <td className="text-muted-foreground px-4 py-3">
+                    {i.dueDate ? formatDate(i.dueDate) : '—'}
+                  </td>
+                  <td className="px-4 py-3 text-right">{formatCurrency(i.total)}</td>
+                  <td className="px-4 py-3 text-right">
+                    {i.amountDue > 0 ? (
+                      <span className={i.status === 'overdue' ? 'text-destructive font-bold' : 'font-medium'}>
+                        {formatCurrency(i.amountDue)}
+                      </span>
+                    ) : (
+                      <span className="text-muted-foreground">—</span>
+                    )}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

package/template/extras/estimates-invoices/_shared/src/components/estimates/convert-to-job-button.tsx

@@ -0,0 +1,14 @@
+import { Button } from '@/components/ui/button';
+
+/**
+ * Default stub for Convex / sample-data. Disabled. Drizzle's installer
+ * overwrites this with a working server-action-backed version.
+ */
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export function ConvertToJobButton({ estimateId }: { estimateId: string }) {
+  return (
+    <Button size="sm" variant="outline" disabled title="Wire to your stack to enable">
+      Convert to job
+    </Button>
+  );
+}

package/template/extras/estimates-invoices/_shared/src/components/invoices/pay-invoice-button.tsx

@@ -0,0 +1,15 @@
+import { Button } from '@/components/ui/button';
+import { formatCurrency } from '@/lib/utils';
+
+/**
+ * Default stub for Convex / sample-data. Disabled. Drizzle's installer
+ * overwrites this with a Stripe-Checkout-backed version.
+ */
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export function PayInvoiceButton({ invoiceId, amountDue }: { invoiceId: string; amountDue: number }) {
+  return (
+    <Button size="sm" variant="outline" disabled title="Wire to your stack to enable">
+      Pay {formatCurrency(amountDue)}
+    </Button>
+  );
+}

package/template/extras/estimates-invoices/_shared/src/components/invoices/send-invoice-email-button.tsx

@@ -0,0 +1,14 @@
+import { Button } from '@/components/ui/button';
+
+/**
+ * Default stub for Convex / sample-data. Disabled. Drizzle's installer
+ * overwrites this with a Resend-backed working version.
+ */
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export function SendInvoiceEmailButton({ invoiceId }: { invoiceId: string }) {
+  return (
+    <Button size="sm" variant="outline" disabled title="Wire to your stack to enable">
+      Email invoice
+    </Button>
+  );
+}

package/template/extras/estimates-invoices/_shared/src/lib/estimates/data.ts

@@ -0,0 +1,14 @@
+/**
+ * Default data source — returns sample estimates. Stack-specific installers
+ * (Drizzle / Convex) OVERWRITE this file with real DB queries.
+ */
+import { sampleEstimates } from './sample-data';
+import type { Estimate } from './types';
+
+export async function getEstimates(): Promise<Estimate[]> {
+  return sampleEstimates;
+}
+
+export async function getEstimate(id: string): Promise<Estimate | null> {
+  return sampleEstimates.find((e) => e.id === id) ?? null;
+}

package/template/extras/estimates-invoices/_shared/src/lib/estimates/sample-data.ts

@@ -0,0 +1,74 @@
+import type { Estimate } from './types';
+
+export const sampleEstimates: Estimate[] = [
+  {
+    id: 'est_001',
+    customerId: 'cus_001',
+    customerName: 'Acme Property Management',
+    status: 'sent',
+    lineItems: [
+      { description: 'AC condenser replacement (3 ton)', qty: 1, unitPrice: 320000, unitCost: 195000, taxable: true },
+      { description: 'Refrigerant (R-410A, 6 lb)', qty: 6, unitPrice: 10750, unitCost: 4500, taxable: true },
+    ],
+    subtotal: 384500,
+    total: 384500,
+    totalCost: 222000,
+    margin: 162500,
+    marginPct: 42,
+    sentAt: '2026-05-22T10:00:00Z',
+    validUntil: '2026-06-21T23:59:59Z',
+    createdAt: '2026-05-22T09:30:00Z',
+  },
+  {
+    id: 'est_002',
+    customerId: 'cus_004',
+    customerName: 'Priya Patel',
+    status: 'draft',
+    lineItems: [
+      { description: 'Tankless water heater install', qty: 1, unitPrice: 142000, unitCost: 91000, taxable: true },
+    ],
+    subtotal: 142000,
+    total: 142000,
+    totalCost: 91000,
+    margin: 51000,
+    marginPct: 36,
+    createdAt: '2026-05-23T14:00:00Z',
+  },
+  {
+    id: 'est_003',
+    customerId: 'cus_003',
+    customerName: 'Mason Hardware Co.',
+    status: 'approved',
+    lineItems: [
+      { description: 'Walk-in cooler — full install', qty: 1, unitPrice: 950000, unitCost: 612000, taxable: true },
+      { description: 'Permit + inspection', qty: 1, unitPrice: 75000, unitCost: 18000, taxable: false },
+      { description: 'Annual service plan (yr 1)', qty: 1, unitPrice: 262000, unitCost: 80000, taxable: false },
+    ],
+    subtotal: 1287000,
+    total: 1287000,
+    totalCost: 710000,
+    margin: 577000,
+    marginPct: 45,
+    sentAt: '2026-05-15T11:00:00Z',
+    approvedAt: '2026-05-20T16:42:00Z',
+    validUntil: '2026-06-15T23:59:59Z',
+    createdAt: '2026-05-15T10:30:00Z',
+  },
+  {
+    id: 'est_004',
+    customerId: 'cus_002',
+    customerName: 'Jamie Rodriguez',
+    status: 'expired',
+    lineItems: [
+      { description: 'Capacitor + recharge', qty: 1, unitPrice: 62500, unitCost: 28000, taxable: true },
+    ],
+    subtotal: 62500,
+    total: 62500,
+    totalCost: 28000,
+    margin: 34500,
+    marginPct: 55,
+    sentAt: '2026-04-15T09:00:00Z',
+    validUntil: '2026-05-15T23:59:59Z',
+    createdAt: '2026-04-15T08:30:00Z',
+  },
+];

package/template/extras/estimates-invoices/_shared/src/lib/estimates/types.ts

@@ -0,0 +1,60 @@
+export const ESTIMATE_STATUSES = [
+  'draft',
+  'sent',
+  'viewed',
+  'approved',
+  'declined',
+  'expired',
+  'converted',
+] as const;
+export type EstimateStatus = (typeof ESTIMATE_STATUSES)[number];
+
+export const ESTIMATE_STATUS_LABEL: Record<EstimateStatus, string> = {
+  draft: 'Draft',
+  sent: 'Sent',
+  viewed: 'Viewed',
+  approved: 'Approved',
+  declined: 'Declined',
+  expired: 'Expired',
+  converted: 'Converted to job',
+};
+
+export const ESTIMATE_STATUS_VARIANT: Record<
+  EstimateStatus,
+  'default' | 'secondary' | 'destructive' | 'outline'
+> = {
+  draft: 'outline',
+  sent: 'secondary',
+  viewed: 'secondary',
+  approved: 'default',
+  declined: 'destructive',
+  expired: 'destructive',
+  converted: 'default',
+};
+
+export interface EstimateLineItem {
+  description: string;
+  qty: number;
+  unitPrice: number; // cents
+  unitCost?: number; // cents — used for live margin display
+  taxable?: boolean;
+}
+
+export interface Estimate {
+  id: string;
+  customerId: string;
+  customerName: string;
+  status: EstimateStatus;
+  lineItems: EstimateLineItem[];
+  subtotal: number; // cents (sum of qty × unitPrice)
+  total: number;    // cents (subtotal + tax, less discount)
+  totalCost: number; // cents (sum of qty × unitCost)
+  margin: number;    // cents (total - totalCost)
+  marginPct: number; // 0-100 (margin / total × 100, 0 if total is 0)
+  notes?: string;
+  validUntil?: string; // ISO
+  sentAt?: string;     // ISO
+  approvedAt?: string; // ISO
+  convertedJobId?: string;
+  createdAt: string;   // ISO
+}

package/template/extras/estimates-invoices/_shared/src/lib/invoices/data.ts

@@ -0,0 +1,14 @@
+/**
+ * Default data source — returns sample invoices. Stack-specific installers
+ * (Drizzle / Convex) OVERWRITE this file with real DB queries.
+ */
+import { sampleInvoices } from './sample-data';
+import type { Invoice } from './types';
+
+export async function getInvoices(): Promise<Invoice[]> {
+  return sampleInvoices;
+}
+
+export async function getInvoice(id: string): Promise<Invoice | null> {
+  return sampleInvoices.find((i) => i.id === id) ?? null;
+}

package/template/extras/estimates-invoices/_shared/src/lib/invoices/sample-data.ts

@@ -0,0 +1,83 @@
+import type { Invoice } from './types';
+
+export const sampleInvoices: Invoice[] = [
+  {
+    id: 'inv_001',
+    invoiceNumber: 'INV-2026-0001',
+    customerId: 'cus_001',
+    customerName: 'Acme Property Management',
+    status: 'paid',
+    lineItems: [
+      { description: 'Quarterly HVAC maintenance (4 units)', qty: 4, unitPrice: 12500, taxable: true },
+    ],
+    subtotal: 50000,
+    total: 50000,
+    amountPaid: 50000,
+    amountDue: 0,
+    dueDate: '2026-05-15T23:59:59Z',
+    sentAt: '2026-05-01T10:00:00Z',
+    paidAt: '2026-05-14T15:23:00Z',
+    payments: [
+      { id: 'pay_001', amount: 50000, method: 'card', recordedAt: '2026-05-14T15:23:00Z' },
+    ],
+    createdAt: '2026-05-01T09:00:00Z',
+  },
+  {
+    id: 'inv_002',
+    invoiceNumber: 'INV-2026-0002',
+    customerId: 'cus_002',
+    customerName: 'Jamie Rodriguez',
+    status: 'sent',
+    lineItems: [
+      { description: 'Diagnostic fee', qty: 1, unitPrice: 8900, taxable: true },
+      { description: 'Capacitor replacement', qty: 1, unitPrice: 18500, taxable: true },
+    ],
+    subtotal: 27400,
+    total: 27400,
+    amountPaid: 0,
+    amountDue: 27400,
+    dueDate: '2026-06-08T23:59:59Z',
+    sentAt: '2026-05-25T16:00:00Z',
+    payments: [],
+    createdAt: '2026-05-25T15:30:00Z',
+  },
+  {
+    id: 'inv_003',
+    invoiceNumber: 'INV-2026-0003',
+    customerId: 'cus_003',
+    customerName: 'Mason Hardware Co.',
+    status: 'overdue',
+    lineItems: [
+      { description: 'Walk-in cooler service (50% progress invoice)', qty: 1, unitPrice: 152000, taxable: true },
+    ],
+    subtotal: 152000,
+    total: 152000,
+    amountPaid: 0,
+    amountDue: 152000,
+    dueDate: '2026-05-01T23:59:59Z',
+    sentAt: '2026-04-15T10:00:00Z',
+    payments: [],
+    createdAt: '2026-04-15T09:30:00Z',
+  },
+  {
+    id: 'inv_004',
+    invoiceNumber: 'INV-2026-0004',
+    customerId: 'cus_001',
+    customerName: 'Acme Property Management',
+    status: 'partial',
+    lineItems: [
+      { description: 'Walk-in cooler — full install (deposit)', qty: 1, unitPrice: 200000, taxable: true },
+      { description: 'Walk-in cooler — labor', qty: 1, unitPrice: 380000, taxable: true },
+    ],
+    subtotal: 580000,
+    total: 580000,
+    amountPaid: 200000,
+    amountDue: 380000,
+    dueDate: '2026-06-15T23:59:59Z',
+    sentAt: '2026-05-20T11:00:00Z',
+    payments: [
+      { id: 'pay_002', amount: 200000, method: 'ach', recordedAt: '2026-05-22T09:15:00Z', note: 'Deposit' },
+    ],
+    createdAt: '2026-05-20T10:30:00Z',
+  },
+];

package/template/extras/estimates-invoices/_shared/src/lib/invoices/types.ts

@@ -0,0 +1,78 @@
+export const INVOICE_STATUSES = [
+  'draft',
+  'sent',
+  'partial',
+  'paid',
+  'overdue',
+  'void',
+] as const;
+export type InvoiceStatus = (typeof INVOICE_STATUSES)[number];
+
+export const INVOICE_STATUS_LABEL: Record<InvoiceStatus, string> = {
+  draft: 'Draft',
+  sent: 'Sent',
+  partial: 'Partially paid',
+  paid: 'Paid',
+  overdue: 'Overdue',
+  void: 'Void',
+};
+
+export const INVOICE_STATUS_VARIANT: Record<
+  InvoiceStatus,
+  'default' | 'secondary' | 'destructive' | 'outline'
+> = {
+  draft: 'outline',
+  sent: 'secondary',
+  partial: 'secondary',
+  paid: 'default',
+  overdue: 'destructive',
+  void: 'outline',
+};
+
+export const PAYMENT_METHODS = ['card', 'ach', 'cash', 'check', 'manual', 'stripe'] as const;
+export type PaymentMethod = (typeof PAYMENT_METHODS)[number];
+
+export const PAYMENT_METHOD_LABEL: Record<PaymentMethod, string> = {
+  card: 'Card',
+  ach: 'ACH',
+  cash: 'Cash',
+  check: 'Check',
+  manual: 'Manual',
+  stripe: 'Stripe',
+};
+
+export interface InvoiceLineItem {
+  description: string;
+  qty: number;
+  unitPrice: number; // cents
+  taxable?: boolean;
+}
+
+export interface InvoicePayment {
+  id: string;
+  amount: number; // cents
+  method: PaymentMethod;
+  recordedAt: string; // ISO
+  note?: string;
+}
+
+export interface Invoice {
+  id: string;
+  invoiceNumber: string;
+  customerId: string;
+  customerName: string;
+  jobId?: string;
+  estimateId?: string;
+  status: InvoiceStatus;
+  lineItems: InvoiceLineItem[];
+  subtotal: number;
+  total: number;
+  amountPaid: number;
+  amountDue: number;
+  dueDate?: string;
+  sentAt?: string;
+  paidAt?: string;
+  notes?: string;
+  payments: InvoicePayment[];
+  createdAt: string;
+}

package/template/extras/estimates-invoices/drizzle/src/app/(dashboard)/estimates/new/page.tsx

@@ -0,0 +1,18 @@
+import { asc } from 'drizzle-orm';
+import { db } from '@/db/client';
+import { customers } from '@/db/schema';
+import { NewEstimateForm } from '@/components/estimates/new-estimate-form';
+
+export default async function NewEstimatePage() {
+  const customerRows = await db
+    .select({ id: customers.id, name: customers.name })
+    .from(customers)
+    .orderBy(asc(customers.name));
+
+  return (
+    <div className="mx-auto max-w-3xl space-y-6">
+      <h1 className="text-3xl font-bold tracking-tight">New estimate</h1>
+      <NewEstimateForm customers={customerRows} />
+    </div>
+  );
+}