create-crm-starter 0.1.0

package/template/extras/comms-sms/drizzle/src/lib/sms/actions.ts

@@ -0,0 +1,107 @@
+'use server';
+
+import twilio from 'twilio';
+import { revalidatePath } from 'next/cache';
+import { redirect } from 'next/navigation';
+import { db } from '@/db/client';
+import { smsMessages } from '@/db/schema';
+import { findCustomerByPhone } from './data';
+
+export interface SendSmsInput {
+  to: string;     // E.164 preferred — e.g. +15125550100
+  body: string;
+  /** Optional explicit customer link (skips phone-based lookup). */
+  customerId?: string;
+}
+
+// Module-internal helper. NOT exported — files with 'use server' may only
+// export async functions (Next.js Server Actions constraint).
+function normalizeE164(raw: string): string {
+  const digits = raw.replace(/[^\d+]/g, '');
+  if (digits.startsWith('+')) return digits;
+  if (digits.length === 10) return `+1${digits}`;
+  if (digits.length === 11 && digits.startsWith('1')) return `+${digits}`;
+  return digits;
+}
+
+async function persistOutbound(opts: {
+  to: string;
+  from: string;
+  body: string;
+  twilioMessageSid?: string;
+  status?: string;
+  customerId?: string;
+}) {
+  let { customerId } = opts;
+  if (!customerId) {
+    const match = await findCustomerByPhone(opts.to);
+    if (match.customerId) customerId = match.customerId;
+  }
+  await db.insert(smsMessages).values({
+    customerId: customerId ?? null,
+    direction: 'outbound',
+    fromNumber: opts.from,
+    toNumber: opts.to,
+    body: opts.body,
+    twilioMessageSid: opts.twilioMessageSid ?? null,
+    status: opts.status ?? 'queued',
+  });
+}
+
+export async function sendSms(formData: FormData): Promise<void> {
+  const accountSid = process.env.TWILIO_ACCOUNT_SID;
+  const authToken = process.env.TWILIO_AUTH_TOKEN;
+  const from = process.env.TWILIO_PHONE_NUMBER;
+  if (!accountSid || !authToken || !from) {
+    throw new Error(
+      'Twilio not configured. Set TWILIO_ACCOUNT_SID, TWILIO_AUTH_TOKEN, and TWILIO_PHONE_NUMBER in .env.local.',
+    );
+  }
+  if (!accountSid.startsWith('AC')) {
+    throw new Error('TWILIO_ACCOUNT_SID does not look right — it should start with "AC".');
+  }
+
+  const toRaw = (formData.get('to') ?? '').toString().trim();
+  const body = (formData.get('body') ?? '').toString().trim();
+  const explicitCustomer = (formData.get('customerId') ?? '').toString().trim() || undefined;
+  if (!toRaw || !body) throw new Error('Both "to" and "body" are required.');
+
+  const to = normalizeE164(toRaw);
+  const client = twilio(accountSid, authToken);
+  const msg = await client.messages.create({ to, from, body });
+
+  await persistOutbound({
+    to, from, body,
+    twilioMessageSid: msg.sid,
+    status: msg.status,
+    customerId: explicitCustomer,
+  });
+
+  revalidatePath('/sms');
+  if (explicitCustomer) {
+    revalidatePath(`/sms/${explicitCustomer}`);
+    redirect(`/sms/${explicitCustomer}?sent=true`);
+  }
+  redirect('/sms?sent=true');
+}
+
+/**
+ * Server-callable variant used by automations (e.g. job "On My Way" trigger).
+ */
+export async function sendSmsRaw(input: SendSmsInput): Promise<void> {
+  const accountSid = process.env.TWILIO_ACCOUNT_SID;
+  const authToken = process.env.TWILIO_AUTH_TOKEN;
+  const from = process.env.TWILIO_PHONE_NUMBER;
+  if (!accountSid || !authToken || !from) {
+    throw new Error('Twilio not configured');
+  }
+  const client = twilio(accountSid, authToken);
+  const to = normalizeE164(input.to);
+  const msg = await client.messages.create({ to, from, body: input.body });
+  await persistOutbound({
+    to, from, body: input.body,
+    twilioMessageSid: msg.sid,
+    status: msg.status,
+    customerId: input.customerId,
+  });
+}

package/template/extras/comms-sms/drizzle/src/lib/sms/data.ts

