create-crm-starter 0.1.0

package/template/extras/jobs/drizzle/src/lib/jobs/photos-actions.ts

@@ -0,0 +1,121 @@
+'use server';
+
+import crypto from 'node:crypto';
+import { desc, eq } from 'drizzle-orm';
+import { PutObjectCommand, DeleteObjectCommand } from '@aws-sdk/client-s3';
+import { revalidatePath } from 'next/cache';
+import { db } from '@/db/client';
+import { jobAttachments } from '@/db/schema';
+import { isR2Configured, publicUrlFor, r2BucketName, r2Client } from '@/lib/r2';
+
+const MAX_BYTES = 8 * 1024 * 1024; // 8MB per file
+const ALLOWED_TYPES = new Set([
+  'image/jpeg',
+  'image/png',
+  'image/webp',
+  'image/heic',
+  'image/heif',
+  'image/gif',
+  'application/pdf',
+]);
+
+export interface JobAttachmentView {
+  id: string;
+  url: string;
+  kind: string;
+  contentType: string;
+  sizeBytes: number;
+  caption?: string;
+  uploadedAt: string;
+}
+
+export async function getJobAttachments(jobId: string): Promise<JobAttachmentView[]> {
+  const rows = await db
+    .select()
+    .from(jobAttachments)
+    .where(eq(jobAttachments.jobId, jobId))
+    .orderBy(desc(jobAttachments.uploadedAt));
+  return rows.map((r) => ({
+    id: r.id,
+    url: r.url,
+    kind: r.kind,
+    contentType: r.contentType,
+    sizeBytes: r.sizeBytes,
+    caption: r.caption ?? undefined,
+    uploadedAt: r.uploadedAt.toISOString(),
+  }));
+}
+
+/**
+ * Server action — receives a file via multipart upload (FormData), pushes
+ * it to R2, and records the attachment in Postgres.
+ *
+ * Note: the file is buffered through Next.js. On Vercel the platform limit
+ * is ~4.5MB for serverless functions, configurable up to ~50MB on the
+ * Edge runtime. For larger files, swap this for the presigned-PUT pattern
+ * (client uploads directly to R2). See the Cloudflare R2 docs.
+ */
+export async function uploadJobAttachment(formData: FormData): Promise<void> {
+  if (!isR2Configured) {
+    throw new Error(
+      'R2 not configured. Set R2_ACCOUNT_ID, R2_ACCESS_KEY_ID, R2_SECRET_ACCESS_KEY, R2_BUCKET (and optionally R2_PUBLIC_URL) in .env.local.',
+    );
+  }
+
+  const jobId = (formData.get('jobId') ?? '').toString();
+  const caption = (formData.get('caption') ?? '').toString().trim() || null;
+  const file = formData.get('file');
+  if (!jobId) throw new Error('jobId is required');
+  if (!(file instanceof File) || file.size === 0) throw new Error('No file provided');
+  if (file.size > MAX_BYTES) {
+    throw new Error(`File too large (${Math.round(file.size / 1024 / 1024)}MB). Max 8MB.`);
+  }
+  if (!ALLOWED_TYPES.has(file.type)) {
+    throw new Error(`Unsupported type: ${file.type}`);
+  }
+
+  const ext = file.name.includes('.') ? file.name.split('.').pop()?.toLowerCase() : null;
+  const safeExt = ext ? `.${ext.replace(/[^a-z0-9]/g, '')}` : '';
+  const key = `jobs/${jobId}/${crypto.randomBytes(8).toString('hex')}${safeExt}`;
+
+  const bytes = new Uint8Array(await file.arrayBuffer());
+  await r2Client.send(
+    new PutObjectCommand({
+      Bucket: r2BucketName,
+      Key: key,
+      Body: bytes,
+      ContentType: file.type,
+    }),
+  );
+
+  await db.insert(jobAttachments).values({
+    jobId,
+    key,
+    url: publicUrlFor(key),
+    kind: file.type.startsWith('image/') ? 'photo' : 'file',
+    contentType: file.type,
+    sizeBytes: file.size,
+    caption,
+  });
+
+  revalidatePath(`/jobs/${jobId}`);
+}
+
+export async function deleteJobAttachment(attachmentId: string, jobId: string): Promise<void> {
+  if (!isR2Configured) throw new Error('R2 not configured');
+  const [row] = await db
+    .select()
+    .from(jobAttachments)
+    .where(eq(jobAttachments.id, attachmentId))
+    .limit(1);
+  if (!row) return;
+  // Best-effort R2 delete — even if it fails we still drop the DB row so
+  // the UI doesn't show a phantom thumbnail.
+  try {
+    await r2Client.send(new DeleteObjectCommand({ Bucket: r2BucketName, Key: row.key }));
+  } catch (err) {
+    console.error('[r2] failed to delete object', row.key, err);
+  }
+  await db.delete(jobAttachments).where(eq(jobAttachments.id, attachmentId));
+  revalidatePath(`/jobs/${jobId}`);
+}

