create-crm-starter 0.1.0

package/template/extras/checklists/drizzle/src/lib/checklists/data.ts

@@ -0,0 +1,80 @@
+import { asc, desc, eq, isNull, sql } from 'drizzle-orm';
+import { db } from '@/db/client';
+import { checklistTemplates, jobChecklists } from '@/db/schema';
+import type {
+  ChecklistTemplate,
+  ChecklistTemplateItem,
+  JobChecklist,
+  JobChecklistItem,
+} from './types';
+
+function toTemplate(
+  row: typeof checklistTemplates.$inferSelect,
+  attachedJobCount: number,
+): ChecklistTemplate {
+  const items = (row.items as ChecklistTemplateItem[]) ?? [];
+  return {
+    id: row.id,
+    name: row.name,
+    description: row.description ?? undefined,
+    items,
+    itemCount: items.length,
+    requiredCount: items.filter((i) => i.required).length,
+    attachedJobCount,
+    createdAt: row.createdAt.toISOString(),
+  };
+}
+
+export async function getChecklistTemplates(): Promise<ChecklistTemplate[]> {
+  const rows = await db
+    .select({
+      template: checklistTemplates,
+      attachedJobCount: sql<number>`COALESCE(COUNT(DISTINCT ${jobChecklists.jobId}), 0)::int`,
+    })
+    .from(checklistTemplates)
+    .leftJoin(jobChecklists, eq(checklistTemplates.id, jobChecklists.templateId))
+    .where(isNull(checklistTemplates.archivedAt))
+    .groupBy(checklistTemplates.id)
+    .orderBy(asc(checklistTemplates.name));
+  return rows.map((r) => toTemplate(r.template, r.attachedJobCount));
+}
+
+export async function getChecklistTemplate(id: string): Promise<ChecklistTemplate | null> {
+  const [row] = await db
+    .select({
+      template: checklistTemplates,
+      attachedJobCount: sql<number>`COALESCE(COUNT(DISTINCT ${jobChecklists.jobId}), 0)::int`,
+    })
+    .from(checklistTemplates)
+    .leftJoin(jobChecklists, eq(checklistTemplates.id, jobChecklists.templateId))
+    .where(eq(checklistTemplates.id, id))
+    .groupBy(checklistTemplates.id)
+    .limit(1);
+  if (!row) return null;
+  return toTemplate(row.template, row.attachedJobCount);
+}
+
+function toJobChecklist(row: typeof jobChecklists.$inferSelect): JobChecklist {
+  const items = (row.items as JobChecklistItem[]) ?? [];
+  const completedCount = items.filter((i) => i.completed).length;
+  const requiredItems = items.filter((i) => i.required);
+  const allRequiredComplete = requiredItems.every((i) => i.completed);
+  return {
+    id: row.id,
+    jobId: row.jobId,
+    templateId: row.templateId ?? undefined,
+    templateName: row.templateName,
+    items,
+    allRequiredComplete,
+    progressPct: items.length === 0 ? 0 : Math.round((completedCount / items.length) * 100),
+  };
+}
+
+export async function getJobChecklists(jobId: string): Promise<JobChecklist[]> {
+  const rows = await db
+    .select()
+    .from(jobChecklists)
+    .where(eq(jobChecklists.jobId, jobId))
+    .orderBy(desc(jobChecklists.attachedAt));
+  return rows.map(toJobChecklist);
+}

package/template/extras/comms-email/src/app/(dashboard)/email/page.tsx