@@ -0,0 +1,111 @@
+import { and, desc, eq, isNotNull, sql } from 'drizzle-orm';
+import { db } from '@/db/client';
+import { customers, smsMessages } from '@/db/schema';
+
+export interface SmsThread {
+  customerId: string;
+  customerName: string;
+  customerPhone: string;
+  lastBody: string;
+  lastAt: string; // ISO
+  unread: number; // placeholder until read-tracking is added
+}
+
+export interface SmsMessage {
+  id: string;
+  customerId: string | null;
+  direction: 'inbound' | 'outbound';
+  fromNumber: string;
+  toNumber: string;
+  body: string;
+  status: string | null;
+  createdAt: string;
+}
+
+/**
+ * One row per customer who's exchanged messages, with the latest message
+ * preview. Customers without messages are filtered out via the JOIN.
+ */
+export async function getSmsThreads(): Promise<SmsThread[]> {
+  // We want the latest message per customer. Postgres-DISTINCT-ON style
+  // via a subquery: rank by createdAt, then keep rank=1.
+  const rows = await db
+    .select({
+      customerId: smsMessages.customerId,
+      customerName: customers.name,
+      customerPhones: customers.phones,
+      body: smsMessages.body,
+      createdAt: smsMessages.createdAt,
+      rowNum: sql<number>`ROW_NUMBER() OVER (PARTITION BY ${smsMessages.customerId} ORDER BY ${smsMessages.createdAt} DESC)`.as('rn'),
+    })
+    .from(smsMessages)
+    .leftJoin(customers, eq(smsMessages.customerId, customers.id))
+    .where(isNotNull(smsMessages.customerId))
+    .orderBy(desc(smsMessages.createdAt));
+
+  const threads: SmsThread[] = [];
+  const seen = new Set<string>();
+  for (const r of rows) {
+    if (!r.customerId || seen.has(r.customerId)) continue;
+    seen.add(r.customerId);
+    const phones = (r.customerPhones as string[]) ?? [];
+    threads.push({
+      customerId: r.customerId,
+      customerName: r.customerName ?? '(deleted)',
+      customerPhone: phones[0] ?? '',
+      lastBody: r.body,
+      lastAt: r.createdAt.toISOString(),
+      unread: 0,
+    });
+  }
+  return threads;
+}
+
+export async function getMessagesForCustomer(customerId: string): Promise<SmsMessage[]> {
+  const rows = await db
+    .select()
+    .from(smsMessages)
+    .where(eq(smsMessages.customerId, customerId))
+    .orderBy(smsMessages.createdAt);
+  return rows.map((m) => ({
+    id: m.id,
+    customerId: m.customerId,
+    direction: m.direction as 'inbound' | 'outbound',
+    fromNumber: m.fromNumber,
+    toNumber: m.toNumber,
+    body: m.body,
+    status: m.status,
+    createdAt: m.createdAt.toISOString(),
+  }));
+}
+
+export interface InboundMessageMatch {
+  customerId: string | null;
+  customerName: string | null;
+}
+
+/**
+ * Looks up a customer by phone number, normalizing both sides for a
+ * best-effort match. Twilio gives us E.164 (+15125550100); customers
+ * are stored as free-form so we normalize to last-10-digits comparison.
+ */
+export async function findCustomerByPhone(twilioFrom: string): Promise<InboundMessageMatch> {
+  const target = twilioFrom.replace(/[^\d]/g, '').slice(-10);
+  if (target.length < 7) return { customerId: null, customerName: null };
+
+  // Crude scan — for v1 with <10k customers this is fine. For scale,
+  // add a normalized_phone column + index.
+  const rows = await db
+    .select({ id: customers.id, name: customers.name, phones: customers.phones })
+    .from(customers);
+
+  for (const c of rows) {
+    for (const p of (c.phones as string[]) ?? []) {
+      const norm = p.replace(/[^\d]/g, '').slice(-10);
+      if (norm === target) {
+        return { customerId: c.id, customerName: c.name };
+      }
+    }
+  }
+  return { customerId: null, customerName: null };
+}

package/template/extras/customer-portal/_shared/src/app/portal/[token]/layout.tsx