package/template/extras/jobs/drizzle/src/lib/r2.ts

@@ -0,0 +1,45 @@
+import 'server-only';
+import { S3Client } from '@aws-sdk/client-s3';
+
+/**
+ * Cloudflare R2 client. R2 is S3-compatible — same SDK, just point the
+ * endpoint at your R2 account. Configure:
+ *
+ *   R2_ACCOUNT_ID         — your Cloudflare account ID
+ *   R2_ACCESS_KEY_ID      — R2 API token access key
+ *   R2_SECRET_ACCESS_KEY  — R2 API token secret
+ *   R2_BUCKET             — bucket name (no slashes)
+ *   R2_PUBLIC_URL         — public URL for the bucket (custom domain or
+ *                           public-development URL). Required to render
+ *                           uploaded images in <img src> — uploads still
+ *                           work without it, but the URL field will be blank.
+ */
+export const r2BucketName = process.env.R2_BUCKET ?? '';
+export const r2PublicUrl = (process.env.R2_PUBLIC_URL ?? '').replace(/\/+$/, '');
+
+export const isR2Configured = (() => {
+  return Boolean(
+    process.env.R2_ACCOUNT_ID &&
+    process.env.R2_ACCESS_KEY_ID &&
+    process.env.R2_SECRET_ACCESS_KEY &&
+    process.env.R2_BUCKET,
+  );
+})();
+
+const accountId = process.env.R2_ACCOUNT_ID ?? '';
+
+export const r2Client = new S3Client({
+  region: 'auto',
+  endpoint: accountId ? `https://${accountId}.r2.cloudflarestorage.com` : undefined,
+  credentials: {
+    // `||` not `??`: scaffolded .env.local ships these as "" (empty string),
+    // which `??` wouldn't replace.
+    accessKeyId: process.env.R2_ACCESS_KEY_ID || 'placeholder',
+    secretAccessKey: process.env.R2_SECRET_ACCESS_KEY || 'placeholder',
+  },
+});
+
+export function publicUrlFor(key: string): string {
+  if (!r2PublicUrl) return '';
+  return `${r2PublicUrl}/${key}`;
+}

package/template/extras/landing-page/_shared/src/app/book/page.tsx

@@ -0,0 +1,43 @@
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+
+const SERVICES = ['Service call', 'Maintenance', 'Repair', 'Install', 'Estimate'];
+
+export default function BookOnlinePage() {
+  return (
+    <main className="mx-auto max-w-2xl px-6 py-16">
+      <h1 className="text-3xl font-bold tracking-tight">Book online</h1>
+      <p className="text-muted-foreground mt-2">Pick a service, a date, and we&apos;ll confirm shortly.</p>
+      <Card className="mt-6">
+        <CardHeader>
+          <CardTitle>Request an appointment</CardTitle>
+          <CardDescription>This is a starter form — wire submission to your stack.</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="service">Service</Label>
+            <select id="service" name="service" className="border-input bg-background h-10 w-full rounded-md border px-3 text-sm">
+              {SERVICES.map((s) => <option key={s}>{s}</option>)}
+            </select>
+          </div>
+          <div className="grid grid-cols-2 gap-3">
+            <div className="space-y-2"><Label htmlFor="date">Preferred date</Label><Input id="date" type="date" /></div>
+            <div className="space-y-2"><Label htmlFor="time">Window</Label>
+              <select id="time" name="time" className="border-input bg-background h-10 w-full rounded-md border px-3 text-sm">
+                <option>Morning (8am–12pm)</option>
+                <option>Afternoon (12–4pm)</option>
+                <option>Evening (4–8pm)</option>
+              </select>
+            </div>
+          </div>
+          <div className="space-y-2"><Label htmlFor="name">Your name</Label><Input id="name" required /></div>
+          <div className="space-y-2"><Label htmlFor="phone">Phone</Label><Input id="phone" type="tel" required /></div>
+          <div className="space-y-2"><Label htmlFor="address">Service address</Label><Input id="address" required /></div>
+          <Button className="w-full" size="lg">Request appointment</Button>
+        </CardContent>
+      </Card>
+    </main>
+  );
+}