@@ -0,0 +1,32 @@
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+
+const TEMPLATES = [
+  { id: 'appt_confirm', name: 'Appointment confirmation', desc: 'Sent immediately after booking.' },
+  { id: 'reminder_24h', name: '24h reminder', desc: 'Sent 24 hours before scheduled job.' },
+  { id: 'on_the_way',   name: 'On the way', desc: 'Sent when tech taps "Start route" in field app.' },
+  { id: 'invoice_sent', name: 'Invoice sent', desc: 'Sent when an invoice is finalized.' },
+  { id: 'review_request', name: 'Review request', desc: 'Sent 24h after job completion.' },
+];
+
+export default function EmailPage() {
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-3xl font-bold tracking-tight">Email templates</h1>
+        <p className="text-muted-foreground mt-1 text-sm">
+          Powered by Resend. Templates live in <code>src/emails/</code> (build with react-email).
+        </p>
+      </div>
+      <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+        {TEMPLATES.map((t) => (
+          <Card key={t.id}>
+            <CardHeader>
+              <CardTitle className="text-base">{t.name}</CardTitle>
+            </CardHeader>
+            <CardContent className="text-muted-foreground text-sm">{t.desc}</CardContent>
+          </Card>
+        ))}
+      </div>
+    </div>
+  );
+}

package/template/extras/comms-sms/_shared/src/app/(dashboard)/sms/new/page.tsx

