create-crm-starter 0.1.0

package/template/extras/jobs/drizzle/src/components/jobs/new-job-form.tsx

@@ -0,0 +1,275 @@
+'use client';
+
+import { useMemo, useState, useTransition } from 'react';
+import Link from 'next/link';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { createJob, type CreateJobInput } from '@/lib/jobs/actions';
+import { JOB_STATUSES, JOB_STATUS_LABEL, type JobStatus, type LineItem } from '@/lib/jobs/types';
+import { PriceBookItemPicker } from '@/components/price-book/item-picker';
+import { formatCurrency } from '@/lib/utils';
+
+interface CustomerOption {
+  id: string;
+  name: string;
+}
+
+interface DraftLineItem extends LineItem {
+  key: string;
+}
+
+const NEW_LINE_ITEM = (): DraftLineItem => ({
+  key: crypto.randomUUID(),
+  description: '',
+  qty: 1,
+  unitPrice: 0,
+});
+
+export function NewJobForm({ customers }: { customers: CustomerOption[] }) {
+  const [pending, start] = useTransition();
+  const [error, setError] = useState<string | null>(null);
+
+  const [customerId, setCustomerId] = useState(customers[0]?.id ?? '');
+  const [serviceType, setServiceType] = useState('Service Call');
+  const [status, setStatus] = useState<JobStatus>('lead');
+  const [priority, setPriority] = useState<CreateJobInput['priority']>('normal');
+  const [scheduledAt, setScheduledAt] = useState('');
+  const [arrivalWindow, setArrivalWindow] = useState('');
+  const [notes, setNotes] = useState('');
+  const [lineItems, setLineItems] = useState<DraftLineItem[]>([NEW_LINE_ITEM()]);
+
+  const total = useMemo(
+    () => lineItems.reduce((acc, li) => acc + li.qty * li.unitPrice, 0),
+    [lineItems],
+  );
+
+  function updateLine(key: string, patch: Partial<LineItem>) {
+    setLineItems((prev) => prev.map((li) => (li.key === key ? { ...li, ...patch } : li)));
+  }
+
+  function removeLine(key: string) {
+    setLineItems((prev) => (prev.length === 1 ? prev : prev.filter((li) => li.key !== key)));
+  }
+
+  function addLine() {
+    setLineItems((prev) => [...prev, NEW_LINE_ITEM()]);
+  }
+
+  function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setError(null);
+    if (!customerId) {
+      setError('Pick a customer (create one first if none exist).');
+      return;
+    }
+    start(() =>
+      createJob({
+        customerId,
+        serviceType,
+        status,
+        priority,
+        scheduledAt: scheduledAt ? new Date(scheduledAt).toISOString() : null,
+        arrivalWindow: arrivalWindow || null,
+        notes: notes || null,
+        lineItems: lineItems
+          .filter((li) => li.description.trim() !== '')
+          .map(({ key: _key, ...rest }) => rest),
+      }),
+    );
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-6">
+      <Card>
+        <CardHeader>
+          <CardTitle>Customer & service</CardTitle>
+          <CardDescription>What and for whom.</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="customerId">Customer *</Label>
+            {customers.length === 0 ? (
+              <p className="text-destructive text-sm">
+                No customers yet. <Link href="/customers/new" className="underline">Create one</Link> first.
+              </p>
+            ) : (
+              <select
+                id="customerId"
+                name="customerId"
+                required
+                value={customerId}
+                onChange={(e) => setCustomerId(e.target.value)}
+                className="border-input bg-background h-10 w-full rounded-md border px-3 text-sm"
+              >
+                {customers.map((c) => (
+                  <option key={c.id} value={c.id}>{c.name}</option>
+                ))}
+              </select>
+            )}
+          </div>
+          <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
+            <div className="space-y-2">
+              <Label htmlFor="serviceType">Service type *</Label>
+              <Input
+                id="serviceType"
+                required
+                value={serviceType}
+                onChange={(e) => setServiceType(e.target.value)}
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="priority">Priority</Label>
+              <select
+                id="priority"
+                value={priority}
+                onChange={(e) => setPriority(e.target.value as typeof priority)}
+                className="border-input bg-background h-10 w-full rounded-md border px-3 text-sm"
+              >
+                <option value="low">Low</option>
+                <option value="normal">Normal</option>
+                <option value="high">High</option>
+                <option value="emergency">Emergency</option>
+              </select>
+            </div>
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="status">Status</Label>
+            <select
+              id="status"
+              value={status}
+              onChange={(e) => setStatus(e.target.value as JobStatus)}
+              className="border-input bg-background h-10 w-full rounded-md border px-3 text-sm"
+            >
+              {JOB_STATUSES.filter((s) => s !== 'cancelled').map((s) => (
+                <option key={s} value={s}>{JOB_STATUS_LABEL[s]}</option>
+              ))}
+            </select>
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Schedule</CardTitle>
+          <CardDescription>Optional — leave blank to schedule later.</CardDescription>
+        </CardHeader>
+        <CardContent className="grid grid-cols-1 gap-3 sm:grid-cols-2">
+          <div className="space-y-2">
+            <Label htmlFor="scheduledAt">Date</Label>
+            <Input
+              id="scheduledAt"
+              type="datetime-local"
+              value={scheduledAt}
+              onChange={(e) => setScheduledAt(e.target.value)}
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="arrivalWindow">Arrival window</Label>
+            <Input
+              id="arrivalWindow"
+              placeholder="e.g. 8-10am"
+              value={arrivalWindow}
+              onChange={(e) => setArrivalWindow(e.target.value)}
+            />
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader className="flex flex-row items-center justify-between space-y-0">
+          <div>
+            <CardTitle>Line items</CardTitle>
+            <CardDescription>Prices in cents. e.g. 12500 = $125.00</CardDescription>
+          </div>
+          <div className="text-right">
+            <div className="text-muted-foreground text-xs uppercase">Total</div>
+            <div className="text-2xl font-bold">{formatCurrency(total)}</div>
+          </div>
+        </CardHeader>
+        <CardContent className="space-y-3">
+          {lineItems.map((li) => (
+            <div key={li.key} className="grid grid-cols-[1fr_4rem_6rem_2.5rem] items-end gap-2">
+              <div className="space-y-1">
+                <Label htmlFor={`desc-${li.key}`} className="text-xs">Description</Label>
+                <PriceBookItemPicker
+                  id={`desc-${li.key}`}
+                  value={li.description}
+                  onTextChange={(v) => updateLine(li.key, { description: v })}
+                  onPick={(item) =>
+                    updateLine(li.key, {
+                      description: item.name,
+                      qty: item.defaultQty,
+                      unitPrice: item.unitPrice,
+                    })
+                  }
+                  placeholder="Search Price Book or type free-text…"
+                />
+              </div>
+              <div className="space-y-1">
+                <Label htmlFor={`qty-${li.key}`} className="text-xs">Qty</Label>
+                <Input
+                  id={`qty-${li.key}`}
+                  type="number"
+                  min={0}
+                  step={1}
+                  value={li.qty}
+                  onChange={(e) => updateLine(li.key, { qty: Number(e.target.value) || 0 })}
+                />
+              </div>
+              <div className="space-y-1">
+                <Label htmlFor={`price-${li.key}`} className="text-xs">Unit (¢)</Label>
+                <Input
+                  id={`price-${li.key}`}
+                  type="number"
+                  min={0}
+                  step={1}
+                  value={li.unitPrice}
+                  onChange={(e) => updateLine(li.key, { unitPrice: Number(e.target.value) || 0 })}
+                />
+              </div>
+              <Button
+                type="button"
+                variant="ghost"
+                size="icon"
+                onClick={() => removeLine(li.key)}
+                disabled={lineItems.length === 1}
+                aria-label="Remove line item"
+              >
+                ✕
+              </Button>
+            </div>
+          ))}
+          <Button type="button" variant="outline" size="sm" onClick={addLine}>
+            + Add line item
+          </Button>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader><CardTitle>Notes</CardTitle></CardHeader>
+        <CardContent>
+          <textarea
+            id="notes"
+            rows={3}
+            value={notes}
+            onChange={(e) => setNotes(e.target.value)}
+            className="border-input bg-background focus-visible:ring-ring flex w-full rounded-md border px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2"
+          />
+        </CardContent>
+      </Card>
+
+      {error && <p className="text-destructive text-sm">{error}</p>}
+
+      <div className="flex justify-end gap-3">
+        <Button type="button" variant="outline" asChild>
+          <Link href="/jobs">Cancel</Link>
+        </Button>
+        <Button type="submit" disabled={pending || customers.length === 0}>
+          {pending ? 'Creating...' : 'Create job'}
+        </Button>
+      </div>
+    </form>
+  );
+}

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