@@ -0,0 +1,51 @@
+import Link from 'next/link';
+import { business } from '@/lib/business';
+
+interface LayoutProps {
+  children: React.ReactNode;
+  params: Promise<{ token: string }>;
+}
+
+export default async function PortalLayout({ children, params }: LayoutProps) {
+  const { token } = await params;
+  return (
+    <div className="bg-muted/30 min-h-screen">
+      <header className="bg-background border-border border-b">
+        <div className="mx-auto flex max-w-4xl items-center justify-between px-6 py-5">
+          <div className="flex items-center gap-3">
+            {business.brand.logoSrc && (
+              // eslint-disable-next-line @next/next/no-img-element
+              <img src={business.brand.logoSrc} alt={business.name} className="h-9 w-auto" />
+            )}
+            <div>
+              <h1 className="text-lg font-bold">{business.name}</h1>
+              <p className="text-muted-foreground text-xs">Customer portal</p>
+            </div>
+          </div>
+          {business.phone && (
+            <a href={`tel:${business.phone}`} className="text-muted-foreground hover:text-foreground text-sm">
+              {business.phone}
+            </a>
+          )}
+        </div>
+        <nav className="bg-background border-border border-b">
+          <div className="mx-auto flex max-w-4xl gap-4 overflow-x-auto px-6 py-2 text-sm">
+            <PortalNavLink href={`/portal/${token}`}>Overview</PortalNavLink>
+            <PortalNavLink href={`/portal/${token}/invoices`}>Invoices</PortalNavLink>
+            <PortalNavLink href={`/portal/${token}/estimates`}>Estimates</PortalNavLink>
+            <PortalNavLink href={`/portal/${token}/appointments`}>Appointments</PortalNavLink>
+          </div>
+        </nav>
+      </header>
+      <main className="mx-auto max-w-4xl px-6 py-8">{children}</main>
+    </div>
+  );
+}
+
+function PortalNavLink({ href, children }: { href: string; children: React.ReactNode }) {
+  return (
+    <Link href={href} className="text-muted-foreground hover:text-foreground whitespace-nowrap py-1">
+      {children}
+    </Link>
+  );
+}

package/template/extras/customer-portal/drizzle/src/app/portal/[token]/appointments/page.tsx