@@ -0,0 +1,35 @@
+import Link from 'next/link';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+
+/**
+ * Default stub. The Drizzle stack overwrites this with a real Twilio
+ * composer (recipient picker + templates + send). On other stacks, SMS
+ * sending isn't wired yet — this page explains that instead of 404-ing.
+ */
+export default function NewSmsStubPage() {
+  return (
+    <div className="mx-auto max-w-2xl space-y-6">
+      <div>
+        <Link href="/sms" className="text-muted-foreground text-sm hover:underline">← Inbox</Link>
+        <h1 className="mt-1 text-3xl font-bold tracking-tight">New message</h1>
+      </div>
+      <Card>
+        <CardHeader><CardTitle>SMS sending isn&apos;t wired on this stack yet</CardTitle></CardHeader>
+        <CardContent className="text-muted-foreground space-y-3 text-sm">
+          <p>
+            Two-way SMS (Twilio send + inbound webhook + threaded inbox) currently
+            ships on the <strong>Better-Auth + Postgres + Drizzle</strong> stack.
+          </p>
+          <p>
+            To enable it, scaffold with that stack, or implement the Twilio
+            send action for your stack and replace this page.
+          </p>
+          <Button asChild variant="outline" size="sm">
+            <Link href="/sms">Back to inbox</Link>
+          </Button>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

package/template/extras/comms-sms/_shared/src/app/(dashboard)/sms/page.tsx

@@ -0,0 +1,55 @@
+import Link from 'next/link';
+import { Card } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+
+const THREADS = [
+  { id: 't1', customer: 'Jamie Rodriguez', last: 'On my way — see you in 10!', unread: 0, at: '11:42 AM' },
+  { id: 't2', customer: 'Acme Property Management', last: 'Can we reschedule to Thursday?', unread: 2, at: '9:05 AM' },
+  { id: 't3', customer: 'Priya Patel', last: 'Thanks — confirmed.', unread: 0, at: 'Yesterday' },
+  { id: 't4', customer: 'Mason Hardware', last: 'Sending the W-9 now.', unread: 1, at: '2 days ago' },
+];
+
+interface PageProps { searchParams: Promise<{ sent?: string }>; }
+
+export default async function SmsPage({ searchParams }: PageProps) {
+  const sp = await searchParams;
+  return (
+    <div className="flex h-[calc(100vh-8rem)] flex-col gap-3">
+      <div className="flex items-center justify-between">
+        <h1 className="text-2xl font-bold tracking-tight">Inbox</h1>
+        <Button asChild>
+          <Link href="/sms/new">New message</Link>
+        </Button>
+      </div>
+      {sp.sent && (
+        <div className="bg-emerald-50 border-emerald-200 text-emerald-900 rounded-md border px-3 py-2 text-sm">
+          ✓ Message sent.
+        </div>
+      )}
+      <div className="grid flex-1 grid-cols-[20rem_1fr] gap-4 overflow-hidden">
+        <Card className="flex flex-col">
+          <div className="border-b p-3 font-semibold">Threads</div>
+          <div className="flex-1 overflow-y-auto">
+            {THREADS.map((t) => (
+              <div key={t.id} className="hover:bg-muted/30 cursor-pointer border-b p-3 text-sm">
+                <div className="flex items-center justify-between">
+                  <div className="font-medium">{t.customer}</div>
+                  {t.unread > 0 && <Badge>{t.unread}</Badge>}
+                </div>
+                <div className="text-muted-foreground mt-1 truncate text-xs">{t.last}</div>
+                <div className="text-muted-foreground mt-0.5 text-[10px]">{t.at}</div>
+              </div>
+            ))}
+          </div>
+        </Card>
+        <Card className="flex items-center justify-center">
+          <p className="text-muted-foreground text-sm">
+            Select a thread to view the conversation. (Inbound webhook + threaded
+            history land in a later module.)
+          </p>
+        </Card>
+      </div>
+    </div>
+  );
+}

package/template/extras/comms-sms/drizzle/src/app/(dashboard)/sms/[customerId]/page.tsx

@@ -0,0 +1,102 @@
+import Link from 'next/link';
+import { notFound } from 'next/navigation';
+import { eq } from 'drizzle-orm';
+import { db } from '@/db/client';
+import { customers } from '@/db/schema';
+import { Card, CardContent } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { getMessagesForCustomer } from '@/lib/sms/data';
+import { sendSms } from '@/lib/sms/actions';
+import { formatDate } from '@/lib/utils';
+
+interface PageProps {
+  params: Promise<{ customerId: string }>;
+  searchParams: Promise<{ sent?: string }>;
+}
+
+export default async function SmsThreadPage({ params, searchParams }: PageProps) {
+  const { customerId } = await params;
+  const sp = await searchParams;
+  const [customer] = await db
+    .select({ id: customers.id, name: customers.name, phones: customers.phones })
+    .from(customers)
+    .where(eq(customers.id, customerId))
+    .limit(1);
+  if (!customer) notFound();
+
+  const phones = (customer.phones as string[]) ?? [];
+  const phone = phones[0] ?? '';
+  const messages = await getMessagesForCustomer(customerId);
+
+  return (
+    <div className="flex h-[calc(100vh-8rem)] flex-col gap-3">
+      <div>
+        <Link href="/sms" className="text-muted-foreground text-sm hover:underline">← Inbox</Link>
+        <h1 className="mt-1 text-2xl font-bold tracking-tight">{customer.name}</h1>
+        {phone && (
+          <p className="text-muted-foreground text-sm">
+            <a href={`tel:${phone}`} className="hover:underline">{phone}</a>
+            {' · '}
+            <Link href={`/customers/${customer.id}`} className="hover:underline">Customer profile</Link>
+          </p>
+        )}
+        {sp.sent && (
+          <div className="bg-emerald-50 border-emerald-200 text-emerald-900 mt-2 rounded-md border px-3 py-2 text-sm">
+            ✓ Sent.
+          </div>
+        )}
+      </div>
+
+      <Card className="flex flex-1 flex-col overflow-hidden">
+        <div className="flex-1 space-y-3 overflow-y-auto p-4">
+          {messages.length === 0 ? (
+            <p className="text-muted-foreground text-center text-sm">
+              No messages yet. Send one below.
+            </p>
+          ) : (
+            messages.map((m) => (
+              <div
+                key={m.id}
+                className={`flex ${m.direction === 'outbound' ? 'justify-end' : 'justify-start'}`}
+              >
+                <div
+                  className={`max-w-[75%] rounded-2xl px-4 py-2 ${
+                    m.direction === 'outbound'
+                      ? 'bg-brand text-white'
+                      : 'bg-muted text-foreground'
+                  }`}
+                >
+                  <p className="text-sm whitespace-pre-wrap">{m.body}</p>
+                  <p
+                    className={`mt-1 text-[10px] ${
+                      m.direction === 'outbound' ? 'text-white/70' : 'text-muted-foreground'
+                    }`}
+                  >
+                    {formatDate(m.createdAt, { dateStyle: 'short', timeStyle: 'short' })}
+                    {m.direction === 'outbound' && m.status && ` · ${m.status}`}
+                  </p>
+                </div>
+              </div>
+            ))
+          )}
+        </div>
+        <form action={sendSms} className="flex items-center gap-2 border-t p-3">
+          <input type="hidden" name="customerId" value={customer.id} />
+          <input type="hidden" name="to" value={phone} />
+          <Input
+            name="body"
+            required
+            maxLength={1600}
+            placeholder={phone ? 'Type a reply…' : 'No phone on file for this customer'}
+            disabled={!phone}
+            className="flex-1"
+          />
+          <Button type="submit" disabled={!phone}>
+            Send
+          </Button>
+        </form>
+      </Card>
+    </div>
+  );
+}

package/template/extras/comms-sms/drizzle/src/app/(dashboard)/sms/new/page.tsx

@@ -0,0 +1,120 @@
+import Link from 'next/link';
+import { asc } from 'drizzle-orm';
+import { db } from '@/db/client';
+import { customers } from '@/db/schema';
+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 { sendSms } from '@/lib/sms/actions';
+
+const TEMPLATES = [
+  { label: 'On My Way', body: 'On my way! ETA ~15-30 minutes. Reply if you need to reschedule.' },
+  { label: '24h reminder', body: 'Reminder: your appointment is tomorrow. Reply C to confirm, R to reschedule.' },
+  { label: 'Job finished', body: 'All wrapped up — thanks for choosing us! We\'ll send your invoice shortly.' },
+  { label: 'Review request', body: 'Hope everything looks great. Could we ask for a quick review? It really helps our small business.' },
+];
+
+export default async function NewSmsPage() {
+  const rows = await db
+    .select({ id: customers.id, name: customers.name, phones: customers.phones })
+    .from(customers)
+    .orderBy(asc(customers.name));
+  // Flatten to one row per phone for the dropdown.
+  const recipients = rows
+    .flatMap((r) =>
+      (r.phones as string[]).map((p) => ({
+        id: r.id,
+        label: `${r.name} — ${p}`,
+        phone: p,
+      })),
+    )
+    .slice(0, 200);
+
+  return (
+    <div className="mx-auto max-w-2xl space-y-6">
+      <div>
+        <Link href="/sms" className="text-muted-foreground text-sm hover:underline">← Inbox</Link>
+        <h1 className="mt-1 text-3xl font-bold tracking-tight">New message</h1>
+      </div>
+      <form action={sendSms}>
+        <Card>
+          <CardHeader>
+            <CardTitle>Send SMS</CardTitle>
+            <CardDescription>
+              Powered by Twilio. Make sure <code className="bg-muted rounded px-1.5 py-0.5">TWILIO_*</code>{' '}
+              env vars are set in <code className="bg-muted rounded px-1.5 py-0.5">.env.local</code>.
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="space-y-2">
+              <Label htmlFor="to">Recipient phone *</Label>
+              {recipients.length > 0 && (
+                <select
+                  onChange={(e) => {
+                    const input = document.getElementById('to') as HTMLInputElement | null;
+                    if (input && e.target.value) input.value = e.target.value;
+                  }}
+                  className="border-input bg-background h-10 w-full rounded-md border px-3 text-sm"
+                  defaultValue=""
+                >
+                  <option value="">— Pick a customer to autofill —</option>
+                  {recipients.map((r, i) => (
+                    <option key={i} value={r.phone}>{r.label}</option>
+                  ))}
+                </select>
+              )}
+              <Input
+                id="to"
+                name="to"
+                type="tel"
+                required
+                placeholder="+15125550100 or (512) 555-0100"
+              />
+              <p className="text-muted-foreground text-xs">
+                Format any way — we normalize to E.164 server-side. US-only without an explicit country code.
+              </p>
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="body">Message *</Label>
+              <div className="flex flex-wrap gap-1">
+                {TEMPLATES.map((t) => (
+                  <button
+                    key={t.label}
+                    type="button"
+                    onClick={(e) => {
+                      const textarea = (e.currentTarget.closest('form') as HTMLFormElement)
+                        ?.querySelector('#body') as HTMLTextAreaElement | null;
+                      if (textarea) textarea.value = t.body;
+                    }}
+                    className="bg-muted hover:bg-accent rounded-md px-2 py-1 text-xs"
+                  >
+                    {t.label}
+                  </button>
+                ))}
+              </div>
+              <textarea
+                id="body"
+                name="body"
+                rows={5}
+                required
+                maxLength={1600}
+                placeholder="Your message…"
+                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"
+              />
+              <p className="text-muted-foreground text-xs">
+                160 chars per segment. Twilio charges per segment.
+              </p>
+            </div>
+          </CardContent>
+        </Card>
+        <div className="mt-4 flex justify-end gap-3">
+          <Button type="button" variant="outline" asChild>
+            <Link href="/sms">Cancel</Link>
+          </Button>
+          <Button type="submit">Send message</Button>
+        </div>
+      </form>
+    </div>
+  );
+}

package/template/extras/comms-sms/drizzle/src/app/(dashboard)/sms/page.tsx

@@ -0,0 +1,70 @@
+import Link from 'next/link';
+import { Card } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { getSmsThreads } from '@/lib/sms/data';
+import { formatDate } from '@/lib/utils';
+
+interface PageProps { searchParams: Promise<{ sent?: string }>; }
+
+export default async function SmsPage({ searchParams }: PageProps) {
+  const sp = await searchParams;
+  const threads = await getSmsThreads();
+  return (
+    <div className="flex h-[calc(100vh-8rem)] flex-col gap-3">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-bold tracking-tight">Inbox</h1>
+          <p className="text-muted-foreground text-sm">
+            {threads.length} thread{threads.length === 1 ? '' : 's'}
+          </p>
+        </div>
+        <Button asChild>
+          <Link href="/sms/new">New message</Link>
+        </Button>
+      </div>
+      {sp.sent && (
+        <div className="bg-emerald-50 border-emerald-200 text-emerald-900 rounded-md border px-3 py-2 text-sm">
+          ✓ Message sent.
+        </div>
+      )}
+      <Card className="flex flex-1 flex-col overflow-hidden">
+        {threads.length === 0 ? (
+          <div className="flex flex-1 flex-col items-center justify-center gap-3 p-8 text-center">
+            <p className="text-muted-foreground text-sm">No conversations yet.</p>
+            <p className="text-muted-foreground text-xs max-w-md">
+              Outbound messages logged here automatically. Inbound replies arrive
+              via the Twilio webhook at <code className="bg-muted rounded px-1 py-0.5">/api/twilio/sms</code>{' '}
+              — set that URL in your Twilio phone number console.
+            </p>
+            <Button asChild size="sm" className="mt-2">
+              <Link href="/sms/new">Send first message</Link>
+            </Button>
+          </div>
+        ) : (
+          <div className="divide-border divide-y overflow-y-auto">
+            {threads.map((t) => (
+              <Link
+                key={t.customerId}
+                href={`/sms/${t.customerId}`}
+                className="hover:bg-muted/30 block p-4 transition"
+              >
+                <div className="flex items-center justify-between gap-3">
+                  <div className="min-w-0">
+                    <div className="font-medium">{t.customerName}</div>
+                    {t.customerPhone && (
+                      <div className="text-muted-foreground text-xs">{t.customerPhone}</div>
+                    )}
+                  </div>
+                  <div className="text-muted-foreground text-xs whitespace-nowrap">
+                    {formatDate(t.lastAt, { dateStyle: 'short', timeStyle: 'short' })}
+                  </div>
+                </div>
+                <p className="text-muted-foreground mt-1 truncate text-sm">{t.lastBody}</p>
+              </Link>
+            ))}
+          </div>
+        )}
+      </Card>
+    </div>
+  );
+}

package/template/extras/comms-sms/drizzle/src/app/api/twilio/sms/route.ts

@@ -0,0 +1,69 @@
+import type { NextRequest } from 'next/server';
+import twilio from 'twilio';
+import { db } from '@/db/client';
+import { smsMessages } from '@/db/schema';
+import { findCustomerByPhone } from '@/lib/sms/data';
+
+/**
+ * Twilio inbound SMS webhook. Configure your phone number's "A message
+ * comes in" webhook URL to point at:
+ *
+ *   https://<your-domain>/api/twilio/sms
+ *
+ * with HTTP POST. We verify the signature using TWILIO_AUTH_TOKEN, look
+ * up the sending number against the customers table, and store the
+ * message. Response is TwiML; an empty <Response/> means "received, no
+ * auto-reply".
+ *
+ * If you want a touch-tone-style auto-reply (e.g. "Reply STOP to opt out"),
+ * add <Message>...</Message> elements to the TwiML below.
+ */
+export async function POST(req: NextRequest) {
+  const authToken = process.env.TWILIO_AUTH_TOKEN;
+  if (!authToken) {
+    return new Response('TWILIO_AUTH_TOKEN not set', { status: 500 });
+  }
+
+  // Twilio POSTs application/x-www-form-urlencoded.
+  const rawBody = await req.text();
+  const params: Record<string, string> = {};
+  for (const [k, v] of new URLSearchParams(rawBody).entries()) {
+    params[k] = v;
+  }
+
+  // Signature verification: Twilio sends X-Twilio-Signature based on full
+  // URL + sorted-form-params + HMAC-SHA1(authToken).
+  const signature = req.headers.get('x-twilio-signature') ?? '';
+  const proto = req.headers.get('x-forwarded-proto') ?? 'https';
+  const host = req.headers.get('host') ?? '';
+  const url = `${proto}://${host}${req.nextUrl.pathname}${req.nextUrl.search}`;
+  const valid = twilio.validateRequest(authToken, signature, url, params);
+  if (!valid && process.env.NODE_ENV === 'production') {
+    return new Response('Invalid signature', { status: 403 });
+  }
+
+  const from = params.From ?? '';
+  const to = params.To ?? '';
+  const body = params.Body ?? '';
+  const messageSid = params.MessageSid ?? '';
+
+  if (!from || !body) {
+    return new Response('Missing From or Body', { status: 400 });
+  }
+
+  const match = await findCustomerByPhone(from);
+  await db.insert(smsMessages).values({
+    customerId: match.customerId,
+    direction: 'inbound',
+    fromNumber: from,
+    toNumber: to,
+    body,
+    twilioMessageSid: messageSid,
+    status: 'received',
+  });
+
+  return new Response('<?xml version="1.0" encoding="UTF-8"?><Response/>', {
+    status: 200,
+    headers: { 'Content-Type': 'text/xml' },
+  });
+}

package/template/extras/comms-sms/drizzle/src/db/schema/sms-messages.ts

@@ -0,0 +1,27 @@
+import { pgEnum, pgTable, text, timestamp, uuid } from 'drizzle-orm/pg-core';
+import { customers } from './customers';
+
+export const smsDirection = pgEnum('sms_direction', ['inbound', 'outbound']);
+
+/**
+ * Two-way SMS log. Inbound messages land here via the Twilio webhook;
+ * outbound messages are inserted by the sendSms server action.
+ * customerId is nullable because inbound messages from unknown numbers
+ * still get logged (and can be matched to a customer later).
+ */
+export const smsMessages = pgTable('sms_messages', {
+  id: uuid('id').primaryKey().defaultRandom(),
+  customerId: uuid('customer_id').references(() => customers.id, { onDelete: 'set null' }),
+  direction: smsDirection('direction').notNull(),
+  fromNumber: text('from_number').notNull(),  // E.164
+  toNumber: text('to_number').notNull(),      // E.164
+  body: text('body').notNull(),
+  /** Twilio MessageSid — useful for delivery-status webhook lookup later. */
+  twilioMessageSid: text('twilio_message_sid'),
+  status: text('status'), // queued / sent / delivered / failed / received
+  errorMessage: text('error_message'),
+  createdAt: timestamp('created_at').notNull().defaultNow(),
+});
+
+export type SmsMessageRow = typeof smsMessages.$inferSelect;
+export type NewSmsMessage = typeof smsMessages.$inferInsert;