package/template/extras/landing-page/_shared/src/app/book/thanks/page.tsx

@@ -0,0 +1,31 @@
+import Link from 'next/link';
+import { Card, CardContent } from '@/components/ui/card';
+import { business } from '@/lib/business';
+
+export default function BookThanksPage() {
+  return (
+    <main className="mx-auto max-w-md px-6 py-20 text-center">
+      <Card>
+        <CardContent className="pt-10 pb-10">
+          <div className="text-brand mb-4 text-5xl">✓</div>
+          <h1 className="text-2xl font-bold">Got it — talk soon!</h1>
+          <p className="text-muted-foreground mt-3 text-sm">
+            Thanks for booking with {business.name}. We&apos;ll reach out to confirm
+            your appointment shortly.
+          </p>
+          {business.phone && (
+            <p className="mt-4 text-sm">
+              Need to reach us first?{' '}
+              <a href={`tel:${business.phone}`} className="text-brand underline">
+                {business.phone}
+              </a>
+            </p>
+          )}
+          <Link href="/" className="text-muted-foreground mt-8 inline-block text-sm underline">
+            ← Back to home
+          </Link>
+        </CardContent>
+      </Card>
+    </main>
+  );
+}

package/template/extras/landing-page/_shared/src/app/page.tsx

@@ -0,0 +1,81 @@
+import Link from 'next/link';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent } from '@/components/ui/card';
+
+const SERVICES = [
+  { title: 'Same-day service', body: 'Most calls handled the same day. Emergency service 24/7.' },
+  { title: 'Up-front pricing', body: 'See the price before we start. No surprises.' },
+  { title: 'Licensed & insured', body: 'Background-checked technicians and full warranty on work.' },
+];
+
+const REVIEWS = [
+  { name: 'Jamie R.', text: 'Showed up on time, fixed the AC in 30 minutes. Great experience.', stars: 5 },
+  { name: 'Mason Hardware', text: 'Reliable for our walk-in cooler — they take our maintenance plan seriously.', stars: 5 },
+  { name: 'Priya P.', text: 'Honest estimate, no upsell. Will use again for our water heater.', stars: 5 },
+];
+
+export default function MarketingHome() {
+  return (
+    <>
+      <nav className="border-border border-b">
+        <div className="mx-auto flex max-w-5xl items-center justify-between px-6 py-4">
+          <Link href="/" className="text-lg font-bold">Your CRM</Link>
+          <div className="flex items-center gap-3">
+            <a href="tel:5550101100" className="text-muted-foreground text-sm hover:text-foreground">(555) 010-1100</a>
+            <Button asChild size="sm" variant="outline"><Link href="/sign-in">Sign in</Link></Button>
+            <Button asChild size="sm"><Link href="/book">Book online</Link></Button>
+          </div>
+        </div>
+      </nav>
+
+      <section className="bg-gradient-to-b from-brand/10 to-transparent">
+        <div className="mx-auto max-w-5xl px-6 py-20 text-center">
+          <h1 className="text-5xl font-bold tracking-tight sm:text-6xl">
+            Home services <span className="text-brand">done right</span>.
+          </h1>
+          <p className="text-muted-foreground mx-auto mt-4 max-w-2xl text-lg">
+            Trusted by your neighbors for fast, transparent, professional service. Schedule online in under 60 seconds.
+          </p>
+          <div className="mt-8 flex justify-center gap-3">
+            <Button asChild size="lg"><Link href="/book">Book online</Link></Button>
+            <Button asChild size="lg" variant="outline"><a href="tel:5550101100">Call us</a></Button>
+          </div>
+        </div>
+      </section>
+
+      <section className="mx-auto max-w-5xl px-6 py-16">
+        <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
+          {SERVICES.map((s) => (
+            <Card key={s.title}>
+              <CardContent className="pt-6">
+                <h3 className="text-xl font-semibold">{s.title}</h3>
+                <p className="text-muted-foreground mt-2">{s.body}</p>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      </section>
+
+      <section className="bg-muted/30">
+        <div className="mx-auto max-w-5xl px-6 py-16">
+          <h2 className="text-center text-3xl font-bold tracking-tight">What customers say</h2>
+          <div className="mt-8 grid grid-cols-1 gap-4 md:grid-cols-3">
+            {REVIEWS.map((r) => (
+              <Card key={r.name}>
+                <CardContent className="pt-6">
+                  <div className="text-brand text-lg">{'★'.repeat(r.stars)}{'☆'.repeat(5 - r.stars)}</div>
+                  <p className="mt-3">{r.text}</p>
+                  <p className="text-muted-foreground mt-3 text-sm">— {r.name}</p>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      <footer className="border-border border-t py-8 text-center">
+        <p className="text-muted-foreground text-sm">© Your CRM · Licensed & insured</p>
+      </footer>
+    </>
+  );
+}

package/template/extras/landing-page/drizzle/src/app/book/page.tsx

@@ -0,0 +1,105 @@
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { business } from '@/lib/business';
+import { submitBooking } from '@/lib/booking/actions';
+
+const FALLBACK_SERVICES = ['Service call', 'Maintenance', 'Repair', 'Install', 'Estimate'];
+
+export default function BookOnlinePage() {
+  // If the scaffolded business is an industry-specific preset, swap in its
+  // typed service list. (business.industry comes from src/lib/business.ts.)
+  const services = FALLBACK_SERVICES;
+
+  return (
+    <main className="mx-auto max-w-2xl px-6 py-16">
+      <h1 className="text-3xl font-bold tracking-tight">Book {business.name}</h1>
+      <p className="text-muted-foreground mt-2">
+        Pick a service, a date, and we&apos;ll confirm shortly.
+        {business.phone && (
+          <>
+            {' '}Prefer to talk?{' '}
+            <a href={`tel:${business.phone}`} className="text-brand underline">
+              {business.phone}
+            </a>
+          </>
+        )}
+      </p>
+      <form action={submitBooking}>
+        <Card className="mt-6">
+          <CardHeader>
+            <CardTitle>Request an appointment</CardTitle>
+            <CardDescription>
+              We&apos;ll confirm via {business.email || 'email'} or text. No charge to book.
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="space-y-2">
+              <Label htmlFor="service">Service *</Label>
+              <select
+                id="service"
+                name="service"
+                required
+                className="border-input bg-background h-10 w-full rounded-md border px-3 text-sm"
+              >
+                {services.map((s) => (
+                  <option key={s} value={s}>{s}</option>
+                ))}
+              </select>
+            </div>
+            <div className="grid grid-cols-2 gap-3">
+              <div className="space-y-2">
+                <Label htmlFor="date">Preferred date</Label>
+                <Input id="date" name="date" type="date" />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="time">Window</Label>
+                <select
+                  id="time"
+                  name="time"
+                  className="border-input bg-background h-10 w-full rounded-md border px-3 text-sm"
+                >
+                  <option>Morning (8am–12pm)</option>
+                  <option>Afternoon (12–4pm)</option>
+                  <option>Evening (4–8pm)</option>
+                </select>
+              </div>
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="name">Your name *</Label>
+              <Input id="name" name="name" required />
+            </div>
+            <div className="grid grid-cols-2 gap-3">
+              <div className="space-y-2">
+                <Label htmlFor="phone">Phone *</Label>
+                <Input id="phone" name="phone" type="tel" required />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="email">Email</Label>
+                <Input id="email" name="email" type="email" />
+              </div>
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="address">Service address *</Label>
+              <Input id="address" name="address" required placeholder="120 Main St, Austin, TX" />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="notes">What can we help with? (optional)</Label>
+              <textarea
+                id="notes"
+                name="notes"
+                rows={3}
+                placeholder="Describe the issue, equipment make/model, anything we should know"
+                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>
+            <Button type="submit" className="w-full" size="lg">
+              Request appointment
+            </Button>
+          </CardContent>
+        </Card>
+      </form>
+    </main>
+  );
+}

package/template/extras/landing-page/drizzle/src/lib/booking/actions.ts

@@ -0,0 +1,97 @@
+'use server';
+
+import crypto from 'node:crypto';
+import { redirect } from 'next/navigation';
+import { revalidatePath } from 'next/cache';
+import { db } from '@/db/client';
+import { customers, jobs } from '@/db/schema';
+
+export interface BookingInput {
+  service: string;
+  preferredDate: string;       // YYYY-MM-DD
+  timeWindow: string;          // "Morning (8am–12pm)" etc.
+  name: string;
+  phone: string;
+  email?: string;
+  address: string;
+  notes?: string;
+}
+
+/**
+ * Server action — receives a public booking request, creates the customer
+ * (or matches an existing one by phone), and creates a 'lead' job.
+ * Returns to /book/thanks on success.
+ */
+export async function submitBooking(formData: FormData): Promise<void> {
+  const get = (k: string) => (formData.get(k) ?? '').toString().trim();
+
+  const input: BookingInput = {
+    service: get('service'),
+    preferredDate: get('date'),
+    timeWindow: get('time'),
+    name: get('name'),
+    phone: get('phone'),
+    email: get('email') || undefined,
+    address: get('address'),
+    notes: get('notes') || undefined,
+  };
+
+  if (!input.name || !input.phone || !input.address || !input.service) {
+    throw new Error('Missing required booking fields');
+  }
+
+  // Address parsing is intentionally permissive — a single-line address
+  // entered on a public form rarely has clean city/state/zip split. We
+  // store the whole thing in line1 and leave the rest blank.
+  const billingAddress = {
+    line1: input.address,
+    city: '',
+    state: '',
+    postalCode: '',
+  };
+
+  const [customer] = await db
+    .insert(customers)
+    .values({
+      name: input.name,
+      phones: [input.phone],
+      emails: input.email ? [input.email] : [],
+      billingAddress,
+      serviceAddresses: [billingAddress],
+      tags: ['lead', 'online-booking'],
+      leadSource: 'Online booking',
+      lifetimeValue: 0,
+      balanceDue: 0,
+      doNotContact: false,
+      notes: input.notes ?? null,
+      publicToken: crypto.randomBytes(16).toString('hex'),
+    })
+    .returning({ id: customers.id });
+
+  // Schedule the job at the preferred date, defaulting to a 9-11am window
+  // if morning was picked. Office staff can refine in dispatch.
+  let scheduledAt: Date | null = null;
+  if (input.preferredDate) {
+    scheduledAt = new Date(input.preferredDate + 'T09:00:00');
+  }
+
+  await db.insert(jobs).values({
+    customerId: customer.id,
+    serviceType: input.service,
+    status: 'lead',
+    priority: 'normal',
+    scheduledAt,
+    arrivalWindow: input.timeWindow || null,
+    assigneeIds: [],
+    lineItems: [],
+    total: 0,
+    notes:
+      `Online booking request.\n` +
+      `Preferred: ${input.preferredDate || '(any)'} · ${input.timeWindow || '(any window)'}\n` +
+      (input.notes ? `\n${input.notes}` : ''),
+  });
+
+  revalidatePath('/jobs');
+  revalidatePath('/customers');
+  redirect('/book/thanks');
+}

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

@@ -0,0 +1,72 @@
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { formatCurrency, formatDate } from '@/lib/utils';
+
+const PLANS = [
+  { id: 'mp_silver', name: 'Silver', visits: 1, priceMonthly: 1499, perks: 'Annual tune-up + 10% off repairs' },
+  { id: 'mp_gold',   name: 'Gold',   visits: 2, priceMonthly: 2499, perks: 'Bi-annual tune-ups + 15% off + priority booking' },
+  { id: 'mp_platinum', name: 'Platinum', visits: 4, priceMonthly: 3999, perks: 'Quarterly visits + 20% off + after-hours included' },
+];
+
+const MEMBERS = [
+  { id: 'm1', customer: 'Acme Property Mgmt', plan: 'Platinum', renewsOn: '2026-12-01', mrr: 3999 },
+  { id: 'm2', customer: 'Jamie Rodriguez',     plan: 'Gold',     renewsOn: '2026-08-15', mrr: 2499 },
+  { id: 'm3', customer: 'Mason Hardware Co.',  plan: 'Silver',   renewsOn: '2026-11-22', mrr: 1499 },
+];
+
+export default function MaintenancePlansPage() {
+  const totalMrr = MEMBERS.reduce((acc, m) => acc + m.mrr, 0);
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-3xl font-bold tracking-tight">Maintenance plans</h1>
+          <p className="text-muted-foreground mt-1 text-sm">Recurring revenue from tune-up subscriptions.</p>
+        </div>
+        <Card className="px-4 py-2">
+          <div className="text-muted-foreground text-xs uppercase">Total MRR</div>
+          <div className="text-2xl font-bold">{formatCurrency(totalMrr)}</div>
+        </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' : ''}>
+            <CardHeader>
+              <CardTitle>{p.name}</CardTitle>
+              <p className="text-3xl font-bold">{formatCurrency(p.priceMonthly)}<span className="text-muted-foreground text-sm font-normal">/mo</span></p>
+            </CardHeader>
+            <CardContent className="space-y-2 text-sm">
+              <div><span className="font-medium">{p.visits}</span> visit{p.visits === 1 ? '' : 's'}/year</div>
+              <div className="text-muted-foreground">{p.perks}</div>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+      <Card>
+        <CardHeader><CardTitle>Active members ({MEMBERS.length})</CardTitle></CardHeader>
+        <CardContent className="p-0">
+          <table className="w-full text-sm">
+            <thead className="bg-muted/50 text-muted-foreground text-xs uppercase">
+              <tr>
+                <th className="px-4 py-3 text-left font-medium">Customer</th>
+                <th className="px-4 py-3 text-left font-medium">Plan</th>
+                <th className="px-4 py-3 text-left font-medium">Renews</th>
+                <th className="px-4 py-3 text-right font-medium">Monthly</th>
+              </tr>
+            </thead>
+            <tbody className="divide-border divide-y">
+              {MEMBERS.map((m) => (
+                <tr key={m.id}>
+                  <td className="px-4 py-3 font-medium">{m.customer}</td>
+                  <td className="px-4 py-3"><Badge>{m.plan}</Badge></td>
+                  <td className="text-muted-foreground px-4 py-3">{formatDate(m.renewsOn)}</td>
+                  <td className="px-4 py-3 text-right font-medium">{formatCurrency(m.mrr)}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

package/template/extras/mobile/mobile/README.md

@@ -0,0 +1,67 @@
+# Field-tech iPhone app
+
+A branded Expo (React Native) app for this client's technicians. It talks to
+the deployed CRM's `/api/mobile/v1/*` endpoints with a bearer token, so the
+**web CRM must be deployed and reachable first**.
+
+What techs can do: sign in, see today's jobs, open a job (customer, address,
+line items), tap **Navigate** / **Call**, **Start**/**Complete** a job, snap &
+upload **photos**, capture a **signature**, and receive **push notifications**
+when a job is assigned. Plus: **clock in/out** per job, run the job
+**checklist**, view & **invoice** the job and **take payment** (card via the
+hosted page, or record cash), build & send an **estimate** from the price
+book, and a two-way **SMS inbox**. Money/estimate/SMS features appear only if
+the CRM was scaffolded with those modules (see `app.features.ts`).
+
+## 1. Point the app at this client's CRM
+
+```bash
+cd mobile
+cp .env.example .env       # if not already created by the scaffolder
+# set EXPO_PUBLIC_API_URL to the client's deployed CRM URL, e.g.
+#   EXPO_PUBLIC_API_URL=https://joeshvac.com
+npm install
+```
+
+For local testing against the web app on your machine, use your computer's
+LAN IP (not `localhost`) so the phone can reach it:
+`EXPO_PUBLIC_API_URL=http://192.168.1.50:3000`.
+
+## 2. Run it in development
+
+```bash
+npx expo start            # scan the QR code with Expo Go (or a dev build)
+```
+
+Sign in as a user with the **technician** (or admin/dispatcher) role. Photos
+and signatures require the CRM's R2 storage env vars to be set.
+
+## 3. Build & ship to the App Store (per client)
+
+These apps are distributed **one per client** under your agency's single
+Apple Developer account (one account hosts unlimited apps). Bundle id
+convention: `com.<agency>.<client-slug>` (set in `app.brand.ts`).
+
+```bash
+npm i -g eas-cli
+eas login                 # your agency Apple/Expo account
+eas build:configure
+eas build -p ios --profile production
+eas submit -p ios --latest
+```
+
+Per-client effort is ~30–60 min of config (bundle id, icon, API URL) plus
+Apple review (~1–2 days). For pilots, use TestFlight (`--profile preview`)
+to skip full App Store review.
+
+## Files
+- `app.brand.ts` — generated branding (name, colors, bundle id, scheme). Re-run the scaffolder to change.
+- `app.config.ts` — Expo config; reads `app.brand.ts`.
+- `lib/auth.ts` — bearer-token sign-in + keychain storage (expo-secure-store).
+- `lib/api.ts` — typed client for `/api/mobile/v1/*` + direct-to-R2 photo upload.
+- `lib/push.ts` — Expo push registration.
+- `app/` — Expo Router screens (sign-in, Today, job detail).
+
+> The server side of this app lives in the CRM under `src/app/api/mobile/v1/`
+> and token auth is enabled by the Better-Auth `bearer()` plugin, added
+> automatically when you scaffolded with the iPhone app.