create-crm-starter 0.1.0

package/template/extras/payments-stripe/src/app/(dashboard)/payments/page.tsx

@@ -0,0 +1,56 @@
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { DemoCheckoutButton } from '@/components/payments/demo-checkout-button';
+import { formatCurrency, formatDate } from '@/lib/utils';
+
+const SAMPLE = [
+  { id: 'pay_001', customer: 'Acme Property Management', amount: 50000, method: 'Card',  status: 'succeeded', at: '2026-05-14' },
+  { id: 'pay_002', customer: 'Jamie Rodriguez',          amount: 14500, method: 'ACH',   status: 'succeeded', at: '2026-04-16' },
+  { id: 'pay_003', customer: 'Mason Hardware Co.',       amount: 50000, method: 'Card',  status: 'pending',   at: '2026-05-23' },
+];
+
+export default function PaymentsPage() {
+  return (
+    <div className="space-y-6">
+      <div className="flex items-start justify-between">
+        <div>
+          <h1 className="text-3xl font-bold tracking-tight">Payments</h1>
+          <p className="text-muted-foreground mt-1 text-sm">
+            Powered by Stripe. Set <code>STRIPE_SECRET_KEY</code> + <code>STRIPE_WEBHOOK_SECRET</code> in <code>.env.local</code>;
+            webhook handler is wired at <code>/api/stripe/webhook</code>.
+          </p>
+        </div>
+        <DemoCheckoutButton />
+      </div>
+      <Card>
+        <CardHeader><CardTitle>Recent payments</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">Customer</th>
+                <th className="px-4 py-3 text-left font-medium">Method</th>
+                <th className="px-4 py-3 text-left font-medium">Status</th>
+                <th className="px-4 py-3 text-left font-medium">Date</th>
+                <th className="px-4 py-3 text-right font-medium">Amount</th>
+              </tr>
+            </thead>
+            <tbody className="divide-border divide-y">
+              {SAMPLE.map((p) => (
+                <tr key={p.id}>
+                  <td className="px-4 py-3 font-medium">{p.customer}</td>
+                  <td className="text-muted-foreground px-4 py-3">{p.method}</td>
+                  <td className="px-4 py-3">
+                    <Badge variant={p.status === 'succeeded' ? 'default' : 'secondary'}>{p.status}</Badge>
+                  </td>
+                  <td className="text-muted-foreground px-4 py-3">{formatDate(p.at)}</td>
+                  <td className="px-4 py-3 text-right font-medium">{formatCurrency(p.amount)}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

package/template/extras/payments-stripe/src/app/api/stripe/webhook/route.ts

@@ -0,0 +1,56 @@
+import type { NextRequest } from 'next/server';
+import { NextResponse } from 'next/server';
+import type Stripe from 'stripe';
+import { stripe } from '@/lib/stripe';
+
+/**
+ * Stripe webhook endpoint. Set STRIPE_WEBHOOK_SECRET in .env.local and
+ * point Stripe (CLI: `stripe listen --forward-to localhost:3000/api/stripe/webhook`)
+ * here. The handler verifies the signature, then dispatches by event type.
+ */
+export async function POST(req: NextRequest) {
+  const secret = process.env.STRIPE_WEBHOOK_SECRET;
+  if (!secret) {
+    return NextResponse.json({ error: 'STRIPE_WEBHOOK_SECRET not set' }, { status: 500 });
+  }
+
+  const signature = req.headers.get('stripe-signature');
+  if (!signature) {
+    return NextResponse.json({ error: 'Missing signature' }, { status: 400 });
+  }
+
+  const body = await req.text();
+  let event: Stripe.Event;
+  try {
+    event = stripe.webhooks.constructEvent(body, signature, secret);
+  } catch (err) {
+    const message = err instanceof Error ? err.message : 'Signature verification failed';
+    return NextResponse.json({ error: message }, { status: 400 });
+  }
+
+  switch (event.type) {
+    case 'checkout.session.completed': {
+      const session = event.data.object as Stripe.Checkout.Session;
+      console.log(
+        '[stripe] checkout.session.completed',
+        session.id,
+        session.amount_total,
+        session.metadata,
+      );
+      // TODO: mark the matching invoice as paid in your DB here. The
+      // session.metadata you set in createCheckoutSession is your reconcile
+      // key (invoiceId, customerId, jobId, etc.).
+      break;
+    }
+    case 'payment_intent.succeeded':
+    case 'payment_intent.payment_failed':
+      // Stripe Checkout's session.completed event covers the success path;
+      // these are useful if you take payments via PaymentIntents directly.
+      break;
+    default:
+      // Acknowledge unhandled events so Stripe doesn't keep retrying them.
+      break;
+  }
+
+  return NextResponse.json({ received: true });
+}

package/template/extras/payments-stripe/src/components/payments/demo-checkout-button.tsx

@@ -0,0 +1,18 @@
+'use client';
+
+import { useTransition } from 'react';
+import { Button } from '@/components/ui/button';
+import { startDemoCheckout } from '@/lib/payments/actions';
+
+export function DemoCheckoutButton() {
+  const [pending, start] = useTransition();
+  return (
+    <Button
+      size="sm"
+      disabled={pending}
+      onClick={() => start(() => startDemoCheckout())}
+    >
+      {pending ? 'Redirecting...' : 'Try $10 Stripe checkout'}
+    </Button>
+  );
+}

package/template/extras/payments-stripe/src/lib/payments/actions.ts

@@ -0,0 +1,63 @@
+'use server';
+
+import { headers } from 'next/headers';
+import { redirect } from 'next/navigation';
+import { stripe, isStripeConfigured } from '@/lib/stripe';
+
+export interface CreateCheckoutSessionInput {
+  amount: number;          // cents
+  description: string;
+  customerEmail?: string;
+  successPath?: string;    // path to redirect to on success
+  cancelPath?: string;
+}
+
+/**
+ * Server action — creates a Stripe Checkout Session and redirects the
+ * user to Stripe's hosted checkout page. The session metadata captures
+ * what the payment is for; the webhook handler at
+ * /api/stripe/webhook reconciles status on completion.
+ */
+export async function createCheckoutSession(input: CreateCheckoutSessionInput): Promise<void> {
+  if (!isStripeConfigured) {
+    throw new Error('Stripe is not configured. Set STRIPE_SECRET_KEY in .env.local.');
+  }
+
+  const h = await headers();
+  const host = h.get('host') ?? 'localhost:3000';
+  const proto = h.get('x-forwarded-proto') ?? (host.startsWith('localhost') ? 'http' : 'https');
+  const origin = `${proto}://${host}`;
+
+  const session = await stripe.checkout.sessions.create({
+    mode: 'payment',
+    customer_email: input.customerEmail,
+    line_items: [
+      {
+        price_data: {
+          currency: 'usd',
+          product_data: { name: input.description },
+          unit_amount: input.amount,
+        },
+        quantity: 1,
+      },
+    ],
+    success_url: `${origin}${input.successPath ?? '/payments?status=success'}&session_id={CHECKOUT_SESSION_ID}`,
+    cancel_url: `${origin}${input.cancelPath ?? '/payments?status=cancelled'}`,
+    metadata: { description: input.description },
+  });
+
+  if (!session.url) throw new Error('Stripe did not return a checkout URL');
+  redirect(session.url);
+}
+
+/**
+ * Convenience action — kicks off a $10 demo checkout from the payments page.
+ */
+export async function startDemoCheckout(): Promise<void> {
+  await createCheckoutSession({
+    amount: 1000,
+    description: 'CRM demo checkout',
+    successPath: '/payments?status=success',
+    cancelPath: '/payments?status=cancelled',
+  });
+}

package/template/extras/payments-stripe/src/lib/stripe.ts

@@ -0,0 +1,25 @@
+import 'server-only';
+import Stripe from 'stripe';
+
+const apiKey = process.env.STRIPE_SECRET_KEY;
+
+// NOTE: do NOT throw at module load when the key is missing. `next build`
+// imports this module while collecting route data for /api/stripe/webhook,
+// so throwing here breaks every production build done before Stripe is
+// configured (the common first-deploy case). Instead construct with a
+// harmless placeholder and gate real usage on `isStripeConfigured` at call
+// time (server actions already do this, and the webhook route 503s early).
+
+// Let Stripe default to the account's pinned API version. Pin explicitly
+// (e.g. apiVersion: '2025-02-24.acacia') if you need a specific version.
+// `||` (not `??`): a scaffolded .env.local ships STRIPE_SECRET_KEY="" (empty
+// string), which `??` would NOT replace — Stripe then throws "Neither apiKey
+// nor config.authenticator provided" while `next build` collects route data.
+export const stripe = new Stripe(apiKey || 'sk_test_placeholder', {
+  typescript: true,
+});
+
+export const isStripeConfigured = (() => {
+  const k = process.env.STRIPE_SECRET_KEY;
+  return typeof k === 'string' && k.startsWith('sk_') && !k.includes('placeholder');
+})();

package/template/extras/permit-tracking/src/app/(dashboard)/permits/page.tsx

@@ -0,0 +1,56 @@
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { formatDate } from '@/lib/utils';
+
+const PERMITS = [
+  { id: 'p1', job: 'Mason Hardware — Walk-in Cooler', jurisdiction: 'Austin', number: 'A-2026-04812', status: 'approved',  filedAt: '2026-04-15', expiresAt: '2027-04-15' },
+  { id: 'p2', job: 'Acme — Service Upgrade',          jurisdiction: 'Austin', number: 'A-2026-04901', status: 'pending',   filedAt: '2026-05-20', expiresAt: null },
+  { id: 'p3', job: 'Priya — Panel Upgrade',           jurisdiction: 'Cedar Park', number: 'CP-2026-1207', status: 'inspection_scheduled', filedAt: '2026-05-10', expiresAt: '2027-05-10' },
+];
+
+const VARIANT: Record<string, 'default' | 'secondary' | 'destructive' | 'outline'> = {
+  pending: 'secondary',
+  approved: 'default',
+  inspection_scheduled: 'outline',
+  rejected: 'destructive',
+};
+
+export default function PermitsPage() {
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-3xl font-bold tracking-tight">Permits</h1>
+        <p className="text-muted-foreground mt-1 text-sm">
+          Track filings, inspections, and approvals across jurisdictions.
+        </p>
+      </div>
+      <Card>
+        <CardHeader><CardTitle>Open permits</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">Job</th>
+                <th className="px-4 py-3 text-left font-medium">Jurisdiction</th>
+                <th className="px-4 py-3 text-left font-medium">Number</th>
+                <th className="px-4 py-3 text-left font-medium">Filed</th>
+                <th className="px-4 py-3 text-left font-medium">Status</th>
+              </tr>
+            </thead>
+            <tbody className="divide-border divide-y">
+              {PERMITS.map((p) => (
+                <tr key={p.id}>
+                  <td className="px-4 py-3 font-medium">{p.job}</td>
+                  <td className="text-muted-foreground px-4 py-3">{p.jurisdiction}</td>
+                  <td className="text-muted-foreground px-4 py-3 font-mono text-xs">{p.number}</td>
+                  <td className="text-muted-foreground px-4 py-3">{formatDate(p.filedAt)}</td>
+                  <td className="px-4 py-3"><Badge variant={VARIANT[p.status]}>{p.status.replace(/_/g, ' ')}</Badge></td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

package/template/extras/price-book/_shared/src/app/(dashboard)/price-book/new/page.tsx

@@ -0,0 +1,20 @@
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+
+/**
+ * Default stub form. The Drizzle installer overwrites this with a working
+ * server-action-backed form.
+ */
+export default function NewPriceBookItemPage() {
+  return (
+    <div className="mx-auto max-w-2xl space-y-6">
+      <h1 className="text-3xl font-bold tracking-tight">New price book item</h1>
+      <Card>
+        <CardHeader><CardTitle>Form goes here</CardTitle></CardHeader>
+        <CardContent className="text-muted-foreground text-sm">
+          Wire this to your stack to enable. Drizzle ships a real version
+          when you scaffold with that stack.
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

package/template/extras/price-book/_shared/src/app/(dashboard)/price-book/page.tsx

@@ -0,0 +1,79 @@
+import Link from 'next/link';
+import { Card, CardContent } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { getPriceBook } from '@/lib/price-book/data';
+import { PRICE_BOOK_KIND_LABEL } from '@/lib/price-book/types';
+import { formatCurrency } from '@/lib/utils';
+
+export default async function PriceBookPage() {
+  const catalog = await getPriceBook();
+  const totalItems = catalog.reduce((acc, c) => acc + c.items.length, 0);
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-3xl font-bold tracking-tight">Price Book</h1>
+          <p className="text-muted-foreground mt-1 text-sm">
+            {catalog.length} categories · {totalItems} items · the source of truth for estimates + jobs + invoices
+          </p>
+        </div>
+        <Button asChild>
+          <Link href="/price-book/new">New item</Link>
+        </Button>
+      </div>
+      {catalog.map((cat) => (
+        <Card key={cat.id}>
+          <div className="border-border bg-muted/30 border-b px-4 py-3">
+            <h2 className="text-base font-semibold">{cat.name}</h2>
+            <p className="text-muted-foreground mt-0.5 text-xs">
+              {cat.items.length} item{cat.items.length === 1 ? '' : 's'}
+            </p>
+          </div>
+          <CardContent className="p-0">
+            {cat.items.length === 0 ? (
+              <p className="text-muted-foreground p-4 text-sm">No items in this category yet.</p>
+            ) : (
+              <table className="w-full text-sm">
+                <thead className="text-muted-foreground bg-muted/20 text-xs uppercase">
+                  <tr>
+                    <th className="px-4 py-2 text-left font-medium">Name</th>
+                    <th className="px-4 py-2 text-left font-medium">Kind</th>
+                    <th className="px-4 py-2 text-left font-medium">SKU</th>
+                    <th className="px-4 py-2 text-right font-medium">Cost</th>
+                    <th className="px-4 py-2 text-right font-medium">Price</th>
+                    <th className="px-4 py-2 text-right font-medium">Margin</th>
+                  </tr>
+                </thead>
+                <tbody className="divide-border divide-y">
+                  {cat.items.map((it) => (
+                    <tr key={it.id} className="hover:bg-muted/30">
+                      <td className="px-4 py-2">
+                        <div className="font-medium">{it.name}</div>
+                        {it.description && (
+                          <div className="text-muted-foreground mt-0.5 text-xs">{it.description}</div>
+                        )}
+                      </td>
+                      <td className="px-4 py-2">
+                        <Badge variant="outline">{PRICE_BOOK_KIND_LABEL[it.kind]}</Badge>
+                      </td>
+                      <td className="text-muted-foreground px-4 py-2 font-mono text-xs">{it.sku ?? '—'}</td>
+                      <td className="text-muted-foreground px-4 py-2 text-right">{formatCurrency(it.unitCost)}</td>
+                      <td className="px-4 py-2 text-right font-medium">{formatCurrency(it.unitPrice)}</td>
+                      <td className="px-4 py-2 text-right">
+                        <span className={it.marginPct < 25 ? 'text-destructive' : it.marginPct >= 50 ? 'text-emerald-600' : ''}>
+                          {it.marginPct}%
+                        </span>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            )}
+          </CardContent>
+        </Card>
+      ))}
+    </div>
+  );
+}

package/template/extras/price-book/_shared/src/components/price-book/item-picker.tsx

@@ -0,0 +1,145 @@
+'use client';
+
+import { useEffect, useId, useRef, useState } from 'react';
+import { Input } from '@/components/ui/input';
+import { searchPriceBookItemsAction } from '@/lib/price-book/actions';
+import type { PriceBookItem } from '@/lib/price-book/types';
+import { formatCurrency } from '@/lib/utils';
+
+interface ItemPickerProps {
+  /** Current description text (controlled). */
+  value: string;
+  /** Called as the user types. Always fires, even when picking from dropdown. */
+  onTextChange: (value: string) => void;
+  /** Called when the user selects a price-book item from the dropdown. */
+  onPick: (item: PriceBookItem) => void;
+  placeholder?: string;
+  id?: string;
+}
+
+/**
+ * Autocomplete-style line-item description input backed by the Price
+ * Book. Types are debounced; matches appear in a dropdown below the
+ * input; picking one fires onPick with the full item (so parent can
+ * autofill qty + price + cost + taxable).
+ *
+ * Falls back gracefully: typing a description that has no matches just
+ * leaves the field as free-text — picker stays optional, not blocking.
+ */
+export function PriceBookItemPicker({
+  value,
+  onTextChange,
+  onPick,
+  placeholder = 'Search Price Book or type free-text…',
+  id,
+}: ItemPickerProps) {
+  const fallbackId = useId();
+  const inputId = id ?? fallbackId;
+  const [results, setResults] = useState<PriceBookItem[]>([]);
+  const [open, setOpen] = useState(false);
+  const [activeIdx, setActiveIdx] = useState(0);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const lastQueryRef = useRef('');
+
+  useEffect(() => {
+    const q = value.trim();
+    if (q.length < 2) {
+      setResults([]);
+      return;
+    }
+    const handle = setTimeout(async () => {
+      lastQueryRef.current = q;
+      try {
+        const items = await searchPriceBookItemsAction(q);
+        // Race-condition guard: only commit if this is still the latest query.
+        if (lastQueryRef.current === q) {
+          setResults(items);
+          setActiveIdx(0);
+        }
+      } catch {
+        setResults([]);
+      }
+    }, 180);
+    return () => clearTimeout(handle);
+  }, [value]);
+
+  // Close dropdown on outside click.
+  useEffect(() => {
+    if (!open) return;
+    function onClick(e: MouseEvent) {
+      if (!containerRef.current?.contains(e.target as Node)) setOpen(false);
+    }
+    document.addEventListener('mousedown', onClick);
+    return () => document.removeEventListener('mousedown', onClick);
+  }, [open]);
+
+  function handlePick(item: PriceBookItem) {
+    onPick(item);
+    setOpen(false);
+    setResults([]);
+  }
+
+  function handleKey(e: React.KeyboardEvent<HTMLInputElement>) {
+    if (!open || results.length === 0) return;
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      setActiveIdx((i) => Math.min(i + 1, results.length - 1));
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      setActiveIdx((i) => Math.max(i - 1, 0));
+    } else if (e.key === 'Enter') {
+      e.preventDefault();
+      handlePick(results[activeIdx]);
+    } else if (e.key === 'Escape') {
+      setOpen(false);
+    }
+  }
+
+  return (
+    <div ref={containerRef} className="relative">
+      <Input
+        id={inputId}
+        value={value}
+        onChange={(e) => {
+          onTextChange(e.target.value);
+          setOpen(true);
+        }}
+        onFocus={() => setOpen(true)}
+        onKeyDown={handleKey}
+        placeholder={placeholder}
+        autoComplete="off"
+      />
+      {open && results.length > 0 && (
+        <div className="border-input bg-background absolute z-20 mt-1 max-h-72 w-full overflow-y-auto rounded-md border shadow-lg">
+          {results.map((item, idx) => (
+            <button
+              type="button"
+              key={item.id}
+              onMouseDown={(e) => { e.preventDefault(); handlePick(item); }}
+              onMouseEnter={() => setActiveIdx(idx)}
+              className={`flex w-full items-start justify-between gap-3 border-b px-3 py-2 text-left last:border-b-0 ${
+                idx === activeIdx ? 'bg-accent' : 'hover:bg-accent/50'
+              }`}
+            >
+              <div className="min-w-0">
+                <div className="truncate text-sm font-medium">{item.name}</div>
+                {item.description && (
+                  <div className="text-muted-foreground truncate text-xs">{item.description}</div>
+                )}
+                <div className="text-muted-foreground mt-0.5 text-[10px] uppercase">
+                  {item.categoryName} · {item.kind}{item.sku ? ` · ${item.sku}` : ''}
+                </div>
+              </div>
+              <div className="text-right whitespace-nowrap text-sm">
+                <div className="font-medium">{formatCurrency(item.unitPrice)}</div>
+                <div className={`text-[10px] ${item.marginPct < 25 ? 'text-destructive' : 'text-muted-foreground'}`}>
+                  {item.marginPct}% margin
+                </div>
+              </div>
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/template/extras/price-book/_shared/src/lib/price-book/actions.ts

@@ -0,0 +1,14 @@
+'use server';
+
+import { searchPriceBookItems } from './data';
+import type { PriceBookItem } from './types';
+
+/**
+ * Server-callable search wrapper used by client components (autocomplete
+ * pickers in the job + estimate line-item rows). The Drizzle installer
+ * overwrites this with a version that hits the real DB; the default here
+ * just searches sample data.
+ */
+export async function searchPriceBookItemsAction(query: string): Promise<PriceBookItem[]> {
+  return searchPriceBookItems(query);
+}

package/template/extras/price-book/_shared/src/lib/price-book/data.ts

@@ -0,0 +1,28 @@
+/**
+ * Default data source — returns sample price book data. Stack-specific
+ * installers OVERWRITE this with real DB queries.
+ */
+import { sampleCategories, sampleItems } from './sample-data';
+import type { PriceBookCategoryWithItems, PriceBookItem } from './types';
+
+export async function getPriceBook(): Promise<PriceBookCategoryWithItems[]> {
+  return sampleCategories.map((c) => ({
+    ...c,
+    items: sampleItems.filter((i) => i.categoryId === c.id),
+  }));
+}
+
+export async function getPriceBookItems(): Promise<PriceBookItem[]> {
+  return sampleItems;
+}
+
+export async function searchPriceBookItems(query: string): Promise<PriceBookItem[]> {
+  const q = query.trim().toLowerCase();
+  if (!q) return [];
+  return sampleItems.filter(
+    (i) =>
+      i.name.toLowerCase().includes(q) ||
+      i.description?.toLowerCase().includes(q) ||
+      i.sku?.toLowerCase().includes(q),
+  );
+}

package/template/extras/price-book/_shared/src/lib/price-book/sample-data.ts

@@ -0,0 +1,62 @@
+import type { PriceBookCategory, PriceBookItem } from './types';
+
+export const sampleCategories: PriceBookCategory[] = [
+  { id: 'cat_service', name: 'Service & Maintenance', sortOrder: 0 },
+  { id: 'cat_install', name: 'Installation', sortOrder: 1 },
+  { id: 'cat_repair', name: 'Repair', sortOrder: 2 },
+  { id: 'cat_parts', name: 'Parts & Materials', sortOrder: 3 },
+];
+
+function withMargin(item: Omit<PriceBookItem, 'marginPct'>): PriceBookItem {
+  return {
+    ...item,
+    marginPct: item.unitPrice > 0
+      ? Math.round(((item.unitPrice - item.unitCost) / item.unitPrice) * 100)
+      : 0,
+  };
+}
+
+export const sampleItems: PriceBookItem[] = [
+  withMargin({
+    id: 'pbi_001', categoryId: 'cat_service', categoryName: 'Service & Maintenance',
+    kind: 'service', name: 'HVAC tune-up (single unit)',
+    description: 'Inspection, filter change, coil clean, refrigerant check',
+    defaultQty: 1, unitCost: 4500, unitPrice: 14500, taxable: true, durationMinutes: 60,
+  }),
+  withMargin({
+    id: 'pbi_002', categoryId: 'cat_service', categoryName: 'Service & Maintenance',
+    kind: 'service', name: 'Diagnostic fee',
+    defaultQty: 1, unitCost: 0, unitPrice: 8900, taxable: true, durationMinutes: 30,
+  }),
+  withMargin({
+    id: 'pbi_003', categoryId: 'cat_install', categoryName: 'Installation',
+    kind: 'service', name: 'AC condenser install (3 ton)',
+    description: 'Labor only; pad + lineset extra',
+    defaultQty: 1, unitCost: 95000, unitPrice: 245000, taxable: true, durationMinutes: 480,
+  }),
+  withMargin({
+    id: 'pbi_004', categoryId: 'cat_install', categoryName: 'Installation',
+    kind: 'service', name: 'Tankless water heater install',
+    defaultQty: 1, unitCost: 91000, unitPrice: 142000, taxable: true, durationMinutes: 360,
+  }),
+  withMargin({
+    id: 'pbi_005', categoryId: 'cat_repair', categoryName: 'Repair',
+    kind: 'service', name: 'Capacitor replacement',
+    defaultQty: 1, unitCost: 4200, unitPrice: 18500, taxable: true, durationMinutes: 45,
+  }),
+  withMargin({
+    id: 'pbi_006', categoryId: 'cat_parts', categoryName: 'Parts & Materials',
+    kind: 'material', name: 'Refrigerant R-410A (1 lb)',
+    sku: 'R410A-1LB', defaultQty: 1, unitCost: 4500, unitPrice: 10750, taxable: true,
+  }),
+  withMargin({
+    id: 'pbi_007', categoryId: 'cat_parts', categoryName: 'Parts & Materials',
+    kind: 'material', name: 'Standard air filter (16x25x1)',
+    sku: 'AF-16251', defaultQty: 1, unitCost: 800, unitPrice: 2500, taxable: true,
+  }),
+  withMargin({
+    id: 'pbi_008', categoryId: 'cat_service', categoryName: 'Service & Maintenance',
+    kind: 'labor', name: 'Standard hourly labor',
+    defaultQty: 1, unitCost: 4500, unitPrice: 12500, taxable: false, durationMinutes: 60,
+  }),
+];

package/template/extras/price-book/_shared/src/lib/price-book/types.ts

@@ -0,0 +1,35 @@
+export const PRICE_BOOK_KINDS = ['service', 'material', 'labor'] as const;
+export type PriceBookKind = (typeof PRICE_BOOK_KINDS)[number];
+
+export const PRICE_BOOK_KIND_LABEL: Record<PriceBookKind, string> = {
+  service: 'Service',
+  material: 'Material',
+  labor: 'Labor',
+};
+
+export interface PriceBookCategory {
+  id: string;
+  name: string;
+  sortOrder: number;
+}
+
+export interface PriceBookItem {
+  id: string;
+  categoryId: string;
+  categoryName: string;
+  kind: PriceBookKind;
+  name: string;
+  description?: string;
+  sku?: string;
+  defaultQty: number;
+  unitCost: number;   // cents
+  unitPrice: number;  // cents
+  taxable: boolean;
+  durationMinutes?: number;
+  /** Computed: (unitPrice - unitCost) / unitPrice * 100, 0 if price is 0 */
+  marginPct: number;
+}
+
+export interface PriceBookCategoryWithItems extends PriceBookCategory {
+  items: PriceBookItem[];
+}