create-crm-starter 0.1.0

package/template/extras/jobs/_fragments/convex.txt

@@ -0,0 +1,21 @@
+  jobs: defineTable({
+    customerId: v.id('customers'),
+    serviceType: v.string(),
+    status: v.union(
+      v.literal('lead'), v.literal('estimate'), v.literal('scheduled'),
+      v.literal('dispatched'), v.literal('in_progress'), v.literal('completed'),
+      v.literal('invoiced'), v.literal('paid'), v.literal('closed'), v.literal('cancelled'),
+    ),
+    priority: v.union(v.literal('low'), v.literal('normal'), v.literal('high'), v.literal('emergency')),
+    scheduledAt: v.optional(v.number()),
+    arrivalWindow: v.optional(v.string()),
+    assigneeIds: v.array(v.id('users')),
+    lineItems: v.array(v.object({
+      description: v.string(),
+      qty: v.number(),
+      unitPrice: v.number(),
+    })),
+    total: v.number(),
+    notes: v.optional(v.string()),
+    createdAt: v.number(),
+  }).index('by_customer', ['customerId']).index('by_status', ['status']),

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

@@ -0,0 +1,102 @@
+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 { getJob } from '@/lib/jobs/data';
+import { JOB_STATUS_COLOR, JOB_STATUS_LABEL } from '@/lib/jobs/types';
+import { AdvanceStatusButton } from '@/components/jobs/advance-status-button';
+import { GenerateInvoiceButton } from '@/components/jobs/generate-invoice-button';
+import { JobPhotosSection } from '@/components/jobs/photos-section';
+import { JobChecklistsSection } from '@/components/jobs/job-checklists-section';
+import { formatCurrency } from '@/lib/utils';
+
+interface PageProps { params: Promise<{ id: string }>; }
+
+export default async function JobDetailPage({ params }: PageProps) {
+  const { id } = await params;
+  const job = await getJob(id);
+  if (!job) notFound();
+  return (
+    <div className="space-y-6">
+      <div>
+        <Link href="/jobs" className="text-muted-foreground text-sm hover:underline">← Jobs</Link>
+        <div className="mt-1 flex items-center gap-3">
+          <h1 className="text-3xl font-bold tracking-tight">{job.serviceType}</h1>
+          <span className={`rounded-md px-2 py-1 text-xs font-medium ${JOB_STATUS_COLOR[job.status]}`}>
+            {JOB_STATUS_LABEL[job.status]}
+          </span>
+          {job.priority === 'emergency' && <Badge variant="destructive">EMERGENCY</Badge>}
+          <div className="ml-auto flex items-center gap-2">
+            <AdvanceStatusButton jobId={job.id} currentStatus={job.status} />
+            {(job.status === 'completed' || job.status === 'invoiced' || job.status === 'paid') && (
+              <GenerateInvoiceButton jobId={job.id} />
+            )}
+          </div>
+        </div>
+        <Link href={`/customers/${job.customerId}`} className="text-muted-foreground hover:underline">
+          {job.customerName}
+        </Link>
+      </div>
+      <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
+        <Card>
+          <CardHeader><CardTitle className="text-base">Schedule</CardTitle></CardHeader>
+          <CardContent className="text-sm">
+            {job.scheduledAt ? (
+              <>
+                <div className="font-medium">{new Date(job.scheduledAt).toLocaleString()}</div>
+                {job.arrivalWindow && <div className="text-muted-foreground">{job.arrivalWindow}</div>}
+              </>
+            ) : <span className="text-muted-foreground">Not scheduled</span>}
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader><CardTitle className="text-base">Assigned</CardTitle></CardHeader>
+          <CardContent className="text-sm">
+            {job.assigneeNames.length > 0 ? job.assigneeNames.join(', ') : <span className="text-muted-foreground">Unassigned</span>}
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader><CardTitle className="text-base">Total</CardTitle></CardHeader>
+          <CardContent className="text-2xl font-bold">{formatCurrency(job.total)}</CardContent>
+        </Card>
+      </div>
+      <Card>
+        <CardHeader><CardTitle>Line items</CardTitle></CardHeader>
+        <CardContent>
+          {job.lineItems.length === 0 ? (
+            <p className="text-muted-foreground text-sm">No line items yet.</p>
+          ) : (
+            <table className="w-full text-sm">
+              <thead className="text-muted-foreground text-xs uppercase">
+                <tr>
+                  <th className="py-2 text-left font-medium">Description</th>
+                  <th className="py-2 text-right font-medium">Qty</th>
+                  <th className="py-2 text-right font-medium">Unit</th>
+                  <th className="py-2 text-right font-medium">Subtotal</th>
+                </tr>
+              </thead>
+              <tbody className="divide-border divide-y">
+                {job.lineItems.map((li, i) => (
+                  <tr key={i}>
+                    <td className="py-2">{li.description}</td>
+                    <td className="py-2 text-right">{li.qty}</td>
+                    <td className="py-2 text-right">{formatCurrency(li.unitPrice)}</td>
+                    <td className="py-2 text-right font-medium">{formatCurrency(li.qty * li.unitPrice)}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          )}
+        </CardContent>
+      </Card>
+      {job.notes && (
+        <Card>
+          <CardHeader><CardTitle>Notes</CardTitle></CardHeader>
+          <CardContent className="text-sm">{job.notes}</CardContent>
+        </Card>
+      )}
+      <JobChecklistsSection jobId={job.id} />
+      <JobPhotosSection jobId={job.id} />
+    </div>
+  );
+}

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

@@ -0,0 +1,72 @@
+import Link from 'next/link';
+import { Card } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { getJobs } from '@/lib/jobs/data';
+import { JOB_STATUS_COLOR, JOB_STATUS_LABEL, JOB_STATUSES, type Job, type JobStatus } from '@/lib/jobs/types';
+import { formatCurrency } from '@/lib/utils';
+
+export default async function JobsPage() {
+  const jobs = await getJobs();
+  const byStatus = new Map<JobStatus, Job[]>(JOB_STATUSES.map((s) => [s, []]));
+  for (const j of jobs) byStatus.get(j.status)?.push(j);
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-3xl font-bold tracking-tight">Jobs</h1>
+          <p className="text-muted-foreground mt-1 text-sm">{jobs.length} jobs across the pipeline</p>
+        </div>
+        <Button asChild>
+          <Link href="/jobs/new">New job</Link>
+        </Button>
+      </div>
+      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5">
+        {JOB_STATUSES.slice(0, 9).map((status) => {
+          const jobs = byStatus.get(status) ?? [];
+          return (
+            <Card key={status} className="flex flex-col gap-2 p-3">
+              <div className="flex items-center justify-between text-xs">
+                <span className={`rounded-md px-2 py-0.5 font-medium ${JOB_STATUS_COLOR[status]}`}>
+                  {JOB_STATUS_LABEL[status]}
+                </span>
+                <span className="text-muted-foreground">{jobs.length}</span>
+              </div>
+              <div className="flex flex-col gap-2">
+                {jobs.length === 0 && (
+                  <div className="text-muted-foreground py-4 text-center text-xs">No jobs</div>
+                )}
+                {jobs.map((j) => (
+                  <Link
+                    key={j.id}
+                    href={`/jobs/${j.id}`}
+                    className="hover:bg-muted/50 rounded-md border p-2 text-xs"
+                  >
+                    <div className="font-medium">{j.customerName}</div>
+                    <div className="text-muted-foreground mt-0.5">{j.serviceType}</div>
+                    {j.scheduledAt && (
+                      <div className="text-muted-foreground mt-1 text-[10px]">
+                        {new Date(j.scheduledAt).toLocaleString('en-US', { month: 'short', day: 'numeric', hour: 'numeric' })}
+                        {j.arrivalWindow && ` · ${j.arrivalWindow}`}
+                      </div>
+                    )}
+                    {j.total > 0 && (
+                      <div className="mt-1 text-right font-medium">{formatCurrency(j.total)}</div>
+                    )}
+                    {j.priority === 'emergency' && (
+                      <div className="text-destructive mt-1 text-[10px] font-bold">⚠ EMERGENCY</div>
+                    )}
+                  </Link>
+                ))}
+              </div>
+            </Card>
+          );
+        })}
+      </div>
+      <p className="text-muted-foreground text-xs">
+        Showing placeholder data from <code>src/lib/jobs/sample-data.ts</code>. Drag-drop reassignment lands in the
+        calendar-dispatch module.
+      </p>
+    </div>
+  );
+}

package/template/extras/jobs/_shared/src/components/jobs/advance-status-button.tsx

@@ -0,0 +1,21 @@
+import { Button } from '@/components/ui/button';
+import type { JobStatus } from '@/lib/jobs/types';
+
+interface AdvanceStatusButtonProps {
+  jobId: string;
+  currentStatus: JobStatus;
+}
+
+/**
+ * Default stub — Convex / sample-data version. Disabled, just indicates
+ * where the action lives. Drizzle's installer overwrites this with a
+ * working version that calls the advanceJobStatus server action.
+ */
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export function AdvanceStatusButton({ jobId, currentStatus }: AdvanceStatusButtonProps) {
+  return (
+    <Button size="sm" variant="outline" disabled title="Wire to your stack to enable">
+      Advance status
+    </Button>
+  );
+}

package/template/extras/jobs/_shared/src/components/jobs/generate-invoice-button.tsx

@@ -0,0 +1,15 @@
+import { Button } from '@/components/ui/button';
+
+/**
+ * Default stub — only really enabled on the Drizzle stack with the
+ * estimates-invoices module installed. estimates-invoices installer
+ * overwrites this file with a working version.
+ */
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export function GenerateInvoiceButton({ jobId }: { jobId: string }) {
+  return (
+    <Button size="sm" variant="outline" disabled title="Install estimates-invoices to enable">
+      Generate invoice
+    </Button>
+  );
+}

package/template/extras/jobs/_shared/src/components/jobs/photo-gallery.tsx

@@ -0,0 +1,17 @@
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+
+/**
+ * Default stub for Convex / sample-data. Drizzle's installer overwrites
+ * this with a working R2-backed upload + gallery.
+ */
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export function PhotoGallery({ jobId }: { jobId: string; initialAttachments?: unknown[] }) {
+  return (
+    <Card>
+      <CardHeader><CardTitle>Photos & attachments</CardTitle></CardHeader>
+      <CardContent className="text-muted-foreground text-sm">
+        File uploads require the Drizzle stack + Cloudflare R2 configured in <code>.env.local</code>.
+      </CardContent>
+    </Card>
+  );
+}

package/template/extras/jobs/_shared/src/components/jobs/photos-section.tsx

@@ -0,0 +1,18 @@
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+
+/**
+ * Default stub — Drizzle's installer overwrites this with a server
+ * component that fetches attachments from Postgres + R2 and renders the
+ * PhotoGallery client component.
+ */
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export function JobPhotosSection({ jobId }: { jobId: string }) {
+  return (
+    <Card>
+      <CardHeader><CardTitle>Photos & attachments</CardTitle></CardHeader>
+      <CardContent className="text-muted-foreground text-sm">
+        Job photo uploads ship on the Drizzle stack — configure R2 in <code>.env.local</code> to enable.
+      </CardContent>
+    </Card>
+  );
+}

package/template/extras/jobs/_shared/src/lib/jobs/data.ts

@@ -0,0 +1,14 @@
+/**
+ * Default data-source for jobs — returns hardcoded samples. Stack-specific
+ * installers OVERWRITE this file with real DB queries.
+ */
+import { sampleJobs } from './sample-data';
+import type { Job } from './types';
+
+export async function getJobs(): Promise<Job[]> {
+  return sampleJobs;
+}
+
+export async function getJob(id: string): Promise<Job | null> {
+  return sampleJobs.find((j) => j.id === id) ?? null;
+}

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

@@ -0,0 +1,50 @@
+import type { Job } from './types';
+
+export const sampleJobs: Job[] = [
+  {
+    id: 'job_001', customerId: 'cus_001', customerName: 'Acme Property Management',
+    serviceType: 'Quarterly Maintenance', status: 'scheduled', priority: 'normal',
+    scheduledAt: '2026-05-28T14:00:00Z', arrivalWindow: '2-4pm',
+    assigneeIds: ['u_tech_1'], assigneeNames: ['Carlos M.'],
+    lineItems: [{ description: 'HVAC tune-up (4 units)', qty: 4, unitPrice: 12500 }],
+    total: 50000, createdAt: '2026-05-20T09:00:00Z',
+  },
+  {
+    id: 'job_002', customerId: 'cus_002', customerName: 'Jamie Rodriguez',
+    serviceType: 'AC Repair', status: 'in_progress', priority: 'high',
+    scheduledAt: '2026-05-25T13:00:00Z', arrivalWindow: '1-3pm',
+    assigneeIds: ['u_tech_2'], assigneeNames: ['Sarah T.'],
+    lineItems: [
+      { description: 'Diagnostic fee', qty: 1, unitPrice: 8900 },
+      { description: 'Capacitor replacement', qty: 1, unitPrice: 18500 },
+    ],
+    total: 27400, createdAt: '2026-05-25T08:15:00Z',
+  },
+  {
+    id: 'job_003', customerId: 'cus_003', customerName: 'Mason Hardware Co.',
+    serviceType: 'Install — Walk-in Cooler', status: 'estimate', priority: 'normal',
+    assigneeIds: [], assigneeNames: [],
+    lineItems: [], total: 0, createdAt: '2026-05-22T11:30:00Z',
+  },
+  {
+    id: 'job_004', customerId: 'cus_004', customerName: 'Priya Patel',
+    serviceType: 'Water Heater Install', status: 'lead', priority: 'normal',
+    assigneeIds: [], assigneeNames: [],
+    lineItems: [], total: 0, createdAt: '2026-05-23T16:00:00Z',
+  },
+  {
+    id: 'job_005', customerId: 'cus_002', customerName: 'Jamie Rodriguez',
+    serviceType: 'Spring Tune-Up', status: 'completed', priority: 'normal',
+    scheduledAt: '2026-04-15T10:00:00Z', arrivalWindow: '10am-12pm',
+    assigneeIds: ['u_tech_1'], assigneeNames: ['Carlos M.'],
+    lineItems: [{ description: 'Tune-up', qty: 1, unitPrice: 14500 }],
+    total: 14500, createdAt: '2026-04-10T08:00:00Z',
+  },
+  {
+    id: 'job_006', customerId: 'cus_001', customerName: 'Acme Property Management',
+    serviceType: 'Emergency — No heat', status: 'dispatched', priority: 'emergency',
+    scheduledAt: '2026-05-25T11:30:00Z', arrivalWindow: 'ASAP',
+    assigneeIds: ['u_tech_2'], assigneeNames: ['Sarah T.'],
+    lineItems: [], total: 0, createdAt: '2026-05-25T11:00:00Z',
+  },
+];

package/template/extras/jobs/_shared/src/lib/jobs/types.ts

@@ -0,0 +1,62 @@
+export const JOB_STATUSES = [
+  'lead',
+  'estimate',
+  'scheduled',
+  'dispatched',
+  'in_progress',
+  'completed',
+  'invoiced',
+  'paid',
+  'closed',
+  'cancelled',
+] as const;
+export type JobStatus = (typeof JOB_STATUSES)[number];
+
+export const JOB_STATUS_LABEL: Record<JobStatus, string> = {
+  lead: 'Lead',
+  estimate: 'Estimate',
+  scheduled: 'Scheduled',
+  dispatched: 'Dispatched',
+  in_progress: 'In progress',
+  completed: 'Completed',
+  invoiced: 'Invoiced',
+  paid: 'Paid',
+  closed: 'Closed',
+  cancelled: 'Cancelled',
+};
+
+export const JOB_STATUS_COLOR: Record<JobStatus, string> = {
+  lead: 'bg-slate-100 text-slate-700',
+  estimate: 'bg-purple-100 text-purple-800',
+  scheduled: 'bg-blue-100 text-blue-800',
+  dispatched: 'bg-cyan-100 text-cyan-800',
+  in_progress: 'bg-amber-100 text-amber-800',
+  completed: 'bg-emerald-100 text-emerald-800',
+  invoiced: 'bg-indigo-100 text-indigo-800',
+  paid: 'bg-green-100 text-green-800',
+  closed: 'bg-gray-100 text-gray-700',
+  cancelled: 'bg-red-100 text-red-800',
+};
+
+export interface LineItem {
+  description: string;
+  qty: number;
+  unitPrice: number; // cents
+}
+
+export interface Job {
+  id: string;
+  customerId: string;
+  customerName: string;
+  serviceType: string;
+  status: JobStatus;
+  priority: 'low' | 'normal' | 'high' | 'emergency';
+  scheduledAt?: string; // ISO
+  arrivalWindow?: string; // e.g. "8-10am"
+  assigneeIds: string[];
+  assigneeNames: string[];
+  lineItems: LineItem[];
+  notes?: string;
+  total: number; // cents
+  createdAt: string;
+}

package/template/extras/jobs/convex/convex/jobs.ts

@@ -0,0 +1,46 @@
+import { v } from 'convex/values';
+import { mutation, query } from './_generated/server';
+
+const statusValidator = v.union(
+  v.literal('lead'),
+  v.literal('estimate'),
+  v.literal('scheduled'),
+  v.literal('dispatched'),
+  v.literal('in_progress'),
+  v.literal('completed'),
+  v.literal('invoiced'),
+  v.literal('paid'),
+  v.literal('closed'),
+  v.literal('cancelled'),
+);
+
+export const list = query({
+  args: {},
+  handler: async (ctx: any) => {
+    const jobs = await ctx.db.query('jobs').order('desc').take(200);
+    return await Promise.all(
+      jobs.map(async (j: any) => {
+        const customer = await ctx.db.get(j.customerId);
+        return { ...j, customerName: customer?.name ?? '(deleted)' };
+      }),
+    );
+  },
+});
+
+export const getById = query({
+  args: { id: v.id('jobs') },
+  handler: async (ctx: any, args: any) => {
+    const job = await ctx.db.get(args.id);
+    if (!job) return null;
+    const customer = await ctx.db.get(job.customerId);
+    return { ...job, customerName: customer?.name ?? '(deleted)' };
+  },
+});
+
+export const updateStatus = mutation({
+  args: { id: v.id('jobs'), status: statusValidator },
+  handler: async (ctx: any, args: any) => {
+    await ctx.db.patch(args.id, { status: args.status });
+    return args.id;
+  },
+});

package/template/extras/jobs/convex/src/lib/jobs/data.ts

@@ -0,0 +1,65 @@
+import 'server-only';
+import { fetchQuery } from 'convex/nextjs';
+import { api } from '../../../convex/_generated/api';
+import { sampleJobs } from './sample-data';
+import type { Job, JobStatus, LineItem } from './types';
+
+const convexConfigured = (() => {
+  const url = process.env.NEXT_PUBLIC_CONVEX_URL;
+  return typeof url === 'string' && url.startsWith('http') && !url.includes('placeholder');
+})();
+
+interface RawJob {
+  _id: string;
+  customerId: string;
+  customerName: string;
+  serviceType: string;
+  status: JobStatus;
+  priority: Job['priority'];
+  scheduledAt?: number;
+  arrivalWindow?: string;
+  assigneeIds: string[];
+  lineItems: LineItem[];
+  total: number;
+  notes?: string;
+  createdAt: number;
+}
+
+function toJob(row: RawJob): Job {
+  return {
+    id: row._id,
+    customerId: row.customerId,
+    customerName: row.customerName,
+    serviceType: row.serviceType,
+    status: row.status,
+    priority: row.priority,
+    scheduledAt: row.scheduledAt ? new Date(row.scheduledAt).toISOString() : undefined,
+    arrivalWindow: row.arrivalWindow,
+    assigneeIds: row.assigneeIds,
+    assigneeNames: [],
+    lineItems: row.lineItems,
+    total: row.total,
+    notes: row.notes,
+    createdAt: new Date(row.createdAt).toISOString(),
+  };
+}
+
+export async function getJobs(): Promise<Job[]> {
+  if (!convexConfigured) return sampleJobs;
+  try {
+    const rows = (await fetchQuery(api.jobs.list)) as RawJob[] | null;
+    return (rows ?? []).map(toJob);
+  } catch {
+    return sampleJobs;
+  }
+}
+
+export async function getJob(id: string): Promise<Job | null> {
+  if (!convexConfigured) return sampleJobs.find((j) => j.id === id) ?? null;
+  try {
+    const row = (await fetchQuery(api.jobs.getById, { id })) as RawJob | null;
+    return row ? toJob(row) : null;
+  } catch {
+    return sampleJobs.find((j) => j.id === id) ?? null;
+  }
+}

package/template/extras/jobs/drizzle/src/app/(dashboard)/jobs/new/page.tsx

@@ -0,0 +1,18 @@
+import { asc } from 'drizzle-orm';
+import { db } from '@/db/client';
+import { customers } from '@/db/schema';
+import { NewJobForm } from '@/components/jobs/new-job-form';
+
+export default async function NewJobPage() {
+  const customerRows = await db
+    .select({ id: customers.id, name: customers.name })
+    .from(customers)
+    .orderBy(asc(customers.name));
+
+  return (
+    <div className="mx-auto max-w-3xl space-y-6">
+      <h1 className="text-3xl font-bold tracking-tight">New job</h1>
+      <NewJobForm customers={customerRows} />
+    </div>
+  );
+}

package/template/extras/jobs/drizzle/src/components/jobs/advance-status-button.tsx

@@ -0,0 +1,34 @@
+'use client';
+
+import { useTransition } from 'react';
+import { Button } from '@/components/ui/button';
+import { advanceJobStatus } from '@/lib/jobs/actions';
+import type { JobStatus } from '@/lib/jobs/types';
+import { JOB_STATUSES, JOB_STATUS_LABEL } from '@/lib/jobs/types';
+
+interface AdvanceStatusButtonProps {
+  jobId: string;
+  currentStatus: JobStatus;
+}
+
+export function AdvanceStatusButton({ jobId, currentStatus }: AdvanceStatusButtonProps) {
+  const [pending, start] = useTransition();
+
+  const idx = JOB_STATUSES.indexOf(currentStatus);
+  const isTerminal = idx >= JOB_STATUSES.length - 2; // closed or cancelled
+  const nextStatus = !isTerminal ? JOB_STATUSES[idx + 1] : null;
+
+  if (isTerminal || !nextStatus) {
+    return <Button size="sm" variant="outline" disabled>Pipeline complete</Button>;
+  }
+
+  return (
+    <Button
+      size="sm"
+      disabled={pending}
+      onClick={() => start(() => advanceJobStatus(jobId, currentStatus))}
+    >
+      {pending ? 'Updating...' : `Advance → ${JOB_STATUS_LABEL[nextStatus]}`}
+    </Button>
+  );
+}