@@ -0,0 +1,78 @@
+import { notFound } from 'next/navigation';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { getPortalData } from '@/lib/portal/data';
+import { JOB_STATUS_COLOR, JOB_STATUS_LABEL } from '@/lib/jobs/types';
+import { formatCurrency, formatDate } from '@/lib/utils';
+
+interface PageProps { params: Promise<{ token: string }>; }
+
+export default async function PortalAppointmentsPage({ params }: PageProps) {
+  const { token } = await params;
+  const data = await getPortalData(token);
+  if (!data) notFound();
+
+  const upcoming = data.jobs.filter((j) => j.scheduledAt && new Date(j.scheduledAt) >= new Date());
+  const past = data.jobs.filter((j) => !j.scheduledAt || new Date(j.scheduledAt) < new Date());
+
+  return (
+    <div className="space-y-6">
+      <h2 className="text-2xl font-bold">Your appointments</h2>
+
+      <Card>
+        <CardHeader><CardTitle className="text-base">Upcoming ({upcoming.length})</CardTitle></CardHeader>
+        <CardContent className="space-y-2">
+          {upcoming.length === 0 ? (
+            <p className="text-muted-foreground text-sm">No upcoming appointments scheduled.</p>
+          ) : (
+            upcoming.map((j) => (
+              <div key={j.id} className="flex items-center justify-between border-b py-2 last:border-b-0">
+                <div>
+                  <div className="font-medium">{j.serviceType}</div>
+                  <div className="text-muted-foreground text-xs">
+                    {j.scheduledAt && formatDate(j.scheduledAt, { dateStyle: 'full', timeStyle: 'short' })}
+                    {j.arrivalWindow && ` · arrival ${j.arrivalWindow}`}
+                  </div>
+                </div>
+                <span className={`rounded-md px-2 py-1 text-xs font-medium ${JOB_STATUS_COLOR[j.status]}`}>
+                  {JOB_STATUS_LABEL[j.status]}
+                </span>
+              </div>
+            ))
+          )}
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader><CardTitle className="text-base">History ({past.length})</CardTitle></CardHeader>
+        <CardContent className="p-0">
+          {past.length === 0 ? (
+            <p className="text-muted-foreground p-4 text-sm">No past appointments.</p>
+          ) : (
+            <table className="w-full text-sm">
+              <tbody className="divide-border divide-y">
+                {past.slice(0, 20).map((j) => (
+                  <tr key={j.id}>
+                    <td className="px-4 py-3">
+                      <div className="font-medium">{j.serviceType}</div>
+                      <div className="text-muted-foreground text-xs">
+                        {j.scheduledAt ? formatDate(j.scheduledAt) : formatDate(j.createdAt)}
+                      </div>
+                    </td>
+                    <td className="px-4 py-3">
+                      <span className={`rounded-md px-2 py-1 text-xs font-medium ${JOB_STATUS_COLOR[j.status]}`}>
+                        {JOB_STATUS_LABEL[j.status]}
+                      </span>
+                    </td>
+                    <td className="text-muted-foreground px-4 py-3 text-right text-xs">
+                      {j.total > 0 ? formatCurrency(j.total) : ''}
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

package/template/extras/customer-portal/drizzle/src/app/portal/[token]/estimates/page.tsx

@@ -0,0 +1,94 @@
+import { notFound } from 'next/navigation';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { getPortalData } from '@/lib/portal/data';
+import { markEstimateViewed } from '@/lib/portal/actions';
+import { ESTIMATE_STATUS_LABEL, ESTIMATE_STATUS_VARIANT } from '@/lib/estimates/types';
+import { EstimateApproval } from '@/components/portal/estimate-approval';
+import { formatCurrency, formatDate } from '@/lib/utils';
+
+interface PageProps { params: Promise<{ token: string }>; }
+
+export default async function PortalEstimatesPage({ params }: PageProps) {
+  const { token } = await params;
+  const data = await getPortalData(token);
+  if (!data) notFound();
+
+  // Bump any 'sent' estimates to 'viewed' on first portal load.
+  await Promise.all(
+    data.estimates
+      .filter((e) => e.status === 'sent')
+      .map((e) => markEstimateViewed(token, e.id)),
+  );
+
+  const actionable = new Set(['sent', 'viewed', 'draft']);
+
+  return (
+    <div className="space-y-6">
+      <h2 className="text-2xl font-bold">Your estimates</h2>
+      {data.estimates.length === 0 ? (
+        <Card><CardContent className="p-6 text-muted-foreground text-sm">No estimates yet.</CardContent></Card>
+      ) : (
+        data.estimates.map((e) => (
+          <Card key={e.id}>
+            <CardHeader className="flex flex-row items-center justify-between space-y-0">
+              <div>
+                <CardTitle className="text-base">Estimate #{e.id.slice(-6)}</CardTitle>
+                <p className="text-muted-foreground mt-1 text-xs">
+                  {e.sentAt ? `Sent ${formatDate(e.sentAt)}` : 'Draft'}
+                  {e.validUntil && ` · valid until ${formatDate(e.validUntil)}`}
+                  {e.approvedAt && ` · approved ${formatDate(e.approvedAt)}`}
+                </p>
+              </div>
+              <div className="flex items-center gap-3">
+                <Badge variant={ESTIMATE_STATUS_VARIANT[e.status]}>{ESTIMATE_STATUS_LABEL[e.status]}</Badge>
+                <span className="text-xl font-bold">{formatCurrency(e.total)}</span>
+              </div>
+            </CardHeader>
+            <CardContent className="p-0">
+              <table className="w-full text-sm">
+                <thead className="text-muted-foreground bg-muted/30 text-xs uppercase">
+                  <tr>
+                    <th className="px-4 py-2 text-left font-medium">Item</th>
+                    <th className="px-4 py-2 text-right font-medium">Qty</th>
+                    <th className="px-4 py-2 text-right font-medium">Subtotal</th>
+                  </tr>
+                </thead>
+                <tbody className="divide-border divide-y">
+                  {e.lineItems.map((li, i) => (
+                    <tr key={i}>
+                      <td className="px-4 py-2">{li.description}</td>
+                      <td className="px-4 py-2 text-right">{li.qty}</td>
+                      <td className="px-4 py-2 text-right font-medium">{formatCurrency(li.qty * li.unitPrice)}</td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+              {e.notes && (
+                <div className="border-t p-4 text-sm">
+                  <div className="text-muted-foreground mb-1 text-xs uppercase">Notes</div>
+                  <div className="whitespace-pre-wrap">{e.notes}</div>
+                </div>
+              )}
+              {actionable.has(e.status) && (
+                <div className="p-4">
+                  <EstimateApproval portalToken={token} estimateId={e.id} total={e.total} />
+                </div>
+              )}
+              {e.status === 'approved' && (
+                <div className="border-t bg-emerald-50 text-emerald-900 px-4 py-3 text-sm">
+                  ✓ Approved — we&apos;ll be in touch to schedule.
+                </div>
+              )}
+              {e.status === 'declined' && (
+                <div className="border-t bg-muted px-4 py-3 text-sm text-muted-foreground">
+                  Declined. If you change your mind, give us a call.
+                </div>
+              )}
+            </CardContent>
+          </Card>
+        ))
+      )}
+    </div>
+  );
+}

package/template/extras/customer-portal/drizzle/src/app/portal/[token]/invoices/page.tsx

@@ -0,0 +1,71 @@
+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 { Button } from '@/components/ui/button';
+import { getInvoicePublicToken, getPortalData } from '@/lib/portal/data';
+import { INVOICE_STATUS_LABEL, INVOICE_STATUS_VARIANT } from '@/lib/invoices/types';
+import { formatCurrency, formatDate } from '@/lib/utils';
+
+interface PageProps { params: Promise<{ token: string }>; }
+
+export default async function PortalInvoicesPage({ params }: PageProps) {
+  const { token } = await params;
+  const data = await getPortalData(token);
+  if (!data) notFound();
+
+  // Resolve per-invoice public tokens so each "Pay" / "View" link goes to
+  // the existing /i/[invoiceToken] page (consistent UX with email links).
+  const withTokens = await Promise.all(
+    data.invoices.map(async (i) => ({ ...i, publicToken: await getInvoicePublicToken(i.id) })),
+  );
+
+  return (
+    <div className="space-y-6">
+      <h2 className="text-2xl font-bold">Your invoices</h2>
+      {withTokens.length === 0 ? (
+        <Card><CardContent className="p-6 text-muted-foreground text-sm">No invoices yet.</CardContent></Card>
+      ) : (
+        <Card>
+          <CardHeader><CardTitle className="text-base">{withTokens.length} total</CardTitle></CardHeader>
+          <CardContent className="p-0">
+            <table className="w-full text-sm">
+              <thead className="text-muted-foreground bg-muted/50 text-xs uppercase">
+                <tr>
+                  <th className="px-4 py-3 text-left font-medium">Invoice #</th>
+                  <th className="px-4 py-3 text-left font-medium">Status</th>
+                  <th className="px-4 py-3 text-left font-medium">Due</th>
+                  <th className="px-4 py-3 text-right font-medium">Total</th>
+                  <th className="px-4 py-3 text-right font-medium">Action</th>
+                </tr>
+              </thead>
+              <tbody className="divide-border divide-y">
+                {withTokens.map((i) => (
+                  <tr key={i.id}>
+                    <td className="px-4 py-3 font-mono text-xs">{i.invoiceNumber}</td>
+                    <td className="px-4 py-3">
+                      <Badge variant={INVOICE_STATUS_VARIANT[i.status]}>{INVOICE_STATUS_LABEL[i.status]}</Badge>
+                    </td>
+                    <td className="text-muted-foreground px-4 py-3">
+                      {i.dueDate ? formatDate(i.dueDate) : '—'}
+                    </td>
+                    <td className="px-4 py-3 text-right font-medium">{formatCurrency(i.total)}</td>
+                    <td className="px-4 py-3 text-right">
+                      {i.publicToken && (
+                        <Button asChild size="sm" variant={i.amountDue > 0 ? 'default' : 'outline'}>
+                          <Link href={`/i/${i.publicToken}`}>
+                            {i.amountDue > 0 ? `Pay ${formatCurrency(i.amountDue)}` : 'View'}
+                          </Link>
+                        </Button>
+                      )}
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </CardContent>
+        </Card>
+      )}
+    </div>
+  );
+}

package/template/extras/customer-portal/drizzle/src/app/portal/[token]/page.tsx

@@ -0,0 +1,118 @@
+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 { getPortalData } from '@/lib/portal/data';
+import { INVOICE_STATUS_LABEL, INVOICE_STATUS_VARIANT } from '@/lib/invoices/types';
+import { ESTIMATE_STATUS_LABEL, ESTIMATE_STATUS_VARIANT } from '@/lib/estimates/types';
+import { JOB_STATUS_COLOR, JOB_STATUS_LABEL } from '@/lib/jobs/types';
+import { formatCurrency, formatDate } from '@/lib/utils';
+
+interface PageProps { params: Promise<{ token: string }>; }
+
+export default async function PortalOverviewPage({ params }: PageProps) {
+  const { token } = await params;
+  const data = await getPortalData(token);
+  if (!data) notFound();
+
+  const openInvoices = data.invoices.filter((i) => i.amountDue > 0).slice(0, 5);
+  const recentEstimates = data.estimates.slice(0, 3);
+  const upcomingJobs = data.jobs
+    .filter((j) => j.scheduledAt && new Date(j.scheduledAt) >= new Date())
+    .slice(0, 3);
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <p className="text-muted-foreground text-sm">Welcome back</p>
+        <h2 className="text-3xl font-bold">{data.customer.name}</h2>
+      </div>
+      <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+        <Card>
+          <CardHeader><CardTitle className="text-base">Balance due</CardTitle></CardHeader>
+          <CardContent>
+            <div className={`text-3xl font-bold ${data.totals.balanceDue > 0 ? 'text-destructive' : ''}`}>
+              {formatCurrency(data.totals.balanceDue)}
+            </div>
+            {data.totals.balanceDue > 0 && (
+              <Link href={`/portal/${token}/invoices`} className="text-brand text-sm underline mt-2 inline-block">
+                Pay invoices →
+              </Link>
+            )}
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader><CardTitle className="text-base">Lifetime spend with us</CardTitle></CardHeader>
+          <CardContent className="text-3xl font-bold text-emerald-600">
+            {formatCurrency(data.totals.lifetimeValue)}
+          </CardContent>
+        </Card>
+      </div>
+      {openInvoices.length > 0 && (
+        <Card>
+          <CardHeader><CardTitle>Invoices to pay</CardTitle></CardHeader>
+          <CardContent className="p-0">
+            <table className="w-full text-sm">
+              <tbody className="divide-border divide-y">
+                {openInvoices.map((i) => (
+                  <tr key={i.id}>
+                    <td className="px-4 py-3 font-mono text-xs">{i.invoiceNumber}</td>
+                    <td className="px-4 py-3">
+                      <Badge variant={INVOICE_STATUS_VARIANT[i.status]}>{INVOICE_STATUS_LABEL[i.status]}</Badge>
+                    </td>
+                    <td className="text-muted-foreground px-4 py-3 text-xs">
+                      {i.dueDate ? `Due ${formatDate(i.dueDate)}` : ''}
+                    </td>
+                    <td className="px-4 py-3 text-right font-bold">{formatCurrency(i.amountDue)}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </CardContent>
+        </Card>
+      )}
+      {upcomingJobs.length > 0 && (
+        <Card>
+          <CardHeader><CardTitle>Upcoming appointments</CardTitle></CardHeader>
+          <CardContent className="space-y-2">
+            {upcomingJobs.map((j) => (
+              <div key={j.id} className="flex items-center justify-between border-b py-2 last:border-b-0">
+                <div>
+                  <div className="font-medium">{j.serviceType}</div>
+                  <div className="text-muted-foreground text-xs">
+                    {j.scheduledAt && formatDate(j.scheduledAt, { dateStyle: 'medium', timeStyle: 'short' })}
+                    {j.arrivalWindow && ` · ${j.arrivalWindow}`}
+                  </div>
+                </div>
+                <span className={`rounded-md px-2 py-1 text-xs font-medium ${JOB_STATUS_COLOR[j.status]}`}>
+                  {JOB_STATUS_LABEL[j.status]}
+                </span>
+              </div>
+            ))}
+          </CardContent>
+        </Card>
+      )}
+      {recentEstimates.length > 0 && (
+        <Card>
+          <CardHeader><CardTitle>Recent estimates</CardTitle></CardHeader>
+          <CardContent className="space-y-2">
+            {recentEstimates.map((e) => (
+              <div key={e.id} className="flex items-center justify-between border-b py-2 last:border-b-0">
+                <div>
+                  <div className="font-medium">#{e.id.slice(-6)}</div>
+                  <div className="text-muted-foreground text-xs">
+                    {e.sentAt ? `Sent ${formatDate(e.sentAt)}` : 'Draft'}
+                  </div>
+                </div>
+                <div className="flex items-center gap-3">
+                  <Badge variant={ESTIMATE_STATUS_VARIANT[e.status]}>{ESTIMATE_STATUS_LABEL[e.status]}</Badge>
+                  <span className="font-medium">{formatCurrency(e.total)}</span>
+                </div>
+              </div>
+            ))}
+          </CardContent>
+        </Card>
+      )}
+    </div>
+  );
+}