create-crm-starter 0.1.0

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

@@ -0,0 +1,18 @@
+import { asc } from 'drizzle-orm';
+import { db } from '@/db/client';
+import { priceBookCategories } from '@/db/schema';
+import { NewPriceBookItemForm } from '@/components/price-book/new-item-form';
+
+export default async function NewPriceBookItemPage() {
+  const cats = await db
+    .select({ id: priceBookCategories.id, name: priceBookCategories.name })
+    .from(priceBookCategories)
+    .orderBy(asc(priceBookCategories.sortOrder), asc(priceBookCategories.name));
+
+  return (
+    <div className="mx-auto max-w-2xl space-y-6">
+      <h1 className="text-3xl font-bold tracking-tight">New price book item</h1>
+      <NewPriceBookItemForm categories={cats} />
+    </div>
+  );
+}

package/template/extras/price-book/drizzle/src/components/price-book/new-item-form.tsx

@@ -0,0 +1,254 @@
+'use client';
+
+import { useMemo, useState, useTransition } from 'react';
+import Link from 'next/link';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { createPriceBookCategory, createPriceBookItem } from '@/lib/price-book/actions';
+import { PRICE_BOOK_KINDS, PRICE_BOOK_KIND_LABEL, type PriceBookKind } from '@/lib/price-book/types';
+import { formatCurrency } from '@/lib/utils';
+
+interface CategoryOption { id: string; name: string; }
+
+export function NewPriceBookItemForm({ categories }: { categories: CategoryOption[] }) {
+  const [pending, start] = useTransition();
+  const [error, setError] = useState<string | null>(null);
+
+  const [categoryId, setCategoryId] = useState(categories[0]?.id ?? '');
+  const [showNewCategory, setShowNewCategory] = useState(categories.length === 0);
+  const [newCategoryName, setNewCategoryName] = useState('');
+
+  const [kind, setKind] = useState<PriceBookKind>('service');
+  const [name, setName] = useState('');
+  const [description, setDescription] = useState('');
+  const [sku, setSku] = useState('');
+  const [defaultQty, setDefaultQty] = useState(1);
+  const [unitCost, setUnitCost] = useState(0);
+  const [unitPrice, setUnitPrice] = useState(0);
+  const [taxable, setTaxable] = useState(true);
+  const [durationMinutes, setDurationMinutes] = useState<number | ''>('');
+
+  const marginPct = useMemo(() => {
+    if (unitPrice <= 0) return 0;
+    return Math.round(((unitPrice - unitCost) / unitPrice) * 100);
+  }, [unitCost, unitPrice]);
+  const marginColor =
+    marginPct < 0 ? 'text-destructive'
+    : marginPct < 25 ? 'text-yellow-600'
+    : 'text-emerald-600';
+
+  function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setError(null);
+    if (!name.trim()) { setError('Name is required.'); return; }
+
+    start(async () => {
+      try {
+        let resolvedCategoryId = categoryId;
+        if (showNewCategory) {
+          if (!newCategoryName.trim()) {
+            setError('Enter a category name or pick an existing category.');
+            return;
+          }
+          resolvedCategoryId = await createPriceBookCategory({ name: newCategoryName });
+        }
+        if (!resolvedCategoryId) {
+          setError('Pick a category.');
+          return;
+        }
+        await createPriceBookItem({
+          categoryId: resolvedCategoryId,
+          kind,
+          name,
+          description: description || undefined,
+          sku: sku || undefined,
+          defaultQty,
+          unitCost,
+          unitPrice,
+          taxable,
+          durationMinutes: durationMinutes === '' ? undefined : Number(durationMinutes),
+        });
+      } catch (err) {
+        setError((err as Error).message);
+      }
+    });
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-6">
+      <Card>
+        <CardHeader>
+          <CardTitle>Category</CardTitle>
+          <CardDescription>Pick an existing category or create a new one.</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-3">
+          {!showNewCategory && categories.length > 0 && (
+            <>
+              <select
+                value={categoryId}
+                onChange={(e) => setCategoryId(e.target.value)}
+                className="border-input bg-background h-10 w-full rounded-md border px-3 text-sm"
+              >
+                {categories.map((c) => (
+                  <option key={c.id} value={c.id}>{c.name}</option>
+                ))}
+              </select>
+              <button
+                type="button"
+                onClick={() => setShowNewCategory(true)}
+                className="text-brand text-xs underline"
+              >
+                + New category
+              </button>
+            </>
+          )}
+          {showNewCategory && (
+            <div className="space-y-2">
+              <Input
+                value={newCategoryName}
+                onChange={(e) => setNewCategoryName(e.target.value)}
+                placeholder="e.g. Plumbing — Drain"
+                autoFocus
+              />
+              {categories.length > 0 && (
+                <button
+                  type="button"
+                  onClick={() => setShowNewCategory(false)}
+                  className="text-muted-foreground text-xs underline"
+                >
+                  Pick an existing category instead
+                </button>
+              )}
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader><CardTitle>Item</CardTitle></CardHeader>
+        <CardContent className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="kind">Kind</Label>
+            <select
+              id="kind"
+              value={kind}
+              onChange={(e) => setKind(e.target.value as PriceBookKind)}
+              className="border-input bg-background h-10 w-full rounded-md border px-3 text-sm"
+            >
+              {PRICE_BOOK_KINDS.map((k) => (
+                <option key={k} value={k}>{PRICE_BOOK_KIND_LABEL[k]}</option>
+              ))}
+            </select>
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="name">Name *</Label>
+            <Input id="name" required value={name} onChange={(e) => setName(e.target.value)} />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="description">Description</Label>
+            <textarea
+              id="description"
+              rows={2}
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+              className="border-input bg-background focus-visible:ring-ring flex w-full rounded-md border px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2"
+            />
+          </div>
+          <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
+            <div className="space-y-2">
+              <Label htmlFor="sku">SKU</Label>
+              <Input id="sku" value={sku} onChange={(e) => setSku(e.target.value)} />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="defaultQty">Default qty</Label>
+              <Input
+                id="defaultQty"
+                type="number"
+                min={1}
+                value={defaultQty}
+                onChange={(e) => setDefaultQty(Number(e.target.value) || 1)}
+              />
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader className="flex flex-row items-start justify-between space-y-0">
+          <div>
+            <CardTitle>Pricing</CardTitle>
+            <CardDescription>Values in cents. e.g. 12500 = $125.00</CardDescription>
+          </div>
+          <div className="text-right">
+            <div className="text-muted-foreground text-xs uppercase">Margin</div>
+            <div className={`text-2xl font-bold ${marginColor}`}>{marginPct}%</div>
+            <div className="text-muted-foreground text-xs">
+              {formatCurrency(unitPrice - unitCost)}
+            </div>
+          </div>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
+            <div className="space-y-2">
+              <Label htmlFor="unitCost">Unit cost (¢)</Label>
+              <Input
+                id="unitCost"
+                type="number"
+                min={0}
+                value={unitCost}
+                onChange={(e) => setUnitCost(Number(e.target.value) || 0)}
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="unitPrice">Unit price (¢)</Label>
+              <Input
+                id="unitPrice"
+                type="number"
+                min={0}
+                value={unitPrice}
+                onChange={(e) => setUnitPrice(Number(e.target.value) || 0)}
+              />
+            </div>
+          </div>
+          <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
+            <div className="space-y-2">
+              <Label htmlFor="durationMinutes">Duration (minutes) — optional</Label>
+              <Input
+                id="durationMinutes"
+                type="number"
+                min={0}
+                value={durationMinutes}
+                onChange={(e) => setDurationMinutes(e.target.value === '' ? '' : Number(e.target.value))}
+                placeholder="e.g. 60"
+              />
+            </div>
+            <div className="flex items-end space-y-2">
+              <label className="flex cursor-pointer items-center gap-2 text-sm">
+                <input
+                  type="checkbox"
+                  checked={taxable}
+                  onChange={(e) => setTaxable(e.target.checked)}
+                  className="h-4 w-4"
+                />
+                Taxable
+              </label>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {error && <p className="text-destructive text-sm">{error}</p>}
+
+      <div className="flex justify-end gap-3">
+        <Button type="button" variant="outline" asChild>
+          <Link href="/price-book">Cancel</Link>
+        </Button>
+        <Button type="submit" disabled={pending}>
+          {pending ? 'Creating...' : 'Create item'}
+        </Button>
+      </div>
+    </form>
+  );
+}

package/template/extras/price-book/drizzle/src/db/schema/price-book.ts

@@ -0,0 +1,33 @@
+import { boolean, integer, pgEnum, pgTable, text, timestamp, uuid } from 'drizzle-orm/pg-core';
+
+export const priceBookKind = pgEnum('price_book_kind', ['service', 'material', 'labor']);
+
+export const priceBookCategories = pgTable('price_book_categories', {
+  id: uuid('id').primaryKey().defaultRandom(),
+  name: text('name').notNull(),
+  sortOrder: integer('sort_order').notNull().default(0),
+  createdAt: timestamp('created_at').notNull().defaultNow(),
+  updatedAt: timestamp('updated_at').notNull().defaultNow(),
+});
+
+export const priceBookItems = pgTable('price_book_items', {
+  id: uuid('id').primaryKey().defaultRandom(),
+  categoryId: uuid('category_id').notNull().references(() => priceBookCategories.id, { onDelete: 'restrict' }),
+  kind: priceBookKind('kind').notNull().default('service'),
+  name: text('name').notNull(),
+  description: text('description'),
+  sku: text('sku'),
+  defaultQty: integer('default_qty').notNull().default(1),
+  unitCost: integer('unit_cost').notNull().default(0),   // cents
+  unitPrice: integer('unit_price').notNull().default(0), // cents
+  taxable: boolean('taxable').notNull().default(true),
+  durationMinutes: integer('duration_minutes'),
+  archivedAt: timestamp('archived_at'),
+  createdAt: timestamp('created_at').notNull().defaultNow(),
+  updatedAt: timestamp('updated_at').notNull().defaultNow(),
+});
+
+export type PriceBookCategoryRow = typeof priceBookCategories.$inferSelect;
+export type NewPriceBookCategory = typeof priceBookCategories.$inferInsert;
+export type PriceBookItemRow = typeof priceBookItems.$inferSelect;
+export type NewPriceBookItem = typeof priceBookItems.$inferInsert;

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

@@ -0,0 +1,72 @@
+'use server';
+
+import { eq } from 'drizzle-orm';
+import { revalidatePath } from 'next/cache';
+import { redirect } from 'next/navigation';
+import { db } from '@/db/client';
+import { priceBookCategories, priceBookItems } from '@/db/schema';
+import { searchPriceBookItems } from './data';
+import type { PriceBookItem, PriceBookKind } from './types';
+
+/**
+ * Server-callable search wrapper used by the autocomplete picker on the
+ * new-job and new-estimate forms. Imported by client components.
+ */
+export async function searchPriceBookItemsAction(query: string): Promise<PriceBookItem[]> {
+  return searchPriceBookItems(query);
+}
+
+export interface CreateCategoryInput {
+  name: string;
+  sortOrder?: number;
+}
+
+export async function createPriceBookCategory(input: CreateCategoryInput): Promise<string> {
+  if (!input.name.trim()) throw new Error('Category name is required');
+  const [row] = await db
+    .insert(priceBookCategories)
+    .values({ name: input.name.trim(), sortOrder: input.sortOrder ?? 999 })
+    .returning({ id: priceBookCategories.id });
+  revalidatePath('/price-book');
+  return row.id;
+}
+
+export interface CreatePriceBookItemInput {
+  categoryId: string;
+  kind: PriceBookKind;
+  name: string;
+  description?: string;
+  sku?: string;
+  defaultQty: number;
+  unitCost: number;   // cents
+  unitPrice: number;  // cents
+  taxable: boolean;
+  durationMinutes?: number;
+}
+
+export async function createPriceBookItem(input: CreatePriceBookItemInput): Promise<void> {
+  if (!input.categoryId) throw new Error('Category is required');
+  if (!input.name.trim()) throw new Error('Item name is required');
+  await db.insert(priceBookItems).values({
+    categoryId: input.categoryId,
+    kind: input.kind,
+    name: input.name.trim(),
+    description: input.description?.trim() || null,
+    sku: input.sku?.trim() || null,
+    defaultQty: input.defaultQty,
+    unitCost: input.unitCost,
+    unitPrice: input.unitPrice,
+    taxable: input.taxable,
+    durationMinutes: input.durationMinutes ?? null,
+  });
+  revalidatePath('/price-book');
+  redirect('/price-book');
+}
+
+export async function archivePriceBookItem(id: string): Promise<void> {
+  await db
+    .update(priceBookItems)
+    .set({ archivedAt: new Date(), updatedAt: new Date() })
+    .where(eq(priceBookItems.id, id));
+  revalidatePath('/price-book');
+}

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

@@ -0,0 +1,81 @@
+import { and, asc, eq, ilike, isNull, or } from 'drizzle-orm';
+import { db } from '@/db/client';
+import { priceBookCategories, priceBookItems } from '@/db/schema';
+import type { PriceBookCategoryWithItems, PriceBookItem, PriceBookKind } from './types';
+
+function toItem(
+  row: typeof priceBookItems.$inferSelect,
+  categoryName: string,
+): PriceBookItem {
+  const marginPct = row.unitPrice > 0
+    ? Math.round(((row.unitPrice - row.unitCost) / row.unitPrice) * 100)
+    : 0;
+  return {
+    id: row.id,
+    categoryId: row.categoryId,
+    categoryName,
+    kind: row.kind as PriceBookKind,
+    name: row.name,
+    description: row.description ?? undefined,
+    sku: row.sku ?? undefined,
+    defaultQty: row.defaultQty,
+    unitCost: row.unitCost,
+    unitPrice: row.unitPrice,
+    taxable: row.taxable,
+    durationMinutes: row.durationMinutes ?? undefined,
+    marginPct,
+  };
+}
+
+export async function getPriceBook(): Promise<PriceBookCategoryWithItems[]> {
+  const cats = await db
+    .select()
+    .from(priceBookCategories)
+    .orderBy(asc(priceBookCategories.sortOrder), asc(priceBookCategories.name));
+
+  const items = await db
+    .select()
+    .from(priceBookItems)
+    .where(isNull(priceBookItems.archivedAt))
+    .orderBy(asc(priceBookItems.name));
+
+  return cats.map((c) => ({
+    id: c.id,
+    name: c.name,
+    sortOrder: c.sortOrder,
+    items: items.filter((i) => i.categoryId === c.id).map((i) => toItem(i, c.name)),
+  }));
+}
+
+export async function getPriceBookItems(): Promise<PriceBookItem[]> {
+  const rows = await db
+    .select({ item: priceBookItems, categoryName: priceBookCategories.name })
+    .from(priceBookItems)
+    .leftJoin(priceBookCategories, eq(priceBookItems.categoryId, priceBookCategories.id))
+    .where(isNull(priceBookItems.archivedAt))
+    .orderBy(asc(priceBookItems.name));
+  return rows.map((r) => toItem(r.item, r.categoryName ?? ''));
+}
+
+export async function searchPriceBookItems(query: string): Promise<PriceBookItem[]> {
+  const q = query.trim();
+  if (!q) return [];
+  const pattern = `%${q}%`;
+  const rows = await db
+    .select({ item: priceBookItems, categoryName: priceBookCategories.name })
+    .from(priceBookItems)
+    .leftJoin(priceBookCategories, eq(priceBookItems.categoryId, priceBookCategories.id))
+    .where(
+      and(
+        isNull(priceBookItems.archivedAt),
+        or(
+          ilike(priceBookItems.name, pattern),
+          ilike(priceBookItems.description, pattern),
+          ilike(priceBookItems.sku, pattern),
+        ),
+      ),
+    )
+    .orderBy(asc(priceBookItems.name))
+    .limit(20);
+  return rows.map((r) => toItem(r.item, r.categoryName ?? ''));
+}

package/template/extras/reporting/src/app/(dashboard)/reports/page.tsx

@@ -0,0 +1,66 @@
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { formatCurrency } from '@/lib/utils';
+
+const KPI = [
+  { label: 'Revenue this month', value: 1287400, trend: '+12%' },
+  { label: 'Open A/R', value: 248500, trend: '-4%' },
+  { label: 'Jobs completed', value: null, raw: 47, trend: '+8%' },
+  { label: 'Avg ticket', value: 27400, trend: '+3%' },
+];
+
+const TECH = [
+  { name: 'Carlos M.', jobs: 18, revenue: 412000 },
+  { name: 'Sarah T.', jobs: 15, revenue: 387000 },
+  { name: 'Alex K.', jobs: 14, revenue: 488400 },
+];
+
+export default function ReportsPage() {
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-3xl font-bold tracking-tight">Reports</h1>
+        <p className="text-muted-foreground mt-1 text-sm">
+          KPIs at a glance. Add Recharts visualizations in <code>src/components/charts/</code>.
+        </p>
+      </div>
+      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-4">
+        {KPI.map((k) => (
+          <Card key={k.label}>
+            <CardHeader>
+              <CardDescription>{k.label}</CardDescription>
+              <CardTitle className="text-3xl">
+                {k.value !== null ? formatCurrency(k.value) : k.raw}
+              </CardTitle>
+            </CardHeader>
+            <CardContent className="text-muted-foreground text-xs">{k.trend} vs last month</CardContent>
+          </Card>
+        ))}
+      </div>
+      <Card>
+        <CardHeader><CardTitle>Technician performance</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">Technician</th>
+                <th className="px-4 py-3 text-right font-medium">Jobs</th>
+                <th className="px-4 py-3 text-right font-medium">Revenue</th>
+                <th className="px-4 py-3 text-right font-medium">Avg ticket</th>
+              </tr>
+            </thead>
+            <tbody className="divide-border divide-y">
+              {TECH.map((t) => (
+                <tr key={t.name}>
+                  <td className="px-4 py-3 font-medium">{t.name}</td>
+                  <td className="px-4 py-3 text-right">{t.jobs}</td>
+                  <td className="px-4 py-3 text-right">{formatCurrency(t.revenue)}</td>
+                  <td className="px-4 py-3 text-right">{formatCurrency(Math.round(t.revenue / t.jobs))}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

package/template/extras/reviews/src/app/(dashboard)/reviews/page.tsx

@@ -0,0 +1,58 @@
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { formatDate } from '@/lib/utils';
+
+const REVIEWS = [
+  { id: 'r1', customer: 'Jamie Rodriguez', stars: 5, text: 'Showed up on time, fixed the AC in 30 minutes.', source: 'Google', at: '2026-05-18' },
+  { id: 'r2', customer: 'Acme Property Mgmt', stars: 5, text: 'Reliable maintenance, great communication.', source: 'Internal', at: '2026-05-10' },
+  { id: 'r3', customer: 'Priya Patel', stars: 4, text: 'Honest estimate, professional.', source: 'Yelp', at: '2026-05-02' },
+];
+
+const REQUESTS = [
+  { customer: 'Mason Hardware Co.', status: 'sent', at: '2026-05-22' },
+  { customer: 'Acme Property Mgmt', status: 'opened', at: '2026-05-20' },
+  { customer: 'Jamie Rodriguez', status: 'submitted', at: '2026-05-18' },
+];
+
+export default function ReviewsPage() {
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-3xl font-bold tracking-tight">Reviews</h1>
+        <p className="text-muted-foreground mt-1 text-sm">Auto-request after job completion. Aggregate across Google, Yelp, Facebook.</p>
+      </div>
+      <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+        <Card>
+          <CardHeader><CardTitle>Recent reviews</CardTitle></CardHeader>
+          <CardContent className="space-y-3">
+            {REVIEWS.map((r) => (
+              <div key={r.id} className="border-b pb-3 last:border-b-0">
+                <div className="flex items-center justify-between">
+                  <div className="font-medium">{r.customer}</div>
+                  <Badge variant="outline">{r.source}</Badge>
+                </div>
+                <div className="text-brand mt-1 text-sm">{'★'.repeat(r.stars)}{'☆'.repeat(5 - r.stars)}</div>
+                <p className="mt-1 text-sm">{r.text}</p>
+                <p className="text-muted-foreground mt-1 text-xs">{formatDate(r.at)}</p>
+              </div>
+            ))}
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader><CardTitle>Pending requests</CardTitle></CardHeader>
+          <CardContent className="space-y-2 text-sm">
+            {REQUESTS.map((r, i) => (
+              <div key={i} className="flex items-center justify-between border-b pb-2 last:border-b-0">
+                <div>{r.customer}</div>
+                <div className="flex items-center gap-2">
+                  <Badge variant="secondary">{r.status}</Badge>
+                  <span className="text-muted-foreground text-xs">{formatDate(r.at)}</span>
+                </div>
+              </div>
+            ))}
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,35 @@
+/**
+ * Seed script — populates demo data into your DB.
+ *
+ * For Convex stack: this file is a placeholder. Run `npx convex import` with
+ * the JSON fixtures in `convex/_fixtures/`, or write a Convex mutation that
+ * imports faker data.
+ *
+ * For Drizzle stack: imports the db client and inserts directly. Run with
+ *   pnpm tsx scripts/seed.ts
+ */
+import { faker } from '@faker-js/faker';
+
+faker.seed(42); // deterministic so screenshots stay stable
+
+async function main() {
+  console.log('[seed] Generating demo data with faker.seed(42)...');
+  // TODO: wire to your DB client here.
+  // Example (Drizzle):
+  //   import { db } from '../src/db/client';
+  //   import { customers } from '../src/db/schema';
+  //   for (let i = 0; i < 20; i++) {
+  //     await db.insert(customers).values({
+  //       name: faker.company.name(),
+  //       phones: [faker.phone.number()],
+  //       emails: [faker.internet.email()],
+  //       ...
+  //     });
+  //   }
+  console.log('[seed] Done. (This is a stub — fill in inserts for your stack.)');
+}
+
+main().catch((err) => {
+  console.error(err);
+  process.exit(1);
+});