create-crm-starter 0.1.0

package/template/extras/seed/drizzle/scripts/seed.ts

@@ -0,0 +1,314 @@
+/**
+ * Real Drizzle seed — populates Postgres with realistic demo data using
+ * @faker-js/faker. Deterministic (faker.seed(42)) so repeat runs produce
+ * stable data for screenshots. Truncates business tables first (never auth).
+ *
+ * It adapts to whichever modules you scaffolded: each block runs only if
+ * its table is present in the schema barrel, so the same script works for
+ * any module combination.
+ *
+ * Run:
+ *   pnpm db:seed
+ */
+import crypto from 'node:crypto';
+import { config } from 'dotenv';
+// Load .env.local first (precedence) then .env, so DATABASE_URL is found
+// when this runs as a standalone tsx script (Next loads .env.local; the
+// raw tsx runtime does not).
+config({ path: '.env.local' });
+config({ path: '.env' });
+
+import { faker } from '@faker-js/faker';
+import { db } from '../src/db/client';
+import * as schemaNs from '../src/db/schema';
+
+// The schema barrel only re-exports tables for installed modules, so its
+// shape varies per scaffold. Access via a permissive map + runtime guards.
+const s = schemaNs as Record<string, any>;
+
+faker.seed(42);
+
+const TAGS = ['vip', 'recurring', 'commercial', 'residential', 'lead'] as const;
+const SERVICE_TYPES = ['Service Call', 'Install', 'Repair', 'Maintenance', 'Tune-up', 'Emergency'];
+const LEAD_SOURCES = ['Google', 'Referral', 'Yelp', 'Repeat customer', 'Trade show', 'Facebook'];
+const JOB_STATUSES = ['lead', 'estimate', 'scheduled', 'dispatched', 'in_progress', 'completed', 'invoiced', 'paid'] as const;
+const PRIORITIES = ['low', 'normal', 'high', 'emergency'] as const;
+const WINDOWS = ['8-10am', '10am-12pm', '12-2pm', '2-4pm', '4-6pm'];
+
+function token() {
+  return crypto.randomBytes(16).toString('hex');
+}
+function randomAddress() {
+  return {
+    line1: faker.location.streetAddress(),
+    city: faker.location.city(),
+    state: faker.location.state({ abbreviated: true }),
+    postalCode: faker.location.zipCode('#####'),
+  };
+}
+function pick<T>(arr: T[]): T {
+  return faker.helpers.arrayElement(arr);
+}
+
+async function safeDelete(table: unknown, label: string) {
+  if (!table) return;
+  try {
+    await db.delete(table as never);
+  } catch (err) {
+    console.warn(`[seed] could not clear ${label}:`, (err as Error).message);
+  }
+}
+
+async function main() {
+  console.log('[seed] Clearing existing demo data (business tables only)...');
+  // Delete children before parents to satisfy FK constraints. Auth tables
+  // (user/session/account/verification) are intentionally never touched.
+  await safeDelete(s.invoicePayments, 'invoice_payments');
+  await safeDelete(s.invoices, 'invoices');
+  await safeDelete(s.estimates, 'estimates');
+  await safeDelete(s.jobChecklists, 'job_checklists');
+  await safeDelete(s.jobAttachments, 'job_attachments');
+  await safeDelete(s.smsMessages, 'sms_messages');
+  await safeDelete(s.servicePlanSubscriptions, 'service_plan_subscriptions');
+  await safeDelete(s.servicePlans, 'service_plans');
+  await safeDelete(s.jobs, 'jobs');
+  await safeDelete(s.priceBookItems, 'price_book_items');
+  await safeDelete(s.priceBookCategories, 'price_book_categories');
+  await safeDelete(s.customers, 'customers');
+
+  if (!s.customers) {
+    console.log('[seed] No customers table — nothing to seed.');
+    return;
+  }
+
+  // ---- Customers ----
+  console.log('[seed] Inserting 20 customers...');
+  const customerRows = await db
+    .insert(s.customers)
+    .values(
+      Array.from({ length: 20 }, () => {
+        const isCommercial = faker.datatype.boolean({ probability: 0.35 });
+        const billing = randomAddress();
+        return {
+          name: isCommercial ? faker.company.name() : faker.person.fullName(),
+          phones: [faker.phone.number({ style: 'national' })],
+          emails: [faker.internet.email().toLowerCase()],
+          billingAddress: billing,
+          serviceAddresses: faker.datatype.boolean({ probability: 0.4 }) ? [randomAddress()] : [billing],
+          tags: faker.helpers.arrayElements(TAGS, { min: 1, max: 2 }),
+          leadSource: pick(LEAD_SOURCES),
+          lifetimeValue: faker.number.int({ min: 0, max: 1_500_000 }),
+          balanceDue: faker.datatype.boolean({ probability: 0.25 }) ? faker.number.int({ min: 5_000, max: 200_000 }) : 0,
+          doNotContact: false,
+          notes: faker.datatype.boolean({ probability: 0.3 }) ? faker.lorem.sentence() : null,
+          publicToken: token(),
+        };
+      }),
+    )
+    .returning();
+
+  // ---- Jobs ----
+  let jobRows: any[] = [];
+  if (s.jobs) {
+    console.log('[seed] Inserting 30 jobs...');
+    jobRows = await db
+      .insert(s.jobs)
+      .values(
+        Array.from({ length: 30 }, () => {
+          const customer = pick(customerRows);
+          const status = pick([...JOB_STATUSES]);
+          const isScheduled = ['scheduled', 'dispatched', 'in_progress'].includes(status);
+          const lineItemCount = ['lead', 'estimate'].includes(status) ? 0 : faker.number.int({ min: 1, max: 3 });
+          const lineItems = Array.from({ length: lineItemCount }, () => ({
+            description: faker.commerce.productName(),
+            qty: faker.number.int({ min: 1, max: 4 }),
+            unitPrice: faker.number.int({ min: 5_000, max: 50_000 }),
+          }));
+          const total = lineItems.reduce((acc, li) => acc + li.qty * li.unitPrice, 0);
+          return {
+            customerId: customer.id,
+            serviceType: pick(SERVICE_TYPES),
+            status,
+            priority: pick([...PRIORITIES]),
+            scheduledAt: isScheduled ? faker.date.soon({ days: 14 }) : null,
+            arrivalWindow: isScheduled ? pick(WINDOWS) : null,
+            assigneeIds: [],
+            lineItems,
+            total,
+            notes: faker.datatype.boolean({ probability: 0.2 }) ? faker.lorem.sentence() : null,
+          };
+        }),
+      )
+      .returning();
+  }
+
+  // ---- Price Book ----
+  if (s.priceBookCategories && s.priceBookItems) {
+    console.log('[seed] Inserting price book...');
+    const cats = await db
+      .insert(s.priceBookCategories)
+      .values([
+        { name: 'Service & Maintenance', sortOrder: 0 },
+        { name: 'Installation', sortOrder: 1 },
+        { name: 'Repair', sortOrder: 2 },
+        { name: 'Parts & Materials', sortOrder: 3 },
+      ])
+      .returning();
+    const items = Array.from({ length: 16 }, () => {
+      const cat = pick(cats);
+      const unitCost = faker.number.int({ min: 1_000, max: 120_000 });
+      const unitPrice = Math.round(unitCost * faker.number.float({ min: 1.4, max: 2.6 }));
+      return {
+        categoryId: cat.id,
+        kind: pick(['service', 'material', 'labor']),
+        name: faker.commerce.productName(),
+        description: faker.datatype.boolean() ? faker.commerce.productDescription() : null,
+        sku: faker.datatype.boolean({ probability: 0.5 }) ? faker.string.alphanumeric(8).toUpperCase() : null,
+        defaultQty: 1,
+        unitCost,
+        unitPrice,
+        taxable: faker.datatype.boolean({ probability: 0.8 }),
+        durationMinutes: faker.datatype.boolean() ? faker.helpers.arrayElement([30, 45, 60, 90, 120]) : null,
+      };
+    });
+    await db.insert(s.priceBookItems).values(items);
+  }
+
+  // ---- Estimates ----
+  let estimateRows: any[] = [];
+  if (s.estimates) {
+    console.log('[seed] Inserting estimates...');
+    estimateRows = await db
+      .insert(s.estimates)
+      .values(
+        Array.from({ length: 10 }, () => {
+          const customer = pick(customerRows);
+          const status = pick(['draft', 'sent', 'viewed', 'approved', 'declined']);
+          const lineItems = Array.from({ length: faker.number.int({ min: 1, max: 4 }) }, () => {
+            const unitCost = faker.number.int({ min: 2_000, max: 80_000 });
+            return {
+              description: faker.commerce.productName(),
+              qty: faker.number.int({ min: 1, max: 3 }),
+              unitPrice: Math.round(unitCost * 1.8),
+              unitCost,
+              taxable: true,
+            };
+          });
+          const subtotal = lineItems.reduce((acc, li) => acc + li.qty * li.unitPrice, 0);
+          const totalCost = lineItems.reduce((acc, li) => acc + li.qty * (li.unitCost ?? 0), 0);
+          const sentAt = status === 'draft' ? null : faker.date.recent({ days: 30 });
+          return {
+            customerId: customer.id,
+            status,
+            lineItems,
+            subtotal,
+            total: subtotal,
+            totalCost,
+            notes: faker.datatype.boolean({ probability: 0.4 }) ? faker.lorem.sentence() : null,
+            validUntil: faker.date.soon({ days: 30 }),
+            sentAt,
+            approvedAt: status === 'approved' ? faker.date.recent({ days: 10 }) : null,
+          };
+        }),
+      )
+      .returning();
+  }
+
+  // ---- Invoices + payments ----
+  if (s.invoices) {
+    console.log('[seed] Inserting invoices + payments...');
+    let counter = 1;
+    const invoiceRows = await db
+      .insert(s.invoices)
+      .values(
+        Array.from({ length: 8 }, () => {
+          const customer = pick(customerRows);
+          const status = pick(['sent', 'partial', 'paid', 'overdue']);
+          const lineItems = Array.from({ length: faker.number.int({ min: 1, max: 3 }) }, () => ({
+            description: faker.commerce.productName(),
+            qty: faker.number.int({ min: 1, max: 3 }),
+            unitPrice: faker.number.int({ min: 8_000, max: 90_000 }),
+            taxable: true,
+          }));
+          const total = lineItems.reduce((acc, li) => acc + li.qty * li.unitPrice, 0);
+          const amountPaid = status === 'paid' ? total : status === 'partial' ? Math.round(total / 2) : 0;
+          const year = new Date().getUTCFullYear();
+          return {
+            invoiceNumber: `INV-${year}-${String(counter++).padStart(4, '0')}`,
+            customerId: customer.id,
+            status,
+            lineItems,
+            subtotal: total,
+            total,
+            amountPaid,
+            publicToken: token(),
+            dueDate: faker.date.soon({ days: 30 }),
+            sentAt: faker.date.recent({ days: 20 }),
+            paidAt: status === 'paid' ? faker.date.recent({ days: 5 }) : null,
+            notes: null,
+          };
+        }),
+      )
+      .returning();
+
+    if (s.invoicePayments) {
+      const payments = invoiceRows
+        .filter((inv) => inv.amountPaid > 0)
+        .map((inv) => ({
+          invoiceId: inv.id,
+          amount: inv.amountPaid,
+          method: pick(['card', 'ach', 'cash', 'check']),
+          note: 'Seed payment',
+        }));
+      if (payments.length > 0) await db.insert(s.invoicePayments).values(payments);
+    }
+  }
+
+  // ---- Service plans + subscriptions ----
+  if (s.servicePlans) {
+    console.log('[seed] Inserting service plans...');
+    const plans = await db
+      .insert(s.servicePlans)
+      .values([
+        { name: 'Silver', description: 'Annual tune-up + 10% off repairs', price: 1499, billingInterval: 'monthly', visitsPerYear: 1, perks: 'Annual tune-up · 10% off repairs · Priority booking' },
+        { name: 'Gold', description: 'Bi-annual visits + 15% off', price: 2499, billingInterval: 'monthly', visitsPerYear: 2, perks: 'Two visits/year · 15% off repairs · Priority booking' },
+        { name: 'Platinum', description: 'Quarterly visits + 20% off', price: 3999, billingInterval: 'monthly', visitsPerYear: 4, perks: 'Quarterly visits · 20% off · After-hours included' },
+      ])
+      .returning();
+    if (s.servicePlanSubscriptions) {
+      const subs = faker.helpers.arrayElements(customerRows, 6).map((c) => {
+        const renews = new Date();
+        renews.setFullYear(renews.getFullYear() + 1);
+        return { customerId: c.id, planId: pick(plans).id, status: 'active', renewsAt: renews };
+      });
+      await db.insert(s.servicePlanSubscriptions).values(subs);
+    }
+  }
+
+  // ---- Checklist templates ----
+  if (s.checklistTemplates) {
+    console.log('[seed] Inserting checklist template...');
+    await db.insert(s.checklistTemplates).values([
+      {
+        name: 'Standard service visit',
+        description: 'Default pre/post checks for a service call',
+        items: [
+          { id: token().slice(0, 8), label: 'Confirm scope with customer', kind: 'checkbox', required: true, sortOrder: 0 },
+          { id: token().slice(0, 8), label: 'Before photo', kind: 'photo', required: true, sortOrder: 1 },
+          { id: token().slice(0, 8), label: 'Work performed', kind: 'text', required: true, sortOrder: 2 },
+          { id: token().slice(0, 8), label: 'After photo', kind: 'photo', required: true, sortOrder: 3 },
+          { id: token().slice(0, 8), label: 'Customer signature obtained', kind: 'checkbox', required: false, sortOrder: 4 },
+        ],
+      },
+    ]);
+  }
+
+  console.log(`[seed] Done. ${customerRows.length} customers, ${jobRows.length} jobs + related records.`);
+}
+
+main()
+  .then(() => process.exit(0))
+  .catch((err) => {
+    console.error('[seed] Failed:', err);
+    process.exit(1);
+  });

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