@@ -0,0 +1,130 @@
+'use client';
+
+import { useRef, useState, useTransition } from 'react';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { uploadJobAttachment, deleteJobAttachment, type JobAttachmentView } from '@/lib/jobs/photos-actions';
+
+interface PhotoGalleryProps {
+  jobId: string;
+  initialAttachments: JobAttachmentView[];
+}
+
+export function PhotoGallery({ jobId, initialAttachments }: PhotoGalleryProps) {
+  const [attachments, setAttachments] = useState(initialAttachments);
+  const [pending, start] = useTransition();
+  const [error, setError] = useState<string | null>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const captionRef = useRef<HTMLInputElement>(null);
+
+  function handleUpload(e: React.FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+    setError(null);
+    const formData = new FormData(e.currentTarget);
+    formData.set('jobId', jobId);
+    start(async () => {
+      try {
+        await uploadJobAttachment(formData);
+        // Refresh client state from the server's revalidated cache. The
+        // simplest path: reset the inputs and hope the server-rendered
+        // page is refreshed by the revalidatePath — but the optimistic
+        // UX is better. We append a placeholder until the page reflows.
+        if (fileInputRef.current) fileInputRef.current.value = '';
+        if (captionRef.current) captionRef.current.value = '';
+      } catch (err) {
+        setError((err as Error).message);
+      }
+    });
+  }
+
+  function handleDelete(id: string) {
+    if (!confirm('Delete this attachment? This cannot be undone.')) return;
+    start(async () => {
+      try {
+        await deleteJobAttachment(id, jobId);
+        setAttachments((prev) => prev.filter((a) => a.id !== id));
+      } catch (err) {
+        setError((err as Error).message);
+      }
+    });
+  }
+
+  return (
+    <Card>
+      <CardHeader className="flex flex-row items-center justify-between space-y-0">
+        <CardTitle>Photos & attachments ({attachments.length})</CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <form onSubmit={handleUpload} className="space-y-3">
+          <div className="border-input grid grid-cols-1 gap-2 rounded-md border-2 border-dashed p-4 sm:grid-cols-[1fr_1fr_auto]">
+            <input
+              ref={fileInputRef}
+              type="file"
+              name="file"
+              accept="image/*,application/pdf"
+              required
+              className="text-sm"
+            />
+            <input
+              ref={captionRef}
+              type="text"
+              name="caption"
+              placeholder="Caption (optional)"
+              className="border-input bg-background h-10 rounded-md border px-3 text-sm"
+            />
+            <Button type="submit" disabled={pending} size="sm">
+              {pending ? 'Uploading…' : 'Upload'}
+            </Button>
+          </div>
+          <p className="text-muted-foreground text-xs">
+            Max 8MB · JPEG / PNG / WebP / HEIC / PDF · Stored in Cloudflare R2
+          </p>
+          {error && <p className="text-destructive text-sm">{error}</p>}
+        </form>
+
+        {attachments.length === 0 ? (
+          <p className="text-muted-foreground py-6 text-center text-sm">
+            No photos yet. Upload before/after shots, equipment damage, completion proof, etc.
+          </p>
+        ) : (
+          <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4">
+            {attachments.map((a) => (
+              <div key={a.id} className="group relative">
+                {a.kind === 'photo' && a.url ? (
+                  <a href={a.url} target="_blank" rel="noopener noreferrer">
+                    {/* eslint-disable-next-line @next/next/no-img-element */}
+                    <img
+                      src={a.url}
+                      alt={a.caption ?? ''}
+                      className="aspect-square w-full rounded-md border object-cover"
+                    />
+                  </a>
+                ) : (
+                  <a
+                    href={a.url}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="bg-muted text-muted-foreground hover:bg-muted/80 flex aspect-square w-full items-center justify-center rounded-md border text-xs"
+                  >
+                    📄 {a.contentType.split('/')[1].toUpperCase()}
+                  </a>
+                )}
+                <button
+                  type="button"
+                  onClick={() => handleDelete(a.id)}
+                  className="bg-background absolute top-1 right-1 rounded-full border p-1 text-xs opacity-0 transition group-hover:opacity-100"
+                  aria-label="Delete"
+                >
+                  ✕
+                </button>
+                {a.caption && (
+                  <p className="text-muted-foreground mt-1 truncate text-xs">{a.caption}</p>
+                )}
+              </div>
+            ))}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

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

@@ -0,0 +1,7 @@
+import { getJobAttachments } from '@/lib/jobs/photos-actions';
+import { PhotoGallery } from '@/components/jobs/photo-gallery';
+
+export async function JobPhotosSection({ jobId }: { jobId: string }) {
+  const attachments = await getJobAttachments(jobId);
+  return <PhotoGallery jobId={jobId} initialAttachments={attachments} />;
+}

package/template/extras/jobs/drizzle/src/db/schema/job-attachments.ts

@@ -0,0 +1,26 @@
+import { integer, pgTable, text, timestamp, uuid } from 'drizzle-orm/pg-core';
+import { jobs } from './jobs';
+
+/**
+ * Files attached to jobs — typically photos uploaded by techs in the
+ * field, but can also be PDFs (warranty docs, before/after reports),
+ * signature SVGs, etc.
+ *
+ * Files live in Cloudflare R2 (S3-compatible). The `key` is the R2 object
+ * key; `url` is the public URL (set if R2_PUBLIC_URL is configured) for
+ * cheap front-end rendering. `kind` lets the UI filter / group later.
+ */
+export const jobAttachments = pgTable('job_attachments', {
+  id: uuid('id').primaryKey().defaultRandom(),
+  jobId: uuid('job_id').notNull().references(() => jobs.id, { onDelete: 'cascade' }),
+  key: text('key').notNull(),                // R2 object key
+  url: text('url').notNull(),                // public URL (or signed GET for non-public buckets)
+  kind: text('kind').notNull().default('photo'),
+  contentType: text('content_type').notNull(),
+  sizeBytes: integer('size_bytes').notNull(),
+  caption: text('caption'),
+  uploadedAt: timestamp('uploaded_at').notNull().defaultNow(),
+});
+
+export type JobAttachmentRow = typeof jobAttachments.$inferSelect;
+export type NewJobAttachment = typeof jobAttachments.$inferInsert;

package/template/extras/jobs/drizzle/src/db/schema/jobs.ts

@@ -0,0 +1,29 @@
+import { integer, jsonb, pgEnum, pgTable, text, timestamp, uuid } from 'drizzle-orm/pg-core';
+import { customers } from './customers';
+
+export const jobStatus = pgEnum('job_status', [
+  'lead', 'estimate', 'scheduled', 'dispatched', 'in_progress',
+  'completed', 'invoiced', 'paid', 'closed', 'cancelled',
+]);
+export const jobPriority = pgEnum('job_priority', ['low', 'normal', 'high', 'emergency']);
+
+interface LineItemJson { description: string; qty: number; unitPrice: number; }
+
+export const jobs = pgTable('jobs', {
+  id: uuid('id').primaryKey().defaultRandom(),
+  customerId: uuid('customer_id').notNull().references(() => customers.id, { onDelete: 'restrict' }),
+  serviceType: text('service_type').notNull(),
+  status: jobStatus('status').notNull().default('lead'),
+  priority: jobPriority('priority').notNull().default('normal'),
+  scheduledAt: timestamp('scheduled_at'),
+  arrivalWindow: text('arrival_window'),
+  assigneeIds: jsonb('assignee_ids').$type<string[]>().notNull().default([]),
+  lineItems: jsonb('line_items').$type<LineItemJson[]>().notNull().default([]),
+  total: integer('total').notNull().default(0), // cents
+  notes: text('notes'),
+  createdAt: timestamp('created_at').notNull().defaultNow(),
+  updatedAt: timestamp('updated_at').notNull().defaultNow(),
+});
+
+export type JobRow = typeof jobs.$inferSelect;
+export type NewJob = typeof jobs.$inferInsert;

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

@@ -0,0 +1,71 @@
+'use server';
+
+import { eq } from 'drizzle-orm';
+import { revalidatePath } from 'next/cache';
+import { redirect } from 'next/navigation';
+import { db } from '@/db/client';
+import { jobs } from '@/db/schema';
+import { JOB_STATUSES, type JobStatus, type LineItem } from './types';
+
+export interface CreateJobInput {
+  customerId: string;
+  serviceType: string;
+  status: JobStatus;
+  priority: 'low' | 'normal' | 'high' | 'emergency';
+  scheduledAt: string | null;     // ISO or null
+  arrivalWindow: string | null;
+  notes: string | null;
+  lineItems: LineItem[];
+}
+
+/**
+ * Server action — creates a new job and redirects to its detail page.
+ * The form lives at /jobs/new.
+ */
+export async function createJob(input: CreateJobInput): Promise<void> {
+  if (!input.customerId) throw new Error('Customer is required');
+  if (!input.serviceType) throw new Error('Service type is required');
+
+  const total = input.lineItems.reduce((acc, li) => acc + li.qty * li.unitPrice, 0);
+
+  const [row] = await db
+    .insert(jobs)
+    .values({
+      customerId: input.customerId,
+      serviceType: input.serviceType,
+      status: input.status,
+      priority: input.priority,
+      scheduledAt: input.scheduledAt ? new Date(input.scheduledAt) : null,
+      arrivalWindow: input.arrivalWindow ?? null,
+      assigneeIds: [],
+      lineItems: input.lineItems,
+      total,
+      notes: input.notes ?? null,
+    })
+    .returning({ id: jobs.id });
+
+  revalidatePath('/jobs');
+  revalidatePath('/calendar');
+  redirect(`/jobs/${row.id}`);
+}
+
+/**
+ * Server action — advances a job to the next status in the pipeline.
+ * Used by the "Advance" button on the job detail page.
+ */
+export async function advanceJobStatus(jobId: string, currentStatus: JobStatus): Promise<void> {
+  const idx = JOB_STATUSES.indexOf(currentStatus);
+  const nextIdx = Math.min(idx + 1, JOB_STATUSES.length - 2); // never auto-advance to "cancelled"
+  const nextStatus = JOB_STATUSES[nextIdx] as JobStatus;
+  if (nextStatus === currentStatus) return;
+
+  await db.update(jobs).set({ status: nextStatus, updatedAt: new Date() }).where(eq(jobs.id, jobId));
+  revalidatePath(`/jobs/${jobId}`);
+  revalidatePath('/jobs');
+}
+
+export async function setJobStatus(jobId: string, status: JobStatus): Promise<void> {
+  await db.update(jobs).set({ status, updatedAt: new Date() }).where(eq(jobs.id, jobId));
+  revalidatePath(`/jobs/${jobId}`);
+  revalidatePath('/jobs');
+}

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

@@ -0,0 +1,48 @@
+import { desc, eq } from 'drizzle-orm';
+import { db } from '@/db/client';
+import { jobs as jobsTable, customers as customersTable } from '@/db/schema';
+import type { Job, JobStatus, LineItem } from './types';
+
+interface JoinedRow {
+  job: typeof jobsTable.$inferSelect;
+  customer: typeof customersTable.$inferSelect | null;
+}
+
+function toJob(row: JoinedRow): Job {
+  const j = row.job;
+  return {
+    id: j.id,
+    customerId: j.customerId,
+    customerName: row.customer?.name ?? '(deleted)',
+    serviceType: j.serviceType,
+    status: j.status as JobStatus,
+    priority: j.priority as Job['priority'],
+    scheduledAt: j.scheduledAt?.toISOString(),
+    arrivalWindow: j.arrivalWindow ?? undefined,
+    assigneeIds: j.assigneeIds,
+    assigneeNames: [], // populated by a separate users join if/when users table exists
+    lineItems: j.lineItems as LineItem[],
+    total: j.total,
+    notes: j.notes ?? undefined,
+    createdAt: j.createdAt.toISOString(),
+  };
+}
+
+export async function getJobs(): Promise<Job[]> {
+  const rows = await db
+    .select({ job: jobsTable, customer: customersTable })
+    .from(jobsTable)
+    .leftJoin(customersTable, eq(jobsTable.customerId, customersTable.id))
+    .orderBy(desc(jobsTable.createdAt));
+  return rows.map(toJob);
+}
+
+export async function getJob(id: string): Promise<Job | null> {
+  const [row] = await db
+    .select({ job: jobsTable, customer: customersTable })
+    .from(jobsTable)
+    .leftJoin(customersTable, eq(jobsTable.customerId, customersTable.id))
+    .where(eq(jobsTable.id, id))
+    .limit(1);
+  return row ? toJob(row) : null;
+}