@@ -0,0 +1,114 @@
+import Link from 'next/link';
+import { notFound } from 'next/navigation';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { getServicePlan, getSubscriptionsForPlan } from '@/lib/service-plans/data';
+import {
+  BILLING_INTERVAL_LABEL,
+  SUBSCRIPTION_STATUS_LABEL,
+  SUBSCRIPTION_STATUS_VARIANT,
+} from '@/lib/service-plans/types';
+import { SubscribeCustomerSection } from '@/components/service-plans/subscribe-customer-section';
+import { formatCurrency, formatDate } from '@/lib/utils';
+
+interface PageProps { params: Promise<{ id: string }>; }
+
+export default async function ServicePlanDetailPage({ params }: PageProps) {
+  const { id } = await params;
+  const plan = await getServicePlan(id);
+  if (!plan) notFound();
+  const subs = await getSubscriptionsForPlan(id);
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <Link href="/service-plans" className="text-muted-foreground text-sm hover:underline">
+          ← Service plans
+        </Link>
+        <div className="mt-1 flex items-center gap-3">
+          <h1 className="text-3xl font-bold tracking-tight">{plan.name}</h1>
+          <Badge variant="outline">{BILLING_INTERVAL_LABEL[plan.billingInterval]}</Badge>
+        </div>
+        {plan.description && <p className="text-muted-foreground mt-1">{plan.description}</p>}
+      </div>
+      <div className="grid grid-cols-1 gap-4 md:grid-cols-4">
+        <Card>
+          <CardHeader><CardTitle className="text-sm font-medium">Price</CardTitle></CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">{formatCurrency(plan.price)}</div>
+            <div className="text-muted-foreground text-xs">
+              per {plan.billingInterval === 'monthly' ? 'month' : plan.billingInterval === 'quarterly' ? 'quarter' : 'year'}
+            </div>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader><CardTitle className="text-sm font-medium">Visits / year</CardTitle></CardHeader>
+          <CardContent className="text-2xl font-bold">{plan.visitsPerYear}</CardContent>
+        </Card>
+        <Card>
+          <CardHeader><CardTitle className="text-sm font-medium">Subscribers</CardTitle></CardHeader>
+          <CardContent className="text-2xl font-bold">{plan.activeSubscribers}</CardContent>
+        </Card>
+        <Card>
+          <CardHeader><CardTitle className="text-sm font-medium">MRR</CardTitle></CardHeader>
+          <CardContent className="text-2xl font-bold text-emerald-600">
+            {formatCurrency(plan.monthlyRecurringRevenue)}
+          </CardContent>
+        </Card>
+      </div>
+      {plan.perks && (
+        <Card>
+          <CardHeader><CardTitle>Perks</CardTitle></CardHeader>
+          <CardContent className="text-sm">
+            {plan.perks.split('·').map((perk, i) => (
+              <div key={i} className="flex items-start gap-2 py-1">
+                <span className="text-emerald-600">✓</span>
+                <span>{perk.trim()}</span>
+              </div>
+            ))}
+          </CardContent>
+        </Card>
+      )}
+      <Card>
+        <CardHeader><CardTitle>Subscribers ({subs.length})</CardTitle></CardHeader>
+        <CardContent className="p-0">
+          {subs.length === 0 ? (
+            <p className="text-muted-foreground p-6 text-sm">No active subscribers yet.</p>
+          ) : (
+            <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">Customer</th>
+                  <th className="px-4 py-3 text-left font-medium">Started</th>
+                  <th className="px-4 py-3 text-left font-medium">Renews</th>
+                  <th className="px-4 py-3 text-left font-medium">Status</th>
+                </tr>
+              </thead>
+              <tbody className="divide-border divide-y">
+                {subs.map((s) => (
+                  <tr key={s.id}>
+                    <td className="px-4 py-3 font-medium">
+                      <Link href={`/customers/${s.customerId}`} className="hover:underline">
+                        {s.customerName}
+                      </Link>
+                    </td>
+                    <td className="text-muted-foreground px-4 py-3">{formatDate(s.startedAt)}</td>
+                    <td className="text-muted-foreground px-4 py-3">
+                      {s.renewsAt ? formatDate(s.renewsAt) : '—'}
+                    </td>
+                    <td className="px-4 py-3">
+                      <Badge variant={SUBSCRIPTION_STATUS_VARIANT[s.status]}>
+                        {SUBSCRIPTION_STATUS_LABEL[s.status]}
+                      </Badge>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          )}
+        </CardContent>
+      </Card>
+      <SubscribeCustomerSection planId={plan.id} />
+    </div>
+  );
+}

package/template/extras/service-plans/_shared/src/app/(dashboard)/service-plans/new/page.tsx

@@ -0,0 +1,18 @@
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+
+/**
+ * Default stub. Drizzle's installer overwrites this with a real form.
+ */
+export default function NewServicePlanPage() {
+  return (
+    <div className="mx-auto max-w-2xl space-y-6">
+      <h1 className="text-3xl font-bold tracking-tight">New service plan</h1>
+      <Card>
+        <CardHeader><CardTitle>Form goes here</CardTitle></CardHeader>
+        <CardContent className="text-muted-foreground text-sm">
+          Wire this to your stack to enable.
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

package/template/extras/service-plans/_shared/src/app/(dashboard)/service-plans/page.tsx

@@ -0,0 +1,92 @@
+import Link from 'next/link';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { getServicePlans } from '@/lib/service-plans/data';
+import { BILLING_INTERVAL_LABEL } from '@/lib/service-plans/types';
+import { formatCurrency } from '@/lib/utils';
+
+export default async function ServicePlansPage() {
+  const plans = await getServicePlans();
+  const totalMrr = plans.reduce((acc, p) => acc + p.monthlyRecurringRevenue, 0);
+  const totalSubs = plans.reduce((acc, p) => acc + p.activeSubscribers, 0);
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-3xl font-bold tracking-tight">Service plans</h1>
+          <p className="text-muted-foreground mt-1 text-sm">
+            Recurring revenue products — memberships, maintenance agreements, etc.
+          </p>
+        </div>
+        <Button asChild>
+          <Link href="/service-plans/new">New plan</Link>
+        </Button>
+      </div>
+      <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
+        <Card>
+          <CardHeader><CardTitle className="text-base">Total MRR</CardTitle></CardHeader>
+          <CardContent>
+            <div className="text-3xl font-bold text-emerald-600">{formatCurrency(totalMrr)}</div>
+            <p className="text-muted-foreground mt-1 text-xs">Across all active subscribers</p>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader><CardTitle className="text-base">Active subscribers</CardTitle></CardHeader>
+          <CardContent>
+            <div className="text-3xl font-bold">{totalSubs}</div>
+            <p className="text-muted-foreground mt-1 text-xs">Across {plans.length} plan{plans.length === 1 ? '' : 's'}</p>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader><CardTitle className="text-base">Annualized</CardTitle></CardHeader>
+          <CardContent>
+            <div className="text-3xl font-bold">{formatCurrency(totalMrr * 12)}</div>
+            <p className="text-muted-foreground mt-1 text-xs">ARR if no churn</p>
+          </CardContent>
+        </Card>
+      </div>
+      <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
+        {plans.map((p) => (
+          <Card key={p.id} className={p.name === 'Gold' ? 'border-brand border-2' : ''}>
+            <CardHeader>
+              <div className="flex items-center justify-between">
+                <CardTitle>{p.name}</CardTitle>
+                <Badge variant="outline">{BILLING_INTERVAL_LABEL[p.billingInterval]}</Badge>
+              </div>
+              <div className="mt-1">
+                <span className="text-3xl font-bold">{formatCurrency(p.price)}</span>
+                <span className="text-muted-foreground text-sm">
+                  /{p.billingInterval === 'monthly' ? 'mo' : p.billingInterval === 'quarterly' ? 'qtr' : 'yr'}
+                </span>
+              </div>
+            </CardHeader>
+            <CardContent className="space-y-3 text-sm">
+              {p.description && <p className="text-muted-foreground">{p.description}</p>}
+              <div className="grid grid-cols-2 gap-2 text-xs">
+                <div>
+                  <div className="text-muted-foreground">Visits/yr</div>
+                  <div className="text-base font-bold">{p.visitsPerYear}</div>
+                </div>
+                <div>
+                  <div className="text-muted-foreground">Subscribers</div>
+                  <div className="text-base font-bold">{p.activeSubscribers}</div>
+                </div>
+              </div>
+              <div className="border-t pt-3">
+                <div className="text-muted-foreground text-xs uppercase">MRR</div>
+                <div className="text-lg font-bold text-emerald-600">
+                  {formatCurrency(p.monthlyRecurringRevenue)}
+                </div>
+              </div>
+              <Button asChild variant="outline" size="sm" className="w-full">
+                <Link href={`/service-plans/${p.id}`}>View subscribers</Link>
+              </Button>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+    </div>
+  );
+}

package/template/extras/service-plans/_shared/src/components/service-plans/subscribe-customer-section.tsx

@@ -0,0 +1,17 @@
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+
+/**
+ * Default stub. Drizzle's installer overwrites this with a Stripe-Checkout-
+ * backed working version.
+ */
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export function SubscribeCustomerSection({ planId }: { planId: string }) {
+  return (
+    <Card>
+      <CardHeader><CardTitle>Subscribe a customer</CardTitle></CardHeader>
+      <CardContent className="text-muted-foreground text-sm">
+        Stripe-backed subscriptions ship on the Drizzle stack. Configure STRIPE_SECRET_KEY in <code>.env.local</code> to enable.
+      </CardContent>
+    </Card>
+  );
+}

package/template/extras/service-plans/_shared/src/lib/service-plans/data.ts

@@ -0,0 +1,14 @@
+import { sampleServicePlans, sampleSubscriptions } from './sample-data';
+import type { ServicePlan, ServicePlanSubscription } from './types';
+
+export async function getServicePlans(): Promise<ServicePlan[]> {
+  return sampleServicePlans;
+}
+
+export async function getServicePlan(id: string): Promise<ServicePlan | null> {
+  return sampleServicePlans.find((p) => p.id === id) ?? null;
+}
+
+export async function getSubscriptionsForPlan(planId: string): Promise<ServicePlanSubscription[]> {
+  return sampleSubscriptions.filter((s) => s.planId === planId);
+}

package/template/extras/service-plans/_shared/src/lib/service-plans/sample-data.ts

@@ -0,0 +1,83 @@
+import type { ServicePlan, ServicePlanSubscription } from './types';
+
+function arr(price: number, interval: 'monthly' | 'quarterly' | 'annual'): number {
+  if (interval === 'monthly') return price * 12;
+  if (interval === 'quarterly') return price * 4;
+  return price;
+}
+
+function mrr(price: number, interval: 'monthly' | 'quarterly' | 'annual', subs: number): number {
+  return Math.round((arr(price, interval) / 12) * subs);
+}
+
+export const sampleServicePlans: ServicePlan[] = [
+  {
+    id: 'plan_silver',
+    name: 'Silver',
+    description: 'Annual tune-up + 10% off any repairs',
+    price: 1499,
+    billingInterval: 'monthly',
+    visitsPerYear: 1,
+    perks: 'Annual tune-up · 10% off repairs · Priority booking',
+    arrPerSubscriber: arr(1499, 'monthly'),
+    activeSubscribers: 12,
+    monthlyRecurringRevenue: mrr(1499, 'monthly', 12),
+  },
+  {
+    id: 'plan_gold',
+    name: 'Gold',
+    description: 'Bi-annual visits, 15% off, priority booking',
+    price: 2499,
+    billingInterval: 'monthly',
+    visitsPerYear: 2,
+    perks: 'Two visits/year · 15% off repairs · Priority booking · Waived diagnostic fee',
+    arrPerSubscriber: arr(2499, 'monthly'),
+    activeSubscribers: 7,
+    monthlyRecurringRevenue: mrr(2499, 'monthly', 7),
+  },
+  {
+    id: 'plan_platinum',
+    name: 'Platinum',
+    description: 'Quarterly visits, 20% off, after-hours coverage',
+    price: 3999,
+    billingInterval: 'monthly',
+    visitsPerYear: 4,
+    perks: 'Quarterly visits · 20% off repairs · After-hours included · Equipment replacement priority',
+    arrPerSubscriber: arr(3999, 'monthly'),
+    activeSubscribers: 3,
+    monthlyRecurringRevenue: mrr(3999, 'monthly', 3),
+  },
+];
+
+export const sampleSubscriptions: ServicePlanSubscription[] = [
+  {
+    id: 'sub_001',
+    customerId: 'cus_001',
+    customerName: 'Acme Property Management',
+    planId: 'plan_platinum',
+    planName: 'Platinum',
+    status: 'active',
+    startedAt: '2025-09-15T00:00:00Z',
+    renewsAt: '2026-09-15T00:00:00Z',
+  },
+  {
+    id: 'sub_002',
+    customerId: 'cus_002',
+    customerName: 'Jamie Rodriguez',
+    planId: 'plan_gold',
+    planName: 'Gold',
+    status: 'active',
+    startedAt: '2026-01-08T00:00:00Z',
+    renewsAt: '2027-01-08T00:00:00Z',
+  },
+  {
+    id: 'sub_003',
+    customerId: 'cus_003',
+    customerName: 'Mason Hardware Co.',
+    planId: 'plan_silver',
+    planName: 'Silver',
+    status: 'active',
+    startedAt: '2025-11-22T00:00:00Z',
+    renewsAt: '2026-11-22T00:00:00Z',
+  },
+];