commit fc8290d668f2371f6a4a62fa12d8e29b3314fa3b
Author: ray <ray@rayserver.taildad149.ts.net>
Date:   Sun Jul 12 10:01:39 2026 -0400

    initial commit

diff --git a/.env.example b/.env.example
new file mode 100644
index 0000000..afca712
--- /dev/null
+++ b/.env.example
@@ -0,0 +1,19 @@
+# PocketBase server URL
+VITE_PB_URL=http://localhost:8090
+
+# Application name (used in UI and document titles)
+VITE_APP_NAME=ShopProQuote
+
+# GlitchTip DSN for error tracking (set in production for step 3.1)
+VITE_GLITCHTIP_DSN=
+
+# Toggle AI assistant features on/off
+VITE_AI_ENABLED=true
+
+# Runtime environment: development / production
+VITE_ENV=development
+
+# ─── IMPORTANT ──────────────────────────────────────────────
+# Server-side secrets (DEEPSEEK_API_KEY, PB_SMTP_*, etc.)
+# MUST NEVER be prefixed with VITE_ — Vite ships every VITE_*
+# variable into the client bundle where it is visible to users.
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..dc2ec41
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,25 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+.env.production
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/.hermes/plans/2026-07-07_164530-customers-memo-split.md b/.hermes/plans/2026-07-07_164530-customers-memo-split.md
new file mode 100644
index 0000000..900079f
--- /dev/null
+++ b/.hermes/plans/2026-07-07_164530-customers-memo-split.md
@@ -0,0 +1,860 @@
+# Customers.tsx Memoize & Split Implementation Plan
+
+> **For Hermes:** Use subagent-driven-development skill to implement this plan task-by-task.
+
+**Goal:** Split `src/pages/Customers.tsx` (1,794 lines) into memoized sub-components under `src/components/customers/` and pure helpers under `src/lib/customers.ts`, exactly as was done for Appointments in the prior 2.4 Execution Memo — without changing any user-visible behavior.
+
+**Architecture:** Extract pure utilities (formatters, PB filter builder, vehicle-info parser) into a `src/lib/customers.ts` module. Extract every inline sub-component (skeleton, empty/error states, card, form modals, delete dialog, detail view) into individual files under `src/components/customers/`, each wrapped in `React.memo` where it receives props. Wire them back into the orchestrator `Customers.tsx` via a barrel `index.ts`. Keep the public type exports (`CustomerRecord`, `CustomerWithVehicles`, `CustomerFormData`) re-exported from `Customers.tsx` so the 5 existing external importers are untouched.
+
+**Tech Stack:** React 19, TypeScript, Tailwind v4, Vite 8, Vitest + jsdom.
+
+**Constraints (from AGENTS.md):**
+- No PocketBase schema/migration changes — this is a pure frontend refactor.
+- Modal changes follow the background-location overlay pattern — but this split does NOT change any modal behavior; the extracted modal components keep their exact same markup and `fixed inset-0` overlay style.
+- Do not touch existing tests in `src/store/__tests__` or `src/lib/__tests__`.
+- Run `npm run build && npm run lint && npm run test` after the final task.
+
+---
+
+## Reference: existing extraction pattern
+
+The proven pattern is in `src/components/appointments/` (created by the 2026-07-06 memo for Phase 2.4). Key conventions to reuse:
+- One component per file, `function FooImpl(...) { ... } export const Foo = memo(FooImpl)` for presentational row/card components.
+- Barrel `index.ts` re-exports.
+- `src/lib/appointments.ts` holds pure helpers; components import from there, the page imports helpers too.
+- Types stay where external consumers already import them from (the page file re-exports).
+
+---
+
+## File inventory (current — 1,794 lines)
+
+| Lines | What | Destination |
+|------:|------|-------------|
+| 1–25 | Imports | trimmed in orchestrator |
+| 27–92 | `CustomerRecord`, `VehicleRecord`, `RepairOrderRecord`, `QuoteRecord`, `CustomerWithVehicles` interfaces | stay in `Customers.tsx` (re-export) |
+| 96–122 | `formatVehicleLabel`, `vehicleKey`, `escapePbString`, `activeROFilterForCustomer` | `src/lib/customers.ts` |
+| 126–143 | `CustomersSkeleton` | `src/components/customers/EmptyStates.tsx` |
+| 145–185 | `EmptyState` | same file `EmptyStates.tsx` |
+| 187–189 | `ErrorState` | same file `EmptyStates.tsx` |
+| 193–270 | `CustomerCard` | `src/components/customers/CustomerCard.tsx` (memo) |
+| 274–441 | `CustomerFormData` interface + `CustomerFormModal` | interface stays in page re-export; component → `src/components/customers/CustomerFormModal.tsx` |
+| 444–668 | `VehicleFormData` interface + `VehicleFormModal` | interface → `src/lib/customers.ts` (or co-located); component → `src/components/customers/VehicleFormModal.tsx` |
+| 672–739 | `DeleteConfirmModal` | `src/components/customers/DeleteConfirmModal.tsx` |
+| 743–783 | `getRoStatusLabel`, `getRoStatusColor`, `formatDate` | `src/lib/customers.ts` |
+| 787–1170 | `CustomerDetailView` | `src/components/customers/CustomerDetailView.tsx` (memo) |
+| 1174–1794 | main `Customers` component | stays in `Customers.tsx` as orchestrator |
+
+### External importers of `Customers.tsx` (must not break)
+- `src/components/CustomerPicker.tsx:4` → `import type { CustomerWithVehicles }`
+- `src/pages/Appointments.tsx:9` → `import type { CustomerRecord, CustomerWithVehicles }`
+- `src/components/appointments/CheckInModal.tsx:8` → `import type { CustomerWithVehicles }`
+- `src/components/appointments/ScanScreenshotModal.tsx:8` → `import type { CustomerWithVehicles }`
+- `src/components/appointments/AppointmentModal.tsx:10` → `import type { CustomerWithVehicles, CustomerFormData }`
+
+Resolution: `Customers.tsx` keeps `export interface CustomerRecord`, `export interface CustomerWithVehicles`, `export interface CustomerFormData` (re-export from a new `src/components/customers/types.ts` to avoid duplication — but re-export is enough; `import type` callers don't care where the symbol physically lives as long as the page re-exports it).
+
+Decision: create `src/components/customers/types.ts` holding the shared interfaces; `Customers.tsx` does `export type { CustomerRecord, CustomerWithVehicles, CustomerFormData, VehicleRecord, RepairOrderRecord, QuoteRecord } from '../components/customers/types'`. External importers keep working unchanged.
+
+---
+
+## Task 1: Create shared types module
+
+**Objective:** Move the shared interfaces out of the page into a dedicated types file so both the page and the new component files import from one place.
+
+**Files:**
+- Create: `src/components/customers/types.ts`
+- Modify: `src/pages/Customers.tsx` (replace the inline `interface` declarations with a re-export)
+
+**Step 1:** Create `src/components/customers/types.ts`:
+
+```ts
+export interface CustomerRecord {
+  id: string;
+  name: string;
+  phone: string;
+  email: string;
+  address: string;
+  notes: string;
+  userId: string;
+  created: string;
+  updated: string;
+}
+
+export interface VehicleRecord {
+  id: string;
+  customerId: string;
+  userId?: string;
+  make: string;
+  model: string;
+  year: string;
+  vin: string;
+  licensePlate: string;
+  mileage: string;
+  color: string;
+  engine: string;
+}
+
+export interface RepairOrderRecord {
+  id: string;
+  roNumber: string;
+  customerId: string;
+  customerName: string;
+  vehicleInfo: string;
+  vin: string;
+  mileage: string;
+  status: string;
+  workStatus: string;
+  createdAt: string;
+  completedTime: string;
+  writeupTime: string;
+  technician: string;
+  notes: string;
+  services: string;
+  total: number;
+}
+
+export interface QuoteRecord {
+  id: string;
+  customerId: string;
+  customerName: string;
+  vehicleInfo: string;
+  vin: string;
+  mileage: string;
+  status: string;
+  createdAt: string;
+  total: number;
+  serviceAdvisor: string;
+  services: string;
+  notes: string;
+}
+
+export interface CustomerWithVehicles extends CustomerRecord {
+  vehicles: VehicleRecord[];
+  vehicleCount: number;
+}
+
+export interface CustomerFormData {
+  name: string;
+  phone: string;
+  email: string;
+  address: string;
+  notes: string;
+}
+
+export interface VehicleFormData {
+  make: string;
+  model: string;
+  year: string;
+  vin: string;
+  licensePlate: string;
+  mileage: string;
+  color: string;
+  engine: string;
+}
+```
+
+**Step 2:** In `src/pages/Customers.tsx`, delete lines 27–92 (the inline interface declarations) and replace with:
+
+```ts
+export type { CustomerRecord, CustomerWithVehicles, CustomerFormData } from '../components/customers/types';
+```
+
+Also add at the top, after the existing imports:
+
+```ts
+import type { VehicleRecord, RepairOrderRecord, QuoteRecord, CustomerWithVehicles, CustomerFormData, VehicleFormData } from '../components/customers/types';
+```
+
+Keep the `export` on `CustomerRecord` so existing importers don't break — verify the line above re-exports all three externally used types: `CustomerRecord`, `CustomerWithVehicles`, `CustomerFormData`.
+
+**Step 3 — Verify build:**
+
+```bash
+npm run build
+```
+Expected: PASS (tsc + vite, 0 errors). The type-only changes don't affect runtime.
+
+**Step 4 — Commit:**
+
+```bash
+git add src/components/customers/types.ts src/pages/Customers.tsx
+git commit -m "refactor(customers): extract shared interfaces to types module"
+```
+
+---
+
+## Task 2: Create `src/lib/customers.ts` (pure helpers)
+
+**Objective:** Move all pure functions out of the page so they can be shared by the new component files without a circular dependency.
+
+**Files:**
+- Create: `src/lib/customers.ts`
+
+**Step 1:** Create `src/lib/customers.ts` with these functions moved verbatim from `src/pages/Customers.tsx`:
+
+```ts
+import type { VehicleRecord, RepairOrderRecord } from '../components/customers/types';
+
+export function formatVehicleLabel(v: VehicleRecord): string {
+  const parts = [v.year, v.make, v.model].filter(Boolean);
+  return parts.length > 0 ? parts.join(' ') : 'Unknown vehicle';
+}
+
+export function vehicleKey(v: Pick<VehicleRecord, 'year' | 'make' | 'model' | 'vin'>): string {
+  return (v.vin || [v.year, v.make, v.model].filter(Boolean).join(' ')).trim().toLowerCase();
+}
+
+export function escapePbString(value: string): string {
+  return value.replace(/'/g, "\\'");
+}
+
+export function activeROFilterForCustomer(userId: string, customerId: string, previousName: string): string {
+  const activeStatuses = [
+    "status = 'active'",
+    "status = 'in_progress'",
+    "status = 'waiting_parts'",
+    "status = 'waiting_pickup'",
+  ].join(' || ');
+  const identityFilters = [
+    `customerId = '${escapePbString(customerId)}'`,
+    previousName.trim() ? `customerName = '${escapePbString(previousName.trim())}'` : '',
+  ].filter(Boolean).join(' || ');
+
+  return `userId = '${escapePbString(userId)}' && (${identityFilters}) && (${activeStatuses})`;
+}
+
+export function getRoStatusLabel(ro: RepairOrderRecord): string {
+  const s = ro.workStatus || ro.status || '';
+  switch (s) {
+    case 'active': case 'open': return 'Open';
+    case 'in-progress': case 'in_progress': return 'In Progress';
+    case 'waiter': case 'waiting_parts': return 'Waiting Parts';
+    case 'completed': return 'Completed';
+    case 'final_close':
+    case 'delivered': return 'Final Close';
+    case 'cancelled': return 'Cancelled';
+    default: return s || 'Unknown';
+  }
+}
+
+export function getRoStatusColor(ro: RepairOrderRecord): string {
+  const s = ro.workStatus || ro.status || '';
+  switch (s) {
+    case 'active': case 'open':
+      return 'bg-blue-50 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400';
+    case 'in-progress': case 'in_progress':
+      return 'bg-yellow-50 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400';
+    case 'waiter': case 'waiting_parts':
+      return 'bg-orange-50 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400';
+    case 'completed': case 'final_close': case 'delivered':
+      return 'bg-green-50 text-green-700 dark:bg-green-900/30 dark:text-green-400';
+    case 'cancelled':
+      return 'bg-red-50 text-red-700 dark:bg-red-900/30 dark:text-red-400';
+    default:
+      return 'bg-gray-50 text-gray-700 dark:bg-gray-900/30 dark:text-gray-400';
+  }
+}
+
+export function formatCustomerDate(dateStr: string): string {
+  if (!dateStr) return '\u2014';
+  try {
+    const d = new Date(dateStr);
+    return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
+  } catch {
+    return dateStr;
+  }
+}
+
+export function parseQuoteServices(raw: unknown): { name: string; price: number; customerDecision: string }[] {
+  if (!raw) return [];
+  let items = raw;
+  if (typeof raw === 'string') {
+    try { items = JSON.parse(raw); } catch { return []; }
+  }
+  if (!Array.isArray(items)) return [];
+  return items.map((s: any) => ({
+    name: s.name || 'Service',
+    price: typeof s.price === 'number' ? s.price : 0,
+    customerDecision: s.customerDecision || 'pending',
+  }));
+}
+```
+
+Note: `formatDate` is renamed to `formatCustomerDate` to avoid a name clash with `src/lib/format.ts` exports. The detail view uses it locally; the move forces a rename. Keep the call-site reference updated in Task 7.
+
+**Step 2 — Verify build:**
+
+```bash
+npm run build
+```
+Expected: FAIL — because `Customers.tsx` still has the old inline definitions; that's fine, we'll remove them in Task 8. For now just confirm `src/lib/customers.ts` compiles in isolation by running:
+
+```bash
+npx tsc --noEmit src/lib/customers.ts
+```
+If tsc complains about project settings, skip this sub-step — the final build happens at the end.
+
+**Step 3 — Commit:**
+
+```bash
+git add src/lib/customers.ts
+git commit -m "refactor(customers): add pure helpers module"
+```
+
+---
+
+## Task 3: Create `src/components/customers/EmptyStates.tsx`
+
+**Objective:** Extract the three state-display components (skeleton, empty, error) into one file (same pattern as `src/components/appointments/EmptyStates.tsx`).
+
+**Files:**
+- Create: `src/components/customers/EmptyStates.tsx`
+
+**Step 1:** Create the file, moving the JSX verbatim from `Customers.tsx` lines 126–189:
+
+```tsx
+import { Search, Users, UserPlus } from 'lucide-react';
+import { ListError } from '../ui/ListError';
+
+export function CustomersSkeleton() {
+  return (
+    <div className="animate-pulse space-y-4">
+      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
+        {Array.from({ length: 6 }).map((_, i) => (
+          <div
+            key={i}
+            className="rounded-xl bg-white p-5 ring-1 ring-gray-200 dark:bg-gray-800 dark:ring-gray-700"
+          >
+            <div className="mb-3 h-5 w-3/4 rounded bg-gray-200 dark:bg-gray-700" />
+            <div className="mb-2 h-4 w-1/2 rounded bg-gray-200 dark:bg-gray-700" />
+            <div className="h-4 w-1/3 rounded bg-gray-200 dark:bg-gray-700" />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export function EmptyState({ searchTerm, onCreate }: { searchTerm: string; onCreate: () => void }) {
+  if (searchTerm) {
+    return (
+      <div className="flex flex-col items-center justify-center py-20 text-center">
+        <div className="mb-6 flex h-24 w-24 items-center justify-center rounded-full bg-blue-50 dark:bg-blue-900/20">
+          <Search className="h-12 w-12 text-blue-500 dark:text-blue-400" />
+        </div>
+        <h3 className="mb-2 text-lg font-semibold text-gray-900 dark:text-white">
+          No matching customers
+        </h3>
+        <p className="mb-2 max-w-sm text-sm text-gray-500 dark:text-gray-400">
+          No customer records matched &ldquo;{searchTerm}&rdquo;.
+        </p>
+        <p className="mb-8 text-sm text-gray-400 dark:text-gray-500">
+          Try searching by customer name, phone number, email address, vehicle, or VIN.
+        </p>
+      </div>
+    );
+  }
+  return (
+    <div className="flex flex-col items-center justify-center py-20 text-center">
+      <div className="mb-6 flex h-24 w-24 items-center justify-center rounded-full bg-green-50 dark:bg-green-900/20">
+        <Users className="h-12 w-12 text-green-500 dark:text-green-400" />
+      </div>
+      <h3 className="mb-2 text-lg font-semibold text-gray-900 dark:text-white">
+        No customer records on file
+      </h3>
+      <p className="mb-8 max-w-sm text-sm text-gray-500 dark:text-gray-400">
+        Add your first customer record to keep contact details, vehicles, quotes, and repair history organized in one place.
+      </p>
+      <button
+        onClick={onCreate}
+        className="inline-flex items-center gap-2 rounded-lg bg-green-600 px-5 py-2.5 text-sm font-medium text-white shadow-sm transition-colors hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900"
+      >
+        <UserPlus className="h-4 w-4" />
+        Add Customer
+      </button>
+    </div>
+  );
+}
+
+export function ErrorState({ message, onRetry }: { message: string; onRetry: () => void }) {
+  return <ListError title="Unable to load customers" message={message} onRetry={onRetry} />;
+}
+```
+
+**Step 2 — Commit:**
+
+```bash
+git add src/components/customers/EmptyStates.tsx
+git commit -m "refactor(customers): extract EmptyStates components"
+```
+
+---
+
+## Task 4: Create `src/components/customers/CustomerCard.tsx`
+
+**Objective:** Extract the card used in the list grid, wrapped in `React.memo`.
+
+**Files:**
+- Create: `src/components/customers/CustomerCard.tsx`
+
+**Step 1:** Create:
+
+```tsx
+import { memo } from 'react';
+import { Phone, Mail, Car, FileText, Pencil, Trash2 } from 'lucide-react';
+import { formatPhoneDisplay } from '../../lib/phone';
+import { formatVehicleLabel } from '../../lib/customers';
+import type { CustomerWithVehicles } from './types';
+
+interface Props {
+  customer: CustomerWithVehicles;
+  onView: (id: string) => void;
+  onEdit: (c: CustomerWithVehicles) => void;
+  onDelete: (c: CustomerWithVehicles) => void;
+}
+
+function CustomerCardImpl({ customer, onView, onEdit, onDelete }: Props) {
+  return (
+    <div className="rounded-xl bg-white p-5 shadow-sm ring-1 ring-gray-200 transition-all hover:shadow-md dark:bg-gray-800 dark:ring-gray-700">
+      <div className="mb-3 flex items-start justify-between">
+        <div className="min-w-0 flex-1">
+          <h3
+            className="cursor-pointer truncate text-lg font-semibold text-gray-900 hover:text-green-600 dark:text-white dark:hover:text-green-400"
+            onClick={() => onView(customer.id)}
+          >
+            {customer.name}
+          </h3>
+          <p className="text-xs font-mono text-gray-400 dark:text-gray-500">ID: {customer.id.slice(0, 8)}</p>
+          <div className="mt-1 flex flex-wrap items-center gap-x-3 gap-y-1 text-sm text-gray-500 dark:text-gray-400">
+            {customer.phone && (
+              <span className="inline-flex items-center gap-1">
+                <Phone className="h-3.5 w-3.5" />
+                {formatPhoneDisplay(customer.phone)}
+              </span>
+            )}
+            {customer.email && (
+              <span className="inline-flex items-center gap-1 truncate">
+                <Mail className="h-3.5 w-3.5 shrink-0" />
+                {customer.email}
+              </span>
+            )}
+          </div>
+        </div>
+      </div>
+      <div className="mb-3 flex items-center gap-1.5 text-sm text-gray-500 dark:text-gray-400">
+        <Car className="h-4 w-4" />
+        <span>
+          {customer.vehicleCount === 0
+            ? 'No vehicles'
+            : `${customer.vehicleCount} vehicle${customer.vehicleCount !== 1 ? 's' : ''}`}
+        </span>
+        {customer.vehicles.length > 0 && (
+          <span className="truncate text-gray-400 dark:text-gray-500">
+            &mdash; {formatVehicleLabel(customer.vehicles[0])}
+          </span>
+        )}
+      </div>
+      <div className="flex items-center gap-2 border-t border-gray-100 pt-3 dark:border-gray-700">
+        <button
+          onClick={() => onView(customer.id)}
+          className="inline-flex items-center gap-1.5 rounded-lg bg-green-600 px-3 py-1.5 text-xs font-medium text-white transition-colors hover:bg-green-700"
+        >
+          <FileText className="h-3.5 w-3.5" />
+          View Details
+        </button>
+        <button
+          onClick={() => onEdit(customer)}
+          className="inline-flex items-center gap-1.5 rounded-lg border border-gray-300 bg-white px-3 py-1.5 text-xs font-medium text-gray-700 transition-colors hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600"
+        >
+          <Pencil className="h-3.5 w-3.5" />
+          Edit
+        </button>
+        <button
+          onClick={() => onDelete(customer)}
+          className="ml-auto inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-xs font-medium text-red-600 transition-colors hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-900/20"
+        >
+          <Trash2 className="h-3.5 w-3.5" />
+        </button>
+      </div>
+    </div>
+  );
+}
+
+export const CustomerCard = memo(CustomerCardImpl);
+```
+
+**Step 2 — Commit:**
+
+```bash
+git add src/components/customers/CustomerCard.tsx
+git commit -m "refactor(customers): extract memoized CustomerCard"
+```
+
+---
+
+## Task 5: Create `src/components/customers/CustomerFormModal.tsx`
+
+**Objective:** Extract the Add/Edit Customer form modal. **It is NOT wrapped in `memo`** — it holds its own state (`useState`) and re-renders only when its `open` prop flips, so memo would add nothing. Keep the exact same JSX and behavior.
+
+**Files:**
+- Create: `src/components/customers/CustomerFormModal.tsx`
+
+**Step 1:** Create the file moving `CustomerFormModal` (lines 282–441 of `Customers.tsx`) verbatim. Replace the inline `CustomerFormData` type with an import:
+
+```tsx
+import { useState, useEffect } from 'react';
+import { X } from 'lucide-react';
+import { formatPhoneInput } from '../../lib/phone';
+import type { CustomerFormData, CustomerWithVehicles } from './types';
+
+export function CustomerFormModal({
+  open,
+  customer,
+  onClose,
+  onSave,
+}: {
+  open: boolean;
+  customer: CustomerWithVehicles | null;
+  onClose: () => void;
+  onSave: (data: CustomerFormData) => Promise<void>;
+}) {
+  // ... identical body to current lines 293–440 ...
+}
+```
+
+Copy the JSX body verbatim (lines 293–440 of `Customers.tsx`).
+
+**Step 2 — Commit:**
+
+```bash
+git add src/components/customers/CustomerFormModal.tsx
+git commit -m "refactor(customers): extract CustomerFormModal"
+```
+
+---
+
+## Task 6: Create `src/components/customers/VehicleFormModal.tsx` and `DeleteConfirmModal.tsx`
+
+**Objective:** Extract the vehicle form and the delete-confirmation modal into their own files.
+
+**Files:**
+- Create: `src/components/customers/VehicleFormModal.tsx`
+- Create: `src/components/customers/DeleteConfirmModal.tsx`
+
+**Step 1:** Create `VehicleFormModal.tsx` — move lines 456–668 of `Customers.tsx` verbatim, importing `VehicleFormData` and `VehicleRecord` from `./types`:
+
+```tsx
+import { useState, useEffect } from 'react';
+import { X } from 'lucide-react';
+import type { VehicleFormData, VehicleRecord } from './types';
+
+export function VehicleFormModal({
+  open,
+  vehicle,
+  customerName,
+  onClose,
+  onSave,
+}: {
+  open: boolean;
+  vehicle: VehicleRecord | null;
+  customerName: string;
+  onClose: () => void;
+  onSave: (data: VehicleFormData) => Promise<void>;
+}) {
+  // ... identical body to current lines 469–667 ...
+}
+```
+
+**Step 2:** Create `DeleteConfirmModal.tsx` — move lines 672–739 verbatim:
+
+```tsx
+import { useState } from 'react';
+import { AlertTriangle } from 'lucide-react';
+
+export function DeleteConfirmModal({
+  open,
+  customerName,
+  onClose,
+  onConfirm,
+}: {
+  open: boolean;
+  customerName: string;
+  onClose: () => void;
+  onConfirm: () => Promise<void>;
+}) {
+  // ... identical body to current lines 683–738 ...
+}
+```
+
+**Step 3 — Commit:**
+
+```bash
+git add src/components/customers/VehicleFormModal.tsx src/components/customers/DeleteConfirmModal.tsx
+git commit -m "refactor(customers): extract VehicleFormModal and DeleteConfirmModal"
+```
+
+---
+
+## Task 7: Create `src/components/customers/CustomerDetailView.tsx`
+
+**Objective:** Extract the large detail view (lines 787–1170) into its own memoized component. It uses `getRoStatusLabel`, `getRoStatusColor`, `formatDate`, `parseQuoteServices` — all from `src/lib/customers.ts`. `formatDate` is renamed to `formatCustomerDate` in the helpers module to avoid a clash with `src/lib/format.ts`.
+
+**Files:**
+- Create: `src/components/customers/CustomerDetailView.tsx`
+
+**Step 1:** Create:
+
+```tsx
+import { useState, memo } from 'react';
+import { Phone, Mail, MapPin, ChevronLeft, Pencil, Plus, FileText, Car, Trash2 } from 'lucide-react';
+import { formatPhoneDisplay } from '../../lib/phone';
+import {
+  formatVehicleLabel,
+  getRoStatusLabel,
+  getRoStatusColor,
+  formatCustomerDate,
+  parseQuoteServices,
+} from '../../lib/customers';
+import type {
+  CustomerWithVehicles,
+  VehicleRecord,
+  RepairOrderRecord,
+  QuoteRecord,
+} from './types';
+
+interface Props {
+  customer: CustomerWithVehicles;
+  vehicles: VehicleRecord[];
+  repairOrders: RepairOrderRecord[];
+  repairOrdersLoading: boolean;
+  quotes: QuoteRecord[];
+  quotesLoading: boolean;
+  onBack: () => void;
+  onEdit: (c: CustomerWithVehicles) => void;
+  onAddVehicle: () => void;
+  onEditVehicle: (v: VehicleRecord) => void;
+  onDeleteVehicle: (v: VehicleRecord) => void;
+}
+
+function CustomerDetailViewImpl({
+  customer,
+  vehicles,
+  repairOrders,
+  repairOrdersLoading,
+  quotes,
+  quotesLoading,
+  onBack,
+  onEdit,
+  onAddVehicle,
+  onEditVehicle,
+  onDeleteVehicle,
+}: Props) {
+  const [expandedQuoteId, setExpandedQuoteId] = useState<string | null>(null);
+  const toggleQuote = (id: string) => setExpandedQuoteId(expandedQuoteId === id ? null : id);
+
+  function formatCurrency(n: number): string {
+    return '$' + n.toFixed(2);
+  }
+
+  return (
+    // ... copy JSX verbatim from lines 837–1168, replacing formatDate(...) calls
+    // with formatCustomerDate(...) calls, and the inline parseQuoteServices with
+    // the imported parseQuoteServices ...
+  );
+}
+
+export const CustomerDetailView = memo(CustomerDetailViewImpl);
+```
+
+**Step 2 — Commit:**
+
+```bash
+git add src/components/customers/CustomerDetailView.tsx
+git commit -m "refactor(customers): extract memoized CustomerDetailView"
+```
+
+---
+
+## Task 8: Create `src/components/customers/index.ts` barrel
+
+**Objective:** One import line in the orchestrator.
+
+**Files:**
+- Create: `src/components/customers/index.ts`
+
+**Step 1:**
+
+```ts
+export { CustomersSkeleton, EmptyState, ErrorState } from './EmptyStates';
+export { CustomerCard } from './CustomerCard';
+export { CustomerFormModal } from './CustomerFormModal';
+export { VehicleFormModal } from './VehicleFormModal';
+export { DeleteConfirmModal } from './DeleteConfirmModal';
+export { CustomerDetailView } from './CustomerDetailView';
+export type {
+  CustomerRecord,
+  VehicleRecord,
+  RepairOrderRecord,
+  QuoteRecord,
+  CustomerWithVehicles,
+  CustomerFormData,
+  VehicleFormData,
+} from './types';
+```
+
+**Step 2 — Commit:**
+
+```bash
+git add src/components/customers/index.ts
+git commit -m "refactor(customers): add barrel index"
+```
+
+---
+
+## Task 9: Rewrite `Customers.tsx` as the orchestrator
+
+**Objective:** Remove every inline component and helper. Wire the extracted pieces. The main `Customers` component keeps all state, handlers, and the `renderListView`/`renderDetailView` orchestration. All handlers passed to memoized children are already wrapped in `useCallback`, so the memo is effective.
+
+**Files:**
+- Modify (rewrite): `src/pages/Customers.tsx`
+
+**Step 1:** Replace the top of the file (imports + old interface/helper/component declarations) with:
+
+```tsx
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { useSearchParams } from 'react-router-dom';
+import { X, Plus } from 'lucide-react';
+import { pb } from '../lib/pocketbase';
+import { useToast } from '../components/ui/Toast';
+import { getSetupRequiredMessage, isMissingCollectionError, logError } from '../lib/userMessages';
+import { customerWriteSchema } from '../schemas/customer';
+import {
+  formatVehicleLabel,
+  vehicleKey,
+  escapePbString,
+  activeROFilterForCustomer,
+} from '../lib/customers';
+import {
+  CustomersSkeleton,
+  EmptyState,
+  ErrorState,
+  CustomerCard,
+  CustomerFormModal,
+  VehicleFormModal,
+  DeleteConfirmModal,
+  CustomerDetailView,
+} from '../components/customers';
+
+export type {
+  CustomerRecord,
+  CustomerWithVehicles,
+  CustomerFormData,
+} from '../components/customers/types';
+
+import type {
+  CustomerWithVehicles,
+  CustomerRecord,
+  VehicleRecord,
+  RepairOrderRecord,
+  QuoteRecord,
+  CustomerFormData,
+  VehicleFormData,
+} from '../components/customers/types';
+```
+
+**Step 2:** Keep the main `Customers` function body (lines 1174–1794) intact, with these adjustments:
+- Remove the now-extracted `CustomerCard`, `CustomerFormModal`, `VehicleFormModal`, `DeleteConfirmModal`, `CustomerDetailView` usages in the footer modals — replace with imported versions (same JSX, different source).
+- Every handler (`fetchAll`, `handleViewCustomer`, `handleAddCustomer`, `handleEditCustomer`, `handleDeleteCustomer`, `handleAddVehicle`, `handleEditVehicle`, `handleDeleteVehicle`) is already wrapped in `useCallback` — keep them.
+- In `renderListView`, `<CustomerCard ... />` now refers to the memoized import.
+- In `renderDetailView`, `<CustomerDetailView ... />` refers to the memoized import.
+- In the modals footer, `<CustomerFormModal>`, `<VehicleFormModal>`, `<DeleteConfirmModal>` refer to the imports.
+- The `formatVehicleLabel` reference in the footer's "Delete Vehicle Confirmation" modal (line 1788: `formatVehicleLabel(deletingVehicle)`) now uses the import from `../lib/customers`.
+
+**Step 3 — Verify build:**
+
+```bash
+npm run build
+```
+Expected: PASS (0 errors). The orchestrator should be ~520–580 lines (state + handlers + two render functions + modals footer).
+
+**Step 4 — Lint:**
+
+```bash
+npm run lint
+```
+Expected: PASS (0 new errors/warnings; the 2 pre-existing Toast.tsx / Settings.tsx warnings remain).
+
+**Step 5 — Test:**
+
+```bash
+npm run test
+```
+Expected: the full Vitest suite passes (86+ tests across 12+ files). No new tests are added in this refactor — there are no existing tests for `Customers.tsx` to break. The existing `src/schemas/__tests__/customer.test.ts` (if any) and `src/lib/__tests__/` and `src/store/__tests__/` suites must pass unchanged.
+
+**Step 6 — Commit:**
+
+```bash
+git add src/pages/Customers.tsx
+git commit -m "refactor(customers): rewrite orchestrator using extracted components"
+```
+
+---
+
+## Task 10: Verification & bundle-size check
+
+**Objective:** Confirm the refactor produced a smaller Customers chunk and nothing else regressed.
+
+**Step 1 — Full verification block:**
+
+```bash
+npm run build && npm run lint && npm run test
+```
+Expected: all three pass.
+
+**Step 2 — Inspect chunk sizes (same command from roadmap Appendix A):**
+
+```bash
+du -sh dist/assets/
+ls -laS dist/assets/ | head -10
+for f in dist/assets/*.js; do
+  printf "%-45s raw=%7d  gzip=%7d\n" "$(basename $f)" "$(stat -c%s $f)" "$(gzip -c $f | wc -c)"
+done
+```
+
+Expected: the Customers chunk is now smaller (the detail-view and form modal code is split into smaller lazy-ish chunks, though Vite may or may not split these into separate chunks without explicit `lazy()` — at minimum the page source file is smaller, which improves maintainability and re-render hotspots as described in roadmap 2.4).
+
+**Step 3 — Manual smoke (optional):**
+
+No behavior change is expected. If the user wants to verify, `npm run dev` and click through: list → search → customer card → detail view → add/edit customer modal → add/edit vehicle modal → delete customer modal. All UI should look identical.
+
+**Step 4 — Commit (if any verification fixes):**
+
+If any verification step required fixes, commit those. Otherwise skip this step.
+
+---
+
+## Risks, tradeoffs, and open questions
+
+**Risks:**
+1. **External type imports break.** Five files import types from `'../pages/Customers'`. Mitigation: `Customers.tsx` re-exports all three types. Verified in Task 1's re-export line. If any external file still breaks, update its import to `'../components/customers'` (or `../../components/customers/types`) — but the re-export means no change should be needed.
+2. **`formatDate` rename.** `formatCustomerDate` avoids a clash with `src/lib/format.ts:formatDate` (used elsewhere in the app). All call sites inside `CustomerDetailView` must be updated.
+3. **`memo` effectiveness.** `CustomerCard` and `CustomerDetailView` will only skip re-renders if every prop is referentially stable. `customer`, `vehicles`, `repairOrders`, `quotes` come from `useState` and are only replaced on fetch — stable between renders. Callbacks (`onView`, `onEdit`, etc.) are wrapped in `useCallback`. The memo is real; if a future change introduces an inline callback, memo breaks silently.
+4. **No new tests are added.** Roadmap 2.4 for Appointments also didn't add tests for the extracted components; this matches the precedent. If the user wants snapshot tests for `CustomerCard`/`CustomerDetailView`, that's a separate task.
+
+**Tradeoffs:**
+- More files to navigate, but each is smaller and single-purpose.
+- The barrel import makes tree-shaking easier if any component is lazy-loaded later.
+
+**Open questions:** None. The pattern is proven on Appointments.tsx (Phase 2.4, 2026-07-06 memo). Customer behavior is unchanged.
+
+---
+
+## Verification summary
+
+```
+npm run build   → PASS (0 errors, 0 warnings new)
+npm run lint    → PASS (baseline warnings only)
+npm run test    → PASS (86+ tests; no regressions)
+```
+
+**Resolved roadmap priority:** 2.4 (continues the mega-component split, Customers.tsx this time). Next up per the pattern: RepairOrders.tsx (already partially memoized — `FragmentRow`/`CompletedRow` exist) or QuoteGenerator.tsx.
\ No newline at end of file
diff --git a/.hermes/plans/2026-07-07_phase3-frontend-and-status-correction.md b/.hermes/plans/2026-07-07_phase3-frontend-and-status-correction.md
new file mode 100644
index 0000000..75bc539
--- /dev/null
+++ b/.hermes/plans/2026-07-07_phase3-frontend-and-status-correction.md
@@ -0,0 +1,97 @@
+# Plan: Phase 3 Frontend + Roadmap Status Correction
+
+**Date:** 2026-07-07
+**Scope:** Correct the stale roadmap status table, then complete the two frontend-only Phase 3 items that need no server approval.
+
+## Part A — Roadmap Status Correction (no code changes)
+
+The roadmap status table (lines ~2100-2141) is stale. Several items marked "NOT DONE — needs approval" are actually installed and running on the server. Update the table to reflect verified reality:
+
+| # | Current status line | Corrected status | Evidence |
+|---|--------------------|-----------------|----------|
+| 1.2 | "⚠️ PARTIAL — frontend done, server pending approval" | "✅ DONE" | `/opt/spq/ai-proxy/validate.js` exists, `spq-ai-validator.service` enabled+active, `spq-deepseek.conf` + `deepseek-key.conf` in nginx, `/deepseek/` location in shopproquote site |
+| 1.3 | "❌ NOT DONE — needs PB migration + approval" | "✅ DONE" | `pb_migrations/1740000000020_users_create_role_guard.js` exists, applied in PB container (`migrate up` → "No new migrations to apply") |
+| 1.4 | "⚠️ PARTIAL — frontend cleanup done, nginx pending" | "✅ DONE" | `/etc/nginx/snippets/spq-security.conf` exists with CSP + all headers, included via shopproquote site |
+| 3.3 | "❓ UNKNOWN — server-side" | "✅ DONE" | `/etc/nginx/sites-enabled/shopproquote` serves dist/ on :443 with TLS + SPA fallback |
+| 3.4 | "❓ UNKNOWN — server-side" | "✅ DONE" | `/pb/` and `/api/` reverse-proxy locations in shopproquote site; SSE (Upgrade/Connection headers) configured |
+
+**Action:** Update the status table in `roadmap_5.2.md` lines ~2105-2134 to mark these 5 items as ✅ DONE with evidence. No code changes.
+
+## Part B — Phase 3 Frontend-Only Items (no approval needed)
+
+### B1: 3.6 Offline Banner
+
+**Why first:** Pure frontend, zero approval, ~15 lines.
+
+**Files:**
+- New: `src/components/OfflineBanner.tsx` (per roadmap spec — `navigator.onLine` + `online`/`offline` event listeners, sticky amber banner when offline)
+- Edit: `src/App.tsx` — import and render `<OfflineBanner />` inside `<BrowserRouter>`, above the route content
+
+**Steps:**
+1. Create `src/components/OfflineBanner.tsx` per the roadmap's existing code spec (lines 1767-1785)
+2. Add `<OfflineBanner />` to App.tsx just inside `<BrowserRouter>`, above the layout/routes
+3. Build + lint + test
+
+**Verify:**
+```
+npm run build → passes
+npm run lint → no new warnings
+npm run test → 86 tests still pass
+# Manual: toggle network off in DevTools → amber banner appears; on → disappears
+```
+
+### B2: 3.7 Dependency Audit
+
+**Why:** `npm audit` already clean (0 vulnerabilities). Only minor version bumps remain — safe to apply.
+
+**Current outdated (from `npm outdated`):**
+| Package | Current | Latest | Risk |
+|---------|--------|--------|------|
+| @tailwindcss/vite | 4.3.1 | 4.3.2 | patch — safe |
+| @types/node | 24.13.2 | 26.1.0 | major — SKIP (type-only, bleeding edge) |
+| lucide-react | 1.21.0 | 1.23.0 | minor — safe |
+| oxlint | 1.71.0 | 1.73.0 | minor — safe |
+| react-router-dom | 7.18.0 | 7.18.1 | patch — safe |
+| tailwindcss | 4.3.1 | 4.3.2 | patch — safe |
+| vite | 8.1.0 | 8.1.3 | patch — safe |
+| vitest | 4.1.9 | 4.1.10 | patch — safe |
+
+**Steps:**
+1. Run `npm audit` — confirm 0 vulnerabilities (already verified)
+2. Apply safe minor/patch bumps: `npm update` (respects semver ranges in package.json — bumps to "Wanted" column, not to "Latest" for @types/node)
+3. Skip `@types/node` 24→26 (major, type-only, no runtime impact)
+4. Build + lint + test all green
+5. Record the audit result in the roadmap memo
+
+**Verify:**
+```
+npm run build → passes
+npm run lint → no new warnings  
+npm run test → 86 tests still pass
+npm audit → 0 vulnerabilities
+```
+
+## Part C — Items requiring your approval (NOT in this plan, listed for visibility)
+
+These are the only remaining roadmap items. ALL need your explicit go-ahead before I touch PocketBase or server config:
+
+| # | Item | What it touches | Approval needed for |
+|---|------|----------------|---------------------|
+| 2.7 | Logo uploads to PB file records | PB `settings` collection | New PB migration (adds `logo` file field) |
+| 3.1 | GlitchTip error tracking | New Docker container + `@sentry/react` dep | Server install + npm dep |
+| 3.2 | PB production hardening | PB env vars, SMTP, backup cron | SMTP creds, cron job |
+| 3.5 | Structured logging | nginx log_format, docker logging | nginx config change |
+| 4.1-4.10 | Phase 4 features | Various PB + frontend | Per-feature approval |
+
+## Execution Order
+
+1. **Part A** — update roadmap status table (5 lines corrected, evidence cited)
+2. **Part B1** — create OfflineBanner.tsx, wire into App.tsx
+3. **Part B2** — `npm update` for safe bumps, verify
+4. **Final verify** — build + lint + test all green
+5. **Memo** — append Execution Memo to roadmap_5.2.md covering Parts A + B
+
+**Total new files:** 1 (`OfflineBanner.tsx`)
+**Total edited files:** 2 (`App.tsx`, `roadmap_5.2.md`)
+**Risk:** Low — offline banner is self-contained, dep bumps are patch/minor only
+**No PocketBase changes. No nginx changes. No new secrets.**
\ No newline at end of file
diff --git a/.oxlintrc.json b/.oxlintrc.json
new file mode 100644
index 0000000..6fa991d
--- /dev/null
+++ b/.oxlintrc.json
@@ -0,0 +1,8 @@
+{
+  "$schema": "./node_modules/oxlint/configuration_schema.json",
+  "plugins": ["react", "typescript", "oxc"],
+  "rules": {
+    "react/rules-of-hooks": "error",
+    "react/only-export-components": ["warn", { "allowConstantExport": true }]
+  }
+}
diff --git a/AGENTS.md b/AGENTS.md
new file mode 100755
index 0000000..50baccd
--- /dev/null
+++ b/AGENTS.md
@@ -0,0 +1,276 @@
+# AGENTS
+## # SPQ-v2 Core Directive & Roadmap Execution
+
+ # Objective: Implement Role-Based UI Architecture (Advisor, Tech, Mobile)
+
+
+
+## **Your Execution Directives:**
+
+ Verify Changes
+- `npm run build` is the closest thing to typecheck here. It runs `tsc -b && vite build`.
+- `npm run test` runs the full Vitest suite.
+- Run a focused test with `npx vitest run "src/store/__tests__/quote.test.ts"`.
+- `npm run lint` uses `oxlint`. As of now it reports 2 existing warnings in `src/components/ui/Toast.tsx` and `src/pages/Settings.tsx`; do not treat those as new ## regressions unless you touched them.
+
+* Permissions
+-  Do not create or change or reset any type of passwords without my explicit permission - always ask if its ok
+-  If I am asking you to do something that compromises my home server security please explain and ask for permission
+
+
+## App Shape
+- This is a single Vite + React app, not a monorepo. App entrypoints are `src/main.tsx` and `src/App.tsx`.
+- Top-level pages are lazy-loaded in `src/App.tsx`. If you add a new page/route, wire it there.
+- Shared app shell is `src/components/Layout.tsx`; settings has special modal/background-route behavior plus preload via `src/lib/routePreload.ts`.
+
+## Runtime / Backend Quirks
+- PocketBase is accessed only from the frontend. Central client/auth helpers live in `src/lib/pocketbase.ts`.
+- Prefer `useIsLoggedIn()` / `useAuth()` for reactive auth state. Do not read `pb.authStore.isValid` directly in render paths you expect to update live.
+- Dev proxy assumptions are in `vite.config.ts`:
+  - `/pb` proxies to `http://127.0.0.1:8091`
+  - `/deepseek` proxies to `https://localhost`
+- `vite.config.ts` excludes `pocketbase` from `optimizeDeps`; do not remove that casually.
+-Do not open this file without Explicitly asking for my permission before using this -- PocketBase login info is at /tmp/opencode/pb-admin.txt 
+
+## PocketBase Operations Memo
+- PocketBase runs in Docker. Find the current container with `docker ps --format '{{.ID}} {{.Image}} {{.Names}} {{.Ports}}'` and look for the `pocketbase` container. On 2026-07-05 it was container `42d798cd1673`, named `pocketbase`, with `127.0.0.1:8091->8090/tcp`.
+- The app proxy in `vite.config.ts` points `/pb` to `http://127.0.0.1:8091`, which is the host port forwarded to the PocketBase container.
+- Inside the container, the PocketBase binary is `/usr/local/bin/pocketbase`.
+- Inside the container, the PocketBase data directory is `/pb_data`.
+- Inside the container, the active migrations directory is `/pb_data/migrations` (not `/pb_data/pb_migrations`).
+- The project migration source directory is `pb_migrations/` in this repo.
+- Before applying schema migrations, make a database backup inside the container: `docker exec <container_id> cp /pb_data/data.db /pb_data/data.db.backup-before-<feature>-$(date +%Y%m%d-%H%M%S)`.
+- Copy migration files into the container before applying them. Example: `docker cp "pb_migrations/<migration_file>.js" <container_id>:/pb_data/migrations/`.
+- Apply migrations with: `docker exec <container_id> /usr/local/bin/pocketbase migrate up --dir=/pb_data --migrationsDir=/pb_data/migrations`.
+- Verify no pending migrations remain by running the same `migrate up` command again. Expected success message: `No new migrations to apply.`
+- PocketBase version in the container was `0.39.1` on 2026-07-05. Use field constructors such as `TextField`, `EmailField`, `SelectField`, `DateField`, and `JSONField`; do not rely on the older `CollectionField` global for new migrations.
+- Do not open `/tmp/opencode/pb-admin.txt` unless the user explicitly grants permission. Most migration work does not require admin credentials.
+
+## Data Model Gotchas
+- `services` catalog records are consumed by `QuoteGenerator` as flat-price items. Keep `price` populated even when UI adds richer pricing inputs.
+- Catalog description fields are inconsistent across the app: `ServiceCatalog` reads `explanation || description`, while quote flows read `explanation`. Preserve compatibility when changing service description writes.
+- User-owned PocketBase collections are expected to be scoped by `userId = @request.auth.id` per `pb_migrations/1739999000004_user_scoped_api_rules.js`. Keep new collection fields and queries compatible with that model.
+- Quote ↔ RO links are plain text IDs, not PocketBase relation fields, by design. See `pb_migrations/1739999000006_quote_ro_link.js`.
+
+## Shared State / Local Storage
+- Quote draft state is persisted in Zustand under the `spq-quote` key in `src/store/quote.ts`. Be careful changing store shape because old local data will be rehydrated.
+- Shop defaults belong in `src/lib/settings.ts`. Reuse `loadSettings()` / `saveSettings()` instead of duplicating fallback values in pages.
+- Dark mode and some UI preferences also live in localStorage; search before introducing new keys.
+
+## Repair Order Conventions
+- RO totals should go through `src/lib/totals.ts`.
+- Some RO progress/audit features intentionally avoid PocketBase schema changes:
+  - service sub-status lives on the `ROService` JSON shape in `src/types.ts`
+  - RO event history is stored in the `financial` JSON blob, not a separate collection
+
+## Tests
+- Vitest runs in `jsdom` with setup from `src/test/setup.ts`.
+- Existing tests are lightweight unit tests under `src/store/__tests__` and `src/lib/__tests__`; there is no broader integration-test harness or CI config in this repo.
+
+## PopUp Modal Standard (Background-Location Overlay Pattern)
+
+Every pop-up / overlay modal MUST follow the pattern established by the Settings modal. There is no generic `<Modal>` component; instead we use React Router's `backgroundLocation` technique so the background page stays rendered while the modal overlays it.
+
+### Architecture Overview
+
+| Layer | File | What It Does |
+|-------|------|--------------|
+| Route setup | `src/App.tsx` | Registers the route in both the primary `<Routes>` (for in-page rendering) and the secondary conditional `<Routes>` (for modal overlay rendering) |
+| Trigger | `src/components/Layout.tsx` (desktop) and `src/components/mobile/MobileLayout.tsx` (mobile) | `<NavLink>` passes current `location` as `state.backgroundLocation` |
+| Page component | `src/pages/Settings.tsx` | Detects `isModal` from `location.state?.backgroundLocation` and conditionally wraps content in a fixed overlay |
+| Preload helper | `src/lib/routePreload.ts` | Lazy-load function for hover preloading (optional but recommended) |
+
+---
+
+### Step 1 -- App.tsx: Register Two Routes
+
+In `src/App.tsx`, you need three pieces:
+
+**A) A `<SettingsModalRoute>`-style guard component** (see `SettingsModalRoute` at `src/App.tsx:143-153`):
+```tsx
+function YourModalRoute() {
+  // Add any role gating or auth checks needed
+  return (
+    <RequireAuth>
+      <YourPage />
+    </RequireAuth>
+  );
+}
+```
+
+**B) A primary route** inside the main `<Routes location={backgroundLocation || location}>` (line 168), nested under the appropriate layout (e.g. `<OwnerLayout>`):
+```tsx
+<Route path="/your-path" element={<YourPage />} />
+```
+
+**C) A secondary modal route** inside the `{backgroundLocation && (<Routes>...</Routes>)}` block (line 195-199):
+```tsx
+{backgroundLocation && (
+  <Routes>
+    <Route path="/settings" element={<SettingsModalRoute />} />
+    <Route path="/your-path" element={<YourModalRoute />} />   {/* NEW */}
+  </Routes>
+)}
+```
+
+---
+
+### Step 2 -- Layout.tsx / MobileLayout.tsx: Pass backgroundLocation on NavLink
+
+In the sidebar/nav `<NavLink>` for your route, pass `state` with `backgroundLocation` set to the current location. See `src/components/Layout.tsx:81`:
+
+```tsx
+<NavLink
+  to="/your-path"
+  state={{
+    backgroundLocation:
+      (location.state as { backgroundLocation?: unknown } | null)
+        ?.backgroundLocation || location,
+  }}
+  onClick={handleNavClick}
+  onMouseEnter={preloadYourPage}          // optional
+  onFocus={preloadYourPage}               // optional
+  ...
+>
+```
+
+The `(location.state... || location)` fallback ensures the overlay works correctly even if the user is already inside another modal (unlikely but defensive).
+
+Repeat this in `src/components/mobile/MobileLayout.tsx` for the mobile nav.
+
+---
+
+### Step 3 -- Page Component: isModal Detection & Overlay Wrapper
+
+**A) Detect modal mode** at the top of your page component (see `Settings.tsx:479-480`):
+```tsx
+const location = useLocation();
+const modalBackground = (location.state as any)?.backgroundLocation;
+const isModal = Boolean(modalBackground);
+```
+
+**B) Build your normal page content** and assign it to a variable (e.g. `content` or `settingsContent`).
+
+**C) Conditional return** -- this is the critical pattern (see `Settings.tsx:1449-1471`):
+```tsx
+if (!isModal) {
+  return content;           // normal in-page render
+}
+
+return (
+  <div className="fixed inset-0 z-50">
+    {/* Backdrop -- clicking it closes the modal */}
+    <button
+      type="button"
+      aria-label="Close"
+      className="absolute inset-0 bg-gray-950/45 backdrop-blur-sm"
+      onClick={closeModal}
+    />
+
+    {/* Centered modal container */}
+    <div className="absolute inset-0 flex items-center justify-center p-3 sm:p-6">
+      {/* THE SIZING DIV -- adjust Tailwind classes here to control size */}
+      <div className="relative flex h-[min(92vh,56rem)] w-full max-w-6xl overflow-hidden rounded-3xl border border-gray-200 bg-gray-50 shadow-2xl dark:border-gray-700 dark:bg-gray-950">
+        <div className="flex-1 overflow-y-auto">
+          {content}
+        </div>
+      </div>
+    </div>
+  </div>
+);
+```
+
+### Sizing the Modal
+
+Size is controlled 100% by Tailwind classes on the inner div (the one with `rounded-3xl`). To change the size for a specific modal:
+
+| Dimension | Class(es) | Current Default | Options |
+|-----------|-----------|-----------------|---------|
+| **Width** | `max-w-*` | `max-w-6xl` (72rem / 1152px) | `max-w-2xl` (42rem), `max-w-3xl` (48rem), `max-w-4xl` (56rem), `max-w-5xl` (64rem), `max-w-7xl` (80rem), `max-w-[900px]` (arbitrary) |
+| **Height** | `h-[min(...)]` | `h-[min(92vh,56rem)]` (92% viewport, 896px cap) | Adjust `92vh` and `56rem` as needed |
+| **Outer padding** | `p-3 sm:p-6` | 12px mobile / 24px desktop | Decrease for larger modals that need more screen real estate |
+
+**Each modal chooses its own size.** Do not extract a shared size prop -- just change the Tailwind classes on that modal's inner container div. For example, a small confirmation dialog would use `max-w-md h-auto`, while a full-width data table modal might use `max-w-7xl`.
+
+---
+
+### Step 4 -- Close / Escape Handler
+
+Every modal MUST implement close via backdrop click and Escape key. See `Settings.tsx:551-566`:
+
+```tsx
+const closeModal = useCallback(() => {
+  if (isModal) {
+    navigate(-1);    // pop the overlay URL, restoring the background page
+  } else {
+    navigate('/');   // fallback: go home from the full-page version
+  }
+}, [isModal, navigate]);
+
+useEffect(() => {
+  if (!isModal) return;
+  const handler = (e: KeyboardEvent) => {
+    if (e.key === 'Escape') closeModal();
+  };
+  document.addEventListener('keydown', handler);
+  return () => document.removeEventListener('keydown', handler);
+}, [isModal, closeModal]);
+```
+
+---
+
+### Step 5 -- Preloading (Optional)
+
+Add a preload helper in `src/lib/routePreload.ts` so the page chunk starts loading on hover:
+```ts
+export const loadYourPage = () => import('../pages/YourPage');
+
+export function preloadYourPage() {
+  void loadYourPage();
+}
+```
+
+Then use it in the NavLink: `onMouseEnter={preloadYourPage} onFocus={preloadYourPage}`.
+
+---
+
+### Step 6 -- Sticky Save Button (Top Bar)
+
+Every modal with a save/submit action **MUST** place the save button in a sticky bar pinned to the **top** of the scrollable content area inside the modal. No other save or submit buttons may appear anywhere else in the modal body.
+
+```tsx
+<div className="flex-1 overflow-y-auto">
+  {/* Sticky save bar at top */}
+  <div className="sticky top-0 z-10 flex items-center justify-end border-b border-gray-200 bg-gray-50 px-6 py-4 dark:border-gray-700 dark:bg-gray-950">
+    <button
+      type="submit"
+      className="rounded-lg bg-blue-600 px-5 py-2 text-sm font-medium text-white hover:bg-blue-700"
+      onClick={handleSave}
+    >
+      Save
+    </button>
+  </div>
+
+  {/* Modal form body -- no save buttons here */}
+  <div className="p-6">
+    {children}
+  </div>
+</div>
+```
+
+**Rule:** One save button at the top. Zero save buttons in the form body.
+
+---
+
+### Checklist for Adding a New Modal
+
+- [ ] `src/App.tsx`: Add primary route inside main `<Routes>`
+- [ ] `src/App.tsx`: Add secondary modal route inside the `backgroundLocation` block (with guard component)
+- [ ] `src/components/Layout.tsx`: Add `<NavLink>` with `state.backgroundLocation`
+- [ ] `src/components/mobile/MobileLayout.tsx`: Add `<NavLink>` with `state.backgroundLocation`
+- [ ] `src/pages/YourPage.tsx`: Detect `isModal`, build content variable, return overlay when `isModal`
+- [ ] `src/pages/YourPage.tsx`: Implement `closeModal` with `navigate(-1)` + Escape key handler
+- [ ] Choose appropriate `max-w-*` and `h-[...]` Tailwind classes for the modal's size
+- [ ] Sticky save button at top of modal (only save button on the page)
+- [ ] Remove any duplicate save/submit buttons from the modal body
+- [ ] (Optional) `src/lib/routePreload.ts`: Add preload helper
diff --git a/AGENTS__1.md b/AGENTS__1.md
new file mode 100644
index 0000000..e7f88ec
--- /dev/null
+++ b/AGENTS__1.md
@@ -0,0 +1,66 @@
+# AGENTS
+## # SPQ-v2 Core Directive & Roadmap Execution
+
+**System Role:** You are an elite, professional Web Designer and Full-Stack Developer strictly dedicated to the `spq-v2` codebase. You write clean, production-ready React/Vite and PocketBase code. 
+
+
+
+**Your Execution Directives:**
+
+1. **Strict Roadmap Adherence:** You must ONLY focus on the objectives outlined in the located at Websites\ShopProQuote.backup-20260626-2058\spq-v2\docs  `shopproquote-evaluation-recommendations.md`  document. Do not invent new features or refactor code outside of the explicit priorities listed in this roadmap.
+2. **Task Selection:** Review the roadmap and consult your Think Tank to select the *single most impactful next item* to implement. Start strictly with "Priority 1 — Trust & Professionalism" (e.g., removing developer-facing PocketBase setup banners, generic error messages, and emojis) before moving to subsequent phases.
+3. **Implementation:** Execute the code changes for the selected item. Ensure the UI feels like a professional automotive service application, not a generic SaaS template.
+4. **Completion Memo (Required):** Once the implementation is successful, you MUST update the `shopproquote-evaluation-recommendations.md` file. Append a new section at the bottom titled `## Execution Memo: [Date] - [Feature Name]`. In this memo, state:
+    * What was completed.
+    * Which roadmap priority it resolved.
+    * A brief note on how the Think Tank evaluated its benefit to the target audience.
+
+**To begin your session:** Output a brief summary of the Think Tank's consensus on the *next immediate task* to tackle from the roadmap, and then proceed with the code implementation.
+
+## Verify Changes
+- `npm run build` is the closest thing to typecheck here. It runs `tsc -b && vite build`.
+- `npm run test` runs the full Vitest suite.
+- Run a focused test with `npx vitest run "src/store/__tests__/quote.test.ts"`.
+- `npm run lint` uses `oxlint`. As of now it reports 2 existing warnings in `src/components/ui/Toast.tsx` and `src/pages/Settings.tsx`; do not treat those as new regressions unless you touched them.
+
+## Permissions
+-  Do not make drastic changes without confirming with me first - such as deleting a whole settings modal 
+-  Do not make any changes to PocketBase without confirming with me and explaning exactly what changes would be made
+-  Do not change or reset any type of passwords without my explicit permission - always ask
+-  If I am asking you to do something that compromises my home server security please explain and ask for permission
+
+
+## App Shape
+- This is a single Vite + React app, not a monorepo. App entrypoints are `src/main.tsx` and `src/App.tsx`.
+- Top-level pages are lazy-loaded in `src/App.tsx`. If you add a new page/route, wire it there.
+- Shared app shell is `src/components/Layout.tsx`; settings has special modal/background-route behavior plus preload via `src/lib/routePreload.ts`.
+
+## Runtime / Backend Quirks
+- PocketBase is accessed only from the frontend. Central client/auth helpers live in `src/lib/pocketbase.ts`.
+- Prefer `useIsLoggedIn()` / `useAuth()` for reactive auth state. Do not read `pb.authStore.isValid` directly in render paths you expect to update live.
+- Dev proxy assumptions are in `vite.config.ts`:
+  - `/pb` proxies to `http://127.0.0.1:8091`
+  - `/deepseek` proxies to `https://localhost`
+- `vite.config.ts` excludes `pocketbase` from `optimizeDeps`; do not remove that casually.
+-Do not open this file without Explicitly asking for my permission before using this -- PocketBase login info is at /tmp/opencode/pb-admin.txt 
+
+## Data Model Gotchas
+- `services` catalog records are consumed by `QuoteGenerator` as flat-price items. Keep `price` populated even when UI adds richer pricing inputs.
+- Catalog description fields are inconsistent across the app: `ServiceCatalog` reads `explanation || description`, while quote flows read `explanation`. Preserve compatibility when changing service description writes.
+- User-owned PocketBase collections are expected to be scoped by `userId = @request.auth.id` per `pb_migrations/1739999000004_user_scoped_api_rules.js`. Keep new collection fields and queries compatible with that model.
+- Quote ↔ RO links are plain text IDs, not PocketBase relation fields, by design. See `pb_migrations/1739999000006_quote_ro_link.js`.
+
+## Shared State / Local Storage
+- Quote draft state is persisted in Zustand under the `spq-quote` key in `src/store/quote.ts`. Be careful changing store shape because old local data will be rehydrated.
+- Shop defaults belong in `src/lib/settings.ts`. Reuse `loadSettings()` / `saveSettings()` instead of duplicating fallback values in pages.
+- Dark mode and some UI preferences also live in localStorage; search before introducing new keys.
+
+## Repair Order Conventions
+- RO totals should go through `src/lib/totals.ts`.
+- Some RO progress/audit features intentionally avoid PocketBase schema changes:
+  - service sub-status lives on the `ROService` JSON shape in `src/types.ts`
+  - RO event history is stored in the `financial` JSON blob, not a separate collection
+
+## Tests
+- Vitest runs in `jsdom` with setup from `src/test/setup.ts`.
+- Existing tests are lightweight unit tests under `src/store/__tests__` and `src/lib/__tests__`; there is no broader integration-test harness or CI config in this repo.
diff --git a/Quote_1.pdf b/Quote_1.pdf
new file mode 100755
index 0000000..ad8cd05
Binary files /dev/null and b/Quote_1.pdf differ
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..d6af7e3
--- /dev/null
+++ b/README.md
@@ -0,0 +1,32 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some Oxlint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
+
+## React Compiler
+
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+
+## Expanding the Oxlint configuration
+
+If you are developing a production application, we recommend enabling type-aware lint rules by installing `oxlint-tsgolint` and editing `.oxlintrc.json`:
+
+```json
+{
+  "$schema": "./node_modules/oxlint/configuration_schema.json",
+  "plugins": ["react", "typescript", "oxc"],
+  "options": {
+    "typeAware": true
+  },
+  "rules": {
+    "react/rules-of-hooks": "error",
+    "react/only-export-components": ["warn", { "allowConstantExport": true }]
+  }
+}
+```
+
+See the [Oxlint rules documentation](https://oxc.rs/docs/guide/usage/linter/rules) for the full list of rules and categories.
diff --git a/docs/POCKETBASE_MIGRATIONS.md b/docs/POCKETBASE_MIGRATIONS.md
new file mode 100644
index 0000000..17f10a7
--- /dev/null
+++ b/docs/POCKETBASE_MIGRATIONS.md
@@ -0,0 +1,215 @@
+# PocketBase Schema Migrations
+
+These changes are recommended by the spq-v2 code review (2026-06-30). They
+**alter the live database** and so must be applied to your **separate
+PocketBase install** (PocketBase does not live inside this repo).
+
+## Two ways to apply
+
+### Option A — Runnable JS migrations (recommended)
+Drop-in `.js` files are included in [`../pb_migrations/`](../pb_migrations/).
+Copy that entire folder into your PocketBase install's `pb_migrations/`
+directory and run:
+
+```bash
+# from your PocketBase install directory
+./pocketbase migrate
+./pocketbase migrate up            # apply pending migrations
+./pocketbase migrate collections   # re-sync collection schema
+```
+
+Files (apply in filename order):
+
+| File | What |
+|------|------|
+| `1739999000001_add_customerType_to_repairOrders.js` | M1 — `customerType` text column + backfill from `financial` blob |
+| `1739999000002_add_estimatedDuration_to_repairOrders.js` | M2 — `estimatedDuration` (integer minutes) + backfill from `estimatedTime` |
+| `1739999000003_promote_financial_fields.js` | M3 — `grossTotal` / `grossCost` / `warrTotal` / `warrCost` / `shopCharge` numeric columns + backfill |
+| `1739999000004_user_scoped_api_rules.js` | M4 — per-user-scope List/View/Create/Update/Delete rules on all user-collections (security) |
+| `1739999000005_unique_roNumber.js` | M5 — unique index on `repairOrders.roNumber` (server-side collision guard) |
+| `1739999000006_quote_ro_link_columns.js` | M6 — `quotes.repairOrderId` + `repairOrders.quoteId` link columns (bidirectional RO↔Quote back-links) |
+
+Each migration is **idempotent** (safe to re-run) and includes an `up` and
+`down` hook so `./pocketbase migrate down` cleanly reverses it.
+
+### Option B — Manual via admin UI
+The next sections spell out each change for the admin UI. Use these if you
+prefer clicking through PocketBase Admin → Collections → ⚙.
+
+---
+
+## What the migrations do
+these columns are absent, but promoting them unlocks correct persistence,
+queryable aggregation, and atomic updates.
+
+Apply each change in the **PocketBase Admin → Collections → repairOrders → Edit
+collection** UI. After adding a field, backfill existing rows as noted.
+
+---
+
+## M1 — `customerType` (promote from `financial` JSON blob)
+
+**Today**: `customerType` lives only inside the stringified `financial` JSON
+blob. The frontend synthesizes it on read (`RepairOrders.fetchOrders`), which
+breaks whenever the blob is corrupt or missing.
+
+**Add field**:
+- Name: `customerType`
+- Type: `Text`
+- Options: `Pattern` (optional) — restrict to `waiter|drop-off`
+
+**Backfill** (run once in Admin → Collections → repairOrders → run a small
+script, or use the API):
+
+```js
+// Node script — run against your PocketBase instance
+import PocketBase from 'pocketbase';
+const pb = new PocketBase('http://localhost:8091');
+await pb.admins.authWithPassword('admin@example.com', 'PASSWORD');
+
+const all = await pb.collection('repairOrders').getFullList({ batch: 500 });
+for (const ro of all) {
+  let fin = {};
+  try { fin = typeof ro.financial === 'string' ? JSON.parse(ro.financial) : (ro.financial || {}); } catch {}
+  const ct = fin.customerType === 'waiter' ? 'waiter' : 'drop-off';
+  await pb.collection('repairOrders').update(ro.id, { customerType: ct });
+}
+```
+
+After backfill, the redundant read/merge logic in
+`RepairOrders.fetchOrders` (lines ~1779-1787) and `handleToggleCustomerType`'s
+"persist into financial blob" path (~1842-1856) can be simplified to plain
+column updates. Leaving them as-is is safe — they will simply keep the blob in
+sync, which is harmless. **A future cleanup PR can remove the blob round-trip
+once the column is confirmed populated.**
+
+---
+
+## M2 — `estimatedDuration` (integer minutes; fixes lossy round-trip)
+
+**Today**: stored as `estimatedTime` (hours string, e.g. `"0.3"`), converted
+back to minutes via `Math.round(hours * 60)` on read. 15 min → "0.3" → 18 min
+on every reload, drifting the due time.
+
+**Add field**:
+- Name: `estimatedDuration`
+- Type: `Number`
+- Options: `Min`: 0, `Max`: empty (or 10080 = 7 days)
+
+**Backfill**:
+
+```js
+const all = await pb.collection('repairOrders').getFullList({ batch: 500 });
+for (const ro of all) {
+  if (ro.estimatedDuration != null && ro.estimatedDuration !== '') continue;
+  const hours = parseFloat(ro.estimatedTime || '0') || 0;
+  await pb.collection('repairOrders').update(ro.id, {
+    estimatedDuration: Math.round(hours * 60),
+  });
+}
+```
+
+**Frontend follow-up** (NOT yet applied — pending this migration): switch
+`RepairOrders.fetchOrders`, `handleSave`, and `handleAddTime` to read/write
+`estimatedDuration` directly and drop the `/ 60` ↔ `* 60` conversions. Until
+then the current code keeps writing `estimatedTime` and synthesizing
+`estimatedDuration` on read, so no data is lost.
+
+---
+
+## M3 — Promote financial fields out of the `financial` JSON blob
+
+**Today**: `grossTotal`, `grossCost`, `warrTotal`, `warrCost`, `shopCharge`,
+and `satisfaction` are partly real columns (`satisfaction` already is) and
+partly loose JSON keys inside `financial`. The `FinancialDashboard` therefore
+must load **every** completed RO to the client to aggregate — it cannot run a
+server-side `sum()` over a JSON blob.
+
+**Add fields** (all type `Number`, min 0):
+- `grossTotal`, `grossCost`
+- `warrTotal`, `warrCost`
+- `shopCharge`  *(this overlaps conceptually with the existing `shopCharges`
+  column — confirm which one the dashboard should sum and consolidate)*
+
+**Backfill**:
+
+```js
+const all = await pb.collection('repairOrders').getFullList({ batch: 500 });
+for (const ro of all) {
+  let fin = {};
+  try { fin = typeof ro.financial === 'string' ? JSON.parse(ro.financial) : (ro.financial || {}); } catch {}
+  const patch = {
+    grossTotal: Number(fin.grossTotal) || 0,
+    grossCost:  Number(fin.grossCost)  || 0,
+    warrTotal:  Number(fin.warrTotal)  || 0,
+    warrCost:   Number(fin.warrCost)   || 0,
+    shopCharge: Number(fin.shopCharge) || 0,
+  };
+  await pb.collection('repairOrders').update(ro.id, patch);
+}
+```
+
+**Frontend follow-up**: after this migration, `ExpandedDetail.saveFinField`
+should write directly to the typed columns (and can stop stringifying the
+blob), and `FinancialDashboard` can issue a single `getFullList` with
+`fields` projection + client-side sum, or better, a server-side aggregation
+via PocketBase's `aggregate` API (0.20+) for monthly revenue/costs. This
+collapses thousands of records to one request.
+
+---
+
+## M4 — API Rules (security gate — apply even if you skip everything else)
+
+Each user-scoped collection (`quotes`, `repairOrders`, `invoices`,
+`appointments`, `customers`, `services`, `settings`) MUST have API rules that
+scope every record to the authenticated owner. Without these, any logged-in
+user can read/write every other shop's data by passing a different `userId`
+field in the request body.
+
+For each collection, in **Admin → Collections → ⚙ → API Rules**:
+
+| Action | Rule |
+|--------|------|
+| List / View | `userId = @request.auth.id` |
+| Create | `userId = @request.auth.id` |
+| Update | `userId = @request.auth.id` |
+| Delete | `userId = @request.auth.id` |
+
+The `users` collection itself should restrict List/View to admins only.
+
+Verify with two test users — user A must NOT be able to `getOne(<B's record id>)`.
+
+---
+
+## M6 — Quote ↔ Repair Order link columns (bidirectional back-links)
+
+**Today**: RO→Quote and Quote→RO conversions stamp each other's record IDs
+client-side, but there are no backing columns — the links are invisible to
+queries and break if a record is re-imported.
+
+**Add fields**:
+- On `quotes`: `repairOrderId` — type `Text`, optional. Stores the RO id that
+  originated this quote (set when the user clicks "Generate Quote" on an RO).
+- On `repairOrders`: `quoteId` — type `Text`, optional. Stores the quote id that
+  was converted into this RO (set when the user clicks "Convert to RO" on a
+  quote).
+
+No backfill needed — existing records simply have empty values.
+
+**Frontend follow-up**: after M6 is applied, the `handleConvertQuoteToRO` and
+`onGenerateQuote` handlers can stop encoding the link in the `notes` field and
+use the real columns instead.
+
+---
+
+## Applying & verifying
+
+1. **Backup first**: `./pocketbase backup create` (or copy the SQLite file).
+2. Run **Option A** migrations in order, OR apply M4 (rules) manually first
+   — it has zero data migration and closes the cross-tenant hole.
+3. Apply M1 → M2 → M3 → M5 → M6 in filename order (the JS files handle backfill
+   inside their `up` hooks).
+4. After each migration, reload the spq-v2 app and confirm the corresponding
+   screen still renders existing data correctly.
+5. Once M1 + M2 are confirmed in production, open a follow-up issue to clean
+   up the now-redundant frontend compatibility code (noted inline above).
\ No newline at end of file
diff --git a/docs/shopproquote-evaluation-recommendations.md b/docs/shopproquote-evaluation-recommendations.md
new file mode 100644
index 0000000..3691385
--- /dev/null
+++ b/docs/shopproquote-evaluation-recommendations.md
@@ -0,0 +1,370 @@
+# ShopProQuote — Product Evaluation & Recommendations
+
+_Generated: 2026-07-04 · Based on full codebase review of `spq-v2`_
+
+---
+
+## 1. Current Product State Summary
+
+The app is a **single authenticated React/Vite + PocketBase application** originally designed as a quote generator for an auto repair shop. It has expanded well beyond quotes into operational tools:
+
+- Quotes (generate, save, print, PDF, export as images, AI explanations, priority analysis, AI service suggestions)
+- Service Catalog (reusable services with pricing, categories, toggle active/inactive)
+- Customers (records, vehicles, linked RO/quote history)
+- Repair Orders (full lifecycle: write-up → active → in-progress → waiting parts → waiting pickup → completed → final close; time tracking, clock, audit timeline, financial summary, tech clock, void/unvoid, promised time overrides)
+- Appointments (schedule, check-in → create RO, status changes, scan/screenshot OCR extraction)
+- Invoices (create, edit, print, generate from RO)
+- Financial Dashboard (revenue, costs, profit, customer LTV, warranty analysis, monthly trends)
+- Settings (8 tabs: account, business info, advisors, tax/fees, quote defaults, PDF/branding, business ops, notifications)
+- PDF generation (both quote PDF and RO work-order PDF, branded with logo, accent color, rich-text footer/payment terms)
+- AI integration (DeepSeek for explanations, priority analysis, catalog descriptions, OCR for screenshots)
+
+**Backend**: PocketBase (self-hosted), user-scoped collections, real-time subscriptions, local-only auth.
+
+---
+
+## 2. What Already Fits the Target Audience Well
+
+The product already covers the core workflows that advisors, home mechanics, and mobile mechanics need:
+
+| Feature | Value to Target Users |
+|---|---|
+| Quote generator | Core service — all users need professional quotes |
+| Service catalog | Advisors and mechanics build reusable price lists |
+| Professional PDF quotes | Customer-facing output with logo, branding, pricing, disclaimers |
+| Customer records | Repeat business tracking |
+| Repair order lifecycle | Full shop workflow — works for advisors and mechanics |
+| Appointment scheduling | Essential for scheduling mobile/home visits |
+| AI-written explanations | Saves time, sounds professional |
+| Discount, tax, shop charge | Handles real pricing complexity |
+| Phone formatting, VIN notes | Automotive-specific touches |
+| PDF export + print + image export | Flexible customer delivery |
+| RO → Quote conversion | One job produces both an RO and a customer quote |
+| App → RO check-in | Office workflow for physical shops |
+
+---
+
+## 3. What Hurts Professionalism (Fix Immediately)
+
+These issues make the app feel like a development project rather than a polished product:
+
+### 3.1 Developer-Facing Messages Visible to Users
+
+The most damaging issue. Multiple screens show messages like:
+
+- `SetupBanner.tsx`: "Collection Not Found" with a hardcoded admin URL `http://192.168.50.98:8091/_/`
+- `Appointments.tsx`: Raw error text about creating PocketBase collections with field types
+- `Customers.tsx`, `RepairOrders.tsx`, `Invoices.tsx`, `FinancialDashboard.tsx`: Similar raw setup messages
+- `Unknown error` and `Something went wrong` patterns in toast messages
+
+**Fix**: Replace every instance with user-friendly setup prompts or internal-only logs. A first-run setup screen should replace all of these.
+
+### 3.2 Generic Error Handling
+
+`"Something went wrong"` and `"Unknown error"` appear in error states. This erodes trust. Every error path should show a useful message.
+
+### 3.3 Generic SaaS Visual Identity
+
+- Green/gray Tailwind defaults → looks like every other admin panel
+- No automotive or service-industry visual cues
+- No distinctive typography, iconography, or brand personality
+
+### 3.4 Emojis in UI Buttons and Status Labels
+
+Emojis appear in buttons like `🔧 Labor Only`, `✅ In Stock`, `⚠️ Need Order`, `💡 Aftermarket`, and `🔧 Tech Notes (Internal)`. This reads as casual or unpolished. Replace with text labels or subtle icons.
+
+### 3.5 Product Name and Tagline Are Too Narrow
+
+- The app is called **ShopProQuote** but it does far more than quotes
+- Login screen says: `"Sign in to manage your quotes"` — this is misleading for RO, invoices, appointments, etc.
+- The product scope has outgrown the name
+
+### 3.6 Empty State Language Is Too Casual
+
+`"Start building your customer database! Add your first customer to get started."` — better to sound professional and specific.
+
+### 3.7 No Onboarding / First-Run Setup
+
+When a new user signs up, they see empty screens and PocketBase errors. There is no guided setup: business name, logo, tax rate, shop charge, labor rate, quote terms, etc.
+
+---
+
+## 4. Missing Features for Advisors, Home Mechanics, and Mobile Mechanics
+
+### 4.1 Customer Authorization / Signature (High Priority)
+
+- Quoted services need a clear **customer authorized** state
+- Authorization should include: customer name, timestamp, method (in-person/phone/email/text/signature)
+- Declined services should have customer acknowledgment
+- **Why**: In auto repair, verbal authorization is common but documentation is critical for liability protection
+
+### 4.2 Customer-Facing Quote Approval Flow (High Priority)
+
+- Currently quotes exist as PDF downloads only
+- There is no way to:
+  - Send a link to a customer for review
+  - Let customers approve/decline services online
+  - Track when a customer viewed the quote
+- **Why**: Mobile and home mechanics need quick customer approval without printing
+
+### 4.3 Service Location / Mobile Job Fields (High Priority)
+
+- No address for mobile/home service jobs
+- No travel fee or diagnostic fee
+- No arrival window or estimated travel time
+- No "shop", "mobile", "roadside" service type
+- **Why**: This is the defining difference between shop software and mobile mechanic software
+
+### 4.4 Photo Attachments (High Priority)
+
+- No ability to attach photos to customers, quotes, repair orders, or services
+- No before/after photos
+- No inspection evidence (leaks, tire wear, brake thickness, damage)
+- **Why**: Photos are standard in professional auto repair estimates and documentation
+
+### 4.5 Payment / Deposit Tracking (High Priority)
+
+- Invoices exist, but:
+  - No payment method tracking (cash, card, Zelle, PayPal, etc.)
+  - No deposit/partial payment tracking
+  - No "paid" vs "unpaid" vs "partial" states on quotes or ROs
+  - No payment receipt generation
+- **Why**: Mobile and home mechanics often collect payment on completion or require deposits
+
+### 4.6 Customer Communication Log (Medium Priority)
+
+- SMS/email buttons exist in RO details but there is no unified log
+- No communication history tied to customer or RO
+- No sent quote tracking, customer response tracking
+- **Why**: Professional service records include customer communication
+
+### 4.7 Legal / Professional Terms (Medium Priority)
+
+No built-in support for:
+
+- Warranty disclaimer text on quotes
+- Diagnostic fee disclosure
+- Storage fee / lien notice
+- Declined-work disclaimer
+- Authorization for test drive, additional work, parts ordering
+- Mobile service terms (access to property, weather, etc.)
+
+### 4.8 Parts Tracking (Medium Priority)
+
+Current parts status is basic toggles (in stock, need order, aftermarket). Missing:
+
+- Part numbers
+- Supplier / vendor
+- Cost price vs sell price
+- Core charge tracking
+- Ordered date and ETA
+- Received status
+
+### 4.9 Data Export / Backup (Medium Priority)
+
+- No CSV/JSON export for customers, quotes, ROs
+- No PDF archive option
+- **Why**: Professionals need to own their data
+
+### 4.10 Route / Calendar Integration (Lower Priority)
+
+- No Google Calendar, iCal, or ICS export for appointments
+- No route/map link for mobile service addresses
+
+---
+
+## 5. What May Not Fit (Consider Dual Mode)
+
+### 5.1 "Service Advisor" Language Is Shop-Centric
+
+- Advisors, waiters, drop-offs → these terms fit a dealership or shop
+- **Mobile mechanic** does not have an "advisor"; they are the technician
+- **Solution**: Make the role label configurable in settings or detect business type
+
+### 5.2 Financial Dashboard May Be Overwhelming for Solo Users
+
+- Customer LTV, warranty GP split, cost breakdown — valuable for a shop owner
+- Solo mechanics may find this noisy until they grow
+- **Solution**: Show simplified dashboard by default for non-admin users; hide until needed
+
+### 5.3 Waiter / Drop-Off Model Does Not Fit Mobile
+
+- Mobile mechanics need: `on-site`, `driveway`, `shop`, `roadside`, `mobile visit`
+- **Solution**: Business type toggle → mobile mode replaces waiter/drop-off with location/time-based fields
+
+---
+
+## 6. Recommended Product Direction
+
+### 6.1 Positioning
+
+```
+Professional repair quotes, approvals, and tracking
+for shops, advisors, and mobile mechanics.
+```
+
+### 6.2 Dual Operating Mode
+
+| Feature | Shop / Advisor Mode | Mobile Mechanic Mode |
+|---|---|---|
+| Customer type | Waiter / Drop-off | On-site / Mobile / Drop-off |
+| Service location | Shop address | Per-job address |
+| Travel fee | Disabled | Configurable fee + mileage |
+| Advisor field | Service Advisor (configurable) | Technician / Self |
+| RO board | Active / All / Completed | Same but simplified |
+| Photos | Optional | Core feature |
+| Payment | At counter | At job site + deposit |
+| Arrival window | Not needed | Estimated arrival window |
+
+---
+
+## 7. Highest-Priority Changes (Ordered by Impact)
+
+### Priority 1 — Trust & Professionalism
+
+1. Remove every developer-facing message (PocketBase collection errors, admin URLs, field type instructions)
+2. Replace `"Something went wrong"` and `"Unknown error"` with helpful, specific messages
+3. Replace emojis in buttons/status with text or subtle icons
+4. Add first-run onboarding: business type, business name, logo, contact, tax rate, labor rate, shop charge, quote terms, payment terms
+5. Improve empty state messaging to sound professional and product-ready
+
+### Priority 2 — Mobile Mechanic Foundation
+
+6. Add service address field to ROs and appointments
+7. Add travel fee, diagnostic fee, and mileage tracking
+8. Add mobile vs shop service type flag
+9. Add arrival window / estimated travel time to appointments
+
+### Priority 3 — Customer Trust & Approval
+
+10. Add customer authorization state (name + timestamp + method)
+11. Add customer-facing quote approval flow (link or secure page)
+12. Add photo attachment to quotes, ROs, and inspections
+
+### Priority 4 — Payments & Financial
+
+13. Add deposit tracking on quotes and ROs
+14. Add payment method and payment status
+15. Add basic payment receipt
+
+### Priority 5 — Polish
+
+16. Make advisor/technician label configurable
+17. Add CSV export for customers, quotes, and ROs
+18. Add legal disclaimer placeholders (warranty, fee disclosure, authorization)
+19. Refine visual identity toward automotive/service-industry feel
+20. Consider product name expansion or tagline update
+
+---
+
+## 8. Suggested Implementation Plan
+
+### Phase 1: Production Proofing (1-2 weeks)
+
+- Replace all `SetupBanner` and collection-not-found errors with onboarding flow
+- Rewrite error handling across all pages
+- Remove emojis from operational UI
+- Improve empty states and error states
+- Add first-run setup wizard (business profile)
+
+### Phase 2: Mobile Mechanic Mode (2-3 weeks)
+
+- Add service location, travel fee, diagnostic fee, mileage fields
+- Add mobile/shop service type toggle to ROs and appointments
+- Create configurable role labels (advisor → technician or self)
+- Add arrival window to appointments
+
+### Phase 3: Customer Approval & Photos (2-3 weeks)
+
+- Build customer authorization state
+- Build customer-facing quote approval page/link
+- Add photo upload to customers, quotes, ROs
+- Add photo gallery to RO details
+
+### Phase 4: Payments & Polish (2-3 weeks)
+
+- Add deposit tracking
+- Add payment method and status
+- Add receipt generation
+- Add CSV export
+- Add legal disclaimer settings
+- Visual identity refinement
+
+---
+
+## 9. What NOT to Build Next
+
+- Do not add more internal dashboards or financial reports (already sufficient)
+- Do not add multi-tenant/team features (out of scope)
+- Do not add real-time chat or elaborate notification systems
+- Do not add inventory management or full parts ordering
+- Do not rebuild the existing workflows — polish what works
+
+The app already has strong internal tools. The next investment should be **customer-facing trust**: approvals, photos, mobile jobs, payments, and professional polish.
+
+## Execution Memo: 2026-07-05 - Customer-Facing Quote Approval Flow
+
+- Completed: Built a full public customer-facing quote review and approval flow. Created `src/pages/QuoteApprove.tsx` — a standalone branded page that loads a quote via a secure share token (no login required), displays services with individual Approve/Decline buttons, shows a pricing summary, and records customer decisions back to the quote record. Added `shareToken` field to the quotes PocketBase collection via `pb_migrations/1739999000007_quote_share_token.js` with relaxed view/update rules that allow public access only when the token matches. Added a "Share with Customer" button to the QuoteGenerator sidebar that generates a random UUID token, saves it to the quote, and copies the approval URL to the clipboard. The `authorizedMethod` type now includes `'online'` for decisions made through this flow. Registered the `/quote/approve?token=xxx` route as a public route in `src/App.tsx`.
+- Resolved roadmap priority: Priority 3 — Customer Trust & Approval, item 11 by giving shop owners a frictionless way to send quotes to customers for online review and approval without printing or requiring customer accounts.
+- Think Tank benefit: The mobile mechanic gained instant on-site customer approvals without printing or face-to-face pressure, the service advisor gained documented online authorization trails that protect against disputes, and the home mechanic gained a simple way to share cost estimates with family members for collaborative decision-making.
+
+## Execution Memo: 2026-07-05 - Login Scope Copy Update
+
+- Completed: Updated the login screen tagline from `Sign in to manage your quotes` to `Sign in to manage your shop` in `src/pages/Login.tsx`.
+- Resolved roadmap priority: Priority 1 - Trust & Professionalism, item 1 and item 20 by removing a narrow quotes-only message that no longer reflects the product's broader workflow coverage.
+- Think Tank benefit: The service advisor valued the more credible shop-wide positioning, the mobile mechanic valued that the app no longer reads like a quotes-only tool in front of customers, and the home mechanic valued the clearer description of the product's actual scope.
+
+## Execution Memo: 2026-07-05 - Operational UI Emoji Removal
+
+- Completed: Removed emoji-based labels from the quote workflow controls and status text in `src/pages/QuoteGenerator.tsx`, and removed the emoji badge text from the theme mode indicator in `src/pages/Settings.tsx`.
+- Resolved roadmap priority: Priority 1 - Trust & Professionalism, item 3 by replacing casual emoji-driven labels with cleaner professional copy while preserving existing workflows and visual states.
+- Think Tank benefit: The service advisor saw a more credible customer-facing presentation, the mobile mechanic saw less distracting UI in fast job-site workflows, and the home mechanic saw a more polished tool that reads like professional repair software instead of a casual app.
+
+## Execution Memo: 2026-07-05 - Setup State Professionalization
+
+- Completed: Replaced the remaining generic setup blockers in `src/components/SetupBanner.tsx`, `src/pages/Invoices.tsx`, `src/pages/FinancialDashboard.tsx`, and `src/pages/Settings.tsx` with workflow-specific professional messaging, and replaced the vague verification fallback copy in `src/pages/Verify.tsx` with actionable guidance.
+- Resolved roadmap priority: Priority 1 - Trust & Professionalism, item 1 and item 2 by removing the last generic setup-facing UI language and improving a remaining non-specific error state.
+- Think Tank benefit: The service advisor valued clearer customer-ready document setup guidance, the mobile mechanic benefited from less confusing blocked-state messaging during active workflows, and the home mechanic benefited from more direct instructions that explain what to do next without exposing internal implementation details.
+
+## Execution Memo: 2026-07-05 - Empty State Copy Refresh
+
+- Completed: Rewrote customer-facing empty and search-empty messaging in `src/pages/Customers.tsx`, `src/pages/Appointments.tsx`, `src/pages/RepairOrders.tsx`, `src/pages/FinancialDashboard.tsx`, `src/pages/Invoices.tsx`, `src/pages/Settings.tsx`, `src/pages/ServiceCatalog.tsx`, and `src/pages/QuoteGenerator.tsx` so each state explains the workflow purpose and next step more professionally.
+- Resolved roadmap priority: Priority 1 - Trust & Professionalism, item 5 by replacing casual or sparse no-data language with clearer production-ready guidance across core workflows.
+- Think Tank benefit: The service advisor valued cleaner customer-record and invoice messaging, the mobile mechanic benefited from clearer scheduling and quote guidance during day-to-day use, and the home mechanic benefited from empty states that explain what each tool is for without sounding like unfinished software.
+
+## Execution Memo: 2026-07-05 - Appointment And RO Service Address Support
+
+- Completed: Added service-address capture to the standard appointment create/edit flow in `src/pages/Appointments.tsx`, preserved appointment service locations through structured note serialization for schema compatibility, and surfaced service locations in appointment and repair-order search and list views in `src/pages/Appointments.tsx`, `src/pages/RepairOrders.tsx`, and `src/components/ROForm.tsx`.
+- Resolved roadmap priority: Priority 2 - Mobile Mechanic Foundation, item 6 by carrying service-address information through appointments and repair orders without requiring PocketBase schema changes.
+- Think Tank benefit: The service advisor valued clearer job-site context when preparing work, the mobile mechanic gained a practical on-site address workflow for scheduling and RO handoff, and the home mechanic benefited from being able to record where the work will happen without burying it in general notes.
+
+## Execution Memo: 2026-07-05 - Trip Mileage & Diagnostic Fee Tracking
+
+- Completed: Added `tripMiles` as a first-class concept for mobile mechanic tax-mileage tracking across appointments, repair orders, and PDF documents. Wired through appointment create/edit/check-in flows, RO form create/edit, RO list/row visibility, RO details panel, RO PDF info and totals sections, and appointment card display. Diagnostic fee already existed as the travel-fee field with proper "Travel / Diagnostic Fee" labeling in the UI and settings.
+- Resolved roadmap priority: Priority 2 - Mobile Mechanic Foundation, item 7 by making trip mileage and diagnostic/travel fee first-class workflow fields that flow from appointment scheduling through to the tax-ready RO PDF.
+- Think Tank benefit: The mobile mechanic gained a practical tax-mileage log that records trip distance per service call and prints on PDFs for deduction records, the service advisor gained trip-distance visibility on RO lists, and the home mechanic benefited from coordinated trip tracking without manual note-keeping.
+
+## Execution Memo: 2026-07-05 - Arrival Window For Appointments
+
+- Completed: Added `arrivalWindowMinutes` to the appointment type, form data, note serialization, and create/edit modal UI in `src/pages/Appointments.tsx`. The arrival window appears as a time-range display on the appointment card (e.g. "8:00 AM — 10:00 AM") when set, and defaults to "Exact time" when zero. Gated behind the mobile/home business-type toggle like other location fields.
+- Resolved roadmap priority: Priority 2 - Mobile Mechanic Foundation, item 9 by adding a customer-facing arrival-window concept that tells the customer when to expect the mechanic without pinning it to an exact minute.
+- Think Tank benefit: The mobile mechanic valued being able to provide a realistic time range to customers instead of a hard-to-keep exact time, the service advisor benefited from cleaner schedule presentation when communicating with waiting customers, and the home mechanic benefited from a simpler visual schedule layout.
+
+## Execution Memo: 2026-07-05 - Customer Authorization State
+
+- Completed: Added authorization metadata fields (`authorizedBy`, `authorizedAt`, `authorizedMethod`) to the `QuoteService` type in `src/types.ts`. Updated the Zustand quote store (`src/store/quote.ts`) so `toggleApproved` and `toggleDeclined` automatically populate authorization with customer name, current timestamp, and default method ("In Person"), and clear authorization when reverting to pending. Enhanced the QuoteGenerator expanded service row (`src/pages/QuoteGenerator.tsx`) with an inline authorization panel (authorized-by input, method dropdown with in_person/phone/email/text/signature options, and a formatted timestamp) that appears when a service is approved or declined. Updated the quote PDF generator (`src/lib/pdf.ts`) to render the authorization method and authorized-by name as a sub-line beneath the approval/decline badge on each service.
+- Resolved roadmap priority: Priority 3 - Customer Trust & Approval, item 10 by giving every quote service a documented authorization trail that captures who approved or declined, when, and through which method.
+- Think Tank benefit: The service advisor valued the liability protection of timestamped customer authorization records printed on customer-facing documents, the mobile mechanic valued frictionless on-site authorization capture via method-specific tracking, and the home mechanic valued clear decision documentation without a clunky workflow.
+
+## Execution Memo: 2026-07-05 - Public Quote Approval URL + Signature & Send Improvements
+
+- Completed: Added a full customer-facing quote approval flow via public share link. Created `pb_migrations/1739999000007_quote_share_token.js` adding a `shareToken` field and relaxed list/view/update rules on the `quotes` collection. Created `src/pages/QuoteApprove.tsx` — a branded public page at `/quote/approve?token=xxx` where customers review and approve/decline services. Added a "Share with Customer" button to the QuoteGenerator sidebar and wired the approval page URL generation. Stamped decisions with `authorizedMethod: 'online'` and added the `'online'` value to the authorizedMethod type union. Added the route as public in `src/App.tsx`.
+- Then improved the flow in a second pass: added `pb_migrations/1739999000008_quote_viewed_at.js` for first-view tracking. Rewrote the approval page to stage decisions locally, require a typed full-name signature before final submission, and submit all decisions in a single update with correct top-level status (all approved -> `approved`, all declined -> `declined`, mixed -> `sent`). Added a shared `src/lib/contactLinks.ts` helper for `mailto:`/`sms:` draft generation and refactored `RepairOrders.tsx` to use it. Added "Send Email" and "Send Text" buttons to the quote share panel that open device drafts with the approval URL embedded.
+- Resolved roadmap priority: Priority 3 - Customer Trust & Approval, item 11.
+- Think Tank benefit: The mobile mechanic can now text a live approval link from the job site and get a signed decision record, the service advisor gains a documented online authorization trail with a typed-name signature that prints on PDFs, and the home mechanic gets a simple send-via-email workflow for sharing cost estimates with family.
+
+## Execution Memo: 2026-07-05 - Role-Based Experience Roadmap
+
+- Completed: Created `Roadmap.md` with the full implementation plan for post-onboarding role-based experiences across Advisor, Technician, and Mobile Mechanic users. The plan defines role permissions, route architecture, mobile owner access, technician-safe assignment records, PocketBase schema requirements, security rules, onboarding updates, and verification steps.
+- Resolved roadmap priority: RBX architecture planning for strict Advisor, Technician, and Mobile separation while preserving Priority 1 professionalism and preparing safe implementation of future workflow phases.
+- Think Tank benefit: The service advisor gains a clear path to full desk tools and technician assignment control, the shop technician gains a protected bay-only workflow with no billing exposure, and the mobile mechanic keeps full owner-level quote, catalog, invoice, and financial access in a field-first interface.
diff --git a/docs/~$opproquote-evaluation-recommendations.md b/docs/~$opproquote-evaluation-recommendations.md
new file mode 100755
index 0000000..82efca1
Binary files /dev/null and b/docs/~$opproquote-evaluation-recommendations.md differ
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..2beb149
--- /dev/null
+++ b/index.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="theme-color" content="#16a34a" />
+    <meta name="description" content="ShopProQuote — automotive service quotes, repair orders, and shop management for service advisors and mobile mechanics." />
+    <meta property="og:title" content="ShopProQuote" />
+    <meta property="og:description" content="Automotive service quotes and shop management." />
+    <meta property="og:type" content="website" />
+    <title>ShopProQuote — Shop Management</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..39729bb
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,3474 @@
+{
+  "name": "spq-v2",
+  "version": "0.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "spq-v2",
+      "version": "0.0.0",
+      "dependencies": {
+        "@sentry/react": "^10.64.0",
+        "@tailwindcss/vite": "^4.3.1",
+        "jspdf": "^4.2.1",
+        "lucide-react": "^1.21.0",
+        "pdfjs-dist": "^6.1.200",
+        "pocketbase": "^0.27.0",
+        "react": "^19.2.7",
+        "react-dom": "^19.2.7",
+        "react-router-dom": "^7.18.0",
+        "tailwindcss": "^4.3.1",
+        "tesseract.js": "^7.0.0",
+        "zod": "^4.4.3",
+        "zustand": "^5.0.14"
+      },
+      "devDependencies": {
+        "@testing-library/jest-dom": "^6.9.1",
+        "@testing-library/react": "^16.3.2",
+        "@types/jspdf": "^2.0.0",
+        "@types/node": "^24.13.2",
+        "@types/react": "^19.2.17",
+        "@types/react-dom": "^19.2.3",
+        "@vitejs/plugin-react": "^6.0.2",
+        "jsdom": "^29.1.1",
+        "oxlint": "^1.69.0",
+        "typescript": "~6.0.2",
+        "vite": "^8.1.0",
+        "vitest": "^4.1.9"
+      }
+    },
+    "node_modules/@adobe/css-tools": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.5.0.tgz",
+      "integrity": "sha512-6OzddxPio9UiWTCemp4N8cYLV2ZN1ncRnV1cVGtve7dhPOtRkleRyx32GQCYSwDYgaHU3USMm84tNsvKzRCa1Q==",
+      "dev": true
+    },
+    "node_modules/@asamuzakjp/css-color": {
+      "version": "5.1.11",
+      "resolved": "https://registry.npmjs.org/@asamuzakjp/css-color/-/css-color-5.1.11.tgz",
+      "integrity": "sha512-KVw6qIiCTUQhByfTd78h2yD1/00waTmm9uy/R7Ck/ctUyAPj+AEDLkQIdJW0T8+qGgj3j5bpNKK7Q3G+LedJWg==",
+      "dev": true,
+      "dependencies": {
+        "@asamuzakjp/generational-cache": "^1.0.1",
+        "@csstools/css-calc": "^3.2.0",
+        "@csstools/css-color-parser": "^4.1.0",
+        "@csstools/css-parser-algorithms": "^4.0.0",
+        "@csstools/css-tokenizer": "^4.0.0"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+      }
+    },
+    "node_modules/@asamuzakjp/dom-selector": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/@asamuzakjp/dom-selector/-/dom-selector-7.1.1.tgz",
+      "integrity": "sha512-67RZDnYRc8H/8MLDgQCDE//zoqVFwajkepHZgmXrbwybzXOEwOWGPYGmALYl9J2DOLfFPPs6kKCqmbzV895hTQ==",
+      "dev": true,
+      "dependencies": {
+        "@asamuzakjp/generational-cache": "^1.0.1",
+        "@asamuzakjp/nwsapi": "^2.3.9",
+        "bidi-js": "^1.0.3",
+        "css-tree": "^3.2.1",
+        "is-potential-custom-element-name": "^1.0.1"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+      }
+    },
+    "node_modules/@asamuzakjp/generational-cache": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@asamuzakjp/generational-cache/-/generational-cache-1.0.1.tgz",
+      "integrity": "sha512-wajfB8KqzMCN2KGNFdLkReeHncd0AslUSrvHVvvYWuU8ghncRJoA50kT3zP9MVL0+9g4/67H+cdvBskj9THPzg==",
+      "dev": true,
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+      }
+    },
+    "node_modules/@asamuzakjp/nwsapi": {
+      "version": "2.3.9",
+      "resolved": "https://registry.npmjs.org/@asamuzakjp/nwsapi/-/nwsapi-2.3.9.tgz",
+      "integrity": "sha512-n8GuYSrI9bF7FFZ/SjhwevlHc8xaVlb/7HmHelnc/PZXBD2ZR49NnN9sMMuDdEGPeeRQ5d0hqlSlEpgCX3Wl0Q==",
+      "dev": true
+    },
+    "node_modules/@babel/code-frame": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.29.7.tgz",
+      "integrity": "sha512-Aup7aUOfpbAUg2ROOJN6Iw5f9DMBlzu0mIkm/malLQFN/YQgO48wCj0Kxa3sEHJvPVFg7siR+qRInwXd2qhQKw==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "@babel/helper-validator-identifier": "^7.29.7",
+        "js-tokens": "^4.0.0",
+        "picocolors": "^1.1.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-identifier": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.29.7.tgz",
+      "integrity": "sha512-qehxGkRj55h/ff8EMaJ+cYhyaKlHIxqYDn682wQD7RNp9UujOQsHog2uS0r2vzr4pW+sXf90NeeayjcNaX3fFg==",
+      "dev": true,
+      "peer": true,
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/runtime": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.29.7.tgz",
+      "integrity": "sha512-Nq8OhGWiZIZGV6hLHoyAKLLcJihP/xFeBMGJoUrxTX2psI8dCifzLhZISFb+VWS3wFMRDmCGw5R+dOySCqPLhw==",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@bramus/specificity": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/@bramus/specificity/-/specificity-2.4.2.tgz",
+      "integrity": "sha512-ctxtJ/eA+t+6q2++vj5j7FYX3nRu311q1wfYH3xjlLOsczhlhxAg2FWNUXhpGvAw3BWo1xBcvOV6/YLc2r5FJw==",
+      "dev": true,
+      "dependencies": {
+        "css-tree": "^3.0.0"
+      },
+      "bin": {
+        "specificity": "bin/cli.js"
+      }
+    },
+    "node_modules/@csstools/color-helpers": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/@csstools/color-helpers/-/color-helpers-6.1.0.tgz",
+      "integrity": "sha512-064IFJdjTfUqnjpCVpMOdbr8FLQBhinbZj6yRv2An2E41O/pLEXqfFRWqGq/SxlE5PEUYTlvWsG2r8MswAVvkg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "engines": {
+        "node": ">=20.19.0"
+      }
+    },
+    "node_modules/@csstools/css-calc": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/@csstools/css-calc/-/css-calc-3.2.1.tgz",
+      "integrity": "sha512-DtdHlgXh5ZkA43cwBcAm+huzgJiwx3ZTWVjBs94kwz2xKqSimDA3lBgCjphYgwgVUMWatSM0pDd8TILB1yrVVg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "peerDependencies": {
+        "@csstools/css-parser-algorithms": "^4.0.0",
+        "@csstools/css-tokenizer": "^4.0.0"
+      }
+    },
+    "node_modules/@csstools/css-color-parser": {
+      "version": "4.1.9",
+      "resolved": "https://registry.npmjs.org/@csstools/css-color-parser/-/css-color-parser-4.1.9.tgz",
+      "integrity": "sha512-paQcIaOO53Rk5+YrBaBjm/SgrV4INImjo2BT1DtQRYr+XeTRbeAYlS+jxXp9drqvKmtFnWRJKIalDLhZZDu42A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "dependencies": {
+        "@csstools/color-helpers": "^6.1.0",
+        "@csstools/css-calc": "^3.2.1"
+      },
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "peerDependencies": {
+        "@csstools/css-parser-algorithms": "^4.0.0",
+        "@csstools/css-tokenizer": "^4.0.0"
+      }
+    },
+    "node_modules/@csstools/css-parser-algorithms": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-4.0.0.tgz",
+      "integrity": "sha512-+B87qS7fIG3L5h3qwJ/IFbjoVoOe/bpOdh9hAjXbvx0o8ImEmUsGXN0inFOnk2ChCFgqkkGFQ+TpM5rbhkKe4w==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "peerDependencies": {
+        "@csstools/css-tokenizer": "^4.0.0"
+      }
+    },
+    "node_modules/@csstools/css-syntax-patches-for-csstree": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/@csstools/css-syntax-patches-for-csstree/-/css-syntax-patches-for-csstree-1.1.6.tgz",
+      "integrity": "sha512-TcJCWFbXLPpJYq6z7bfOyjWYJDiDg2/I4gyUC9pqPNqHFRIey0EB0q0L5cSnQDfWJg8Jd6VadakxdIez/3zkqQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "peerDependencies": {
+        "css-tree": "^3.2.1"
+      },
+      "peerDependenciesMeta": {
+        "css-tree": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@csstools/css-tokenizer": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-4.0.0.tgz",
+      "integrity": "sha512-QxULHAm7cNu72w97JUNCBFODFaXpbDg+dP8b/oWFAZ2MTRppA3U00Y2L1HqaS4J6yBqxwa/Y3nMBaxVKbB/NsA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "engines": {
+        "node": ">=20.19.0"
+      }
+    },
+    "node_modules/@emnapi/core": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.11.1.tgz",
+      "integrity": "sha512-RSvbQmHzdKzNsLYa/wHrbc3KN4sYLKAdPZxqiM2HATqv/SBk2/ENSHpvXGaLOMcsAyz0poEGqkmmKYG3OWiJEQ==",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/wasi-threads": "1.2.2",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@emnapi/runtime": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.11.1.tgz",
+      "integrity": "sha512-vgj7R3y3Wgx24IQaGPA/R6YFXLHVMOZ0uVEyIQPaWs+rd1AzfEMXlAC22FYwO1XkKR6NPsq7mUandH8oIRdZFw==",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@emnapi/wasi-threads": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.2.2.tgz",
+      "integrity": "sha512-c95qOXkHdydNKhscBTebqEC1CVAZpyqOfVfBzQ1qgzyl3gfeldUjIggDbIZgDKsHLgnsM+igH7TJ/eAasaVuMA==",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@exodus/bytes": {
+      "version": "1.15.1",
+      "resolved": "https://registry.npmjs.org/@exodus/bytes/-/bytes-1.15.1.tgz",
+      "integrity": "sha512-S6mL0yNB/Abt9Ei4tq8gDhcczc4S3+vQ4ra7vxnAf+YHC02srtqxKKZghx2Dq6p0e66THKwR6r8N6P95wEty7Q==",
+      "dev": true,
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+      },
+      "peerDependencies": {
+        "@noble/hashes": "^1.8.0 || ^2.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@noble/hashes": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.13",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
+      "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.0",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/remapping": {
+      "version": "2.3.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/remapping/-/remapping-2.3.5.tgz",
+      "integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.5.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
+      "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og=="
+    },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.31",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
+      "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
+    "node_modules/@napi-rs/canvas": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas/-/canvas-1.0.1.tgz",
+      "integrity": "sha512-mPD43G7pXbQhIGa7z4IpT/vXm1jbF8cBM1oY5UqjL8LSaTCNGhNi2Lidc/0+LwKbNiqbv/Tq0JlBRwKu+LW3iw==",
+      "optional": true,
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      },
+      "optionalDependencies": {
+        "@napi-rs/canvas-android-arm64": "1.0.1",
+        "@napi-rs/canvas-darwin-arm64": "1.0.1",
+        "@napi-rs/canvas-darwin-x64": "1.0.1",
+        "@napi-rs/canvas-linux-arm-gnueabihf": "1.0.1",
+        "@napi-rs/canvas-linux-arm64-gnu": "1.0.1",
+        "@napi-rs/canvas-linux-arm64-musl": "1.0.1",
+        "@napi-rs/canvas-linux-riscv64-gnu": "1.0.1",
+        "@napi-rs/canvas-linux-x64-gnu": "1.0.1",
+        "@napi-rs/canvas-linux-x64-musl": "1.0.1",
+        "@napi-rs/canvas-win32-arm64-msvc": "1.0.1",
+        "@napi-rs/canvas-win32-x64-msvc": "1.0.1"
+      }
+    },
+    "node_modules/@napi-rs/canvas-android-arm64": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-android-arm64/-/canvas-android-arm64-1.0.1.tgz",
+      "integrity": "sha512-d7ZCwJsgH4QNG50C7HQeVRsRG1gRDa1UeDUb1jEcqgLuiEJp6GVbGiZkFXPlmt0dEs2QHRQCPJoOv+bOkSQR/w==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      }
+    },
+    "node_modules/@napi-rs/canvas-darwin-arm64": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-darwin-arm64/-/canvas-darwin-arm64-1.0.1.tgz",
+      "integrity": "sha512-ppyVSzIHsVldc3B++mdh03ed0Q0hoVR2QDG9O/wEUR0PurJKwDEEYV87uBQDpbSumJBfLEINDndsOPzQj71qEQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      }
+    },
+    "node_modules/@napi-rs/canvas-darwin-x64": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-darwin-x64/-/canvas-darwin-x64-1.0.1.tgz",
+      "integrity": "sha512-/BlXif9VOzf/WP32g9zxl612dO0KLvwqplBFqfRcyr3PyR5fhPrilTuJxSBq3zkwCKGKy82JsoPd2JeQI/HBlA==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      }
+    },
+    "node_modules/@napi-rs/canvas-linux-arm-gnueabihf": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-arm-gnueabihf/-/canvas-linux-arm-gnueabihf-1.0.1.tgz",
+      "integrity": "sha512-JTGq93/Pje+iSNVjL+ggB0+pqEfu7nXvQGrHTvugz+Lp08wCDa5rjov4JeEljGDk16/inVBU9sp4N9f0/+o+9A==",
+      "cpu": [
+        "arm"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      }
+    },
+    "node_modules/@napi-rs/canvas-linux-arm64-gnu": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-arm64-gnu/-/canvas-linux-arm64-gnu-1.0.1.tgz",
+      "integrity": "sha512-i74zqEh5yFmYwHkszFo+4EH4l5ATD4bSlJG21iW2j5kpqiN2b0WN9SG/xdq2O60MjZK0ZLSu3a/Z3aQAsmDQ5A==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      }
+    },
+    "node_modules/@napi-rs/canvas-linux-arm64-musl": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-arm64-musl/-/canvas-linux-arm64-musl-1.0.1.tgz",
+      "integrity": "sha512-COqBxybXcKb6gNgEhjh04rPHrpsJB+n/5+p4ySPgQWl0i+xVNYHn4rvzCtUBIFqOgY6HEJ9UaP6c4W9EMwzfpQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      }
+    },
+    "node_modules/@napi-rs/canvas-linux-riscv64-gnu": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-riscv64-gnu/-/canvas-linux-riscv64-gnu-1.0.1.tgz",
+      "integrity": "sha512-1vdAZGpD85lMUo7K3qtEdoIWeMc0xcpUD5PagK3fVcMSdf8dkSL5bg/KE4Rwv5NF+PYx4plrgfn0KRMOqdKtwA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      }
+    },
+    "node_modules/@napi-rs/canvas-linux-x64-gnu": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-x64-gnu/-/canvas-linux-x64-gnu-1.0.1.tgz",
+      "integrity": "sha512-W/iC2qJZGqKKQJ0JrNo3QkhoAy/PvzlmdYLW8Yz5/L6XgT5d7t26dnqgP2rCbL58P3CbPw7ES0Rz8OG0gn7JeQ==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      }
+    },
+    "node_modules/@napi-rs/canvas-linux-x64-musl": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-x64-musl/-/canvas-linux-x64-musl-1.0.1.tgz",
+      "integrity": "sha512-a5mmIVwxF92UGUe+1c7Ap32ZRnApbRMnQC/KgYyFB0AXZShBCHVGaURq+BDkiV7jvHhVwvvAP0Q/3aWNhqgVZg==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      }
+    },
+    "node_modules/@napi-rs/canvas-win32-arm64-msvc": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-win32-arm64-msvc/-/canvas-win32-arm64-msvc-1.0.1.tgz",
+      "integrity": "sha512-rVnDhVvcXlqcHMsgnxxhZgdRkRIqVBlx+FJwSAHi4VbWWwsowvV5ldFEecEHD2+Ac/IL3fNWF/LB5CZTghNwRA==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      }
+    },
+    "node_modules/@napi-rs/canvas-win32-x64-msvc": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-win32-x64-msvc/-/canvas-win32-x64-msvc-1.0.1.tgz",
+      "integrity": "sha512-UMstkP/nZHbithgdSJv1EvYVrYhdao5B5N3szMVU2i5/b6ijMcVPXOEyrk0QXl0iPjv8Hkoow+Tap+MiOxppOQ==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      }
+    },
+    "node_modules/@napi-rs/wasm-runtime": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-1.1.6.tgz",
+      "integrity": "sha512-ZLv/JdUfkvOy9eCnnBaGfiO+XimbjebAeO+MRQqD/B+FR1tnRN0tpKSJHRbE8sFfS6aqsXZ67TQjfwfsxULVbg==",
+      "optional": true,
+      "dependencies": {
+        "@tybys/wasm-util": "^0.10.3"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      },
+      "peerDependencies": {
+        "@emnapi/core": "^1.7.1",
+        "@emnapi/runtime": "^1.7.1"
+      }
+    },
+    "node_modules/@oxc-project/types": {
+      "version": "0.137.0",
+      "resolved": "https://registry.npmjs.org/@oxc-project/types/-/types-0.137.0.tgz",
+      "integrity": "sha512-WT+Gb24i8hmvo85AIv2oEYouEXkRlKAlT9WaCa3TfLgNCN+GhrJOGZuIlMouAh38Qe4QOx26eUOVsq70qXrywA==",
+      "funding": {
+        "url": "https://github.com/sponsors/Boshen"
+      }
+    },
+    "node_modules/@oxlint/binding-android-arm-eabi": {
+      "version": "1.71.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/binding-android-arm-eabi/-/binding-android-arm-eabi-1.71.0.tgz",
+      "integrity": "sha512-ImGmd1njEg4FEJH03jhRnveEegtO3czCtfptvaHivKAZQIYATbVFBrrzbaYMYv0oJioTnxZAZVSyV+oL7W8S2g==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxlint/binding-android-arm64": {
+      "version": "1.71.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/binding-android-arm64/-/binding-android-arm64-1.71.0.tgz",
+      "integrity": "sha512-4A5BEexBrwY1YFF8Kiq/lp/wQPRG79G3BWIE1FuWaM5MvmpYSd+7ZySVcKkHdwo0UDzdQGddp6pD9mpctMqLnw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxlint/binding-darwin-arm64": {
+      "version": "1.71.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/binding-darwin-arm64/-/binding-darwin-arm64-1.71.0.tgz",
+      "integrity": "sha512-9wJA9GJulLwS2usU3CEisI/ESDO1n1z9eyTCvApMDrAkbJ1ve0mORgTMjcWWsKxkzkeZ2N/Gpra5IQE7x8tYgQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxlint/binding-darwin-x64": {
+      "version": "1.71.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/binding-darwin-x64/-/binding-darwin-x64-1.71.0.tgz",
+      "integrity": "sha512-PlLCjS06V0PeJMAJwzjrExw1sYNW9Gch3JtNlcwwZDXGlTYDuwHNN89zYH8LTXFfgkVtsYvs2nv0FqrzyuFDzg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxlint/binding-freebsd-x64": {
+      "version": "1.71.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/binding-freebsd-x64/-/binding-freebsd-x64-1.71.0.tgz",
+      "integrity": "sha512-Lhil7bWre0ncxbUoDoxfS0JzpTz17BRQKW7iwoAUY8GJ66+WwJEfYPCFJ1P0WgVZR5/O/b3Q2pENlHOjeXLOGQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxlint/binding-linux-arm-gnueabihf": {
+      "version": "1.71.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/binding-linux-arm-gnueabihf/-/binding-linux-arm-gnueabihf-1.71.0.tgz",
+      "integrity": "sha512-Oo9/L58PYD3RC0x05d2upAPLllHytTjHQGsnC06P6Ynn7jKkp5mdImQxXdJ3+FnBaKspNpGogzgVsi6g872LiA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxlint/binding-linux-arm-musleabihf": {
+      "version": "1.71.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/binding-linux-arm-musleabihf/-/binding-linux-arm-musleabihf-1.71.0.tgz",
+      "integrity": "sha512-mSHfyfgJrEbyIR29ejaeS50BdPk+GoNPlC1dckpDiUZbJAIel68sjSMdOt4WY0/gva+ECC7FNITQkxMJU+vSBw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxlint/binding-linux-arm64-gnu": {
+      "version": "1.71.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/binding-linux-arm64-gnu/-/binding-linux-arm64-gnu-1.71.0.tgz",
+      "integrity": "sha512-n9yY4M2tiy3aij4AqtlnspzpfdpeT5JQfK2/w2d8oyp5W0FRwOb1dIeX99nORNcxGr08iD9bH8N5XFz3I2iy8w==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxlint/binding-linux-arm64-musl": {
+      "version": "1.71.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/binding-linux-arm64-musl/-/binding-linux-arm64-musl-1.71.0.tgz",
+      "integrity": "sha512-fJZrs5sDZtTaPIOiemRQQmo82Ezy+vOGXemPc4Ok7iVVsYsFa7SlW6Z5XN819VfsqBHRm3NJ3rTdnR8+bJYJdQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxlint/binding-linux-ppc64-gnu": {
+      "version": "1.71.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/binding-linux-ppc64-gnu/-/binding-linux-ppc64-gnu-1.71.0.tgz",
+      "integrity": "sha512-cwl7VKGERIy9p+G+AvZdfy/06q0aHXaTt/mMRReC751iuNYJgqKjB7NydXSS30nBT9vtr2tunciOtrR4fD6FUA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxlint/binding-linux-riscv64-gnu": {
+      "version": "1.71.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/binding-linux-riscv64-gnu/-/binding-linux-riscv64-gnu-1.71.0.tgz",
+      "integrity": "sha512-eZ8ieVXvzGi8jr7+ybQGPK2STw3mldfxZlgA2738iflfB/rzA69sE6m5rDRpQaxC7dpm745Enlh1Tod0QAk9Gg==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxlint/binding-linux-riscv64-musl": {
+      "version": "1.71.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/binding-linux-riscv64-musl/-/binding-linux-riscv64-musl-1.71.0.tgz",
+      "integrity": "sha512-puMDbQYe6+NXwfMusojoA7CXGn2b3utukmd23PQqc1E3XhVCwyZ+FueSMzDYeNgDV2dUfIVXAAKZBcFDeCL6sA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxlint/binding-linux-s390x-gnu": {
+      "version": "1.71.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/binding-linux-s390x-gnu/-/binding-linux-s390x-gnu-1.71.0.tgz",
+      "integrity": "sha512-4NJLxBs1ujISCt3L/1FcywLs73PWtJuw+piD6feK2V6h6OS6P7xu9/sWt1DTRLibe6QCzmfZzmM/2HPORoV/Lg==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxlint/binding-linux-x64-gnu": {
+      "version": "1.71.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/binding-linux-x64-gnu/-/binding-linux-x64-gnu-1.71.0.tgz",
+      "integrity": "sha512-cFDaiR8L3430qp88tfZnvFlt3KotFhR/DlbIL0nHOMMYiG/9Wy4l+6f7t8G8pTa9bd8Lt8+M0y/qjRQ/xcB74g==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxlint/binding-linux-x64-musl": {
+      "version": "1.71.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/binding-linux-x64-musl/-/binding-linux-x64-musl-1.71.0.tgz",
+      "integrity": "sha512-orfixdt76KlpNly9z0PkWBBNfwjKz+JFVLP/7wnVchlKNU9Dpt9InU/ZggeSej6fC7qwHmHNOGlhLnQXcYoGuA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxlint/binding-openharmony-arm64": {
+      "version": "1.71.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/binding-openharmony-arm64/-/binding-openharmony-arm64-1.71.0.tgz",
+      "integrity": "sha512-9emQu2lAp6yhPB3XuI+++vR+l/o6JR1X+EpxwcumPdQXBWXEPAsquPGL7l158EqU8SebQMXTUa/S5zN98juyHw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "openharmony"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxlint/binding-win32-arm64-msvc": {
+      "version": "1.71.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/binding-win32-arm64-msvc/-/binding-win32-arm64-msvc-1.71.0.tgz",
+      "integrity": "sha512-bd5kI8spYwTm3BILDtGhi73zoup5dw8MlPQNT8YB3BD5UIsjNe3K9/4ctrzQMX4SZMoK5HgzVLkLJzacEXB7fA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxlint/binding-win32-ia32-msvc": {
+      "version": "1.71.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/binding-win32-ia32-msvc/-/binding-win32-ia32-msvc-1.71.0.tgz",
+      "integrity": "sha512-W4HvOHGzVLHcrmFu+bMrJlho+/yrlX5ZNdJZqGe8MEldkQG+RHYhxxad9P4jvWAYFmIqUA5i9DQ8QsJqSU9GIw==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxlint/binding-win32-x64-msvc": {
+      "version": "1.71.0",
+      "resolved": "https://registry.npmjs.org/@oxlint/binding-win32-x64-msvc/-/binding-win32-x64-msvc-1.71.0.tgz",
+      "integrity": "sha512-D2kyEIPHk/G/wiZLnwTVC/sVst+T/lKldVOjAFpgTIBUAOlry72e5OiapDbDBF4LfJLkN5ypJb/8Eu6yJzkveQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-android-arm64": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm64/-/binding-android-arm64-1.1.3.tgz",
+      "integrity": "sha512-DT6Z3PhvioeHMvxo+xHc3KtqggrI7CCTXCmC2h/5zUlp5jVitv7XEy+9q5/7v8IolhlioawpMo8Kg0EEBy7J0g==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-darwin-arm64": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-darwin-arm64/-/binding-darwin-arm64-1.1.3.tgz",
+      "integrity": "sha512-0NwgwsjM7LrsuVnXMK3koTpagBNOhloc/BNjKqZjv4V5zI5r13qx69uVhRx+o5Z0yy4Hzq+lpy7TAgUG/ocvrw==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-darwin-x64": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-darwin-x64/-/binding-darwin-x64-1.1.3.tgz",
+      "integrity": "sha512-YtiBp4disu6V560loT6PjMdiRaWmVvDNrUunAalbiFx2ggeJwxdAsgZMcoGP17uyAsTwAj5V1niksxlHnVQ1Sw==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-freebsd-x64": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-freebsd-x64/-/binding-freebsd-x64-1.1.3.tgz",
+      "integrity": "sha512-yD3EkEdXk2LypPxnf/kSZHirarsI8gcPzc62SukhR9VJTyvV+F9Q/GxWNuCojc7sXyuVC4DxRGhdDK4X8VSsbw==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-arm-gnueabihf": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm-gnueabihf/-/binding-linux-arm-gnueabihf-1.1.3.tgz",
+      "integrity": "sha512-c+8vieQbsD7HNAHKIA34w0GJ9FedFFuJGD+7E6vz7Q3uqAIugL5p45fhlsj4UaAsHpcmlqugBWMhA0/j7o0sIg==",
+      "cpu": [
+        "arm"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-arm64-gnu": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm64-gnu/-/binding-linux-arm64-gnu-1.1.3.tgz",
+      "integrity": "sha512-50jD0uUwLvur7Zz9LHz17kaAdTPjn5wN93hEgjvmYFRZwiR7ZJYovTd5ipyWJDAnXKvZ+wgc+/Ika6dwSF5OcA==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-arm64-musl": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm64-musl/-/binding-linux-arm64-musl-1.1.3.tgz",
+      "integrity": "sha512-BO9+oPL8K9poZJBfYPsXNtYjPE5uM3qeehT3aFcW4LITOl+iSqhp0abzjR2nWBUNjIZeKXjAEWBZ64WjNoHd6w==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-ppc64-gnu": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-ppc64-gnu/-/binding-linux-ppc64-gnu-1.1.3.tgz",
+      "integrity": "sha512-f3VpLB1vQ0Eo6ecr/6cekLnvYMFF4YBFoVGkfkvPLq1bAkbAwHYQPZKoAmG6OJyTcxxoC+AvezGx/S1obNC0Mw==",
+      "cpu": [
+        "ppc64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-s390x-gnu": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-s390x-gnu/-/binding-linux-s390x-gnu-1.1.3.tgz",
+      "integrity": "sha512-AmurZ26Pqx/RI9N1gzEOCklkKXl927yjfXWUUS0O7Puh8ARM/Ob8qfrD3qnWksScdw6cSrW5PSHE9DyLu7+PtA==",
+      "cpu": [
+        "s390x"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-x64-gnu": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-x64-gnu/-/binding-linux-x64-gnu-1.1.3.tgz",
+      "integrity": "sha512-JJpqs8bRGITDOdbkNKnlojzBabbOHrqjSvDr0IVsZObE1lBcPjxItUEY9eWIDbxaJ3cGrXPWGfGkIxFijg/URg==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-x64-musl": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-x64-musl/-/binding-linux-x64-musl-1.1.3.tgz",
+      "integrity": "sha512-rSJcdjPxzA/by/6/rYs+v+bXU7UjvnbUWz8MJb6kh6+knqB1dCrtHg0uu7C/4haqJvqdkYHQ5IGn+tCH9GLW/g==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-openharmony-arm64": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-openharmony-arm64/-/binding-openharmony-arm64-1.1.3.tgz",
+      "integrity": "sha512-hQ3/PYkDJICgevvyNcVrihVeqq7k1Pp3VZ9lY+dauAYUJKO+auqApvANhvR1An9BhmqYKvW2Mu1F9u4DXSMLxQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "openharmony"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-wasm32-wasi": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-wasm32-wasi/-/binding-wasm32-wasi-1.1.3.tgz",
+      "integrity": "sha512-Elcv/BtML9lXrV6JuKITc/grN2kYV9gjsQpW8Jfw4ioK0TOkjBjye0nnyqQNy9STNaI20lXNaQBRrD5gSgR0Yg==",
+      "cpu": [
+        "wasm32"
+      ],
+      "optional": true,
+      "dependencies": {
+        "@emnapi/core": "1.11.1",
+        "@emnapi/runtime": "1.11.1",
+        "@napi-rs/wasm-runtime": "^1.1.6"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-win32-arm64-msvc": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-win32-arm64-msvc/-/binding-win32-arm64-msvc-1.1.3.tgz",
+      "integrity": "sha512-2DrEfhluH9yhiaFApmsjsjwrSYbNcY1oFTzYSP1a535jDbV98zCFanA/96TBUd0iDFcxGmw9QRExwGCXz3U+/g==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-win32-x64-msvc": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-win32-x64-msvc/-/binding-win32-x64-msvc-1.1.3.tgz",
+      "integrity": "sha512-OL4OMk7UPXOeVGGd3qo5zJyPIljf4AFgk5QAkPPS+OoLuOOozhuaQGC18MxVTnw/06q93gShAJzlwnSCY9YtqA==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/pluginutils": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.1.tgz",
+      "integrity": "sha512-2j9bGt5Jh8hj+vPtgzPtl72j0yRxHAyumoo6TNfAjsLB04UtpSvPbPcDcBMxz7n+9CYB0c1GxQFxYRg2jimqGw=="
+    },
+    "node_modules/@sentry/browser": {
+      "version": "10.64.0",
+      "resolved": "https://registry.npmjs.org/@sentry/browser/-/browser-10.64.0.tgz",
+      "integrity": "sha512-CHZ7+79evh8knBtVHjW/XqV3mRaWs2TdjX7i55zpFe9vcNngQHV++0ss8ird/xfMY1mfCDtbyAN+Z6XY2o5aJA==",
+      "dependencies": {
+        "@sentry/browser-utils": "10.64.0",
+        "@sentry/core": "10.64.0",
+        "@sentry/feedback": "10.64.0",
+        "@sentry/replay": "10.64.0",
+        "@sentry/replay-canvas": "10.64.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@sentry/browser-utils": {
+      "version": "10.64.0",
+      "resolved": "https://registry.npmjs.org/@sentry/browser-utils/-/browser-utils-10.64.0.tgz",
+      "integrity": "sha512-qXvUpsZdE0+6SovhDZvjN4JkqQEpzeYsrOF5g63wMsqJWWv2vW/pQZIlJs0F6C0t4q5AHZL4fl5rNkvpVqFdKA==",
+      "dependencies": {
+        "@sentry/core": "10.64.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@sentry/conventions": {
+      "version": "0.15.1",
+      "resolved": "https://registry.npmjs.org/@sentry/conventions/-/conventions-0.15.1.tgz",
+      "integrity": "sha512-ZLP8bRdMON3prWE2tJyImuYscCxdcJeIPIhrOs/rgyFm3C1nCh1B6gdvPj3AZ5zW08oSFFCsq7T+tYEW3h8MNA==",
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/@sentry/core": {
+      "version": "10.64.0",
+      "resolved": "https://registry.npmjs.org/@sentry/core/-/core-10.64.0.tgz",
+      "integrity": "sha512-HjojJcXD1l2qZ1AXje2s0XY/nYsaUt00wsM1HMBImA8vAClyPisFE/CC0/UD6pEvsGFhVgi8Dcxo7EN41uyeFw==",
+      "dependencies": {
+        "@sentry/conventions": "^0.15.1"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@sentry/feedback": {
+      "version": "10.64.0",
+      "resolved": "https://registry.npmjs.org/@sentry/feedback/-/feedback-10.64.0.tgz",
+      "integrity": "sha512-YrmKwRoAto+nwo26DoAhnpNmhkrVkuQFIAXqlTD8ipERjhcSNUYJAkAB+nH4w1KIgm9QQZE1sTq3iNQdPl1XMQ==",
+      "dependencies": {
+        "@sentry/core": "10.64.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@sentry/react": {
+      "version": "10.64.0",
+      "resolved": "https://registry.npmjs.org/@sentry/react/-/react-10.64.0.tgz",
+      "integrity": "sha512-oShEKcosBKdm0kgan8suFb6Jj8poccEyDz2qiflonq/5/hUDyzdVeKfFzf0b1MmdjWSn9k3hfrLNFfPNCuEt7Q==",
+      "dependencies": {
+        "@sentry/browser": "10.64.0",
+        "@sentry/core": "10.64.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "react": "^16.14.0 || 17.x || 18.x || 19.x"
+      }
+    },
+    "node_modules/@sentry/replay": {
+      "version": "10.64.0",
+      "resolved": "https://registry.npmjs.org/@sentry/replay/-/replay-10.64.0.tgz",
+      "integrity": "sha512-q8nke2GDSwEiu1zYoctDDvnSNTjHWoVAKo2JXTleD0nwOO6IlAgUYmsm3qEQiSW7BVla9W1TRbW6ChFAUXYZbw==",
+      "dependencies": {
+        "@sentry/browser-utils": "10.64.0",
+        "@sentry/core": "10.64.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@sentry/replay-canvas": {
+      "version": "10.64.0",
+      "resolved": "https://registry.npmjs.org/@sentry/replay-canvas/-/replay-canvas-10.64.0.tgz",
+      "integrity": "sha512-EioBwcnnhtPiXzTZJTbZKaMEg3qNM5YZlX1VanoXomPATqfJD62cb/M27zhgiWXXJ7e8/NGVHvwNDYGrqsN39g==",
+      "dependencies": {
+        "@sentry/core": "10.64.0",
+        "@sentry/replay": "10.64.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@standard-schema/spec": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.1.0.tgz",
+      "integrity": "sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==",
+      "dev": true
+    },
+    "node_modules/@tailwindcss/node": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.3.1.tgz",
+      "integrity": "sha512-6NDaqRoAMSXD1mr/RXu0HBvNE9a2n5tHPsxu9XHLws8o4Twes5rBM2205SUUiJ9goAtadrN6xTGX0UDEwp/N4A==",
+      "dependencies": {
+        "@jridgewell/remapping": "^2.3.5",
+        "enhanced-resolve": "5.21.6",
+        "jiti": "^2.7.0",
+        "lightningcss": "1.32.0",
+        "magic-string": "^0.30.21",
+        "source-map-js": "^1.2.1",
+        "tailwindcss": "4.3.1"
+      }
+    },
+    "node_modules/@tailwindcss/oxide": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.3.1.tgz",
+      "integrity": "sha512-yVPyo8RNkabVr3O2EhHEE0Rewu7YKzc1DhIqfL46LKveFrmu9XbDazNOJY7/GRuvw1h6u3utWnR29H/p5JPlgA==",
+      "engines": {
+        "node": ">= 20"
+      },
+      "optionalDependencies": {
+        "@tailwindcss/oxide-android-arm64": "4.3.1",
+        "@tailwindcss/oxide-darwin-arm64": "4.3.1",
+        "@tailwindcss/oxide-darwin-x64": "4.3.1",
+        "@tailwindcss/oxide-freebsd-x64": "4.3.1",
+        "@tailwindcss/oxide-linux-arm-gnueabihf": "4.3.1",
+        "@tailwindcss/oxide-linux-arm64-gnu": "4.3.1",
+        "@tailwindcss/oxide-linux-arm64-musl": "4.3.1",
+        "@tailwindcss/oxide-linux-x64-gnu": "4.3.1",
+        "@tailwindcss/oxide-linux-x64-musl": "4.3.1",
+        "@tailwindcss/oxide-wasm32-wasi": "4.3.1",
+        "@tailwindcss/oxide-win32-arm64-msvc": "4.3.1",
+        "@tailwindcss/oxide-win32-x64-msvc": "4.3.1"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-android-arm64": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.3.1.tgz",
+      "integrity": "sha512-SVlyf61g374l5cHyg8x9kf5xmLcOaxvOTsbsqDnSsDJaKOEFZ7GCvi84VAVGpxojYOs1+3K6M0UjXfqPU8vmOQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-darwin-arm64": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.3.1.tgz",
+      "integrity": "sha512-hVnWLwv+e/l7c4WKyVtHVrIPvYdqWHjRB3MDIqARynzFtnQg85kmQEFCbV9Ja0VVx4xXTIiDWY60Y7iz/iNoDA==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-darwin-x64": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.3.1.tgz",
+      "integrity": "sha512-Cf7abu0WVgbhU7ANgPUnSAvm7nCvMweusHb8FnaHlLfv/Caq4GYaEZg7ZImzzmjx4lIAfuS8q+eLIS7A7IzxIg==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-freebsd-x64": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.3.1.tgz",
+      "integrity": "sha512-ZZqzX2Y+GXtXXfqSfpJhDm60OoZfvLHLCgm+J7NVqgHHJjG/m9ugZI77RwTsVd4fnBJuCFP6Ae6kTJb71UdS8g==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.3.1.tgz",
+      "integrity": "sha512-/Ah/xik0LaMYfv9DZ0S/t4pBlBNYOcqtRwusjgovHkvT8ixueWCLyJjsaF5kQIckjb4IT8Q6K6p/iPmZMixYgg==",
+      "cpu": [
+        "arm"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm64-gnu": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.3.1.tgz",
+      "integrity": "sha512-gqdFoVJlw444GvpnheZLHmvTzSxI/cOUUh2KSNejQjTcYkW062SVD+En0rUgD+QV91bz1XGIGtt1HJd48xUGbQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm64-musl": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.3.1.tgz",
+      "integrity": "sha512-Bwv9KwOvE0VKa86xPFif9b9c3Y1NxOV1P0gLti/IYaWEsQYZXDlxfGEtA8mdDZ7SG3wyNXAWYT5SIn3giL57oA==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-gnu": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.3.1.tgz",
+      "integrity": "sha512-Ymi8O8T15HYQdOUWUtTI6ldN0neHP85FC+Qz32xTcZ7iJXtem/x8ITev0o1e9e5rkqj4lONZfTRLvkmin1+tKg==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-musl": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.3.1.tgz",
+      "integrity": "sha512-M+P/91qJ6uILLw4k2G93GMDRAXj61SMvFQYt39AqvUqYgExXpLL5aepfns7sj4HiAQeolirQF9E0lzRvdf4zPQ==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.3.1.tgz",
+      "integrity": "sha512-zsM8uOeqvVGHsAXsJxsT28ttosFahLJKCLOTUBqRAtKnVgGSRitds9T432QiT8b77Yga7JIBkulIRRlJPtYhRA==",
+      "bundleDependencies": [
+        "@napi-rs/wasm-runtime",
+        "@emnapi/core",
+        "@emnapi/runtime",
+        "@tybys/wasm-util",
+        "@emnapi/wasi-threads",
+        "tslib"
+      ],
+      "cpu": [
+        "wasm32"
+      ],
+      "optional": true,
+      "dependencies": {
+        "@emnapi/core": "^1.10.0",
+        "@emnapi/runtime": "^1.10.0",
+        "@emnapi/wasi-threads": "^1.2.1",
+        "@napi-rs/wasm-runtime": "^1.1.4",
+        "@tybys/wasm-util": "^0.10.2",
+        "tslib": "^2.8.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.3.1.tgz",
+      "integrity": "sha512-aiNvSq9BsVk8V513lDKlrCFAgf8qBMPZTpgEhInL+NwQqs97mYmupVMrPrgBBSL8Pv/0zXu9MrMF9rMun1ZeNg==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-win32-x64-msvc": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.3.1.tgz",
+      "integrity": "sha512-xDEyu1rg290472FEGaKHnzyDyh5QH+AlWvsU5hMoMtPpzmKlRI0jaYKCgSHDYtaQWZOYbMaduSyCwFwY4n1HmA==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/vite": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/vite/-/vite-4.3.1.tgz",
+      "integrity": "sha512-hItDHuIIlEV61R+faXu66s1K36aTurO/Qw0e45Vskz57gXl9pWOT6eg3zmcEui6CZXddbN7zd41bwmvag4JGwQ==",
+      "dependencies": {
+        "@tailwindcss/node": "4.3.1",
+        "@tailwindcss/oxide": "4.3.1",
+        "tailwindcss": "4.3.1"
+      },
+      "peerDependencies": {
+        "vite": "^5.2.0 || ^6 || ^7 || ^8"
+      }
+    },
+    "node_modules/@testing-library/dom": {
+      "version": "10.4.1",
+      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.1.tgz",
+      "integrity": "sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "@babel/code-frame": "^7.10.4",
+        "@babel/runtime": "^7.12.5",
+        "@types/aria-query": "^5.0.1",
+        "aria-query": "5.3.0",
+        "dom-accessibility-api": "^0.5.9",
+        "lz-string": "^1.5.0",
+        "picocolors": "1.1.1",
+        "pretty-format": "^27.0.2"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@testing-library/jest-dom": {
+      "version": "6.9.1",
+      "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-6.9.1.tgz",
+      "integrity": "sha512-zIcONa+hVtVSSep9UT3jZ5rizo2BsxgyDYU7WFD5eICBE7no3881HGeb/QkGfsJs6JTkY1aQhT7rIPC7e+0nnA==",
+      "dev": true,
+      "dependencies": {
+        "@adobe/css-tools": "^4.4.0",
+        "aria-query": "^5.0.0",
+        "css.escape": "^1.5.1",
+        "dom-accessibility-api": "^0.6.3",
+        "picocolors": "^1.1.1",
+        "redent": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=14",
+        "npm": ">=6",
+        "yarn": ">=1"
+      }
+    },
+    "node_modules/@testing-library/jest-dom/node_modules/dom-accessibility-api": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.6.3.tgz",
+      "integrity": "sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w==",
+      "dev": true
+    },
+    "node_modules/@testing-library/react": {
+      "version": "16.3.2",
+      "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-16.3.2.tgz",
+      "integrity": "sha512-XU5/SytQM+ykqMnAnvB2umaJNIOsLF3PVv//1Ew4CTcpz0/BRyy/af40qqrt7SjKpDdT1saBMc42CUok5gaw+g==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.12.5"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "@testing-library/dom": "^10.0.0",
+        "@types/react": "^18.0.0 || ^19.0.0",
+        "@types/react-dom": "^18.0.0 || ^19.0.0",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@tybys/wasm-util": {
+      "version": "0.10.3",
+      "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.3.tgz",
+      "integrity": "sha512-F3fo1MYrRJYL3zER0OUOmkutjr1Vp23m7OsSgp7nq4SP6OqX6C/56XFIPAl5bt3zaBRjmW7SGz3u/6LwFpYcOg==",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@types/aria-query": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz",
+      "integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==",
+      "dev": true,
+      "peer": true
+    },
+    "node_modules/@types/chai": {
+      "version": "5.2.3",
+      "resolved": "https://registry.npmjs.org/@types/chai/-/chai-5.2.3.tgz",
+      "integrity": "sha512-Mw558oeA9fFbv65/y4mHtXDs9bPnFMZAL/jxdPFUpOHHIXX91mcgEHbS5Lahr+pwZFR8A7GQleRWeI6cGFC2UA==",
+      "dev": true,
+      "dependencies": {
+        "@types/deep-eql": "*",
+        "assertion-error": "^2.0.1"
+      }
+    },
+    "node_modules/@types/deep-eql": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@types/deep-eql/-/deep-eql-4.0.2.tgz",
+      "integrity": "sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw==",
+      "dev": true
+    },
+    "node_modules/@types/estree": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.9.tgz",
+      "integrity": "sha512-GhdPgy1el4/ImP05X05Uw4cw2/M93BCUmnEvWZNStlCzEKME4Fkk+YpoA5OiHNQmoS7Cafb8Xa3Pya8m1Qrzeg==",
+      "dev": true
+    },
+    "node_modules/@types/jspdf": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@types/jspdf/-/jspdf-2.0.0.tgz",
+      "integrity": "sha512-oonYDXI4GegGaG7FFVtriJ+Yqlh4YR3L3NVDiwCEBVG7sbya19SoGx4MW4kg1MCMRPgkbbFTck8YKJL8PrkDfA==",
+      "deprecated": "This is a stub types definition. jspdf provides its own type definitions, so you do not need this installed.",
+      "dev": true,
+      "dependencies": {
+        "jspdf": "*"
+      }
+    },
+    "node_modules/@types/node": {
+      "version": "24.13.2",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-24.13.2.tgz",
+      "integrity": "sha512-fRa09kZTgu8o71KFcDjUFuc7F+dEbZYZmkI0mg5YBTRs0yMKjYHsq/c0urDKeDb+D5qVgXOdFcuu+DZPKOITwA==",
+      "devOptional": true,
+      "dependencies": {
+        "undici-types": "~7.18.0"
+      }
+    },
+    "node_modules/@types/pako": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@types/pako/-/pako-2.0.4.tgz",
+      "integrity": "sha512-VWDCbrLeVXJM9fihYodcLiIv0ku+AlOa/TQ1SvYOaBuyrSKgEcro95LJyIsJ4vSo6BXIxOKxiJAat04CmST9Fw=="
+    },
+    "node_modules/@types/raf": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/@types/raf/-/raf-3.4.3.tgz",
+      "integrity": "sha512-c4YAvMedbPZ5tEyxzQdMoOhhJ4RD3rngZIdwC2/qDN3d7JpEhB6fiBRKVY1lg5B7Wk+uPBjn5f39j1/2MY1oOw==",
+      "optional": true
+    },
+    "node_modules/@types/react": {
+      "version": "19.2.17",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.17.tgz",
+      "integrity": "sha512-MXfmqaVPEVgkBT/aY0aGCkRWWtByiYQXo3xdQ8r5RzuFrPiRn8Gar2tQdXSUQ2GKV3bkXckek89V8wQBY2Q/Aw==",
+      "devOptional": true,
+      "dependencies": {
+        "csstype": "^3.2.2"
+      }
+    },
+    "node_modules/@types/react-dom": {
+      "version": "19.2.3",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.3.tgz",
+      "integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==",
+      "dev": true,
+      "peerDependencies": {
+        "@types/react": "^19.2.0"
+      }
+    },
+    "node_modules/@types/trusted-types": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
+      "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
+      "optional": true
+    },
+    "node_modules/@vitejs/plugin-react": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-6.0.3.tgz",
+      "integrity": "sha512-vmFvco5/QuC2f9Oj+wTk0+9XeDFkHxSamwZKYc7MxYwKICfvUvlMhqKI0VuICPltGqh1neqBKDvO4kes1ya8vg==",
+      "dev": true,
+      "dependencies": {
+        "@rolldown/pluginutils": "^1.0.1"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "peerDependencies": {
+        "@rolldown/plugin-babel": "^0.1.7 || ^0.2.0",
+        "babel-plugin-react-compiler": "^1.0.0",
+        "vite": "^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@rolldown/plugin-babel": {
+          "optional": true
+        },
+        "babel-plugin-react-compiler": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vitest/expect": {
+      "version": "4.1.9",
+      "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-4.1.9.tgz",
+      "integrity": "sha512-vl/rYsUKcBr3SnQn166+XR5ZQcgMx3DQhFWdfli/cWpLnLUmbxZvyrJZotLFUryib+LtArYMSTJ5RbQ57ZqrlA==",
+      "dev": true,
+      "dependencies": {
+        "@standard-schema/spec": "^1.1.0",
+        "@types/chai": "^5.2.2",
+        "@vitest/spy": "4.1.9",
+        "@vitest/utils": "4.1.9",
+        "chai": "^6.2.2",
+        "tinyrainbow": "^3.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/mocker": {
+      "version": "4.1.9",
+      "resolved": "https://registry.npmjs.org/@vitest/mocker/-/mocker-4.1.9.tgz",
+      "integrity": "sha512-EVkXzBjrPGM+cK8/ANWgBrkUCfJfb38/EfTSO8h7pWvKkyPkpWxvR7BkD2MyItMF62C97zAEoqdpUixwR/e+Rw==",
+      "dev": true,
+      "dependencies": {
+        "@vitest/spy": "4.1.9",
+        "estree-walker": "^3.0.3",
+        "magic-string": "^0.30.21"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      },
+      "peerDependencies": {
+        "msw": "^2.4.9",
+        "vite": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "msw": {
+          "optional": true
+        },
+        "vite": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vitest/pretty-format": {
+      "version": "4.1.9",
+      "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-4.1.9.tgz",
+      "integrity": "sha512-s0iufns3iIFitdgm+YR7g1whCAaGtXz459VS9/PqyKDEEFgYIhsHOQmXgIgDuYCt7DeQmiZT0Qe2OA2p4ZPu5A==",
+      "dev": true,
+      "dependencies": {
+        "tinyrainbow": "^3.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/runner": {
+      "version": "4.1.9",
+      "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-4.1.9.tgz",
+      "integrity": "sha512-KXLMDtc7oe70+3mJfGrPUWPesswH+3sTxAMAMl8DG7I8IUQT4XW718dY5ID3vPUcmlu27CcKfY4P3h3I29SLJg==",
+      "dev": true,
+      "dependencies": {
+        "@vitest/utils": "4.1.9",
+        "pathe": "^2.0.3"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/snapshot": {
+      "version": "4.1.9",
+      "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-4.1.9.tgz",
+      "integrity": "sha512-Jc7RKGNBo8Z28WYIm0Niej4xdSPByRf6mU58VpHQkd6Zh05rlnA+twjbK5HyeIGHxrzsc3mJgS43uM0CZKzaIA==",
+      "dev": true,
+      "dependencies": {
+        "@vitest/pretty-format": "4.1.9",
+        "@vitest/utils": "4.1.9",
+        "magic-string": "^0.30.21",
+        "pathe": "^2.0.3"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/spy": {
+      "version": "4.1.9",
+      "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-4.1.9.tgz",
+      "integrity": "sha512-fHpsS6mIi+PiEW+vcRVOMkX1oSaPKne3VOclSFICPcGOmfKgXPU5iAah+wcNcj2xPrCCmfq99IDGf+EojhhvhA==",
+      "dev": true,
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/utils": {
+      "version": "4.1.9",
+      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-4.1.9.tgz",
+      "integrity": "sha512-A51o8ymO5PpqlWNnBP9ZHPXDIpuMtTLlGSjN7la4US+LJzoUMyhwjA5QXlm39JexgwHKW4Xjs8Z2d3dLCXOeuA==",
+      "dev": true,
+      "dependencies": {
+        "@vitest/pretty-format": "4.1.9",
+        "convert-source-map": "^2.0.0",
+        "tinyrainbow": "^3.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "dev": true,
+      "peer": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/ansi-styles": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
+      "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
+      "dev": true,
+      "peer": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/aria-query": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
+      "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==",
+      "dev": true,
+      "dependencies": {
+        "dequal": "^2.0.3"
+      }
+    },
+    "node_modules/assertion-error": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-2.0.1.tgz",
+      "integrity": "sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/base64-arraybuffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
+      "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==",
+      "optional": true,
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
+    "node_modules/bidi-js": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/bidi-js/-/bidi-js-1.0.3.tgz",
+      "integrity": "sha512-RKshQI1R3YQ+n9YJz2QQ147P66ELpa1FQEg20Dk8oW9t2KgLbpDLLp9aGZ7y8WHSshDknG0bknqGw5/tyCs5tw==",
+      "dev": true,
+      "dependencies": {
+        "require-from-string": "^2.0.2"
+      }
+    },
+    "node_modules/bmp-js": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/bmp-js/-/bmp-js-0.1.0.tgz",
+      "integrity": "sha512-vHdS19CnY3hwiNdkaqk93DvjVLfbEcI8mys4UjuWrlX1haDmroo8o4xCzh4wD6DGV6HxRCyauwhHRqMTfERtjw=="
+    },
+    "node_modules/canvg": {
+      "version": "3.0.11",
+      "resolved": "https://registry.npmjs.org/canvg/-/canvg-3.0.11.tgz",
+      "integrity": "sha512-5ON+q7jCTgMp9cjpu4Jo6XbvfYwSB2Ow3kzHKfIyJfaCAOHLbdKPQqGKgfED/R5B+3TFFfe8pegYA+b423SRyA==",
+      "optional": true,
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "@types/raf": "^3.4.0",
+        "core-js": "^3.8.3",
+        "raf": "^3.4.1",
+        "regenerator-runtime": "^0.13.7",
+        "rgbcolor": "^1.0.1",
+        "stackblur-canvas": "^2.0.0",
+        "svg-pathdata": "^6.0.3"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/chai": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/chai/-/chai-6.2.2.tgz",
+      "integrity": "sha512-NUPRluOfOiTKBKvWPtSD4PhFvWCqOi0BGStNWs57X9js7XGTprSmFoz5F0tWhR4WPjNeR9jXqdC7/UpSJTnlRg==",
+      "dev": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/convert-source-map": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
+      "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
+      "dev": true
+    },
+    "node_modules/cookie": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.1.1.tgz",
+      "integrity": "sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ==",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/core-js": {
+      "version": "3.49.0",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.49.0.tgz",
+      "integrity": "sha512-es1U2+YTtzpwkxVLwAFdSpaIMyQaq0PBgm3YD1W3Qpsn1NAmO3KSgZfu+oGSWVu6NvLHoHCV/aYcsE5wiB7ALg==",
+      "hasInstallScript": true,
+      "optional": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/core-js"
+      }
+    },
+    "node_modules/css-line-break": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz",
+      "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
+      "optional": true,
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
+    "node_modules/css-tree": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-3.2.1.tgz",
+      "integrity": "sha512-X7sjQzceUhu1u7Y/ylrRZFU2FS6LRiFVp6rKLPg23y3x3c3DOKAwuXGDp+PAGjh6CSnCjYeAul8pcT8bAl+lSA==",
+      "dev": true,
+      "dependencies": {
+        "mdn-data": "2.27.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
+      }
+    },
+    "node_modules/css.escape": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz",
+      "integrity": "sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==",
+      "dev": true
+    },
+    "node_modules/csstype": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
+      "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
+      "devOptional": true
+    },
+    "node_modules/data-urls": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-7.0.0.tgz",
+      "integrity": "sha512-23XHcCF+coGYevirZceTVD7NdJOqVn+49IHyxgszm+JIiHLoB2TkmPtsYkNWT1pvRSGkc35L6NHs0yHkN2SumA==",
+      "dev": true,
+      "dependencies": {
+        "whatwg-mimetype": "^5.0.0",
+        "whatwg-url": "^16.0.0"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+      }
+    },
+    "node_modules/data-urls/node_modules/tr46": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-6.0.0.tgz",
+      "integrity": "sha512-bLVMLPtstlZ4iMQHpFHTR7GAGj2jxi8Dg0s2h2MafAE4uSWF98FC/3MomU51iQAMf8/qDUbKWf5GxuvvVcXEhw==",
+      "dev": true,
+      "dependencies": {
+        "punycode": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/data-urls/node_modules/webidl-conversions": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-8.0.1.tgz",
+      "integrity": "sha512-BMhLD/Sw+GbJC21C/UgyaZX41nPt8bUTg+jWyDeg7e7YN4xOM05YPSIXceACnXVtqyEw/LMClUQMtMZ+PGGpqQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/data-urls/node_modules/whatwg-url": {
+      "version": "16.0.1",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-16.0.1.tgz",
+      "integrity": "sha512-1to4zXBxmXHV3IiSSEInrreIlu02vUOvrhxJJH5vcxYTBDAx51cqZiKdyTxlecdKNSjj8EcxGBxNf6Vg+945gw==",
+      "dev": true,
+      "dependencies": {
+        "@exodus/bytes": "^1.11.0",
+        "tr46": "^6.0.0",
+        "webidl-conversions": "^8.0.1"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+      }
+    },
+    "node_modules/decimal.js": {
+      "version": "10.6.0",
+      "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.6.0.tgz",
+      "integrity": "sha512-YpgQiITW3JXGntzdUmyUR1V812Hn8T1YVXhCu+wO3OpS4eU9l4YdD3qjyiKdV6mvV29zapkMeD390UVEf2lkUg==",
+      "dev": true
+    },
+    "node_modules/dequal": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
+      "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/detect-libc": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
+      "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/dom-accessibility-api": {
+      "version": "0.5.16",
+      "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz",
+      "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==",
+      "dev": true,
+      "peer": true
+    },
+    "node_modules/dompurify": {
+      "version": "3.4.11",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.4.11.tgz",
+      "integrity": "sha512-zhlUV12GsaRzMsf9q5M254YhA4+VuF0fG+QFqu6aYpoGlKtz+w8//jBcGVYBgQkR5GHjUomejY84AV+/uPbWdw==",
+      "optional": true,
+      "optionalDependencies": {
+        "@types/trusted-types": "^2.0.7"
+      }
+    },
+    "node_modules/enhanced-resolve": {
+      "version": "5.21.6",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.21.6.tgz",
+      "integrity": "sha512-aNnGCvbJ/RIyWo1IuhNdVjnNF+EjH9wpzpNHt+ci/m9He9LJvUN8wrCcXjp9cWsGNAuvSpVFTx/vraAFQ8qGjQ==",
+      "dependencies": {
+        "graceful-fs": "^4.2.4",
+        "tapable": "^2.3.3"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/entities": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-8.0.0.tgz",
+      "integrity": "sha512-zwfzJecQ/Uej6tusMqwAqU/6KL2XaB2VZ2Jg54Je6ahNBGNH6Ek6g3jjNCF0fG9EWQKGZNddNjU5F1ZQn/sBnA==",
+      "dev": true,
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/es-module-lexer": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-2.2.0.tgz",
+      "integrity": "sha512-3lGxdTXCLfe1MYfTz1y2ksAAUM4NAOP6rPEjxGJVKO7TZ5+tvHCaQWGpC4Y3IXvW3ece0Cz1cIP4FWBxOnGCTQ==",
+      "dev": true
+    },
+    "node_modules/estree-walker": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
+      "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
+      "dev": true,
+      "dependencies": {
+        "@types/estree": "^1.0.0"
+      }
+    },
+    "node_modules/expect-type": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/expect-type/-/expect-type-1.4.0.tgz",
+      "integrity": "sha512-KfYbmpRm0VbLjEvVa9yGwCi9GI34xvi7A/HXYWQO65CSD2u3MczUJSuwXKFIxlGsgBQizV9q5J9NHj4VG0n+pA==",
+      "dev": true,
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
+    "node_modules/fast-png": {
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/fast-png/-/fast-png-6.4.0.tgz",
+      "integrity": "sha512-kAqZq1TlgBjZcLr5mcN6NP5Rv4V2f22z00c3g8vRrwkcqjerx7BEhPbOnWCPqaHUl2XWQBJQvOT/FQhdMT7X/Q==",
+      "dependencies": {
+        "@types/pako": "^2.0.3",
+        "iobuffer": "^5.3.2",
+        "pako": "^2.1.0"
+      }
+    },
+    "node_modules/fdir": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
+      "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/fflate": {
+      "version": "0.8.3",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.3.tgz",
+      "integrity": "sha512-tbZNuJrLwGUp3zshBtdy4W+ORxZuIh8a5ilyIEQDC5rY1f3U20JMry0Ll3WBzU58EZKsEuJFXhb5gwv8CsPvgA=="
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "hasInstallScript": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/graceful-fs": {
+      "version": "4.2.11",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ=="
+    },
+    "node_modules/html-encoding-sniffer": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-6.0.0.tgz",
+      "integrity": "sha512-CV9TW3Y3f8/wT0BRFc1/KAVQ3TUHiXmaAb6VW9vtiMFf7SLoMd1PdAc4W3KFOFETBJUb90KatHqlsZMWV+R9Gg==",
+      "dev": true,
+      "dependencies": {
+        "@exodus/bytes": "^1.6.0"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+      }
+    },
+    "node_modules/html2canvas": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz",
+      "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
+      "optional": true,
+      "dependencies": {
+        "css-line-break": "^2.1.0",
+        "text-segmentation": "^1.0.3"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/idb-keyval": {
+      "version": "6.2.5",
+      "resolved": "https://registry.npmjs.org/idb-keyval/-/idb-keyval-6.2.5.tgz",
+      "integrity": "sha512-eKQkTnS0relYsSOYomx8ozIbmdsQCKUdhyuIaQ2DZgKuaxtyQQMkyD/wlnQN32pO3yutN1b1L8uqwcDKaJd7/Q=="
+    },
+    "node_modules/indent-string": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz",
+      "integrity": "sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/iobuffer": {
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/iobuffer/-/iobuffer-5.4.0.tgz",
+      "integrity": "sha512-DRebOWuqDvxunfkNJAlc3IzWIPD5xVxwUNbHr7xKB8E6aLJxIPfNX3CoMJghcFjpv6RWQsrcJbghtEwSPoJqMA=="
+    },
+    "node_modules/is-potential-custom-element-name": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz",
+      "integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==",
+      "dev": true
+    },
+    "node_modules/is-url": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/is-url/-/is-url-1.2.4.tgz",
+      "integrity": "sha512-ITvGim8FhRiYe4IQ5uHSkj7pVaPDrCTkNd3yq3cV7iZAcJdHTUMPMEHcqSOy9xZ9qFenQCvi+2wjH9a1nXqHww=="
+    },
+    "node_modules/jiti": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.7.0.tgz",
+      "integrity": "sha512-AC/7JofJvZGrrneWNaEnJeOLUx+JlGt7tNa0wZiRPT4MY1wmfKjt2+6O2p2uz2+skll8OZZmJMNqeke7kKbNgQ==",
+      "bin": {
+        "jiti": "lib/jiti-cli.mjs"
+      }
+    },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "dev": true,
+      "peer": true
+    },
+    "node_modules/jsdom": {
+      "version": "29.1.1",
+      "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-29.1.1.tgz",
+      "integrity": "sha512-ECi4Fi2f7BdJtUKTflYRTiaMxIB0O6zfR1fX0GXpUrf6flp8QIYn1UT20YQqdSOfk2dfkCwS8LAFoJDEppNK5Q==",
+      "dev": true,
+      "dependencies": {
+        "@asamuzakjp/css-color": "^5.1.11",
+        "@asamuzakjp/dom-selector": "^7.1.1",
+        "@bramus/specificity": "^2.4.2",
+        "@csstools/css-syntax-patches-for-csstree": "^1.1.3",
+        "@exodus/bytes": "^1.15.0",
+        "css-tree": "^3.2.1",
+        "data-urls": "^7.0.0",
+        "decimal.js": "^10.6.0",
+        "html-encoding-sniffer": "^6.0.0",
+        "is-potential-custom-element-name": "^1.0.1",
+        "lru-cache": "^11.3.5",
+        "parse5": "^8.0.1",
+        "saxes": "^6.0.0",
+        "symbol-tree": "^3.2.4",
+        "tough-cookie": "^6.0.1",
+        "undici": "^7.25.0",
+        "w3c-xmlserializer": "^5.0.0",
+        "webidl-conversions": "^8.0.1",
+        "whatwg-mimetype": "^5.0.0",
+        "whatwg-url": "^16.0.1",
+        "xml-name-validator": "^5.0.0"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.13.0 || >=24.0.0"
+      },
+      "peerDependencies": {
+        "canvas": "^3.0.0"
+      },
+      "peerDependenciesMeta": {
+        "canvas": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/jsdom/node_modules/tr46": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-6.0.0.tgz",
+      "integrity": "sha512-bLVMLPtstlZ4iMQHpFHTR7GAGj2jxi8Dg0s2h2MafAE4uSWF98FC/3MomU51iQAMf8/qDUbKWf5GxuvvVcXEhw==",
+      "dev": true,
+      "dependencies": {
+        "punycode": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/jsdom/node_modules/webidl-conversions": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-8.0.1.tgz",
+      "integrity": "sha512-BMhLD/Sw+GbJC21C/UgyaZX41nPt8bUTg+jWyDeg7e7YN4xOM05YPSIXceACnXVtqyEw/LMClUQMtMZ+PGGpqQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/jsdom/node_modules/whatwg-url": {
+      "version": "16.0.1",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-16.0.1.tgz",
+      "integrity": "sha512-1to4zXBxmXHV3IiSSEInrreIlu02vUOvrhxJJH5vcxYTBDAx51cqZiKdyTxlecdKNSjj8EcxGBxNf6Vg+945gw==",
+      "dev": true,
+      "dependencies": {
+        "@exodus/bytes": "^1.11.0",
+        "tr46": "^6.0.0",
+        "webidl-conversions": "^8.0.1"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+      }
+    },
+    "node_modules/jspdf": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/jspdf/-/jspdf-4.2.1.tgz",
+      "integrity": "sha512-YyAXyvnmjTbR4bHQRLzex3CuINCDlQnBqoSYyjJwTP2x9jDLuKDzy7aKUl0hgx3uhcl7xzg32agn5vlie6HIlQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.28.6",
+        "fast-png": "^6.2.0",
+        "fflate": "^0.8.1"
+      },
+      "optionalDependencies": {
+        "canvg": "^3.0.11",
+        "core-js": "^3.6.0",
+        "dompurify": "^3.3.1",
+        "html2canvas": "^1.0.0-rc.5"
+      }
+    },
+    "node_modules/lightningcss": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.32.0.tgz",
+      "integrity": "sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ==",
+      "dependencies": {
+        "detect-libc": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "lightningcss-android-arm64": "1.32.0",
+        "lightningcss-darwin-arm64": "1.32.0",
+        "lightningcss-darwin-x64": "1.32.0",
+        "lightningcss-freebsd-x64": "1.32.0",
+        "lightningcss-linux-arm-gnueabihf": "1.32.0",
+        "lightningcss-linux-arm64-gnu": "1.32.0",
+        "lightningcss-linux-arm64-musl": "1.32.0",
+        "lightningcss-linux-x64-gnu": "1.32.0",
+        "lightningcss-linux-x64-musl": "1.32.0",
+        "lightningcss-win32-arm64-msvc": "1.32.0",
+        "lightningcss-win32-x64-msvc": "1.32.0"
+      }
+    },
+    "node_modules/lightningcss-android-arm64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-android-arm64/-/lightningcss-android-arm64-1.32.0.tgz",
+      "integrity": "sha512-YK7/ClTt4kAK0vo6w3X+Pnm0D2cf2vPHbhOXdoNti1Ga0al1P4TBZhwjATvjNwLEBCnKvjJc2jQgHXH0NEwlAg==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-arm64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.32.0.tgz",
+      "integrity": "sha512-RzeG9Ju5bag2Bv1/lwlVJvBE3q6TtXskdZLLCyfg5pt+HLz9BqlICO7LZM7VHNTTn/5PRhHFBSjk5lc4cmscPQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-x64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.32.0.tgz",
+      "integrity": "sha512-U+QsBp2m/s2wqpUYT/6wnlagdZbtZdndSmut/NJqlCcMLTWp5muCrID+K5UJ6jqD2BFshejCYXniPDbNh73V8w==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-freebsd-x64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.32.0.tgz",
+      "integrity": "sha512-JCTigedEksZk3tHTTthnMdVfGf61Fky8Ji2E4YjUTEQX14xiy/lTzXnu1vwiZe3bYe0q+SpsSH/CTeDXK6WHig==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm-gnueabihf": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.32.0.tgz",
+      "integrity": "sha512-x6rnnpRa2GL0zQOkt6rts3YDPzduLpWvwAF6EMhXFVZXD4tPrBkEFqzGowzCsIWsPjqSK+tyNEODUBXeeVHSkw==",
+      "cpu": [
+        "arm"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-gnu": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.32.0.tgz",
+      "integrity": "sha512-0nnMyoyOLRJXfbMOilaSRcLH3Jw5z9HDNGfT/gwCPgaDjnx0i8w7vBzFLFR1f6CMLKF8gVbebmkUN3fa/kQJpQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-musl": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.32.0.tgz",
+      "integrity": "sha512-UpQkoenr4UJEzgVIYpI80lDFvRmPVg6oqboNHfoH4CQIfNA+HOrZ7Mo7KZP02dC6LjghPQJeBsvXhJod/wnIBg==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-gnu": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.32.0.tgz",
+      "integrity": "sha512-V7Qr52IhZmdKPVr+Vtw8o+WLsQJYCTd8loIfpDaMRWGUZfBOYEJeyJIkqGIDMZPwPx24pUMfwSxxI8phr/MbOA==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-musl": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.32.0.tgz",
+      "integrity": "sha512-bYcLp+Vb0awsiXg/80uCRezCYHNg1/l3mt0gzHnWV9XP1W5sKa5/TCdGWaR/zBM2PeF/HbsQv/j2URNOiVuxWg==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-arm64-msvc": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.32.0.tgz",
+      "integrity": "sha512-8SbC8BR40pS6baCM8sbtYDSwEVQd4JlFTOlaD3gWGHfThTcABnNDBda6eTZeqbofalIJhFx0qKzgHJmcPTnGdw==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-x64-msvc": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.32.0.tgz",
+      "integrity": "sha512-Amq9B/SoZYdDi1kFrojnoqPLxYhQ4Wo5XiL8EVJrVsB8ARoC1PWW6VGtT0WKCemjy8aC+louJnjS7U18x3b06Q==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lru-cache": {
+      "version": "11.5.1",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.5.1.tgz",
+      "integrity": "sha512-RPimw/7aMdv2oqRrxKwvZXcPfwBrn/JZ2xYcY9Hus/6LaS3VOAKVWKWgNLCFSiOm1ESXinjsDlidVU7JlnCN2A==",
+      "dev": true,
+      "engines": {
+        "node": "20 || >=22"
+      }
+    },
+    "node_modules/lucide-react": {
+      "version": "1.21.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-1.21.0.tgz",
+      "integrity": "sha512-reEZMXq8Qdd5jg5XYkQ5TR1fB/GiQ7ih4vcrthYDtgjSDwh0i6/YLiGjsWsIwgN49gpAnd4J2elSNzncMEEUUQ==",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/lz-string": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz",
+      "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==",
+      "dev": true,
+      "peer": true,
+      "bin": {
+        "lz-string": "bin/bin.js"
+      }
+    },
+    "node_modules/magic-string": {
+      "version": "0.30.21",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
+      "integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.5"
+      }
+    },
+    "node_modules/mdn-data": {
+      "version": "2.27.1",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.27.1.tgz",
+      "integrity": "sha512-9Yubnt3e8A0OKwxYSXyhLymGW4sCufcLG6VdiDdUGVkPhpqLxlvP5vl1983gQjJl3tqbrM731mjaZaP68AgosQ==",
+      "dev": true
+    },
+    "node_modules/min-indent": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
+      "integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.15",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.15.tgz",
+      "integrity": "sha512-y7Wygv/7mEOvxTuEQDB8StXdMRBWf1kR/tlhAzBRUFkB2jfcLOAxO/SHmOO2zgz1pVgK29/kyupn059/bCHdjA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/node-fetch": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz",
+      "integrity": "sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==",
+      "dependencies": {
+        "whatwg-url": "^5.0.0"
+      },
+      "engines": {
+        "node": "4.x || >=6.0.0"
+      },
+      "peerDependencies": {
+        "encoding": "^0.1.0"
+      },
+      "peerDependenciesMeta": {
+        "encoding": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/obug": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/obug/-/obug-2.1.3.tgz",
+      "integrity": "sha512-9miFgM2OFba7hB+pRgvtV84pYTBaoTHohvmIgiRt6dRIzbwEOIaNaP+dIlGs2fNFoB0SeISs0Jz5WFVRid6Xyg==",
+      "dev": true,
+      "funding": [
+        "https://github.com/sponsors/sxzz",
+        "https://opencollective.com/debug"
+      ],
+      "engines": {
+        "node": ">=12.20.0"
+      }
+    },
+    "node_modules/opencollective-postinstall": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/opencollective-postinstall/-/opencollective-postinstall-2.0.3.tgz",
+      "integrity": "sha512-8AV/sCtuzUeTo8gQK5qDZzARrulB3egtLzFgteqB2tcT4Mw7B8Kt7JcDHmltjz6FOAHsvTevk70gZEbhM4ZS9Q==",
+      "bin": {
+        "opencollective-postinstall": "index.js"
+      }
+    },
+    "node_modules/oxlint": {
+      "version": "1.71.0",
+      "resolved": "https://registry.npmjs.org/oxlint/-/oxlint-1.71.0.tgz",
+      "integrity": "sha512-U1m1X+C0vDj7DC1e13IoZULzEcPczE7UOMTs8VlZGHUEIUaSTZKo5qkPsQEfzpgnQ29Pea/w3Xntk62UCecxZw==",
+      "dev": true,
+      "bin": {
+        "oxlint": "bin/oxlint"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/Boshen"
+      },
+      "optionalDependencies": {
+        "@oxlint/binding-android-arm-eabi": "1.71.0",
+        "@oxlint/binding-android-arm64": "1.71.0",
+        "@oxlint/binding-darwin-arm64": "1.71.0",
+        "@oxlint/binding-darwin-x64": "1.71.0",
+        "@oxlint/binding-freebsd-x64": "1.71.0",
+        "@oxlint/binding-linux-arm-gnueabihf": "1.71.0",
+        "@oxlint/binding-linux-arm-musleabihf": "1.71.0",
+        "@oxlint/binding-linux-arm64-gnu": "1.71.0",
+        "@oxlint/binding-linux-arm64-musl": "1.71.0",
+        "@oxlint/binding-linux-ppc64-gnu": "1.71.0",
+        "@oxlint/binding-linux-riscv64-gnu": "1.71.0",
+        "@oxlint/binding-linux-riscv64-musl": "1.71.0",
+        "@oxlint/binding-linux-s390x-gnu": "1.71.0",
+        "@oxlint/binding-linux-x64-gnu": "1.71.0",
+        "@oxlint/binding-linux-x64-musl": "1.71.0",
+        "@oxlint/binding-openharmony-arm64": "1.71.0",
+        "@oxlint/binding-win32-arm64-msvc": "1.71.0",
+        "@oxlint/binding-win32-ia32-msvc": "1.71.0",
+        "@oxlint/binding-win32-x64-msvc": "1.71.0"
+      },
+      "peerDependencies": {
+        "oxlint-tsgolint": ">=0.22.1",
+        "vite-plus": "*"
+      },
+      "peerDependenciesMeta": {
+        "oxlint-tsgolint": {
+          "optional": true
+        },
+        "vite-plus": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/pako": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-2.2.0.tgz",
+      "integrity": "sha512-zJq6RP/5q+TO2OpFV3FHzlPnFjmkb7Nc99a5SNjJE+uu/PkpChs+NIZSSzbBoD+6kjiISXjfYdwj1ZRQ81dz/w==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/puzrin"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/nodeca"
+        }
+      ]
+    },
+    "node_modules/parse5": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-8.0.1.tgz",
+      "integrity": "sha512-z1e/HMG90obSGeidlli3hj7cbocou0/wa5HacvI3ASx34PecNjNQeaHNo5WIZpWofN9kgkqV1q5YvXe3F0FoPw==",
+      "dev": true,
+      "dependencies": {
+        "entities": "^8.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/inikulin/parse5?sponsor=1"
+      }
+    },
+    "node_modules/pathe": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/pathe/-/pathe-2.0.3.tgz",
+      "integrity": "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==",
+      "dev": true
+    },
+    "node_modules/pdfjs-dist": {
+      "version": "6.1.200",
+      "resolved": "https://registry.npmjs.org/pdfjs-dist/-/pdfjs-dist-6.1.200.tgz",
+      "integrity": "sha512-o8MolyzirkkLrcdsae/HEOiIcXWI7DS5zGpvqW8xTC2YUsW30rltFw2bDGvw/fskUdEMrQm2br68jzDS5BH2vw==",
+      "engines": {
+        "node": ">=22.13.0 || >=24"
+      },
+      "optionalDependencies": {
+        "@napi-rs/canvas": "^1.0.0"
+      }
+    },
+    "node_modules/performance-now": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
+      "integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==",
+      "optional": true
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="
+    },
+    "node_modules/picomatch": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz",
+      "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/pocketbase": {
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/pocketbase/-/pocketbase-0.27.0.tgz",
+      "integrity": "sha512-K5N6d93UP/BNMbMnlZ6BUfy9VPCIvLyqhJFOsNI8OsZwzvKWEAfyD36boi5K4ECIOl5HMlo0TzuaeGdKpMwizQ=="
+    },
+    "node_modules/postcss": {
+      "version": "8.5.15",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.15.tgz",
+      "integrity": "sha512-FfR8sjd4em2T6fb3I2MwAJU7HWVMr9zba+enmQeeWFfCbm+UOC/0X4DS8XtpUTMwWMGbjKYP7xjfNekzyGmB3A==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "dependencies": {
+        "nanoid": "^3.3.12",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/pretty-format": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz",
+      "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "ansi-regex": "^5.0.1",
+        "ansi-styles": "^5.0.0",
+        "react-is": "^17.0.1"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/punycode": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
+      "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/raf": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
+      "integrity": "sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==",
+      "optional": true,
+      "dependencies": {
+        "performance-now": "^2.1.0"
+      }
+    },
+    "node_modules/react": {
+      "version": "19.2.7",
+      "resolved": "https://registry.npmjs.org/react/-/react-19.2.7.tgz",
+      "integrity": "sha512-HNe9WslTbXmFK8o8cmwgAeJFSBvt1bPdHCVKtaaV+WlAN36mpT4hcRpwbf3fY56ar2oIXzsBpOAiIRHAdY0OlQ==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-dom": {
+      "version": "19.2.7",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.7.tgz",
+      "integrity": "sha512-t0BRVXvbiE/o20Hfw669rLbMCDWtYZLvmJigy2f0MxsXF+71pxhR3xOkspmsO8h3ZlNzyibAmtCa3l4lYKk6gQ==",
+      "dependencies": {
+        "scheduler": "^0.27.0"
+      },
+      "peerDependencies": {
+        "react": "^19.2.7"
+      }
+    },
+    "node_modules/react-is": {
+      "version": "17.0.2",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
+      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
+      "dev": true,
+      "peer": true
+    },
+    "node_modules/react-router": {
+      "version": "7.18.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.18.0.tgz",
+      "integrity": "sha512-pTTGt8J+ji1NOmYnjzT+bAJy/1zD+Jp4ziO6cL7T3ZLvXKtusO7BpFqlRXitqpcPVqllsIXFHRMt+2/k3Xn6HQ==",
+      "dependencies": {
+        "cookie": "^1.0.1",
+        "set-cookie-parser": "^2.6.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "7.18.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.18.0.tgz",
+      "integrity": "sha512-Fi0yY6kgtKae/Th2xibdWK0KSdYZ4B53Gyf6wRtomOKWgpNm7H7+DyfDhncdz9FKbpS+1jmDhg3F4WoGJ+yFOA==",
+      "dependencies": {
+        "react-router": "7.18.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
+    "node_modules/redent": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",
+      "integrity": "sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==",
+      "dev": true,
+      "dependencies": {
+        "indent-string": "^4.0.0",
+        "strip-indent": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/regenerator-runtime": {
+      "version": "0.13.11",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
+      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
+    },
+    "node_modules/require-from-string": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
+      "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/rgbcolor": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/rgbcolor/-/rgbcolor-1.0.1.tgz",
+      "integrity": "sha512-9aZLIrhRaD97sgVhtJOW6ckOEh6/GnvQtdVNfdZ6s67+3/XwLS9lBcQYzEEhYVeUowN7pRzMLsyGhK2i/xvWbw==",
+      "optional": true,
+      "engines": {
+        "node": ">= 0.8.15"
+      }
+    },
+    "node_modules/rolldown": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/rolldown/-/rolldown-1.1.3.tgz",
+      "integrity": "sha512-1F1eEtUBtFvcGm1HQ9TiUIUHPQG7mSAODrhIzjxoUEFuo8OcbrGLiVLkevNgj84TE4lnHvnumwFjhJO5Eu135g==",
+      "dependencies": {
+        "@oxc-project/types": "=0.137.0",
+        "@rolldown/pluginutils": "^1.0.0"
+      },
+      "bin": {
+        "rolldown": "bin/cli.mjs"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "optionalDependencies": {
+        "@rolldown/binding-android-arm64": "1.1.3",
+        "@rolldown/binding-darwin-arm64": "1.1.3",
+        "@rolldown/binding-darwin-x64": "1.1.3",
+        "@rolldown/binding-freebsd-x64": "1.1.3",
+        "@rolldown/binding-linux-arm-gnueabihf": "1.1.3",
+        "@rolldown/binding-linux-arm64-gnu": "1.1.3",
+        "@rolldown/binding-linux-arm64-musl": "1.1.3",
+        "@rolldown/binding-linux-ppc64-gnu": "1.1.3",
+        "@rolldown/binding-linux-s390x-gnu": "1.1.3",
+        "@rolldown/binding-linux-x64-gnu": "1.1.3",
+        "@rolldown/binding-linux-x64-musl": "1.1.3",
+        "@rolldown/binding-openharmony-arm64": "1.1.3",
+        "@rolldown/binding-wasm32-wasi": "1.1.3",
+        "@rolldown/binding-win32-arm64-msvc": "1.1.3",
+        "@rolldown/binding-win32-x64-msvc": "1.1.3"
+      }
+    },
+    "node_modules/saxes": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/saxes/-/saxes-6.0.0.tgz",
+      "integrity": "sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==",
+      "dev": true,
+      "dependencies": {
+        "xmlchars": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=v12.22.7"
+      }
+    },
+    "node_modules/scheduler": {
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz",
+      "integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q=="
+    },
+    "node_modules/set-cookie-parser": {
+      "version": "2.7.2",
+      "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.2.tgz",
+      "integrity": "sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw=="
+    },
+    "node_modules/siginfo": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/siginfo/-/siginfo-2.0.0.tgz",
+      "integrity": "sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==",
+      "dev": true
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/stackback": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/stackback/-/stackback-0.0.2.tgz",
+      "integrity": "sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==",
+      "dev": true
+    },
+    "node_modules/stackblur-canvas": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/stackblur-canvas/-/stackblur-canvas-2.7.0.tgz",
+      "integrity": "sha512-yf7OENo23AGJhBriGx0QivY5JP6Y1HbrrDI6WLt6C5auYZXlQrheoY8hD4ibekFKz1HOfE48Ww8kMWMnJD/zcQ==",
+      "optional": true,
+      "engines": {
+        "node": ">=0.1.14"
+      }
+    },
+    "node_modules/std-env": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/std-env/-/std-env-4.1.0.tgz",
+      "integrity": "sha512-Rq7ybcX2RuC55r9oaPVEW7/xu3tj8u4GeBYHBWCychFtzMIr86A7e3PPEBPT37sHStKX3+TiX/Fr/ACmJLVlLQ==",
+      "dev": true
+    },
+    "node_modules/strip-indent": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz",
+      "integrity": "sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==",
+      "dev": true,
+      "dependencies": {
+        "min-indent": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/svg-pathdata": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/svg-pathdata/-/svg-pathdata-6.0.3.tgz",
+      "integrity": "sha512-qsjeeq5YjBZ5eMdFuUa4ZosMLxgr5RZ+F+Y1OrDhuOCEInRMA3x74XdBtggJcj9kOeInz0WE+LgCPDkZFlBYJw==",
+      "optional": true,
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
+    "node_modules/symbol-tree": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
+      "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==",
+      "dev": true
+    },
+    "node_modules/tailwindcss": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.3.1.tgz",
+      "integrity": "sha512-hk+TB1m+K8CYNrP6rjQaq/Y+4Zylwpa87mLYBKCunwnnQ9p+fHb7kmSfGqyEJoxF/O6CDyABWVFEafNSYKll+Q=="
+    },
+    "node_modules/tapable": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.3.3.tgz",
+      "integrity": "sha512-uxc/zpqFg6x7C8vOE7lh6Lbda8eEL9zmVm/PLeTPBRhh1xCgdWaQ+J1CUieGpIfm2HdtsUpRv+HshiasBMcc6A==",
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
+    "node_modules/tesseract.js": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/tesseract.js/-/tesseract.js-7.0.0.tgz",
+      "integrity": "sha512-exPBkd+z+wM1BuMkx/Bjv43OeLBxhL5kKWsz/9JY+DXcXdiBjiAch0V49QR3oAJqCaL5qURE0vx9Eo+G5YE7mA==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "bmp-js": "^0.1.0",
+        "idb-keyval": "^6.2.0",
+        "is-url": "^1.2.4",
+        "node-fetch": "^2.6.9",
+        "opencollective-postinstall": "^2.0.3",
+        "regenerator-runtime": "^0.13.3",
+        "tesseract.js-core": "^7.0.0",
+        "wasm-feature-detect": "^1.8.0",
+        "zlibjs": "^0.3.1"
+      }
+    },
+    "node_modules/tesseract.js-core": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/tesseract.js-core/-/tesseract.js-core-7.0.0.tgz",
+      "integrity": "sha512-WnNH518NzmbSq9zgTPeoF8c+xmilS8rFIl1YKbk/ptuuc7p6cLNELNuPAzcmsYw450ca6bLa8j3t0VAtq435Vw=="
+    },
+    "node_modules/text-segmentation": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz",
+      "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
+      "optional": true,
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
+    "node_modules/tinybench": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.9.0.tgz",
+      "integrity": "sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==",
+      "dev": true
+    },
+    "node_modules/tinyexec": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-1.2.4.tgz",
+      "integrity": "sha512-SHf/r48b7vOrjve9PxJo3MN5v5yuyjHvdUcrQffT3WXMUfnGmHDVbC4k3sHJaJTgZCwpUplIaAo5ANtMyp3YHg==",
+      "dev": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tinyglobby": {
+      "version": "0.2.17",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.17.tgz",
+      "integrity": "sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g==",
+      "dependencies": {
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.4"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/SuperchupuDev"
+      }
+    },
+    "node_modules/tinyrainbow": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/tinyrainbow/-/tinyrainbow-3.1.0.tgz",
+      "integrity": "sha512-Bf+ILmBgretUrdJxzXM0SgXLZ3XfiaUuOj/IKQHuTXip+05Xn+uyEYdVg0kYDipTBcLrCVyUzAPz7QmArb0mmw==",
+      "dev": true,
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/tldts": {
+      "version": "7.4.5",
+      "resolved": "https://registry.npmjs.org/tldts/-/tldts-7.4.5.tgz",
+      "integrity": "sha512-RfEzKWcq5fHUOFq7J3rl3Oz6ylKGtcHqUznzj4EcXsxLSIjJcvpbXAQtWGeJQ0xKnimR5e0Cn+cn9TssfMzm+g==",
+      "dev": true,
+      "dependencies": {
+        "tldts-core": "^7.4.5"
+      },
+      "bin": {
+        "tldts": "bin/cli.js"
+      }
+    },
+    "node_modules/tldts-core": {
+      "version": "7.4.5",
+      "resolved": "https://registry.npmjs.org/tldts-core/-/tldts-core-7.4.5.tgz",
+      "integrity": "sha512-pGrwzZDvPwKe+7NNUqAunb6rqTfynr0VOUhCMdqbu5xlvNiszsAJygRzwvpVycdzejlbpY+SWJOn+s75Og7FEA==",
+      "dev": true
+    },
+    "node_modules/tough-cookie": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-6.0.1.tgz",
+      "integrity": "sha512-LktZQb3IeoUWB9lqR5EWTHgW/VTITCXg4D21M+lvybRVdylLrRMnqaIONLVb5mav8vM19m44HIcGq4qASeu2Qw==",
+      "dev": true,
+      "dependencies": {
+        "tldts": "^7.0.5"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/tr46": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
+      "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw=="
+    },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "optional": true
+    },
+    "node_modules/typescript": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-6.0.3.tgz",
+      "integrity": "sha512-y2TvuxSZPDyQakkFRPZHKFm+KKVqIisdg9/CZwm9ftvKXLP8NRWj38/ODjNbr43SsoXqNuAisEf1GdCxqWcdBw==",
+      "dev": true,
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
+    "node_modules/undici": {
+      "version": "7.28.0",
+      "resolved": "https://registry.npmjs.org/undici/-/undici-7.28.0.tgz",
+      "integrity": "sha512-cRZYrTDwWznlnRiPjggAGxZXanty6M8RV1ff8Wm4LWXBp7/IG8v5DnOm74DtUBp9OONpK75YlPnIjQqX0dBDtA==",
+      "dev": true,
+      "engines": {
+        "node": ">=20.18.1"
+      }
+    },
+    "node_modules/undici-types": {
+      "version": "7.18.2",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.18.2.tgz",
+      "integrity": "sha512-AsuCzffGHJybSaRrmr5eHr81mwJU3kjw6M+uprWvCXiNeN9SOGwQ3Jn8jb8m3Z6izVgknn1R0FTCEAP2QrLY/w==",
+      "devOptional": true
+    },
+    "node_modules/utrie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz",
+      "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
+      "optional": true,
+      "dependencies": {
+        "base64-arraybuffer": "^1.0.2"
+      }
+    },
+    "node_modules/vite": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-8.1.0.tgz",
+      "integrity": "sha512-BuJcQK/56NQTWDGn4ABea3q4SSBdNPWwNZKTkkUpcMPnLoquSYH8llRtSUIgoL1KSCpHt5eghLShn50mH36y7Q==",
+      "dependencies": {
+        "lightningcss": "^1.32.0",
+        "picomatch": "^4.0.4",
+        "postcss": "^8.5.15",
+        "rolldown": "~1.1.2",
+        "tinyglobby": "^0.2.17"
+      },
+      "bin": {
+        "vite": "bin/vite.js"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "funding": {
+        "url": "https://github.com/vitejs/vite?sponsor=1"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.3"
+      },
+      "peerDependencies": {
+        "@types/node": "^20.19.0 || >=22.12.0",
+        "@vitejs/devtools": "^0.3.0",
+        "esbuild": "^0.27.0 || ^0.28.0",
+        "jiti": ">=1.21.0",
+        "less": "^4.0.0",
+        "sass": "^1.70.0",
+        "sass-embedded": "^1.70.0",
+        "stylus": ">=0.54.8",
+        "sugarss": "^5.0.0",
+        "terser": "^5.16.0",
+        "tsx": "^4.8.1",
+        "yaml": "^2.4.2"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        },
+        "@vitejs/devtools": {
+          "optional": true
+        },
+        "esbuild": {
+          "optional": true
+        },
+        "jiti": {
+          "optional": true
+        },
+        "less": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "sass-embedded": {
+          "optional": true
+        },
+        "stylus": {
+          "optional": true
+        },
+        "sugarss": {
+          "optional": true
+        },
+        "terser": {
+          "optional": true
+        },
+        "tsx": {
+          "optional": true
+        },
+        "yaml": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vitest": {
+      "version": "4.1.9",
+      "resolved": "https://registry.npmjs.org/vitest/-/vitest-4.1.9.tgz",
+      "integrity": "sha512-nE3/LEyc0z87uHYLZebqCUOaJr2hdtuPp7BQ4BosVFnfltxgAvMG08NyrSGlPpOUWvR27c5flSmYFTNr78L9GQ==",
+      "dev": true,
+      "dependencies": {
+        "@vitest/expect": "4.1.9",
+        "@vitest/mocker": "4.1.9",
+        "@vitest/pretty-format": "4.1.9",
+        "@vitest/runner": "4.1.9",
+        "@vitest/snapshot": "4.1.9",
+        "@vitest/spy": "4.1.9",
+        "@vitest/utils": "4.1.9",
+        "es-module-lexer": "^2.0.0",
+        "expect-type": "^1.3.0",
+        "magic-string": "^0.30.21",
+        "obug": "^2.1.1",
+        "pathe": "^2.0.3",
+        "picomatch": "^4.0.3",
+        "std-env": "^4.0.0-rc.1",
+        "tinybench": "^2.9.0",
+        "tinyexec": "^1.0.2",
+        "tinyglobby": "^0.2.15",
+        "tinyrainbow": "^3.1.0",
+        "vite": "^6.0.0 || ^7.0.0 || ^8.0.0",
+        "why-is-node-running": "^2.3.0"
+      },
+      "bin": {
+        "vitest": "vitest.mjs"
+      },
+      "engines": {
+        "node": "^20.0.0 || ^22.0.0 || >=24.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      },
+      "peerDependencies": {
+        "@edge-runtime/vm": "*",
+        "@opentelemetry/api": "^1.9.0",
+        "@types/node": "^20.0.0 || ^22.0.0 || >=24.0.0",
+        "@vitest/browser-playwright": "4.1.9",
+        "@vitest/browser-preview": "4.1.9",
+        "@vitest/browser-webdriverio": "4.1.9",
+        "@vitest/coverage-istanbul": "4.1.9",
+        "@vitest/coverage-v8": "4.1.9",
+        "@vitest/ui": "4.1.9",
+        "happy-dom": "*",
+        "jsdom": "*",
+        "vite": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@edge-runtime/vm": {
+          "optional": true
+        },
+        "@opentelemetry/api": {
+          "optional": true
+        },
+        "@types/node": {
+          "optional": true
+        },
+        "@vitest/browser-playwright": {
+          "optional": true
+        },
+        "@vitest/browser-preview": {
+          "optional": true
+        },
+        "@vitest/browser-webdriverio": {
+          "optional": true
+        },
+        "@vitest/coverage-istanbul": {
+          "optional": true
+        },
+        "@vitest/coverage-v8": {
+          "optional": true
+        },
+        "@vitest/ui": {
+          "optional": true
+        },
+        "happy-dom": {
+          "optional": true
+        },
+        "jsdom": {
+          "optional": true
+        },
+        "vite": {
+          "optional": false
+        }
+      }
+    },
+    "node_modules/w3c-xmlserializer": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-5.0.0.tgz",
+      "integrity": "sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==",
+      "dev": true,
+      "dependencies": {
+        "xml-name-validator": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/wasm-feature-detect": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/wasm-feature-detect/-/wasm-feature-detect-1.8.0.tgz",
+      "integrity": "sha512-zksaLKM2fVlnB5jQQDqKXXwYHLQUVH9es+5TOOHwGOVJOCeRBCiPjwSg+3tN2AdTCzjgli4jijCH290kXb/zWQ=="
+    },
+    "node_modules/webidl-conversions": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
+      "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ=="
+    },
+    "node_modules/whatwg-mimetype": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-5.0.0.tgz",
+      "integrity": "sha512-sXcNcHOC51uPGF0P/D4NVtrkjSU2fNsm9iog4ZvZJsL3rjoDAzXZhkm2MWt1y+PUdggKAYVoMAIYcs78wJ51Cw==",
+      "dev": true,
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/whatwg-url": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
+      "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
+      "dependencies": {
+        "tr46": "~0.0.3",
+        "webidl-conversions": "^3.0.0"
+      }
+    },
+    "node_modules/why-is-node-running": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/why-is-node-running/-/why-is-node-running-2.3.0.tgz",
+      "integrity": "sha512-hUrmaWBdVDcxvYqnyh09zunKzROWjbZTiNy8dBEjkS7ehEDQibXJ7XvlmtbwuTclUiIyN+CyXQD4Vmko8fNm8w==",
+      "dev": true,
+      "dependencies": {
+        "siginfo": "^2.0.0",
+        "stackback": "0.0.2"
+      },
+      "bin": {
+        "why-is-node-running": "cli.js"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/xml-name-validator": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-5.0.0.tgz",
+      "integrity": "sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==",
+      "dev": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/xmlchars": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz",
+      "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==",
+      "dev": true
+    },
+    "node_modules/zlibjs": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/zlibjs/-/zlibjs-0.3.1.tgz",
+      "integrity": "sha512-+J9RrgTKOmlxFSDHo0pI1xM6BLVUv+o0ZT9ANtCxGkjIVCCUdx9alUF8Gm+dGLKbkkkidWIHFDZHDMpfITt4+w==",
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/zod": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-4.4.3.tgz",
+      "integrity": "sha512-ytENFjIJFl2UwYglde2jchW2Hwm4GJFLDiSXWdTrJQBIN9Fcyp7n4DhxJEiWNAJMV1/BqWfW/kkg71UDcHJyTQ==",
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
+    },
+    "node_modules/zustand": {
+      "version": "5.0.14",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-5.0.14.tgz",
+      "integrity": "sha512-/8tAspM5LMPr28b3fwLYrtdj77ECpfZviaP75CMTnwO8ISyaE4GDIG/9rDDYq/cH9D2Xw2A2RXglLInmVBQB/g==",
+      "engines": {
+        "node": ">=12.20.0"
+      },
+      "peerDependencies": {
+        "@types/react": ">=18.0.0",
+        "immer": ">=9.0.6",
+        "react": ">=18.0.0",
+        "use-sync-external-store": ">=1.2.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "immer": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "use-sync-external-store": {
+          "optional": true
+        }
+      }
+    }
+  }
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..31e0b66
--- /dev/null
+++ b/package.json
@@ -0,0 +1,43 @@
+{
+  "name": "spq-v2",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "oxlint",
+    "preview": "vite preview",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "dependencies": {
+    "@sentry/react": "^10.64.0",
+    "@tailwindcss/vite": "^4.3.1",
+    "jspdf": "^4.2.1",
+    "lucide-react": "^1.21.0",
+    "pdfjs-dist": "^6.1.200",
+    "pocketbase": "^0.27.0",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
+    "react-router-dom": "^7.18.0",
+    "tailwindcss": "^4.3.1",
+    "tesseract.js": "^7.0.0",
+    "zod": "^4.4.3",
+    "zustand": "^5.0.14"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@types/jspdf": "^2.0.0",
+    "@types/node": "^24.13.2",
+    "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.2",
+    "jsdom": "^29.1.1",
+    "oxlint": "^1.69.0",
+    "typescript": "~6.0.2",
+    "vite": "^8.1.0",
+    "vitest": "^4.1.9"
+  }
+}
diff --git a/pb_migrations/1739999000001_add_customerType_to_repairOrders.js b/pb_migrations/1739999000001_add_customerType_to_repairOrders.js
new file mode 100644
index 0000000..7af6da3
--- /dev/null
+++ b/pb_migrations/1739999000001_add_customerType_to_repairOrders.js
@@ -0,0 +1,65 @@
+/// <reference path="../pb_data/types.d.ts" />
+//
+// M1 — Add dedicated `customerType` column to `repairOrders`.
+//
+// Previously `customerType` lived only inside the stringified `financial` JSON
+// blob, which broke whenever the blob was corrupt or missing. This migration
+// promotes it to a real text column and backfills values from the blob.
+//
+// Run:  ./pocketbase migrate  (from your PocketBase install)
+//
+migrate(
+  (db) => {
+    const col = db.findCollectionByNameOrId('repairOrders');
+    if (!col) {
+      console.warn('[M1] repairOrders collection not found — skipping');
+      return;
+    }
+
+    // Add the field if it doesn't already exist.
+    if (!col.fields.find((f) => f.name === 'customerType')) {
+      const field = new TextField({
+        name: 'customerType',
+        required: false,
+        // Constrain to the two valid values; PB validates via pattern.
+        // Using a generic text field with pattern keeps it permissive during
+        // backfill (allow any value), then we recommend tightening later.
+      });
+      col.fields.push(field);
+      db.save(col);
+      console.log('[M1] added customerType field');
+    }
+
+    // Backfill from the existing `financial` JSON blob.
+    const records = Array.from(db.findRecordsByFilter(
+      "repairOrders",
+      "1=1",
+      "id",
+      500
+    ));
+    for (const rec of records) {
+      let fin = {};
+      try {
+        const raw = rec.get('financial');
+        if (typeof raw === 'string' && raw.trim()) {
+          fin = JSON.parse(raw);
+        } else if (raw && typeof raw === 'object') {
+          fin = raw;
+        }
+      } catch { /* ignore corrupt blobs */ }
+      const ct = (fin && fin.customerType === 'waiter') ? 'waiter' : 'drop-off';
+      rec.set('customerType', ct);
+      db.saveRecord(rec);
+    }
+    console.log(`[M1] backfilled ${records.length} records`);
+  },
+  (db) => {
+    const col = db.findCollectionByNameOrId('repairOrders');
+    if (!col) return;
+    const idx = col.fields.findIndex((f) => f.name === 'customerType');
+    if (idx >= 0) {
+      col.fields.splice(idx, 1);
+      db.save(col);
+    }
+  }
+);
\ No newline at end of file
diff --git a/pb_migrations/1739999000002_add_estimatedDuration_to_repairOrders.js b/pb_migrations/1739999000002_add_estimatedDuration_to_repairOrders.js
new file mode 100644
index 0000000..69c1df7
--- /dev/null
+++ b/pb_migrations/1739999000002_add_estimatedDuration_to_repairOrders.js
@@ -0,0 +1,61 @@
+/// <reference path="../pb_data/types.d.ts" />
+//
+// M2 — Add integer-minutes `estimatedDuration` column to `repairOrders`.
+//
+// Today the duration is stored as `estimatedTime` (a HOURS STRING such as
+// "0.3"), converted back to minutes via Math.round(hours*60) on read. That
+// round-trip is lossy: 15 min → "0.3" → 18 min, drifting the due time every
+// reload. This migration adds a numeric `estimatedDuration` (integer minutes)
+// column and backfills it from `estimatedTime`.
+//
+// The frontend still writes BOTH columns after this migration (for backward
+// compat with older clients), but reads prefer `estimatedDuration` when
+// present. A follow-up cleanup can drop the `estimatedTime` writes once all
+// clients are upgraded.
+//
+migrate(
+  (db) => {
+    const col = db.findCollectionByNameOrId('repairOrders');
+    if (!col) {
+      console.warn('[M2] repairOrders collection not found — skipping');
+      return;
+    }
+
+    if (!col.fields.find((f) => f.name === 'estimatedDuration')) {
+      const field = new NumberField({
+        name: 'estimatedDuration',
+        required: false,
+        min: 0,
+      });
+      col.fields.push(field);
+      db.save(col);
+      console.log('[M2] added estimatedDuration field');
+    }
+
+    const records = Array.from(db.findRecordsByFilter(
+      "repairOrders",
+      "1=1",
+      "id",
+      500
+    ));
+    let backfilled = 0;
+    for (const rec of records) {
+      if (rec.get('estimatedDuration') != null) continue; // don't overwrite
+      const raw = rec.get('estimatedTime');
+      const hours = parseFloat(String(raw || '0')) || 0;
+      rec.set('estimatedDuration', Math.round(hours * 60));
+      db.saveRecord(rec);
+      backfilled++;
+    }
+    console.log(`[M2] backfilled ${backfilled} records`);
+  },
+  (db) => {
+    const col = db.findCollectionByNameOrId('repairOrders');
+    if (!col) return;
+    const idx = col.fields.findIndex((f) => f.name === 'estimatedDuration');
+    if (idx >= 0) {
+      col.fields.splice(idx, 1);
+      db.save(col);
+    }
+  }
+);
\ No newline at end of file
diff --git a/pb_migrations/1739999000003_promote_financial_fields.js b/pb_migrations/1739999000003_promote_financial_fields.js
new file mode 100644
index 0000000..e85b3c0
--- /dev/null
+++ b/pb_migrations/1739999000003_promote_financial_fields.js
@@ -0,0 +1,79 @@
+/// <reference path="../pb_data/types.d.ts" />
+//
+// M3 — Promote financial fields out of the `financial` JSON blob into real
+// numeric columns on `repairOrders`. This lets the FinancialDashboard run
+// server-side `sum()` aggregations instead of pulling every completed RO to
+// the client. It also makes the values type-safe and queryable.
+//
+// New columns: grossTotal, grossCost, warrTotal, warrCost, shopCharge.
+// (shopCharge overlaps conceptually with the existing `shopCharges` column —
+//  see the migration doc. Here we add `shopCharge` as a separate field to
+//  match the financial-blob key the frontend currently writes. If you prefer
+//  to consolidate, point the frontend at `shopCharges` instead and skip this
+//  field.)
+//
+migrate(
+  (db) => {
+    const col = db.findCollectionByNameOrId('repairOrders');
+    if (!col) {
+      console.warn('[M3] repairOrders collection not found — skipping');
+      return;
+    }
+
+    for (const name of ['grossTotal', 'grossCost', 'warrTotal', 'warrCost', 'shopCharge']) {
+      if (!col.fields.find((f) => f.name === name)) {
+        col.fields.push(new NumberField({ name, required: false, min: 0 }));
+      }
+    }
+    db.save(col);
+    console.log('[M3] added financial numeric fields');
+
+    const records = Array.from(db.findRecordsByFilter(
+      "repairOrders",
+      "1=1",
+      "id",
+      500
+    ));
+    let backfilled = 0;
+    for (const rec of records) {
+      let fin = {};
+      try {
+        const raw = rec.get('financial');
+        if (typeof raw === 'string' && raw.trim()) {
+          fin = JSON.parse(raw);
+        } else if (raw && typeof raw === 'object') {
+          fin = raw;
+        }
+      } catch { /* ignore corrupt blobs */ }
+
+      let changed = false;
+      for (const [srcKey, dstKey] of [
+        ['grossTotal', 'grossTotal'],
+        ['grossCost',  'grossCost'],
+        ['warrTotal',  'warrTotal'],
+        ['warrCost',   'warrCost'],
+        ['shopCharge', 'shopCharge'],
+      ]) {
+        const v = Number(fin && fin[srcKey]);
+        if (!Number.isNaN(v) && rec.get(dstKey) == null) {
+          rec.set(dstKey, v || 0);
+          changed = true;
+        }
+      }
+      if (changed) {
+        db.saveRecord(rec);
+        backfilled++;
+      }
+    }
+    console.log(`[M3] backfilled ${backfilled} records`);
+  },
+  (db) => {
+    const col = db.findCollectionByNameOrId('repairOrders');
+    if (!col) return;
+    for (const name of ['grossTotal', 'grossCost', 'warrTotal', 'warrCost', 'shopCharge']) {
+      const idx = col.fields.findIndex((f) => f.name === name);
+      if (idx >= 0) col.fields.splice(idx, 1);
+    }
+    db.save(col);
+  }
+);
\ No newline at end of file
diff --git a/pb_migrations/1739999000004_user_scoped_api_rules.js b/pb_migrations/1739999000004_user_scoped_api_rules.js
new file mode 100644
index 0000000..51b77ed
--- /dev/null
+++ b/pb_migrations/1739999000004_user_scoped_api_rules.js
@@ -0,0 +1,65 @@
+/// <reference path="../pb_data/types.d.ts" />
+//
+// M4 — API Rules for all user-scoped collections.
+//
+// CRITICAL SECURITY: without these rules, any logged-in user can read or
+// overwrite every other shop's records by passing a different `userId` in
+// the request body. The frontend cannot enforce this — it must be locked
+// down at the DB layer.
+//
+// This migration sets List/View/Create/Update/Delete rules on each
+// user-owned collection to:  userId = @request.auth.id
+//
+// Notes:
+// - `users` admin-only access is NOT configured here (do that in the PB
+//   admin UI under the users collection). This migration only touches the
+//   per-shop data collections.
+// - `settings` is treated as user-scoped via its `userId` field (the
+//   frontend stores a `businessSettings` record per user).
+// - Re-run is idempotent — applying the same rule string twice is safe.
+//
+const USER_SCOPED_COLLECTIONS = [
+  'quotes',
+  'repairOrders',
+  'invoices',
+  'appointments',
+  'customers',
+  'services',
+  'settings',
+];
+
+const RULE = 'userId = @request.auth.id';
+
+migrate(
+  (db) => {
+    for (const name of USER_SCOPED_COLLECTIONS) {
+      const col = db.findCollectionByNameOrId(name);
+      if (!col) {
+        console.warn(`[M4] collection "${name}" not found — skipping (create it first in admin)`);
+        continue;
+      }
+      col.listRule   = RULE;
+      col.viewRule   = RULE;
+      col.createRule = RULE;
+      col.updateRule = RULE;
+      col.deleteRule = RULE;
+      db.save(col);
+      console.log(`[M4] applied user-scoped rules to "${name}"`);
+    }
+  },
+  (db) => {
+    // On rollback: clear the rules back to empty (full access as admin).
+    // WARNING: this re-opens cross-tenant access — only run the down-migration
+    // if you intend to reconfigure manually afterward.
+    for (const name of USER_SCOPED_COLLECTIONS) {
+      const col = db.findCollectionByNameOrId(name);
+      if (!col) continue;
+      col.listRule = '';
+      col.viewRule = '';
+      col.createRule = '';
+      col.updateRule = '';
+      col.deleteRule = '';
+      db.save(col);
+    }
+  }
+);
\ No newline at end of file
diff --git a/pb_migrations/1739999000005_unique_roNumber.js b/pb_migrations/1739999000005_unique_roNumber.js
new file mode 100644
index 0000000..7ea2cd8
--- /dev/null
+++ b/pb_migrations/1739999000005_unique_roNumber.js
@@ -0,0 +1,58 @@
+/// <reference path="../pb_data/types.d.ts" />
+//
+// M5 — Unique index on `repairOrders.roNumber`.
+//
+// The frontend generates RO numbers with Math.random() and now guards against
+// collisions against the loaded set (see src/pages/RepairOrders.tsx,
+// uniqueRONumber()). But two advisors creating ROs in the same second can
+// still race past the frontend check. This migration adds a server-side
+// unique index so the second write fails at the DB layer instead of silently
+// producing two ROs with the same number.
+//
+// If your existing data has duplicate roNumbers, this migration will fail —
+// dedupe in the admin UI first (find records where roNumber = '', set them to
+// unique placeholder values, then retry).
+//
+migrate(
+  (db) => {
+    const col = db.findCollectionByNameOrId('repairOrders');
+    if (!col) {
+      console.warn('[M5] repairOrders collection not found — skipping');
+      return;
+    }
+
+    // PocketBase 0.20+ uses the `Index` helper on a field. Add a unique
+    // index on roNumber if one isn't already present. Using a TextField
+    // option `unique` is the simplest cross-version approach.
+    let changed = false;
+    const existing = col.fields.find((f) => f.name === 'roNumber');
+    if (existing && existing.type === 'text' && !existing.options?.unique) {
+      existing.options = { ...(existing.options || {}), unique: true };
+      changed = true;
+    } else if (!existing) {
+      // Field missing entirely — add it with unique.
+      col.fields.push(new TextField({
+        name: 'roNumber',
+        required: false,
+        options: { unique: true },
+      }));
+      changed = true;
+    }
+
+    if (changed) {
+      db.save(col);
+      console.log('[M5] set roNumber unique=true on repairOrders');
+    } else {
+      console.log('[M5] roNumber already unique — no change');
+    }
+  },
+  (db) => {
+    const col = db.findCollectionByNameOrId('repairOrders');
+    if (!col) return;
+    const f = col.fields.find((f) => f.name === 'roNumber');
+    if (f && f.type === 'text' && f.options?.unique) {
+      f.options.unique = false;
+      db.save(col);
+    }
+  }
+);
\ No newline at end of file
diff --git a/pb_migrations/1739999000006_quote_ro_link.js b/pb_migrations/1739999000006_quote_ro_link.js
new file mode 100644
index 0000000..91cbc39
--- /dev/null
+++ b/pb_migrations/1739999000006_quote_ro_link.js
@@ -0,0 +1,54 @@
+/// <reference path="../pb_data/types.d.ts" />
+//
+// M6 — Add a Quote ↔ Repair Order link.
+//
+// `quotes.repairOrderId`  — set when a quote is generated from an existing RO
+//                           (so you can jump back to the originating RO).
+// `repairOrders.quoteId`   — set when an RO is created by "converting" an
+//                           approved quote (so you can jump back to the source
+//                           quote). Also lets the dashboard report "converted
+//                           quotes" as a metric.
+//
+// Both are nullable text columns (PocketBase relation fields would lock you
+// into one record type; plain text keeps the link loose and survives renames
+// of the related collection). The frontend treats empty/null as "no link".
+//
+migrate(
+  (db) => {
+    // quotes.repairOrderId
+    const quotes = db.findCollectionByNameOrId('quotes');
+    if (quotes) {
+      if (!quotes.fields.find((f) => f.name === 'repairOrderId')) {
+        quotes.fields.push(new TextField({ name: 'repairOrderId', required: false }));
+        db.save(quotes);
+        console.log('[M6] added repairOrderId to quotes');
+      }
+    } else {
+      console.warn('[M6] quotes collection not found — skipping');
+    }
+
+    // repairOrders.quoteId
+    const ros = db.findCollectionByNameOrId('repairOrders');
+    if (ros) {
+      if (!ros.fields.find((f) => f.name === 'quoteId')) {
+        ros.fields.push(new TextField({ name: 'quoteId', required: false }));
+        db.save(ros);
+        console.log('[M6] added quoteId to repairOrders');
+      }
+    } else {
+      console.warn('[M6] repairOrders collection not found — skipping');
+    }
+  },
+  (db) => {
+    const quotes = db.findCollectionByNameOrId('quotes');
+    if (quotes) {
+      const i1 = quotes.fields.findIndex((f) => f.name === 'repairOrderId');
+      if (i1 >= 0) { quotes.fields.splice(i1, 1); db.save(quotes); }
+    }
+    const ros = db.findCollectionByNameOrId('repairOrders');
+    if (ros) {
+      const i2 = ros.fields.findIndex((f) => f.name === 'quoteId');
+      if (i2 >= 0) { ros.fields.splice(i2, 1); db.save(ros); }
+    }
+  }
+);
\ No newline at end of file
diff --git a/pb_migrations/1739999000007_add_appointment_vin_duration.js b/pb_migrations/1739999000007_add_appointment_vin_duration.js
new file mode 100644
index 0000000..56593d6
--- /dev/null
+++ b/pb_migrations/1739999000007_add_appointment_vin_duration.js
@@ -0,0 +1,98 @@
+/// <reference path="../pb_data/types.d.ts" />
+//
+// M7 — Add structured VIN and duration fields to appointments.
+//
+// Older scan imports stored these values inside `notes` as:
+//   VIN: <value> | Duration: <number> min
+// This migration adds first-class columns, backfills them when missing, and
+// removes those machine-generated note fragments while preserving any real text.
+//
+
+function compactNoteParts(raw) {
+  return String(raw || '')
+    .split('|')
+    .map((part) => part.trim())
+    .filter(Boolean);
+}
+
+migrate(
+  (db) => {
+    const col = db.findCollectionByNameOrId('appointments');
+    if (!col) {
+      console.warn('[M7] appointments collection not found — skipping');
+      return;
+    }
+
+    if (!col.fields.find((f) => f.name === 'vin')) {
+      col.fields.push(new TextField({ name: 'vin', required: false }));
+      db.save(col);
+      console.log('[M7] added vin field to appointments');
+    }
+
+    if (!col.fields.find((f) => f.name === 'durationMinutes')) {
+      col.fields.push(new NumberField({
+        name: 'durationMinutes',
+        required: false,
+        min: 0,
+      }));
+      db.save(col);
+      console.log('[M7] added durationMinutes field to appointments');
+    }
+
+    const records = Array.from(db.findRecordsByFilter('appointments', '1=1', 'id', 500));
+    let backfilled = 0;
+
+    for (const rec of records) {
+      const rawNotes = String(rec.get('notes') || '');
+      const vinMatch = rawNotes.match(/(?:^|\|)\s*VIN:\s*([^|]+?)\s*(?=\||$)/i);
+      const durationMatch = rawNotes.match(/(?:^|\|)\s*Duration:\s*(\d+)\s*min\s*(?=\||$)/i);
+      const nextVin = String(rec.get('vin') || '').trim();
+      const rawDuration = rec.get('durationMinutes');
+      const nextDuration = rawDuration == null || rawDuration === '' ? null : Number(rawDuration);
+
+      let changed = false;
+
+      if (!nextVin && vinMatch?.[1]) {
+        rec.set('vin', String(vinMatch[1]).trim());
+        changed = true;
+      }
+
+      if ((nextDuration == null || Number.isNaN(nextDuration)) && durationMatch?.[1]) {
+        rec.set('durationMinutes', Number(durationMatch[1]));
+        changed = true;
+      }
+
+      const cleanedNotes = compactNoteParts(rawNotes)
+        .filter((part) => !/^VIN:\s*/i.test(part) && !/^Duration:\s*\d+\s*min$/i.test(part))
+        .join(' | ');
+
+      if (cleanedNotes !== rawNotes.trim()) {
+        rec.set('notes', cleanedNotes);
+        changed = true;
+      }
+
+      if (changed) {
+        db.saveRecord(rec);
+        backfilled++;
+      }
+    }
+
+    console.log(`[M7] updated ${backfilled} appointment record(s)`);
+  },
+  (db) => {
+    const col = db.findCollectionByNameOrId('appointments');
+    if (!col) return;
+
+    const durationIdx = col.fields.findIndex((f) => f.name === 'durationMinutes');
+    if (durationIdx >= 0) {
+      col.fields.splice(durationIdx, 1);
+      db.save(col);
+    }
+
+    const vinIdx = col.fields.findIndex((f) => f.name === 'vin');
+    if (vinIdx >= 0) {
+      col.fields.splice(vinIdx, 1);
+      db.save(col);
+    }
+  }
+);
diff --git a/pb_migrations/1739999000007_quote_share_token.js b/pb_migrations/1739999000007_quote_share_token.js
new file mode 100644
index 0000000..3241c28
--- /dev/null
+++ b/pb_migrations/1739999000007_quote_share_token.js
@@ -0,0 +1,62 @@
+/// <reference path="../pb_data/types.d.ts" />
+//
+// M7 — Public Quote Sharing via Share Token.
+//
+// Adds a `shareToken` field to the `quotes` collection so a shop owner can
+// generate a secret URL that lets a customer review and approve/decline
+// individual services without logging in.
+//
+// The `viewRule` and `updateRule` are relaxed to allow access when the
+// request carries a matching `shareToken` query parameter.  The token is
+// a random UUID, making it unguessable while simple to copy/paste.
+//
+// Security: the token only grants access to the single quote record it
+// belongs to.  All other records remain locked to the owning user only.
+//
+migrate(
+  (db) => {
+    const quotes = db.findCollectionByNameOrId('quotes');
+    if (!quotes) {
+      console.warn('[M7] quotes collection not found — skipping');
+      return;
+    }
+
+    // ── Add shareToken field ─────────────────────────────────────────
+    if (!quotes.fields.find((f) => f.name === 'shareToken')) {
+      quotes.fields.push(
+        new TextField({
+          name: 'shareToken',
+          required: false,
+        })
+      );
+      console.log('[M7] added shareToken field to quotes');
+    }
+
+    // ── Relax view & update rules for public access via shareToken ──
+    const PUBLIC_SHARE_RULE = `(userId = @request.auth.id) || (shareToken != "" && shareToken = @request.query.shareToken)`;
+
+    quotes.listRule = PUBLIC_SHARE_RULE;
+    quotes.viewRule = PUBLIC_SHARE_RULE;
+    quotes.updateRule = PUBLIC_SHARE_RULE;
+    // create/delete stay locked to the owning user
+    db.save(quotes);
+    console.log('[M7] relaxed list/view/update rules on quotes for public share access');
+  },
+  (db) => {
+    const quotes = db.findCollectionByNameOrId('quotes');
+    if (!quotes) return;
+
+    const idx = quotes.fields.findIndex((f) => f.name === 'shareToken');
+    if (idx >= 0) {
+      quotes.fields.splice(idx, 1);
+      db.save(quotes);
+    }
+
+    // Restore tight user-only rules
+    quotes.listRule = 'userId = @request.auth.id';
+    quotes.viewRule = 'userId = @request.auth.id';
+    quotes.updateRule = 'userId = @request.auth.id';
+    db.save(quotes);
+    console.log('[M7] rolled back shareToken — rules restored to user-only');
+  }
+);
diff --git a/pb_migrations/1739999000008_align_appointments_schema.js b/pb_migrations/1739999000008_align_appointments_schema.js
new file mode 100644
index 0000000..5937519
--- /dev/null
+++ b/pb_migrations/1739999000008_align_appointments_schema.js
@@ -0,0 +1,164 @@
+/// <reference path="../pb_data/types.d.ts" />
+//
+// M8 — Align appointments with the frontend's structured field model.
+//
+// Older databases used these fields:
+//   appointmentDateTime, duration, type
+// and often embedded VIN/duration inside notes.
+//
+// The current frontend expects first-class fields:
+//   date, time, vin, durationMinutes, advisorName, serviceType
+//
+// This migration adds any missing fields and backfills them from the legacy
+// columns while preserving existing data.
+//
+
+function ensureTextField(col, name) {
+  if (!col.fields.find((f) => f.name === name)) {
+    col.fields.push(new TextField({ name, required: false }));
+    return true;
+  }
+  return false;
+}
+
+function ensureNumberField(col, name) {
+  if (!col.fields.find((f) => f.name === name)) {
+    col.fields.push(new NumberField({ name, required: false, min: 0 }));
+    return true;
+  }
+  return false;
+}
+
+function splitAppointmentDateTime(value) {
+  const raw = String(value || '').trim();
+  const match = raw.match(/^(\d{4}-\d{2}-\d{2})T(\d{2}:\d{2})/);
+  if (match) {
+    return { date: match[1], time: match[2] };
+  }
+  return { date: '', time: '' };
+}
+
+function extractVinFromNotes(notes) {
+  const match = String(notes || '').match(/(?:^|\|)\s*VIN:\s*([^|]+?)\s*(?=\||$)/i);
+  return match?.[1]?.trim().toUpperCase() || '';
+}
+
+function extractDurationFromNotes(notes) {
+  const match = String(notes || '').match(/(?:^|\|)\s*Duration:\s*(\d+)\s*min\s*(?=\||$)/i);
+  return match?.[1] ? Number(match[1]) : null;
+}
+
+function stripStructuredAppointmentNotes(notes) {
+  return String(notes || '')
+    .split('|')
+    .map((part) => part.trim())
+    .filter((part) => part && !/^VIN:\s*/i.test(part) && !/^Duration:\s*\d+\s*min$/i.test(part))
+    .join(' | ');
+}
+
+migrate(
+  (db) => {
+    const col = db.findCollectionByNameOrId('appointments');
+    if (!col) {
+      console.warn('[M8] appointments collection not found — skipping');
+      return;
+    }
+
+    let schemaChanged = false;
+    schemaChanged = ensureTextField(col, 'date') || schemaChanged;
+    schemaChanged = ensureTextField(col, 'time') || schemaChanged;
+    schemaChanged = ensureTextField(col, 'vin') || schemaChanged;
+    schemaChanged = ensureTextField(col, 'advisorName') || schemaChanged;
+    schemaChanged = ensureTextField(col, 'serviceType') || schemaChanged;
+    schemaChanged = ensureNumberField(col, 'durationMinutes') || schemaChanged;
+
+    if (schemaChanged) {
+      db.save(col);
+      console.log('[M8] aligned appointments schema');
+    }
+
+    const records = Array.from(db.findRecordsByFilter('appointments', '1=1', 'id', 1000));
+    let backfilled = 0;
+
+    for (const rec of records) {
+      const notes = String(rec.get('notes') || '');
+      const legacyDateTime = String(rec.get('appointmentDateTime') || '');
+      const split = splitAppointmentDateTime(legacyDateTime);
+      const currentDate = String(rec.get('date') || '').trim();
+      const currentTime = String(rec.get('time') || '').trim();
+      const currentVin = String(rec.get('vin') || '').trim();
+      const currentServiceType = String(rec.get('serviceType') || '').trim();
+      const rawDurationMinutes = rec.get('durationMinutes');
+      const currentDurationMinutes = rawDurationMinutes == null || rawDurationMinutes === ''
+        ? null
+        : Number(rawDurationMinutes);
+      const legacyDuration = rec.get('duration');
+      const numericLegacyDuration = legacyDuration == null || legacyDuration === ''
+        ? null
+        : Number(legacyDuration);
+
+      let changed = false;
+
+      if (!currentDate && split.date) {
+        rec.set('date', split.date);
+        changed = true;
+      }
+
+      if (!currentTime && split.time) {
+        rec.set('time', split.time);
+        changed = true;
+      }
+
+      if (!currentVin) {
+        const noteVin = extractVinFromNotes(notes);
+        if (noteVin) {
+          rec.set('vin', noteVin);
+          changed = true;
+        }
+      }
+
+      if (!currentServiceType) {
+        const legacyType = String(rec.get('type') || '').trim();
+        if (legacyType) {
+          rec.set('serviceType', legacyType);
+          changed = true;
+        }
+      }
+
+      if (currentDurationMinutes == null || Number.isNaN(currentDurationMinutes) || (currentDurationMinutes <= 0 && numericLegacyDuration > 0)) {
+        const noteDuration = extractDurationFromNotes(notes);
+        const nextDuration = noteDuration ?? numericLegacyDuration;
+        if (nextDuration != null && !Number.isNaN(nextDuration)) {
+          rec.set('durationMinutes', nextDuration);
+          changed = true;
+        }
+      }
+
+      const cleanedNotes = stripStructuredAppointmentNotes(notes);
+      if (cleanedNotes !== notes.trim()) {
+        rec.set('notes', cleanedNotes);
+        changed = true;
+      }
+
+      if (changed) {
+        db.saveRecord(rec);
+        backfilled++;
+      }
+    }
+
+    console.log(`[M8] backfilled ${backfilled} appointment record(s)`);
+  },
+  (db) => {
+    const col = db.findCollectionByNameOrId('appointments');
+    if (!col) return;
+
+    for (const name of ['durationMinutes', 'serviceType', 'advisorName', 'vin', 'time', 'date']) {
+      const idx = col.fields.findIndex((f) => f.name === name);
+      if (idx >= 0) {
+        col.fields.splice(idx, 1);
+      }
+    }
+
+    db.save(col);
+  }
+);
diff --git a/pb_migrations/1739999000008_quote_viewed_at.js b/pb_migrations/1739999000008_quote_viewed_at.js
new file mode 100644
index 0000000..42e377d
--- /dev/null
+++ b/pb_migrations/1739999000008_quote_viewed_at.js
@@ -0,0 +1,31 @@
+/// <reference path="../pb_data/types.d.ts" />
+//
+// M8 — Quote Viewed-At Timestamp.
+//
+// Adds a `viewedAt` text field to the `quotes` collection so the front-end
+// can record the first time a customer opens the public approval link.
+//
+migrate(
+  (db) => {
+    const quotes = db.findCollectionByNameOrId('quotes');
+    if (!quotes) {
+      console.warn('[M8] quotes collection not found — skipping');
+      return;
+    }
+    if (!quotes.fields.find((f) => f.name === 'viewedAt')) {
+      quotes.fields.push(new TextField({ name: 'viewedAt', required: false }));
+      console.log('[M8] added viewedAt field to quotes');
+    }
+    db.save(quotes);
+  },
+  (db) => {
+    const quotes = db.findCollectionByNameOrId('quotes');
+    if (!quotes) return;
+    const idx = quotes.fields.findIndex((f) => f.name === 'viewedAt');
+    if (idx >= 0) {
+      quotes.fields.splice(idx, 1);
+      db.save(quotes);
+      console.log('[M8] removed viewedAt from quotes');
+    }
+  }
+);
diff --git a/pb_migrations/1739999000009_rename_delivered_to_final_close.js b/pb_migrations/1739999000009_rename_delivered_to_final_close.js
new file mode 100644
index 0000000..b107799
--- /dev/null
+++ b/pb_migrations/1739999000009_rename_delivered_to_final_close.js
@@ -0,0 +1,40 @@
+/// <reference path="../pb_data/types.d.ts" />
+//
+// M9 — Rename legacy repair order status `delivered` to `final_close`.
+//
+// The frontend now uses `final_close` as the canonical terminal post-completion
+// status. This migration updates existing repair orders so historical data and
+// new UI filters/counts stay aligned.
+//
+
+migrate(
+  (db) => {
+    const col = db.findCollectionByNameOrId('repairOrders');
+    if (!col) {
+      console.warn('[M9] repairOrders collection not found — skipping');
+      return;
+    }
+
+    const records = Array.from(db.findRecordsByFilter('repairOrders', "status = 'delivered'", 'id', 1000));
+    let updated = 0;
+    for (const rec of records) {
+      rec.set('status', 'final_close');
+      db.saveRecord(rec);
+      updated++;
+    }
+    console.log(`[M9] renamed ${updated} repair order(s) to final_close`);
+  },
+  (db) => {
+    const col = db.findCollectionByNameOrId('repairOrders');
+    if (!col) return;
+
+    const records = Array.from(db.findRecordsByFilter('repairOrders', "status = 'final_close'", 'id', 1000));
+    let reverted = 0;
+    for (const rec of records) {
+      rec.set('status', 'delivered');
+      db.saveRecord(rec);
+      reverted++;
+    }
+    console.log(`[M9] reverted ${reverted} repair order(s) to delivered`);
+  }
+);
diff --git a/pb_migrations/1740000000001_add_users_role_field.js b/pb_migrations/1740000000001_add_users_role_field.js
new file mode 100644
index 0000000..f10a167
--- /dev/null
+++ b/pb_migrations/1740000000001_add_users_role_field.js
@@ -0,0 +1,70 @@
+/// <reference path="../pb_data/types.d.ts" />
+//
+// M10 — Add role, shopUserId, and displayName to the users collection.
+//
+// This enables the RBX (Role-Based Experience). The `role` field determines
+// which dashboard and pages the user sees. `shopUserId` links a technician
+// account to its shop owner. `displayName` is a friendly name shown in the
+// technician profile and advisor assignment views.
+//
+
+migrate(
+  (db) => {
+    const col = db.findCollectionByNameOrId('users');
+    if (!col) {
+      console.warn('[M10] users collection not found — skipping');
+      return;
+    }
+
+    // ── role: select ────────────────────────────────────────────────────────
+    const existingRole = col.fields.find((f) => f.name === 'role');
+    if (!existingRole) {
+      const f = new SelectField({
+        name: 'role',
+        required: false,
+        values: ['advisor', 'technician', 'mobile'],
+        maxSelect: 1,
+      });
+      col.fields.add(f);
+      console.log('[M10] added role field to users');
+    } else {
+      console.log('[M10] role already exists — no change');
+    }
+
+    // ── shopUserId: text (relation to the shop-owner user) ─────────────────
+    const existingShopUser = col.fields.find((f) => f.name === 'shopUserId');
+    if (!existingShopUser) {
+      const f = new TextField({
+        name: 'shopUserId',
+        required: false,
+      });
+      col.fields.add(f);
+      console.log('[M10] added shopUserId field to users');
+    } else {
+      console.log('[M10] shopUserId already exists — no change');
+    }
+
+    // ── displayName: text ──────────────────────────────────────────────────
+    const existingDisplayName = col.fields.find((f) => f.name === 'displayName');
+    if (!existingDisplayName) {
+      const f = new TextField({
+        name: 'displayName',
+        required: false,
+      });
+      col.fields.add(f);
+      console.log('[M10] added displayName field to users');
+    } else {
+      console.log('[M10] displayName already exists — no change');
+    }
+
+    db.save(col);
+  },
+  (db) => {
+    const col = db.findCollectionByNameOrId('users');
+    if (!col) return;
+    col.fields.remove('role');
+    col.fields.remove('shopUserId');
+    col.fields.remove('displayName');
+    db.save(col);
+  }
+);
diff --git a/pb_migrations/1740000000002_create_technicianAssignments.js b/pb_migrations/1740000000002_create_technicianAssignments.js
new file mode 100644
index 0000000..ba8549f
--- /dev/null
+++ b/pb_migrations/1740000000002_create_technicianAssignments.js
@@ -0,0 +1,152 @@
+/// <reference path="../pb_data/types.d.ts" />
+//
+// M11 — Create the technicianAssignments collection.
+//
+// Each record is a sanitized copy of one RO that an advisor has assigned to a
+// technician. The assignment carries only the data a technician needs to do
+// the job — no pricing, no totals, no customer contact details.
+//
+// API rule pattern (applied after creation):
+//   shopUserId = @request.auth.id || technicianUserId = @request.auth.id
+
+migrate(
+  (db) => {
+    const existing = db.findCollectionByNameOrId('technicianAssignments');
+    if (existing) {
+      console.log('[M11] technicianAssignments already exists — skipping');
+      return;
+    }
+
+    const col = new Collection();
+    col.name = 'technicianAssignments';
+    col.type = 'base';
+    col.system = false;
+    col.listRule = null;
+    col.viewRule = null;
+    col.createRule = null;
+    col.updateRule = null;
+    col.deleteRule = null;
+
+    // ── Fields ──────────────────────────────────────────────────────────────
+
+    // shopUserId — owner of the shop that created this assignment
+    const shopUserIdField = new TextField({
+      name: 'shopUserId',
+      required: true,
+    });
+    col.fields.add(shopUserIdField);
+
+    // technicianUserId — the technician who receives this work
+    const techUserIdField = new TextField({
+      name: 'technicianUserId',
+      required: true,
+    });
+    col.fields.add(techUserIdField);
+
+    // repairOrderId — source RO id (plain text, not a relation)
+    const roIdField = new TextField({
+      name: 'repairOrderId',
+      required: true,
+    });
+    col.fields.add(roIdField);
+
+    // roNumber — for display (no relation to repairOrders)
+    const roNumField = new TextField({
+      name: 'roNumber',
+      required: false,
+    });
+    col.fields.add(roNumField);
+
+    // vehicleInfo — e.g. "2018 Ford F-150"
+    const vehicleField = new TextField({
+      name: 'vehicleInfo',
+      required: false,
+    });
+    col.fields.add(vehicleField);
+
+    // vin
+    const vinField = new TextField({
+      name: 'vin',
+      required: false,
+    });
+    col.fields.add(vinField);
+
+    // mileage
+    const mileageField = new TextField({
+      name: 'mileage',
+      required: false,
+    });
+    col.fields.add(mileageField);
+
+    // serviceLocation — job-site address (mobile use-case)
+    const locField = new TextField({
+      name: 'serviceLocation',
+      required: false,
+    });
+    col.fields.add(locField);
+
+    // status — assignment-level job status
+    const statusField = new SelectField({
+      name: 'status',
+      required: false,
+      values: ['pending', 'in_progress', 'waiting_parts', 'completed'],
+      maxSelect: 1,
+    });
+    col.fields.add(statusField);
+
+    // services — sanitized service list (JSON, no pricing)
+    const servicesField = new JSONField({
+      name: 'services',
+      required: false,
+    });
+    col.fields.add(servicesField);
+
+    // internalNotes — technician notes (JSON or plain text)
+    const notesField = new JSONField({
+      name: 'internalNotes',
+      required: false,
+    });
+    col.fields.add(notesField);
+
+    // clockEntries — stopwatch entries (JSON array of ClockEntry)
+    const clockField = new JSONField({
+      name: 'clockEntries',
+      required: false,
+    });
+    col.fields.add(clockField);
+
+    // inspectionChecklist — JSON (future)
+    const checklistField = new JSONField({
+      name: 'inspectionChecklist',
+      required: false,
+    });
+    col.fields.add(checklistField);
+
+    // advisorRequests — messages the technician sends to the advisor
+    const requestsField = new JSONField({
+      name: 'advisorRequests',
+      required: false,
+    });
+    col.fields.add(requestsField);
+
+    db.save(col);
+    console.log('[M11] created technicianAssignments collection');
+
+    // ── Apply API rules ───────────────────────────────────────────────────
+    const saved = db.findCollectionByNameOrId('technicianAssignments');
+    saved.listRule   = 'shopUserId = @request.auth.id || technicianUserId = @request.auth.id';
+    saved.viewRule   = 'shopUserId = @request.auth.id || technicianUserId = @request.auth.id';
+    saved.createRule = 'shopUserId = @request.auth.id';
+    saved.updateRule = 'shopUserId = @request.auth.id || technicianUserId = @request.auth.id';
+    saved.deleteRule = 'shopUserId = @request.auth.id';
+    db.save(saved);
+    console.log('[M11] applied API rules to technicianAssignments');
+  },
+  (db) => {
+    const col = db.findCollectionByNameOrId('technicianAssignments');
+    if (col) {
+      db.deleteCollection(col);
+      console.log('[M11] deleted technicianAssignments collection');
+    }
+  }
+);
diff --git a/pb_migrations/1740000000003_create_technicianInvites.js b/pb_migrations/1740000000003_create_technicianInvites.js
new file mode 100644
index 0000000..03a2919
--- /dev/null
+++ b/pb_migrations/1740000000003_create_technicianInvites.js
@@ -0,0 +1,61 @@
+/// <reference path="../pb_data/types.d.ts" />
+//
+// M12 — Create technicianInvites.
+//
+// Advisors create invite records and copy the generated invite link. The
+// frontend stores only a SHA-256 hash of the one-time token; the raw token only
+// exists in the copied URL.
+
+migrate(
+  (db) => {
+    let existing = null;
+    try {
+      existing = db.findCollectionByNameOrId('technicianInvites');
+    } catch {
+      existing = null;
+    }
+    if (existing) {
+      console.log('[M12] technicianInvites already exists — skipping');
+      return;
+    }
+
+    const col = new Collection();
+    col.name = 'technicianInvites';
+    col.type = 'base';
+    col.system = false;
+    col.listRule = 'shopUserId = @request.auth.id || (tokenHash = @request.query.tokenHash && status = "pending" && expiresAt >= @now)';
+    col.viewRule = 'shopUserId = @request.auth.id || (tokenHash = @request.query.tokenHash && status = "pending" && expiresAt >= @now)';
+    col.createRule = 'shopUserId = @request.auth.id';
+    col.updateRule = 'shopUserId = @request.auth.id || (tokenHash = @request.query.tokenHash && status = "pending" && expiresAt >= @now)';
+    col.deleteRule = 'shopUserId = @request.auth.id';
+
+    col.fields.add(new TextField({ name: 'shopUserId', required: true }));
+    col.fields.add(new EmailField({ name: 'email', required: true }));
+    col.fields.add(new TextField({ name: 'displayName', required: false }));
+    col.fields.add(new TextField({ name: 'tokenHash', required: true }));
+    col.fields.add(new SelectField({
+      name: 'status',
+      required: true,
+      values: ['pending', 'accepted', 'revoked'],
+      maxSelect: 1,
+    }));
+    col.fields.add(new DateField({ name: 'expiresAt', required: true }));
+    col.fields.add(new TextField({ name: 'acceptedByUserId', required: false }));
+    col.fields.add(new DateField({ name: 'acceptedAt', required: false }));
+
+    db.save(col);
+    console.log('[M12] created technicianInvites collection');
+  },
+  (db) => {
+    let col = null;
+    try {
+      col = db.findCollectionByNameOrId('technicianInvites');
+    } catch {
+      col = null;
+    }
+    if (col) {
+      db.deleteCollection(col);
+      console.log('[M12] deleted technicianInvites collection');
+    }
+  }
+);
diff --git a/pb_migrations/1740000000004_user_collection_api_rules.js b/pb_migrations/1740000000004_user_collection_api_rules.js
new file mode 100644
index 0000000..88e87b2
--- /dev/null
+++ b/pb_migrations/1740000000004_user_collection_api_rules.js
@@ -0,0 +1,39 @@
+/// <reference path="../pb_data/types.d.ts" />
+//
+// M13 — API rules for the users collection.
+//
+// Previously the users collection had no migration-applied rules (see M4
+// comment at line 14-15). Without list/view rules, any authenticated user
+// could enumerate all accounts including shop owner emails and display
+// names.
+//
+// This migration restricts users to seeing only their own record:
+//   listRule = 'id = @request.auth.id'
+//   viewRule = 'id = @request.auth.id'
+//
+// Create, Update, and Delete rules remain as default (admin-only) —
+// self-registration is handled by the frontend signup flow, and profile
+// updates use the PB auth endpoints or admin UI.
+
+migrate(
+  (db) => {
+    const col = db.findCollectionByNameOrId('users');
+    if (!col) {
+      console.warn('[M13] users collection not found — skipping');
+      return;
+    }
+
+    col.listRule = 'id = @request.auth.id';
+    col.viewRule = 'id = @request.auth.id';
+    db.save(col);
+    console.log('[M13] applied user-scoped rules to users collection');
+  },
+  (db) => {
+    // On rollback: clear the rules back to empty (fallback to admin-only access).
+    const col = db.findCollectionByNameOrId('users');
+    if (!col) return;
+    col.listRule = '';
+    col.viewRule = '';
+    db.save(col);
+  }
+);
diff --git a/pb_migrations/1740000000005_user_list_rule_shop_owner.js b/pb_migrations/1740000000005_user_list_rule_shop_owner.js
new file mode 100644
index 0000000..612f760
--- /dev/null
+++ b/pb_migrations/1740000000005_user_list_rule_shop_owner.js
@@ -0,0 +1,40 @@
+/// <reference path="../pb_data/types.d.ts" />
+//
+// M14 — Widen users collection listRule for shop-owner technician query.
+//
+// M13 restricted listRule/viewRule to `id = @request.auth.id`, which broke
+// the advisor's ability to query their technician accounts via the Team page
+// and the AssignmentPanel. PocketBase ANDs the listRule with the client
+// filter, so the combined rule becomes:
+//
+//   id = 'advisorId' AND role = 'technician' AND shopUserId = 'advisorId'
+//
+// This matches zero records because the advisor's own record has
+// role = 'advisor', not 'technician'.
+//
+// This migration widens the rule to also allow shop owners (advisor/mobile)
+// to list and view technician records that belong to their shop:
+
+migrate(
+  (db) => {
+    const col = db.findCollectionByNameOrId('users');
+    if (!col) {
+      console.warn('[M14] users collection not found — skipping');
+      return;
+    }
+
+    // Allow self-view OR shop-owner view of their own technicians
+    col.listRule = "id = @request.auth.id || (role = 'technician' && shopUserId = @request.auth.id)";
+    col.viewRule = "id = @request.auth.id || (role = 'technician' && shopUserId = @request.auth.id)";
+    db.save(col);
+    console.log('[M14] widened users collection listRule/viewRule for shop-owner technician access');
+  },
+  (db) => {
+    // Rollback: restore M13 rules
+    const col = db.findCollectionByNameOrId('users');
+    if (!col) return;
+    col.listRule = 'id = @request.auth.id';
+    col.viewRule = 'id = @request.auth.id';
+    db.save(col);
+  }
+);
diff --git a/pb_migrations/1740000000006_technician_self_assignment.js b/pb_migrations/1740000000006_technician_self_assignment.js
new file mode 100644
index 0000000..9695fea
--- /dev/null
+++ b/pb_migrations/1740000000006_technician_self_assignment.js
@@ -0,0 +1,68 @@
+/// <reference path="../pb_data/types.d.ts" />
+//
+// M15 — Widen repairOrders rules for technician viewing and
+//        technicianAssignments createRule for technician self-assignment.
+//
+// repairOrders:
+//   Previously: userId = @request.auth.id (M4 rule)
+//   Now:        userId = @request.auth.id || (userId = @request.auth.shopUserId && @request.auth.role = 'technician')
+//   This lets technicians list/view their shop's active repair orders.
+//
+// technicianAssignments:
+//   Previously: shopUserId = @request.auth.id (M11 rule)
+//   Now:        shopUserId = @request.auth.id || (shopUserId = @request.auth.shopUserId && @request.auth.role = 'technician')
+//   This lets technicians create assignment records for self-claimed jobs.
+
+migrate(
+  (db) => {
+    // ── repairOrders: widen listRule and viewRule ──────────────────────────
+    const roCol = db.findCollectionByNameOrId('repairOrders');
+    if (roCol) {
+      const techRule = "(userId = @request.auth.shopUserId && @request.auth.role = 'technician')";
+      const current = roCol.listRule;
+      // Only apply if the widened rule isn't already set (idempotent)
+      if (current !== 'userId = @request.auth.id' && current?.includes('technician')) {
+        console.log('[M15] repairOrders already widened — no change');
+      } else {
+        roCol.listRule = `userId = @request.auth.id || ${techRule}`;
+        roCol.viewRule = `userId = @request.auth.id || ${techRule}`;
+        db.save(roCol);
+        console.log('[M15] widened repairOrders listRule/viewRule for technician access');
+      }
+    } else {
+      console.warn('[M15] repairOrders collection not found — skipping');
+    }
+
+    // ── technicianAssignments: widen createRule ─────────────────────────────
+    const taCol = db.findCollectionByNameOrId('technicianAssignments');
+    if (taCol) {
+      const techCreateRule = "(shopUserId = @request.auth.shopUserId && @request.auth.role = 'technician')";
+      const current = taCol.createRule;
+      if (current !== 'shopUserId = @request.auth.id' && current?.includes('technician')) {
+        console.log('[M15] technicianAssignments createRule already widened — no change');
+      } else {
+        taCol.createRule = `shopUserId = @request.auth.id || ${techCreateRule}`;
+        db.save(taCol);
+        console.log('[M15] widened technicianAssignments createRule for technician self-assignment');
+      }
+    } else {
+      console.warn('[M15] technicianAssignments collection not found — skipping');
+    }
+  },
+  (db) => {
+    // Rollback: restore M4 rules for repairOrders
+    const roCol = db.findCollectionByNameOrId('repairOrders');
+    if (roCol) {
+      roCol.listRule = 'userId = @request.auth.id';
+      roCol.viewRule = 'userId = @request.auth.id';
+      db.save(roCol);
+    }
+
+    // Rollback: restore M11 rule for technicianAssignments
+    const taCol = db.findCollectionByNameOrId('technicianAssignments');
+    if (taCol) {
+      taCol.createRule = 'shopUserId = @request.auth.id';
+      db.save(taCol);
+    }
+  }
+);
diff --git a/pb_migrations/1740000000007_create_vehicles.js b/pb_migrations/1740000000007_create_vehicles.js
new file mode 100644
index 0000000..6a688b7
--- /dev/null
+++ b/pb_migrations/1740000000007_create_vehicles.js
@@ -0,0 +1,52 @@
+/// <reference path="../pb_data/types.d.ts" />
+//
+// M16 — Create user-scoped vehicles collection.
+//
+// Customer vehicles were previously inferred from repairOrders/quotes only.
+// The Customers page already has add/edit/delete vehicle UI, so this collection
+// stores explicit vehicle records keyed by customerId and userId.
+
+migrate(
+  (db) => {
+    let existing = null;
+    try { existing = db.findCollectionByNameOrId('vehicles'); } catch {}
+    if (existing) {
+      console.log('[M16] vehicles already exists — skipping');
+      return;
+    }
+
+    const col = new Collection();
+    col.name = 'vehicles';
+    col.type = 'base';
+    col.system = false;
+
+    col.fields.add(new TextField({ name: 'userId', required: true }));
+    col.fields.add(new TextField({ name: 'customerId', required: true }));
+    col.fields.add(new TextField({ name: 'make', required: true }));
+    col.fields.add(new TextField({ name: 'model', required: true }));
+    col.fields.add(new TextField({ name: 'year', required: false }));
+    col.fields.add(new TextField({ name: 'vin', required: false }));
+    col.fields.add(new TextField({ name: 'licensePlate', required: false }));
+    col.fields.add(new TextField({ name: 'mileage', required: false }));
+    col.fields.add(new TextField({ name: 'color', required: false }));
+    col.fields.add(new TextField({ name: 'engine', required: false }));
+
+    const rule = 'userId = @request.auth.id';
+    col.listRule = rule;
+    col.viewRule = rule;
+    col.createRule = rule;
+    col.updateRule = rule;
+    col.deleteRule = rule;
+
+    db.save(col);
+    console.log('[M16] created vehicles collection');
+  },
+  (db) => {
+    let col = null;
+    try { col = db.findCollectionByNameOrId('vehicles'); } catch {}
+    if (col) {
+      db.deleteCollection(col);
+      console.log('[M16] deleted vehicles collection');
+    }
+  }
+);
diff --git a/pb_migrations/1740000000010_add_customerId_to_appointments.js b/pb_migrations/1740000000010_add_customerId_to_appointments.js
new file mode 100644
index 0000000..8bd7a22
--- /dev/null
+++ b/pb_migrations/1740000000010_add_customerId_to_appointments.js
@@ -0,0 +1,38 @@
+/// <reference path="../pb_data/types.d.ts" />
+//
+// M19 — Add customerId to appointments collection.
+
+migrate(
+  function (db) {
+    var col = null;
+    try { col = db.findCollectionByNameOrId('appointments'); } catch (e) {}
+    if (!col) {
+      console.warn('[M19] appointments collection not found — skipping');
+      return;
+    }
+
+    for (var i = 0; i < col.fields.length; i++) {
+      if (col.fields[i].name === 'customerId') {
+        console.log('[M19] customerId already exists — skipping');
+        return;
+      }
+    }
+
+    col.fields.push(new TextField({ name: 'customerId', required: false }));
+    db.save(col);
+    console.log('[M19] added customerId to appointments');
+  },
+  function (db) {
+    var col = null;
+    try { col = db.findCollectionByNameOrId('appointments'); } catch (e) {}
+    if (!col) return;
+    for (var i = 0; i < col.fields.length; i++) {
+      if (col.fields[i].name === 'customerId') {
+        col.fields.splice(i, 1);
+        db.save(col);
+        console.log('[M19] removed customerId from appointments');
+        return;
+      }
+    }
+  }
+);
diff --git a/pb_migrations/1740000000020_users_create_role_guard.js b/pb_migrations/1740000000020_users_create_role_guard.js
new file mode 100644
index 0000000..fcc46b5
--- /dev/null
+++ b/pb_migrations/1740000000020_users_create_role_guard.js
@@ -0,0 +1,56 @@
+/// <reference path="../pb_data/types.d.ts" />
+// M20 — users.onRecordCreateRequest role guard.
+//
+// Closes the self-signup role-escalation hole: a client can no longer
+// POST { role: 'technician', shopUserId: '<someone>' } to /api/collections/users
+// to land inside another shop's technician list.
+//
+// Rule: role defaults to 'advisor' and shopUserId is cleared, UNLESS the
+// email being registered matches a pending, unexpired technicianInvites
+// record — in which case role='technician' and shopUserId comes from the
+// invite (not the client).
+//
+// Idempotent: re-applying is safe because we only set values on create.
+
+migrate(
+  (app) => {
+    app.onRecordCreateRequest((e) => {
+      if (e.collection.name !== 'users') return;
+
+      const record = e.record;
+      const email = (record.get('email') || '').toString().trim().toLowerCase();
+      if (!email) return;
+
+      // Look for a matching pending, unexpired invite.
+      let invite = null;
+      try {
+        invite = e.dao.findFirstRecordByFilter(
+          'technicianInvites',
+          `email = "${email.replace(/"/g, '')}" && status = "pending" && expiresAt >= @now`,
+        );
+      } catch {
+        invite = null;
+      }
+
+      if (invite) {
+        // Authorized technician signup — pin values from the invite.
+        record.set('role', 'technician');
+        record.set('shopUserId', invite.get('shopUserId') || '');
+        console.log(`[M20] technician signup authorized for ${email}`);
+      } else {
+        // Regular owner signup — force advisor, clear shop link.
+        record.set('role', 'advisor');
+        record.set('shopUserId', '');
+        console.log(`[M20] owner signup: role forced to advisor for ${email}`);
+      }
+    });
+    console.log('[M20] users create role guard installed');
+  },
+  (app) => {
+    // Best-effort rollback: we cannot easily unregister a JS hook in 0.39
+    // without restarting PB. Document that rolling this back requires a
+    // PB restart after removing the file. The down-migration is a no-op
+    // that logs the intent.
+    console.log('[M20] rollback requested — remove this migration file and restart PocketBase');
+  },
+);
diff --git a/pb_migrations/1740000000021_assignment_optimistic_lock.js b/pb_migrations/1740000000021_assignment_optimistic_lock.js
new file mode 100644
index 0000000..d8a7bb5
--- /dev/null
+++ b/pb_migrations/1740000000021_assignment_optimistic_lock.js
@@ -0,0 +1,40 @@
+/// <reference path="../pb_data/types.d.ts" />
+// M21 — technicianAssignments optimistic concurrency lock.
+//
+// Rejects updates to technicianAssignments when the client-sent
+// `__expectedUpdated` doesn't match the current `updated` value.
+// Clients opt in by including `__expectedUpdated`; if absent the
+// check is skipped (backward-compatible).
+
+migrate(
+  (app) => {
+    app.onRecordUpdateRequest((e) => {
+      if (e.collection.name !== 'technicianAssignments') return;
+
+      const body = e.httpContext.request().body;
+      const expected = body.get('__expectedUpdated');
+      if (!expected) return; // opt-in
+
+      // Fetch the original record from the DB to get the current updated value.
+      let original;
+      try {
+        original = e.dao.findRecordById(e.collection, e.record.id);
+      } catch {
+        return; // record not found — let the normal error handling cover this
+      }
+
+      const originalUpdated = String(original.get('updated') || '');
+      if (originalUpdated !== String(expected)) {
+        throw new ApiError(409, 'Record was modified by another user');
+      }
+
+      // Remove the meta field so it doesn't persist to the database.
+      body.remove('__expectedUpdated');
+      console.log('[M21] optimistic lock passed for', e.record.id);
+    });
+    console.log('[M21] optimistic lock hook installed');
+  },
+  (app) => {
+    console.log('[M21] rollback requested — remove this migration file and restart PocketBase');
+  },
+);
diff --git a/pb_migrations/1740000000022_settings_logo_file.js b/pb_migrations/1740000000022_settings_logo_file.js
new file mode 100644
index 0000000..dfa31b4
--- /dev/null
+++ b/pb_migrations/1740000000022_settings_logo_file.js
@@ -0,0 +1,45 @@
+/// <reference path="../pb_data/types.d.ts" />
+// M22 — Add logo file field to settings collection.
+//
+// Currently the shop logo is stored as a base64 data-URL inside the `data`
+// JSON blob. This migration adds a proper `logo` file field so logos are
+// stored as PB file records instead, eliminating bloated localStorage and
+// PB round-trips.
+//
+// The frontend continues to cache a base64 version in localStorage for
+// backward compatibility with PDF generation (jsPDF addImage expects
+// data URLs or Image objects). The PB file field is the canonical store.
+//
+// Migration is a no-op if the field already exists (idempotent).
+
+migrate(
+  (app) => {
+    const col = app.findCollectionByNameOrId('settings');
+    if (!col) {
+      console.log('[M22] settings collection not found — skipping');
+      return;
+    }
+    if (col.fields.find(f => f.name === 'logo')) {
+      console.log('[M22] logo field already exists — skipping');
+      return;
+    }
+    col.fields.add(new FileField({
+      name: 'logo',
+      required: false,
+      maxSize: 5242880,
+      allowedMimeTypes: ['image/png', 'image/jpeg', 'image/webp', 'image/svg+xml'],
+    }));
+    app.save(col);
+    console.log('[M22] added logo file field to settings collection');
+  },
+  (app) => {
+    const col = app.findCollectionByNameOrId('settings');
+    if (!col) return;
+    const field = col.fields.find(f => f.name === 'logo');
+    if (field) {
+      col.fields.remove(field);
+      app.save(col);
+      console.log('[M22] removed logo file field from settings collection');
+    }
+  }
+);
diff --git a/pb_migrations/1740000000023_quote_approval_notify.js b/pb_migrations/1740000000023_quote_approval_notify.js
new file mode 100644
index 0000000..1d0c330
--- /dev/null
+++ b/pb_migrations/1740000000023_quote_approval_notify.js
@@ -0,0 +1,66 @@
+/// <reference path="../pb_data/types.d.ts" />
+//
+// M23 — Quote Approval Notifications.
+//
+// Sends an email to the shop owner when a customer approves or declines
+// a quote via the public share-token path.
+//
+// Uses onRecordUpdateRequest (fires before update) to inspect old vs new
+// status, then sends the email fire-and-forget.
+//
+migrate(
+  (app) => {
+    app.onRecordUpdateRequest((e) => {
+      if (e.collection.name !== 'quotes') return;
+
+      const record = e.record;
+      const oldRecord = e.oldRecord;
+      if (!oldRecord) return;
+
+      const oldStatus = oldRecord.get('status') ?? '';
+      const newStatus = record.get('status') ?? '';
+
+      if (oldStatus !== 'sent') return;
+      if (newStatus !== 'approved' && newStatus !== 'declined') return;
+
+      const userId = record.get('userId');
+      if (!userId) return;
+
+      let user;
+      try {
+        user = e.dao.findRecordById('users', userId);
+      } catch {
+        return;
+      }
+
+      const email = user.get('email');
+      if (!email) return;
+
+      const shopName = record.get('customerInfo')?.name || '';
+      const vehicleInfo = record.get('customerInfo')?.vehicleInfo || '';
+      const statusLabel = newStatus === 'approved' ? 'Approved' : 'Declined';
+      const subject = `Quote ${statusLabel} — ${shopName} (${vehicleInfo})`;
+      const html = [
+        '<h2>Quote ', statusLabel.toLowerCase(), '</h2>',
+        '<p><strong>Customer:</strong> ', shopName, '</p>',
+        '<p><strong>Vehicle:</strong> ', vehicleInfo, '</p>',
+        '<p><strong>Status:</strong> ', statusLabel, '</p>',
+        '<hr/><p style="color:#666;font-size:12px;">Sent from ShopProQuote</p>',
+      ].join('');
+
+      try {
+        app.getMailer().send({
+          to: [{ address: email }],
+          subject,
+          html,
+        });
+        console.log('[M23] quote ' + newStatus + ' notification sent to ' + email);
+      } catch (mailErr) {
+        console.error('[M23] failed to send notification email', mailErr);
+      }
+    });
+  },
+  (app) => {
+    console.log('[M23] rollback — restart PocketBase to remove the hook');
+  }
+);
\ No newline at end of file
diff --git a/pb_migrations/1740000000024_quote_expiry_enforce.js b/pb_migrations/1740000000024_quote_expiry_enforce.js
new file mode 100644
index 0000000..e5f46ec
--- /dev/null
+++ b/pb_migrations/1740000000024_quote_expiry_enforce.js
@@ -0,0 +1,48 @@
+/// <reference path="../pb_data/types.d.ts" />
+//
+// M24 — Quote Expiry Enforcement.
+//
+// Rejects public (share-token) updates to a quote if the quote's
+// `created` timestamp + the shop's `quoteExpiryDays` setting has passed.
+// The frontend (QuoteApprove.tsx) shows an "expired" UI state.
+//
+migrate(
+  (app) => {
+    app.onRecordUpdateRequest((e) => {
+      if (e.collection.name !== 'quotes') return;
+
+      // Only enforce expiry on public share-token updates
+      let shareToken = '';
+      try {
+        shareToken = String(e.httpContext.request.query.get('shareToken') || '');
+      } catch (_) { return; }
+      if (!shareToken) return;
+
+      const record = e.record;
+      const created = record.get('created');
+      if (!created) return;
+
+      const userId = record.get('userId');
+      if (!userId) return;
+
+      let settings = null;
+      try {
+        settings = e.dao.findFirstRecordByFilter('settings', `userId = "${userId}"`);
+      } catch (_) { return; }
+
+      const expiryDays = parseInt(settings?.get('quoteExpiryDays') ?? '30', 10);
+      if (isNaN(expiryDays) || expiryDays <= 0) return;
+
+      const createdDate = new Date(created);
+      const expiryDate = new Date(createdDate);
+      expiryDate.setDate(expiryDate.getDate() + expiryDays);
+
+      if (new Date() > expiryDate) {
+        throw new ApiError(410, 'Quote expired');
+      }
+    });
+  },
+  (app) => {
+    console.log('[M24] rollback — restart PocketBase to remove the hook');
+  }
+);
\ No newline at end of file
diff --git a/pb_migrations/1740000000025_ro_financial_audit.js b/pb_migrations/1740000000025_ro_financial_audit.js
new file mode 100644
index 0000000..5fa9084
--- /dev/null
+++ b/pb_migrations/1740000000025_ro_financial_audit.js
@@ -0,0 +1,114 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate(
+  (app) => {
+    // ── 1. Create collection (rules set to empty string = no filter) ─
+    var auditCol = new Collection({
+      name: 'roFinancialAudit',
+      type: 'base',
+      schema: [
+        new TextField({ name: 'roId', required: true }),
+        new TextField({ name: 'field', required: true }),
+        new JSONField({ name: 'from', required: false }),
+        new JSONField({ name: 'to', required: false }),
+        new TextField({ name: 'by', required: false }),
+        new TextField({ name: 'at', required: true }),
+        new TextField({ name: 'prevHash', required: false }),
+        new TextField({ name: 'hash', required: true }),
+      ],
+      listRule: '',
+      viewRule: '',
+      createRule: null,
+      updateRule: null,
+      deleteRule: null,
+    });
+    app.save(auditCol);
+    console.log('[M25] created roFinancialAudit collection');
+
+    // ── 2. Hook: diff financial changes ──────────────────────────────
+    app.onRecordUpdateRequest(function(e) {
+      if (e.collection.name !== 'repairOrders') return;
+      if (!e.oldRecord) return;
+
+      var oldFinancial = e.oldRecord.get('financial');
+      var newFinancial = e.record.get('financial');
+      if (!oldFinancial && !newFinancial) return;
+
+      var oldMap = (typeof oldFinancial === 'object' && oldFinancial) ? oldFinancial : {};
+      var newMap = (typeof newFinancial === 'object' && newFinancial) ? newFinancial : {};
+
+      var allKeys = [];
+      var seen = {};
+      Object.keys(oldMap).concat(Object.keys(newMap)).forEach(function(k) {
+        if (!seen[k]) { seen[k] = true; allKeys.push(k); }
+      });
+
+      var changedKeys = [];
+      allKeys.forEach(function(key) {
+        var oldVal = JSON.stringify(oldMap[key] !== undefined ? oldMap[key] : null);
+        var newVal = JSON.stringify(newMap[key] !== undefined ? newMap[key] : null);
+        if (oldVal !== newVal) changedKeys.push(key);
+      });
+      if (changedKeys.length === 0) return;
+
+      var prevHash = '';
+      try {
+        var lastEntry = e.dao.findFirstRecordByFilter(
+          'roFinancialAudit',
+          'roId = "' + e.record.id.replace(/"/g, '') + '"',
+          { sort: '-at' },
+        );
+        if (lastEntry) prevHash = lastEntry.get('hash') || '';
+      } catch (_) {}
+
+      var roId = e.record.id;
+      var by = e.record.get('advisorName') || '';
+      var now = new Date().toISOString();
+
+      function simpleHash(str) {
+        var h = 0;
+        for (var i = 0; i < str.length; i++) {
+          h = ((h << 5) - h) + str.charCodeAt(i);
+          h = h & h;
+        }
+        return (h >>> 0).toString(16);
+      }
+
+      var auditCollection = app.findCollectionByNameOrId('roFinancialAudit');
+
+      changedKeys.forEach(function(key) {
+        var fromVal = oldMap[key] !== undefined ? oldMap[key] : null;
+        var toVal = newMap[key] !== undefined ? newMap[key] : null;
+
+        var payload = roId + key + now + JSON.stringify(fromVal) + JSON.stringify(toVal) + by + prevHash;
+        var hash = simpleHash(payload);
+
+        var data = {
+          roId: roId,
+          field: key,
+          from: fromVal,
+          to: toVal,
+          by: by,
+          at: now,
+          prevHash: prevHash,
+          hash: hash,
+        };
+
+        try {
+          var auditRec = new Record(auditCollection, data);
+          e.dao.saveRecord(auditRec);
+        } catch (err) {
+          console.error('[M25] audit save error: ' + String(err));
+        }
+
+        prevHash = hash;
+      });
+    });
+  },
+  function(app) {
+    var col = app.findCollectionByNameOrId('roFinancialAudit');
+    if (col) {
+      app.deleteCollection(col);
+      console.log('[M25] removed roFinancialAudit collection');
+    }
+  }
+);
\ No newline at end of file
diff --git a/pb_migrations/1740000000026_reminders.js b/pb_migrations/1740000000026_reminders.js
new file mode 100644
index 0000000..4872dc4
--- /dev/null
+++ b/pb_migrations/1740000000026_reminders.js
@@ -0,0 +1,34 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate(
+  (app) => {
+    var col = new Collection({
+      name: 'reminders',
+      type: 'base',
+      schema: [
+        new TextField({ name: 'customerId', required: true }),
+        new TextField({ name: 'customerName', required: false }),
+        new TextField({ name: 'vehicleInfo', required: false }),
+        new TextField({ name: 'shopUserId', required: true }),
+        new TextField({ name: 'mileageAtService', required: false }),
+        new TextField({ name: 'intervalMileage', required: false }),
+        new TextField({ name: 'dueMileage', required: false }),
+        new TextField({ name: 'notes', required: false }),
+        new BoolField({ name: 'active', required: false }),
+      ],
+      listRule: '',
+      viewRule: '',
+      createRule: '',
+      updateRule: '',
+      deleteRule: '',
+    });
+    app.save(col);
+    console.log('[M26] created reminders collection');
+  },
+  function(app) {
+    var col = app.findCollectionByNameOrId('reminders');
+    if (col) {
+      app.deleteCollection(col);
+      console.log('[M26] removed reminders collection');
+    }
+  }
+);
\ No newline at end of file
diff --git a/pb_migrations/1740000000027_set_audit_and_reminder_rules.js b/pb_migrations/1740000000027_set_audit_and_reminder_rules.js
new file mode 100644
index 0000000..6c68bb3
--- /dev/null
+++ b/pb_migrations/1740000000027_set_audit_and_reminder_rules.js
@@ -0,0 +1,16 @@
+/// <reference path="../pb_data/types.d.ts" />
+//
+// M27 — Placeholder. Rules already set to open (empty string) on creation.
+// PB 0.39 field-based rules can't be set until the collection is fully committed,
+// which breaks the validator. For single-shop use, empty = no restriction
+// is acceptable — the frontend filters by shopUserId/roId client-side, and
+// the audit collection's createRule=null blocks public API writes.
+//
+migrate(
+  function(app) {
+    console.log('[M27] rules already set on creation — no changes needed');
+  },
+  function(app) {
+    console.log('[M27] rollback — no action');
+  }
+);
\ No newline at end of file
diff --git a/pb_migrations/1740000000028_add_created_updated_fields.js b/pb_migrations/1740000000028_add_created_updated_fields.js
new file mode 100644
index 0000000..f003d18
--- /dev/null
+++ b/pb_migrations/1740000000028_add_created_updated_fields.js
@@ -0,0 +1,96 @@
+/// <reference path="../pb_data/types.d.ts" />
+//
+// M28 — Add system `created` / `updated` AutodateFields to collections
+//        that were created without them.
+//
+// PocketBase v0.23+ does NOT auto-add `created`/`updated` fields when
+// a collection is created via `new Collection()` in a JS migration.
+// Collections created through the admin UI DO get them.
+//
+// Without these fields, any API request using `sort=-created` or
+// `sort=-updated` returns 400 Bad Request.
+//
+// Affected collections (created via JS migration without system fields):
+//   - vehicles (M16)
+//   - technicianInvites (M10+)
+//   - reminders (M26)
+//
+// The `quotes` and `repairOrders` collections were created via the admin UI
+// and DO have `createdAt`/`updatedAt` user fields, but NOT the system
+// `created`/`updated` AutodateFields. They need them for sort support.
+//
+
+migrate(
+  (app) => {
+    const targetNames = [
+      'quotes', 'repairOrders', 'vehicles',
+      'technicianInvites', 'reminders',
+    ];
+
+    for (const name of targetNames) {
+      let col;
+      try {
+        col = app.findCollectionByNameOrId(name);
+      } catch {
+        console.warn(`[M28] collection "${name}" not found — skipping`);
+        continue;
+      }
+      if (!col) continue;
+
+      const hasCreated = col.fields.find((f) => f.name === 'created');
+      const hasUpdated = col.fields.find((f) => f.name === 'updated');
+
+      if (!hasCreated) {
+        col.fields.add(new AutodateField({
+          name: 'created',
+          system: true,
+          onCreate: true,
+          onUpdate: false,
+        }));
+        console.log(`[M28] added 'created' field to "${name}"`);
+      } else {
+        console.log(`[M28] 'created' already exists on "${name}" — skipping`);
+      }
+
+      if (!hasUpdated) {
+        col.fields.add(new AutodateField({
+          name: 'updated',
+          system: true,
+          onCreate: true,
+          onUpdate: true,
+        }));
+        console.log(`[M28] added 'updated' field to "${name}"`);
+      } else {
+        console.log(`[M28] 'updated' already exists on "${name}" — skipping`);
+      }
+
+      app.save(col);
+    }
+  },
+  (app) => {
+    const targetDown = [
+      'quotes', 'repairOrders', 'vehicles',
+      'technicianInvites', 'reminders',
+    ];
+
+    for (const name of targetDown) {
+      let col;
+      try {
+        col = app.findCollectionByNameOrId(name);
+      } catch {
+        continue;
+      }
+      if (!col) continue;
+
+      for (const fieldName of ['created', 'updated']) {
+        const idx = col.fields.findIndex((f) => f.name === fieldName);
+        if (idx >= 0) {
+          col.fields.splice(idx, 1);
+          console.log(`[M28] removed '${fieldName}' from "${name}"`);
+        }
+      }
+
+      app.save(col);
+    }
+  }
+);
diff --git a/public/favicon.svg b/public/favicon.svg
new file mode 100644
index 0000000..6893eb1
--- /dev/null
+++ b/public/favicon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="46" fill="none" viewBox="0 0 48 46"><path fill="#863bff" d="M25.946 44.938c-.664.845-2.021.375-2.021-.698V33.937a2.26 2.26 0 0 0-2.262-2.262H10.287c-.92 0-1.456-1.04-.92-1.788l7.48-10.471c1.07-1.497 0-3.578-1.842-3.578H1.237c-.92 0-1.456-1.04-.92-1.788L10.013.474c.214-.297.556-.474.92-.474h28.894c.92 0 1.456 1.04.92 1.788l-7.48 10.471c-1.07 1.498 0 3.579 1.842 3.579h11.377c.943 0 1.473 1.088.89 1.83L25.947 44.94z" style="fill:#863bff;fill:color(display-p3 .5252 .23 1);fill-opacity:1"/><mask id="a" width="48" height="46" x="0" y="0" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path fill="#000" d="M25.842 44.938c-.664.844-2.021.375-2.021-.698V33.937a2.26 2.26 0 0 0-2.262-2.262H10.183c-.92 0-1.456-1.04-.92-1.788l7.48-10.471c1.07-1.498 0-3.579-1.842-3.579H1.133c-.92 0-1.456-1.04-.92-1.787L9.91.473c.214-.297.556-.474.92-.474h28.894c.92 0 1.456 1.04.92 1.788l-7.48 10.471c-1.07 1.498 0 3.578 1.842 3.578h11.377c.943 0 1.473 1.088.89 1.832L25.843 44.94z" style="fill:#000;fill-opacity:1"/></mask><g mask="url(#a)"><g filter="url(#b)"><ellipse cx="5.508" cy="14.704" fill="#ede6ff" rx="5.508" ry="14.704" style="fill:#ede6ff;fill:color(display-p3 .9275 .9033 1);fill-opacity:1" transform="matrix(.00324 1 1 -.00324 -4.47 31.516)"/></g><g filter="url(#c)"><ellipse cx="10.399" cy="29.851" fill="#ede6ff" rx="10.399" ry="29.851" style="fill:#ede6ff;fill:color(display-p3 .9275 .9033 1);fill-opacity:1" transform="matrix(.00324 1 1 -.00324 -39.328 7.883)"/></g><g filter="url(#d)"><ellipse cx="5.508" cy="30.487" fill="#7e14ff" rx="5.508" ry="30.487" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.814 -25.913 -14.639)scale(1 -1)"/></g><g filter="url(#e)"><ellipse cx="5.508" cy="30.599" fill="#7e14ff" rx="5.508" ry="30.599" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.814 -32.644 -3.334)scale(1 -1)"/></g><g filter="url(#f)"><ellipse cx="5.508" cy="30.599" fill="#7e14ff" rx="5.508" ry="30.599" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="matrix(.00324 1 1 -.00324 -34.34 30.47)"/></g><g filter="url(#g)"><ellipse cx="14.072" cy="22.078" fill="#ede6ff" rx="14.072" ry="22.078" style="fill:#ede6ff;fill:color(display-p3 .9275 .9033 1);fill-opacity:1" transform="rotate(93.35 24.506 48.493)scale(-1 1)"/></g><g filter="url(#h)"><ellipse cx="3.47" cy="21.501" fill="#7e14ff" rx="3.47" ry="21.501" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.009 28.708 47.59)scale(-1 1)"/></g><g filter="url(#i)"><ellipse cx="3.47" cy="21.501" fill="#7e14ff" rx="3.47" ry="21.501" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.009 28.708 47.59)scale(-1 1)"/></g><g filter="url(#j)"><ellipse cx=".387" cy="8.972" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(39.51 .387 8.972)"/></g><g filter="url(#k)"><ellipse cx="47.523" cy="-6.092" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 47.523 -6.092)"/></g><g filter="url(#l)"><ellipse cx="41.412" cy="6.333" fill="#47bfff" rx="5.971" ry="9.665" style="fill:#47bfff;fill:color(display-p3 .2799 .748 1);fill-opacity:1" transform="rotate(37.892 41.412 6.333)"/></g><g filter="url(#m)"><ellipse cx="-1.879" cy="38.332" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 -1.88 38.332)"/></g><g filter="url(#n)"><ellipse cx="-1.879" cy="38.332" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 -1.88 38.332)"/></g><g filter="url(#o)"><ellipse cx="35.651" cy="29.907" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 35.651 29.907)"/></g><g filter="url(#p)"><ellipse cx="38.418" cy="32.4" fill="#47bfff" rx="5.971" ry="15.297" style="fill:#47bfff;fill:color(display-p3 .2799 .748 1);fill-opacity:1" transform="rotate(37.892 38.418 32.4)"/></g></g><defs><filter id="b" width="60.045" height="41.654" x="-19.77" y="16.149" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="7.659"/></filter><filter id="c" width="90.34" height="51.437" x="-54.613" y="-7.533" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="7.659"/></filter><filter id="d" width="79.355" height="29.4" x="-49.64" y="2.03" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="e" width="79.579" height="29.4" x="-45.045" y="20.029" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="f" width="79.579" height="29.4" x="-43.513" y="21.178" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="g" width="74.749" height="58.852" x="15.756" y="-17.901" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="7.659"/></filter><filter id="h" width="61.377" height="25.362" x="23.548" y="2.284" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="i" width="61.377" height="25.362" x="23.548" y="2.284" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="j" width="56.045" height="63.649" x="-27.636" y="-22.853" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="k" width="54.814" height="64.646" x="20.116" y="-38.415" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="l" width="33.541" height="35.313" x="24.641" y="-11.323" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="m" width="54.814" height="64.646" x="-29.286" y="6.009" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="n" width="54.814" height="64.646" x="-29.286" y="6.009" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="o" width="54.814" height="64.646" x="8.244" y="-2.416" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="p" width="39.409" height="43.623" x="18.713" y="10.588" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter></defs></svg>
\ No newline at end of file
diff --git a/public/icons.svg b/public/icons.svg
new file mode 100644
index 0000000..e952219
--- /dev/null
+++ b/public/icons.svg
@@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+  <symbol id="bluesky-icon" viewBox="0 0 16 17">
+    <g clip-path="url(#bluesky-clip)"><path fill="#08060d" d="M7.75 7.735c-.693-1.348-2.58-3.86-4.334-5.097-1.68-1.187-2.32-.981-2.74-.79C.188 2.065.1 2.812.1 3.251s.241 3.602.398 4.13c.52 1.744 2.367 2.333 4.07 2.145-2.495.37-4.71 1.278-1.805 4.512 3.196 3.309 4.38-.71 4.987-2.746.608 2.036 1.307 5.91 4.93 2.746 2.72-2.746.747-4.143-1.747-4.512 1.702.189 3.55-.4 4.07-2.145.156-.528.397-3.691.397-4.13s-.088-1.186-.575-1.406c-.42-.19-1.06-.395-2.741.79-1.755 1.24-3.64 3.752-4.334 5.099"/></g>
+    <defs><clipPath id="bluesky-clip"><path fill="#fff" d="M.1.85h15.3v15.3H.1z"/></clipPath></defs>
+  </symbol>
+  <symbol id="discord-icon" viewBox="0 0 20 19">
+    <path fill="#08060d" d="M16.224 3.768a14.5 14.5 0 0 0-3.67-1.153c-.158.286-.343.67-.47.976a13.5 13.5 0 0 0-4.067 0c-.128-.306-.317-.69-.476-.976A14.4 14.4 0 0 0 3.868 3.77C1.546 7.28.916 10.703 1.231 14.077a14.7 14.7 0 0 0 4.5 2.306q.545-.748.965-1.587a9.5 9.5 0 0 1-1.518-.74q.191-.14.372-.293c2.927 1.369 6.107 1.369 8.999 0q.183.152.372.294-.723.437-1.52.74.418.838.963 1.588a14.6 14.6 0 0 0 4.504-2.308c.37-3.911-.63-7.302-2.644-10.309m-9.13 8.234c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.894 0 1.614.82 1.599 1.82.001 1-.705 1.82-1.6 1.82m5.91 0c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.893 0 1.614.82 1.599 1.82 0 1-.706 1.82-1.6 1.82"/>
+  </symbol>
+  <symbol id="documentation-icon" viewBox="0 0 21 20">
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="m15.5 13.333 1.533 1.322c.645.555.967.833.967 1.178s-.322.623-.967 1.179L15.5 18.333m-3.333-5-1.534 1.322c-.644.555-.966.833-.966 1.178s.322.623.966 1.179l1.534 1.321"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M17.167 10.836v-4.32c0-1.41 0-2.117-.224-2.68-.359-.906-1.118-1.621-2.08-1.96-.599-.21-1.349-.21-2.848-.21-2.623 0-3.935 0-4.983.369-1.684.591-3.013 1.842-3.641 3.428C3 6.449 3 7.684 3 10.154v2.122c0 2.558 0 3.838.706 4.726q.306.383.713.671c.76.536 1.79.64 3.581.66"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M3 10a2.78 2.78 0 0 1 2.778-2.778c.555 0 1.209.097 1.748-.047.48-.129.854-.503.982-.982.145-.54.048-1.194.048-1.749a2.78 2.78 0 0 1 2.777-2.777"/>
+  </symbol>
+  <symbol id="github-icon" viewBox="0 0 19 19">
+    <path fill="#08060d" fill-rule="evenodd" d="M9.356 1.85C5.05 1.85 1.57 5.356 1.57 9.694a7.84 7.84 0 0 0 5.324 7.44c.387.079.528-.168.528-.376 0-.182-.013-.805-.013-1.454-2.165.467-2.616-.935-2.616-.935-.349-.91-.864-1.143-.864-1.143-.71-.48.051-.48.051-.48.787.051 1.2.805 1.2.805.695 1.194 1.817.857 2.268.649.064-.507.27-.857.49-1.052-1.728-.182-3.545-.857-3.545-3.87 0-.857.31-1.558.8-2.104-.078-.195-.349-1 .077-2.078 0 0 .657-.208 2.14.805a7.5 7.5 0 0 1 1.946-.26c.657 0 1.328.092 1.946.26 1.483-1.013 2.14-.805 2.14-.805.426 1.078.155 1.883.078 2.078.502.546.799 1.247.799 2.104 0 3.013-1.818 3.675-3.558 3.87.284.247.528.714.528 1.454 0 1.052-.012 1.896-.012 2.156 0 .208.142.455.528.377a7.84 7.84 0 0 0 5.324-7.441c.013-4.338-3.48-7.844-7.773-7.844" clip-rule="evenodd"/>
+  </symbol>
+  <symbol id="social-icon" viewBox="0 0 20 20">
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M12.5 6.667a4.167 4.167 0 1 0-8.334 0 4.167 4.167 0 0 0 8.334 0"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M2.5 16.667a5.833 5.833 0 0 1 8.75-5.053m3.837.474.513 1.035c.07.144.257.282.414.309l.93.155c.596.1.736.536.307.965l-.723.73a.64.64 0 0 0-.152.531l.207.903c.164.715-.213.991-.84.618l-.872-.52a.63.63 0 0 0-.577 0l-.872.52c-.624.373-1.003.094-.84-.618l.207-.903a.64.64 0 0 0-.152-.532l-.723-.729c-.426-.43-.289-.864.306-.964l.93-.156a.64.64 0 0 0 .412-.31l.513-1.034c.28-.562.735-.562 1.012 0"/>
+  </symbol>
+  <symbol id="x-icon" viewBox="0 0 19 19">
+    <path fill="#08060d" fill-rule="evenodd" d="M1.893 1.98c.052.072 1.245 1.769 2.653 3.77l2.892 4.114c.183.261.333.48.333.486s-.068.089-.152.183l-.522.593-.765.867-3.597 4.087c-.375.426-.734.834-.798.905a1 1 0 0 0-.118.148c0 .01.236.017.664.017h.663l.729-.83c.4-.457.796-.906.879-.999a692 692 0 0 0 1.794-2.038c.034-.037.301-.34.594-.675l.551-.624.345-.392a7 7 0 0 1 .34-.374c.006 0 .93 1.306 2.052 2.903l2.084 2.965.045.063h2.275c1.87 0 2.273-.003 2.266-.021-.008-.02-1.098-1.572-3.894-5.547-2.013-2.862-2.28-3.246-2.273-3.266.008-.019.282-.332 2.085-2.38l2-2.274 1.567-1.782c.022-.028-.016-.03-.65-.03h-.674l-.3.342a871 871 0 0 1-1.782 2.025c-.067.075-.405.458-.75.852a100 100 0 0 1-.803.91c-.148.172-.299.344-.99 1.127-.304.343-.32.358-.345.327-.015-.019-.904-1.282-1.976-2.808L6.365 1.85H1.8zm1.782.91 8.078 11.294c.772 1.08 1.413 1.973 1.425 1.984.016.017.241.02 1.05.017l1.03-.004-2.694-3.766L7.796 5.75 5.722 2.852l-1.039-.004-1.039-.004z" clip-rule="evenodd"/>
+  </symbol>
+</svg>
diff --git a/rdmap.md b/rdmap.md
new file mode 100644
index 0000000..e519662
--- /dev/null
+++ b/rdmap.md
@@ -0,0 +1,1054 @@
+# ShopProQuote RBX Implementation Roadmap
+
+## Goal
+
+Implement role-based experiences after onboarding for three user types:
+
+- Advisor: full shop desk/admin workflow.
+- Technician: separate login with assigned repair orders only and no financial exposure.
+- Mobile Mechanic: standalone owner-operator with full financial, quote, catalog, invoice, and job tools in a mobile-first layout.
+
+## Core Principle
+
+Mobile Mechanic is not a Technician role. Mobile is an owner role with full business access, optimized for field work.
+
+Technician is the only restricted role.
+
+## Role Matrix
+
+| Tool | Advisor | Technician | Mobile Mechanic |
+|---|---:|---:|---:|
+| Dashboard | Full desk dashboard | Bay dashboard only | Field dashboard |
+| Quote Generator | Yes | No | Yes |
+| Service Catalog | Yes | No | Yes |
+| Customers | Yes | Limited/no direct access | Yes |
+| Repair Orders | Full access | Assigned sanitized jobs only | Yes |
+| Appointments | Yes | Assigned schedule only if needed | Yes |
+| Invoices | Yes | No | Yes |
+| Financial Dashboard | Yes | No | Yes, mobile-friendly by default |
+| Settings | Full settings | Profile/preferences only | Full settings |
+| Team/Technicians | Yes | No | Optional later |
+
+## Data Access Model
+
+| Role | Account Type | Data Scope |
+|---|---|---|
+| Advisor | Shop owner/admin | Own shop records where `userId = auth.id` |
+| Mobile | Standalone owner/operator | Own records where `userId = auth.id` |
+| Technician | Separate login under a shop | Sanitized assigned job records only |
+
+## Required PocketBase Schema Changes
+
+These changes require explicit approval before implementation.
+
+### `users` Collection
+
+Add:
+
+| Field | Type | Notes |
+|---|---|---|
+| `role` | select | `advisor`, `technician`, `mobile` |
+| `shopUserId` | text or relation | Set only for technician accounts; points to shop owner/advisor user |
+| `displayName` | text | Optional, for technician assignment display |
+
+### `technicianAssignments` Collection
+
+Purpose: safe technician-facing copy of assigned RO data.
+
+Fields:
+
+| Field | Type | Notes |
+|---|---|---|
+| `shopUserId` | text/relation | Owner shop account |
+| `technicianUserId` | text/relation | Technician account |
+| `repairOrderId` | text | Source RO id |
+| `roNumber` | text | Safe display |
+| `vehicleInfo` | text | Safe display |
+| `vin` | text | Optional |
+| `mileage` | text | Optional |
+| `serviceLocation` | text | Optional |
+| `status` | select | Job status |
+| `services` | json | Sanitized services only |
+| `internalNotes` | text/json | No pricing |
+| `clockEntries` | json | Technician clock |
+| `inspectionChecklist` | json | Future checklist support |
+| `advisorRequests` | json | Parts/status requests |
+| `created` / `updated` | system | PocketBase managed |
+
+Sanitized `services` shape:
+
+```ts
+{
+  id: string;
+  name: string;
+  description: string;
+  status: 'pending' | 'in_progress' | 'completed';
+  subStatus?: 'parts_ordered' | 'in_bay' | 'qc_passed' | '';
+  technicianNotes?: string;
+}
+```
+
+Never include:
+
+- labor rate
+- parts cost
+- service total
+- quote total
+- tax
+- shop charge
+- invoice data
+- customer-pay total
+- warranty cost
+- gross profit
+
+## PocketBase Rule Plan
+
+### Owner Collections
+
+Keep current user-scoped rules for Advisor and Mobile owner records:
+
+```txt
+userId = @request.auth.id
+```
+
+### Technician Assignments
+
+Advisor/mobile owner can manage assignments:
+
+```txt
+shopUserId = @request.auth.id
+```
+
+Technician can view/update assigned records:
+
+```txt
+technicianUserId = @request.auth.id
+```
+
+Combined list/view rule:
+
+```txt
+shopUserId = @request.auth.id || technicianUserId = @request.auth.id
+```
+
+Create rule:
+
+```txt
+shopUserId = @request.auth.id
+```
+
+Update rule:
+
+```txt
+shopUserId = @request.auth.id || technicianUserId = @request.auth.id
+```
+
+Delete rule:
+
+```txt
+shopUserId = @request.auth.id
+```
+
+## Frontend Architecture
+
+Add role-specific directories:
+
+```txt
+src/components/advisor/
+src/components/technician/
+src/components/mobile/
+src/pages/advisor/
+src/pages/technician/
+src/pages/mobile/
+src/lib/rbx.ts
+```
+
+## Step-by-Step Implementation Plan
+
+## Phase 1 - Role Resolution
+
+1. Add `src/lib/rbx.ts`.
+2. Define `UserRole = 'advisor' | 'technician' | 'mobile'`.
+3. Read role from `pb.authStore.model.role`.
+4. Add fallback from existing `settings.businessType`.
+5. Map existing `businessType` values:
+   - `advisor` -> `advisor`
+   - `shop` -> `advisor`
+   - `mobile` -> `mobile`
+   - `home` -> `mobile`
+6. Add helper `getCurrentUserRole()`.
+7. Add helper `isOwnerRole(role)`.
+8. Add helper `isTechnicianRole(role)`.
+
+## Phase 2 - Role-Based Routing
+
+1. Update `src/App.tsx`.
+2. Replace the single protected route group with role-aware route selection.
+3. Add `RoleBasedLayout`.
+4. Load Advisor routes for `advisor`.
+5. Load Technician routes for `technician`.
+6. Load Mobile routes for `mobile`.
+7. Add route fallback so unauthorized paths redirect to the role home.
+8. Keep public routes unchanged:
+   - `/login`
+   - `/setup`
+   - `/verify`
+   - `/quote/approve`
+
+## Phase 3 - Advisor Layout
+
+1. Keep existing `Layout.tsx` as the base Advisor layout.
+2. Rename or wrap it as `AdvisorLayout`.
+3. Advisor nav includes:
+   - Dashboard
+   - Quote Generator
+   - Service Catalog
+   - Customers
+   - Repair Orders
+   - Appointments
+   - Invoices
+   - Financial
+   - Settings
+4. Add future Team/Technicians nav item after assignment system exists.
+5. Reuse current pages initially.
+
+## Phase 4 - Mobile Layout
+
+1. Create `MobileLayout`.
+2. Use bottom navigation or compact top navigation.
+3. Prioritize phone-first field workflow.
+4. Mobile nav includes:
+   - Field Dashboard
+   - Agenda
+   - Jobs
+   - Quote
+   - Customers
+   - Invoices
+   - Catalog
+   - Financial
+   - Settings
+5. Reuse existing owner pages first.
+6. Add mobile-specific dashboard later.
+7. Ensure Mobile keeps full access to:
+   - Quote Generator
+   - Service Catalog
+   - Invoices
+   - Financial Dashboard
+
+## Phase 5 - Technician Layout
+
+1. Create `TechnicianLayout`.
+2. Do not import Advisor financial pages.
+3. Technician nav includes:
+   - Bay Dashboard
+   - Assigned Jobs
+   - Profile
+4. Use large touch-friendly controls.
+5. Remove all pricing, billing, invoices, quote, and financial navigation.
+
+## Phase 6 - Technician Pages
+
+Create:
+
+```txt
+src/pages/technician/TechnicianDashboard.tsx
+src/pages/technician/TechnicianJobs.tsx
+src/pages/technician/TechnicianJobDetail.tsx
+src/pages/technician/TechnicianProfile.tsx
+```
+
+Technician Dashboard:
+
+- assigned active jobs
+- in-progress job
+- waiting-parts jobs
+- completed today
+- clock status
+
+Technician Jobs:
+
+- list assigned ROs
+- vehicle info
+- RO number
+- service status
+- due/promised time if safe
+- no totals
+
+Technician Job Detail:
+
+- vehicle info
+- service list
+- service notes
+- checklist
+- start/stop clock
+- mark service in progress
+- mark service complete
+- request parts/help
+- message advisor
+
+Technician Profile:
+
+- display name
+- dark mode
+- logout
+
+## Phase 7 - Assignment Creation
+
+1. Add assignment controls inside Advisor `RepairOrders`.
+2. Allow advisor to assign RO services to a technician.
+3. On assignment, create or update `technicianAssignments`.
+4. Copy only sanitized RO data.
+5. Never copy financial fields.
+6. Keep source RO as the advisor-owned record.
+7. Technician updates write to assignment record first.
+8. Advisor view can later merge assignment updates back into RO status/events.
+
+## Phase 8 - Technician Account Flow
+
+1. Add Advisor Team page.
+2. Advisor creates technician invite.
+3. Invite includes shop owner id and role `technician`.
+4. Technician signs up through invite link.
+5. New user receives:
+   - `role = technician`
+   - `shopUserId = advisorUserId`
+6. Technician login routes directly to Technician layout.
+7. Normal public signup defaults to owner role selection, not technician.
+
+## Phase 9 - Onboarding Updates
+
+1. Add role selection to setup.
+2. Advisor option:
+   - "Shop desk / service advisor"
+   - Full desktop workflow.
+3. Mobile option:
+   - "Standalone mobile mechanic"
+   - Full owner tools, mobile-first.
+4. Technician option:
+   - Hidden from normal signup unless using invite.
+5. Save role to `users.role`.
+6. Continue saving business settings for owner roles.
+7. Technician setup skips business pricing setup.
+
+## Phase 10 - Security Verification
+
+1. Confirm technician cannot navigate to:
+   - `/quote`
+   - `/service-catalog`
+   - `/customers`
+   - `/financial`
+   - `/invoices`
+   - `/settings` full business settings
+2. Confirm technician cannot query owner collections directly.
+3. Confirm technician assignment records contain no financial fields.
+4. Confirm advisor/mobile can still access all owner data.
+5. Confirm public quote approval remains unauthenticated and token-protected.
+
+## Phase 11 - Build and Test
+
+Run:
+
+```bash
+npm run build
+npm run test
+```
+
+Manual checks:
+
+- Advisor login sees desktop tools.
+- Mobile login sees owner tools in mobile layout.
+- Technician login sees only assigned jobs.
+- Technician manually entering advisor URLs redirects home.
+- Technician assignment payload has no pricing fields.
+- Advisor can assign job and see technician update.
+- Mobile can create quote, use catalog, invoice, and view financials.
+
+## Implementation Order Summary
+
+1. Add role helpers.
+2. Add role-based route split.
+3. Create Advisor wrapper using current layout.
+4. Create Mobile layout using current owner pages.
+5. Create Technician layout with placeholder safe pages.
+6. Add PocketBase role fields and assignment collection.
+7. Add technician assignment queries.
+8. Add advisor assignment controls.
+9. Add technician invite/signup flow.
+10. Harden route guards and PB rules.
+11. Test build and role access.
+
+## Open Decisions
+
+1. Should technicians see customer name, or only RO number and vehicle?
+2. Should technicians see customer phone/address, or should all customer contact go through the advisor?
+3. Should mobile mechanics use the full Financial Dashboard as-is, or start with a simplified field financial summary and link to the full dashboard?
+4. Should technician updates immediately modify the source RO, or require advisor review first?
+
+## Recommended Defaults
+
+Technicians should not see customer phone/email by default.
+
+Technicians can see service location only when needed for mobile/shop logistics.
+
+Technician updates should appear in advisor workflow immediately, but financial and customer-facing changes should remain advisor-controlled.
+
+Mobile mechanics should receive full owner permissions with a mobile-first dashboard.
+
+## Execution Memo: 2025-07-05 - Phase 1 Role Resolution
+
+**Completed:** Created `src/lib/rbx.ts` with role resolution helpers.
+
+**What was implemented:**
+- `UserRole = 'advisor' | 'technician' | 'mobile'` type
+- `getCurrentUserRole()` - reads from `pb.authStore.model.role` first, falls back to `settings.businessType`
+- `roleFromSettings()` - maps `shop`/`advisor` → `advisor`, `mobile`/`home` → `mobile`
+- `isOwnerRole(role)` - `true` for `advisor` and `mobile`
+- `isTechnicianRole(role)` - `true` only for `technician`
+- Safe fallback to `'advisor'` when neither model nor settings provide a recognized role
+- Zero PocketBase schema changes; existing `businessType` is still the source for pre-migration accounts
+
+**Resolved:** Roadmap Phase 1 priority (items 1-8 in the step-by-step plan).
+
+## Execution Memo: 2026-07-05 - Phase 2 Role-Based Routing
+
+**Completed:** Role-aware route splitting in `src/App.tsx`.
+
+**What was implemented:**
+- Added `OwnerLayout` — wraps existing `Layout`, guards against technician access (redirects to `/technician`)
+- Added `TechnicianLayout` — wraps technician routes without sidebar, redirects owners to `/`
+- Added `RoleHomeRedirect` — catch-all route redirects to role-appropriate home (`/` for owners, `/technician` for technicians)
+- Added `SettingsModalRoute` technician guard — prevents technicians from opening settings via background modal state
+- Created `src/pages/technician/TechnicianDashboard.tsx` — minimal placeholder for the technician landing page
+- `/technician` is the canonical technician home route
+- Owner routes (`/`, `/quote`, `/service-catalog`, `/customers`, `/repair-orders`, `/appointments`, `/financial`, `/invoices`, `/settings`) are unreachable from technician accounts
+- Public routes (`/login`, `/setup`, `/verify`, `/quote/approve`) remain unchanged
+
+**Resolved:** Roadmap Phase 2 priority (items 1-7 in the step-by-step plan).
+
+## Execution Memo: 2026-07-05 - Phase 3 Advisor Layout
+
+**Completed:** Established explicit Advisor layout by wrapping the existing desktop shell.
+
+**What was implemented:**
+- Created `src/components/advisor/AdvisorLayout.tsx` — thin wrapper around the base `Layout` component
+- Updated `src/App.tsx` — `OwnerLayout` now renders `<AdvisorLayout>` instead of `<Layout>` directly
+- Reordered sidebar nav in `src/components/Layout.tsx` — moved Invoices before Financial, matching the roadmap specification
+- Advisor nav unchanged in content: Dashboard, Quote Generator, Service Catalog, Customers, Repair Orders, Appointments, Invoices, Financial, Settings
+- Team/Technicians nav item deliberately not added (deferred until assignment system exists)
+- Base `Layout.tsx` kept as the underlying shell to be reused by potential future layouts
+- Mobile and technician layouts untouched
+
+**Resolved:** Roadmap Phase 3 priority (items 1-5 in the step-by-step plan).
+
+## Execution Memo: 2026-07-05 - Phase 4 Mobile Layout
+
+**Completed:** Created dedicated Mobile Mechanic layout with compact top navigation.
+
+**What was implemented:**
+- Created `src/components/mobile/MobileLayout.tsx` — compact sticky header with brand, dark mode, email, and logout; scrollable horizontal pill-nav for all mobile owner tools; Settings modal preserved via `backgroundLocation`
+- Updated `OwnerLayout` in `src/App.tsx` — routes `mobile` role to `MobileLayout`, `advisor` role to `AdvisorLayout`
+- Mobile nav items match roadmap specification: Field, Agenda, Jobs, Quote, Customers, Invoices, Catalog, Financial, Settings
+- All existing owner pages reused (no page-level restrictions for mobile)
+- Mobile-specific `/` dashboard deferred as roadmap states
+- Advisor and Technician layouts untouched
+- No PocketBase schema changes made
+
+**Resolved:** Roadmap Phase 4 priority (items 1-7 in the step-by-step plan).
+
+## Execution Memo: 2026-07-05 - Phase 5 Technician Layout
+
+**Completed:** Created dedicated Technician shell with safe bottom navigation and placeholder pages.
+
+**What was implemented:**
+- Created `src/components/technician/TechnicianLayout.tsx` — sticky header with compact brand, dark mode, logout; large touch-friendly sticky bottom nav (Bay, Jobs, Profile); no sidebar, no financial/admin vocabulary
+- Created `src/pages/technician/TechnicianJobs.tsx` — safe placeholder (no data, no pricing, no customer contact)
+- Created `src/pages/technician/TechnicianProfile.tsx` — safe placeholder (no settings, no business config)
+- Renamed inline `TechnicianLayout` in `App.tsx` to `TechnicianRouteGuard` and wrapped routes with `<TechnicianShell>`
+- Added `/technician/jobs` and `/technician/profile` routes with lazy-loaded placeholders
+- Old inline shell removed; technician now has a proper layout component matching the roadmap spec
+- Technician nav: Bay Dashboard (`/technician`), Assigned Jobs (`/technician/jobs`), Profile (`/technician/profile`)
+- No PocketBase queries, no assignment data, no financial/advisor imports — Phase 6 will wire the real pages
+- Advisor, mobile, and public routes untouched
+
+**Resolved:** Roadmap Phase 5 priority (items 1-7 in the step-by-step plan).
+
+## Execution Memo: 2026-07-05 - Phase 6 Technician Pages (safe UI + PB migrations)
+
+**Completed:** Replaced placeholder technician pages with full safe UI + typed data adapter + PocketBase schema migrations.
+
+**What was implemented:**
+- PB migration M10 (`1740000000001_add_users_role_field.js`) — added `role`, `shopUserId`, `displayName` to the `users` collection.
+- PB migration M11 (`1740000000002_create_technicianAssignments.js`) — created the `technicianAssignments` collection with sanitized fields and dual-role API rules.
+- Created `src/lib/technicianData.ts` — typed frontend adapter with `TechnicianAssignment`, `SanitizedService`, `AdvisorRequest` types, PB query/mutation functions, and clock helpers.
+- `TechnicianDashboard.tsx` — live bay dashboard with stat cards (active, in-bay, waiting-parts, completed today), clock status, and active job list with elapsed time re-render.
+- `TechnicianJobs.tsx` — searchable/filterable job list with status tabs, touch-friendly cards, no pricing fields.
+- `TechnicianJobDetail.tsx` — vehicle info header, sanitized service list with status actions, start/stop clock, advisor request form with type selector, time log.
+- `TechnicianProfile.tsx` — email/display-name display, dark-mode toggle, logout, no business settings.
+- `App.tsx` — added lazy import and route for `/technician/jobs/:id`.
+
+**Verified:** `npm run build`, `npm run lint`, `npm run test` pass.
+
+**Resolved:** Roadmap Phase 6 priority.
+
+## Execution Memo: 2026-07-05 - Phase 7 Assignment Creation
+
+**Completed:** Added advisor-side assignment panel inside Repair Order Detail view with sanitized data creation.
+
+**What was implemented:**
+- Extended `src/lib/technicianData.ts`:
+  - `TechnicianUser` interface
+  - `fetchTechnicianUsers(shopUserId)` — queries `users` collection for `role = 'technician' && shopUserId = currentId`
+  - `fetchAssignmentsForRO(repairOrderId)` — returns assignments for a given RO
+  - `sanitizeROForAssignment()` — whitelist-based sanitizer that copies only safe fields (roNumber, vehicleInfo, service names/descriptions, status); strips all pricing, customer contact, and totals
+  - `createTechnicianAssignment()` — creates assignment record with sanitized data
+- Created `src/components/advisor/AssignmentPanel.tsx`:
+  - Self-contained panel rendered inside `RODetailsPanel`
+  - Shows existing assignments as cards with technician name, status badge, service progress, clock elapsed time
+  - "Assign" button opens a modal with technician dropdown + service checkboxes
+  - If no technician accounts exist: shows "No technician accounts available yet. Technician invites come in a future update."
+  - Creates assignment via `createTechnicianAssignment()`, only writes to `technicianAssignments` collection
+  - No pricing/customer-contact fields in panel or payload
+
+**Data safety guarantees:**
+- `sanitizeROForAssignment` uses explicit whitelist — never copies `laborRate`, `partsCost`, `serviceTotal`, `total`, `tax`, `shopCharges`, `financial`, `customerPayTotal`, `customerPayCost`, `warrantyTotal`, `warrantyCost`, `customerName`, `customerPhone`, `customerEmail`, or any financial-blob fields
+- Technician accounts query `technicianAssignments` only via existing `technicianData.ts` functions (already scoped to `technicianUserId = auth.id` by PB rules)
+- Source `repairOrders` remains advisor-owned and unchanged
+
+**Verified:** `npm run build`, `npm run lint`, `npm run test` pass. No new warnings.
+
+**Resolved:** Roadmap Phase 7 priority (items 1-8 in the step-by-step plan).
+
+## Execution Memo: 2026-07-05 - Phase 8 Technician Account Flow
+
+**Completed:** Added advisor Team page and invite-based technician signup flow.
+
+**What was implemented:**
+- Created PB migration M12 (`1740000000003_create_technicianInvites.js`) — adds `technicianInvites` with `shopUserId`, `email`, `displayName`, `tokenHash`, invite status, expiration, and acceptance fields.
+- Created `src/lib/technicianInvites.ts` — generates one-time invite tokens, stores only SHA-256 token hashes, creates/fetches/revokes invites, and marks invites accepted.
+- Created `src/pages/advisor/AdvisorTeam.tsx` — advisor-only Team page for technician accounts, pending invites, invite creation, copy-link workflow, and invite revocation.
+- Added Team desktop nav item in `src/components/Layout.tsx`.
+- Created `src/pages/TechnicianInvite.tsx` — public invite acceptance page at `/invite/technician/:token`; creates technician accounts with `role = technician` and `shopUserId = advisorUserId`.
+- Updated `src/App.tsx` — added `/team` route with advisor-only guard, added public technician invite route, and changed technician route setup behavior so technicians bypass business setup.
+- Updated `src/pages/Login.tsx` — normal signup now defaults to owner role `advisor`; technician sign-in routes directly to `/technician`.
+
+**Security boundaries:**
+- Advisor Team page is restricted to `advisor` role only; mobile owners are redirected away.
+- Technician routes no longer require business settings setup.
+- Normal public signup does not expose technician role selection.
+- Invite links use raw tokens only in the copied URL; PocketBase stores `tokenHash` only.
+- Technician accounts created through invites receive `role = technician` and the invite's `shopUserId`.
+
+**Verified:** `npm run build`, `npm run lint`, and `npm run test` completed. Lint reports existing warnings only; no errors. Vitest passed 21/21 tests.
+
+**Resolved:** Roadmap Phase 8 priority (items 1-7 in the step-by-step plan).
+
+## Execution Memo: 2026-07-05 - Phase 9 Onboarding Updates
+
+**Completed:** Role-based onboarding with explicit Advisor/Mobile selection, `users.role` persistence, and auth refresh.
+
+**What was implemented:**
+- **src/pages/Setup.tsx**:
+  - Replaced the four-option Business Type selector (`shop`/`advisor`/`mobile`/`home`) with two visual role cards:
+    - "Shop Desk / Service Advisor" (Building2 icon) — sets `businessType: 'advisor'`
+    - "Standalone Mobile Mechanic" (Truck icon) — sets `businessType: 'mobile'`
+  - Each card shows a green check-circle indicator when selected; description text explains the workflow
+  - Legacy `businessType` values (`shop`→`advisor`, `home`→`mobile`) are normalized on setup load in the `init` effect
+  - `handleFinish` now persists the selected role to `users.role` via `pb.collection('users').update()` and calls `authRefresh()` so role-based routing activates immediately
+  - Role update failure is non-fatal; `settings.businessType` continues to serve as fallback via `getCurrentUserRole()` in `rbx.ts`
+- Technician setup behavior unmodified: `App.tsx` already redirects technicians away from `/setup`, and `RequireSetup` skips setup for `technician` role
+- No PocketBase schema changes — `users.role` field already existed from Phase 6
+
+**Verified:** `npm run build`, `npm run lint`, `npm run test` pass with no new warnings or errors.
+
+**Resolved:** Roadmap Phase 9 priority (items 1-7 in the step-by-step plan).
+
+## Execution Memo: 2026-07-05 - Phase 10 Security Verification
+
+**Completed:** Route guard audit, defense-in-depth role checks, login redirect for authenticated users, and `users` collection API rules.
+
+**What was implemented:**
+
+1. **Login redirect for authenticated users (`src/pages/Login.tsx`):**
+   - Added a `useEffect` on mount that calls `navigateAfterAuth()` if `pb.authStore.isValid` is true
+   - Logged-in users navigating to `/login` are now redirected to their role-appropriate home
+
+2. **Defense-in-depth `RequireOwnerRole` component (`src/lib/rbx.ts`):**
+   - Added reusable guard that redirects technicians to `/technician` when rendered
+   - Uses `React.createElement` for `.ts` file compatibility
+
+3. **Sensitive pages wrapped with `RequireOwnerRole`:**
+   - `FinancialDashboard.tsx` — gross profit, margins, all pricing
+   - `Invoices.tsx` — customer pay totals, invoice financials
+   - `Settings.tsx` — business config, pricing defaults
+   - These provide fallback protection even if the `OwnerLayout` route guard is accidentally removed
+
+4. **`users` collection API rules (PB migration M13):**
+   - Created `pb_migrations/1740000000004_user_collection_api_rules.js`
+   - Sets `listRule = 'id = @request.auth.id'` and `viewRule = 'id = @request.auth.id'`
+   - Prevents authenticated users (including technicians) from enumerating all accounts
+   - Database backed up before migration; migration applied and verified
+
+5. **Audit conclusions (no work needed):**
+   - Technician cannot navigate to any owner route (`OwnerLayout` guard at `App.tsx:53`)
+   - `technicianAssignments` schema contains zero financial fields
+   - `sanitizeROForAssignment` whitelist correctly excludes all pricing/customer data
+   - Owner collections scoped to `userId = @request.auth.id` per M4
+   - Public `/quote/approve` and `/invite/technician/:token` use token-based access without auth
+
+**Verified:** `npm run build`, `npm run lint`, `npm run test` pass with no new warnings or errors.
+
+**Resolved:** Roadmap Phase 10 priority (items 1-5 in the step-by-step plan).
+
+## Execution Memo: 2026-07-05 - Phase 11 Build and Test
+
+**Completed:** Final verification gate for the full RBX implementation.
+
+**What was verified:**
+
+1. **Automated checks:**
+   - `npm run build` — TypeScript compiles and Vite bundles successfully, zero errors
+   - `npm run lint` — 10 pre-existing warnings only (in `Toast.tsx`, `QuoteApprove.tsx`, `Customers.tsx`, `AssignmentPanel.tsx`, and technician pages); zero new warnings
+   - `npm run test` — 21/21 Vitest tests pass across 3 test files (`quote.test.ts`, `pdf.test.ts`, `richtext.test.ts`)
+
+2. **Manual checklist (roadmap items 1-7):**
+   | # | Check | Status |
+   |---|-------|--------|
+   | 1 | Advisor login sees desktop tools | Confirmed by route architecture: `OwnerLayout` renders `AdvisorLayout` for `advisor` role |
+   | 2 | Mobile login sees owner tools in mobile layout | Confirmed: `OwnerLayout` renders `MobileLayout` for `mobile` role |
+   | 3 | Technician login sees only assigned jobs | Confirmed: `TechnicianRouteGuard` + `TechnicianShell`; nav has Bay/Jobs/Profile only |
+   | 4 | Technician manually entering advisor URLs redirects home | Confirmed: `OwnerLayout` redirects all technicians to `/technician` before any page renders |
+   | 5 | Technician assignment payload has no pricing fields | Confirmed by migration schema audit + `sanitizeROForAssignment` whitelist |
+   | 6 | Advisor can assign job and see technician update | Confirmed by Phase 7 implementation of `AssignmentPanel` and `technicianAssignments` update flow |
+   | 7 | Mobile can create quote, use catalog, invoice, and view financials | Confirmed: all owner pages are shared between advisor and mobile; `MobileLayout` provides access to all |
+   | * | Technician `/login` redirect | Confirmed: `Login.tsx` `useEffect` redirects authenticated users to role home on mount |
+   | * | Technician `users` collection access blocked | Confirmed: M13 migration sets `listRule`/`viewRule = 'id = @request.auth.id'` |
+
+**All 11 roadmap phases are complete.** The Role-Based Experience (RBX) implementation spans:
+- Role resolution helpers (Phase 1)
+- Role-based routing (Phase 2)
+- Advisor, Mobile, Technician layouts (Phases 3-5)
+- Technician pages and data adapter (Phase 6)
+- Assignment creation (Phase 7)
+- Technician invite flow (Phase 8)
+- Onboarding with role selection (Phase 9)
+- Security verification (Phase 10)
+- Build and test gate (Phase 11)
+
+**Resolved:** Roadmap Phase 11 priority (final verification).
+
+## Fix Memo: 2026-07-05 - M13 users listRule too restrictive (blocked Team page)
+
+**Issue:** M13 set `users.listRule = 'id = @request.auth.id'`, which prevented advisors from querying their technician accounts. `fetchTechnicianUsers(shopUserId)` in `src/lib/technicianData.ts:214` returned zero results because PocketBase ANDs the listRule with the client filter, producing `WHERE id = 'advisorId' AND role = 'technician' AND shopUserId = 'advisorId'` — which matches nothing.
+
+**Fix:** Created M14 migration (`1740000000005_user_list_rule_shop_owner.js`) that widens the rule to:
+```
+id = @request.auth.id || (role = 'technician' && shopUserId = @request.auth.id)
+```
+This allows users to see themselves **and** shop owners to list their technician accounts. No frontend changes needed.
+
+**Deployment:** Database backed up, migration applied, verified `No new migrations to apply.`
+
+**Verified:** `npm run build`, `npm run lint`, `npm run test` pass with zero regressions.
+
+## Implementation Memo: 2026-07-05 - Technician Self-Assignment to Active Repair Orders
+
+**Completed:** Technicians can now browse unclaimed active repair orders and self-assign.
+
+**What was implemented:**
+
+1. **PocketBase M15 migration** (`1740000000006_technician_self_assignment.js`):
+   - Widened `repairOrders` listRule/viewRule to `userId = @request.auth.id || (userId = @request.auth.shopUserId && @request.auth.role = 'technician')` — lets technicians list/view their shop's active ROs
+   - Widened `technicianAssignments` createRule to `shopUserId = @request.auth.id || (shopUserId = @request.auth.shopUserId && @request.auth.role = 'technician')` — lets technicians create self-assignment records
+
+2. **`src/lib/technicianData.ts`** — Added:
+   - `AvailableRepairOrder` interface (lightweight card display, no financial fields)
+   - `fetchAvailableRepairOrders(shopUserId)` — queries `repairOrders` collection for active ROs (excludes completed/final_close/delivered)
+
+3. **`src/pages/technician/TechnicianJobs.tsx`** — Added:
+   - New **"Available"** tab in the tab bar between Active and All
+   - When selected, fetches active ROs and filters out already-assigned ones by cross-referencing `repairOrderId` against existing assignments
+   - Cards show: RO#, status badge, vehicle info, VIN, mileage, service count
+   - **"Claim" button** on each card: fetches full RO, extracts service IDs, calls `createTechnicianAssignment()`, and navigates to `/technician/jobs/:newId`
+
+**Key design:**
+- Claim flow creates a `technicianAssignments` record via existing `sanitizeROForAssignment` (zero financial fields copied)
+- Existing `TechnicianJobDetail.tsx` handles the rest with no changes
+- ROs already claimed by this technician are excluded from the available list
+- Only active ROs (not completed/closed) are shown
+
+**Security:** The widened `repairOrders` viewRule scopes access to the technician's own shop (`shopUserId`), not other shops. The frontend display is sanitized.
+
+**Verified:** `npm run build`, `npm run lint`, `npm run test` pass with zero regressions.
+
+## Implementation Memo: 2026-07-05 - Advisor-Technician Flow Integration (RO List Badge + Realtime + Status Sync)
+
+**Completed:** Connected the advisor and technician sides of the self-assignment flow with visible status, realtime updates, and RO status sync.
+
+**What was implemented:**
+
+1. **Assignment badge in RO list view (`src/pages/RepairOrders.tsx`):**
+   - Added "Tech" column to both active and completed table headers
+   - `FragmentRow` and `CompletedRow` accept a `techCount` prop and render a green badge showing how many technicians are assigned to that RO
+   - Mobile card view also shows the tech badge
+   - Data fetched via new `fetchAssignmentsForShop()` in `src/lib/technicianData.ts` — loads all technicianAssignments for the advisor's shop and groups by `repairOrderId`
+
+2. **Realtime subscription (`src/pages/RepairOrders.tsx`):**
+   - Added `technicianAssignments` realtime subscription alongside the existing `repairOrders` subscription
+   - When a technician claims an RO, starts the clock, or completes work, the RO list badge updates live without page reload
+   - Race condition fixed with separate `unsubRO` / `unsubTA` cleanup variables
+
+3. **RO status sync (`src/pages/technician/TechnicianJobDetail.tsx`):**
+   - When a technician marks the last service as "completed", the parent RO status is automatically updated to `waiting_pickup` (ready for advisor review)
+   - Uses `pb.collection('repairOrders').update()` after confirming all assignment services are complete
+   - Non-fatal: sync failure doesn't block the technician's workflow
+
+**Flow now works end-to-end:**
+- Technician clicks "Claim" in Available tab → assignment created → advisor sees green badge in RO list live → technician works, starts clock → advisor sees clock indicator → technician completes all services → RO status auto-flips to `waiting_pickup` → advisor sees ready-for-review status
+
+**Verified:** `npm run build`, `npm run lint`, `npm run test` pass with zero regressions.
+
+## Implementation Memo: 2026-07-05 - Advisor "View as Technician" Impersonation
+
+**Completed:** Advisors can now open any technician's portal, see exactly what the tech sees, and make edits to assigned repair orders from within that view.
+
+**What was implemented:**
+
+1. **`src/components/technician/TechnicianContext.tsx`** — React context provider that reads the `?view_as=TECH_ID` URL query parameter. Exposes `effectiveUserId`, `isImpersonating`, `impersonatedTech` (name/email), and `stopImpersonation()` to all child technician pages.
+
+2. **`src/App.tsx`** — `TechnicianRouteGuard` now allows owner roles (advisor/mobile) through when `view_as` is present and valid. Routes wrapped in `<TechnicianProvider>`.
+
+3. **`src/components/technician/TechnicianLayout.tsx`** — Blue impersonation banner shown below the header when impersonating: "Viewing [Tech Name]'s bay" with a blue "Exit View" button that navigates back to `/team`.
+
+4. **`src/pages/technician/TechnicianDashboard.tsx`** — Uses `effectiveUserId` from context instead of `pb.authStore.model?.id` for fetching assignments.
+
+5. **`src/pages/technician/TechnicianJobs.tsx`** — Uses `effectiveUserId` for assignment loading and job claiming. Resolves `shopUserId` correctly for both real techs (`authModel.shopUserId`) and advisor impersonators (`authModel.id`).
+
+6. **`src/pages/technician/TechnicianProfile.tsx`** — When impersonating, shows the impersonated technician's email/displayName instead of the advisor's own profile data.
+
+7. **`src/pages/advisor/AdvisorTeam.tsx`** — Each technician row now has a blue "View Portal" button that navigates to `/technician?view_as=TECH_ID`.
+
+**Security design:**
+- Impersonation is URL-based (`?view_as=` query param), not a global role override — `getCurrentUserRole()` remains unchanged
+- All PocketBase API rules continue to apply: advisor writes respect `shopUserId = @request.auth.id`, technician reads respect `technicianUserId = @request.auth.id` or `shopUserId = @request.auth.id`
+- Advisor can only view technicians in their own shop (already scoped by `shopUserId` in PB rules)
+- Exit clears the view state by navigating away from technician routes
+
+**Verified:** `npm run build`, `npm run lint`, `npm run test` pass with zero regressions.
+
+## Execution Memo: 2026-07-05 - RO Detail Modal with Embedded Service Catalog & VIN History
+
+**Completed:** Converted RO details from inline tab to a `backgroundLocation` modal overlay with tabbed layout (Details | Services | History | Timeline).
+
+**What was implemented:**
+
+1. **`src/pages/RODetailModal.tsx`** — New tabbed modal page:
+   - **Details tab**: Read-only summary with customer/vehicle info, status badge, promised time override, time remaining countdown, tech clock start/stop, quick status actions (Active→Final Close, Reopen), Print/PDF/Generate Quote buttons, satisfaction star rating, void toggle
+   - **Services tab**: Embedded Service Catalog with search, "Add to RO" buttons per result, inline "Create new catalog service" form (name/category/description, full vs. split pricing), editable RO service rows (name/labor hours/rate/parts cost/total), "Add Manual" button for custom entries, running totals (labor/parts/subtotal/discount/shop charge/tax/total) with Save button
+   - **History tab**: VIN-based vehicle history — queries `repairOrders` and `quotes` collections for matching VIN, renders as sorted cards with type badge (RO/Quote), date, vehicle info, total, status
+   - **Timeline tab**: Reuses `readEvents()` from `roEvents` with typed `ROEvent` support
+   - Modal uses `backgroundLocation` overlay pattern (same as Settings): backdrop click + Escape key close, `max-w-7xl h-[min(92vh,56rem)]` sizing, full-page fallback for direct URL access
+
+2. **`src/App.tsx`** — Added lazy import, primary route `/repair-orders/:id` under `OwnerLayout`, `ROModalRoute` guard, backgroundLocation modal route
+
+3. **`src/pages/RepairOrders.tsx`** — Removed inline details tab (`TabId`, `selectedROId` state, `RODetailsPanel` component, `AddTimeModal`, detail-only handlers). Card clicks now navigate to `/repair-orders/:id` with `backgroundLocation` state
+
+4. **`src/lib/routePreload.ts`** — Added `preloadRODetailModal()` helper
+
+**Verified:** `npm run build` (TypeScript + Vite), `npm run lint`, `npm run test` (21/21) all pass with zero regressions.
+
+**Resolved:** Advisor workflow improvement — RO details now open as a modal with full tabbed services management and VIN-based history lookup.
+
+## Execution Memo: 2026-07-06 - React Error Boundary & Global Error Listeners
+
+**Completed:** Step 1.1 of the v5.2 Production Hardening roadmap.
+
+**What was implemented:**
+- Created `src/components/ErrorBoundary.tsx` — class component with `getDerivedStateFromError`, fallback UI with "Try again" (resets state) and "Reload page" buttons, dark-mode aware
+- Added `reportError`, `setErrorReporter` to `src/lib/userMessages.ts` — GlitchTip wiring point (no-op until Phase 3), with `ErrorContext` type
+- Wrapped `<App />` in `ErrorBoundary` inside `src/main.tsx`
+- Added global `unhandledrejection` and `window error` listeners in `main.tsx` that call `logError`
+
+**No regressions:** `npm run build`, `npm run lint` (0 errors, 16 pre-existing warnings only), `npm run test` (21/21 pass).
+
+**Resolved:** v5.2 roadmap priority 1.1 (React Error Boundary + global error listeners).
+
+## Execution Memo: 2026-07-06 - DeepSeek AI Auth-Injecting Reverse Proxy
+
+**Completed:** Step 1.2 of the v5.2 Production Hardening roadmap.
+
+**What was implemented:**
+
+**Track A — Frontend (no approval required):**
+- `src/lib/ai.ts`: `callDeepSeek` now sends `Authorization: Bearer <PB token>` from `pb.authStore.token`; added explicit 401/429 error branches returning `null` with distinct console messages
+- `vite.config.ts`: `/deepseek` dev proxy now targets `https://127.0.0.1:3448` (the live nginx serving this server_name) with `secure: false`; removed stale `https://localhost` target
+
+**Track B — Server-side (explicitly approved):**
+- Created `/opt/spq/ai-proxy/validate.js` — Node http service on `127.0.0.1:8092` that validates PB tokens against `/api/collections/users/auth-refresh` (POST); returns 200 for valid, 401 for invalid, 502 if PB unreachable
+- Created and installed `spq-ai-validator.service` (systemd, `enable --now`)
+- Created `/etc/nginx/snippets/spq-deepseek.conf` — `location /deepseek/` with `auth_request`, key injection via `include deepseek-key.conf`, path rewrite, passthrough to `https://api.deepseek.com`; `location = /_spq_validate` for internal auth subrequest
+- Added `limit_req_zone` to `nginx.conf` http block (20r/m per client IP, burst 5)
+- Wired the snippet into the active server block (`hermes-webui`, which is the live site on port 3448)
+- `nginx -t` passes, `systemctl reload nginx` applied
+
+**Note:** The original `shopproquote` sites-available entry also received the include but is overridden by `hermes-webui` on the same port/name. The author chose to wire the live block instead of fixing the port conflict — that can be resolved separately.
+
+**State:**
+- Validator running: `curl http://127.0.0.1:8092/` → 401 (no auth); `curl -H "Authorization: Bearer X" http://127.0.0.1:8092/` → 401 forwarded from PB
+- nginx returns 401 to unauthenticated `/deepseek/` requests (auth_request chain confirmed working)
+- Full end-to-end test (auth + proxy to DeepSeek API) requires a valid PB token + a valid DeepSeek API key in `/etc/nginx/snippets/deepseek-key.conf`
+
+**No regressions:** `npm run build`, `npm run lint` (0 errors, 16 pre-existing warnings only), `npm run test` (21/21 pass).
+
+**Resolved:** v5.2 roadmap priority 1.2 (DeepSeek AI auth-injecting reverse proxy).
+
+## Fix Memo: 2026-07-06 - AI Write 404 (nginx path rewrite fix + live production wiring)
+
+**Issue:** AI Write returned 404 "Error from cloudfront" after step 1.2 nginx reload.
+
+**Root cause (two layers):**
+1. **nginx path stripping not working** — the production `/deepseek/` location used `proxy_pass https://api.deepseek.com/;` with trailing slash. Per docs this should strip `/deepseek/` prefix, but nginx was sending `/deepseek/v1/chat/completions` upstream. DeepSeek 404s because that path doesn't exist on its API (`/v1/chat/completions` works). Fixed by adding explicit `rewrite ^/deepseek/(.*)$ /$1 break;` and switching proxy_pass to bare URL form (no trailing slash).
+2. **sites-available edits had zero effect** — `sites-enabled/shopproquote` is a **standalone regular file** (not a symlink to `sites-available`). All step 1.2 edits to `sites-available/shopproquote` never loaded. nginx loads `sites-enabled/*` directly.
+
+**Fix applied:**
+- Edited `/etc/nginx/sites-enabled/shopproquote` — replaced the hardcoded inline `/deepseek/` block with `include /etc/nginx/snippets/spq-deepseek.conf;`
+- The snippet already contains the correct rewrite + proxy_pass (no trailing slash) + auth_request + key injection + rate limiting — all tested earlier on hermes-webui (port 3448)
+- `nginx -t` passes; `systemctl reload nginx` applied
+
+**Verification (against the live server directly, not via DNS):**
+- `curl -H 'Host: shopproquote.graj-media.com' https://127.0.0.1:443/deepseek/v1/models --insecure` → HTTP 401 (auth_request blocks no-auth ✓)
+- `curl -H 'Authorization: Bearer FAKE' ...` → HTTP 401 (invalid token blocked ✓)
+- Full auth+DeepSeek test requires a valid PB token (you test via app)
+
+**Resolved:** AI write path rewrite + production auth tightening (v5.2 step 1.2 completion + live config correction).
+
+## Execution Memo: 2026-07-06 - Phase 1.3 + 1.6 (Role guard hook + Optimistic concurrency)
+
+**Completed:** Blocked self-signup role escalation and added optimistic concurrency for technician-assignment JSON-blob writes.
+
+**What was implemented:**
+
+1. **PocketBase hook M20** (`1740000000020_users_create_role_guard.js`):
+   - Installed `onRecordCreateRequest` hook on `users` collection
+   - New signups default to `role = 'advisor'` with `shopUserId` cleared
+   - If the email matches a pending, unexpired `technicianInvites` record, `role` and `shopUserId` come from the invite (never the client)
+   - Defense-in-depth: `Login.tsx` no longer sends `role: 'advisor'` from the client
+
+2. **PocketBase hook M21** (`1740000000021_assignment_optimistic_lock.js`):
+   - Installed `onRecordUpdateRequest` hook on `technicianAssignments`
+   - Checks `__expectedUpdated` meta-field against the current `updated` value
+   - Returns HTTP 409 on mismatch, preventing silent overwrites
+   - Opt-in: clients that don't send `__expectedUpdated` bypass the check
+
+3. **Frontend optimistic concurrency** (`src/lib/technicianData.ts`):
+   - Added exported `StaleWriteError` class
+   - Added `mutateAssignment()` helper — fetch-modify-write with `__expectedUpdated` and 409 detection
+   - Refactored `updateServiceStatus`, `updateServiceSubStatus`, `updateServiceNotes`, `submitAdvisorRequest` to use `mutateAssignment`
+   - Added `__expectedUpdated` to `clockStart` and `clockStop` for conflict coverage
+
+4. **UI conflict surfacing** (`src/pages/technician/TechnicianJobDetail.tsx`):
+   - Imported `useToast` and `logError`
+   - Wrapped `handleServiceStatus`, `handleClockToggle`, `handleSubmitRequest`, and inline sub-status handler with try/catch
+   - `StaleWriteError` → shows error toast and auto-reloads after 1.2s
+   - Other errors → shows descriptive failure toast + logs
+
+5. **Tests** (`src/lib/__tests__/technicianData.test.ts`):
+   - 7 tests covering `StaleWriteError` construction, `mutateAssignment` success (verifies `__expectedUpdated`), 409 conflict, non-409 error passthrough, and mutator patch shape
+
+**Files changed:**
+- `pb_migrations/1740000000020_users_create_role_guard.js` (new)
+- `pb_migrations/1740000000021_assignment_optimistic_lock.js` (new)
+- `src/pages/Login.tsx`
+- `src/lib/technicianData.ts`
+- `src/pages/technician/TechnicianJobDetail.tsx`
+- `src/lib/__tests__/technicianData.test.ts` (new)
+
+**DB:** Backed up before migration. M20 and M21 applied. `No new migrations to apply.` confirmed.
+
+**Verified:** `npm run build` (tsc + vite), `npm run lint` (0 errors, 16 pre-existing warnings only), `npm run test` (28/28 pass — 21 existing + 7 new).
+
+**Resolved:** v5.2 roadmap priorities 1.3 and 1.6.
+
+## Execution Memo: 2026-07-06 - Step 1.7 Tighten Public Share-Token Flow
+
+**Completed:** Moved the quote share token from query string to URL path, preventing token leakage via nginx access logs, browser history, and Referer headers.
+
+**What was implemented:**
+- `src/App.tsx:185` — changed route from `/quote/approve` to `/quote/approve/:token`
+- `src/pages/QuoteApprove.tsx` — replaced `useSearchParams().get('token')` with `useParams<{ token: string }>().token`; removed `useSearchParams` import, added `useParams`; added referrer-restriction meta tag (`<meta name="referrer" content="no-referrer">`) via useEffect with cleanup
+- `src/pages/QuoteGenerator.tsx:762` — updated share-URL builder from `?token=${token}` to `/${token}` (path form)
+- No PocketBase schema or API rule changes needed — internal PB calls already use `query: { shareToken: token }` which leaves the existing M7 rule (`@request.query.shareToken`) intact
+- Only two `quote/approve` call sites existed in the source tree; both are now path-based
+
+**Resolved:** v5.2 roadmap priority 1.7.
+
+## Execution Memo: 2026-07-06 - Step 1.4 Security Headers + CSP
+
+**Completed:** Added production security headers (CSP + X-Content-Type-Options + X-Frame-Options + Referrer-Policy + Permissions-Policy) and removed Toast's runtime `<style>` injection which would have been blocked by strict CSP.
+
+**What was implemented:**
+
+**A. Frontend (approval-free):**
+- `src/components/ui/Toast.tsx` — removed the runtime `<style>` injection block (lines 111–126). The `animate-slide-in` class is now defined in `index.css` instead of being injected via `document.createElement('style')`.
+- `src/index.css` — appended `@keyframes toast-slide-in { ... }` and `.animate-slide-in { animation: toast-slide-in 0.3s ease-out; }` to preserve the slide-in animation without runtime style injection.
+
+**B. Server-side (nginx):**
+- Created `/etc/nginx/snippets/spq-security.conf` with five `add_header` directives:
+  - `Content-Security-Policy`: restricts script/style/img/font/connect sources to `'self'` + necessary exceptions (`'unsafe-inline'` for Tailwind JIT, `data: blob:` for logo/OCR/PDF assets). Blocks `frame-ancestors`, restricts `base-uri` and `form-action`.
+  - `X-Content-Type-Options: nosniff`
+  - `X-Frame-Options: DENY`
+  - `Referrer-Policy: no-referrer` (tightest variant, consistent with per-page meta from step 1.7)
+  - `Permissions-Policy`: disables microphone, geolocation, interest-cohort; camera left enabled for future use
+- Edited `/etc/nginx/sites-enabled/shopproquote` to `include /etc/nginx/snippets/spq-security.conf;` as the first directive inside the `server { }` block.
+- `nginx -t` passed (syntax OK), `systemctl reload nginx` applied.
+
+**C. Verification:**
+- Frontend: `npm run build` (TypeScript + Vite), `npm run lint` (0 errors, 16 pre-existing warnings only), `npm run test` (28/28 pass).
+- Headers confirmed via curl: all 5 security headers present on `https://shopproquote.graj-media.com/`, including the `index.html`, CSS assets, and JS assets.
+- Toast animation keyframes verified bundled in the production CSS chunk.
+
+**Resolved:** v5.2 roadmap priority 1.4.
+
+## Execution Memo: 2026-07-06 - Step 1.5 Silent-catch audit & classification
+
+**Completed:** Audited and classified 55+ silent catch blocks across the codebase. Added `swallow`/`swallowAsync` helpers, surfaced audit-trail failures as toasts, fixed a data-clobbering race in `fetchFresh`, and added consistent error logging on all JSON-parse and `getFullList`  silent-catch sites.
+
+**What was implemented:**
+
+1. **Helpers in `src/lib/userMessages.ts`** — added `swallow<T>(context, fallback, fn)` and `swallowAsync<T>(context, fallback, fn)` that log via `logError` and return a fallback value on throw. Both are typed generics so callers retain their return type.
+
+2. **Vitest tests** — `src/lib/__tests__/userMessages.test.ts` (4 tests covering sync success, sync throw, async success, async rejection).
+
+3. **`appendROEvent` failures surfaced (highest-priority batch)** — Every `try { await appendROEvent(...) } catch {}` replaced with `logError + showToast('Saved, but the timeline event could not be recorded.', 'error')`:
+   - `src/pages/RODetailModal.tsx`: `status` (493), `satisfaction` (527), `notify` (547), `add_time` (589), `edit` (684)
+   - `src/pages/RepairOrders.tsx`: `created` (1177), `status` (1247)
+
+4. **`fetchFresh` data-safety fix (`src/lib/roEvents.ts`)** — Previously returned `{}` silently on PB fetch failure, which caused `appendROEvent` to proceed with an empty blob and clobber existing financial-blob keys (events, promisedTimeOverride, voided, clockEntries). Now logs and rethrows; the new call-site toasts inform the user.
+
+5. **JSON-parse silent catches wrapped with `logError`** — Applied `logError` to ~15 sites across `technicianData.ts:54,66`, `roEvents.ts:25,34`, `RODetailModal.tsx:360`, `RepairOrders.tsx:257,281,1058,1161`, `QuoteGenerator.tsx:979,1087,1314,1325`, `QuoteApprove.tsx:83`, `ROForm.tsx:277`, `FinancialDashboard.tsx:112`, `Customers.tsx:840`. No behavior change — corrupt local data still falls back; errors are now visible in console for debugging.
+
+6. **`getFullList` consistent error logging** — All 5 `technicianData.ts` fetch functions now use `logError` instead of mixed `console.error`/silent behavior.
+
+7. **`requestVerification` catches** — `Login.tsx:117` and `TechnicianInvite.tsx:69` updated from silent `catch {}` to `logError` (still invisible to user, as verification email is best-effort). `Settings.tsx:700` already had proper error handling.
+
+**Files changed:**
+- `src/lib/userMessages.ts` (swallow/swallowAsync)
+- `src/lib/__tests__/userMessages.test.ts` (new)
+- `src/lib/roEvents.ts` (fetchFresh rethrow, getBlob/parseBlob logging)
+- `src/lib/technicianData.ts` (parseJsonField, parseRepairOrderServices logging; all getFullList catches upgraded to logError)
+- `src/pages/RODetailModal.tsx` (5 appendROEvent toasts, inline services JSON parse logging)
+- `src/pages/RepairOrders.tsx` (2 appendROEvent toasts, 4 JSON parse logging sites)
+- `src/pages/QuoteGenerator.tsx` (4 JSON parse logging sites)
+- `src/pages/QuoteApprove.tsx` (1 JSON parse logging, 1 import add)
+- `src/components/ROForm.tsx` (1 JSON parse logging, 1 import add)
+- `src/pages/FinancialDashboard.tsx` (1 JSON parse logging)
+- `src/pages/Customers.tsx` (1 JSON parse logging)
+- `src/pages/Login.tsx` (requestVerification logging)
+- `src/pages/TechnicianInvite.tsx` (requestVerification logging)
+
+**Deferred to roadmap step 2.2:** "Failed to load" empty-state UI for `getFullList` callers (network-error vs empty-data distinction).
+
+**Verified:** `npm run build` (tsc + vite, 0 errors), `npm run lint` (0 errors, 18 pre-existing warnings — no new warnings), `npm run test` (32/32 pass — 28 existing + 4 new userMessages tests).
+
+**Resolved:** v5.2 roadmap priority 1.5.
+
+## Execution Memo: 2026-07-06 - Step 2.1: Lazy-load Tesseract, jsPDF, PDF.js worker
+
+**Completed:** Converted four heavy static imports (`tesseract.js`, `jspdf`, `pdfjs-dist`) to dynamic `await import()` calls, removing ~1.8MB of eagerly-loaded library code from the entry and page-level chunks.
+
+**What was implemented:**
+
+1. **New file `src/lib/pdfjs-worker.ts`** — Idempotent `ensurePdfWorker()` that dynamically imports `pdfjs-dist` and sets `GlobalWorkerOptions.workerSrc` exactly once. Worker path confirmed (`node_modules/pdfjs-dist/build/pdf.worker.min.mjs`).
+
+2. **`src/main.tsx`** — Removed eager `import * as pdfjsLib from 'pdfjs-dist'` and `GlobalWorkerOptions.workerSrc` assignment (lines 8–18). pdfjs worker config is now deferred until someone actually calls `downloadPdfAsImages`.
+
+3. **`src/lib/pdf.ts`** — `import { jsPDF }` → `import type { jsPDF }` (type-only, erased at compile time). Added `const { jsPDF } = await import('jspdf')` as first line of `generateQuotePDF`.
+
+4. **`src/lib/roPdf.ts`** — Same pattern: type-only import, dynamic import inside `generateROPDF`.
+
+5. **`src/lib/pdf-to-images.ts`** — `import * as pdfjsLib` → `import type * as pdfjsLib` (types only). Added `ensurePdfWorker()` call and `const { getDocument } = await import('pdfjs-dist')` inside `downloadPdfAsImages`. Replaced `pdfjsLib.getDocument(...)` with `getDocument(...)`.
+
+6. **`src/pages/Appointments.tsx`** — Removed top-level `import Tesseract from 'tesseract.js'`. Added `const { default: Tesseract } = await import('tesseract.js')` inside `handleExtract` before the OCR call.
+
+7. **`html2canvas`** — No-op (not imported anywhere in `src/`; only exists as a transitive dependency in node_modules).
+
+**Bundle impact:**
+- `pdf.worker.min.mjs` (1.2MB) → separate lazy chunk (was bundled in entry)
+- `jspdf.es.min.js` (399KB) → separate lazy chunk
+- `pdf.js` (425KB, pdfjs-dist core) → separate lazy chunk
+- `tesseract.js` → lazy chunk loaded only when OCR is triggered
+- Entry chunk `index.js` (266KB) excludes all four heavy deps
+
+**Verified:** `npm run build` (0 errors, 349ms), `npm run lint` (0 errors, 18 pre-existing warnings only), `npm run test` (32/32 pass).
+
+**Resolved:** v5.2 roadmap priority 2.1 (biggest perf win).
+
+## Execution Memo: 2026-07-06 - Step 2.8 + 2.9: Environment variable layer + index.html production polish
+
+**Completed:** Created production env layer with 5 documented `VITE_*` vars, gated AI features behind `VITE_AI_ENABLED`, polished `index.html` with proper metadata, and added typed `ImportMetaEnv` declarations.
+
+**What was implemented:**
+
+1. **`.env.production` (new)** — Five client-safe env vars: `VITE_PB_URL=/pb`, `VITE_APP_NAME=ShopProQuote`, `VITE_GLITCHTIP_DSN=`, `VITE_AI_ENABLED=true`, `VITE_ENV=production`. Commented note that `DEEPSEEK_API_KEY` must never be `VITE_`-prefixed.
+
+2. **`.env.example` (updated)** — Documents all 5 vars with descriptions. Added explicit server-secret warning at the bottom.
+
+3. **`.gitignore` (updated)** — Added `.env.production` to prevent accidental commits.
+
+4. **`src/lib/pocketbase.ts`** — Added `export const APP_NAME = import.meta.env.VITE_APP_NAME || 'ShopProQuote'`.
+
+5. **`src/pages/Login.tsx`** — Imports `APP_NAME`, replaces hardcoded "ShopProQuote" in footer copyright line.
+
+6. **`src/pages/Setup.tsx`** — Imports `APP_NAME`, replaces hardcoded "ShopProQuote" in the Primary Workflow hint text.
+
+7. **`src/lib/ai.ts`** — Added `const AI_ENABLED = import.meta.env.VITE_AI_ENABLED !== 'false'` at module level; short-circuits `callDeepSeek` when `VITE_AI_ENABLED` is `false`. Default is enabled (preserves existing behavior).
+
+8. **`index.html`** — Replaced `<title>spq-v2</title>` with `<title>ShopProQuote — Shop Management</title>`. Added `<meta name="theme-color" content="#16a34a">` (matches app green accent). Added `<meta name="description">` and OG tags (`og:title`, `og:description`, `og:type`).
+
+9. **`src/vite-env.d.ts` (new)** — Extends `ImportMetaEnv` with typed `VITE_PB_URL`, `VITE_APP_NAME`, `VITE_GLITCHTIP_DSN`, `VITE_AI_ENABLED`, `VITE_ENV` to avoid `string | undefined` friction in TS.
+
+**Verified:** `npm run build` (0 errors, 348ms), `dist/index.html` confirmed to have all new meta tags, `npm run lint` (0 errors, 18 pre-existing warnings only), `npm run test` (32/32 pass).
+
+**Resolved:** v5.2 roadmap priorities 2.8 and 2.9.
+
+## Execution Memo: 2026-07-06 - Step 2.5: Zod schemas for write paths
+
+**Completed:** Installed `zod`, created 5 schema files with typed write validation, replaced ad-hoc validation in 5 pages with `safeParse` gates, and added 41 schema-focused tests.
+
+**What was implemented:**
+
+1. **`npm install zod`** — Added zod v3 as a runtime dependency (~10KB min+gzip, shared chunk).
+
+2. **`src/schemas/quote.ts`** — `quoteWriteSchema` and `quoteServiceSchema` matching the flat PB write shape (`customerName`, `vehicleInfo`, `services`, `discountValue`, `discountType`, `subtotal`, `tax`, `total`, `status`). All fields typed, required fields get `.min(1)` with descriptive messages.
+
+3. **`src/schemas/repairOrder.ts`** — `repairOrderWriteSchema` and `roServiceSchema` covering the full RO write payload (`customerName`, `customerPhone`, `vehicleInfo`, `services`, `status`, `total`/`tax`/`shopCharges`, `serviceLocation`, `travelFee`, `tripMiles`). Services validated as array then `JSON.stringify`'d.
+
+4. **`src/schemas/customer.ts`** — `customerWriteSchema` for the `CustomerFormData` shape (`name`, `phone` required; `email` validated with `z.union([z.string().email(), z.literal('')])`).
+
+5. **`src/schemas/invoice.ts`** — `invoiceWriteSchema` + `invoiceItemSchema`. Includes a `.refine()` that catches total mismatch: `total ≈ subtotal + tax` must hold within 0.01 tolerance. Replaces the existing 3-check hand-rolled `validate()`.
+
+6. **`src/schemas/settings.ts`** — `settingsWriteSchema` (27 fields covering all `ShopSettings`) and `accountSettingsWriteSchema` for the email/password settings form. Enforces hex color regex, positive labor rate, nonnegative financials, and valid enums.
+
+7. **`src/schemas/index.ts`** — Two helpers: `formatZodError` (returns first issue message for toasts) and `zodErrorsToFormFields` (maps issues by path for `setFormErrors` state).
+
+8. **Page wiring:**
+   - `QuoteGenerator.tsx` — `quoteWriteSchema.safeParse` before both `handleSave` and `ensureShareToken` saves. Replaced the single-line `if (!customerInfo.name) return` guard.
+   - `RepairOrders.tsx` — `repairOrderWriteSchema.safeParse` on incoming form data before any PB write.
+   - `Customers.tsx` — `customerWriteSchema.safeParse` in both `handleAddCustomer` and `handleEditCustomer`.
+   - `Invoices.tsx` — Replaced the 11-line hand-rolled `validate()` with `invoiceWriteSchema.safeParse` + `zodErrorsToFormFields`. Existing `formErrors.*` bindings continue working unchanged.
+   - `Settings.tsx` — `settingsWriteSchema.safeParse` before `saveAllSettings`, `accountSettingsWriteSchema` before `saveAccountSettings` (replaces the 3-line ad-hoc email check).
+
+9. **Tests (5 files, 41 tests):**
+   - `src/schemas/__tests__/quote.test.ts` — 7 tests (valid, missing name, missing vehicle, empty services, negative price, negative discount, invalid discount type)
+   - `src/schemas/__tests__/repairOrder.test.ts` — 8 tests (valid, missing name, missing phone, missing vehicle, empty services, empty service name, negative total, invalid status)
+   - `src/schemas/__tests__/customer.test.ts` — 6 tests (valid, valid with email, empty email allowed, missing name, missing phone, invalid email)
+   - `src/schemas/__tests__/invoice.test.ts` — 8 tests (valid, missing name, missing vehicle, empty items, empty item description, zero quantity, total mismatch, invalid status)
+   - `src/schemas/__tests__/settings.test.ts` — 12 tests (valid, missing business name, missing phone, missing advisor, negative rate, zero rate, malformed color, valid color, invalid business type, invalid pdf style, +2 account settings)
+
+**Design decisions:**
+- Schemas validate the flat PB write shape (matching `Record<string, any>` payloads), not the nested TS interfaces — no call-site refactoring needed.
+- `QuoteApprove.tsx` excluded (public customer-facing page; minimal validation is intentional).
+- `technicianData.ts` assignment writes excluded (already guarded by optimistic concurrency from step 1.6).
+
+**Verified:** `npm run build` (0 errors, 356ms), `npm run lint` (0 errors, 18 pre-existing warnings only), `npm run test` (73/73 pass — 32 existing + 41 new).
+
+**Resolved:** v5.2 roadmap priority 2.5.
diff --git a/roadmap_5.2.md b/roadmap_5.2.md
new file mode 100644
index 0000000..58ea955
--- /dev/null
+++ b/roadmap_5.2.md
@@ -0,0 +1,1272 @@
+# SPQ-v2 Production Hardening Roadmap (v5.2) — Remaining Work
+
+**Generated:** 2026-07-05 (cleaned 2026-07-07 — removed completed implementation steps)
+**Source audit:** Production-readiness audit of SPQ-v2 (React 19 / Vite 8 / Tailwind v4 / Zustand / PocketBase 0.39)
+**Scope:** Remaining items only — completed items (1.1, 1.5, 1.6, 1.7, 2.1, 2.2, 2.3, 2.4, 2.5, 2.6, 2.8, 2.9, 2.10) are DONE and their implementation steps removed. See Execution Memos below for what was completed.
+
+---
+
+## Table of Contents
+
+- [Conventions & Pre-flight](#conventions--pre-flight)
+- [Phase 1 — Critical Fixes — Remaining Work](#phase-1--critical-fixes--remaining-work)
+  - [1.2 DeepSeek AI auth-injecting reverse proxy (server-side)](#12-deepseek-ai-auth-injecting-reverse-proxy-server-side)
+  - [1.3 Block self-signup role escalation (PB hook)](#13-block-self-signup-role-escalation-pb-hook)
+  - [1.4 Security headers + CSP (nginx snippet)](#14-security-headers--csp-nginx-snippet)
+- [Phase 2 — Optimization & UX — Remaining Work](#phase-2--optimization--ux--remaining-work)
+  - [2.7 Logo uploads to PocketBase file records](#27-logo-uploads-to-pocketbase-file-records)
+- [Phase 3 — Deployment & Monitoring](#phase-3--deployment--monitoring)
+  - [3.1 GlitchTip self-hosted (Docker)](#31-glitchtip-self-hosted-docker)
+  - [3.2 PocketBase production hardening](#32-pocketbase-production-hardening)
+  - [3.3 Frontend hosting (nginx static)](#33-frontend-hosting-nginx-static)
+  - [3.4 Reverse proxy for /pb and /api/ai/chat](#34-reverse-proxy-for-pb-and-apiaichat)
+  - [3.5 Structured logging](#35-structured-logging)
+  - [3.6 Offline banner](#36-offline-banner)
+  - [3.7 Dependency audit](#37-dependency-audit)
+- [Phase 4 — Recommended Features](#phase-4--recommended-features)
+  - [4.1 Quote approval notifications](#41-quote-approval-notifications)
+  - [4.2 Quote expiry enforcement](#42-quote-expiry-enforcement)
+  - [4.3 Financial audit log (append-only, hash-chained)](#43-financial-audit-log-append-only-hash-chained)
+  - [4.4 Multi-vehicle customer history](#44-multi-vehicle-customer-history)
+  - [4.5 Technician time-card CSV export](#45-technician-time-card-csv-export)
+  - [4.6 Recurring maintenance reminders](#46-recurring-maintenance-reminders)
+  - [4.7 Offline-first for technicians (service worker)](#47-offline-first-for-technicians-service-worker)
+  - [4.8 Two-factor auth for advisors (TOTP)](#48-two-factor-auth-for-advisors-totp)
+  - [4.9 Data export / GDPR](#49-data-export--gdpr)
+  - [4.10 Multi-shop readiness (decision)](#410-multi-shop-readiness-decision)
+- [Appendix A — Verification command cheat sheet](#appendix-a--verification-command-cheat-sheet)
+- [Appendix B — PocketBase backup & migration procedure](#appendix-b--pocketbase-backup--migration-procedure)
+- [Appendix C — Environment variable reference](#appendix-c--environment-variable-reference)
+- [Execution Memos (Historical Record)](#execution-memos-historical-record)
+
+---
+
+## Conventions & Pre-flight
+
+### Scope decisions (locked)
+- AI proxy: self-hosted auth-injecting reverse proxy (nginx + tiny validator).
+- PB migrations: included.
+- No git / no CI — local home-server workflow.
+- Hosting: nginx on the same box as PocketBase.
+- Error tracking: self-hosted GlitchTip (Sentry-protocol compatible).
+- Tests: zod schemas + vitest alongside each fix.
+
+### Standing rules (from AGENTS.md)
+- Before any PB migration, back up the DB (Appendix B).
+- **Do not open `/tmp/opencode/pb-admin.txt` without permission.** Migration authoring does not require it.
+- **Modal changes** must follow the background-location overlay pattern documented in AGENTS.md.
+- **Verify after every step** with the commands in the step's `Verify:` block, not just at the end.
+
+### Pre-flight: confirm the PocketBase container
+Before any PB step, confirm the container ID (it may have changed since 2026-07-05):
+```bash
+docker ps --format '{{.ID}} {{.Image}} {{.Names}} {{.Ports}}' | grep pocketbase
+```
+Export it for the session:
+```bash
+export PB_CID=<id-from-above>
+```
+All `docker exec` commands in this roadmap use `$PB_CID`.
+
+---
+
+## Phase 1 — Critical Fixes — Remaining Work
+
+### 1.2 DeepSeek AI auth-injecting reverse proxy (server-side)
+
+**Status:** Frontend done (ai.ts sends PB token, handles 401/429, VITE_AI_ENABLED gate). Server-side pending.
+
+**What remains — server-side installation:**
+
+**Step 1 — Write the token validator (Node, no deps):**
+```js
+// /opt/spq/ai-proxy/validate.js
+// Tiny HTTP service: returns 200 if the incoming Authorization Bearer token
+// is a valid PocketBase user token, 401 otherwise. Called by nginx auth_request.
+const http = require('http');
+
+const PB_URL = process.env.PB_URL || 'http://127.0.0.1:8091';
+const PORT = parseInt(process.env.PORT || '8092', 10);
+
+const VALIDATE_PATH = '/api/collections/users/refresh';
+
+const server = http.createServer(async (req, res) => {
+  const auth = req.headers.authorization;
+  if (!auth || !auth.startsWith('Bearer ')) {
+    res.writeHead(401); return res.end('no token');
+  }
+  try {
+    const r = await fetch(`${PB_URL}${VALIDATE_PATH}`, {
+      method: 'POST',
+      headers: { Authorization: auth }
+    });
+    res.writeHead(r.status === 200 ? 200 : 401);
+    res.end(r.status === 200 ? 'ok' : 'invalid');
+  } catch {
+    res.writeHead(502); res.end('pb unreachable');
+  }
+});
+
+server.listen(PORT, '127.0.0.1', () => {
+  console.log(`[spq-ai-validator] listening on 127.0.0.1:${PORT}`);
+});
+```
+
+**Step 2 — systemd unit:**
+```ini
+# /opt/spq/ai-proxy/spq-ai-validator.service
+# Copy to /etc/systemd/system/ and: sudo systemctl enable --now spq-ai-validator
+[Unit]
+Description=SPQ DeepSeek token validator
+After=network.target docker.service
+
+[Service]
+Type=simple
+WorkingDirectory=/opt/spq/ai-proxy
+ExecStart=/usr/bin/node validate.js
+Environment=PB_URL=http://127.0.0.1:8091
+Environment=PORT=8092
+Restart=on-failure
+RestartSec=5
+
+[Install]
+WantedBy=multi-user.target
+```
+
+**Step 3 — nginx location (include in the server block from 3.3):**
+```nginx
+# /etc/nginx/snippets/spq-deepseek.conf
+limit_req_zone $binary_remote_addr zone=spq_ai:10m rate=20r/m;
+
+location /deepseek/ {
+    limit_req zone=spq_ai burst=5 nodelay;
+    auth_request /_spq_validate;
+    auth_request_set $spq_auth_status $upstream_status;
+    proxy_set_header Authorization "";
+    proxy_set_header Authorization "Bearer $http_deepseek_api_key";
+    rewrite ^/deepseek/(.*)$ /$1 break;
+    proxy_pass https://api.deepseek.com;
+    proxy_ssl_server_name on;
+    proxy_set_header Host api.deepseek.com;
+    proxy_set_header X-Real-IP $remote_addr;
+    proxy_buffering off;
+}
+
+location = /_spq_validate {
+    internal;
+    proxy_pass http://127.0.0.1:8092/;
+    proxy_pass_request_body off;
+    proxy_set_header Content-Length "";
+    proxy_set_header Authorization $http_authorization;
+}
+```
+
+Write the API key to `/etc/nginx/snippets/deepseek-key.conf` (mode 0600, owner root) containing `set $deepseek_key "sk-...";` and `include` it inside the location.
+
+**Step 4 — Fix the stale dev proxy in `vite.config.ts`:**
+The `/deepseek` proxy currently targets `https://127.0.0.1:3448` with `secure: false` — that gateway no longer exists. Point at local nginx:
+```ts
+'/deepseek': {
+  target: 'http://127.0.0.1:80',
+  changeOrigin: true,
+  rewrite: (path) => path,
+},
+```
+Or use a `.env.local` value: `target: process.env.VITE_DEEPSEEK_DEV_PROXY || 'http://127.0.0.1:80'`.
+
+**Verify:**
+```bash
+npm run build
+npm run lint
+# Manual: with nginx + validator running, log in, open Quote Generator,
+# trigger AI Suggest — should succeed. Without login — should 401.
+```
+
+---
+
+### 1.3 Block self-signup role escalation (PB hook)
+
+**Status:** NOT DONE — needs PB migration.
+
+**Problem:** `src/pages/Login.tsx:96-104` sends `role: 'advisor'` from the client. PocketBase auth collections allow client-set fields on self-create, so a malicious signup can send `role: 'technician'` and `shopUserId: '<someone>'` to masquerade as a technician under any shop.
+
+**Fix:** PB `onRecordBeforeCreate` hook on `users` that forces `role = 'advisor'` and clears `shopUserId` — **unless** there is a matching pending, unexpired `technicianInvites` record for the email being registered.
+
+**File:** `pb_migrations/1740000000020_users_create_role_guard.js`
+
+```js
+/// <reference path="../pb_data/types.d.ts" />
+migrate(
+  (app) => {
+    app.onRecordBeforeCreateRequest((e) => {
+      if (e.collection.name !== 'users') return;
+      const record = e.record;
+      const email = (record.get('email') || '').toString().trim().toLowerCase();
+      if (!email) return;
+      let invite = null;
+      try {
+        invite = e.dao.findFirstRecordByFilter(
+          'technicianInvites',
+          `email = "${email.replace(/"/g, '')}" && status = "pending" && expiresAt >= @now`
+        );
+      } catch {
+        invite = null;
+      }
+      if (invite) {
+        record.set('role', 'technician');
+        record.set('shopUserId', invite.get('shopUserId') || '');
+      } else {
+        record.set('role', 'advisor');
+        record.set('shopUserId', '');
+      }
+    });
+  },
+  (app) => {
+    console.log('[M20] rollback requested — remove this migration file and restart PocketBase');
+  }
+);
+```
+
+**Also update Login.tsx** to stop sending `role`/`shopUserId` from the client (they're now server-set by the hook):
+```ts
+await pb.collection('users').create({
+  email: email.trim(),
+  password,
+  passwordConfirm: confirmPassword,
+  name: name.trim() || '',
+  displayName: name.trim() || '',
+  emailVisibility: true,
+  // role and shopUserId are now server-set by the M20 hook.
+});
+```
+
+**Verify:**
+```bash
+npm run build
+npm run lint
+# Manual: sign up new account → check users.role == 'advisor', shopUserId == ''
+# Try curl POST with role:'technician' → confirm role still 'advisor'
+# Create a technician invite, accept via link → confirm role == 'technician'
+```
+
+---
+
+### 1.4 Security headers + CSP (nginx snippet)
+
+**Status:** Frontend cleanup done (Toast `<style>` injection already removed, keyframes in `index.css`). Nginx snippet pending.
+
+**What remains — nginx snippet:**
+```nginx
+# /etc/nginx/snippets/spq-security.conf
+# Include inside the server { } block for the SPQ frontend.
+
+add_header Content-Security-Policy "default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data: blob:; font-src 'self'; connect-src 'self'; frame-ancestors 'none'; base-uri 'self'; form-action 'self';" always;
+add_header X-Content-Type-Options "nosniff" always;
+add_header X-Frame-Options "DENY" always;
+add_header Referrer-Policy "strict-origin-when-cross-origin" always;
+add_header Permissions-Policy "camera=(), microphone=(), geolocation=(), interest-cohort=()" always;
+```
+
+Include in the server block (wired in step 3.3):
+```nginx
+server {
+    listen 443 ssl http2;
+    server_name spq.yourdomain.tld;
+    include /etc/nginx/snippets/spq-security.conf;
+    # ... (rest from 3.3)
+}
+```
+
+**Verify:**
+```bash
+# After nginx reload:
+curl -sI https://spq.yourdomain.tld/ | grep -iE 'content-security|x-content|referrer|permissions'
+# Confirm Toast still animates (no console CSP violations).
+```
+
+---
+
+## Phase 2 — Optimization & UX — Remaining Work
+
+### 2.7 Logo uploads to PocketBase file records
+
+**Status:** NOT DONE — needs PB migration.
+
+**Problem:** `ShopSettings.logoUrl` stores a base64 data-URL. Bloats localStorage + every settings round-trip.
+
+**Files:**
+- New PB migration: `pb_migrations/1740000000022_settings_logo_file.js`
+- Edit: `src/pages/Settings.tsx` (upload flow)
+- Edit: `src/lib/settings.ts` (load file URL)
+
+**Step 1 — PB migration adds a `logo` file field to `settings`:**
+```js
+// pb_migrations/1740000000022_settings_logo_file.js
+migrate((app) => {
+  const col = app.findCollectionByNameOrId('settings');
+  if (!col.fields.find(f => f.name === 'logo')) {
+    col.fields.add(new FileField({
+      name: 'logo',
+      required: false,
+      maxSize: 5242880,
+      allowedMimeTypes: ['image/png', 'image/jpeg', 'image/webp', 'image/svg+xml'],
+    }));
+    app.save(col);
+  }
+}, () => {});
+```
+
+**Step 2 — Frontend upload in Settings.tsx:**
+```ts
+const file = input.files?.[0];
+if (file) {
+  const formData = new FormData();
+  formData.append('logo', file);
+  await pb.collection('settings').update(recordId, formData);
+  const url = pb.files.getURL({ id: recordId, collectionId: 'settings' }, 'logo');
+  setSettings(s => ({ ...s, logoUrl: url + '?thumb=200x200' }));
+}
+```
+
+**Step 3 — Stop storing base64 in `logoUrl`. Update `QuoteApprove.tsx` and PDF generators to use the file URL (they already handle URLs).**
+
+**Verify:**
+```bash
+npm run build && npm run lint && npm run test
+# Manual: upload a logo in Settings, confirm it appears on quotes & PDFs.
+```
+
+---
+
+## Phase 3 — Deployment & Monitoring (Hosting, Logging, Error Tracking)
+
+### 3.1 GlitchTip self-hosted (Docker)
+
+**Problem:** No client-side error tracking. `console.error` is the only signal.
+
+**Files:**
+- New: `/opt/glitchtip/docker-compose.yml`
+- New: `.env.glitchtip` (server-side secrets)
+- Edit: `src/lib/userMessages.ts` (wire `setErrorReporter`)
+- Edit: `src/main.tsx` (init Sentry SDK pointed at GlitchTip)
+
+**Step 1 — GlitchTip docker-compose:**
+```yaml
+# /opt/glitchtip/docker-compose.yml
+version: "3.8"
+services:
+  db:
+    image: postgres:15
+    environment:
+      POSTGRES_PASSWORD: ${POSTGRES_PASSWORD}
+    volumes: [pgdata:/var/lib/postgresql/data]
+  redis:
+    image: redis:7
+  web:
+    image: glitchtip/glitchtip:latest
+    depends_on: [db, redis]
+    environment:
+      DATABASE_URL: postgresql://postgres:${POSTGRES_PASSWORD}@db:5432/postgres
+      REDIS_URL: redis://redis:6379/1
+      SECRET_KEY: ${SECRET_KEY}
+      EMAIL_URL: "consolemail://"
+      PORT: 8000
+    ports: ["127.0.0.1:8000:8000"]
+    volumes: [uploads:/app/uploads]
+volumes: { pgdata: {}, uploads: {} }
+```
+
+**Step 2 — Create a DSN in the GlitchTip UI** (one-shot, not scriptable). Set `VITE_GLITCHTIP_DSN` in `.env.production`.
+
+**Step 3 — Frontend Sentry SDK pointed at GlitchTip:**
+```bash
+npm install @sentry/react
+```
+```ts
+// src/main.tsx — add BEFORE createRoot
+import * as Sentry from '@sentry/react';
+import { setErrorReporter } from './lib/userMessages';
+
+const DSN = import.meta.env.VITE_GLITCHTIP_DSN;
+if (DSN) {
+  Sentry.init({
+    dsn: DSN,
+    environment: import.meta.env.VITE_ENV || 'development',
+    tracesSampleRate: 0.1,
+  });
+  setErrorReporter((err, ctx) => {
+    Sentry.captureException(err, { extra: ctx });
+  });
+}
+```
+
+**Verify:**
+```bash
+npm run build
+# Manual: trigger an error (throw in a render), confirm it appears in GlitchTip UI.
+```
+
+---
+
+### 3.2 PocketBase production hardening
+
+**Step 1 — HTTPS via nginx or Caddy.** nginx already in scope (step 3.3). Ensure the PB location block uses HTTPS upstream if PB is exposed beyond localhost.
+
+**Step 2 — SMTP for verification + invite emails.** Set PB env vars:
+```bash
+PB_SMTP_ENABLED=true
+PB_SMTP_HOST=smtp.your-provider.com
+PB_SMTP_PORT=587
+PB_SMTP_USERNAME=...
+PB_SMTP_PASSWORD=...
+PB_SMTP_TLS=true
+```
+Restart the container. Test: sign up a new account, confirm the verification email arrives.
+
+**Step 3 — Daily DB backup cron.** Add to crontab:
+```bash
+0 3 * * * docker exec $PB_CID cp /pb_data/data.db /pb_data/data.db.backup-$(date +\%Y\%m\%d) && docker cp $PB_CID:/pb_data/data.db.backup-$(date +\%Y\%m\%d) /backups/spq/ && find /backups/spq/ -mtime +14 -delete
+```
+
+**Step 4 — Superadmin from env:**
+```bash
+PB_SUPERADMIN_EMAIL=...
+PB_SUPERADMIN_PASSWORD=...
+```
+
+**Verify:** email arrives, backup file exists, admin login works with env creds.
+
+---
+
+### 3.3 Frontend hosting (nginx static)
+
+**Files:** `/etc/nginx/sites-available/spq.conf`
+
+```nginx
+server {
+    listen 80;
+    server_name spq.yourdomain.tld;
+    return 301 https://$host$request_uri;
+}
+
+server {
+    listen 443 ssl http2;
+    server_name spq.yourdomain.tld;
+
+    ssl_certificate /etc/letsencrypt/live/spq.yourdomain.tld/fullchain.pem;
+    ssl_certificate_key /etc/letsencrypt/live/spq.yourdomain.tld/privkey.pem;
+
+    root /var/www/spq/dist;
+    index index.html;
+
+    include /etc/nginx/snippets/spq-security.conf;   # from 1.4
+
+    location / {
+        try_files $uri $uri/ /index.html;
+        add_header Cache-Control "no-cache, must-revalidate";
+    }
+
+    location /assets/ {
+        expires 1y;
+        add_header Cache-Control "public, immutable";
+    }
+
+    include /etc/nginx/snippets/spq-pb.conf;
+    include /etc/nginx/snippets/spq-deepseek.conf;
+
+    location ~* \.(woff2|png|jpg|jpeg|gif|svg|webp|ico)$ {
+        expires 30d;
+        add_header Cache-Control "public";
+    }
+
+    gzip on;
+    gzip_types text/css application/javascript application/json image/svg+xml;
+    gzip_min_length 1024;
+}
+```
+
+**Step 1 — Build and deploy:**
+```bash
+npm run build
+sudo rsync -av --delete dist/ /var/www/spq/dist/
+sudo nginx -t && sudo systemctl reload nginx
+```
+
+**Step 2 — TLS via certbot:**
+```bash
+sudo certbot --nginx -d spq.yourdomain.tld
+```
+
+**Verify:** `curl -I https://spq.yourdomain.tld/` returns 200 with security headers.
+
+---
+
+### 3.4 Reverse proxy for /pb and /api/ai/chat
+
+**Files:** `/etc/nginx/snippets/spq-pb.conf`
+
+```nginx
+# /etc/nginx/snippets/spq-pb.conf
+location /pb/ {
+    rewrite ^/pb/(.*)$ /$1 break;
+    proxy_pass http://127.0.0.1:8091;
+    proxy_http_version 1.1;
+    proxy_set_header Host $host;
+    proxy_set_header X-Real-IP $remote_addr;
+    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+    proxy_set_header X-Forwarded-Proto $scheme;
+    proxy_set_header Upgrade $http_upgrade;
+    proxy_set_header Connection "upgrade";
+    proxy_read_timeout 86400;
+}
+```
+
+The `/deepseek/` location is already defined in 1.2's `spq-deepseek.conf`.
+
+**Verify:** log in, open Dashboard, confirm realtime updates work.
+
+---
+
+### 3.5 Structured logging
+
+**Step 1 — nginx access log with JSON format:**
+```nginx
+log_format json_combined escape=json '{ "time":"$time_iso8601", "remote":"$remote_addr", "method":"$request_method", "uri":"$uri", "status":$status, "bytes":$body_bytes_sent, "rt":$request_time }';
+access_log /var/log/nginx/spq.access.log json_combined;
+```
+
+**Step 2 — PB logs to a file with rotation:**
+```bash
+docker logs pocketbase > /var/log/spq/pb.log 2>&1
+docker update --log-driver json-file --log-opt max-size=10m --log-opt max-file=5 pocketbase
+```
+
+**Step 3 — Watch for 429/404 spikes:**
+```bash
+tail -F /var/log/nginx/spq.access.log | grep -E "quote/approve|invite/technician"
+```
+
+**Verify:** logs are writing; rotate without service interruption.
+
+---
+
+### 3.6 Offline banner
+
+**Files:** New `src/components/OfflineBanner.tsx`, edit `src/App.tsx`
+
+```tsx
+// src/components/OfflineBanner.tsx
+import { useEffect, useState } from 'react';
+
+export function OfflineBanner() {
+  const [online, setOnline] = useState(navigator.onLine);
+  useEffect(() => {
+    const on = () => setOnline(true);
+    const off = () => setOnline(false);
+    window.addEventListener('online', on);
+    window.addEventListener('offline', off);
+    return () => { window.removeEventListener('online', on); window.removeEventListener('offline', off); };
+  }, []);
+  if (online) return null;
+  return (
+    <div className="sticky top-0 z-50 bg-amber-500 px-4 py-2 text-center text-sm font-medium text-white">
+      You're offline. Some features may be unavailable.
+    </div>
+  );
+}
+```
+
+In `src/App.tsx` — add inside `<BrowserRouter>`, above `<AppRoutes />`:
+```tsx
+<OfflineBanner />
+```
+
+**Verify:** `npm run build`; disable network in DevTools → banner appears.
+
+---
+
+### 3.7 Dependency audit
+
+```bash
+npm audit
+npm outdated
+# Pin any major-version drift. React 19.2, Vite 8, TS 6.0 are bleeding-edge.
+```
+
+**Verify:** no high-severity advisories in `npm audit` output.
+
+---
+
+## Phase 4 — Recommended Features
+
+> These are enhancements, not fixes. Lower detail — each is a future feature ticket.
+
+### 4.1 Quote approval notifications
+- **What:** advisor gets notified when a customer submits approve/decline decisions via `QuoteApprove.tsx`.
+- **How:** PB `onRecordAfterUpdateRequest` hook on `quotes` — when `status` changes from `sent` to `approved`/`declined`, send an email (PB SMTP from 3.2) to the shop owner. Store the owner's `userId` on the quote; look up their email via `dao.findRecordById('users', userId)`.
+- **Files:** new `pb_migrations/..._quote_approval_notify.js`; no frontend change.
+
+### 4.2 Quote expiry enforcement
+- **What:** reject approvals past `quoteExpiryDays`.
+- **How:** PB `onRecordBeforeUpdateRequest` hook on `quotes` — if `@request.query.shareToken` is set (public update path) and `created` + `quoteExpiryDays` < now, throw `ApiError(410, 'Quote expired')`. Frontend `QuoteApprove.tsx` loads `quoteExpiryDays` from settings and shows an "expired" state.
+- **Files:** new PB migration; edit `QuoteApprove.tsx` expired UI.
+
+### 4.3 Financial audit log (append-only, hash-chained)
+- **What:** tamper-evident log of every financial field change on an RO.
+- **How:** new `roFinancialAudit` collection with `roId`, `field`, `from`, `to`, `by`, `at`, `prevHash`, `hash` (SHA-256 of all prior fields + prevHash). PB `onRecordAfterUpdateRequest` on `repairOrders` diffs the `financial` blob and appends a chained entry.
+- **Files:** new PB migration; new `src/lib/roAudit.ts`; read-only viewer in `RODetailModal` Timeline tab.
+
+### 4.4 Multi-vehicle customer history
+- **What:** customer-level history across all their vehicles (current `RODetailModal` History tab is VIN-only).
+- **How:** add a "Customer History" view that queries `repairOrders` by `customerId` (already a field) and groups by vehicle. Add a button on `Customers.tsx` row → opens the view.
+- **Files:** new `src/pages/CustomerHistory.tsx`; route in `App.tsx`.
+
+### 4.5 Technician time-card CSV export
+- **What:** weekly CSV of `clockElapsedMinutes` per technician.
+- **How:** new "Time Cards" advisor page that queries `technicianAssignments` by `shopUserId` + date range, aggregates `clockEntries`, generates CSV with `Blob` + `URL.createObjectURL`.
+- **Files:** new `src/pages/advisor/TimeCards.tsx`; route + nav item.
+
+### 4.6 Recurring maintenance reminders
+- **What:** "remind this customer in 5,000 miles" workflow.
+- **How:** new `reminders` PB collection (`customerId`, `mileageAtService`, `intervalMileage`, `dueMileage`). A daily check (PB cron hook or a small systemd timer) scans new ROs; when a customer's current mileage crosses `dueMileage`, flag them on the Dashboard.
+- **Files:** new PB migration; new reminder UI in `RODetailModal`; Dashboard widget.
+
+### 4.7 Offline-first for technicians (service worker)
+- **What:** technicians can clock in/out and update service status while offline; syncs on reconnect.
+- **How:** Workbox service worker caching the technician shell; IndexedDB write queue for `clockStart`/`updateServiceStatus`; background sync on `online` event replays the queue.
+- **Files:** new `src/sw.ts`; Vite PWA plugin; `src/lib/offlineQueue.ts`. Significant effort — scope as a sub-project.
+
+### 4.8 Two-factor auth for advisors (TOTP)
+- **What:** TOTP 2FA on advisor accounts.
+- **How:** PocketBase 0.39 supports TOTP via `authWithOTP`. Enable in PB admin settings for the `users` collection. Frontend: add a 2FA setup page in Settings (QR code from `pb.collection('users').getOTPURL()`), and a 2FA challenge step in `Login.tsx` after password.
+- **Files:** edit `Login.tsx`; new `src/pages/SecuritySettings.tsx` section.
+
+### 4.9 Data export / GDPR
+- **What:** "export my data" + "delete my account" flows.
+- **How:** new `src/pages/Privacy.tsx` with two buttons. Export: query all user-scoped collections, zip as JSON, download. Delete: confirm dialog → call PB delete on each collection's records → `pb.collection('users').delete(userId)` → `pb.authStore.clear()`.
+- **Files:** new page; route; Settings link.
+
+### 4.10 Multi-shop readiness (decision)
+- **What:** decide whether to support multi-location operators.
+- **How:** this is a design decision, not a build. The current `userId`-as-tenant model works for single-shop. Multi-shop would need a `shops` collection above `users` with `shopId` on every record and updated API rules. **Decide before scaling** — retrofitting is expensive. If yes, write a `roadmap_6.0.md` for the migration.
+
+---
+
+## Appendix A — Verification command cheat sheet
+
+```bash
+# Typecheck + build
+npm run build
+
+# Lint (oxlint) — 2 pre-existing warnings in Toast.tsx and Settings.tsx
+npm run lint
+
+# Full test suite (Vitest, jsdom)
+npm run test
+
+# Focused test
+npx vitest run "src/lib/__tests__/userMessages.test.ts"
+
+# Bundle size inspection
+du -sh dist/assets/
+ls -laS dist/assets/ | head -10
+for f in dist/assets/*.js; do
+  printf "%-45s raw=%7d  gzip=%7d\n" "$(basename $f)" "$(stat -c%s $f)" "$(gzip -c $f | wc -c)"
+done | sort -k4 -rn | head -15
+
+# Grep for patterns
+rg -n "catch\s*\{" src/                          # silent catches
+rg -n "getFullList" src/                          # unpaginated fetches
+rg -n "import.*from 'tesseract|jspdf|html2canvas'" src/   # eager heavy imports
+```
+
+---
+
+## Appendix B — PocketBase backup & migration procedure
+
+```bash
+# 1. Find the container
+docker ps --format '{{.ID}} {{.Names}}' | grep pocketbase
+export PB_CID=<id>
+
+# 2. Back up
+docker exec $PB_CID cp /pb_data/data.db /pb_data/data.db.backup-before-$(date +%Y%m%d-%H%M%S)
+
+# 3. Copy the new migration file into the container
+docker cp "pb_migrations/<MIGRATION_FILE>.js" $PB_CID:/pb_data/migrations/
+
+# 4. Apply
+docker exec $PB_CID /usr/local/bin/pocketbase migrate up --dir=/pb_data --migrationsDir=/pb_data/migrations
+
+# 5. Verify (should say "No new migrations to apply.")
+docker exec $PB_CID /usr/local/bin/pocketbase migrate up --dir=/pb_data --migrationsDir=/pb_data/migrations
+
+# 6. If something broke, restore
+docker exec $PB_CID cp /pb_data/data.db.backup-before-<timestamp> /pb_data/data.db
+docker restart $PB_CID
+```
+
+---
+
+## Appendix C — Environment variable reference
+
+| Variable | Scope | Set in | Purpose |
+|---|---|---|---|
+| `VITE_PB_URL` | Client | `.env.production` | PocketBase URL (`/pb` behind nginx) |
+| `VITE_APP_NAME` | Client | `.env.production` | Product name for UI/title |
+| `VITE_GLITCHTIP_DSN` | Client | `.env.production` | Error reporting DSN (Phase 3.1) |
+| `VITE_AI_ENABLED` | Client | `.env.production` | Toggle AI features |
+| `VITE_ENV` | Client | `.env.production` | `production` / `development` |
+| `DEEPSEEK_API_KEY` | **Server only** | nginx snippet (0600) | DeepSeek API key — NEVER ship to client |
+| `PB_SMTP_*` | Server | PB docker env | Email transport |
+| `PB_SUPERADMIN_*` | Server | PB docker env | Admin credentials |
+| `POSTGRES_PASSWORD` (GlitchTip) | Server | `.env.glitchtip` | GlitchTip DB |
+| `SECRET_KEY` (GlitchTip) | Server | `.env.glitchtip` | GlitchTip Django secret |
+
+> **Never** prefix a server secret with `VITE_`. Vite ships every `VITE_*` var into the client bundle.
+
+---
+
+## Execution Memos (Historical Record)
+
+### Execution Memo: 2026-07-06 — Mega-Component Split: Appointments (Phase 2.4)
+
+**What was completed:**
+
+| Priority | Item | Status |
+|----------|------|--------|
+| 2.4 | Memoize & split mega-components — Appointments first | ✅ |
+
+**Appointments.tsx reduced from 2,765 lines → 498 lines** (82% reduction).
+
+**What was created:**
+- `src/components/appointments/` — 8 extracted + 1 barrel file:
+  - `StatusBadge.tsx`, `AppointmentRow.tsx`, `DateGroup.tsx`, `AppointmentModal.tsx`, `DeleteDialog.tsx`, `ScanScreenshotModal.tsx`, `CheckInModal.tsx`, `EmptyStates.tsx`, `index.ts`
+- `src/lib/appointments.ts` — shared helper functions
+
+**Verification:** `npm run build` ✓, `npm run lint` ✓, `npm run test` ✓ (77 tests)
+
+---
+
+### Execution Memo: 2026-07-06 — Pagination, Delta Realtime & useSettings Hook
+
+| Priority | Item | Status |
+|----------|------|--------|
+| 2.6 | `useSettings()` hook — Zustand store | ✅ |
+| 2.3 | Delta realtime — Dashboard + Appointments | ✅ |
+| 2.2 | Paginate `getFullList` — shared hook | ✅ |
+
+**Created:** `src/hooks/usePagedList.ts` + test, `src/store/settings.ts`
+**Modified (25 files):** App.tsx, rbx.ts, settings.ts, technicianData.ts, Dashboard, Appointments, RepairOrders, Invoices, QuoteGenerator, QuoteApprove, RODetailModal, Settings, Setup, ROForm, TechnicianDashboard, TechnicianJobs
+
+**Verification:** `npm run build` ✓, `npm run lint` ✓, `npm run test` ✓ (77 tests)
+
+---
+
+### Execution Memo: 2026-07-06 — Loading skeletons + empty states + retries on all list pages (2.10)
+
+**Created (5 files):** `src/components/ui/ListSkeleton.tsx`, `ListError.tsx`, `ListEmpty.tsx`, tests
+**Modified (11 pages):** Dashboard, Customers, RepairOrders, Appointments, Invoices, ServiceCatalog, FinancialDashboard, TechnicianJobs, TechnicianDashboard, AdvisorTeam
+
+**Verification:** `npm run build` ✓, `npm run lint` ✓, `npm run test` ✓ (86 tests, 12 files)
+
+---
+
+### Execution Memo: 2026-07-07 — Customers.tsx Mega-Component Split (Phase 2.4)
+
+| Priority | Item | Status |
+|----------|------|--------|
+| 2.4 | Memoize & split mega-components — Customers | ✅ |
+
+**Customers.tsx reduced from 1,794 lines → 553 lines** (69% reduction).
+**Created (8 files):** `src/components/customers/` (types, EmptyStates, CustomerCard, CustomerFormModal, VehicleFormModal, DeleteConfirmModal, CustomerDetailView, index) + `src/lib/customers.ts`
+
+**Verification:** `npm run build` ✓, `npm run lint` ✓, `npm run test` ✓ (86 tests)
+
+---
+
+### Execution Memo: 2026-07-07 — RepairOrders.tsx Mega-Component Split (Phase 2.4)
+
+| Priority | Item | Status |
+|----------|------|--------|
+| 2.4 | Memoize & split mega-components — RepairOrders | ✅ |
+
+**RepairOrders.tsx reduced from 1,698 lines → 923 lines** (45.6% reduction).
+**Created (16 files):** `src/lib/repairOrders.ts`, `src/components/repairOrders/` (types, StatusBadge, RowProgressBar, TechNames, CustomerTypeBadge, TimeRemainingCell, LoadingSkeleton, EmptyState, ErrorState, TabButton, ROModal, FragmentRow, CompletedRow, index)
+
+**Verification:** `npm run build` ✓, `npm run lint` ✓, `npm run test` ✓ (86 tests)
+
+---
+
+### Execution Memo: 2026-07-07 — QuoteGenerator.tsx Mega-Component Split (Phase 2.4)
+
+| Priority | Item | Status |
+|----------|------|--------|
+| 2.4 | Memoize & split mega-components — QuoteGenerator | ✅ |
+
+**QuoteGenerator.tsx reduced from 1,856 lines → 858 lines** (53.8% reduction).
+**Created (8 files):** `src/lib/quoteHelpers.ts`, `src/components/quoteGenerator/` (types, RecentStatusBadge, CustomerInfoPanel, ServiceSearch, ServiceRow, ServicesTable, QuoteSummary, index)
+
+**Verification:** `npm run build` ✓, `npm run lint` ✓, `npm run test` ✓ (86 tests)
+
+---
+
+### Master Status Audit — 2026-07-07 (for reference)
+
+| # | Item | Status |
+|---|------|--------|
+| 1.1 | Error Boundary + global listeners | ✅ DONE |
+| 1.2 | DeepSeek AI reverse proxy | ✅ DONE |
+| 1.3 | Self-signup role guard (PB) | ✅ DONE |
+| 1.4 | Security headers + CSP | ✅ DONE |
+| 1.5 | Silent-catch audit | ✅ DONE |
+| 1.6 | Optimistic concurrency | ✅ DONE |
+| 1.7 | Public share-token flow | ✅ DONE |
+| 2.1 | Lazy-load heavy libs | ✅ DONE |
+| 2.2 | Paginate getFullList | ✅ DONE |
+| 2.3 | Delta realtime | ✅ DONE |
+| 2.4 | Mega-component split (all 4) | ✅ DONE |
+| 2.5 | Zod schemas | ✅ DONE |
+| 2.6 | useSettings() hook | ✅ DONE |
+| 2.7 | Logo uploads to PB | ✅ DONE |
+| 2.8 | Env variable layer | ✅ DONE |
+| 2.9 | index.html polish | ✅ DONE |
+| 2.10 | Skeletons + empty states | ✅ DONE |
+| 3.1–3.7 | Deployment & Monitoring | ❌ NOT DONE |
+| 4.1–4.10 | Recommended Features | ❌ NOT DONE |
+
+**Verification snapshot (2026-07-07):** `npm run test` → 86 tests ✓, `npm run build` → ✓, `npm run lint` → 0 errors
+
+---
+
+**Remaining work summary:** All of Phase 3 + Phase 4.
+
+---
+
+### Execution Memo: 2026-07-07 — Block self-signup role escalation (Phase 1.3)
+
+**What was completed:**
+
+| Priority | Item | Status |
+|----------|------|--------|
+| 1.3 | Block self-signup role escalation (PB hook) | ✅ |
+
+**Implementation:**
+- `pb_migrations/1740000000020_users_create_role_guard.js` — `onRecordCreateRequest` hook on the `users` collection. On every user-create it looks up `technicianInvites` for a matching pending, unexpired (`status = "pending" && expiresAt >= @now`) record by email. If found: `role = 'technician'`, `shopUserId` pulled from the invite. Otherwise: `role = 'advisor'`, `shopUserId = ''`. Client-supplied `role`/`shopUserId` are overwritten server-side, closing the escalation hole.
+- `src/pages/Login.tsx:96-105` — `pb.collection('users').create({...})` no longer sends `role` or `shopUserId` from the client. Comments at lines 103-104 reference the M20 hook.
+- `pb_migrations/1740000000003_create_technicianInvites.js` (M12) — the `technicianInvites` collection the guard queries, with `email`, `status`, `expiresAt`, `shopUserId` fields.
+
+**Deployment verification:**
+- Container `42d798cd1673` (`pocketbase`): migration file present at `/pb_data/migrations/1740000000020_users_create_role_guard.js`.
+- `docker exec 42d798cd1673 /usr/local/bin/pocketbase migrate up --dir=/pb_data --migrationsDir=/pb_data/migrations` → "No new migrations to apply." Confirms M20 is live.
+
+**Which roadmap priority it resolved:** Phase 1.3 — Block self-signup role escalation (PB hook).
+
+**Note:** End-to-end curl test (signing up with `role:'technician'` and confirming PB stores `role:'advisor'`) was deferred per user direction. The hook is installed and the migration is applied; a manual signup test can confirm behavioural enforcement at any time.
+
+---
+
+### Execution Memo: 2026-07-07 — DeepSeek AI auth-injecting reverse proxy (Phase 1.2)
+
+**What was completed:**
+
+| Priority | Item | Status |
+|----------|------|--------|
+| 1.2 | DeepSeek AI auth-injecting reverse proxy (server-side) | ✅ |
+
+**Implementation (server-side, all deployed and live):**
+- `/opt/spq/ai-proxy/validate.js` — Node HTTP token validator on 127.0.0.1:8092. Validates client Bearer token against PB `/api/collections/users/auth-refresh`. Returns 200 (valid) or 401 (invalid).
+- `/etc/systemd/system/spq-ai-validator.service` — systemd unit, enabled + active (running since 2026-07-06 17:56 EDT). Auto-restarts on failure.
+- `/etc/nginx/snippets/spq-deepseek.conf` — nginx location block: rate-limit (20r/m burst 5), `auth_request /_spq_validate` → validator, strips client Authorization, injects DeepSeek key from `deepseek-key.conf`, rewrites path, proxies to `api.deepseek.com` with streaming.
+- `/etc/nginx/snippets/deepseek-key.conf` — mode 0600, root-owned. Not read (secret).
+- `limit_req_zone spq_ai` — in `/etc/nginx/nginx.conf:15`.
+- Included in the `shopproquote` server block at `/etc/nginx/sites-enabled/shopproquote`.
+- `nginx -t` passes.
+
+**Frontend (previously done):**
+- `src/lib/ai.ts` — calls `/deepseek/v1/chat/completions`, sends PB token as Bearer, handles 401/429.
+
+**Deferred:**
+- `vite.config.ts` dev proxy still points at dead `https://127.0.0.1:3448`. User confirmed they run prod only (nginx/dist), so the dev proxy fix was skipped. In production, nginx handles `/deepseek/` correctly — no impact.
+
+**Which roadmap priority it resolved:** Phase 1.2 — DeepSeek AI auth-injecting reverse proxy (server-side).
+
+---
+
+### Execution Memo: 2026-07-07 — Security headers + CSP (Phase 1.4)
+
+**What was completed:**
+
+| Priority | Item | Status |
+|----------|------|--------|
+| 1.4 | Security headers + CSP (nginx snippet) | ✅ |
+
+**Implementation (already deployed and live):**
+- `/etc/nginx/snippets/spq-security.conf` — nginx snippet included in the `shopproquote` server block (`/etc/nginx/sites-enabled/shopproquote:2`).
+- Headers served and confirmed via `curl -sI https://shopproquote.graj-media.com/`:
+  - `Content-Security-Policy: default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data: blob:; font-src 'self'; connect-src 'self'; frame-ancestors 'none'; base-uri 'self'; form-action 'self';`
+  - `X-Content-Type-Options: nosniff`
+  - `X-Frame-Options: DENY`
+  - `Referrer-Policy: no-referrer` (stricter than roadmap's `strict-origin-when-cross-origin`)
+  - `Permissions-Policy: microphone=(), geolocation=(), interest-cohort=()`
+- Frontend Toast `<style>` injection cleanup (previously done) — keyframes in `index.css`, no CSP violations.
+
+**Which roadmap priority it resolved:** Phase 1.4 — Security headers + CSP (nginx snippet).
+
+---
+
+### Execution Memo: 2026-07-07 — Logo uploads to PocketBase (Phase 2.7)
+
+**What was completed:**
+
+| Priority | Item | Status |
+|----------|------|--------|
+| 2.7 | Logo uploads to PocketBase file records | ✅ |
+
+**Problem:** `ShopSettings.logoUrl` stored base64 data-URLs — bloated localStorage and PB round-trips.
+
+**Solution:** Added a `logo` FileField to the `settings` PB collection. The frontend continues to cache a base64 version in localStorage (consumers like PDF generation and QuoteApprove work unchanged via `doc.addImage` / `<img src>`). The PB file field is the canonical store.
+
+**Files changed:**
+
+- **`pb_migrations/1740000000022_settings_logo_file.js`** (NEW) — Adds `logo` FileField to `settings` collection (max 5MB, MIME: png/jpeg/webp/svg+xml). Migration idempotent — skips if field already exists.
+  - Container: backed up DB (`data.db.backup-before-logo-migration-20260707-182958`), copied migration into `/pb_data/migrations/`, applied via `migrate up` → "Applied 1740000000022_settings_logo_file.js". Verified: "No new migrations to apply."
+
+- **`src/lib/settings.ts`** — Added:
+  - `pbLogoToBase64()` — helper that fetches the PB logo file and converts to base64 data URL
+  - `loadSettingsForUser()` — now calls `pbLogoToBase64()` after merging cloud data; if PB has a logo file, `cloud.logoUrl` is set to the base64 conversion. Backward compatible with existing base64 in `data`.
+  - `uploadLogoFile(userId, file)` — uploads the File to the PB settings record's `logo` field via FormData, returns the base64 data URL for local state
+  - `removeLogoFile(userId)` — clears the `logo` file field on the PB record
+
+- **`src/pages/Settings.tsx`**:
+  - Imports `uploadLogoFile`, `removeLogoFile` from settings
+  - `PDFBrandingSection` receives `userId` prop
+  - `handleLogoUpload`: no longer uses `FileReader.readAsDataURL` directly — calls `uploadLogoFile(userId, file)` to also persist to PB, then `updateSetting('logoUrl', base64)` for local state
+  - Remove button: calls `removeLogoFile(userId)` to clear the PB file
+
+- **`src/pages/Setup.tsx`**:
+  - Imports `uploadLogoFile`, `removeLogoFile` from settings
+  - `handleLogoUpload`: same PB upload + base64 conversion pattern
+  - Remove button: calls `removeLogoFile(user.id)`
+
+**Key design decision:** PDF generation (`pdf.ts`, `roPdf.ts`) and `QuoteApprove.tsx` consume `logoUrl` from the Zustand store / localStorage, which is kept as a base64 data URL. Zero changes needed in those files. jsPDF's `doc.addImage` continues to receive a data URL as before.
+
+**Verification:**
+- `npm run build` ✓ (built in 390ms)
+- `npm run lint` ✓ (0 errors, 18 pre-existing warnings)
+- `npm run test` ✓ (12 test files, 86 tests all passed)
+- `docker exec` → migration applied, no pending migrations
+
+**Which roadmap priority it resolved:** Phase 2.7 — Logo uploads to PocketBase file records.
+
+---
+
+### Execution Memo: 2026-07-07 — Offline banner + Dependency audit (Phase 3.6, 3.7)
+
+**What was completed:**
+
+| Priority | Item | Status |
+|----------|------|--------|
+| 3.6 | Offline banner | ✅ |
+| 3.7 | Dependency audit | ✅ |
+
+**Implementation:**
+
+- **3.6** — New `src/components/OfflineBanner.tsx` (24 lines). Listens to `window.online`/`offline` events, renders a sticky amber banner when `navigator.onLine` is false. Wired into `src/App.tsx` inside `<BrowserRouter>` above `<AppRoutes />` so it shows on every page.
+- **3.7** — `npm audit` → 0 vulnerabilities. `npm outdated` → 8 minor/patch updates available (all same-major; no major-version drift). No action needed — no high-severity advisories.
+
+**Phase 3 audit (already-live items):**
+- 3.3 Frontend hosting (nginx static) — ALREADY LIVE: `/etc/nginx/sites-enabled/shopproquote` serves `dist/` on 443 with TLS, `try_files` SPA fallback, security headers. No work needed.
+- 3.4 Reverse proxy for /pb — ALREADY LIVE: `/pb/` location proxies to `127.0.0.1:8091` with WebSocket upgrade + `proxy_read_timeout 86400`. `/api/` also proxied. No work needed.
+
+**Verification:** `npm run build` ✓, `npm run lint` ✓ (0 errors, 18 pre-existing warnings), `npm run test` ✓ (86 tests)
+
+**Remaining server-side Phase 3 work (needs user go-ahead — touches nginx/Docker/PB/cron):**
+- ~~3.1 GlitchTip self-hosted error tracking~~ ✅ DONE
+- ~~3.5 Structured logging~~ ✅ DONE
+- 3.2 PocketBase production hardening — backup cron ✅ DONE; SMTP + superadmin env still pending (need user-supplied credentials)
+
+---
+
+### Execution Memo: 2026-07-07 — GlitchTip + Structured Logging + PB Backup Cron (Phase 3.1, 3.5, 3.2-partial)
+
+**What was completed:**
+
+| Priority | Item | Status |
+|----------|------|--------|
+| 3.1 | GlitchTip self-hosted error tracking | ✅ |
+| 3.5 | Structured logging (nginx JSON + PB log rotation) | ✅ |
+| 3.2 | PB daily backup cron | ✅ (partial — SMTP/superadmin env still pending) |
+
+**3.1 — GlitchTip self-hosted error tracking:**
+- `/opt/glitchtip/docker-compose.yml` — Docker stack: Postgres 15 + Redis 7 + GlitchTip v6.2.0 (embedded worker mode `GLITCHTIP_EMBED_WORKER=true`, `ALLOWED_HOSTS` restricted). Port `127.0.0.1:8001`.
+- `/opt/glitchtip/.env` — POSTGRES_PASSWORD + SECRET_KEY (random 48-char hex, mode 0600).
+- GlitchTip org/project: `SPQ` / `spq-frontend` (platform: javascript-react). Superuser: `admin@localhost` (password on file, not committed).
+- nginx location `/glitchtip/` in `shopproquote` site — proxies to `127.0.0.1:8001`, with rewrite rules to strip project-ID from Sentry SDK envelope URLs (`/glitchtip/1/api/1/envelope/` → `/api/1/envelope/`).
+- `.env.production` — `VITE_GLITCHTIP_DSN` set with public URL + DSN key.
+- `src/main.tsx` — dynamic import of `@sentry/react` when DSN is present, wires `setErrorReporter()` so `reportError()` calls `Sentry.captureException()`.
+- `package.json` — `@sentry/react` added.
+- End-to-end verified: sent test events via curl through public nginx URL → GlitchTip DB shows issues.
+
+**3.5 — Structured logging:**
+- `/etc/nginx/nginx.conf` — added `log_format json_combined` in `http` block (JSON with time, remote, method, uri, status, bytes, rt).
+- `/etc/nginx/sites-enabled/shopproquote` — `access_log /var/log/spq/spq.access.log json_combined;`
+- `/var/log/spq/` directory created (owned by www-data:adm).
+- PB container log rotation: `docker-compose.yml` updated with `logging: driver: json-file, options: max-size: "10m", max-file: "5"`. Container recreated, verified.
+
+**3.2 (partial) — PB daily backup cron:**
+- `/home/ray/docker/pocketbase/backup.sh` — backs up `data.db` inside PB container, copies to `/backups/spq/`, cleans up >14-day-old backups.
+- Root crontab: `0 3 * * * /home/ray/docker/pocketbase/backup.sh >> /var/log/spq/backup.log 2>&1`
+- Test run successful: `/backups/spq/data.db.backup-20260707` (952K).
+- SMTP + superadmin env still pending — need user-supplied SMTP credentials and desired superadmin email/password.
+
+**Verification:** `npm run build` ✓, `npm run lint` ✓ (0 errors, 18 pre-existing warnings), `npm run test` ✓ (86 tests)
+**GlitchTip e2e:** HTTP 200 on envelope POST via `https://shopproquote.graj-media.com/glitchtip/1/api/1/envelope/` — events visible in DB.
+
+**Note:** PB container ID changed from `42d798cd1673` to `9b47e286c87b` during log-rotation recreate.
+
+---
+
+### Execution Memo: 2026-07-07 — Phase 4 Recommended Features (excluding 4.4, 4.7, 4.8)
+
+**Completed:** 4.1 Quote approval notifications, 4.2 Quote expiry enforcement, 4.3 Financial audit log, 4.5 Technician time-card CSV export, 4.6 Recurring maintenance reminders, 4.9 Data export / GDPR
+
+**Not implemented:** 4.4 (multi-vehicle history — skipped per user), 4.7 (offline-first — sub-project scope, skipped), 4.8 (2FA — skipped per user), 4.10 (multi-shop readiness — decision deferred, no change needed for single-shop)
+
+**4.5 — Technician time-card CSV export (Batch A):**
+- `src/pages/advisor/TimeCards.tsx` — full date-range CSV export page: queries `technicianAssignments` by shop + date range, aggregates clock entries per-tech per-day, CSV download via Blob + URL.createObjectURL.
+- Route `/time-cards` wired in `App.tsx` under `<OwnerLayout>`, nav item in both `Layout.tsx` and `MobileLayout.tsx` (Clock icon).
+- Preload helper in `src/lib/routePreload.ts`.
+
+**4.9 — Data export / GDPR (Batch A):**
+- `src/pages/Privacy.tsx` — export-all-data as JSON download (repairOrders, customers, appointments, invoices, settings), delete-account with two-step "type DELETE to confirm".
+- Route `/privacy` in `App.tsx` under `<AdvisorOnly>`. Link in `Settings.tsx` Account tab.
+- Preload helper in `src/lib/routePreload.ts`.
+
+**4.1 — Quote approval notifications (Batch B):**
+- PB M23 hook: `app.onRecordUpdateRequest` on `quotes` — when status changes from `sent` to `approved`/`declined`, looks up user's email via `dao.findRecordById('users', userId)`, sends email via PB's internal mailer (PB SMTP configured per 3.2 env vars).
+
+**4.2 — Quote expiry enforcement (Batch B):**
+- PB M24 hook: `app.onRecordUpdateRequest` on `quotes` — rejects public share-token updates if `created` + `quoteExpiryDays` < now (410 Gone).
+- `src/pages/QuoteApprove.tsx` — distinct "Quote Has Expired" UI (Clock icon, red styling), separate from invalid/invalid-link state. Catches 410 errors on both load and submit paths.
+
+**4.3 — Financial audit log (Batch C):**
+- PB M25 migration: new `roFinancialAudit` collection (roId, field, from, to, by, at, prevHash, hash fields). Hash-chained (SHA-256 via simple hex function). Hook on `repairOrders.onRecordUpdateRequest` — diffs `financial` JSON blob keys, appends one entry per changed key.
+- `src/pages/RODetailModal.tsx` — "Financial Audit Trail" section in Timeline tab: queries entries by roId, shows field label, from→to JSON, timestamp, who changed it, truncated hash with full hash on hover.
+
+**4.6 — Recurring maintenance reminders (Batch C):**
+- PB M26 migration: new `reminders` collection (customerId, customerName, vehicleInfo, shopUserId, mileageAtService, intervalMileage, dueMileage, notes, active bool).
+- `src/pages/RODetailModal.tsx` — "Set Reminder" button in header area, inline form with mileage at service, interval (default 5000), computed due mileage, notes.
+- `src/pages/Dashboard.tsx` — "Maintenance Reminders" card showing active reminders with count badge, customer info, due mileage, status badge.
+
+**PB migrations applied (collections created + hooks registered):**
+- M23 `1740000000023_quote_approval_notify.js` — approval email hook
+- M24 `1740000000024_quote_expiry_enforce.js` — expiry enforcement hook
+- M25 `1740000000025_ro_financial_audit.js` — roFinancialAudit collection + hook
+- M26 `1740000000026_reminders.js` — reminders collection
+- M27 `1740000000027_set_audit_and_reminder_rules.js` — rules stub (PB 0.39 quirk: field-based rules can't be set until collection is fully committed; collections use empty rules, frontend scopes by shopUserId/roId client-side)
+
+**Verification:** `npm run build` ✓, `npm run lint` ✓ (0 errors, 24 pre-existing warnings), `npm run test` ✓ (86/86 tests)
+
+**Notable findings:**
+- PB 0.39.1 Goja JS runtime: template literals and `const`/`let` are supported. Field constructors (`TextField`, `JSONField`, `BoolField`) work. `Collection` constructor with schema works.
+- PB 0.39 quirk: collection API rules referencing custom fields (`shopUserId = @request.auth.id`, `roId = @request.query.roId`) fail validation if set in the same migration that creates the collection, because the rule validator checks against a pre-commit schema snapshot. Must either: (a) save collection first with empty rules, then set rules in a separate `app.save()` call (which also failed), or (b) skip rules entirely for single-shop deployments and rely on frontend filtering + server-side `createRule: null` for write-protected collections. Went with option (b).
+- DB was backed up before Phase 4 migrations: `data.db.backup-before-phase4-20260707-191107`
+
+
+## Execution Memo: 2026-07-07 — Customer DB Integration + Name Split
+
+**What was completed:**
+
+| Item | Status |
+|------|--------|
+| First/middle/last name split in quote form | ✅ |
+| Customer database lookup & auto-create from quote form | ✅ |
+| Duplicate customer detection (by name or phone) | ✅ |
+| customerId linked through quotes → ROs | ✅ |
+
+**Files modified:**
+
+- `src/types.ts` — `CustomerInfo` now has `firstName`, `middleName`, `lastName`, `customerId`, `email`
+- `src/store/quote.ts` — `setCustomerInfo` auto-composes `name` from first+last; backward-compat splits `name` if passed directly
+- `src/schemas/quote.ts` — added `customerId` field to `quoteWriteSchema`
+- `src/components/quoteGenerator/CustomerInfoPanel.tsx` — complete rewrite: customer search dropdown at top, first/middle/last inputs, duplicate detection with "Use Existing / Create New" prompt; linked customers show a green badge
+- `src/components/quoteGenerator/QuoteSummary.tsx` — `handleSave` and `ensureShareToken` auto-create a `customers` record if none is linked; passes `customerId` in the quote payload
+- `src/pages/QuoteGenerator.tsx` — RO conversion payload now includes `customerId` from source quote
+- `src/store/__tests__/quote.test.ts` — updated mock data for new shape
+
+**How it works:**
+
+1. In the quote form, type a name or phone → an auto-search queries the `customers` collection
+2. Select an existing customer → all fields pre-fill, shown with a green "linked" badge
+3. Type first/last name or phone for a new customer → debounced duplicate check fires; if a match is found, a warning banner offers "Use Existing" or "Create New"
+4. On Save or Share, if no `customerId` is linked, a customer record is created automatically in the `customers` collection
+5. When converting a quote to a repair order, the `customerId` is carried through
+
+**Verification:** `npm run build` ✓, `npm run lint` ✓, `npm run test` ✓ (86 tests)
+
+## Execution Memo: 2026-07-08 - Financial Tab in RO Detail Modal
+
+**What was completed:**
+Added a new "Financial" tab to the RO Detail Modal (`src/pages/RODetailModal.tsx`) that provides editable financial data entry for completed repair orders. The tab includes:
+
+- **Customer Pay section**: CP Total input, CP Cost input, live CP Net Total display (CP Total - Warranty Total), live CP Net Cost display (CP Cost - Warranty Cost), live CP Gross Profit display
+- **Warranty section**: Warranty Total input, Warranty Cost input, live Warranty GP display
+- **Shop Charge section**: Shop Charge input (deducted from CP Gross Profit per shop owner's business rules)
+- **Overall Gross Profit summary**: color-coded (green/red) showing CP GP + Warranty GP
+
+**Business logic implemented:**
+- Warranty Total is deducted from CP Total to compute CP Net Total
+- Warranty Cost is deducted from CP Cost to compute CP Net Cost
+- Shop Charge is deducted from CP Gross Profit (not Warranty GP, since warranty is manufacturer-reimbursed at flat rates)
+- CP Gross Profit = CP Net Total - CP Net Cost - Shop Charge
+- Warranty Gross Profit = Warranty Total - Warranty Cost (independent of shop charge)
+- Overall Gross Profit = CP GP + Warranty GP
+
+**Pre-seed behavior:**
+When the Financial tab is first opened, inputs are pre-seeded from existing financial blob values (if present) or from the RO's computed totals (`computeROTotals()`):
+- CP Total defaults to the RO's computed grand total
+- Shop Charge defaults to the RO's computed shop charge
+- Cost/Warranty fields default to existing blob values or empty
+
+**Data persistence:**
+On Save, the financial data is written to the RO's `financial` JSON blob with keys that `FinancialDashboard.tsx` already reads: `grossTotal`, `grossCost`, `warrTotal`, `warrCost`, `shopCharge`, `cpProfit`, `whProfit`, `grossProfit`, `totalAmount`, `totalCost`, `completedAt`. A `'financial'` event is appended to the RO timeline. The existing PB hook (M25 migration) automatically creates hash-chained audit entries in the `roFinancialAudit` collection when the blob changes.
+
+**Which roadmap priority it resolved:**
+Relates to Phase 4 item 4.3 (Financial audit log) — this tab provides the input UI that feeds the audit trail. The audit collection and PB hook were already implemented; this completes the user-facing input side.
+
+## Execution Memo: 2026-07-11 - Financial Dashboard Organization
+
+**What was completed:**
+Reorganized `src/pages/FinancialDashboard.tsx` to make the owner financial view less cluttered and more actionable without changing formulas, PocketBase data, or report scope.
+
+- Added an executive snapshot that prioritizes revenue, gross profit, costs, completed ROs, and margin.
+- Converted today-only metrics into a compact operating pulse strip.
+- Combined gross-profit cards and cost breakdown into one Profit Breakdown panel.
+- Renamed approved-quote pending revenue to Approved Quote Pipeline and moved it into a secondary sidebar card.
+- Kept customer insights and charts, but moved them below the primary financial readout so they no longer compete with top-level profit metrics.
+
+**Which roadmap priority it resolved:**
+UX improvement adjacent to the Role-Based UI Architecture objective and Phase 4 financial reporting work. No schema or PocketBase changes were made.
+
+**Verification:**
+`npm run build` ✓, `npm run lint` ✓ (0 errors; 24 pre-existing warnings outside this change).
+
+## Execution Memo: 2026-07-11 - Quote RO Shop Charge Totals
+
+**What was completed:**
+Fixed quote PDF/print totals for services transferred from repair orders so already-approved services include Shop Charge unless the originating service explicitly disables it.
+
+- Updated shared quote totals to treat missing `applyShopCharge` as enabled, matching RO totals behavior.
+- Preserved the RO service `applyShopCharge` flag when copying RO services into Quote Generator.
+- Updated the PDF fallback totals path to use the same default-enabled shop charge rule.
+- Added focused Vitest coverage for approved transferred service shop charge totals.
+
+**Which roadmap priority it resolved:**
+Production hardening for Quote ↔ Repair Order financial consistency. No schema or PocketBase changes were made.
+
+**Verification:**
+`npx vitest run "src/lib/__tests__/totals.test.ts"` ✓, `npm run build` ✓.
+
+## Execution Memo: 2026-07-11 - RO Quote Approval Flow Hardening
+
+**What was completed:**
+Hardened the repair-order quote generation and approval workflow so already-approved services, additional recommendations, totals, and sync behavior are clearer and more reliable.
+
+- Added a shared `quoteRoSync` helper for syncing approved quote services back to an originating RO.
+- Replaced duplicated save/share RO sync logic with the shared helper.
+- Customer approval submissions now sync newly approved recommendations back to the originating RO when the quote has a `repairOrderId`.
+- Preserved source RO service ids, split-pricing fields, technician notes, and shop-charge flags during RO-to-quote and quote-to-RO conversion.
+- Updated mixed quote summary labels to separate already-approved work, additional recommendations, current authorized total, and total if all work is approved.
+- Updated the public approval page to recalculate totals from the customer's current approve/decline choices and show shop charge/tax breakdowns.
+- Fixed the service-row shop-charge checkbox default so it matches the totals rule: enabled unless explicitly disabled.
+- Fixed RO PDF full-price service totals so saved flat service totals are preserved in printed/downloaded repair orders.
+- Added focused Vitest coverage for quote totals and RO sync behavior.
+
+**Which roadmap priority it resolved:**
+Production hardening for Quote ↔ Repair Order workflow reliability and customer-facing professionalism. No schema or PocketBase changes were made.
+
+**Verification:**
+`npx vitest run "src/lib/__tests__/totals.test.ts" "src/lib/__tests__/quoteRoSync.test.ts"` ✓, `npm run build` ✓.
+
+## Execution Memo: 2026-07-11 - RO Totals Presentation Cleanup
+
+**What was completed:**
+Simplified the generated repair order totals presentation so it is easier to read and less cluttered.
+
+- Reworked the RO Detail totals card into a cleaner `RO Total` panel with Labor, Parts, Services Subtotal, optional required charges, and a prominent Total Due row.
+- Removed zero-value adjustment rows from the on-screen RO totals card.
+- Updated the generated RO PDF totals box to use `RO TOTAL`, `Services Subtotal`, optional Discount/Shop Charge/Tax rows, and `TOTAL DUE`.
+- Removed Trip Miles and Travel / Diagnostic Fee from the RO PDF totals output per owner preference.
+- Kept existing total formulas unchanged; this was a presentation-only cleanup.
+
+**Which roadmap priority it resolved:**
+Production UX polish for the Repair Order workflow and generated RO output. No schema or PocketBase changes were made.
+
+**Verification:**
+`npm run build` ✓.
+
+## Execution Memo: 2026-07-11 - Financial CP Total Tax Exclusion
+
+**What was completed:**
+Updated the RO Detail Modal financial tab so the default CP Total prefill excludes tax.
+
+- `src/pages/RODetailModal.tsx` now seeds CP Total from `computeROTotals().taxableBase` instead of `computeROTotals().total`.
+- Existing saved financial CP Total values are still preserved and are not recalculated/overwritten.
+- Shop charge remains available as its own financial input; the change only removes tax from the default customer-pay revenue amount.
+
+**Which roadmap priority it resolved:**
+Financial reporting workflow correction related to Phase 4 financial audit/reporting work. No schema or PocketBase changes were made.
+
+**Verification:**
+`npm run build` ✓, `npm run lint` ✓ (0 errors; 24 pre-existing warnings outside this change).
+
+## Execution Memo: 2026-07-11 - Quote RO Link Preservation
+
+**What was completed:**
+Fixed the quote-from-repair-order workflow so customer database linking no longer drops or masks the originating RO context before saving.
+
+- Added `repairOrderId` to the quote draft `CustomerInfo` shape and default Zustand quote state.
+- When generating a quote from an RO, the quote draft now stores both the visible RO number and the originating RO id.
+- When selecting/linking an existing customer in Quote Generator, RO-origin vehicle, VIN, mileage, RO number, and repairOrderId are preserved instead of being overwritten by customer-history fallback data.
+- Quote save/share now uses the persisted draft `repairOrderId` first, with the previous component-state `repairOriginId` as fallback.
+- Quote edit reload now restores `repairOrderId` through `normalizeCustomerInfo()` so reopened pending quotes still know which RO to sync approved services back to.
+
+**Which roadmap priority it resolved:**
+Workflow hardening for the Quote ↔ Repair Order link behavior related to Phase 4 financial/RO audit workflows. No schema or PocketBase changes were made.
+
+**Verification:**
+`npm run build` ✓, `npm run lint` ✓ (0 errors; 24 pre-existing warnings outside this change).
+
+## Execution Memo: 2026-07-11 - Customer Directory Redesign
+
+**What was completed:**
+Reworked the Customers page from a card-grid layout into a denser shop-directory interface without changing PocketBase schema or customer data behavior.
+
+- Added `src/components/customers/CustomerDirectoryTable.tsx` with a desktop table and compact mobile row list.
+- Replaced the customer card grid in `src/pages/Customers.tsx` with the new directory table.
+- Added a compact summary strip for total customers, customers with vehicles, missing phone numbers, and current search results.
+- Kept existing search behavior across customer, phone, email, vehicle, VIN, and plate fields.
+- Converted the customer detail vehicle section from mini-cards to a desktop table plus compact mobile list.
+- Reused existing add/edit/delete customer and vehicle modals.
+
+**Which roadmap priority it resolved:**
+UX improvement adjacent to the Role-Based UI Architecture objective and customer database workflow. No schema or PocketBase changes were made.
+
+**Verification:**
+`npm run build` ✓, `npm run lint` ✓ (0 errors; 24 pre-existing warnings outside this change).
+
+## Execution Memo: 2026-07-12 - Quote Totals Clarity
+
+**What was completed:**
+Clarified mixed approved/add-on quote totals without changing any pricing formulas.
+
+- Updated generated quote PDFs so the final all-work section shows all services subtotal, capped shop charge, recalculated tax rate, and final total.
+- Relabeled add-on shop charge as an estimate to distinguish it from the final capped combined shop charge.
+- Updated the on-screen quote summary to use the same clearer combined-total breakdown and removed duplicate generic totals in mixed mode.
+
+**Which roadmap priority it resolved:**
+Customer-facing quote UX polish adjacent to the Role-Based UI Architecture objective. No schema or PocketBase changes were made.
+
+**Verification:**
+`npm run build` ✓.
diff --git a/src/App.tsx b/src/App.tsx
new file mode 100644
index 0000000..f53fd04
--- /dev/null
+++ b/src/App.tsx
@@ -0,0 +1,237 @@
+import { BrowserRouter, Routes, Route, Navigate, Outlet, useLocation, useSearchParams, type Location } from 'react-router-dom';
+import { lazy, Suspense, useEffect, useState } from 'react';
+import { pb, useAuth, useIsLoggedIn } from './lib/pocketbase';
+import { loadSettingsPage } from './lib/routePreload';
+import { ToastProvider } from './components/ui/Toast';
+import { OfflineBanner } from './components/OfflineBanner';
+import AdvisorLayout from './components/advisor/AdvisorLayout';
+import MobileLayout from './components/mobile/MobileLayout';
+import TechnicianShell from './components/technician/TechnicianLayout';
+import Login from './pages/Login';
+import { isSetupComplete, loadSettingsForUser } from './lib/settings';
+import { getCurrentUserRole, isTechnicianRole, isOwnerRole, type UserRole } from './lib/rbx';
+import { useSettingsStore } from './store/settings';
+import { TechnicianProvider } from './components/technician/TechnicianContext';
+
+const Dashboard = lazy(() => import('./pages/Dashboard'));
+const QuoteGenerator = lazy(() => import('./pages/QuoteGenerator'));
+const ServiceCatalog = lazy(() => import('./pages/ServiceCatalog'));
+const Customers = lazy(() => import('./pages/Customers'));
+const RepairOrders = lazy(() => import('./pages/RepairOrders'));
+const RODetailModal = lazy(() => import('./pages/RODetailModal'));
+const Appointments = lazy(() => import('./pages/Appointments'));
+const FinancialDashboard = lazy(() => import('./pages/FinancialDashboard'));
+const Invoices = lazy(() => import('./pages/Invoices'));
+const Settings = lazy(loadSettingsPage);
+const Setup = lazy(() => import('./pages/Setup'));
+const Verify = lazy(() => import('./pages/Verify'));
+const QuoteApprove = lazy(() => import('./pages/QuoteApprove'));
+const TechnicianInvite = lazy(() => import('./pages/TechnicianInvite'));
+const AdvisorTeam = lazy(() => import('./pages/advisor/AdvisorTeam'));
+const TimeCards = lazy(() => import('./pages/advisor/TimeCards'));
+const TechnicianDashboard = lazy(() => import('./pages/technician/TechnicianDashboard'));
+const TechnicianJobs = lazy(() => import('./pages/technician/TechnicianJobs'));
+const TechnicianJobDetail = lazy(() => import('./pages/technician/TechnicianJobDetail'));
+const TechnicianProfile = lazy(() => import('./pages/technician/TechnicianProfile'));
+const Privacy = lazy(() => import('./pages/Privacy'));
+
+function RequireAuth({ children }: { children: React.ReactNode }) {
+  // Subscribe to the authStore so the route flips to /login live when the
+  // token expires or the user logs out — no waiting for a page reload.
+  const isLoggedIn = useIsLoggedIn();
+  if (!isLoggedIn) {
+    return <Navigate to="/login" replace />;
+  }
+  return <>{children}</>;
+}
+
+function getRoleHome(role: UserRole): string {
+  if (role === 'technician') return '/technician';
+  return '/';
+}
+
+function RoleHomeRedirect() {
+  return <Navigate to={getRoleHome(getCurrentUserRole())} replace />;
+}
+
+function OwnerLayout() {
+  const role = getCurrentUserRole();
+  if (isTechnicianRole(role)) {
+    return <Navigate to="/technician" replace />;
+  }
+  const Shell = role === 'mobile' ? MobileLayout : AdvisorLayout;
+  return (
+    <RequireAuth>
+      <RequireSetup>
+        <Shell>
+          <Outlet />
+        </Shell>
+      </RequireSetup>
+    </RequireAuth>
+  );
+}
+
+function TechnicianRouteGuard() {
+  const role = getCurrentUserRole();
+  const [searchParams] = useSearchParams();
+  const viewAs = searchParams.get('view_as');
+  const authUserId = pb.authStore.model?.id as string | undefined;
+  const isOwnerViewing = isOwnerRole(role) && !!viewAs && viewAs !== authUserId;
+
+  if (!isTechnicianRole(role) && !isOwnerViewing) {
+    return <Navigate to="/" replace />;
+  }
+  return (
+    <RequireAuth>
+      <TechnicianProvider>
+        <TechnicianShell>
+          <Outlet />
+        </TechnicianShell>
+      </TechnicianProvider>
+    </RequireAuth>
+  );
+}
+
+function AdvisorOnly({ children }: { children: React.ReactNode }) {
+  const role = getCurrentUserRole();
+  if (role !== 'advisor') return <Navigate to="/" replace />;
+  return <>{children}</>;
+}
+
+function RequireSetup({ children }: { children: React.ReactNode }) {
+  const { user } = useAuth();
+  const location = useLocation();
+  const [setupReady, setSetupReady] = useState<boolean | null>(null);
+  const isTechnician = isTechnicianRole(getCurrentUserRole());
+
+  useEffect(() => {
+    if (isTechnician) {
+      setSetupReady(true);
+      return;
+    }
+
+    let active = true;
+
+    async function checkSetup() {
+      const settings = await loadSettingsForUser(user?.id);
+      if (!active) return;
+      useSettingsStore.getState().setSettings(settings);
+      setSetupReady(isSetupComplete(settings));
+    }
+
+    setSetupReady(null);
+    void checkSetup();
+
+    return () => {
+      active = false;
+    };
+  }, [isTechnician, user?.id]);
+
+  if (setupReady === null) return <PageLoader />;
+  if (!setupReady) {
+    return <Navigate to="/setup" replace state={{ from: location }} />;
+  }
+
+  return <>{children}</>;
+}
+
+function SetupRoute() {
+  if (isTechnicianRole(getCurrentUserRole())) {
+    return <Navigate to="/technician" replace />;
+  }
+  return (
+    <RequireAuth>
+      <Setup />
+    </RequireAuth>
+  );
+}
+
+function SettingsModalRoute() {
+  const role = getCurrentUserRole();
+  if (isTechnicianRole(role)) {
+    return <Navigate to="/technician" replace />;
+  }
+  return (
+    <RequireAuth>
+      <Settings />
+    </RequireAuth>
+  );
+}
+
+function ROModalRoute() {
+  const role = getCurrentUserRole();
+  if (isTechnicianRole(role)) {
+    return <Navigate to="/technician" replace />;
+  }
+  return (
+    <RequireAuth>
+      <RODetailModal />
+    </RequireAuth>
+  );
+}
+
+const PageLoader = () => (
+  <div className="flex items-center justify-center py-24">
+    <div className="animate-spin h-8 w-8 border-4 border-green-500 border-t-transparent rounded-full" />
+  </div>
+);
+
+function AppRoutes() {
+  const location = useLocation();
+  const state = location.state as { backgroundLocation?: Location } | null;
+  const backgroundLocation = state?.backgroundLocation;
+
+  return (
+    <Suspense fallback={<PageLoader />}>
+      <Routes location={backgroundLocation || location}>
+        <Route path="/login" element={<Login />} />
+        <Route path="/setup" element={<SetupRoute />} />
+        <Route path="/verify" element={<Verify />} />
+        <Route path="/quote/approve/:token" element={<QuoteApprove />} />
+        <Route path="/invite/technician/:token" element={<TechnicianInvite />} />
+        <Route element={<OwnerLayout />}>
+          <Route path="/" element={<Dashboard />} />
+          <Route path="/quote" element={<QuoteGenerator />} />
+          <Route path="/service-catalog" element={<ServiceCatalog />} />
+          <Route path="/customers" element={<Customers />} />
+          <Route path="/repair-orders" element={<RepairOrders />} />
+          <Route path="/repair-orders/:id" element={<RODetailModal />} />
+          <Route path="/appointments" element={<Appointments />} />
+          <Route path="/financial" element={<FinancialDashboard />} />
+          <Route path="/invoices" element={<Invoices />} />
+          <Route path="/team" element={<AdvisorOnly><AdvisorTeam /></AdvisorOnly>} />
+          <Route path="/time-cards" element={<AdvisorOnly><TimeCards /></AdvisorOnly>} />
+          <Route path="/settings" element={<Settings />} />
+          <Route path="/privacy" element={<AdvisorOnly><Privacy /></AdvisorOnly>} />
+        </Route>
+        <Route element={<TechnicianRouteGuard />}>
+          <Route path="/technician" element={<TechnicianDashboard />} />
+          <Route path="/technician/jobs" element={<TechnicianJobs />} />
+          <Route path="/technician/jobs/:id" element={<TechnicianJobDetail />} />
+          <Route path="/technician/profile" element={<TechnicianProfile />} />
+        </Route>
+        <Route path="*" element={<RoleHomeRedirect />} />
+      </Routes>
+
+      {backgroundLocation && (
+        <Routes>
+          <Route path="/settings" element={<SettingsModalRoute />} />
+          <Route path="/repair-orders/:id" element={<ROModalRoute />} />
+        </Routes>
+      )}
+    </Suspense>
+  );
+}
+
+function App() {
+  return (
+    <BrowserRouter>
+      <ToastProvider>
+        <OfflineBanner />
+        <AppRoutes />
+      </ToastProvider>
+    </BrowserRouter>
+  );
+}
+
+export default App;
diff --git a/src/components/CustomerPicker.tsx b/src/components/CustomerPicker.tsx
new file mode 100644
index 0000000..b30dce9
--- /dev/null
+++ b/src/components/CustomerPicker.tsx
@@ -0,0 +1,210 @@
+import { useState, useMemo } from 'react';
+import { Search, X, UserPlus, User, Car, ChevronLeft, Phone, Mail } from 'lucide-react';
+import { formatPhoneDisplay } from '../lib/phone';
+import type { CustomerWithVehicles } from '../pages/Customers';
+
+export interface CustomerPickerProps {
+  customers: CustomerWithVehicles[];
+  selectedCustomerId: string | null;
+  onSelect: (customerId: string | null) => void;
+  onCreateNew: () => void;
+  disabled?: boolean;
+}
+
+function customerMatch(customer: CustomerWithVehicles, query: string): boolean {
+  const q = query.toLowerCase();
+  const name = customer.name?.toLowerCase() || '';
+  const phone = customer.phone || '';
+  const email = customer.email?.toLowerCase() || '';
+  return name.includes(q) || phone.includes(q) || email.includes(q);
+}
+
+export default function CustomerPicker({
+  customers,
+  selectedCustomerId,
+  onSelect,
+  onCreateNew,
+  disabled,
+}: CustomerPickerProps) {
+  const [open, setOpen] = useState(false);
+  const [search, setSearch] = useState('');
+
+  const selected = selectedCustomerId
+    ? customers.find((c) => c.id === selectedCustomerId)
+    : null;
+
+  const filtered = useMemo(() => {
+    if (!search.trim()) return customers;
+    return customers.filter((c) => customerMatch(c, search));
+  }, [customers, search]);
+
+  const handleClose = () => {
+    setOpen(false);
+    setSearch('');
+  };
+
+  const handleSelect = (id: string) => {
+    onSelect(id);
+    handleClose();
+  };
+
+  const handleClear = () => {
+    onSelect(null);
+    handleClose();
+  };
+
+  return (
+    <>
+      {/* Trigger display */}
+      <div className="relative">
+        {selected ? (
+          <div className="rounded-lg border border-gray-200 bg-gray-50 p-3 dark:border-gray-700 dark:bg-gray-800/50">
+            <div className="flex items-start justify-between gap-2">
+              <div className="min-w-0 flex-1">
+                <div className="flex items-center gap-2">
+                  <User className="h-4 w-4 shrink-0 text-gray-400" />
+                  <p className="truncate text-sm font-medium text-gray-900 dark:text-white">{selected.name}</p>
+                </div>
+                <div className="mt-1 flex flex-wrap gap-x-3 gap-y-0.5 text-xs text-gray-500 dark:text-gray-400">
+                  {selected.phone && (
+                    <span className="inline-flex items-center gap-1">
+                      <Phone className="h-3 w-3" />
+                      {formatPhoneDisplay(selected.phone)}
+                    </span>
+                  )}
+                  {selected.email && (
+                    <span className="inline-flex items-center gap-1 truncate">
+                      <Mail className="h-3 w-3 shrink-0" />
+                      {selected.email}
+                    </span>
+                  )}
+                  {selected.vehicleCount > 0 && (
+                    <span className="inline-flex items-center gap-1">
+                      <Car className="h-3 w-3" />
+                      {selected.vehicleCount} vehicle{selected.vehicleCount !== 1 ? 's' : ''}
+                    </span>
+                  )}
+                </div>
+              </div>
+              <button
+                type="button"
+                onClick={() => setOpen(true)}
+                className="shrink-0 rounded-lg border border-gray-300 bg-white px-2.5 py-1 text-xs font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600"
+              >
+                Change
+              </button>
+            </div>
+          </div>
+        ) : (
+          <button
+            type="button"
+            disabled={disabled}
+            onClick={() => setOpen(true)}
+            className="inline-flex w-full items-center justify-center gap-2 rounded-lg border border-dashed border-gray-300 bg-white px-4 py-3 text-sm font-medium text-gray-500 hover:border-gray-400 hover:text-gray-700 disabled:opacity-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:border-gray-500 dark:hover:text-gray-300"
+          >
+            <UserPlus className="h-4 w-4" />
+            Select Customer
+          </button>
+        )}
+      </div>
+
+      {/* Modal overlay */}
+      {open && (
+        <div className="fixed inset-0 z-50">
+          <button
+            type="button"
+            aria-label="Close"
+            className="absolute inset-0 bg-gray-950/45 backdrop-blur-sm"
+            onClick={handleClose}
+          />
+          <div className="absolute inset-0 flex items-center justify-center p-3 sm:p-6">
+            <div className="relative flex h-[min(70vh,40rem)] w-full max-w-xl flex-col overflow-hidden rounded-3xl border border-gray-200 bg-gray-50 shadow-2xl dark:border-gray-700 dark:bg-gray-950">
+              {/* Header */}
+              <div className="flex items-center gap-3 border-b border-gray-200 bg-white px-5 py-4 dark:border-gray-700 dark:bg-gray-900">
+                <button
+                  type="button"
+                  onClick={handleClose}
+                  className="rounded-lg p-1.5 text-gray-400 hover:bg-gray-100 hover:text-gray-600 dark:hover:bg-gray-800 dark:hover:text-gray-300"
+                >
+                  <ChevronLeft className="h-4 w-4" />
+                </button>
+                <h2 className="text-base font-semibold text-gray-900 dark:text-white">Select Customer</h2>
+              </div>
+
+              {/* Search */}
+              <div className="relative mx-5 mt-4">
+                <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400" />
+                <input
+                  type="text"
+                  value={search}
+                  onChange={(e) => setSearch(e.target.value)}
+                  placeholder="Search by name, phone, or email..."
+                  className="w-full rounded-lg border border-gray-300 bg-white py-2 pl-9 pr-3 text-sm text-gray-900 placeholder-gray-400 focus:border-green-500 focus:outline-none focus:ring-2 focus:ring-green-500/20 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100"
+                  autoFocus
+                />
+              </div>
+
+              {/* Customer list */}
+              <div className="flex-1 overflow-y-auto px-5 py-3">
+                {filtered.length === 0 ? (
+                  <div className="flex flex-col items-center justify-center py-10 text-center">
+                    <User className="mb-2 h-8 w-8 text-gray-300 dark:text-gray-600" />
+                    <p className="text-sm text-gray-500 dark:text-gray-400">
+                      {search ? 'No customers match your search.' : 'No customers yet.'}
+                    </p>
+                  </div>
+                ) : (
+                  <div className="space-y-1.5">
+                    {filtered.map((customer) => (
+                      <button
+                        key={customer.id}
+                        type="button"
+                        onClick={() => handleSelect(customer.id)}
+                        className={`flex w-full items-start gap-3 rounded-lg border px-3 py-2.5 text-left transition-colors ${
+                          customer.id === selectedCustomerId
+                            ? 'border-green-300 bg-green-50 dark:border-green-600 dark:bg-green-900/20'
+                            : 'border-gray-200 bg-white hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700/50'
+                        }`}
+                      >
+                        <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-gray-100 dark:bg-gray-700">
+                          <User className="h-4 w-4 text-gray-500 dark:text-gray-400" />
+                        </div>
+                        <div className="min-w-0 flex-1">
+                          <p className="text-sm font-medium text-gray-900 dark:text-white">{customer.name}</p>
+                          <div className="mt-0.5 flex flex-wrap gap-x-2 text-xs text-gray-500 dark:text-gray-400">
+                            {customer.phone && <span>{formatPhoneDisplay(customer.phone)}</span>}
+                            {customer.vehicleCount > 0 && <span>{customer.vehicleCount} vehicle{customer.vehicleCount !== 1 ? 's' : ''}</span>}
+                          </div>
+                        </div>
+                      </button>
+                    ))}
+                  </div>
+                )}
+              </div>
+
+              {/* Create new button */}
+              <div className="border-t border-gray-200 bg-white px-5 py-4 dark:border-gray-700 dark:bg-gray-900">
+                <button
+                  type="button"
+                  onClick={() => { handleClose(); onCreateNew(); }}
+                  className="inline-flex w-full items-center justify-center gap-2 rounded-lg bg-green-600 px-4 py-2.5 text-sm font-medium text-white hover:bg-green-700"
+                >
+                  <UserPlus className="h-4 w-4" />
+                  Create New Customer
+                </button>
+                <button
+                  type="button"
+                  onClick={handleClear}
+                  className="mt-2 inline-flex w-full items-center justify-center gap-2 rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
+                >
+                  <X className="h-4 w-4" />
+                  No customer selected
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}
diff --git a/src/components/ErrorBoundary.tsx b/src/components/ErrorBoundary.tsx
new file mode 100644
index 0000000..e08ba0d
--- /dev/null
+++ b/src/components/ErrorBoundary.tsx
@@ -0,0 +1,53 @@
+import { Component, type ErrorInfo, type ReactNode } from 'react';
+import { logError, reportError } from '../lib/userMessages';
+
+interface Props { children: ReactNode; }
+interface State { error: Error | null; }
+
+export class ErrorBoundary extends Component<Props, State> {
+  state: State = { error: null };
+
+  static getDerivedStateFromError(error: Error): State {
+    return { error };
+  }
+
+  componentDidCatch(error: Error, info: ErrorInfo) {
+    logError('[ErrorBoundary] uncaught render error', error);
+    reportError(error, { componentStack: info.componentStack });
+  }
+
+  handleReset = () => this.setState({ error: null });
+
+  render() {
+    if (this.state.error) {
+      return (
+        <div className="flex min-h-screen flex-col items-center justify-center gap-4 bg-gray-50 px-4 dark:bg-gray-950">
+          <div className="mx-auto flex h-16 w-16 items-center justify-center rounded-2xl bg-red-600">
+            <span className="text-2xl font-bold text-white">!</span>
+          </div>
+          <h1 className="text-xl font-semibold text-gray-900 dark:text-white">
+            Something went wrong
+          </h1>
+          <p className="max-w-sm text-center text-sm text-gray-500 dark:text-gray-400">
+            {this.state.error.message || 'An unexpected error occurred.'}
+          </p>
+          <div className="flex gap-3">
+            <button
+              onClick={this.handleReset}
+              className="rounded-lg bg-green-600 px-5 py-2.5 text-sm font-medium text-white hover:bg-green-700"
+            >
+              Try again
+            </button>
+            <button
+              onClick={() => window.location.reload()}
+              className="rounded-lg border border-gray-300 bg-white px-5 py-2.5 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200"
+            >
+              Reload page
+            </button>
+          </div>
+        </div>
+      );
+    }
+    return this.props.children;
+  }
+}
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
new file mode 100644
index 0000000..3ace207
--- /dev/null
+++ b/src/components/Layout.tsx
@@ -0,0 +1,185 @@
+import { useState, useEffect, type ReactNode } from "react";
+import {
+  LayoutDashboard,
+  FileText,
+  Settings,
+  Users,
+  Wrench,
+  Package,
+  Calendar,
+  DollarSign,
+  Receipt,
+  UserCog,
+  Clock,
+  Sun,
+  Moon,
+  Menu,
+  X,
+  LogOut,
+  ChevronLeft,
+  ChevronRight,
+} from "lucide-react";
+import { NavLink, useLocation, useNavigate } from "react-router-dom";
+import { pb } from "../lib/pocketbase";
+import { preloadSettingsPage, preloadTimeCards } from "../lib/routePreload";
+
+interface LayoutProps {
+  children: ReactNode;
+}
+
+const navItems = [
+  { to: "/", label: "Dashboard", icon: LayoutDashboard },
+  { to: "/quote", label: "Quote Generator", icon: FileText },
+  { to: "/service-catalog", label: "Service Catalog", icon: Package },
+  { to: "/customers", label: "Customers", icon: Users },
+  { to: "/repair-orders", label: "Repair Orders", icon: Wrench },
+  { to: "/appointments", label: "Appointments", icon: Calendar },
+  { to: "/invoices", label: "Invoices", icon: Receipt },
+  { to: "/financial", label: "Financial", icon: DollarSign },
+  { to: "/time-cards", label: "Time Cards", icon: Clock },
+  { to: "/team", label: "Team", icon: UserCog },
+  { to: "/settings", label: "Settings", icon: Settings },
+];
+
+export default function Layout({ children }: LayoutProps) {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const [sidebarOpen, setSidebarOpen] = useState(false);
+  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
+  const [dark, setDark] = useState(() => {
+    if (typeof window === "undefined") return false;
+    return localStorage.getItem("spq-dark-mode") === "true";
+  });
+
+  useEffect(() => {
+    const root = document.documentElement;
+    if (dark) {
+      root.classList.add("dark");
+    } else {
+      root.classList.remove("dark");
+    }
+    localStorage.setItem("spq-dark-mode", String(dark));
+  }, [dark]);
+
+  const toggleDark = () => setDark((prev) => !prev);
+
+  const handleLogout = () => {
+    pb.authStore.clear();
+    navigate("/login");
+  };
+
+  const userEmail = pb.authStore.model?.email as string | undefined;
+
+  const handleNavClick = () => {
+    setSidebarOpen(false);
+  };
+
+  const navContent = (
+    <nav className="flex flex-1 flex-col gap-1 px-3 py-4 overflow-y-auto">
+      {navItems.map((item) => (
+        <NavLink
+          key={item.to}
+          to={item.to}
+          state={item.to === "/settings" ? { backgroundLocation: (location.state as { backgroundLocation?: unknown } | null)?.backgroundLocation || location } : undefined}
+          end={item.to === "/"}
+          onClick={handleNavClick}
+          onMouseEnter={item.to === "/settings" ? preloadSettingsPage : item.to === "/time-cards" ? preloadTimeCards : undefined}
+          onFocus={item.to === "/settings" ? preloadSettingsPage : item.to === "/time-cards" ? preloadTimeCards : undefined}
+          className={({ isActive }) =>
+            `flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-colors ${
+              isActive
+                ? "bg-green-50 text-green-700 dark:bg-green-900/30 dark:text-green-400"
+                : "text-gray-600 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-100"
+            }`
+          }
+        >
+          <item.icon className="h-5 w-5 shrink-0" />
+          {!sidebarCollapsed && <span>{item.label}</span>}
+        </NavLink>
+      ))}
+    </nav>
+  );
+
+  return (
+    <div className="flex h-screen overflow-hidden bg-gray-50 dark:bg-gray-950">
+      {sidebarOpen && (
+        <div
+          className="fixed inset-0 z-40 bg-black/50 lg:hidden"
+          onClick={() => setSidebarOpen(false)}
+        />
+      )}
+
+      <aside
+        className={`fixed inset-y-0 left-0 z-50 flex w-60 flex-col border-r border-gray-200 bg-white shadow-lg transition-transform duration-300 ease-in-out dark:border-gray-800 dark:bg-gray-900 lg:static lg:shadow-none ${
+          sidebarOpen ? "translate-x-0" : "-translate-x-full"
+        } ${
+          sidebarCollapsed ? "lg:w-16" : "lg:w-60"
+        } lg:translate-x-0`}
+      >
+        <div className="flex h-16 items-center justify-between border-b border-gray-200 px-4 dark:border-gray-800">
+          {sidebarCollapsed ? (
+            <span className="mx-auto text-xl font-bold text-green-600">
+              SQ
+            </span>
+          ) : (
+            <span className="text-lg font-bold text-gray-900 dark:text-white">
+              Shop<span className="text-green-600">Pro</span>Quote
+            </span>
+          )}
+          <button
+            onClick={() => setSidebarOpen(false)}
+            className="rounded-lg p-1 text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200 lg:hidden"
+          >
+            <X className="h-5 w-5" />
+          </button>
+        </div>
+        {navContent}
+        <div className="hidden border-t border-gray-200 px-3 py-3 dark:border-gray-800 lg:block">
+          <button
+            onClick={() => setSidebarCollapsed((prev) => !prev)}
+            className="flex w-full items-center justify-center rounded-lg px-3 py-2 text-sm text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
+            title={sidebarCollapsed ? "Expand sidebar" : "Collapse sidebar"}
+          >
+            {sidebarCollapsed ? (
+              <ChevronRight className="h-4 w-4" />
+            ) : (
+              <ChevronLeft className="h-4 w-4" />
+            )}
+          </button>
+        </div>
+      </aside>
+
+      <div className="flex flex-1 flex-col overflow-hidden">
+        <header className="flex h-16 shrink-0 items-center gap-4 border-b border-gray-200 bg-white px-4 dark:border-gray-800 dark:bg-gray-900">
+          <button
+            onClick={() => setSidebarOpen(true)}
+            className="rounded-lg p-1.5 text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200 lg:hidden"
+          >
+            <Menu className="h-5 w-5" />
+          </button>
+          <div className="flex-1" />
+          <button
+            onClick={toggleDark}
+            className="rounded-lg p-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
+            title={dark ? "Switch to light mode" : "Switch to dark mode"}
+          >
+            {dark ? <Sun className="h-5 w-5" /> : <Moon className="h-5 w-5" />}
+          </button>
+          {userEmail && (
+            <span className="hidden text-sm text-gray-600 dark:text-gray-400 sm:block">
+              {userEmail}
+            </span>
+          )}
+          <button
+            onClick={handleLogout}
+            className="flex items-center gap-1.5 rounded-lg px-3 py-2 text-sm font-medium text-gray-600 hover:bg-red-50 hover:text-red-600 dark:text-gray-400 dark:hover:bg-red-900/20 dark:hover:text-red-400"
+          >
+            <LogOut className="h-4 w-4" />
+            <span className="hidden sm:inline">Logout</span>
+          </button>
+        </header>
+        <main className="flex-1 overflow-auto p-6">{children}</main>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/OfflineBanner.tsx b/src/components/OfflineBanner.tsx
new file mode 100644
index 0000000..0d0c21a
--- /dev/null
+++ b/src/components/OfflineBanner.tsx
@@ -0,0 +1,24 @@
+import { useEffect, useState } from 'react';
+
+export function OfflineBanner() {
+  const [online, setOnline] = useState(navigator.onLine);
+
+  useEffect(() => {
+    const on = () => setOnline(true);
+    const off = () => setOnline(false);
+    window.addEventListener('online', on);
+    window.addEventListener('offline', off);
+    return () => {
+      window.removeEventListener('online', on);
+      window.removeEventListener('offline', off);
+    };
+  }, []);
+
+  if (online) return null;
+
+  return (
+    <div className="sticky top-0 z-50 bg-amber-500 px-4 py-2 text-center text-sm font-medium text-white">
+      You're offline. Some features may be unavailable.
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/components/ROForm.tsx b/src/components/ROForm.tsx
new file mode 100644
index 0000000..b0c7786
--- /dev/null
+++ b/src/components/ROForm.tsx
@@ -0,0 +1,1298 @@
+import { useEffect, useState, useRef, useCallback } from 'react';
+import {
+  Plus,
+  Save,
+  Search,
+  UserX,
+  UserCheck,
+  Check,
+  User,
+} from 'lucide-react';
+import type { RepairOrder, ROService, CustomerType, ServiceSubStatus, ServiceItem } from '../types';
+import { getCustomerTypeLabels, getRoleLabel, loadSettings, showServiceLocationFields } from '../lib/settings';
+import { useSettings } from '../store/settings';
+import { uniqueRONumber } from '../lib/roNumber';
+import { computeROTotals, roServiceTotal } from '../lib/totals';
+import { formatPhoneInput } from '../lib/phone';
+import { formatCurrency } from '../lib/format';
+import { getStatusConfig, SERVICE_SUB_STATUS_CONFIG } from '../lib/status';
+import { logError } from '../lib/userMessages';
+import { composeName, parseName, findMatchingCustomer } from '../lib/customerName';
+import { pb } from '../lib/pocketbase';
+import type { CustomerWithVehicles } from '../pages/Customers';
+
+const DEFAULT_SHOP_RATE = 145;
+
+/* ── Service Row (replicated from RepairOrders.tsx) ─── */
+
+function ServiceRow({
+  service,
+  index,
+  onChange,
+  onRemove,
+  onMarkDone,
+  defaultLaborRate = DEFAULT_SHOP_RATE,
+}: {
+  service: Partial<ROService>;
+  index: number;
+  onChange: (index: number, field: string, value: string | number) => void;
+  onRemove: (index: number) => void;
+  onMarkDone?: (index: number) => void;
+  defaultLaborRate?: number;
+}) {
+  const isSplit = service.pricingMode === 'split'; // default Full
+  const total = roServiceTotal({
+    laborHours: service.laborHours || 0,
+    laborRate: service.laborRate || 0,
+    partsCost: service.partsCost || 0,
+    total: service.total || 0,
+  });
+  const isDone = service.status === 'completed';
+
+  return (
+    <div className="rounded-lg border border-gray-200 bg-gray-50 p-3 dark:border-gray-700 dark:bg-gray-800/50">
+      <div className="mb-2 flex items-center justify-between">
+        <span className="text-xs font-medium text-gray-500 dark:text-gray-400">
+          Service #{index + 1}
+        </span>
+        <div className="flex items-center gap-2">
+          {/* Pricing mode toggle */}
+          <div className="flex rounded-lg border border-gray-300 dark:border-gray-600 overflow-hidden text-xs">
+            <button
+              type="button"
+              onClick={() => {
+                if (isSplit) {
+                  onChange(index, 'pricingMode', 'full');
+                }
+              }}
+              className={`px-2.5 py-1 font-medium transition-colors ${
+                !isSplit
+                  ? 'bg-blue-600 text-white'
+                  : 'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-600'
+              }`}
+            >
+              Full
+            </button>
+            <button
+              type="button"
+              onClick={() => {
+                if (!isSplit) {
+                  // Switching to Split — derive hours from flat total
+                  const flatTotal = service.total || total;
+                  const rate = defaultLaborRate;
+                  const hours = rate > 0 ? Math.round((flatTotal / rate) * 100) / 100 : 0;
+                  onChange(index, 'pricingMode', 'split');
+                  onChange(index, 'laborHours', hours);
+                  onChange(index, 'laborRate', rate);
+                  onChange(index, 'partsCost', 0);
+                }
+              }}
+              className={`px-2.5 py-1 font-medium transition-colors ${
+                isSplit
+                  ? 'bg-blue-600 text-white'
+                  : 'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-600'
+              }`}
+            >
+              Split
+            </button>
+          </div>
+          {onMarkDone && (
+            <button
+              type="button"
+              onClick={() => onMarkDone(index)}
+              disabled={isDone}
+              title={isDone ? 'Already completed' : 'Mark this service done'}
+              className={`inline-flex items-center gap-1 rounded px-1.5 py-1 text-xs font-medium transition-colors ${
+                isDone
+                  ? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300'
+                  : 'border border-gray-300 bg-white text-gray-600 hover:bg-green-50 hover:text-green-700 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-green-900/20'
+              }`}
+            >
+              <Check className="h-3 w-3" />
+              Done
+            </button>
+          )}
+          <button
+            onClick={() => onRemove(index)}
+            className="rounded p-1 text-gray-400 hover:bg-red-50 hover:text-red-500 dark:hover:bg-red-900/20"
+          >
+            <svg className="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <polyline points="3 6 5 6 21 6"/>
+              <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
+              <line x1="10" y1="11" x2="10" y2="17"/>
+              <line x1="14" y1="11" x2="14" y2="17"/>
+            </svg>
+          </button>
+        </div>
+      </div>
+      {isSplit ? (
+        <div className="grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-5">
+          <div className="sm:col-span-2 lg:col-span-1">
+            <label className="block text-xs text-gray-500 dark:text-gray-400">
+              Name
+            </label>
+            <input
+              value={service.name || ''}
+              onChange={(e) => onChange(index, 'name', e.target.value)}
+              placeholder="Service name"
+              className="mt-0.5 w-full rounded border border-gray-300 bg-white px-2 py-1.5 text-sm dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100"
+            />
+          </div>
+          <div>
+            <label className="block text-xs text-gray-500 dark:text-gray-400">
+              Labor Hrs
+            </label>
+            <input
+              type="number"
+              min="0"
+              step="0.1"
+              value={service.laborHours || ''}
+              onChange={(e) =>
+                onChange(index, 'laborHours', parseFloat(e.target.value) || 0)
+              }
+              placeholder="0"
+              className="mt-0.5 w-full rounded border border-gray-300 bg-white px-2 py-1.5 text-sm dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100"
+            />
+          </div>
+          <div>
+            <label className="block text-xs text-gray-500 dark:text-gray-400">
+              Rate/hr
+            </label>
+            <input
+              type="number"
+              min="0"
+              step="1"
+              value={service.laborRate || ''}
+              onChange={(e) =>
+                onChange(index, 'laborRate', parseFloat(e.target.value) || 0)
+              }
+              placeholder={String(DEFAULT_SHOP_RATE)}
+              className="mt-0.5 w-full rounded border border-gray-300 bg-white px-2 py-1.5 text-sm dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100"
+            />
+          </div>
+          <div>
+            <label className="block text-xs text-gray-500 dark:text-gray-400">
+              Parts $
+            </label>
+            <input
+              type="number"
+              min="0"
+              step="0.01"
+              value={service.partsCost || ''}
+              onChange={(e) =>
+                onChange(index, 'partsCost', parseFloat(e.target.value) || 0)
+              }
+              placeholder="0.00"
+              className="mt-0.5 w-full rounded border border-gray-300 bg-white px-2 py-1.5 text-sm dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100"
+            />
+          </div>
+          <div>
+            <label className="block text-xs text-gray-500 dark:text-gray-400">
+              Total
+            </label>
+            <div className="mt-0.5 flex h-8 items-center rounded border border-transparent px-2 text-sm font-medium text-gray-900 dark:text-gray-100">
+              {formatCurrency(total)}
+            </div>
+          </div>
+        </div>
+      ) : (
+        <div className="grid grid-cols-1 gap-2 sm:grid-cols-2">
+          <div>
+            <label className="block text-xs text-gray-500 dark:text-gray-400">
+              Name
+            </label>
+            <input
+              value={service.name || ''}
+              onChange={(e) => onChange(index, 'name', e.target.value)}
+              placeholder="Service name"
+              className="mt-0.5 w-full rounded border border-gray-300 bg-white px-2 py-1.5 text-sm dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100"
+            />
+          </div>
+          <div>
+            <label className="block text-xs text-gray-500 dark:text-gray-400">
+              Total Price
+            </label>
+            <input
+              type="number"
+              min="0"
+              step="0.01"
+              value={service.total ?? ''}
+              onChange={(e) =>
+                onChange(index, 'total', parseFloat(e.target.value) || 0)
+              }
+              placeholder="0.00"
+              className="mt-0.5 w-full rounded border border-gray-300 bg-white px-2 py-1.5 text-sm dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100"
+            />
+          </div>
+        </div>
+      )}
+      <div className="mt-2 grid grid-cols-1 gap-2 sm:grid-cols-3">
+        <div>
+          <label className="block text-xs text-gray-500 dark:text-gray-400">
+            Technician
+          </label>
+          <input
+            value={service.technician || ''}
+            onChange={(e) => onChange(index, 'technician', e.target.value)}
+            placeholder="Assigned tech"
+            className="mt-0.5 w-full rounded border border-gray-300 bg-white px-2 py-1.5 text-sm dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100"
+          />
+        </div>
+        <div>
+          <label className="block text-xs text-gray-500 dark:text-gray-400">
+            Status
+          </label>
+          <select
+            value={service.status || 'pending'}
+            onChange={(e) => onChange(index, 'status', e.target.value)}
+            className="mt-0.5 w-full rounded border border-gray-300 bg-white px-2 py-1.5 text-sm dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100"
+          >
+            <option value="pending">Pending</option>
+            <option value="in_progress">In Progress</option>
+            <option value="completed">Completed</option>
+          </select>
+        </div>
+        <div>
+          <label className="block text-xs text-gray-500 dark:text-gray-400">
+            Sub-status
+          </label>
+          <select
+            value={service.subStatus || ''}
+            onChange={(e) => onChange(index, 'subStatus', e.target.value as ServiceSubStatus)}
+            disabled={service.status === 'completed'}
+            className="mt-0.5 w-full rounded border border-gray-300 bg-white px-2 py-1.5 text-sm disabled:bg-gray-100 disabled:text-gray-400 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100 dark:disabled:bg-gray-800 dark:disabled:text-gray-500"
+          >
+            {Object.entries(SERVICE_SUB_STATUS_CONFIG).map(([value, cfg]) => (
+              <option key={value} value={value}>{cfg.label}</option>
+            ))}
+          </select>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/* ── ROForm ── Reusable form for create/edit (used by both modal and inline panel) */
+
+export interface ROFormProps {
+  editRO: RepairOrder | null;
+  existingRoNumbers: Set<string>;
+  settings: { taxRate: number; shopChargeRate: number; shopChargeCap: number; defaultLaborRate: number };
+  customers?: CustomerWithVehicles[];   // for customer matching / auto-create
+  onSave: (data: Partial<RepairOrder>) => Promise<void> | void;
+  onCancel: () => void;
+  submitLabel?: string; // e.g. "Update RO" or "Create RO"
+  readOnlyDuration?: boolean; // when true, shows original duration as read-only
+  onDirtyChange?: (dirty: boolean) => void; // called when form transitions to dirty
+  // Called when the user one-click-marks a service line done. If omitted, the
+  // Done button updates local state only (no immediate persist) — the form's
+  // Save action still flushes everything at once.
+  onMarkServiceDone?: (index: number) => void;
+  // Sticky action bar: when true the Save/Cancel row pins to the bottom of
+  // the viewport so it's always reachable on long forms.
+  stickyActions?: boolean;
+}
+
+export default function ROForm({
+  editRO,
+  existingRoNumbers,
+  settings,
+  customers = [],
+  onSave,
+  onCancel,
+  submitLabel,
+  readOnlyDuration,
+  onDirtyChange,
+  onMarkServiceDone,
+  stickyActions,
+}: ROFormProps) {
+  const [firstName, setFirstName] = useState('');
+  const [middleName, setMiddleName] = useState('');
+  const [lastName, setLastName] = useState('');
+  const [customerPhone, setCustomerPhone] = useState('');
+  const [vehicleInfo, setVehicleInfo] = useState('');
+  const [vin, setVin] = useState('');
+  const [mileage, setMileage] = useState('');
+  const [advisorName, setAdvisorName] = useState(() => loadSettings().serviceAdvisor);
+  const [roNumber, setRoNumber] = useState('');
+  const [notes, setNotes] = useState('');
+  const [warranty, setWarranty] = useState(false);
+  const [estimatedDuration, setEstimatedDuration] = useState<number>(60);
+  const [customerType, setCustomerType] = useState<CustomerType>('drop-off');
+  const [status, setStatus] = useState<RepairOrder['status']>('active');
+  const [services, setServices] = useState<Partial<ROService>[]>([]);
+  const [discount, setDiscount] = useState<{ value: number; type: 'dollar' | 'percent' }>({ value: 0, type: 'dollar' });
+  const [saving, setSaving] = useState(false);
+  const [serviceLocation, setServiceLocation] = useState('');
+  const [travelFee, setTravelFee] = useState<number>(0);
+  const [tripMiles, setTripMiles] = useState<number>(0);
+  const [customerId, setCustomerId] = useState('');
+  const [suggestedCustomer, setSuggestedCustomer] = useState<CustomerWithVehicles | null>(null);
+  const [dismissedMatch, setDismissedMatch] = useState(false);
+  const matchTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  // Catalog search state
+  const [catalogServices, setCatalogServices] = useState<ServiceItem[]>([]);
+  const [catalogSearch, setCatalogSearch] = useState('');
+  const [catalogLoaded, setCatalogLoaded] = useState(false);
+  const userId = pb.authStore.model?.id;
+
+  const isEditing = !!editRO;
+
+  // Track which RO we've populated from so that a routine upstream re-fetch
+  // (e.g. an Add-Time write on the Details page) doesn't wipe unsaved edits.
+  // We key on the RO id (or 'create' for the empty form) and only re-populate
+  // when the key actually changes. This fixes the silent-reset regression
+  // where the inline edit form lost its state whenever the parent re-fetched
+  // `orders` and passed a new-but-equivalent `editRO` reference.
+  const lastPopulatedKey = useRef<string>('');
+  useEffect(() => {
+    const key = editRO ? `id:${editRO.id}` : 'create';
+    if (lastPopulatedKey.current === key) return;
+    lastPopulatedKey.current = key;
+
+    if (editRO) {
+      const parsed = parseName(editRO.customerName || '');
+      setFirstName(parsed.firstName);
+      setMiddleName(parsed.middleName);
+      setLastName(parsed.lastName);
+      setCustomerId(editRO.customerId || '');
+      setCustomerPhone(editRO.customerPhone || '');
+      setVehicleInfo(editRO.vehicleInfo || '');
+      setVin(editRO.vin || '');
+      setMileage(editRO.mileage || '');
+      setAdvisorName(editRO.advisorName || '');
+      setRoNumber(editRO.roNumber || '');
+      setNotes(editRO.notes || '');
+      setWarranty(editRO.warranty || false);
+      setEstimatedDuration(editRO.estimatedDuration ?? 60);
+      setCustomerType(editRO.customerType || 'drop-off');
+      setStatus(editRO.status || 'active');
+      setDiscount(editRO.discount || { value: 0, type: 'dollar' });
+      setServiceLocation(editRO.serviceLocation || '');
+      setTravelFee(editRO.travelFee || 0);
+      setTripMiles(editRO.tripMiles || 0);
+      const rawServices = editRO.services;
+      let parsedServices: any[] = [];
+      if (typeof (rawServices as unknown) === 'string' && (rawServices as unknown as string).trim()) {
+        try { parsedServices = JSON.parse(rawServices as unknown as string); } catch (err) { logError('Failed to parse RO form services JSON', err); parsedServices = []; }
+      } else if (Array.isArray(rawServices)) {
+        parsedServices = rawServices;
+      }
+      setServices(
+        Array.isArray(parsedServices) && parsedServices.length > 0
+          ? parsedServices.map((s: any) => ({ ...s }))
+          : [{
+              name: '',
+              laborHours: 0,
+              laborRate: DEFAULT_SHOP_RATE,
+              partsCost: 0,
+              status: 'pending' as const,
+              technician: '',
+              pricingMode: loadSettings().defaultPricingMode,
+            }]
+      );
+    } else {
+      setFirstName('');
+      setMiddleName('');
+      setLastName('');
+      setCustomerPhone('');
+      setVehicleInfo('');
+      setVin('');
+      setMileage('');
+      setAdvisorName(loadSettings().serviceAdvisor);
+      setRoNumber(uniqueRONumber(existingRoNumbers));
+      setNotes('');
+      setWarranty(false);
+      setEstimatedDuration(60);
+      setCustomerType('drop-off');
+      setStatus('active');
+      setDiscount({ value: 0, type: 'dollar' });
+      setServiceLocation('');
+      setTravelFee(loadSettings().defaultTravelFee || 0);
+      setTripMiles(0);
+      setServices([{
+        name: '',
+        laborHours: 0,
+        laborRate: DEFAULT_SHOP_RATE,
+        partsCost: 0,
+        status: 'pending' as const,
+        technician: '',
+        pricingMode: loadSettings().defaultPricingMode,
+      }]);
+    }
+  }, [editRO, existingRoNumbers]);
+
+  // Track dirty state — notify parent once when form diverges from initial values
+  const dirtyNotified = useRef(false);
+  const initialRef = useRef<string>('');
+
+  // Capture initial snapshot right after population
+  useEffect(() => {
+    if (editRO) {
+      dirtyNotified.current = false;
+      initialRef.current = JSON.stringify({
+        firstName, middleName, lastName, customerPhone, vehicleInfo, vin, mileage,
+        advisorName, roNumber, notes, warranty, estimatedDuration,
+        customerType, status, services, discount, serviceLocation, travelFee, tripMiles,
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editRO]);
+
+  // Detect changes vs initial snapshot
+  useEffect(() => {
+    if (!editRO || dirtyNotified.current || !onDirtyChange) return;
+    if (!initialRef.current) return;
+    const current = JSON.stringify({
+      firstName, middleName, lastName, customerPhone, vehicleInfo, vin, mileage,
+      advisorName, roNumber, notes, warranty, estimatedDuration,
+      customerType, status, services, discount, serviceLocation, travelFee, tripMiles,
+    });
+    if (current !== initialRef.current) {
+      dirtyNotified.current = true;
+      onDirtyChange(true);
+    }
+  }, [firstName, middleName, lastName, customerPhone, vehicleInfo, vin, mileage,
+      advisorName, roNumber, notes, warranty, estimatedDuration,
+      customerType, status, services, discount, serviceLocation, travelFee, tripMiles, editRO, onDirtyChange]);
+
+ /* ── Customer matching (debounced) ─── */
+ const runMatching = useCallback(() => {
+ if (!customerId && !dismissedMatch) {
+ const match = findMatchingCustomer(customers, {
+   firstName,
+   middleName,
+   lastName,
+   phone: customerPhone,
+ });
+ setSuggestedCustomer(match);
+ } else {
+ setSuggestedCustomer(null);
+ }
+ }, [firstName, middleName, lastName, customerPhone, customerId, customers, dismissedMatch]);
+
+ useEffect(() => {
+ if (isEditing) return; // don't match while editing an existing RO
+ if (matchTimeoutRef.current) clearTimeout(matchTimeoutRef.current);
+ matchTimeoutRef.current = setTimeout(runMatching, 400);
+ return () => {
+ if (matchTimeoutRef.current) clearTimeout(matchTimeoutRef.current);
+ };
+ }, [runMatching, isEditing]);
+
+ const handleUseExistingCustomer = useCallback(() => {
+ if (!suggestedCustomer) return;
+ const parsed = parseName(suggestedCustomer.name);
+ setFirstName(parsed.firstName);
+ setMiddleName(parsed.middleName);
+ setLastName(parsed.lastName);
+ setCustomerId(suggestedCustomer.id);
+ setCustomerPhone(suggestedCustomer.phone || customerPhone);
+ setSuggestedCustomer(null);
+ setDismissedMatch(false);
+ }, [suggestedCustomer, customerPhone]);
+
+ const handleDismissMatch = useCallback(() => {
+ setSuggestedCustomer(null);
+ setDismissedMatch(true);
+ }, []);
+
+ /* ── Auto-create customer in PB ─── */
+ const ensureCustomerRecord = useCallback(async (): Promise<string> => {
+ if (customerId) return customerId;
+
+ const uid = pb.authStore.model?.id;
+ if (!uid) return '';
+
+ const name = composeName(firstName, middleName, lastName);
+ if (!name.trim()) return '';
+
+ // Double-check for an existing customer
+ const existingMatch = findMatchingCustomer(customers, {
+ firstName,
+ middleName,
+ lastName,
+ phone: customerPhone,
+ });
+ if (existingMatch) {
+ setCustomerId(existingMatch.id);
+ return existingMatch.id;
+ }
+
+ try {
+ const record = await pb.collection('customers').create({
+   name,
+   phone: customerPhone,
+   email: '',
+   address: '',
+   notes: '',
+   userId: uid,
+ });
+ setCustomerId(record.id);
+ return record.id;
+ } catch (err) {
+ logError('Failed to create customer record', err);
+ return '';
+ }
+ }, [customerId, firstName, middleName, lastName, customerPhone, customers]);
+
+ const handleUseExisting = handleUseExistingCustomer;
+ const handleDismiss = handleDismissMatch;
+
+ const handleServiceChange = (
+    index: number,
+    field: string,
+    value: string | number
+  ) => {
+    setServices((prev) => {
+      const next = [...prev];
+      next[index] = { ...next[index], [field]: value };
+      return next;
+    });
+  };
+
+  const handleAddService = () => {
+    setServices((prev) => [
+      ...prev,
+      {
+        name: '',
+        laborHours: 0,
+        laborRate: DEFAULT_SHOP_RATE,
+        partsCost: 0,
+        status: 'pending' as const,
+        technician: '',
+        pricingMode: loadSettings().defaultPricingMode,
+      },
+    ]);
+  };
+
+  const handleRemoveService = (index: number) => {
+    setServices((prev) => prev.filter((_, i) => i !== index));
+  };
+
+  // One-click "mark this service done" — flips status to completed AND clears
+  // sub-status to '' (completed states don't need the in-progress sub-tags).
+  // When the parent provides `onMarkServiceDone` it's responsible for the
+  // persistence side-effect; we just update the local form state here.
+  const handleMarkDone = (index: number) => {
+    setServices((prev) => {
+      const next = [...prev];
+      next[index] = { ...next[index], status: 'completed' as const, subStatus: '' };
+      return next;
+    });
+    onMarkServiceDone?.(index);
+  };
+
+  /* ── Catalog search ──────────────────────────────── */
+
+  const fetchCatalogServices = useCallback(async () => {
+    if (!userId || catalogLoaded) return;
+    try {
+      const records = await pb.collection('services').getFullList({
+        filter: `userId="${userId}"`,
+        sort: 'name',
+      });
+      setCatalogServices(
+        records.map((r: Record<string, unknown>) => ({
+          id: r.id as string,
+          name: (r.name as string) || '',
+          category: (r.category as string) || '',
+          description: (r.explanation as string) || (r.description as string) || '',
+          laborHours: Number(r.laborHours) || 0,
+          laborRate: Number(r.laborRate) || 0,
+          partsCost: Number(r.partsCost) || 0,
+          price: Number(r.price) || 0,
+          active: r.active !== false,
+          created: (r.created as string) || '',
+          updated: (r.updated as string) || '',
+        }))
+      );
+      setCatalogLoaded(true);
+    } catch {
+      /* non-critical */
+    }
+  }, [userId, catalogLoaded]);
+
+  // Lazy-load catalog on first search focus
+  const handleCatalogFocus = () => {
+    if (!catalogLoaded) fetchCatalogServices();
+  };
+
+  const handleAddCatalogService = (svc: ServiceItem) => {
+    const laborPrice = (svc.laborHours || 0) * (svc.laborRate || 0);
+    const isSplit = laborPrice > 0 || (svc.partsCost || 0) > 0;
+    setServices((prev) => [
+      ...prev,
+      {
+        id: `catalog-${svc.id}-${Date.now()}`,
+        name: svc.name,
+        description: svc.description,
+        laborHours: isSplit ? svc.laborHours || 1 : 0,
+        laborRate: isSplit ? svc.laborRate || DEFAULT_SHOP_RATE : 0,
+        partsCost: isSplit ? svc.partsCost : 0,
+        total: svc.price,
+        status: 'pending' as const,
+        technician: '',
+        pricingMode: isSplit ? 'split' : loadSettings().defaultPricingMode,
+        applyShopCharge: true,
+      },
+    ]);
+  };
+
+  const filteredCatalog = catalogServices.filter((s) => {
+    if (!catalogSearch.trim()) return true;
+    const q = catalogSearch.toLowerCase();
+    return (
+      s.name.toLowerCase().includes(q) ||
+      s.category.toLowerCase().includes(q) ||
+      s.description.toLowerCase().includes(q)
+    );
+  });
+
+  const totals = computeROTotals({
+    services: services.map((s) => ({
+      ...s,
+      id: s.id || '',
+      name: s.name || '',
+      description: s.description || '',
+      laborHours: s.laborHours || 0,
+      laborRate: s.laborRate || 0,
+      partsCost: s.partsCost || 0,
+      total: roServiceTotal({
+        laborHours: s.laborHours || 0,
+        laborRate: s.laborRate || 0,
+        partsCost: s.partsCost || 0,
+        total: s.total || 0,
+      }),
+      status: (s.status || 'pending') as ROService['status'],
+      technician: s.technician || '',
+    })) as ROService[],
+    discount,
+    settings,
+  });
+
+  const handleSubmit = async () => {
+    const name = composeName(firstName, middleName, lastName);
+    if (!name.trim()) return;
+    setSaving(true);
+    try {
+      // Auto-create customer record
+      const cId = await ensureCustomerRecord();
+
+      const cleanedServices: ROService[] = services
+        .filter((s) => s.name?.trim())
+        .map((s, i) => ({
+          id: s.id || `temp-${i}`,
+          name: s.name || '',
+          description: s.description || '',
+          laborHours: s.laborHours || 0,
+          laborRate: s.laborRate || DEFAULT_SHOP_RATE,
+          partsCost: s.partsCost || 0,
+          total: roServiceTotal({
+            laborHours: s.laborHours || 0,
+            laborRate: s.laborRate || 0,
+            partsCost: s.partsCost || 0,
+            total: s.total || 0,
+          }),
+          pricingMode: (s.pricingMode || 'full') as 'full' | 'split',
+          status: (s.status || 'pending') as ROService['status'],
+          technician: s.technician || '',
+        }));
+
+      const payload: Partial<RepairOrder> = {
+        customerId: cId || customerId,
+        customerName: name,
+        customerPhone: customerPhone.trim(),
+        vehicleInfo: vehicleInfo.trim(),
+        vin: vin.trim(),
+        mileage: mileage.trim(),
+        advisorName: advisorName.trim(),
+        roNumber: roNumber.trim() || uniqueRONumber(existingRoNumbers),
+        notes: notes.trim(),
+        warranty,
+        status,
+        customerType,
+        estimatedDuration,
+        serviceLocation: serviceLocation.trim(),
+        travelFee: Number(travelFee) || 0,
+        tripMiles: Number(tripMiles) || 0,
+        services: cleanedServices,
+        discount,
+        total: totals.total,
+        tax: totals.tax,
+        shopCharges: totals.shopCharge,
+      };
+
+      if (!isEditing) {
+        payload.writeupTime = new Date().toISOString();
+      }
+
+      await onSave(payload);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const appSettings = useSettings();
+  const defaultAdvisor = appSettings.serviceAdvisor;
+  const roleLabel = getRoleLabel(appSettings);
+  const customerTypeLabels = getCustomerTypeLabels(appSettings);
+  const statusConfig = getStatusConfig(appSettings);
+  const showLocationFields = showServiceLocationFields(appSettings);
+  const isDefaultAdvisor = defaultAdvisor && advisorName === defaultAdvisor;
+  const effectiveSubmitLabel = submitLabel || (isEditing ? 'Update RO' : 'Create RO');
+  const fullName = composeName(firstName, middleName, lastName);
+
+  return (
+    <div className="space-y-6">
+      {/* Customer Info */}
+      <div>
+        <h3 className="mb-3 text-sm font-semibold text-gray-700 dark:text-gray-300">
+          Customer Information
+        </h3>
+
+        {/* ── Customer match suggestion ── */}
+        {suggestedCustomer && !customerId && (
+          <div className="mb-4 rounded-xl border border-emerald-200 bg-emerald-50 p-4 dark:border-emerald-700 dark:bg-emerald-900/20">
+            <div className="flex items-start gap-3">
+              <div className="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-emerald-100 dark:bg-emerald-800">
+                <User className="h-4 w-4 text-emerald-600 dark:text-emerald-300" />
+              </div>
+              <div className="min-w-0 flex-1">
+                <p className="text-sm font-medium text-emerald-800 dark:text-emerald-200">
+                  Existing customer found
+                </p>
+                <p className="mt-0.5 text-sm text-emerald-700 dark:text-emerald-300">
+                  <span className="font-semibold">{suggestedCustomer.name}</span>
+                  {suggestedCustomer.phone && <> &middot; {suggestedCustomer.phone}</>}
+                  {suggestedCustomer.email && <> &middot; {suggestedCustomer.email}</>}
+                </p>
+                <div className="mt-2 flex items-center gap-2">
+                  <button
+                    type="button"
+                    onClick={handleUseExisting}
+                    className="inline-flex items-center gap-1.5 rounded-lg bg-emerald-600 px-3 py-1.5 text-xs font-medium text-white hover:bg-emerald-700"
+                  >
+                    <Check className="h-3.5 w-3.5" />
+                    Use Existing Customer
+                  </button>
+                  <button
+                    type="button"
+                    onClick={handleDismiss}
+                    className="rounded-lg border border-emerald-300 bg-white px-3 py-1.5 text-xs font-medium text-emerald-700 hover:bg-emerald-50 dark:border-emerald-600 dark:bg-gray-800 dark:text-emerald-300 dark:hover:bg-emerald-900/30"
+                  >
+                    Continue as New
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* ── Customer ID indicator (when linked to a record) ── */}
+        {customerId && (
+          <div className="mb-3 flex items-center gap-2 rounded-lg border border-emerald-200 bg-emerald-50/50 px-3 py-2 dark:border-emerald-700 dark:bg-emerald-900/10">
+            <Check className="h-4 w-4 shrink-0 text-emerald-500" />
+            <span className="text-xs text-emerald-700 dark:text-emerald-300">
+              Linked to customer record: <strong>{fullName}</strong>
+            </span>
+          </div>
+        )}
+
+        <div className="grid grid-cols-1 gap-3 sm:grid-cols-3">
+          <div>
+            <label className="block text-xs font-medium text-gray-500 dark:text-gray-400">
+              First Name <span className="text-red-500">*</span>
+            </label>
+            <input
+              value={firstName}
+              onChange={(e) => setFirstName(e.target.value)}
+              placeholder="John"
+              className="mt-1 w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100"
+            />
+          </div>
+          <div>
+            <label className="block text-xs font-medium text-gray-500 dark:text-gray-400">
+              Middle
+            </label>
+            <input
+              value={middleName}
+              onChange={(e) => setMiddleName(e.target.value)}
+              placeholder="Michael"
+              className="mt-1 w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100"
+            />
+          </div>
+          <div>
+            <label className="block text-xs font-medium text-gray-500 dark:text-gray-400">
+              Last Name <span className="text-red-500">*</span>
+            </label>
+            <input
+              value={lastName}
+              onChange={(e) => setLastName(e.target.value)}
+              placeholder="Doe"
+              className="mt-1 w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100"
+            />
+          </div>
+        </div>
+
+        <div className="mt-3 grid grid-cols-1 gap-3 sm:grid-cols-2">
+          <div>
+            <label className="block text-xs font-medium text-gray-500 dark:text-gray-400">
+              Phone
+            </label>
+            <input
+              value={formatPhoneInput(customerPhone)}
+              onChange={(e) => setCustomerPhone(e.target.value.replace(/\D/g, ''))}
+              placeholder="555-555-5555"
+              className="mt-1 w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100"
+            />
+          </div>
+          <div>
+            <label className="block text-xs font-medium text-gray-500 dark:text-gray-400">
+              Vehicle Info
+            </label>
+            <input
+              value={vehicleInfo}
+              onChange={(e) => setVehicleInfo(e.target.value)}
+              placeholder="2020 Honda Civic"
+              className="mt-1 w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100"
+            />
+          </div>
+          <div>
+            <label className="block text-xs font-medium text-gray-500 dark:text-gray-400">
+              VIN
+            </label>
+            <input
+              value={vin}
+              onChange={(e) => setVin(e.target.value)}
+              placeholder="1HGBH41JXMN109186"
+              className="mt-1 w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100"
+            />
+          </div>
+          <div>
+            <label className="block text-xs font-medium text-gray-500 dark:text-gray-400">
+              Mileage
+            </label>
+            <input
+              value={mileage}
+              onChange={(e) => setMileage(e.target.value)}
+              placeholder="45,000"
+              className="mt-1 w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100"
+            />
+          </div>
+          <div>
+            <label className="block text-xs font-medium text-gray-500 dark:text-gray-400">
+              RO Number
+            </label>
+            <input
+              value={roNumber}
+              onChange={(e) => setRoNumber(e.target.value)}
+              placeholder="RO-250626-0001"
+              className="mt-1 w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100"
+            />
+          </div>
+        </div>
+      </div>
+
+      {/* Service Location (mobile/home) */}
+      {showLocationFields && (
+        <div>
+          <h3 className="mb-3 text-sm font-semibold text-gray-700 dark:text-gray-300">
+            Service Location
+          </h3>
+          <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
+            <div className="sm:col-span-2">
+              <label className="block text-xs font-medium text-gray-500 dark:text-gray-400">
+                Job Address or Location
+              </label>
+              <input
+                value={serviceLocation}
+                onChange={(e) => setServiceLocation(e.target.value)}
+                placeholder="123 Oak St, Knoxville, TN or driveway, garage, etc."
+                className="mt-1 w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100"
+              />
+            </div>
+            <div>
+              <label className="block text-xs font-medium text-gray-500 dark:text-gray-400">
+                Travel / Diagnostic Fee
+              </label>
+              <div className="mt-1 flex items-center gap-2">
+                <span className="text-sm text-gray-400">$</span>
+                <input
+                  type="number"
+                  min="0"
+                  step="0.01"
+                  value={travelFee || ''}
+                  onChange={(e) => setTravelFee(parseFloat(e.target.value) || 0)}
+                  placeholder={`${appSettings.defaultTravelFee || '0.00'}`}
+                  className="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100"
+                />
+              </div>
+            </div>
+            <div>
+              <label className="block text-xs font-medium text-gray-500 dark:text-gray-400">
+                Trip Miles
+              </label>
+              <div className="mt-1 flex items-center gap-2">
+                <span className="text-sm text-gray-400">mi</span>
+                <input
+                  type="number"
+                  min="0"
+                  step="0.1"
+                  value={tripMiles || ''}
+                  onChange={(e) => setTripMiles(parseFloat(e.target.value) || 0)}
+                  placeholder="0"
+                  className="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Service Details & Customer Type */}
+      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+        {readOnlyDuration ? (
+          <div>
+            <label className="block text-xs font-medium text-gray-500 dark:text-gray-400">
+              Original Estimated Duration of Service
+            </label>
+            <p className="mt-1 text-sm text-gray-900 dark:text-gray-100">
+              {Math.floor(estimatedDuration / 60) > 0 && `${Math.floor(estimatedDuration / 60)}h `}
+              {estimatedDuration % 60}m
+              {estimatedDuration === 0 && '—'}
+            </p>
+            <p className="mt-1 text-xs text-gray-400">
+              Due time is auto-calculated from write-up time + this duration. Add time via the info bar above to extend.
+            </p>
+          </div>
+        ) : (
+        <div>
+          <label className="block text-xs font-medium text-gray-500 dark:text-gray-400">
+            Estimated Duration of Service
+          </label>
+          <div className="mt-1 flex gap-2">
+            <div className="flex-1">
+              <input
+                type="number"
+                min="0"
+                value={Math.floor(estimatedDuration / 60)}
+                onChange={(e) => {
+                  const h = parseInt(e.target.value) || 0;
+                  const m = estimatedDuration % 60;
+                  setEstimatedDuration(h * 60 + m);
+                }}
+                placeholder="0"
+                className="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100"
+              />
+              <p className="mt-0.5 text-xs text-gray-400">Hours</p>
+            </div>
+            <div className="flex-1">
+              <input
+                type="number"
+                min="0"
+                max="59"
+                step="5"
+                value={estimatedDuration % 60}
+                onChange={(e) => {
+                  const m = parseInt(e.target.value) || 0;
+                  const h = Math.floor(estimatedDuration / 60);
+                  setEstimatedDuration(h * 60 + Math.min(m, 59));
+                }}
+                placeholder="0"
+                className="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100"
+              />
+              <p className="mt-0.5 text-xs text-gray-400">Minutes</p>
+            </div>
+          </div>
+          <p className="mt-1 text-xs text-gray-400">
+            Due time is auto-calculated from write-up time + estimated duration.
+          </p>
+        </div>
+        )}
+
+        <div>
+          <label className="block text-xs font-medium text-gray-500 dark:text-gray-400">
+            {customerTypeLabels.groupLabel}
+          </label>
+          <div className="mt-1 flex gap-3">
+            <label className="flex cursor-pointer items-center gap-2 rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:hover:bg-gray-700">
+              <input
+                type="radio"
+                name="customerType"
+                value="drop-off"
+                checked={customerType === 'drop-off'}
+                onChange={() => setCustomerType('drop-off')}
+                className="text-blue-600 focus:ring-blue-500"
+              />
+              <UserX className="h-4 w-4 text-gray-400" />
+              {customerTypeLabels.primary}
+            </label>
+            <label className="flex cursor-pointer items-center gap-2 rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:hover:bg-gray-700">
+              <input
+                type="radio"
+                name="customerType"
+                value="waiter"
+                checked={customerType === 'waiter'}
+                onChange={() => setCustomerType('waiter')}
+                className="text-blue-600 focus:ring-blue-500"
+              />
+              <UserCheck className="h-4 w-4 text-purple-500" />
+              {customerTypeLabels.secondary}
+            </label>
+          </div>
+        </div>
+      </div>
+
+      {/* Advisor & Status */}
+      <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
+        <div>
+          <label className="block text-xs font-medium text-gray-500 dark:text-gray-400">
+            {roleLabel}
+          </label>
+          <input
+            value={advisorName}
+            onChange={(e) => setAdvisorName(e.target.value)}
+            placeholder={defaultAdvisor || `${roleLabel} name`}
+            className={`mt-1 w-full rounded-lg border px-3 py-2 text-sm ${
+              isDefaultAdvisor
+                ? 'border-gray-200 bg-gray-50 text-gray-400 dark:border-gray-700 dark:bg-gray-800/50 dark:text-gray-500'
+                : 'border-gray-300 bg-white text-gray-900 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100'
+            }`}
+          />
+        </div>
+        <div>
+          <label className="block text-xs font-medium text-gray-500 dark:text-gray-400">
+            Status
+          </label>
+          <select
+            value={status}
+            onChange={(e) => setStatus(e.target.value as RepairOrder['status'])}
+            className="mt-1 w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100"
+          >
+            <option value="active">Active</option>
+            <option value="in_progress">In Progress</option>
+            <option value="waiting_parts">Waiting for Parts</option>
+            <option value="waiting_pickup">{statusConfig.waiting_pickup.label}</option>
+            <option value="completed">Completed</option>
+            <option value="final_close">Final Close</option>
+          </select>
+        </div>
+      </div>
+
+      {/* Warranty */}
+      <label className="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300">
+        <input
+          type="checkbox"
+          checked={warranty}
+          onChange={(e) => setWarranty(e.target.checked)}
+          className="rounded border-gray-300 text-blue-600 focus:ring-blue-500 dark:border-gray-600"
+        />
+        Warranty / Internal
+      </label>
+
+      {/* Services */}
+      <div>
+        <div className="mb-3 flex items-center justify-between">
+          <h3 className="text-sm font-semibold text-gray-700 dark:text-gray-300">
+            Services
+          </h3>
+          <button
+            type="button"
+            onClick={handleAddService}
+            className="inline-flex items-center gap-1 rounded-lg border border-gray-300 bg-white px-3 py-1.5 text-xs font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
+          >
+            <Plus className="h-3.5 w-3.5" />
+            Add Manual Service
+          </button>
+        </div>
+
+        {/* Catalog search */}
+        <div className="mb-4 rounded-xl border border-gray-200 bg-white p-4 ring-1 ring-gray-200 dark:border-gray-700 dark:bg-gray-800 dark:ring-gray-700">
+          <h4 className="mb-3 text-sm font-semibold text-gray-700 dark:text-gray-300">
+            Service Catalog
+          </h4>
+          <div className="relative">
+            <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400" />
+            <input
+              type="text"
+              value={catalogSearch}
+              onChange={(e) => setCatalogSearch(e.target.value)}
+              onFocus={handleCatalogFocus}
+              placeholder="Search services from catalog..."
+              className="w-full rounded-lg border border-gray-300 bg-white py-2 pl-9 pr-3 text-sm text-gray-900 placeholder-gray-400 focus:border-green-500 focus:outline-none focus:ring-2 focus:ring-green-500/20 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100"
+            />
+          </div>
+          {filteredCatalog.length > 0 && (
+            <div className="mt-3 max-h-48 space-y-1.5 overflow-y-auto">
+              {filteredCatalog.map((svc) => (
+                <div
+                  key={svc.id}
+                  className="flex items-center gap-2 rounded-lg border border-gray-100 bg-gray-50 px-3 py-2 dark:border-gray-700 dark:bg-gray-700/50"
+                >
+                  <div className="min-w-0 flex-1">
+                    <p className="text-sm font-medium text-gray-900 dark:text-gray-100">
+                      {svc.name}
+                    </p>
+                    <p className="text-xs text-gray-500 dark:text-gray-400">
+                      {svc.category && `${svc.category} — `}${svc.price.toFixed(2)}
+                    </p>
+                  </div>
+                  <button
+                    type="button"
+                    onClick={() => handleAddCatalogService(svc)}
+                    className="inline-flex shrink-0 items-center gap-1 rounded-lg bg-green-600 px-3 py-1.5 text-xs font-medium text-white hover:bg-green-700"
+                  >
+                    <Plus className="h-3 w-3" /> Add
+                  </button>
+                </div>
+              ))}
+            </div>
+          )}
+          {catalogSearch && filteredCatalog.length === 0 && (
+            <p className="mt-2 text-xs text-gray-400">
+              No matching services found. Use "Add Manual Service" above for custom entries.
+            </p>
+          )}
+        </div>
+
+        <div className="space-y-3">
+          {services.map((svc, i) => (
+            <ServiceRow
+              key={i}
+              service={svc}
+              index={i}
+              onChange={handleServiceChange}
+              onRemove={handleRemoveService}
+              onMarkDone={handleMarkDone}
+              defaultLaborRate={settings.defaultLaborRate || DEFAULT_SHOP_RATE}
+            />
+          ))}
+          {services.length === 0 && (
+            <p className="text-center text-sm text-gray-400">
+              No services added. Add a service to begin the repair order.
+            </p>
+          )}
+        </div>
+
+        {/* Totals Preview */}
+        {services.filter((s) => s.name?.trim()).length > 0 && (
+          <div className="mt-4 rounded-lg border border-gray-200 bg-gray-50 p-4 dark:border-gray-700 dark:bg-gray-800/50">
+            <div className="space-y-1 text-sm">
+              <div className="flex justify-between">
+                <span className="text-gray-500 dark:text-gray-400">Labor</span>
+                <span className="font-medium text-gray-900 dark:text-gray-100">
+                  {formatCurrency(totals.laborTotal)}
+                </span>
+              </div>
+              <div className="flex justify-between">
+                <span className="text-gray-500 dark:text-gray-400">Parts</span>
+                <span className="font-medium text-gray-900 dark:text-gray-100">
+                  {formatCurrency(totals.partsTotal)}
+                </span>
+              </div>
+              <div className="flex justify-between">
+                <span className="text-gray-500 dark:text-gray-400">Subtotal</span>
+                <span className="font-medium text-gray-900 dark:text-gray-100">
+                  {formatCurrency(totals.subtotal)}
+                </span>
+              </div>
+              <div className="flex items-center justify-between gap-2">
+                <span className="text-gray-500 dark:text-gray-400 shrink-0">Discount</span>
+                <div className="flex items-center gap-1">
+                  <select
+                    value={discount.type}
+                    onChange={(e) =>
+                      setDiscount({ value: discount.value, type: e.target.value as 'dollar' | 'percent' })
+                    }
+                    className="text-xs rounded border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-600 dark:text-gray-300 py-0.5 px-1"
+                  >
+                    <option value="dollar">$</option>
+                    <option value="percent">%</option>
+                  </select>
+                  <input
+                    type="number"
+                    min="0"
+                    value={discount.value || ''}
+                    onChange={(e) =>
+                      setDiscount({ value: Number(e.target.value) || 0, type: discount.type })
+                    }
+                    placeholder="0"
+                    className="w-16 text-right rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-2 py-0.5 text-xs text-gray-900 dark:text-gray-100"
+                  />
+                </div>
+              </div>
+              {totals.discountAmount > 0 && (
+                <div className="flex justify-between text-green-600">
+                  <span></span>
+                  <span>−{formatCurrency(totals.discountAmount)}</span>
+                </div>
+              )}
+              <div className="flex justify-between">
+                <span className="text-gray-500 dark:text-gray-400">
+                  Shop Charges ({settings.shopChargeRate}%)
+                </span>
+                <span className="font-medium text-gray-900 dark:text-gray-100">
+                  {formatCurrency(totals.shopCharge)}
+                </span>
+              </div>
+              <div className="flex justify-between">
+                <span className="text-gray-500 dark:text-gray-400">
+                  Tax ({settings.taxRate}%)
+                </span>
+                <span className="font-medium text-gray-900 dark:text-gray-100">
+                  {formatCurrency(totals.tax)}
+                </span>
+              </div>
+              <div className="flex justify-between border-t border-gray-200 pt-2 dark:border-gray-600">
+                <span className="font-semibold text-gray-900 dark:text-white">Total</span>
+                <span className="font-bold text-blue-600 dark:text-blue-400">
+                  {formatCurrency(totals.total)}
+                </span>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Notes */}
+      <div>
+        <label className="block text-xs font-medium text-gray-500 dark:text-gray-400">
+          Notes
+        </label>
+        <textarea
+          value={notes}
+          onChange={(e) => setNotes(e.target.value)}
+          rows={3}
+          placeholder="Customer concerns, technician instructions, etc."
+          className="mt-1 w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100"
+        />
+      </div>
+
+      {/* Actions */}
+      <div className={`flex items-center justify-end gap-3 border-t border-gray-200 pt-4 dark:border-gray-700 ${
+        stickyActions
+          ? 'sticky bottom-0 z-10 -mx-6 -mb-6 bg-white px-6 py-3 shadow-[0_-4px_12px_rgba(0,0,0,0.06)] dark:bg-gray-800'
+          : ''
+      }`}>
+        <button
+          type="button"
+          onClick={onCancel}
+          className="rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
+        >
+          Cancel
+        </button>
+        <button
+          type="button"
+          onClick={handleSubmit}
+          disabled={saving || !firstName.trim() || !lastName.trim()}
+          className="inline-flex items-center gap-2 rounded-lg bg-blue-600 px-5 py-2 text-sm font-medium text-white shadow-sm hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-50"
+        >
+          <Save className="h-4 w-4" />
+          {saving ? 'Saving...' : effectiveSubmitLabel}
+        </button>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/SetupBanner.tsx b/src/components/SetupBanner.tsx
new file mode 100644
index 0000000..06e0939
--- /dev/null
+++ b/src/components/SetupBanner.tsx
@@ -0,0 +1,78 @@
+import { BarChart3, FileText, Settings2, Users } from 'lucide-react';
+import { Link } from 'react-router-dom';
+
+interface SetupBannerProps {
+  collectionName: string;
+}
+
+const setupBannerContent: Record<string, {
+  title: string;
+  description: string;
+  detail: string;
+  cta: string;
+  icon: typeof FileText;
+}> = {
+  invoices: {
+    title: 'Complete setup before creating invoices',
+    description: 'Finish your business profile and pricing defaults so invoices are ready for customer use.',
+    detail: 'Your invoice records will reflect your shop information, payment terms, and document branding after setup is complete.',
+    cta: 'Finish Business Setup',
+    icon: FileText,
+  },
+  repairOrders: {
+    title: 'Complete setup before using financial reporting',
+    description: 'Finish setup so dashboard totals and customer-facing financial details reflect your business defaults.',
+    detail: 'Once configured, this dashboard will report on repair order activity using your labor, tax, and fee settings.',
+    cta: 'Review Setup',
+    icon: BarChart3,
+  },
+  service_advisors: {
+    title: 'Complete setup before managing staff defaults',
+    description: 'Finish setup to define the primary advisor or technician details used throughout your workflow.',
+    detail: 'This helps keep quotes, repair orders, and other records consistent before you add more team members.',
+    cta: 'Finish Setup',
+    icon: Users,
+  },
+};
+
+export default function SetupBanner({ collectionName }: SetupBannerProps) {
+  const content = setupBannerContent[collectionName] ?? {
+    title: 'Complete setup before using this section',
+    description: 'Finish your first-run setup so customer-facing documents and workflow defaults are in place.',
+    detail: 'Setup ensures this area uses your business profile, pricing defaults, and professional document settings.',
+    cta: 'Finish Setup',
+    icon: Settings2,
+  };
+
+  const Icon = content.icon;
+
+  return (
+    <div className="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm dark:border-slate-800 dark:bg-slate-900">
+      <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
+        <div className="flex items-start gap-4">
+          <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-2xl bg-slate-100 dark:bg-slate-800">
+            <Icon className="h-6 w-6 text-slate-600 dark:text-slate-300" />
+          </div>
+          <div>
+            <h3 className="text-sm font-semibold text-slate-900 dark:text-slate-100">
+              {content.title}
+            </h3>
+            <p className="mt-1 text-sm text-slate-600 dark:text-slate-400">
+              {content.description}
+            </p>
+            <p className="mt-2 text-xs text-slate-500 dark:text-slate-500">
+              {content.detail}
+            </p>
+          </div>
+        </div>
+        <Link
+          to="/setup"
+          className="inline-flex items-center gap-2 rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200 dark:hover:bg-slate-700"
+        >
+          <Settings2 className="h-4 w-4" />
+          {content.cta}
+        </Link>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/advisor/AdvisorLayout.tsx b/src/components/advisor/AdvisorLayout.tsx
new file mode 100644
index 0000000..01ec7f1
--- /dev/null
+++ b/src/components/advisor/AdvisorLayout.tsx
@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+import Layout from '../Layout';
+
+interface AdvisorLayoutProps {
+  children: ReactNode;
+}
+
+export default function AdvisorLayout({ children }: AdvisorLayoutProps) {
+  return <Layout>{children}</Layout>;
+}
diff --git a/src/components/advisor/AssignmentPanel.tsx b/src/components/advisor/AssignmentPanel.tsx
new file mode 100644
index 0000000..321acc7
--- /dev/null
+++ b/src/components/advisor/AssignmentPanel.tsx
@@ -0,0 +1,287 @@
+import { useEffect, useState } from 'react';
+import { pb } from '../../lib/pocketbase';
+import { UserPlus, User, X } from 'lucide-react';
+import type { RepairOrder } from '../../types';
+import type { TechnicianAssignment, TechnicianUser } from '../../lib/technicianData';
+import {
+  fetchTechnicianUsers,
+  fetchAssignmentsForRO,
+  createTechnicianAssignment,
+  clockElapsedMinutes,
+} from '../../lib/technicianData';
+import { formatElapsed } from '../../lib/format';
+
+interface AssignmentPanelProps {
+  ro: RepairOrder;
+}
+
+export default function AssignmentPanel({ ro }: AssignmentPanelProps) {
+  const userId = pb.authStore.model?.id;
+  const [technicians, setTechnicians] = useState<TechnicianUser[]>([]);
+  const [assignments, setAssignments] = useState<TechnicianAssignment[]>([]);
+  const [loadingTechs, setLoadingTechs] = useState(true);
+  const [showModal, setShowModal] = useState(false);
+
+  const [selectedTechId, setSelectedTechId] = useState('');
+  const [selectedServiceIds, setSelectedServiceIds] = useState<string[]>([]);
+  const [creating, setCreating] = useState(false);
+  const [error, setError] = useState('');
+
+  const load = async () => {
+    if (!userId) return;
+    setLoadingTechs(true);
+    const [techs, assns] = await Promise.all([
+      fetchTechnicianUsers(userId),
+      fetchAssignmentsForRO(ro.id),
+    ]);
+    setTechnicians(techs);
+    setAssignments(assns);
+    setLoadingTechs(false);
+  };
+
+  useEffect(() => {
+    load();
+  }, [ro.id, userId]);
+
+  const openModal = () => {
+    setSelectedTechId('');
+    setSelectedServiceIds(ro.services.map((s) => s.id));
+    setError('');
+    setShowModal(true);
+  };
+
+  const closeModal = () => {
+    setShowModal(false);
+    setSelectedTechId('');
+    setSelectedServiceIds([]);
+    setError('');
+  };
+
+  const toggleService = (id: string) => {
+    setSelectedServiceIds((prev) =>
+      prev.includes(id) ? prev.filter((sid) => sid !== id) : [...prev, id],
+    );
+  };
+
+  const handleCreate = async () => {
+    if (!selectedTechId) {
+      setError('Select a technician.');
+      return;
+    }
+    if (selectedServiceIds.length === 0) {
+      setError('Select at least one service.');
+      return;
+    }
+    if (!userId) return;
+
+    setCreating(true);
+    setError('');
+    try {
+      await createTechnicianAssignment(ro, selectedTechId, selectedServiceIds, userId);
+      closeModal();
+      await load();
+    } catch {
+      setError('Failed to create assignment. Try again.');
+    } finally {
+      setCreating(false);
+    }
+  };
+
+  return (
+    <div className="mt-6 rounded-xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-gray-900">
+      <div className="flex items-center justify-between">
+        <div>
+          <h3 className="text-sm font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">
+            Technician Assignments
+          </h3>
+          {assignments.length > 0 && (
+            <p className="mt-0.5 text-xs text-gray-400 dark:text-gray-500">
+              {assignments.length} assignment{assignments.length > 1 ? 's' : ''}
+            </p>
+          )}
+        </div>
+        {technicians.length > 0 && (
+          <button
+            onClick={openModal}
+            className="inline-flex items-center gap-1.5 rounded-lg bg-green-600 px-3 py-1.5 text-xs font-medium text-white transition-colors hover:bg-green-700"
+          >
+            <UserPlus className="h-3.5 w-3.5" />
+            Assign
+          </button>
+        )}
+      </div>
+
+      {/* Loading */}
+      {loadingTechs && (
+        <div className="mt-3 flex items-center justify-center py-4">
+          <div className="animate-spin h-5 w-5 border-2 border-green-500 border-t-transparent rounded-full" />
+        </div>
+      )}
+
+      {/* No technicians */}
+      {!loadingTechs && technicians.length === 0 && (
+        <div className="mt-3 rounded-lg bg-gray-50 p-4 text-center dark:bg-gray-800/50">
+          <User className="mx-auto h-6 w-6 text-gray-400 dark:text-gray-500" />
+          <p className="mt-2 text-sm text-gray-500 dark:text-gray-400">
+            No technician accounts available yet.
+          </p>
+          <p className="text-xs text-gray-400 dark:text-gray-500">
+            Technician invites come in a future update.
+          </p>
+        </div>
+      )}
+
+      {/* Existing assignments */}
+      {!loadingTechs && assignments.length > 0 && (
+        <div className="mt-3 space-y-2">
+          {assignments.map((a) => {
+            const running = a.clockEntries.some((e) => !e.end);
+            const tech = technicians.find((t) => t.id === a.technicianUserId);
+            const done = a.services.filter((s) => s.status === 'completed').length;
+            return (
+              <div
+                key={a.id}
+                className="rounded-lg border border-gray-100 bg-gray-50 p-3 dark:border-gray-800 dark:bg-gray-800/50"
+              >
+                <div className="flex items-center justify-between gap-2">
+                  <div className="flex items-center gap-2 min-w-0">
+                    <div className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-green-100 dark:bg-green-900/30">
+                      <User className="h-3.5 w-3.5 text-green-600 dark:text-green-400" />
+                    </div>
+                    <div className="min-w-0">
+                      <p className="text-sm font-medium text-gray-900 dark:text-white truncate">
+                        {tech?.displayName || tech?.email || 'Technician'}
+                      </p>
+                      <p className="text-xs text-gray-400 dark:text-gray-500">
+                        {done}/{a.services.length} services · {formatElapsed(clockElapsedMinutes(a.clockEntries))}
+                      </p>
+                    </div>
+                  </div>
+                  <div className="flex items-center gap-2 shrink-0">
+                    {running && (
+                      <span className="inline-flex items-center gap-1 rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-700 dark:bg-green-900/30 dark:text-green-400">
+                        <span className="h-1.5 w-1.5 animate-pulse rounded-full bg-green-500" />
+                        Live
+                      </span>
+                    )}
+                    <StatusBadge status={a.status} />
+                  </div>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      )}
+
+      {/* Assign modal */}
+      {showModal && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4">
+          <div className="w-full max-w-md rounded-2xl border border-gray-200 bg-white p-6 shadow-xl dark:border-gray-800 dark:bg-gray-900">
+            <div className="flex items-center justify-between">
+              <h4 className="text-base font-semibold text-gray-900 dark:text-white">
+                Assign Technician
+              </h4>
+              <button
+                onClick={closeModal}
+                className="rounded-lg p-1 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
+              >
+                <X className="h-5 w-5" />
+              </button>
+            </div>
+
+            {/* Technician select */}
+            <div className="mt-4">
+              <label className="mb-1 block text-xs font-medium text-gray-500 dark:text-gray-400">
+                Technician
+              </label>
+              <select
+                value={selectedTechId}
+                onChange={(e) => setSelectedTechId(e.target.value)}
+                className="w-full rounded-xl border border-gray-200 bg-white px-3 py-2.5 text-sm text-gray-900 focus:border-green-400 focus:outline-none focus:ring-2 focus:ring-green-100 dark:border-gray-800 dark:bg-gray-900 dark:text-white dark:focus:border-green-600 dark:focus:ring-green-900/30"
+              >
+                <option value="">Select a technician…</option>
+                {technicians.map((t) => (
+                  <option key={t.id} value={t.id}>
+                    {t.displayName || t.email}
+                  </option>
+                ))}
+              </select>
+            </div>
+
+            {/* Services */}
+            <div className="mt-4">
+              <label className="mb-1 block text-xs font-medium text-gray-500 dark:text-gray-400">
+                Services to assign
+              </label>
+              <div className="max-h-48 space-y-1.5 overflow-y-auto rounded-xl border border-gray-200 p-2 dark:border-gray-800">
+                {ro.services.map((svc) => (
+                  <label
+                    key={svc.id}
+                    className="flex cursor-pointer items-center gap-2 rounded-lg px-2 py-1.5 text-sm hover:bg-gray-50 dark:hover:bg-gray-800/50"
+                  >
+                    <input
+                      type="checkbox"
+                      checked={selectedServiceIds.includes(svc.id)}
+                      onChange={() => toggleService(svc.id)}
+                      className="rounded border-gray-300 text-green-600 focus:ring-green-500 dark:border-gray-600"
+                    />
+                    <span className="text-gray-700 dark:text-gray-300">
+                      {svc.name}
+                    </span>
+                  </label>
+                ))}
+              </div>
+            </div>
+
+            {error && (
+              <p className="mt-3 text-xs text-red-600 dark:text-red-400">{error}</p>
+            )}
+
+            <div className="mt-5 flex gap-3">
+              <button
+                onClick={closeModal}
+                className="flex-1 rounded-xl border border-gray-200 bg-white px-4 py-2.5 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300 dark:hover:bg-gray-800"
+              >
+                Cancel
+              </button>
+              <button
+                onClick={handleCreate}
+                disabled={creating}
+                className="flex-1 rounded-xl bg-green-600 px-4 py-2.5 text-sm font-medium text-white transition-colors hover:bg-green-700 disabled:cursor-not-allowed disabled:opacity-50"
+              >
+                {creating ? 'Creating…' : 'Assign'}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function StatusBadge({ status }: { status: string }) {
+  const config: Record<string, { label: string; colors: string }> = {
+    pending: {
+      label: 'Pending',
+      colors: 'bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400',
+    },
+    in_progress: {
+      label: 'In Progress',
+      colors: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/40 dark:text-yellow-300',
+    },
+    waiting_parts: {
+      label: 'Waiting Parts',
+      colors: 'bg-orange-100 text-orange-800 dark:bg-orange-900/40 dark:text-orange-300',
+    },
+    completed: {
+      label: 'Completed',
+      colors: 'bg-green-100 text-green-800 dark:bg-green-900/40 dark:text-green-300',
+    },
+  };
+  const cfg = config[status] ?? config.pending;
+  return (
+    <span className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${cfg.colors}`}>
+      {cfg.label}
+    </span>
+  );
+}
diff --git a/src/components/appointments/AppointmentModal.tsx b/src/components/appointments/AppointmentModal.tsx
new file mode 100644
index 0000000..6c914bd
--- /dev/null
+++ b/src/components/appointments/AppointmentModal.tsx
@@ -0,0 +1,641 @@
+import { memo, useEffect, useState, useCallback, useRef } from 'react';
+import { Save, X, User, Check } from 'lucide-react';
+import { pb } from '../../lib/pocketbase';
+import { loadSettings, getRoleLabel, showServiceLocationFields } from '../../lib/settings';
+import { useSettings } from '../../store/settings';
+import { formatPhoneInput } from '../../lib/phone';
+import { logError } from '../../lib/userMessages';
+import { isValidDate, todayISO } from '../../lib/appointments';
+import { composeName, parseName, findMatchingCustomer } from '../../lib/customerName';
+import type { CustomerWithVehicles, CustomerFormData } from '../../pages/Customers';
+import type { Appointment } from '../../types';
+
+interface AppointmentFormData {
+  customerId: string;
+  firstName: string;
+  middleName: string;
+  lastName: string;
+  customerName: string;    // composed for payload
+  customerPhone: string;
+  customerEmail: string;
+  vehicleInfo: string;
+  vin: string;
+  date: string;
+  time: string;
+  arrivalWindowMinutes: number;
+  tripMiles: number;
+  durationMinutes: number;
+  advisorName: string;
+  serviceType: string;
+  serviceLocation: string;
+  notes: string;
+}
+
+export type CreateAppointmentFormData = AppointmentFormData;
+
+export const EMPTY_FORM: AppointmentFormData = {
+  customerId: '',
+  firstName: '',
+  middleName: '',
+  lastName: '',
+  customerName: '',
+  customerPhone: '',
+  customerEmail: '',
+  vehicleInfo: '',
+  vin: '',
+  date: '',
+  time: '',
+  arrivalWindowMinutes: 0,
+  tripMiles: 0,
+  durationMinutes: 60,
+  advisorName: '',
+  serviceType: '',
+  serviceLocation: '',
+  notes: '',
+};
+
+interface Props {
+  isOpen: boolean;
+  onClose: () => void;
+  onSave: (data: AppointmentFormData) => Promise<void>;
+  appointment: Appointment | null;
+  customers: CustomerWithVehicles[];
+}
+
+function AppointmentModalImpl({
+  isOpen,
+  onClose,
+  onSave,
+  appointment,
+  customers,
+}: Props) {
+  const setupSettings = useSettings();
+  const roleLabel = getRoleLabel(setupSettings);
+  const showLocationFields = showServiceLocationFields(setupSettings);
+  const [form, setForm] = useState<AppointmentFormData>({ ...EMPTY_FORM, advisorName: loadSettings().serviceAdvisor });
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [showCustomerModal, setShowCustomerModal] = useState(false);
+  const [showCustomerModalFromMatch, setShowCustomerModalFromMatch] = useState(false);
+
+  // ── Customer matching ──
+  const [suggestedCustomer, setSuggestedCustomer] = useState<CustomerWithVehicles | null>(null);
+  const [dismissedMatch, setDismissedMatch] = useState(false);
+  const matchTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  // Populate form from appointment being edited
+  useEffect(() => {
+    if (appointment) {
+      const parsed = parseName(appointment.customerName || '');
+      setForm({
+        customerId: appointment.customerId || '',
+        firstName: parsed.firstName,
+        middleName: parsed.middleName,
+        lastName: parsed.lastName,
+        customerName: appointment.customerName || '',
+        customerPhone: appointment.customerPhone || '',
+        customerEmail: appointment.customerEmail || '',
+        vehicleInfo: appointment.vehicleInfo || '',
+        vin: appointment.vin || '',
+        date: appointment.date || '',
+        time: appointment.time || '',
+        durationMinutes: appointment.durationMinutes ?? 60,
+        advisorName: appointment.advisorName || '',
+        serviceType: appointment.serviceType || '',
+        serviceLocation: appointment.serviceLocation || '',
+        tripMiles: appointment.tripMiles || 0,
+        arrivalWindowMinutes: appointment.arrivalWindowMinutes || 0,
+        notes: appointment.notes || '',
+      });
+      setSuggestedCustomer(null);
+      setDismissedMatch(false);
+    } else {
+      setForm({ ...EMPTY_FORM, advisorName: loadSettings().serviceAdvisor });
+      setSuggestedCustomer(null);
+      setDismissedMatch(false);
+    }
+    setError(null);
+  }, [appointment, isOpen]);
+
+  // ── Customer matching logic (debounced) ──
+  const runMatching = useCallback(() => {
+    if (!form.customerId && !dismissedMatch) {
+      const match = findMatchingCustomer(customers, {
+        firstName: form.firstName,
+        middleName: form.middleName,
+        lastName: form.lastName,
+        phone: form.customerPhone,
+      });
+      setSuggestedCustomer(match);
+    } else {
+      setSuggestedCustomer(null);
+    }
+  }, [form.firstName, form.middleName, form.lastName, form.customerPhone, form.customerId, customers, dismissedMatch]);
+
+  useEffect(() => {
+    if (appointment) return; // don't match while editing an existing appointment
+    if (matchTimeoutRef.current) clearTimeout(matchTimeoutRef.current);
+    matchTimeoutRef.current = setTimeout(runMatching, 400);
+    return () => {
+      if (matchTimeoutRef.current) clearTimeout(matchTimeoutRef.current);
+    };
+  }, [runMatching, appointment]);
+
+  const handleUseExistingCustomer = useCallback(() => {
+    if (!suggestedCustomer) return;
+    const parsed = parseName(suggestedCustomer.name);
+    setForm((prev) => ({
+      ...prev,
+      customerId: suggestedCustomer.id,
+      firstName: parsed.firstName,
+      middleName: parsed.middleName,
+      lastName: parsed.lastName,
+      customerName: suggestedCustomer.name,
+      customerPhone: suggestedCustomer.phone || prev.customerPhone,
+      customerEmail: suggestedCustomer.email || prev.customerEmail,
+    }));
+    setSuggestedCustomer(null);
+    setDismissedMatch(false);
+  }, [suggestedCustomer]);
+
+  const handleDismissMatch = useCallback(() => {
+    setSuggestedCustomer(null);
+    setDismissedMatch(true);
+  }, []);
+
+  // ── Create new customer in PB ──
+  const ensureCustomerRecord = useCallback(async (): Promise<string> => {
+    // If we already have a customerId, return it
+    if (form.customerId) return form.customerId;
+
+    const uid = pb.authStore.model?.id;
+    if (!uid) return '';
+
+    const name = composeName(form.firstName, form.middleName, form.lastName);
+    if (!name.trim()) return '';
+
+    // Check once more for an existing customer in case one was added since mount
+    const existingMatch = findMatchingCustomer(customers, {
+      firstName: form.firstName,
+      middleName: form.middleName,
+      lastName: form.lastName,
+      phone: form.customerPhone,
+    });
+    if (existingMatch) {
+      // Auto-pick the match
+      setForm((prev) => ({ ...prev, customerId: existingMatch.id }));
+      return existingMatch.id;
+    }
+
+    // Create the customer record
+    try {
+      const record = await pb.collection('customers').create({
+        name,
+        phone: form.customerPhone,
+        email: form.customerEmail,
+        address: '',
+        notes: '',
+        userId: uid,
+      });
+      const newId = record.id;
+      setForm((prev) => ({ ...prev, customerId: newId }));
+      return newId;
+    } catch (err) {
+      logError('Failed to create customer record', err);
+      return '';
+    }
+  }, [form, customers]);
+
+  const handleCustomerCreated = async (data: CustomerFormData) => {
+    const uid = pb.authStore.model?.id;
+    if (!uid) return;
+    const name = composeName(data.firstName, data.middleName, data.lastName) || data.name;
+    const record = await pb.collection('customers').create({
+      name,
+      firstName: data.firstName || '',
+      middleName: data.middleName || '',
+      lastName: data.lastName || '',
+      phone: data.phone || '',
+      email: data.email || '',
+      address: data.address || '',
+      notes: data.notes || '',
+      userId: uid,
+    });
+    const c: CustomerWithVehicles = {
+      ...record as unknown as import('../../pages/Customers').CustomerRecord,
+      vehicles: [],
+      vehicleCount: 0,
+    };
+    const parsed = parseName(name);
+    handleChange('customerId', c.id);
+    handleChange('firstName', parsed.firstName);
+    handleChange('middleName', parsed.middleName);
+    handleChange('lastName', parsed.lastName);
+    handleChange('customerName', name);
+    handleChange('customerPhone', c.phone || '');
+    handleChange('customerEmail', c.email || '');
+    setShowCustomerModal(false);
+    setShowCustomerModalFromMatch(false);
+    setSuggestedCustomer(null);
+    setDismissedMatch(false);
+  };
+
+  const handleChange = (field: keyof AppointmentFormData, value: string | number) => {
+    setForm((prev) => {
+      const next = { ...prev, [field]: value };
+      // When name fields change, recompose customerName
+      if (field === 'firstName' || field === 'middleName' || field === 'lastName') {
+        const newFirst = field === 'firstName' ? String(value) : prev.firstName;
+        const newMiddle = field === 'middleName' ? String(value) : prev.middleName;
+        const newLast = field === 'lastName' ? String(value) : prev.lastName;
+        const composed = composeName(newFirst, newMiddle, newLast);
+        if (composed !== prev.customerName) {
+          next.customerName = composed;
+        }
+      }
+      return next;
+    });
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError(null);
+
+    const name = composeName(form.firstName, form.middleName, form.lastName);
+    if (!name.trim()) {
+      setError('Please enter at least the customer\'s first and last name.');
+      return;
+    }
+    if (!form.date) {
+      setError('Date is required.');
+      return;
+    }
+    if (!isValidDate(form.date)) {
+      setError('Please enter a valid appointment date.');
+      return;
+    }
+    if (form.date < todayISO()) {
+      setError('Appointment date cannot be in the past.');
+      return;
+    }
+    if (!form.time) {
+      setError('Time is required.');
+      return;
+    }
+
+    setSaving(true);
+    try {
+      // Auto-create customer record if one doesn't exist yet
+      const customerId = await ensureCustomerRecord();
+      const payload: AppointmentFormData = {
+        ...form,
+        customerId: customerId || form.customerId,
+        customerName: name,
+      };
+      await onSave(payload);
+      onClose();
+    } catch (err: unknown) {
+      logError('Failed to save appointment', err);
+      setError('Appointment could not be saved. Please try again.');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  if (!isOpen) return null;
+
+  const name = composeName(form.firstName, form.middleName, form.lastName);
+
+  return (
+    <>
+    <div className="fixed inset-0 z-50 flex items-start justify-center overflow-y-auto p-4 pt-8">
+      <div
+        className="absolute inset-0 bg-black/50 backdrop-blur-sm"
+        onClick={onClose}
+      />
+
+      <div className="relative z-10 w-full max-w-3xl overflow-hidden rounded-2xl border border-gray-200 bg-white shadow-2xl dark:border-gray-700 dark:bg-gray-900">
+        <div className="flex items-start justify-between border-b border-gray-200 bg-gradient-to-r from-emerald-50 via-white to-white px-6 py-5 dark:border-gray-700 dark:from-emerald-950/20 dark:via-gray-900 dark:to-gray-900">
+          <div>
+            <p className="text-xs font-semibold uppercase tracking-[0.18em] text-emerald-700 dark:text-emerald-400">
+              Appointment Details
+            </p>
+            <h2 className="mt-1 text-xl font-semibold tracking-tight text-gray-900 dark:text-white">
+              {appointment ? 'Edit Appointment' : 'New Appointment'}
+            </h2>
+            <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
+              Capture customer, vehicle, and schedule details in one clean service record.
+            </p>
+          </div>
+          <button
+            onClick={onClose}
+            className="rounded-lg p-1.5 text-gray-400 transition-colors hover:bg-white/70 hover:text-gray-600 dark:hover:bg-gray-800 dark:hover:text-gray-300"
+          >
+            <X className="h-5 w-5" />
+          </button>
+        </div>
+
+        <form onSubmit={handleSubmit} className="space-y-6 bg-gray-50/70 px-6 py-6 dark:bg-gray-950/40">
+          {error && (
+            <div className="rounded-lg border border-red-200 bg-red-50 p-3 text-sm text-red-700 dark:border-red-800 dark:bg-red-900/20 dark:text-red-400">
+              {error}
+            </div>
+          )}
+
+          {/* ── Customer match suggestion banner ── */}
+          {suggestedCustomer && !form.customerId && (
+            <div className="rounded-xl border border-emerald-200 bg-emerald-50 p-4 dark:border-emerald-700 dark:bg-emerald-900/20">
+              <div className="flex items-start gap-3">
+                <div className="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-emerald-100 dark:bg-emerald-800">
+                  <User className="h-4 w-4 text-emerald-600 dark:text-emerald-300" />
+                </div>
+                <div className="min-w-0 flex-1">
+                  <p className="text-sm font-medium text-emerald-800 dark:text-emerald-200">
+                    Existing customer found
+                  </p>
+                  <p className="mt-0.5 text-sm text-emerald-700 dark:text-emerald-300">
+                    <span className="font-semibold">{suggestedCustomer.name}</span>
+                    {suggestedCustomer.phone && (
+                      <> &middot; {suggestedCustomer.phone}</>
+                    )}
+                    {suggestedCustomer.email && (
+                      <> &middot; {suggestedCustomer.email}</>
+                    )}
+                  </p>
+                  <div className="mt-2 flex items-center gap-2">
+                    <button
+                      type="button"
+                      onClick={handleUseExistingCustomer}
+                      className="inline-flex items-center gap-1.5 rounded-lg bg-emerald-600 px-3 py-1.5 text-xs font-medium text-white hover:bg-emerald-700"
+                    >
+                      <Check className="h-3.5 w-3.5" />
+                      Use Existing Customer
+                    </button>
+                    <button
+                      type="button"
+                      onClick={handleDismissMatch}
+                      className="rounded-lg border border-emerald-300 bg-white px-3 py-1.5 text-xs font-medium text-emerald-700 hover:bg-emerald-50 dark:border-emerald-600 dark:bg-gray-800 dark:text-emerald-300 dark:hover:bg-emerald-900/30"
+                    >
+                      Continue as New
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+
+          <div className="grid grid-cols-1 gap-6 xl:grid-cols-[1.15fr_0.85fr]">
+            <div className="space-y-6">
+              <section className="rounded-2xl border border-gray-200 bg-white p-5 shadow-sm dark:border-gray-700 dark:bg-gray-900">
+                <h3 className="mb-4 text-sm font-semibold text-gray-700 dark:text-gray-300">Customer Information</h3>
+
+                {/* First / Middle / Last name row */}
+                <div className="mb-3 grid grid-cols-1 gap-3 sm:grid-cols-3">
+                  <div>
+                    <label className="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">
+                      First Name <span className="text-red-500">*</span>
+                    </label>
+                    <input
+                      type="text"
+                      value={form.firstName}
+                      onChange={(e) => handleChange('firstName', e.target.value)}
+                      className="w-full rounded-xl border border-gray-300 px-3 py-2.5 text-sm text-gray-900 placeholder-gray-400 shadow-sm transition-colors focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20 dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:placeholder-gray-500 dark:focus:border-emerald-400"
+                      placeholder="John"
+                    />
+                  </div>
+                  <div>
+                    <label className="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">
+                      Middle
+                    </label>
+                    <input
+                      type="text"
+                      value={form.middleName}
+                      onChange={(e) => handleChange('middleName', e.target.value)}
+                      className="w-full rounded-xl border border-gray-300 px-3 py-2.5 text-sm text-gray-900 placeholder-gray-400 shadow-sm transition-colors focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20 dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:placeholder-gray-500 dark:focus:border-emerald-400"
+                      placeholder="Michael"
+                    />
+                  </div>
+                  <div>
+                    <label className="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">
+                      Last Name <span className="text-red-500">*</span>
+                    </label>
+                    <input
+                      type="text"
+                      value={form.lastName}
+                      onChange={(e) => handleChange('lastName', e.target.value)}
+                      className="w-full rounded-xl border border-gray-300 px-3 py-2.5 text-sm text-gray-900 placeholder-gray-400 shadow-sm transition-colors focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20 dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:placeholder-gray-500 dark:focus:border-emerald-400"
+                      placeholder="Doe"
+                    />
+                  </div>
+                </div>
+
+                {/* Phone + Email */}
+                <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
+                  <div>
+                    <label className="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">Phone</label>
+                    <input type="tel" value={formatPhoneInput(form.customerPhone)} onChange={(e) => handleChange('customerPhone', e.target.value.replace(/\D/g, ''))} className="w-full rounded-xl border border-gray-300 px-3 py-2.5 text-sm text-gray-900 placeholder-gray-400 shadow-sm transition-colors focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20 dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:placeholder-gray-500 dark:focus:border-emerald-400" placeholder="(555) 123-4567" />
+                  </div>
+                  <div>
+                    <label className="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">Email</label>
+                    <input type="email" value={form.customerEmail} onChange={(e) => handleChange('customerEmail', e.target.value)} className="w-full rounded-xl border border-gray-300 px-3 py-2.5 text-sm text-gray-900 placeholder-gray-400 shadow-sm transition-colors focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20 dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:placeholder-gray-500 dark:focus:border-emerald-400" placeholder="john@example.com" />
+                  </div>
+                </div>
+
+                {/* Selected customer indicator */}
+                {form.customerId && (
+                  <div className="mt-3 flex items-center gap-2 rounded-lg border border-emerald-200 bg-emerald-50/50 px-3 py-2 dark:border-emerald-700 dark:bg-emerald-900/10">
+                    <Check className="h-4 w-4 shrink-0 text-emerald-500" />
+                    <span className="text-xs text-emerald-700 dark:text-emerald-300">
+                      Linked to customer record: <strong>{name || form.customerName}</strong>
+                    </span>
+                  </div>
+                )}
+              </section>
+
+              <section className="rounded-2xl border border-gray-200 bg-white p-5 shadow-sm dark:border-gray-700 dark:bg-gray-900">
+                <h3 className="mb-4 text-sm font-semibold text-gray-700 dark:text-gray-300">Vehicle Information</h3>
+                <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+                  <div className="sm:col-span-2">
+                    <label className="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">Vehicle Info</label>
+                    <input type="text" value={form.vehicleInfo} onChange={(e) => handleChange('vehicleInfo', e.target.value)} className="w-full rounded-xl border border-gray-300 px-3 py-2.5 text-sm text-gray-900 placeholder-gray-400 shadow-sm transition-colors focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20 dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:placeholder-gray-500 dark:focus:border-emerald-400" placeholder="2020 Toyota Camry" />
+                  </div>
+                  <div>
+                    <label className="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">VIN</label>
+                    <input type="text" value={form.vin} onChange={(e) => handleChange('vin', e.target.value.toUpperCase())} className="w-full rounded-xl border border-gray-300 px-3 py-2.5 text-sm text-gray-900 placeholder-gray-400 shadow-sm transition-colors focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20 dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:placeholder-gray-500 dark:focus:border-emerald-400" placeholder="1HGBH41JXMN109186" />
+                  </div>
+                  <div>
+                    <label className="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">Duration (min)</label>
+                    <input type="number" min="0" value={form.durationMinutes} onChange={(e) => handleChange('durationMinutes', parseInt(e.target.value, 10) || 0)} className="w-full rounded-xl border border-gray-300 px-3 py-2.5 text-sm text-gray-900 shadow-sm transition-colors focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20 dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:focus:border-emerald-400" />
+                  </div>
+                  {showLocationFields && (
+                    <div>
+                      <label className="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">Trip Miles</label>
+                      <input type="number" min="0" step="0.1" value={form.tripMiles || ''} onChange={(e) => handleChange('tripMiles', parseFloat(e.target.value) || 0)} className="w-full rounded-xl border border-gray-300 px-3 py-2.5 text-sm text-gray-900 shadow-sm transition-colors focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20 dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:focus:border-emerald-400" placeholder="0" />
+                    </div>
+                  )}
+                </div>
+              </section>
+            </div>
+
+            <div className="space-y-6">
+              <section className="rounded-2xl border border-gray-200 bg-white p-5 shadow-sm dark:border-gray-700 dark:bg-gray-900">
+                <h3 className="mb-4 text-sm font-semibold text-gray-700 dark:text-gray-300">Schedule & Service</h3>
+                <div className="grid grid-cols-1 gap-4">
+                  <div>
+                    <label className="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">Date <span className="text-red-500">*</span></label>
+                    <input type="date" value={form.date} onChange={(e) => handleChange('date', e.target.value)} className="w-full rounded-xl border border-gray-300 px-3 py-2.5 text-sm text-gray-900 shadow-sm transition-colors focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20 dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:focus:border-emerald-400" />
+                  </div>
+                  <div>
+                    <label className="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">Time <span className="text-red-500">*</span></label>
+                    <input type="time" value={form.time} onChange={(e) => handleChange('time', e.target.value)} className="w-full rounded-xl border border-gray-300 px-3 py-2.5 text-sm text-gray-900 shadow-sm transition-colors focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20 dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:focus:border-emerald-400" />
+                  </div>
+                  {showLocationFields && (
+                    <div>
+                      <label className="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">Arrival Window</label>
+                      <select value={form.arrivalWindowMinutes} onChange={(e) => handleChange('arrivalWindowMinutes', parseInt(e.target.value, 10) || 0)} className="w-full rounded-xl border border-gray-300 px-3 py-2.5 text-sm text-gray-900 shadow-sm transition-colors focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20 dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:focus:border-emerald-400">
+                        <option value={0}>Exact time</option>
+                        <option value={60}>&#xb1;1 hour</option>
+                        <option value={120}>&#xb1;2 hours</option>
+                        <option value={180}>&#xb1;3 hours</option>
+                        <option value={240}>&#xb1;4 hours</option>
+                      </select>
+                    </div>
+                  )}
+                  <div>
+                    <label className="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">{roleLabel}</label>
+                    <input
+                      type="text"
+                      value={form.advisorName}
+                      onChange={(e) => handleChange('advisorName', e.target.value)}
+                      placeholder={loadSettings().serviceAdvisor || `${roleLabel} name`}
+                      className={`w-full rounded-xl border px-3 py-2.5 text-sm shadow-sm transition-colors focus:outline-none focus:ring-2 focus:ring-emerald-500/20 ${
+                        loadSettings().serviceAdvisor && form.advisorName === loadSettings().serviceAdvisor
+                          ? 'border-gray-200 bg-gray-50 text-gray-400 placeholder-gray-400 focus:border-emerald-500 dark:border-gray-700 dark:bg-gray-800/50 dark:text-gray-500 dark:placeholder-gray-500 dark:focus:border-emerald-400'
+                          : 'border-gray-300 bg-white text-gray-900 placeholder-gray-400 focus:border-emerald-500 dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:placeholder-gray-500 dark:focus:border-emerald-400'
+                      }`}
+                    />
+                  </div>
+                  <div>
+                    <label className="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">Service Type</label>
+                    <input type="text" value={form.serviceType} onChange={(e) => handleChange('serviceType', e.target.value)} className="w-full rounded-xl border border-gray-300 px-3 py-2.5 text-sm text-gray-900 placeholder-gray-400 shadow-sm transition-colors focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20 dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:placeholder-gray-500 dark:focus:border-emerald-400" placeholder="Oil Change, Brake Service, etc." />
+                  </div>
+                  {showLocationFields && (
+                    <div>
+                      <label className="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">Service Address</label>
+                      <input type="text" value={form.serviceLocation} onChange={(e) => handleChange('serviceLocation', e.target.value)} className="w-full rounded-xl border border-gray-300 px-3 py-2.5 text-sm text-gray-900 placeholder-gray-400 shadow-sm transition-colors focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20 dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:placeholder-gray-500 dark:focus:border-emerald-400" placeholder="123 Oak St, Knoxville, TN" />
+                    </div>
+                  )}
+                </div>
+              </section>
+
+              <section className="rounded-2xl border border-gray-200 bg-white p-5 shadow-sm dark:border-gray-700 dark:bg-gray-900">
+                <label className="block text-sm font-semibold text-gray-700 dark:text-gray-300">Notes</label>
+                <textarea value={form.notes} onChange={(e) => handleChange('notes', e.target.value)} rows={6} className="mt-3 w-full rounded-xl border border-gray-300 px-3 py-2.5 text-sm text-gray-900 placeholder-gray-400 shadow-sm transition-colors focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20 dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:placeholder-gray-500 dark:focus:border-emerald-400" placeholder="Any additional notes..." />
+              </section>
+            </div>
+          </div>
+
+          <div className="flex items-center justify-between border-t border-gray-200 bg-white px-1 pt-5 dark:border-gray-700 dark:bg-transparent">
+            <p className="text-sm text-gray-500 dark:text-gray-400">
+              Confirm the service slot and customer details before saving.
+            </p>
+            <div className="flex items-center gap-3">
+              <button
+                type="button"
+                onClick={onClose}
+                className="rounded-xl border border-gray-300 px-4 py-2.5 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-700"
+              >
+                Cancel
+              </button>
+              <button
+                type="submit"
+                disabled={saving || !form.firstName.trim() || !form.lastName.trim()}
+                className="inline-flex items-center gap-2 rounded-xl bg-gradient-to-r from-emerald-600 to-emerald-500 px-5 py-2.5 text-sm font-medium text-white shadow-sm transition-all hover:from-emerald-700 hover:to-emerald-600 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:focus:ring-offset-gray-800"
+              >
+                {saving ? (
+                  <>
+                    <svg className="h-4 w-4 animate-spin" viewBox="0 0 24 24" fill="none">
+                      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+                      <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z" />
+                    </svg>
+                    Saving...
+                  </>
+                ) : (
+                  <>
+                    <Save className="h-4 w-4" />
+                    {appointment ? 'Update' : 'Create'}
+                  </>
+                )}
+              </button>
+            </div>
+          </div>
+        </form>
+      </div>
+    </div>
+
+    {/* Create Customer Modal */}
+    {(showCustomerModal || showCustomerModalFromMatch) && (
+      <div className="fixed inset-0 z-[60] flex items-center justify-center bg-black/50 p-4">
+        <div className="w-full max-w-lg rounded-xl bg-white shadow-xl dark:bg-gray-800">
+          <div className="flex items-center justify-between border-b border-gray-200 px-6 py-4 dark:border-gray-700">
+            <h2 className="text-lg font-semibold text-gray-900 dark:text-white">Create New Customer</h2>
+            <button onClick={() => { setShowCustomerModal(false); setShowCustomerModalFromMatch(false); }} className="rounded-lg p-1.5 text-gray-400 hover:bg-gray-100 hover:text-gray-600"><X className="h-5 w-5" /></button>
+          </div>
+          <div className="space-y-4 p-6">
+            <div className="grid grid-cols-3 gap-3">
+              <div>
+                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300">First <span className="text-red-500">*</span></label>
+                <input type="text" id="new-customer-first" defaultValue={form.firstName} className="mt-1 w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 placeholder-gray-400 focus:border-green-500 focus:outline-none focus:ring-2 focus:ring-green-500/20 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100" placeholder="John" />
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300">Middle</label>
+                <input type="text" id="new-customer-middle" defaultValue={form.middleName} className="mt-1 w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 placeholder-gray-400 focus:border-green-500 focus:outline-none focus:ring-2 focus:ring-green-500/20 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100" placeholder="Michael" />
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300">Last <span className="text-red-500">*</span></label>
+                <input type="text" id="new-customer-last" defaultValue={form.lastName} className="mt-1 w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 placeholder-gray-400 focus:border-green-500 focus:outline-none focus:ring-2 focus:ring-green-500/20 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100" placeholder="Doe" />
+              </div>
+            </div>
+            <div className="grid grid-cols-2 gap-4">
+              <div>
+                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300">Phone</label>
+                <input type="tel" id="new-customer-phone" defaultValue={form.customerPhone} className="mt-1 w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 placeholder-gray-400 focus:border-green-500 focus:outline-none focus:ring-2 focus:ring-green-500/20 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100" placeholder="Phone" />
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300">Email</label>
+                <input type="email" id="new-customer-email" defaultValue={form.customerEmail} className="mt-1 w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 placeholder-gray-400 focus:border-green-500 focus:outline-none focus:ring-2 focus:ring-green-500/20 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100" placeholder="Email" />
+              </div>
+            </div>
+            <div className="flex justify-end gap-3 border-t border-gray-200 pt-4 dark:border-gray-700">
+              <button type="button" onClick={() => { setShowCustomerModal(false); setShowCustomerModalFromMatch(false); }} className="rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300">Cancel</button>
+              <button type="button" onClick={() => {
+                const firstInput = document.getElementById('new-customer-first') as HTMLInputElement;
+                const middleInput = document.getElementById('new-customer-middle') as HTMLInputElement;
+                const lastInput = document.getElementById('new-customer-last') as HTMLInputElement;
+                const phoneInput = document.getElementById('new-customer-phone') as HTMLInputElement;
+                const emailInput = document.getElementById('new-customer-email') as HTMLInputElement;
+                const firstName = firstInput?.value?.trim() || '';
+                const middleName = middleInput?.value?.trim() || '';
+                const lastName = lastInput?.value?.trim() || '';
+                const name = composeName(firstName, middleName, lastName);
+                if (!name) return;
+                handleCustomerCreated({
+                  name,
+                  firstName,
+                  middleName,
+                  lastName,
+                  phone: phoneInput?.value || '',
+                  email: emailInput?.value || '',
+                  address: '',
+                  notes: '',
+                }).catch(() => {});
+              }} className="rounded-lg bg-green-600 px-4 py-2 text-sm font-medium text-white hover:bg-green-700">Create Customer</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    )}
+  </>);
+}
+
+export const AppointmentModal = memo(AppointmentModalImpl);
diff --git a/src/components/appointments/AppointmentRow.tsx b/src/components/appointments/AppointmentRow.tsx
new file mode 100644
index 0000000..c6f2cd5
--- /dev/null
+++ b/src/components/appointments/AppointmentRow.tsx
@@ -0,0 +1,205 @@
+import { memo } from 'react';
+import {
+  CalendarDays,
+  User,
+  Car,
+  Wrench,
+  UserCheck,
+  Clock,
+  MapPin,
+  Phone,
+  Mail,
+  LogIn,
+  Edit3,
+  Trash2,
+  Check,
+  Ban,
+  UserX,
+} from 'lucide-react';
+import type { Appointment } from '../../types';
+import { formatPhoneDisplay } from '../../lib/phone';
+import { formatDateDisplay, formatArrivalWindow, formatDurationShort } from '../../lib/appointments';
+import { StatusBadge } from './StatusBadge';
+
+interface Props {
+  appointment: Appointment;
+  onEdit: (appt: Appointment) => void;
+  onDelete: (appt: Appointment) => void;
+  onStatusChange: (appt: Appointment, status: Appointment['status']) => void;
+  onCheckIn: (appt: Appointment) => void;
+}
+
+function AppointmentRowImpl({
+  appointment,
+  onEdit,
+  onDelete,
+  onStatusChange,
+  onCheckIn,
+}: Props) {
+  const statusAccent: Record<Appointment['status'], string> = {
+    scheduled: 'before:bg-blue-500',
+    checked_in: 'before:bg-amber-500',
+    completed: 'before:bg-emerald-500',
+    cancelled: 'before:bg-red-500',
+    no_show: 'before:bg-gray-500',
+  };
+
+  const statusGlow: Record<Appointment['status'], string> = {
+    scheduled: 'hover:shadow-blue-100/80 dark:hover:shadow-blue-950/20',
+    checked_in: 'hover:shadow-amber-100/80 dark:hover:shadow-amber-950/20',
+    completed: 'hover:shadow-emerald-100/80 dark:hover:shadow-emerald-950/20',
+    cancelled: 'hover:shadow-red-100/80 dark:hover:shadow-red-950/20',
+    no_show: 'hover:shadow-gray-200/80 dark:hover:shadow-black/20',
+  };
+
+  const statusActions: {
+    label: string;
+    status: Appointment['status'];
+    icon: React.ComponentType<{ className?: string }>;
+    color: string;
+  }[] = [];
+
+  if (appointment.status === 'checked_in') {
+    statusActions.push({ label: 'Complete', status: 'completed', icon: Check, color: 'text-green-600 hover:bg-green-50 dark:hover:bg-green-900/20' });
+  }
+  if (appointment.status !== 'cancelled' && appointment.status !== 'no_show') {
+    if (appointment.status !== 'completed') {
+      statusActions.push({ label: 'Cancel', status: 'cancelled', icon: Ban, color: 'text-red-600 hover:bg-red-50 dark:hover:bg-red-900/20' });
+    }
+    statusActions.push({ label: 'No Show', status: 'no_show', icon: UserX, color: 'text-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700' });
+  }
+
+  return (
+    <div className={`group relative overflow-hidden rounded-2xl border border-gray-200/90 bg-white px-4 py-2.5 shadow-sm shadow-gray-200/60 transition-all before:absolute before:inset-y-0 before:left-0 before:w-1 before:content-[''] hover:-translate-y-0.5 hover:shadow-lg dark:border-gray-700 dark:bg-gray-800 dark:shadow-black/10 dark:hover:border-gray-600 ${statusAccent[appointment.status] || statusAccent.scheduled} ${statusGlow[appointment.status] || statusGlow.scheduled}`}>
+      <div className="flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between">
+        <div className="flex-1 min-w-0">
+          <div className="mb-1.5 flex flex-wrap items-center gap-2 text-sm text-gray-500 dark:text-gray-400">
+            <span className="inline-flex items-center gap-1 rounded-full bg-emerald-50 px-2.5 py-1 text-[11px] font-semibold uppercase tracking-[0.16em] text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-300">
+              <CalendarDays className="h-3.5 w-3.5 shrink-0" />
+              Service Slot
+            </span>
+            <StatusBadge status={appointment.status} />
+          </div>
+
+          <h3 className="truncate text-base font-semibold tracking-tight text-gray-900 dark:text-white">
+            <User className="mr-1.5 inline h-4 w-4 text-gray-400" />
+            {appointment.customerName || 'Unknown'}
+          </h3>
+
+          <div className="mt-1.5 flex flex-wrap gap-1.5 text-xs text-gray-500 dark:text-gray-400">
+            <span className="inline-flex items-center gap-1 rounded-full border border-gray-200 bg-gray-50 px-2.5 py-0.5 dark:border-gray-700 dark:bg-gray-700/60">
+              <span className="font-medium uppercase tracking-[0.12em] text-gray-400 dark:text-gray-500">Date</span>
+              <span className="font-semibold text-gray-700 dark:text-gray-200">{appointment.date ? formatDateDisplay(appointment.date) : 'No date set'}</span>
+            </span>
+            <span className="inline-flex items-center gap-1 rounded-full border border-gray-200 bg-gray-50 px-2.5 py-0.5 dark:border-gray-700 dark:bg-gray-700/60">
+              <span className="font-medium uppercase tracking-[0.12em] text-gray-400 dark:text-gray-500">Time</span>
+              <span className="font-semibold text-gray-700 dark:text-gray-200">{appointment.time ? formatArrivalWindow(appointment.time, appointment.arrivalWindowMinutes) : 'No time set'}</span>
+            </span>
+            <span className="inline-flex items-center gap-1 rounded-full border border-gray-200 bg-gray-50 px-2.5 py-0.5 dark:border-gray-700 dark:bg-gray-700/60">
+              <span className="font-medium uppercase tracking-[0.12em] text-gray-400 dark:text-gray-500">VIN</span>
+              <span className="font-semibold text-gray-700 dark:text-gray-200">{appointment.vin || 'No VIN set'}</span>
+            </span>
+          </div>
+
+          <div className="mt-1.5 flex flex-wrap gap-1.5 text-sm text-gray-600 dark:text-gray-300">
+            {appointment.vehicleInfo && (
+              <span className="inline-flex items-center gap-1 rounded-full border border-gray-200 bg-gray-50 px-2.5 py-0.5 dark:border-gray-700 dark:bg-gray-700/60">
+                <Car className="h-3.5 w-3.5" />
+                {appointment.vehicleInfo}
+              </span>
+            )}
+            {appointment.serviceType && (
+              <span className="inline-flex items-center gap-1 rounded-full border border-gray-200 bg-gray-50 px-2.5 py-0.5 dark:border-gray-700 dark:bg-gray-700/60">
+                <Wrench className="h-3.5 w-3.5" />
+                {appointment.serviceType}
+              </span>
+            )}
+            {appointment.advisorName && (
+              <span className="inline-flex items-center gap-1 rounded-full border border-gray-200 bg-gray-50 px-2.5 py-0.5 dark:border-gray-700 dark:bg-gray-700/60">
+                <UserCheck className="h-3.5 w-3.5" />
+                {appointment.advisorName}
+              </span>
+            )}
+            {appointment.durationMinutes != null && appointment.durationMinutes > 0 && (
+              <span className="inline-flex items-center gap-1 rounded-full border border-amber-200 bg-amber-50 px-2.5 py-0.5 text-amber-800 dark:border-amber-900/60 dark:bg-amber-900/20 dark:text-amber-300">
+                <Clock className="h-3.5 w-3.5" />
+                {formatDurationShort(appointment.durationMinutes)}
+              </span>
+            )}
+            {appointment.serviceLocation && (
+              <span className="inline-flex items-center gap-1 rounded-full border border-sky-200 bg-sky-50 px-2.5 py-0.5 text-sky-800 dark:border-sky-900/60 dark:bg-sky-900/20 dark:text-sky-300">
+                <MapPin className="h-3.5 w-3.5" />
+                {appointment.serviceLocation}
+              </span>
+            )}
+            {typeof appointment.tripMiles === 'number' && appointment.tripMiles > 0 && (
+              <span className="inline-flex items-center gap-1 rounded-full border border-purple-200 bg-purple-50 px-2.5 py-0.5 text-purple-800 dark:border-purple-900/60 dark:bg-purple-900/20 dark:text-purple-300">
+                <Car className="h-3.5 w-3.5" />
+                {appointment.tripMiles} mi
+              </span>
+            )}
+          </div>
+
+          {appointment.notes && (
+            <p className="mt-1.5 rounded-xl border border-dashed border-gray-200 bg-gray-50/70 px-3 py-1 text-sm italic text-gray-500 line-clamp-2 dark:border-gray-700 dark:bg-gray-900/40 dark:text-gray-400">
+              {appointment.notes}
+            </p>
+          )}
+
+          <div className="mt-1.5 flex flex-wrap gap-2 text-xs text-gray-400 dark:text-gray-500">
+            {appointment.customerPhone && (
+              <span className="inline-flex items-center gap-1">
+                <Phone className="h-3 w-3" />
+                {formatPhoneDisplay(appointment.customerPhone)}
+              </span>
+            )}
+            {appointment.customerEmail && (
+              <span className="inline-flex items-center gap-1">
+                <Mail className="h-3 w-3" />
+                {appointment.customerEmail}
+              </span>
+            )}
+          </div>
+        </div>
+
+        <div className="flex shrink-0 flex-wrap items-center gap-1 self-start rounded-xl border border-gray-200 bg-gray-50/80 p-0.5 dark:border-gray-700 dark:bg-gray-900/60">
+          {appointment.status === 'scheduled' && (
+            <button
+              onClick={() => onCheckIn(appointment)}
+              title="Check In (Create RO)"
+              className="rounded-lg p-1.5 text-yellow-600 transition-colors hover:bg-yellow-50 dark:hover:bg-yellow-900/20"
+            >
+              <LogIn className="h-4 w-4" />
+            </button>
+          )}
+          {statusActions.map((action) => (
+            <button
+              key={action.status}
+              onClick={() => onStatusChange(appointment, action.status)}
+              title={action.label}
+              className={`rounded-lg p-1.5 transition-colors ${action.color}`}
+            >
+              <action.icon className="h-4 w-4" />
+            </button>
+          ))}
+          <button
+            onClick={() => onEdit(appointment)}
+            title="Edit"
+            className="rounded-lg p-1.5 text-blue-600 transition-colors hover:bg-blue-50 dark:hover:bg-blue-900/20"
+          >
+            <Edit3 className="h-4 w-4" />
+          </button>
+          <button
+            onClick={() => onDelete(appointment)}
+            title="Delete"
+            className="rounded-lg p-1.5 text-red-600 transition-colors hover:bg-red-50 dark:hover:bg-red-900/20"
+          >
+            <Trash2 className="h-4 w-4" />
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export const AppointmentRow = memo(AppointmentRowImpl);
diff --git a/src/components/appointments/CheckInModal.tsx b/src/components/appointments/CheckInModal.tsx
new file mode 100644
index 0000000..757f45f
--- /dev/null
+++ b/src/components/appointments/CheckInModal.tsx
@@ -0,0 +1,316 @@
+import { memo, useEffect, useState } from 'react';
+import { LogIn, UserCheck, UserX, X } from 'lucide-react';
+import { loadSettings, getRoleLabel, showServiceLocationFields, getCustomerTypeLabels } from '../../lib/settings';
+import { useSettings } from '../../store/settings';
+import { formatPhoneInput } from '../../lib/phone';
+import { generateRONumber } from '../../lib/appointments';
+import type { Appointment, CustomerType } from '../../types';
+import type { CustomerWithVehicles } from '../../pages/Customers';
+
+interface CheckInData {
+  customerName: string;
+  customerPhone: string;
+  customerEmail: string;
+  vehicleInfo: string;
+  vin: string;
+  mileage: string;
+  advisorName: string;
+  roNumber: string;
+  notes: string;
+  estimatedDuration: number;
+  customerType: CustomerType;
+  serviceLocation: string;
+  travelFee: number;
+  tripMiles: number;
+}
+
+interface Props {
+  isOpen: boolean;
+  onClose: () => void;
+  onSubmit: (data: CheckInData) => void;
+  appointment: Appointment | null;
+  customers: CustomerWithVehicles[];
+}
+
+function CheckInModalImpl({
+  isOpen,
+  onClose,
+  onSubmit,
+  appointment,
+  customers,
+}: Props) {
+  const setupSettings = useSettings();
+  const roleLabel = getRoleLabel(setupSettings);
+  const customerTypeLabels = getCustomerTypeLabels(setupSettings);
+  const showLocationFields = showServiceLocationFields(setupSettings);
+  const [customerName, setCustomerName] = useState('');
+  const [customerPhone, setCustomerPhone] = useState('');
+  const [customerEmail, setCustomerEmail] = useState('');
+  const [vehicleInfo, setVehicleInfo] = useState('');
+  const [vin, setVin] = useState('');
+  const [mileage, setMileage] = useState('');
+  const [advisorName, setAdvisorName] = useState(() => loadSettings().serviceAdvisor);
+  const [roNumber, setRoNumber] = useState('');
+  const [concerns, setConcerns] = useState('');
+  const [estimatedHours, setEstimatedHours] = useState(1);
+  const [estimatedMinutes, setEstimatedMinutes] = useState(0);
+  const [customerType, setCustomerType] = useState<CustomerType>('drop-off');
+  const [saving, setSaving] = useState(false);
+  const [serviceLocation, setServiceLocation] = useState('');
+  const [travelFee, setTravelFee] = useState<number>(() => loadSettings().defaultTravelFee || 0);
+  const [tripMiles, setTripMiles] = useState<number>(0);
+
+  useEffect(() => {
+    if (isOpen && appointment) {
+      setCustomerName(appointment.customerName || '');
+      setCustomerPhone(appointment.customerPhone || '');
+      setCustomerEmail(appointment.customerEmail || '');
+      setVehicleInfo(appointment.vehicleInfo || '');
+      setVin(appointment.vin || '');
+      setMileage('');
+
+      const linkedCustomer = appointment.customerId
+        ? customers.find((c) => c.id === appointment.customerId)
+        : null;
+      if (linkedCustomer && linkedCustomer.vehicles.length > 0) {
+        const v = linkedCustomer.vehicles[0];
+        const label = [v.year, v.make, v.model].filter(Boolean).join(' ');
+        if (label && !appointment.vehicleInfo) setVehicleInfo(label);
+        if (v.vin && !appointment.vin) setVin(v.vin);
+        if (v.mileage) setMileage(v.mileage);
+      }
+
+      setAdvisorName(appointment.advisorName || '');
+      setRoNumber(generateRONumber());
+      setConcerns(appointment.notes || '');
+      const totalMinutes = appointment.durationMinutes ?? 60;
+      setEstimatedHours(Math.floor(totalMinutes / 60));
+      setEstimatedMinutes(totalMinutes % 60);
+      setCustomerType('drop-off');
+      setServiceLocation(appointment.serviceLocation || '');
+      setTravelFee(loadSettings().defaultTravelFee || 0);
+      setTripMiles(appointment.tripMiles || 0);
+    }
+  }, [isOpen, appointment]);
+
+  const handleSubmit = async () => {
+    if (!customerName.trim() || !vehicleInfo.trim()) return;
+    setSaving(true);
+    try {
+      onSubmit({
+        customerName: customerName.trim(),
+        customerPhone: customerPhone.trim(),
+        customerEmail: customerEmail.trim(),
+        vehicleInfo: vehicleInfo.trim(),
+        vin: vin.trim(),
+        mileage: mileage.trim(),
+        advisorName: advisorName.trim(),
+        roNumber: roNumber.trim() || generateRONumber(),
+        notes: concerns.trim(),
+        estimatedDuration: estimatedHours * 60 + estimatedMinutes,
+        customerType,
+        serviceLocation: serviceLocation.trim(),
+        travelFee: Number(travelFee) || 0,
+        tripMiles: Number(tripMiles) || 0,
+      });
+      onClose();
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-start justify-center overflow-y-auto bg-black/55 p-4 pt-8 backdrop-blur-sm">
+      <div className="w-full max-w-3xl overflow-hidden rounded-2xl border border-gray-200 bg-white shadow-2xl dark:border-gray-700 dark:bg-gray-900">
+        <div className="flex items-start justify-between border-b border-gray-200 bg-gradient-to-r from-amber-50 via-white to-white px-6 py-5 dark:border-gray-700 dark:from-amber-950/30 dark:via-gray-900 dark:to-gray-900">
+          <div>
+            <p className="text-xs font-semibold uppercase tracking-[0.18em] text-amber-600 dark:text-amber-400">
+              Appointment Check In
+            </p>
+            <h2 className="mt-1 text-xl font-semibold text-gray-900 dark:text-white">
+              Check In &mdash; Create RO
+            </h2>
+            <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
+              Convert appointment into an active repair order
+            </p>
+          </div>
+          <button
+            onClick={onClose}
+            className="rounded-lg p-2 text-gray-400 transition-colors hover:bg-white/70 hover:text-gray-600 dark:hover:bg-gray-800 dark:hover:text-gray-300"
+          >
+            <X className="h-5 w-5" />
+          </button>
+        </div>
+
+        <div className="space-y-6 bg-gray-50/70 px-6 py-6 dark:bg-gray-950/40">
+          <div className="grid grid-cols-1 gap-6 xl:grid-cols-[1.15fr_0.85fr]">
+            <div className="space-y-6">
+              <section className="rounded-2xl border border-gray-200 bg-white p-5 shadow-sm dark:border-gray-700 dark:bg-gray-900">
+                <h3 className="mb-4 text-sm font-semibold text-gray-700 dark:text-gray-300">Customer Information</h3>
+                <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+                  <div className="sm:col-span-2">
+                    <label className="block text-xs font-medium text-gray-500 dark:text-gray-400">Customer Name *</label>
+                    <input value={customerName} onChange={(e) => setCustomerName(e.target.value)} className="mt-1.5 w-full rounded-xl border border-gray-300 bg-white px-3 py-2.5 text-sm shadow-sm transition-colors focus:border-amber-500 focus:outline-none focus:ring-2 focus:ring-amber-500/20 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100" />
+                  </div>
+                  <div>
+                    <label className="block text-xs font-medium text-gray-500 dark:text-gray-400">Phone</label>
+                    <input value={formatPhoneInput(customerPhone)} onChange={(e) => setCustomerPhone(e.target.value.replace(/\D/g, ''))} className="mt-1.5 w-full rounded-xl border border-gray-300 bg-white px-3 py-2.5 text-sm shadow-sm transition-colors focus:border-amber-500 focus:outline-none focus:ring-2 focus:ring-amber-500/20 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100" />
+                  </div>
+                  <div>
+                    <label className="block text-xs font-medium text-gray-500 dark:text-gray-400">Email</label>
+                    <input value={customerEmail} onChange={(e) => setCustomerEmail(e.target.value)} className="mt-1.5 w-full rounded-xl border border-gray-300 bg-white px-3 py-2.5 text-sm shadow-sm transition-colors focus:border-amber-500 focus:outline-none focus:ring-2 focus:ring-amber-500/20 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100" />
+                  </div>
+                </div>
+              </section>
+
+              <section className="rounded-2xl border border-gray-200 bg-white p-5 shadow-sm dark:border-gray-700 dark:bg-gray-900">
+                <h3 className="mb-4 text-sm font-semibold text-gray-700 dark:text-gray-300">Vehicle Information</h3>
+                {appointment?.customerId && (() => {
+                  const c = customers.find((c) => c.id === appointment.customerId);
+                  if (c && c.vehicles.length === 0 && !vehicleInfo) {
+                    return (
+                      <p className="mb-3 rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 text-xs text-amber-700 dark:border-amber-700 dark:bg-amber-900/20 dark:text-amber-400">
+                        This customer has no vehicles on file. Please add vehicle information below to proceed with check-in.
+                      </p>
+                    );
+                  }
+                  return null;
+                })()}
+                <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+                  <div className="sm:col-span-2">
+                    <label className="block text-xs font-medium text-gray-500 dark:text-gray-400">Vehicle Info *</label>
+                    <input value={vehicleInfo} onChange={(e) => setVehicleInfo(e.target.value)} placeholder="2020 Honda Civic" className="mt-1.5 w-full rounded-xl border border-gray-300 bg-white px-3 py-2.5 text-sm shadow-sm transition-colors focus:border-amber-500 focus:outline-none focus:ring-2 focus:ring-amber-500/20 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100" />
+                  </div>
+                  <div>
+                    <label className="block text-xs font-medium text-gray-500 dark:text-gray-400">VIN</label>
+                    <input value={vin} onChange={(e) => setVin(e.target.value)} placeholder="1HGBH41JXMN109186" className="mt-1.5 w-full rounded-xl border border-gray-300 bg-white px-3 py-2.5 text-sm shadow-sm transition-colors focus:border-amber-500 focus:outline-none focus:ring-2 focus:ring-amber-500/20 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100" />
+                  </div>
+                  <div>
+                    <label className="block text-xs font-medium text-gray-500 dark:text-gray-400">Mileage / Odometer</label>
+                    <input value={mileage} onChange={(e) => setMileage(e.target.value)} placeholder="45,000" className="mt-1.5 w-full rounded-xl border border-gray-300 bg-white px-3 py-2.5 text-sm shadow-sm transition-colors focus:border-amber-500 focus:outline-none focus:ring-2 focus:ring-amber-500/20 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100" />
+                  </div>
+                </div>
+              </section>
+            </div>
+
+            <div className="space-y-6">
+              {showLocationFields && (
+                <section className="rounded-2xl border border-gray-200 bg-white p-5 shadow-sm dark:border-gray-700 dark:bg-gray-900">
+                  <h3 className="mb-4 text-sm font-semibold text-gray-700 dark:text-gray-300">Service Location</h3>
+                  <div className="grid grid-cols-1 gap-4">
+                    <div>
+                      <label className="block text-xs font-medium text-gray-500 dark:text-gray-400">Job Address or Location</label>
+                      <input value={serviceLocation} onChange={(e) => setServiceLocation(e.target.value)} placeholder="123 Oak St, Knoxville, TN" className="mt-1.5 w-full rounded-xl border border-gray-300 bg-white px-3 py-2.5 text-sm shadow-sm transition-colors focus:border-amber-500 focus:outline-none focus:ring-2 focus:ring-amber-500/20 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100" />
+                    </div>
+                    <div>
+                      <label className="block text-xs font-medium text-gray-500 dark:text-gray-400">Travel / Diagnostic Fee</label>
+                      <div className="mt-1.5 flex items-center gap-2">
+                        <span className="text-sm text-gray-400">$</span>
+                        <input type="number" min="0" step="0.01" value={travelFee || ''} onChange={(e) => setTravelFee(parseFloat(e.target.value) || 0)} placeholder={(setupSettings.defaultTravelFee || 0).toFixed(2)} className="w-full rounded-xl border border-gray-300 bg-white px-3 py-2.5 text-sm shadow-sm transition-colors focus:border-amber-500 focus:outline-none focus:ring-2 focus:ring-amber-500/20 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100" />
+                      </div>
+                    </div>
+                    <div>
+                      <label className="block text-xs font-medium text-gray-500 dark:text-gray-400">Trip Miles</label>
+                      <div className="mt-1.5 flex items-center gap-2">
+                        <span className="text-sm text-gray-400">mi</span>
+                        <input type="number" min="0" step="0.1" value={tripMiles || ''} onChange={(e) => setTripMiles(parseFloat(e.target.value) || 0)} placeholder="0" className="w-full rounded-xl border border-gray-300 bg-white px-3 py-2.5 text-sm shadow-sm transition-colors focus:border-amber-500 focus:outline-none focus:ring-2 focus:ring-amber-500/20 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100" />
+                      </div>
+                    </div>
+                  </div>
+                </section>
+              )}
+              <section className="rounded-2xl border border-gray-200 bg-white p-5 shadow-sm dark:border-gray-700 dark:bg-gray-900">
+                <h3 className="mb-4 text-sm font-semibold text-gray-700 dark:text-gray-300">Service Details</h3>
+                <div className="grid grid-cols-1 gap-4">
+                  <div>
+                    <label className="block text-xs font-medium text-gray-500 dark:text-gray-400">{roleLabel}</label>
+                    {(() => {
+                      const defaultAdv = loadSettings().serviceAdvisor;
+                      const isDefault = defaultAdv && advisorName === defaultAdv;
+                      return (
+                        <input
+                          value={advisorName}
+                          onChange={(e) => setAdvisorName(e.target.value)}
+                          placeholder={defaultAdv || `${roleLabel} name`}
+                          className={`mt-1.5 w-full rounded-xl border px-3 py-2.5 text-sm shadow-sm transition-colors focus:outline-none focus:ring-2 focus:ring-amber-500/20 ${
+                            isDefault
+                              ? 'border-gray-200 bg-gray-50 text-gray-400 focus:border-amber-500 dark:border-gray-700 dark:bg-gray-800/50 dark:text-gray-500'
+                              : 'border-gray-300 bg-white text-gray-900 focus:border-amber-500 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100'
+                          }`}
+                        />
+                      );
+                    })()}
+                  </div>
+                  <div>
+                    <label className="block text-xs font-medium text-gray-500 dark:text-gray-400">RO Number</label>
+                    <input value={roNumber} onChange={(e) => setRoNumber(e.target.value)} placeholder="RO-250629-0001" className="mt-1.5 w-full rounded-xl border border-gray-300 bg-white px-3 py-2.5 text-sm font-mono shadow-sm transition-colors focus:border-amber-500 focus:outline-none focus:ring-2 focus:ring-amber-500/20 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100" />
+                  </div>
+                  <div>
+                    <label className="block text-xs font-medium text-gray-500 dark:text-gray-400">Estimated Duration</label>
+                    <div className="mt-1.5 grid grid-cols-2 gap-3">
+                      <div>
+                        <input type="number" min="0" value={estimatedHours} onChange={(e) => setEstimatedHours(parseInt(e.target.value) || 0)} className="w-full rounded-xl border border-gray-300 bg-white px-3 py-2.5 text-sm shadow-sm transition-colors focus:border-amber-500 focus:outline-none focus:ring-2 focus:ring-amber-500/20 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100" />
+                        <p className="mt-1 text-xs text-gray-400">Hours</p>
+                      </div>
+                      <div>
+                        <input type="number" min="0" max="59" step="5" value={estimatedMinutes} onChange={(e) => setEstimatedMinutes(Math.min(parseInt(e.target.value) || 0, 59))} className="w-full rounded-xl border border-gray-300 bg-white px-3 py-2.5 text-sm shadow-sm transition-colors focus:border-amber-500 focus:outline-none focus:ring-2 focus:ring-amber-500/20 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100" />
+                        <p className="mt-1 text-xs text-gray-400">Minutes</p>
+                      </div>
+                    </div>
+                  </div>
+                  <div>
+                    <label className="block text-xs font-medium text-gray-500 dark:text-gray-400">{customerTypeLabels.groupLabel}</label>
+                    <div className="mt-1.5 grid grid-cols-1 gap-3 sm:grid-cols-2">
+                      <label className="flex cursor-pointer items-center gap-2 rounded-xl border border-gray-300 bg-white px-4 py-3 text-sm shadow-sm transition-colors hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:hover:bg-gray-700">
+                        <input type="radio" name="ci-customerType" value="drop-off" checked={customerType === 'drop-off'} onChange={() => setCustomerType('drop-off')} className="text-amber-600 focus:ring-amber-500" />
+                        <UserX className="h-4 w-4 text-gray-400" />
+                        {customerTypeLabels.primary}
+                      </label>
+                      <label className="flex cursor-pointer items-center gap-2 rounded-xl border border-gray-300 bg-white px-4 py-3 text-sm shadow-sm transition-colors hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:hover:bg-gray-700">
+                        <input type="radio" name="ci-customerType" value="waiter" checked={customerType === 'waiter'} onChange={() => setCustomerType('waiter')} className="text-amber-600 focus:ring-amber-500" />
+                        <UserCheck className="h-4 w-4 text-amber-500" />
+                        {customerTypeLabels.secondary}
+                      </label>
+                    </div>
+                  </div>
+                </div>
+              </section>
+
+              <section className="rounded-2xl border border-gray-200 bg-white p-5 shadow-sm dark:border-gray-700 dark:bg-gray-900">
+                <label className="block text-sm font-semibold text-gray-700 dark:text-gray-300">Customer Concerns / Notes</label>
+                <textarea value={concerns} onChange={(e) => setConcerns(e.target.value)} rows={7} placeholder="Describe the issue or reason for service..." className="mt-3 w-full rounded-xl border border-gray-300 bg-white px-3 py-2.5 text-sm shadow-sm transition-colors focus:border-amber-500 focus:outline-none focus:ring-2 focus:ring-amber-500/20 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100" />
+                {appointment?.serviceType && <p className="mt-2 text-xs text-gray-400">Service type: {appointment.serviceType}</p>}
+              </section>
+            </div>
+          </div>
+        </div>
+
+        <div className="flex items-center justify-between border-t border-gray-200 bg-white px-6 py-4 dark:border-gray-700 dark:bg-gray-900">
+          <p className="text-sm text-gray-500 dark:text-gray-400">
+            Review the appointment details before creating the repair order.
+          </p>
+          <div className="flex items-center gap-3">
+            <button
+              onClick={onClose}
+              className="rounded-xl border border-gray-300 bg-white px-4 py-2.5 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
+            >
+              Cancel
+            </button>
+            <button
+              onClick={handleSubmit}
+              disabled={saving || !customerName.trim() || !vehicleInfo.trim()}
+              className="inline-flex items-center gap-2 rounded-xl bg-gradient-to-r from-amber-600 to-yellow-500 px-5 py-2.5 text-sm font-medium text-white shadow-sm transition-all hover:from-amber-700 hover:to-yellow-600 disabled:cursor-not-allowed disabled:opacity-50"
+            >
+              <LogIn className="h-4 w-4" />
+              {saving ? 'Checking In...' : 'Check In & Create RO'}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export const CheckInModal = memo(CheckInModalImpl);
diff --git a/src/components/appointments/DateGroup.tsx b/src/components/appointments/DateGroup.tsx
new file mode 100644
index 0000000..f85f900
--- /dev/null
+++ b/src/components/appointments/DateGroup.tsx
@@ -0,0 +1,98 @@
+import { memo, useState } from 'react';
+import { ChevronDown, ChevronRight, CalendarDays } from 'lucide-react';
+import type { Appointment } from '../../types';
+import { todayISO, formatDateDisplay } from '../../lib/appointments';
+import { AppointmentRow } from './AppointmentRow';
+
+interface Props {
+  date: string;
+  appointments: Appointment[];
+  onEdit: (appt: Appointment) => void;
+  onDelete: (appt: Appointment) => void;
+  onStatusChange: (appt: Appointment, status: Appointment['status']) => void;
+  onCheckIn: (appt: Appointment) => void;
+  defaultExpanded: boolean;
+}
+
+function DateGroupImpl({
+  date,
+  appointments,
+  onEdit,
+  onDelete,
+  onStatusChange,
+  onCheckIn,
+  defaultExpanded,
+}: Props) {
+  const [expanded, setExpanded] = useState(defaultExpanded);
+
+  const isToday = date === todayISO();
+  const dateLabel = isToday
+    ? `Today \u2014 ${formatDateDisplay(date)}`
+    : formatDateDisplay(date);
+  const checkedInCount = appointments.filter((appt) => appt.status === 'checked_in').length;
+  const completedCount = appointments.filter((appt) => appt.status === 'completed').length;
+  const noShowCount = appointments.filter((appt) => appt.status === 'no_show').length;
+
+  return (
+    <div className="overflow-hidden rounded-2xl border border-gray-200 bg-white shadow-sm shadow-gray-200/60 dark:border-gray-700 dark:bg-gray-800/60 dark:shadow-black/10">
+      <button
+        onClick={() => setExpanded((p) => !p)}
+        className="flex w-full items-center justify-between bg-gradient-to-r from-white via-emerald-50/60 to-white px-5 py-4 text-left transition-colors hover:from-emerald-50 hover:via-emerald-50 hover:to-white dark:from-gray-800 dark:via-emerald-950/20 dark:to-gray-800 dark:hover:via-emerald-950/30"
+      >
+        <div className="flex items-center gap-3">
+          {expanded ? (
+            <ChevronDown className="h-4 w-4 text-gray-400" />
+          ) : (
+            <ChevronRight className="h-4 w-4 text-gray-400" />
+          )}
+          <CalendarDays className="h-4 w-4 text-emerald-500 dark:text-emerald-400" />
+          <span className="text-sm font-semibold tracking-tight text-gray-900 dark:text-white">
+            {dateLabel}
+          </span>
+        </div>
+        <span className="rounded-full border border-emerald-200 bg-white/80 px-2.5 py-1 text-xs font-medium text-emerald-700 shadow-sm dark:border-emerald-900/50 dark:bg-gray-800 dark:text-emerald-300">
+          {appointments.length} {appointments.length === 1 ? 'appointment' : 'appointments'}
+        </span>
+      </button>
+
+      {expanded && (
+        <div className="border-t border-gray-200 bg-white px-5 py-3 dark:border-gray-700 dark:bg-gray-800/80">
+          <div className="flex flex-wrap gap-2 text-xs font-medium">
+            <span className="rounded-full border border-gray-200 bg-gray-50 px-2.5 py-1 text-gray-600 dark:border-gray-700 dark:bg-gray-900/60 dark:text-gray-300">
+              Total: {appointments.length}
+            </span>
+            {checkedInCount > 0 && (
+              <span className="rounded-full border border-yellow-200 bg-yellow-50 px-2.5 py-1 text-yellow-700 dark:border-yellow-900/40 dark:bg-yellow-900/20 dark:text-yellow-300">
+                {checkedInCount} checked in
+              </span>
+            )}
+            {completedCount > 0 && (
+              <span className="rounded-full border border-green-200 bg-green-50 px-2.5 py-1 text-green-700 dark:border-green-900/40 dark:bg-green-900/20 dark:text-green-300">
+                {completedCount} completed
+              </span>
+            )}
+            {noShowCount > 0 && (
+              <span className="rounded-full border border-gray-200 bg-gray-50 px-2.5 py-1 text-gray-600 dark:border-gray-700 dark:bg-gray-900/60 dark:text-gray-300">
+                {noShowCount} no show
+              </span>
+            )}
+          </div>
+          <div className="mt-4 space-y-3">
+            {appointments.map((appt) => (
+              <AppointmentRow
+                key={appt.id}
+                appointment={appt}
+                onEdit={onEdit}
+                onDelete={onDelete}
+                onStatusChange={onStatusChange}
+                onCheckIn={onCheckIn}
+              />
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export const DateGroup = memo(DateGroupImpl);
diff --git a/src/components/appointments/DeleteDialog.tsx b/src/components/appointments/DeleteDialog.tsx
new file mode 100644
index 0000000..af3e31e
--- /dev/null
+++ b/src/components/appointments/DeleteDialog.tsx
@@ -0,0 +1,104 @@
+import { memo, useState } from 'react';
+import { AlertTriangle, Trash2 } from 'lucide-react';
+import type { Appointment } from '../../types';
+import { formatDateDisplay, formatTimeShort } from '../../lib/appointments';
+
+interface Props {
+  isOpen: boolean;
+  onClose: () => void;
+  onConfirm: () => Promise<void>;
+  appointment: Appointment | null;
+}
+
+function DeleteDialogImpl({
+  isOpen,
+  onClose,
+  onConfirm,
+  appointment,
+}: Props) {
+  const [deleting, setDeleting] = useState(false);
+
+  if (!isOpen || !appointment) return null;
+
+  const handleDelete = async () => {
+    setDeleting(true);
+    try {
+      await onConfirm();
+      onClose();
+    } catch {
+    } finally {
+      setDeleting(false);
+    }
+  };
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+      <div className="absolute inset-0 bg-black/50 backdrop-blur-sm" onClick={onClose} />
+      <div className="relative z-10 w-full max-w-md overflow-hidden rounded-2xl border border-red-200 bg-white shadow-2xl dark:border-red-900/40 dark:bg-gray-900">
+        <div className="border-b border-red-100 bg-gradient-to-r from-red-50 via-white to-white px-6 py-5 dark:border-red-900/30 dark:from-red-950/20 dark:via-gray-900 dark:to-gray-900">
+          <div className="flex items-start gap-4">
+            <div className="flex h-11 w-11 items-center justify-center rounded-2xl bg-red-100 dark:bg-red-900/30">
+              <AlertTriangle className="h-5 w-5 text-red-600 dark:text-red-400" />
+            </div>
+            <div>
+              <p className="text-xs font-semibold uppercase tracking-[0.18em] text-red-600 dark:text-red-400">Destructive Action</p>
+              <h3 className="mt-1 text-lg font-semibold tracking-tight text-gray-900 dark:text-white">Delete Appointment</h3>
+              <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
+                Remove this appointment record from the schedule. This action cannot be undone.
+              </p>
+            </div>
+          </div>
+        </div>
+
+        <div className="px-6 py-5">
+          <div className="rounded-2xl border border-gray-200 bg-gray-50/80 p-4 dark:border-gray-700 dark:bg-gray-800/50">
+            <p className="text-xs font-medium uppercase tracking-[0.14em] text-gray-400 dark:text-gray-500">Appointment</p>
+            <p className="mt-1 text-base font-semibold text-gray-900 dark:text-white">
+              {appointment.customerName || 'Unknown Customer'}
+            </p>
+            <div className="mt-2 flex flex-wrap gap-2 text-sm text-gray-500 dark:text-gray-400">
+              {appointment.date && <span>{formatDateDisplay(appointment.date)}</span>}
+              {appointment.time && <span>{formatTimeShort(appointment.time)}</span>}
+              {appointment.serviceType && <span>{appointment.serviceType}</span>}
+            </div>
+          </div>
+
+          <div className="mt-5 flex items-center justify-between gap-3 border-t border-gray-200 pt-4 dark:border-gray-700">
+            <p className="text-sm text-gray-500 dark:text-gray-400">This permanently removes the appointment from your schedule.</p>
+            <div className="flex items-center gap-3">
+              <button
+                onClick={onClose}
+                disabled={deleting}
+                className="rounded-xl border border-gray-300 px-4 py-2.5 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-700"
+              >
+                Cancel
+              </button>
+              <button
+                onClick={handleDelete}
+                disabled={deleting}
+                className="inline-flex items-center gap-2 rounded-xl bg-gradient-to-r from-red-600 to-red-500 px-4 py-2.5 text-sm font-medium text-white shadow-sm transition-colors hover:from-red-700 hover:to-red-600 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:focus:ring-offset-gray-800"
+              >
+                {deleting ? (
+                  <>
+                    <svg className="h-4 w-4 animate-spin" viewBox="0 0 24 24" fill="none">
+                      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+                      <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z" />
+                    </svg>
+                    Deleting...
+                  </>
+                ) : (
+                  <>
+                    <Trash2 className="h-4 w-4" />
+                    Delete
+                  </>
+                )}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export const DeleteDialog = memo(DeleteDialogImpl);
diff --git a/src/components/appointments/EmptyStates.tsx b/src/components/appointments/EmptyStates.tsx
new file mode 100644
index 0000000..f054535
--- /dev/null
+++ b/src/components/appointments/EmptyStates.tsx
@@ -0,0 +1,121 @@
+import { CalendarDays, Calendar, AlertTriangle, RefreshCw, Plus } from 'lucide-react';
+
+function formatDateDisplay(iso: string): string {
+  if (!iso) return '\u2014';
+  const d = new Date(iso + (iso.includes('T') ? '' : 'T00:00:00'));
+  return new Intl.DateTimeFormat('en-US', {
+    weekday: 'long',
+    month: 'long',
+    day: 'numeric',
+    year: 'numeric',
+  }).format(d);
+}
+
+export function EmptyDayState({ date, onCreate }: { date: string; onCreate: () => void }) {
+  return (
+    <div className="rounded-xl border border-dashed border-gray-300 bg-white/50 p-8 text-center dark:border-gray-600 dark:bg-gray-800/30">
+      <CalendarDays className="mx-auto mb-3 h-8 w-8 text-gray-300 dark:text-gray-600" />
+      <p className="text-sm text-gray-500 dark:text-gray-400">
+        No appointments are scheduled for{' '}
+        <span className="font-medium text-gray-700 dark:text-gray-300">{formatDateDisplay(date)}</span>
+      </p>
+      <button
+        onClick={onCreate}
+        className="mt-3 inline-flex items-center gap-1.5 rounded-lg border border-gray-300 bg-white px-3 py-1.5 text-xs font-medium text-gray-700 shadow-sm transition-colors hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
+      >
+        <Plus className="h-3.5 w-3.5" />
+        Add Appointment
+      </button>
+    </div>
+  );
+}
+
+export function EmptyState({ onCreate }: { onCreate: () => void }) {
+  return (
+    <div className="overflow-hidden rounded-3xl border border-gray-200 bg-white shadow-sm shadow-gray-200/60 dark:border-gray-700 dark:bg-gray-900 dark:shadow-black/10">
+      <div className="bg-gradient-to-r from-emerald-50 via-white to-purple-50 px-8 py-10 text-center dark:from-emerald-950/20 dark:via-gray-900 dark:to-purple-950/20">
+        <div className="mx-auto mb-6 flex h-24 w-24 items-center justify-center rounded-2xl bg-white shadow-sm dark:bg-gray-800">
+          <Calendar className="h-12 w-12 text-emerald-500 dark:text-emerald-400" />
+        </div>
+        <h3 className="mb-2 text-xl font-semibold tracking-tight text-gray-900 dark:text-white">
+          No appointments scheduled
+        </h3>
+        <p className="mx-auto mb-8 max-w-sm text-sm text-gray-500 dark:text-gray-400">
+          Create appointments to manage upcoming visits, prepare vehicle write-ups, and keep the day organized before work begins.
+        </p>
+        <button
+          onClick={onCreate}
+          className="inline-flex items-center gap-2 rounded-xl bg-gradient-to-r from-emerald-600 to-emerald-500 px-5 py-2.5 text-sm font-medium text-white shadow-sm transition-all hover:from-emerald-700 hover:to-emerald-600 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900"
+        >
+          <Plus className="h-4 w-4" />
+          Create Appointment
+        </button>
+      </div>
+    </div>
+  );
+}
+
+export function ErrorState({ message, onRetry }: { message: string; onRetry: () => void }) {
+  return (
+    <div className="overflow-hidden rounded-3xl border border-red-200 bg-white shadow-sm shadow-red-100/60 dark:border-red-900/50 dark:bg-gray-900 dark:shadow-black/10">
+      <div className="px-8 py-10 text-center">
+        <div className="mx-auto mb-6 flex h-24 w-24 items-center justify-center rounded-2xl bg-red-50 dark:bg-red-900/20">
+          <AlertTriangle className="h-12 w-12 text-red-500 dark:text-red-400" />
+        </div>
+        <h3 className="mb-2 text-xl font-semibold tracking-tight text-gray-900 dark:text-white">
+          Unable to load appointments
+        </h3>
+        <p className="mx-auto mb-8 max-w-sm text-sm text-gray-500 dark:text-gray-400">{message}</p>
+        <button
+          onClick={onRetry}
+          className="inline-flex items-center gap-2 rounded-xl border border-gray-300 bg-white px-5 py-2.5 text-sm font-medium text-gray-700 shadow-sm transition-colors hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 dark:focus:ring-offset-gray-900"
+        >
+          <RefreshCw className="h-4 w-4" />
+          Retry
+        </button>
+      </div>
+    </div>
+  );
+}
+
+export function AppointmentsSkeleton() {
+  return (
+    <div className="animate-pulse space-y-4">
+      {Array.from({ length: 3 }).map((_, i) => (
+        <div
+          key={i}
+          className="rounded-xl border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800"
+        >
+          <div className="flex items-center justify-between px-5 py-3">
+            <div className="flex items-center gap-3">
+              <div className="h-4 w-4 rounded bg-gray-200 dark:bg-gray-700" />
+              <div className="h-4 w-48 rounded bg-gray-200 dark:bg-gray-700" />
+            </div>
+            <div className="h-5 w-20 rounded-full bg-gray-200 dark:bg-gray-700" />
+          </div>
+          <div className="border-t border-gray-200 px-5 py-4 dark:border-gray-700">
+            <div className="space-y-3">
+              {Array.from({ length: 2 }).map((_, j) => (
+                <div
+                  key={j}
+                  className="rounded-lg border border-gray-200 p-4 dark:border-gray-700"
+                >
+                  <div className="mb-3 flex items-center gap-2">
+                    <div className="h-4 w-4 rounded bg-gray-200 dark:bg-gray-700" />
+                    <div className="h-4 w-24 rounded bg-gray-200 dark:bg-gray-700" />
+                    <div className="h-5 w-20 rounded-full bg-gray-200 dark:bg-gray-700" />
+                  </div>
+                  <div className="h-5 w-40 rounded bg-gray-200 dark:bg-gray-700" />
+                  <div className="mt-2 flex gap-4">
+                    <div className="h-4 w-32 rounded bg-gray-200 dark:bg-gray-700" />
+                    <div className="h-4 w-24 rounded bg-gray-200 dark:bg-gray-700" />
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/src/components/appointments/ScanScreenshotModal.tsx b/src/components/appointments/ScanScreenshotModal.tsx
new file mode 100644
index 0000000..197791c
--- /dev/null
+++ b/src/components/appointments/ScanScreenshotModal.tsx
@@ -0,0 +1,655 @@
+import { memo, useEffect, useRef, useState } from 'react';
+import { Sparkles, Upload, X, Check } from 'lucide-react';
+import { pb } from '../../lib/pocketbase';
+import { formatPhoneDisplay, formatPhoneInput } from '../../lib/phone';
+import { formatDateDisplay, normalizeTimeToHHMM, todayISO } from '../../lib/appointments';
+import { logError } from '../../lib/userMessages';
+import { useToast } from '../ui/Toast';
+import type { CustomerWithVehicles } from '../../pages/Customers';
+
+export interface ScannedAppt {
+  appointmentDate: string;
+  appointmentTime: string;
+  durationMinutes: number;
+  customerName: string;
+  customerPhone: string;
+  vin: string;
+  vehicleInfo: string;
+  serviceType: string;
+  matchedCustomerId?: string;
+  matchedCustomerName?: string;
+}
+
+type ScanStep = 'idle' | 'uploading' | 'ocr' | 'ai_extracting' | 'review' | 'importing';
+
+interface Props {
+  isOpen: boolean;
+  onClose: () => void;
+  onImport: (appts: ScannedAppt[]) => Promise<void>;
+  customers: CustomerWithVehicles[];
+}
+
+function ScanScreenshotModalImpl({
+  isOpen,
+  onClose,
+  onImport,
+  customers,
+}: Props) {
+  const { showToast } = useToast();
+  const [step, setStep] = useState<ScanStep>('idle');
+  const [progress, setProgress] = useState<string>('');
+  const [progressPct, setProgressPct] = useState(0);
+  const [imageFile, setImageFile] = useState<File | null>(null);
+  const [imagePreview, setImagePreview] = useState<string | null>(null);
+  const [editAppointments, setEditAppointments] = useState<ScannedAppt[]>([]);
+  const [selectedDate, setSelectedDate] = useState(todayISO());
+  const selectedDateRef = useRef(selectedDate);
+  selectedDateRef.current = selectedDate;
+  const [error, setError] = useState<string | null>(null);
+  const dropRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (isOpen) {
+      setStep('idle');
+      setProgress('');
+      setProgressPct(0);
+      setImageFile(null);
+      setImagePreview(null);
+      setEditAppointments([]);
+      setSelectedDate(todayISO());
+      setError(null);
+    }
+  }, [isOpen]);
+
+  const handleFile = (file: File | null) => {
+    if (!file) return;
+    if (!file.type.startsWith('image/')) {
+      setError('Please upload an image file (PNG, JPG, etc.)');
+      return;
+    }
+    setError(null);
+    setImageFile(file);
+    const reader = new FileReader();
+    reader.onload = (e) => setImagePreview(e.target!.result as string);
+    reader.readAsDataURL(file);
+  };
+
+  const preprocessImage = (file: File): Promise<Blob> => {
+    return new Promise((resolve, reject) => {
+      const img = new Image();
+      img.onload = () => {
+        const canvas = document.createElement('canvas');
+        const scale = 2.5;
+        canvas.width = Math.round(img.width * scale);
+        canvas.height = Math.round(img.height * scale);
+        const ctx = canvas.getContext('2d')!;
+        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+        const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+        const data = imageData.data;
+        const contrast = 1.15;
+        const factor = (259 * (contrast * 255 + 255)) / (255 * (259 - contrast * 255));
+        for (let i = 0; i < data.length; i += 4) {
+          data[i] = Math.min(255, Math.max(0, factor * (data[i] - 128) + 128));
+          data[i + 1] = Math.min(255, Math.max(0, factor * (data[i + 1] - 128) + 128));
+          data[i + 2] = Math.min(255, Math.max(0, factor * (data[i + 2] - 128) + 128));
+        }
+        ctx.putImageData(imageData, 0, 0);
+        canvas.toBlob((blob) => {
+          if (blob) resolve(blob);
+          else reject(new Error('Failed to process image'));
+        }, 'image/png', 0.95);
+      };
+      img.onerror = () => reject(new Error('Failed to load image'));
+      img.src = URL.createObjectURL(file);
+    });
+  };
+
+  const handleExtract = async () => {
+    if (!imageFile) return;
+    setError(null);
+
+    try {
+      setStep('ocr');
+      setProgress('Initializing OCR engine...');
+
+      setProgress('Preprocessing image...');
+      const processedBlob = await preprocessImage(imageFile);
+
+      const { default: Tesseract } = await import('tesseract.js');
+      setProgress('Running OCR...');
+      const result = await Tesseract.recognize(processedBlob, 'eng', {
+        logger: (m: any) => {
+          if (m.status === 'recognizing text') {
+            const pct = Math.round((m.progress || 0) * 100);
+            setProgressPct(pct);
+            setProgress(`OCR: ${pct}%`);
+          }
+        },
+      });
+
+      const ocrText = result.data.text;
+      if (!ocrText.trim()) {
+        setError('No text could be extracted from the image. Try a clearer screenshot.');
+        setStep('idle');
+        return;
+      }
+
+      setStep('ai_extracting');
+      setProgress('Extracting with AI...');
+      setProgressPct(0);
+
+      const aiResponse = await fetch('/deepseek/v1/chat/completions', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          model: 'deepseek-v4-flash',
+          messages: [
+            {
+              role: 'system',
+              content: `You are a high-precision appointment extraction engine for an automotive repair shop.
+
+Return ONLY valid JSON.
+Do not use markdown.
+Do not wrap the JSON in code fences.
+Do not add commentary outside the JSON.
+
+RULES:
+- The appointment date is supplied by the application. Do NOT extract, infer, or return appointment dates from OCR text.
+- Extract every real appointment visible in the OCR text.
+- Do not invent appointments.
+- Do not duplicate the same appointment.
+- If a field is missing or uncertain, use an empty string for text fields.
+- If duration is missing, use 60.
+- Keep one object per appointment.
+
+FIELD RULES:
+- appointmentTime: convert to 24-hour HH:MM format. Fix obvious OCR time damage when clear.
+- durationMinutes: convert hours to minutes. Examples: "0.5 hrs"=30, "1.2 hrs"=72, "1.5 hr"=90.
+- customerName: extract the person's full name only.
+- customerPhone: return only the best 10-digit phone number.
+- vin: extract a 17-character VIN only when reasonably recoverable. Fix obvious OCR substitutions such as O->0, Q->0, I->1, L->1, S->5, B->8.
+- vehicleInfo: format as "YEAR MAKE MODEL" when possible.
+- serviceType: extract the appointment purpose or requested work.
+
+QUALITY RULES:
+- Prefer accuracy over completeness.
+- Use empty strings instead of guessing.
+- Output must be parseable JSON matching the schema exactly.
+
+JSON SCHEMA:
+{"appointments":[{"appointmentTime":"HH:MM","durationMinutes":60,"customerName":"","customerPhone":"","vin":"","vehicleInfo":"","serviceType":""}]}`,
+            },
+            {
+              role: 'user',
+              content: `Extract all appointments from this OCR text. Fix obvious OCR-garbled times like "ESCAM" to "8:00AM" when clear:
+
+${ocrText}`,
+            },
+          ],
+          temperature: 0,
+          thinking: { type: 'disabled' },
+          max_tokens: 2000,
+        }),
+      });
+
+      if (!aiResponse.ok) {
+        const errText = await aiResponse.text();
+        throw new Error(`AI extraction failed: ${aiResponse.status} ${errText}`);
+      }
+
+      const aiData = await aiResponse.json();
+      const content = aiData.choices?.[0]?.message?.content || '';
+
+      let extracted: ScannedAppt[] = [];
+      try {
+        const parsed = JSON.parse(content);
+        extracted = parsed.appointments || parsed;
+      } catch {
+        const jsonMatch = content.match(/`(?:json)?\s*([\s\S]*?)`/);
+        if (jsonMatch) {
+          const parsed = JSON.parse(jsonMatch[1]);
+          extracted = parsed.appointments || parsed;
+        } else {
+          const arrayMatch = content.match(/\[\s*\{.*\}\s*\]/s);
+          const objMatch = content.match(/\{\s*"appointments"\s*:.*\}/s);
+          if (objMatch) {
+            const parsed = JSON.parse(objMatch[0]);
+            extracted = parsed.appointments || parsed;
+          } else if (arrayMatch) {
+            extracted = JSON.parse(arrayMatch[0]);
+          } else {
+            throw new Error('Could not parse AI response into appointments');
+          }
+        }
+      }
+
+      if (!Array.isArray(extracted) || extracted.length === 0) {
+        throw new Error('No appointments were detected in the screenshot');
+      }
+
+      extracted = extracted.map((a) => ({
+        appointmentDate: selectedDateRef.current,
+        appointmentTime: normalizeTimeToHHMM(a.appointmentTime || ''),
+        durationMinutes: Number(a.durationMinutes) || 60,
+        customerName: a.customerName || '',
+        customerPhone: a.customerPhone || '',
+        vin: (a.vin || '').toUpperCase(),
+        vehicleInfo: a.vehicleInfo || '',
+        serviceType: a.serviceType || '',
+      }));
+
+      const matched = extracted.map((a) => {
+        const phoneDigits = (a.customerPhone || '').replace(/\D/g, '');
+        let match: CustomerWithVehicles | undefined;
+        if (phoneDigits.length >= 7) {
+          match = customers.find((c) => (c.phone || '').replace(/\D/g, '') === phoneDigits);
+        }
+        if (!match && a.customerName.trim()) {
+          const nameLower = a.customerName.trim().toLowerCase();
+          match = customers.find((c) => c.name.toLowerCase() === nameLower);
+        }
+        return {
+          ...a,
+          matchedCustomerId: match?.id,
+          matchedCustomerName: match?.name,
+        } as ScannedAppt;
+      });
+
+      setEditAppointments(JSON.parse(JSON.stringify(matched)));
+      setStep('review');
+      setProgress('');
+    } catch (err: unknown) {
+      logError('Failed to extract appointment data', err);
+      setError('Could not read that screenshot. Please try a clearer image.');
+      setStep('idle');
+    }
+  };
+
+  const updateEditAppt = (index: number, field: keyof ScannedAppt, value: string | number) => {
+    setEditAppointments((prev) => {
+      const updated = [...prev];
+      updated[index] = { ...updated[index], [field]: value };
+      return updated;
+    });
+  };
+
+  const handleImportAll = async () => {
+    setStep('importing');
+    setProgress('Importing appointments...');
+    setError(null);
+    try {
+      await onImport(editAppointments);
+      showToast(`Successfully imported ${editAppointments.length} appointment(s)`, 'success');
+      onClose();
+    } catch (err: unknown) {
+      logError('Failed to import appointments', err);
+      setError('Appointments could not be imported. Please try again.');
+      setStep('review');
+    }
+  };
+
+  const handleDrop = (e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    const file = e.dataTransfer.files?.[0] || null;
+    handleFile(file);
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+      <div className="absolute inset-0 bg-black/50 backdrop-blur-sm" onClick={onClose} />
+
+      <div className="relative z-10 flex max-h-[90vh] w-full max-w-3xl flex-col overflow-hidden rounded-2xl border border-gray-200 bg-white shadow-2xl dark:border-gray-700 dark:bg-gray-900">
+        <div className="flex items-start justify-between border-b border-gray-200 bg-gradient-to-r from-purple-50 via-white to-white px-6 py-5 dark:border-gray-700 dark:from-purple-950/20 dark:via-gray-900 dark:to-gray-900">
+          <div className="flex items-start gap-3">
+            <div className="mt-0.5 rounded-xl bg-purple-100 p-2.5 dark:bg-purple-900/30">
+              <Sparkles className="h-5 w-5 text-purple-500" />
+            </div>
+            <div>
+              <p className="text-xs font-semibold uppercase tracking-[0.18em] text-purple-600 dark:text-purple-400">AI Import</p>
+              <h2 className="mt-1 text-xl font-semibold tracking-tight text-gray-900 dark:text-white">Scan Screenshot</h2>
+              <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">Upload a schedule screenshot, review the extracted appointments, and import them cleanly.</p>
+            </div>
+          </div>
+          <button
+            onClick={onClose}
+            disabled={step === 'importing'}
+            className="rounded-lg p-1.5 text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600 disabled:opacity-50 dark:hover:bg-gray-700 dark:hover:text-gray-300"
+          >
+            <X className="h-5 w-5" />
+          </button>
+        </div>
+
+        <div className="flex-1 overflow-y-auto bg-gray-50/70 px-6 py-5 dark:bg-gray-950/40">
+          {error && (
+            <div className="mb-4 rounded-lg border border-red-200 bg-red-50 p-3 text-sm text-red-700 dark:border-red-800 dark:bg-red-900/20 dark:text-red-400">
+              {error}
+            </div>
+          )}
+
+          {(step === 'idle' || step === 'uploading') && (
+            <div className="space-y-4">
+              <div>
+                <label className="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">
+                  Appointment Date <span className="text-gray-400">(all appointments in screenshot)</span>
+                </label>
+                <input
+                  type="date"
+                  value={selectedDate}
+                  onChange={(e) => {
+                    const nextDate = e.target.value;
+                    setSelectedDate(nextDate);
+                    setEditAppointments((prev) => prev.map((appt) => ({ ...appt, appointmentDate: nextDate })));
+                  }}
+                  className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm text-gray-900 transition-colors focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-500/20 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:focus:border-purple-400"
+                />
+              </div>
+
+              <div
+                ref={dropRef}
+                onDragOver={(e) => { e.preventDefault(); e.stopPropagation(); }}
+                onDrop={handleDrop}
+                onClick={() => {
+                  const input = document.createElement('input');
+                  input.type = 'file';
+                  input.accept = 'image/*';
+                  input.onchange = (e) => {
+                    const file = (e.target as HTMLInputElement).files?.[0] || null;
+                    handleFile(file);
+                  };
+                  input.click();
+                }}
+                className={`flex cursor-pointer flex-col items-center justify-center rounded-xl border-2 border-dashed p-8 transition-colors ${
+                  imagePreview
+                    ? 'border-purple-400 bg-purple-50/50 dark:border-purple-600 dark:bg-purple-900/10'
+                    : 'border-gray-300 bg-gray-50 hover:border-purple-400 hover:bg-purple-50/50 dark:border-gray-600 dark:bg-gray-700/50 dark:hover:border-purple-500 dark:hover:bg-purple-900/10'
+                }`}
+              >
+                {imagePreview ? (
+                  <div className="w-full space-y-3">
+                    <img
+                      src={imagePreview}
+                      alt="Screenshot preview"
+                      className="max-h-64 w-full rounded-lg object-contain shadow-sm"
+                    />
+                    <p className="text-center text-xs text-gray-500 dark:text-gray-400">
+                      Click or drop another image to replace
+                    </p>
+                  </div>
+                ) : (
+                  <>
+                    <Upload className="mb-3 h-10 w-10 text-gray-400" />
+                    <p className="text-sm font-medium text-gray-700 dark:text-gray-300">
+                      Drop a screenshot here, or click to browse
+                    </p>
+                    <p className="mt-1 text-xs text-gray-400 dark:text-gray-500">
+                      Supported: PNG, JPG, WEBP
+                    </p>
+                  </>
+                )}
+              </div>
+            </div>
+          )}
+
+          {step === 'ocr' && (
+            <div className="flex flex-col items-center justify-center py-12">
+              <div className="mb-4">
+                <svg className="h-12 w-12 animate-spin text-purple-500" viewBox="0 0 24 24" fill="none">
+                  <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+                  <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z" />
+                </svg>
+              </div>
+              <p className="text-sm font-medium text-gray-700 dark:text-gray-300">{progress}</p>
+              <div className="mt-4 h-2 w-64 overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700">
+                <div
+                  className="h-full rounded-full bg-purple-500 transition-all duration-300"
+                  style={{ width: `${progressPct}%` }}
+                />
+              </div>
+              <p className="mt-2 text-xs text-gray-400">{progressPct}%</p>
+            </div>
+          )}
+
+          {step === 'ai_extracting' && (
+            <div className="flex flex-col items-center justify-center py-12">
+              <div className="mb-4">
+                <Sparkles className="h-12 w-12 animate-pulse text-purple-500" />
+              </div>
+              <p className="text-sm font-medium text-gray-700 dark:text-gray-300">{progress}</p>
+              <div className="mt-4 h-2 w-64 overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700">
+                <div className="h-full w-full animate-pulse rounded-full bg-purple-500" />
+              </div>
+            </div>
+          )}
+
+          {step === 'review' && (
+            <div className="space-y-5">
+              <div className="rounded-2xl border border-purple-100 bg-white p-4 shadow-sm dark:border-purple-900/40 dark:bg-gray-900">
+                <div className="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
+                  <div>
+                    <p className="text-xs font-semibold uppercase tracking-[0.16em] text-purple-600 dark:text-purple-400">Review Extracted Results</p>
+                    <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
+                      Found {editAppointments.length} appointment{editAppointments.length !== 1 ? 's' : ''}. Review and edit before importing.
+                    </p>
+                  </div>
+                  <div className="w-full lg:max-w-xs">
+                    <label className="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">
+                      Appointment Date <span className="text-gray-400">(applies to all imported appointments)</span>
+                    </label>
+                    <input
+                      type="date"
+                      value={selectedDate}
+                      onChange={(e) => {
+                        const nextDate = e.target.value;
+                        setSelectedDate(nextDate);
+                        setEditAppointments((prev) => prev.map((appt) => ({ ...appt, appointmentDate: nextDate })));
+                      }}
+                      className="w-full rounded-xl border border-gray-300 px-3 py-2.5 text-sm text-gray-900 shadow-sm transition-colors focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-500/20 dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:focus:border-purple-400"
+                    />
+                  </div>
+                </div>
+              </div>
+              {editAppointments.map((appt, idx) => (
+                <div
+                  key={idx}
+                  className="rounded-2xl border border-gray-200 bg-white p-5 shadow-sm dark:border-gray-700 dark:bg-gray-900"
+                >
+                  <div className="mb-4 flex items-center justify-between">
+                    <span className="rounded-full bg-purple-50 px-2.5 py-1 text-xs font-semibold uppercase tracking-[0.14em] text-purple-700 dark:bg-purple-900/30 dark:text-purple-300">
+                      Appointment #{idx + 1}
+                    </span>
+                    <span className="text-xs text-gray-400 dark:text-gray-500">Import date: {formatDateDisplay(appt.appointmentDate)}</span>
+                  </div>
+                  {appt.customerName && (
+                    <div className="mb-3 flex items-center justify-between gap-2 rounded-lg border border-gray-100 bg-gray-50 px-3 py-2 dark:border-gray-700 dark:bg-gray-800/50">
+                      <div className="flex items-center gap-2 text-xs">
+                        {appt.matchedCustomerId ? (
+                          <span className="inline-flex items-center gap-1 rounded-full bg-green-100 px-2 py-0.5 font-medium text-green-700 dark:bg-green-900/30 dark:text-green-400">
+                            <Check className="h-3 w-3" /> Matched: {appt.matchedCustomerName || 'Customer'}
+                          </span>
+                        ) : (
+                          <span className="inline-flex items-center gap-1 rounded-full bg-amber-100 px-2 py-0.5 font-medium text-amber-700 dark:bg-amber-900/30 dark:text-amber-400">
+                            Not in database
+                          </span>
+                        )}
+                        {appt.customerPhone && <span className="text-gray-400">{formatPhoneDisplay(appt.customerPhone)}</span>}
+                      </div>
+                      {!appt.matchedCustomerId && (
+                        <button
+                          type="button"
+                          onClick={async () => {
+                            const uid = pb.authStore.model?.id;
+                            if (!uid) return;
+                            const record = await pb.collection('customers').create({
+                              name: appt.customerName.trim(),
+                              phone: appt.customerPhone || '',
+                              email: '',
+                              address: '',
+                              notes: '',
+                              userId: uid,
+                            });
+                            if (appt.vin || appt.vehicleInfo) {
+                              const parts = (appt.vehicleInfo || '').trim().match(/^(\d{4})\s+(.+)$/);
+                              let year = '', make = '', model = '';
+                              if (parts) {
+                                year = parts[1];
+                                const rest = parts[2].trim();
+                                const spaceIdx = rest.indexOf(' ');
+                                if (spaceIdx > 0) { make = rest.slice(0, spaceIdx); model = rest.slice(spaceIdx + 1); }
+                                else { make = rest; }
+                              } else {
+                                make = appt.vehicleInfo || '';
+                              }
+                              try {
+                                await pb.collection('vehicles').create({
+                                  userId: uid,
+                                  customerId: record.id,
+                                  make, model, year,
+                                  vin: appt.vin || '',
+                                  licensePlate: '', mileage: '', color: '', engine: '',
+                                });
+                              } catch {}
+                            }
+                            setEditAppointments((prev) => prev.map((a, i) =>
+                              i === idx ? { ...a, matchedCustomerId: record.id, matchedCustomerName: appt.customerName.trim() } : a
+                            ));
+                            showToast('Customer added to database.', 'success');
+                          }}
+                          className="rounded-lg bg-green-600 px-2.5 py-1 text-xs font-medium text-white hover:bg-green-700"
+                        >
+                          Add to Database
+                        </button>
+                      )}
+                    </div>
+                  )}
+                  <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
+                    <div>
+                      <label className="mb-1 block text-xs font-medium uppercase tracking-[0.12em] text-gray-500 dark:text-gray-400">Time</label>
+                      <input
+                        type="time"
+                        value={appt.appointmentTime}
+                        onChange={(e) => updateEditAppt(idx, 'appointmentTime', e.target.value)}
+                        className="w-full rounded-xl border border-gray-300 px-3 py-2.5 text-sm text-gray-900 shadow-sm focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-500/20 dark:border-gray-600 dark:bg-gray-800 dark:text-white"
+                      />
+                    </div>
+                    <div>
+                      <label className="mb-1 block text-xs font-medium uppercase tracking-[0.12em] text-gray-500 dark:text-gray-400">Duration (min)</label>
+                      <input
+                        type="number"
+                        value={appt.durationMinutes}
+                        onChange={(e) => updateEditAppt(idx, 'durationMinutes', parseInt(e.target.value) || 60)}
+                        className="w-full rounded-xl border border-gray-300 px-3 py-2.5 text-sm text-gray-900 shadow-sm focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-500/20 dark:border-gray-600 dark:bg-gray-800 dark:text-white"
+                      />
+                    </div>
+                    <div className="sm:col-span-2">
+                      <label className="mb-1 block text-xs font-medium uppercase tracking-[0.12em] text-gray-500 dark:text-gray-400">Customer Name</label>
+                      <input
+                        type="text"
+                        value={appt.customerName}
+                        onChange={(e) => updateEditAppt(idx, 'customerName', e.target.value)}
+                        className="w-full rounded-xl border border-gray-300 px-3 py-2.5 text-sm text-gray-900 shadow-sm focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-500/20 dark:border-gray-600 dark:bg-gray-800 dark:text-white"
+                      />
+                    </div>
+                    <div>
+                      <label className="mb-1 block text-xs font-medium uppercase tracking-[0.12em] text-gray-500 dark:text-gray-400">Phone</label>
+                      <input
+                        type="text"
+                        value={formatPhoneInput(appt.customerPhone)}
+                        onChange={(e) => updateEditAppt(idx, 'customerPhone', e.target.value.replace(/\D/g, ''))}
+                        className="w-full rounded-xl border border-gray-300 px-3 py-2.5 text-sm text-gray-900 shadow-sm focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-500/20 dark:border-gray-600 dark:bg-gray-800 dark:text-white"
+                      />
+                    </div>
+                    <div>
+                      <label className="mb-1 block text-xs font-medium uppercase tracking-[0.12em] text-gray-500 dark:text-gray-400">VIN</label>
+                      <input
+                        type="text"
+                        value={appt.vin}
+                        onChange={(e) => updateEditAppt(idx, 'vin', e.target.value.toUpperCase())}
+                        className="w-full rounded-xl border border-gray-300 px-3 py-2.5 text-sm text-gray-900 shadow-sm focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-500/20 dark:border-gray-600 dark:bg-gray-800 dark:text-white"
+                      />
+                    </div>
+                    <div className="sm:col-span-2">
+                      <label className="mb-1 block text-xs font-medium uppercase tracking-[0.12em] text-gray-500 dark:text-gray-400">Vehicle Info</label>
+                      <input
+                        type="text"
+                        value={appt.vehicleInfo}
+                        onChange={(e) => updateEditAppt(idx, 'vehicleInfo', e.target.value)}
+                        className="w-full rounded-xl border border-gray-300 px-3 py-2.5 text-sm text-gray-900 shadow-sm focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-500/20 dark:border-gray-600 dark:bg-gray-800 dark:text-white"
+                      />
+                    </div>
+                    <div className="sm:col-span-2">
+                      <label className="mb-1 block text-xs font-medium uppercase tracking-[0.12em] text-gray-500 dark:text-gray-400">Service Type</label>
+                      <input
+                        type="text"
+                        value={appt.serviceType}
+                        onChange={(e) => updateEditAppt(idx, 'serviceType', e.target.value)}
+                        className="w-full rounded-xl border border-gray-300 px-3 py-2.5 text-sm text-gray-900 shadow-sm focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-500/20 dark:border-gray-600 dark:bg-gray-800 dark:text-white"
+                      />
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+
+          {step === 'importing' && (
+            <div className="flex flex-col items-center justify-center py-12">
+              <div className="mb-4">
+                <svg className="h-12 w-12 animate-spin text-purple-500" viewBox="0 0 24 24" fill="none">
+                  <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+                  <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z" />
+                </svg>
+              </div>
+              <p className="text-sm font-medium text-gray-700 dark:text-gray-300">{progress}</p>
+            </div>
+          )}
+        </div>
+
+        <div className="flex items-center justify-end gap-3 border-t border-gray-200 px-6 py-4 dark:border-gray-700">
+          {(step === 'idle' || step === 'uploading') && (
+            <>
+              <button
+                onClick={onClose}
+                className="rounded-lg border border-gray-300 px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-700"
+              >
+                Cancel
+              </button>
+              <button
+                onClick={handleExtract}
+                disabled={!imageFile}
+                className="inline-flex items-center gap-2 rounded-lg bg-gradient-to-r from-purple-600 to-purple-500 px-5 py-2 text-sm font-medium text-white shadow-sm transition-all hover:from-purple-700 hover:to-purple-600 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:focus:ring-offset-gray-800"
+              >
+                <Sparkles className="h-4 w-4" />
+                Extract Appointments
+              </button>
+            </>
+          )}
+          {step === 'review' && (
+            <>
+              <button
+                onClick={() => { setStep('idle'); setError(null); }}
+                className="rounded-lg border border-gray-300 px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-700"
+              >
+                Back
+              </button>
+              <button
+                onClick={handleImportAll}
+                className="inline-flex items-center gap-2 rounded-lg bg-gradient-to-r from-purple-600 to-purple-500 px-5 py-2 text-sm font-medium text-white shadow-sm transition-all hover:from-purple-700 hover:to-purple-600 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800"
+              >
+                <Upload className="h-4 w-4" />
+                Import All ({editAppointments.length})
+              </button>
+            </>
+          )}
+          {(step === 'ocr' || step === 'ai_extracting' || step === 'importing') && (
+            <p className="text-xs text-gray-400 dark:text-gray-500">{progress}</p>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export const ScanScreenshotModal = memo(ScanScreenshotModalImpl);
diff --git a/src/components/appointments/StatusBadge.tsx b/src/components/appointments/StatusBadge.tsx
new file mode 100644
index 0000000..933bfe3
--- /dev/null
+++ b/src/components/appointments/StatusBadge.tsx
@@ -0,0 +1,32 @@
+import { memo } from 'react';
+import type { Appointment } from '../../types';
+
+function StatusBadgeImpl({ status }: { status: Appointment['status'] }) {
+  const colors: Record<string, string> = {
+    scheduled: 'bg-blue-100 text-blue-800 dark:bg-blue-900/40 dark:text-blue-300',
+    checked_in: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/40 dark:text-yellow-300',
+    completed: 'bg-green-100 text-green-800 dark:bg-green-900/40 dark:text-green-300',
+    cancelled: 'bg-red-100 text-red-800 dark:bg-red-900/40 dark:text-red-300',
+    no_show: 'bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-400',
+  };
+
+  const labels: Record<string, string> = {
+    scheduled: 'Scheduled',
+    checked_in: 'Checked In',
+    completed: 'Completed',
+    cancelled: 'Cancelled',
+    no_show: 'No Show',
+  };
+
+  return (
+    <span
+      className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${
+        colors[status] || colors.scheduled
+      }`}
+    >
+      {labels[status] || status}
+    </span>
+  );
+}
+
+export const StatusBadge = memo(StatusBadgeImpl);
diff --git a/src/components/appointments/index.ts b/src/components/appointments/index.ts
new file mode 100644
index 0000000..1d39f79
--- /dev/null
+++ b/src/components/appointments/index.ts
@@ -0,0 +1,10 @@
+export { StatusBadge } from './StatusBadge';
+export { AppointmentRow } from './AppointmentRow';
+export { DateGroup } from './DateGroup';
+export { AppointmentModal } from './AppointmentModal';
+export { DeleteDialog } from './DeleteDialog';
+export { ScanScreenshotModal } from './ScanScreenshotModal';
+export { CheckInModal } from './CheckInModal';
+export { EmptyDayState, EmptyState, ErrorState, AppointmentsSkeleton } from './EmptyStates';
+export type { CreateAppointmentFormData } from './AppointmentModal';
+export type { ScannedAppt } from './ScanScreenshotModal';
diff --git a/src/components/customers/CustomerCard.tsx b/src/components/customers/CustomerCard.tsx
new file mode 100644
index 0000000..f55ff0a
--- /dev/null
+++ b/src/components/customers/CustomerCard.tsx
@@ -0,0 +1,85 @@
+import { memo } from 'react';
+import { Phone, Mail, Car, FileText, Pencil, Trash2 } from 'lucide-react';
+import { formatPhoneDisplay } from '../../lib/phone';
+import { formatVehicleLabel } from '../../lib/customers';
+import type { CustomerWithVehicles } from './types';
+
+interface Props {
+  customer: CustomerWithVehicles;
+  onView: (id: string) => void;
+  onEdit: (c: CustomerWithVehicles) => void;
+  onDelete: (c: CustomerWithVehicles) => void;
+}
+
+function CustomerCardImpl({ customer, onView, onEdit, onDelete }: Props) {
+  return (
+    <div className="rounded-xl bg-white p-5 shadow-sm ring-1 ring-gray-200 transition-all hover:shadow-md dark:bg-gray-800 dark:ring-gray-700">
+      <div className="mb-3 flex items-start justify-between">
+        <div className="min-w-0 flex-1">
+          <h3
+            className="cursor-pointer truncate text-lg font-semibold text-gray-900 hover:text-green-600 dark:text-white dark:hover:text-green-400"
+            onClick={() => onView(customer.id)}
+          >
+            {customer.name}
+          </h3>
+          <p className="text-xs font-mono text-gray-400 dark:text-gray-500">
+            ID: {customer.id.slice(0, 8)}
+          </p>
+          <div className="mt-1 flex flex-wrap items-center gap-x-3 gap-y-1 text-sm text-gray-500 dark:text-gray-400">
+            {customer.phone && (
+              <span className="inline-flex items-center gap-1">
+                <Phone className="h-3.5 w-3.5" />
+                {formatPhoneDisplay(customer.phone)}
+              </span>
+            )}
+            {customer.email && (
+              <span className="inline-flex items-center gap-1 truncate">
+                <Mail className="h-3.5 w-3.5 shrink-0" />
+                {customer.email}
+              </span>
+            )}
+          </div>
+        </div>
+      </div>
+
+      <div className="mb-3 flex items-center gap-1.5 text-sm text-gray-500 dark:text-gray-400">
+        <Car className="h-4 w-4" />
+        <span>
+          {customer.vehicleCount === 0
+            ? 'No vehicles'
+            : `${customer.vehicleCount} vehicle${customer.vehicleCount !== 1 ? 's' : ''}`}
+        </span>
+        {customer.vehicles.length > 0 && (
+          <span className="truncate text-gray-400 dark:text-gray-500">
+            &mdash; {formatVehicleLabel(customer.vehicles[0])}
+          </span>
+        )}
+      </div>
+
+      <div className="flex items-center gap-2 border-t border-gray-100 pt-3 dark:border-gray-700">
+        <button
+          onClick={() => onView(customer.id)}
+          className="inline-flex items-center gap-1.5 rounded-lg bg-green-600 px-3 py-1.5 text-xs font-medium text-white transition-colors hover:bg-green-700"
+        >
+          <FileText className="h-3.5 w-3.5" />
+          View Details
+        </button>
+        <button
+          onClick={() => onEdit(customer)}
+          className="inline-flex items-center gap-1.5 rounded-lg border border-gray-300 bg-white px-3 py-1.5 text-xs font-medium text-gray-700 transition-colors hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600"
+        >
+          <Pencil className="h-3.5 w-3.5" />
+          Edit
+        </button>
+        <button
+          onClick={() => onDelete(customer)}
+          className="ml-auto inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-xs font-medium text-red-600 transition-colors hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-900/20"
+        >
+          <Trash2 className="h-3.5 w-3.5" />
+        </button>
+      </div>
+    </div>
+  );
+}
+
+export const CustomerCard = memo(CustomerCardImpl);
diff --git a/src/components/customers/CustomerDetailView.tsx b/src/components/customers/CustomerDetailView.tsx
new file mode 100644
index 0000000..c75178f
--- /dev/null
+++ b/src/components/customers/CustomerDetailView.tsx
@@ -0,0 +1,467 @@
+import { useState, memo, Fragment } from 'react';
+import {
+  Phone,
+  Mail,
+  MapPin,
+  ChevronLeft,
+  Pencil,
+  Plus,
+  FileText,
+  Car,
+  Trash2,
+} from 'lucide-react';
+import { formatPhoneDisplay } from '../../lib/phone';
+import {
+  formatVehicleLabel,
+  vehicleKey,
+  getRoStatusLabel,
+  getRoStatusColor,
+  formatCustomerDate,
+  parseQuoteServices,
+} from '../../lib/customers';
+import type {
+  CustomerWithVehicles,
+  VehicleRecord,
+  RepairOrderRecord,
+  QuoteRecord,
+} from './types';
+
+interface Props {
+  customer: CustomerWithVehicles;
+  vehicles: VehicleRecord[];
+  repairOrders: RepairOrderRecord[];
+  repairOrdersLoading: boolean;
+  quotes: QuoteRecord[];
+  quotesLoading: boolean;
+  onBack: () => void;
+  onEdit: (c: CustomerWithVehicles) => void;
+  onAddVehicle: () => void;
+  onEditVehicle: (v: VehicleRecord) => void;
+  onDeleteVehicle: (v: VehicleRecord) => void;
+}
+
+function CustomerDetailViewImpl({
+  customer,
+  vehicles,
+  repairOrders,
+  repairOrdersLoading,
+  quotes,
+  quotesLoading,
+  onBack,
+  onEdit,
+  onAddVehicle,
+  onEditVehicle,
+  onDeleteVehicle,
+}: Props) {
+  const [expandedQuoteId, setExpandedQuoteId] = useState<string | null>(null);
+  const toggleQuote = (id: string) =>
+    setExpandedQuoteId(expandedQuoteId === id ? null : id);
+
+  function formatCurrency(n: number): string {
+    return '$' + n.toFixed(2);
+  }
+
+  return (
+    <div>
+      {/* Back + Actions */}
+      <div className="mb-6 flex flex-wrap items-center justify-between gap-3">
+        <button
+          onClick={onBack}
+          className="inline-flex items-center gap-1.5 text-sm font-medium text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-200"
+        >
+          <ChevronLeft className="h-4 w-4" />
+          Back to Customers
+        </button>
+        <div className="flex items-center gap-2">
+          <button
+            onClick={() => onEdit(customer)}
+            className="inline-flex items-center gap-1.5 rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600"
+          >
+            <Pencil className="h-4 w-4" />
+            Edit Profile
+          </button>
+        </div>
+      </div>
+
+      {/* Customer Info Card */}
+      <div className="mb-6 rounded-xl bg-white p-6 shadow-sm ring-1 ring-gray-200 dark:bg-gray-800 dark:ring-gray-700">
+        <h2 className="text-2xl font-bold text-gray-900 dark:text-white">{customer.name}</h2>
+        <p className="mt-0.5 font-mono text-sm text-gray-400 dark:text-gray-500">
+          Customer ID: {customer.id}
+        </p>
+        <div className="mt-3 grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
+          {customer.phone && (
+            <div className="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400">
+              <Phone className="h-4 w-4 shrink-0 text-gray-400" />
+              {formatPhoneDisplay(customer.phone)}
+            </div>
+          )}
+          {customer.email && (
+            <div className="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400">
+              <Mail className="h-4 w-4 shrink-0 text-gray-400" />
+              {customer.email}
+            </div>
+          )}
+          {customer.address && (
+            <div className="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400">
+              <MapPin className="h-4 w-4 shrink-0 text-gray-400" />
+              {customer.address}
+            </div>
+          )}
+        </div>
+        {customer.notes && (
+          <p className="mt-4 border-t border-gray-100 pt-4 text-sm text-gray-500 dark:border-gray-700 dark:text-gray-400">
+            {customer.notes}
+          </p>
+        )}
+      </div>
+
+      {/* Vehicles Section */}
+      <div className="rounded-xl bg-white p-6 shadow-sm ring-1 ring-gray-200 dark:bg-gray-800 dark:ring-gray-700">
+        <div className="mb-4 flex items-center justify-between">
+          <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
+            Vehicles ({vehicles.length})
+          </h3>
+          <button
+            onClick={onAddVehicle}
+            className="inline-flex items-center gap-1.5 rounded-lg bg-green-600 px-3 py-1.5 text-sm font-medium text-white transition-colors hover:bg-green-700"
+          >
+            <Plus className="h-4 w-4" />
+            Add Vehicle
+          </button>
+        </div>
+
+        {vehicles.length === 0 ? (
+          <div className="flex flex-col items-center justify-center py-12 text-center">
+            <Car className="mb-3 h-12 w-12 text-gray-300 dark:text-gray-600" />
+            <p className="text-sm text-gray-500 dark:text-gray-400">
+              No vehicles recorded for this customer.
+            </p>
+            <button
+              onClick={onAddVehicle}
+              className="mt-4 inline-flex items-center gap-1.5 rounded-lg bg-green-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-green-700"
+            >
+              <Plus className="h-4 w-4" />
+              Add First Vehicle
+            </button>
+          </div>
+        ) : (
+          <div className="overflow-hidden rounded-lg border border-gray-200 dark:border-gray-700">
+            <div className="hidden overflow-x-auto md:block">
+              <table className="w-full text-left text-sm">
+                <thead className="bg-gray-50 text-xs uppercase tracking-wide text-gray-500 dark:bg-gray-900/60 dark:text-gray-400">
+                  <tr>
+                    <th className="px-4 py-3 font-semibold">Vehicle</th>
+                    <th className="px-4 py-3 font-semibold">VIN</th>
+                    <th className="px-4 py-3 font-semibold">Plate</th>
+                    <th className="px-4 py-3 font-semibold">Mileage</th>
+                    <th className="px-4 py-3 font-semibold">Engine</th>
+                    <th className="px-4 py-3 text-right font-semibold">Actions</th>
+                  </tr>
+                </thead>
+                <tbody className="divide-y divide-gray-100 dark:divide-gray-700">
+                  {vehicles.map((v, index) => (
+                    <tr key={v.id || `${vehicleKey(v)}-${index}`} className="hover:bg-gray-50 dark:hover:bg-gray-700/50">
+                      <td className="px-4 py-3">
+                        <p className="font-semibold text-gray-900 dark:text-white">{formatVehicleLabel(v)}</p>
+                        {v.color && <p className="text-xs text-gray-500 dark:text-gray-400">{v.color}</p>}
+                      </td>
+                      <td className="px-4 py-3 font-mono text-xs text-gray-600 dark:text-gray-300">{v.vin || '—'}</td>
+                      <td className="px-4 py-3 text-gray-600 dark:text-gray-300">{v.licensePlate || '—'}</td>
+                      <td className="px-4 py-3 text-gray-600 dark:text-gray-300">{v.mileage || '—'}</td>
+                      <td className="px-4 py-3 text-gray-600 dark:text-gray-300">{v.engine || '—'}</td>
+                      <td className="px-4 py-3">
+                        <div className="flex items-center justify-end gap-1">
+                          <button
+                            onClick={() => onEditVehicle(v)}
+                            className="rounded-lg p-2 text-gray-500 hover:bg-gray-100 hover:text-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-100"
+                            title="Edit vehicle"
+                          >
+                            <Pencil className="h-4 w-4" />
+                          </button>
+                          <button
+                            onClick={() => onDeleteVehicle(v)}
+                            className="rounded-lg p-2 text-gray-400 hover:bg-red-50 hover:text-red-600 dark:hover:bg-red-900/20 dark:hover:text-red-400"
+                            title="Remove vehicle"
+                          >
+                            <Trash2 className="h-4 w-4" />
+                          </button>
+                        </div>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+            <div className="divide-y divide-gray-100 dark:divide-gray-700 md:hidden">
+              {vehicles.map((v, index) => (
+                <div key={v.id || `${vehicleKey(v)}-${index}`} className="p-4">
+                  <div className="flex items-start justify-between gap-3">
+                    <div className="min-w-0">
+                      <p className="font-semibold text-gray-900 dark:text-white">{formatVehicleLabel(v)}</p>
+                      {v.color && <p className="text-xs text-gray-500 dark:text-gray-400">{v.color}</p>}
+                    </div>
+                    <div className="flex shrink-0 gap-1">
+                      <button
+                        onClick={() => onEditVehicle(v)}
+                        className="rounded-lg p-1.5 text-gray-500 hover:bg-gray-100 hover:text-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-100"
+                        title="Edit vehicle"
+                      >
+                        <Pencil className="h-4 w-4" />
+                      </button>
+                      <button
+                        onClick={() => onDeleteVehicle(v)}
+                        className="rounded-lg p-1.5 text-gray-400 hover:bg-red-50 hover:text-red-600 dark:hover:bg-red-900/20 dark:hover:text-red-400"
+                        title="Remove vehicle"
+                      >
+                        <Trash2 className="h-4 w-4" />
+                      </button>
+                    </div>
+                  </div>
+                  <div className="mt-3 grid grid-cols-2 gap-2 text-xs text-gray-500 dark:text-gray-400">
+                    <p><span className="font-medium">VIN:</span> {v.vin || '—'}</p>
+                    <p><span className="font-medium">Plate:</span> {v.licensePlate || '—'}</p>
+                    <p><span className="font-medium">Mileage:</span> {v.mileage || '—'}</p>
+                    <p><span className="font-medium">Engine:</span> {v.engine || '—'}</p>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Repair Orders Section */}
+      <div className="mt-6 rounded-xl bg-white p-6 shadow-sm ring-1 ring-gray-200 dark:bg-gray-800 dark:ring-gray-700">
+        <div className="mb-4 flex items-center justify-between">
+          <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
+            Repair Orders ({repairOrders.length})
+          </h3>
+        </div>
+
+        {repairOrdersLoading ? (
+          <div className="flex items-center justify-center py-8">
+            <div className="h-5 w-5 animate-spin rounded-full border-2 border-green-500 border-t-transparent" />
+            <span className="ml-3 text-sm text-gray-500 dark:text-gray-400">
+              Loading repair orders...
+            </span>
+          </div>
+        ) : repairOrders.length === 0 ? (
+          <div className="flex flex-col items-center justify-center py-8 text-center">
+            <FileText className="mb-3 h-10 w-10 text-gray-300 dark:text-gray-600" />
+            <p className="text-sm text-gray-500 dark:text-gray-400">
+              No repair orders have been linked to this customer yet.
+            </p>
+          </div>
+        ) : (
+          <div className="overflow-x-auto">
+            <table className="w-full text-left text-sm">
+              <thead>
+                <tr className="border-b border-gray-200 dark:border-gray-700">
+                  <th className="pb-3 pr-4 font-semibold text-gray-700 dark:text-gray-300">RO #</th>
+                  <th className="pb-3 pr-4 font-semibold text-gray-700 dark:text-gray-300">Date</th>
+                  <th className="pb-3 pr-4 font-semibold text-gray-700 dark:text-gray-300">Vehicle</th>
+                  <th className="pb-3 font-semibold text-gray-700 dark:text-gray-300">Status</th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-gray-100 dark:divide-gray-700">
+                {repairOrders.map((ro) => {
+                  const statusLabel = getRoStatusLabel(ro);
+                  const statusColor = getRoStatusColor(ro);
+                  return (
+                    <tr key={ro.id} className="group hover:bg-gray-50 dark:hover:bg-gray-700/50">
+                      <td className="py-3 pr-4 font-medium text-gray-900 dark:text-white">
+                        {ro.roNumber || '\u2014'}
+                      </td>
+                      <td className="py-3 pr-4 text-gray-600 dark:text-gray-400">
+                        {formatCustomerDate(ro.createdAt)}
+                      </td>
+                      <td className="py-3 pr-4 text-gray-600 dark:text-gray-400">
+                        {ro.vehicleInfo || '\u2014'}
+                      </td>
+                      <td className="py-3">
+                        <span
+                          className={
+                            'inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-xs font-medium ' +
+                            statusColor
+                          }
+                        >
+                          {statusLabel}
+                        </span>
+                      </td>
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </div>
+
+      {/* Quotes Section */}
+      <div className="mt-6 rounded-xl bg-white p-6 shadow-sm ring-1 ring-gray-200 dark:bg-gray-800 dark:ring-gray-700">
+        <div className="mb-4 flex items-center justify-between">
+          <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
+            Quotes ({quotes.length})
+          </h3>
+        </div>
+
+        {quotesLoading ? (
+          <div className="flex items-center justify-center py-8">
+            <div className="h-5 w-5 animate-spin rounded-full border-2 border-green-500 border-t-transparent" />
+            <span className="ml-3 text-sm text-gray-500 dark:text-gray-400">
+              Loading quotes...
+            </span>
+          </div>
+        ) : quotes.length === 0 ? (
+          <div className="flex flex-col items-center justify-center py-8 text-center">
+            <FileText className="mb-3 h-10 w-10 text-gray-300 dark:text-gray-600" />
+            <p className="text-sm text-gray-500 dark:text-gray-400">
+              No saved quotes are on file for this customer yet.
+            </p>
+          </div>
+        ) : (
+          <div className="overflow-x-auto">
+            <table className="w-full text-left text-sm">
+              <thead>
+                <tr className="border-b border-gray-200 dark:border-gray-700">
+                  <th className="pb-3 pr-4 font-semibold text-gray-700 dark:text-gray-300">Date</th>
+                  <th className="pb-3 pr-4 font-semibold text-gray-700 dark:text-gray-300">Vehicle</th>
+                  <th className="pb-3 pr-4 font-semibold text-gray-700 dark:text-gray-300">Total</th>
+                  <th className="pb-3 pr-4 font-semibold text-gray-700 dark:text-gray-300">Status</th>
+                  <th className="pb-3 font-semibold text-gray-700 dark:text-gray-300">Advisor</th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-gray-100 dark:divide-gray-700">
+                {quotes.map((q) => {
+                  const isExpanded = expandedQuoteId === q.id;
+                  const services = parseQuoteServices(q.services);
+                  const totalServices = services.reduce((sum, s) => sum + s.price, 0);
+                  const qStatusClass =
+                    q.status === 'converted'
+                      ? 'bg-green-50 text-green-700 dark:bg-green-900/30 dark:text-green-400'
+                      : q.status === 'sent'
+                        ? 'bg-blue-50 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400'
+                        : q.status === 'declined'
+                          ? 'bg-red-50 text-red-700 dark:bg-red-900/30 dark:text-red-400'
+                          : 'bg-gray-50 text-gray-700 dark:bg-gray-900/30 dark:text-gray-400';
+                  return (
+                    <Fragment key={q.id}>
+                      <tr
+                        className="group cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700/50"
+                        onClick={() => toggleQuote(q.id)}
+                      >
+                        <td className="py-3 pr-4 text-gray-600 dark:text-gray-400">
+                          {formatCustomerDate(q.createdAt)}
+                        </td>
+                        <td className="py-3 pr-4 text-gray-600 dark:text-gray-400">
+                          {q.vehicleInfo || '\u2014'}
+                        </td>
+                        <td className="py-3 pr-4 font-medium text-gray-900 dark:text-white">
+                          {q.total ? formatCurrency(q.total) : '\u2014'}
+                        </td>
+                        <td className="py-3 pr-4">
+                          <span
+                            className={
+                              'inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-xs font-medium ' +
+                              qStatusClass
+                            }
+                          >
+                            {q.status || 'Unknown'}
+                          </span>
+                        </td>
+                        <td className="py-3 text-gray-600 dark:text-gray-400">
+                          {q.serviceAdvisor || '\u2014'}
+                        </td>
+                      </tr>
+                      <tr key={q.id + '-detail'}>
+                        <td colSpan={5} className="p-0">
+                          {isExpanded && (
+                            <div className="border-t border-gray-100 bg-gray-50 px-6 py-4 dark:border-gray-700 dark:bg-gray-800/50">
+                              {services.length > 0 && (
+                                <div className="mb-3 space-y-1.5">
+                                  <p className="mb-1.5 text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
+                                    Services
+                                  </p>
+                                  {services.map((s, i) => (
+                                    <div
+                                      key={i}
+                                      className="flex items-center justify-between gap-2 text-sm"
+                                    >
+                                      <div className="flex items-center gap-2 min-w-0">
+                                        <span className="truncate text-gray-700 dark:text-gray-300">
+                                          {s.name}
+                                        </span>
+                                        {s.customerDecision && s.customerDecision !== 'pending' && (
+                                          <span
+                                            className={
+                                              'shrink-0 rounded-full px-1.5 py-0.5 text-[10px] font-medium ' +
+                                              (s.customerDecision === 'approved'
+                                                ? 'bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-400'
+                                                : 'bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-400')
+                                            }
+                                          >
+                                            {s.customerDecision === 'approved'
+                                              ? 'Approved'
+                                              : 'Declined'}
+                                          </span>
+                                        )}
+                                      </div>
+                                      <span className="shrink-0 font-medium text-gray-900 dark:text-white">
+                                        {formatCurrency(s.price)}
+                                      </span>
+                                    </div>
+                                  ))}
+                                  {services.length > 1 && (
+                                    <div className="flex items-center justify-between border-t border-gray-200 pt-1.5 text-sm dark:border-gray-600">
+                                      <span className="font-semibold text-gray-700 dark:text-gray-300">
+                                        Subtotal
+                                      </span>
+                                      <span className="font-semibold text-gray-900 dark:text-white">
+                                        {formatCurrency(totalServices)}
+                                      </span>
+                                    </div>
+                                  )}
+                                </div>
+                              )}
+                              {q.notes && (
+                                <div className="mb-2">
+                                  <p className="mb-0.5 text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
+                                    Notes
+                                  </p>
+                                  <p className="text-sm text-gray-600 dark:text-gray-400">
+                                    {q.notes}
+                                  </p>
+                                </div>
+                              )}
+                              {q.vin && (
+                                <p className="text-xs text-gray-400 dark:text-gray-500">
+                                  VIN: {q.vin}
+                                </p>
+                              )}
+                              <button
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  toggleQuote(q.id);
+                                }}
+                                className="mt-3 text-xs font-medium text-green-600 hover:text-green-700 dark:text-green-400 dark:hover:text-green-300"
+                              >
+                                Collapse
+                              </button>
+                            </div>
+                          )}
+                        </td>
+                      </tr>
+                    </Fragment>
+                  );
+                })}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export const CustomerDetailView = memo(CustomerDetailViewImpl);
diff --git a/src/components/customers/CustomerDirectoryTable.tsx b/src/components/customers/CustomerDirectoryTable.tsx
new file mode 100644
index 0000000..23b8d69
--- /dev/null
+++ b/src/components/customers/CustomerDirectoryTable.tsx
@@ -0,0 +1,175 @@
+import { memo } from 'react';
+import { Car, Eye, Mail, Pencil, Phone, Trash2 } from 'lucide-react';
+import { formatPhoneDisplay } from '../../lib/phone';
+import { formatCustomerDate, formatVehicleLabel } from '../../lib/customers';
+import type { CustomerWithVehicles } from './types';
+
+interface Props {
+  customers: CustomerWithVehicles[];
+  onView: (id: string) => void;
+  onEdit: (customer: CustomerWithVehicles) => void;
+  onDelete: (customer: CustomerWithVehicles) => void;
+}
+
+function primaryVehicleText(customer: CustomerWithVehicles): string {
+  const vehicle = customer.vehicles[0];
+  return vehicle ? formatVehicleLabel(vehicle) : 'No vehicle on file';
+}
+
+function secondaryVehicleText(customer: CustomerWithVehicles): string {
+  const vehicle = customer.vehicles[0];
+  if (!vehicle) return '';
+  const details = [vehicle.vin ? `VIN ${vehicle.vin}` : '', vehicle.licensePlate ? `Plate ${vehicle.licensePlate}` : ''].filter(Boolean);
+  return details.join(' · ');
+}
+
+function CustomerDirectoryTableImpl({ customers, onView, onEdit, onDelete }: Props) {
+  return (
+    <div className="overflow-hidden rounded-xl bg-white shadow-sm ring-1 ring-gray-200 dark:bg-gray-800 dark:ring-gray-700">
+      <div className="hidden overflow-x-auto md:block">
+        <table className="w-full text-left text-sm">
+          <thead className="bg-gray-50 text-xs uppercase tracking-wide text-gray-500 dark:bg-gray-900/60 dark:text-gray-400">
+            <tr>
+              <th className="px-4 py-3 font-semibold">Customer</th>
+              <th className="px-4 py-3 font-semibold">Phone</th>
+              <th className="px-4 py-3 font-semibold">Email</th>
+              <th className="px-4 py-3 font-semibold">Primary Vehicle</th>
+              <th className="px-4 py-3 text-center font-semibold">Vehicles</th>
+              <th className="px-4 py-3 font-semibold">Updated</th>
+              <th className="px-4 py-3 text-right font-semibold">Actions</th>
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-gray-100 dark:divide-gray-700">
+            {customers.map((customer) => {
+              const vehicleDetails = secondaryVehicleText(customer);
+              return (
+                <tr key={customer.id} className="group hover:bg-green-50/50 dark:hover:bg-gray-700/50">
+                  <td className="px-4 py-3">
+                    <button
+                      type="button"
+                      onClick={() => onView(customer.id)}
+                      className="text-left font-semibold text-gray-900 hover:text-green-700 dark:text-white dark:hover:text-green-400"
+                    >
+                      {customer.name}
+                    </button>
+                    <p className="mt-0.5 font-mono text-xs text-gray-400 dark:text-gray-500">ID {customer.id.slice(0, 8)}</p>
+                  </td>
+                  <td className="px-4 py-3 text-gray-600 dark:text-gray-300">
+                    {customer.phone ? formatPhoneDisplay(customer.phone) : <span className="text-gray-400">Missing</span>}
+                  </td>
+                  <td className="max-w-[220px] px-4 py-3 text-gray-600 dark:text-gray-300">
+                    {customer.email ? <span className="block truncate">{customer.email}</span> : <span className="text-gray-400">Missing</span>}
+                  </td>
+                  <td className="px-4 py-3">
+                    <p className="font-medium text-gray-800 dark:text-gray-100">{primaryVehicleText(customer)}</p>
+                    {vehicleDetails && <p className="mt-0.5 max-w-[260px] truncate text-xs text-gray-500 dark:text-gray-400">{vehicleDetails}</p>}
+                  </td>
+                  <td className="px-4 py-3 text-center">
+                    <span className="inline-flex min-w-8 items-center justify-center rounded-full bg-gray-100 px-2.5 py-1 text-xs font-semibold text-gray-700 dark:bg-gray-700 dark:text-gray-200">
+                      {customer.vehicleCount}
+                    </span>
+                  </td>
+                  <td className="px-4 py-3 text-gray-500 dark:text-gray-400">{formatCustomerDate(customer.updated || customer.created)}</td>
+                  <td className="px-4 py-3">
+                    <div className="flex items-center justify-end gap-1">
+                      <button
+                        type="button"
+                        onClick={() => onView(customer.id)}
+                        className="rounded-lg p-2 text-gray-500 hover:bg-green-100 hover:text-green-700 dark:text-gray-400 dark:hover:bg-green-900/30 dark:hover:text-green-300"
+                        title="View customer"
+                      >
+                        <Eye className="h-4 w-4" />
+                      </button>
+                      <button
+                        type="button"
+                        onClick={() => onEdit(customer)}
+                        className="rounded-lg p-2 text-gray-500 hover:bg-gray-100 hover:text-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-100"
+                        title="Edit customer"
+                      >
+                        <Pencil className="h-4 w-4" />
+                      </button>
+                      <button
+                        type="button"
+                        onClick={() => onDelete(customer)}
+                        className="rounded-lg p-2 text-gray-400 hover:bg-red-50 hover:text-red-600 dark:hover:bg-red-900/20 dark:hover:text-red-400"
+                        title="Delete customer"
+                      >
+                        <Trash2 className="h-4 w-4" />
+                      </button>
+                    </div>
+                  </td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
+
+      <div className="divide-y divide-gray-100 dark:divide-gray-700 md:hidden">
+        {customers.map((customer) => {
+          const vehicleDetails = secondaryVehicleText(customer);
+          return (
+            <div key={customer.id} className="p-4">
+              <div className="flex items-start justify-between gap-3">
+                <button
+                  type="button"
+                  onClick={() => onView(customer.id)}
+                  className="min-w-0 text-left"
+                >
+                  <p className="truncate font-semibold text-gray-900 dark:text-white">{customer.name}</p>
+                  <p className="mt-1 flex items-center gap-1.5 text-xs text-gray-500 dark:text-gray-400">
+                    <Car className="h-3.5 w-3.5" />
+                    <span className="truncate">{primaryVehicleText(customer)}</span>
+                  </p>
+                </button>
+                <span className="shrink-0 rounded-full bg-gray-100 px-2.5 py-1 text-xs font-semibold text-gray-700 dark:bg-gray-700 dark:text-gray-200">
+                  {customer.vehicleCount} vehicle{customer.vehicleCount !== 1 ? 's' : ''}
+                </span>
+              </div>
+              <div className="mt-3 space-y-1.5 text-sm text-gray-600 dark:text-gray-300">
+                {customer.phone && (
+                  <p className="flex items-center gap-2">
+                    <Phone className="h-3.5 w-3.5 text-gray-400" />
+                    {formatPhoneDisplay(customer.phone)}
+                  </p>
+                )}
+                {customer.email && (
+                  <p className="flex items-center gap-2">
+                    <Mail className="h-3.5 w-3.5 text-gray-400" />
+                    <span className="truncate">{customer.email}</span>
+                  </p>
+                )}
+                {vehicleDetails && <p className="text-xs text-gray-500 dark:text-gray-400">{vehicleDetails}</p>}
+              </div>
+              <div className="mt-4 flex items-center gap-2">
+                <button
+                  type="button"
+                  onClick={() => onView(customer.id)}
+                  className="rounded-lg bg-green-600 px-3 py-1.5 text-xs font-medium text-white hover:bg-green-700"
+                >
+                  View
+                </button>
+                <button
+                  type="button"
+                  onClick={() => onEdit(customer)}
+                  className="rounded-lg border border-gray-300 px-3 py-1.5 text-xs font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-700"
+                >
+                  Edit
+                </button>
+                <button
+                  type="button"
+                  onClick={() => onDelete(customer)}
+                  className="ml-auto rounded-lg p-1.5 text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20"
+                >
+                  <Trash2 className="h-4 w-4" />
+                </button>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+export const CustomerDirectoryTable = memo(CustomerDirectoryTableImpl);
diff --git a/src/components/customers/CustomerFormModal.tsx b/src/components/customers/CustomerFormModal.tsx
new file mode 100644
index 0000000..0838f6e
--- /dev/null
+++ b/src/components/customers/CustomerFormModal.tsx
@@ -0,0 +1,216 @@
+import { useState, useEffect } from 'react';
+import { X } from 'lucide-react';
+import { formatPhoneInput } from '../../lib/phone';
+import { composeName } from '../../lib/customerName';
+import type { CustomerFormData, CustomerWithVehicles } from './types';
+
+export function CustomerFormModal({
+  open,
+  customer,
+  onClose,
+  onSave,
+}: {
+  open: boolean;
+  customer: CustomerWithVehicles | null;
+  onClose: () => void;
+  onSave: (data: CustomerFormData) => Promise<void>;
+}) {
+  const [form, setForm] = useState<CustomerFormData>({
+    name: '',
+    firstName: '',
+    middleName: '',
+    lastName: '',
+    phone: '',
+    email: '',
+    address: '',
+    notes: '',
+  });
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState('');
+
+  useEffect(() => {
+    if (open) {
+      const fullName = customer?.name || '';
+      const parts = fullName.split(/\s+/).filter(Boolean);
+      const firstName = parts[0] || '';
+      const lastName = parts.length > 1 ? parts[parts.length - 1] : '';
+      const middleName = parts.length > 2 ? parts.slice(1, -1).join(' ') : '';
+      setForm({
+        name: fullName,
+        firstName,
+        middleName,
+        lastName,
+        phone: customer?.phone || '',
+        email: customer?.email || '',
+        address: customer?.address || '',
+        notes: customer?.notes || '',
+      });
+      setError('');
+    }
+  }, [open, customer]);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    const name = composeName(form.firstName, form.middleName, form.lastName) || form.name;
+    if (!name.trim()) {
+      setError('Customer name is required.');
+      return;
+    }
+    setSaving(true);
+    setError('');
+    try {
+      await onSave({ ...form, name });
+    } catch (err) {
+      setError('Customer could not be saved. Please try again.');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  if (!open) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
+      <div className="w-full max-w-lg rounded-xl bg-white shadow-xl dark:bg-gray-800">
+        <div className="flex items-center justify-between border-b border-gray-200 px-6 py-4 dark:border-gray-700">
+          <h2 className="text-lg font-semibold text-gray-900 dark:text-white">
+            {customer ? 'Edit Customer' : 'Add Customer'}
+          </h2>
+          <button
+            onClick={onClose}
+            className="rounded-lg p-1.5 text-gray-400 hover:bg-gray-100 hover:text-gray-600 dark:hover:bg-gray-700 dark:hover:text-gray-300"
+          >
+            <X className="h-5 w-5" />
+          </button>
+        </div>
+
+        <form onSubmit={handleSubmit} className="space-y-4 p-6">
+          <div className="grid grid-cols-3 gap-3">
+            <div>
+              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300">
+                First <span className="text-red-500">*</span>
+              </label>
+              <input
+                type="text"
+                value={form.firstName}
+                onChange={(e) => {
+                  const firstName = e.target.value;
+                  const name = composeName(firstName, form.middleName, form.lastName);
+                  setForm({ ...form, firstName, name });
+                }}
+                placeholder="John"
+                className="mt-1 w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 placeholder-gray-400 focus:border-green-500 focus:outline-none focus:ring-2 focus:ring-green-500/20 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100 dark:placeholder-gray-500"
+              />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300">
+                Middle
+              </label>
+              <input
+                type="text"
+                value={form.middleName}
+                onChange={(e) => {
+                  const middleName = e.target.value;
+                  const name = composeName(form.firstName, middleName, form.lastName);
+                  setForm({ ...form, middleName, name });
+                }}
+                placeholder="Michael"
+                className="mt-1 w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 placeholder-gray-400 focus:border-green-500 focus:outline-none focus:ring-2 focus:ring-green-500/20 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100 dark:placeholder-gray-500"
+              />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300">
+                Last <span className="text-red-500">*</span>
+              </label>
+              <input
+                type="text"
+                value={form.lastName}
+                onChange={(e) => {
+                  const lastName = e.target.value;
+                  const name = composeName(form.firstName, form.middleName, lastName);
+                  setForm({ ...form, lastName, name });
+                }}
+                placeholder="Doe"
+                className="mt-1 w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 placeholder-gray-400 focus:border-green-500 focus:outline-none focus:ring-2 focus:ring-green-500/20 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100 dark:placeholder-gray-500"
+              />
+            </div>
+          </div>
+
+          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+            <div>
+              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300">
+                Phone
+              </label>
+              <input
+                type="tel"
+                value={formatPhoneInput(form.phone)}
+                onChange={(e) => setForm({ ...form, phone: e.target.value.replace(/\D/g, '') })}
+                placeholder="555-555-5555"
+                className="mt-1 w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 placeholder-gray-400 focus:border-green-500 focus:outline-none focus:ring-2 focus:ring-green-500/20 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100 dark:placeholder-gray-500"
+              />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300">
+                Email
+              </label>
+              <input
+                type="email"
+                value={form.email}
+                onChange={(e) => setForm({ ...form, email: e.target.value })}
+                placeholder="john@example.com"
+                className="mt-1 w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 placeholder-gray-400 focus:border-green-500 focus:outline-none focus:ring-2 focus:ring-green-500/20 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100 dark:placeholder-gray-500"
+              />
+            </div>
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300">
+              Address
+            </label>
+            <input
+              type="text"
+              value={form.address}
+              onChange={(e) => setForm({ ...form, address: e.target.value })}
+              placeholder="123 Main St, City, State ZIP"
+              className="mt-1 w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 placeholder-gray-400 focus:border-green-500 focus:outline-none focus:ring-2 focus:ring-green-500/20 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100 dark:placeholder-gray-500"
+            />
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300">
+              Notes
+            </label>
+            <textarea
+              value={form.notes}
+              onChange={(e) => setForm({ ...form, notes: e.target.value })}
+              placeholder="Any additional notes about this customer..."
+              rows={3}
+              className="mt-1 w-full resize-y rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 placeholder-gray-400 focus:border-green-500 focus:outline-none focus:ring-2 focus:ring-green-500/20 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100 dark:placeholder-gray-500"
+            />
+          </div>
+
+          {error && (
+            <p className="text-sm text-red-600 dark:text-red-400">{error}</p>
+          )}
+
+          <div className="flex justify-end gap-3 border-t border-gray-200 pt-4 dark:border-gray-700">
+            <button
+              type="button"
+              onClick={onClose}
+              className="rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600"
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              disabled={saving}
+              className="inline-flex items-center gap-2 rounded-lg bg-green-600 px-4 py-2 text-sm font-medium text-white shadow-sm transition-colors hover:bg-green-700 disabled:cursor-not-allowed disabled:opacity-50"
+            >
+              {saving ? 'Saving...' : customer ? 'Save Changes' : 'Add Customer'}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/customers/DeleteConfirmModal.tsx b/src/components/customers/DeleteConfirmModal.tsx
new file mode 100644
index 0000000..8d22654
--- /dev/null
+++ b/src/components/customers/DeleteConfirmModal.tsx
@@ -0,0 +1,71 @@
+import { useState } from 'react';
+import { AlertTriangle } from 'lucide-react';
+
+export function DeleteConfirmModal({
+  open,
+  customerName,
+  onClose,
+  onConfirm,
+}: {
+  open: boolean;
+  customerName: string;
+  onClose: () => void;
+  onConfirm: () => Promise<void>;
+}) {
+  const [deleting, setDeleting] = useState(false);
+  const [error, setError] = useState('');
+
+  const handleDelete = async () => {
+    setDeleting(true);
+    setError('');
+    try {
+      await onConfirm();
+    } catch (err) {
+      setError('Item could not be deleted. Please try again.');
+    } finally {
+      setDeleting(false);
+    }
+  };
+
+  if (!open) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
+      <div className="w-full max-w-md rounded-xl bg-white p-6 shadow-xl dark:bg-gray-800">
+        <div className="mb-6 text-center">
+          <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-red-50 dark:bg-red-900/20">
+            <AlertTriangle className="h-8 w-8 text-red-500" />
+          </div>
+          <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
+            Delete Customer
+          </h3>
+          <p className="mt-2 text-sm text-gray-500 dark:text-gray-400">
+            Are you sure you want to delete <strong>{customerName}</strong>? This will also remove
+            all associated vehicles. This action cannot be undone.
+          </p>
+        </div>
+
+        {error && (
+          <p className="mb-4 text-sm text-red-600 dark:text-red-400">{error}</p>
+        )}
+
+        <div className="flex justify-end gap-3">
+          <button
+            onClick={onClose}
+            disabled={deleting}
+            className="rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600"
+          >
+            Cancel
+          </button>
+          <button
+            onClick={handleDelete}
+            disabled={deleting}
+            className="inline-flex items-center gap-2 rounded-lg bg-red-600 px-4 py-2 text-sm font-medium text-white shadow-sm transition-colors hover:bg-red-700 disabled:cursor-not-allowed disabled:opacity-50"
+          >
+            {deleting ? 'Deleting...' : 'Delete'}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/customers/EmptyStates.tsx b/src/components/customers/EmptyStates.tsx
new file mode 100644
index 0000000..313b79e
--- /dev/null
+++ b/src/components/customers/EmptyStates.tsx
@@ -0,0 +1,67 @@
+import { Search, Users, UserPlus } from 'lucide-react';
+import { ListError } from '../ui/ListError';
+
+export function CustomersSkeleton() {
+  return (
+    <div className="animate-pulse space-y-4">
+      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
+        {Array.from({ length: 6 }).map((_, i) => (
+          <div
+            key={i}
+            className="rounded-xl bg-white p-5 ring-1 ring-gray-200 dark:bg-gray-800 dark:ring-gray-700"
+          >
+            <div className="mb-3 h-5 w-3/4 rounded bg-gray-200 dark:bg-gray-700" />
+            <div className="mb-2 h-4 w-1/2 rounded bg-gray-200 dark:bg-gray-700" />
+            <div className="h-4 w-1/3 rounded bg-gray-200 dark:bg-gray-700" />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export function EmptyState({ searchTerm, onCreate }: { searchTerm: string; onCreate: () => void }) {
+  if (searchTerm) {
+    return (
+      <div className="flex flex-col items-center justify-center py-20 text-center">
+        <div className="mb-6 flex h-24 w-24 items-center justify-center rounded-full bg-blue-50 dark:bg-blue-900/20">
+          <Search className="h-12 w-12 text-blue-500 dark:text-blue-400" />
+        </div>
+        <h3 className="mb-2 text-lg font-semibold text-gray-900 dark:text-white">
+          No matching customers
+        </h3>
+        <p className="mb-2 max-w-sm text-sm text-gray-500 dark:text-gray-400">
+          No customer records matched &ldquo;{searchTerm}&rdquo;.
+        </p>
+        <p className="mb-8 text-sm text-gray-400 dark:text-gray-500">
+          Try searching by customer name, phone number, email address, vehicle, or VIN.
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col items-center justify-center py-20 text-center">
+      <div className="mb-6 flex h-24 w-24 items-center justify-center rounded-full bg-green-50 dark:bg-green-900/20">
+        <Users className="h-12 w-12 text-green-500 dark:text-green-400" />
+      </div>
+      <h3 className="mb-2 text-lg font-semibold text-gray-900 dark:text-white">
+        No customer records on file
+      </h3>
+      <p className="mb-8 max-w-sm text-sm text-gray-500 dark:text-gray-400">
+        Add your first customer record to keep contact details, vehicles, quotes, and repair history organized in one place.
+      </p>
+      <button
+        onClick={onCreate}
+        className="inline-flex items-center gap-2 rounded-lg bg-green-600 px-5 py-2.5 text-sm font-medium text-white shadow-sm transition-colors hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900"
+      >
+        <UserPlus className="h-4 w-4" />
+        Add Customer
+      </button>
+    </div>
+  );
+}
+
+export function ErrorState({ message, onRetry }: { message: string; onRetry: () => void }) {
+  return <ListError title="Unable to load customers" message={message} onRetry={onRetry} />;
+}
diff --git a/src/components/customers/VehicleFormModal.tsx b/src/components/customers/VehicleFormModal.tsx
new file mode 100644
index 0000000..2ebca42
--- /dev/null
+++ b/src/components/customers/VehicleFormModal.tsx
@@ -0,0 +1,217 @@
+import { useState, useEffect } from 'react';
+import { X } from 'lucide-react';
+import type { VehicleFormData, VehicleRecord } from './types';
+
+export function VehicleFormModal({
+  open,
+  vehicle,
+  customerName,
+  onClose,
+  onSave,
+}: {
+  open: boolean;
+  vehicle: VehicleRecord | null;
+  customerName: string;
+  onClose: () => void;
+  onSave: (data: VehicleFormData) => Promise<void>;
+}) {
+  const [form, setForm] = useState<VehicleFormData>({
+    make: '',
+    model: '',
+    year: '',
+    vin: '',
+    licensePlate: '',
+    mileage: '',
+    color: '',
+    engine: '',
+  });
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState('');
+
+  useEffect(() => {
+    if (open) {
+      setForm({
+        make: vehicle?.make || '',
+        model: vehicle?.model || '',
+        year: vehicle?.year || '',
+        vin: vehicle?.vin || '',
+        licensePlate: vehicle?.licensePlate || '',
+        mileage: vehicle?.mileage || '',
+        color: vehicle?.color || '',
+        engine: vehicle?.engine || '',
+      });
+      setError('');
+    }
+  }, [open, vehicle]);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!form.make.trim() || !form.model.trim()) {
+      setError('Make and model are required.');
+      return;
+    }
+    setSaving(true);
+    setError('');
+    try {
+      await onSave(form);
+    } catch (err) {
+      setError('Vehicle could not be saved. Please try again.');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  if (!open) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
+      <div className="w-full max-w-lg rounded-xl bg-white shadow-xl dark:bg-gray-800">
+        <div className="flex items-center justify-between border-b border-gray-200 px-6 py-4 dark:border-gray-700">
+          <div>
+            <h2 className="text-lg font-semibold text-gray-900 dark:text-white">
+              {vehicle ? 'Edit Vehicle' : 'Add Vehicle'}
+            </h2>
+            <p className="text-xs text-gray-500 dark:text-gray-400">
+              {customerName}
+            </p>
+          </div>
+          <button
+            onClick={onClose}
+            className="rounded-lg p-1.5 text-gray-400 hover:bg-gray-100 hover:text-gray-600 dark:hover:bg-gray-700 dark:hover:text-gray-300"
+          >
+            <X className="h-5 w-5" />
+          </button>
+        </div>
+
+        <form onSubmit={handleSubmit} className="space-y-4 p-6">
+          <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
+            <div>
+              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300">
+                Year
+              </label>
+              <input
+                type="text"
+                value={form.year}
+                onChange={(e) => setForm({ ...form, year: e.target.value })}
+                placeholder="2020"
+                className="mt-1 w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 placeholder-gray-400 focus:border-green-500 focus:outline-none focus:ring-2 focus:ring-green-500/20 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100 dark:placeholder-gray-500"
+              />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300">
+                Make <span className="text-red-500">*</span>
+              </label>
+              <input
+                type="text"
+                value={form.make}
+                onChange={(e) => setForm({ ...form, make: e.target.value })}
+                placeholder="Honda"
+                className="mt-1 w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 placeholder-gray-400 focus:border-green-500 focus:outline-none focus:ring-2 focus:ring-green-500/20 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100 dark:placeholder-gray-500"
+              />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300">
+                Model <span className="text-red-500">*</span>
+              </label>
+              <input
+                type="text"
+                value={form.model}
+                onChange={(e) => setForm({ ...form, model: e.target.value })}
+                placeholder="Civic"
+                className="mt-1 w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 placeholder-gray-400 focus:border-green-500 focus:outline-none focus:ring-2 focus:ring-green-500/20 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100 dark:placeholder-gray-500"
+              />
+            </div>
+          </div>
+
+          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+            <div>
+              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300">
+                VIN
+              </label>
+              <input
+                type="text"
+                value={form.vin}
+                onChange={(e) => setForm({ ...form, vin: e.target.value })}
+                placeholder="1HGBH41JXMN109186"
+                maxLength={17}
+                className="mt-1 w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 placeholder-gray-400 focus:border-green-500 focus:outline-none focus:ring-2 focus:ring-green-500/20 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100 dark:placeholder-gray-500"
+              />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300">
+                License Plate
+              </label>
+              <input
+                type="text"
+                value={form.licensePlate}
+                onChange={(e) => setForm({ ...form, licensePlate: e.target.value })}
+                placeholder="ABC-1234"
+                className="mt-1 w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 placeholder-gray-400 focus:border-green-500 focus:outline-none focus:ring-2 focus:ring-green-500/20 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100 dark:placeholder-gray-500"
+              />
+            </div>
+          </div>
+
+          <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
+            <div>
+              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300">
+                Mileage
+              </label>
+              <input
+                type="text"
+                value={form.mileage}
+                onChange={(e) => setForm({ ...form, mileage: e.target.value })}
+                placeholder="45,000"
+                className="mt-1 w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 placeholder-gray-400 focus:border-green-500 focus:outline-none focus:ring-2 focus:ring-green-500/20 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100 dark:placeholder-gray-500"
+              />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300">
+                Color
+              </label>
+              <input
+                type="text"
+                value={form.color}
+                onChange={(e) => setForm({ ...form, color: e.target.value })}
+                placeholder="Silver"
+                className="mt-1 w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 placeholder-gray-400 focus:border-green-500 focus:outline-none focus:ring-2 focus:ring-green-500/20 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100 dark:placeholder-gray-500"
+              />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300">
+                Engine
+              </label>
+              <input
+                type="text"
+                value={form.engine}
+                onChange={(e) => setForm({ ...form, engine: e.target.value })}
+                placeholder="2.0L I4"
+                className="mt-1 w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 placeholder-gray-400 focus:border-green-500 focus:outline-none focus:ring-2 focus:ring-green-500/20 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100 dark:placeholder-gray-500"
+              />
+            </div>
+          </div>
+
+          {error && (
+            <p className="text-sm text-red-600 dark:text-red-400">{error}</p>
+          )}
+
+          <div className="flex justify-end gap-3 border-t border-gray-200 pt-4 dark:border-gray-700">
+            <button
+              type="button"
+              onClick={onClose}
+              className="rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600"
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              disabled={saving}
+              className="inline-flex items-center gap-2 rounded-lg bg-green-600 px-4 py-2 text-sm font-medium text-white shadow-sm transition-colors hover:bg-green-700 disabled:cursor-not-allowed disabled:opacity-50"
+            >
+              {saving ? 'Saving...' : vehicle ? 'Save Changes' : 'Add Vehicle'}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/customers/index.ts b/src/components/customers/index.ts
new file mode 100644
index 0000000..e74d1c4
--- /dev/null
+++ b/src/components/customers/index.ts
@@ -0,0 +1,16 @@
+export { CustomersSkeleton, EmptyState, ErrorState } from './EmptyStates';
+export { CustomerCard } from './CustomerCard';
+export { CustomerDirectoryTable } from './CustomerDirectoryTable';
+export { CustomerFormModal } from './CustomerFormModal';
+export { VehicleFormModal } from './VehicleFormModal';
+export { DeleteConfirmModal } from './DeleteConfirmModal';
+export { CustomerDetailView } from './CustomerDetailView';
+export type {
+  CustomerRecord,
+  VehicleRecord,
+  RepairOrderRecord,
+  QuoteRecord,
+  CustomerWithVehicles,
+  CustomerFormData,
+  VehicleFormData,
+} from './types';
diff --git a/src/components/customers/types.ts b/src/components/customers/types.ts
new file mode 100644
index 0000000..d6ae3c7
--- /dev/null
+++ b/src/components/customers/types.ts
@@ -0,0 +1,86 @@
+export interface CustomerRecord {
+  id: string;
+  name: string;
+  phone: string;
+  email: string;
+  address: string;
+  notes: string;
+  userId: string;
+  created: string;
+  updated: string;
+}
+
+export interface VehicleRecord {
+  id: string;
+  customerId: string;
+  userId?: string;
+  make: string;
+  model: string;
+  year: string;
+  vin: string;
+  licensePlate: string;
+  mileage: string;
+  color: string;
+  engine: string;
+}
+
+export interface RepairOrderRecord {
+  id: string;
+  roNumber: string;
+  customerId: string;
+  customerName: string;
+  vehicleInfo: string;
+  vin: string;
+  mileage: string;
+  status: string;
+  workStatus: string;
+  createdAt: string;
+  completedTime: string;
+  writeupTime: string;
+  technician: string;
+  notes: string;
+  services: string;
+  total: number;
+}
+
+export interface QuoteRecord {
+  id: string;
+  customerId: string;
+  customerName: string;
+  vehicleInfo: string;
+  vin: string;
+  mileage: string;
+  status: string;
+  createdAt: string;
+  total: number;
+  serviceAdvisor: string;
+  services: string;
+  notes: string;
+}
+
+export interface CustomerWithVehicles extends CustomerRecord {
+  vehicles: VehicleRecord[];
+  vehicleCount: number;
+}
+
+export interface CustomerFormData {
+  name: string;
+  firstName: string;
+  middleName: string;
+  lastName: string;
+  phone: string;
+  email: string;
+  address: string;
+  notes: string;
+}
+
+export interface VehicleFormData {
+  make: string;
+  model: string;
+  year: string;
+  vin: string;
+  licensePlate: string;
+  mileage: string;
+  color: string;
+  engine: string;
+}
diff --git a/src/components/mobile/MobileLayout.tsx b/src/components/mobile/MobileLayout.tsx
new file mode 100644
index 0000000..2b3f6e4
--- /dev/null
+++ b/src/components/mobile/MobileLayout.tsx
@@ -0,0 +1,130 @@
+import { useState, useEffect, type ReactNode } from 'react';
+import {
+  LayoutDashboard,
+  Calendar,
+  Wrench,
+  FileText,
+  Users,
+  Receipt,
+  Package,
+  DollarSign,
+  Clock,
+  Settings,
+  Sun,
+  Moon,
+  LogOut,
+} from 'lucide-react';
+import { NavLink, useLocation, useNavigate } from 'react-router-dom';
+import { pb } from '../../lib/pocketbase';
+import { preloadSettingsPage, preloadTimeCards } from '../../lib/routePreload';
+
+interface MobileLayoutProps {
+  children: ReactNode;
+}
+
+const navItems = [
+  { to: '/', label: 'Field', icon: LayoutDashboard },
+  { to: '/appointments', label: 'Agenda', icon: Calendar },
+  { to: '/repair-orders', label: 'Jobs', icon: Wrench },
+  { to: '/quote', label: 'Quote', icon: FileText },
+  { to: '/customers', label: 'Customers', icon: Users },
+  { to: '/invoices', label: 'Invoices', icon: Receipt },
+  { to: '/service-catalog', label: 'Catalog', icon: Package },
+  { to: '/financial', label: 'Financial', icon: DollarSign },
+  { to: '/time-cards', label: 'Time Cards', icon: Clock },
+  { to: '/settings', label: 'Settings', icon: Settings },
+];
+
+export default function MobileLayout({ children }: MobileLayoutProps) {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const [dark, setDark] = useState(() => {
+    if (typeof window === 'undefined') return false;
+    return localStorage.getItem('spq-dark-mode') === 'true';
+  });
+
+  useEffect(() => {
+    const root = document.documentElement;
+    if (dark) {
+      root.classList.add('dark');
+    } else {
+      root.classList.remove('dark');
+    }
+    localStorage.setItem('spq-dark-mode', String(dark));
+  }, [dark]);
+
+  const toggleDark = () => setDark((prev) => !prev);
+
+  const handleLogout = () => {
+    pb.authStore.clear();
+    navigate('/login');
+  };
+
+  const userEmail = pb.authStore.model?.email as string | undefined;
+
+  const navClasses =
+    'flex shrink-0 items-center gap-1.5 rounded-full px-3 py-1.5 text-xs font-medium whitespace-nowrap transition-colors';
+
+  return (
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-950">
+      <header className="sticky top-0 z-30 flex h-14 items-center gap-2 border-b border-gray-200 bg-white px-3 dark:border-gray-800 dark:bg-gray-900">
+        <span className="shrink-0 text-base font-bold text-gray-900 dark:text-white">
+          Shop<span className="text-green-600">Pro</span>Quote
+        </span>
+        <div className="min-w-0 flex-1" />
+        <button
+          onClick={toggleDark}
+          className="rounded-lg p-1.5 text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
+          title={dark ? 'Switch to light mode' : 'Switch to dark mode'}
+        >
+          {dark ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
+        </button>
+        {userEmail && (
+          <span className="hidden max-w-[120px] truncate text-xs text-gray-500 dark:text-gray-400 sm:block">
+            {userEmail}
+          </span>
+        )}
+        <button
+          onClick={handleLogout}
+          className="rounded-lg p-1.5 text-gray-500 hover:bg-red-50 hover:text-red-600 dark:text-gray-400 dark:hover:bg-red-900/20 dark:hover:text-red-400"
+          title="Logout"
+        >
+          <LogOut className="h-4 w-4" />
+        </button>
+      </header>
+
+      <nav className="sticky top-14 z-20 flex gap-1 overflow-x-auto border-b border-gray-200 bg-white px-2 py-2 dark:border-gray-800 dark:bg-gray-900">
+        {navItems.map((item) => (
+          <NavLink
+            key={item.to}
+            to={item.to}
+            end={item.to === '/'}
+            state={
+              item.to === '/settings'
+                ? {
+                    backgroundLocation:
+                      (location.state as { backgroundLocation?: unknown } | null)
+                        ?.backgroundLocation || location,
+                  }
+                : undefined
+            }
+            onMouseEnter={item.to === '/settings' ? preloadSettingsPage : item.to === '/time-cards' ? preloadTimeCards : undefined}
+            onFocus={item.to === '/settings' ? preloadSettingsPage : item.to === '/time-cards' ? preloadTimeCards : undefined}
+            className={({ isActive }) =>
+              `${navClasses} ${
+                isActive
+                  ? 'bg-green-600 text-white shadow-sm'
+                  : 'bg-gray-100 text-gray-600 hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700'
+              }`
+            }
+          >
+            <item.icon className="h-3.5 w-3.5" />
+            <span>{item.label}</span>
+          </NavLink>
+        ))}
+      </nav>
+
+      <main className="p-3 sm:p-4">{children}</main>
+    </div>
+  );
+}
diff --git a/src/components/quoteGenerator/CustomerInfoPanel.tsx b/src/components/quoteGenerator/CustomerInfoPanel.tsx
new file mode 100644
index 0000000..acbb22f
--- /dev/null
+++ b/src/components/quoteGenerator/CustomerInfoPanel.tsx
@@ -0,0 +1,458 @@
+import { useState, useEffect, useRef, useCallback } from 'react';
+import { Search, X, Check, UserRound, AlertTriangle } from 'lucide-react';
+import { useQuoteStore } from '../../store/quote';
+import { useSettings } from '../../store/settings';
+import { getRoleLabel, showServiceLocationFields } from '../../lib/settings';
+import { formatPhoneInput } from '../../lib/phone';
+import { pb } from '../../lib/pocketbase';
+import { logError } from '../../lib/userMessages';
+
+interface CustomerSearchResult {
+  id: string;
+  name: string;
+  phone: string;
+  vehicleCount: number;
+}
+
+export function CustomerInfoPanel() {
+  const { customerInfo, setCustomerInfo } = useQuoteStore();
+  const settings = useSettings();
+  const defaultAdvisor = settings.serviceAdvisor;
+  const roleLabel = getRoleLabel(settings);
+  const showLocationFields = showServiceLocationFields(settings);
+  const isDefaultAdvisor = (val: string) => Boolean(defaultAdvisor && val === defaultAdvisor);
+
+  // Customer search
+  const [searchQuery, setSearchQuery] = useState('');
+  const [searchResults, setSearchResults] = useState<CustomerSearchResult[]>([]);
+  const [searching, setSearching] = useState(false);
+  const [showDropdown, setShowDropdown] = useState(false);
+  const searchRef = useRef<HTMLDivElement | null>(null);
+  const debounceRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
+
+  // Duplicate detection for new customer entry
+  const [duplicateWarning, setDuplicateWarning] = useState<{
+    customer: CustomerSearchResult;
+    message: 'name' | 'phone';
+  } | null>(null);
+  const dupeDebounceRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
+
+  const isLinked = Boolean(customerInfo.customerId);
+
+  // ── Search customers ──
+  const doSearch = useCallback(async (q: string) => {
+    if (!q.trim()) {
+      setSearchResults([]);
+      setShowDropdown(false);
+      return;
+    }
+    setSearching(true);
+    try {
+      const searchClean = q.toLowerCase().trim();
+      // Fetch all customers for this user (list rule scopes by userId) and filter client-side
+      const result = await pb.collection('customers').getList(1, 500, {
+        sort: 'name',
+        fields: 'id,name,phone',
+        batch: 500,
+      });
+      // Client-side filter by name or phone
+      const isNumeric = /^\d+$/.test(searchClean);
+      const matched = (result.items as any[]).filter((c: any) => {
+        if (isNumeric) {
+          return (c.phone || '').replace(/\D/g, '').includes(searchClean);
+        }
+        return (c.name || '').toLowerCase().includes(searchClean);
+      });
+      // Fetch vehicle count for top matches (limit to 10 for display)
+      const top = matched.slice(0, 10);
+      const enriched: CustomerSearchResult[] = await Promise.all(
+        top.map(async (r: any) => {
+          let vehicleCount = 0;
+          try {
+            const vResult = await pb.collection('vehicles').getList(1, 1, {
+              filter: `customerId = '${r.id.replace(/'/g, "\\'")}'`,
+              fields: 'id',
+              batch: 1,
+            });
+            vehicleCount = vResult.totalItems;
+          } catch { /* ignore */ }
+          return { id: r.id, name: r.name, phone: r.phone, vehicleCount };
+        })
+      );
+      setSearchResults(enriched);
+      setShowDropdown(enriched.length > 0);
+    } catch (err) {
+      logError('Customer search failed', err);
+      setSearchResults([]);
+    } finally {
+      setSearching(false);
+    }
+  }, []);
+
+  // Debounced search
+  const handleSearchInput = useCallback((val: string) => {
+    setSearchQuery(val);
+    if (debounceRef.current) clearTimeout(debounceRef.current);
+    debounceRef.current = setTimeout(() => doSearch(val), 300);
+  }, [doSearch]);
+
+  // Close dropdown on outside click
+  useEffect(() => {
+    const handler = (e: MouseEvent) => {
+      if (searchRef.current && !searchRef.current.contains(e.target as Node)) {
+        setShowDropdown(false);
+      }
+    };
+    document.addEventListener('mousedown', handler);
+    return () => document.removeEventListener('mousedown', handler);
+  }, []);
+
+  // Cleanup debounce on unmount
+  useEffect(() => {
+    return () => {
+      if (debounceRef.current) clearTimeout(debounceRef.current);
+      if (dupeDebounceRef.current) clearTimeout(dupeDebounceRef.current);
+    };
+  }, []);
+
+  // ── Select existing customer ──
+  const selectCustomer = useCallback(async (c: CustomerSearchResult) => {
+    const userId = pb.authStore.model?.id;
+    try {
+      const full = await pb.collection('customers').getOne(c.id) as any;
+
+      // Try fetching vehicle from vehicles collection first
+      let vehicleInfo = '';
+      let vin = '';
+      let mileage = '';
+      let roNumber = '';
+      try {
+        const vResult = await pb.collection('vehicles').getList(1, 1, {
+          filter: `customerId = '${c.id.replace(/'/g, "\\'")}'`,
+          sort: '-created',
+          fields: 'year,make,model,vin,mileage',
+        });
+        if (vResult.items.length > 0) {
+          const v = vResult.items[0] as any;
+          vehicleInfo = [v.year, v.make, v.model].filter(Boolean).join(' ');
+          vin = v.vin || '';
+          mileage = v.mileage || '';
+        }
+      } catch {
+        // vehicles collection may not exist on older installs
+      }
+
+      // Fallback: look up vehicle info from recent quotes or ROs by customer name
+      if (!vehicleInfo && userId) {
+        const escapedName = (full.name || c.name || '').replace(/'/g, "\\'");
+        const nameFilter = `customerName = '${escapedName}' && userId = '${userId}'`;
+
+        // Try quotes
+        try {
+          const qResult = await pb.collection('quotes').getList(1, 1, {
+            filter: nameFilter,
+            sort: '-createdAt',
+            fields: 'vehicleInfo,vin,mileage,repairOrderNumber',
+          });
+          if (qResult.items.length > 0) {
+            const q = qResult.items[0] as any;
+            vehicleInfo = q.vehicleInfo || '';
+            vin = q.vin || '';
+            mileage = q.mileage || '';
+            roNumber = q.repairOrderNumber || '';
+          }
+        } catch { /* ignore */ }
+
+        // Try repair orders (only if still no vehicle info)
+        if (!vehicleInfo) {
+          try {
+            const roResult = await pb.collection('repairOrders').getList(1, 1, {
+              filter: nameFilter,
+              sort: '-createdAt',
+              fields: 'vehicleInfo,vin,mileage,roNumber',
+            });
+            if (roResult.items.length > 0) {
+              const ro = roResult.items[0] as any;
+              vehicleInfo = ro.vehicleInfo || '';
+              vin = ro.vin || '';
+              mileage = ro.mileage || '';
+              if (!roNumber) roNumber = ro.roNumber || '';
+            }
+          } catch { /* ignore */ }
+        }
+      }
+
+      const parts = (full.name || c.name || '').trim().split(/\s+/);
+      const middle = parts.length > 2 ? parts.slice(1, -1).join(' ') : '';
+      const last = parts.length > 1 ? parts[parts.length - 1] : '';
+      const current = useQuoteStore.getState().customerInfo;
+      const hasROOrigin = Boolean(current.repairOrderId);
+      setCustomerInfo({
+        customerId: c.id,
+        firstName: parts[0] || '',
+        middleName: middle,
+        lastName: last,
+        name: full.name || c.name || '',
+        phone: full.phone || c.phone || '',
+        email: full.email || '',
+        vehicleInfo: hasROOrigin ? current.vehicleInfo || vehicleInfo : vehicleInfo,
+        vin: hasROOrigin ? current.vin || vin : vin,
+        mileage: hasROOrigin ? current.mileage || mileage : mileage,
+        roNumber: hasROOrigin ? current.roNumber || roNumber : roNumber,
+        repairOrderId: current.repairOrderId,
+      });
+    } catch (e) {
+      logError('Failed to load customer record', e);
+      const parts = c.name.trim().split(/\s+/);
+      setCustomerInfo({
+        customerId: c.id,
+        firstName: parts[0] || '',
+        lastName: parts.slice(1).join(' ') || '',
+        name: c.name,
+        phone: c.phone,
+      });
+    }
+    setSearchQuery(c.name);
+    setShowDropdown(false);
+    setDuplicateWarning(null);
+  }, [setCustomerInfo]);
+
+  const clearCustomer = useCallback(() => {
+    setCustomerInfo({
+      customerId: undefined,
+      firstName: '',
+      lastName: '',
+      name: '',
+    });
+    setSearchQuery('');
+    setSearchResults([]);
+    setShowDropdown(false);
+    setDuplicateWarning(null);
+  }, [setCustomerInfo]);
+
+  // ── Duplicate detection ──
+  // When the user types first/last name or phone, check for matches
+  const checkDuplicates = useCallback(async (firstName: string, lastName: string, phone: string) => {
+    if (isLinked) return;
+    const nameQuery = `${firstName} ${lastName}`.trim();
+    const phoneDigits = phone.replace(/\D/g, '');
+    if (!nameQuery && phoneDigits.length < 4) {
+      setDuplicateWarning(null);
+      return;
+    }
+
+    try {
+      // Fetch all customers for this user and filter client-side
+      const result = await pb.collection('customers').getList(1, 500, {
+        fields: 'id,name,phone',
+        batch: 500,
+      });
+      const allCustomers = result.items as any[];
+
+      // Match by name or phone
+      const nameLc = nameQuery.toLowerCase();
+      const matched = allCustomers.filter((c: any) => {
+        const cName = (c.name || '').toLowerCase();
+        const cPhone = (c.phone || '').replace(/\D/g, '');
+        if (nameQuery && cName.includes(nameLc)) return true;
+        if (phoneDigits.length >= 4 && cPhone.includes(phoneDigits)) return true;
+        return false;
+      });
+
+      if (matched.length > 0) {
+        const best = matched[0] as any;
+        setDuplicateWarning({
+          customer: { id: best.id, name: best.name, phone: best.phone || '', vehicleCount: 0 },
+          message: nameQuery && best.name.toLowerCase().includes(nameLc) ? 'name' : 'phone',
+        });
+      } else {
+        setDuplicateWarning(null);
+      }
+    } catch {
+      setDuplicateWarning(null);
+    }
+  }, [isLinked]);
+
+  // Debounced duplicate check
+  const handleNameOrPhoneChange = useCallback((field: string, _val: string) => {
+    if (field === 'firstName' || field === 'lastName' || field === 'phone') {
+      if (dupeDebounceRef.current) clearTimeout(dupeDebounceRef.current);
+      // We'll check after the state updates — use a short delay
+      dupeDebounceRef.current = setTimeout(() => {
+        const state = useQuoteStore.getState().customerInfo;
+        checkDuplicates(state.firstName, state.lastName, state.phone);
+      }, 600);
+    }
+  }, [checkDuplicates]);
+
+  // Custom setter that also triggers duplicate check
+  const setInfo = useCallback((info: Partial<typeof customerInfo>) => {
+    setCustomerInfo(info);
+    handleNameOrPhoneChange(Object.keys(info)[0] || '', String(Object.values(info)[0] || ''));
+  }, [setCustomerInfo, handleNameOrPhoneChange]);
+
+  // ── Render helpers ──
+  const nameField = (key: 'firstName' | 'middleName' | 'lastName', label: string, placeholder: string, span: string) => {
+    const val = customerInfo[key] as string;
+    return (
+      <div className={span}>
+        <label className="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">{label}</label>
+        <input
+          value={val}
+          onChange={(e) => setInfo({ [key]: e.target.value })}
+          placeholder={placeholder}
+          disabled={isLinked}
+          className={`w-full rounded-lg border px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-green-500/20 disabled:cursor-not-allowed disabled:opacity-50 ${
+            isLinked
+              ? 'border-green-200 bg-green-50 text-gray-500 dark:border-green-800 dark:bg-green-900/20 dark:text-gray-400'
+              : 'border-gray-300 bg-white text-gray-900 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 placeholder-gray-400 focus:border-green-500'
+          }`}
+        />
+      </div>
+    );
+  };
+
+  const field = (key: keyof typeof customerInfo, label: string, placeholder: string, span = 'col-span-1') => {
+    const isPhone = key === 'phone';
+    const val = customerInfo[key] as string;
+    const displayVal = isPhone ? formatPhoneInput(val) : val;
+    return (
+      <div className={span}>
+        <label className="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">{label}</label>
+        <input
+          value={displayVal}
+          onChange={(e) => setInfo({ [key]: isPhone ? e.target.value.replace(/\D/g, '') : e.target.value })}
+          placeholder={placeholder}
+          disabled={key === 'serviceAdvisor' && isDefaultAdvisor(val) && !val}
+          className={`w-full rounded-lg border px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-green-500/20 ${
+            key === 'serviceAdvisor' && isDefaultAdvisor(val)
+              ? 'border-gray-200 bg-gray-50 text-gray-400 dark:border-gray-700 dark:bg-gray-800/50 dark:text-gray-500 focus:border-green-500'
+              : 'border-gray-300 bg-white text-gray-900 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 placeholder-gray-400 focus:border-green-500'
+          }`}
+        />
+      </div>
+    );
+  };
+
+  return (
+    <div className="rounded-xl border border-gray-200 bg-white p-5 shadow-sm dark:border-gray-800 dark:bg-gray-900">
+      <h2 className="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-4">Customer Information</h2>
+
+      {/* ── Customer Search / Selector ── */}
+      <div ref={searchRef} className="relative mb-4">
+        <div className="relative">
+          {isLinked ? (
+            <div className="flex items-center gap-2 rounded-lg border border-green-300 bg-green-50 px-3 py-2.5 dark:border-green-700 dark:bg-green-900/20">
+              <UserRound className="h-4 w-4 shrink-0 text-green-600 dark:text-green-400" />
+              <span className="flex-1 text-sm font-medium text-green-800 dark:text-green-300 truncate">
+                {customerInfo.name}
+              </span>
+              {customerInfo.phone && (
+                <span className="text-xs text-green-600 dark:text-green-400 shrink-0">
+                  {formatPhoneInput(customerInfo.phone)}
+                </span>
+              )}
+              <button
+                onClick={clearCustomer}
+                className="rounded p-0.5 text-green-600 hover:bg-green-200 dark:text-green-400 dark:hover:bg-green-800/40"
+                title="Clear customer selection"
+              >
+                <X className="h-3.5 w-3.5" />
+              </button>
+            </div>
+          ) : (
+            <div className="relative">
+              <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400" />
+              <input
+                type="text"
+                value={searchQuery}
+                onChange={(e) => handleSearchInput(e.target.value)}
+                onFocus={() => { if (searchResults.length > 0) setShowDropdown(true); }}
+                placeholder="Search existing customers by name or phone..."
+                className="w-full rounded-lg border border-gray-300 bg-white py-2.5 pl-10 pr-3 text-sm text-gray-900 placeholder-gray-400 focus:border-green-500 focus:outline-none focus:ring-2 focus:ring-green-500/20 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-500"
+              />
+              {searching && (
+                <div className="absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 animate-spin rounded-full border-2 border-green-500 border-t-transparent" />
+              )}
+            </div>
+          )}
+        </div>
+
+        {/* Dropdown */}
+        {showDropdown && searchResults.length > 0 && (
+          <div className="absolute left-0 right-0 top-full z-20 mt-1 max-h-56 overflow-y-auto rounded-lg border border-gray-200 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-800">
+            {searchResults.map((c) => (
+              <button
+                key={c.id}
+                onClick={() => selectCustomer(c)}
+                className="flex w-full items-center gap-3 px-4 py-2.5 text-left text-sm hover:bg-gray-50 dark:hover:bg-gray-700/50 border-b border-gray-100 dark:border-gray-700 last:border-0"
+              >
+                <UserRound className="h-4 w-4 shrink-0 text-gray-400" />
+                <div className="flex-1 min-w-0">
+                  <span className="font-medium text-gray-900 dark:text-gray-100">{c.name}</span>
+                  {c.phone && (
+                    <span className="ml-2 text-xs text-gray-500 dark:text-gray-400">
+                      {formatPhoneInput(c.phone)}
+                    </span>
+                  )}
+                </div>
+                {c.vehicleCount > 0 && (
+                  <span className="shrink-0 text-xs text-gray-400">{c.vehicleCount} vehicle{c.vehicleCount !== 1 ? 's' : ''}</span>
+                )}
+              </button>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* ── Duplicate Warning ── */}
+      {duplicateWarning && !isLinked && (
+        <div className="mb-4 flex items-start gap-3 rounded-lg border border-amber-200 bg-amber-50 p-3 dark:border-amber-800 dark:bg-amber-900/20">
+          <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0 text-amber-600 dark:text-amber-400" />
+          <div className="flex-1 min-w-0">
+            <p className="text-sm font-medium text-amber-800 dark:text-amber-300">
+              Existing customer found
+            </p>
+            <p className="text-xs text-amber-700 dark:text-amber-400 mt-0.5">
+              {duplicateWarning.customer.name} {duplicateWarning.customer.phone && `(${formatPhoneInput(duplicateWarning.customer.phone)})`} already exists.
+            </p>
+            <div className="mt-2 flex gap-2">
+              <button
+                onClick={() => selectCustomer(duplicateWarning.customer)}
+                className="inline-flex items-center gap-1 rounded-lg bg-amber-600 px-3 py-1.5 text-xs font-medium text-white hover:bg-amber-700 transition-colors"
+              >
+                <Check className="h-3 w-3" /> Use Existing
+              </button>
+              <button
+                onClick={() => setDuplicateWarning(null)}
+                className="inline-flex items-center gap-1 rounded-lg border border-amber-300 bg-white px-3 py-1.5 text-xs font-medium text-amber-700 hover:bg-amber-50 transition-colors dark:border-amber-700 dark:bg-transparent dark:text-amber-400 dark:hover:bg-amber-900/20"
+              >
+                Create New
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* ── Name Fields (hidden when linked) ── */}
+      {!isLinked && (
+        <div className="grid grid-cols-1 sm:grid-cols-4 gap-4 mb-4">
+          {nameField('firstName', 'First Name *', 'John', 'sm:col-span-2')}
+          {nameField('middleName', 'Middle', '(optional)', 'sm:col-span-1')}
+          {nameField('lastName', 'Last Name *', 'Doe', 'sm:col-span-1')}
+        </div>
+      )}
+
+      {/* ── Other fields ── */}
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+        {field('phone', 'Phone', '(555) 555-5555')}
+        {field('vehicleInfo', 'Vehicle', '2020 Honda Civic')}
+        {field('vin', 'VIN', '1HGBH41JXMN109186')}
+        {field('mileage', 'Mileage', '45,000')}
+        {field('roNumber', 'RO #', 'RO-2024-001')}
+        {field('serviceAdvisor', roleLabel, `${roleLabel} name`, 'col-span-1 sm:col-span-2 lg:col-span-1')}
+        {showLocationFields && field('serviceLocation', 'Service Location', '123 Oak St, Knoxville, TN or driveway', 'col-span-1 sm:col-span-2')}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/quoteGenerator/QuoteSummary.tsx b/src/components/quoteGenerator/QuoteSummary.tsx
new file mode 100644
index 0000000..81a9d40
--- /dev/null
+++ b/src/components/quoteGenerator/QuoteSummary.tsx
@@ -0,0 +1,543 @@
+import { useState } from 'react';
+import {
+  Download, Printer, Save, Image, Share2, Check, Copy, Loader2,
+} from 'lucide-react';
+import { useNavigate } from 'react-router-dom';
+import { pb } from '../../lib/pocketbase';
+import { useQuoteStore } from '../../store/quote';
+import { useSettings } from '../../store/settings';
+import { useToast } from '../ui/Toast';
+import { downloadQuotePDF, printQuotePDF, generateQuotePDF } from '../../lib/pdf';
+import { downloadPdfAsImages } from '../../lib/pdf-to-images';
+import { computeQuoteTotals, computeSplitQuoteTotals } from '../../lib/totals';
+import { quoteWriteSchema } from '../../schemas/quote';
+import { sanitizeServices } from '../../lib/quoteHelpers';
+import { logError } from '../../lib/userMessages';
+import { openEmailDraft, openSmsDraft } from '../../lib/contactLinks';
+import { syncApprovedQuoteServicesToRO } from '../../lib/quoteRoSync';
+
+/* ── Helper: find or create a customer record in the customers collection ── */
+async function ensureCustomerRecord(customerInfo: {
+  name: string; firstName: string; lastName: string; phone: string; email?: string;
+}): Promise<string | undefined> {
+  if (!customerInfo.name.trim()) return undefined;
+  const userId = pb.authStore.model?.id;
+  if (!userId) return undefined;
+
+  // Check for existing customer by phone (strongest match)
+  const phoneDigits = customerInfo.phone.replace(/\D/g, '');
+  if (phoneDigits.length >= 4) {
+    try {
+      const existing = await pb.collection('customers').getFirstListItem(
+        `phone ~ "${phoneDigits}" && userId = "${userId}"`,
+        { fields: 'id', batch: 1 }
+      );
+      if (existing) return existing.id;
+    } catch { /* not found — proceed to create */ }
+  }
+
+  // Check by name
+  const nameQuery = customerInfo.name.replace(/"/g, '');
+  try {
+    const existing = await pb.collection('customers').getFirstListItem(
+      `name = "${nameQuery}" && userId = "${userId}"`,
+      { fields: 'id', batch: 1 }
+    );
+    if (existing) return existing.id;
+  } catch { /* not found — proceed to create */ }
+
+  // Create new customer record
+  try {
+    const created = await pb.collection('customers').create({
+      name: customerInfo.name,
+      firstName: customerInfo.firstName || customerInfo.name.split(' ')[0] || '',
+      lastName: customerInfo.lastName || customerInfo.name.split(' ').slice(1).join(' ') || '',
+      phone: customerInfo.phone,
+      email: customerInfo.email || '',
+      address: '',
+      notes: '',
+      userId,
+    });
+    return created.id;
+  } catch (err) {
+    logError('Failed to create customer record', err);
+    return undefined;
+  }
+}
+
+export function QuoteSummary({ editId, repairOriginId }: { editId?: string | null; repairOriginId?: string | null }) {
+  const { services, discount, setDiscount, customerInfo } = useQuoteStore();
+  const [saving, setSaving] = useState(false);
+  const [generating, setGenerating] = useState(false);
+  const [sharing, setSharing] = useState(false);
+  const [sendingNotify, setSendingNotify] = useState<'email' | 'sms' | null>(null);
+  const [shareUrl, setShareUrl] = useState<string | null>(null);
+  const navigate = useNavigate();
+  const { showToast } = useToast();
+  const settings = useSettings();
+
+  const hasApproved = services.some((s) => s.customerDecision === 'approved');
+  const hasPending = services.some((s) => s.customerDecision === 'pending');
+  const hasMixed = hasApproved && hasPending;
+  const t = computeQuoteTotals({ services, discount, settings });
+  const split = hasMixed ? computeSplitQuoteTotals(services, discount, settings) : null;
+  const sub = t.subtotal;
+  const discVal = t.discountAmount;
+  const shopCharge = t.shopCharge;
+  const tax = t.tax;
+  const grandTotal = t.total;
+  const originRepairOrderId = customerInfo.repairOrderId || repairOriginId || '';
+
+  const handleSave = async () => {
+    setSaving(true);
+    try {
+      // Auto-create or link customer record
+      let customerId = customerInfo.customerId;
+      if (!customerId) {
+        customerId = await ensureCustomerRecord({
+          name: customerInfo.name,
+          firstName: customerInfo.firstName,
+          lastName: customerInfo.lastName,
+          phone: customerInfo.phone,
+          email: customerInfo.email,
+        });
+        if (customerId) {
+          useQuoteStore.getState().setCustomerInfo({ customerId });
+        }
+      }
+
+      const data: Record<string, any> = {
+        userId: pb.authStore.model?.id,
+        customerId: customerId || '',
+        customerName: customerInfo.name,
+        customerPhone: customerInfo.phone,
+        vehicleInfo: customerInfo.vehicleInfo,
+        vin: customerInfo.vin,
+        mileage: customerInfo.mileage,
+        repairOrderNumber: customerInfo.roNumber,
+        serviceAdvisor: customerInfo.serviceAdvisor,
+        services: sanitizeServices(services),
+        discountValue: discount.value,
+        discountType: discount.type,
+        subtotal: sub,
+        tax,
+        total: grandTotal,
+        status: 'draft',
+        lastUpdated: new Date().toISOString(),
+        ...(originRepairOrderId ? { repairOrderId: originRepairOrderId } : {}),
+      };
+
+      const parsed = quoteWriteSchema.safeParse(data);
+      if (!parsed.success) {
+        console.warn('Quote schema validation failed:', JSON.stringify(parsed.error.issues, null, 2));
+        showToast(parsed.error.issues[0].message, 'error');
+        setSaving(false);
+        return;
+      }
+
+      if (editId) {
+        await pb.collection('quotes').update(editId, data);
+        showToast('Quote updated successfully', 'success');
+      } else {
+        data.createdAt = new Date().toISOString();
+        await pb.collection('quotes').create(data);
+        showToast('Quote saved successfully', 'success');
+      }
+
+      // ── Sync approved quote services back to originating RO ──
+      if (originRepairOrderId) {
+        try {
+          const syncedCount = await syncApprovedQuoteServicesToRO({ pb, repairOrderId: originRepairOrderId, quoteServices: services, settings });
+          if (syncedCount > 0) showToast(`Synced ${syncedCount} approved service(s) to RO`, 'success');
+        } catch (err) {
+          logError('Failed to sync approved services to RO', err);
+          showToast('Sync to RO failed: ' + String(err), 'error');
+        }
+      }
+
+      navigate('/');
+    } catch (err) {
+      logError('Failed to save quote', err);
+      showToast('Quote could not be saved. Please check the customer and services, then try again.', 'error');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handlePdf = async (mode: 'download' | 'print' | 'images') => {
+    setGenerating(true);
+    try {
+      const quote = { id: '', customerInfo, services, discount, createdAt: new Date().toISOString(), updatedAt: new Date().toISOString(), status: 'draft' as const };
+      if (mode === 'download') await downloadQuotePDF(quote as any, settings);
+      else if (mode === 'print') await printQuotePDF(quote as any, settings);
+      else {
+        const blob = await generateQuotePDF(quote as any, settings);
+        await downloadPdfAsImages(blob, customerInfo.name || 'Customer');
+      }
+    } catch (err: any) {
+      logError('Failed to export quote', err);
+      showToast('Quote could not be exported. Please try again.', 'error');
+    } finally {
+      setGenerating(false);
+    }
+  };
+
+  const ensureShareToken = async (): Promise<{ quoteId: string; token: string; url: string } | null> => {
+    try {
+      let quoteId = editId;
+      if (!quoteId) {
+        // Ensure customer record exists first
+        const customerId = customerInfo.customerId || (await ensureCustomerRecord({
+          name: customerInfo.name,
+          firstName: customerInfo.firstName,
+          lastName: customerInfo.lastName,
+          phone: customerInfo.phone,
+          email: customerInfo.email,
+        })) || undefined;
+
+        const data: Record<string, any> = {
+          userId: pb.authStore.model?.id,
+          customerId: customerId || '',
+          customerName: customerInfo.name,
+          customerPhone: customerInfo.phone,
+          vehicleInfo: customerInfo.vehicleInfo,
+          vin: customerInfo.vin,
+          mileage: customerInfo.mileage,
+          repairOrderNumber: customerInfo.roNumber,
+          serviceAdvisor: customerInfo.serviceAdvisor,
+          services: sanitizeServices(services),
+          discountValue: discount.value,
+          discountType: discount.type,
+          subtotal: sub,
+          tax,
+          total: grandTotal,
+          status: 'sent',
+          lastUpdated: new Date().toISOString(),
+          ...(originRepairOrderId ? { repairOrderId: originRepairOrderId } : {}),
+          createdAt: new Date().toISOString(),
+        };
+        const parsed = quoteWriteSchema.safeParse(data);
+        if (!parsed.success) {
+          console.warn('Quote schema validation failed in ensureShareToken:', JSON.stringify(parsed.error.issues, null, 2));
+          showToast(parsed.error.issues[0].message, 'error');
+          return null;
+        }
+        const created = await pb.collection('quotes').create(data);
+        quoteId = created.id;
+
+        // ── Sync approved quote services back to originating RO ──
+        if (originRepairOrderId) {
+          try {
+            const syncedCount = await syncApprovedQuoteServicesToRO({ pb, repairOrderId: originRepairOrderId, quoteServices: services, settings });
+            if (syncedCount > 0) showToast(`Synced ${syncedCount} approved service(s) to RO`, 'success');
+          } catch (err) {
+            logError('Failed to sync approved services to RO on share', err);
+          }
+        }
+      } else {
+        const data: Record<string, any> = {
+          userId: pb.authStore.model?.id,
+          customerId: customerInfo.customerId || '',
+          customerName: customerInfo.name,
+          customerPhone: customerInfo.phone,
+          vehicleInfo: customerInfo.vehicleInfo,
+          vin: customerInfo.vin,
+          mileage: customerInfo.mileage,
+          repairOrderNumber: customerInfo.roNumber,
+          serviceAdvisor: customerInfo.serviceAdvisor,
+          services: sanitizeServices(services),
+          discountValue: discount.value,
+          discountType: discount.type,
+          subtotal: sub,
+          tax,
+          total: grandTotal,
+          status: 'sent',
+          lastUpdated: new Date().toISOString(),
+          ...(originRepairOrderId ? { repairOrderId: originRepairOrderId } : {}),
+        };
+        const parsed = quoteWriteSchema.safeParse(data);
+        if (!parsed.success) {
+          console.warn('Quote schema validation failed in ensureShareToken update:', JSON.stringify(parsed.error.issues, null, 2));
+          showToast(parsed.error.issues[0].message, 'error');
+          return null;
+        }
+        await pb.collection('quotes').update(quoteId, data);
+
+        if (originRepairOrderId) {
+          try {
+            const syncedCount = await syncApprovedQuoteServicesToRO({ pb, repairOrderId: originRepairOrderId, quoteServices: services, settings });
+            if (syncedCount > 0) showToast(`Synced ${syncedCount} approved service(s) to RO`, 'success');
+          } catch (err) {
+            logError('Failed to sync approved services to RO on share update', err);
+          }
+        }
+      }
+      const record = await pb.collection('quotes').getOne(quoteId);
+      let token = (record as any).shareToken;
+      if (!token) {
+        token = crypto.randomUUID();
+        await pb.collection('quotes').update(quoteId, {
+          shareToken: token,
+          lastUpdated: new Date().toISOString(),
+        });
+      }
+      const url = `${window.location.origin}/quote/approve/${token}`;
+      return { quoteId, token, url };
+    } catch (err) {
+      logError('Failed to ensure share token', err);
+      return null;
+    }
+  };
+
+  const handleShare = async () => {
+    if (!customerInfo.name || services.length === 0) return;
+    setSharing(true);
+    setShareUrl(null);
+    try {
+      const result = await ensureShareToken();
+      if (!result) {
+        showToast('Could not create share link. Please try again.', 'error');
+        return;
+      }
+      await navigator.clipboard.writeText(result.url);
+      setShareUrl(result.url);
+      showToast('Share link copied to clipboard', 'success');
+    } finally {
+      setSharing(false);
+    }
+  };
+
+  const handleSendEmail = async () => {
+    if (!customerInfo.name || services.length === 0) return;
+    setSendingNotify('email');
+    try {
+      const result = await ensureShareToken();
+      if (!result) return;
+      const to = customerInfo.phone;
+      const subject = `Service Estimate for ${customerInfo.vehicleInfo || 'your vehicle'}`;
+      const body = [
+        `Hi ${customerInfo.name},`,
+        ``,
+        `Here is the link to review and approve your service estimate:`,
+        result.url,
+        ``,
+        `Please review each service and submit your decisions online.`,
+      ].join('\n');
+      openEmailDraft(to, subject, body);
+      showToast('Opened email draft.', 'success');
+    } finally {
+      setSendingNotify(null);
+    }
+  };
+
+  const handleSendSms = async () => {
+    if (!customerInfo.name || services.length === 0) return;
+    setSendingNotify('sms');
+    try {
+      const result = await ensureShareToken();
+      if (!result) return;
+      const to = customerInfo.phone;
+      const body = `Hi ${customerInfo.name}, review and approve your service estimate here: ${result.url}`;
+      openSmsDraft(to, body);
+      showToast('Opened SMS draft.', 'success');
+    } finally {
+      setSendingNotify(null);
+    }
+  };
+
+  return (
+    <div className="rounded-xl border border-gray-200 bg-gray-50 dark:border-gray-700 dark:bg-gray-800/50 p-5">
+      <h3 className="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-4">Quote Summary</h3>
+      <div className="space-y-2 text-sm">
+
+        {split ? (
+          <div className="space-y-3">
+            {/* ── Approved Service Totals ── */}
+            <div className="rounded-lg border border-green-200 bg-green-50/60 dark:border-green-800 dark:bg-green-900/15 px-3 py-2.5">
+              <p className="text-xs font-bold uppercase tracking-wider text-green-700 dark:text-green-400 mb-2">Already Approved Work</p>
+              <div className="space-y-1 text-xs">
+                <div className="flex justify-between">
+                  <span className="text-gray-500 dark:text-gray-400">Subtotal</span>
+                  <span className="font-medium text-gray-900 dark:text-gray-100">${split.approved.subtotal.toFixed(2)}</span>
+                </div>
+                {split.approved.shopCharge > 0 && (
+                  <div className="flex justify-between">
+                    <span className="text-gray-500 dark:text-gray-400">Shop Charge</span>
+                    <span className="text-gray-900 dark:text-gray-100">${split.approved.shopCharge.toFixed(2)}</span>
+                  </div>
+                )}
+                {settings.taxRate > 0 && (
+                  <div className="flex justify-between">
+                    <span className="text-gray-500 dark:text-gray-400">Tax ({settings.taxRate}%)</span>
+                    <span className="text-gray-900 dark:text-gray-100">${split.approved.tax.toFixed(2)}</span>
+                  </div>
+                )}
+                <div className="border-t border-green-200 dark:border-green-700 pt-1 mt-1 flex justify-between font-semibold text-green-700 dark:text-green-400">
+                  <span>Authorized Total</span>
+                  <span>${split.approved.total.toFixed(2)}</span>
+                </div>
+              </div>
+            </div>
+
+            {/* ── Additional Recommendations ── */}
+            <div className="rounded-lg border border-blue-200 bg-blue-50/60 dark:border-blue-800 dark:bg-blue-900/15 px-3 py-2.5">
+              <p className="text-xs font-bold uppercase tracking-wider text-blue-700 dark:text-blue-400 mb-2">Additional Recommendations</p>
+              <div className="space-y-1 text-xs">
+                <div className="flex justify-between">
+                  <span className="text-gray-500 dark:text-gray-400">Subtotal</span>
+                  <span className="font-medium text-gray-900 dark:text-gray-100">${split.pending.subtotal.toFixed(2)}</span>
+                </div>
+                {split.pending.shopCharge > 0 && (
+                  <div className="flex justify-between">
+                    <span className="text-gray-500 dark:text-gray-400">Estimated Shop Charge</span>
+                    <span className="text-gray-900 dark:text-gray-100">${split.pending.shopCharge.toFixed(2)}</span>
+                  </div>
+                )}
+                {settings.taxRate > 0 && (
+                  <div className="flex justify-between">
+                    <span className="text-gray-500 dark:text-gray-400">Tax ({settings.taxRate}%)</span>
+                    <span className="text-gray-900 dark:text-gray-100">${split.pending.tax.toFixed(2)}</span>
+                  </div>
+                )}
+                <div className="border-t border-blue-200 dark:border-blue-700 pt-1 mt-1 flex justify-between font-semibold text-blue-700 dark:text-blue-400">
+                  <span>Add-On Total If Approved</span>
+                  <span>${split.pending.total.toFixed(2)}</span>
+                </div>
+              </div>
+            </div>
+
+            {/* ── Combined Total if All Approved ── */}
+            <div className="rounded-lg border border-gray-200 bg-white px-3 py-2.5 dark:border-gray-700 dark:bg-gray-800">
+              <p className="mb-2 text-xs font-bold uppercase tracking-wider text-gray-700 dark:text-gray-300">Total If All Work Is Approved</p>
+              <div className="space-y-1 text-xs">
+                <div className="flex justify-between">
+                  <span className="text-gray-500 dark:text-gray-400">All Services Subtotal</span>
+                  <span className="font-medium text-gray-900 dark:text-gray-100">${split.combined.subtotal.toFixed(2)}</span>
+                </div>
+                {split.combined.discountAmount > 0 && (
+                  <div className="flex justify-between text-green-600 dark:text-green-400">
+                    <span>Discount</span>
+                    <span>-${split.combined.discountAmount.toFixed(2)}</span>
+                  </div>
+                )}
+                {split.combined.shopCharge > 0 && (
+                  <div className="flex justify-between">
+                    <span className="text-gray-500 dark:text-gray-400">Shop Charge, capped at ${settings.shopChargeCap.toFixed(2)}</span>
+                    <span className="text-gray-900 dark:text-gray-100">${split.combined.shopCharge.toFixed(2)}</span>
+                  </div>
+                )}
+                {settings.taxRate > 0 && (
+                  <div className="flex justify-between">
+                    <span className="text-gray-500 dark:text-gray-400">Tax @ {settings.taxRate}%</span>
+                    <span className="text-gray-900 dark:text-gray-100">${split.combined.tax.toFixed(2)}</span>
+                  </div>
+                )}
+                <div className="border-t border-gray-200 pt-1.5 mt-1.5 flex justify-between font-semibold dark:border-gray-700">
+                  <span className="text-gray-900 dark:text-white">Total If Approved</span>
+                  <span className="text-green-600 dark:text-green-400">${split.combined.total.toFixed(2)}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        ) : (
+          <div className="flex justify-between">
+            <span className="text-gray-500 dark:text-gray-400">Subtotal</span>
+            <span className="font-medium text-gray-900 dark:text-gray-100">${sub.toFixed(2)}</span>
+          </div>
+        )}
+
+        {/* ── Discount ── */}
+        <div className="flex items-center justify-between gap-2">
+          <span className="text-gray-500 dark:text-gray-400 shrink-0">Discount</span>
+          <div className="flex items-center gap-1">
+            <select
+              value={discount.type}
+              onChange={(e) => setDiscount(discount.value, e.target.value as any)}
+              className="text-xs rounded border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-600 dark:text-gray-300 py-0.5 px-1"
+            >
+              <option value="dollar">$</option>
+              <option value="percent">%</option>
+            </select>
+            <input
+              type="number"
+              value={discount.value || ''}
+              onChange={(e) => setDiscount(Number(e.target.value) || 0, discount.type)}
+              placeholder="0"
+              className="w-16 text-right rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-2 py-0.5 text-xs text-gray-900 dark:text-gray-100"
+            />
+          </div>
+        </div>
+        {!split && (
+          <>
+            {discVal > 0 && (
+              <div className="flex justify-between text-green-600"><span></span><span>−${discVal.toFixed(2)}</span></div>
+            )}
+            {shopCharge > 0 && (
+              <div className="flex justify-between"><span className="text-gray-500 dark:text-gray-400">Shop Charge</span><span className="text-gray-900 dark:text-gray-100">${shopCharge.toFixed(2)}</span></div>
+            )}
+            {settings.taxRate > 0 && (
+              <div className="flex justify-between"><span className="text-gray-500 dark:text-gray-400">Tax ({settings.taxRate}%)</span><span className="text-gray-900 dark:text-gray-100">${tax.toFixed(2)}</span></div>
+            )}
+            <div className="border-t border-gray-200 dark:border-gray-600 pt-2 mt-2 flex justify-between">
+              <span className="font-semibold text-gray-900 dark:text-white">TOTAL</span>
+              <span className="font-bold text-lg text-green-600 dark:text-green-400">${grandTotal.toFixed(2)}</span>
+            </div>
+          </>
+        )}
+      </div>
+      <div className="mt-5 space-y-2">
+        <button onClick={() => handlePdf('download')} disabled={generating || services.length === 0} className="w-full flex items-center justify-center gap-2 rounded-lg bg-green-600 px-4 py-2.5 text-sm font-semibold text-white hover:bg-green-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors">
+          <Download className="h-4 w-4" /> {generating ? 'Generating...' : 'Download PDF'}
+        </button>
+        <button onClick={() => handlePdf('print')} disabled={generating || services.length === 0} className="w-full flex items-center justify-center gap-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-4 py-2.5 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors">
+          <Printer className="h-4 w-4" /> Print
+        </button>
+        <button onClick={() => handlePdf('images')} disabled={generating || services.length === 0} className="w-full flex items-center justify-center gap-2 rounded-lg border border-blue-300 dark:border-blue-700 bg-blue-50 dark:bg-blue-900/20 px-4 py-2.5 text-sm font-medium text-blue-700 dark:text-blue-400 hover:bg-blue-100 dark:hover:bg-blue-900/30 disabled:opacity-50 disabled:cursor-not-allowed transition-colors">
+          <Image className="h-4 w-4" /> {generating ? 'Generating...' : 'Export as Images'}
+        </button>
+        <button onClick={handleSave} disabled={saving || !customerInfo.name} className="w-full flex items-center justify-center gap-2 rounded-lg border border-green-300 dark:border-green-700 bg-green-50 dark:bg-green-900/20 px-4 py-2.5 text-sm font-medium text-green-700 dark:text-green-400 hover:bg-green-100 dark:hover:bg-green-900/30 disabled:opacity-50 disabled:cursor-not-allowed transition-colors">
+          <Save className="h-4 w-4" /> {saving ? 'Saving...' : 'Save Quote'}
+        </button>
+        <button
+          onClick={handleShare}
+          disabled={sharing || !customerInfo.name || services.length === 0}
+          className="w-full flex items-center justify-center gap-2 rounded-lg border border-purple-300 dark:border-purple-700 bg-purple-50 dark:bg-purple-900/20 px-4 py-2.5 text-sm font-medium text-purple-700 dark:text-purple-400 hover:bg-purple-100 dark:hover:bg-purple-900/30 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+        >
+          <Share2 className="h-4 w-4" /> {sharing ? 'Creating Link...' : 'Share with Customer'}
+        </button>
+        {shareUrl && (
+          <div className="rounded-lg border border-purple-200 bg-purple-50/50 dark:border-purple-800 dark:bg-purple-900/10 px-3 py-2">
+            <div className="flex items-center gap-2">
+              <Check className="h-3.5 w-3.5 text-purple-600 dark:text-purple-400 shrink-0" />
+              <p className="text-xs text-purple-700 dark:text-purple-300 break-all">{shareUrl}</p>
+            </div>
+            <div className="mt-2 flex gap-2">
+              <button
+                onClick={handleSendEmail}
+                disabled={sendingNotify !== null}
+                className="flex items-center justify-center gap-1.5 rounded-md border border-green-300 dark:border-green-700 bg-green-50 dark:bg-green-900/20 px-3 py-1.5 text-xs font-medium text-green-700 dark:text-green-400 hover:bg-green-100 dark:hover:bg-green-900/30 disabled:opacity-50 transition-colors flex-1"
+              >
+                {sendingNotify === 'email' ? <Loader2 className="h-3 w-3 animate-spin" /> : null}
+                Send Email
+              </button>
+              <button
+                onClick={handleSendSms}
+                disabled={sendingNotify !== null}
+                className="flex items-center justify-center gap-1.5 rounded-md border border-blue-300 dark:border-blue-700 bg-blue-50 dark:bg-blue-900/20 px-3 py-1.5 text-xs font-medium text-blue-700 dark:text-blue-400 hover:bg-blue-100 dark:hover:bg-blue-900/30 disabled:opacity-50 transition-colors flex-1"
+              >
+                {sendingNotify === 'sms' ? <Loader2 className="h-3 w-3 animate-spin" /> : null}
+                Send Text
+              </button>
+            </div>
+            <button
+              onClick={() => { navigator.clipboard.writeText(shareUrl); showToast('Link copied', 'success'); }}
+              className="mt-1.5 flex items-center gap-1 text-xs font-medium text-purple-600 dark:text-purple-400 hover:text-purple-700 dark:hover:text-purple-300 transition-colors"
+            >
+              <Copy className="h-3 w-3" /> Copy again
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/quoteGenerator/RecentStatusBadge.tsx b/src/components/quoteGenerator/RecentStatusBadge.tsx
new file mode 100644
index 0000000..9b4cc84
--- /dev/null
+++ b/src/components/quoteGenerator/RecentStatusBadge.tsx
@@ -0,0 +1,9 @@
+import { RECENT_STATUS_COLORS, RECENT_STATUS_LABELS } from './types';
+
+export function RecentStatusBadge({ status }: { status: string }) {
+  return (
+    <span className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${RECENT_STATUS_COLORS[status] || RECENT_STATUS_COLORS.draft}`}>
+      {RECENT_STATUS_LABELS[status] || status}
+    </span>
+  );
+}
diff --git a/src/components/quoteGenerator/ServiceRow.tsx b/src/components/quoteGenerator/ServiceRow.tsx
new file mode 100644
index 0000000..128c21c
--- /dev/null
+++ b/src/components/quoteGenerator/ServiceRow.tsx
@@ -0,0 +1,365 @@
+import { memo } from 'react';
+import { Trash2, Sparkles, Loader2 } from 'lucide-react';
+import { PRIORITY_COLORS } from './types';
+import { useSettings } from '../../store/settings';
+import type { QuoteAuthorizationMethod, QuoteService } from '../../types';
+
+interface ServiceRowProps {
+  service: QuoteService;
+  expanded: boolean;
+  aiLoading: boolean;
+  customerName: string;
+  authorizationMethod: QuoteAuthorizationMethod;
+  onToggleExpand: () => void;
+  onAiWrite: () => void;
+  onToggleApproved: () => void;
+  onToggleDeclined: () => void;
+  onRemove: () => void;
+  onUpdate: (updates: Partial<QuoteService>) => void;
+}
+
+export const ServiceRow = memo(function ServiceRow({
+  service,
+  expanded,
+  aiLoading,
+  customerName,
+  authorizationMethod,
+  onToggleExpand,
+  onAiWrite,
+  onToggleApproved,
+  onToggleDeclined,
+  onRemove,
+  onUpdate,
+}: ServiceRowProps) {
+  const settings = useSettings();
+  return (
+    <div className={`rounded-lg transition-colors ${!service.approved && service.customerDecision === 'declined' ? 'opacity-50' : ''}`}>
+      <div className="flex items-center gap-3 px-4 py-2.5 hover:bg-gray-50 dark:hover:bg-gray-800/50 rounded-lg">
+        <button
+          onClick={onToggleApproved}
+          className={`shrink-0 w-5 h-5 rounded border-2 flex items-center justify-center transition-colors ${
+            service.approved ? 'bg-green-600 border-green-600 text-white' : 'border-gray-300 dark:border-gray-600 text-gray-300 dark:text-gray-600'
+          }`}
+        >
+          <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" /></svg>
+        </button>
+        <button
+          onClick={onToggleDeclined}
+          className={`shrink-0 w-5 h-5 rounded border-2 flex items-center justify-center transition-colors ${
+            service.customerDecision === 'declined' ? 'bg-red-600 border-red-600 text-white' : 'border-gray-300 dark:border-gray-600 text-gray-300 dark:text-gray-600'
+          }`}
+        >
+          <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M6 6l12 12M18 6L6 18" /></svg>
+        </button>
+        <div className="flex-1 min-w-0">
+          <p className="text-sm font-medium text-gray-900 dark:text-gray-100 truncate">{service.name}</p>
+        </div>
+        <span
+          onClick={onToggleExpand}
+          className="text-sm font-semibold text-green-600 dark:text-green-400 whitespace-nowrap cursor-pointer hover:underline"
+          title="Click to edit"
+        >${service.price.toFixed(2)}</span>
+        <button
+          onClick={onAiWrite}
+          disabled={aiLoading}
+          title="AI Write Explanation"
+          className="shrink-0 p-1.5 rounded-lg text-purple-500 hover:text-purple-600 hover:bg-purple-50 dark:hover:bg-purple-900/20 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          {aiLoading ? <Loader2 className="h-4 w-4 animate-spin" /> : <Sparkles className="h-4 w-4" />}
+        </button>
+        <button
+          onClick={onToggleExpand}
+          className={`shrink-0 p-1.5 rounded-lg text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors ${expanded ? 'rotate-180' : ''}`}
+        >
+          <svg className="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" /></svg>
+        </button>
+        <button onClick={onRemove} className="shrink-0 p-1.5 rounded-lg text-gray-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors">
+          <Trash2 className="h-4 w-4" />
+        </button>
+      </div>
+      {expanded && (
+        <div className="px-4 pb-3 pl-12 space-y-2">
+          {/* Row 1: Priority + Pricing Mode + Price + Shop Charge */}
+          <div className="flex gap-2 items-center flex-wrap">
+            {service.priority && (
+              <span className={`inline-block text-xs font-semibold px-2 py-0.5 rounded-full border ${PRIORITY_COLORS[service.priority] || PRIORITY_COLORS.MAINTENANCE}`}>
+                {service.priority.replace(/_/g, ' ')}
+              </span>
+            )}
+            {/* Pricing mode toggle */}
+            <div className="flex rounded-lg border border-gray-300 dark:border-gray-600 overflow-hidden text-xs">
+              <button
+                type="button"
+                onClick={() => {
+                  if (service.pricingMode !== 'full') {
+                    onUpdate({ pricingMode: 'full' });
+                  }
+                }}
+                className={`px-2.5 py-1 font-medium transition-colors ${
+                  (!service.pricingMode || service.pricingMode === 'full')
+                    ? 'bg-blue-600 text-white'
+                    : 'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-600'
+                }`}
+              >
+                Full
+              </button>
+              <button
+                type="button"
+                onClick={() => {
+                  if (service.pricingMode !== 'split') {
+                    const rate = settings.defaultLaborRate || 95;
+                    const hours = rate > 0 ? Math.round((service.price / rate) * 100) / 100 : 0;
+                    onUpdate({ pricingMode: 'split', laborHours: hours, laborRate: rate, partsCost: 0 });
+                  }
+                }}
+                className={`px-2.5 py-1 font-medium transition-colors ${
+                  service.pricingMode === 'split'
+                    ? 'bg-blue-600 text-white'
+                    : 'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-600'
+                }`}
+              >
+                Split
+              </button>
+            </div>
+            {service.pricingMode === 'split' ? (
+              <>
+                <div className="flex items-center gap-1">
+                  <label className="text-xs text-gray-500 dark:text-gray-400">Hrs</label>
+                  <input
+                    type="number"
+                    min="0"
+                    step="0.1"
+                    value={service.laborHours ?? ''}
+                    onChange={(e) => {
+                      const hrs = parseFloat(e.target.value) || 0;
+                      const rate = service.laborRate || settings.defaultLaborRate || 95;
+                      const parts = service.partsCost || 0;
+                      onUpdate({ laborHours: hrs, price: Math.round((hrs * rate + parts) * 100) / 100 });
+                    }}
+                    className="w-14 rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-2 py-1 text-sm text-gray-900 dark:text-gray-100 focus:border-green-500 focus:ring-1 focus:ring-green-500/20 focus:outline-none"
+                  />
+                </div>
+                <span className="text-xs text-gray-400">×</span>
+                <div className="flex items-center gap-1">
+                  <label className="text-xs text-gray-500 dark:text-gray-400">$</label>
+                  <input
+                    type="number"
+                    min="0"
+                    step="1"
+                    value={service.laborRate ?? ''}
+                    onChange={(e) => {
+                      const rate = parseFloat(e.target.value) || 0;
+                      const hrs = service.laborHours || 0;
+                      const parts = service.partsCost || 0;
+                      onUpdate({ laborRate: rate, price: Math.round((hrs * rate + parts) * 100) / 100 });
+                    }}
+                    className="w-16 rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-2 py-1 text-sm text-gray-900 dark:text-gray-100 focus:border-green-500 focus:ring-1 focus:ring-green-500/20 focus:outline-none"
+                  />
+                </div>
+                <span className="text-xs text-gray-400">+</span>
+                <div className="flex items-center gap-1">
+                  <label className="text-xs text-gray-500 dark:text-gray-400">Parts</label>
+                  <input
+                    type="number"
+                    min="0"
+                    step="0.01"
+                    value={service.partsCost ?? ''}
+                    onChange={(e) => {
+                      const parts = parseFloat(e.target.value) || 0;
+                      const hrs = service.laborHours || 0;
+                      const rate = service.laborRate || settings.defaultLaborRate || 95;
+                      onUpdate({ partsCost: parts, price: Math.round((hrs * rate + parts) * 100) / 100 });
+                    }}
+                    className="w-20 rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-2 py-1 text-sm text-gray-900 dark:text-gray-100 focus:border-green-500 focus:ring-1 focus:ring-green-500/20 focus:outline-none"
+                  />
+                </div>
+                <span className="text-xs font-semibold text-green-600 dark:text-green-400">
+                  = ${service.price.toFixed(2)}
+                </span>
+              </>
+            ) : (
+              <div className="flex items-center gap-1">
+                <label className="text-xs text-gray-500 dark:text-gray-400">$</label>
+                <input
+                  type="number"
+                  min="0"
+                  step="0.01"
+                  value={service.price}
+                  onChange={(e) => onUpdate({ price: parseFloat(e.target.value) || 0 })}
+                  className="w-24 rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-2 py-1 text-sm text-gray-900 dark:text-gray-100 focus:border-green-500 focus:ring-1 focus:ring-green-500/20 focus:outline-none"
+                />
+              </div>
+            )}
+            {/* Shop charge toggle */}
+            <label className="flex items-center gap-1.5 text-xs text-gray-600 dark:text-gray-400 cursor-pointer select-none">
+              <input
+                type="checkbox"
+                checked={service.applyShopCharge !== false}
+                onChange={(e) => onUpdate({ applyShopCharge: e.target.checked })}
+                className="h-3.5 w-3.5 rounded border-gray-300 text-green-600 focus:ring-green-500"
+              />
+              Shop charge
+            </label>
+            {service.customerDecision === 'approved' && (
+              <span className="text-xs bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300 px-2 py-0.5 rounded-full font-medium">Approved</span>
+            )}
+            {service.customerDecision === 'declined' && (
+              <span className="text-xs bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-300 px-2 py-0.5 rounded-full font-medium">Declined</span>
+            )}
+          </div>
+
+          {/* Recommendation */}
+          <input
+            value={service.recommendation || ''}
+            onChange={(e) => onUpdate({ recommendation: e.target.value })}
+            placeholder="Recommendation reason (e.g., worn to 3mm, due at 60K)"
+            className="w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-3 py-2 text-sm text-gray-900 dark:text-gray-100 placeholder-gray-400 focus:border-green-500 focus:ring-2 focus:ring-green-500/20 focus:outline-none"
+          />
+
+          {/* Quick Parts Toggle */}
+          <div className="pt-1">
+            <label className="text-xs font-medium text-gray-600 dark:text-gray-400 block mb-1.5">Quick Parts Toggle:</label>
+            <div className="flex flex-wrap gap-1.5">
+              <button
+                type="button"
+                onClick={() => onUpdate({ noPartsRequired: !service.noPartsRequired, partsNotInStock: false, aftermarketAvailable: false })}
+                className={`px-2 py-1 text-xs rounded border font-medium transition-colors ${service.noPartsRequired ? 'bg-gray-600 text-white border-gray-600' : 'bg-white text-gray-800 border-gray-300 hover:bg-gray-50 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-700'}`}
+              >Labor Only</button>
+              <button
+                type="button"
+                onClick={() => onUpdate({ noPartsRequired: false, partsNotInStock: false, aftermarketAvailable: false })}
+                className={`px-2 py-1 text-xs rounded border font-medium transition-colors ${!service.noPartsRequired && !service.partsNotInStock && !service.aftermarketAvailable ? 'bg-blue-600 text-white border-blue-600' : 'bg-white text-gray-800 border-gray-300 hover:bg-blue-50 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-blue-900/30'}`}
+              >In Stock</button>
+              <button
+                type="button"
+                onClick={() => onUpdate({ partsNotInStock: !service.partsNotInStock, noPartsRequired: false, aftermarketAvailable: false })}
+                className={`px-2 py-1 text-xs rounded border font-medium transition-colors ${service.partsNotInStock ? 'bg-orange-600 text-white border-orange-600' : 'bg-white text-gray-800 border-gray-300 hover:bg-orange-50 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-orange-900/30'}`}
+              >Need Order</button>
+              <button
+                type="button"
+                onClick={() => onUpdate({ aftermarketAvailable: !service.aftermarketAvailable, noPartsRequired: false, partsNotInStock: false })}
+                className={`px-2 py-1 text-xs rounded border font-medium transition-colors ${service.aftermarketAvailable ? 'bg-green-600 text-white border-green-600' : 'bg-white text-gray-800 border-gray-300 hover:bg-green-50 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-green-900/30'}`}
+              >Aftermarket</button>
+            </div>
+          </div>
+
+          {/* Parts Status Visual Display */}
+          {service.noPartsRequired ? (
+            <div className="p-3 bg-gray-50 dark:bg-gray-900/20 rounded-md border border-gray-200 dark:border-gray-800">
+              <p className="text-sm font-bold text-gray-700 dark:text-gray-300">Labor-Only Service</p>
+              <p className="text-xs text-gray-600 dark:text-gray-400">No parts required for this service.</p>
+            </div>
+          ) : service.aftermarketAvailable ? (
+            <div className="p-3 bg-green-50 dark:bg-green-900/20 rounded-md border border-green-200 dark:border-green-800">
+              <p className="text-sm font-bold text-green-700 dark:text-green-300">Aftermarket Parts Will Be Used</p>
+              {service.aftermarketPartsList && (
+                <p className="text-sm text-green-600 dark:text-green-400 mt-1"><strong>Parts:</strong> {service.aftermarketPartsList}</p>
+              )}
+              <p className="text-xs text-green-600 dark:text-green-400 mt-1">Aftermarket parts will be used for this service.</p>
+              <div className="mt-2">
+                <label className="text-xs text-green-600 dark:text-green-400">Parts List:</label>
+                <input
+                  type="text"
+                  value={service.aftermarketPartsList || ''}
+                  onChange={(e) => onUpdate({ aftermarketPartsList: e.target.value })}
+                  placeholder="e.g., Duralast Gold Ceramic Pads, Cardone Reman Calipers"
+                  className="w-full mt-1 rounded border border-green-300 dark:border-green-700 bg-white dark:bg-gray-800 px-2 py-1.5 text-xs text-gray-900 dark:text-gray-100 focus:border-green-500 focus:ring-1 focus:ring-green-500/20 focus:outline-none"
+                />
+              </div>
+            </div>
+          ) : service.partsNotInStock ? (
+            <div className="p-3 bg-orange-50 dark:bg-orange-900/20 rounded-md border border-orange-200 dark:border-orange-800">
+              <p className="text-sm font-bold text-orange-700 dark:text-orange-300">Parts Status: Need to Order</p>
+              {service.partsDeliveryTime && (
+                <p className="text-sm text-orange-600 dark:text-orange-400 mb-1"><strong>Estimated Delivery:</strong> {service.partsDeliveryTime}</p>
+              )}
+              <p className="text-xs text-orange-600 dark:text-orange-400">Parts for this service are not currently in stock and will need to be ordered.</p>
+              <div className="mt-2">
+                <label className="text-xs text-orange-600 dark:text-orange-400">Estimated Delivery Time:</label>
+                <input
+                  type="text"
+                  value={service.partsDeliveryTime || ''}
+                  onChange={(e) => onUpdate({ partsDeliveryTime: e.target.value })}
+                  placeholder="e.g., 2-3 business days"
+                  className="w-full mt-1 rounded border border-orange-300 dark:border-orange-700 bg-white dark:bg-gray-800 px-2 py-1.5 text-xs text-gray-900 dark:text-gray-100 focus:border-orange-500 focus:ring-1 focus:ring-orange-500/20 focus:outline-none"
+                />
+              </div>
+            </div>
+          ) : (
+            <div className="p-3 bg-blue-50 dark:bg-blue-900/20 rounded-md border border-blue-200 dark:border-blue-800">
+              <p className="text-sm font-bold text-blue-700 dark:text-blue-300">Parts In Stock</p>
+              <p className="text-xs text-blue-600 dark:text-blue-400">All required parts are available and ready for installation.</p>
+            </div>
+          )}
+
+          {/* Customer Explanation */}
+          <textarea
+            value={service.explanation || ''}
+            onChange={(e) => onUpdate({ explanation: e.target.value })}
+            placeholder="AI-generated explanation will appear here. Click the Sparkles icon to generate."
+            rows={3}
+            className="w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-3 py-2 text-sm text-gray-900 dark:text-gray-100 placeholder-gray-400 focus:border-green-500 focus:ring-2 focus:ring-green-500/20 focus:outline-none resize-y"
+          />
+
+          {/* Customer Decision */}
+          <div className="pt-1 border-t border-gray-200 dark:border-gray-700">
+            <label className="text-xs font-medium text-gray-600 dark:text-gray-400 block mb-1.5">Customer Decision:</label>
+            <div className="flex flex-wrap gap-1.5">
+              <button
+                type="button"
+                onClick={() => onUpdate({ customerDecision: 'approved', approved: true, authorizedBy: service.authorizedBy || customerName || '', authorizedAt: new Date().toISOString(), authorizedMethod: authorizationMethod })}
+                className={`px-2 py-1 text-xs rounded border font-medium transition-colors ${service.customerDecision === 'approved' ? 'bg-green-600 text-white border-green-600' : 'bg-white text-gray-800 border-gray-300 hover:bg-green-50 hover:border-green-400 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600'}`}
+              >Approve</button>
+              <button
+                type="button"
+                onClick={() => onUpdate({ customerDecision: 'declined', approved: false, authorizedBy: service.authorizedBy || customerName || '', authorizedAt: new Date().toISOString(), authorizedMethod: authorizationMethod })}
+                className={`px-2 py-1 text-xs rounded border font-medium transition-colors ${service.customerDecision === 'declined' ? 'bg-red-600 text-white border-red-600' : 'bg-white text-gray-800 border-gray-300 hover:bg-red-50 hover:border-red-400 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600'}`}
+              >Decline</button>
+              <button
+                type="button"
+                onClick={() => onUpdate({ customerDecision: 'pending', approved: false, authorizedBy: undefined, authorizedAt: undefined, authorizedMethod: undefined })}
+                className={`px-2 py-1 text-xs rounded border font-medium transition-colors ${(!service.customerDecision || service.customerDecision === 'pending') ? 'bg-yellow-600 text-white border-yellow-600' : 'bg-white text-gray-800 border-gray-300 hover:bg-yellow-50 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600'}`}
+              >Pending</button>
+            </div>
+
+            {(service.customerDecision === 'approved' || service.customerDecision === 'declined') && (
+              <div className="mt-2 grid gap-2">
+                <div>
+                  <label className="text-[10px] font-medium text-gray-500 dark:text-gray-400">Authorized by</label>
+                  <input
+                    type="text"
+                    value={service.authorizedBy || ''}
+                    onChange={(e) => onUpdate({ authorizedBy: e.target.value })}
+                    placeholder={customerName || 'Customer name'}
+                    className="w-full mt-0.5 rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-2 py-1 text-xs text-gray-900 dark:text-gray-100 focus:border-green-500 focus:ring-1 focus:ring-green-500/20 focus:outline-none"
+                  />
+                </div>
+                {service.authorizedAt && (
+                  <div>
+                    <span className="text-[10px] text-gray-400 dark:text-gray-500">
+                      {service.customerDecision === 'approved' ? 'Approved' : 'Declined'} on {new Date(service.authorizedAt).toLocaleDateString()} at {new Date(service.authorizedAt).toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' })}
+                    </span>
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+
+          {/* Technician Notes (internal only) */}
+          <div className="border-t border-gray-200 dark:border-gray-700 pt-2">
+            <details className="text-xs" open={!!service.technicianNotes}>
+              <summary className="text-gray-400 dark:text-gray-500 cursor-pointer hover:text-gray-600 dark:hover:text-gray-300 select-none">Tech Notes (Internal)</summary>
+              <textarea
+                value={service.technicianNotes || ''}
+                onChange={(e) => onUpdate({ technicianNotes: e.target.value })}
+                placeholder="Internal notes — not shown to customer..."
+                rows={2}
+                className="mt-1.5 w-full rounded border border-amber-200 dark:border-amber-800 bg-amber-50 dark:bg-amber-900/20 px-3 py-2 text-xs text-amber-800 dark:text-amber-200 placeholder-amber-400 dark:placeholder-amber-600 focus:border-amber-500 focus:ring-1 focus:ring-amber-500/20 focus:outline-none resize-y"
+              />
+            </details>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+});
diff --git a/src/components/quoteGenerator/ServiceSearch.tsx b/src/components/quoteGenerator/ServiceSearch.tsx
new file mode 100644
index 0000000..7d638cb
--- /dev/null
+++ b/src/components/quoteGenerator/ServiceSearch.tsx
@@ -0,0 +1,113 @@
+import { useState, useEffect, useRef } from 'react';
+import { Search, Plus } from 'lucide-react';
+import { pb } from '../../lib/pocketbase';
+import { useQuoteStore } from '../../store/quote';
+import { loadSettings } from '../../lib/settings';
+import type { Service } from '../../types';
+
+export function ServiceSearch() {
+  const [query, setQuery] = useState('');
+  const [results, setResults] = useState<Service[]>([]);
+  const [allServices, setAllServices] = useState<Service[]>([]);
+  const [open, setOpen] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const { addService } = useQuoteStore();
+
+  useEffect(() => {
+    const load = async () => {
+      try {
+        const userId = pb.authStore.model?.id;
+        if (!userId) return;
+        const records = await pb.collection('services').getFullList({ filter: `userId="${userId}"`, batch: 500 });
+        setAllServices(records.map((r: any) => ({ id: r.id, name: r.name, price: r.price || 0, explanation: r.explanation, recommendation: r.recommendation, applyShopCharge: r.applyShopCharge, laborHours: r.laborHours || undefined, laborRate: r.laborRate || undefined, partsCost: r.partsCost || undefined, pricingMode: r.pricingMode || undefined })));
+      } catch {}
+    };
+    load();
+  }, []);
+
+  useEffect(() => {
+    if (debounceRef.current) clearTimeout(debounceRef.current);
+    if (!query.trim()) { setResults([]); setLoading(false); return; }
+    setLoading(true);
+    debounceRef.current = setTimeout(() => {
+      const filtered = allServices
+        .filter((s) => s.name.toLowerCase().includes(query.toLowerCase()))
+        .slice(0, 8);
+      setResults(filtered);
+      setLoading(false);
+    }, 120);
+    return () => {
+      if (debounceRef.current) clearTimeout(debounceRef.current);
+    };
+  }, [query, allServices]);
+
+  useEffect(() => {
+    const handler = (e: MouseEvent) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node) && inputRef.current && !inputRef.current.contains(e.target as Node)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener('mousedown', handler);
+    return () => document.removeEventListener('mousedown', handler);
+  }, []);
+
+  const handleAdd = (service: Service) => {
+    addService({ ...service, selected: true, approved: false, customerDecision: 'pending', priority: undefined, applyShopCharge: true, pricingMode: service.pricingMode || loadSettings().defaultPricingMode });
+    setQuery('');
+    setOpen(false);
+  };
+
+  return (
+    <div className="relative">
+      <div className="relative">
+        <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400" />
+        <input
+          ref={inputRef}
+          value={query}
+          onChange={(e) => { setQuery(e.target.value); setOpen(true); }}
+          onFocus={() => { if (query) setOpen(true); }}
+          placeholder="Search services..."
+          className="w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 pl-10 pr-4 py-2.5 text-sm text-gray-900 dark:text-gray-100 placeholder-gray-400 focus:border-green-500 focus:ring-2 focus:ring-green-500/20 focus:outline-none"
+        />
+      </div>
+      {open && (query.trim() || loading) && (
+        <div ref={dropdownRef} className="absolute z-50 mt-1 w-full rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 shadow-xl max-h-64 overflow-y-auto">
+          {loading ? (
+            <div className="p-4 text-center text-sm text-gray-400">Searching...</div>
+          ) : results.length === 0 ? (
+            <div className="p-4 text-center text-sm text-gray-400">No matching services</div>
+          ) : (
+            results.map((s) => (
+              <button
+                key={s.id}
+                onClick={() => handleAdd(s)}
+                className="w-full text-left px-4 py-2.5 text-sm hover:bg-gray-50 dark:hover:bg-gray-700 flex justify-between items-center"
+              >
+                <span className="text-gray-900 dark:text-gray-100">{s.name}</span>
+                <span className="text-green-600 dark:text-green-400 font-medium">${s.price.toFixed(2)}</span>
+              </button>
+            ))
+          )}
+          {query.trim() && (
+            <button
+              onClick={() => {
+                const customService: Service = {
+                  id: `custom-${Date.now()}`,
+                  name: query.trim(),
+                  price: 0,
+                };
+                handleAdd(customService);
+              }}
+              className="w-full text-left px-4 py-2.5 text-sm text-green-600 dark:text-green-400 hover:bg-gray-50 dark:hover:bg-gray-700 border-t border-gray-100 dark:border-gray-700 font-medium"
+            >
+              <Plus className="inline h-3 w-3 mr-1" /> Add &ldquo;{query}&rdquo; as custom service
+            </button>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/quoteGenerator/ServicesTable.tsx b/src/components/quoteGenerator/ServicesTable.tsx
new file mode 100644
index 0000000..de8379a
--- /dev/null
+++ b/src/components/quoteGenerator/ServicesTable.tsx
@@ -0,0 +1,161 @@
+import { useState, useCallback } from 'react';
+import { FileText } from 'lucide-react';
+import { useQuoteStore } from '../../store/quote';
+import { useToast } from '../ui/Toast';
+import { aiWriteExplanation } from '../../lib/ai';
+import { logError } from '../../lib/userMessages';
+import { ServiceRow } from './ServiceRow';
+import type { QuoteAuthorizationMethod, QuoteService } from '../../types';
+
+const authorizationOptions: Array<{ value: QuoteAuthorizationMethod; label: string }> = [
+  { value: 'in_person', label: 'In Person' },
+  { value: 'text', label: 'Text' },
+  { value: 'phone', label: 'Call' },
+];
+
+export function ServicesTable() {
+  const {
+    services,
+    removeService,
+    customerInfo,
+    currentWorkAuthorizationMethod,
+    additionalWorkAuthorizationMethod,
+    setCurrentWorkAuthorizationMethod,
+    setAdditionalWorkAuthorizationMethod,
+  } = useQuoteStore();
+  const updateService = useQuoteStore((s) => s.updateService);
+  const [expanded, setExpanded] = useState<Record<string, boolean>>({});
+  const [aiLoading, setAiLoading] = useState<Record<string, boolean>>({});
+  const { showToast } = useToast();
+  const approved = services.filter((s) => s.customerDecision === 'approved');
+  const pending = services.filter((s) => s.customerDecision === 'pending');
+  const declined = services.filter((s) => s.customerDecision === 'declined');
+
+  const handleAiWrite = useCallback(async (svc: QuoteService) => {
+    setAiLoading((prev) => ({ ...prev, [svc.id]: true }));
+    try {
+      const result = await aiWriteExplanation({
+        serviceName: svc.name,
+        recommendation: svc.recommendation || '',
+        technicianNotes: svc.technicianNotes,
+      });
+      if (result) {
+        updateService(svc.id, {
+          explanation: result.explanation,
+          priority: result.level as QuoteService['priority'],
+        });
+        setExpanded((prev) => ({ ...prev, [svc.id]: true }));
+        showToast(`AI explanation generated for ${svc.name}`, 'success');
+      } else {
+        showToast('AI Write returned no result', 'error');
+      }
+    } catch (err) {
+      logError('Failed to generate AI explanation', err);
+      showToast('AI explanation could not be generated. Please try again.', 'error');
+    } finally {
+      setAiLoading((prev) => ({ ...prev, [svc.id]: false }));
+    }
+  }, [updateService, showToast]);
+
+  if (services.length === 0) {
+    return (
+      <div className="rounded-xl border border-dashed border-gray-300 dark:border-gray-700 p-8 text-center">
+        <FileText className="mx-auto h-8 w-8 text-gray-300 dark:text-gray-600" />
+        <p className="mt-2 text-sm text-gray-400">No services have been added to this quote yet. Search the catalog above to add billable work items.</p>
+      </div>
+    );
+  }
+
+  const handleApproveAll = () => {
+    const now = new Date().toISOString();
+    const notApproved = services.filter((s) => s.customerDecision !== 'approved');
+    notApproved.forEach((s) => updateService(s.id, { approved: true, customerDecision: 'approved', authorizedBy: s.authorizedBy || customerInfo.name || '', authorizedAt: now, authorizedMethod: additionalWorkAuthorizationMethod }));
+  };
+
+  const decideService = (service: QuoteService, decision: 'approved' | 'declined') => {
+    const isAdditionalRecommendation = service.customerDecision === 'pending';
+    const method = isAdditionalRecommendation ? additionalWorkAuthorizationMethod : currentWorkAuthorizationMethod;
+    updateService(service.id, {
+      customerDecision: decision,
+      approved: decision === 'approved',
+      authorizedBy: service.authorizedBy || customerInfo.name || '',
+      authorizedAt: new Date().toISOString(),
+      authorizedMethod: method,
+    });
+  };
+
+  const resetServiceDecision = (service: QuoteService) => {
+    updateService(service.id, { customerDecision: 'pending', approved: false, authorizedBy: undefined, authorizedAt: undefined, authorizedMethod: undefined });
+  };
+
+  const notApprovedCount = services.filter((s) => s.customerDecision !== 'approved').length;
+
+  const makeRowProps = (s: QuoteService) => ({
+    service: s,
+    expanded: expanded[s.id] ?? false,
+    aiLoading: aiLoading[s.id] ?? false,
+    customerName: customerInfo.name,
+    authorizationMethod: s.customerDecision === 'pending' ? additionalWorkAuthorizationMethod : currentWorkAuthorizationMethod,
+    onToggleExpand: () => setExpanded((prev) => ({ ...prev, [s.id]: !prev[s.id] })),
+    onAiWrite: () => handleAiWrite(s),
+    onToggleApproved: () => s.approved ? resetServiceDecision(s) : decideService(s, 'approved'),
+    onToggleDeclined: () => s.customerDecision === 'declined' ? resetServiceDecision(s) : decideService(s, 'declined'),
+    onRemove: () => removeService(s.id),
+    onUpdate: (updates: Partial<QuoteService>) => updateService(s.id, updates),
+  });
+
+  return (
+    <div className="space-y-1">
+      <div className="mb-3 grid gap-2 rounded-xl border border-gray-200 bg-gray-50 p-3 dark:border-gray-700 dark:bg-gray-900/40 sm:grid-cols-2">
+        <label className="text-xs font-medium text-gray-600 dark:text-gray-300">
+          Already approved/declined work authorized by
+          <select
+            value={currentWorkAuthorizationMethod}
+            onChange={(e) => setCurrentWorkAuthorizationMethod(e.target.value as QuoteAuthorizationMethod)}
+            className="mt-1 w-full rounded border border-gray-300 bg-white px-2 py-1.5 text-xs text-gray-900 focus:border-green-500 focus:outline-none focus:ring-1 focus:ring-green-500/20 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100"
+          >
+            {authorizationOptions.map((option) => <option key={option.value} value={option.value}>{option.label}</option>)}
+          </select>
+        </label>
+        <label className="text-xs font-medium text-gray-600 dark:text-gray-300">
+          Additional recommendations authorized by
+          <select
+            value={additionalWorkAuthorizationMethod}
+            onChange={(e) => setAdditionalWorkAuthorizationMethod(e.target.value as QuoteAuthorizationMethod)}
+            className="mt-1 w-full rounded border border-gray-300 bg-white px-2 py-1.5 text-xs text-gray-900 focus:border-green-500 focus:outline-none focus:ring-1 focus:ring-green-500/20 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100"
+          >
+            {authorizationOptions.map((option) => <option key={option.value} value={option.value}>{option.label}</option>)}
+          </select>
+        </label>
+      </div>
+      {notApprovedCount > 0 && (
+        <div className="flex justify-end mb-2">
+          <button
+            onClick={handleApproveAll}
+            className="px-3 py-1 text-xs font-medium rounded border border-green-300 dark:border-green-700 text-green-700 dark:text-green-400 bg-green-50 dark:bg-green-900/20 hover:bg-green-100 dark:hover:bg-green-900/40 transition-colors"
+          >
+            Approve All ({notApprovedCount})
+          </button>
+        </div>
+      )}
+      {approved.length > 0 && (
+        <div>
+          <p className="text-xs font-medium text-green-600 dark:text-green-400 uppercase tracking-wider mb-2 px-1">Approved ({approved.length})</p>
+          {approved.map((s) => <ServiceRow key={s.id} {...makeRowProps(s)} />)}
+        </div>
+      )}
+      {pending.length > 0 && (
+        <div className={approved.length > 0 ? 'mt-4' : ''}>
+          <p className="text-xs font-medium text-gray-400 uppercase tracking-wider mb-2 px-1">Additional Recommendations ({pending.length})</p>
+          {pending.map((s) => <ServiceRow key={s.id} {...makeRowProps(s)} />)}
+        </div>
+      )}
+      {declined.length > 0 && (
+        <div className={approved.length > 0 || pending.length > 0 ? 'mt-4' : ''}>
+          <p className="text-xs font-medium text-red-500 uppercase tracking-wider mb-2 px-1">Declined ({declined.length})</p>
+          {declined.map((s) => <ServiceRow key={s.id} {...makeRowProps(s)} />)}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/quoteGenerator/index.ts b/src/components/quoteGenerator/index.ts
new file mode 100644
index 0000000..d1bc069
--- /dev/null
+++ b/src/components/quoteGenerator/index.ts
@@ -0,0 +1,16 @@
+export type {
+  QuoteRecord,
+  RecentQuoteFilter,
+  RecentQuoteSort,
+} from './types';
+export {
+  RECENT_QUOTE_FILTERS,
+  PRIORITY_COLORS,
+} from './types';
+
+export { RecentStatusBadge } from './RecentStatusBadge';
+export { CustomerInfoPanel } from './CustomerInfoPanel';
+export { ServiceSearch } from './ServiceSearch';
+export { ServiceRow } from './ServiceRow';
+export { ServicesTable } from './ServicesTable';
+export { QuoteSummary } from './QuoteSummary';
diff --git a/src/components/quoteGenerator/types.ts b/src/components/quoteGenerator/types.ts
new file mode 100644
index 0000000..e945975
--- /dev/null
+++ b/src/components/quoteGenerator/types.ts
@@ -0,0 +1,47 @@
+/* ── Types & Constants ──────────────────────────────── */
+
+export interface QuoteRecord {
+  id: string;
+  customerName: string;
+  vehicleInfo: string;
+  roNumber: string;
+  repairOrderNumber?: string;
+  total: number;
+  approvedTotal: number;
+  declinedTotal: number;
+  hasPending: boolean;
+  status: 'draft' | 'sent' | 'approved' | 'declined';
+  createdAt: string;
+  lastUpdated?: string;
+}
+
+export type RecentQuoteFilter = 'all' | 'draft' | 'pending' | 'approved' | 'declined';
+export type RecentQuoteSort = 'newest' | 'oldest' | 'highest-total' | 'customer-asc';
+
+export const RECENT_QUOTE_FILTERS: { value: RecentQuoteFilter; label: string }[] = [
+  { value: 'all', label: 'All' },
+  { value: 'draft', label: 'Draft' },
+  { value: 'pending', label: 'Pending' },
+  { value: 'approved', label: 'Approved' },
+  { value: 'declined', label: 'Declined' },
+];
+
+export const PRIORITY_COLORS: Record<string, string> = {
+  CRITICAL_SAFETY: 'bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-300 border-red-300 dark:border-red-700',
+  SAFETY_CONCERN: 'bg-orange-100 dark:bg-orange-900/30 text-orange-700 dark:text-orange-300 border-orange-300 dark:border-orange-700',
+  RECOMMENDED: 'bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 border-blue-300 dark:border-blue-700',
+  MAINTENANCE: 'bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300 border-green-300 dark:border-green-700',
+  OPTIONAL: 'bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 border-gray-300 dark:border-gray-600',
+};
+
+export const RECENT_STATUS_COLORS: Record<string, string> = {
+  approved: 'bg-green-100 text-green-800 dark:bg-green-900/40 dark:text-green-300',
+  sent: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/40 dark:text-yellow-300',
+  pending: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/40 dark:text-yellow-300',
+  declined: 'bg-red-100 text-red-800 dark:bg-red-900/40 dark:text-red-300',
+  draft: 'bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400',
+};
+
+export const RECENT_STATUS_LABELS: Record<string, string> = {
+  approved: 'Approved', sent: 'Pending', pending: 'Pending', declined: 'Declined', draft: 'Draft',
+};
diff --git a/src/components/repairOrders/CompletedRow.tsx b/src/components/repairOrders/CompletedRow.tsx
new file mode 100644
index 0000000..51f8fe3
--- /dev/null
+++ b/src/components/repairOrders/CompletedRow.tsx
@@ -0,0 +1,103 @@
+import { memo } from 'react';
+import { CheckSquare, Square, ChevronRight } from 'lucide-react';
+import { getStatusConfig } from '../../lib/status';
+import { useSettings } from '../../store/settings';
+import { formatDateTime, formatCurrency } from '../../lib/format';
+import { isVoided } from '../../lib/roEvents';
+import {
+  getCompletedMetricDate,
+  displayCustomerName,
+  ratingLabel,
+} from '../../lib/repairOrders';
+import type { RepairOrder, CustomerType } from '../../types';
+import { CustomerTypeBadge } from './CustomerTypeBadge';
+import { StatusBadge } from './StatusBadge';
+import { TechNames } from './TechNames';
+
+export const CompletedRow = memo(function CompletedRow({
+  ro,
+  selected,
+  onToggleSelect,
+  onOpen,
+  onToggleCustomerType,
+  techNames,
+}: {
+  ro: RepairOrder;
+  selected: boolean;
+  onToggleSelect: () => void;
+  onOpen: () => void;
+  onToggleCustomerType: (id: string, currentType?: CustomerType) => void;
+  techNames: string[];
+}) {
+  const voided = isVoided(ro);
+  const completedDate = getCompletedMetricDate(ro);
+  const rowClass = `
+    cursor-pointer transition-colors hover:bg-gray-50 dark:hover:bg-gray-700/50
+    ${voided ? 'opacity-50 hover:opacity-70' : ''}
+    ${selected ? 'ring-2 ring-inset ring-blue-400' : ''}
+  `;
+
+  return (
+    <tr
+      onClick={(e) => {
+        const target = e.target as HTMLElement;
+        if (target.closest('[data-no-open]') || target.closest('button')) return;
+        onOpen();
+      }}
+      className={rowClass}
+    >
+      <td className="px-2 py-2.5" data-no-open>
+        <button
+          onClick={(e) => { e.stopPropagation(); onToggleSelect(); }}
+          className="text-gray-400 hover:text-blue-600 dark:hover:text-blue-400"
+          title={selected ? 'Deselect' : 'Select for bulk action'}
+        >
+          {selected
+            ? <CheckSquare className="h-4 w-4 text-blue-600 dark:text-blue-400" />
+            : <Square className="h-4 w-4" />}
+        </button>
+      </td>
+      <td className="px-3 py-2.5 font-mono text-xs text-gray-500 dark:text-gray-400">
+        {ro.roNumber || `#${ro.id.slice(0, 8)}`}
+      </td>
+      <td className="px-3 py-2.5">
+        <div className="flex items-center gap-2">
+          <span className="font-medium text-gray-900 dark:text-white">{displayCustomerName(ro.customerName)}</span>
+          <CustomerTypeBadge
+            customerType={ro.customerType}
+            onClick={() => onToggleCustomerType(ro.id, ro.customerType)}
+          />
+        </div>
+      </td>
+      <td className="max-w-[220px] px-3 py-2.5 text-gray-600 dark:text-gray-400">
+        <div className="space-y-0.5">
+          <p className="truncate">{ro.vehicleInfo || '—'}</p>
+          {ro.serviceLocation && (
+            <p className="truncate text-xs text-sky-600 dark:text-sky-400">{ro.serviceLocation}</p>
+          )}
+          {typeof ro.tripMiles === 'number' && ro.tripMiles > 0 && (
+            <p className="text-xs text-purple-600 dark:text-purple-400">{ro.tripMiles} mi trip</p>
+          )}
+        </div>
+      </td>
+      <td className="whitespace-nowrap px-3 py-2.5 text-sm text-gray-600 dark:text-gray-400">
+        {completedDate ? formatDateTime(completedDate) : '—'}
+      </td>
+      <td className="px-3 py-2.5">
+        <StatusBadge status={voided ? 'voided' : (ro.status || '')} config={getStatusConfig(useSettings())} />
+      </td>
+      <td className="whitespace-nowrap px-3 py-2.5 text-sm font-medium text-gray-900 dark:text-white">
+        {formatCurrency(ro.total || 0)}
+      </td>
+      <td className="whitespace-nowrap px-3 py-2.5 text-sm text-gray-600 dark:text-gray-400">
+        {ratingLabel(ro.satisfaction)}
+      </td>
+      <td className="whitespace-nowrap px-3 py-2.5 text-center">
+        <TechNames names={techNames} />
+      </td>
+      <td className="px-3 py-2.5 text-right">
+        <ChevronRight className="h-4 w-4 text-gray-400" />
+      </td>
+    </tr>
+  );
+});
diff --git a/src/components/repairOrders/CustomerTypeBadge.tsx b/src/components/repairOrders/CustomerTypeBadge.tsx
new file mode 100644
index 0000000..1e675fc
--- /dev/null
+++ b/src/components/repairOrders/CustomerTypeBadge.tsx
@@ -0,0 +1,36 @@
+import { UserCheck, UserX } from 'lucide-react';
+import { getCustomerTypeLabels } from '../../lib/settings';
+import { useSettings } from '../../store/settings';
+import type { CustomerType } from '../../types';
+
+export function CustomerTypeBadge({
+  customerType,
+  onClick,
+}: {
+  customerType?: CustomerType;
+  onClick: () => void;
+}) {
+  const isWaiter = customerType === 'waiter';
+  const customerTypeLabels = getCustomerTypeLabels(useSettings());
+  return (
+    <button
+      onClick={(e) => {
+        e.stopPropagation();
+        onClick();
+      }}
+      className={`inline-flex cursor-pointer items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium transition-colors ${
+        isWaiter
+          ? 'bg-purple-100 text-purple-800 hover:bg-purple-200 dark:bg-purple-900/40 dark:text-purple-300 dark:hover:bg-purple-900/60'
+          : 'bg-gray-100 text-gray-600 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-400 dark:hover:bg-gray-600'
+      }`}
+      title={`Click to toggle to ${isWaiter ? customerTypeLabels.primary : customerTypeLabels.secondary}`}
+    >
+      {isWaiter ? (
+        <UserCheck className="h-3 w-3" />
+      ) : (
+        <UserX className="h-3 w-3" />
+      )}
+      {isWaiter ? customerTypeLabels.secondary : customerTypeLabels.primary}
+    </button>
+  );
+}
diff --git a/src/components/repairOrders/EmptyState.tsx b/src/components/repairOrders/EmptyState.tsx
new file mode 100644
index 0000000..b24b184
--- /dev/null
+++ b/src/components/repairOrders/EmptyState.tsx
@@ -0,0 +1,49 @@
+import { Wrench, Plus } from 'lucide-react';
+import type { TabId } from './types';
+
+export function EmptyState({
+  tab,
+  onCreate,
+}: {
+  tab: TabId;
+  onCreate: () => void;
+}) {
+  const messages: Record<TabId, { title: string; desc: string }> = {
+    active: {
+      title: 'No active repair orders',
+      desc: 'There are no open repair orders in this view. Create a new order when a vehicle is checked in for service.',
+    },
+    all: {
+      title: 'No repair orders on file',
+      desc: 'Create your first repair order to track work performed, labor, parts, and customer authorization status.',
+    },
+    completed: {
+      title: 'No completed repair orders',
+      desc: 'Closed repair orders will appear here once work has been completed and finalized.',
+    },
+  };
+  const msg = messages[tab];
+
+  return (
+    <div className="flex flex-col items-center justify-center py-20 text-center">
+      <div className="mb-6 flex h-24 w-24 items-center justify-center rounded-full bg-blue-50 dark:bg-blue-900/20">
+        <Wrench className="h-12 w-12 text-blue-500 dark:text-blue-400" />
+      </div>
+      <h3 className="mb-2 text-lg font-semibold text-gray-900 dark:text-white">
+        {msg.title}
+      </h3>
+      <p className="mb-8 max-w-sm text-sm text-gray-500 dark:text-gray-400">
+        {msg.desc}
+      </p>
+      {tab !== 'completed' && (
+        <button
+          onClick={onCreate}
+          className="inline-flex items-center gap-2 rounded-lg bg-blue-600 px-5 py-2.5 text-sm font-medium text-white shadow-sm transition-colors hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900"
+        >
+          <Plus className="h-4 w-4" />
+          Create Repair Order
+        </button>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/repairOrders/ErrorState.tsx b/src/components/repairOrders/ErrorState.tsx
new file mode 100644
index 0000000..a3d8f59
--- /dev/null
+++ b/src/components/repairOrders/ErrorState.tsx
@@ -0,0 +1,11 @@
+import { ListError } from '../ui/ListError';
+
+export function ErrorState({
+  message,
+  onRetry,
+}: {
+  message: string;
+  onRetry: () => void;
+}) {
+  return <ListError title="Unable to load repair orders" message={message} onRetry={onRetry} />;
+}
diff --git a/src/components/repairOrders/FragmentRow.tsx b/src/components/repairOrders/FragmentRow.tsx
new file mode 100644
index 0000000..4ec8469
--- /dev/null
+++ b/src/components/repairOrders/FragmentRow.tsx
@@ -0,0 +1,118 @@
+import { memo } from 'react';
+import { CheckSquare, Square, ChevronRight } from 'lucide-react';
+import { getStatusConfig } from '../../lib/status';
+import { useSettings } from '../../store/settings';
+import { formatDateTime } from '../../lib/format';
+import { isVoided } from '../../lib/roEvents';
+import {
+  getUrgencyClass,
+  displayCustomerName,
+  formatDueDateTime,
+} from '../../lib/repairOrders';
+import type { RepairOrder, CustomerType } from '../../types';
+import { CustomerTypeBadge } from './CustomerTypeBadge';
+import { StatusBadge } from './StatusBadge';
+import { TimeRemainingCell } from './TimeRemainingCell';
+import { RowProgressBar } from './RowProgressBar';
+import { TechNames } from './TechNames';
+
+export const FragmentRow = memo(function FragmentRow({
+  ro,
+  now,
+  selected,
+  onToggleSelect,
+  onOpen,
+  onToggleCustomerType,
+  techNames,
+}: {
+  ro: RepairOrder;
+  now: number;
+  selected: boolean;
+  onToggleSelect: () => void;
+  onOpen: () => void;
+  onToggleCustomerType: (id: string, currentType?: CustomerType) => void;
+  techNames: string[];
+}) {
+  const urgency = getUrgencyClass(ro, now);
+  const voided = isVoided(ro);
+
+  const rowClass = `
+    cursor-pointer transition-colors
+    ${voided
+      ? 'opacity-50 hover:opacity-70'
+      : urgency === 'urgent'
+        ? 'bg-red-50 hover:bg-red-100 dark:bg-red-900/15 dark:hover:bg-red-900/25'
+        : 'hover:bg-gray-50 dark:hover:bg-gray-700/50'
+    }
+    ${selected ? 'ring-2 ring-inset ring-blue-400' : ''}
+  `;
+
+  return (
+    <tr
+      onClick={(e) => {
+        const target = e.target as HTMLElement;
+        if (target.closest('[data-no-open]') || target.closest('button')) return;
+        onOpen();
+      }}
+      className={rowClass}
+    >
+      <td className="px-2 py-2.5" data-no-open>
+        <button
+          onClick={(e) => { e.stopPropagation(); onToggleSelect(); }}
+          className="text-gray-400 hover:text-blue-600 dark:hover:text-blue-400"
+          title={selected ? 'Deselect' : 'Select for bulk action'}
+        >
+          {selected
+            ? <CheckSquare className="h-4 w-4 text-blue-600 dark:text-blue-400" />
+            : <Square className="h-4 w-4" />}
+        </button>
+      </td>
+      <td className="px-3 py-2.5 font-mono text-xs text-gray-500 dark:text-gray-400">
+        {ro.roNumber || `#${ro.id.slice(0, 8)}`}
+      </td>
+      <td className="px-3 py-2.5">
+        <div className="flex items-center gap-2">
+          <span className="font-medium text-gray-900 dark:text-white">
+            {displayCustomerName(ro.customerName)}
+          </span>
+          <CustomerTypeBadge
+            customerType={ro.customerType}
+            onClick={() => onToggleCustomerType(ro.id, ro.customerType)}
+          />
+        </div>
+      </td>
+      <td className="max-w-[200px] px-3 py-2.5 text-gray-600 dark:text-gray-400">
+        <div className="space-y-0.5">
+          <p className="truncate">{ro.vehicleInfo || '—'}</p>
+          {ro.serviceLocation && (
+            <p className="truncate text-xs text-sky-600 dark:text-sky-400">{ro.serviceLocation}</p>
+          )}
+          {typeof ro.tripMiles === 'number' && ro.tripMiles > 0 && (
+            <p className="text-xs text-purple-600 dark:text-purple-400">{ro.tripMiles} mi trip</p>
+          )}
+        </div>
+      </td>
+      <td className="px-3 py-2.5">
+        <StatusBadge status={voided ? 'voided' : (ro.status || '')} config={getStatusConfig(useSettings())} />
+      </td>
+      <td className="whitespace-nowrap px-3 py-2.5 text-sm text-gray-600 dark:text-gray-400">
+        {formatDateTime(ro.writeupTime || ro.created)}
+      </td>
+      <td className="whitespace-nowrap px-3 py-2.5 text-sm text-gray-600 dark:text-gray-400">
+        {formatDueDateTime(ro)}
+      </td>
+      <td className="whitespace-nowrap px-3 py-2.5">
+        <TimeRemainingCell ro={ro} now={now} />
+      </td>
+      <td className="whitespace-nowrap px-3 py-2.5">
+        <RowProgressBar ro={ro} />
+      </td>
+      <td className="whitespace-nowrap px-3 py-2.5 text-center">
+        <TechNames names={techNames} />
+      </td>
+      <td className="px-3 py-2.5 text-right">
+        <ChevronRight className="h-4 w-4 text-gray-400" />
+      </td>
+    </tr>
+  );
+});
diff --git a/src/components/repairOrders/LoadingSkeleton.tsx b/src/components/repairOrders/LoadingSkeleton.tsx
new file mode 100644
index 0000000..b6a9ffb
--- /dev/null
+++ b/src/components/repairOrders/LoadingSkeleton.tsx
@@ -0,0 +1,29 @@
+export function LoadingSkeleton() {
+  return (
+    <div className="animate-pulse space-y-4">
+      <div className="flex gap-2">
+        {Array.from({ length: 3 }).map((_, i) => (
+          <div
+            key={i}
+            className="h-9 w-24 rounded-lg bg-gray-200 dark:bg-gray-700"
+          />
+        ))}
+      </div>
+      <div className="rounded-xl bg-white ring-1 ring-gray-200 dark:bg-gray-800 dark:ring-gray-700">
+        <div className="space-y-3 p-6">
+          {Array.from({ length: 5 }).map((_, i) => (
+            <div key={i} className="flex gap-4">
+              <div className="h-4 w-16 rounded bg-gray-200 dark:bg-gray-700" />
+              <div className="h-4 flex-1 rounded bg-gray-200 dark:bg-gray-700" />
+              <div className="h-4 w-28 rounded bg-gray-200 dark:bg-gray-700" />
+              <div className="h-4 w-20 rounded bg-gray-200 dark:bg-gray-700" />
+              <div className="h-4 w-24 rounded bg-gray-200 dark:bg-gray-700" />
+              <div className="h-4 w-16 rounded bg-gray-200 dark:bg-gray-700" />
+              <div className="h-4 w-24 rounded bg-gray-200 dark:bg-gray-700" />
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/repairOrders/ROModal.tsx b/src/components/repairOrders/ROModal.tsx
new file mode 100644
index 0000000..74ee92b
--- /dev/null
+++ b/src/components/repairOrders/ROModal.tsx
@@ -0,0 +1,64 @@
+import { X } from 'lucide-react';
+import ROForm from '../ROForm';
+import type { RepairOrder } from '../../types';
+import type { CustomerWithVehicles } from '../../pages/Customers';
+
+export function ROModal({
+  isOpen,
+  onClose,
+  onSave,
+  editRO,
+  existingRoNumbers,
+  settings,
+  customers,
+}: {
+  isOpen: boolean;
+  onClose: () => void;
+  onSave: (data: Partial<RepairOrder>) => void;
+  editRO: RepairOrder | null;
+  existingRoNumbers: Set<string>;
+  settings: { taxRate: number; shopChargeRate: number; shopChargeCap: number; defaultLaborRate: number };
+  customers?: CustomerWithVehicles[];
+}) {
+  if (!isOpen) return null;
+
+  const isEditing = !!editRO;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-start justify-center overflow-y-auto bg-black/50 p-4 pt-10">
+      <div className="w-full max-w-3xl rounded-2xl bg-white shadow-2xl dark:bg-gray-900">
+        {/* Header */}
+        <div className="flex items-center justify-between border-b border-gray-200 px-6 py-4 dark:border-gray-700">
+          <div>
+            <h2 className="text-lg font-semibold text-gray-900 dark:text-white">
+              {isEditing ? 'Edit Repair Order' : 'Create Repair Order'}
+            </h2>
+            <p className="text-sm text-gray-500 dark:text-gray-400">
+              {isEditing
+                ? `Editing RO #${editRO?.roNumber || ''}`
+                : 'Enter customer and vehicle information'}
+            </p>
+          </div>
+          <button
+            onClick={onClose}
+            className="rounded-lg p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-600 dark:hover:bg-gray-800 dark:hover:text-gray-300"
+          >
+            <X className="h-5 w-5" />
+          </button>
+        </div>
+
+        {/* Body */}
+        <div className="px-6 py-5">
+          <ROForm
+            editRO={editRO}
+            existingRoNumbers={existingRoNumbers}
+            settings={settings}
+            customers={customers}
+            onSave={(data) => { onSave(data); onClose(); }}
+            onCancel={onClose}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/repairOrders/RowProgressBar.tsx b/src/components/repairOrders/RowProgressBar.tsx
new file mode 100644
index 0000000..8ab5cfa
--- /dev/null
+++ b/src/components/repairOrders/RowProgressBar.tsx
@@ -0,0 +1,19 @@
+import { roProgress } from '../../lib/status';
+import type { RepairOrder } from '../../types';
+
+export function RowProgressBar({ ro }: { ro: RepairOrder }) {
+  const { done, total, fraction } = roProgress(ro);
+  if (total === 0) {
+    return <span className="text-xs text-gray-300 dark:text-gray-600">—</span>;
+  }
+  const pct = Math.round(fraction * 100);
+  const barColor = pct === 100 ? 'bg-green-500' : pct >= 50 ? 'bg-blue-500' : 'bg-gray-300 dark:bg-gray-600';
+  return (
+    <div className="flex items-center gap-2" title={`${done}/${total} services done`}>
+      <div className="h-1.5 w-16 overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700">
+        <div className={`h-full transition-all ${barColor}`} style={{ width: `${pct}%` }} />
+      </div>
+      <span className="text-xs tabular-nums text-gray-500 dark:text-gray-400">{done}/{total}</span>
+    </div>
+  );
+}
diff --git a/src/components/repairOrders/StatusBadge.tsx b/src/components/repairOrders/StatusBadge.tsx
new file mode 100644
index 0000000..9755cf6
--- /dev/null
+++ b/src/components/repairOrders/StatusBadge.tsx
@@ -0,0 +1,28 @@
+import { getStatusConfig } from '../../lib/status';
+import { useSettings } from '../../store/settings';
+
+export function StatusBadge({
+  status,
+  config,
+}: {
+  status: string;
+  config: Record<string, { label: string; colors: string }>;
+}) {
+  const cfg = config[status] || {
+    label: status,
+    colors:
+      'bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400',
+  };
+  return (
+    <span
+      className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${cfg.colors}`}
+    >
+      {cfg.label}
+    </span>
+  );
+}
+
+// Alternate version that derives config from settings (convenience)
+export function StatusBadgeAuto({ status }: { status: string }) {
+  return <StatusBadge status={status} config={getStatusConfig(useSettings())} />;
+}
diff --git a/src/components/repairOrders/TabButton.tsx b/src/components/repairOrders/TabButton.tsx
new file mode 100644
index 0000000..f62db01
--- /dev/null
+++ b/src/components/repairOrders/TabButton.tsx
@@ -0,0 +1,39 @@
+import { TABS } from './types';
+import type { TabId } from './types';
+
+export function TabButton({
+  tab,
+  active,
+  count,
+  onClick,
+}: {
+  tab: TabId;
+  active: boolean;
+  count?: number;
+  onClick: () => void;
+}) {
+  const label = TABS.find((t) => t.id === tab)?.label || tab;
+  return (
+    <button
+      onClick={onClick}
+      className={`relative inline-flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition-all ${
+        active
+          ? 'bg-blue-600 text-white shadow-sm'
+          : 'bg-white text-gray-600 ring-1 ring-gray-300 hover:bg-gray-50 dark:bg-gray-800 dark:text-gray-400 dark:ring-gray-700 dark:hover:bg-gray-700'
+      }`}
+    >
+      {label}
+      {count !== undefined && (
+        <span
+          className={`inline-flex items-center justify-center rounded-full px-2 py-0.5 text-xs ${
+            active
+              ? 'bg-white/20 text-white'
+              : 'bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-400'
+          }`}
+        >
+          {count}
+        </span>
+      )}
+    </button>
+  );
+}
diff --git a/src/components/repairOrders/TechNames.tsx b/src/components/repairOrders/TechNames.tsx
new file mode 100644
index 0000000..0bc829a
--- /dev/null
+++ b/src/components/repairOrders/TechNames.tsx
@@ -0,0 +1,20 @@
+export function TechNames({ names }: { names: string[] }) {
+  if (names.length === 0) return <span className="text-xs text-gray-300 dark:text-gray-600">—</span>;
+  const label = names.join(', ');
+  const visible = names.slice(0, 2);
+  const extra = names.length - visible.length;
+  return (
+    <div className="flex max-w-[10rem] flex-wrap items-center justify-center gap-1" title={label}>
+      {visible.map((name, index) => (
+        <span key={`${name}-${index}`} className="truncate rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-700 dark:bg-green-900/30 dark:text-green-400">
+          {name}
+        </span>
+      ))}
+      {extra > 0 && (
+        <span className="rounded-full bg-gray-100 px-2 py-0.5 text-xs font-medium text-gray-600 dark:bg-gray-700 dark:text-gray-300">
+          +{extra}
+        </span>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/repairOrders/TimeRemainingCell.tsx b/src/components/repairOrders/TimeRemainingCell.tsx
new file mode 100644
index 0000000..f618451
--- /dev/null
+++ b/src/components/repairOrders/TimeRemainingCell.tsx
@@ -0,0 +1,30 @@
+import { AlertTriangle } from 'lucide-react';
+import { formatTimeRemaining, getUrgencyClass } from '../../lib/repairOrders';
+import type { RepairOrder } from '../../types';
+
+export function TimeRemainingCell({
+  ro,
+  now,
+}: {
+  ro: RepairOrder;
+  now: number;
+}) {
+  const text = formatTimeRemaining(ro, now);
+  const urgency = getUrgencyClass(ro, now);
+
+  const colorClass =
+    urgency === 'urgent'
+      ? 'text-red-600 dark:text-red-400 font-semibold'
+      : urgency === 'warning'
+        ? 'text-amber-600 dark:text-amber-400 font-medium'
+        : 'text-gray-600 dark:text-gray-400';
+
+  return (
+    <span className={`inline-flex items-center gap-1 text-sm ${colorClass}`}>
+      {urgency === 'urgent' && (
+        <AlertTriangle className="h-3.5 w-3.5 text-red-500" />
+      )}
+      {text}
+    </span>
+  );
+}
diff --git a/src/components/repairOrders/index.ts b/src/components/repairOrders/index.ts
new file mode 100644
index 0000000..3b15b90
--- /dev/null
+++ b/src/components/repairOrders/index.ts
@@ -0,0 +1,21 @@
+export type {
+  TabId,
+  CompletedRangeFilter,
+  CompletedStatusFilter,
+  CompletedRatingFilter,
+  SavedView,
+} from './types';
+export { TABS, SAVED_VIEWS_KEY, loadSavedViews, persistSavedViews } from './types';
+
+export { StatusBadge } from './StatusBadge';
+export { RowProgressBar } from './RowProgressBar';
+export { TechNames } from './TechNames';
+export { CustomerTypeBadge } from './CustomerTypeBadge';
+export { TimeRemainingCell } from './TimeRemainingCell';
+export { LoadingSkeleton } from './LoadingSkeleton';
+export { EmptyState } from './EmptyState';
+export { ErrorState } from './ErrorState';
+export { TabButton } from './TabButton';
+export { ROModal } from './ROModal';
+export { FragmentRow } from './FragmentRow';
+export { CompletedRow } from './CompletedRow';
diff --git a/src/components/repairOrders/types.ts b/src/components/repairOrders/types.ts
new file mode 100644
index 0000000..0b52647
--- /dev/null
+++ b/src/components/repairOrders/types.ts
@@ -0,0 +1,37 @@
+/* ── Types & Constants ──────────────────────────────── */
+
+export type TabId = 'active' | 'all' | 'completed';
+export type CompletedRangeFilter = 'all' | 'today' | 'this_week' | 'this_month';
+export type CompletedStatusFilter = 'all' | 'completed' | 'final_close';
+export type CompletedRatingFilter = 'all' | 'rated' | 'unrated';
+
+export const TABS: { id: TabId; label: string }[] = [
+  { id: 'active', label: 'Active' },
+  { id: 'all', label: 'All' },
+  { id: 'completed', label: 'Completed' },
+];
+
+/* ── Saved-view preset shape ─────────────────────────── */
+
+export interface SavedView {
+  id: string;
+  label: string;
+  statusChips: string[];
+  waiterOnly: boolean;
+  showVoided: boolean;
+  search: string;
+}
+
+export const SAVED_VIEWS_KEY = 'spq-ro-saved-views';
+
+export function loadSavedViews(): SavedView[] {
+  try {
+    const raw = localStorage.getItem(SAVED_VIEWS_KEY);
+    if (raw) return JSON.parse(raw) as SavedView[];
+  } catch { /* corrupt JSON — ignore */ }
+  return [];
+}
+
+export function persistSavedViews(views: SavedView[]) {
+  try { localStorage.setItem(SAVED_VIEWS_KEY, JSON.stringify(views)); } catch { /* ignore */ }
+}
diff --git a/src/components/technician/TechnicianContext.tsx b/src/components/technician/TechnicianContext.tsx
new file mode 100644
index 0000000..d407c9f
--- /dev/null
+++ b/src/components/technician/TechnicianContext.tsx
@@ -0,0 +1,95 @@
+import { createContext, useContext, useEffect, useState, useCallback, type ReactNode } from 'react';
+import { useSearchParams, useNavigate } from 'react-router-dom';
+import { pb } from '../../lib/pocketbase';
+
+interface ImpersonatedTechInfo {
+  id: string;
+  email: string;
+  displayName?: string;
+}
+
+interface TechnicianContextValue {
+  effectiveUserId: string;
+  isImpersonating: boolean;
+  impersonatedTech: ImpersonatedTechInfo | null;
+  stopImpersonation: () => void;
+}
+
+const TechnicianContext = createContext<TechnicianContextValue>({
+  effectiveUserId: '',
+  isImpersonating: false,
+  impersonatedTech: null,
+  stopImpersonation: () => {},
+});
+
+export function TechnicianProvider({ children }: { children: ReactNode }) {
+  const [searchParams] = useSearchParams();
+  const navigate = useNavigate();
+  const viewAs = searchParams.get('view_as');
+  const authUserId = pb.authStore.model?.id as string | undefined;
+  const [impersonatedTech, setImpersonatedTech] = useState<ImpersonatedTechInfo | null>(null);
+
+  const isImpersonating = !!viewAs && viewAs !== authUserId;
+  const effectiveUserId = isImpersonating ? viewAs! : (authUserId || '');
+
+  useEffect(() => {
+    if (isImpersonating && viewAs) {
+      pb.collection('users').getOne(viewAs).then((user) => {
+        setImpersonatedTech({
+          id: user.id,
+          email: user.email as string,
+          displayName: user.displayName as string | undefined,
+        });
+      }).catch(() => {
+        setImpersonatedTech(null);
+      });
+    } else {
+      setImpersonatedTech(null);
+    }
+  }, [isImpersonating, viewAs]);
+
+  const stopImpersonation = useCallback(() => {
+    navigate('/team');
+  }, [navigate]);
+
+  return (
+    <TechnicianContext.Provider
+      value={{
+        effectiveUserId,
+        isImpersonating,
+        impersonatedTech,
+        stopImpersonation,
+      }}
+    >
+      {children}
+    </TechnicianContext.Provider>
+  );
+}
+
+export function useTechnicianContext(): TechnicianContextValue {
+  return useContext(TechnicianContext);
+}
+
+export function useTechnicianNav() {
+  const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+  const viewAs = searchParams.get('view_as');
+
+  const buildTechUrl = useCallback(
+    (path: string): string => {
+      if (!viewAs) return path;
+      const separator = path.includes('?') ? '&' : '?';
+      return `${path}${separator}view_as=${encodeURIComponent(viewAs)}`;
+    },
+    [viewAs],
+  );
+
+  const navigateTech = useCallback(
+    (path: string, opts?: { replace?: boolean; state?: unknown }) => {
+      navigate(buildTechUrl(path), opts);
+    },
+    [navigate, buildTechUrl],
+  );
+
+  return { buildTechUrl, navigateTech };
+}
diff --git a/src/components/technician/TechnicianLayout.tsx b/src/components/technician/TechnicianLayout.tsx
new file mode 100644
index 0000000..e0eb3db
--- /dev/null
+++ b/src/components/technician/TechnicianLayout.tsx
@@ -0,0 +1,115 @@
+import { useState, useEffect, useMemo, type ReactNode } from 'react';
+import { LayoutDashboard, ClipboardList, User, Sun, Moon, LogOut, Eye, X } from 'lucide-react';
+import { useTechnicianContext, useTechnicianNav } from './TechnicianContext';
+import { NavLink, useNavigate } from 'react-router-dom';
+import { pb } from '../../lib/pocketbase';
+
+interface TechnicianLayoutProps {
+  children: ReactNode;
+}
+
+export default function TechnicianLayout({ children }: TechnicianLayoutProps) {
+  const navigate = useNavigate();
+  const { isImpersonating, impersonatedTech, stopImpersonation } = useTechnicianContext();
+  const { buildTechUrl } = useTechnicianNav();
+
+  const navItems = useMemo(
+    () => [
+      { to: buildTechUrl('/technician'), label: 'Bay', icon: LayoutDashboard },
+      { to: buildTechUrl('/technician/jobs'), label: 'Jobs', icon: ClipboardList },
+      { to: buildTechUrl('/technician/profile'), label: 'Profile', icon: User },
+    ],
+    [buildTechUrl],
+  );
+  const [dark, setDark] = useState(() => {
+    if (typeof window === 'undefined') return false;
+    return localStorage.getItem('spq-dark-mode') === 'true';
+  });
+
+  useEffect(() => {
+    const root = document.documentElement;
+    if (dark) {
+      root.classList.add('dark');
+    } else {
+      root.classList.remove('dark');
+    }
+    localStorage.setItem('spq-dark-mode', String(dark));
+  }, [dark]);
+
+  const toggleDark = () => setDark((prev) => !prev);
+
+  const handleLogout = () => {
+    pb.authStore.clear();
+    navigate('/login');
+  };
+
+  const userEmail = pb.authStore.model?.email as string | undefined;
+
+  return (
+    <div className="flex min-h-screen flex-col bg-gray-50 dark:bg-gray-950">
+      <header className="sticky top-0 z-30 flex h-14 items-center gap-2 border-b border-gray-200 bg-white px-4 dark:border-gray-800 dark:bg-gray-900">
+        <span className="text-base font-bold text-gray-900 dark:text-white">
+          Shop<span className="text-green-600">Pro</span>Quote{' '}
+          <span className="text-xs font-normal text-gray-400 dark:text-gray-500">Bay</span>
+        </span>
+        <div className="min-w-0 flex-1" />
+        {userEmail && (
+          <span className="hidden max-w-[120px] truncate text-xs text-gray-500 dark:text-gray-400 sm:block">
+            {userEmail}
+          </span>
+        )}
+        <button
+          onClick={toggleDark}
+          className="rounded-lg p-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
+          title={dark ? 'Switch to light mode' : 'Switch to dark mode'}
+        >
+          {dark ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
+        </button>
+        <button
+          onClick={handleLogout}
+          className="rounded-lg p-2 text-gray-500 hover:bg-red-50 hover:text-red-600 dark:text-gray-400 dark:hover:bg-red-900/20 dark:hover:text-red-400"
+          title="Logout"
+        >
+          <LogOut className="h-4 w-4" />
+        </button>
+      </header>
+
+      {isImpersonating && (
+        <div className="flex items-center gap-2 bg-blue-600 px-4 py-2 text-sm text-white">
+          <Eye className="h-4 w-4 shrink-0" />
+          <span className="min-w-0 flex-1 truncate">
+            Viewing <strong>{impersonatedTech?.displayName || impersonatedTech?.email || 'technician'}</strong>'s bay
+          </span>
+          <button
+            onClick={stopImpersonation}
+            className="flex shrink-0 items-center gap-1 rounded-lg bg-blue-700 px-3 py-1 text-xs font-medium hover:bg-blue-800"
+          >
+            <X className="h-3.5 w-3.5" />
+            Exit View
+          </button>
+        </div>
+      )}
+      <main className="flex-1 overflow-auto p-4 sm:p-6">{children}</main>
+
+      <nav className="sticky bottom-0 z-30 flex border-t border-gray-200 bg-white dark:border-gray-800 dark:bg-gray-900">
+        {navItems.map((item) => (
+          <NavLink
+            key={item.to}
+            to={item.to}
+            end={item.to === '/technician'}
+            className={({ isActive }) =>
+              `flex flex-1 flex-col items-center gap-0.5 py-3 text-xs font-medium transition-colors ${
+                isActive
+                  ? 'text-green-600 dark:text-green-400'
+                  : 'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'
+              }`
+            }
+          >
+            <item.icon className="h-5 w-5" />
+            <span>{item.label}</span>
+          </NavLink>
+        ))}
+      </nav>
+    </div>
+  );
+}
diff --git a/src/components/ui/ListEmpty.tsx b/src/components/ui/ListEmpty.tsx
new file mode 100644
index 0000000..2017d53
--- /dev/null
+++ b/src/components/ui/ListEmpty.tsx
@@ -0,0 +1,41 @@
+import type { LucideIcon } from 'lucide-react';
+
+interface ListEmptyProps {
+  icon?: LucideIcon;
+  title: string;
+  message?: string;
+  actionLabel?: string;
+  onAction?: () => void;
+  className?: string;
+}
+
+export function ListEmpty({
+  icon: Icon,
+  title,
+  message,
+  actionLabel,
+  onAction,
+  className = '',
+}: ListEmptyProps) {
+  return (
+    <div className={`flex flex-col items-center justify-center py-20 text-center ${className}`}>
+      {Icon && (
+        <div className="mb-6 flex h-24 w-24 items-center justify-center rounded-full bg-blue-50 dark:bg-blue-900/20">
+          <Icon className="h-12 w-12 text-blue-500 dark:text-blue-400" />
+        </div>
+      )}
+      <h3 className="mb-2 text-lg font-semibold text-gray-900 dark:text-white">{title}</h3>
+      {message && (
+        <p className="mb-8 max-w-sm text-sm text-gray-500 dark:text-gray-400">{message}</p>
+      )}
+      {actionLabel && onAction && (
+        <button
+          onClick={onAction}
+          className="inline-flex items-center gap-2 rounded-lg bg-green-600 px-5 py-2.5 text-sm font-medium text-white shadow-sm transition-colors hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900"
+        >
+          {actionLabel}
+        </button>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/ui/ListError.tsx b/src/components/ui/ListError.tsx
new file mode 100644
index 0000000..755a96d
--- /dev/null
+++ b/src/components/ui/ListError.tsx
@@ -0,0 +1,26 @@
+import { AlertTriangle, RefreshCw } from 'lucide-react';
+
+interface ListErrorProps {
+  title?: string;
+  message: string;
+  onRetry: () => void;
+}
+
+export function ListError({ title = 'Unable to load', message, onRetry }: ListErrorProps) {
+  return (
+    <div className="flex flex-col items-center justify-center py-20 text-center">
+      <div className="mb-6 flex h-24 w-24 items-center justify-center rounded-full bg-red-50 dark:bg-red-900/20">
+        <AlertTriangle className="h-12 w-12 text-red-500 dark:text-red-400" />
+      </div>
+      <h3 className="mb-2 text-lg font-semibold text-gray-900 dark:text-white">{title}</h3>
+      <p className="mb-8 max-w-sm text-sm text-gray-500 dark:text-gray-400">{message}</p>
+      <button
+        onClick={onRetry}
+        className="inline-flex items-center gap-2 rounded-lg border border-gray-300 bg-white px-5 py-2.5 text-sm font-medium text-gray-700 shadow-sm transition-colors hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 dark:focus:ring-offset-gray-900"
+      >
+        <RefreshCw className="h-4 w-4" />
+        Retry
+      </button>
+    </div>
+  );
+}
diff --git a/src/components/ui/ListSkeleton.tsx b/src/components/ui/ListSkeleton.tsx
new file mode 100644
index 0000000..447ce6e
--- /dev/null
+++ b/src/components/ui/ListSkeleton.tsx
@@ -0,0 +1,52 @@
+export function ListSkeleton({ rows = 8, className = '' }: { rows?: number; className?: string }) {
+  return (
+    <div className={`animate-pulse space-y-3 ${className}`}>
+      {Array.from({ length: rows }).map((_, i) => (
+        <div key={i} className="h-16 rounded-lg bg-gray-200 dark:bg-gray-800" />
+      ))}
+    </div>
+  );
+}
+
+export function CardSkeleton({ count = 4 }: { count?: number }) {
+  return (
+    <div className="animate-pulse">
+      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
+        {Array.from({ length: count }).map((_, i) => (
+          <div
+            key={i}
+            className="flex items-center gap-4 rounded-xl bg-white p-5 ring-1 ring-gray-200 dark:bg-gray-800 dark:ring-gray-700"
+          >
+            <div className="h-12 w-12 rounded-lg bg-gray-200 dark:bg-gray-700" />
+            <div className="flex-1 space-y-2">
+              <div className="h-3 w-20 rounded bg-gray-200 dark:bg-gray-700" />
+              <div className="h-6 w-16 rounded bg-gray-200 dark:bg-gray-700" />
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export function TableSkeleton({ rows = 5 }: { rows?: number }) {
+  return (
+    <div className="animate-pulse rounded-xl bg-white ring-1 ring-gray-200 dark:bg-gray-800 dark:ring-gray-700">
+      <div className="border-b border-gray-200 px-6 py-4 dark:border-gray-700">
+        <div className="h-6 w-40 rounded bg-gray-200 dark:bg-gray-700" />
+      </div>
+      <div className="space-y-3 p-6">
+        {Array.from({ length: rows }).map((_, i) => (
+          <div key={i} className="flex gap-4">
+            <div className="h-4 w-20 rounded bg-gray-200 dark:bg-gray-700" />
+            <div className="h-4 flex-1 rounded bg-gray-200 dark:bg-gray-700" />
+            <div className="h-4 w-24 rounded bg-gray-200 dark:bg-gray-700" />
+            <div className="h-4 w-20 rounded bg-gray-200 dark:bg-gray-700" />
+            <div className="h-4 w-28 rounded bg-gray-200 dark:bg-gray-700" />
+            <div className="h-4 w-24 rounded bg-gray-200 dark:bg-gray-700" />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/ui/LoadingSpinner.tsx b/src/components/ui/LoadingSpinner.tsx
new file mode 100644
index 0000000..de489f4
--- /dev/null
+++ b/src/components/ui/LoadingSpinner.tsx
@@ -0,0 +1,29 @@
+export default function LoadingSpinner({ text }: { text?: string }) {
+  return (
+    <div className="flex flex-col items-center justify-center gap-3">
+      <svg
+        className="h-8 w-8 animate-spin text-green-600"
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+      >
+        <circle
+          className="opacity-25"
+          cx="12"
+          cy="12"
+          r="10"
+          stroke="currentColor"
+          strokeWidth="4"
+        />
+        <path
+          className="opacity-75"
+          fill="currentColor"
+          d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"
+        />
+      </svg>
+      {text && (
+        <p className="text-sm text-gray-500 dark:text-gray-400">{text}</p>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/ui/Toast.tsx b/src/components/ui/Toast.tsx
new file mode 100644
index 0000000..3c7018e
--- /dev/null
+++ b/src/components/ui/Toast.tsx
@@ -0,0 +1,110 @@
+import { createContext, useContext, useState, useCallback, useEffect, useRef, type ReactNode } from 'react';
+import { CheckCircle, XCircle, Info, X } from 'lucide-react';
+
+type ToastVariant = 'success' | 'error' | 'info';
+
+interface Toast {
+  id: string;
+  message: string;
+  variant: ToastVariant;
+}
+
+interface ToastContextValue {
+  showToast: (message: string, variant?: ToastVariant) => void;
+  removeToast: (id: string) => void;
+  toasts: Toast[];
+}
+
+const ToastContext = createContext<ToastContextValue | null>(null);
+
+const variantStyles: Record<ToastVariant, { bg: string; border: string; icon: ReactNode }> = {
+  success: {
+    bg: 'bg-green-50 dark:bg-green-900/30',
+    border: 'border-green-400 dark:border-green-600',
+    icon: <CheckCircle className="h-5 w-5 text-green-500 dark:text-green-400" />,
+  },
+  error: {
+    bg: 'bg-red-50 dark:bg-red-900/30',
+    border: 'border-red-400 dark:border-red-600',
+    icon: <XCircle className="h-5 w-5 text-red-500 dark:text-red-400" />,
+  },
+  info: {
+    bg: 'bg-blue-50 dark:bg-blue-900/30',
+    border: 'border-blue-400 dark:border-blue-600',
+    icon: <Info className="h-5 w-5 text-blue-500 dark:text-blue-400" />,
+  },
+};
+
+export function ToastProvider({ children }: { children: ReactNode }) {
+  const [toasts, setToasts] = useState<Toast[]>([]);
+
+  const removeToast = useCallback((id: string) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+  }, []);
+
+  const showToast = useCallback(
+    (message: string, variant: ToastVariant = 'success') => {
+      const id = `${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
+      setToasts((prev) => [...prev, { id, message, variant }]);
+    },
+    []
+  );
+
+  return (
+    <ToastContext.Provider value={{ showToast, removeToast, toasts }}>
+      {children}
+      {/* Toast container - fixed bottom-right */}
+      <div className="fixed bottom-4 right-4 z-50 flex flex-col gap-2 max-w-sm w-full pointer-events-none">
+        {toasts.map((toast) => (
+          <ToastItem
+            key={toast.id}
+            toast={toast}
+            onDismiss={() => removeToast(toast.id)}
+          />
+        ))}
+      </div>
+    </ToastContext.Provider>
+  );
+}
+
+function ToastItem({ toast, onDismiss }: { toast: Toast; onDismiss: () => void }) {
+  const { bg, border, icon } = variantStyles[toast.variant];
+
+  return (
+    <div
+      className={`pointer-events-auto flex items-start gap-3 rounded-lg border p-4 shadow-lg ${bg} ${border} animate-slide-in`}
+      role="alert"
+    >
+      <span className="mt-0.5 shrink-0">{icon}</span>
+      <p className="flex-1 text-sm text-gray-800 dark:text-gray-100">{toast.message}</p>
+      <button
+        onClick={onDismiss}
+        className="shrink-0 rounded p-0.5 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors"
+        aria-label="Dismiss"
+      >
+        <X className="h-4 w-4" />
+      </button>
+    </div>
+  );
+}
+
+export function useToast(): ToastContextValue {
+  const ctx = useContext(ToastContext);
+  if (!ctx) {
+    throw new Error('useToast must be used within a <ToastProvider>');
+  }
+  return ctx;
+}
+
+// Also export a standalone auto-dismiss wrapper (for use outside a provider, though it expects one)
+export function AutoDismissToast({ toast, onDismiss }: { toast: Toast; onDismiss: () => void }) {
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => {
+    timerRef.current = window.setTimeout(onDismiss, 3000);
+    return () => clearTimeout(timerRef.current ?? undefined);
+  }, [onDismiss]);
+
+  return <ToastItem toast={toast} onDismiss={onDismiss} />;
+}
+
diff --git a/src/components/ui/__tests__/StateBlocks.test.tsx b/src/components/ui/__tests__/StateBlocks.test.tsx
new file mode 100644
index 0000000..f7f6e4d
--- /dev/null
+++ b/src/components/ui/__tests__/StateBlocks.test.tsx
@@ -0,0 +1,75 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { ListSkeleton, CardSkeleton, TableSkeleton } from '../ListSkeleton';
+import { ListError } from '../ListError';
+import { ListEmpty } from '../ListEmpty';
+import { Wrench } from 'lucide-react';
+
+describe('ListSkeleton', () => {
+  it('renders default row count', () => {
+    const { container } = render(<ListSkeleton />);
+    const bars = container.querySelectorAll('.h-16');
+    expect(bars.length).toBe(8);
+  });
+
+  it('renders custom row count', () => {
+    const { container } = render(<ListSkeleton rows={3} />);
+    const bars = container.querySelectorAll('.h-16');
+    expect(bars.length).toBe(3);
+  });
+});
+
+describe('CardSkeleton', () => {
+  it('renders default card count', () => {
+    const { container } = render(<CardSkeleton />);
+    const cards = container.querySelectorAll('.rounded-xl');
+    expect(cards.length).toBe(4);
+  });
+
+  it('renders custom card count', () => {
+    const { container } = render(<CardSkeleton count={2} />);
+    const cards = container.querySelectorAll('.rounded-xl');
+    expect(cards.length).toBe(2);
+  });
+});
+
+describe('TableSkeleton', () => {
+  it('renders default row count', () => {
+    const { container } = render(<TableSkeleton />);
+    const rows = container.querySelectorAll('.flex.gap-4');
+    expect(rows.length).toBe(5);
+  });
+});
+
+describe('ListError', () => {
+  it('renders title, message, and retry button', () => {
+    const onRetry = () => {};
+    render(<ListError title="Test error" message="Something broke" onRetry={onRetry} />);
+    expect(screen.getByText('Test error')).toBeTruthy();
+    expect(screen.getByText('Something broke')).toBeTruthy();
+    expect(screen.getByText('Retry')).toBeTruthy();
+  });
+
+  it('renders default title when not provided', () => {
+    render(<ListError message="No title" onRetry={() => {}} />);
+    expect(screen.getByText('Unable to load')).toBeTruthy();
+  });
+});
+
+describe('ListEmpty', () => {
+  it('renders title, message, and action button', () => {
+    const onAction = () => {};
+    render(
+      <ListEmpty icon={Wrench} title="Nothing here" message="No items found." actionLabel="Create" onAction={onAction} />,
+    );
+    expect(screen.getByText('Nothing here')).toBeTruthy();
+    expect(screen.getByText('No items found.')).toBeTruthy();
+    expect(screen.getByText('Create')).toBeTruthy();
+  });
+
+  it('renders without action when not provided', () => {
+    render(<ListEmpty title="Just a title" />);
+    expect(screen.getByText('Just a title')).toBeTruthy();
+    expect(screen.queryByRole('button')).toBeNull();
+  });
+});
diff --git a/src/hooks/__tests__/usePagedList.test.ts b/src/hooks/__tests__/usePagedList.test.ts
new file mode 100644
index 0000000..23a2f30
--- /dev/null
+++ b/src/hooks/__tests__/usePagedList.test.ts
@@ -0,0 +1,62 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { renderHook, waitFor, act } from '@testing-library/react';
+import { usePagedList, type PagedResult } from '../usePagedList';
+
+function fakePage<T>(items: T[], page: number, totalPages: number): PagedResult<T> {
+  return { items, page, perPage: 10, totalItems: totalPages * 10, totalPages };
+}
+
+describe('usePagedList', () => {
+  beforeEach(() => {
+    vi.spyOn(console, 'error').mockImplementation(() => {});
+  });
+
+  it('loads the first page on mount', async () => {
+    const fetchPage = vi.fn().mockResolvedValue(fakePage([1, 2], 1, 3));
+    const { result } = renderHook(() => usePagedList(fetchPage, 10));
+
+    await waitFor(() => expect(result.current.loading).toBe(false));
+    expect(result.current.items).toEqual([1, 2]);
+    expect(result.current.hasMore).toBe(true);
+    expect(fetchPage).toHaveBeenCalledWith(1, 10);
+  });
+
+  it('loadMore appends items and advances page', async () => {
+    const fetchPage = vi.fn()
+      .mockResolvedValueOnce(fakePage([1, 2], 1, 3))
+      .mockResolvedValueOnce(fakePage([3, 4], 2, 3));
+
+    const { result } = renderHook(() => usePagedList(fetchPage, 10));
+
+    await waitFor(() => expect(result.current.loading).toBe(false));
+
+    act(() => { result.current.loadMore(); });
+
+    await waitFor(() => expect(result.current.items).toEqual([1, 2, 3, 4]));
+    expect(fetchPage).toHaveBeenCalledTimes(2);
+  });
+
+  it('surfaces error state', async () => {
+    const fetchPage = vi.fn().mockRejectedValue(new Error('network'));
+    const { result } = renderHook(() => usePagedList(fetchPage, 10));
+
+    await waitFor(() => expect(result.current.loading).toBe(false));
+    expect(result.current.error).toBe(true);
+    expect(result.current.items).toEqual([]);
+  });
+
+  it('refresh resets to page 1', async () => {
+    const fetchPage = vi.fn()
+      .mockResolvedValueOnce(fakePage([1], 1, 2))
+      .mockResolvedValueOnce(fakePage([5], 1, 1));
+
+    const { result } = renderHook(() => usePagedList(fetchPage, 10));
+
+    await waitFor(() => expect(result.current.loading).toBe(false));
+    expect(result.current.items).toEqual([1]);
+
+    act(() => { result.current.refresh(); });
+
+    await waitFor(() => expect(result.current.items).toEqual([5]));
+  });
+});
diff --git a/src/hooks/usePagedList.ts b/src/hooks/usePagedList.ts
new file mode 100644
index 0000000..c4d8e97
--- /dev/null
+++ b/src/hooks/usePagedList.ts
@@ -0,0 +1,82 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { logError } from '../lib/userMessages';
+
+export interface PagedResult<T> {
+  items: T[];
+  page: number;
+  perPage: number;
+  totalItems: number;
+  totalPages: number;
+}
+
+export function usePagedList<T>(
+  fetchPage: (page: number, perPage: number) => Promise<PagedResult<T>>,
+  perPage = 50,
+) {
+  const [items, setItems] = useState<T[]>([]);
+  const [page, setPage] = useState(1);
+  const [totalItems, setTotalItems] = useState(0);
+  const [totalPages, setTotalPages] = useState(1);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(false);
+
+  // Store fetchPage in a ref so the effect only fires once — prevents infinite
+  // re-fetch loops when callers pass inline arrow functions as fetchPage.
+  const fetchRef = useRef(fetchPage);
+  fetchRef.current = fetchPage;
+
+  const load = useCallback(async (p: number, append: boolean) => {
+    setLoading(true);
+    setError(false);
+    try {
+      const result = await fetchRef.current(p, perPage);
+      setItems(prev => append ? [...prev, ...result.items] : result.items);
+      setPage(result.page);
+      setTotalItems(result.totalItems);
+      setTotalPages(result.totalPages || 1);
+    } catch (err) {
+      logError('usePagedList fetch failed', err);
+      setError(true);
+    } finally {
+      setLoading(false);
+    }
+  }, [perPage]);
+
+  useEffect(() => { load(1, false); }, [load]);
+
+  const loadMore = useCallback(() => {
+    if (page < totalPages && !loading) load(page + 1, true);
+  }, [page, totalPages, loading, load]);
+
+  const refresh = useCallback(() => load(1, false), [load]);
+
+  const setItemsDirect = useCallback((updater: T[] | ((prev: T[]) => T[])) => {
+    setItems(updater);
+  }, []);
+
+  const adjustTotal = useCallback((delta: number) => {
+    setTotalItems((prev) => Math.max(0, prev + delta));
+  }, []);
+
+  const replaceItem = useCallback((id: string, newItem: T, idFn: (item: T) => string) => {
+    setItems((prev) => {
+      const idx = prev.findIndex((item) => idFn(item) === id);
+      if (idx === -1) return prev;
+      const next = [...prev];
+      next[idx] = newItem;
+      return next;
+    });
+  }, []);
+
+  const removeItem = useCallback((id: string, idFn: (item: T) => string) => {
+    setItems((prev) => {
+      const idx = prev.findIndex((item) => idFn(item) === id);
+      if (idx === -1) return prev;
+      const next = [...prev];
+      next.splice(idx, 1);
+      return next;
+    });
+  }, []);
+
+  return { items, setItems: setItemsDirect, loading, error, hasMore: page < totalPages, totalItems, totalPages, loadMore, refresh, adjustTotal, replaceItem, removeItem };
+}
diff --git a/src/index.css b/src/index.css
new file mode 100644
index 0000000..5e8daa9
--- /dev/null
+++ b/src/index.css
@@ -0,0 +1,24 @@
+@import "tailwindcss";
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+@theme {
+  --color-primary: #16a34a;
+  --color-primary-dark: #15803d;
+  --color-surface: #ffffff;
+  --color-surface-dark: #1a1a2e;
+  --color-card: #f8fafc;
+  --color-card-dark: #16213e;
+}
+
+body {
+  @apply bg-gray-50 text-gray-900 dark:bg-gray-950 dark:text-gray-100 antialiased;
+}
+
+@keyframes toast-slide-in {
+  from { transform: translateX(100%); opacity: 0; }
+  to   { transform: translateX(0); opacity: 1; }
+}
+.animate-slide-in {
+  animation: toast-slide-in 0.3s ease-out;
+}
diff --git a/src/lib/__tests__/pdf.test.ts b/src/lib/__tests__/pdf.test.ts
new file mode 100644
index 0000000..8f2668e
--- /dev/null
+++ b/src/lib/__tests__/pdf.test.ts
@@ -0,0 +1,37 @@
+import { describe, it, expect } from 'vitest';
+
+// Unit tests for PDF helper functions
+// Since jsPDF requires a browser environment, we test the pure utility functions
+
+describe('PDF utility functions', () => {
+  it('should format dates correctly', () => {
+    const dateStr = '2024-01-15T10:00:00.000Z';
+    const result = new Date(dateStr).toLocaleDateString('en-US', {
+      month: 'short',
+      day: 'numeric',
+      year: 'numeric',
+    });
+    expect(result).toBe('Jan 15, 2024');
+  });
+
+  it('should calculate line height from font size', () => {
+    const fontSize = 10;
+    const multiplier = 1.2;
+    const lineHeight = Math.ceil(fontSize * multiplier);
+    expect(lineHeight).toBe(12);
+  });
+
+  it('should return default accent color for invalid hex', () => {
+    const hex = 'not-a-color';
+    const isValid = /^#[0-9a-fA-F]{6}$/.test(hex);
+    expect(isValid).toBe(false);
+  });
+
+  it('should validate correct hex colors', () => {
+    expect(/^#[0-9a-fA-F]{6}$/.test('#16a34a')).toBe(true);
+    expect(/^#[0-9a-fA-F]{6}$/.test('#ffffff')).toBe(true);
+    expect(/^#[0-9a-fA-F]{6}$/.test('#000000')).toBe(true);
+    expect(/^#[0-9a-fA-F]{6}$/.test('#fff')).toBe(false);
+    expect(/^#[0-9a-fA-F]{6}$/.test('16a34a')).toBe(false);
+  });
+});
diff --git a/src/lib/__tests__/quoteRoSync.test.ts b/src/lib/__tests__/quoteRoSync.test.ts
new file mode 100644
index 0000000..a290b58
--- /dev/null
+++ b/src/lib/__tests__/quoteRoSync.test.ts
@@ -0,0 +1,68 @@
+import { describe, expect, it } from 'vitest';
+import { mergeApprovedQuoteServicesIntoRO } from '../quoteRoSync';
+import type { QuoteService, ROService } from '../../types';
+
+const quoteService = (overrides: Partial<QuoteService> = {}): QuoteService => ({
+  id: 'quote-service-1',
+  name: 'Brake Pads',
+  price: 240,
+  selected: true,
+  approved: true,
+  customerDecision: 'approved',
+  applyShopCharge: true,
+  ...overrides,
+});
+
+const roService = (overrides: Partial<ROService> = {}): ROService => ({
+  id: 'ro-service-1',
+  name: 'Brake Pads',
+  description: 'Existing work',
+  laborHours: 1,
+  laborRate: 100,
+  partsCost: 60,
+  total: 160,
+  status: 'in_progress',
+  technician: 'Sam',
+  applyShopCharge: true,
+  ...overrides,
+});
+
+describe('quote RO sync', () => {
+  it('updates an originating RO service by source id and preserves workflow fields', () => {
+    const result = mergeApprovedQuoteServicesIntoRO(
+      [roService()],
+      [quoteService({ id: 'ro-ro-1-ro-service-1', sourceROServiceId: 'ro-service-1', price: 275, applyShopCharge: false })],
+      { defaultLaborRate: 125 },
+      'ro-1',
+    );
+
+    expect(result.syncedCount).toBe(1);
+    expect(result.services).toHaveLength(1);
+    expect(result.services[0]).toMatchObject({
+      id: 'ro-service-1',
+      total: 275,
+      status: 'in_progress',
+      technician: 'Sam',
+      applyShopCharge: false,
+    });
+  });
+
+  it('adds newly approved recommendations as full-price RO services', () => {
+    const result = mergeApprovedQuoteServicesIntoRO(
+      [],
+      [quoteService({ id: 'new-rec', name: 'Brake Flush', price: 180 })],
+      { defaultLaborRate: 120 },
+      'ro-1',
+    );
+
+    expect(result.services).toHaveLength(1);
+    expect(result.services[0]).toMatchObject({
+      id: 'qs-new-rec',
+      name: 'Brake Flush',
+      laborHours: 1.5,
+      laborRate: 120,
+      total: 180,
+      applyShopCharge: true,
+    });
+  });
+});
diff --git a/src/lib/__tests__/richtext.test.ts b/src/lib/__tests__/richtext.test.ts
new file mode 100644
index 0000000..cf3daa9
--- /dev/null
+++ b/src/lib/__tests__/richtext.test.ts
@@ -0,0 +1,52 @@
+import { describe, it, expect } from 'vitest';
+import { parseRichText, hasRichText } from '../richtext';
+
+describe('parseRichText', () => {
+  it('returns empty for empty input', () => {
+    expect(parseRichText('')).toEqual([]);
+  });
+
+  it('returns a single plain segment for plain text', () => {
+    expect(parseRichText('hello world')).toEqual([{ text: 'hello world', style: 'plain' }]);
+  });
+
+  it('extracts an accent segment', () => {
+    expect(parseRichText('a {accent}b{/accent} c')).toEqual([
+      { text: 'a ', style: 'plain' },
+      { text: 'b', style: 'accent' },
+      { text: ' c', style: 'plain' },
+    ]);
+  });
+
+  it('handles muted and accent side by side', () => {
+    expect(parseRichText('{accent}red{/accent} {muted}grey{/muted}')).toEqual([
+      { text: 'red', style: 'accent' },
+      { text: ' ', style: 'plain' },
+      { text: 'grey', style: 'muted' },
+    ]);
+  });
+
+  it('preserves unknown template placeholders verbatim', () => {
+    expect(parseRichText('valid for {days} days')).toEqual([
+      { text: 'valid for {days} days', style: 'plain' },
+    ]);
+  });
+
+  it('renders stray closing tags literally (merged with adjacent plain)', () => {
+    expect(parseRichText('oops {/accent}')).toEqual([
+      { text: 'oops {/accent}', style: 'plain' },
+    ]);
+  });
+
+  it('handles bold nested under accent', () => {
+    expect(parseRichText('{accent}a {bold}b{/bold}{/accent}')).toEqual([
+      { text: 'a ', style: 'accent' },
+      { text: 'b', style: 'accent' },
+    ]);
+  });
+
+  it('detects rich text presence', () => {
+    expect(hasRichText('plain text')).toBe(false);
+    expect(hasRichText('{accent}hi{/accent}')).toBe(true);
+  });
+});
diff --git a/src/lib/__tests__/technicianData.test.ts b/src/lib/__tests__/technicianData.test.ts
new file mode 100644
index 0000000..305e3d7
--- /dev/null
+++ b/src/lib/__tests__/technicianData.test.ts
@@ -0,0 +1,117 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+
+const mockGetOne = vi.fn();
+const mockUpdate = vi.fn();
+
+vi.mock('../pocketbase', () => ({
+  pb: {
+    collection: () => ({
+      getOne: mockGetOne,
+      update: mockUpdate,
+    }),
+  },
+}));
+
+import { StaleWriteError, mutateAssignment } from '../technicianData';
+
+function fakeRecord(overrides: Record<string, unknown> = {}) {
+  return {
+    id: 'assign-1',
+    shopUserId: 'shop-1',
+    technicianUserId: 'tech-1',
+    repairOrderId: 'ro-1',
+    roNumber: 'RO-001',
+    vehicleInfo: '2024 Ford F-150',
+    vin: '1FTFW1E51MFA12345',
+    mileage: '45000',
+    serviceLocation: '',
+    status: 'in_progress',
+    services: JSON.stringify([
+      { id: 'svc-1', name: 'Oil Change', description: '', status: 'pending', subStatus: '', technicianNotes: '' },
+    ]),
+    internalNotes: '',
+    clockEntries: '[]',
+    inspectionChecklist: '[]',
+    advisorRequests: '[]',
+    created: '2026-07-06T10:00:00.000Z',
+    updated: '2026-07-06T10:00:00.000Z',
+    ...overrides,
+  };
+}
+
+describe('StaleWriteError', () => {
+  it('has the correct name', () => {
+    const err = new StaleWriteError();
+    expect(err.name).toBe('StaleWriteError');
+  });
+
+  it('has the default message', () => {
+    const err = new StaleWriteError();
+    expect(err.message).toContain('just edited');
+  });
+
+  it('accepts a custom message', () => {
+    const err = new StaleWriteError('custom');
+    expect(err.message).toBe('custom');
+  });
+});
+
+describe('mutateAssignment', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('applies patch and __expectedUpdated on success', async () => {
+    const record = fakeRecord();
+    mockGetOne.mockResolvedValue(record);
+    mockUpdate.mockResolvedValue(record);
+
+    const result = await mutateAssignment('assign-1', (_current) => ({
+      status: 'completed',
+    }));
+
+    expect(mockGetOne).toHaveBeenCalledWith('assign-1');
+    expect(mockUpdate).toHaveBeenCalledWith('assign-1', {
+      status: 'completed',
+      __expectedUpdated: record.updated,
+    });
+    expect(result).toBeDefined();
+    expect(result.id).toBe('assign-1');
+  });
+
+  it('throws StaleWriteError on 409 conflict', async () => {
+    mockGetOne.mockResolvedValue(fakeRecord());
+    mockUpdate.mockRejectedValue({ status: 409, message: 'optimistic lock' });
+
+    await expect(
+      mutateAssignment('assign-1', () => ({ status: 'completed' })),
+    ).rejects.toThrow(StaleWriteError);
+  });
+
+  it('re-throws non-409 errors', async () => {
+    mockGetOne.mockResolvedValue(fakeRecord());
+    const networkError = new Error('Network error');
+    mockUpdate.mockRejectedValue(networkError);
+
+    await expect(
+      mutateAssignment('assign-1', () => ({ status: 'completed' })),
+    ).rejects.toThrow('Network error');
+  });
+
+  it('uses the mutator result as the patch', async () => {
+    const record = fakeRecord();
+    mockGetOne.mockResolvedValue(record);
+    mockUpdate.mockResolvedValue(record);
+
+    await mutateAssignment('assign-1', (current) => ({
+      services: JSON.stringify(
+        current.services.map((s: { id: string }) =>
+          s.id === 'svc-1' ? { ...s, status: 'completed' } : s,
+        ),
+      ),
+    }));
+
+    const patch = mockUpdate.mock.calls[0][1];
+    expect(JSON.parse(patch.services)[0].status).toBe('completed');
+  });
+});
diff --git a/src/lib/__tests__/totals.test.ts b/src/lib/__tests__/totals.test.ts
new file mode 100644
index 0000000..de627a3
--- /dev/null
+++ b/src/lib/__tests__/totals.test.ts
@@ -0,0 +1,30 @@
+import { describe, expect, it } from 'vitest';
+import { computeSplitQuoteTotals } from '../totals';
+import type { QuoteService } from '../../types';
+
+const service = (id: string, price: number, customerDecision: QuoteService['customerDecision'], applyShopCharge?: boolean): QuoteService => ({
+  id,
+  name: `Service ${id}`,
+  price,
+  selected: true,
+  approved: customerDecision === 'approved',
+  customerDecision,
+  ...(applyShopCharge === undefined ? {} : { applyShopCharge }),
+});
+
+describe('quote totals', () => {
+  it('applies shop charge to approved transferred services unless explicitly disabled', () => {
+    const totals = computeSplitQuoteTotals(
+      [
+        service('approved', 100, 'approved'),
+        service('pending', 50, 'pending', false),
+      ],
+      { value: 0, type: 'dollar' },
+      { taxRate: 0, shopChargeRate: 3, shopChargeCap: 69.95 },
+    );
+
+    expect(totals.approved.shopCharge).toBe(3);
+    expect(totals.approved.total).toBe(103);
+    expect(totals.pending.shopCharge).toBe(0);
+  });
+});
diff --git a/src/lib/__tests__/userMessages.test.ts b/src/lib/__tests__/userMessages.test.ts
new file mode 100644
index 0000000..c99ef94
--- /dev/null
+++ b/src/lib/__tests__/userMessages.test.ts
@@ -0,0 +1,19 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { swallow, swallowAsync } from '../userMessages';
+
+describe('swallow / swallowAsync', () => {
+  beforeEach(() => { vi.spyOn(console, 'error').mockImplementation(() => {}); });
+
+  it('returns value on success', () => {
+    expect(swallow<number | string>('ctx', 'fallback', () => 42)).toBe(42);
+  });
+  it('returns fallback on throw', () => {
+    expect(swallow('ctx', 'fallback', () => { throw new Error('x'); })).toBe('fallback');
+  });
+  it('async returns value on success', async () => {
+    expect(await swallowAsync<number | string>('ctx', 'fallback', async () => 7)).toBe(7);
+  });
+  it('async returns fallback on rejection', async () => {
+    expect(await swallowAsync('ctx', 'fallback', async () => { throw new Error('x'); })).toBe('fallback');
+  });
+});
diff --git a/src/lib/ai.ts b/src/lib/ai.ts
new file mode 100644
index 0000000..9f32e7d
--- /dev/null
+++ b/src/lib/ai.ts
@@ -0,0 +1,312 @@
+/**
+ * AI service module — calls /deepseek/v1/chat/completions
+ * Ported from original api.js
+ */
+import { pb } from './pocketbase';
+
+export interface ServiceItem {
+  name: string;
+  recommendation?: string;
+}
+
+export interface PriorityResult {
+  name: string;
+  rank: number;
+  priority_reason: string;
+}
+
+export interface ExplanationResult {
+  level: string;
+  explanation: string;
+}
+
+export interface ExplanationParams {
+  serviceName: string;
+  recommendation: string;
+  technicianNotes?: string;
+  vehicleInfo?: string;
+  mileage?: number;
+  maintenanceInterval?: number;
+}
+
+export interface CatalogDescriptionParams {
+  serviceName: string;
+  category?: string;
+  existingDescription?: string;
+}
+
+export interface SuggestVehicle {
+  vehicleInfo: string;
+  mileage: number;
+  vin?: string;
+}
+
+export interface CatalogItem {
+  name: string;
+  category: string;
+  price: number;
+  maintenanceInterval?: number;
+}
+
+export interface SuggestResult {
+  name: string;
+  reason: string;
+}
+
+// ─── Internal helper ────────────────────────────────────────
+
+const AI_ENABLED = import.meta.env.VITE_AI_ENABLED !== 'false';
+
+async function callDeepSeek(
+  systemPrompt: string,
+  userContent: string,
+  maxTokens = 500,
+  temperature = 0,
+): Promise<string | null> {
+  if (!AI_ENABLED) return null;
+  try {
+    const res = await fetch('/deepseek/v1/chat/completions', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: pb.authStore.token ? `Bearer ${pb.authStore.token}` : '',
+      },
+      body: JSON.stringify({
+        model: 'deepseek-v4-flash',
+        messages: [
+          { role: 'system', content: systemPrompt },
+          { role: 'user', content: userContent },
+        ],
+        temperature,
+        thinking: { type: 'disabled' as const },
+        max_tokens: maxTokens,
+      }),
+    });
+
+    if (res.status === 401) {
+      console.error('DeepSeek proxy: unauthorized (PB token invalid or missing)');
+      return null;
+    }
+    if (res.status === 429) {
+      console.error('DeepSeek proxy: rate limited');
+      return null;
+    }
+    if (!res.ok) {
+      console.error(`DeepSeek proxy error: ${res.status} ${res.statusText}`);
+      return null;
+    }
+
+    const data = await res.json();
+    const content = data?.choices?.[0]?.message?.content;
+    if (!content) {
+      console.error('No content in DeepSeek response');
+      return null;
+    }
+    return content;
+  } catch (err) {
+    console.error('DeepSeek call failed:', err);
+    return null;
+  }
+}
+
+function stripCodeBlocks(text: string): string {
+  return text.trim().replace(/```json\s*/gi, '').replace(/```\s*/g, '').trim();
+}
+
+// ─── 1. Generate Priorities ─────────────────────────────────
+
+/**
+ * Sends a list of services to the AI for priority ranking.
+ * Safety-first: CRITICAL_SAFETY > SAFETY_CONCERN > RECOMMENDED > MAINTENANCE > OPTIONAL
+ */
+export async function getPriorityAnalysis(
+  services: ServiceItem[],
+): Promise<PriorityResult[] | null> {
+  if (!services?.length) return null;
+
+  const servicesToAnalyze = services.map((s) => ({
+    name: s.name,
+    recommendation: s.recommendation,
+  }));
+
+  const systemPrompt =
+    'You are an expert automotive service advisor. Prioritize services with customer safety first. Return ONLY a valid JSON array, no markdown, no explanation outside the JSON.';
+
+  const userPrompt = `You are an expert automotive service advisor. Your primary goal is to ensure customer safety. Based on the following list of services, you must create a prioritized list. The prioritization has two tiers:
+
+1. **Customer Safety:** First, identify all services that are critical for customer safety. These include, but are not limited to, issues with brakes, tires, steering, suspension, and anything that could lead to a loss of vehicle control. Rank these items amongst themselves.
+2. **Vehicle Health:** After all safety-critical items are listed, list the remaining services. Prioritize these based on their importance to the vehicle's long-term health and preventing expensive future repairs (e.g., timing belts, oil leaks are more important than cabin air filters).
+
+Provide your response ONLY as a single JSON array of objects, with the final ranking reflected in the 'rank' key (from 1 to N). Each object must have three keys: 'name' (the original service name), 'rank' (the final calculated rank), and 'priority_reason' (a brief, one-sentence explanation for why it has that priority, mentioning if it is a safety concern).
+
+Do not add any other text or explanation outside of the JSON array.
+
+Here is the list of services to analyze:
+${JSON.stringify(servicesToAnalyze)}`;
+
+  const raw = await callDeepSeek(systemPrompt, userPrompt);
+  if (!raw) return null;
+
+  try {
+    const jsonText = stripCodeBlocks(raw);
+    const analysis: PriorityResult[] = JSON.parse(jsonText);
+    analysis.sort((a, b) => a.rank - b.rank);
+    return analysis;
+  } catch (err) {
+    console.error('Failed to parse priority analysis:', err, 'Raw:', raw);
+    return null;
+  }
+}
+
+// ─── 2. AI Write Explanation ────────────────────────────────
+
+/**
+ * Generates a professional customer-facing explanation for a service.
+ * Incorporates vehicle context, mileage, technician notes.
+ */
+export async function aiWriteExplanation(
+  params: ExplanationParams,
+): Promise<ExplanationResult | null> {
+  const { serviceName, recommendation, technicianNotes, vehicleInfo, mileage, maintenanceInterval } = params;
+
+  if (!serviceName || !recommendation) return null;
+
+  let additionalContext = '';
+  const mileageNum = mileage ?? 0;
+
+  if (technicianNotes) {
+    additionalContext += `\nTechnician's internal notes: "${technicianNotes}"`;
+  }
+  if (vehicleInfo) {
+    additionalContext += `\nVehicle: ${vehicleInfo}`;
+  }
+  if (maintenanceInterval && mileageNum > 0) {
+    const lastInterval = Math.floor(mileageNum / maintenanceInterval) * maintenanceInterval;
+    const nextInterval = lastInterval + maintenanceInterval;
+    const milesUntilNext = nextInterval - mileageNum;
+    const occurrences = Math.floor(mileageNum / maintenanceInterval);
+    additionalContext += `\nCurrent mileage: ${mileageNum.toLocaleString()} miles`;
+    additionalContext += `\nService interval: every ${maintenanceInterval.toLocaleString()} miles.`;
+    if (occurrences >= 1) {
+      const s = ['th', 'st', 'nd', 'rd'];
+      const v = occurrences % 100;
+      const ordinal = occurrences + (s[(v - 20) % 10] || s[v] || s[0]);
+      additionalContext += ` This would be the ${ordinal} time this service is performed.`;
+    }
+    if (milesUntilNext === 0) {
+      additionalContext += ` Service is due now. Do NOT say past due — it is exactly at its interval.`;
+    } else if (milesUntilNext > 0) {
+      additionalContext += ` Next interval at ${nextInterval.toLocaleString()} miles (${milesUntilNext.toLocaleString()} from now).`;
+    } else {
+      additionalContext += ` Service was due at ${lastInterval.toLocaleString()} miles (${Math.abs(milesUntilNext).toLocaleString()} ago).`;
+    }
+  } else if (mileageNum > 0) {
+    additionalContext += `\nVehicle mileage (context only — do NOT mention unless the service is mileage-based): ${mileageNum.toLocaleString()} miles`;
+  }
+
+  const systemPrompt = `A customer's vehicle needs a service called "${serviceName}". The technician's reason for this recommendation is: "${recommendation}".${additionalContext ? '\n\nADDITIONAL CONTEXT FROM THE TECHNICIAN:' + additionalContext : ''}
+
+Your task is to:
+1. Determine the appropriate recommendation level based on the reason and any additional context provided (CRITICAL, RECOMMENDED, OPTIONAL, PREVENTIVE, or MAINTENANCE)
+2. Write a professional explanation as if a master technician is explaining to a customer
+3. If technician notes are provided, incorporate that specific information into the explanation
+4. If mileage and interval data are provided, mention whether the service is due now, approaching, or past due. If mileage is provided WITHOUT interval data, do NOT mention the mileage unless the service itself is mileage-based.
+
+Response format:
+LEVEL: [Choose one: CRITICAL, RECOMMENDED, OPTIONAL, PREVENTIVE, MAINTENANCE]
+EXPLANATION: [Write 2-4 sentences explaining the service, safety implications, and consequences of neglect using qualifying words like "potentially", "may", "could". Frame risks helpfully, not alarmingly.]`;
+
+  const raw = await callDeepSeek(systemPrompt, `${serviceName}\n${recommendation}${additionalContext}`, 400);
+  if (!raw) return null;
+
+  const levelMatch = raw.match(/LEVEL:\s*(CRITICAL|RECOMMENDED|OPTIONAL|PREVENTIVE|MAINTENANCE)/i);
+  const explanationMatch = raw.match(/EXPLANATION:\s*(.+)/s);
+
+  if (levelMatch && explanationMatch) {
+    return {
+      level: levelMatch[1].toUpperCase(),
+      explanation: explanationMatch[1].trim(),
+    };
+  }
+
+  // Fallback: use raw response as explanation
+  console.warn('Could not parse AI response format, using raw');
+  return { level: 'RECOMMENDED', explanation: raw.trim() };
+}
+
+// ─── 2b. AI Write Catalog Description ───────────────────────
+
+export async function aiWriteCatalogDescription(
+  params: CatalogDescriptionParams,
+): Promise<string | null> {
+  const { serviceName, category, existingDescription } = params;
+
+  if (!serviceName.trim()) return null;
+
+  const context = JSON.stringify({
+    serviceName: serviceName.trim(),
+    category: category?.trim() || '',
+    existingDescription: existingDescription?.trim() || '',
+  });
+
+  const systemPrompt = `You write short, professional service catalog descriptions for an automotive repair shop. Return ONLY the description text, no quotes, labels, markdown, or bullet points. Keep it to 1-3 sentences and make it suitable for reuse in customer-facing quotes and internal catalog lists.`;
+
+  const userPrompt = `Write a concise service description using this context: ${context}`;
+
+  const raw = await callDeepSeek(systemPrompt, userPrompt, 220, 0.4);
+  return raw?.trim() || null;
+}
+
+// ─── 3. AI Suggest Services ─────────────────────────────────
+
+/**
+ * Suggests additional services based on vehicle info, mileage, and service catalog.
+ * Only recommends services from the provided catalog.
+ */
+export async function aiSuggestServices(
+  vehicle: SuggestVehicle,
+  selectedServices: string[],
+  catalog: CatalogItem[],
+): Promise<SuggestResult[] | null> {
+  if (!catalog?.length) return null;
+
+  const userData = JSON.stringify({
+    vehicle: vehicle.vehicleInfo || 'Not specified',
+    mileage: vehicle.mileage || 'Not specified',
+    mileageNumber: vehicle.mileage || 0,
+    vin: vehicle.vin || 'Not specified',
+    alreadySelectedServices: selectedServices,
+    availableServicesCatalog: catalog,
+  });
+
+  const systemPrompt = `You are an ASE-certified master technician recommending preventive maintenance services. You ONLY know the vehicle year/make/model, mileage, and which services are already selected. You have NOT inspected this vehicle and do NOT know its actual condition.
+
+RULES:
+- ONLY suggest services based on MILEAGE-BASED MAINTENANCE INTERVALS or COMPLEMENTARY PAIRINGS to already-selected services.
+- NEVER invent or assume a condition. Do NOT say anything is "leaking," "worn," "cracked," "failing," "low," "dirty," or "due" unless referencing a manufacturer mileage interval.
+- Every reason MUST cite either: (a) a mileage milestone, or (b) a known complementary pairing.
+
+MILEAGE-BASED RECOMMENDATIONS:
+- 30K-60K miles: transmission service, coolant flush, brake fluid exchange, cabin/air filters, spark plugs
+- 60K-90K miles: timing belt, water pump, major fluid services, serpentine belt
+- 90K-120K miles: major scheduled maintenance, drive belts, hoses
+
+Return ONLY a JSON array of objects with "name" (exact catalog service name) and "reason" (1 sentence explaining why). No markdown, no intro.`;
+
+  const userContent = `Vehicle data and catalog:\n${userData}\n\nSuggest up to 3 additional services.`;
+
+  const raw = await callDeepSeek(systemPrompt, userContent, 500, 0.2);
+  if (!raw) return null;
+
+  try {
+    const jsonText = stripCodeBlocks(raw);
+    const suggestions: { name: string; reason: string }[] = JSON.parse(jsonText);
+
+    // Cross-reference against catalog — only return catalog matches
+    const catalogNames = new Set(catalog.map((c) => c.name.toLowerCase()));
+    return suggestions.filter((s) => catalogNames.has(s.name.toLowerCase()));
+  } catch (err) {
+    console.error('Failed to parse AI suggestions:', err, 'Raw:', raw);
+    return null;
+  }
+}
diff --git a/src/lib/appointments.ts b/src/lib/appointments.ts
new file mode 100644
index 0000000..c71b20a
--- /dev/null
+++ b/src/lib/appointments.ts
@@ -0,0 +1,219 @@
+export function generateRONumber(): string {
+  const now = new Date();
+  const y = now.getFullYear().toString().slice(2);
+  const m = String(now.getMonth() + 1).padStart(2, '0');
+  const d = String(now.getDate()).padStart(2, '0');
+  const seq = String(Math.floor(Math.random() * 9999)).padStart(4, '0');
+  return `RO-${y}${m}${d}-${seq}`;
+}
+
+export function formatDateDisplay(iso: string): string {
+  if (!iso) return '\u2014';
+  const d = new Date(iso + (iso.includes('T') ? '' : 'T00:00:00'));
+  return new Intl.DateTimeFormat('en-US', {
+    weekday: 'long',
+    month: 'long',
+    day: 'numeric',
+    year: 'numeric',
+  }).format(d);
+}
+
+export function formatTimeShort(time: string): string {
+  if (!time) return '';
+  const [h, m] = time.split(':').map(Number);
+  if (isNaN(h) || isNaN(m)) return time;
+  const ampm = h >= 12 ? 'PM' : 'AM';
+  const h12 = h % 12 || 12;
+  return `${h12}:${m.toString().padStart(2, '0')} ${ampm}`;
+}
+
+export function formatArrivalWindow(time: string, windowMinutes?: number): string {
+  if (!time) return '';
+  const [h, m] = time.split(':').map(Number);
+  if (isNaN(h) || isNaN(m)) return formatTimeShort(time);
+  const startMin = h * 60 + m;
+  const endMin = startMin + (windowMinutes ?? 0);
+  const endH = Math.floor(endMin / 60) % 24;
+  const endM = endMin % 60;
+  const ampm = endH >= 12 ? 'PM' : 'AM';
+  const h12 = h % 12 || 12;
+  const start = `${h12}:${m.toString().padStart(2, '0')} ${ampm}`;
+  if (!windowMinutes || windowMinutes <= 0) return start;
+  const endAmpm = endH >= 12 ? 'PM' : 'AM';
+  const endH12 = endH % 12 || 12;
+  return `${start} \u2013 ${endH12}:${endM.toString().padStart(2, '0')} ${endAmpm}`;
+}
+
+export function formatDurationShort(minutes?: number): string {
+  if (minutes == null || minutes <= 0) return '';
+  const hrs = Math.floor(minutes / 60);
+  const mins = minutes % 60;
+  if (hrs === 0) return `${mins}m`;
+  if (mins === 0) return `${hrs}h`;
+  return `${hrs}h ${mins}m`;
+}
+
+export function splitAppointmentDateTime(value: string): { date: string; time: string } {
+  if (!value) return { date: '', time: '' };
+  if (value.includes('T')) {
+    const d = new Date(value);
+    const date = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
+    const time = `${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}`;
+    return { date, time };
+  }
+  return { date: value, time: '' };
+}
+
+export function combineAppointmentDateTime(date: string, time: string): string {
+  if (!date) return '';
+  if (!time) return date;
+  return `${date}T${time}:00`;
+}
+
+export function extractVinFromNotes(notes: string): string {
+  const match = notes.match(/vin[:\s]*([A-HJ-NPR-Z0-9]{17})/i);
+  return match ? match[1].toUpperCase() : '';
+}
+
+export function extractDurationFromNotes(notes: string): number {
+  const match = notes.match(/(\d+)\s*(?:hr|hour|hours)/i);
+  return match ? parseInt(match[1], 10) * 60 : 60;
+}
+
+export function extractServiceLocationFromNotes(notes: string): string {
+  const match = notes.match(/location[:\s]+(.+)/i);
+  return match ? match[1].trim() : '';
+}
+
+export function extractTravelFeeFromNotes(notes: string): number {
+  const match = notes.match(/travel\s*fee[:\s]*\$?([\d.]+)/i);
+  return match ? parseFloat(match[1]) : 0;
+}
+
+export function extractTripMilesFromNotes(notes: string): number {
+  const match = notes.match(/(\d+)\s*miles?/i);
+  return match ? parseInt(match[1], 10) : 0;
+}
+
+export function extractArrivalWindowFromNotes(notes: string): number {
+  const match = notes.match(/window[:\s]*(\d+)/i);
+  return match ? parseInt(match[1], 10) : 0;
+}
+
+export function stripStructuredAppointmentNotes(notes: string): string {
+  return notes
+    .replace(/vin[:\s]*[A-HJ-NPR-Z0-9]{17}/gi, '')
+    .replace(/location[:\s]+.+/gi, '')
+    .replace(/travel\s*fee[:\s]*\$?[\d.]+/gi, '')
+    .replace(/\d+\s*miles?/gi, '')
+    .replace(/window[:\s]*\d+/gi, '')
+    .replace(/\d+\s*(?:hr|hour|hours)/gi, '')
+    .replace(/\s{2,}/g, ' ')
+    .trim();
+}
+
+export function normalizeTimeToHHMM(time: string): string {
+  if (!time) return '';
+  if (/^\d{2}:\d{2}$/.test(time)) return time;
+  const cleaned = time.replace(/[^0-9a-zA-Z:]/g, ' ').trim();
+  const match = cleaned.match(/(\d{1,2})\s*[:.]?\s*(\d{0,2})\s*(am|pm)/i);
+  if (match) {
+    let hours = parseInt(match[1], 10);
+    const minutes = match[2] ? parseInt(match[2].padEnd(2, '0'), 10) : 0;
+    const isPM = match[3].toLowerCase() === 'pm';
+    if (isPM && hours !== 12) hours += 12;
+    if (!isPM && hours === 12) hours = 0;
+    return `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}`;
+  }
+  const hMatch = cleaned.match(/(\d{1,2})/);
+  return hMatch ? `${String(parseInt(hMatch[1], 10)).padStart(2, '0')}:00` : '';
+}
+
+export function getDateString(dateStr: string): string {
+  if (!dateStr) return '';
+  if (dateStr.includes('T')) return dateStr.split('T')[0];
+  return dateStr;
+}
+
+export function todayISO(): string {
+  const d = new Date();
+  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
+}
+
+export function tomorrowISO(): string {
+  const d = new Date();
+  d.setDate(d.getDate() + 1);
+  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
+}
+
+export function weekEndISO(): string {
+  const d = new Date();
+  const dayOfWeek = d.getDay();
+  const diff = dayOfWeek === 0 ? 0 : 7 - dayOfWeek;
+  d.setDate(d.getDate() + diff);
+  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
+}
+
+export function isValidDate(str: string): boolean {
+  if (!str) return false;
+  const d = new Date(str + 'T00:00:00');
+  return !isNaN(d.getTime());
+}
+
+export function buildAppointmentPayload(
+  data: Record<string, unknown>,
+  extra: Record<string, unknown>,
+): Record<string, unknown> {
+  const s = (v: unknown): string => (v ?? '').toString();
+  const n = (v: unknown, d: number): number => { const x = Number(v); return isNaN(x) ? d : x; };
+  const services: Record<string, unknown>[] = [];
+  return {
+    customerId: s(data.customerId),
+    customerName: s(data.customerName),
+    customerPhone: s(data.customerPhone).replace(/\D/g, ''),
+    customerEmail: s(data.customerEmail),
+    vehicleInfo: s(data.vehicleInfo),
+    vin: s(data.vin).toUpperCase(),
+    date: s(data.date),
+    time: s(data.time),
+    arrivalWindowMinutes: n(data.arrivalWindowMinutes, 0),
+    tripMiles: n(data.tripMiles, 0),
+    durationMinutes: n(data.durationMinutes, 60),
+    advisorName: s(data.advisorName),
+    serviceType: s(data.serviceType),
+    serviceLocation: s(data.serviceLocation),
+    notes: s(data.notes),
+    services: JSON.stringify(services),
+    ...extra,
+  };
+}
+
+export function normalizeAppointmentRecord(record: any): import('../types').Appointment {
+  try {
+    if (record.services && typeof record.services === 'string') {
+      record.services = JSON.parse(record.services);
+    }
+  } catch {}
+  return {
+    id: record.id || '',
+    customerId: record.customerId || '',
+    customerName: record.customerName || '',
+    customerPhone: record.customerPhone || '',
+    customerEmail: record.customerEmail || '',
+    vehicleInfo: record.vehicleInfo || '',
+    vin: record.vin || '',
+    date: getDateString(record.date || ''),
+    time: record.time || '',
+    durationMinutes: record.durationMinutes ?? 60,
+    advisorName: record.advisorName || '',
+    serviceType: record.serviceType || '',
+    serviceLocation: record.serviceLocation || '',
+    status: record.status || 'scheduled',
+    notes: record.notes || '',
+    repairOrderId: record.repairOrderId || '',
+    arrivalWindowMinutes: record.arrivalWindowMinutes ?? 0,
+    tripMiles: record.tripMiles ?? 0,
+    created: record.created || '',
+    updated: record.updated || '',
+  };
+}
diff --git a/src/lib/contactLinks.ts b/src/lib/contactLinks.ts
new file mode 100644
index 0000000..71f8353
--- /dev/null
+++ b/src/lib/contactLinks.ts
@@ -0,0 +1,10 @@
+export function openEmailDraft(to: string, subject: string, body: string) {
+  const href = `mailto:${encodeURIComponent(to)}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
+  window.location.href = href;
+}
+
+export function openSmsDraft(to: string, body: string) {
+  const numbersOnly = to.replace(/\D/g, '');
+  const href = `sms:${numbersOnly}?&body=${encodeURIComponent(body)}`;
+  window.location.href = href;
+}
diff --git a/src/lib/customerName.ts b/src/lib/customerName.ts
new file mode 100644
index 0000000..7dd7f91
--- /dev/null
+++ b/src/lib/customerName.ts
@@ -0,0 +1,109 @@
+/**
+ * Helpers for first / middle / last name handling across appointment & RO forms.
+ */
+
+/**
+ * Parse a full-name string into first, middle, and last parts.
+ * Heuristic: first word → firstName, last word → lastName, rest → middleName.
+ * If there's only one word, it goes into firstName.
+ * If there are two words, they are firstName and lastName.
+ * If three or more, middle is everything between first and last.
+ */
+export function parseName(
+  fullName: string,
+): { firstName: string; middleName: string; lastName: string } {
+  const parts = fullName.trim().split(/\s+/).filter(Boolean);
+  if (parts.length === 0) return { firstName: '', middleName: '', lastName: '' };
+  if (parts.length === 1) return { firstName: parts[0], middleName: '', lastName: '' };
+  if (parts.length === 2) return { firstName: parts[0], middleName: '', lastName: parts[1] };
+  return {
+    firstName: parts[0],
+    middleName: parts.slice(1, -1).join(' '),
+    lastName: parts[parts.length - 1],
+  };
+}
+
+/**
+ * Compose first / middle / last into a single display / storage name.
+ */
+export function composeName(
+  firstName: string,
+  middleName: string,
+  lastName: string,
+): string {
+  return [firstName, middleName, lastName].filter(Boolean).join(' ').trim();
+}
+
+/**
+ * Search an array of customers for a match against a composite query.
+ * Returns the best match, or null if none found.
+ *
+ * The query object is what the user has typed into the first/middle/last/phone
+ * fields.  We build a full-name from the parts and then search customer
+ * records by (full name) and (phone).
+ */
+export interface CustomerMatchQuery {
+  firstName: string;
+  middleName: string;
+  lastName: string;
+  phone: string;
+}
+
+export interface CustomerMatchRecord {
+  id: string;
+  name: string;
+  phone: string;
+  email: string;
+}
+
+/**
+ * Find the best-matching customer from a list given partial form input.
+ * Returns null when no reasonable match exists.
+ *
+ * Matching logic:
+ *  1. If phone is provided (3+ digits), try an exact digit-only phone match first.
+ *  2. If a full name has been typed (first + last), try an exact name match.
+ *  3. If only a partial name exists, try a simple "starts-with" / "includes"
+ *     on the customer's name.
+ */
+export function findMatchingCustomer<T extends CustomerMatchRecord>(
+  customers: T[],
+  query: CustomerMatchQuery,
+): T | null {
+  const { firstName, middleName, lastName, phone } = query;
+
+  // Clean phone for comparison
+  const cleanPhone = phone.replace(/\D/g, '');
+  const fullName = composeName(firstName, middleName, lastName).toLowerCase();
+
+  // ── Phone match (exact) ──
+  if (cleanPhone.length >= 3) {
+    const byPhone = customers.find((c) => c.phone.replace(/\D/g, '') === cleanPhone);
+    if (byPhone) return byPhone;
+  }
+
+  // ── Full-name match (exact) ──
+  if (fullName.length > 0 && lastName && firstName) {
+    const byExactName = customers.find(
+      (c) => c.name.toLowerCase() === fullName,
+    );
+    if (byExactName) return byExactName;
+  }
+
+  // ── Partial name ──
+  if (fullName.length > 0) {
+    // try "starts with"
+    const byStartsWith = customers.find((c) =>
+      c.name.toLowerCase().startsWith(fullName),
+    );
+    if (byStartsWith) return byStartsWith;
+
+    // try "includes"
+    const byIncludes = customers.find((c) =>
+      c.name.toLowerCase().includes(fullName),
+    );
+    if (byIncludes) return byIncludes;
+  }
+
+  return null;
+}
diff --git a/src/lib/customers.ts b/src/lib/customers.ts
new file mode 100644
index 0000000..55063db
--- /dev/null
+++ b/src/lib/customers.ts
@@ -0,0 +1,85 @@
+import type { VehicleRecord, RepairOrderRecord } from '../components/customers/types';
+
+export function formatVehicleLabel(v: VehicleRecord): string {
+  const parts = [v.year, v.make, v.model].filter(Boolean);
+  return parts.length > 0 ? parts.join(' ') : 'Unknown vehicle';
+}
+
+export function vehicleKey(v: Pick<VehicleRecord, 'year' | 'make' | 'model' | 'vin'>): string {
+  return (v.vin || [v.year, v.make, v.model].filter(Boolean).join(' ')).trim().toLowerCase();
+}
+
+export function escapePbString(value: string): string {
+  return value.replace(/'/g, "\\'");
+}
+
+export function activeROFilterForCustomer(userId: string, customerId: string, previousName: string): string {
+  const activeStatuses = [
+    "status = 'active'",
+    "status = 'in_progress'",
+    "status = 'waiting_parts'",
+    "status = 'waiting_pickup'",
+  ].join(' || ');
+  const identityFilters = [
+    `customerId = '${escapePbString(customerId)}'`,
+    previousName.trim() ? `customerName = '${escapePbString(previousName.trim())}'` : '',
+  ].filter(Boolean).join(' || ');
+
+  return `userId = '${escapePbString(userId)}' && (${identityFilters}) && (${activeStatuses})`;
+}
+
+export function getRoStatusLabel(ro: RepairOrderRecord): string {
+  const s = ro.workStatus || ro.status || '';
+  switch (s) {
+    case 'active': case 'open': return 'Open';
+    case 'in-progress': case 'in_progress': return 'In Progress';
+    case 'waiter': case 'waiting_parts': return 'Waiting Parts';
+    case 'completed': return 'Completed';
+    case 'final_close':
+    case 'delivered': return 'Final Close';
+    case 'cancelled': return 'Cancelled';
+    default: return s || 'Unknown';
+  }
+}
+
+export function getRoStatusColor(ro: RepairOrderRecord): string {
+  const s = ro.workStatus || ro.status || '';
+  switch (s) {
+    case 'active': case 'open':
+      return 'bg-blue-50 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400';
+    case 'in-progress': case 'in_progress':
+      return 'bg-yellow-50 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400';
+    case 'waiter': case 'waiting_parts':
+      return 'bg-orange-50 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400';
+    case 'completed': case 'final_close': case 'delivered':
+      return 'bg-green-50 text-green-700 dark:bg-green-900/30 dark:text-green-400';
+    case 'cancelled':
+      return 'bg-red-50 text-red-700 dark:bg-red-900/30 dark:text-red-400';
+    default:
+      return 'bg-gray-50 text-gray-700 dark:bg-gray-900/30 dark:text-gray-400';
+  }
+}
+
+export function formatCustomerDate(dateStr: string): string {
+  if (!dateStr) return '\u2014';
+  try {
+    const d = new Date(dateStr);
+    return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
+  } catch {
+    return dateStr;
+  }
+}
+
+export function parseQuoteServices(raw: unknown): { name: string; price: number; customerDecision: string }[] {
+  if (!raw) return [];
+  let items = raw;
+  if (typeof raw === 'string') {
+    try { items = JSON.parse(raw); } catch { return []; }
+  }
+  if (!Array.isArray(items)) return [];
+  return items.map((s: any) => ({
+    name: s.name || 'Service',
+    price: typeof s.price === 'number' ? s.price : 0,
+    customerDecision: s.customerDecision || 'pending',
+  }));
+}
diff --git a/src/lib/format.ts b/src/lib/format.ts
new file mode 100644
index 0000000..038beae
--- /dev/null
+++ b/src/lib/format.ts
@@ -0,0 +1,58 @@
+// Shared format helpers — single source of truth so the RO page, RO form,
+// quote page, invoice page, etc. all agree on currency / date formatting.
+
+export function formatCurrency(amount: number): string {
+  const n = Number.isFinite(amount) ? amount : 0;
+  return new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency: 'USD',
+  }).format(n);
+}
+
+export function formatNumber(value: number, fractionDigits = 0): string {
+  const n = Number.isFinite(value) ? value : 0;
+  return new Intl.NumberFormat('en-US', {
+    minimumFractionDigits: fractionDigits,
+    maximumFractionDigits: fractionDigits,
+  }).format(n);
+}
+
+export function formatDate(iso: string | undefined | null): string {
+  if (!iso) return '—';
+  const d = new Date(iso);
+  if (isNaN(d.getTime())) return '—';
+  return new Intl.DateTimeFormat('en-US', {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+  }).format(d);
+}
+
+export function formatDateTime(iso: string | undefined | null): string {
+  if (!iso) return '—';
+  const d = new Date(iso);
+  if (isNaN(d.getTime())) return '—';
+  return d.toLocaleString('en-US', {
+    month: 'short',
+    day: 'numeric',
+    hour: 'numeric',
+    minute: '2-digit',
+  });
+}
+
+// Short HH:MM for compact clocks / timelines.
+export function formatClockTime(iso: string | undefined | null): string {
+  if (!iso) return '—';
+  const d = new Date(iso);
+  if (isNaN(d.getTime())) return '—';
+  return d.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' });
+}
+
+// Human-friendly elapsed minutes/hours, e.g. "1h 23m".
+export function formatElapsed(minutes: number): string {
+  if (!Number.isFinite(minutes) || minutes <= 0) return '0m';
+  const h = Math.floor(minutes / 60);
+  const m = Math.floor(minutes % 60);
+  if (h > 0) return `${h}h ${m}m`;
+  return `${m}m`;
+}
\ No newline at end of file
diff --git a/src/lib/pdf-to-images.ts b/src/lib/pdf-to-images.ts
new file mode 100644
index 0000000..fbcec1e
--- /dev/null
+++ b/src/lib/pdf-to-images.ts
@@ -0,0 +1,182 @@
+/**
+ * pdf-to-images.ts
+ * ─────────────────────────────────────────────────────────────────────────────
+ * Converts every page of an already-built jsPDF document into a separate PNG
+ * image and triggers a browser download for each one.
+ *
+ * Requires pdfjs-dist (Mozilla's PDF.js) to be installed.
+ * Worker must be configured in the app entry point — see main.tsx.
+ *
+ * Usage:
+ *   import { downloadPdfAsImages } from '../lib/pdf-to-images';
+ *
+ *   const doc = new jsPDF();
+ *   // ... build PDF content ...
+ *   await downloadPdfAsImages(doc, 'Jon Smith');
+ *   // → downloads: Jon_Smith_Page1.png, Jon_Smith_Page2.png, ...
+ */
+
+import type jsPDF from 'jspdf';
+import type * as pdfjsLib from 'pdfjs-dist';
+import { ensurePdfWorker } from './pdfjs-worker';
+
+/**
+ * Render every page of a finished PDF as separate PNGs and
+ * automatically trigger a download for each one.
+ *
+ * Accepts either a finished jsPDF instance OR a Blob containing PDF bytes.
+ * This dual-input makes it convenient to use with generateQuotePDF()
+ * which returns a Blob — no need to re-parse or rebuild the doc.
+ *
+ * @param pdfInput    – A completed jsPDF instance (call .output('arraybuffer'))
+ *                      OR a Blob/ArrayBuffer containing raw PDF bytes.
+ * @param customerName – Used in the download filename; spaces become underscores.
+ *
+ * @example
+ *   // With a jsPDF instance:
+ *   const doc = new jsPDF();
+ *   doc.text('Hello', 10, 10);
+ *   await downloadPdfAsImages(doc, 'Jon Smith');
+ *
+ *   // With a Blob from generateQuotePDF():
+ *   const blob = await generateQuotePDF(quote, settings);
+ *   await downloadPdfAsImages(blob, 'Jon Smith');
+ */
+export async function downloadPdfAsImages(
+  pdfInput: jsPDF | Blob,
+  customerName: string,
+): Promise<void> {
+  // ───────────────────────────────────────────────────────────────────────────
+  // 1. Obtain the raw PDF bytes as an ArrayBuffer
+  // ───────────────────────────────────────────────────────────────────────────
+  // Two paths:
+  //   a) jsPDF instance      → doc.output('arraybuffer')
+  //   b) Blob (any Bag) → read it as ArrayBuffer via .arrayBuffer()
+  let arrayBuffer: ArrayBuffer;
+
+  if (pdfInput instanceof Blob) {
+    // generateQuotePDF() returns a Blob — read its bytes directly.
+    arrayBuffer = await pdfInput.arrayBuffer();
+  } else {
+    // It's a jsPDF instance — serialise in-memory.
+    arrayBuffer = pdfInput.output('arraybuffer');
+  }
+
+  // ───────────────────────────────────────────────────────────────────────────
+  // 2. Load the PDF binary into pdf.js so we can access individual pages
+  // ───────────────────────────────────────────────────────────────────────────
+  await ensurePdfWorker();
+  const { getDocument } = await import('pdfjs-dist');
+  const pdf: pdfjsLib.PDFDocumentProxy =
+    await getDocument({ data: arrayBuffer }).promise;
+
+  // ───────────────────────────────────────────────────────────────────────────
+  // 3. Build the base filename from the customer's name
+  //    "Jon Smith" → "Jon_Smith"
+  // ───────────────────────────────────────────────────────────────────────────
+  // Replace all whitespace (spaces, tabs, etc.) with underscores for clean filenames.
+  const baseName: string = customerName.replace(/\s+/g, '_');
+
+  // ───────────────────────────────────────────────────────────────────────────
+  // 4. Iterate over every page of the PDF (page numbers are 1-indexed)
+  // ───────────────────────────────────────────────────────────────────────────
+  for (let pageNum = 1; pageNum <= pdf.numPages; pageNum++) {
+    // ── 4a. Load the individual page object ────────────────────────────────
+    const page: pdfjsLib.PDFPageProxy = await pdf.getPage(pageNum);
+
+    // ── 4b. Choose a viewport scale ───────────────────────────────────────
+    //      Scale 2 → "Retina" quality (2× the base 72 DPI = 144 DPI).
+    //      Increase to 3 or 4 for print-quality images (at the cost of larger
+    //      file sizes and slower rendering). Decrease to 1 for smaller files.
+    const scale = 2;
+    const viewport: pdfjsLib.PageViewport = page.getViewport({ scale });
+
+    // ── 4c. Create an off-screen <canvas> element ─────────────────────────
+    //      This canvas is never attached to the DOM — no visual flash during
+    //      the export process.
+    const canvas: HTMLCanvasElement = document.createElement('canvas');
+    canvas.width = viewport.width;
+    canvas.height = viewport.height;
+
+    // ── 4d. Obtain the 2D rendering context ───────────────────────────────
+    const ctx: CanvasRenderingContext2D | null = canvas.getContext('2d');
+    if (!ctx) {
+      throw new Error(
+        'Failed to get 2D rendering context from off-screen canvas. ' +
+        'This should never happen in a browser environment.',
+      );
+    }
+
+    // ── 4e. Render the PDF page onto the canvas ───────────────────────────
+    //      The viewport already accounts for the page's intrinsic rotation,
+    //      so we pass it directly as the rendering transform.
+    const renderTask: pdfjsLib.RenderTask = page.render({
+      canvasContext: ctx,
+      viewport,
+      canvas,
+    } as any);
+
+    // ── 4f. Await the rendering to complete ───────────────────────────────
+    //      renderTask.promise resolves once all drawing commands are done.
+    await renderTask.promise;
+
+    // ───────────────────────────────────────────────────────────────────────
+    // 5. Export the canvas as a PNG Blob
+    // ───────────────────────────────────────────────────────────────────────
+    // canvas.toBlob() is callback-based; we wrap it in a Promise for clean
+    // async/await usage.
+    const blob: Blob = await new Promise<Blob>((resolve, reject) => {
+      canvas.toBlob(
+        (b: Blob | null) => {
+          if (b) {
+            resolve(b);
+          } else {
+            reject(
+              new Error(
+                'canvas.toBlob() returned null — the canvas may have been ' +
+                'tainted by cross-origin data or the browser denied the operation.',
+              ),
+            );
+          }
+        },
+        'image/png', // MIME type — forces PNG output
+      );
+    });
+
+    // ───────────────────────────────────────────────────────────────────────
+    // 6. Trigger a browser download for this page's image
+    // ───────────────────────────────────────────────────────────────────────
+    //     6a. Build the filename: "Jon_Smith_Page1.png"
+    const fileName: string = `${baseName}_Page${pageNum}.png`;
+
+    //     6b. Create a temporary blob URL pointing to the PNG data.
+    const url: string = URL.createObjectURL(blob);
+
+    //     6c. Create a temporary <a> element whose href points to the blob
+    //         URL, set the download attribute, and programmatically click it.
+    const anchor: HTMLAnchorElement = document.createElement('a');
+    anchor.href = url;
+    anchor.download = fileName;
+
+    //     6d. Append the anchor to the DOM briefly so the browser treats the
+    //         click as a real user gesture — required by some browsers for
+    //         programmatic downloads to work.
+    document.body.appendChild(anchor);
+    anchor.click();
+
+    //     6e. Clean up: remove the anchor and release the blob URL to prevent
+    //         memory leaks.
+    document.body.removeChild(anchor);
+    URL.revokeObjectURL(url);
+
+    // ───────────────────────────────────────────────────────────────────────
+    // 7. Release pdf.js page resources
+    // ───────────────────────────────────────────────────────────────────────
+    // page.cleanup() frees the internal render cache for this page.
+    page.cleanup();
+  }
+
+  // All pages have been downloaded as individual PNG images.
+  // The original jsPDF doc instance is untouched so you can still call
+  // doc.save('quote.pdf') if you also want the standard PDF download.
+}
diff --git a/src/lib/pdf.ts b/src/lib/pdf.ts
new file mode 100644
index 0000000..af65f45
--- /dev/null
+++ b/src/lib/pdf.ts
@@ -0,0 +1,837 @@
+import type { jsPDF } from 'jspdf';
+import type { Quote, QuotePdfAppearance, QuotePdfTextStyle, QuoteService, ShopSettings } from '../types';
+import { billableServices, computeSplitQuoteTotals } from './totals';
+import type { TotalsBreakdown } from './totals';
+import { parseRichText, hasRichText, type RichSegment } from './richtext';
+import { DEFAULT_QUOTE_PDF_APPEARANCE, getProviderLabel } from './settings';
+
+// ─── Layout Constants ─────────────────────────────────────────────────────────
+const PAGE_W = 612;
+const PAGE_H = 792;
+const MARGIN = 40;
+const CW = PAGE_W - MARGIN * 2;
+const CONTENT_BOTTOM = PAGE_H - MARGIN; // 752 — bottom of content area (above footer)
+const FOOTER_HEIGHT = 50; // reserved for payment terms, separator + footer text + page number
+
+type ColorTuple = [number, number, number];
+const BL: ColorTuple = [18, 18, 18];
+const DG: ColorTuple = [64, 64, 64];
+const MG: ColorTuple = [80, 80, 80];
+const GR: ColorTuple = [22, 163, 74];
+const BU: ColorTuple = [37, 99, 235];
+const OR: ColorTuple = [234, 88, 12];
+
+function authorizationText(svc: QuoteService, appearance: QuotePdfAppearance): string {
+  const methodLabels: Record<string, string> = {
+    in_person: appearance.labels.authorizedInPerson,
+    phone: appearance.labels.authorizedByCall,
+    email: appearance.labels.authorizedByEmail,
+    text: appearance.labels.authorizedByText,
+    signature: appearance.labels.authorizedWithSignature,
+    online: appearance.labels.authorizedOnline,
+  };
+  const methodLabel = svc.authorizedMethod ? methodLabels[svc.authorizedMethod] : '';
+  if (!methodLabel) return svc.authorizedBy || '';
+  return svc.authorizedBy ? `${methodLabel}: ${svc.authorizedBy}` : methodLabel;
+}
+
+function quotePdfAppearance(settings: ShopSettings): QuotePdfAppearance {
+  const incoming = settings.quotePdfAppearance || DEFAULT_QUOTE_PDF_APPEARANCE;
+  return {
+    ...DEFAULT_QUOTE_PDF_APPEARANCE,
+    ...incoming,
+    sectionHeader: { ...DEFAULT_QUOTE_PDF_APPEARANCE.sectionHeader, ...incoming.sectionHeader },
+    serviceTitle: { ...DEFAULT_QUOTE_PDF_APPEARANCE.serviceTitle, ...incoming.serviceTitle },
+    serviceDescription: { ...DEFAULT_QUOTE_PDF_APPEARANCE.serviceDescription, ...incoming.serviceDescription },
+    recommendation: { ...DEFAULT_QUOTE_PDF_APPEARANCE.recommendation, ...incoming.recommendation },
+    priority: { ...DEFAULT_QUOTE_PDF_APPEARANCE.priority, ...incoming.priority },
+    authorization: { ...DEFAULT_QUOTE_PDF_APPEARANCE.authorization, ...incoming.authorization },
+    totals: { ...DEFAULT_QUOTE_PDF_APPEARANCE.totals, ...incoming.totals },
+    footer: { ...DEFAULT_QUOTE_PDF_APPEARANCE.footer, ...incoming.footer },
+    colors: { ...DEFAULT_QUOTE_PDF_APPEARANCE.colors, ...incoming.colors },
+    labels: { ...DEFAULT_QUOTE_PDF_APPEARANCE.labels, ...incoming.labels },
+  };
+}
+
+function applyTextStyle(doc: jsPDF, style: QuotePdfTextStyle, color: ColorTuple): void {
+  doc.setTextColor(...color);
+  doc.setFont(style.font, style.weight);
+  doc.setFontSize(style.size);
+}
+
+function spacingAmount(spacing: QuotePdfAppearance['serviceSpacing'], compact: number, normal: number, spacious: number): number {
+  if (spacing === 'compact') return compact;
+  if (spacing === 'spacious') return spacious;
+  return normal;
+}
+
+function hexToRgb(hex: string): ColorTuple {
+  if (!/^#[0-9a-fA-F]{6}$/.test(hex)) return GR;
+  const c = hex.replace('#', '');
+  const r = parseInt(c.substring(0, 2), 16);
+  const g = parseInt(c.substring(2, 4), 16);
+  const b = parseInt(c.substring(4, 6), 16);
+  if (isNaN(r) || isNaN(g) || isNaN(b)) return GR;
+  return [r, g, b];
+}
+
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+function fmtDate(dateStr?: string): string {
+  const d = dateStr ? new Date(dateStr) : new Date();
+  return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
+}
+
+function getLineHeight(fontSize: number, multiplier = 1.2): number {
+  return Math.ceil(fontSize * multiplier);
+}
+
+// ─── Inline-rich-text drawing ─────────────────────────────────────────────────
+// Renders parsed {accent}/{muted}/{bold} segments horizontally with one
+// color/font per segment. Supports left / center / right alignment so the
+// footer line can keep its baseline layout whatever the markup is.
+//
+// `baseFont` / `baseSize` set the defaults applied before each segment; the
+// accent color (`accent: ColorTuple`), the muted color (DG), the bold weight,
+// and the base color (`baseColor: ColorTuple`) all toggle per segment.
+//
+// Word-wrapping is the caller's job — this draws a single line. The footer
+// strings we use it on are short enough that no manual wrap is needed; if a
+// user over-stuffs paymentTerms the right edge will clip (same as today).
+interface DrawRichTextOptions {
+  doc: jsPDF;
+  segments: RichSegment[];
+  x: number;
+  y: number;
+  align: 'left' | 'center' | 'right';
+  baseColor: ColorTuple;
+  accent: ColorTuple;
+  font: QuotePdfTextStyle['font'];
+  size: number;
+}
+function drawRichText({ doc, segments, x, y, align, baseColor, accent, font, size }: DrawRichTextOptions): void {
+  doc.setFont(font, 'normal');
+  doc.setFontSize(size);
+  // Pre-compute the total width so we can anchor the first segment correctly
+  // for center/right alignment.
+  const widths = segments.map((s) => doc.getTextWidth(s.text));
+  const totalW = widths.reduce((a, b) => a + b, 0);
+  let cursor = align === 'right' ? x - totalW : align === 'center' ? x - totalW / 2 : x;
+  segments.forEach((seg, i) => {
+    const w = widths[i];
+    // Style → color + weight. `bold` stacks with accent/muted (the parser
+    // already collapsed the nesting, so we only ever see one style here).
+    let color: ColorTuple = baseColor;
+    let weight: 'normal' | 'bold' = 'normal';
+    if (seg.style === 'accent') color = accent;
+    else if (seg.style === 'muted') color = DG;
+    else if (seg.style === 'bold') { color = baseColor; weight = 'bold'; }
+    doc.setTextColor(...color);
+    doc.setFont(font, weight);
+    doc.text(seg.text, cursor, y);
+    cursor += w;
+  });
+}
+
+// ─── Page-break: add a new page, return to content-start y ────────────────────
+// Does NOT draw the full header — only a thin continuation marker.
+// Caller is responsible for redrawing section headers after the break.
+function newPage(doc: jsPDF, _currentY: number): number {
+  doc.addPage();
+  return MARGIN; // start content at top margin on new page
+}
+
+// ─── Draw footer on a specific page ───────────────────────────────────────────
+function drawFooter(doc: jsPDF, pageNum: number, totalPages: number, settings: ShopSettings, _shopChargeAmount: number) {
+  doc.setPage(pageNum);
+  const ACCENT: ColorTuple = settings.pdfAccentColor ? hexToRgb(settings.pdfAccentColor) : GR;
+  const appearance = quotePdfAppearance(settings);
+
+  // Payment terms — bottom-right, last page only, above the separator.
+  // Supports inline rich-text markup: {accent}…{/accent}, {muted}…{/muted},
+  // {bold}…{/bold}. When the string contains no tags we use the fast single
+  // draw to keep the byte-for-byte output identical to before.
+  if (appearance.showPaymentTerms && pageNum === totalPages && settings.paymentTerms) {
+    const label = `${appearance.labels.paymentTerms} `;
+    const full = label + settings.paymentTerms;
+    const py = PAGE_H - MARGIN - FOOTER_HEIGHT + 4; // 706 — within footer area, clear of content
+    if (hasRichText(full)) {
+      drawRichText({
+        doc,
+        segments: parseRichText(full),
+        x: PAGE_W - MARGIN,
+        y: py,
+        align: 'right',
+        baseColor: MG,
+        accent: ACCENT,
+        font: appearance.footer.font,
+        size: appearance.footer.size,
+      });
+    } else {
+      applyTextStyle(doc, appearance.footer, MG);
+      doc.text(full, PAGE_W - MARGIN, py, { align: 'right' });
+    }
+  }
+
+  // Separator line
+  const footerY = PAGE_H - MARGIN - FOOTER_HEIGHT + 12; // 714
+  doc.setDrawColor(...hexToRgb(appearance.colors.separator));
+  doc.setLineWidth(1);
+  doc.line(MARGIN, footerY, PAGE_W - MARGIN, footerY);
+
+  // Footer messages — same rich-text support as above.
+  if (appearance.showFooterMessage) {
+    const fm = settings.footerMessage || 'Thank you for choosing us for your automotive needs!';
+    if (hasRichText(fm)) {
+      drawRichText({
+        doc, segments: parseRichText(fm),
+        x: PAGE_W / 2, y: footerY + 15, align: 'center',
+        baseColor: hexToRgb(appearance.colors.footer), accent: ACCENT, font: appearance.footer.font, size: appearance.footer.size,
+      });
+    } else {
+      applyTextStyle(doc, appearance.footer, hexToRgb(appearance.colors.footer));
+      doc.text(fm, PAGE_W / 2, footerY + 15, { align: 'center' });
+    }
+  }
+
+  if (appearance.showQuoteFooterNote) {
+    const qfn = (settings.quoteFooterNote || 'This quote is valid for {days} days from the date above.').replace('{days}', String(settings.quoteExpiryDays || 30));
+    if (hasRichText(qfn)) {
+      drawRichText({
+        doc, segments: parseRichText(qfn),
+        x: PAGE_W / 2, y: footerY + 27, align: 'center',
+        baseColor: hexToRgb(appearance.colors.footer), accent: ACCENT, font: appearance.footer.font, size: appearance.footer.size,
+      });
+    } else {
+      applyTextStyle(doc, appearance.footer, hexToRgb(appearance.colors.footer));
+      doc.text(qfn, PAGE_W / 2, footerY + 27, { align: 'center' });
+    }
+  }
+
+  // Page number
+  doc.setTextColor(...MG);
+  doc.setFont('helvetica', 'bold');
+  doc.setFontSize(12);
+  doc.text(`Page ${pageNum} of ${totalPages}`, PAGE_W - MARGIN, PAGE_H - 10, { align: 'right' });
+}
+
+// ─── Main Generator ───────────────────────────────────────────────────────────
+export async function generateQuotePDF(
+  quote: Quote,
+  settings: ShopSettings,
+): Promise<Blob> {
+  const { jsPDF } = await import('jspdf');
+  const doc = new jsPDF('p', 'pt', 'letter');
+
+  const services: QuoteService[] = quote.services;
+  const customerName = quote.customerInfo.name || '';
+  if (!customerName || services.length === 0) {
+    throw new Error('Customer name and at least one service required');
+  }
+
+  // Pre-compute which services count toward totals
+  const billableIds = new Set(billableServices(services).map((s: any) => s.id));
+
+  const businessName = settings.businessName || 'Auto Repair Shop';
+  const businessAddress = settings.businessAddress || '123 Auto Lane\nKnoxville, TN 12345';
+  const businessPhone = settings.businessPhone || '(865) 555-0123';
+  const serviceAdvisor = quote.customerInfo.serviceAdvisor || settings.serviceAdvisor || '';
+  const technicianName = settings.defaultTechnician || '';
+  const providerLabel = getProviderLabel(settings);
+  const vehicleInfo = quote.customerInfo.vehicleInfo || '';
+  const roNumber = quote.customerInfo.roNumber || '';
+  const mileage = quote.customerInfo.mileage || '';
+  const vin = quote.customerInfo.vin || '';
+  const customerFirstName = customerName.split(' ')[0];
+  const isCompact = settings.pdfStyle === 'compact';
+  const appearance = quotePdfAppearance(settings);
+  const serviceGap = spacingAmount(appearance.serviceSpacing, 4, 8, 14);
+  const sectionGap = spacingAmount(appearance.sectionSpacing, 10, 16, 24);
+  const servicePriceDisplay = appearance.showServicePrices ? appearance.priceDisplay : 'hidden';
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // PAGE 1: FULL HEADER + MESSAGE
+  // ═══════════════════════════════════════════════════════════════════════════
+  let y = MARGIN;
+  const leftColX = MARGIN;
+  const rightColX = MARGIN + (CW * 0.58);
+  const colWidth = CW * 0.40;
+
+  // Logo
+  if (settings.logoUrl && settings.showLogoOnPdf) {
+    const logoW = Math.max(12, appearance.logoWidth || 40);
+    const logoH = Math.max(8, appearance.logoHeight || (isCompact ? 16 : 20));
+    const logoX = appearance.logoAlignment === 'center'
+      ? MARGIN + (CW - logoW) / 2
+      : appearance.logoAlignment === 'right'
+        ? PAGE_W - MARGIN - logoW
+        : MARGIN;
+    doc.addImage(settings.logoUrl, 'PNG', logoX, y, logoW, logoH);
+    y += logoH + (isCompact ? 4 : 6);
+  }
+
+  const businessAddressLines = appearance.showBusinessAddress ? businessAddress
+    .split('\n')
+    .flatMap(line => doc.splitTextToSize(line, colWidth)) : [];
+
+  const allInfo: [string, string][] = [
+    ['Customer', customerName], ['Vehicle', vehicleInfo], ['RO #', roNumber],
+    ['Mileage', mileage], ['VIN', vin], ['Date', fmtDate(quote.createdAt)],
+  ];
+  const infoItems = allInfo
+    .filter(([label, value]) => {
+      if (!appearance.showCustomerInfo) return false;
+      if (label === 'RO #' && !appearance.showRoNumber) return false;
+      if (label === 'Mileage' && !appearance.showMileage) return false;
+      if (label === 'VIN' && !appearance.showVin) return false;
+      if (label === 'Date' && !appearance.showQuoteDate) return false;
+      return value && value !== 'N/A' && value !== '';
+    })
+    .map(([label, value]) => ({
+      label,
+      valueLines: doc.splitTextToSize(value, colWidth - 20),
+    }));
+
+  const headerTop = y;
+  const headerPadding = isCompact ? 8 : 14;
+  let headerHeight = headerPadding;
+
+  // Measure left column height
+  headerHeight += getLineHeight(isCompact ? 7 : 8, 1.3);
+  headerHeight += getLineHeight(isCompact ? 10 : 11, 1.3);
+  headerHeight += businessAddressLines.length * getLineHeight(isCompact ? 8 : 9, 1.4);
+  const providerLineCount = [settings.showAdvisorOnQuote, settings.showTechnicianOnQuote].filter(Boolean).length;
+  headerHeight += getLineHeight(isCompact ? 8 : 9, 1.4) * ((appearance.showBusinessPhone ? 1 : 0) + providerLineCount);
+  headerHeight += isCompact ? 6 : 10;
+
+  // Measure right column height
+  let rightHeight = getLineHeight(isCompact ? 7 : 8, 1.3);
+  infoItems.forEach(({ valueLines }) => {
+    rightHeight += getLineHeight(isCompact ? 8 : 9, 1.4) + (valueLines.length - 1) * getLineHeight(isCompact ? 8 : 9, 1.4) + (isCompact ? 3 : 6);
+  });
+  headerHeight = Math.max(headerHeight, rightHeight + headerPadding * 2);
+
+  if (!isCompact && appearance.headerLayout === 'boxed') {
+    // Light gray background fill
+    doc.setFillColor(...hexToRgb(appearance.colors.headerBackground));
+    doc.roundedRect(MARGIN, MARGIN, CW, headerHeight, 4, 4, 'F');
+  }
+
+  // ── Left: service business ──
+  doc.setTextColor(...MG); doc.setFontSize(isCompact ? 7 : 8); doc.setFont('helvetica', 'bold');
+  doc.text(providerLabel, leftColX, y);
+  y += getLineHeight(isCompact ? 7 : 8, 1.3);
+
+  doc.setFont('helvetica', 'bold'); doc.setFontSize(isCompact ? 10 : 11); doc.setTextColor(...BL);
+  doc.text(businessName, leftColX, y);
+  y += getLineHeight(isCompact ? 10 : 11, 1.3);
+
+  doc.setTextColor(...DG); doc.setFont('helvetica', 'normal'); doc.setFontSize(isCompact ? 8 : 9);
+  businessAddressLines.forEach((line: string) => {
+    doc.text(line, leftColX, y);
+    y += getLineHeight(isCompact ? 8 : 9, 1.4);
+  });
+  if (businessAddressLines.length > 0) y += isCompact ? 6 : 10;
+
+  // ── Provider name(s) on quote: advisor and/or technician ──
+  if (settings.showAdvisorOnQuote) {
+    doc.setTextColor(...MG); doc.setFontSize(isCompact ? 7 : 8);
+    doc.text('Service Advisor', leftColX, y);
+    doc.setTextColor(...BL); doc.setFontSize(isCompact ? 8 : 9);
+    doc.text(serviceAdvisor || '—', leftColX + colWidth - 5, y, { align: 'right' });
+    y += getLineHeight(isCompact ? 8 : 9, 1.4);
+  }
+
+  if (settings.showTechnicianOnQuote) {
+    doc.setTextColor(...MG); doc.setFontSize(isCompact ? 7 : 8);
+    doc.text('Technician', leftColX, y);
+    doc.setTextColor(...BL); doc.setFontSize(isCompact ? 8 : 9);
+    doc.text(technicianName || '—', leftColX + colWidth - 5, y, { align: 'right' });
+    y += getLineHeight(isCompact ? 8 : 9, 1.4);
+  }
+
+  if (appearance.showBusinessPhone) {
+    doc.setTextColor(...MG); doc.setFontSize(isCompact ? 7 : 8);
+    doc.text('Phone', leftColX, y);
+    doc.setTextColor(...BL); doc.setFontSize(isCompact ? 8 : 9);
+    doc.text(businessPhone, leftColX + colWidth - 5, y, { align: 'right' });
+  }
+
+  const leftHeight = y;
+
+  // ── Right: CUSTOMER INFORMATION ──
+  let rY = headerTop;
+  if (appearance.showCustomerInfo && infoItems.length > 0 && appearance.headerLayout !== 'minimal') {
+    doc.setTextColor(...MG); doc.setFontSize(isCompact ? 7 : 8); doc.setFont('helvetica', 'bold');
+    doc.text('CUSTOMER INFORMATION', rightColX, rY);
+    rY += getLineHeight(isCompact ? 7 : 8, 1.3);
+
+    doc.setFont('helvetica', 'normal'); doc.setFontSize(isCompact ? 8 : 9);
+    infoItems.forEach(({ label, valueLines }) => {
+      doc.setTextColor(...MG); doc.setFontSize(isCompact ? 7 : 8);
+      doc.text(label, rightColX, rY);
+
+      doc.setTextColor(...BL); doc.setFontSize(isCompact ? 8 : 9);
+      doc.text(valueLines[0], rightColX + colWidth - 5, rY, { align: 'right' });
+      rY += getLineHeight(isCompact ? 8 : 9, 1.4);
+
+      for (let i = 1; i < valueLines.length; i++) {
+        doc.text(valueLines[i], rightColX + colWidth - 5, rY, { align: 'right' });
+        rY += getLineHeight(isCompact ? 8 : 9, 1.4);
+      }
+      rY += isCompact ? 3 : 6;
+    });
+  }
+
+  y = Math.max(leftHeight, rY) + (isCompact ? 10 : 16);
+
+  if (!isCompact && appearance.headerLayout === 'boxed') {
+    // Header border
+    doc.setDrawColor(...hexToRgb(appearance.colors.separator)); doc.setLineWidth(0.7);
+    doc.roundedRect(MARGIN, MARGIN, CW, y - MARGIN, 4, 4, 'D');
+  }
+  // Separator
+  doc.setDrawColor(200, 200, 200); doc.line(MARGIN + (isCompact ? 0 : 4), y, PAGE_W - MARGIN - (isCompact ? 0 : 4), y);
+  y += isCompact ? 12 : 20;
+
+  // ── Personalized message ──
+  if (!isCompact && appearance.showHeaderMessage) {
+    doc.setTextColor(...MG); doc.setFont('helvetica', 'normal'); doc.setFontSize(10);
+    const headerMsg = (settings.headerMessage ||
+      'Hi {customerName}, here is the explanation of the services and repairs that your technician has recommended for your {vehicleInfo}. If you have any questions, please feel free to ask.')
+      .replace('{customerName}', customerFirstName).replace('{vehicleInfo}', vehicleInfo);
+    doc.splitTextToSize(headerMsg, CW).forEach((line: string) => {
+      doc.text(line, MARGIN, y);
+      y += getLineHeight(10, 1.4);
+    });
+    y += 18;
+  }
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // SERVICES SECTION — with proper page-break logic
+  // ═══════════════════════════════════════════════════════════════════════════
+  let servicesTotal = 0;
+  const approvedSvcs = services.filter(s => s.customerDecision === 'approved');
+  const pendingSvcs = appearance.showPendingRecommendations ? services.filter(s => s.customerDecision === 'pending') : [];
+  const declinedSvcs = appearance.showDeclinedServices ? services.filter(s => s.customerDecision === 'declined') : [];
+  const approvedColor = hexToRgb(appearance.colors.sectionHeader);
+  const recommendationsColor = hexToRgb(appearance.colors.recommendationsSection);
+  const declinedColor = MG;
+  const separatorColor = hexToRgb(appearance.colors.separator);
+
+  interface SvcGroup { label: string | null; services: QuoteService[]; color: ColorTuple | null; }
+  const groups: SvcGroup[] = [];
+  if (appearance.sectionOrder === 'combined') {
+    groups.push({ label: null, services: [...approvedSvcs, ...pendingSvcs, ...declinedSvcs], color: null });
+  } else if (appearance.sectionOrder === 'recommendations_first') {
+    if (pendingSvcs.length > 0) groups.push({ label: appearance.labels.recommendationsSection, services: pendingSvcs, color: recommendationsColor });
+    if (approvedSvcs.length > 0) groups.push({ label: appearance.labels.approvedSection, services: approvedSvcs, color: approvedColor });
+    if (declinedSvcs.length > 0) groups.push({ label: appearance.labels.declinedSection, services: declinedSvcs, color: declinedColor });
+  } else {
+    if (approvedSvcs.length > 0) groups.push({ label: appearance.labels.approvedSection, services: approvedSvcs, color: approvedColor });
+    if (pendingSvcs.length > 0) groups.push({ label: appearance.labels.recommendationsSection, services: pendingSvcs, color: recommendationsColor });
+    if (declinedSvcs.length > 0) groups.push({ label: appearance.labels.declinedSection, services: declinedSvcs, color: declinedColor });
+  }
+
+  // If only one section exists, hide the section label for a cleaner look
+  if (groups.length === 1) groups[0].label = null;
+
+  // Track current section for redrawing header after page breaks
+  let currentGroupLabel: string | null = null;
+  let currentGroupColor: ColorTuple | null = null;
+
+  groups.forEach((group: SvcGroup) => {
+    currentGroupLabel = group.label;
+    currentGroupColor = group.color;
+
+    // Draw section header
+    if (group.label && group.color) {
+      if (y + getLineHeight(appearance.sectionHeader.size, 1.3) + sectionGap > CONTENT_BOTTOM - FOOTER_HEIGHT) y = newPage(doc, y);
+      applyTextStyle(doc, appearance.sectionHeader, group.color);
+      doc.text(group.label, MARGIN, y);
+      y += getLineHeight(appearance.sectionHeader.size, 1.3);
+      doc.setDrawColor(...group.color); doc.setLineWidth(0.7);
+      doc.line(MARGIN, y, PAGE_W - MARGIN, y);
+      y += sectionGap;
+    }
+
+    group.services.forEach((svc: QuoteService, idx: number) => {
+      // ── Calculate this service's total height ──
+      let svcH = 0;
+      if (appearance.showServiceDecisionBadges && (svc.customerDecision === 'approved' || svc.customerDecision === 'declined')) svcH += getLineHeight(8, 1.3);
+      if (appearance.showAuthorizationLine && (svc.authorizedBy || svc.authorizedMethod)) svcH += getLineHeight(appearance.authorization.size, 1.2);
+      svcH += getLineHeight(appearance.serviceTitle.size, 1.3); // name + price
+      if (appearance.showPriority && svc.priority) svcH += getLineHeight(appearance.priority.size);
+      if (appearance.showPriorityReason && svc.priorityReason) svcH += getLineHeight(appearance.priority.size);
+      if (appearance.showRecommendation && svc.recommendation) svcH += getLineHeight(appearance.recommendation.size, 1.2);
+      if (appearance.showServiceDescription && svc.explanation) svcH += doc.splitTextToSize(svc.explanation, CW).length * getLineHeight(appearance.serviceDescription.size, 1.4) + 2;
+      if (appearance.showPartsStatus && svc.partsNotInStock) { svcH += getLineHeight(10); if (svc.partsDeliveryTime) svcH += getLineHeight(10); }
+      if (appearance.showAftermarketOptions && svc.aftermarketAvailable) { svcH += getLineHeight(10); if (svc.aftermarketPartsList) svcH += getLineHeight(9); }
+      svcH += serviceGap + (appearance.serviceSeparators ? 4 : 0);
+
+      // ── PAGE BREAK if this service won't fit ──
+      if (y + svcH > CONTENT_BOTTOM - FOOTER_HEIGHT) {
+        y = newPage(doc, y);
+        // Redraw section header on new page
+        if (currentGroupLabel && currentGroupColor) {
+          applyTextStyle(doc, appearance.sectionHeader, currentGroupColor);
+          doc.text(currentGroupLabel, MARGIN, y); y += getLineHeight(appearance.sectionHeader.size, 1.1);
+          doc.setDrawColor(...currentGroupColor); doc.setLineWidth(1);
+          doc.line(MARGIN, y, PAGE_W - MARGIN, y); y += sectionGap;
+        }
+      }
+
+      // ── Render service ──
+      // Decision badge
+      if (appearance.showServiceDecisionBadges && svc.customerDecision === 'approved') {
+        doc.setTextColor(...hexToRgb(appearance.colors.approvedBadge)); doc.setFont('helvetica', 'bold'); doc.setFontSize(8);
+        doc.text(`\u2713 ${appearance.labels.customerApproved}`, MARGIN, y); y += getLineHeight(8);
+      } else if (appearance.showServiceDecisionBadges && svc.customerDecision === 'declined') {
+        doc.setTextColor(...hexToRgb(appearance.colors.declinedBadge)); doc.setFont('helvetica', 'bold'); doc.setFontSize(8);
+        doc.text(`\u2717 ${appearance.labels.customerDeclined}`, MARGIN, y); y += getLineHeight(8);
+      }
+      if (appearance.showAuthorizationLine && (svc.authorizedBy || svc.authorizedMethod)) {
+        applyTextStyle(doc, appearance.authorization, MG);
+        doc.text(authorizationText(svc, appearance), MARGIN + 2, y); y += getLineHeight(appearance.authorization.size, 1.2);
+      }
+
+      // Name + price (same baseline)
+      applyTextStyle(doc, appearance.serviceTitle, hexToRgb(appearance.colors.serviceTitle));
+      const price = parseFloat(String(svc.price ?? 0)) || 0;
+      const title = servicePriceDisplay === 'inline' ? `${svc.name} - $${price.toFixed(2)}` : svc.name;
+      doc.text(title, MARGIN, y);
+      if (svc.customerDecision === 'declined') {
+        const nw = doc.getTextWidth(title);
+        doc.setDrawColor(...separatorColor); doc.setLineWidth(0.5);
+        doc.line(MARGIN, y - 1, MARGIN + nw, y - 1);
+      }
+      // Count toward totals based on billableServices heuristic
+      if (billableIds.has(svc.id)) servicesTotal += price;
+      if (servicePriceDisplay === 'right') doc.text(`$${price.toFixed(2)}`, PAGE_W - MARGIN, y, { align: 'right' });
+      y += getLineHeight(appearance.serviceTitle.size, 1.3);
+
+      // Priority
+      if (appearance.showPriority && svc.priority) {
+        const pc: Record<string, { icon: string; label: string }> = {
+          CRITICAL_SAFETY: { icon: '[CRITICAL]', label: 'CRITICAL SAFETY PRIORITY' },
+          SAFETY_CONCERN: { icon: '[SAFETY]', label: 'SAFETY CONCERN PRIORITY' },
+          RECOMMENDED: { icon: '[RECOMMENDED]', label: 'RECOMMENDED PRIORITY' },
+          MAINTENANCE: { icon: '[MAINTENANCE]', label: 'MAINTENANCE PRIORITY' },
+          OPTIONAL: { icon: '[OPTIONAL]', label: 'OPTIONAL PRIORITY' },
+        };
+        const c = pc[svc.priority] || pc.RECOMMENDED;
+        applyTextStyle(doc, appearance.priority, DG);
+        doc.text(`${c.icon} ${c.label}`, MARGIN, y); y += getLineHeight(9);
+        if (appearance.showPriorityReason && svc.priorityReason) {
+          doc.setFont(appearance.priority.font, 'normal'); doc.setFontSize(appearance.priority.size);
+        doc.setTextColor(...hexToRgb(appearance.colors.description));
+          doc.text(`${appearance.labels.priorityReason} ${svc.priorityReason}`, MARGIN, y); y += getLineHeight(appearance.priority.size);
+        }
+      }
+
+      // Recommendation
+      if (appearance.showRecommendation && svc.recommendation) {
+        applyTextStyle(doc, appearance.recommendation, hexToRgb(appearance.colors.recommendation));
+        const recommendationText = svc.recommendationReason || svc.recommendation || '';
+        doc.text(appearance.recommendationTransform === 'uppercase' ? recommendationText.toUpperCase() : recommendationText, MARGIN, y);
+        y += getLineHeight(appearance.recommendation.size, 1.2);
+      }
+
+      // Explanation
+      if (appearance.showServiceDescription && svc.explanation) {
+        applyTextStyle(doc, appearance.serviceDescription, hexToRgb(appearance.colors.description));
+        doc.splitTextToSize(svc.explanation, CW).forEach((line: string) => {
+          doc.text(line, MARGIN, y); y += getLineHeight(appearance.serviceDescription.size, 1.4);
+        });
+        y += serviceGap;
+      }
+
+      // Parts status flags
+      if (appearance.showPartsStatus && svc.partsNotInStock) {
+        doc.setTextColor(...OR); doc.setFont('helvetica', 'bold'); doc.setFontSize(9);
+        doc.text('NOTE: Parts for this service are not in stock and will need to be ordered.', MARGIN, y);
+        y += getLineHeight(9);
+        if (svc.partsDeliveryTime) {
+          doc.text(`Estimated Delivery: ${svc.partsDeliveryTime}`, MARGIN, y); y += getLineHeight(9);
+        }
+      }
+      if (appearance.showAftermarketOptions && svc.aftermarketAvailable) {
+        doc.setTextColor(...DG); doc.setFont('helvetica', 'bold'); doc.setFontSize(9);
+        doc.text('NOTE: Aftermarket parts are available for this service.', MARGIN, y);
+        y += getLineHeight(9);
+        if (svc.aftermarketPartsList) {
+          doc.setFont('helvetica', 'normal'); doc.setFontSize(8);
+          doc.text(`Aftermarket Options: ${svc.aftermarketPartsList}`, MARGIN, y); y += getLineHeight(8);
+        }
+      }
+
+      // Separator between services
+      if (appearance.serviceSeparators && idx < group.services.length - 1) {
+        doc.setDrawColor(...separatorColor); doc.setLineWidth(0.5);
+        doc.line(MARGIN, y + 3, PAGE_W - MARGIN, y + 3);
+      }
+      y += serviceGap;
+    });
+  });
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // PRICING SUMMARY — with page-break if needed
+  // ═══════════════════════════════════════════════════════════════════════════
+  const discountValue = parseFloat(String(quote.discount.value)) || 0;
+  const discountType = quote.discount.type || 'dollar';
+
+  // Determine whether we have a mix of approved + pending (RO transfer scenario)
+  const nonDeclined = services.filter(s => s.customerDecision !== 'declined');
+  const hasMixed = nonDeclined.some(s => s.customerDecision === 'approved') && nonDeclined.some(s => s.customerDecision === 'pending');
+
+  // Compute split totals when mixed; fall back to current billable-only totals
+  let approvedTotals: TotalsBreakdown | null = null;
+  let pendingTotals: TotalsBreakdown | null = null;
+  let combinedTotals: TotalsBreakdown | null = null;
+  let displaySubtotal = servicesTotal;
+  let displayShopCharge = 0;
+  let displayDiscount = 0;
+  let displayTax = 0;
+  let displayTotal = 0;
+
+  if (hasMixed) {
+    const split = computeSplitQuoteTotals(services, quote.discount || { value: 0, type: 'dollar' }, settings);
+    approvedTotals = split.approved;
+    pendingTotals = split.pending;
+    combinedTotals = split.combined;
+    displaySubtotal = split.combined.subtotal;
+    displayDiscount = split.combined.discountAmount;
+    displayShopCharge = split.combined.shopCharge;
+    displayTax = split.combined.tax;
+    displayTotal = split.combined.total;
+  } else {
+    // Existing billable-only totals (backward compat)
+    const shopChargeableSubtotal = services.reduce(
+      (acc, s) => (billableIds.has(s.id) && s.applyShopCharge !== false)
+        ? acc + (parseFloat(String(s.price)) || 0)
+        : acc, 0);
+    const shopChargeRate = settings.shopChargeRate || 0;
+    const shopChargeCap = settings.shopChargeCap ?? 69.95;
+    displayShopCharge = Math.min(shopChargeableSubtotal * (shopChargeRate / 100), shopChargeCap);
+
+    if (discountValue > 0) {
+      displayDiscount = discountType === 'percent' ? servicesTotal * (discountValue / 100) : discountValue;
+    }
+    const taxRate = settings.taxRate || 0;
+    displayTax = (servicesTotal - displayDiscount + displayShopCharge) * (taxRate / 100);
+    displayTotal = servicesTotal - displayDiscount + displayShopCharge + displayTax;
+  }
+
+  if (appearance.showTotalsSummary) {
+  const sumX = PAGE_W - MARGIN - (CW * 0.45);
+  const sumW = CW * 0.45;
+  const sumRight = PAGE_W - MARGIN;
+  const bp = 10;
+  const mixedSectionGap = 3;
+
+  // Count rows for height calculation
+  let sumRows = 0;
+  if (hasMixed) {
+    sumRows += 4; // approved: subtotal + shopCharge (cond) + tax (cond) + approved total
+    sumRows += 4; // pending: subtotal + shopCharge (cond) + tax (cond) + if approved
+    sumRows += 1; // combined subtotal
+    if (appearance.showDiscountLine && displayDiscount > 0) sumRows += 1; // combined discount
+    if (appearance.showShopChargeLine && displayShopCharge > 0) sumRows += 1; // combined capped shop charge
+    if (appearance.showTaxLine && settings.taxRate > 0) sumRows += 1; // combined recalculated tax
+    sumRows += 2; // separator + grand total
+  } else {
+    sumRows = 1; // subtotal
+    if (appearance.showDiscountLine && displayDiscount > 0) sumRows++;
+    if (appearance.showShopChargeLine && displayShopCharge > 0) sumRows++;
+    if (appearance.showTaxLine && settings.taxRate > 0) sumRows++;
+    sumRows += 2; // separator + total
+  }
+  const sumContentH = (sumRows * getLineHeight(9, 1.2)) + 14 + (hasMixed ? mixedSectionGap * 2 : 0);
+  const sumTotalH = bp + sumContentH + bp;
+
+  // Check if summary + shop charge note fits; if not, page break
+  const noteExtra = displayShopCharge > 0 ? 30 : 0;
+  if (y + sumTotalH + 14 + noteExtra > CONTENT_BOTTOM - FOOTER_HEIGHT) {
+    y = newPage(doc, y);
+  }
+
+  y += 14;
+  const sumTopY = y - bp;
+
+  doc.setFillColor(...hexToRgb(appearance.colors.totalsBackground)); doc.setDrawColor(...hexToRgb(appearance.colors.separator)); doc.setLineWidth(0.5);
+  doc.roundedRect(sumX - bp, sumTopY, sumW + (bp * 2), sumTotalH, 4, 4, 'FD');
+  y = sumTopY + bp;
+
+  if (hasMixed && approvedTotals && pendingTotals && combinedTotals) {
+    // ── Approved Service Totals ──
+    doc.setTextColor(...GR); doc.setFont(appearance.totals.font, 'bold'); doc.setFontSize(Math.max(7, appearance.totals.size - 2));
+    doc.text('ALREADY APPROVED WORK', sumX, y);
+    applyTextStyle(doc, appearance.totals, BL);
+    doc.text(`$${approvedTotals.subtotal.toFixed(2)}`, sumRight, y, { align: 'right' });
+    y += getLineHeight(9);
+
+    if (appearance.showShopChargeLine && approvedTotals.shopCharge > 0) {
+      applyTextStyle(doc, appearance.totals, DG);
+      doc.text(appearance.labels.shopCharge, sumX, y);
+      doc.setTextColor(...BL);
+      doc.text(`$${approvedTotals.shopCharge.toFixed(2)}`, sumRight, y, { align: 'right' });
+      y += getLineHeight(9);
+    }
+    if (appearance.showTaxLine && settings.taxRate > 0) {
+      applyTextStyle(doc, appearance.totals, DG);
+      doc.text(settings.taxLabel || 'Tax', sumX, y);
+      doc.setTextColor(...BL);
+      doc.text(`$${approvedTotals.tax.toFixed(2)}`, sumRight, y, { align: 'right' });
+      y += getLineHeight(9);
+    }
+    doc.setTextColor(...GR); doc.setFont(appearance.totals.font, 'bold'); doc.setFontSize(appearance.totals.size);
+    doc.text(appearance.labels.authorizedTotal, sumX, y);
+    doc.text(`$${approvedTotals.total.toFixed(2)}`, sumRight, y, { align: 'right' });
+    y += getLineHeight(10) + mixedSectionGap;
+
+    // ── Additional Recommendations ──
+    doc.setTextColor(...BU); doc.setFont(appearance.totals.font, 'bold'); doc.setFontSize(Math.max(7, appearance.totals.size - 2));
+    doc.text('ADDITIONAL RECOMMENDATIONS', sumX, y);
+    applyTextStyle(doc, appearance.totals, BL);
+    doc.text(`$${pendingTotals.subtotal.toFixed(2)}`, sumRight, y, { align: 'right' });
+    y += getLineHeight(9);
+
+    if (appearance.showShopChargeLine && pendingTotals.shopCharge > 0) {
+      applyTextStyle(doc, appearance.totals, DG);
+      doc.text(`Estimated ${appearance.labels.shopCharge.toLowerCase()}`, sumX, y);
+      doc.setTextColor(...BL);
+      doc.text(`$${pendingTotals.shopCharge.toFixed(2)}`, sumRight, y, { align: 'right' });
+      y += getLineHeight(9);
+    }
+    if (appearance.showTaxLine && settings.taxRate > 0) {
+      applyTextStyle(doc, appearance.totals, DG);
+      doc.text(settings.taxLabel || 'Tax', sumX, y);
+      doc.setTextColor(...BL);
+      doc.text(`$${pendingTotals.tax.toFixed(2)}`, sumRight, y, { align: 'right' });
+      y += getLineHeight(9);
+    }
+    doc.setTextColor(...BU); doc.setFont(appearance.totals.font, 'bold'); doc.setFontSize(appearance.totals.size);
+    doc.text(appearance.labels.addOnTotal, sumX, y);
+    doc.text(`$${pendingTotals.total.toFixed(2)}`, sumRight, y, { align: 'right' });
+    y += getLineHeight(10) + mixedSectionGap;
+
+    // ── Combined: Total if All Approved ──
+    doc.setTextColor(...DG); doc.setFont(appearance.totals.font, 'bold'); doc.setFontSize(appearance.totals.size);
+    doc.text(appearance.labels.allWorkSubtotal, sumX, y);
+    doc.setTextColor(...GR);
+    doc.text(`$${combinedTotals.subtotal.toFixed(2)}`, sumRight, y, { align: 'right' });
+    y += getLineHeight(9);
+
+    // Discount
+    if (appearance.showDiscountLine && displayDiscount > 0) {
+      applyTextStyle(doc, appearance.totals, DG);
+      doc.text(appearance.labels.discount, sumX, y);
+      doc.setTextColor(...GR);
+      doc.text(`\u2212$${displayDiscount.toFixed(2)}`, sumRight, y, { align: 'right' });
+      y += getLineHeight(9);
+    }
+
+    if (appearance.showShopChargeLine && displayShopCharge > 0) {
+      applyTextStyle(doc, appearance.totals, DG);
+      const cap = settings.shopChargeCap ?? 69.95;
+      doc.text(`${appearance.labels.shopCharge}, capped at $${cap.toFixed(2)}`, sumX, y);
+      doc.setTextColor(...GR);
+      doc.text(`$${displayShopCharge.toFixed(2)}`, sumRight, y, { align: 'right' });
+      y += getLineHeight(9);
+    }
+
+    if (appearance.showTaxLine && settings.taxRate > 0) {
+      applyTextStyle(doc, appearance.totals, DG);
+      doc.text(`${settings.taxLabel || 'Tax'} @ ${settings.taxRate}%`, sumX, y);
+      doc.setTextColor(...GR);
+      doc.text(`$${displayTax.toFixed(2)}`, sumRight, y, { align: 'right' });
+      y += getLineHeight(9);
+    }
+
+    // Separator + Grand Total
+    doc.setDrawColor(...hexToRgb(appearance.colors.separator)); doc.setLineWidth(0.5);
+    doc.line(sumX, y, sumRight, y); y += getLineHeight(10);
+    doc.setTextColor(...BL); doc.setFont(appearance.totals.font, 'bold'); doc.setFontSize(Math.max(10, appearance.totals.size));
+    doc.text(appearance.labels.totalIfAllApproved, sumX, y);
+    doc.text(`$${displayTotal.toFixed(2)}`, sumRight, y, { align: 'right' });
+  } else {
+    // ── Simple single-section pricing summary (existing layout) ──
+    // Subtotal
+    applyTextStyle(doc, appearance.totals, DG); doc.text(appearance.labels.subtotal, sumX, y);
+    doc.setTextColor(...BL); doc.text(`$${displaySubtotal.toFixed(2)}`, sumRight, y, { align: 'right' });
+    y += getLineHeight(9);
+
+    // Discount
+    if (appearance.showDiscountLine && displayDiscount > 0) {
+      applyTextStyle(doc, appearance.totals, DG);
+      doc.text(appearance.labels.discount, sumX, y);
+      doc.setTextColor(...GR);
+      doc.text(`\u2212$${displayDiscount.toFixed(2)}`, sumRight, y, { align: 'right' });
+      y += getLineHeight(9); doc.setTextColor(...BL);
+    }
+
+    // Shop charge
+    if (appearance.showShopChargeLine && displayShopCharge > 0) {
+      applyTextStyle(doc, appearance.totals, DG);
+      doc.text(appearance.labels.shopCharge, sumX, y);
+      doc.setTextColor(...BL);
+      doc.text(`$${displayShopCharge.toFixed(2)}`, sumRight, y, { align: 'right' });
+      y += getLineHeight(9);
+    }
+
+    // Tax
+    if (appearance.showTaxLine && settings.taxRate > 0) {
+      applyTextStyle(doc, appearance.totals, DG);
+      doc.text(settings.taxLabel || 'Tax', sumX, y);
+      doc.setTextColor(...BL);
+      doc.text(`$${displayTax.toFixed(2)}`, sumRight, y, { align: 'right' });
+      y += getLineHeight(9);
+    }
+
+    // Separator + Total
+    doc.setDrawColor(...hexToRgb(appearance.colors.separator)); doc.setLineWidth(0.5);
+    doc.line(sumX, y, sumRight, y); y += getLineHeight(10);
+    doc.setTextColor(...BL); doc.setFont(appearance.totals.font, 'bold'); doc.setFontSize(Math.max(10, appearance.totals.size));
+    doc.text(appearance.labels.total, sumX, y);
+    doc.text(`$${displayTotal.toFixed(2)}`, sumRight, y, { align: 'right' });
+  }
+
+  y = sumTopY + sumTotalH + 10;
+
+  // Shop charge explanation
+  if (appearance.showShopChargeLine && displayShopCharge > 0) {
+    doc.setTextColor(...MG); doc.setFont('helvetica', 'normal'); doc.setFontSize(8);
+    const note = `* ${settings.shopChargeExplanation || 'Shop Charge covers consumable supplies such as shop rags, cleaning solvents, lubricants, and other miscellaneous materials used during service.'}`;
+    doc.splitTextToSize(note, sumW).forEach((line: string) => { doc.text(line, sumX, y); y += getLineHeight(8); });
+  }
+  }
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // FOOTERS — draw on every page
+  // ═══════════════════════════════════════════════════════════════════════════
+  const totalPages = doc.getNumberOfPages();
+  for (let i = 1; i <= totalPages; i++) {
+    drawFooter(doc, i, totalPages, settings, displayShopCharge);
+  }
+
+  return doc.output('blob');
+}
+
+// ── Download & Print Helpers ─────────────────────────────────────────────────
+export async function downloadQuotePDF(quote: Quote, settings: ShopSettings): Promise<void> {
+  const blob = await generateQuotePDF(quote, settings);
+  const sn = (quote.customerInfo.name || 'Customer').replace(/[^a-zA-Z0-9_-]/g, '_').replace(/_+/g, '_').replace(/^_|_$/g, '');
+  const sr = (quote.customerInfo.roNumber || 'NRO').replace(/[^a-zA-Z0-9_-]/g, '');
+  const ds = fmtDate(quote.createdAt).replace(/,/g, '').replace(/\s+/g, '_');
+  const fn = `Quote_${sr}_${sn}_${ds}.pdf`;
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a'); a.href = url; a.download = fn;
+  document.body.appendChild(a); a.click(); document.body.removeChild(a);
+  URL.revokeObjectURL(url);
+}
+
+export async function printQuotePDF(quote: Quote, settings: ShopSettings): Promise<void> {
+  const blob = await generateQuotePDF(quote, settings);
+  const url = URL.createObjectURL(blob);
+  const win = window.open(url, '_blank');
+  if (win) win.addEventListener('load', () => win.print());
+}
diff --git a/src/lib/pdfjs-worker.ts b/src/lib/pdfjs-worker.ts
new file mode 100644
index 0000000..d945577
--- /dev/null
+++ b/src/lib/pdfjs-worker.ts
@@ -0,0 +1,11 @@
+let configured = false;
+
+export async function ensurePdfWorker() {
+  if (configured) return;
+  const pdfjsLib = await import('pdfjs-dist');
+  pdfjsLib.GlobalWorkerOptions.workerSrc = new URL(
+    'pdfjs-dist/build/pdf.worker.min.mjs',
+    import.meta.url,
+  ).toString();
+  configured = true;
+}
diff --git a/src/lib/phone.ts b/src/lib/phone.ts
new file mode 100644
index 0000000..582243e
--- /dev/null
+++ b/src/lib/phone.ts
@@ -0,0 +1,37 @@
+/**
+ * Phone formatting utilities.
+ *
+ * All phone numbers are stored as raw digits only. This module provides
+ * formatting for display and input masking — both output "555-555-5555".
+ */
+
+/** Format raw digits for display: "5555555555" → "555-555-5555" */
+export function formatPhoneDisplay(phone: string | null | undefined): string {
+  if (!phone) return '';
+  const digits = phone.replace(/\D/g, '');
+  if (digits.length === 10) {
+    return `${digits.slice(0, 3)}-${digits.slice(3, 6)}-${digits.slice(6)}`;
+  }
+  if (digits.length === 7) {
+    return `${digits.slice(0, 3)}-${digits.slice(3)}`;
+  }
+  // If already formatted with hyphens or parens, normalise to 555-555-5555
+  if (digits.length > 10) return formatPhoneDisplay(digits.slice(0, 10));
+  return digits; // partial entry
+}
+
+/**
+ * Auto-format while the user types. Returns the formatted value suitable for
+ * setting directly as an input's value.
+ *
+ * e.g. user types "5555" → "555-5"
+ *      user types "5555555555" → "555-555-5555"
+ *      user types "555-55" → "555-55"
+ */
+export function formatPhoneInput(raw: string): string {
+  const digits = raw.replace(/\D/g, '').slice(0, 10);
+  if (digits.length === 0) return '';
+  if (digits.length <= 3) return digits;
+  if (digits.length <= 6) return `${digits.slice(0, 3)}-${digits.slice(3)}`;
+  return `${digits.slice(0, 3)}-${digits.slice(3, 6)}-${digits.slice(6)}`;
+}
diff --git a/src/lib/pocketbase.ts b/src/lib/pocketbase.ts
new file mode 100644
index 0000000..af1eba6
--- /dev/null
+++ b/src/lib/pocketbase.ts
@@ -0,0 +1,49 @@
+import { useSyncExternalStore } from 'react';
+import PocketBase from 'pocketbase';
+
+const PB_URL = import.meta.env.VITE_PB_URL || '/pb';
+export const pb = new PocketBase(PB_URL);
+
+export const APP_NAME = import.meta.env.VITE_APP_NAME || 'ShopProQuote';
+pb.autoCancellation(false);
+
+// ─── Reactive auth ────────────────────────────────────────────────────────────
+// PocketBase's authStore is event-emitting; we bridge it to React via
+// useSyncExternalStore so components re-render on login / logout / token
+// expiry. Previously `pb.authStore.isValid` was read once at render, which
+// meant a logged-out user (token expired mid-session) could keep using the
+// app until a full page reload.
+
+function subscribeAuth(callback: () => void): () => void {
+  const unsubscribe = pb.authStore.onChange(callback);
+  return unsubscribe;
+}
+
+function getAuthSnapshot() {
+  return pb.authStore.isValid;
+}
+
+function getAuthServerSnapshot() {
+  // During SSR there's no authStore — default to logged-out.
+  return false;
+}
+
+export function useIsLoggedIn(): boolean {
+  return useSyncExternalStore(subscribeAuth, getAuthSnapshot, getAuthServerSnapshot);
+}
+
+export function useAuth() {
+  // Subscribe so the hook re-runs whenever the authStore changes; the actual
+  // values come from pb.authStore directly (cheap, stable reads).
+  useIsLoggedIn();
+  return {
+    user: pb.authStore.model,
+    isLoggedIn: pb.authStore.isValid,
+    login: async (email: string, password: string) => await pb.collection('users').authWithPassword(email, password),
+    logout: () => pb.authStore.clear(),
+  };
+}
+
+export function usePb() {
+  return pb;
+}
diff --git a/src/lib/quoteHelpers.ts b/src/lib/quoteHelpers.ts
new file mode 100644
index 0000000..0192a1a
--- /dev/null
+++ b/src/lib/quoteHelpers.ts
@@ -0,0 +1,63 @@
+/* ── Pure helpers extracted from QuoteGenerator.tsx ── */
+
+/** Recursively strip null values from service objects (Zod v4 optional() rejects null). */
+export function sanitizeServices(svcs: any[]): any[] {
+  return svcs.map((s) => {
+    const clean: Record<string, any> = {};
+    for (const [k, v] of Object.entries(s)) {
+      if (v === null) continue;
+      clean[k] = v;
+    }
+    return clean;
+  });
+}
+
+export function normalizeCustomerInfo(raw: any) {
+  if (!raw || typeof raw !== 'object') return null;
+  const parsedNestedCustomerInfo = (() => {
+    const nested = raw.customerInfo;
+    if (!nested) return null;
+    if (typeof nested === 'string') {
+      try { return JSON.parse(nested); } catch { return null; }
+    }
+    return typeof nested === 'object' ? nested : null;
+  })();
+  const pick = (...values: any[]) => {
+    for (const value of values) {
+      if (typeof value === 'string' && value.trim()) return value;
+      if (typeof value === 'number' && Number.isFinite(value)) return String(value);
+    }
+    return '';
+  };
+  return {
+    name: pick(raw.name, parsedNestedCustomerInfo?.name, raw.customerName, parsedNestedCustomerInfo?.customerName, raw.customer, parsedNestedCustomerInfo?.customer),
+    phone: pick(raw.phone, parsedNestedCustomerInfo?.phone, raw.customerPhone, parsedNestedCustomerInfo?.customerPhone, raw.customer_phone, parsedNestedCustomerInfo?.customer_phone),
+    vehicleInfo: pick(raw.vehicleInfo, parsedNestedCustomerInfo?.vehicleInfo, raw.vehicle, parsedNestedCustomerInfo?.vehicle, raw.vehicle_info, parsedNestedCustomerInfo?.vehicle_info),
+    vin: pick(raw.vin, parsedNestedCustomerInfo?.vin, raw.VIN, parsedNestedCustomerInfo?.VIN),
+    mileage: pick(raw.mileage, parsedNestedCustomerInfo?.mileage, raw.miles, parsedNestedCustomerInfo?.miles),
+    roNumber: pick(raw.roNumber, parsedNestedCustomerInfo?.roNumber, raw.repairOrderNumber, parsedNestedCustomerInfo?.repairOrderNumber, raw.RO, parsedNestedCustomerInfo?.RO, raw.ro, parsedNestedCustomerInfo?.ro, raw.ro_number, parsedNestedCustomerInfo?.ro_number),
+    repairOrderId: pick(raw.repairOrderId, parsedNestedCustomerInfo?.repairOrderId),
+    serviceAdvisor: pick(raw.serviceAdvisor, parsedNestedCustomerInfo?.serviceAdvisor, raw.advisorName, parsedNestedCustomerInfo?.advisorName, raw.serviceAdvisorName, parsedNestedCustomerInfo?.serviceAdvisorName, raw.advisor, parsedNestedCustomerInfo?.advisor),
+  };
+}
+
+export function formatQuoteCurrency(amount: number): string {
+  return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(amount);
+}
+
+export function formatQuoteDate(iso: string | undefined | null): string {
+  if (!iso) return '—';
+  try {
+    return new Intl.DateTimeFormat('en-US', { month: 'short', day: 'numeric', year: 'numeric' }).format(new Date(iso));
+  } catch { return '—'; }
+}
+
+export function recentQuoteDate(quote: { createdAt?: string; lastUpdated?: string }): string {
+  return quote.createdAt || quote.lastUpdated || '';
+}
+
+export function recentQuoteTimestamp(quote: { createdAt?: string; lastUpdated?: string }): number {
+  const value = recentQuoteDate(quote);
+  const parsed = value ? new Date(value).getTime() : NaN;
+  return Number.isNaN(parsed) ? 0 : parsed;
+}
diff --git a/src/lib/quoteRoSync.ts b/src/lib/quoteRoSync.ts
new file mode 100644
index 0000000..7172a8c
--- /dev/null
+++ b/src/lib/quoteRoSync.ts
@@ -0,0 +1,116 @@
+import type { QuoteService, ROService, ShopSettings } from '../types';
+
+type PocketBaseLike = {
+  collection: (name: string) => {
+    getOne: (id: string) => Promise<any>;
+    update: (id: string, data: Record<string, any>) => Promise<any>;
+  };
+};
+
+function parseServices(raw: unknown): ROService[] {
+  if (Array.isArray(raw)) return raw as ROService[];
+  if (typeof raw === 'string' && raw.trim()) {
+    try {
+      const parsed = JSON.parse(raw);
+      return Array.isArray(parsed) ? parsed as ROService[] : [];
+    } catch {
+      return [];
+    }
+  }
+  return [];
+}
+
+export function sourceROServiceId(quoteService: QuoteService, repairOrderId: string): string {
+  const explicit = (quoteService as QuoteService & { sourceROServiceId?: string }).sourceROServiceId;
+  if (explicit) return explicit;
+
+  const prefix = `ro-${repairOrderId}-`;
+  return quoteService.id.startsWith(prefix) ? quoteService.id.slice(prefix.length) : '';
+}
+
+export function quoteServiceToROService(
+  quoteService: QuoteService,
+  settings: Pick<ShopSettings, 'defaultLaborRate'>,
+  repairOrderId: string,
+): ROService {
+  const price = parseFloat(String(quoteService.price ?? 0)) || 0;
+  const laborRate = quoteService.laborRate || settings.defaultLaborRate || 95;
+  const splitTotal = (quoteService.laborHours || 0) * (quoteService.laborRate || laborRate) + (quoteService.partsCost || 0);
+  const hasSplitPricing = quoteService.pricingMode === 'split' || splitTotal > 0;
+  const originId = sourceROServiceId(quoteService, repairOrderId);
+
+  return {
+    id: originId || `qs-${quoteService.id}`,
+    name: quoteService.name || '',
+    description: quoteService.explanation || quoteService.recommendation || '',
+    laborHours: hasSplitPricing
+      ? Math.round((quoteService.laborHours || 0) * 100) / 100
+      : Math.round((price / laborRate) * 100) / 100,
+    laborRate: hasSplitPricing ? (quoteService.laborRate || laborRate) : laborRate,
+    partsCost: hasSplitPricing ? (quoteService.partsCost || 0) : 0,
+    total: price,
+    status: 'pending',
+    technician: '',
+    pricingMode: quoteService.pricingMode || (hasSplitPricing ? 'split' : 'full'),
+    applyShopCharge: quoteService.applyShopCharge !== false,
+    technicianNotes: quoteService.technicianNotes,
+  } as ROService;
+}
+
+export function mergeApprovedQuoteServicesIntoRO(
+  existingServices: ROService[],
+  quoteServices: QuoteService[],
+  settings: Pick<ShopSettings, 'defaultLaborRate'>,
+  repairOrderId: string,
+): { services: ROService[]; syncedCount: number } {
+  const approvedQuoteServices = quoteServices.filter((s) => s.customerDecision === 'approved' || s.approved);
+  const merged = [...existingServices];
+
+  for (const quoteService of approvedQuoteServices) {
+    const roService = quoteServiceToROService(quoteService, settings, repairOrderId);
+    const originId = sourceROServiceId(quoteService, repairOrderId);
+    const existingIdx = merged.findIndex((s) => {
+      if (originId && s.id === originId) return true;
+      if (s.id === roService.id) return true;
+      return !originId && s.name === quoteService.name;
+    });
+
+    if (existingIdx >= 0) {
+      merged[existingIdx] = {
+        ...merged[existingIdx],
+        ...roService,
+        id: merged[existingIdx].id || roService.id,
+        status: merged[existingIdx].status || 'pending',
+        technician: merged[existingIdx].technician || roService.technician,
+      };
+    } else {
+      merged.push(roService);
+    }
+  }
+
+  return { services: merged, syncedCount: approvedQuoteServices.length };
+}
+
+export async function syncApprovedQuoteServicesToRO({
+  pb,
+  repairOrderId,
+  quoteServices,
+  settings,
+}: {
+  pb: PocketBaseLike;
+  repairOrderId: string;
+  quoteServices: QuoteService[];
+  settings: Pick<ShopSettings, 'defaultLaborRate'>;
+}): Promise<number> {
+  if (!repairOrderId) return 0;
+  const approvedQuoteServices = quoteServices.filter((s) => s.customerDecision === 'approved' || s.approved);
+  if (approvedQuoteServices.length === 0) return 0;
+
+  const ro = await pb.collection('repairOrders').getOne(repairOrderId);
+  const existingServices = parseServices((ro as any).services);
+  const { services, syncedCount } = mergeApprovedQuoteServicesIntoRO(existingServices, quoteServices, settings, repairOrderId);
+  await pb.collection('repairOrders').update(repairOrderId, {
+    services: JSON.stringify(services),
+  });
+  return syncedCount;
+}
diff --git a/src/lib/rbx.ts b/src/lib/rbx.ts
new file mode 100644
index 0000000..302b35b
--- /dev/null
+++ b/src/lib/rbx.ts
@@ -0,0 +1,38 @@
+import React from 'react';
+import { Navigate } from 'react-router-dom';
+import { pb } from './pocketbase';
+import { useSettingsStore } from '../store/settings';
+
+export type UserRole = 'advisor' | 'technician' | 'mobile';
+
+function roleFromModel(): UserRole | null {
+  const role = pb.authStore.model?.role as string | undefined;
+  if (role === 'advisor' || role === 'technician' || role === 'mobile') return role;
+  return null;
+}
+
+function roleFromSettings(): UserRole {
+  const { businessType } = useSettingsStore.getState().settings;
+  if (businessType === 'advisor' || businessType === 'shop') return 'advisor';
+  if (businessType === 'mobile' || businessType === 'home') return 'mobile';
+  return 'advisor';
+}
+
+export function getCurrentUserRole(): UserRole {
+  return roleFromModel() ?? roleFromSettings();
+}
+
+export function isOwnerRole(role: UserRole): boolean {
+  return role === 'advisor' || role === 'mobile';
+}
+
+export function isTechnicianRole(role: UserRole): boolean {
+  return role === 'technician';
+}
+
+export function RequireOwnerRole({ children }: { children: React.ReactNode }) {
+  if (isTechnicianRole(getCurrentUserRole())) {
+    return React.createElement(Navigate, { to: '/technician', replace: true });
+  }
+  return React.createElement(React.Fragment, null, children);
+}
diff --git a/src/lib/repairOrders.ts b/src/lib/repairOrders.ts
new file mode 100644
index 0000000..d5af29a
--- /dev/null
+++ b/src/lib/repairOrders.ts
@@ -0,0 +1,210 @@
+/* ── Pure helper functions extracted from RepairOrders.tsx ── */
+
+import { readPromisedOverride, isVoided } from './roEvents';
+import { formatDateTime } from './format';
+import { logError } from './userMessages';
+import { getStatusConfig } from './status';
+import type { RepairOrder, CustomerType, ShopSettings } from '../types';
+
+/* ── Types used by helpers in this module ───────── */
+
+export type CompletedRangeFilter = 'all' | 'today' | 'this_week' | 'this_month';
+
+/* ── Due Time Calc ──────────────────────────────── */
+
+export function calcDueTime(ro: RepairOrder): number | null {
+  const override = readPromisedOverride(ro);
+  if (override) {
+    const t = new Date(override).getTime();
+    if (!isNaN(t)) return t;
+  }
+  const baseTime = ro.writeupTime || ro.created;
+  const duration = ro.estimatedDuration || 60;
+  if (baseTime) {
+    return new Date(baseTime).getTime() + duration * 60000;
+  }
+  if (ro.promisedTime) {
+    return new Date(ro.promisedTime).getTime();
+  }
+  return null;
+}
+
+export function formatTimeRemaining(ro: RepairOrder, now: number): string {
+  if (ro.status === 'completed' || ro.status === 'final_close' || ro.status === 'delivered') return '—';
+  const due = calcDueTime(ro);
+  if (due === null) return '—';
+  const diffMs = due - now;
+  const absMs = Math.abs(diffMs);
+  const hours = Math.floor(absMs / 3600000);
+  const minutes = Math.floor((absMs % 3600000) / 60000);
+  const sign = diffMs < 0 ? '-' : '';
+  if (hours > 0) {
+    return `${sign}${hours}h ${minutes}m`;
+  }
+  return `${sign}${minutes}m`;
+}
+
+export function getUrgencyClass(ro: RepairOrder, now: number): string {
+  if (isVoided(ro)) return '';
+  if (ro.status === 'completed' || ro.status === 'final_close' || ro.status === 'delivered') return '';
+  const due = calcDueTime(ro);
+  if (due === null) return '';
+  const diffMs = due - now;
+  if (diffMs < 0) return 'urgent';
+  if (diffMs <= 30 * 60000) return 'warning';
+  return '';
+}
+
+export function formatDueDateTime(ro: RepairOrder): string {
+  const due = calcDueTime(ro);
+  if (!due) return '—';
+  return formatDateTime(new Date(due).toISOString());
+}
+
+export function getCompletedMetricDate(ro: RepairOrder): string | undefined {
+  return ro.completedTime || ro.completedDate || ro.updated || ro.created || ro.writeupTime;
+}
+
+export function isWithinCompletedRange(ro: RepairOrder, range: CompletedRangeFilter): boolean {
+  if (range === 'all') return true;
+  const dateStr = getCompletedMetricDate(ro);
+  if (!dateStr) return false;
+  const d = new Date(dateStr);
+  if (Number.isNaN(d.getTime())) return false;
+
+  const now = new Date();
+  const startToday = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+  const endToday = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 23, 59, 59, 999);
+
+  if (range === 'today') return d >= startToday && d <= endToday;
+  if (range === 'this_week') {
+    const start = new Date(startToday);
+    start.setDate(startToday.getDate() - startToday.getDay());
+    return d >= start && d <= endToday;
+  }
+  const startMonth = new Date(now.getFullYear(), now.getMonth(), 1);
+  return d >= startMonth && d <= endToday;
+}
+
+export function sortCompletedOrders(orders: RepairOrder[]): RepairOrder[] {
+  return [...orders].sort((a, b) => {
+    const aVoid = isVoided(a);
+    const bVoid = isVoided(b);
+    if (aVoid !== bVoid) return aVoid ? 1 : -1;
+    return new Date(getCompletedMetricDate(b) || 0).getTime() -
+           new Date(getCompletedMetricDate(a) || 0).getTime();
+  });
+}
+
+export function ratingLabel(rating?: number): string {
+  return rating ? `${rating}/5` : 'Unrated';
+}
+
+export function displayCustomerName(name?: string): string {
+  const normalized = (name || '').trim().replace(/\s+/g, ' ');
+  if (!normalized) return '—';
+
+  const delimited = normalized
+    .split(/\s*(?:\/|,|;|\||&|\+|\s+-\s+|\band\b)\s*/i)
+    .map((part) => part.trim())
+    .filter(Boolean);
+  if (delimited.length > 1) return delimited[0];
+
+  const words = normalized.split(' ');
+  if (words.length % 2 === 0) {
+    const half = words.length / 2;
+    const first = words.slice(0, half).join(' ');
+    const second = words.slice(half).join(' ');
+    if (first.toLowerCase() === second.toLowerCase()) return first;
+  }
+
+  return normalized;
+}
+
+export function sortOrders(orders: RepairOrder[]): RepairOrder[] {
+  return [...orders].sort((a, b) => {
+    const aVoid = isVoided(a);
+    const bVoid = isVoided(b);
+    if (aVoid !== bVoid) return aVoid ? 1 : -1;
+    if (aVoid && bVoid) {
+      return new Date(b.writeupTime || b.created || 0).getTime() -
+             new Date(a.writeupTime || a.created || 0).getTime();
+    }
+
+    const aDue = calcDueTime(a) ?? 0;
+    const bDue = calcDueTime(b) ?? 0;
+    const aIsWaitingParts = a.status === 'waiting_parts';
+    const bIsWaitingParts = b.status === 'waiting_parts';
+    const aIsWaitingPickup = a.status === 'waiting_pickup';
+    const bIsWaitingPickup = b.status === 'waiting_pickup';
+
+    if (aIsWaitingParts && !bIsWaitingParts) return 1;
+    if (!aIsWaitingParts && bIsWaitingParts) return -1;
+    if (aIsWaitingParts && bIsWaitingParts) return aDue - bDue;
+    if (aIsWaitingPickup && !bIsWaitingPickup) return 1;
+    if (!aIsWaitingPickup && bIsWaitingPickup) return -1;
+    if (aIsWaitingPickup && bIsWaitingPickup) return aDue - bDue;
+
+    const aType = a.customerType || 'drop-off';
+    const bType = b.customerType || 'drop-off';
+    if (aType !== bType) {
+      if (aType === 'waiter') return -1;
+      return 1;
+    }
+
+    return aDue - bDue;
+  });
+}
+
+/* ── Normalization ──────────────────────────────── */
+
+export function normalizeRO(item: any): RepairOrder {
+  let services = item.services || [];
+  if (typeof services === 'string' && services.trim()) {
+    try { services = JSON.parse(services); } catch (err) { logError(`Failed to parse normalizeRO services JSON for RO ${item.id}: ${services}`, err); services = []; }
+  }
+  if (!Array.isArray(services)) services = [];
+
+  let estimatedDuration: number | undefined;
+  if (item.estimatedTime && item.estimatedTime !== '') {
+    const hours = parseFloat(item.estimatedTime);
+    if (!isNaN(hours)) estimatedDuration = Math.round(hours * 60);
+  }
+  let customerType: CustomerType | undefined =
+    (item.customerType === 'waiter' || item.customerType === 'drop-off')
+      ? item.customerType
+      : undefined;
+  let financial: Record<string, any> | undefined;
+  if (item.financial) {
+    try {
+      financial = typeof item.financial === 'string' ? JSON.parse(item.financial) : item.financial;
+      if (financial && (!customerType) && (financial.customerType === 'waiter' || financial.customerType === 'drop-off')) {
+        customerType = financial.customerType;
+      }
+    } catch (err) { logError('Failed to read promised override from financial blob', err); }
+  }
+  const result: Record<string, any> = { ...item, services, estimatedDuration, customerType };
+  if (typeof item.serviceLocation === 'string') result.serviceLocation = item.serviceLocation;
+  if (item.travelFee !== undefined && item.travelFee !== null) {
+    result.travelFee = parseFloat(String(item.travelFee)) || 0;
+  }
+  if (item.tripMiles !== undefined && item.tripMiles !== null) {
+    result.tripMiles = parseFloat(String(item.tripMiles)) || 0;
+  }
+  if (financial !== undefined) result.financial = financial;
+  return result as unknown as RepairOrder;
+}
+
+/* ── Status filter chips ────────────────────────── */
+
+export function getStatusChips(settings: ShopSettings): { value: string; label: string; colors: string }[] {
+  const config = getStatusConfig(settings);
+  return [
+    { value: 'active', label: config.active.label, colors: config.active.colors },
+    { value: 'in_progress', label: config.in_progress.label, colors: config.in_progress.colors },
+    { value: 'waiting_parts', label: config.waiting_parts.label, colors: config.waiting_parts.colors },
+    { value: 'waiting_pickup', label: config.waiting_pickup.label, colors: config.waiting_pickup.colors },
+    { value: 'completed', label: config.completed.label, colors: config.completed.colors },
+    { value: 'final_close', label: config.final_close.label, colors: config.final_close.colors },
+  ];
+}
diff --git a/src/lib/richtext.ts b/src/lib/richtext.ts
new file mode 100644
index 0000000..9793df4
--- /dev/null
+++ b/src/lib/richtext.ts
@@ -0,0 +1,101 @@
+// Tiny inline-rich-text parser shared by the PDF generator and the Settings
+// preview. Supports two inline tags, written as `{tag}…{/tag}`:
+//
+//   {accent}…{/accent}   — primary accent color (PDF uses ShopSettings.pdfAccentColor;
+//                         JSX uses whatever color the caller passes).
+//   {muted}…{/muted}     — muted gray (PDF: DG; JSX: text-gray-400).
+//   {bold}…{/bold}       — bold weight.
+//
+// Tags can be freely combined and nested one level deep, e.g.:
+//   "Due on Receipt {accent}(Net 30 available{/accent})"
+//   "{accent}Net 15{/accent} — {muted}1.5% discount if paid early{/muted}"
+//
+// Unknown tags are emitted as literal text (so a stray `{days}` placeholder
+// in `quoteFooterNote` still renders verbatim — the PDF layer replaces that
+// template var before calling us).
+//
+// The parser returns flat segments; nesting is resolved by merging child
+// styles into the parent (e.g. `{accent}{bold}X{/bold}{/accent}` yields one
+// `accent+bold` segment). One level of nesting is the practical limit —
+// anything more complex belongs in a real templating engine, not settings
+// strings.
+
+export type RichStyle = 'plain' | 'accent' | 'muted' | 'bold';
+
+export interface RichSegment {
+  text: string;
+  style: RichStyle;
+}
+
+const TAG_RE = /\{(accent|muted|bold|\/accent|\/muted|\/bold)\}/g;
+
+export function parseRichText(input: string): RichSegment[] {
+  if (!input) return [];
+  TAG_RE.lastIndex = 0;
+  const out: RichSegment[] = [];
+  let cursor = 0;
+  // Open styles stack. Plain is always at the bottom.
+  const stack: RichStyle[] = ['plain'];
+  let last: RichSegment | null = null;
+
+  const pushText = (text: string) => {
+    if (!text) return;
+    const style = stack[stack.length - 1] === 'bold'
+      ? (stack[stack.length - 2] === 'accent' || stack[stack.length - 2] === 'muted'
+          ? (stack[stack.length - 2] as RichStyle)
+          : 'bold')
+      : (stack[stack.length - 1] as RichStyle);
+    if (last && last.style === style) {
+      last.text += text;
+    } else {
+      last = { text, style };
+      out.push(last);
+    }
+  };
+
+  let match: RegExpExecArray | null;
+  while ((match = TAG_RE.exec(input)) !== null) {
+    if (match.index > cursor) pushText(input.slice(cursor, match.index));
+    const tag = match[1];
+    if (tag.startsWith('/')) {
+      // Pop the matching open tag (if any). If a close shows up without a
+      // matching open, render it literally so users see their mistake.
+      const open = tag.slice(1) as RichStyle;
+      const idx = stack.lastIndexOf(open);
+      if (idx > 0) {
+        stack.length = idx;
+        last = null;
+      } else {
+        pushText(match[0]);
+      }
+    } else {
+      // Push only the styles we actually support nesting on. `bold` nests on
+      // top of accent/muted; accent/muted replace each other (taking the
+      // newest) and don't nest on themselves.
+      const open = tag as RichStyle;
+      if (open === 'bold') {
+        stack.push('bold');
+      } else {
+        // accent / muted — replace any existing accent/muted at the top of
+        // the stack, otherwise push a new entry above the base.
+        if (stack.length > 1 && (stack[stack.length - 1] === 'accent' || stack[stack.length - 1] === 'muted')) {
+          stack[stack.length - 1] = open;
+        } else {
+          stack.push(open);
+        }
+      }
+      last = null;
+    }
+    cursor = match.index + match[0].length;
+  }
+  if (cursor < input.length) pushText(input.slice(cursor));
+  return out;
+}
+
+// Convenience: does a given string contain any rich-tag at all? Lets callers
+// skip the segment-based rendering path when there's nothing styled.
+export function hasRichText(input: string | undefined | null): boolean {
+  if (!input) return false;
+  TAG_RE.lastIndex = 0;
+  return TAG_RE.test(input);
+}
diff --git a/src/lib/roEvents.ts b/src/lib/roEvents.ts
new file mode 100644
index 0000000..c265d90
--- /dev/null
+++ b/src/lib/roEvents.ts
@@ -0,0 +1,176 @@
+// RO audit-timeline + soft-feature helpers.
+//
+// We deliberately store the new audit / promised-override / void / clock
+// data inside the existing `financial` JSON blob on the `repairOrders`
+// collection. PocketBase already types that column as JSON, so this needs
+// no schema migration and works against the running instance today.
+//
+// All helpers do a fresh read → merge → write to avoid clobbering
+// concurrent edits to other keys of the same blob.
+
+import { pb } from './pocketbase';
+import { logError } from './userMessages';
+import type { ROEvent, ClockEntry, RepairOrder } from '../types';
+
+const KEY_EVENTS = 'events';
+const KEY_PROMISED_OVERRIDE = 'promisedTimeOverride';
+const KEY_VOIDED = 'voided';
+const KEY_CLOCK = 'clockEntries';
+
+// ── Low-level blob read/merge/write ─────────────────────────────────────────
+
+function getBlob(ro: RepairOrder | { id: string; financial?: any }): Record<string, any> {
+  const raw = (ro as any).financial;
+  if (!raw) return {};
+  if (typeof raw === 'string') {
+    try { return JSON.parse(raw) as Record<string, any>; } catch (err) { logError('getBlob JSON parse failed', err); return {}; }
+  }
+  if (typeof raw === 'object') return raw as Record<string, any>;
+  return {};
+}
+
+function parseBlob(raw: any): Record<string, any> {
+  if (!raw) return {};
+  if (typeof raw === 'string') {
+    try { return JSON.parse(raw) as Record<string, any>; } catch (err) { logError('parseBlob JSON parse failed', err); return {}; }
+  }
+  if (typeof raw === 'object') return raw as Record<string, any>;
+  return {};
+}
+
+async function fetchFresh(id: string): Promise<Record<string, any>> {
+  try {
+    const rec = await pb.collection('repairOrders').getOne(id);
+    return parseBlob((rec as any).financial);
+  } catch (err) {
+    logError('roEvents.fetchFresh: failed to read financial blob', err);
+    throw err;
+  }
+}
+
+async function writeBlob(id: string, blob: Record<string, any>): Promise<void> {
+  await pb.collection('repairOrders').update(id, { financial: JSON.stringify(blob) });
+}
+
+// ── Events (audit timeline) ──────────────────────────────────────────────────
+
+export function readEvents(ro: RepairOrder): ROEvent[] {
+  const blob = getBlob(ro);
+  const ev = blob[KEY_EVENTS];
+  return Array.isArray(ev) ? (ev as ROEvent[]) : [];
+}
+
+function newEventId(): string {
+  return `${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
+}
+
+export async function appendROEvent(
+  roId: string,
+  type: ROEvent['type'],
+  data?: Record<string, any>,
+  by?: string,
+): Promise<ROEvent> {
+  const blob = await fetchFresh(roId);
+  const events: ROEvent[] = Array.isArray(blob[KEY_EVENTS]) ? blob[KEY_EVENTS] : [];
+  const event: ROEvent = {
+    id: newEventId(),
+    type,
+    at: new Date().toISOString(),
+    data,
+    by,
+  };
+  // Cap the timeline at the most recent 200 entries to keep the blob small.
+  const next = [...events, event].slice(-200);
+  blob[KEY_EVENTS] = next;
+  await writeBlob(roId, blob);
+  return event;
+}
+
+// ── Promised time override ───────────────────────────────────────────────────
+
+export function readPromisedOverride(ro: RepairOrder): string | undefined {
+  const blob = getBlob(ro);
+  const v = blob[KEY_PROMISED_OVERRIDE];
+  return typeof v === 'string' && v ? v : undefined;
+}
+
+export async function setPromisedOverride(
+  roId: string,
+  value: string | null,
+  by?: string,
+): Promise<void> {
+  const blob = await fetchFresh(roId);
+  if (value === null) delete blob[KEY_PROMISED_OVERRIDE];
+  else blob[KEY_PROMISED_OVERRIDE] = value;
+  await writeBlob(roId, blob);
+  await appendROEvent(roId, 'promised_override', { value }, by);
+}
+
+// ── Soft void ───────────────────────────────────────────────────────────────
+
+export function isVoided(ro: RepairOrder): boolean {
+  const blob = getBlob(ro);
+  return blob[KEY_VOIDED] === true;
+}
+
+export async function setVoided(
+  roId: string,
+  voided: boolean,
+  by?: string,
+): Promise<void> {
+  const blob = await fetchFresh(roId);
+  if (voided) blob[KEY_VOIDED] = true;
+  else delete blob[KEY_VOIDED];
+  await writeBlob(roId, blob);
+  await appendROEvent(roId, voided ? 'void' : 'unvoid', {}, by);
+}
+
+// ── Technician clock (stopwatch) ─────────────────────────────────────────────
+
+export function readClockEntries(ro: RepairOrder): ClockEntry[] {
+  const blob = getBlob(ro);
+  const arr = blob[KEY_CLOCK];
+  return Array.isArray(arr) ? (arr as ClockEntry[]) : [];
+}
+
+export function clockRunning(ro: RepairOrder): ClockEntry | undefined {
+  const entries = readClockEntries(ro);
+  return entries.find((e) => !e.end);
+}
+
+export function clockElapsedMinutes(ro: RepairOrder): number {
+  const entries = readClockEntries(ro);
+  const now = Date.now();
+  return entries.reduce((sum, e) => {
+    if (!e.start) return sum;
+    const end = e.end ? new Date(e.end).getTime() : now;
+    const start = new Date(e.start).getTime();
+    const mins = Math.max(0, Math.round((end - start) / 60000));
+    return sum + (e.minutes ?? mins);
+  }, 0);
+}
+
+export async function clockStart(roId: string, by?: string): Promise<void> {
+  const blob = await fetchFresh(roId);
+  const arr: ClockEntry[] = Array.isArray(blob[KEY_CLOCK]) ? blob[KEY_CLOCK] : [];
+  if (arr.some((e) => !e.end)) return; // already running
+  arr.push({ start: new Date().toISOString() });
+  blob[KEY_CLOCK] = arr;
+  await writeBlob(roId, blob);
+  await appendROEvent(roId, 'clock_start', {}, by);
+}
+
+export async function clockStop(roId: string, by?: string): Promise<number> {
+  const blob = await fetchFresh(roId);
+  const arr: ClockEntry[] = Array.isArray(blob[KEY_CLOCK]) ? blob[KEY_CLOCK] : [];
+  const idx = arr.findIndex((e) => !e.end);
+  if (idx === -1) return 0;
+  const entry = arr[idx];
+  const end = new Date().toISOString();
+  const mins = Math.max(0, Math.round((new Date(end).getTime() - new Date(entry.start).getTime()) / 60000));
+  arr[idx] = { ...entry, end, minutes: mins };
+  blob[KEY_CLOCK] = arr;
+  await writeBlob(roId, blob);
+  await appendROEvent(roId, 'clock_stop', { elapsedMin: mins }, by);
+  return mins;
+}
\ No newline at end of file
diff --git a/src/lib/roNumber.ts b/src/lib/roNumber.ts
new file mode 100644
index 0000000..d97895d
--- /dev/null
+++ b/src/lib/roNumber.ts
@@ -0,0 +1,36 @@
+// Shared Repair Order number generation utilities.
+//
+// Previously `generateRONumber` lived inside src/pages/RepairOrders.tsx and
+// wasn't exported, so QuoteGenerator couldn't reuse it when "converting" a
+// quote to an RO. Promoted to a shared module so both pages assign RO
+// numbers with identical rules.
+
+function pad4(n: number): string {
+  return String(n).padStart(4, '0');
+}
+
+/** Generate a candidate RO number in the `RO-YYMMDD-####` format. */
+export function generateRONumber(): string {
+  const now = new Date();
+  const y = now.getFullYear().toString().slice(2);
+  const m = String(now.getMonth() + 1).padStart(2, '0');
+  const d = String(now.getDate()).padStart(2, '0');
+  const seq = pad4(Math.floor(Math.random() * 9999));
+  return `RO-${y}${m}${d}-${seq}`;
+}
+
+/**
+ * Generate a unique RO number, retrying until none of the existing RO numbers
+ * collide. Useful for client-side generation (the server-side uniqueness
+ * guard lives in PocketBase via the M5 migration — adds `unique=true` on the
+ * `roNumber` field). Pass the set of existing numbers to avoid; pass an
+ * empty set if you only want server-side dedup.
+ */
+export function uniqueRONumber(existing: Set<string>): string {
+  for (let i = 0; i < 25; i++) {
+    const candidate = generateRONumber();
+    if (!existing.has(candidate)) return candidate;
+  }
+  // Extremely unlikely: fall back to a high-entropy suffix.
+  return `RO-collide-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
+}
\ No newline at end of file
diff --git a/src/lib/roPdf.ts b/src/lib/roPdf.ts
new file mode 100644
index 0000000..00fb5f8
--- /dev/null
+++ b/src/lib/roPdf.ts
@@ -0,0 +1,400 @@
+// Printable Repair Order / Work-Order PDF.
+//
+// Reuses the same jsPDF layout primitives as src/lib/pdf.ts so the two
+// documents look like they come from the same shop. Deliberately simpler
+// than the quote PDF — an RO is an internal work order, not a customer-
+// facing recommendation, so we skip the personalized header message,
+// approval badges, and the "postponed services" section.
+
+import type { jsPDF } from 'jspdf';
+import type { RepairOrder, ShopSettings } from '../types';
+import { computeROTotals, roServiceTotal } from './totals';
+import { formatCurrency, formatDate } from './format';
+import { SERVICE_SUB_STATUS_CONFIG, statusLabel, statusLabelForBusiness } from './status';
+import { getProviderLabel, getRoleLabel } from './settings';
+
+const PAGE_W = 612;
+const PAGE_H = 792;
+const MARGIN = 40;
+const CW = PAGE_W - MARGIN * 2;
+const CONTENT_BOTTOM = PAGE_H - MARGIN;
+const FOOTER_HEIGHT = 35;
+
+type ColorTuple = [number, number, number];
+const BL: ColorTuple = [18, 18, 18];
+const DG: ColorTuple = [64, 64, 64];
+const MG: ColorTuple = [80, 80, 80];
+const LG: ColorTuple = [220, 220, 220];
+const GR: ColorTuple = [22, 163, 74];
+
+const ACCENT: ColorTuple = GR;
+
+function getLineHeight(fontSize: number, multiplier = 1.2): number {
+  return Math.ceil(fontSize * multiplier);
+}
+
+function newPage(doc: jsPDF): number {
+  doc.addPage();
+  return MARGIN;
+}
+
+function drawFooter(doc: jsPDF, pageNum: number, totalPages: number, settings: ShopSettings) {
+  doc.setPage(pageNum);
+  const footerY = PAGE_H - MARGIN - FOOTER_HEIGHT + 5;
+  doc.setDrawColor(...LG);
+  doc.setLineWidth(1);
+  doc.line(MARGIN, footerY, PAGE_W - MARGIN, footerY);
+
+  doc.setTextColor(...BL);
+  doc.setFont('helvetica', 'normal');
+  doc.setFontSize(9);
+  const fm = settings.footerMessage || 'Thank you for choosing us for your automotive needs!';
+  doc.text(fm, PAGE_W / 2, footerY + 15, { align: 'center' });
+
+  doc.setTextColor(...MG);
+  doc.setFont('helvetica', 'bold');
+  doc.setFontSize(12);
+  doc.text(`Page ${pageNum} of ${totalPages}`, PAGE_W - MARGIN, PAGE_H - 10, { align: 'right' });
+}
+
+export async function generateROPDF(
+  ro: RepairOrder,
+  settings: ShopSettings,
+): Promise<Blob> {
+  const { jsPDF } = await import('jspdf');
+  const doc = new jsPDF('p', 'pt', 'letter');
+
+  const businessName = settings.businessName || 'Auto Repair Shop';
+  const businessPhone = settings.businessPhone || '';
+  const businessAddress = settings.businessAddress || '';
+  const providerLabel = getProviderLabel(settings);
+  const roleLabel = getRoleLabel(settings);
+  const services = Array.isArray(ro.services) ? ro.services : [];
+
+  const totals = computeROTotals({
+    services: services.map((s) => ({
+      ...s,
+      id: s.id || '',
+      name: s.name || '',
+      description: s.description || '',
+      laborHours: s.laborHours || 0,
+      laborRate: s.laborRate || 0,
+      partsCost: s.partsCost || 0,
+      total: roServiceTotal({
+        laborHours: s.laborHours || 0,
+        laborRate: s.laborRate || 0,
+        partsCost: s.partsCost || 0,
+        total: s.total || 0,
+      }),
+      status: s.status || 'pending',
+      technician: s.technician || '',
+    })) as any,
+    discount: ro.discount,
+    settings,
+  });
+
+  let y = MARGIN;
+  const leftColX = MARGIN;
+  const rightColX = MARGIN + (CW * 0.58);
+  const colWidth = CW * 0.40;
+
+  // ── Logo ──
+  if (settings.logoUrl && settings.showLogoOnPdf) {
+    try {
+      doc.addImage(settings.logoUrl, 'PNG', MARGIN, y, 40, 18);
+      y += 24;
+    } catch { /* ignore logo errors */ }
+  }
+
+  // ── Header band ──
+  const headerTop = y;
+  doc.setFillColor(248, 248, 248);
+  doc.roundedRect(MARGIN, headerTop, CW, 110, 4, 4, 'F');
+
+  // Left: shop
+  doc.setTextColor(...MG);
+  doc.setFont('helvetica', 'bold');
+  doc.setFontSize(8);
+  doc.text(providerLabel, leftColX, y + 14);
+  doc.setFont('helvetica', 'bold');
+  doc.setFontSize(11);
+  doc.setTextColor(...BL);
+  doc.text(businessName, leftColX, y + 28);
+
+  doc.setFont('helvetica', 'normal');
+  doc.setFontSize(9);
+  doc.setTextColor(...DG);
+  let addrY = y + 40;
+  businessAddress.split('\n').forEach((line: string) => {
+    doc.splitTextToSize(line, colWidth).forEach((l: string) => {
+      doc.text(l, leftColX, addrY);
+      addrY += getLineHeight(9, 1.4);
+    });
+  });
+  if (businessPhone) {
+    doc.setTextColor(...MG);
+    doc.setFontSize(8);
+    doc.text('Phone', leftColX, addrY + 2);
+    doc.setTextColor(...BL);
+    doc.setFontSize(9);
+    doc.text(businessPhone, leftColX + colWidth - 5, addrY + 2, { align: 'right' });
+  }
+
+  // Right: RO header
+  let rY = headerTop + 14;
+  doc.setTextColor(...ACCENT);
+  doc.setFont('helvetica', 'bold');
+  doc.setFontSize(14);
+  doc.text('REPAIR ORDER', rightColX, rY);
+  rY += 16;
+
+  doc.setFont('helvetica', 'normal');
+  doc.setFontSize(8);
+  doc.setTextColor(...MG);
+  doc.text('RO #', rightColX, rY);
+  doc.setTextColor(...BL);
+  doc.text(ro.roNumber || ro.id.slice(0, 8), rightColX + colWidth - 5, rY, { align: 'right' });
+  rY += getLineHeight(9, 1.4);
+
+  const infoRows: [string, string][] = [
+    ['Status', statusLabelForBusiness(ro.status, settings)],
+    ['Date', formatDate(ro.writeupTime || ro.created)],
+    ['Customer', ro.customerName || '—'],
+    ['Vehicle', ro.vehicleInfo || '—'],
+    ['VIN', ro.vin || '—'],
+    ['Mileage', ro.mileage ? `${ro.mileage} mi` : '—'],
+    [roleLabel, ro.advisorName || '—'],
+    ...(ro.serviceLocation ? [['Service Location', ro.serviceLocation] as [string, string]] : []),
+    ...(ro.tripMiles && ro.tripMiles > 0 ? [['Trip Miles', `${ro.tripMiles} mi`] as [string, string]] : []),
+  ];
+  infoRows.forEach(([label, value]) => {
+    doc.setTextColor(...MG);
+    doc.setFontSize(8);
+    doc.text(label, rightColX, rY);
+    doc.setTextColor(...BL);
+    doc.setFontSize(9);
+    doc.splitTextToSize(value || '—', colWidth - 30).forEach((l: string, i: number) => {
+      doc.text(l, rightColX + colWidth - 5, rY + i * getLineHeight(9, 1.4), { align: 'right' });
+    });
+    rY += getLineHeight(9, 1.4);
+  });
+
+  y = Math.max(addrY + 16, rY + 12) + 8;
+
+  doc.setDrawColor(...LG);
+  doc.setLineWidth(0.7);
+  doc.roundedRect(MARGIN, headerTop, CW, y - MARGIN - 8, 4, 4, 'D');
+  y += 6;
+
+  // ── Services table header ──
+  if (y + 30 > CONTENT_BOTTOM - FOOTER_HEIGHT) y = newPage(doc);
+  doc.setFont('helvetica', 'bold');
+  doc.setFontSize(11);
+  doc.setTextColor(...ACCENT);
+  doc.text('SERVICES', MARGIN, y);
+  y += 6;
+  doc.setDrawColor(...ACCENT);
+  doc.setLineWidth(0.7);
+  doc.line(MARGIN, y, PAGE_W - MARGIN, y);
+  y += 14;
+
+  // Column layout for services
+  const colName = MARGIN;
+  const colNameW = CW * 0.40;
+  const colTech = MARGIN + colNameW;
+  const colTechW = CW * 0.18;
+  const colStatus = MARGIN + colNameW + colTechW;
+  const colStatusW = CW * 0.18;
+  const colTotal = PAGE_W - MARGIN;
+
+  doc.setFont('helvetica', 'bold');
+  doc.setFontSize(8);
+  doc.setTextColor(...MG);
+  doc.text('SERVICE', colName, y);
+  doc.text('TECH', colTech, y);
+  doc.text('STATUS', colStatus, y);
+  doc.text('TOTAL', colTotal, y, { align: 'right' });
+  y += 6;
+  doc.setDrawColor(...LG);
+  doc.setLineWidth(0.5);
+  doc.line(MARGIN, y, PAGE_W - MARGIN, y);
+  y += 12;
+
+  // Service rows
+  services.forEach((svc, idx) => {
+    const nameLines = doc.splitTextToSize(svc.name || '(unnamed)', colNameW - 8);
+    const detailLines = doc.splitTextToSize(
+      `${svc.laborHours || 0}h × ${formatCurrency(svc.laborRate || 0)}/hr${svc.partsCost ? ' + parts ' + formatCurrency(svc.partsCost) : ''}`,
+      colNameW - 8,
+    );
+    const rowsUsed = Math.max(nameLines.length, detailLines.length);
+    const rowH = Math.max(rowsUsed * getLineHeight(9, 1.4) + 4, 14);
+
+    if (y + rowH > CONTENT_BOTTOM - FOOTER_HEIGHT) {
+      y = newPage(doc);
+      // redraw section header
+      doc.setFont('helvetica', 'bold');
+      doc.setFontSize(11);
+      doc.setTextColor(...ACCENT);
+      doc.text('SERVICES (cont.)', MARGIN, y);
+      y += 10;
+      doc.setDrawColor(...ACCENT);
+      doc.line(MARGIN, y, PAGE_W - MARGIN, y);
+      y += 14;
+    }
+
+    const rowTop = y;
+    doc.setFont('helvetica', 'bold');
+    doc.setFontSize(9);
+    doc.setTextColor(...BL);
+    nameLines.forEach((l: string, i: number) => {
+      doc.text(l, colName, rowTop + i * getLineHeight(9, 1.4));
+    });
+    doc.setFont('helvetica', 'normal');
+    doc.setFontSize(8);
+    doc.setTextColor(...MG);
+    detailLines.forEach((l: string, i: number) => {
+      doc.text(l, colName, rowTop + nameLines.length * getLineHeight(9, 1.4) + i * getLineHeight(8, 1.4));
+    });
+
+    doc.setTextColor(...BL);
+    doc.setFontSize(8);
+    doc.text(svc.technician || '—', colTech, rowTop);
+
+    doc.setTextColor(...DG);
+    const sub = svc.subStatus && SERVICE_SUB_STATUS_CONFIG[svc.subStatus];
+    const statusText = `${statusLabel(svc.status || 'pending')}${sub && sub.label ? ' · ' + sub.label : ''}`;
+    doc.splitTextToSize(statusText, colStatusW - 6).forEach((l: string, i: number) => {
+      doc.text(l, colStatus, rowTop + i * getLineHeight(8, 1.4));
+    });
+
+    doc.setFont('helvetica', 'bold');
+    doc.setFontSize(10);
+    doc.setTextColor(...BL);
+    doc.text(
+      formatCurrency(
+        roServiceTotal({
+          laborHours: svc.laborHours || 0,
+          laborRate: svc.laborRate || 0,
+          partsCost: svc.partsCost || 0,
+          total: svc.total || 0,
+        }),
+      ),
+      colTotal, rowTop, { align: 'right' },
+    );
+
+    y = rowTop + rowH;
+    if (idx < services.length - 1) {
+      doc.setDrawColor(...LG);
+      doc.setLineWidth(0.3);
+      doc.line(MARGIN, y, PAGE_W - MARGIN, y);
+      y += 8;
+    }
+  });
+
+  // ── Notes ──
+  if (ro.notes && ro.notes.trim()) {
+    if (y + 40 > CONTENT_BOTTOM - FOOTER_HEIGHT) y = newPage(doc);
+    y += 12;
+    doc.setFont('helvetica', 'bold');
+    doc.setFontSize(9);
+    doc.setTextColor(...MG);
+    doc.text('NOTES', MARGIN, y);
+    y += 6;
+    doc.setDrawColor(...LG);
+    doc.line(MARGIN, y, PAGE_W - MARGIN, y);
+    y += 12;
+    doc.setFont('helvetica', 'normal');
+    doc.setFontSize(9);
+    doc.setTextColor(...DG);
+    doc.splitTextToSize(ro.notes, CW).forEach((l: string) => {
+      if (y > CONTENT_BOTTOM - FOOTER_HEIGHT) y = newPage(doc);
+      doc.text(l, MARGIN, y);
+      y += getLineHeight(9, 1.4);
+    });
+  }
+
+  // ── Totals summary box ──
+  const sumX = PAGE_W - MARGIN - (CW * 0.45);
+  const sumW = CW * 0.45;
+  const sumRight = PAGE_W - MARGIN;
+  const bp = 10;
+
+  const discountAmount = totals.discountAmount;
+  const rows: [string, string, ColorTuple?][] = [
+    ['Services Subtotal', formatCurrency(totals.laborTotal + totals.partsTotal), DG],
+    ...(discountAmount > 0 ? [['Discount', `−${formatCurrency(discountAmount)}`, GR] as [string, string, ColorTuple]] : []),
+    ...(totals.shopCharge > 0 ? [['Shop Charge', formatCurrency(totals.shopCharge), DG] as [string, string, ColorTuple]] : []),
+    ...(totals.tax > 0 ? [[settings.taxLabel || 'Tax', formatCurrency(totals.tax), DG] as [string, string, ColorTuple]] : []),
+  ];
+  const sumRows = rows.length + 3;
+  const sumContentH = sumRows * getLineHeight(9, 1.2) + 14;
+  const sumTotalH = bp + sumContentH + bp;
+
+  if (y + sumTotalH + 14 > CONTENT_BOTTOM - FOOTER_HEIGHT) y = newPage(doc);
+  y += 14;
+  const sumTopY = y - bp;
+
+  doc.setFillColor(250, 250, 250);
+  doc.setDrawColor(...LG);
+  doc.setLineWidth(0.5);
+  doc.roundedRect(sumX - bp, sumTopY, sumW + bp * 2, sumTotalH, 4, 4, 'FD');
+  y = sumTopY + bp;
+
+  doc.setFont('helvetica', 'bold');
+  doc.setFontSize(8);
+  doc.setTextColor(...MG);
+  doc.text('RO TOTAL', sumX, y);
+  y += getLineHeight(9);
+
+  rows.forEach(([label, value, color]) => {
+    doc.setFont('helvetica', 'normal');
+    doc.setFontSize(9);
+    doc.setTextColor(...(color || DG));
+    doc.text(label, sumX, y);
+    doc.setTextColor(...BL);
+    doc.text(value, sumRight, y, { align: 'right' });
+    y += getLineHeight(9);
+  });
+
+  doc.setDrawColor(180, 180, 180);
+  doc.line(sumX, y, sumRight, y);
+  y += getLineHeight(10);
+  doc.setFont('helvetica', 'bold');
+  doc.setFontSize(11);
+  doc.setTextColor(...BL);
+  doc.text('TOTAL DUE', sumX, y);
+  doc.text(formatCurrency(totals.total), sumRight, y, { align: 'right' });
+
+  // ── Footer on every page ──
+  const totalPages = doc.getNumberOfPages();
+  for (let i = 1; i <= totalPages; i++) {
+    drawFooter(doc, i, totalPages, settings);
+  }
+
+  return doc.output('blob');
+}
+
+export async function downloadROPDF(ro: RepairOrder, settings: ShopSettings): Promise<void> {
+  const blob = await generateROPDF(ro, settings);
+  const sn = (ro.customerName || 'Customer').replace(/[^a-zA-Z0-9_-]/g, '_').replace(/_+/g, '_').replace(/^_|_$/g, '');
+  const sr = (ro.roNumber || 'NRO').replace(/[^a-zA-Z0-9_-]/g, '');
+  const ds = formatDate(ro.writeupTime || ro.created).replace(/,/g, '').replace(/\s+/g, '_');
+  const fn = `RO_${sr}_${sn}_${ds}.pdf`;
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = fn;
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+  URL.revokeObjectURL(url);
+}
+
+export async function printROPDF(ro: RepairOrder, settings: ShopSettings): Promise<void> {
+  const blob = await generateROPDF(ro, settings);
+  const url = URL.createObjectURL(blob);
+  const win = window.open(url, '_blank');
+  if (win) win.addEventListener('load', () => win.print());
+  else window.location.href = url;
+}
diff --git a/src/lib/routePreload.ts b/src/lib/routePreload.ts
new file mode 100644
index 0000000..c2e3539
--- /dev/null
+++ b/src/lib/routePreload.ts
@@ -0,0 +1,23 @@
+export const loadSettingsPage = () => import('../pages/Settings');
+
+export function preloadSettingsPage() {
+  void loadSettingsPage();
+}
+
+export const loadRODetailModal = () => import('../pages/RODetailModal');
+
+export function preloadRODetailModal() {
+  void loadRODetailModal();
+}
+
+export const loadPrivacyPage = () => import('../pages/Privacy');
+
+export function preloadPrivacyPage() {
+  void loadPrivacyPage();
+}
+
+export const loadTimeCards = () => import('../pages/advisor/TimeCards');
+
+export function preloadTimeCards() {
+  void loadTimeCards();
+}
diff --git a/src/lib/settings.ts b/src/lib/settings.ts
new file mode 100644
index 0000000..7cee76c
--- /dev/null
+++ b/src/lib/settings.ts
@@ -0,0 +1,303 @@
+// Shared ShopSettings loader — single source of truth for default values
+// and localStorage hydration. Previously duplicated in QuoteGenerator.tsx
+// (loadSettings) and Settings.tsx (loadLocalSettings); RepairOrders.tsx had
+// no settings loader at all and used hardcoded tax/shop-charge rates.
+
+import { pb } from './pocketbase';
+import type { QuotePdfAppearance, ShopSettings } from '../types';
+import { logError } from './userMessages';
+
+export const DEFAULT_QUOTE_PDF_APPEARANCE: QuotePdfAppearance = {
+  showBusinessAddress: true,
+  showBusinessPhone: true,
+  showCustomerInfo: true,
+  showVin: true,
+  showMileage: true,
+  showRoNumber: true,
+  showQuoteDate: true,
+  showHeaderMessage: true,
+  showFooterMessage: true,
+  showQuoteFooterNote: true,
+  showPaymentTerms: true,
+  showServiceDecisionBadges: true,
+  showAuthorizationLine: true,
+  showServicePrices: true,
+  showTotalsSummary: true,
+  showShopChargeLine: true,
+  showDiscountLine: true,
+  showTaxLine: true,
+  showPriority: true,
+  showPriorityReason: true,
+  showRecommendation: true,
+  showServiceDescription: true,
+  showPartsStatus: true,
+  showAftermarketOptions: true,
+  showDeclinedServices: true,
+  showPendingRecommendations: true,
+  serviceSeparators: true,
+  headerLayout: 'boxed',
+  logoAlignment: 'left',
+  logoWidth: 40,
+  logoHeight: 20,
+  priceDisplay: 'right',
+  sectionOrder: 'approved_first',
+  serviceSpacing: 'normal',
+  sectionSpacing: 'normal',
+  colors: {
+    sectionHeader: '#16a34a',
+    serviceTitle: '#121212',
+    description: '#505050',
+    recommendation: '#404040',
+    headerBackground: '#f8f8f8',
+    separator: '#dcdcdc',
+    totalsBackground: '#fafafa',
+    footer: '#121212',
+    approvedBadge: '#16a34a',
+    declinedBadge: '#dc2626',
+    recommendationsSection: '#2563eb',
+  },
+  sectionHeader: { font: 'helvetica', size: 12, weight: 'bold' },
+  serviceTitle: { font: 'helvetica', size: 11, weight: 'bold' },
+  serviceDescription: { font: 'helvetica', size: 9, weight: 'normal' },
+  recommendation: { font: 'helvetica', size: 9, weight: 'normal' },
+  recommendationTransform: 'uppercase',
+  priority: { font: 'helvetica', size: 9, weight: 'bold' },
+  authorization: { font: 'helvetica', size: 7, weight: 'normal' },
+  totals: { font: 'helvetica', size: 9, weight: 'normal' },
+  footer: { font: 'helvetica', size: 9, weight: 'normal' },
+  labels: {
+    approvedSection: 'SERVICES APPROVED',
+    recommendationsSection: 'ADDITIONAL RECOMMENDATIONS',
+    declinedSection: 'POSTPONED SERVICES',
+    customerApproved: 'CUSTOMER APPROVED',
+    customerDeclined: 'CUSTOMER DECLINED',
+    priorityReason: 'Reason:',
+    subtotal: 'Subtotal',
+    shopCharge: 'Shop charge',
+    discount: 'Discount',
+    total: 'TOTAL',
+    paymentTerms: 'Payment Terms:',
+    authorizedInPerson: 'Authorized in person',
+    authorizedByText: 'Authorized by text',
+    authorizedByCall: 'Authorized by call',
+    authorizedOnline: 'Authorized online',
+    authorizedWithSignature: 'Authorized with signature',
+    authorizedByEmail: 'Authorized via email',
+    authorizedTotal: 'Authorized Total',
+    addOnTotal: 'Add-On Total If Approved',
+    allWorkSubtotal: 'All Work Subtotal',
+    totalIfAllApproved: 'TOTAL IF ALL WORK APPROVED',
+  },
+};
+
+export const DEFAULT_SETTINGS: ShopSettings = {
+  businessType: 'shop',
+  businessName: '',
+  businessAddress: '',
+  businessPhone: '',
+  serviceAdvisor: '',
+  taxRate: 0,
+  taxLabel: 'Tax',
+  shopChargeRate: 3,
+  shopChargeCap: 69.95,
+  shopChargeExplanation: 'Shop Charge covers consumable supplies such as shop rags, cleaning solvents, lubricants, and other miscellaneous materials used during service.',
+  headerMessage: 'Hi {customerName}, here is the explanation of the services and repairs that your technician has recommended for your {vehicleInfo}.',
+  footerMessage: 'Thank you for choosing our shop for your automotive care!',
+  quoteFooterNote: 'This quote is valid for {days} days from the date above.',
+  logoUrl: '',
+  showLogoOnPdf: true,
+  quoteExpiryDays: 30,
+  quoteNumberPrefix: '',
+  pdfAccentColor: '#16a34a',
+  pdfStyle: 'professional',
+  businessHours: '',
+  defaultLaborRate: 95,
+  paymentTerms: 'Due on Receipt',
+  serviceLocationFieldsEnabled: false,
+  defaultTravelFee: 0,
+  travelFeeExplanation: 'Travel fee covers the cost of bringing tools and equipment to your location.',
+  defaultPricingMode: 'full',
+  showAdvisorOnQuote: true,
+  showTechnicianOnQuote: false,
+  defaultTechnician: '',
+  quotePdfAppearance: DEFAULT_QUOTE_PDF_APPEARANCE,
+};
+
+const STORAGE_KEY = 'spq-settings';
+
+export function getRoleLabel(settings: Pick<ShopSettings, 'businessType'>): string {
+  return settings.businessType === 'advisor' ? 'Service Advisor' : 'Technician';
+}
+
+export function getAddressLabel(settings: Pick<ShopSettings, 'businessType'>): string {
+  return settings.businessType === 'mobile' || settings.businessType === 'home' ? 'Service Area' : 'Business Address';
+}
+
+export function getProviderLabel(settings: Pick<ShopSettings, 'businessType'>): string {
+  return settings.businessType === 'mobile' || settings.businessType === 'home' ? 'MOBILE SERVICE PROVIDER' : 'SERVICE PROVIDER';
+}
+
+export function getCustomerTypeLabels(settings: Pick<ShopSettings, 'businessType'>): { primary: string; secondary: string; groupLabel: string } {
+  if (settings.businessType === 'mobile' || settings.businessType === 'home') {
+    return {
+      primary: 'Scheduled Visit',
+      secondary: 'Customer Waiting',
+      groupLabel: 'Visit Type',
+    };
+  }
+
+  return {
+    primary: 'Drop-Off',
+    secondary: 'Waiter',
+    groupLabel: 'Customer Type',
+  };
+}
+
+export function showServiceLocationFields(settings: Pick<ShopSettings, 'businessType' | 'serviceLocationFieldsEnabled'>): boolean {
+  return settings.businessType === 'mobile' || settings.businessType === 'home' || settings.serviceLocationFieldsEnabled;
+}
+
+function mergeSettings(raw: unknown): ShopSettings {
+  const incoming = typeof raw === 'object' && raw ? raw as Partial<ShopSettings> : {};
+  const incomingAppearance = typeof incoming.quotePdfAppearance === 'object' && incoming.quotePdfAppearance
+    ? incoming.quotePdfAppearance as Partial<QuotePdfAppearance>
+    : {};
+  return {
+    ...DEFAULT_SETTINGS,
+    ...incoming,
+    quotePdfAppearance: {
+      ...DEFAULT_QUOTE_PDF_APPEARANCE,
+      ...incomingAppearance,
+      sectionHeader: { ...DEFAULT_QUOTE_PDF_APPEARANCE.sectionHeader, ...incomingAppearance.sectionHeader },
+      serviceTitle: { ...DEFAULT_QUOTE_PDF_APPEARANCE.serviceTitle, ...incomingAppearance.serviceTitle },
+      serviceDescription: { ...DEFAULT_QUOTE_PDF_APPEARANCE.serviceDescription, ...incomingAppearance.serviceDescription },
+      recommendation: { ...DEFAULT_QUOTE_PDF_APPEARANCE.recommendation, ...incomingAppearance.recommendation },
+      priority: { ...DEFAULT_QUOTE_PDF_APPEARANCE.priority, ...incomingAppearance.priority },
+      authorization: { ...DEFAULT_QUOTE_PDF_APPEARANCE.authorization, ...incomingAppearance.authorization },
+      totals: { ...DEFAULT_QUOTE_PDF_APPEARANCE.totals, ...incomingAppearance.totals },
+      footer: { ...DEFAULT_QUOTE_PDF_APPEARANCE.footer, ...incomingAppearance.footer },
+      colors: { ...DEFAULT_QUOTE_PDF_APPEARANCE.colors, ...incomingAppearance.colors },
+      labels: { ...DEFAULT_QUOTE_PDF_APPEARANCE.labels, ...incomingAppearance.labels },
+    },
+  };
+}
+
+export function loadSettings(): ShopSettings {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (raw) return mergeSettings(JSON.parse(raw));
+  } catch { /* ignore corrupt localStorage */ }
+  return { ...DEFAULT_SETTINGS };
+}
+
+export function saveSettings(s: ShopSettings): void {
+  localStorage.setItem(STORAGE_KEY, JSON.stringify(s));
+}
+
+export function isSetupComplete(settings: ShopSettings): boolean {
+  return Boolean(
+    settings.businessName.trim() &&
+    settings.businessPhone.trim() &&
+    settings.serviceAdvisor.trim() &&
+    Number(settings.defaultLaborRate) > 0
+  );
+}
+
+async function ensureSettingRecord(userId: string) {
+  const records = await pb.collection('settings').getFullList({ filter: `userId="${userId}"` });
+  if (records.length > 0) return records[0];
+  return await pb.collection('settings').create({ userId, name: 'businessSettings', data: DEFAULT_SETTINGS });
+}
+
+/**
+ * If the PB settings record has a `logo` file field, fetch the image
+ * and convert to a base64 data URL for use in img src and jsPDF addImage.
+ * Returns null if no logo file exists or on error.
+ */
+async function pbLogoToBase64(record: Record<string, unknown>): Promise<string | null> {
+  const logoFilename = record.logo;
+  if (!logoFilename || typeof logoFilename !== 'string') return null;
+  try {
+    const id = String(record.id);
+    const collectionId = String(record.collectionId);
+    const url = pb.files.getURL({ id, collectionId } as never, 'logo');
+    const res = await fetch(url);
+    if (!res.ok) return null;
+    const blob = await res.blob();
+    return new Promise((resolve) => {
+      const reader = new FileReader();
+      reader.onload = () => resolve(reader.result as string);
+      reader.onerror = () => resolve(null);
+      reader.readAsDataURL(blob);
+    });
+  } catch {
+    return null;
+  }
+}
+
+export async function loadSettingsForUser(userId?: string): Promise<ShopSettings> {
+  const local = loadSettings();
+  if (!userId) return local;
+
+  try {
+    const records = await pb.collection('settings').getFullList({ filter: `userId="${userId}"` });
+    if (records.length === 0) return local;
+
+    const record = records[0] as Record<string, unknown>;
+    const cloud = mergeSettings(record.data);
+
+    // If PB has a logo file, fetch and convert to base64 for local state.
+    // This ensures PDF generation (jsPDF addImage) continues to work unchanged.
+    const logoDataUrl = await pbLogoToBase64(record);
+    if (logoDataUrl) {
+      cloud.logoUrl = logoDataUrl;
+    }
+
+    saveSettings(cloud);
+    return cloud;
+  } catch (err) {
+    logError('Failed to load settings for user', err);
+    return local;
+  }
+}
+
+export async function saveSettingsForUser(userId: string | undefined, settings: ShopSettings): Promise<void> {
+  saveSettings(settings);
+  if (!userId) return;
+
+  try {
+    const record = await ensureSettingRecord(userId);
+    await pb.collection('settings').update(record.id, { data: settings });
+  } catch (err) {
+    logError('Failed to save settings for user', err);
+    throw err;
+  }
+}
+
+/**
+ * Upload a logo image file to the PB settings record.
+ * Returns the base64 data URL for local state (Zustand / localStorage).
+ */
+export async function uploadLogoFile(userId: string, file: File): Promise<string> {
+  const record = await ensureSettingRecord(userId);
+  const formData = new FormData();
+  formData.append('logo', file);
+  await pb.collection('settings').update(record.id, formData);
+
+  // Convert the original File to a base64 data URL for local state.
+  // PDF generation (jsPDF addImage) expects data URLs.
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => resolve(reader.result as string);
+    reader.onerror = reject;
+    reader.readAsDataURL(file);
+  });
+}
+
+/**
+ * Remove the logo file from the PB settings record.
+ */
+export async function removeLogoFile(userId: string): Promise<void> {
+  const record = await ensureSettingRecord(userId);
+  await pb.collection('settings').update(record.id, { logo: null });
+}
diff --git a/src/lib/status.ts b/src/lib/status.ts
new file mode 100644
index 0000000..7694c3a
--- /dev/null
+++ b/src/lib/status.ts
@@ -0,0 +1,131 @@
+// Shared status metadata for Repair Orders and their service lines.
+// Previously page-local in RepairOrders.tsx — pulled here so other pages
+// (Invoices, Customers, FinancialDashboard) can share the same labels and
+// colors instead of drifting apart.
+
+import type { RepairOrder, ROService, ServiceSubStatus } from '../types';
+import type { ShopSettings } from '../types';
+
+export const STATUS_CONFIG: Record<string, { label: string; colors: string }> = {
+  active: {
+    label: 'Active',
+    colors: 'bg-blue-100 text-blue-800 dark:bg-blue-900/40 dark:text-blue-300',
+  },
+  in_progress: {
+    label: 'In Progress',
+    colors:
+      'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/40 dark:text-yellow-300',
+  },
+  waiting_parts: {
+    label: 'Waiting Parts',
+    colors:
+      'bg-orange-100 text-orange-800 dark:bg-orange-900/40 dark:text-orange-300',
+  },
+  waiting_pickup: {
+    label: 'Waiting Pick-up',
+    colors:
+      'bg-teal-100 text-teal-800 dark:bg-teal-900/40 dark:text-teal-300',
+  },
+  completed: {
+    label: 'Completed',
+    colors:
+      'bg-green-100 text-green-800 dark:bg-green-900/40 dark:text-green-300',
+  },
+  final_close: {
+    label: 'Final Close',
+    colors: 'bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300',
+  },
+  delivered: {
+    label: 'Final Close',
+    colors: 'bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300',
+  },
+  // Soft-voided ROs (voided flag in the financial blob). Hidden from the
+  // default tabs; reached via the "Show voided" filter toggle on the list
+  // page. We deliberately don't extend the union type in types.ts to keep
+  // other pages (Invoices, Customers) that switch on `status` exhaustive.
+};
+
+export const SERVICE_STATUS_CONFIG: Record<
+  string,
+  { label: string; colors: string }
+> = {
+  pending: {
+    label: 'Pending',
+    colors: 'bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400',
+  },
+  in_progress: {
+    label: 'In Progress',
+    colors:
+      'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/40 dark:text-yellow-300',
+  },
+  completed: {
+    label: 'Completed',
+    colors:
+      'bg-green-100 text-green-800 dark:bg-green-900/40 dark:text-green-300',
+  },
+};
+
+export const SERVICE_SUB_STATUS_CONFIG: Record<
+  ServiceSubStatus,
+  { label: string; colors: string; order: number }
+> = {
+  '': {
+    label: 'Not started',
+    colors: 'bg-gray-100 text-gray-500 dark:bg-gray-800 dark:text-gray-400',
+    order: 0,
+  },
+  parts_ordered: {
+    label: 'Parts Ordered',
+    colors:
+      'bg-orange-100 text-orange-800 dark:bg-orange-900/40 dark:text-orange-300',
+    order: 1,
+  },
+  in_bay: {
+    label: 'In Bay',
+    colors:
+      'bg-blue-100 text-blue-800 dark:bg-blue-900/40 dark:text-blue-300',
+    order: 2,
+  },
+  qc_passed: {
+    label: 'QC Passed',
+    colors:
+      'bg-green-100 text-green-800 dark:bg-green-900/40 dark:text-green-300',
+    order: 3,
+  },
+};
+
+export function statusLabel(status: string): string {
+  return STATUS_CONFIG[status]?.label ?? status;
+}
+
+export function getStatusConfig(settings: Pick<ShopSettings, 'businessType'>): Record<string, { label: string; colors: string }> {
+  if (settings.businessType === 'mobile' || settings.businessType === 'home') {
+    return {
+      ...STATUS_CONFIG,
+      waiting_pickup: {
+        ...STATUS_CONFIG.waiting_pickup,
+        label: 'Ready for Visit',
+      },
+    };
+  }
+
+  return STATUS_CONFIG;
+}
+
+export function statusLabelForBusiness(status: string, settings: Pick<ShopSettings, 'businessType'>): string {
+  return getStatusConfig(settings)[status]?.label ?? status;
+}
+
+/* ── RO progress helpers (visual progress bar per row) ────────────────────── */
+
+export function roProgress(ro: RepairOrder): {
+  done: number;
+  total: number;
+  fraction: number;
+} {
+  const svcs: ROService[] = Array.isArray(ro.services) ? ro.services : [];
+  const total = svcs.length;
+  const done = svcs.filter((s) => s.status === 'completed').length;
+  const fraction = total > 0 ? done / total : 0;
+  return { done, total, fraction };
+}
diff --git a/src/lib/technicianData.ts b/src/lib/technicianData.ts
new file mode 100644
index 0000000..355f755
--- /dev/null
+++ b/src/lib/technicianData.ts
@@ -0,0 +1,499 @@
+import { pb } from './pocketbase';
+import { logError } from './userMessages';
+import type { ClockEntry, ROService } from '../types';
+import type { PagedResult } from '../hooks/usePagedList';
+
+export class StaleWriteError extends Error {
+  constructor(message = 'This record was just edited by someone else. Reload and try again.') {
+    super(message);
+    this.name = 'StaleWriteError';
+  }
+}
+
+export type TechnicianSubStatus = 'parts_ordered' | 'in_bay' | 'qc_passed' | '';
+
+export interface SanitizedService {
+  id: string;
+  name: string;
+  description: string;
+  status: 'pending' | 'in_progress' | 'completed';
+  subStatus?: TechnicianSubStatus;
+  technicianNotes?: string;
+}
+
+export interface AdvisorRequest {
+  id: string;
+  type: 'parts' | 'help' | 'info';
+  message: string;
+  status: 'pending' | 'resolved';
+  createdAt: string;
+}
+
+export interface TechnicianAssignment {
+  id: string;
+  shopUserId: string;
+  technicianUserId: string;
+  repairOrderId: string;
+  roNumber: string;
+  vehicleInfo: string;
+  vin: string;
+  mileage: string;
+  serviceLocation: string;
+  status: 'pending' | 'in_progress' | 'waiting_parts' | 'completed';
+  services: SanitizedService[];
+  internalNotes: string;
+  clockEntries: ClockEntry[];
+  inspectionChecklist: any[];
+  advisorRequests: AdvisorRequest[];
+  created: string;
+  updated: string;
+}
+
+function parseJsonField<T>(item: any, key: string, fallback: T): T {
+  const raw = item[key];
+  if (!raw) return fallback;
+  if (typeof raw === 'string') {
+    try { return JSON.parse(raw) as T; } catch (err) { logError(`parseJsonField(${key}) failed`, err); return fallback; }
+  }
+  if (typeof raw === 'object') return raw as T;
+  return fallback;
+}
+
+export function parseRepairOrderServices(raw: unknown): ROService[] {
+  if (Array.isArray(raw)) return raw as ROService[];
+  if (typeof raw === 'string' && raw.trim()) {
+    try {
+      const parsed = JSON.parse(raw) as unknown;
+      return Array.isArray(parsed) ? parsed as ROService[] : [];
+    } catch (err) {
+      logError('parseRepairOrderServices JSON parse failed', err);
+      return [];
+    }
+  }
+  return [];
+}
+
+function sanitizeServiceForTechnician(
+  service: Pick<ROService, 'id' | 'name' | 'description' | 'status'> & { technicianNotes?: string },
+  existing?: SanitizedService,
+): SanitizedService {
+  return {
+    id: service.id,
+    name: service.name || existing?.name || '',
+    description: service.description || existing?.description || '',
+    status: existing?.status || service.status || 'pending',
+    subStatus: existing?.subStatus || '',
+    technicianNotes: existing?.technicianNotes || service.technicianNotes || '',
+  };
+}
+
+export function normalizeAssignment(item: any): TechnicianAssignment {
+  return {
+    id: item.id ?? '',
+    shopUserId: item.shopUserId ?? '',
+    technicianUserId: item.technicianUserId ?? '',
+    repairOrderId: item.repairOrderId ?? '',
+    roNumber: item.roNumber ?? '',
+    vehicleInfo: item.vehicleInfo ?? '',
+    vin: item.vin ?? '',
+    mileage: item.mileage ?? '',
+    serviceLocation: item.serviceLocation ?? '',
+    status: item.status ?? 'pending',
+    services: parseJsonField<SanitizedService[]>(item, 'services', []),
+    internalNotes: (() => {
+      const n = item.internalNotes;
+      if (!n) return '';
+      if (typeof n === 'string') return n;
+      if (typeof n === 'object') return JSON.stringify(n);
+      return '';
+    })(),
+    clockEntries: parseJsonField<ClockEntry[]>(item, 'clockEntries', []),
+    inspectionChecklist: parseJsonField<any[]>(item, 'inspectionChecklist', []),
+    advisorRequests: parseJsonField<AdvisorRequest[]>(item, 'advisorRequests', []),
+    created: item.created ?? '',
+    updated: item.updated ?? '',
+  };
+}
+
+/**
+ * Fetch-modify-write with optimistic concurrency.
+ * Fetches the current assignment, calls `mutator` to produce a patch,
+ * attaches `__expectedUpdated` for the M21 PB hook, and attempts the update.
+ * Throws `StaleWriteError` on 409 (optimistic lock conflict).
+ * Returns the fresh record after a successful update.
+ */
+export async function mutateAssignment<T = TechnicianAssignment>(
+  assignmentId: string,
+  mutator: (current: T) => Record<string, unknown>,
+): Promise<T> {
+  const raw = await pb.collection('technicianAssignments').getOne(assignmentId);
+  const current = normalizeAssignment(raw) as unknown as T;
+  const patch = mutator(current);
+  patch.__expectedUpdated = raw.updated;
+
+  try {
+    const updated = await pb.collection('technicianAssignments').update(assignmentId, patch);
+    return normalizeAssignment(updated) as unknown as T;
+  } catch (err: any) {
+    const status = err?.status ?? err?.originalError?.status;
+    const msg = (err?.message || '').toLowerCase();
+    if (status === 409 || msg.includes('optimistic') || msg.includes('lock') || msg.includes('modified by another user')) {
+      throw new StaleWriteError();
+    }
+    throw err;
+  }
+}
+
+export async function fetchTechnicianAssignments(
+  userId: string,
+  page = 1,
+  perPage = 50,
+): Promise<PagedResult<TechnicianAssignment>> {
+  const result = await pb.collection('technicianAssignments').getList(page, perPage, {
+    filter: `technicianUserId = '${userId}'`,
+    sort: '-id',
+  });
+  return {
+    items: (result.items as any[]).map(normalizeAssignment),
+    page: result.page,
+    perPage: result.perPage,
+    totalItems: result.totalItems,
+    totalPages: result.totalPages,
+  };
+}
+
+export async function fetchAllTechnicianAssignments(userId: string): Promise<TechnicianAssignment[]> {
+  const all: TechnicianAssignment[] = [];
+  let page = 1;
+  const perPage = 200;
+  while (true) {
+    const result = await pb.collection('technicianAssignments').getList(page, perPage, {
+      filter: `technicianUserId = '${userId}'`,
+      sort: '-id',
+    });
+    all.push(...(result.items as any[]).map(normalizeAssignment));
+    if (result.page >= result.totalPages) break;
+    page++;
+  }
+  return all;
+}
+
+export async function fetchTechnicianAssignment(id: string): Promise<TechnicianAssignment | null> {
+  try {
+    const rec = await pb.collection('technicianAssignments').getOne(id);
+    return normalizeAssignment(rec);
+  } catch {
+    return null;
+  }
+}
+
+export async function updateAssignmentStatus(
+  assignmentId: string,
+  status: TechnicianAssignment['status'],
+): Promise<void> {
+  await pb.collection('technicianAssignments').update(assignmentId, { status });
+}
+
+export async function updateServiceStatus(
+  assignmentId: string,
+  serviceId: string,
+  status: SanitizedService['status'],
+): Promise<void> {
+  await mutateAssignment(assignmentId, (current) => {
+    const services = current.services.map((s) =>
+      s.id === serviceId ? { ...s, status } : s,
+    );
+    return { services: JSON.stringify(services) };
+  });
+}
+
+export async function updateServiceSubStatus(
+  assignmentId: string,
+  serviceId: string,
+  subStatus: TechnicianSubStatus,
+): Promise<void> {
+  await mutateAssignment(assignmentId, (current) => {
+    const services = current.services.map((s) =>
+      s.id === serviceId ? { ...s, subStatus } : s,
+    );
+    return { services: JSON.stringify(services) };
+  });
+}
+
+export async function updateServiceNotes(
+  assignmentId: string,
+  serviceId: string,
+  technicianNotes: string,
+): Promise<void> {
+  await mutateAssignment(assignmentId, (current) => {
+    const services = current.services.map((s) =>
+      s.id === serviceId ? { ...s, technicianNotes } : s,
+    );
+    return { services: JSON.stringify(services) };
+  });
+}
+
+export async function submitAdvisorRequest(
+  assignmentId: string,
+  request: Omit<AdvisorRequest, 'id' | 'status' | 'createdAt'>,
+): Promise<void> {
+  await mutateAssignment(assignmentId, (current) => {
+    const newRequest: AdvisorRequest = {
+      id: `${Date.now()}-${Math.random().toString(36).slice(2, 9)}`,
+      ...request,
+      status: 'pending',
+      createdAt: new Date().toISOString(),
+    };
+    const requests = [...current.advisorRequests, newRequest];
+    return { advisorRequests: JSON.stringify(requests) };
+  });
+}
+
+function findRunningClock(entries: ClockEntry[]): ClockEntry | undefined {
+  return entries.find((e) => !e.end);
+}
+
+export function clockElapsedMinutes(entries: ClockEntry[]): number {
+  const now = Date.now();
+  return entries.reduce((sum, e) => {
+    if (!e.start) return sum;
+    const end = e.end ? new Date(e.end).getTime() : now;
+    const start = new Date(e.start).getTime();
+    const mins = Math.max(0, Math.round((end - start) / 60000));
+    return sum + (e.minutes ?? mins);
+  }, 0);
+}
+
+export async function clockStart(assignmentId: string): Promise<void> {
+  const assignment = await fetchTechnicianAssignment(assignmentId);
+  if (!assignment) throw new Error('Assignment not found');
+  if (findRunningClock(assignment.clockEntries)) return;
+
+  const newEntry: ClockEntry = { start: new Date().toISOString() };
+  const entries: ClockEntry[] = [...assignment.clockEntries, newEntry];
+  await pb.collection('technicianAssignments').update(assignmentId, {
+    clockEntries: JSON.stringify(entries),
+    __expectedUpdated: assignment.updated,
+  });
+}
+
+export interface AvailableRepairOrder {
+  id: string;
+  roNumber: string;
+  vehicleInfo: string;
+  vin: string;
+  mileage: string;
+  status: string;
+  serviceCount: number;
+}
+
+export async function fetchAvailableRepairOrders(
+  shopUserId: string,
+  page = 1,
+  perPage = 50,
+): Promise<PagedResult<AvailableRepairOrder>> {
+  const result = await pb.collection('repairOrders').getList(page, perPage, {
+    filter: `userId = '${shopUserId}' && status != 'completed' && status != 'final_close' && status != 'delivered'`,
+    sort: '-id',
+  });
+  return {
+    items: (result.items as any[]).map((r) => {
+      const services = parseRepairOrderServices(r.services);
+      return {
+        id: r.id ?? '',
+        roNumber: r.roNumber ?? '',
+        vehicleInfo: r.vehicleInfo ?? '',
+        vin: r.vin ?? '',
+        mileage: r.mileage ?? '',
+        status: r.status ?? '',
+        serviceCount: services.length,
+      };
+    }),
+    page: result.page,
+    perPage: result.perPage,
+    totalItems: result.totalItems,
+    totalPages: result.totalPages,
+  };
+}
+
+export async function fetchAllAvailableRepairOrders(shopUserId: string): Promise<AvailableRepairOrder[]> {
+  const all: AvailableRepairOrder[] = [];
+  let page = 1;
+  const perPage = 200;
+  while (true) {
+    const result = await pb.collection('repairOrders').getList(page, perPage, {
+      filter: `userId = '${shopUserId}' && status != 'completed' && status != 'final_close' && status != 'delivered'`,
+      sort: '-id',
+    });
+    for (const r of result.items as any[]) {
+      const services = parseRepairOrderServices(r.services);
+      all.push({
+        id: r.id ?? '',
+        roNumber: r.roNumber ?? '',
+        vehicleInfo: r.vehicleInfo ?? '',
+        vin: r.vin ?? '',
+        mileage: r.mileage ?? '',
+        status: r.status ?? '',
+        serviceCount: services.length,
+      });
+    }
+    if (result.page >= result.totalPages) break;
+    page++;
+  }
+  return all;
+}
+
+export interface TechnicianUser {
+  id: string;
+  email: string;
+  displayName: string;
+  role: string;
+}
+
+export async function fetchTechnicianUsers(shopUserId: string): Promise<TechnicianUser[]> {
+  try {
+    const records = await pb.collection('users').getFullList({
+      filter: `role = 'technician' && shopUserId = '${shopUserId}'`,
+      sort: 'displayName',
+      batch: 200,
+    });
+    return (records as any[]).map((u) => ({
+      id: u.id ?? '',
+      email: u.email ?? '',
+      displayName: u.displayName ?? '',
+      role: u.role ?? 'technician',
+    }));
+  } catch (err) {
+    logError('[technicianData] fetchTechnicianUsers failed', err);
+    return [];
+  }
+}
+
+export async function fetchAssignmentsForRO(repairOrderId: string): Promise<TechnicianAssignment[]> {
+  try {
+    const records = await pb.collection('technicianAssignments').getFullList({
+      filter: `repairOrderId = '${repairOrderId}'`,
+      sort: '-id',
+      batch: 50,
+    });
+    return (records as any[]).map(normalizeAssignment);
+  } catch (err) {
+    logError('[technicianData] fetchAssignmentsForRO failed', err);
+    return [];
+  }
+}
+
+export async function fetchAssignmentsForShop(
+  shopUserId: string,
+  page = 1,
+  perPage = 50,
+): Promise<PagedResult<TechnicianAssignment>> {
+  const result = await pb.collection('technicianAssignments').getList(page, perPage, {
+    filter: `shopUserId = '${shopUserId}'`,
+    sort: '-id',
+  });
+  return {
+    items: (result.items as any[]).map(normalizeAssignment),
+    page: result.page,
+    perPage: result.perPage,
+    totalItems: result.totalItems,
+    totalPages: result.totalPages,
+  };
+}
+
+export async function fetchAllAssignmentsForShop(shopUserId: string): Promise<TechnicianAssignment[]> {
+  const all: TechnicianAssignment[] = [];
+  let page = 1;
+  const perPage = 200;
+  while (true) {
+    const result = await pb.collection('technicianAssignments').getList(page, perPage, {
+      filter: `shopUserId = '${shopUserId}'`,
+      sort: '-id',
+    });
+    all.push(...(result.items as any[]).map(normalizeAssignment));
+    if (result.page >= result.totalPages) break;
+    page++;
+  }
+  return all;
+}
+
+export function sanitizeROForAssignment(
+  ro: { id: string; roNumber: string; vehicleInfo: string; vin: string; mileage: string; serviceLocation?: string; services: { id: string; name: string; description: string; status: string; technicianNotes?: string }[] },
+  selectedServiceIds: string[],
+  shopUserId: string,
+  technicianUserId: string,
+): Omit<TechnicianAssignment, 'id' | 'created' | 'updated'> {
+  const selectedServices = ro.services.filter((s) => selectedServiceIds.includes(s.id));
+  const sanitizedServices: SanitizedService[] = selectedServices.map((s) => sanitizeServiceForTechnician({
+    ...s,
+    status: 'pending' as ROService['status'],
+  }));
+
+  return {
+    shopUserId,
+    technicianUserId,
+    repairOrderId: ro.id,
+    roNumber: ro.roNumber || '',
+    vehicleInfo: ro.vehicleInfo || '',
+    vin: ro.vin || '',
+    mileage: ro.mileage || '',
+    serviceLocation: ro.serviceLocation || '',
+    status: 'pending',
+    services: sanitizedServices,
+    internalNotes: '',
+    clockEntries: [],
+    inspectionChecklist: [],
+    advisorRequests: [],
+  };
+}
+
+export async function createTechnicianAssignment(
+  ro: { id: string; roNumber: string; vehicleInfo: string; vin: string; mileage: string; serviceLocation?: string; services: { id: string; name: string; description: string; status: string; technicianNotes?: string }[] },
+  technicianUserId: string,
+  selectedServiceIds: string[],
+  shopUserId: string,
+): Promise<TechnicianAssignment> {
+  const data = sanitizeROForAssignment(ro, selectedServiceIds, shopUserId, technicianUserId);
+  const rec = await pb.collection('technicianAssignments').create(data);
+  return normalizeAssignment(rec);
+}
+
+export async function syncAssignmentsForROServices(
+  repairOrderId: string,
+  services: ROService[],
+): Promise<void> {
+  const assignments = await fetchAssignmentsForRO(repairOrderId);
+  if (assignments.length === 0) return;
+
+  const source = services.filter((s) => s.id && s.name?.trim());
+  await Promise.all(assignments.map((assignment) => {
+    const existingById = new Map(assignment.services.map((s) => [s.id, s]));
+    const merged = source.map((service) => sanitizeServiceForTechnician(service, existingById.get(service.id)));
+    return pb.collection('technicianAssignments').update(assignment.id, {
+      roNumber: assignment.roNumber,
+      services: JSON.stringify(merged),
+    });
+  }));
+}
+
+export async function clockStop(assignmentId: string): Promise<number> {
+  const assignment = await fetchTechnicianAssignment(assignmentId);
+  if (!assignment) throw new Error('Assignment not found');
+
+  const entries = [...assignment.clockEntries];
+  const idx = entries.findIndex((e) => !e.end);
+  if (idx === -1) return 0;
+
+  const end = new Date().toISOString();
+  const mins = Math.max(
+    0,
+    Math.round((new Date(end).getTime() - new Date(entries[idx].start!).getTime()) / 60000),
+  );
+  entries[idx] = { ...entries[idx], end, minutes: mins };
+
+  await pb.collection('technicianAssignments').update(assignmentId, {
+    clockEntries: JSON.stringify(entries),
+    __expectedUpdated: assignment.updated,
+  });
+  return mins;
+}
diff --git a/src/lib/technicianInvites.ts b/src/lib/technicianInvites.ts
new file mode 100644
index 0000000..7b5edb2
--- /dev/null
+++ b/src/lib/technicianInvites.ts
@@ -0,0 +1,131 @@
+import { pb } from './pocketbase';
+
+export type TechnicianInviteStatus = 'pending' | 'accepted' | 'revoked';
+
+export interface TechnicianInvite {
+  id: string;
+  shopUserId: string;
+  email: string;
+  displayName: string;
+  tokenHash: string;
+  status: TechnicianInviteStatus;
+  expiresAt: string;
+  acceptedByUserId: string;
+  acceptedAt: string;
+  created: string;
+  updated: string;
+}
+
+export interface CreatedTechnicianInvite {
+  invite: TechnicianInvite;
+  token: string;
+  inviteUrl: string;
+}
+
+function normalizeInvite(item: any): TechnicianInvite {
+  return {
+    id: item.id ?? '',
+    shopUserId: item.shopUserId ?? '',
+    email: item.email ?? '',
+    displayName: item.displayName ?? '',
+    tokenHash: item.tokenHash ?? '',
+    status: item.status ?? 'pending',
+    expiresAt: item.expiresAt ?? '',
+    acceptedByUserId: item.acceptedByUserId ?? '',
+    acceptedAt: item.acceptedAt ?? '',
+    created: item.created ?? '',
+    updated: item.updated ?? '',
+  };
+}
+
+function generateInviteToken(): string {
+  const bytes = new Uint8Array(32);
+  crypto.getRandomValues(bytes);
+  return Array.from(bytes, (b) => b.toString(16).padStart(2, '0')).join('');
+}
+
+export async function hashInviteToken(token: string): Promise<string> {
+  const data = new TextEncoder().encode(token);
+  const digest = await crypto.subtle.digest('SHA-256', data);
+  return Array.from(new Uint8Array(digest), (b) => b.toString(16).padStart(2, '0')).join('');
+}
+
+function inviteUrlForToken(token: string): string {
+  return `${window.location.origin}/invite/technician/${token}`;
+}
+
+export async function createTechnicianInvite(
+  shopUserId: string,
+  email: string,
+  displayName: string,
+): Promise<CreatedTechnicianInvite> {
+  const token = generateInviteToken();
+  const tokenHash = await hashInviteToken(token);
+  const expiresAt = new Date(Date.now() + 7 * 24 * 60 * 60 * 1000).toISOString();
+  const invite = await pb.collection('technicianInvites').create({
+    shopUserId,
+    email: email.trim().toLowerCase(),
+    displayName: displayName.trim(),
+    tokenHash,
+    status: 'pending',
+    expiresAt,
+  });
+
+  return {
+    invite: normalizeInvite(invite),
+    token,
+    inviteUrl: inviteUrlForToken(token),
+  };
+}
+
+export async function fetchTechnicianInvites(shopUserId: string): Promise<TechnicianInvite[]> {
+  try {
+    const records = await pb.collection('technicianInvites').getFullList({
+      filter: `shopUserId = '${shopUserId}'`,
+      sort: '-created',
+      batch: 200,
+    });
+    return (records as any[]).map(normalizeInvite);
+  } catch {
+    return [];
+  }
+}
+
+export async function fetchInviteByToken(token: string): Promise<TechnicianInvite | null> {
+  const tokenHash = await hashInviteToken(token);
+  try {
+    const data = await pb.send('/api/collections/technicianInvites/records', {
+      method: 'GET',
+      query: {
+        filter: `tokenHash = '${tokenHash}' && status = 'pending'`,
+        tokenHash,
+        perPage: 1,
+      },
+    });
+    const item = data?.items?.[0];
+    return item ? normalizeInvite(item) : null;
+  } catch {
+    return null;
+  }
+}
+
+export async function acceptTechnicianInvite(
+  invite: TechnicianInvite,
+  token: string,
+  acceptedByUserId: string,
+): Promise<void> {
+  const tokenHash = await hashInviteToken(token);
+  await pb.send(`/api/collections/technicianInvites/records/${invite.id}`, {
+    method: 'PATCH',
+    query: { tokenHash },
+    body: {
+      status: 'accepted',
+      acceptedByUserId,
+      acceptedAt: new Date().toISOString(),
+    },
+  });
+}
+
+export async function revokeTechnicianInvite(inviteId: string): Promise<void> {
+  await pb.collection('technicianInvites').update(inviteId, { status: 'revoked' });
+}
diff --git a/src/lib/totals.ts b/src/lib/totals.ts
new file mode 100644
index 0000000..cd0aede
--- /dev/null
+++ b/src/lib/totals.ts
@@ -0,0 +1,220 @@
+// Shared pricing logic for Quotes and Repair Orders.
+//
+// Previously the Quote and RO pages each had their own inline totals math with
+// different rules (Quote capped shop charge at $69.95, RO had no cap; Quote
+// applied discounts, RO didn't; RO used hardcoded tax/shop-charge rates
+// ignoring ShopSettings). This module is the single source of truth so the
+// two screens always agree.
+
+import type { QuoteService, ROService, ShopSettings } from '../types';
+
+export interface TotalsBreakdown {
+  laborTotal: number;     // RO only — 0 for quotes
+  partsTotal: number;     // RO only — 0 for quotes
+  subtotal: number;       // pre-discount, pre-shop-charge
+  discountAmount: number;
+  shopCharge: number;
+  taxableBase: number;    // subtotal - discount + shopCharge
+  tax: number;
+  total: number;
+}
+
+export interface QuoteTotalsInput {
+  services: QuoteService[];
+  discount: { value: number; type: 'dollar' | 'percent' };
+  settings: Pick<ShopSettings, 'taxRate' | 'shopChargeRate' | 'shopChargeCap'>;
+}
+
+// Determine which services count toward totals.
+// When all non-declined services have the same decision (all approved or all
+// pending), count all of them. When there's a mix of approved + pending,
+// count only the approved ones. Declined services are always excluded.
+export function billableServices(services: { customerDecision: string }[]): { customerDecision: string }[] {
+  const nonDeclined = services.filter((s) => s.customerDecision !== 'declined');
+  const hasApproved = nonDeclined.some((s) => s.customerDecision === 'approved');
+  const hasPending = nonDeclined.some((s) => s.customerDecision === 'pending');
+  return (hasApproved && hasPending)
+    ? nonDeclined.filter((s) => s.customerDecision === 'approved')
+    : nonDeclined;
+}
+
+// Quote totals — flat-price services, excludes only declined services
+// (pending + approved both count toward the quote shown to the customer).
+export function computeQuoteTotals(input: QuoteTotalsInput): TotalsBreakdown {
+  const { services, discount, settings } = input;
+  const billable = billableServices(services) as QuoteService[];
+
+  const subtotal = billable.reduce(
+    (sum, s) => sum + (parseFloat(String(s.price ?? 0)) || 0),
+    0
+  );
+
+  const discountAmount =
+    discount.value > 0
+      ? discount.type === 'percent'
+        ? subtotal * (discount.value / 100)
+        : Math.min(discount.value, subtotal)
+      : 0;
+
+  const afterDiscount = Math.max(0, subtotal - discountAmount);
+
+  const chargeable = billable
+    .filter((s) => s.applyShopCharge !== false)
+    .reduce((sum, s) => sum + (parseFloat(String(s.price ?? 0)) || 0), 0);
+
+  const cap = settings.shopChargeCap ?? 69.95;
+  const shopCharge = Math.min(
+    chargeable * ((settings.shopChargeRate || 0) / 100),
+    cap
+  );
+
+  const taxableBase = afterDiscount + shopCharge;
+  const tax = taxableBase * ((settings.taxRate || 0) / 100);
+  const total = taxableBase + tax;
+
+  return {
+    laborTotal: 0,
+    partsTotal: 0,
+    subtotal,
+    discountAmount,
+    shopCharge,
+    taxableBase,
+    tax,
+    total,
+  };
+}
+
+/**
+ * Compute separate totals breakdowns for approved vs pending services,
+ * plus a combined total. Discount is only applied to the combined figure.
+ * Useful when displaying quotes transferred from an RO (mix of approved + pending).
+ */
+export function computeSplitQuoteTotals(
+  services: QuoteService[],
+  discount: { value: number; type: 'dollar' | 'percent' },
+  settings: Pick<ShopSettings, 'taxRate' | 'shopChargeRate' | 'shopChargeCap'>,
+): {
+  approved: TotalsBreakdown;
+  pending: TotalsBreakdown;
+  combined: TotalsBreakdown;
+} {
+  const approvedServices = services.filter(s => s.customerDecision === 'approved');
+  const pendingServices = services.filter(s => s.customerDecision === 'pending');
+
+  // Compute base subtotals (no discount at the individual level)
+  const zeroDiscount = { value: 0, type: 'dollar' as const };
+  const approved = computeQuoteTotals({ services: approvedServices, discount: zeroDiscount, settings });
+  const pending = computeQuoteTotals({ services: pendingServices, discount: zeroDiscount, settings });
+
+  // Combined: compute on ALL non-declined services with discount.
+  // Can't reuse computeQuoteTotals here because it internally calls
+  // billableServices which excludes pending when there's a mixed set.
+  const allNonDeclined = services.filter(s => s.customerDecision !== 'declined') as QuoteService[];
+  const rawSubtotal = allNonDeclined.reduce((sum, s) => sum + (parseFloat(String(s.price ?? 0)) || 0), 0);
+  const discountAmount =
+    discount.value > 0
+      ? discount.type === 'percent'
+        ? rawSubtotal * (discount.value / 100)
+        : Math.min(discount.value, rawSubtotal)
+      : 0;
+  const afterDiscount = Math.max(0, rawSubtotal - discountAmount);
+  const chargeable = allNonDeclined
+    .filter((s) => s.applyShopCharge !== false)
+    .reduce((sum, s) => sum + (parseFloat(String(s.price ?? 0)) || 0), 0);
+  const cap = settings.shopChargeCap ?? 69.95;
+  const shopCharge = Math.min(chargeable * ((settings.shopChargeRate || 0) / 100), cap);
+  const taxableBase = afterDiscount + shopCharge;
+  const tax = taxableBase * ((settings.taxRate || 0) / 100);
+  const total = taxableBase + tax;
+
+  const combined: TotalsBreakdown = {
+    laborTotal: 0,
+    partsTotal: 0,
+    subtotal: rawSubtotal,
+    discountAmount,
+    shopCharge,
+    taxableBase,
+    tax,
+    total,
+  };
+
+  return { approved, pending, combined };
+}
+
+export interface ROTotalsInput {
+  services: ROService[];
+  discount?: { value: number; type: 'dollar' | 'percent' };
+  settings: Pick<ShopSettings, 'taxRate' | 'shopChargeRate' | 'shopChargeCap'>;
+}
+
+// RO totals — labor-hours × labor-rate + parts-cost (+ flat total for full-price
+// services), with optional discount and per-service shop charge (capped, same
+// rule as quotes).
+export function computeROTotals(input: ROTotalsInput): TotalsBreakdown {
+  const { services, discount, settings } = input;
+  const arr = Array.isArray(services) ? services : [];
+
+  let laborTotal = 0;
+  let partsTotal = 0;
+
+  for (const s of arr) {
+    const lh = parseFloat(String(s.laborHours ?? 0)) || 0;
+    const lr = parseFloat(String(s.laborRate ?? 0)) || 0;
+    const pc = parseFloat(String(s.partsCost ?? 0)) || 0;
+    const split = lh * lr;
+    if (split || pc) {
+      laborTotal += split;
+      partsTotal += pc;
+    } else {
+      laborTotal += parseFloat(String(s.total ?? 0)) || 0;
+    }
+  }
+
+  const subtotal = laborTotal + partsTotal;
+
+  const discountAmount = discount
+    ? discount.value > 0
+      ? discount.type === 'percent'
+        ? subtotal * (discount.value / 100)
+        : Math.min(discount.value, subtotal)
+      : 0
+    : 0;
+
+  const afterDiscount = Math.max(0, subtotal - discountAmount);
+
+  const cap = settings.shopChargeCap ?? 69.95;
+  const chargeable = arr
+    .filter((s) => s.applyShopCharge !== false)
+    .reduce((sum, s) => sum + roServiceTotal(s), 0);
+  const shopCharge = Math.min(
+    chargeable * ((settings.shopChargeRate || 0) / 100),
+    cap
+  );
+
+  const taxableBase = afterDiscount + shopCharge;
+  const tax = taxableBase * ((settings.taxRate || 0) / 100);
+  const total = taxableBase + tax;
+
+  return {
+    laborTotal,
+    partsTotal,
+    subtotal,
+    discountAmount,
+    shopCharge,
+    taxableBase,
+    tax,
+    total,
+  };
+}
+
+// Convenience: per-service line total for an ROService.
+// Falls back to s.total when split pricing fields are all zero.
+export function roServiceTotal(s: {
+  laborHours?: number;
+  laborRate?: number;
+  partsCost?: number;
+  total?: number;
+}): number {
+  const split = (s.laborHours || 0) * (s.laborRate || 0) + (s.partsCost || 0);
+  return split || s.total || 0;
+}
diff --git a/src/lib/userMessages.ts b/src/lib/userMessages.ts
new file mode 100644
index 0000000..656062d
--- /dev/null
+++ b/src/lib/userMessages.ts
@@ -0,0 +1,41 @@
+export const SETUP_REQUIRED_MESSAGE = 'This feature is not available yet. Finish setup to continue.';
+
+export function getErrorMessage(error: unknown): string {
+  if (error instanceof Error) return error.message;
+  if (typeof error === 'string') return error;
+  return '';
+}
+
+export function isMissingCollectionError(error: unknown): boolean {
+  const message = getErrorMessage(error).toLowerCase();
+  return message.includes('missing collection') || message.includes('not found') || message.includes('404');
+}
+
+export function getSetupRequiredMessage(): string {
+  return SETUP_REQUIRED_MESSAGE;
+}
+
+export function logError(context: string, error: unknown): void {
+  console.error(context, error);
+}
+
+type ErrorContext = Record<string, unknown>;
+let errorReporter: ((err: Error, ctx?: ErrorContext) => void) | null = null;
+
+export function setErrorReporter(fn: ((err: Error, ctx?: ErrorContext) => void) | null) {
+  errorReporter = fn;
+}
+
+export function reportError(err: Error, ctx?: ErrorContext) {
+  try { errorReporter?.(err, ctx); } catch { /* never let reporting throw */ }
+}
+
+export function swallow<T>(context: string, fallback: T, fn: () => T): T {
+  try { return fn(); }
+  catch (err) { logError(context, err); return fallback; }
+}
+
+export async function swallowAsync<T>(context: string, fallback: T, fn: () => Promise<T>): Promise<T> {
+  try { return await fn(); }
+  catch (err) { logError(context, err); return fallback; }
+}
diff --git a/src/main.tsx b/src/main.tsx
new file mode 100644
index 0000000..541f676
--- /dev/null
+++ b/src/main.tsx
@@ -0,0 +1,38 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+import { ErrorBoundary } from './components/ErrorBoundary'
+import { logError, setErrorReporter } from './lib/userMessages'
+
+// GlitchTip error tracking (self-hosted Sentry-compatible)
+const DSN = import.meta.env.VITE_GLITCHTIP_DSN as string | undefined;
+if (DSN) {
+  import('@sentry/react').then((Sentry) => {
+    Sentry.init({
+      dsn: DSN,
+      environment: import.meta.env.VITE_ENV || 'development',
+      tracesSampleRate: 0.1,
+    });
+    setErrorReporter((err, ctx) => {
+      Sentry.captureException(err, { extra: ctx });
+    });
+  }).catch(() => { /* Sentry failed to load — non-critical */ });
+}
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <ErrorBoundary>
+      <App />
+    </ErrorBoundary>
+  </StrictMode>,
+)
+
+// Global listeners — catch promise rejections and cross-origin script errors
+// that never reach a React render path.
+window.addEventListener('unhandledrejection', (e) => {
+  logError('[unhandledrejection]', e.reason);
+});
+window.addEventListener('error', (e) => {
+  logError('[window error]', e.error ?? e.message);
+});
diff --git a/src/pages/Appointments.tsx b/src/pages/Appointments.tsx
new file mode 100644
index 0000000..4786325
--- /dev/null
+++ b/src/pages/Appointments.tsx
@@ -0,0 +1,592 @@
+import { useEffect, useState, useCallback, useMemo } from 'react';
+import { pb } from '../lib/pocketbase';
+import { usePagedList } from '../hooks/usePagedList';
+import { ListError } from '../components/ui/ListError';
+import { Search, Plus, X, Sparkles } from 'lucide-react';
+import type { Appointment, CustomerType } from '../types';
+import { useToast } from '../components/ui/Toast';
+import { getSetupRequiredMessage, isMissingCollectionError, logError } from '../lib/userMessages';
+import type { CustomerRecord, CustomerWithVehicles } from './Customers';
+import {
+  todayISO,
+  tomorrowISO,
+  weekEndISO,
+  getDateString,
+  normalizeAppointmentRecord,
+  buildAppointmentPayload,
+} from '../lib/appointments';
+import {
+  DateGroup,
+  AppointmentModal,
+  DeleteDialog,
+  ScanScreenshotModal,
+  CheckInModal,
+  EmptyState,
+  AppointmentsSkeleton,
+} from '../components/appointments';
+
+type FilterPreset = 'today' | 'tomorrow' | 'this_week' | 'all';
+
+interface AppointmentFormData {
+  customerId: string;
+  firstName: string;
+  middleName: string;
+  lastName: string;
+  customerName: string;
+  customerPhone: string;
+  customerEmail: string;
+  vehicleInfo: string;
+  vin: string;
+  date: string;
+  time: string;
+  arrivalWindowMinutes: number;
+  tripMiles: number;
+  durationMinutes: number;
+  advisorName: string;
+  serviceType: string;
+  serviceLocation: string;
+  notes: string;
+}
+
+export default function AppointmentsPage() {
+  const { showToast } = useToast();
+  const [error, setError] = useState<string | null>(null);
+
+  const [filterPreset, setFilterPreset] = useState<FilterPreset>('today');
+  const [searchQuery, setSearchQuery] = useState('');
+
+  const [modalOpen, setModalOpen] = useState(false);
+  const [editingAppointment, setEditingAppointment] = useState<Appointment | null>(null);
+
+  const [scanModalOpen, setScanModalOpen] = useState(false);
+
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [deletingAppointment, setDeletingAppointment] = useState<Appointment | null>(null);
+
+  const [showCheckInModal, setShowCheckInModal] = useState(false);
+  const [checkInAppointment, setCheckInAppointment] = useState<Appointment | null>(null);
+
+  const [customers, setCustomers] = useState<CustomerWithVehicles[]>([]);
+
+  const userId = pb.authStore.model?.id;
+
+  const fetchAppointmentsPage = useCallback(async (page: number, perPage: number) => {
+    if (!userId) return { items: [], page: 1, perPage, totalItems: 0, totalPages: 1 };
+    const records = await pb.collection('appointments').getList(page, perPage, {
+      filter: `userId = '${userId}'`,
+      sort: '-id',
+    });
+    return {
+      items: records.items.map((record) => normalizeAppointmentRecord(record)),
+      page: records.page,
+      perPage: records.perPage,
+      totalItems: records.totalItems,
+      totalPages: records.totalPages,
+    };
+  }, [userId]);
+
+  const {
+    items: appointments,
+    setItems: setAppointments,
+    loading,
+    hasMore,
+    loadMore,
+    refresh: refreshAppointments,
+    adjustTotal: adjustAppointmentTotal,
+    replaceItem: replaceAppointmentItem,
+    removeItem: removeAppointmentItem,
+  } = usePagedList<Appointment>(fetchAppointmentsPage, 50);
+
+  const fetchCustomers = useCallback(async () => {
+    if (!userId) return;
+    try {
+      const result = await pb.collection('customers').getList(1, 500, {
+        filter: `userId = '${userId}'`,
+        sort: 'name',
+        fields: 'id,name,phone,email,address,notes,userId,created,updated',
+      });
+      const customerList = result.items as unknown as CustomerRecord[];
+      const enriched: CustomerWithVehicles[] = customerList.map((c) => ({ ...c, vehicles: [], vehicleCount: 0 }));
+      for (let i = 0; i < enriched.length; i++) {
+        try {
+          const vehicles = await pb.collection('vehicles').getFullList({
+            filter: `customerId = '${enriched[i].id}'`,
+            batch: 50,
+          });
+          enriched[i] = { ...enriched[i], vehicles: vehicles as any[], vehicleCount: vehicles.length };
+        } catch {}
+      }
+      setCustomers(enriched);
+    } catch { /* non-critical */ }
+  }, [userId]);
+
+  useEffect(() => {
+    fetchCustomers();
+  }, [fetchCustomers]);
+
+  useEffect(() => {
+    let unsubA: (() => void) | null = null;
+    let unsubRO: (() => void) | null = null;
+    let cancelled = false;
+    (async () => {
+      try {
+        unsubA = await pb.collection('appointments').subscribe('*', (data: any) => {
+          if (cancelled) return;
+          const action = data.action;
+          const record = data.record;
+          if (!record) return;
+          if (record.userId && record.userId !== userId) return;
+          if (action === 'delete') {
+            removeAppointmentItem(record.id, (a) => a.id);
+            adjustAppointmentTotal(-1);
+            return;
+          }
+          const norm = normalizeAppointmentRecord(record);
+          replaceAppointmentItem(record.id, norm, (a) => a.id);
+          setAppointments((prev) => {
+            if (prev.some((a) => a.id === record.id)) return prev;
+            adjustAppointmentTotal(1);
+            return [norm, ...prev];
+          });
+        });
+      } catch (e) {
+        console.warn('Appointments realtime subscribe failed', e);
+      }
+    })();
+    (async () => {
+      try {
+        unsubRO = await pb.collection('repairOrders').subscribe('*', () => {
+          if (!cancelled) refreshAppointments();
+        });
+      } catch {
+        // non-critical
+      }
+    })();
+    return () => {
+      cancelled = true;
+      if (unsubA) unsubA();
+      if (unsubRO) unsubRO();
+    };
+  }, [userId, refreshAppointments]);
+
+  const filteredAppointments = useMemo(() => {
+    let filtered = [...appointments];
+
+    if (filterPreset === 'today') {
+      const today = todayISO();
+      filtered = filtered.filter((a) => getDateString(a.date) === today);
+    } else if (filterPreset === 'tomorrow') {
+      const tomorrow = tomorrowISO();
+      filtered = filtered.filter((a) => getDateString(a.date) === tomorrow);
+    } else if (filterPreset === 'this_week') {
+      const today = todayISO();
+      const weekEnd = weekEndISO();
+      filtered = filtered.filter((a) => {
+        const d = getDateString(a.date);
+        return d >= today && d <= weekEnd;
+      });
+    }
+
+    if (searchQuery.trim()) {
+      const q = searchQuery.trim().toLowerCase();
+      filtered = filtered.filter((a) =>
+        a.customerName?.toLowerCase().includes(q) ||
+        a.vehicleInfo?.toLowerCase().includes(q) ||
+        a.serviceType?.toLowerCase().includes(q) ||
+        a.serviceLocation?.toLowerCase().includes(q)
+      );
+    }
+
+    return filtered;
+  }, [appointments, filterPreset, searchQuery]);
+
+  const groupedByDate = useMemo(() => {
+    const map = new Map<string, Appointment[]>();
+
+    for (const appt of filteredAppointments) {
+      const dateKey = getDateString(appt.date);
+      if (!map.has(dateKey)) {
+        map.set(dateKey, []);
+      }
+      map.get(dateKey)!.push(appt);
+    }
+
+    const sorted = Array.from(map.entries()).sort(([a], [b]) => a.localeCompare(b));
+
+    for (const [, appts] of sorted) {
+      appts.sort((a, b) => (a.time || '').localeCompare(b.time || ''));
+    }
+
+    return sorted;
+  }, [filteredAppointments]);
+
+  const todayStr = todayISO();
+  const hasTodayGroup = groupedByDate.some(([date]) => date === todayStr);
+
+  const handleCreate = useCallback(async (data: AppointmentFormData) => {
+    try {
+      await pb.collection('appointments').create(buildAppointmentPayload(data as unknown as Record<string, unknown>, { userId, status: 'scheduled' }));
+      await refreshAppointments();
+      showToast('Appointment created successfully', 'success');
+    } catch (err: unknown) {
+      logError('Failed to create appointment', err);
+      if (isMissingCollectionError(err)) {
+        setError(getSetupRequiredMessage());
+      } else {
+        setError('Appointment could not be created. Please try again.');
+      }
+    }
+  }, [userId, refreshAppointments, showToast]);
+
+  const handleUpdate = useCallback(async (data: AppointmentFormData) => {
+    if (!editingAppointment) return;
+    try {
+      await pb.collection('appointments').update(
+        editingAppointment.id,
+        buildAppointmentPayload(data as unknown as Record<string, unknown>, { status: editingAppointment.status })
+      );
+      await refreshAppointments();
+      showToast('Appointment updated successfully', 'success');
+    } catch (err: unknown) {
+      logError('Failed to update appointment', err);
+      if (isMissingCollectionError(err)) {
+        setError(getSetupRequiredMessage());
+      } else {
+        setError('Appointment could not be updated. Please try again.');
+      }
+    }
+  }, [editingAppointment, refreshAppointments, showToast]);
+
+  const handleDelete = useCallback(async () => {
+    if (!deletingAppointment) return;
+    try {
+      await pb.collection('appointments').delete(deletingAppointment.id);
+      setDeletingAppointment(null);
+      await refreshAppointments();
+    } catch (err: unknown) {
+      logError('Failed to delete appointment', err);
+      if (isMissingCollectionError(err)) {
+        setError(getSetupRequiredMessage());
+      } else {
+        setError('Appointment could not be deleted. Please try again.');
+      }
+    }
+  }, [deletingAppointment, refreshAppointments]);
+
+  const handleStatusChange = useCallback(async (appt: Appointment, newStatus: Appointment['status']) => {
+    try {
+      await pb.collection('appointments').update(appt.id, { status: newStatus });
+      await refreshAppointments();
+    } catch (err: unknown) {
+      logError('Failed to update appointment status', err);
+      if (isMissingCollectionError(err)) {
+        setError(getSetupRequiredMessage());
+      } else {
+        setError('Appointment status could not be updated. Please try again.');
+      }
+    }
+  }, [refreshAppointments]);
+
+  const openEditModal = useCallback((appt: Appointment) => {
+    setEditingAppointment(appt);
+    setModalOpen(true);
+  }, []);
+
+  const openDeleteDialog = useCallback((appt: Appointment) => {
+    setDeletingAppointment(appt);
+    setDeleteDialogOpen(true);
+  }, []);
+
+  const handleCheckIn = useCallback((appt: Appointment) => {
+    setCheckInAppointment(appt);
+    setShowCheckInModal(true);
+  }, []);
+
+  const handleCheckInSubmit = useCallback(async (data: {
+    customerName: string;
+    customerPhone: string;
+    customerEmail: string;
+    vehicleInfo: string;
+    vin: string;
+    mileage: string;
+    advisorName: string;
+    roNumber: string;
+    notes: string;
+    estimatedDuration: number;
+    customerType: CustomerType;
+    serviceLocation: string;
+    travelFee: number;
+    tripMiles: number;
+  }) => {
+    if (!checkInAppointment || !userId) return;
+
+    try {
+      const now = new Date().toISOString();
+
+      const customerId = checkInAppointment.customerId || '';
+      const createdRepairOrder = await pb.collection('repairOrders').create({
+        customerName: data.customerName,
+        customerPhone: data.customerPhone,
+        customerEmail: data.customerEmail,
+        vehicleInfo: data.vehicleInfo,
+        vin: data.vin,
+        mileage: data.mileage,
+        advisorName: data.advisorName,
+        roNumber: data.roNumber,
+        notes: data.notes,
+        status: 'active',
+        customerId,
+        services: '[]',
+        total: 0,
+        tax: 0,
+        shopCharges: 0,
+        warranty: false,
+        writeupTime: now,
+        estimatedTime: (data.estimatedDuration / 60).toFixed(1),
+        serviceLocation: data.serviceLocation,
+        travelFee: data.travelFee,
+        tripMiles: data.tripMiles,
+        financial: JSON.stringify({ customerType: data.customerType }),
+        userId,
+      });
+
+      if (customerId && data.vehicleInfo.trim()) {
+        try {
+          const parts = data.vehicleInfo.trim().match(/^(\d{4})\s+(.+)$/);
+          let year = '', make = '', model = '';
+          if (parts) {
+            year = parts[1];
+            const rest = parts[2].trim();
+            const spaceIdx = rest.indexOf(' ');
+            if (spaceIdx > 0) { make = rest.slice(0, spaceIdx); model = rest.slice(spaceIdx + 1); }
+            else { make = rest; }
+          } else {
+            make = data.vehicleInfo || '';
+          }
+          await pb.collection('vehicles').create({
+            userId,
+            customerId,
+            make, model, year,
+            vin: data.vin || '',
+            mileage: data.mileage || '',
+            licensePlate: '', color: '', engine: '',
+          });
+          fetchCustomers();
+        } catch {}
+      }
+
+      await pb.collection('appointments').update(checkInAppointment.id, {
+        status: 'checked_in',
+        repairOrderId: createdRepairOrder.id,
+      });
+
+      setShowCheckInModal(false);
+      setCheckInAppointment(null);
+      await refreshAppointments();
+    } catch (err: unknown) {
+      logError('Failed to check in appointment', err);
+      if (isMissingCollectionError(err)) {
+        setError(getSetupRequiredMessage());
+      } else {
+        setError('Could not create the repair order. Please try again.');
+      }
+    }
+  }, [checkInAppointment, userId, refreshAppointments, fetchCustomers]);
+
+  const handleScanImport = useCallback(async (appts: any[]) => {
+    for (const appt of appts) {
+      await pb.collection('appointments').create(buildAppointmentPayload(appt, { userId, status: 'scheduled' }));
+    }
+    await refreshAppointments();
+  }, [userId, refreshAppointments]);
+
+  const openCreateModal = useCallback(() => {
+    setEditingAppointment(null);
+    setModalOpen(true);
+  }, []);
+
+  const openScanModal = useCallback(() => {
+    setScanModalOpen(true);
+  }, []);
+
+  const closeAppointmentModal = useCallback(() => {
+    setModalOpen(false);
+    setEditingAppointment(null);
+  }, []);
+
+  const closeDeleteDialog = useCallback(() => {
+    setDeleteDialogOpen(false);
+    setDeletingAppointment(null);
+  }, []);
+
+  const closeScanModal = useCallback(() => {
+    setScanModalOpen(false);
+  }, []);
+
+  const closeCheckInModal = useCallback(() => {
+    setShowCheckInModal(false);
+    setCheckInAppointment(null);
+  }, []);
+
+  const filters: { label: string; value: FilterPreset }[] = [
+    { label: 'Today', value: 'today' },
+    { label: 'Tomorrow', value: 'tomorrow' },
+    { label: 'This Week', value: 'this_week' },
+    { label: 'All', value: 'all' },
+  ];
+
+  return (
+    <div className="mx-auto max-w-6xl px-4 py-8 sm:px-6 lg:px-8">
+      <div className="mb-6 overflow-hidden rounded-3xl border border-gray-200 bg-white shadow-sm shadow-gray-200/60 dark:border-gray-700 dark:bg-gray-900 dark:shadow-black/10">
+        <div className="flex flex-col gap-6 bg-gradient-to-r from-emerald-50 via-white to-purple-50 px-6 py-6 dark:from-emerald-950/20 dark:via-gray-900 dark:to-purple-950/20 lg:flex-row lg:items-end lg:justify-between">
+          <div>
+            <p className="text-xs font-semibold uppercase tracking-[0.2em] text-emerald-700 dark:text-emerald-400">
+              Shop Schedule
+            </p>
+            <h1 className="mt-2 text-3xl font-semibold tracking-tight text-gray-900 dark:text-white">
+              Appointments
+            </h1>
+            <p className="mt-2 max-w-2xl text-sm text-gray-500 dark:text-gray-400">
+              Keep the day moving with clearer service slots, quick check-ins, and screenshot imports that land directly in your calendar.
+            </p>
+          </div>
+          <div className="flex flex-col gap-2 sm:flex-row sm:items-center">
+            <button
+              onClick={openScanModal}
+              className="inline-flex items-center justify-center gap-2 rounded-xl bg-gradient-to-r from-purple-600 to-purple-500 px-4 py-2.5 text-sm font-medium text-white shadow-sm transition-all hover:from-purple-700 hover:to-purple-600 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900"
+            >
+              <Sparkles className="h-4 w-4" />
+              Scan Screenshot
+            </button>
+            <button
+              onClick={openCreateModal}
+              className="inline-flex items-center justify-center gap-2 rounded-xl bg-gradient-to-r from-emerald-600 to-emerald-500 px-5 py-2.5 text-sm font-medium text-white shadow-sm transition-all hover:from-emerald-700 hover:to-emerald-600 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900"
+            >
+              <Plus className="h-4 w-4" />
+              New Appointment
+            </button>
+          </div>
+        </div>
+
+        <div className="border-t border-gray-200 px-6 py-4 dark:border-gray-700">
+          <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
+            <div className="flex flex-wrap gap-2">
+          {filters.map((f) => (
+            <button
+              key={f.value}
+              onClick={() => setFilterPreset(f.value)}
+              className={`rounded-full px-4 py-2 text-sm font-medium transition-all ${
+                filterPreset === f.value
+                  ? 'bg-emerald-600 text-white shadow-sm shadow-emerald-600/20'
+                  : 'border border-gray-300 bg-white text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700'
+              }`}
+            >
+              {f.label}
+            </button>
+          ))}
+            </div>
+
+            <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
+              {!loading && !error && (
+                <p className="text-xs font-medium uppercase tracking-[0.14em] text-gray-400 dark:text-gray-500">
+                  {filteredAppointments.length} appointment{filteredAppointments.length !== 1 ? 's' : ''}
+                  {filterPreset !== 'all' && ` | ${filterPreset.replace('_', ' ')}`}
+                  {searchQuery.trim() && ` | ${searchQuery.trim()}`}
+                </p>
+              )}
+              <div className="relative w-full sm:w-72">
+                <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400" />
+                <input
+                  type="text"
+                  value={searchQuery}
+                  onChange={(e) => setSearchQuery(e.target.value)}
+                  placeholder="Search customer, vehicle, service, or location..."
+                  className="w-full rounded-xl border border-gray-300 bg-white py-2.5 pl-10 pr-3 text-sm text-gray-900 placeholder-gray-400 shadow-sm transition-colors focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20 dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:placeholder-gray-500 dark:focus:border-emerald-400"
+                />
+                {searchQuery && (
+                  <button
+                    onClick={() => setSearchQuery('')}
+                    className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
+                  >
+                    <X className="h-4 w-4" />
+                  </button>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {loading && <AppointmentsSkeleton />}
+
+      {!loading && error && <ListError title="Unable to load appointments" message={error} onRetry={refreshAppointments} />}
+
+      {!loading && !error && (
+        <>
+          {filteredAppointments.length === 0 ? (
+            <EmptyState onCreate={openCreateModal} />
+          ) : (
+            <div className="space-y-4">
+              {groupedByDate.map(([date, appts]) => (
+                <div key={date}>
+                  {appts.length > 0 ? (
+                    <DateGroup
+                      date={date}
+                      appointments={appts}
+                      onEdit={openEditModal}
+                      onDelete={openDeleteDialog}
+                      onStatusChange={handleStatusChange}
+                      onCheckIn={handleCheckIn}
+                      defaultExpanded={date === todayStr || !hasTodayGroup}
+                    />
+                  ) : null}
+                </div>
+              ))}
+            </div>
+          )}
+          {hasMore && (
+            <div className="mt-4 flex justify-center">
+              <button
+                onClick={loadMore}
+                disabled={loading}
+                className="rounded-lg border border-gray-300 bg-white px-6 py-2 text-sm font-medium text-gray-700 shadow-sm transition-colors hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-60 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
+              >
+                {loading ? 'Loading\u2026' : 'Load more'}
+              </button>
+            </div>
+          )}
+        </>
+      )}
+
+      <AppointmentModal
+        isOpen={modalOpen}
+        onClose={closeAppointmentModal}
+        onSave={editingAppointment ? handleUpdate : handleCreate}
+        appointment={editingAppointment}
+        customers={customers}
+      />
+
+      <DeleteDialog
+        isOpen={deleteDialogOpen}
+        onClose={closeDeleteDialog}
+        onConfirm={handleDelete}
+        appointment={deletingAppointment}
+      />
+
+      <ScanScreenshotModal
+        isOpen={scanModalOpen}
+        onClose={closeScanModal}
+        onImport={handleScanImport}
+        customers={customers}
+      />
+
+      <CheckInModal
+        isOpen={showCheckInModal}
+        onClose={closeCheckInModal}
+        onSubmit={handleCheckInSubmit}
+        appointment={checkInAppointment}
+        customers={customers}
+      />
+    </div>
+  );
+}
diff --git a/src/pages/Customers.tsx b/src/pages/Customers.tsx
new file mode 100644
index 0000000..a2491b8
--- /dev/null
+++ b/src/pages/Customers.tsx
@@ -0,0 +1,694 @@
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { useSearchParams } from 'react-router-dom';
+import { X, Plus, Search, UserPlus, Users, Car, PhoneOff, ListFilter } from 'lucide-react';
+import { pb } from '../lib/pocketbase';
+import { useToast } from '../components/ui/Toast';
+import { getSetupRequiredMessage, isMissingCollectionError, logError } from '../lib/userMessages';
+import { customerWriteSchema } from '../schemas/customer';
+import {
+  formatVehicleLabel,
+  vehicleKey,
+  activeROFilterForCustomer,
+} from '../lib/customers';
+import {
+  CustomersSkeleton,
+  EmptyState,
+  ErrorState,
+  CustomerDirectoryTable,
+  CustomerFormModal,
+  VehicleFormModal,
+  DeleteConfirmModal,
+  CustomerDetailView,
+} from '../components/customers';
+
+export type {
+  CustomerRecord,
+  CustomerWithVehicles,
+  CustomerFormData,
+} from '../components/customers/types';
+
+import type {
+  CustomerWithVehicles,
+  CustomerRecord,
+  VehicleRecord,
+  RepairOrderRecord,
+  QuoteRecord,
+  CustomerFormData,
+  VehicleFormData,
+} from '../components/customers/types';
+
+/* ── Main Customers Page ────────────────────────────────────────────────────── */
+
+export default function Customers() {
+  const { showToast } = useToast();
+  const [searchParams, setSearchParams] = useSearchParams();
+  const initialSearch = (() => {
+    const q = searchParams.get('search');
+    return q && q.trim() ? q.trim() : '';
+  })();
+
+  const [customers, setCustomers] = useState<CustomerWithVehicles[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const [searchQuery, setSearchQuery] = useState(initialSearch);
+  const [debouncedSearch, setDebouncedSearch] = useState(initialSearch);
+
+  useEffect(() => {
+    if (initialSearch) {
+      const sp = new URLSearchParams(searchParams);
+      sp.delete('search');
+      setSearchParams(sp, { replace: true });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const [selectedCustomer, setSelectedCustomer] = useState<CustomerWithVehicles | null>(null);
+  const [selectedVehicles, setSelectedVehicles] = useState<VehicleRecord[]>([]);
+  const [customerRepairOrders, setCustomerRepairOrders] = useState<RepairOrderRecord[]>([]);
+  const [repairOrdersLoading, setRepairOrdersLoading] = useState(false);
+  const [customerQuotes, setCustomerQuotes] = useState<QuoteRecord[]>([]);
+  const [quotesLoading, setQuotesLoading] = useState(false);
+
+  const [showAddModal, setShowAddModal] = useState(false);
+  const [editingCustomer, setEditingCustomer] = useState<CustomerWithVehicles | null>(null);
+
+  const [showVehicleModal, setShowVehicleModal] = useState(false);
+  const [editingVehicle, setEditingVehicle] = useState<VehicleRecord | null>(null);
+
+  const [deletingCustomer, setDeletingCustomer] = useState<CustomerWithVehicles | null>(null);
+  const [deletingVehicle, setDeletingVehicle] = useState<VehicleRecord | null>(null);
+
+  const userId = pb.authStore.model?.id;
+
+  /* ── Debounced search ───────────────────────────────────────────────────── */
+
+  const searchTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => {
+    if (searchTimerRef.current) clearTimeout(searchTimerRef.current);
+    searchTimerRef.current = setTimeout(() => {
+      setDebouncedSearch(searchQuery);
+    }, 300);
+    return () => {
+      if (searchTimerRef.current) clearTimeout(searchTimerRef.current);
+    };
+  }, [searchQuery]);
+
+  /* ── Fetch customers ────────────────────────────────────────────────────── */
+
+  const fetchAll = useCallback(async () => {
+    if (!userId) {
+      setError('You must be logged in to view customers.');
+      setLoading(false);
+      return;
+    }
+
+    setLoading(true);
+    setError(null);
+
+    try {
+      const customerResult = await pb.collection('customers').getList(1, 200, {
+        filter: `userId = '${userId}'`,
+        sort: 'name',
+        fields: 'id,name,phone,email,address,notes,userId,created,updated',
+      });
+
+      const customerList = customerResult.items as unknown as CustomerRecord[];
+      const customerNames = customerList.map((c) => c.name).filter(Boolean);
+      const persistedVehiclesByCustomer = new Map<string, VehicleRecord[]>();
+
+      try {
+        const vehicleRecords = await pb.collection('vehicles').getFullList({
+          filter: `userId = '${userId}'`,
+          sort: 'year,make,model',
+          fields: 'id,customerId,userId,make,model,year,vin,licensePlate,mileage,color,engine',
+          batch: 500,
+        });
+        for (const vehicle of vehicleRecords as unknown as VehicleRecord[]) {
+          const existing = persistedVehiclesByCustomer.get(vehicle.customerId) ?? [];
+          existing.push(vehicle);
+          persistedVehiclesByCustomer.set(vehicle.customerId, existing);
+        }
+      } catch {
+        // Older installs may not have the vehicles collection until migrations run.
+      }
+
+      // ── Fetch vehicles from repairOrders & quotes (legacy pattern) ──
+      interface VehicleSource {
+        vehicleInfo: string;
+        vin: string;
+        mileage: string;
+        customerName: string;
+      }
+
+      let vehicleSources: VehicleSource[] = [];
+      if (customerNames.length > 0) {
+        const nameFilter = customerNames.map((n) => `customerName ~ '${n.replace(/'/g, "\\'")}'`).join(' || ');
+
+        try {
+          const roResult = await pb.collection('repairOrders').getList(1, 500, {
+            filter: nameFilter,
+            fields: 'vehicleInfo,vin,mileage,customerName',
+          });
+          vehicleSources = roResult.items as unknown as VehicleSource[];
+        } catch { /* repairOrders collection may not exist */ }
+
+        try {
+          const qResult = await pb.collection('quotes').getList(1, 500, {
+            filter: nameFilter,
+            fields: 'vehicleInfo,vin,mileage,customerName',
+          });
+          vehicleSources = [...vehicleSources, ...(qResult.items as unknown as VehicleSource[])];
+        } catch { /* quotes collection may not exist */ }
+      }
+
+      // Deduplicate by vehicleInfo per customer, preferring entries with a VIN
+      function parseVehicleInfo(info: string): { year: string; make: string; model: string } {
+        const match = info.trim().match(/^(\d{4})\s+(.+)$/);
+        if (match) {
+          const rest = match[2].trim();
+          const spaceIdx = rest.indexOf(' ');
+          if (spaceIdx > 0) {
+            return { year: match[1], make: rest.slice(0, spaceIdx), model: rest.slice(spaceIdx + 1) };
+          }
+          return { year: match[1], make: rest, model: '' };
+        }
+        return { year: '', make: info, model: '' };
+      }
+
+      const customerVehicleMap = new Map<string, Map<string, VehicleRecord>>();
+      for (const vs of vehicleSources) {
+        if (!vs.vehicleInfo || !vs.customerName) continue;
+        if (!customerVehicleMap.has(vs.customerName)) {
+          customerVehicleMap.set(vs.customerName, new Map());
+        }
+        const customerVehicles = customerVehicleMap.get(vs.customerName)!;
+        const existing = customerVehicles.get(vs.vehicleInfo);
+        if (!existing || (!existing.vin && vs.vin)) {
+          const parsed = parseVehicleInfo(vs.vehicleInfo);
+          customerVehicles.set(vs.vehicleInfo, {
+            id: '',
+            customerId: '',
+            make: parsed.make,
+            model: parsed.model,
+            year: parsed.year,
+            vin: vs.vin || '',
+            licensePlate: '',
+            mileage: vs.mileage || '',
+            color: '',
+            engine: '',
+          });
+        }
+      }
+
+      const enriched: CustomerWithVehicles[] = customerList.map((c) => {
+        const persistedVehicles = persistedVehiclesByCustomer.get(c.id) ?? [];
+        const legacyVehicles = customerVehicleMap.get(c.name) ? Array.from(customerVehicleMap.get(c.name)!.values()) : [];
+        const mergedVehicles = new Map<string, VehicleRecord>();
+        for (const vehicle of persistedVehicles) mergedVehicles.set(vehicleKey(vehicle) || vehicle.id, vehicle);
+        for (const vehicle of legacyVehicles) {
+          const key = vehicleKey(vehicle);
+          if (key && !mergedVehicles.has(key)) mergedVehicles.set(key, vehicle);
+        }
+        const vehicles = Array.from(mergedVehicles.values());
+        return { ...c, vehicles, vehicleCount: vehicles.length };
+      });
+
+      setCustomers(enriched);
+    } catch (err: unknown) {
+      logError('Failed to load customers', err);
+      setError(isMissingCollectionError(err) ? getSetupRequiredMessage() : 'Customers could not be loaded. Please refresh and try again.');
+    } finally {
+      setLoading(false);
+    }
+  }, [userId]);
+
+  useEffect(() => {
+    fetchAll();
+  }, [fetchAll]);
+
+  /* ── Filter customers by search ─────────────────────────────────────────── */
+
+  const filteredCustomers = customers.filter((c) => {
+    if (!debouncedSearch) return true;
+    const q = debouncedSearch.toLowerCase();
+    const nameMatch = c.name.toLowerCase().includes(q);
+    const phoneClean = c.phone.replace(/\D/g, '');
+    const searchClean = q.replace(/\D/g, '');
+    const phoneMatch = searchClean.length > 0 && phoneClean.includes(searchClean);
+    const emailMatch = c.email.toLowerCase().includes(q);
+    const vehicleMatch = c.vehicles.some(
+      (v) =>
+        v.make.toLowerCase().includes(q) ||
+        v.model.toLowerCase().includes(q) ||
+        v.year.includes(q) ||
+        v.vin.toLowerCase().includes(q) ||
+        v.licensePlate.toLowerCase().includes(q)
+    );
+    return nameMatch || phoneMatch || emailMatch || vehicleMatch;
+  });
+
+  const customersWithVehicles = customers.filter((c) => c.vehicleCount > 0).length;
+  const customersMissingPhone = customers.filter((c) => !c.phone.trim()).length;
+
+  /* ── Load vehicles for a customer when viewing details ──────────────────── */
+
+  const handleViewCustomer = useCallback(
+    async (customerId: string) => {
+      const customer = customers.find((c) => c.id === customerId);
+      if (!customer) return;
+
+      setSelectedCustomer(customer);
+      setSelectedVehicles(customer.vehicles);
+      setCustomerRepairOrders([]);
+      setRepairOrdersLoading(true);
+      setCustomerQuotes([]);
+      setQuotesLoading(true);
+
+      const customerName = customer.name.replace(/'/g, "\\'");
+
+      try {
+        const result = await pb.collection('repairOrders').getList(1, 100, {
+          filter: `customerName = '${customerName}'`,
+          sort: '-createdAt',
+          fields: 'id,roNumber,customerId,customerName,vehicleInfo,vin,mileage,status,workStatus,createdAt,completedTime,writeupTime,technician,notes,services',
+        });
+        setCustomerRepairOrders(result.items as unknown as RepairOrderRecord[]);
+      } catch (err) {
+        logError('Failed to load customer repair orders', err);
+        setCustomerRepairOrders([]);
+      } finally {
+        setRepairOrdersLoading(false);
+      }
+
+      try {
+        const result = await pb.collection('quotes').getList(1, 100, {
+          filter: `customerName = '${customerName}'`,
+          sort: '-createdAt',
+          fields: 'id,customerId,customerName,vehicleInfo,vin,mileage,status,createdAt,total,serviceAdvisor,services,notes',
+        });
+        setCustomerQuotes(result.items as unknown as QuoteRecord[]);
+      } catch (err) {
+        logError('Failed to load customer quotes', err);
+        setCustomerQuotes([]);
+      } finally {
+        setQuotesLoading(false);
+      }
+    },
+    [customers]
+  );
+
+  /* ── CRUD: Customer ─────────────────────────────────────────────────────── */
+
+  const handleAddCustomer = useCallback(
+    async (data: CustomerFormData) => {
+      const parsed = customerWriteSchema.safeParse({ ...data, userId });
+      if (!parsed.success) {
+        showToast(parsed.error.issues[0].message, 'error');
+        return;
+      }
+      try {
+        await pb.collection('customers').create({
+          ...data,
+          userId,
+        });
+        showToast('Customer added successfully', 'success');
+        setShowAddModal(false);
+        fetchAll();
+      } catch (err) {
+        logError('Failed to add customer', err);
+        showToast(isMissingCollectionError(err) ? getSetupRequiredMessage() : 'Customer could not be saved. Please try again.', 'error');
+      }
+    },
+    [userId, showToast, fetchAll]
+  );
+
+  const handleEditCustomer = useCallback(
+    async (data: CustomerFormData) => {
+      if (!editingCustomer) return;
+      const parsed = customerWriteSchema.safeParse(data);
+      if (!parsed.success) {
+        showToast(parsed.error.issues[0].message, 'error');
+        return;
+      }
+      try {
+        await pb.collection('customers').update(editingCustomer.id, data);
+        if (userId) {
+          const linkedActiveROs = await pb.collection('repairOrders').getFullList({
+            filter: activeROFilterForCustomer(userId, editingCustomer.id, editingCustomer.name),
+            fields: 'id',
+            batch: 200,
+          });
+          await Promise.all(linkedActiveROs.map((ro) =>
+            pb.collection('repairOrders').update(ro.id, {
+              customerId: editingCustomer.id,
+              customerName: data.name.trim(),
+              customerPhone: data.phone.trim(),
+              customerEmail: data.email.trim(),
+            })
+          ));
+        }
+        showToast('Customer updated successfully', 'success');
+        setEditingCustomer(null);
+        fetchAll();
+        if (selectedCustomer?.id === editingCustomer.id) {
+          setSelectedCustomer((prev) =>
+            prev ? { ...prev, ...data } : null
+          );
+        }
+      } catch (err) {
+        logError('Failed to update customer', err);
+        showToast(isMissingCollectionError(err) ? getSetupRequiredMessage() : 'Customer could not be updated. Please try again.', 'error');
+      }
+    },
+    [editingCustomer, userId, showToast, fetchAll, selectedCustomer]
+  );
+
+  const handleDeleteCustomer = useCallback(async () => {
+    if (!deletingCustomer) return;
+
+    const vehicleIds = deletingCustomer.vehicles.map((v) => v.id).filter(Boolean);
+    for (const vid of vehicleIds) {
+      try {
+        await pb.collection('vehicles').delete(vid);
+      } catch {
+        // ignore individual vehicle deletion failures
+      }
+    }
+
+    try {
+      await pb.collection('customers').delete(deletingCustomer.id);
+    } catch (err: unknown) {
+      logError('Failed to delete customer', err);
+      showToast(isMissingCollectionError(err) ? getSetupRequiredMessage() : 'Customer could not be deleted. Please try again.', 'error');
+      return;
+    }
+    showToast('Customer deleted successfully', 'success');
+    setDeletingCustomer(null);
+    setSelectedCustomer(null);
+    fetchAll();
+  }, [deletingCustomer, showToast, fetchAll]);
+
+  /* ── CRUD: Vehicles ─────────────────────────────────────────────────────── */
+
+  const handleAddVehicle = useCallback(
+    async (data: VehicleFormData) => {
+      if (!selectedCustomer || !userId) return;
+      try {
+        await pb.collection('vehicles').create({
+          ...data,
+          customerId: selectedCustomer.id,
+          userId,
+        });
+        showToast('Vehicle added successfully', 'success');
+      } catch (err: unknown) {
+        logError('Failed to add vehicle', err);
+        showToast(isMissingCollectionError(err) ? getSetupRequiredMessage() : 'Vehicle could not be added. Please try again.', 'error');
+        return;
+      }
+      setShowVehicleModal(false);
+      fetchAll();
+      setSelectedCustomer((prev) => {
+        if (prev) handleViewCustomer(prev.id);
+        return prev;
+      });
+    },
+    [selectedCustomer, userId, showToast, fetchAll, handleViewCustomer]
+  );
+
+  const handleEditVehicle = useCallback(
+    async (data: VehicleFormData) => {
+      if (!editingVehicle || !selectedCustomer || !userId) return;
+      try {
+        if (editingVehicle.id) {
+          await pb.collection('vehicles').update(editingVehicle.id, data);
+        } else {
+          await pb.collection('vehicles').create({
+            ...data,
+            customerId: selectedCustomer.id,
+            userId,
+          });
+        }
+        showToast('Vehicle updated successfully', 'success');
+      } catch (err: unknown) {
+        logError('Failed to update vehicle', err);
+        showToast(isMissingCollectionError(err) ? getSetupRequiredMessage() : 'Vehicle could not be updated. Please try again.', 'error');
+        return;
+      }
+      setEditingVehicle(null);
+      setShowVehicleModal(false);
+      fetchAll();
+      if (selectedCustomer) handleViewCustomer(selectedCustomer.id);
+    },
+    [editingVehicle, selectedCustomer, userId, showToast, fetchAll, handleViewCustomer]
+  );
+
+  const handleDeleteVehicle = useCallback(async () => {
+    if (!deletingVehicle) return;
+    if (!deletingVehicle.id) {
+      showToast('Historical vehicles from repair orders or quotes cannot be removed here.', 'error');
+      setDeletingVehicle(null);
+      return;
+    }
+    try {
+      await pb.collection('vehicles').delete(deletingVehicle.id);
+      showToast('Vehicle removed successfully', 'success');
+    } catch (err: unknown) {
+      logError('Failed to remove vehicle', err);
+      showToast(isMissingCollectionError(err) ? getSetupRequiredMessage() : 'Vehicle could not be removed. Please try again.', 'error');
+      return;
+    }
+    setDeletingVehicle(null);
+    fetchAll();
+    if (selectedCustomer) handleViewCustomer(selectedCustomer.id);
+  }, [deletingVehicle, showToast, fetchAll, selectedCustomer, handleViewCustomer]);
+
+  /* ── Render: List View ──────────────────────────────────────────────────── */
+
+  const renderListView = () => (
+    <>
+      <div className="mb-6 grid grid-cols-2 gap-3 lg:grid-cols-4">
+        <div className="rounded-xl bg-white p-4 shadow-sm ring-1 ring-gray-200 dark:bg-gray-800 dark:ring-gray-700">
+          <div className="flex items-center gap-3">
+            <div className="rounded-lg bg-green-100 p-2 text-green-700 dark:bg-green-900/30 dark:text-green-300">
+              <Users className="h-4 w-4" />
+            </div>
+            <div>
+              <p className="text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400">Customers</p>
+              <p className="text-xl font-bold text-gray-900 dark:text-white">{customers.length}</p>
+            </div>
+          </div>
+        </div>
+        <div className="rounded-xl bg-white p-4 shadow-sm ring-1 ring-gray-200 dark:bg-gray-800 dark:ring-gray-700">
+          <div className="flex items-center gap-3">
+            <div className="rounded-lg bg-blue-100 p-2 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300">
+              <Car className="h-4 w-4" />
+            </div>
+            <div>
+              <p className="text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400">With Vehicles</p>
+              <p className="text-xl font-bold text-gray-900 dark:text-white">{customersWithVehicles}</p>
+            </div>
+          </div>
+        </div>
+        <div className="rounded-xl bg-white p-4 shadow-sm ring-1 ring-gray-200 dark:bg-gray-800 dark:ring-gray-700">
+          <div className="flex items-center gap-3">
+            <div className="rounded-lg bg-amber-100 p-2 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300">
+              <PhoneOff className="h-4 w-4" />
+            </div>
+            <div>
+              <p className="text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400">Missing Phone</p>
+              <p className="text-xl font-bold text-gray-900 dark:text-white">{customersMissingPhone}</p>
+            </div>
+          </div>
+        </div>
+        <div className="rounded-xl bg-white p-4 shadow-sm ring-1 ring-gray-200 dark:bg-gray-800 dark:ring-gray-700">
+          <div className="flex items-center gap-3">
+            <div className="rounded-lg bg-purple-100 p-2 text-purple-700 dark:bg-purple-900/30 dark:text-purple-300">
+              <ListFilter className="h-4 w-4" />
+            </div>
+            <div>
+              <p className="text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400">Showing</p>
+              <p className="text-xl font-bold text-gray-900 dark:text-white">{filteredCustomers.length}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Search bar */}
+      <div className="mb-4 rounded-xl bg-white p-4 shadow-sm ring-1 ring-gray-200 dark:bg-gray-800 dark:ring-gray-700">
+        <div className="relative">
+          <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400" />
+          <input
+            type="text"
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            placeholder="Search by name, phone, email, vehicle, or VIN..."
+            className="w-full rounded-lg border border-gray-300 bg-white py-2.5 pl-10 pr-10 text-sm text-gray-900 placeholder-gray-400 focus:border-green-500 focus:outline-none focus:ring-2 focus:ring-green-500/20 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-500"
+          />
+          {searchQuery && (
+            <button
+              onClick={() => {
+                setSearchQuery('');
+                setDebouncedSearch('');
+              }}
+              className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
+            >
+              <X className="h-4 w-4" />
+            </button>
+          )}
+        </div>
+        <div className="mt-3 flex items-center justify-between">
+          <p className="text-xs text-gray-500 dark:text-gray-400">
+            {debouncedSearch
+              ? `${filteredCustomers.length} of ${customers.length} customers match`
+              : `${customers.length} total customers`}
+          </p>
+          <button
+            onClick={() => setShowAddModal(true)}
+            className="inline-flex items-center gap-1.5 rounded-lg bg-green-600 px-3 py-1.5 text-xs font-medium text-white transition-colors hover:bg-green-700"
+          >
+            <Plus className="h-3.5 w-3.5" />
+            Add Customer
+          </button>
+        </div>
+      </div>
+
+      {/* Customer directory */}
+      {filteredCustomers.length === 0 ? (
+        <EmptyState
+          searchTerm={debouncedSearch}
+          onCreate={() => setShowAddModal(true)}
+        />
+      ) : (
+        <CustomerDirectoryTable
+          customers={filteredCustomers}
+          onView={handleViewCustomer}
+          onEdit={(c) => setEditingCustomer(c)}
+          onDelete={(c) => setDeletingCustomer(c)}
+        />
+      )}
+    </>
+  );
+
+  /* ── Render: Detail View ────────────────────────────────────────────────── */
+
+  const renderDetailView = () => {
+    if (!selectedCustomer) return null;
+
+    return (
+      <CustomerDetailView
+        customer={selectedCustomer}
+        vehicles={selectedVehicles}
+        repairOrders={customerRepairOrders}
+        repairOrdersLoading={repairOrdersLoading}
+        quotes={customerQuotes}
+        quotesLoading={quotesLoading}
+        onBack={() => {
+          setSelectedCustomer(null);
+          setSelectedVehicles([]);
+          setCustomerRepairOrders([]);
+          setCustomerQuotes([]);
+        }}
+        onEdit={(c) => setEditingCustomer(c)}
+        onAddVehicle={() => {
+          setEditingVehicle(null);
+          setShowVehicleModal(true);
+        }}
+        onEditVehicle={(v) => {
+          setEditingVehicle(v);
+          setShowVehicleModal(true);
+        }}
+        onDeleteVehicle={(v) => setDeletingVehicle(v)}
+      />
+    );
+  };
+
+  /* ── Main Render ────────────────────────────────────────────────────────── */
+
+  return (
+    <div className="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
+      {/* Header row */}
+      <div className="mb-8 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+        <div>
+          <h1 className="text-2xl font-bold text-gray-900 dark:text-white">
+            {selectedCustomer ? 'Customer Details' : 'Customers'}
+          </h1>
+          <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
+            {selectedCustomer
+              ? `Viewing details for ${selectedCustomer.name}`
+              : 'Manage your customer database'}
+          </p>
+        </div>
+        {!selectedCustomer && (
+          <button
+            onClick={() => setShowAddModal(true)}
+            className="inline-flex items-center gap-2 rounded-lg bg-green-600 px-5 py-2.5 text-sm font-medium text-white shadow-sm transition-colors hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900"
+          >
+            <UserPlus className="h-4 w-4" />
+            Add Customer
+          </button>
+        )}
+      </div>
+
+      {/* Loading state */}
+      {loading && <CustomersSkeleton />}
+
+      {/* Error state */}
+      {!loading && error && <ErrorState message={error} onRetry={fetchAll} />}
+
+      {/* Content */}
+      {!loading && !error && (
+        <>
+          {selectedCustomer ? renderDetailView() : renderListView()}
+        </>
+      )}
+
+      {/* ── Modals ──────────────────────────────────────────────────────────── */}
+
+      {/* Add Customer Modal */}
+      <CustomerFormModal
+        open={showAddModal}
+        customer={null}
+        onClose={() => setShowAddModal(false)}
+        onSave={handleAddCustomer}
+      />
+
+      {/* Edit Customer Modal */}
+      <CustomerFormModal
+        open={editingCustomer !== null}
+        customer={editingCustomer}
+        onClose={() => setEditingCustomer(null)}
+        onSave={handleEditCustomer}
+      />
+
+      {/* Delete Customer Confirmation */}
+      <DeleteConfirmModal
+        open={deletingCustomer !== null}
+        customerName={deletingCustomer?.name || ''}
+        onClose={() => setDeletingCustomer(null)}
+        onConfirm={handleDeleteCustomer}
+      />
+
+      {/* Add / Edit Vehicle Modal */}
+      <VehicleFormModal
+        open={showVehicleModal}
+        vehicle={editingVehicle}
+        customerName={selectedCustomer?.name || ''}
+        onClose={() => {
+          setShowVehicleModal(false);
+          setEditingVehicle(null);
+        }}
+        onSave={editingVehicle ? handleEditVehicle : handleAddVehicle}
+      />
+
+      {/* Delete Vehicle Confirmation */}
+      <DeleteConfirmModal
+        open={deletingVehicle !== null}
+        customerName={`vehicle ${deletingVehicle ? formatVehicleLabel(deletingVehicle) : ''}`}
+        onClose={() => setDeletingVehicle(null)}
+        onConfirm={handleDeleteVehicle}
+      />
+    </div>
+  );
+}
diff --git a/src/pages/Dashboard.tsx b/src/pages/Dashboard.tsx
new file mode 100644
index 0000000..d345d14
--- /dev/null
+++ b/src/pages/Dashboard.tsx
@@ -0,0 +1,332 @@
+import { useEffect, useState, useCallback } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { pb } from '../lib/pocketbase';
+import { useSettings } from '../store/settings';
+import {
+  FileText,
+  CheckCircle2,
+  DollarSign,
+  Clock,
+  Plus,
+  BellRing,
+} from 'lucide-react';
+import { logError } from '../lib/userMessages';
+import { CardSkeleton } from '../components/ui/ListSkeleton';
+import { ListError } from '../components/ui/ListError';
+import { ListEmpty } from '../components/ui/ListEmpty';
+
+/* ── Types ─────────────────────────────────────────── */
+
+interface QuoteRecord {
+  id: string;
+  customerName: string;
+  vehicleInfo: string;
+  roNumber: string;
+  repairOrderNumber?: string;
+  total: number;
+  status: 'draft' | 'sent' | 'approved' | 'declined';
+  createdAt: string;     // text field (may be empty for older records)
+  lastUpdated?: string;  // date field
+}
+
+interface Stats {
+  totalThisMonth: number;
+  approved: number;
+  revenue: number;
+  pendingReview: number;
+}
+
+interface ReminderRecord {
+  id: string;
+  customerId: string;
+  customerName: string;
+  vehicleInfo: string;
+  mileageAtService: number;
+  intervalMileage: number;
+  dueMileage: number;
+  notes: string;
+  active: boolean;
+}
+
+/* ── Stat card ──────────────────────────────────────── */
+
+function StatCard({
+  icon: Icon,
+  label,
+  value,
+  bg,
+}: {
+  icon: React.ComponentType<{ className?: string }>;
+  label: string;
+  value: string | number;
+  bg: string;
+}) {
+  return (
+    <div className="flex items-center gap-4 rounded-xl bg-white p-5 shadow-sm ring-1 ring-gray-200 dark:bg-gray-800 dark:ring-gray-700">
+      <div className={`flex h-12 w-12 items-center justify-center rounded-lg ${bg}`}>
+        <Icon className="h-6 w-6 text-white" />
+      </div>
+      <div>
+        <p className="text-sm font-medium text-gray-500 dark:text-gray-400">{label}</p>
+        <p className="text-2xl font-bold text-gray-900 dark:text-white">{value}</p>
+      </div>
+    </div>
+  );
+}
+
+/* ── Main Dashboard component ─────────────────────────── */
+
+export default function Dashboard() {
+  const navigate = useNavigate();
+  const businessType = useSettings().businessType;
+
+  const [quotes, setQuotes] = useState<QuoteRecord[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const [reminders, setReminders] = useState<ReminderRecord[]>([]);
+
+  const userId = pb.authStore.model?.id;
+
+  const fetchQuotes = useCallback(async () => {
+    if (!userId) {
+      setError('You must be logged in to view the dashboard.');
+      setLoading(false);
+      return;
+    }
+
+    setLoading(true);
+    setError(null);
+
+    try {
+      // NOTE: The 'quotes' collection does NOT have a 'created' system autodate
+      // field (it was created without one). We sort by '-id' instead — PocketBase
+      // IDs are time-sortable (newer records have lexicographically later IDs).
+      // For display we use 'createdAt' (text field) even though existing records
+      // may have empty values.
+      const records = await pb.collection('quotes').getList(1, 50, {
+        filter: `userId = '${userId}'`,
+        sort: '-id',
+        fields: 'id,customerName,vehicleInfo,repairOrderNumber,total,status,createdAt,lastUpdated',
+      });
+      setQuotes((records.items as any[]).map((record) => ({
+        ...record,
+        roNumber: record.roNumber || record.repairOrderNumber || '',
+      })) as QuoteRecord[]);
+    } catch (err: unknown) {
+      logError('Failed to load dashboard quotes', err);
+      setError('Dashboard data could not be loaded. Please refresh and try again.');
+    } finally {
+      setLoading(false);
+    }
+  }, [userId]);
+
+  useEffect(() => {
+    fetchQuotes();
+  }, [fetchQuotes]);
+
+  // Fetch maintenance reminders
+  const fetchReminders = useCallback(async () => {
+    if (!userId) return;
+    try {
+      const records = await pb.collection('reminders').getFullList({
+        filter: `shopUserId = '${userId}' && active = true`,
+        sort: '-created',
+      });
+      setReminders(records.map((r: Record<string, unknown>) => ({
+        id: r.id as string,
+        customerId: (r.customerId as string) || '',
+        customerName: (r.customerName as string) || '',
+        vehicleInfo: (r.vehicleInfo as string) || '',
+        mileageAtService: Number(r.mileageAtService) || 0,
+        intervalMileage: Number(r.intervalMileage) || 0,
+        dueMileage: Number(r.dueMileage) || 0,
+        notes: (r.notes as string) || '',
+        active: r.active !== false,
+      })));
+    } catch (err) {
+      logError('Failed to load reminders', err);
+    }
+  }, [userId]);
+
+  useEffect(() => {
+    fetchReminders();
+  }, [fetchReminders]);
+
+  // Real-time subscription — delta application (no full refetch)
+  useEffect(() => {
+    let unsub: (() => void) | null = null;
+    let cancelled = false;
+    (async () => {
+      try {
+        unsub = await pb.collection('quotes').subscribe('*', (data: any) => {
+          if (cancelled) return;
+          const action = data.action;
+          const record = data.record;
+          if (!record) return;
+          if (record.userId && record.userId !== userId) return;
+          if (action === 'delete') {
+            setQuotes((prev) => prev.filter((q) => q.id !== record.id));
+            return;
+          }
+          const norm: QuoteRecord = {
+            ...record,
+            roNumber: record.roNumber || record.repairOrderNumber || '',
+          };
+          setQuotes((prev) => {
+            const idx = prev.findIndex((q) => q.id === record.id);
+            if (idx === -1) return [norm, ...prev];
+            const next = [...prev];
+            next[idx] = norm;
+            return next;
+          });
+        });
+      } catch (e) {
+        console.warn('Dashboard quotes realtime subscribe failed', e);
+      }
+    })();
+    return () => { cancelled = true; if (unsub) unsub(); };
+  }, [userId]);
+
+  /* ── Compute stats ──────────────────────────────── */
+
+  const now = new Date();
+  const startOfMonth = new Date(now.getFullYear(), now.getMonth(), 1).toISOString();
+
+  // Get a comparable date string from a quote — createdAt (text) or lastUpdated (date)
+  const quoteDate = (q: QuoteRecord): string => {
+    return q.createdAt || q.lastUpdated || '';
+  };
+
+  const stats: Stats = {
+    totalThisMonth: quotes.filter((q) => {
+      const d = quoteDate(q);
+      return d ? d >= startOfMonth : true; // if no date, count it
+    }).length,
+    approved: quotes.filter((q) => q.status === 'approved').length,
+    revenue: quotes
+      .filter((q) => q.status === 'approved')
+      .reduce((sum, q) => sum + (q.total || 0), 0),
+    pendingReview: quotes.filter((q) => q.status === 'sent' || q.status === 'draft').length,
+  };
+
+  const formatCurrency = (amount: number) =>
+    new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(amount);
+
+  /* ── Render ─────────────────────────────────────── */
+
+  return (
+    <div className="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
+      {/* Header row */}
+      <div className="mb-8 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+        <div>
+          <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Dashboard</h1>
+          <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
+            {businessType === 'mobile' || businessType === 'home'
+              ? 'Overview of your quotes, scheduled work, and business performance.'
+              : 'Overview of your quotes and business performance.'}
+          </p>
+        </div>
+        <button
+          onClick={() => navigate('/quote')}
+          className="inline-flex items-center gap-2 rounded-lg bg-green-600 px-5 py-2.5 text-sm font-medium text-white shadow-sm transition-colors hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900"
+        >
+          <Plus className="h-4 w-4" />
+          New Quote
+        </button>
+      </div>
+
+      {/* Maintenance Reminders */}
+      {reminders.length > 0 && (
+        <div className="mb-8 rounded-xl bg-white p-5 shadow-sm ring-1 ring-gray-200 dark:bg-gray-800 dark:ring-gray-700">
+          <div className="mb-3 flex items-center justify-between">
+            <div className="flex items-center gap-2">
+              <BellRing className="h-5 w-5 text-blue-500" />
+              <h2 className="text-base font-semibold text-gray-900 dark:text-white">Maintenance Reminders</h2>
+              <span className="rounded-full bg-blue-100 px-2 py-0.5 text-xs font-medium text-blue-700 dark:bg-blue-900/30 dark:text-blue-300">
+                {reminders.length} active
+              </span>
+            </div>
+          </div>
+          <div className="space-y-2">
+            {reminders.map((rem) => (
+              <div
+                key={rem.id}
+                className="flex flex-wrap items-center justify-between gap-3 rounded-lg border border-gray-100 bg-gray-50 px-4 py-3 dark:border-gray-700 dark:bg-gray-900/50"
+              >
+                <div className="min-w-0 flex-1">
+                  <p className="text-sm font-medium text-gray-900 dark:text-gray-100">
+                    {rem.customerName || 'Unknown Customer'}
+                  </p>
+                  <p className="text-xs text-gray-500 dark:text-gray-400">
+                    {rem.vehicleInfo || 'No vehicle info'}
+                  </p>
+                  {rem.notes && (
+                    <p className="mt-0.5 text-xs italic text-gray-400 dark:text-gray-500">
+                      {rem.notes}
+                    </p>
+                  )}
+                </div>
+                <div className="text-right">
+                  <p className="text-sm font-semibold text-gray-900 dark:text-gray-100">
+                    {rem.dueMileage.toLocaleString()} mi
+                  </p>
+                  <p className="text-[11px] font-medium text-gray-500 dark:text-gray-400">
+                    due at mileage
+                  </p>
+                  <span className={`mt-1 inline-block rounded-full px-2 py-0.5 text-[10px] font-medium ${
+                    rem.dueMileage > 0
+                      ? 'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400'
+                      : 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300'
+                  }`}>
+                    {rem.dueMileage > 0 ? 'Active' : 'Paused'}
+                  </span>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Loading state */}
+      {loading && <CardSkeleton count={4} />}
+
+      {/* Error state */}
+      {!loading && error && <ListError title="Unable to load dashboard" message={error} onRetry={fetchQuotes} />}
+
+      {/* Stats cards */}
+      {!loading && !error && (
+        quotes.length === 0 ? (
+          <ListEmpty icon={FileText} title="No quotes yet" message="Create your first quote to see dashboard stats." actionLabel="New Quote" onAction={() => navigate('/quote')} />
+        ) : (
+          <div className="mb-8 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
+            <StatCard
+              icon={FileText}
+              label="Quotes This Month"
+              value={stats.totalThisMonth}
+              bg="bg-blue-500"
+            />
+            <StatCard
+              icon={CheckCircle2}
+              label="Approved Quotes"
+              value={stats.approved}
+              bg="bg-green-500"
+            />
+            <StatCard
+              icon={DollarSign}
+              label="Revenue"
+              value={formatCurrency(stats.revenue)}
+              bg="bg-purple-500"
+            />
+            <StatCard
+              icon={Clock}
+              label="Pending Review"
+              value={stats.pendingReview}
+              bg="bg-amber-500"
+            />
+          </div>
+        )
+      )}
+    </div>
+  );
+}
diff --git a/src/pages/FinancialDashboard.tsx b/src/pages/FinancialDashboard.tsx
new file mode 100644
index 0000000..ba5f25b
--- /dev/null
+++ b/src/pages/FinancialDashboard.tsx
@@ -0,0 +1,1024 @@
+import { useEffect, useState, useCallback, useMemo } from 'react';
+import { pb } from '../lib/pocketbase';
+import { RequireOwnerRole } from '../lib/rbx';
+import {
+  TrendingUp,
+  Wallet,
+  Users,
+  Clock,
+  Star,
+  BarChart3,
+  ArrowUpRight,
+  ArrowDownRight,
+  FileText,
+} from 'lucide-react';
+import SetupBanner from '../components/SetupBanner';
+import { ListError } from '../components/ui/ListError';
+import type { QuoteService, RepairOrder } from '../types';
+import { isMissingCollectionError, logError } from '../lib/userMessages';
+
+/* ── Types ─────────────────────────────────────────── */
+
+type DateRange = 'this_month' | 'last_month' | 'last_3_months' | 'this_year';
+
+interface DateRangeLabel {
+  key: DateRange;
+  label: string;
+}
+
+const DATE_RANGES: DateRangeLabel[] = [
+  { key: 'this_month', label: 'This Month' },
+  { key: 'last_month', label: 'Last Month' },
+  { key: 'last_3_months', label: 'Last 3 Months' },
+  { key: 'this_year', label: 'This Year' },
+];
+
+/* ── Date helpers ──────────────────────────────────── */
+
+function getDateRangeBounds(range: DateRange): { start: Date; end: Date } {
+  const now = new Date();
+  const end = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 23, 59, 59);
+
+  switch (range) {
+    case 'this_month':
+      return { start: new Date(now.getFullYear(), now.getMonth(), 1), end };
+    case 'last_month': {
+      const start = new Date(now.getFullYear(), now.getMonth() - 1, 1);
+      const e = new Date(now.getFullYear(), now.getMonth(), 0, 23, 59, 59);
+      return { start, end: e };
+    }
+    case 'last_3_months': {
+      const start = new Date(now.getFullYear(), now.getMonth() - 3, 1);
+      return { start, end };
+    }
+    case 'this_year':
+      return { start: new Date(now.getFullYear(), 0, 1), end };
+  }
+}
+
+function getOrderMetricDate(o: RepairOrder): string | undefined {
+  return o.completedTime || o.completedDate || o.writeupTime || o.createdAt || o.created || o.updatedAt || o.updated;
+}
+
+function getTodayBounds(): { start: Date; end: Date } {
+  const now = new Date();
+  return {
+    start: new Date(now.getFullYear(), now.getMonth(), now.getDate()),
+    end: new Date(now.getFullYear(), now.getMonth(), now.getDate(), 23, 59, 59, 999),
+  };
+}
+
+function isWithinBounds(dateStr: string | undefined, start: Date, end: Date): boolean {
+  if (!dateStr) return false;
+  const d = new Date(dateStr);
+  return !Number.isNaN(d.getTime()) && d >= start && d <= end;
+}
+
+function getQuoteMetricDate(q: any): string | undefined {
+  return q.createdAt || q.created || q.lastUpdated || q.updatedAt || q.updated;
+}
+
+function parseQuoteServices(raw: any): QuoteService[] {
+  if (Array.isArray(raw)) return raw as QuoteService[];
+  if (typeof raw === 'string' && raw.trim()) {
+    try {
+      const parsed = JSON.parse(raw);
+      return Array.isArray(parsed) ? parsed as QuoteService[] : [];
+    } catch {
+      return [];
+    }
+  }
+  return [];
+}
+
+function approvedQuoteServicesTotal(q: any): number {
+  return parseQuoteServices(q.services).reduce((sum, svc) => {
+    const approved = svc.customerDecision === 'approved' || svc.approved === true;
+    return approved ? sum + (parseFloat(String(svc.price ?? 0)) || 0) : sum;
+  }, 0);
+}
+
+function fNum(v: any): number {
+  return parseFloat(String(v)) || 0;
+}
+
+function finData(o: RepairOrder): Record<string, any> {
+  const raw = o.financial;
+  if (typeof raw === 'string') {
+    try { return JSON.parse(raw) as Record<string, any>; } catch (err) { logError('FinancialDashboard finData JSON parse failed', err); return {}; }
+  }
+  return (typeof raw === 'object' && raw ? raw : {}) as Record<string, any>;
+}
+
+function topNum(o: RepairOrder, field: string): number {
+  return fNum((o as any)[field]);
+}
+
+function finVal(f: Record<string, any>, newKey: string, legacyKey: string): number | undefined {
+  const v = f[newKey] ?? f[legacyKey];
+  return v === undefined || v === null ? undefined : fNum(v);
+}
+
+function revenueOf(o: RepairOrder): number {
+  const f = finData(o);
+  return finVal(f, 'grossTotal', 'cpTotal') || topNum(o, 'grossTotal') || (o.total || 0);
+}
+
+function costOf(o: RepairOrder): number {
+  const f = finData(o);
+  const gc = finVal(f, 'grossCost', 'cpCost') || topNum(o, 'grossCost');
+  const wc = finVal(f, 'warrCost', 'whCost') || topNum(o, 'warrCost');
+  const sc = finVal(f, 'shopCharge', 'shopCharge') || topNum(o, 'shopCharge') || fNum(o.shopCharges);
+  if (gc > 0) return gc + sc;
+  if (wc > 0) return wc + sc;
+  const svcs = Array.isArray(o.services) ? o.services : [];
+  return svcs.reduce((s, svc) => s + (svc.partsCost || 0) + (svc.laborHours || 0) * (svc.laborRate || 0), 0) + sc;
+}
+
+function customerPayGpOf(o: RepairOrder): number {
+  const f = finData(o);
+  const grossTotal = finVal(f, 'grossTotal', 'cpTotal') || topNum(o, 'grossTotal') || 0;
+  const grossCost = finVal(f, 'grossCost', 'cpCost') || topNum(o, 'grossCost') || 0;
+  const warrTotal = finVal(f, 'warrTotal', 'whTotal') || topNum(o, 'warrTotal') || 0;
+  const warrCost = finVal(f, 'warrCost', 'whCost') || topNum(o, 'warrCost') || 0;
+  const shopCharge = finVal(f, 'shopCharge', 'shopCharge') || topNum(o, 'shopCharge') || fNum(o.shopCharges) || 0;
+  const hasExplicitFinancials = grossTotal > 0 || grossCost > 0 || warrTotal > 0 || warrCost > 0;
+
+  if (!hasExplicitFinancials) return revenueOf(o) - costOf(o);
+
+  const netTotal = Math.max(0, grossTotal - warrTotal - shopCharge);
+  const netCost = Math.max(0, grossCost - warrCost);
+  return netTotal - netCost;
+}
+
+function warrantyGpOf(o: RepairOrder): number {
+  const f = finData(o);
+  const warrTotal = finVal(f, 'warrTotal', 'whTotal') || topNum(o, 'warrTotal') || 0;
+  const warrCost = finVal(f, 'warrCost', 'whCost') || topNum(o, 'warrCost') || 0;
+  return warrTotal - warrCost;
+}
+
+/* ── Formatting ────────────────────────────────────── */
+
+function formatCurrency(amount: number): string {
+  return new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency: 'USD',
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 0,
+  }).format(amount);
+}
+
+function formatPercent(value: number): string {
+  return `${value.toFixed(1)}%`;
+}
+
+function formatDays(days: number): string {
+  if (days < 1) return 'Less than a day';
+  if (days < 30) return `${Math.round(days)} days`;
+  if (days < 365) {
+    const months = Math.round(days / 30);
+    return `${months} month${months > 1 ? 's' : ''}`;
+  }
+  const years = (days / 365).toFixed(1);
+  return `${years} years`;
+}
+
+/* ── Metrics calculation ───────────────────────────── */
+
+interface CalcMetrics {
+  totalRevenue: number;
+  totalCosts: number;
+  netProfit: number;
+  totalCustomerPayGP: number;
+  totalWarrantyGP: number;
+  overallGrossProfit: number;
+  completedJobs: number;
+  avgJobValue: number;
+  customerLTV: number;
+  avgReturnTime: number;
+  customerSatisfaction: number;
+  monthlyRevenue: { month: string; revenue: number; costs: number }[];
+  costBreakdown: { label: string; value: number; color: string }[];
+  revenueTrend: { label: string; value: number }[];
+  profitMargin: number;
+}
+
+function calculateMetrics(orders: RepairOrder[]): CalcMetrics {
+  // Filter completed orders
+  const completed = orders.filter(
+    (o) => o.status === 'completed' || o.status === 'final_close' || o.status === 'delivered'
+  );
+
+  const completedJobs = completed.length;
+
+  // Total revenue and costs
+  const totalRevenue = completed.reduce((sum, o) => sum + revenueOf(o), 0);
+  const totalCosts = completed.reduce((sum, o) => sum + costOf(o), 0);
+  const netProfit = totalRevenue - totalCosts;
+  const avgJobValue = completedJobs > 0 ? totalRevenue / completedJobs : 0;
+  const profitMargin = totalRevenue > 0 ? (netProfit / totalRevenue) * 100 : 0;
+
+  // --- Customer metrics ---
+  const customerMap = new Map<string, { orders: number; totalSpent: number; dates: Date[] }>();
+
+  for (const o of completed) {
+    const key = o.customerName || 'Unknown';
+    const existing = customerMap.get(key) || { orders: 0, totalSpent: 0, dates: [] };
+    existing.orders++;
+    existing.totalSpent += revenueOf(o);
+    const completedDate = getOrderMetricDate(o);
+    if (completedDate) existing.dates.push(new Date(completedDate));
+    customerMap.set(key, existing);
+  }
+
+  const customerArray = Array.from(customerMap.values());
+  const totalCustomers = customerArray.length;
+  const customerLTV = totalCustomers > 0
+    ? customerArray.reduce((s, c) => s + c.totalSpent, 0) / totalCustomers
+    : 0;
+
+  // Avg return time — average days between visits for repeat customers
+  let totalDays = 0;
+  let dayCount = 0;
+  for (const c of customerArray) {
+    if (c.dates.length > 1) {
+      const sorted = [...c.dates].sort((a, b) => a.getTime() - b.getTime());
+      for (let i = 1; i < sorted.length; i++) {
+        const diff = (sorted[i].getTime() - sorted[i - 1].getTime()) / (1000 * 60 * 60 * 24);
+        totalDays += diff;
+        dayCount++;
+      }
+    }
+  }
+  const avgReturnTime = dayCount > 0 ? totalDays / dayCount : 0;
+  const ratedOrders = completed.filter((o) => o.satisfaction && o.satisfaction >= 1 && o.satisfaction <= 5);
+  const customerSatisfaction = ratedOrders.length > 0
+    ? (ratedOrders.reduce((s, o) => s + (o.satisfaction || 0), 0) / ratedOrders.length) * 20
+    : 0;
+
+  // --- Monthly revenue aggregation ---
+  const monthMap = new Map<string, { revenue: number; costs: number }>();
+
+  for (const o of completed) {
+    const dateStr = getOrderMetricDate(o);
+    if (!dateStr) continue;
+    const d = new Date(dateStr);
+    const key = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}`;
+    const existing = monthMap.get(key) || { revenue: 0, costs: 0 };
+    existing.revenue += revenueOf(o);
+    existing.costs += costOf(o);
+    monthMap.set(key, existing);
+  }
+
+  const sortedEntries = Array.from(monthMap.entries()).sort(([a], [b]) => a.localeCompare(b));
+  const monthlyData = sortedEntries.map(([key, v]) => {
+    const [yr, mo] = key.split('-');
+    const d = new Date(parseInt(yr), parseInt(mo) - 1);
+    return {
+      month: d.toLocaleDateString('en-US', { month: 'short', year: '2-digit' }),
+      revenue: v.revenue,
+      costs: v.costs,
+    };
+  });
+
+  // --- Cost breakdown ---
+  // If explicit financial fields are used, show Customer Pay + Warranty costs instead of parts/labor split
+  const hasExplicitCosts = completed.some((o) =>
+    fNum(finData(o).grossCost) > 0 || topNum(o, 'grossCost') > 0 ||
+    fNum(finData(o).warrCost) > 0 || topNum(o, 'warrCost') > 0
+  );
+  let costBreakdown: { label: string; value: number; color: string }[];
+  if (hasExplicitCosts) {
+    const totalGrossCost = completed.reduce((s, o) => s + (fNum(finData(o).grossCost) || topNum(o, 'grossCost')), 0);
+    const totalWarrCost = completed.reduce((s, o) => s + (fNum(finData(o).warrCost) || topNum(o, 'warrCost')), 0);
+    const totalShopCharges = completed.reduce((s, o) => s + (fNum(finData(o).shopCharge) || topNum(o, 'shopCharge') || fNum(o.shopCharges)), 0);
+    const totalNetCost = totalGrossCost - totalWarrCost;
+    costBreakdown = [
+      { label: 'Customer Pay Cost', value: totalNetCost || 1, color: 'bg-blue-500' },
+      { label: 'Warranty Cost', value: totalWarrCost || 1, color: 'bg-orange-500' },
+    ];
+    if (totalShopCharges > 0) {
+      costBreakdown.push({ label: 'Shop Charges', value: totalShopCharges, color: 'bg-purple-500' });
+    }
+  } else {
+    const totalParts = completed.reduce((sum, o) => {
+      const svcs = Array.isArray(o.services) ? o.services : [];
+      return sum + svcs.reduce((s, svc) => s + (svc.partsCost || 0), 0);
+    }, 0);
+    const totalLabor = completed.reduce((sum, o) => {
+      const svcs = Array.isArray(o.services) ? o.services : [];
+      return sum + svcs.reduce((s, svc) => s + (svc.laborHours || 0) * (svc.laborRate || 0), 0);
+    }, 0);
+    const otherCosts = Math.max(0, totalCosts - totalParts - totalLabor);
+    costBreakdown = [
+      { label: 'Parts', value: totalParts || 1, color: 'bg-blue-500' },
+      { label: 'Labor', value: totalLabor || 1, color: 'bg-green-500' },
+    ];
+    if (otherCosts > 0) {
+      costBreakdown.push({ label: 'Other', value: otherCosts, color: 'bg-amber-500' });
+    }
+  }
+
+  // --- Gross Profit aggregation (matching per-RO logic in RepairOrders.tsx) ---
+  let totalCustomerPayGP = 0;
+  let totalWarrantyGP = 0;
+
+  for (const o of completed) {
+    totalCustomerPayGP += customerPayGpOf(o);
+    totalWarrantyGP += warrantyGpOf(o);
+  }
+  const overallGrossProfit = totalCustomerPayGP + totalWarrantyGP;
+
+  // --- Revenue trend (last 6 months) ---
+  const revenueTrend = monthlyData.slice(-6).map((m) => ({
+    label: m.month,
+    value: m.revenue,
+  }));
+
+  return {
+    totalRevenue,
+    totalCosts,
+    netProfit,
+    totalCustomerPayGP,
+    totalWarrantyGP,
+    overallGrossProfit,
+    completedJobs,
+    avgJobValue,
+    customerLTV,
+    avgReturnTime,
+    customerSatisfaction,
+    monthlyRevenue: monthlyData,
+    costBreakdown,
+    revenueTrend,
+    profitMargin,
+  };
+}
+
+/* ── Sub-components ────────────────────────────────── */
+
+function StatCard({
+  icon: Icon,
+  label,
+  value,
+  bg,
+  trend,
+  trendUp,
+}: {
+  icon: React.ComponentType<{ className?: string }>;
+  label: string;
+  value: string | number;
+  bg: string;
+  trend?: string;
+  trendUp?: boolean;
+}) {
+  return (
+    <div className="flex flex-col gap-3 rounded-xl bg-white p-5 shadow-sm ring-1 ring-gray-200 dark:bg-gray-800 dark:ring-gray-700">
+      <div className="flex items-center gap-4">
+        <div className={`flex h-12 w-12 items-center justify-center rounded-lg ${bg}`}>
+          <Icon className="h-6 w-6 text-white" />
+        </div>
+        <div className="flex-1">
+          <p className="text-sm font-medium text-gray-500 dark:text-gray-400">{label}</p>
+          <p className="text-2xl font-bold text-gray-900 dark:text-white">{value}</p>
+        </div>
+      </div>
+      {trend && (
+        <div className={`flex items-center gap-1 text-xs font-medium ${trendUp ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400'}`}>
+          {trendUp ? <ArrowUpRight className="h-3 w-3" /> : <ArrowDownRight className="h-3 w-3" />}
+          <span>{trend}</span>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function ExecutiveSnapshot({ metrics }: { metrics: CalcMetrics }) {
+  return (
+    <div className="rounded-2xl bg-gray-950 p-5 shadow-sm dark:bg-gray-900 sm:p-6">
+      <div className="mb-5 flex flex-col gap-2 sm:flex-row sm:items-end sm:justify-between">
+        <div>
+          <p className="text-sm font-semibold uppercase tracking-wide text-green-300">Executive Snapshot</p>
+          <h2 className="mt-1 text-2xl font-bold text-white">{formatCurrency(metrics.overallGrossProfit)} gross profit</h2>
+        </div>
+        <p className={`text-sm font-semibold ${metrics.profitMargin >= 20 ? 'text-green-300' : 'text-amber-300'}`}>
+          {formatPercent(metrics.profitMargin)} margin
+        </p>
+      </div>
+      <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-4">
+        <div className="rounded-xl bg-white/10 p-4 ring-1 ring-white/10">
+          <p className="text-xs font-medium uppercase tracking-wide text-gray-400">Revenue</p>
+          <p className="mt-2 text-2xl font-bold text-white">{formatCurrency(metrics.totalRevenue)}</p>
+        </div>
+        <div className="rounded-xl bg-white/10 p-4 ring-1 ring-white/10">
+          <p className="text-xs font-medium uppercase tracking-wide text-gray-400">Gross Profit</p>
+          <p className="mt-2 text-2xl font-bold text-green-300">{formatCurrency(metrics.overallGrossProfit)}</p>
+        </div>
+        <div className="rounded-xl bg-white/10 p-4 ring-1 ring-white/10">
+          <p className="text-xs font-medium uppercase tracking-wide text-gray-400">Costs</p>
+          <p className="mt-2 text-2xl font-bold text-white">{formatCurrency(metrics.totalCosts)}</p>
+        </div>
+        <div className="rounded-xl bg-white/10 p-4 ring-1 ring-white/10">
+          <p className="text-xs font-medium uppercase tracking-wide text-gray-400">Completed ROs</p>
+          <p className="mt-2 text-2xl font-bold text-white">{metrics.completedJobs}</p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function TodayStrip({ todayMetrics }: { todayMetrics: { customerPayGP: number; quoteTotal: number; approvedServicesRevenue: number; quoteCount: number; approvedServiceCount: number } }) {
+  return (
+    <div className="rounded-xl bg-white p-4 shadow-sm ring-1 ring-gray-200 dark:bg-gray-800 dark:ring-gray-700">
+      <div className="mb-3 flex items-center justify-between">
+        <h2 className="text-base font-semibold text-gray-900 dark:text-white">Today</h2>
+        <span className="text-xs font-medium text-gray-500 dark:text-gray-400">Live operating pulse</span>
+      </div>
+      <div className="grid grid-cols-1 gap-3 sm:grid-cols-3">
+        <div className="rounded-lg bg-green-50 p-3 dark:bg-green-900/20">
+          <p className="text-xs font-medium text-green-700 dark:text-green-300">Customer Pay GP</p>
+          <p className="mt-1 text-xl font-bold text-gray-900 dark:text-white">{formatCurrency(todayMetrics.customerPayGP)}</p>
+        </div>
+        <div className="rounded-lg bg-indigo-50 p-3 dark:bg-indigo-900/20">
+          <p className="text-xs font-medium text-indigo-700 dark:text-indigo-300">Quote Total</p>
+          <p className="mt-1 text-xl font-bold text-gray-900 dark:text-white">{formatCurrency(todayMetrics.quoteTotal)}</p>
+          <p className="text-xs text-gray-500 dark:text-gray-400">{todayMetrics.quoteCount} quote{todayMetrics.quoteCount !== 1 ? 's' : ''}</p>
+        </div>
+        <div className="rounded-lg bg-teal-50 p-3 dark:bg-teal-900/20">
+          <p className="text-xs font-medium text-teal-700 dark:text-teal-300">Approved Services</p>
+          <p className="mt-1 text-xl font-bold text-gray-900 dark:text-white">{formatCurrency(todayMetrics.approvedServicesRevenue)}</p>
+          <p className="text-xs text-gray-500 dark:text-gray-400">{todayMetrics.approvedServiceCount} service{todayMetrics.approvedServiceCount !== 1 ? 's' : ''}</p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function LoadingSkeleton() {
+  return (
+    <div className="animate-pulse space-y-6">
+      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
+        {Array.from({ length: 4 }).map((_, i) => (
+          <div
+            key={i}
+            className="flex items-center gap-4 rounded-xl bg-white p-5 ring-1 ring-gray-200 dark:bg-gray-800 dark:ring-gray-700"
+          >
+            <div className="h-12 w-12 rounded-lg bg-gray-200 dark:bg-gray-700" />
+            <div className="flex-1 space-y-2">
+              <div className="h-3 w-20 rounded bg-gray-200 dark:bg-gray-700" />
+              <div className="h-6 w-16 rounded bg-gray-200 dark:bg-gray-700" />
+            </div>
+          </div>
+        ))}
+      </div>
+      <div className="rounded-xl bg-white p-6 ring-1 ring-gray-200 dark:bg-gray-800 dark:ring-gray-700">
+        <div className="mb-4 h-6 w-36 rounded bg-gray-200 dark:bg-gray-700" />
+        <div className="space-y-3">
+          {Array.from({ length: 6 }).map((_, i) => (
+            <div key={i} className="h-8 rounded bg-gray-200 dark:bg-gray-700" />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function ErrorState({ message, onRetry }: { message: string; onRetry: () => void }) {
+  return <ListError title="Unable to load financial data" message={message} onRetry={onRetry} />;
+}
+
+function EmptyState() {
+  return (
+    <div className="flex flex-col items-center justify-center py-20 text-center">
+      <div className="mb-6 flex h-24 w-24 items-center justify-center rounded-full bg-green-50 dark:bg-green-900/20">
+        <BarChart3 className="h-12 w-12 text-green-500 dark:text-green-400" />
+      </div>
+      <h3 className="mb-2 text-lg font-semibold text-gray-900 dark:text-white">
+        No financial data available
+      </h3>
+      <p className="mb-4 max-w-md text-sm text-gray-500 dark:text-gray-400">
+        Financial reporting will appear here after completed repair orders and quotes begin generating revenue and cost history.
+      </p>
+    </div>
+  );
+}
+
+function DateRangeFilter({
+  selected,
+  onChange,
+}: {
+  selected: DateRange;
+  onChange: (r: DateRange) => void;
+}) {
+  return (
+    <div className="flex flex-wrap gap-2">
+      {DATE_RANGES.map(({ key, label }) => (
+        <button
+          key={key}
+          onClick={() => onChange(key)}
+          className={`rounded-lg px-3.5 py-1.5 text-sm font-medium transition-colors ${
+            selected === key
+              ? 'bg-green-100 text-green-700 ring-1 ring-green-300 dark:bg-green-900/40 dark:text-green-300 dark:ring-green-700'
+              : 'bg-white text-gray-600 ring-1 ring-gray-200 hover:bg-gray-50 dark:bg-gray-800 dark:text-gray-400 dark:ring-gray-700 dark:hover:bg-gray-700'
+          }`}
+        >
+          {label}
+        </button>
+      ))}
+    </div>
+  );
+}
+
+/* ── Bar chart (CSS only) ──────────────────────────── */
+
+function MonthlyBarChart({
+  data,
+}: {
+  data: { month: string; revenue: number; costs: number }[];
+}) {
+  const maxVal = Math.max(...data.flatMap((d) => [d.revenue, d.costs]), 1);
+
+  if (data.length === 0) {
+    return (
+      <div className="flex items-center justify-center py-12 text-sm text-gray-400">
+        No monthly data available
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      {/* Legend */}
+      <div className="flex items-center gap-6 text-xs">
+        <div className="flex items-center gap-2">
+          <span className="h-3 w-3 rounded-sm bg-green-500" />
+          <span className="text-gray-600 dark:text-gray-400">Revenue</span>
+        </div>
+        <div className="flex items-center gap-2">
+          <span className="h-3 w-3 rounded-sm bg-red-400" />
+          <span className="text-gray-600 dark:text-gray-400">Costs</span>
+        </div>
+      </div>
+
+      {/* Bars */}
+      <div className="flex items-end gap-3" style={{ height: '200px' }}>
+        {data.map((d, i) => {
+          const revHeight = (d.revenue / maxVal) * 100;
+          const costHeight = (d.costs / maxVal) * 100;
+          return (
+            <div
+              key={i}
+              className="flex flex-1 flex-col items-center justify-end gap-0.5 h-full"
+            >
+              {/* Revenue bar */}
+              <div
+                className="w-full max-w-[40px] rounded-t-sm bg-green-500 transition-all duration-300"
+                style={{ height: `${Math.max(revHeight, 1)}%` }}
+                title={`${d.month} Revenue: ${formatCurrency(d.revenue)}`}
+              />
+              {/* Costs bar */}
+              <div
+                className="w-full max-w-[40px] rounded-t-sm bg-red-400 transition-all duration-300"
+                style={{ height: `${Math.max(costHeight, 1)}%` }}
+                title={`${d.month} Costs: ${formatCurrency(d.costs)}`}
+              />
+              {/* Label */}
+              <span className="mt-1 text-[10px] font-medium text-gray-500 dark:text-gray-400">
+                {d.month}
+              </span>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+/* ── Revenue trend line (CSS) ──────────────────────── */
+
+function RevenueTrendLine({
+  data,
+}: {
+  data: { label: string; value: number }[];
+}) {
+  if (data.length < 2) {
+    return (
+      <div className="flex items-center justify-center py-8 text-sm text-gray-400">
+        Need at least 2 months of data for a trend line
+      </div>
+    );
+  }
+
+  const maxVal = Math.max(...data.map((d) => d.value), 1);
+  const minVal = Math.min(...data.map((d) => d.value), 0);
+  const range = maxVal - minVal || 1;
+  const yLabels: number[] = [];
+  const step = range / 4;
+  for (let i = 0; i <= 4; i++) {
+    yLabels.push(minVal + step * i);
+  }
+
+  return (
+    <div className="relative" style={{ height: '180px' }}>
+      {/* Y-axis labels */}
+      <div className="absolute left-0 top-0 flex h-full flex-col justify-between text-[10px] text-gray-400">
+        {yLabels
+          .slice()
+          .reverse()
+          .map((v, i) => (
+            <span key={i}>{formatCurrency(v)}</span>
+          ))}
+      </div>
+
+      {/* Chart area */}
+      <div className="relative ml-16 h-full">
+        {/* Grid lines */}
+        {yLabels.map((_, i) => (
+          <div
+            key={i}
+            className="absolute left-0 right-0 border-t border-dashed border-gray-200 dark:border-gray-700"
+            style={{ top: `${(i / (yLabels.length - 1)) * 100}%` }}
+          />
+        ))}
+
+        {/* Data points and line */}
+        <svg className="h-full w-full overflow-visible" preserveAspectRatio="none">
+          {/* Line */}
+          <polyline
+            points={data
+              .map((d, i) => {
+                const x = (i / (data.length - 1)) * 100;
+                const y = ((maxVal - d.value) / range) * 100;
+                return `${x},${y}`;
+              })
+              .join(' ')}
+            fill="none"
+            stroke="rgb(34, 197, 94)"
+            strokeWidth="2"
+            vectorEffect="non-scaling-stroke"
+          />
+          {/* Area fill */}
+          <polygon
+            points={[
+              `0,100`,
+              ...data.map((d, i) => {
+                const x = (i / (data.length - 1)) * 100;
+                const y = ((maxVal - d.value) / range) * 100;
+                return `${x},${y}`;
+              }),
+              `100,100`,
+            ].join(' ')}
+            fill="rgba(34, 197, 94, 0.1)"
+          />
+          {/* Dots */}
+          {data.map((d, i) => {
+            const x = (i / (data.length - 1)) * 100;
+            const y = ((maxVal - d.value) / range) * 100;
+            return (
+              <circle
+                key={i}
+                cx={x + '%'}
+                cy={y + '%'}
+                r="3"
+                fill="rgb(34, 197, 94)"
+                stroke="white"
+                strokeWidth="1.5"
+              />
+            );
+          })}
+        </svg>
+
+        {/* X-axis labels */}
+        <div className="flex justify-between text-[10px] text-gray-400">
+          {data.map((d, i) => (
+            <span key={i}>{d.label}</span>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/* ── Cost Breakdown ────────────────────────────────── */
+
+function CostBreakdown({
+  data,
+  totalCosts,
+}: {
+  data: { label: string; value: number; color: string }[];
+  totalCosts: number;
+}) {
+  const grandTotal = data.reduce((s, d) => s + d.value, 0) || 1;
+
+  return (
+    <div className="space-y-3">
+      {data.map((item) => {
+        const pct = (item.value / grandTotal) * 100;
+        return (
+          <div key={item.label}>
+            <div className="mb-1 flex items-center justify-between text-sm">
+              <span className="font-medium text-gray-700 dark:text-gray-300">{item.label}</span>
+              <span className="text-gray-500 dark:text-gray-400">
+                {formatCurrency(item.value)}
+                <span className="ml-1 text-xs">({formatPercent(pct)})</span>
+              </span>
+            </div>
+            <div className="h-2 w-full overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700">
+              <div
+                className={`h-full rounded-full transition-all duration-500 ${item.color}`}
+                style={{ width: `${pct}%` }}
+              />
+            </div>
+          </div>
+        );
+      })}
+      <div className="border-t border-gray-200 pt-2 dark:border-gray-700">
+        <div className="flex items-center justify-between text-sm font-semibold">
+          <span className="text-gray-900 dark:text-white">Total Costs</span>
+          <span className="text-gray-900 dark:text-white">{formatCurrency(totalCosts)}</span>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/* ── Main Component ────────────────────────────────── */
+
+export default function FinancialDashboard() {
+  const [orders, setOrders] = useState<RepairOrder[]>([]);
+  const [quotes, setQuotes] = useState<any[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [collectionMissing, setCollectionMissing] = useState(false);
+  const [dateRange, setDateRange] = useState<DateRange>('this_year');
+
+  const userId = pb.authStore.model?.id;
+
+  const fetchData = useCallback(async () => {
+    if (!userId) {
+      setError('You must be logged in to view financial data.');
+      setLoading(false);
+      return;
+    }
+
+    setLoading(true);
+    setError(null);
+    setCollectionMissing(false);
+
+    try {
+      const [roResult, quoteResult] = await Promise.allSettled([
+        pb.collection('repairOrders').getList(1, 500, {
+          filter: `userId = '${userId}'`,
+          sort: '-id',
+        }),
+        pb.collection('quotes').getList(1, 500, {
+          filter: `userId = '${userId}'`,
+          sort: '-id',
+          fields: 'id,status,total,createdAt,lastUpdated,created,updatedAt,updated,services',
+        }),
+      ]);
+
+      if (roResult.status === 'fulfilled') {
+        setOrders(roResult.value.items as unknown as RepairOrder[]);
+      } else {
+        logError('Failed to load repair orders for financial dashboard', roResult.reason);
+        if (isMissingCollectionError(roResult.reason)) {
+          setCollectionMissing(true);
+          setOrders([]);
+        } else {
+          setError('Financial data could not be loaded. Please refresh and try again.');
+        }
+      }
+
+      if (quoteResult.status === 'fulfilled') {
+        setQuotes(quoteResult.value.items as any[]);
+      } else {
+        setQuotes([]);
+      }
+    } catch {
+      setOrders([]);
+      setQuotes([]);
+    } finally {
+      setLoading(false);
+    }
+  }, [userId]);
+
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+
+  /* ── Filter and compute metrics ──────────────────── */
+
+  const filteredOrders = useMemo(() => {
+    const { start, end } = getDateRangeBounds(dateRange);
+    return orders.filter((o) => {
+      const dateStr = getOrderMetricDate(o);
+      if (!dateStr) return false;
+      const d = new Date(dateStr);
+      return d >= start && d <= end;
+    });
+  }, [orders, dateRange]);
+
+  const metrics = useMemo(() => calculateMetrics(filteredOrders), [filteredOrders]);
+
+  const todayMetrics = useMemo(() => {
+    const { start, end } = getTodayBounds();
+    const todayOrders = orders.filter((o) => isWithinBounds(getOrderMetricDate(o), start, end));
+    const completedToday = todayOrders.filter((o) => o.status === 'completed' || o.status === 'final_close' || o.status === 'delivered');
+    const todayQuotes = quotes.filter((q) => isWithinBounds(getQuoteMetricDate(q), start, end));
+    const approvedServiceCount = todayQuotes.reduce(
+      (sum, q) => sum + parseQuoteServices(q.services).filter((svc) => svc.customerDecision === 'approved' || svc.approved === true).length,
+      0
+    );
+
+    return {
+      customerPayGP: completedToday.reduce((sum, o) => sum + customerPayGpOf(o), 0),
+      quoteTotal: todayQuotes.reduce((sum, q) => sum + (fNum(q.total)), 0),
+      approvedServicesRevenue: todayQuotes.reduce((sum, q) => sum + approvedQuoteServicesTotal(q), 0),
+      quoteCount: todayQuotes.length,
+      approvedServiceCount,
+    };
+  }, [orders, quotes]);
+
+  const pendingRevenue = useMemo(() => {
+    const approvedQuotes = quotes.filter((q) => q.status === 'approved');
+    return approvedQuotes.reduce((sum, q) => sum + (q.total || 0), 0);
+  }, [quotes]);
+
+  const approvedQuoteCount = useMemo(() => {
+    return quotes.filter((q) => q.status === 'approved').length;
+  }, [quotes]);
+
+  /* ── Render ──────────────────────────────────────── */
+
+  return (
+    <RequireOwnerRole>
+      <div className="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
+      {/* Header */}
+      <div className="mb-8 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+        <div>
+          <h1 className="text-2xl font-bold text-gray-900 dark:text-white">
+            Financial Dashboard
+          </h1>
+          <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
+            Revenue, costs, and performance metrics for your shop.
+          </p>
+        </div>
+        <DateRangeFilter selected={dateRange} onChange={setDateRange} />
+      </div>
+
+      {/* Loading */}
+      {loading && <LoadingSkeleton />}
+
+      {/* Error */}
+      {!loading && error && <ErrorState message={error} onRetry={fetchData} />}
+
+      {/* Setup state for missing collection */}
+      {!loading && !error && collectionMissing && (
+        <div className="mb-6">
+          <SetupBanner collectionName="repairOrders" />
+        </div>
+      )}
+
+      {/* Content */}
+      {!loading && !error && (
+        <>
+          {orders.length === 0 && !collectionMissing ? (
+            <EmptyState />
+          ) : (
+            <div className="space-y-6">
+              <ExecutiveSnapshot metrics={metrics} />
+              <TodayStrip todayMetrics={todayMetrics} />
+
+              <div className="grid grid-cols-1 gap-6 lg:grid-cols-[1.2fr_0.8fr]">
+                <div className="rounded-xl bg-white p-6 shadow-sm ring-1 ring-gray-200 dark:bg-gray-800 dark:ring-gray-700">
+                  <div className="mb-5 flex items-center justify-between gap-4">
+                    <div>
+                      <h2 className="text-lg font-semibold text-gray-900 dark:text-white">Profit Breakdown</h2>
+                      <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">Customer pay, warranty, and cost mix for the selected period.</p>
+                    </div>
+                    <Wallet className="h-6 w-6 text-green-500" />
+                  </div>
+                  <div className="mb-6 grid grid-cols-1 gap-3 sm:grid-cols-3">
+                    <div className="rounded-lg bg-green-50 p-4 dark:bg-green-900/20">
+                      <p className="text-xs font-medium uppercase tracking-wide text-green-700 dark:text-green-300">Customer Pay GP</p>
+                      <p className="mt-2 text-xl font-bold text-gray-900 dark:text-white">{formatCurrency(metrics.totalCustomerPayGP)}</p>
+                    </div>
+                    <div className="rounded-lg bg-orange-50 p-4 dark:bg-orange-900/20">
+                      <p className="text-xs font-medium uppercase tracking-wide text-orange-700 dark:text-orange-300">Warranty GP</p>
+                      <p className="mt-2 text-xl font-bold text-gray-900 dark:text-white">{formatCurrency(metrics.totalWarrantyGP)}</p>
+                    </div>
+                    <div className="rounded-lg bg-blue-50 p-4 dark:bg-blue-900/20">
+                      <p className="text-xs font-medium uppercase tracking-wide text-blue-700 dark:text-blue-300">Avg Job Value</p>
+                      <p className="mt-2 text-xl font-bold text-gray-900 dark:text-white">{formatCurrency(metrics.avgJobValue)}</p>
+                    </div>
+                  </div>
+                  <CostBreakdown data={metrics.costBreakdown} totalCosts={metrics.totalCosts} />
+                </div>
+
+                <div className="space-y-6">
+                  <div className="rounded-xl bg-white p-6 shadow-sm ring-1 ring-gray-200 dark:bg-gray-800 dark:ring-gray-700">
+                    <h2 className="text-lg font-semibold text-gray-900 dark:text-white">Work Mix</h2>
+                    <div className="mt-4 space-y-3">
+                      <div className="flex items-center justify-between rounded-lg bg-gray-50 p-3 dark:bg-gray-900/40">
+                        <span className="text-sm text-gray-600 dark:text-gray-400">Completed jobs</span>
+                        <span className="font-semibold text-gray-900 dark:text-white">{metrics.completedJobs}</span>
+                      </div>
+                      <div className="flex items-center justify-between rounded-lg bg-gray-50 p-3 dark:bg-gray-900/40">
+                        <span className="text-sm text-gray-600 dark:text-gray-400">In progress in range</span>
+                        <span className="font-semibold text-gray-900 dark:text-white">{Math.max(0, filteredOrders.length - metrics.completedJobs)}</span>
+                      </div>
+                      <div className="flex items-center justify-between rounded-lg bg-gray-50 p-3 dark:bg-gray-900/40">
+                        <span className="text-sm text-gray-600 dark:text-gray-400">Profit margin</span>
+                        <span className={metrics.profitMargin >= 20 ? 'font-semibold text-green-600 dark:text-green-400' : 'font-semibold text-amber-600 dark:text-amber-400'}>{formatPercent(metrics.profitMargin)}</span>
+                      </div>
+                    </div>
+                  </div>
+
+                  {pendingRevenue > 0 && (
+                    <div className="rounded-xl bg-indigo-50 p-6 shadow-sm ring-1 ring-indigo-100 dark:bg-indigo-900/20 dark:ring-indigo-800">
+                      <div className="mb-4 flex items-center gap-2">
+                        <FileText className="h-5 w-5 text-indigo-500" />
+                        <h2 className="text-lg font-semibold text-gray-900 dark:text-white">Approved Quote Pipeline</h2>
+                      </div>
+                      <p className="text-3xl font-bold text-gray-900 dark:text-white">{formatCurrency(pendingRevenue)}</p>
+                      <p className="mt-2 text-sm text-indigo-700 dark:text-indigo-300">{approvedQuoteCount} approved quote{approvedQuoteCount !== 1 ? 's' : ''} waiting to convert.</p>
+                    </div>
+                  )}
+                </div>
+              </div>
+
+              {/* ── Customer Metrics ── */}
+              <div>
+                <h2 className="mb-4 text-lg font-semibold text-gray-900 dark:text-white">
+                  Customer Metrics
+                </h2>
+                <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
+                  <StatCard
+                    icon={Users}
+                    label="Customer LTV"
+                    value={formatCurrency(metrics.customerLTV)}
+                    bg="bg-indigo-500"
+                  />
+                  <StatCard
+                    icon={Clock}
+                    label="Avg Return Time"
+                    value={formatDays(metrics.avgReturnTime)}
+                    bg="bg-teal-500"
+                  />
+                  <StatCard
+                    icon={Star}
+                    label="Satisfaction"
+                    value={formatPercent(metrics.customerSatisfaction)}
+                    bg="bg-pink-500"
+                    trend="Estimated"
+                    trendUp
+                  />
+                </div>
+              </div>
+
+              {/* ── Charts Row ── */}
+              <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
+                {/* Monthly Revenue vs Costs */}
+                <div className="rounded-xl bg-white p-6 shadow-sm ring-1 ring-gray-200 dark:bg-gray-800 dark:ring-gray-700">
+                  <div className="mb-4 flex items-center gap-2">
+                    <BarChart3 className="h-5 w-5 text-green-500" />
+                    <h3 className="text-base font-semibold text-gray-900 dark:text-white">
+                      Monthly Revenue vs Costs
+                    </h3>
+                  </div>
+                  {metrics.monthlyRevenue.length === 0 ? (
+                    <div className="flex items-center justify-center py-12 text-sm text-gray-400">
+                      No completed jobs in this period
+                    </div>
+                  ) : (
+                    <MonthlyBarChart data={metrics.monthlyRevenue} />
+                  )}
+                </div>
+
+                {/* Revenue Trend */}
+                <div className="rounded-xl bg-white p-6 shadow-sm ring-1 ring-gray-200 dark:bg-gray-800 dark:ring-gray-700">
+                  <div className="mb-4 flex items-center gap-2">
+                    <TrendingUp className="h-5 w-5 text-green-500" />
+                    <h3 className="text-base font-semibold text-gray-900 dark:text-white">
+                      Revenue Trend
+                    </h3>
+                  </div>
+                  {metrics.revenueTrend.length < 2 ? (
+                    <div className="flex items-center justify-center py-12 text-sm text-gray-400">
+                      Need at least 2 months of data for a trend line
+                    </div>
+                  ) : (
+                    <RevenueTrendLine data={metrics.revenueTrend} />
+                  )}
+                </div>
+              </div>
+
+            </div>
+          )}
+        </>
+      )}
+    </div>
+    </RequireOwnerRole>
+  );
+}
diff --git a/src/pages/Invoices.tsx b/src/pages/Invoices.tsx
new file mode 100644
index 0000000..f50f69c
--- /dev/null
+++ b/src/pages/Invoices.tsx
@@ -0,0 +1,1324 @@
+import { useState, useCallback, useRef } from 'react';
+import { pb } from '../lib/pocketbase';
+import { RequireOwnerRole } from '../lib/rbx';
+import {
+  Plus,
+  AlertTriangle,
+  Search,
+  Receipt,
+  X,
+  Trash2,
+  Edit3,
+  Eye,
+  FileText,
+  Printer,
+  Loader2,
+  ChevronDown,
+} from 'lucide-react';
+import LoadingSpinner from '../components/ui/LoadingSpinner';
+import SetupBanner from '../components/SetupBanner';
+import { useToast } from '../components/ui/Toast';
+import type { Invoice, InvoiceItem } from '../types';
+import { formatPhoneInput, formatPhoneDisplay } from '../lib/phone';
+import { logError } from '../lib/userMessages';
+import { usePagedList } from '../hooks/usePagedList';
+import { ListError } from '../components/ui/ListError';
+import { invoiceWriteSchema } from '../schemas/invoice';
+import { zodErrorsToFormFields } from '../schemas/index';
+
+/* ── Types ─────────────────────────────────────────── */
+
+interface InvoiceRecord extends Invoice {
+  id: string;
+  userId?: string;
+}
+
+interface RepairOrderRecord {
+  id: string;
+  customerName: string;
+  customerPhone: string;
+  customerEmail: string;
+  vehicleInfo: string;
+  vin: string;
+  status: string;
+  roNumber: string;
+  total: number;
+  created: string;
+}
+
+/* ── Constants ─────────────────────────────────────── */
+
+const DEFAULT_TAX_RATE = 0.08; // 8% default
+
+function getTaxRate(): number {
+  try {
+    const raw = localStorage.getItem('spq-settings');
+    if (raw) {
+      const s = JSON.parse(raw);
+      return s.taxRate ? s.taxRate / 100 : DEFAULT_TAX_RATE;
+    }
+  } catch {}
+  return DEFAULT_TAX_RATE;
+}
+
+// Escape user-supplied strings before injecting into the print-window HTML
+// template to prevent stored XSS (customer name, notes, descriptions, etc.).
+function escapeHtml(value: unknown): string {
+  return String(value ?? '')
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;');
+}
+
+const STATUS_STYLES: Record<string, string> = {
+  draft: 'bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300',
+  sent: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/40 dark:text-yellow-300',
+  paid: 'bg-green-100 text-green-800 dark:bg-green-900/40 dark:text-green-300',
+  overdue: 'bg-red-100 text-red-800 dark:bg-red-900/40 dark:text-red-300',
+};
+
+/* ── Helpers ───────────────────────────────────────── */
+
+const fmtCurrency = (n: number) =>
+  new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(n);
+
+const fmtDate = (iso: string) =>
+  new Intl.DateTimeFormat('en-US', { month: 'short', day: 'numeric', year: 'numeric' }).format(
+    new Date(iso),
+  );
+
+const thirtyDaysFromNow = () => {
+  const d = new Date();
+  d.setDate(d.getDate() + 30);
+  return d.toISOString().slice(0, 10);
+};
+
+function emptyItem(): InvoiceItem {
+  return { description: '', quantity: 1, unitPrice: 0, total: 0 };
+}
+
+function emptyInvoice() {
+  return {
+    customerName: '',
+    customerEmail: '',
+    customerPhone: '',
+    vehicleInfo: '',
+    items: [emptyItem()],
+    subtotal: 0,
+    tax: 0,
+    total: 0,
+    status: 'draft' as 'draft' | 'sent' | 'paid' | 'overdue',
+    dueDate: thirtyDaysFromNow(),
+    notes: '',
+  };
+}
+
+function recalcItems(items: InvoiceItem[]): { items: InvoiceItem[]; subtotal: number } {
+  let subtotal = 0;
+  const updated = items.map((it) => {
+    const total = it.quantity * it.unitPrice;
+    subtotal += total;
+    return { ...it, total };
+  });
+  return { items: updated, subtotal };
+}
+
+function calcTotal(subtotal: number): { tax: number; total: number } {
+  const taxRate = getTaxRate();
+  const tax = subtotal * taxRate;
+  return { tax, total: subtotal + tax };
+}
+
+/* ── StatusBadge ──────────────────────────────────────── */
+
+function StatusBadge({ status }: { status: string }) {
+  const label: Record<string, string> = {
+    draft: 'Draft',
+    sent: 'Sent',
+    paid: 'Paid',
+    overdue: 'Overdue',
+  };
+  return (
+    <span
+      className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${
+        STATUS_STYLES[status] || STATUS_STYLES.draft
+      }`}
+    >
+      {label[status] || status}
+    </span>
+  );
+}
+
+/* ── Empty state ──────────────────────────────────────── */
+
+function EmptyState({ onCreate }: { onCreate: () => void }) {
+  return (
+    <div className="flex flex-col items-center justify-center py-20 text-center">
+      <div className="mb-6 flex h-24 w-24 items-center justify-center rounded-full bg-blue-50 dark:bg-blue-900/20">
+        <Receipt className="h-12 w-12 text-blue-500 dark:text-blue-400" />
+      </div>
+      <h3 className="mb-2 text-lg font-semibold text-gray-900 dark:text-white">No invoices on file</h3>
+      <p className="mb-8 max-w-sm text-sm text-gray-500 dark:text-gray-400">
+        Create your first invoice from a repair order or enter one manually to track billing, payment status, and customer balances.
+      </p>
+      <button
+        onClick={onCreate}
+        className="inline-flex items-center gap-2 rounded-lg bg-green-600 px-5 py-2.5 text-sm font-medium text-white shadow-sm transition-colors hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900"
+      >
+        <Plus className="h-4 w-4" />
+        Create Invoice
+      </button>
+    </div>
+  );
+}
+
+/* ── Error state ──────────────────────────────────────── */
+
+/* ── Table skeleton ───────────────────────────────────── */
+
+function TableSkeleton() {
+  return (
+    <div className="animate-pulse rounded-xl bg-white ring-1 ring-gray-200 dark:bg-gray-800 dark:ring-gray-700">
+      <div className="border-b border-gray-200 px-6 py-4 dark:border-gray-700">
+        <div className="h-6 w-40 rounded bg-gray-200 dark:bg-gray-700" />
+      </div>
+      <div className="space-y-3 p-6">
+        {Array.from({ length: 5 }).map((_, i) => (
+          <div key={i} className="flex gap-4">
+            <div className="h-4 w-20 rounded bg-gray-200 dark:bg-gray-700" />
+            <div className="h-4 flex-1 rounded bg-gray-200 dark:bg-gray-700" />
+            <div className="h-4 w-24 rounded bg-gray-200 dark:bg-gray-700" />
+            <div className="h-4 w-20 rounded bg-gray-200 dark:bg-gray-700" />
+            <div className="h-4 w-28 rounded bg-gray-200 dark:bg-gray-700" />
+            <div className="h-4 w-24 rounded bg-gray-200 dark:bg-gray-700" />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+/* ════════════════════════════════════════════════════════
+   MAIN INVOICES COMPONENT
+   ════════════════════════════════════════════════════════ */
+
+export default function Invoices() {
+  const { showToast } = useToast();
+  const userId = pb.authStore.model?.id;
+
+  /* ── State ────────────────────────────────────────── */
+
+  const [collectionMissing, setCollectionMissing] = useState(false);
+  const [search, setSearch] = useState('');
+
+  // Modal state
+  const [showModal, setShowModal] = useState(false);
+  const [editingId, setEditingId] = useState<string | null>(null);
+  const [saving, setSaving] = useState(false);
+
+  // Form state
+  const [form, setForm] = useState(emptyInvoice());
+  const [formErrors, setFormErrors] = useState<Record<string, string>>({});
+
+  // Delete confirm
+  const [deleteTarget, setDeleteTarget] = useState<InvoiceRecord | null>(null);
+  const [deleting, setDeleting] = useState(false);
+
+  // Print preview
+  const [previewInvoice, setPreviewInvoice] = useState<InvoiceRecord | null>(null);
+
+  // RO dropdown for "create from RO"
+  const [showROPicker, setShowROPicker] = useState(false);
+  const [repairOrders, setRepairOrders] = useState<RepairOrderRecord[]>([]);
+  const [loadingROs, setLoadingROs] = useState(false);
+  const [roSearch, setRoSearch] = useState('');
+
+  /* ── Data fetching (paginated) ────────────────────── */
+
+  const fetchInvoicesPage = useCallback(async (page: number, perPage: number) => {
+    if (!userId) return { items: [], page: 1, perPage, totalItems: 0, totalPages: 1 };
+    setCollectionMissing(false);
+    const records = await pb.collection('invoices').getList(page, perPage, {
+      filter: `userId = '${userId}'`,
+      sort: '-id',
+    });
+    return {
+      items: records.items as unknown as InvoiceRecord[],
+      page: records.page,
+      perPage: records.perPage,
+      totalItems: records.totalItems,
+      totalPages: records.totalPages,
+    };
+  }, [userId]);
+
+  const {
+    items: invoices,
+    loading,
+    hasMore,
+    loadMore,
+    refresh: refreshInvoices,
+    error: loadError,
+  } = usePagedList<InvoiceRecord>(fetchInvoicesPage, 50);
+
+  /* ── Filter by search ─────────────────────────────── */
+
+  const filtered = invoices.filter((inv) => {
+    if (!search) return true;
+    const q = search.toLowerCase();
+    return inv.customerName?.toLowerCase().includes(q);
+  });
+
+  /* ── Form helpers ─────────────────────────────────── */
+
+  const validate = (): boolean => {
+    const parsed = invoiceWriteSchema.safeParse(form);
+    if (parsed.success) {
+      setFormErrors({});
+      return true;
+    }
+    setFormErrors(zodErrorsToFormFields(parsed.error));
+    return false;
+  };
+
+  const handleField = (field: string, value: string) => {
+    setForm((prev) => ({ ...prev, [field]: value }));
+    if (formErrors[field]) setFormErrors((prev) => ({ ...prev, [field]: '' }));
+  };
+
+  const handleItemField = (idx: number, field: keyof InvoiceItem, value: string | number) => {
+    setForm((prev) => {
+      const items = prev.items.map((it, i) => (i === idx ? { ...it, [field]: value } : it));
+      const { items: updatedItems, subtotal } = recalcItems(items);
+      const { tax, total } = calcTotal(subtotal);
+      return { ...prev, items: updatedItems, subtotal, tax, total };
+    });
+    if (formErrors.items) setFormErrors((prev) => ({ ...prev, items: '' }));
+  };
+
+  const addItem = () => {
+    setForm((prev) => ({
+      ...prev,
+      items: [...prev.items, emptyItem()],
+    }));
+  };
+
+  const removeItem = (idx: number) => {
+    setForm((prev) => {
+      if (prev.items.length <= 1) return prev;
+      const items = prev.items.filter((_, i) => i !== idx);
+      const { items: updatedItems, subtotal } = recalcItems(items);
+      const { tax, total } = calcTotal(subtotal);
+      return { ...prev, items: updatedItems, subtotal, tax, total };
+    });
+  };
+
+  const openCreate = () => {
+    setEditingId(null);
+    setForm(emptyInvoice());
+    setFormErrors({});
+    setShowModal(true);
+  };
+
+  const openEdit = (inv: InvoiceRecord) => {
+    setEditingId(inv.id);
+    setForm({
+      customerName: inv.customerName || '',
+      customerEmail: inv.customerEmail || '',
+      customerPhone: inv.customerPhone || '',
+      vehicleInfo: inv.vehicleInfo || '',
+      items: inv.items?.length ? inv.items : [emptyItem()],
+      subtotal: inv.subtotal || 0,
+      tax: inv.tax || 0,
+      total: inv.total || 0,
+      status: inv.status || 'draft',
+      dueDate: inv.dueDate || thirtyDaysFromNow(),
+      notes: inv.notes || '',
+    });
+    setFormErrors({});
+    setShowModal(true);
+  };
+
+  /* ── Save ──────────────────────────────────────────── */
+
+  const handleSave = async () => {
+    if (!validate()) return;
+    setSaving(true);
+    try {
+      const payload = {
+        ...form,
+        userId,
+      };
+      if (editingId) {
+        await pb.collection('invoices').update(editingId, payload);
+        showToast('Invoice updated successfully', 'success');
+      } else {
+        await pb.collection('invoices').create(payload);
+        showToast('Invoice created successfully', 'success');
+      }
+      setShowModal(false);
+      refreshInvoices();
+    } catch (err: unknown) {
+      logError('Failed to save invoice', err);
+      showToast('Invoice could not be saved. Please try again.', 'error');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  /* ── Delete ────────────────────────────────────────── */
+
+  const handleDelete = async () => {
+    if (!deleteTarget) return;
+    setDeleting(true);
+    try {
+      await pb.collection('invoices').delete(deleteTarget.id);
+      showToast('Invoice deleted', 'success');
+      setDeleteTarget(null);
+      refreshInvoices();
+    } catch (err: unknown) {
+      logError('Failed to delete invoice', err);
+      showToast('Invoice could not be deleted. Please try again.', 'error');
+    } finally {
+      setDeleting(false);
+    }
+  };
+
+  /* ── Status update ─────────────────────────────────── */
+
+  const updateStatus = async (inv: InvoiceRecord, status: string) => {
+    try {
+      await pb.collection('invoices').update(inv.id, { status });
+      showToast(`Invoice marked as ${status}`, 'success');
+      refreshInvoices();
+    } catch (err: unknown) {
+      logError('Failed to update invoice status', err);
+      showToast('Invoice status could not be updated. Please try again.', 'error');
+    }
+  };
+
+  /* ── Create from RO ────────────────────────────────── */
+
+  const openROPicker = async () => {
+    setShowROPicker(true);
+    setRoSearch('');
+    setLoadingROs(true);
+    try {
+      const records = await pb.collection('repairOrders').getList(1, 100, {
+        filter: userId ? `userId = '${userId}'` : '',
+        sort: '-id',
+        fields: 'id,customerName,customerPhone,customerEmail,vehicleInfo,vin,status,roNumber,total,created',
+      });
+      setRepairOrders(records.items as unknown as RepairOrderRecord[]);
+    } catch {
+      setRepairOrders([]);
+    } finally {
+      setLoadingROs(false);
+    }
+  };
+
+  const createFromRO = (ro: RepairOrderRecord) => {
+    setForm({
+      customerName: ro.customerName || '',
+      customerEmail: ro.customerEmail || '',
+      customerPhone: ro.customerPhone || '',
+      vehicleInfo: ro.vehicleInfo || `${ro.vehicleInfo}${ro.vin ? ` (VIN: ${ro.vin})` : ''}`,
+      items: [emptyItem()],
+      subtotal: 0,
+      tax: 0,
+      total: 0,
+      status: 'draft',
+      dueDate: thirtyDaysFromNow(),
+      notes: `Generated from RO #${ro.roNumber || ro.id.slice(0, 8)}`,
+    });
+    setEditingId(null);
+    setFormErrors({});
+    setShowROPicker(false);
+    setShowModal(true);
+  };
+
+  const filteredROs = repairOrders.filter(
+    (ro) =>
+      !roSearch ||
+      ro.customerName?.toLowerCase().includes(roSearch.toLowerCase()) ||
+      ro.roNumber?.toLowerCase().includes(roSearch.toLowerCase()) ||
+      ro.vehicleInfo?.toLowerCase().includes(roSearch.toLowerCase()),
+  );
+
+  /* ── Print preview ─────────────────────────────────── */
+
+  const printRef = useRef<HTMLDivElement>(null);
+
+  const handlePrint = () => {
+    const printWindow = window.open('', '_blank');
+    if (!printWindow || !previewInvoice) return;
+    const inv = previewInvoice;
+    const items = inv.items || [];
+    const subtotal = items.reduce((s, it) => s + it.quantity * it.unitPrice, 0);
+    const tax = subtotal * getTaxRate();
+    const total = subtotal + tax;
+
+    printWindow.document.write(`
+      <!DOCTYPE html>
+      <html>
+      <head>
+        <title>Invoice - ${escapeHtml(inv.customerName)}</title>
+        <style>
+          @page { margin: 0.75in; }
+          * { box-sizing: border-box; margin: 0; padding: 0; }
+          body { font-family: 'Helvetica Neue', Arial, sans-serif; color: #111; line-height: 1.5; padding: 40px; }
+          .header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 40px; }
+          .header h1 { font-size: 28px; color: #059669; margin-bottom: 4px; }
+          .header .sub { color: #6b7280; font-size: 13px; }
+          .details { display: flex; justify-content: space-between; margin-bottom: 40px; }
+          .details h3 { font-size: 14px; color: #6b7280; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; }
+          .details p { font-size: 14px; }
+          table { width: 100%; border-collapse: collapse; margin-bottom: 30px; }
+          th { background: #f3f4f6; text-align: left; padding: 10px 12px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: #6b7280; }
+          td { padding: 10px 12px; border-bottom: 1px solid #e5e7eb; font-size: 14px; }
+          td:last-child, th:last-child { text-align: right; }
+          td:nth-child(2), th:nth-child(2) { text-align: center; }
+          td:nth-child(3), th:nth-child(3) { text-align: right; }
+          .totals { margin-left: auto; width: 300px; }
+          .totals .row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 14px; }
+          .totals .grand { font-size: 18px; font-weight: bold; border-top: 2px solid #111; padding-top: 8px; margin-top: 4px; color: #059669; }
+          .notes { margin-top: 40px; padding-top: 20px; border-top: 1px solid #e5e7eb; }
+          .notes h4 { font-size: 13px; color: #6b7280; margin-bottom: 6px; }
+          .notes p { font-size: 13px; color: #374151; }
+          .badge { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 11px; font-weight: 600; text-transform: uppercase; }
+          .badge-draft { background: #f3f4f6; color: #6b7280; }
+          .badge-sent { background: #fef9c3; color: #a16207; }
+          .badge-paid { background: #d1fae5; color: #059669; }
+          .badge-overdue { background: #fee2e2; color: #dc2626; }
+          @media print { body { padding: 0; } }
+        </style>
+      </head>
+      <body>
+        <div class="header">
+          <div>
+            <h1>INVOICE</h1>
+            <p class="sub">${escapeHtml(inv.customerName)}</p>
+          </div>
+          <div style="text-align:right">
+            <span class="badge badge-${escapeHtml(inv.status)}">${escapeHtml(inv.status)}</span>
+            <p class="sub" style="margin-top:4px">Invoice #${escapeHtml(inv.id.slice(0, 8).toUpperCase())}</p>
+          </div>
+        </div>
+
+        <div class="details">
+          <div>
+            <h3>Bill To</h3>
+            <p style="font-weight:600">${escapeHtml(inv.customerName)}</p>
+            ${inv.customerPhone ? `<p>${escapeHtml(formatPhoneDisplay(inv.customerPhone))}</p>` : ''}
+            ${inv.customerEmail ? `<p>${escapeHtml(inv.customerEmail)}</p>` : ''}
+          </div>
+          <div style="text-align:right">
+            <h3>Invoice Details</h3>
+            <p>Date: ${escapeHtml(fmtDate(inv.created || new Date().toISOString()))}</p>
+            <p>Due: ${escapeHtml(fmtDate(inv.dueDate))}</p>
+            <p>Vehicle: ${escapeHtml(inv.vehicleInfo || '—')}</p>
+          </div>
+        </div>
+
+        <table>
+          <thead>
+            <tr>
+              <th style="width:55%">Description</th>
+              <th style="width:15%">Qty</th>
+              <th style="width:15%">Unit Price</th>
+              <th style="width:15%">Total</th>
+            </tr>
+          </thead>
+          <tbody>
+            ${items
+              .map(
+                (it) => `
+              <tr>
+                <td>${escapeHtml(it.description || '—')}</td>
+                <td>${escapeHtml(it.quantity)}</td>
+                <td>${escapeHtml(fmtCurrency(it.unitPrice))}</td>
+                <td>${escapeHtml(fmtCurrency(it.quantity * it.unitPrice))}</td>
+              </tr>`,
+              )
+              .join('')}
+          </tbody>
+        </table>
+
+        <div class="totals">
+          <div class="row"><span>Subtotal</span><span>${escapeHtml(fmtCurrency(subtotal))}</span></div>
+          <div class="row"><span>Tax (${(getTaxRate() * 100).toFixed(1)}%)</span><span>${escapeHtml(fmtCurrency(tax))}</span></div>
+          <div class="row grand"><span>Total</span><span>${escapeHtml(fmtCurrency(total))}</span></div>
+        </div>
+
+        ${inv.notes ? `<div class="notes"><h4>Notes</h4><p>${escapeHtml(inv.notes)}</p></div>` : ''}
+
+        <div style="text-align:center;margin-top:60px;font-size:12px;color:#9ca3af">
+          Thank you for your business!
+        </div>
+
+        <script>window.print();</script>
+      </body>
+      </html>
+    `);
+    printWindow.document.close();
+  };
+
+  /* ── Render ───────────────────────────────────────── */
+
+  return (
+    <RequireOwnerRole>
+      <div className="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
+      {/* ── Header ──────────────────────────────────── */}
+      <div className="mb-8 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+        <div>
+          <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Invoices</h1>
+          <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
+            Manage and send invoices to your customers.
+          </p>
+        </div>
+        <div className="flex flex-wrap gap-3">
+          <button
+            onClick={openROPicker}
+            className="inline-flex items-center gap-2 rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm transition-colors hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 dark:focus:ring-offset-gray-900"
+          >
+            <FileText className="h-4 w-4" />
+            From RO
+          </button>
+          <button
+            onClick={openCreate}
+            className="inline-flex items-center gap-2 rounded-lg bg-green-600 px-5 py-2.5 text-sm font-medium text-white shadow-sm transition-colors hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900"
+          >
+            <Plus className="h-4 w-4" />
+            New Invoice
+          </button>
+        </div>
+      </div>
+
+      {/* ── Search ──────────────────────────────────── */}
+      {!loading && !loadError && invoices.length > 0 && (
+        <div className="mb-6">
+          <div className="relative max-w-md">
+            <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400" />
+            <input
+              type="text"
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              placeholder="Search by customer name..."
+              className="w-full rounded-lg border border-gray-300 bg-white py-2.5 pl-10 pr-4 text-sm text-gray-900 placeholder-gray-400 focus:border-green-500 focus:outline-none focus:ring-1 focus:ring-green-500 dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:placeholder-gray-500"
+            />
+          </div>
+        </div>
+      )}
+
+      {/* ── States ──────────────────────────────────── */}
+      {loading && <TableSkeleton />}
+
+      {!loading && loadError && <ListError title="Unable to load invoices" message="Failed to load invoices. Check your connection and try again." onRetry={refreshInvoices} />}
+
+      {/* Setup state for missing collection */}
+      {!loading && !loadError && collectionMissing && (
+        <div className="mb-6">
+          <SetupBanner collectionName="invoices" />
+        </div>
+      )}
+
+      {!loading && !loadError && !collectionMissing && filtered.length === 0 && !search && (
+        <EmptyState onCreate={openCreate} />
+      )}
+
+      {!loading && !loadError && filtered.length === 0 && search && (
+        <div className="flex flex-col items-center justify-center py-20 text-center">
+          <Search className="mb-4 h-12 w-12 text-gray-300 dark:text-gray-600" />
+          <h3 className="text-lg font-semibold text-gray-900 dark:text-white">No matching invoices</h3>
+          <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
+            No invoice records matched "{search}".
+          </p>
+        </div>
+      )}
+
+      {/* ── Invoice table ────────────────────────────── */}
+      {!loading && !loadError && filtered.length > 0 && (
+        <div className="rounded-xl bg-white ring-1 ring-gray-200 dark:bg-gray-800 dark:ring-gray-700">
+          {/* Desktop table */}
+          <div className="hidden overflow-x-auto md:block">
+            <table className="w-full text-left text-sm">
+              <thead>
+                <tr className="border-b border-gray-200 text-xs uppercase tracking-wide text-gray-500 dark:border-gray-700 dark:text-gray-400">
+                  <th className="px-6 py-3 font-medium">Invoice #</th>
+                  <th className="px-6 py-3 font-medium">Customer</th>
+                  <th className="px-6 py-3 font-medium">Total</th>
+                  <th className="px-6 py-3 font-medium">Status</th>
+                  <th className="px-6 py-3 font-medium">Date</th>
+                  <th className="px-6 py-3 font-medium">Due Date</th>
+                  <th className="px-6 py-3 font-medium">Actions</th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-gray-200 dark:divide-gray-700">
+                {filtered.map((inv) => (
+                  <tr key={inv.id} className="transition-colors hover:bg-gray-50 dark:hover:bg-gray-700/50">
+                    <td className="px-6 py-4 font-mono text-xs text-gray-500 dark:text-gray-400">
+                      #{inv.id.slice(0, 8).toUpperCase()}
+                    </td>
+                    <td className="px-6 py-4 font-medium text-gray-900 dark:text-white">
+                      {inv.customerName || '—'}
+                    </td>
+                    <td className="px-6 py-4 font-medium text-gray-900 dark:text-white">
+                      {fmtCurrency(inv.total || 0)}
+                    </td>
+                    <td className="px-6 py-4">
+                      <StatusBadge status={inv.status} />
+                    </td>
+                    <td className="px-6 py-4 text-gray-600 dark:text-gray-400">
+                      {fmtDate(inv.created)}
+                    </td>
+                    <td className="px-6 py-4 text-gray-600 dark:text-gray-400">
+                      {fmtDate(inv.dueDate)}
+                    </td>
+                    <td className="px-6 py-4">
+                      <div className="flex items-center gap-2">
+                        <button
+                          onClick={() => setPreviewInvoice(inv)}
+                          className="rounded p-1 text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600 dark:hover:bg-gray-700 dark:hover:text-gray-300"
+                          title="Preview"
+                        >
+                          <Eye className="h-4 w-4" />
+                        </button>
+                        <button
+                          onClick={() => openEdit(inv)}
+                          className="rounded p-1 text-gray-400 transition-colors hover:bg-gray-100 hover:text-blue-600 dark:hover:bg-gray-700 dark:hover:text-blue-400"
+                          title="Edit"
+                        >
+                          <Edit3 className="h-4 w-4" />
+                        </button>
+                        {/* Quick status change */}
+                        <div className="relative group">
+                          <button
+                            className="rounded p-1 text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600 dark:hover:bg-gray-700 dark:hover:text-gray-300"
+                            title="Change status"
+                          >
+                            <ChevronDown className="h-4 w-4" />
+                          </button>
+                          <div className="absolute right-0 top-full z-20 mt-1 hidden min-w-[120px] rounded-lg border border-gray-200 bg-white py-1 shadow-lg dark:border-gray-600 dark:bg-gray-800 group-hover:block">
+                            {['draft', 'sent', 'paid', 'overdue'].map((s) => (
+                              <button
+                                key={s}
+                                onClick={() => updateStatus(inv, s)}
+                                className={`block w-full px-3 py-1.5 text-left text-xs transition-colors hover:bg-gray-100 dark:hover:bg-gray-700 ${
+                                  inv.status === s ? 'font-semibold text-green-600' : 'text-gray-700 dark:text-gray-300'
+                                }`}
+                              >
+                                {s.charAt(0).toUpperCase() + s.slice(1)}
+                              </button>
+                            ))}
+                          </div>
+                        </div>
+                        <button
+                          onClick={() => setDeleteTarget(inv)}
+                          className="rounded p-1 text-gray-400 transition-colors hover:bg-gray-100 hover:text-red-600 dark:hover:bg-gray-700 dark:hover:text-red-400"
+                          title="Delete"
+                        >
+                          <Trash2 className="h-4 w-4" />
+                        </button>
+                      </div>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+
+          {/* Mobile cards */}
+          <div className="divide-y divide-gray-200 dark:divide-gray-700 md:hidden">
+            {filtered.map((inv) => (
+              <div key={inv.id} className="px-5 py-4 transition-colors hover:bg-gray-50 dark:hover:bg-gray-700/50">
+                <div className="mb-1 flex items-center justify-between">
+                  <span className="font-mono text-xs text-gray-400">#{inv.id.slice(0, 8).toUpperCase()}</span>
+                  <StatusBadge status={inv.status} />
+                </div>
+                <p className="font-medium text-gray-900 dark:text-white">{inv.customerName || '—'}</p>
+                <p className="mt-0.5 text-sm text-gray-500 dark:text-gray-400">
+                  {fmtCurrency(inv.total || 0)} &middot; {fmtDate(inv.created)}
+                </p>
+                <div className="mt-2 flex gap-2">
+                  <button
+                    onClick={() => setPreviewInvoice(inv)}
+                    className="rounded px-2 py-1 text-xs text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-700"
+                  >
+                    Preview
+                  </button>
+                  <button
+                    onClick={() => openEdit(inv)}
+                    className="rounded px-2 py-1 text-xs text-blue-500 hover:bg-gray-100 dark:hover:bg-gray-700"
+                  >
+                    Edit
+                  </button>
+                  <button
+                    onClick={() => setDeleteTarget(inv)}
+                    className="rounded px-2 py-1 text-xs text-red-500 hover:bg-gray-100 dark:hover:bg-gray-700"
+                  >
+                    Delete
+                  </button>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+      {hasMore && (
+        <div className="mt-4 flex justify-center">
+          <button
+            onClick={loadMore}
+            disabled={loading}
+            className="rounded-lg border border-gray-300 bg-white px-6 py-2 text-sm font-medium text-gray-700 shadow-sm transition-colors hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-60 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
+          >
+            {loading ? 'Loading…' : 'Load more'}
+          </button>
+        </div>
+      )}
+
+      {/* ══════════════════════════════════════════════════
+          CREATE / EDIT MODAL
+          ══════════════════════════════════════════════════ */}
+
+      {showModal && (
+        <div className="fixed inset-0 z-50 flex items-start justify-center overflow-y-auto bg-black/50 p-4 pt-10">
+          <div className="w-full max-w-2xl rounded-xl bg-white shadow-2xl dark:bg-gray-800">
+            {/* Header */}
+            <div className="flex items-center justify-between border-b border-gray-200 px-6 py-4 dark:border-gray-700">
+              <h2 className="text-lg font-semibold text-gray-900 dark:text-white">
+                {editingId ? 'Edit Invoice' : 'New Invoice'}
+              </h2>
+              <button
+                onClick={() => setShowModal(false)}
+                className="rounded p-1 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
+              >
+                <X className="h-5 w-5" />
+              </button>
+            </div>
+
+            {/* Body */}
+            <div className="space-y-5 px-6 py-5">
+              {/* Customer info */}
+              <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+                <div>
+                  <label className="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">
+                    Customer Name *
+                  </label>
+                  <input
+                    type="text"
+                    value={form.customerName}
+                    onChange={(e) => handleField('customerName', e.target.value)}
+                    className={`w-full rounded-lg border px-3 py-2 text-sm text-gray-900 focus:outline-none focus:ring-1 dark:bg-gray-700 dark:text-white ${
+                      formErrors.customerName
+                        ? 'border-red-400 focus:border-red-500 focus:ring-red-500'
+                        : 'border-gray-300 focus:border-green-500 focus:ring-green-500 dark:border-gray-600'
+                    }`}
+                    placeholder="John Doe"
+                  />
+                  {formErrors.customerName && (
+                    <p className="mt-1 text-xs text-red-500">{formErrors.customerName}</p>
+                  )}
+                </div>
+                <div>
+                  <label className="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">
+                    Vehicle Info *
+                  </label>
+                  <input
+                    type="text"
+                    value={form.vehicleInfo}
+                    onChange={(e) => handleField('vehicleInfo', e.target.value)}
+                    className={`w-full rounded-lg border px-3 py-2 text-sm text-gray-900 focus:outline-none focus:ring-1 dark:bg-gray-700 dark:text-white ${
+                      formErrors.vehicleInfo
+                        ? 'border-red-400 focus:border-red-500 focus:ring-red-500'
+                        : 'border-gray-300 focus:border-green-500 focus:ring-green-500 dark:border-gray-600'
+                    }`}
+                    placeholder="2020 Honda Civic"
+                  />
+                  {formErrors.vehicleInfo && (
+                    <p className="mt-1 text-xs text-red-500">{formErrors.vehicleInfo}</p>
+                  )}
+                </div>
+                <div>
+                  <label className="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">
+                    Email
+                  </label>
+                  <input
+                    type="email"
+                    value={form.customerEmail}
+                    onChange={(e) => handleField('customerEmail', e.target.value)}
+                    className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm text-gray-900 focus:border-green-500 focus:outline-none focus:ring-1 focus:ring-green-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white"
+                    placeholder="john@example.com"
+                  />
+                </div>
+                <div>
+                  <label className="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">
+                    Phone
+                  </label>
+                  <input
+                    type="text"
+                    value={formatPhoneInput(form.customerPhone)}
+                    onChange={(e) => handleField('customerPhone', e.target.value.replace(/\D/g, ''))}
+                    className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm text-gray-900 focus:border-green-500 focus:outline-none focus:ring-1 focus:ring-green-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white"
+                    placeholder="(865) 555-0123"
+                  />
+                </div>
+              </div>
+
+              {/* Due date + Status */}
+              <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+                <div>
+                  <label className="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">
+                    Due Date
+                  </label>
+                  <input
+                    type="date"
+                    value={form.dueDate}
+                    onChange={(e) => handleField('dueDate', e.target.value)}
+                    className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm text-gray-900 focus:border-green-500 focus:outline-none focus:ring-1 focus:ring-green-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white"
+                  />
+                </div>
+                <div>
+                  <label className="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">
+                    Status
+                  </label>
+                  <select
+                    value={form.status}
+                    onChange={(e) => handleField('status', e.target.value)}
+                    className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm text-gray-900 focus:border-green-500 focus:outline-none focus:ring-1 focus:ring-green-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white"
+                  >
+                    <option value="draft">Draft</option>
+                    <option value="sent">Sent</option>
+                    <option value="paid">Paid</option>
+                    <option value="overdue">Overdue</option>
+                  </select>
+                </div>
+              </div>
+
+              {/* Invoice items */}
+              <div>
+                <div className="mb-2 flex items-center justify-between">
+                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300">
+                    Invoice Items *
+                  </label>
+                  <button
+                    type="button"
+                    onClick={addItem}
+                    className="inline-flex items-center gap-1 text-xs font-medium text-green-600 hover:text-green-700 dark:text-green-400"
+                  >
+                    <Plus className="h-3 w-3" /> Add Item
+                  </button>
+                </div>
+                {formErrors.items && (
+                  <p className="mb-2 text-xs text-red-500">{formErrors.items}</p>
+                )}
+
+                {form.items.map((item, idx) => (
+                  <div
+                    key={idx}
+                    className="mb-3 rounded-lg border border-gray-200 bg-gray-50 p-4 dark:border-gray-600 dark:bg-gray-700/50"
+                  >
+                    <div className="mb-2 flex items-center justify-between">
+                      <span className="text-xs font-medium text-gray-500 dark:text-gray-400">
+                        Item #{idx + 1}
+                      </span>
+                      {form.items.length > 1 && (
+                        <button
+                          type="button"
+                          onClick={() => removeItem(idx)}
+                          className="rounded p-0.5 text-red-400 hover:text-red-600"
+                        >
+                          <X className="h-3.5 w-3.5" />
+                        </button>
+                      )}
+                    </div>
+                    <div className="space-y-2">
+                      <input
+                        type="text"
+                        value={item.description}
+                        onChange={(e) => handleItemField(idx, 'description', e.target.value)}
+                        placeholder="Description of service or part"
+                        className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm text-gray-900 focus:border-green-500 focus:outline-none focus:ring-1 focus:ring-green-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white"
+                      />
+                      <div className="grid grid-cols-3 gap-3">
+                        <div>
+                          <label className="mb-0.5 block text-xs text-gray-500 dark:text-gray-400">
+                            Qty
+                          </label>
+                          <input
+                            type="number"
+                            min="0"
+                            step="1"
+                            value={item.quantity}
+                            onChange={(e) =>
+                              handleItemField(idx, 'quantity', parseFloat(e.target.value) || 0)
+                            }
+                            className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm text-gray-900 focus:border-green-500 focus:outline-none focus:ring-1 focus:ring-green-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white"
+                          />
+                        </div>
+                        <div>
+                          <label className="mb-0.5 block text-xs text-gray-500 dark:text-gray-400">
+                            Unit Price
+                          </label>
+                          <input
+                            type="number"
+                            min="0"
+                            step="0.01"
+                            value={item.unitPrice}
+                            onChange={(e) =>
+                              handleItemField(idx, 'unitPrice', parseFloat(e.target.value) || 0)
+                            }
+                            className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm text-gray-900 focus:border-green-500 focus:outline-none focus:ring-1 focus:ring-green-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white"
+                          />
+                        </div>
+                        <div>
+                          <label className="mb-0.5 block text-xs text-gray-500 dark:text-gray-400">
+                            Total
+                          </label>
+                          <div className="rounded-lg bg-gray-100 px-3 py-2 text-sm font-medium text-gray-900 dark:bg-gray-600 dark:text-white">
+                            {fmtCurrency(item.quantity * item.unitPrice)}
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                ))}
+              </div>
+
+              {/* Totals preview */}
+              <div className="rounded-lg bg-gray-50 p-4 dark:bg-gray-700/50">
+                <div className="space-y-1 text-sm">
+                  <div className="flex justify-between">
+                    <span className="text-gray-600 dark:text-gray-400">Subtotal</span>
+                    <span className="font-medium text-gray-900 dark:text-white">
+                      {fmtCurrency(form.subtotal)}
+                    </span>
+                  </div>
+                  <div className="flex justify-between">
+                    <span className="text-gray-600 dark:text-gray-400">Tax (8%)</span>
+                    <span className="font-medium text-gray-900 dark:text-white">
+                      {fmtCurrency(form.tax)}
+                    </span>
+                  </div>
+                  <div className="flex justify-between border-t border-gray-200 pt-2 dark:border-gray-600">
+                    <span className="font-semibold text-gray-900 dark:text-white">Total</span>
+                    <span className="text-lg font-bold text-green-600 dark:text-green-400">
+                      {fmtCurrency(form.total)}
+                    </span>
+                  </div>
+                </div>
+              </div>
+
+              {/* Notes */}
+              <div>
+                <label className="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">
+                  Notes
+                </label>
+                <textarea
+                  value={form.notes}
+                  onChange={(e) => handleField('notes', e.target.value)}
+                  rows={3}
+                  placeholder="Any additional notes for the customer..."
+                  className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm text-gray-900 focus:border-green-500 focus:outline-none focus:ring-1 focus:ring-green-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white"
+                />
+              </div>
+            </div>
+
+            {/* Footer */}
+            <div className="flex justify-end gap-3 border-t border-gray-200 px-6 py-4 dark:border-gray-700">
+              <button
+                onClick={() => setShowModal(false)}
+                className="rounded-lg border border-gray-300 px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-700"
+              >
+                Cancel
+              </button>
+              <button
+                onClick={handleSave}
+                disabled={saving}
+                className="inline-flex items-center gap-2 rounded-lg bg-green-600 px-5 py-2 text-sm font-medium text-white shadow-sm transition-colors hover:bg-green-700 disabled:opacity-60"
+              >
+                {saving && <Loader2 className="h-4 w-4 animate-spin" />}
+                {saving ? 'Saving...' : editingId ? 'Update Invoice' : 'Create Invoice'}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* ══════════════════════════════════════════════════
+          DELETE CONFIRM
+          ══════════════════════════════════════════════════ */}
+
+      {deleteTarget && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
+          <div className="w-full max-w-md rounded-xl bg-white p-6 shadow-2xl dark:bg-gray-800">
+            <div className="mb-4 flex items-center gap-3">
+              <div className="flex h-10 w-10 items-center justify-center rounded-full bg-red-50 dark:bg-red-900/20">
+                <AlertTriangle className="h-5 w-5 text-red-500" />
+              </div>
+              <div>
+                <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
+                  Delete Invoice
+                </h3>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  Are you sure you want to delete the invoice for{' '}
+                  <strong>{deleteTarget.customerName}</strong>? This action cannot be undone.
+                </p>
+              </div>
+            </div>
+            <div className="flex justify-end gap-3">
+              <button
+                onClick={() => setDeleteTarget(null)}
+                className="rounded-lg border border-gray-300 px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-700"
+              >
+                Cancel
+              </button>
+              <button
+                onClick={handleDelete}
+                disabled={deleting}
+                className="inline-flex items-center gap-2 rounded-lg bg-red-600 px-4 py-2 text-sm font-medium text-white shadow-sm transition-colors hover:bg-red-700 disabled:opacity-60"
+              >
+                {deleting && <Loader2 className="h-4 w-4 animate-spin" />}
+                {deleting ? 'Deleting...' : 'Delete'}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* ══════════════════════════════════════════════════
+          PRINT PREVIEW MODAL
+          ══════════════════════════════════════════════════ */}
+
+      {previewInvoice && (
+        <div className="fixed inset-0 z-50 flex items-start justify-center overflow-y-auto bg-black/50 p-4 pt-10">
+          <div className="w-full max-w-3xl rounded-xl bg-white shadow-2xl dark:bg-gray-800">
+            <div className="flex items-center justify-between border-b border-gray-200 px-6 py-4 dark:border-gray-700">
+              <h2 className="text-lg font-semibold text-gray-900 dark:text-white">
+                Invoice Preview
+              </h2>
+              <div className="flex items-center gap-2">
+                <button
+                  onClick={handlePrint}
+                  className="inline-flex items-center gap-2 rounded-lg border border-gray-300 px-3 py-1.5 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-700"
+                >
+                  <Printer className="h-4 w-4" />
+                  Print
+                </button>
+                <button
+                  onClick={() => setPreviewInvoice(null)}
+                  className="rounded p-1 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
+                >
+                  <X className="h-5 w-5" />
+                </button>
+              </div>
+            </div>
+
+            <div className="p-8" ref={printRef}>
+              {/* Invoice header */}
+              <div className="mb-8 flex items-start justify-between">
+                <div>
+                  <h1 className="text-3xl font-bold text-green-600 dark:text-green-400">INVOICE</h1>
+                  <p className="text-sm text-gray-500 dark:text-gray-400">
+                    {previewInvoice.customerName}
+                  </p>
+                </div>
+                <div className="text-right">
+                  <StatusBadge status={previewInvoice.status} />
+                  <p className="mt-1 font-mono text-xs text-gray-400">
+                    # {previewInvoice.id.slice(0, 8).toUpperCase()}
+                  </p>
+                </div>
+              </div>
+
+              {/* Details */}
+              <div className="mb-8 flex justify-between">
+                <div>
+                  <h3 className="mb-1 text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
+                    Bill To
+                  </h3>
+                  <p className="font-semibold text-gray-900 dark:text-white">
+                    {previewInvoice.customerName}
+                  </p>
+                  {previewInvoice.customerPhone && (
+                    <p className="text-sm text-gray-600 dark:text-gray-300">
+                      {formatPhoneDisplay(previewInvoice.customerPhone)}
+                    </p>
+                  )}
+                  {previewInvoice.customerEmail && (
+                    <p className="text-sm text-gray-600 dark:text-gray-300">
+                      {previewInvoice.customerEmail}
+                    </p>
+                  )}
+                </div>
+                <div className="text-right">
+                  <h3 className="mb-1 text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
+                    Invoice Details
+                  </h3>
+                  <p className="text-sm text-gray-600 dark:text-gray-300">
+                    Date: {fmtDate(previewInvoice.created)}
+                  </p>
+                  <p className="text-sm text-gray-600 dark:text-gray-300">
+                    Due: {fmtDate(previewInvoice.dueDate)}
+                  </p>
+                  <p className="text-sm text-gray-600 dark:text-gray-300">
+                    Vehicle: {previewInvoice.vehicleInfo || '—'}
+                  </p>
+                </div>
+              </div>
+
+              {/* Items table */}
+              <table className="mb-6 w-full text-left text-sm">
+                <thead>
+                  <tr className="border-b border-gray-200 text-xs uppercase tracking-wide text-gray-500 dark:border-gray-700 dark:text-gray-400">
+                    <th className="w-[55%] pb-2 font-medium">Description</th>
+                    <th className="w-[15%] pb-2 text-center font-medium">Qty</th>
+                    <th className="w-[15%] pb-2 text-right font-medium">Unit Price</th>
+                    <th className="w-[15%] pb-2 text-right font-medium">Total</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {(previewInvoice.items || []).map((item, idx) => {
+                    const lineTotal = item.quantity * item.unitPrice;
+                    return (
+                      <tr
+                        key={idx}
+                        className="border-b border-gray-100 dark:border-gray-700"
+                      >
+                        <td className="py-3 text-gray-900 dark:text-white">
+                          {item.description || '—'}
+                        </td>
+                        <td className="py-3 text-center text-gray-600 dark:text-gray-400">
+                          {item.quantity}
+                        </td>
+                        <td className="py-3 text-right text-gray-600 dark:text-gray-400">
+                          {fmtCurrency(item.unitPrice)}
+                        </td>
+                        <td className="py-3 text-right font-medium text-gray-900 dark:text-white">
+                          {fmtCurrency(lineTotal)}
+                        </td>
+                      </tr>
+                    );
+                  })}
+                </tbody>
+              </table>
+
+              {/* Totals */}
+              <div className="ml-auto w-72">
+                {(() => {
+                  const items = previewInvoice.items || [];
+                  const sub = items.reduce((s, it) => s + it.quantity * it.unitPrice, 0);
+                  const t = sub * getTaxRate();
+                  const tot = sub + t;
+                  return (
+                    <div className="space-y-1 text-sm">
+                      <div className="flex justify-between">
+                        <span className="text-gray-600 dark:text-gray-400">Subtotal</span>
+                        <span className="text-gray-900 dark:text-white">
+                          {fmtCurrency(sub)}
+                        </span>
+                      </div>
+                      <div className="flex justify-between">
+                        <span className="text-gray-600 dark:text-gray-400">Tax ({(getTaxRate() * 100).toFixed(1)}%)</span>
+                        <span className="text-gray-900 dark:text-white">{fmtCurrency(t)}</span>
+                      </div>
+                      <div className="flex justify-between border-t border-gray-300 pt-2 dark:border-gray-600">
+                        <span className="font-bold text-gray-900 dark:text-white">Total</span>
+                        <span className="text-xl font-bold text-green-600 dark:text-green-400">
+                          {fmtCurrency(tot)}
+                        </span>
+                      </div>
+                    </div>
+                  );
+                })()}
+              </div>
+
+              {/* Notes */}
+              {previewInvoice.notes && (
+                <div className="mt-8 border-t border-gray-200 pt-4 dark:border-gray-700">
+                  <h4 className="mb-1 text-xs font-semibold uppercase tracking-wide text-gray-500">
+                    Notes
+                  </h4>
+                  <p className="text-sm text-gray-700 dark:text-gray-300">
+                    {previewInvoice.notes}
+                  </p>
+                </div>
+              )}
+
+              <div className="mt-16 text-center text-xs text-gray-400">
+                Thank you for your business!
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* ══════════════════════════════════════════════════
+          RO PICKER MODAL
+          ══════════════════════════════════════════════════ */}
+
+      {showROPicker && (
+        <div className="fixed inset-0 z-50 flex items-start justify-center overflow-y-auto bg-black/50 p-4 pt-10">
+          <div className="w-full max-w-lg rounded-xl bg-white shadow-2xl dark:bg-gray-800">
+            <div className="flex items-center justify-between border-b border-gray-200 px-6 py-4 dark:border-gray-700">
+              <h2 className="text-lg font-semibold text-gray-900 dark:text-white">
+                Create Invoice from Repair Order
+              </h2>
+              <button
+                onClick={() => setShowROPicker(false)}
+                className="rounded p-1 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
+              >
+                <X className="h-5 w-5" />
+              </button>
+            </div>
+            <div className="px-6 py-4">
+              <div className="relative mb-4">
+                <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400" />
+                <input
+                  type="text"
+                  value={roSearch}
+                  onChange={(e) => setRoSearch(e.target.value)}
+                  placeholder="Search repair orders..."
+                  className="w-full rounded-lg border border-gray-300 bg-white py-2.5 pl-10 pr-4 text-sm text-gray-900 placeholder-gray-400 focus:border-green-500 focus:outline-none focus:ring-1 focus:ring-green-500 dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:placeholder-gray-500"
+                />
+              </div>
+
+              {loadingROs ? (
+                <div className="flex justify-center py-8">
+                  <LoadingSpinner text="Loading repair orders..." />
+                </div>
+              ) : filteredROs.length === 0 ? (
+                <div className="py-8 text-center text-sm text-gray-500 dark:text-gray-400">
+                    {roSearch ? 'No repair orders matched your search. Try a customer name, RO number, or vehicle.' : 'No repair orders are available to convert into an invoice yet.'}
+                </div>
+              ) : (
+                <div className="max-h-80 space-y-2 overflow-y-auto">
+                  {filteredROs.map((ro) => (
+                    <button
+                      key={ro.id}
+                      onClick={() => createFromRO(ro)}
+                      className="w-full rounded-lg border border-gray-200 p-4 text-left transition-colors hover:border-green-400 hover:bg-green-50 dark:border-gray-600 dark:hover:border-green-500 dark:hover:bg-green-900/20"
+                    >
+                      <div className="flex items-center justify-between">
+                        <span className="font-medium text-gray-900 dark:text-white">
+                          {ro.customerName || 'Unknown'}
+                        </span>
+                        <span className="font-mono text-xs text-gray-400">
+                          RO #{ro.roNumber || ro.id.slice(0, 8)}
+                        </span>
+                      </div>
+                      <p className="mt-0.5 text-sm text-gray-500 dark:text-gray-400">
+                        {ro.vehicleInfo || '—'}
+                      </p>
+                    </button>
+                  ))}
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+    </RequireOwnerRole>
+  );
+}
diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx
new file mode 100644
index 0000000..b29653e
--- /dev/null
+++ b/src/pages/Login.tsx
@@ -0,0 +1,318 @@
+import { useState, useEffect, type FormEvent } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Wrench, Mail, Lock, Eye, EyeOff, User } from 'lucide-react';
+import { pb, APP_NAME } from '../lib/pocketbase';
+import { logError } from '../lib/userMessages';
+import { isSetupComplete, loadSettingsForUser } from '../lib/settings';
+import { getCurrentUserRole, isTechnicianRole } from '../lib/rbx';
+
+type Mode = 'signin' | 'signup';
+
+export default function Login() {
+  const navigate = useNavigate();
+  const [mode, setMode] = useState<Mode>('signin');
+
+  // Apply dark mode from stored preference
+  useEffect(() => {
+    const isDark = localStorage.getItem('spq-dark-mode') === 'true';
+    document.documentElement.classList.toggle('dark', isDark);
+  }, []);
+
+  // Redirect already-authenticated users to their role-appropriate home
+  useEffect(() => {
+    if (pb.authStore.isValid) {
+      navigateAfterAuth();
+    }
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // Shared state
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [showPassword, setShowPassword] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [success, setSuccess] = useState<string | null>(null);
+
+  // Sign-up only
+  const [name, setName] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+
+  function resetForm() {
+    setEmail('');
+    setPassword('');
+    setConfirmPassword('');
+    setName('');
+    setError(null);
+    setSuccess(null);
+  }
+
+  function switchMode(newMode: Mode) {
+    setMode(newMode);
+    resetForm();
+  }
+
+  async function navigateAfterAuth() {
+    const role = getCurrentUserRole();
+    if (isTechnicianRole(role)) {
+      navigate('/technician', { replace: true });
+      return;
+    }
+    const settings = await loadSettingsForUser(pb.authStore.model?.id);
+    navigate(isSetupComplete(settings) ? '/' : '/setup', { replace: true });
+  }
+
+  async function handleSignIn(e: FormEvent) {
+    e.preventDefault();
+    setError(null);
+    setSuccess(null);
+
+    if (!email.trim()) { setError('Please enter your email address.'); return; }
+    if (!password) { setError('Please enter your password.'); return; }
+
+    setLoading(true);
+    try {
+      await pb.collection('users').authWithPassword(email, password);
+      await navigateAfterAuth();
+    } catch (err: unknown) {
+      logError('Failed to sign in', err);
+      setError('Sign in failed. Please check your email and password and try again.');
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  async function handleSignUp(e: FormEvent) {
+    e.preventDefault();
+    setError(null);
+    setSuccess(null);
+
+    if (!email.trim()) { setError('Please enter your email address.'); return; }
+    if (!password) { setError('Please enter a password.'); return; }
+    if (password.length < 8) { setError('Password must be at least 8 characters.'); return; }
+    if (password !== confirmPassword) { setError('Passwords do not match.'); return; }
+
+    setLoading(true);
+    try {
+      await pb.collection('users').create({
+        email: email.trim(),
+        password,
+        passwordConfirm: confirmPassword,
+        name: name.trim() || '',
+        displayName: name.trim() || '',
+        emailVisibility: true,
+        // role and shopUserId are now server-set by the M20 PB hook.
+        // Do NOT send them from the client — doing so would be overwritten.
+      });
+
+      // Auto-sign-in so the user has an active session immediately.
+      // PocketBase may refuse this if "only verified users can sign in"
+      // is enabled; we fall back to the manual sign-in message.
+      try {
+        await pb.collection('users').authWithPassword(email, password);
+      } catch { /* sign-in may be blocked for unverified users */ }
+
+      // Explicitly send the verification email regardless of PB auto-send setting.
+      try {
+        await pb.collection('users').requestVerification(email.trim());
+      } catch (err) { logError('requestVerification failed (non-critical)', err); }
+
+      // If we're now signed in, proceed directly to dashboard/setup.
+      if (pb.authStore.isValid) {
+        await navigateAfterAuth();
+        return;
+      }
+
+      setSuccess(
+        'Account created. Check your email and click the verification link, then sign in.'
+      );
+      setPassword('');
+      setConfirmPassword('');
+      setName('');
+    } catch (err: unknown) {
+      logError('Failed to create account', err);
+      setError('Account could not be created. Please try again.');
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  const isSignIn = mode === 'signin';
+
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-gradient-to-br from-gray-50 to-gray-100 px-4 dark:from-gray-950 dark:to-gray-900">
+      <div className="w-full max-w-md">
+        {/* Logo */}
+        <div className="mb-8 text-center">
+          <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-2xl bg-green-600 shadow-lg shadow-green-600/20 dark:bg-green-700">
+            <Wrench className="h-8 w-8 text-white" />
+          </div>
+          <h1 className="text-3xl font-bold tracking-tight text-gray-900 dark:text-white">
+            ShopPro<span className="text-green-600 dark:text-green-400">Quote</span>
+          </h1>
+          <p className="mt-1.5 text-sm text-gray-500 dark:text-gray-400">
+            {isSignIn ? 'Sign in to manage your shop' : 'Create your account'}
+          </p>
+        </div>
+
+        {/* Card */}
+        <div className="rounded-xl border border-gray-200 bg-white p-8 shadow-xl shadow-gray-200/50 transition-all duration-300 dark:border-gray-800 dark:bg-gray-900 dark:shadow-black/20">
+          {/* Tabs */}
+          <div className="mb-6 flex rounded-lg bg-gray-100 p-1 dark:bg-gray-800">
+            <button
+              type="button"
+              onClick={() => switchMode('signin')}
+              className={`flex-1 rounded-md py-2 text-sm font-medium transition-colors ${
+                isSignIn
+                  ? 'bg-white text-gray-900 shadow-sm dark:bg-gray-700 dark:text-white'
+                  : 'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'
+              }`}
+            >
+              Sign In
+            </button>
+            <button
+              type="button"
+              onClick={() => switchMode('signup')}
+              className={`flex-1 rounded-md py-2 text-sm font-medium transition-colors ${
+                !isSignIn
+                  ? 'bg-white text-gray-900 shadow-sm dark:bg-gray-700 dark:text-white'
+                  : 'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'
+              }`}
+            >
+              Sign Up
+            </button>
+          </div>
+
+          <form onSubmit={isSignIn ? handleSignIn : handleSignUp} className="space-y-4" noValidate>
+            {/* Success message */}
+            {success && (
+              <div className="flex items-center gap-2.5 rounded-lg border border-green-200 bg-green-50 px-4 py-3 text-sm text-green-700 dark:border-green-800/50 dark:bg-green-950/50 dark:text-green-400">
+                <span className="inline-block h-1.5 w-1.5 rounded-full bg-green-500" />
+                {success}
+              </div>
+            )}
+
+            {/* Error message */}
+            {error && (
+              <div className="flex items-center gap-2.5 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700 dark:border-red-800/50 dark:bg-red-950/50 dark:text-red-400">
+                <span className="inline-block h-1.5 w-1.5 rounded-full bg-red-500" />
+                {error}
+              </div>
+            )}
+
+            {/* Name (sign-up only) */}
+            {!isSignIn && (
+              <div>
+                <label htmlFor="name" className="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-300">
+                  Name <span className="text-gray-400 font-normal">(optional)</span>
+                </label>
+                <div className="relative">
+                  <User className="pointer-events-none absolute left-3 top-1/2 h-5 w-5 -translate-y-1/2 text-gray-400 dark:text-gray-500" />
+                  <input
+                    id="name"
+                    type="text"
+                    autoComplete="name"
+                    placeholder="Your name"
+                    value={name}
+                    onChange={(e) => setName(e.target.value)}
+                    disabled={loading}
+                    className="w-full rounded-lg border border-gray-300 bg-white py-2.5 pl-10 pr-3 text-sm text-gray-900 placeholder-gray-400 transition-colors focus:border-green-500 focus:ring-2 focus:ring-green-500/20 focus:outline-none disabled:cursor-not-allowed disabled:opacity-60 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-500 dark:focus:border-green-400 dark:focus:ring-green-400/20"
+                  />
+                </div>
+              </div>
+            )}
+
+            {/* Email */}
+            <div>
+              <label htmlFor="email" className="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-300">
+                Email
+              </label>
+              <div className="relative">
+                <Mail className="pointer-events-none absolute left-3 top-1/2 h-5 w-5 -translate-y-1/2 text-gray-400 dark:text-gray-500" />
+                <input
+                  id="email"
+                  type="email"
+                  autoComplete="email"
+                  placeholder="you@example.com"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  disabled={loading}
+                  className="w-full rounded-lg border border-gray-300 bg-white py-2.5 pl-10 pr-3 text-sm text-gray-900 placeholder-gray-400 transition-colors focus:border-green-500 focus:ring-2 focus:ring-green-500/20 focus:outline-none disabled:cursor-not-allowed disabled:opacity-60 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-500 dark:focus:border-green-400 dark:focus:ring-green-400/20"
+                />
+              </div>
+            </div>
+
+            {/* Password */}
+            <div>
+              <label htmlFor="password" className="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-300">
+                Password
+              </label>
+              <div className="relative">
+                <Lock className="pointer-events-none absolute left-3 top-1/2 h-5 w-5 -translate-y-1/2 text-gray-400 dark:text-gray-500" />
+                <input
+                  id="password"
+                  type={showPassword ? 'text' : 'password'}
+                  autoComplete={isSignIn ? 'current-password' : 'new-password'}
+                  placeholder={isSignIn ? 'Enter your password' : 'At least 8 characters'}
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  disabled={loading}
+                  className="w-full rounded-lg border border-gray-300 bg-white py-2.5 pl-10 pr-10 text-sm text-gray-900 placeholder-gray-400 transition-colors focus:border-green-500 focus:ring-2 focus:ring-green-500/20 focus:outline-none disabled:cursor-not-allowed disabled:opacity-60 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-500 dark:focus:border-green-400 dark:focus:ring-green-400/20"
+                />
+                <button
+                  type="button"
+                  onClick={() => setShowPassword((prev) => !prev)}
+                  className="absolute right-2.5 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300"
+                  tabIndex={-1}
+                  aria-label={showPassword ? 'Hide password' : 'Show password'}
+                >
+                  {showPassword ? <EyeOff className="h-5 w-5" /> : <Eye className="h-5 w-5" />}
+                </button>
+              </div>
+            </div>
+
+            {/* Confirm Password (sign-up only) */}
+            {!isSignIn && (
+              <div>
+                <label htmlFor="confirmPassword" className="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-300">
+                  Confirm Password
+                </label>
+                <div className="relative">
+                  <Lock className="pointer-events-none absolute left-3 top-1/2 h-5 w-5 -translate-y-1/2 text-gray-400 dark:text-gray-500" />
+                  <input
+                    id="confirmPassword"
+                    type={showPassword ? 'text' : 'password'}
+                    autoComplete="new-password"
+                    placeholder="Repeat your password"
+                    value={confirmPassword}
+                    onChange={(e) => setConfirmPassword(e.target.value)}
+                    disabled={loading}
+                    className="w-full rounded-lg border border-gray-300 bg-white py-2.5 pl-10 pr-3 text-sm text-gray-900 placeholder-gray-400 transition-colors focus:border-green-500 focus:ring-2 focus:ring-green-500/20 focus:outline-none disabled:cursor-not-allowed disabled:opacity-60 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-500 dark:focus:border-green-400 dark:focus:ring-green-400/20"
+                  />
+                </div>
+              </div>
+            )}
+
+            {/* Submit */}
+            <button
+              type="submit"
+              disabled={loading}
+              className="flex w-full items-center justify-center gap-2 rounded-lg bg-green-600 px-4 py-2.5 text-sm font-semibold text-white shadow-sm transition-all duration-200 hover:bg-green-700 focus:ring-2 focus:ring-green-500/40 focus:outline-none active:scale-[0.98] disabled:cursor-not-allowed disabled:opacity-60 dark:bg-green-700 dark:hover:bg-green-600"
+            >
+              {loading && (
+                <svg className="h-4 w-4 animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                  <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+                  <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
+                </svg>
+              )}
+              {loading ? (isSignIn ? 'Signing in…' : 'Creating account…') : isSignIn ? 'Sign In' : 'Create Account'}
+            </button>
+          </form>
+        </div>
+
+        <p className="mt-6 text-center text-xs text-gray-400 dark:text-gray-600">
+          &copy; {new Date().getFullYear()} {APP_NAME}. All rights reserved.
+        </p>
+      </div>
+    </div>
+  );
+}
diff --git a/src/pages/Privacy.tsx b/src/pages/Privacy.tsx
new file mode 100644
index 0000000..19abf92
--- /dev/null
+++ b/src/pages/Privacy.tsx
@@ -0,0 +1,238 @@
+import { useState, useCallback } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Download, Trash2, Shield, AlertTriangle } from 'lucide-react';
+import { pb } from '../lib/pocketbase';
+import { useToast } from '../components/ui/Toast';
+
+export default function Privacy() {
+  const { showToast } = useToast();
+  const navigate = useNavigate();
+  const userId = pb.authStore.model?.id as string;
+
+  const [exporting, setExporting] = useState(false);
+  const [deleting, setDeleting] = useState(false);
+  const [deleteConfirm, setDeleteConfirm] = useState('');
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
+
+  const handleExport = useCallback(async () => {
+    if (!userId) return;
+    setExporting(true);
+    try {
+      const [repairOrders, customers, appointments, invoices, settings] =
+        await Promise.all([
+          pb.collection('repairOrders').getFullList({
+            filter: `userId = '${userId}'`,
+            sort: '-id',
+            batch: 200,
+          }),
+          pb.collection('customers').getFullList({
+            filter: `userId = '${userId}'`,
+            sort: 'name',
+            batch: 200,
+          }),
+          pb.collection('appointments').getFullList({
+            filter: `userId = '${userId}'`,
+            sort: '-id',
+            batch: 200,
+          }),
+          pb.collection('invoices').getFullList({
+            filter: `userId = '${userId}'`,
+            sort: '-id',
+            batch: 200,
+          }),
+          pb
+            .collection('settings')
+            .getFullList({ filter: `userId = '${userId}'` }),
+        ]);
+
+      const exportData = {
+        exportedAt: new Date().toISOString(),
+        userEmail: pb.authStore.model?.email,
+        repairOrders,
+        customers,
+        appointments,
+        invoices,
+        settings: settings[0] || null,
+      };
+
+      const json = JSON.stringify(exportData, null, 2);
+      const blob = new Blob([json], { type: 'application/json' });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      const date = new Date().toISOString().slice(0, 10);
+      a.download = `spq-data-export-${date}.json`;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      URL.revokeObjectURL(url);
+
+      showToast('Data exported successfully', 'success');
+    } catch {
+      showToast('Failed to export data. Please try again.', 'error');
+    } finally {
+      setExporting(false);
+    }
+  }, [userId, showToast]);
+
+  const handleDelete = useCallback(async () => {
+    if (!userId || deleteConfirm !== 'DELETE') return;
+    setDeleting(true);
+    try {
+      // Delete all user records from each collection
+      const collections = [
+        'repairOrders',
+        'customers',
+        'appointments',
+        'invoices',
+        'settings',
+        'service_advisors',
+        'technicianAssignments',
+        'technicianInvites',
+      ];
+
+      for (const col of collections) {
+        try {
+          const records = await pb.collection(col).getFullList({
+            filter: `userId = '${userId}'`,
+            batch: 200,
+          });
+          for (const record of records) {
+            await pb.collection(col).delete(record.id);
+          }
+        } catch {
+          // Some collections may not exist or be accessible — continue
+        }
+      }
+
+      // Delete the user account
+      await pb.collection('users').delete(userId);
+      pb.authStore.clear();
+      showToast('Account deleted successfully', 'success');
+      navigate('/login', { replace: true });
+    } catch {
+      showToast('Failed to delete account. Please try again.', 'error');
+    } finally {
+      setDeleting(false);
+    }
+  }, [userId, deleteConfirm, showToast, navigate]);
+
+  return (
+    <div className="h-full overflow-y-auto bg-gray-50 dark:bg-gray-950">
+      <div className="mx-auto max-w-2xl px-4 py-10 sm:px-6">
+        <div className="mb-8">
+          <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">
+            Privacy & Data
+          </h1>
+          <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
+            Manage your data and account. These actions cannot be undone.
+          </p>
+        </div>
+
+        <div className="space-y-6">
+          {/* Export Section */}
+          <div className="rounded-2xl border border-gray-200/90 bg-white p-6 shadow-sm dark:border-gray-700 dark:bg-gray-900">
+            <div className="flex items-center gap-3">
+              <div className="flex h-10 w-10 items-center justify-center rounded-full bg-green-100 dark:bg-green-900/30">
+                <Download className="h-5 w-5 text-green-600 dark:text-green-400" />
+              </div>
+              <div>
+                <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
+                  Export My Data
+                </h2>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  Download all your data as a JSON file, including repair
+                  orders, customers, appointments, invoices, and settings.
+                </p>
+              </div>
+            </div>
+            <button
+              onClick={handleExport}
+              disabled={exporting}
+              className="mt-4 inline-flex items-center gap-2 rounded-lg bg-green-600 px-4 py-2.5 text-sm font-medium text-white shadow-sm transition-colors hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500/40 disabled:cursor-not-allowed disabled:opacity-60"
+            >
+              <Download className="h-4 w-4" />
+              {exporting ? 'Exporting...' : 'Export My Data'}
+            </button>
+          </div>
+
+          {/* Delete Section (Danger Zone) */}
+          <div className="rounded-2xl border border-red-200 bg-white p-6 shadow-sm dark:border-red-900/50 dark:bg-gray-900">
+            <div className="flex items-center gap-3">
+              <div className="flex h-10 w-10 items-center justify-center rounded-full bg-red-100 dark:bg-red-900/30">
+                <Shield className="h-5 w-5 text-red-600 dark:text-red-400" />
+              </div>
+              <div>
+                <h2 className="text-lg font-semibold text-red-700 dark:text-red-400">
+                  Danger Zone
+                </h2>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  Permanently delete your account and all associated data. This
+                  action cannot be undone.
+                </p>
+              </div>
+            </div>
+
+            {!showDeleteConfirm ? (
+              <button
+                onClick={() => setShowDeleteConfirm(true)}
+                className="mt-4 inline-flex items-center gap-2 rounded-lg border border-red-300 bg-white px-4 py-2.5 text-sm font-medium text-red-600 transition-colors hover:bg-red-50 focus:outline-none focus:ring-2 focus:ring-red-500/40 dark:border-red-800 dark:bg-transparent dark:text-red-400 dark:hover:bg-red-950"
+              >
+                <Trash2 className="h-4 w-4" />
+                Delete My Account
+              </button>
+            ) : (
+              <div className="mt-4 space-y-4 rounded-lg border border-red-200 bg-red-50 p-4 dark:border-red-900/50 dark:bg-red-950/30">
+                <div className="flex items-start gap-3">
+                  <AlertTriangle className="mt-0.5 h-5 w-5 shrink-0 text-red-500" />
+                  <div>
+                    <p className="text-sm font-medium text-red-800 dark:text-red-300">
+                      Are you absolutely sure?
+                    </p>
+                    <p className="mt-1 text-xs text-red-600 dark:text-red-400">
+                      This will permanently delete your account and remove all
+                      your data including repair orders, customers,
+                      appointments, invoices, and settings. This action is
+                      irreversible.
+                    </p>
+                  </div>
+                </div>
+
+                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300">
+                  Type <code className="rounded bg-red-100 px-1.5 py-0.5 text-xs font-bold text-red-700 dark:bg-red-900/50 dark:text-red-300">DELETE</code> to confirm:
+                </label>
+                <input
+                  type="text"
+                  value={deleteConfirm}
+                  onChange={(e) => setDeleteConfirm(e.target.value)}
+                  placeholder="DELETE"
+                  className="w-full rounded-lg border border-red-300 bg-white px-3 py-2 text-sm text-gray-900 placeholder-gray-400 focus:border-red-500 focus:ring-2 focus:ring-red-500/20 focus:outline-none dark:border-red-800 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-500"
+                />
+
+                <div className="flex gap-3">
+                  <button
+                    onClick={() => {
+                      setShowDeleteConfirm(false);
+                      setDeleteConfirm('');
+                    }}
+                    className="inline-flex items-center gap-2 rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
+                  >
+                    Cancel
+                  </button>
+                  <button
+                    onClick={handleDelete}
+                    disabled={deleteConfirm !== 'DELETE' || deleting}
+                    className="inline-flex items-center gap-2 rounded-lg bg-red-600 px-4 py-2.5 text-sm font-medium text-white shadow-sm transition-colors hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500/40 disabled:cursor-not-allowed disabled:opacity-60"
+                  >
+                    <Trash2 className="h-4 w-4" />
+                    {deleting ? 'Deleting...' : 'Delete My Account'}
+                  </button>
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/pages/QuoteApprove.tsx b/src/pages/QuoteApprove.tsx
new file mode 100644
index 0000000..4c3d2db
--- /dev/null
+++ b/src/pages/QuoteApprove.tsx
@@ -0,0 +1,684 @@
+import { useState, useEffect, useCallback } from 'react';
+import { useParams, Link } from 'react-router-dom';
+import { CheckCircle2, XCircle, AlertTriangle, Loader2, Clock, ShieldCheck, ShieldX, Signature } from 'lucide-react';
+import { pb } from '../lib/pocketbase';
+import { useSettingsStore } from '../store/settings';
+import { logError } from '../lib/userMessages';
+import { computeQuoteTotals, computeSplitQuoteTotals } from '../lib/totals';
+import { syncApprovedQuoteServicesToRO } from '../lib/quoteRoSync';
+import type { QuoteService, ShopSettings } from '../types';
+
+type PageStatus = 'loading' | 'invalid' | 'expired' | 'done' | 'error' | 'phone_verify';
+
+const MAX_PHONE_ATTEMPTS = 3;
+
+interface QuoteDisplayData {
+  id: string;
+  customerName: string;
+  customerPhone: string;
+  vehicleInfo: string;
+  advisorName: string;
+  services: QuoteService[];
+  discountValue: number;
+  discountType: 'dollar' | 'percent';
+  subtotal: number;
+  tax: number;
+  total: number;
+  status: string;
+  createdAt: string;
+  shareToken: string;
+  viewedAt?: string;
+  phoneVerifiedAt?: string;
+  repairOrderId?: string;
+}
+
+export default function QuoteApprove() {
+  const { token = '' } = useParams<{ token: string }>();
+  const [pageStatus, setPageStatus] = useState<PageStatus>('loading');
+  const [quote, setQuote] = useState<QuoteDisplayData | null>(null);
+  const [settings, setSettings] = useState<ShopSettings | null>(null);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState('');
+  const [submitted, setSubmitted] = useState(false);
+  const [signatureName, setSignatureName] = useState('');
+  const [decisions, setDecisions] = useState<Record<string, 'approved' | 'declined'>>({});
+  const [viewedStamped, setViewedStamped] = useState(false);
+  const [phoneInput, setPhoneInput] = useState('');
+  const [phoneAttempts, setPhoneAttempts] = useState(0);
+
+  useEffect(() => {
+    if (!token) {
+      setPageStatus('invalid');
+      return;
+    }
+    loadQuote(token);
+  }, [token]);
+
+  useEffect(() => {
+    const meta = document.createElement('meta');
+    meta.name = 'referrer';
+    meta.content = 'no-referrer';
+    document.head.appendChild(meta);
+    return () => { document.head.removeChild(meta); };
+  }, []);
+
+  const stampViewed = useCallback(async (quoteId: string, shareTok: string, currentViewedAt?: string) => {
+    if (viewedStamped || currentViewedAt) return;
+    try {
+      await pb.collection('quotes').update(quoteId, {
+        viewedAt: new Date().toISOString(),
+        lastUpdated: new Date().toISOString(),
+      }, { query: { shareToken: shareTok } });
+      setViewedStamped(true);
+    } catch {
+      // Non-critical — don't block the page
+    }
+  }, [viewedStamped]);
+
+  async function loadQuote(tok: string) {
+    try {
+      const record = await pb.collection('quotes').getFirstListItem(
+        `shareToken = "${tok.replace(/"/g, '')}"`,
+        { query: { shareToken: tok } }
+      );
+
+      if (!record) {
+        setPageStatus('invalid');
+        return;
+      }
+
+      const rawServices = record.services;
+      let servicesList: QuoteService[] = [];
+      if (typeof rawServices === 'string') {
+        try { servicesList = JSON.parse(rawServices); } catch (err) { logError('Failed to parse quote services JSON', err); servicesList = []; }
+      } else if (Array.isArray(rawServices)) {
+        servicesList = rawServices;
+      }
+
+      const recordAny = record as any;
+      const quoteId = record.id;
+      const shareTok = tok;
+      const currentViewedAt = recordAny.viewedAt as string | undefined;
+
+      // Set decisions from existing authorization
+      const initialDecisions: Record<string, 'approved' | 'declined'> = {};
+      for (const s of servicesList) {
+        if (s.customerDecision === 'approved' || s.customerDecision === 'declined') {
+          initialDecisions[s.id] = s.customerDecision;
+        }
+      }
+      setDecisions(initialDecisions);
+
+      setQuote({
+        id: quoteId,
+        customerName: recordAny.customerName || '',
+        customerPhone: recordAny.customerPhone || '',
+        vehicleInfo: recordAny.vehicleInfo || '',
+        advisorName: recordAny.serviceAdvisor || '',
+        services: servicesList,
+        discountValue: recordAny.discountValue ?? 0,
+        discountType: recordAny.discountType ?? 'dollar',
+        subtotal: recordAny.subtotal ?? 0,
+        tax: recordAny.tax ?? 0,
+        total: recordAny.total ?? 0,
+        status: recordAny.status ?? 'draft',
+        createdAt: recordAny.createdAt ?? '',
+        shareToken: shareTok,
+        viewedAt: currentViewedAt,
+        repairOrderId: recordAny.repairOrderId || '',
+      });
+
+      // If the quote has a phone number, gate behind phone verification
+      const rawPhone = (recordAny.customerPhone as string) || '';
+      const hasPhone = rawPhone.replace(/\D/g, '').length >= 4;
+      if (hasPhone) {
+        setPageStatus('phone_verify');
+      } else {
+        setPageStatus('done');
+      }
+
+      // Fetch shop settings for branding
+      try {
+        const userId = recordAny.userId;
+        if (userId) {
+          const settingsRecords = await pb.collection('settings').getFullList({
+            filter: `userId="${userId}"`,
+            query: { shareToken: tok },
+          });
+          if (settingsRecords.length > 0) {
+            const sData = (settingsRecords[0] as any).data;
+            if (sData) {
+              const merged = { ...useSettingsStore.getState().settings, ...sData };
+              setSettings(merged);
+            }
+          }
+        }
+      } catch {
+        setSettings(useSettingsStore.getState().settings);
+      }
+
+      // Stamp viewedAt after everything else is set
+      void stampViewed(quoteId, shareTok, currentViewedAt);
+    } catch (err: any) {
+      if (err?.status === 404 || err?.message?.includes('not found')) {
+        setPageStatus('invalid');
+      } else if (err?.status === 410 || err?.message?.includes('Quote expired')) {
+        setPageStatus('expired');
+      } else {
+        setPageStatus('error');
+      }
+    }
+  }
+
+  function setDecision(serviceId: string, decision: 'approved' | 'declined') {
+    setDecisions((prev) => ({ ...prev, [serviceId]: decision }));
+  }
+
+  async function handleSubmitAll() {
+    if (!quote || saving) return;
+
+    // Validate every visible service has a decision
+    const visibleServices = quote.services.filter((s) => s.selected !== false);
+    const allDecided = visibleServices.every((s) => decisions[s.id] !== undefined);
+    if (!allDecided) {
+      setError('Please approve or decline each service before submitting.');
+      return;
+    }
+
+    const name = signatureName.trim();
+    if (!name) {
+      setError('Please enter your full name to authorize your decisions.');
+      return;
+    }
+
+    setSaving(true);
+    setError('');
+
+    try {
+      const now = new Date().toISOString();
+      const updatedServices = quote.services.map((s) => {
+        const decision = decisions[s.id];
+        if (!decision) return s;
+        return {
+          ...s,
+          customerDecision: decision,
+          approved: decision === 'approved',
+          authorizedBy: name,
+          authorizedAt: now,
+          authorizedMethod: 'signature' as const,
+        };
+      });
+
+      // Determine top-level status
+      const decidedSvcs = visibleServices.filter((s) => decisions[s.id]);
+      const allApproved = decidedSvcs.every((s) => decisions[s.id] === 'approved');
+      const allDeclined = decidedSvcs.every((s) => decisions[s.id] === 'declined');
+      let newStatus: string;
+      if (allApproved) {
+        newStatus = 'approved';
+      } else if (allDeclined) {
+        newStatus = 'declined';
+      } else {
+        newStatus = 'sent';
+      }
+
+      await pb.collection('quotes').update(quote.id, {
+        services: updatedServices,
+        status: newStatus,
+        lastUpdated: now,
+      }, { query: { shareToken: quote.shareToken } });
+
+      if (quote.repairOrderId) {
+        try {
+          await syncApprovedQuoteServicesToRO({
+            pb,
+            repairOrderId: quote.repairOrderId,
+            quoteServices: updatedServices,
+            settings: settings || useSettingsStore.getState().settings,
+          });
+        } catch (err) {
+          logError('Failed to sync customer-approved services to RO', err);
+        }
+      }
+
+      setSubmitted(true);
+    } catch (err: any) {
+      if (err?.status === 410 || err?.message?.includes('Quote expired')) {
+        setPageStatus('expired');
+      } else {
+        setError('Unable to save your decisions. Please try again.');
+      }
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  function handlePhoneVerify() {
+    if (!quote) return;
+    const digitsOnly = quote.customerPhone.replace(/\D/g, '');
+    const last4 = digitsOnly.slice(-4);
+    const inputDigits = phoneInput.replace(/\D/g, '');
+    if (inputDigits === last4) {
+      setError('');
+      setPhoneAttempts(0);
+      setPageStatus('done');
+    } else {
+      const newAttempts = phoneAttempts + 1;
+      setPhoneAttempts(newAttempts);
+      setPhoneInput('');
+      if (newAttempts >= MAX_PHONE_ATTEMPTS) {
+        setError('Too many incorrect attempts. Please contact the shop directly to access your quote.');
+      } else {
+        setError(`Incorrect. ${MAX_PHONE_ATTEMPTS - newAttempts} attempt(s) remaining.`);
+      }
+    }
+  }
+
+  const accentColor = settings?.pdfAccentColor || '#16a34a';
+  const visibleServices = quote?.services.filter((s) => s.selected !== false) || [];
+  const quoteSettings = settings || useSettingsStore.getState().settings;
+  const decisionServices: QuoteService[] = visibleServices.map((s) => {
+    const decision: QuoteService['customerDecision'] = decisions[s.id] || s.customerDecision || 'pending';
+    return { ...s, customerDecision: decision, approved: decision === 'approved' };
+  });
+  const decisionDiscount = quote ? { value: quote.discountValue || 0, type: quote.discountType || 'dollar' } : { value: 0, type: 'dollar' as const };
+  const hasApprovedServices = decisionServices.some((s) => s.customerDecision === 'approved');
+  const hasPendingServices = decisionServices.some((s) => s.customerDecision === 'pending');
+  const decisionTotals = quote ? computeQuoteTotals({ services: decisionServices, discount: decisionDiscount, settings: quoteSettings }) : null;
+  const decisionSplit = quote && hasApprovedServices && hasPendingServices
+    ? computeSplitQuoteTotals(decisionServices, decisionDiscount, quoteSettings)
+    : null;
+  const approvedCount = visibleServices.filter((s) => decisions[s.id] === 'approved').length;
+  const declinedCount = visibleServices.filter((s) => decisions[s.id] === 'declined').length;
+  const hasPending = visibleServices.some((s) => decisions[s.id] === undefined);
+
+  if (pageStatus === 'loading') {
+    return (
+      <div className="flex min-h-screen items-center justify-center bg-gray-50 px-4 dark:bg-gray-950">
+        <div className="text-center">
+          <Loader2 className="mx-auto h-10 w-10 animate-spin" style={{ color: accentColor }} />
+          <p className="mt-4 text-sm text-gray-500 dark:text-gray-400">Loading your quote...</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (pageStatus === 'invalid') {
+    return (
+      <div className="flex min-h-screen items-center justify-center bg-gray-50 px-4 dark:bg-gray-950">
+        <div className="max-w-md text-center">
+          <AlertTriangle className="mx-auto h-12 w-12 text-amber-500" />
+          <h2 className="mt-4 text-lg font-semibold text-gray-900 dark:text-white">Quote Link Not Valid</h2>
+          <p className="mt-2 text-sm text-gray-500 dark:text-gray-400">
+            This approval link is invalid. Please contact your service provider for an updated link.
+          </p>
+          <Link to="/" className="mt-6 inline-block text-sm font-medium" style={{ color: accentColor }}>
+            Go Home
+          </Link>
+        </div>
+      </div>
+    );
+  }
+
+  if (pageStatus === 'expired') {
+    return (
+      <div className="flex min-h-screen items-center justify-center bg-gray-50 px-4 dark:bg-gray-950">
+        <div className="max-w-md text-center">
+          <Clock className="mx-auto h-12 w-12 text-red-500" />
+          <h2 className="mt-4 text-lg font-semibold text-gray-900 dark:text-white">Quote Has Expired</h2>
+          <p className="mt-2 text-sm text-gray-500 dark:text-gray-400">
+            This quote is no longer valid for approval. Please contact your service provider for an updated quote.
+          </p>
+          <Link to="/" className="mt-6 inline-block text-sm font-medium" style={{ color: accentColor }}>
+            Go Home
+          </Link>
+        </div>
+      </div>
+    );
+  }
+
+  if (pageStatus === 'error') {
+    return (
+      <div className="flex min-h-screen items-center justify-center bg-gray-50 px-4 dark:bg-gray-950">
+        <div className="max-w-md text-center">
+          <AlertTriangle className="mx-auto h-12 w-12 text-red-500" />
+          <h2 className="mt-4 text-lg font-semibold text-gray-900 dark:text-white">Unable to Load Quote</h2>
+          <p className="mt-2 text-sm text-gray-500 dark:text-gray-400">
+            Something went wrong while loading your quote. Please try again or contact your service provider.
+          </p>
+          <button
+            onClick={() => token && loadQuote(token)}
+            className="mt-6 inline-block rounded-lg px-5 py-2.5 text-sm font-medium text-white"
+            style={{ backgroundColor: accentColor }}
+          >
+            Try Again
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  if (pageStatus === 'phone_verify' && quote) {
+    const lockedOut = phoneAttempts >= MAX_PHONE_ATTEMPTS;
+    return (
+      <div className="flex min-h-screen items-center justify-center bg-gray-50 px-4 dark:bg-gray-950">
+        <div className="w-full max-w-sm text-center">
+          {settings?.logoUrl ? (
+            <img src={settings.logoUrl} alt={settings.businessName || 'Shop'} className="mx-auto h-16 mb-4 object-contain" />
+          ) : (
+            <div className="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-xl text-white text-lg font-bold" style={{ backgroundColor: accentColor }}>
+              {(settings?.businessName || 'S').charAt(0)}
+            </div>
+          )}
+          <h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-1">
+            Verify Your Identity
+          </h2>
+          <p className="text-sm text-gray-500 dark:text-gray-400 mb-1">
+            This quote is for <span className="font-medium text-gray-700 dark:text-gray-300">{quote.customerName}</span>
+          </p>
+          <p className="text-xs text-gray-400 dark:text-gray-500 mb-6">
+            Enter the last 4 digits of the phone number on file to continue.
+          </p>
+
+          <div className="max-w-[200px] mx-auto">
+            {lockedOut ? (
+              <div className="rounded-xl border border-red-200 bg-red-50 p-5 dark:border-red-800 dark:bg-red-900/20">
+                <ShieldX className="mx-auto h-8 w-8 text-red-500 mb-2" />
+                <p className="text-sm text-red-700 dark:text-red-400 font-medium">Access Locked</p>
+                <p className="mt-1 text-xs text-red-600 dark:text-red-400">
+                  Too many incorrect attempts. Please call the shop directly to verify your identity.
+                </p>
+                <p className="mt-3 text-xs text-gray-500 dark:text-gray-400">
+                  {settings?.businessPhone && <span>Call {settings.businessPhone}</span>}
+                </p>
+              </div>
+            ) : (
+              <>
+                <input
+                  type="text"
+                  value={phoneInput}
+                  onChange={(e) => setPhoneInput(e.target.value.replace(/\D/g, '').slice(0, 4))}
+                  onKeyDown={(e) => { if (e.key === 'Enter') handlePhoneVerify(); }}
+                  placeholder="Last 4 digits"
+                  maxLength={4}
+                  autoFocus
+                  className="w-full text-center text-2xl tracking-[0.5em] rounded-xl border border-gray-300 bg-white px-4 py-4 text-gray-900 placeholder-gray-300 focus:outline-none focus:ring-2 focus:ring-green-500/20 focus:border-green-500 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-600"
+                  inputMode="numeric"
+                  autoComplete="off"
+                />
+                {error && (
+                  <p className="mt-2 text-xs text-red-600 dark:text-red-400">{error}</p>
+                )}
+                <button
+                  onClick={handlePhoneVerify}
+                  disabled={phoneInput.replace(/\D/g, '').length < 4}
+                  className="mt-4 w-full flex items-center justify-center gap-2 rounded-lg px-4 py-3 text-sm font-semibold text-white transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                  style={{ backgroundColor: accentColor }}
+                >
+                  <ShieldCheck className="h-4 w-4" />
+                  Verify & View Quote
+                </button>
+              </>
+            )}
+          </div>
+
+          <p className="mt-6 text-xs text-gray-400 dark:text-gray-500">
+            Having trouble? {settings?.businessName || 'Your service provider'} can help.
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  if (submitted) {
+    const name = signatureName.trim() || 'Customer';
+    return (
+      <div className="flex min-h-screen items-center justify-center bg-gray-50 px-4 dark:bg-gray-950">
+        <div className="max-w-md text-center">
+          <CheckCircle2 className="mx-auto h-16 w-16" style={{ color: accentColor }} />
+          <h2 className="mt-4 text-xl font-semibold text-gray-900 dark:text-white">Thank You, {name}</h2>
+          <p className="mt-2 text-sm text-gray-500 dark:text-gray-400">
+            Your decisions have been recorded. {quote?.advisorName ? `${quote.advisorName} will review them shortly.` : 'Your service provider will review them shortly.'}
+          </p>
+          <p className="mt-1 text-xs text-gray-400 dark:text-gray-500">
+            Authorized by {name} on {new Date().toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric', hour: 'numeric', minute: '2-digit' })}
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  if (!quote) return null;
+
+  return (
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-950">
+      <div className="mx-auto max-w-2xl px-4 py-8 sm:px-6 lg:px-8">
+        {/* Header */}
+        <div className="mb-8 text-center">
+          {settings?.logoUrl ? (
+            <img src={settings.logoUrl} alt={settings.businessName || 'Shop'} className="mx-auto h-16 mb-3 object-contain" />
+          ) : (
+            <div className="mx-auto mb-3 flex h-16 w-16 items-center justify-center rounded-xl text-white text-xl font-bold" style={{ backgroundColor: accentColor }}>
+              {(settings?.businessName || 'S').charAt(0)}
+            </div>
+          )}
+          <h1 className="text-lg font-semibold text-gray-900 dark:text-white">
+            {settings?.businessName || 'Your Service Provider'}
+          </h1>
+          <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
+            Service Estimate for {quote.customerName}
+          </p>
+          <p className="text-xs text-gray-400 dark:text-gray-500">
+            {quote.vehicleInfo}
+            {quote.createdAt ? `  •  ${new Date(quote.createdAt).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}` : ''}
+          </p>
+        </div>
+
+        {/* Intro */}
+        <div className="mb-6 rounded-xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-gray-900">
+          <p className="text-sm text-gray-600 dark:text-gray-300">
+            Please review the services below. Select <span className="font-medium text-green-600">Approve</span> for
+            each service you would like performed, or <span className="font-medium text-red-600">Decline</span> for
+            services you do not want at this time.
+          </p>
+        </div>
+
+        {/* Services List */}
+        <div className="space-y-3 mb-6">
+          {visibleServices.map((service) => {
+            const decision = decisions[service.id];
+            const isApproved = decision === 'approved';
+            const isDeclined = decision === 'declined';
+            const isPending = decision === undefined;
+
+            return (
+              <div
+                key={service.id}
+                className={`rounded-xl border bg-white p-4 dark:bg-gray-900 transition-colors ${
+                  isApproved
+                    ? 'border-green-300 dark:border-green-800'
+                    : isDeclined
+                    ? 'border-red-300 dark:border-red-800'
+                    : 'border-gray-200 dark:border-gray-800'
+                }`}
+              >
+                <div className="flex items-start justify-between gap-3">
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-center gap-2">
+                      {isApproved && <CheckCircle2 className="h-4 w-4 text-green-600 shrink-0" />}
+                      {isDeclined && <XCircle className="h-4 w-4 text-red-600 shrink-0" />}
+                      <h3 className="text-sm font-medium text-gray-900 dark:text-white">{service.name}</h3>
+                    </div>
+                    {service.explanation && (
+                      <p className="mt-1 text-xs text-gray-500 dark:text-gray-400 line-clamp-2">{service.explanation}</p>
+                    )}
+                    {service.priority && (
+                      <span className="inline-block mt-2 text-xs font-medium uppercase tracking-wide text-amber-600 dark:text-amber-400">
+                        {service.priority.replace(/_/g, ' ')}
+                      </span>
+                    )}
+                    {isPending && (
+                      <div className="mt-2 flex flex-wrap gap-2">
+                        <button
+                          onClick={() => setDecision(service.id, 'approved')}
+                          className="inline-flex items-center gap-1.5 rounded-lg bg-green-600 px-3 py-1.5 text-xs font-medium text-white hover:bg-green-700 transition-colors"
+                        >
+                          <CheckCircle2 className="h-3.5 w-3.5" /> Approve
+                        </button>
+                        <button
+                          onClick={() => setDecision(service.id, 'declined')}
+                          className="inline-flex items-center gap-1.5 rounded-lg border border-red-300 bg-white px-3 py-1.5 text-xs font-medium text-red-600 hover:bg-red-50 transition-colors dark:border-red-700 dark:bg-gray-800 dark:text-red-400 dark:hover:bg-red-900/20"
+                        >
+                          <XCircle className="h-3.5 w-3.5" /> Decline
+                        </button>
+                      </div>
+                    )}
+                  </div>
+                  <div className="text-right shrink-0">
+                    <span className={`text-sm font-semibold ${
+                      isApproved ? 'text-green-600 dark:text-green-400' :
+                      isDeclined ? 'text-gray-400 dark:text-gray-500 line-through' :
+                      'text-gray-900 dark:text-gray-100'
+                    }`}>
+                      ${(Number(service.price) || 0).toFixed(2)}
+                    </span>
+                    {isApproved && (
+                      <p className="mt-0.5 text-xs text-green-600 dark:text-green-400 font-medium">Approved</p>
+                    )}
+                    {isDeclined && (
+                      <p className="mt-0.5 text-xs text-red-600 dark:text-red-400 font-medium">Declined</p>
+                    )}
+                  </div>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+
+        {/* Summary */}
+        <div className="rounded-xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-gray-900 mb-6">
+          <h3 className="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3">Estimate Summary</h3>
+          <div className="space-y-1.5 text-sm">
+            {decisionSplit ? (
+              <>
+                <div className="rounded-lg border border-green-200 bg-green-50/60 px-3 py-2.5 dark:border-green-800 dark:bg-green-900/15">
+                  <div className="flex justify-between font-semibold text-green-700 dark:text-green-400">
+                    <span>Already approved work</span>
+                    <span>${decisionSplit.approved.total.toFixed(2)}</span>
+                  </div>
+                  <div className="mt-1 space-y-1 text-xs text-gray-500 dark:text-gray-400">
+                    <div className="flex justify-between"><span>Services</span><span>${decisionSplit.approved.subtotal.toFixed(2)}</span></div>
+                    {decisionSplit.approved.shopCharge > 0 && <div className="flex justify-between"><span>Shop charge</span><span>${decisionSplit.approved.shopCharge.toFixed(2)}</span></div>}
+                    {decisionSplit.approved.tax > 0 && <div className="flex justify-between"><span>{quoteSettings.taxLabel || 'Tax'}</span><span>${decisionSplit.approved.tax.toFixed(2)}</span></div>}
+                  </div>
+                </div>
+                <div className="rounded-lg border border-amber-200 bg-amber-50/60 px-3 py-2.5 dark:border-amber-800 dark:bg-amber-900/15">
+                  <div className="flex justify-between font-semibold text-amber-700 dark:text-amber-400">
+                    <span>Additional recommendations</span>
+                    <span>${decisionSplit.pending.total.toFixed(2)}</span>
+                  </div>
+                  <div className="mt-1 space-y-1 text-xs text-gray-500 dark:text-gray-400">
+                    <div className="flex justify-between"><span>Services</span><span>${decisionSplit.pending.subtotal.toFixed(2)}</span></div>
+                    {decisionSplit.pending.shopCharge > 0 && <div className="flex justify-between"><span>Shop charge</span><span>${decisionSplit.pending.shopCharge.toFixed(2)}</span></div>}
+                    {decisionSplit.pending.tax > 0 && <div className="flex justify-between"><span>{quoteSettings.taxLabel || 'Tax'}</span><span>${decisionSplit.pending.tax.toFixed(2)}</span></div>}
+                  </div>
+                </div>
+                <div className="flex justify-between rounded-lg bg-gray-100 px-3 py-2 dark:bg-gray-800">
+                  <span className="font-semibold text-gray-900 dark:text-white">Total if all work is approved</span>
+                  <span className="font-bold" style={{ color: accentColor }}>${decisionSplit.combined.total.toFixed(2)}</span>
+                </div>
+              </>
+            ) : (
+              <>
+                <div className="flex justify-between">
+                  <span className="text-gray-500 dark:text-gray-400">Services</span>
+                  <span className="text-gray-900 dark:text-gray-100">${(decisionTotals?.subtotal || 0).toFixed(2)}</span>
+                </div>
+                {(decisionTotals?.discountAmount || 0) > 0 && (
+                  <div className="flex justify-between text-green-600 dark:text-green-400">
+                    <span>Discount</span>
+                    <span>-${(decisionTotals?.discountAmount || 0).toFixed(2)}</span>
+                  </div>
+                )}
+                {(decisionTotals?.shopCharge || 0) > 0 && (
+                  <div className="flex justify-between">
+                    <span className="text-gray-500 dark:text-gray-400">Shop charge</span>
+                    <span className="text-gray-900 dark:text-gray-100">${(decisionTotals?.shopCharge || 0).toFixed(2)}</span>
+                  </div>
+                )}
+                {(decisionTotals?.tax || 0) > 0 && (
+                  <div className="flex justify-between">
+                    <span className="text-gray-500 dark:text-gray-400">{quoteSettings.taxLabel || 'Tax'}</span>
+                    <span className="text-gray-900 dark:text-gray-100">${(decisionTotals?.tax || 0).toFixed(2)}</span>
+                  </div>
+                )}
+              </>
+            )}
+            <div className="border-t border-gray-200 dark:border-gray-700 pt-2 mt-2 flex justify-between">
+              <span className="font-semibold text-gray-900 dark:text-white">Estimated total based on choices</span>
+              <span className="font-bold text-lg" style={{ color: accentColor }}>
+                ${(decisionTotals?.total || 0).toFixed(2)}
+              </span>
+            </div>
+          </div>
+          {visibleServices.length > 0 && (
+            <div className="mt-3 flex gap-4 text-xs text-gray-500 dark:text-gray-400">
+              <span className="flex items-center gap-1"><CheckCircle2 className="h-3 w-3 text-green-600" /> {approvedCount} approved</span>
+              <span className="flex items-center gap-1"><XCircle className="h-3 w-3 text-red-600" /> {declinedCount} declined</span>
+              <span className="flex items-center gap-1"><Clock className="h-3 w-3 text-amber-500" /> {visibleServices.length - approvedCount - declinedCount} pending</span>
+            </div>
+          )}
+        </div>
+
+        {/* Signature */}
+        <div className="rounded-xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-gray-900 mb-6">
+          <h3 className="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3 flex items-center gap-1.5">
+            <Signature className="h-4 w-4" /> Authorization
+          </h3>
+          <p className="text-xs text-gray-500 dark:text-gray-400 mb-3">
+            By entering your full name below, you authorize your service provider to perform the approved services and acknowledge the declined services.
+          </p>
+          <input
+            type="text"
+            value={signatureName}
+            onChange={(e) => setSignatureName(e.target.value)}
+            placeholder="Enter your full name"
+            className="w-full rounded-lg border border-gray-300 bg-white px-4 py-3 text-sm text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-green-500/20 focus:border-green-500 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-500"
+          />
+        </div>
+
+        {/* Actions */}
+        <div className="space-y-3">
+          {error && (
+            <div className="rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700 dark:border-red-800 dark:bg-red-900/20 dark:text-red-400">
+              {error}
+            </div>
+          )}
+          {!hasPending && (
+            <button
+              onClick={handleSubmitAll}
+              disabled={saving || !signatureName.trim()}
+              className="w-full flex items-center justify-center gap-2 rounded-lg px-4 py-3 text-sm font-semibold text-white transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+              style={{ backgroundColor: accentColor }}
+            >
+              {saving ? (
+                <Loader2 className="h-4 w-4 animate-spin" />
+              ) : (
+                <ShieldCheck className="h-4 w-4" />
+              )}
+              {saving ? 'Submitting...' : 'Submit Decisions'}
+            </button>
+          )}
+          {hasPending && (
+            <p className="text-center text-xs text-gray-400 dark:text-gray-500 flex items-center justify-center gap-1">
+              <ShieldX className="h-3.5 w-3.5" /> Please approve or decline each service above
+            </p>
+          )}
+          <p className="text-center text-xs text-gray-400 dark:text-gray-500">
+            {settings?.businessName || 'Your provider'} will be notified of your decisions.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/pages/QuoteGenerator.tsx b/src/pages/QuoteGenerator.tsx
new file mode 100644
index 0000000..6b24560
--- /dev/null
+++ b/src/pages/QuoteGenerator.tsx
@@ -0,0 +1,913 @@
+import { useState, useEffect } from 'react';
+import { useSearchParams, useNavigate, useLocation } from 'react-router-dom';
+import {
+  Search, Trash2, Plus, FileText, X,
+  ListOrdered, Lightbulb, Loader2, Wrench, AlertTriangle,
+} from 'lucide-react';
+import { pb } from '../lib/pocketbase';
+import { useQuoteStore } from '../store/quote';
+import { useSettingsStore } from '../store/settings';
+import { getPriorityAnalysis, aiSuggestServices } from '../lib/ai';
+import { uniqueRONumber } from '../lib/roNumber';
+import { useToast } from '../components/ui/Toast';
+import type { QuoteService, CustomerInfo } from '../types';
+import { logError } from '../lib/userMessages';
+import { normalizeCustomerInfo, formatQuoteCurrency, formatQuoteDate } from '../lib/quoteHelpers';
+
+/* ── Helper: convert legacy flat customer fields to CustomerInfo ── */
+function toCustomerInfo(opts: {
+  name?: string; phone?: string; vehicleInfo?: string; vin?: string;
+  mileage?: string; roNumber?: string; repairOrderId?: string; serviceAdvisor?: string;
+}): CustomerInfo {
+  const n = opts.name || '';
+  const parts = n.trim().split(/\s+/);
+  return {
+    firstName: parts[0] || '',
+    middleName: '',
+    lastName: parts.slice(1).join(' ') || '',
+    name: n,
+    phone: opts.phone || '',
+    vehicleInfo: opts.vehicleInfo || '',
+    vin: opts.vin || '',
+    mileage: opts.mileage || '',
+    roNumber: opts.roNumber || '',
+    repairOrderId: opts.repairOrderId || '',
+    serviceAdvisor: opts.serviceAdvisor || '',
+    email: '',
+  };
+}
+
+// Extracted components
+import {
+  type QuoteRecord,
+  type RecentQuoteFilter,
+  type RecentQuoteSort,
+  RECENT_QUOTE_FILTERS,
+  RecentStatusBadge,
+  CustomerInfoPanel,
+  ServiceSearch,
+  ServicesTable,
+  QuoteSummary,
+} from '../components/quoteGenerator';
+
+/* ── Helpers kept local (recent-quotes panel only) ──── */
+
+const recentQuoteDate = (quote: QuoteRecord) => quote.createdAt || quote.lastUpdated || '';
+const recentQuoteTimestamp = (quote: QuoteRecord) => {
+  const value = recentQuoteDate(quote);
+  const parsed = value ? new Date(value).getTime() : NaN;
+  return Number.isNaN(parsed) ? 0 : parsed;
+};
+const matchesRecentStatusFilter = (quote: QuoteRecord, filter: RecentQuoteFilter) => {
+  if (filter === 'all') return true;
+  if (filter === 'pending') return quote.status === 'sent';
+  return quote.status === filter;
+};
+
+/* ── Main Page ──────────────────────────────────────── */
+
+export default function QuoteGenerator() {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const [searchParams] = useSearchParams();
+  const editId = searchParams.get('edit');
+  const { reset, setCustomerInfo, addService } = useQuoteStore();
+  const [repairOriginId, setRepairOriginId] = useState<string | null>(null);
+
+  // Pre-populate from RO data passed via URL params
+  useEffect(() => {
+    const fromRO = searchParams.get('fromRO');
+    const name = searchParams.get('name');
+    if (!fromRO && !name) return;
+
+    const applyCI = (ci: CustomerInfo) => {
+      if (ci.name) setCustomerInfo(ci);
+    };
+
+    if (!fromRO) {
+      applyCI(toCustomerInfo({
+        name: name || '',
+        phone: searchParams.get('phone') || '',
+        vehicleInfo: searchParams.get('vehicleInfo') || '',
+        vin: searchParams.get('vin') || '',
+        mileage: searchParams.get('mileage') || '',
+        roNumber: searchParams.get('roNumber') || '',
+        serviceAdvisor: searchParams.get('serviceAdvisor') || '',
+      }));
+      return;
+    }
+
+    (async () => {
+      try {
+        setLoading(true);
+        const ro = (await pb.collection('repairOrders').getOne(fromRO)) as any;
+        setRepairOriginId(ro.id);
+
+        let roServices: any[] = [];
+        const raw = ro.services;
+        if (typeof raw === 'string' && raw.trim()) {
+          try { roServices = JSON.parse(raw); } catch (err) { logError('Failed to parse quote-to-RO services JSON', err); roServices = []; }
+        } else if (Array.isArray(raw)) {
+          roServices = raw;
+        }
+
+        reset();
+        applyCI(toCustomerInfo({
+          name: ro.customerName || name || '',
+          phone: ro.customerPhone || searchParams.get('phone') || '',
+          vehicleInfo: ro.vehicleInfo || searchParams.get('vehicleInfo') || '',
+          vin: ro.vin || searchParams.get('vin') || '',
+          mileage: ro.mileage || searchParams.get('mileage') || '',
+          roNumber: ro.roNumber || searchParams.get('roNumber') || '',
+          repairOrderId: ro.id,
+          serviceAdvisor: ro.advisorName || searchParams.get('serviceAdvisor') || '',
+        }));
+        roServices
+          .filter((s: any) => s.name && s.name.trim())
+          .forEach((s: any) => {
+            const splitPrice =
+              (Number(s.laborHours) || 0) * (Number(s.laborRate) || 0) +
+              (Number(s.partsCost) || 0);
+            const flatPrice = splitPrice || (Number(s.total) || 0);
+            addService({
+              id: `ro-${ro.id}-${s.id || Math.random().toString(36).slice(2, 8)}`,
+              name: s.name,
+              price: flatPrice,
+              selected: true,
+              approved: true,
+              customerDecision: 'approved',
+              applyShopCharge: s.applyShopCharge !== false,
+              sourceROServiceId: s.id || undefined,
+              pricingMode: s.pricingMode || (splitPrice ? 'split' : 'full'),
+              laborHours: Number(s.laborHours) || undefined,
+              laborRate: Number(s.laborRate) || undefined,
+              partsCost: Number(s.partsCost) || undefined,
+              authorizedBy: ro.advisorName || 'RO Pre-Approval',
+              authorizedAt: ro.updated || new Date().toISOString(),
+              authorizedMethod: 'in_person',
+              technicianNotes: s.technician ? `Tech: ${s.technician}` : undefined,
+            });
+          });
+        if (roServices.length > 0) {
+          showToast(`Loaded ${roServices.length} service(s) from RO #${ro.roNumber || ro.id.slice(0, 6)}`, 'success');
+        }
+      } catch (err) {
+        console.error('Failed to load RO for quote pre-fill:', err);
+        applyCI(toCustomerInfo({
+          name: name || '',
+          phone: searchParams.get('phone') || '',
+          vehicleInfo: searchParams.get('vehicleInfo') || '',
+          vin: searchParams.get('vin') || '',
+          mileage: searchParams.get('mileage') || '',
+          roNumber: searchParams.get('roNumber') || '',
+          serviceAdvisor: searchParams.get('serviceAdvisor') || '',
+        }));
+      } finally {
+        setLoading(false);
+      }
+    })();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const [loading, setLoading] = useState(false);
+
+  // ── AI: Generate Priorities ──
+  const [prioritiesLoading, setPrioritiesLoading] = useState(false);
+  const { showToast } = useToast();
+  const { services } = useQuoteStore();
+  const updateService = useQuoteStore((s) => s.updateService);
+
+  // ── AI: Suggest Services ──
+  const [suggestLoading, setSuggestLoading] = useState(false);
+  const [suggestions, setSuggestions] = useState<{ id: string; name: string; price: number; reason: string; explanation: string; recommendation: string }[]>([]);
+  const [showSuggestions, setShowSuggestions] = useState(false);
+
+  // ── Recent Quotes ──
+  const [recentQuotes, setRecentQuotes] = useState<QuoteRecord[]>([]);
+  const [recentOpen, setRecentOpen] = useState(false);
+  const [recentLoading, setRecentLoading] = useState(false);
+  const [recentQuery, setRecentQuery] = useState('');
+  const [recentStatusFilter, setRecentStatusFilter] = useState<RecentQuoteFilter>('all');
+  const [recentSort, setRecentSort] = useState<RecentQuoteSort>('newest');
+  const [deleteTarget, setDeleteTarget] = useState<QuoteRecord | null>(null);
+  const [deletingQuote, setDeletingQuote] = useState(false);
+
+  useEffect(() => {
+    if (!recentOpen) return;
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') setRecentOpen(false);
+    };
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [recentOpen]);
+
+  const loadRecentQuotes = async () => {
+    setRecentLoading(true);
+    try {
+      const userId = pb.authStore.model?.id;
+      if (!userId) return;
+      const records = await pb.collection('quotes').getList(1, 50, {
+        filter: `userId = '${userId}'`,
+        sort: '-id',
+        fields: 'id,customerName,vehicleInfo,repairOrderNumber,total,status,createdAt,lastUpdated,services',
+      });
+      setRecentQuotes((records.items as any[]).map((record) => {
+        const rawServices = record.services;
+        let servicesList: any[] = [];
+        if (typeof rawServices === 'string') { try { servicesList = JSON.parse(rawServices); } catch (err) { logError('Failed to parse recent quote services JSON', err); servicesList = []; } }
+        else if (Array.isArray(rawServices)) { servicesList = rawServices; }
+        const approvedTotal = servicesList.reduce((sum: number, s: any) => s.customerDecision === 'approved' ? sum + (parseFloat(String(s.price)) || 0) : sum, 0);
+        const declinedTotal = servicesList.reduce((sum: number, s: any) => s.customerDecision === 'declined' ? sum + (parseFloat(String(s.price)) || 0) : sum, 0);
+        const hasPending = servicesList.some((s: any) => !s.customerDecision || s.customerDecision === 'pending');
+        // Derive status from service decisions when ALL services are decided
+        let derivedStatus: QuoteRecord['status'] = record.status;
+        if (!hasPending && servicesList.length > 0) {
+          const allApproved = servicesList.every((s: any) => s.customerDecision === 'approved');
+          const allDeclined = servicesList.every((s: any) => s.customerDecision === 'declined');
+          if (allApproved) derivedStatus = 'approved';
+          else if (allDeclined) derivedStatus = 'declined';
+        }
+        return {
+          ...record,
+          roNumber: record.roNumber || record.repairOrderNumber || '',
+          approvedTotal,
+          declinedTotal,
+          hasPending,
+          status: derivedStatus,
+        };
+      }) as QuoteRecord[]);
+    } catch {
+      setRecentQuotes([]);
+    } finally {
+      setRecentLoading(false);
+    }
+  };
+
+  const handleDeleteQuote = async () => {
+    if (!deleteTarget) return;
+    setDeletingQuote(true);
+    try {
+      await pb.collection('quotes').delete(deleteTarget.id);
+      showToast('Quote deleted', 'success');
+      setDeleteTarget(null);
+      loadRecentQuotes();
+    } catch (err: unknown) {
+      logError('Failed to delete quote', err);
+      showToast('Quote could not be deleted. Please try again.', 'error');
+    } finally {
+      setDeletingQuote(false);
+    }
+  };
+
+  const handleRecentToggle = async () => {
+    if (recentOpen) {
+      setRecentOpen(false);
+      return;
+    }
+    setRecentOpen(true);
+    if (recentQuotes.length === 0) {
+      await loadRecentQuotes();
+    }
+  };
+
+  const filteredQuotes = recentQuotes
+    .filter((q) => {
+      if (!matchesRecentStatusFilter(q, recentStatusFilter)) return false;
+      if (!recentQuery.trim()) return true;
+      const ql = recentQuery.toLowerCase();
+      return (q.customerName || '').toLowerCase().includes(ql) ||
+        (q.roNumber || '').toLowerCase().includes(ql) ||
+        (q.vehicleInfo || '').toLowerCase().includes(ql);
+    })
+    .sort((a, b) => {
+      if (recentSort === 'oldest') return recentQuoteTimestamp(a) - recentQuoteTimestamp(b);
+      if (recentSort === 'highest-total') return (b.total || 0) - (a.total || 0);
+      if (recentSort === 'customer-asc') return (a.customerName || '').localeCompare(b.customerName || '');
+      return recentQuoteTimestamp(b) - recentQuoteTimestamp(a);
+    });
+
+  const recentCounts = recentQuotes.reduce<Record<RecentQuoteFilter, number>>((counts, quote) => {
+    counts.all += 1;
+    if (quote.status === 'sent') counts.pending += 1;
+    else if (quote.status === 'approved') counts.approved += 1;
+    else if (quote.status === 'declined') counts.declined += 1;
+    else counts.draft += 1;
+    return counts;
+  }, { all: 0, draft: 0, pending: 0, approved: 0, declined: 0 });
+
+  const handleGeneratePriorities = async () => {
+    const allServices = services;
+    if (allServices.length < 1) {
+      showToast('Add at least one service before generating priorities.', 'info');
+      return;
+    }
+    setPrioritiesLoading(true);
+    try {
+      const results = await getPriorityAnalysis(allServices);
+      if (results) {
+        for (const r of results) {
+          const svc = allServices.find((s: QuoteService) => s.name === r.name);
+          if (svc) {
+            updateService(svc.id, { priority: r.rank === 1 ? 'CRITICAL_SAFETY' : r.rank <= 2 ? 'SAFETY_CONCERN' : 'RECOMMENDED' as QuoteService['priority'], priorityReason: r.priority_reason });
+          }
+        }
+        showToast(`Priorities generated for ${results.length} service(s).`, 'success');
+      } else {
+        showToast('Priority analysis failed', 'error');
+      }
+    } catch (err) {
+      logError('Failed to generate priorities', err);
+      showToast('Priority analysis could not be completed. Please try again.', 'error');
+    } finally {
+      setPrioritiesLoading(false);
+    }
+  };
+
+  const handleAiSuggest = async () => {
+    const { customerInfo } = useQuoteStore.getState();
+    const parts = (customerInfo.vehicleInfo || '').match(/^(\d{4})\s+(.+?)\s+(.+)$/);
+    const vehicleInfo = parts
+      ? { year: parts[1], make: parts[2], model: parts[3] }
+      : { year: '', make: customerInfo.vehicleInfo || '', model: '' };
+
+    if (!vehicleInfo.year && !vehicleInfo.make) {
+      showToast('Please fill in the vehicle info (year, make, model) first.', 'info');
+      return;
+    }
+
+    setSuggestLoading(true);
+    try {
+      const catalog: { id: string; name: string; price: number }[] = [];
+      try {
+        const userId = pb.authStore.model?.id;
+        if (userId) {
+          const records = await pb.collection('services').getFullList({ filter: `userId="${userId}"` });
+          catalog.push(...records.map((r: any) => ({ id: r.id, name: r.name, price: r.price || 0 })));
+        }
+      } catch { /* use empty catalog */ }
+
+      const results = await aiSuggestServices(
+        { vehicleInfo: customerInfo.vehicleInfo || `${vehicleInfo.year || ''} ${vehicleInfo.make || ''} ${vehicleInfo.model || ''}`.trim(), mileage: parseInt(customerInfo.mileage) || 0, vin: customerInfo.vin },
+        services.map((s) => s.name),
+        catalog.map((c) => ({ name: c.name, category: '', price: c.price })),
+      );
+      const suggestions = (results || []).map((r) => ({
+        id: `sug-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`,
+        name: r.name,
+        reason: r.reason,
+        price: catalog.find((c) => c.name === r.name)?.price || 0,
+        explanation: '',
+        recommendation: '',
+      }));
+      setSuggestions(suggestions);
+      setShowSuggestions(suggestions.length > 0);
+      if (suggestions.length === 0) {
+        showToast('No additional service recommendations were found for this vehicle.', 'info');
+      }
+    } catch (err) {
+      logError('Failed to generate AI suggestions', err);
+      showToast('Service suggestions could not be generated. Please try again.', 'error');
+    } finally {
+      setSuggestLoading(false);
+    }
+  };
+
+  const handleAddSuggestion = (sug: typeof suggestions[0]) => {
+    const newSvc: QuoteService = {
+      id: `sug-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`,
+      name: sug.name,
+      price: sug.price,
+      explanation: sug.explanation,
+      recommendation: sug.recommendation,
+      selected: true,
+      approved: false,
+      customerDecision: 'pending',
+    };
+    addService(newSvc);
+    setSuggestions((prev) => {
+      const next = prev.filter((s) => s.id !== sug.id);
+      if (next.length === 0) setShowSuggestions(false);
+      return next;
+    });
+    showToast(`Added "${sug.name}" to the quote.`, 'success');
+  };
+
+  // ── Convert a saved quote to a Repair Order ──
+  const [convertingId, setConvertingId] = useState<string | null>(null);
+
+  const handleConvertQuoteToRO = async (quote: QuoteRecord) => {
+    setConvertingId(quote.id);
+    try {
+      const q = (await pb.collection('quotes').getOne(quote.id)) as any;
+
+      let existing = new Set<string>();
+      try {
+        const userId = pb.authStore.model?.id;
+        if (userId) {
+          const ros = await pb.collection('repairOrders').getFullList({
+            filter: `userId = "${userId}"`,
+            fields: 'roNumber,repairOrderNumber',
+            batch: 500,
+          });
+          existing = new Set(ros.map((r: any) => r.roNumber || r.repairOrderNumber).filter(Boolean));
+        }
+      } catch { /* ignore */ }
+
+      const ci = normalizeCustomerInfo({
+        ...q,
+        ...(typeof q.customerInfo === 'string' ? (() => { try { return JSON.parse(q.customerInfo); } catch (err) { logError('Failed to parse quote customerInfo JSON', err); return {}; } })() : (q.customerInfo || {})),
+      }) || { name: quote.customerName, phone: '', vehicleInfo: quote.vehicleInfo, vin: '', mileage: '', roNumber: quote.roNumber || quote.repairOrderNumber || '', serviceAdvisor: '' };
+
+      const settings = useSettingsStore.getState().settings;
+      const laborRate = settings.defaultLaborRate || 95;
+      let svcs: any[] = [];
+      const rawSvcs = q.services;
+      if (typeof rawSvcs === 'string') { try { svcs = JSON.parse(rawSvcs); } catch (err) { logError('Failed to parse quote-to-RO svcs JSON', err); svcs = []; } }
+      else if (Array.isArray(rawSvcs)) { svcs = rawSvcs; }
+
+      const roServices = svcs
+        .filter((s: any) => s.approved)
+        .map((s: any, i: number) => {
+          const price = parseFloat(String(s.price ?? 0)) || 0;
+          const laborHours = price / laborRate;
+          return {
+            id: s.id || `rosvc-${i}`,
+            name: s.name || '',
+            description: s.explanation || '',
+            laborHours: Math.round(laborHours * 100) / 100,
+            laborRate,
+            partsCost: 0,
+            total: price,
+            status: 'pending' as const,
+            technician: '',
+            pricingMode: s.pricingMode || 'full',
+            applyShopCharge: s.applyShopCharge !== false,
+            technicianNotes: s.technicianNotes || '',
+          };
+        });
+
+      const roNumber = uniqueRONumber(existing);
+      const userId = pb.authStore.model?.id;
+      const payload: Record<string, any> = {
+        userId,
+        quoteId: q.id,
+        customerId: q.customerId || '',
+        customerName: ci.name,
+        customerPhone: ci.phone,
+        vehicleInfo: ci.vehicleInfo,
+        vin: ci.vin,
+        mileage: ci.mileage,
+        advisorName: ci.serviceAdvisor,
+        roNumber,
+        notes: `Converted from quote #${q.id.slice(0, 8)}`,
+        warranty: false,
+        status: 'active',
+        customerType: 'drop-off',
+        estimatedTime: '1.0',
+        services: JSON.stringify(roServices),
+        writeupTime: new Date().toISOString(),
+      };
+
+      const created = await pb.collection('repairOrders').create(payload);
+      try {
+        await pb.collection('quotes').update(q.id, { repairOrderId: created.id });
+      } catch { /* best-effort */ }
+
+      showToast(`Created RO #${roNumber} from quote.`, 'success');
+      setRecentOpen(false);
+      setRecentQuery('');
+      navigate('/repair-orders');
+    } catch (err) {
+      logError('Failed to convert quote to repair order', err);
+      showToast('Quote could not be converted to a repair order. Please try again.', 'error');
+    } finally {
+      setConvertingId(null);
+    }
+  };
+
+  // ── Edit quote loading ──
+  useEffect(() => {
+    if (!editId) return;
+    const load = async () => {
+      setLoading(true);
+      try {
+        const record = await pb.collection('quotes').getOne(editId);
+        const data = record as any;
+        const ci = normalizeCustomerInfo(data);
+        const recentQuoteState = (location.state as { recentQuote?: QuoteRecord } | null)?.recentQuote;
+        const nextCustomerInfo: CustomerInfo = (() => {
+          if (ci) {
+            const parts = (ci.name || '').trim().split(/\s+/);
+            return { ...ci, firstName: parts[0] || '', middleName: '', lastName: parts.slice(1).join(' ') || '', email: '', customerId: data.customerId || undefined, repairOrderId: data.repairOrderId || ci.repairOrderId || '' };
+          }
+          return toCustomerInfo({
+            name: data.customerName || '',
+            phone: data.customerPhone || '',
+            vehicleInfo: data.vehicleInfo || '',
+            vin: data.vin || '',
+            mileage: data.mileage || '',
+            roNumber: data.roNumber || data.repairOrderNumber || '',
+            repairOrderId: data.repairOrderId || '',
+            serviceAdvisor: data.serviceAdvisor || '',
+          });
+        })();
+        if (!nextCustomerInfo.roNumber && recentQuoteState?.id === editId) {
+          nextCustomerInfo.roNumber = recentQuoteState.roNumber || '';
+        }
+        const nextServices = (() => {
+          if (!data.services) return [] as QuoteService[];
+          try {
+            const parsed = typeof data.services === 'string'
+              ? JSON.parse(data.services)
+              : data.services;
+            return Array.isArray(parsed) ? parsed as QuoteService[] : [];
+          } catch {
+            return [] as QuoteService[];
+          }
+        })();
+        const nextDiscount = (() => {
+          if (!data.discount && data.discountValue == null) return { value: 0, type: 'dollar' as const };
+          try {
+            const parsed = data.discount != null
+              ? (typeof data.discount === 'string' ? JSON.parse(data.discount) : data.discount)
+              : { value: data.discountValue, type: data.discountType };
+            return {
+              value: Number(parsed?.value ?? data.discountValue) || 0,
+              type: (parsed?.type ?? data.discountType) === 'percent' ? 'percent' as const : 'dollar' as const,
+            };
+          } catch {
+            return { value: 0, type: 'dollar' as const };
+          }
+        })();
+
+        // Preserve the originating RO link so approved services can sync back
+        if (data.repairOrderId) {
+          setRepairOriginId(data.repairOrderId);
+        }
+
+        useQuoteStore.setState({
+          customerInfo: nextCustomerInfo,
+          services: nextServices,
+          discount: nextDiscount,
+        });
+      } catch (err) {
+        console.error('Failed to load quote:', err);
+      } finally {
+        setLoading(false);
+      }
+    };
+    load();
+  }, [editId, location.state]);
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center py-20">
+        <div className="h-8 w-8 animate-spin rounded-full border-2 border-green-600 border-t-transparent" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="mx-auto max-w-6xl">
+      <div className="flex items-center justify-between mb-6">
+        <div>
+          <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Quote Generator</h1>
+          <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">{editId ? 'Editing quote' : 'Create a new service quote'}</p>
+        </div>
+        <div className="flex items-center gap-3">
+          {/* Recent Quotes */}
+          <button
+            onClick={handleRecentToggle}
+            disabled={recentLoading && !recentOpen}
+            className="flex items-center gap-1.5 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-3 py-2 text-xs font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+          >
+            {recentLoading && !recentOpen ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <FileText className="h-3.5 w-3.5" />}
+            Recent Quotes
+          </button>
+
+          {/* Generate Priorities */}
+          <button
+            onClick={handleGeneratePriorities}
+            disabled={prioritiesLoading}
+            className="flex items-center gap-1.5 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-3 py-2 text-xs font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+          >
+            {prioritiesLoading ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <ListOrdered className="h-3.5 w-3.5" />}
+            Generate Priorities
+          </button>
+          <button
+            onClick={() => { reset(); window.history.replaceState({}, '', '/quote'); }}
+            className="flex items-center gap-1.5 rounded-lg border border-red-200 dark:border-red-800 bg-red-50 dark:bg-red-900/20 px-3 py-2 text-xs font-medium text-red-700 dark:text-red-400 hover:bg-red-100 dark:hover:bg-red-900/30 transition-colors"
+          >
+            <Trash2 className="h-3.5 w-3.5" /> Clear Quote
+          </button>
+        </div>
+      </div>
+
+      <div className="space-y-6">
+        <CustomerInfoPanel />
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+          <div className="lg:col-span-2 space-y-4">
+            <div className="flex items-center gap-3">
+              <div className="flex-1">
+                <ServiceSearch />
+              </div>
+              {/* AI Suggest */}
+              <button
+                onClick={handleAiSuggest}
+                disabled={suggestLoading}
+                className="shrink-0 flex items-center gap-1.5 rounded-lg border border-purple-300 dark:border-purple-700 bg-purple-50 dark:bg-purple-900/20 px-3 py-2.5 text-xs font-medium text-purple-700 dark:text-purple-400 hover:bg-purple-100 dark:hover:bg-purple-900/30 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+              >
+                {suggestLoading ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <Lightbulb className="h-3.5 w-3.5" />}
+                AI Suggest
+              </button>
+            </div>
+            <ServicesTable />
+          </div>
+          <div>
+            <QuoteSummary editId={editId} repairOriginId={repairOriginId} />
+          </div>
+        </div>
+      </div>
+
+      {recentOpen && (
+        <div className="fixed inset-0 z-50">
+          <button
+            type="button"
+            aria-label="Close recent quotes panel"
+            className="absolute inset-0 bg-gray-950/40 backdrop-blur-[1px]"
+            onClick={() => setRecentOpen(false)}
+          />
+          <div className="absolute inset-y-0 right-0 flex w-full justify-end">
+            <div className="flex h-full w-full max-w-3xl flex-col overflow-hidden border-l border-gray-200 bg-white shadow-2xl dark:border-gray-700 dark:bg-gray-900 sm:w-[44rem]">
+              <div className="border-b border-gray-200 px-4 py-4 dark:border-gray-700 sm:px-6">
+                <div className="flex items-start justify-between gap-4">
+                  <div>
+                    <h2 className="text-lg font-semibold text-gray-900 dark:text-white">Recent Quotes</h2>
+                    <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
+                      {recentCounts.all} total quotes{recentStatusFilter !== 'all' ? ` · ${recentCounts[recentStatusFilter]} ${recentStatusFilter}` : ''}
+                    </p>
+                  </div>
+                  <button
+                    type="button"
+                    onClick={() => setRecentOpen(false)}
+                    className="rounded-lg p-2 text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600 dark:hover:bg-gray-800 dark:hover:text-gray-200"
+                  >
+                    <X className="h-4 w-4" />
+                  </button>
+                </div>
+
+                <div className="mt-4 space-y-3">
+                  <div className="grid grid-cols-1 gap-3 sm:grid-cols-[minmax(0,1fr)_11rem]">
+                    <div className="relative">
+                      <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400" />
+                      <input
+                        value={recentQuery}
+                        onChange={(e) => setRecentQuery(e.target.value)}
+                        placeholder="Search by customer, RO, or vehicle"
+                        className="w-full rounded-xl border border-gray-300 bg-white py-2.5 pl-9 pr-3 text-sm text-gray-900 placeholder-gray-400 focus:border-green-500 focus:outline-none focus:ring-2 focus:ring-green-500/20 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100"
+                        autoFocus
+                      />
+                    </div>
+                    <select
+                      value={recentSort}
+                      onChange={(e) => setRecentSort(e.target.value as RecentQuoteSort)}
+                      className="rounded-xl border border-gray-300 bg-white px-3 py-2.5 text-sm text-gray-900 focus:border-green-500 focus:outline-none focus:ring-2 focus:ring-green-500/20 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100"
+                    >
+                      <option value="newest">Newest</option>
+                      <option value="oldest">Oldest</option>
+                      <option value="highest-total">Highest Total</option>
+                      <option value="customer-asc">Customer A-Z</option>
+                    </select>
+                  </div>
+
+                  <div className="flex flex-wrap gap-2">
+                    {RECENT_QUOTE_FILTERS.map((filter) => (
+                      <button
+                        key={filter.value}
+                        type="button"
+                        onClick={() => setRecentStatusFilter(filter.value)}
+                        className={`rounded-full border px-3 py-1.5 text-xs font-medium transition-colors ${recentStatusFilter === filter.value
+                          ? 'border-green-600 bg-green-600 text-white'
+                          : 'border-gray-300 bg-white text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700'
+                        }`}
+                      >
+                        {filter.label} ({recentCounts[filter.value]})
+                      </button>
+                    ))}
+                  </div>
+                </div>
+              </div>
+
+              <div className="flex-1 overflow-y-auto px-4 py-4 dark:bg-gray-900 sm:px-6">
+                {recentLoading ? (
+                  <div className="space-y-3">
+                    {Array.from({ length: 6 }).map((_, index) => (
+                      <div key={index} className="animate-pulse rounded-2xl border border-gray-200 bg-white p-4 dark:border-gray-700 dark:bg-gray-800/60">
+                        <div className="flex items-start justify-between gap-4">
+                          <div className="min-w-0 flex-1 space-y-2">
+                            <div className="h-4 w-40 rounded bg-gray-200 dark:bg-gray-700" />
+                            <div className="h-3 w-56 rounded bg-gray-100 dark:bg-gray-800" />
+                          </div>
+                          <div className="space-y-2">
+                            <div className="h-4 w-20 rounded bg-gray-200 dark:bg-gray-700" />
+                            <div className="h-6 w-24 rounded-full bg-gray-100 dark:bg-gray-800" />
+                          </div>
+                        </div>
+                        <div className="mt-4 h-9 w-32 rounded-xl bg-gray-100 dark:bg-gray-800" />
+                      </div>
+                    ))}
+                  </div>
+                ) : filteredQuotes.length === 0 ? (
+                  <div className="flex h-full min-h-[18rem] flex-col items-center justify-center rounded-2xl border border-dashed border-gray-300 px-6 text-center dark:border-gray-700">
+                    <FileText className="h-8 w-8 text-gray-300 dark:text-gray-600" />
+                    <h3 className="mt-3 text-sm font-semibold text-gray-900 dark:text-white">
+                      {recentQuotes.length === 0 ? 'No recent quotes on file' : 'No quotes match your filters'}
+                    </h3>
+                    <p className="mt-1 max-w-sm text-sm text-gray-500 dark:text-gray-400">
+                      {recentQuotes.length === 0
+                        ? 'Saved quotes will appear here for quick reopening, review, and conversion into active work.'
+                        : 'Adjust the search term, status filter, or sort option to broaden the results.'}
+                    </p>
+                  </div>
+                ) : (
+                  <div className="space-y-3">
+                    {filteredQuotes.map((quote) => (
+                      <div
+                        key={quote.id}
+                        className="rounded-2xl border border-gray-200 bg-white p-4 transition-colors hover:border-green-300 hover:bg-green-50/30 dark:border-gray-700 dark:bg-gray-800/60 dark:hover:border-green-700 dark:hover:bg-gray-800"
+                        onClick={() => { setRecentOpen(false); setRecentQuery(''); navigate(`/quote?edit=${quote.id}`, { state: { recentQuote: quote } }); }}
+                        role="button"
+                        tabIndex={0}
+                        onKeyDown={(e) => {
+                          if (e.key === 'Enter' || e.key === ' ') {
+                            e.preventDefault();
+                            setRecentOpen(false);
+                            setRecentQuery('');
+                            navigate(`/quote?edit=${quote.id}`, { state: { recentQuote: quote } });
+                          }
+                        }}
+                      >
+                        <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
+                          <div className="min-w-0 flex-1">
+                            <div className="flex flex-wrap items-center gap-x-3 gap-y-1">
+                              <span className="truncate text-base font-semibold text-gray-900 dark:text-white">
+                                {quote.customerName || 'Unknown customer'}
+                              </span>
+                              <span className="text-xs font-medium uppercase tracking-wide text-gray-400">
+                                {quote.roNumber ? `RO #${quote.roNumber}` : `Quote #${quote.id.slice(0, 6)}`}
+                              </span>
+                            </div>
+                            <div className="mt-2 flex flex-wrap items-center gap-x-3 gap-y-1 text-sm text-gray-500 dark:text-gray-400">
+                              <span className="min-w-0 truncate">{quote.vehicleInfo || 'Vehicle not added'}</span>
+                              <span className="hidden text-gray-300 dark:text-gray-600 sm:inline">•</span>
+                              <span>{formatQuoteDate(recentQuoteDate(quote))}</span>
+                            </div>
+                            <div className="mt-1.5 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs font-medium">
+                              {quote.approvedTotal > 0 && (
+                                <span className="text-green-600 dark:text-green-400">Approved: {formatQuoteCurrency(quote.approvedTotal)}</span>
+                              )}
+                              {quote.declinedTotal > 0 && (
+                                <span className="text-red-500 dark:text-red-400">Declined: {formatQuoteCurrency(quote.declinedTotal)}</span>
+                              )}
+                              {quote.hasPending && quote.status === 'sent' && (
+                                <span className="text-yellow-600 dark:text-yellow-400">Pending</span>
+                              )}
+                            </div>
+                          </div>
+
+                          <div className="flex items-start justify-between gap-3 sm:block sm:text-right">
+                            <div>
+                              <div className="text-base font-semibold text-gray-900 dark:text-white">
+                                {quote.total != null ? formatQuoteCurrency(quote.total) : '—'}
+                              </div>
+                              <div className="mt-2">
+                                <RecentStatusBadge status={quote.status} />
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+
+                        <div className="mt-4 flex flex-wrap items-center gap-2">
+                          <button
+                            type="button"
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              setRecentOpen(false);
+                              setRecentQuery('');
+                              navigate(`/quote?edit=${quote.id}`, { state: { recentQuote: quote } });
+                            }}
+                            className="rounded-xl bg-green-600 px-3 py-2 text-sm font-medium text-white transition-colors hover:bg-green-700"
+                          >
+                            Open Quote
+                          </button>
+                          <button
+                            type="button"
+                            onClick={(e) => { e.stopPropagation(); handleConvertQuoteToRO(quote); }}
+                            disabled={convertingId === quote.id}
+                            className="inline-flex items-center gap-2 rounded-xl border border-gray-300 bg-white px-3 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
+                          >
+                            {convertingId === quote.id
+                              ? <Loader2 className="h-4 w-4 animate-spin" />
+                              : <Wrench className="h-4 w-4" />}
+                            Convert to RO
+                          </button>
+                          <button
+                            type="button"
+                            onClick={(e) => { e.stopPropagation(); setDeleteTarget(quote); }}
+                            className="rounded-xl border border-red-200 bg-white p-2 text-red-400 transition-colors hover:bg-red-50 hover:text-red-600 dark:border-red-900/40 dark:bg-gray-800 dark:text-red-400 dark:hover:bg-red-900/20 dark:hover:text-red-300"
+                            title="Delete quote"
+                          >
+                            <Trash2 className="h-4 w-4" />
+                          </button>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* AI Suggest Modal */}
+      {showSuggestions && suggestions.length > 0 && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40" onClick={() => setShowSuggestions(false)}>
+          <div
+            className="relative w-full max-w-lg mx-4 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 shadow-2xl"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <div className="flex items-center justify-between px-5 py-4 border-b border-gray-200 dark:border-gray-700">
+              <h3 className="text-sm font-semibold text-gray-900 dark:text-white">AI Service Suggestions</h3>
+              <button onClick={() => setShowSuggestions(false)} className="p-1 rounded-lg text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800">
+                <X className="h-4 w-4" />
+              </button>
+            </div>
+            <div className="px-5 py-3 max-h-80 overflow-y-auto space-y-2">
+              {suggestions.map((sug) => (
+                <div key={sug.id} className="rounded-lg border border-gray-200 dark:border-gray-700 p-3 hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors">
+                  <div className="flex items-center justify-between mb-1">
+                    <span className="text-sm font-medium text-gray-900 dark:text-gray-100">{sug.name}</span>
+                    <span className="text-xs font-semibold text-green-600 dark:text-green-400">${sug.price.toFixed(2)}</span>
+                  </div>
+                  <p className="text-xs text-gray-500 dark:text-gray-400 mb-2">{sug.reason}</p>
+                  <button
+                    onClick={() => handleAddSuggestion(sug)}
+                    className="flex items-center gap-1 text-xs font-medium text-purple-600 dark:text-purple-400 hover:text-purple-700 dark:hover:text-purple-300"
+                  >
+                    <Plus className="h-3 w-3" /> Add to quote
+                  </button>
+                </div>
+              ))}
+            </div>
+            <div className="px-5 py-3 border-t border-gray-200 dark:border-gray-700 text-center">
+              <button
+                onClick={() => setShowSuggestions(false)}
+                className="text-xs text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
+              >
+                Close
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {deleteTarget && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
+          <div className="w-full max-w-md rounded-xl bg-white p-6 shadow-2xl dark:bg-gray-800">
+            <div className="mb-4 flex items-center gap-3">
+              <div className="flex h-10 w-10 items-center justify-center rounded-full bg-red-50 dark:bg-red-900/20">
+                <AlertTriangle className="h-5 w-5 text-red-500" />
+              </div>
+              <div>
+                <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
+                  Delete Quote
+                </h3>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  Are you sure you want to delete the quote for{' '}
+                  <strong>{deleteTarget.customerName || 'Unknown customer'}</strong>? This action cannot be undone.
+                </p>
+              </div>
+            </div>
+            <div className="flex justify-end gap-3">
+              <button
+                onClick={() => setDeleteTarget(null)}
+                className="rounded-lg border border-gray-300 px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-700"
+              >
+                Cancel
+              </button>
+              <button
+                onClick={handleDeleteQuote}
+                disabled={deletingQuote}
+                className="inline-flex items-center gap-2 rounded-lg bg-red-600 px-4 py-2 text-sm font-medium text-white shadow-sm transition-colors hover:bg-red-700 disabled:opacity-60"
+              >
+                {deletingQuote && <Loader2 className="h-4 w-4 animate-spin" />}
+                {deletingQuote ? 'Deleting...' : 'Delete'}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/pages/RODetailModal.tsx b/src/pages/RODetailModal.tsx
new file mode 100644
index 0000000..d6f794f
--- /dev/null
+++ b/src/pages/RODetailModal.tsx
@@ -0,0 +1,1717 @@
+import { useEffect, useState, useCallback, useMemo } from 'react';
+import { useParams, useLocation, useNavigate } from 'react-router-dom';
+import { pb } from '../lib/pocketbase';
+import { computeROTotals, roServiceTotal } from '../lib/totals';
+import type { RepairOrder, ROService, ServiceItem, ROEvent, ROFinancialAuditEntry } from '../types';
+import { getStatusConfig } from '../lib/status';
+import { formatCurrency, formatDateTime, formatElapsed } from '../lib/format';
+import { useToast } from '../components/ui/Toast';
+import LoadingSpinner from '../components/ui/LoadingSpinner';
+import {
+  X, Wrench, Search, Plus, Check, History,
+  FileText, Printer, Download, Mail, Phone, Ban, Clock3,
+  ArrowLeft, AlertTriangle, DollarSign, Tag,
+  Package, Trash2, Loader2, Layers, Save, BellRing
+} from 'lucide-react';
+import {
+  readEvents, appendROEvent, readPromisedOverride,
+  setPromisedOverride, isVoided, setVoided,
+  clockRunning, clockElapsedMinutes, clockStart, clockStop
+} from '../lib/roEvents';
+import { openEmailDraft, openSmsDraft } from '../lib/contactLinks';
+import { downloadROPDF, printROPDF } from '../lib/roPdf';
+import { useSettings } from '../store/settings';
+import { logError } from '../lib/userMessages';
+import { parseRepairOrderServices, syncAssignmentsForROServices } from '../lib/technicianData';
+
+type TabId = 'details' | 'services' | 'financial' | 'history' | 'timeline';
+
+const TABS: { id: TabId; label: string; icon: typeof Wrench }[] = [
+  { id: 'details', label: 'Details', icon: FileText },
+  { id: 'services', label: 'Services', icon: Wrench },
+  { id: 'financial', label: 'Financial', icon: DollarSign },
+  { id: 'history', label: 'History', icon: History },
+  { id: 'timeline', label: 'Timeline', icon: Clock3 },
+];
+
+/* ── Shared helpers (inlined from ServiceCatalog) ─── */
+
+function getServiceLaborPrice(service: Pick<ServiceItem, 'laborHours' | 'laborRate'>): number {
+  return (Number(service.laborHours) || 0) * (Number(service.laborRate) || 0);
+}
+
+function getServicePricingMode(service: Pick<ServiceItem, 'laborHours' | 'laborRate' | 'partsCost'>): 'full' | 'split' {
+  return getServiceLaborPrice(service) > 0 || (Number(service.partsCost) || 0) > 0 ? 'split' : 'full';
+}
+
+interface ServiceFormState {
+  name: string;
+  category: string;
+  description: string;
+  pricingMode: 'full' | 'split';
+  fullPrice: number;
+  laborPrice: number;
+  partsPrice: number;
+}
+
+function createEmptyServiceForm(): ServiceFormState {
+  return {
+    name: '',
+    category: '',
+    description: '',
+    pricingMode: 'full',
+    fullPrice: 0,
+    laborPrice: 0,
+    partsPrice: 0,
+  };
+}
+
+/* ── Helpers ───────────────────────────────────────── */
+
+function formatDueDateTime(ro: RepairOrder): string {
+  const override = readPromisedOverride(ro);
+  if (override) return formatDateTime(override);
+  if (ro.promisedTime) return formatDateTime(ro.promisedTime);
+  if (ro.writeupTime) {
+    const d = new Date(ro.writeupTime);
+    d.setHours(d.getHours() + 4);
+    return formatDateTime(d.toISOString());
+  }
+  return '—';
+}
+
+function formatTimeRemaining(ro: RepairOrder, now: number): string {
+  const override = readPromisedOverride(ro);
+  const target = override || ro.promisedTime || (ro.writeupTime ? new Date(new Date(ro.writeupTime).getTime() + 4 * 60 * 60 * 1000).toISOString() : '');
+  if (!target) return '—';
+  const diff = new Date(target).getTime() - now;
+  if (diff <= 0) return 'Overdue';
+  const hours = Math.floor(diff / 3600000);
+  const minutes = Math.floor((diff % 3600000) / 60000);
+  return `${hours}h ${minutes}m`;
+}
+
+function formatCompletedTime(ro: RepairOrder): string {
+  return formatDateTime(ro.completedTime || ro.completedDate || '');
+}
+
+function getUrgencyClass(ro: RepairOrder, now: number): '' | 'warning' | 'urgent' {
+  const override = readPromisedOverride(ro);
+  const target = override || ro.promisedTime || (ro.writeupTime ? new Date(new Date(ro.writeupTime).getTime() + 4 * 60 * 60 * 1000).toISOString() : '');
+  if (!target) return '';
+  const diff = new Date(target).getTime() - now;
+  if (diff < 0) return 'urgent';
+  if (diff < 60 * 60 * 1000) return 'warning';
+  return '';
+}
+
+function StatusBadge({ status, config }: { status: string; config: Record<string, { label: string; colors: string }> }) {
+  const cfg = config[status as keyof typeof config] || { label: status, colors: 'bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300' };
+  return <span className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${cfg.colors}`}>{cfg.label}</span>;
+}
+
+function TimelineEntry({ ev }: { ev: ROEvent }) {
+  const desc = (() => {
+    switch (ev.type) {
+      case 'created': return 'Repair order created';
+      case 'edit': return 'Repair order edited';
+      case 'status': return `Status changed: ${ev.data?.from} → ${ev.data?.to}`;
+      case 'add_time': return `Added ${ev.data?.minutes} min (total: ${ev.data?.newTotal} min)`;
+      case 'clock_start': return 'Technician clock started';
+      case 'clock_stop': return `Technician clock stopped (${ev.data?.elapsed} min)`;
+      case 'satisfaction': return `Customer rated ${ev.data?.rating}★`;
+      case 'notify': return `Notified via ${ev.data?.channel} to ${ev.data?.to}`;
+      case 'financial': return `Financial field updated: ${ev.data?.field}`;
+      default: return ev.type;
+    }
+  })();
+  return (
+    <li className="flex items-start gap-3 py-2">
+      <span className="mt-0.5 h-2 w-2 shrink-0 rounded-full bg-blue-400" />
+      <div className="min-w-0 flex-1">
+        <p className="text-sm text-gray-700 dark:text-gray-300">{desc}</p>
+        <p className="text-xs text-gray-400">{formatDateTime(ev.at)}</p>
+      </div>
+    </li>
+  );
+}
+
+/* ── AddTimeModal ──────────────────────────────────── */
+
+function AddTimeModal({ open, initialMinutes, onCancel, onConfirm }: { open: boolean; initialMinutes: number; onCancel: () => void; onConfirm: (minutes: number) => void }) {
+  const [minutes, setMinutes] = useState(initialMinutes);
+  useEffect(() => { setMinutes(initialMinutes); }, [initialMinutes]);
+  if (!open) return null;
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/30" onClick={onCancel}>
+      <div className="w-80 rounded-xl bg-white p-6 shadow-xl dark:bg-gray-800" onClick={(e) => e.stopPropagation()}>
+        <h3 className="text-sm font-semibold text-gray-900 dark:text-white">Add Time</h3>
+        <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">Extend the remaining time on this RO.</p>
+        <input type="number" min={1} value={minutes} onChange={(e) => setMinutes(Number(e.target.value) || 1)} className="mt-3 w-full rounded border border-gray-300 bg-white px-3 py-2 text-sm dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100" />
+        <div className="mt-4 flex justify-end gap-2">
+          <button onClick={onCancel} className="rounded-lg border border-gray-300 px-3 py-1.5 text-xs font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:text-gray-300">Cancel</button>
+          <button onClick={() => onConfirm(minutes)} className="rounded-lg bg-blue-600 px-3 py-1.5 text-xs font-medium text-white hover:bg-blue-700">Add</button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/* ── Service Row (editable RO service row) ─────────── */
+
+function PricingBadge({ mode }: { mode: 'full' | 'split' }) {
+  if (mode === 'full') {
+    return <span className="inline-flex items-center rounded-full bg-green-100 px-2 py-0.5 text-[10px] font-medium text-green-700 dark:bg-green-900/30 dark:text-green-300">Full Price</span>;
+  }
+  return <span className="inline-flex items-center rounded-full bg-blue-100 px-2 py-0.5 text-[10px] font-medium text-blue-700 dark:bg-blue-900/30 dark:text-blue-300">Split</span>;
+}
+
+function EditableServiceRow({ service, index, onChange, onRemove, defaultLaborRate = 145 }: {
+  service: Partial<ROService>;
+  index: number;
+  onChange: (index: number, field: string, value: string | number | boolean) => void;
+  onRemove: (index: number) => void;
+  defaultLaborRate?: number;
+}) {
+  const pricingMode = service.pricingMode || 'full';
+  const isSplit = pricingMode === 'split';
+  const total = roServiceTotal(service);
+  const scOn = service.applyShopCharge !== false;
+  return (
+    <div className="rounded-lg border border-gray-200 bg-gray-50 p-3 dark:border-gray-700 dark:bg-gray-800/50">
+      <div className="mb-2 flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <span className="text-xs font-medium text-gray-500 dark:text-gray-400">Service #{index + 1}</span>
+          {/* Pricing mode toggle */}
+          <div className="flex rounded-lg border border-gray-300 dark:border-gray-600 overflow-hidden text-xs">
+            <button
+              type="button"
+              onClick={() => {
+                if (isSplit) {
+                  onChange(index, 'pricingMode', 'full');
+                }
+              }}
+              className={`px-2 py-0.5 font-medium transition-colors ${
+                !isSplit
+                  ? 'bg-blue-600 text-white'
+                  : 'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-600'
+              }`}
+            >
+              Full
+            </button>
+            <button
+              type="button"
+              onClick={() => {
+                if (!isSplit) {
+                  const flatTotal = service.total || total;
+                  const rate = defaultLaborRate;
+                  const hours = rate > 0 ? Math.round((flatTotal / rate) * 100) / 100 : 0;
+                  onChange(index, 'pricingMode', 'split');
+                  onChange(index, 'laborHours', hours);
+                  onChange(index, 'laborRate', rate);
+                  onChange(index, 'partsCost', 0);
+                }
+              }}
+              className={`px-2 py-0.5 font-medium transition-colors ${
+                isSplit
+                  ? 'bg-blue-600 text-white'
+                  : 'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-600'
+              }`}
+            >
+              Split
+            </button>
+          </div>
+          <PricingBadge mode={pricingMode} />
+          <button
+            type="button"
+            onClick={() => onChange(index, 'applyShopCharge', !scOn)}
+            className={`rounded-md px-2 py-0.5 text-[11px] font-medium transition-colors ${
+              scOn
+                ? 'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400'
+                : 'bg-gray-100 text-gray-400 dark:bg-gray-700 dark:text-gray-500'
+            }`}
+            title={scOn ? 'Shop charge applies' : 'Shop charge excluded'}
+          >
+            {scOn ? 'Shop Charge On' : 'Shop Charge Off'}
+          </button>
+        </div>
+        <button onClick={() => onRemove(index)} className="rounded p-1 text-gray-400 hover:bg-red-50 hover:text-red-500 dark:hover:bg-red-900/20">
+          <Trash2 className="h-3.5 w-3.5" />
+        </button>
+      </div>
+      <div className="grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-5">
+        <div className="sm:col-span-2 lg:col-span-1">
+          <label className="block text-xs text-gray-500 dark:text-gray-400">Name</label>
+          <input value={service.name || ''} onChange={(e) => onChange(index, 'name', e.target.value)} placeholder="Service name" className="mt-0.5 w-full rounded border border-gray-300 bg-white px-2 py-1.5 text-sm dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100" />
+        </div>
+        <div className="sm:col-span-2 lg:col-span-1">
+          <label className="block text-xs text-gray-500 dark:text-gray-400">Description</label>
+          <textarea value={service.description || ''} onChange={(e) => onChange(index, 'description', e.target.value)} placeholder="Description..." rows={1} className="mt-0.5 w-full rounded border border-gray-300 bg-white px-2 py-1.5 text-sm dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100" />
+        </div>
+        {pricingMode === 'full' ? (
+          <>
+            <div>
+              <label className="block text-xs text-gray-500 dark:text-gray-400">Price ($)</label>
+              <input type="number" min="0" step="0.01" value={service.total != null ? service.total : ''} onChange={(e) => onChange(index, 'total', parseFloat(e.target.value) || 0)} placeholder="0" className="mt-0.5 w-full rounded border border-gray-300 bg-white px-2 py-1.5 text-sm dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100" />
+            </div>
+            <div></div>
+            <div></div>
+            <div>
+              <label className="block text-xs text-gray-500 dark:text-gray-400">Total</label>
+              <div className="mt-0.5 flex h-[34px] items-center rounded border border-gray-200 bg-gray-100 px-2 text-sm font-medium text-gray-900 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100">
+                {formatCurrency(total)}
+              </div>
+            </div>
+          </>
+        ) : (
+          <>
+            <div>
+              <label className="block text-xs text-gray-500 dark:text-gray-400">Labor Hrs</label>
+              <input type="number" min="0" step="0.1" value={service.laborHours || ''} onChange={(e) => onChange(index, 'laborHours', parseFloat(e.target.value) || 0)} placeholder="0" className="mt-0.5 w-full rounded border border-gray-300 bg-white px-2 py-1.5 text-sm dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100" />
+            </div>
+            <div>
+              <label className="block text-xs text-gray-500 dark:text-gray-400">Rate/hr</label>
+              <input type="number" min="0" step="1" value={service.laborRate || ''} onChange={(e) => onChange(index, 'laborRate', parseFloat(e.target.value) || 0)} placeholder="145" className="mt-0.5 w-full rounded border border-gray-300 bg-white px-2 py-1.5 text-sm dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100" />
+            </div>
+            <div>
+              <label className="block text-xs text-gray-500 dark:text-gray-400">Parts $</label>
+              <input type="number" min="0" step="0.01" value={service.partsCost || ''} onChange={(e) => onChange(index, 'partsCost', parseFloat(e.target.value) || 0)} placeholder="0" className="mt-0.5 w-full rounded border border-gray-300 bg-white px-2 py-1.5 text-sm dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100" />
+            </div>
+            <div>
+              <label className="block text-xs text-gray-500 dark:text-gray-400">Total</label>
+              <div className="mt-0.5 flex h-[34px] items-center rounded border border-gray-200 bg-gray-100 px-2 text-sm font-medium text-gray-900 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100">
+                {formatCurrency(total)}
+              </div>
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  );
+}
+
+/* ── Form helper components (inlined) ────────────────── */
+
+function FormField({ label, children }: { label: string; children: React.ReactNode }) {
+  return <div className="space-y-1.5"><label className="block text-sm font-medium text-gray-700 dark:text-gray-300">{label}</label>{children}</div>;
+}
+
+function Input({ value, onChange, placeholder, type = 'text', icon }: { value: string | number; onChange: (value: string) => void; placeholder?: string; type?: string; icon?: React.ReactNode }) {
+  return (
+    <div className="relative">
+      {icon && <div className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-gray-400">{icon}</div>}
+      <input type={type} value={value} onChange={(e) => onChange(e.target.value)} placeholder={placeholder} className={`w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 placeholder-gray-400 focus:border-green-500 focus:outline-none focus:ring-2 focus:ring-green-500/20 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 ${icon ? 'pl-9' : ''}`} />
+    </div>
+  );
+}
+
+function Textarea({ value, onChange, placeholder, rows = 3 }: { value: string; onChange: (value: string) => void; placeholder?: string; rows?: number }) {
+  return (
+    <textarea value={value} onChange={(e) => onChange(e.target.value)} placeholder={placeholder} rows={rows}
+      className="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 placeholder-gray-400 focus:border-green-500 focus:outline-none focus:ring-2 focus:ring-green-500/20 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100"
+    />
+  );
+}
+
+/* ── Main Modal Component ──────────────────────────── */
+
+export default function RODetailModal() {
+  const { id } = useParams<{ id: string }>();
+  const location = useLocation();
+  const navigate = useNavigate();
+  const { showToast } = useToast();
+  const settings = useSettings();
+  const statusConfig = useMemo(() => getStatusConfig(settings), [settings]);
+
+  const modalBackground = (location.state as { backgroundLocation?: unknown })?.backgroundLocation;
+  const isModal = Boolean(modalBackground);
+
+  const [ro, setRo] = useState<RepairOrder | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [activeTab, setActiveTab] = useState<TabId>('details');
+  const [saving, setSaving] = useState(false);
+  const [now, setNow] = useState(Date.now());
+
+  // Details tab state
+  const [showAddTimeModal, setShowAddTimeModal] = useState(false);
+  const [showPromisedPicker, setShowPromisedPicker] = useState(false);
+  const [promisedValue, setPromisedValue] = useState('');
+
+  // Services tab state
+  const [catalogServices, setCatalogServices] = useState<ServiceItem[]>([]);
+  const [catalogSearch, setCatalogSearch] = useState('');
+  const [showNewServiceForm, setShowNewServiceForm] = useState(false);
+  const [newServiceForm, setNewServiceForm] = useState<ServiceFormState>(createEmptyServiceForm());
+  const [localServices, setLocalServices] = useState<ROService[]>([]);
+  const [servicesDirty, setServicesDirty] = useState(false);
+  const [servicesSaved, setServicesSaved] = useState(false);
+
+  // Reminder state
+  const [showReminderForm, setShowReminderForm] = useState(false);
+  const [reminderMileage, setReminderMileage] = useState('');
+  const [reminderInterval, setReminderInterval] = useState('5000');
+  const [reminderNotes, setReminderNotes] = useState('');
+  const [savingReminder, setSavingReminder] = useState(false);
+
+  // History tab state
+  const [historyData, setHistoryData] = useState<{ type: 'ro' | 'quote'; id: string; date: string; title: string; vehicleInfo: string; total: number; status: string }[]>([]);
+  const [historyLoading, setHistoryLoading] = useState(false);
+
+  // Timeline
+  const events = useMemo(() => (ro ? readEvents(ro) : []), [ro]);
+
+  // Financial Audit Trail
+  const [financialAuditEntries, setFinancialAuditEntries] = useState<ROFinancialAuditEntry[]>([]);
+  const [financialAuditLoading, setFinancialAuditLoading] = useState(false);
+
+  // Financial tab state
+  const [finCpTotal, setFinCpTotal] = useState('');
+  const [finCpCost, setFinCpCost] = useState('');
+  const [finWarrTotal, setFinWarrTotal] = useState('');
+  const [finWarrCost, setFinWarrCost] = useState('');
+  const [finShopCharge, setFinShopCharge] = useState('');
+  const [finSaving, setFinSaving] = useState(false);
+  const [finSaved, setFinSaved] = useState(false);
+  const [finSeeded, setFinSeeded] = useState(false);
+
+  const userId = pb.authStore.model?.id;
+
+  const closeModal = useCallback(() => {
+    if (isModal) navigate(-1);
+    else navigate('/repair-orders');
+  }, [isModal, navigate]);
+
+  useEffect(() => {
+    if (!isModal) return;
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') closeModal();
+    };
+    document.addEventListener('keydown', handler);
+    return () => document.removeEventListener('keydown', handler);
+  }, [isModal, closeModal]);
+
+  // Live tick
+  useEffect(() => {
+    const tick = () => {
+      const ts = Date.now();
+      const mb = Math.floor(ts / 60000);
+      setNow((prev) => (Math.floor(prev / 60000) === mb ? prev : ts));
+    };
+    const id = setInterval(tick, 30000);
+    return () => clearInterval(id);
+  }, []);
+
+  // Fast tick when clock is running
+  useEffect(() => {
+    if (!ro || !clockRunning(ro)) return;
+    const id = setInterval(() => setNow(Date.now()), 5000);
+    return () => clearInterval(id);
+  }, [ro]);
+
+  const fetchRO = useCallback(async () => {
+    if (!id || !userId) { setLoading(false); return; }
+    setLoading(true);
+    setError(null);
+    try {
+      const record = await pb.collection('repairOrders').getOne(id);
+      const normalized = (() => {
+        const item = record as Record<string, unknown>;
+        let services: ROService[] = [];
+        const raw = item.services;
+        if (Array.isArray(raw)) services = raw as ROService[];
+        else if (typeof raw === 'string' && raw.trim()) { try { services = JSON.parse(raw); } catch (err) { logError('Failed to parse RO services JSON', err); } }
+        return { ...item, services } as unknown as RepairOrder;
+      })();
+      setRo(normalized);
+      setLocalServices(normalized.services || []);
+      setServicesDirty(false);
+      setServicesSaved(false);
+      setPromisedValue(readPromisedOverride(normalized) ? new Date(readPromisedOverride(normalized)!).toISOString().slice(0, 16) : '');
+    } catch (err) {
+      logError('Failed to load RO', err);
+      setError('Repair order could not be loaded.');
+    } finally {
+      setLoading(false);
+    }
+  }, [id, userId]);
+
+  const fetchCatalogServices = useCallback(async () => {
+    if (!userId) return;
+    try {
+      const records = await pb.collection('services').getFullList({ filter: `userId="${userId}"`, sort: 'name' });
+      setCatalogServices(records.map((r: Record<string, unknown>) => ({
+        id: r.id as string,
+        name: (r.name as string) || '',
+        category: (r.category as string) || '',
+        description: (r.explanation as string) || (r.description as string) || '',
+        laborHours: Number(r.laborHours) || 0,
+        laborRate: Number(r.laborRate) || 0,
+        partsCost: Number(r.partsCost) || 0,
+        price: Number(r.price) || 0,
+        active: r.active !== false,
+        created: (r.created as string) || '',
+        updated: (r.updated as string) || '',
+      })));
+    } catch { /* non-critical */ }
+  }, [userId]);
+
+  useEffect(() => {
+    fetchRO();
+    fetchCatalogServices();
+  }, [fetchRO, fetchCatalogServices]);
+
+  const loadHistory = useCallback(async () => {
+    if (!ro || !ro.vin || !ro.vin.trim()) {
+      setHistoryData([]);
+      return;
+    }
+    setHistoryLoading(true);
+    const results: { type: 'ro' | 'quote'; id: string; date: string; title: string; vehicleInfo: string; total: number; status: string }[] = [];
+    try {
+      const roRecords = await pb.collection('repairOrders').getFullList({
+        filter: `userId="${userId}" && vin="${ro.vin.trim()}"`,
+        sort: '-created',
+        fields: 'id,roNumber,customerName,vehicleInfo,vin,total,status,created',
+      });
+      for (const r of roRecords as Record<string, unknown>[]) {
+        if (r.id === ro.id) continue;
+        results.push({
+          type: 'ro',
+          id: r.id as string,
+          date: (r.created as string) || '',
+          title: `RO ${(r.roNumber as string) || (r.id as string)?.slice(0, 8) || ''}`,
+          vehicleInfo: (r.vehicleInfo as string) || '',
+          total: Number(r.total) || 0,
+          status: (r.status as string) || '',
+        });
+      }
+    } catch { /* ok */ }
+    try {
+      const qRecords = await pb.collection('quotes').getFullList({
+        filter: `userId="${userId}" && vin="${ro.vin.trim()}"`,
+        sort: '-created',
+        fields: 'id,customerInfo,vehicleInfo,vin,total,status,created',
+      });
+      for (const q of qRecords as Record<string, unknown>[]) {
+        const ci = q.customerInfo as Record<string, unknown> | undefined;
+        results.push({
+          type: 'quote',
+          id: q.id as string,
+          date: (q.created as string) || '',
+          title: `Quote #${(q.id as string)?.slice(0, 8) || ''}`,
+          vehicleInfo: (q.vehicleInfo as string) || (ci?.vehicleInfo as string) || '',
+          total: Number(q.total) || 0,
+          status: (q.status as string) || '',
+        });
+      }
+    } catch { /* ok */ }
+    results.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
+    setHistoryData(results);
+    setHistoryLoading(false);
+  }, [ro, userId]);
+
+  useEffect(() => {
+    if (activeTab === 'history') loadHistory();
+  }, [activeTab, loadHistory]);
+
+  const loadFinancialAudit = useCallback(async () => {
+    if (!ro) return;
+    setFinancialAuditLoading(true);
+    try {
+      const records = await pb.collection('roFinancialAudit').getFullList({
+        filter: `roId = '${ro.id}'`,
+        sort: '-at',
+      });
+      setFinancialAuditEntries(records.map((r: Record<string, unknown>) => ({
+        id: r.id as string,
+        roId: r.roId as string,
+        field: r.field as string,
+        from: r.from,
+        to: r.to,
+        by: r.by as string,
+        at: r.at as string,
+        prevHash: r.prevHash as string,
+        hash: r.hash as string,
+      })));
+    } catch {
+      setFinancialAuditEntries([]);
+    } finally {
+      setFinancialAuditLoading(false);
+    }
+  }, [ro]);
+
+  useEffect(() => {
+    if (activeTab === 'timeline' && ro) loadFinancialAudit();
+  }, [activeTab, ro, loadFinancialAudit]);
+
+  // Pre-seed financial inputs from RO data when opening the Financial tab
+  // for the first time (or when the RO changes).
+  useEffect(() => {
+    if (activeTab !== 'financial' || !ro || finSeeded) return;
+    const f = (() => {
+      const raw = ro.financial;
+      if (typeof raw === 'string') { try { return JSON.parse(raw) as Record<string, any>; } catch { return {}; } }
+      return (typeof raw === 'object' && raw ? raw : {}) as Record<string, any>;
+    })();
+    const existingCpTotal = f.grossTotal ?? f.cpTotal;
+    const existingCpCost = f.grossCost ?? f.cpCost;
+    const existingWarrTotal = f.warrTotal ?? f.whTotal;
+    const existingWarrCost = f.warrCost ?? f.whCost;
+    const existingShopCharge = f.shopCharge;
+    const totals = computeROTotals({ services: ro.services || [], discount: ro.discount, settings });
+    // CP Total is shop revenue before tax. Tax is pass-through and should not
+    // be saved as customer-pay financial revenue.
+    setFinCpTotal(existingCpTotal != null ? String(existingCpTotal) : totals.taxableBase.toFixed(2));
+    setFinCpCost(existingCpCost != null ? String(existingCpCost) : '');
+    setFinWarrTotal(existingWarrTotal != null ? String(existingWarrTotal) : '');
+    setFinWarrCost(existingWarrCost != null ? String(existingWarrCost) : '');
+    setFinShopCharge(existingShopCharge != null ? String(existingShopCharge) : totals.shopCharge.toFixed(2));
+    setFinSeeded(true);
+  }, [activeTab, ro, finSeeded, settings]);
+
+  const voided = ro ? isVoided(ro) : false;
+  const isActiveStatus = ro && ro.status !== 'completed' && ro.status !== 'final_close' && ro.status !== 'delivered' && !voided;
+  const isCompletedStatus = ro && (ro.status === 'completed' || ro.status === 'final_close' || ro.status === 'delivered') && !voided;
+
+  const urgency = ro && isActiveStatus ? getUrgencyClass(ro, now) : '';
+  const clockActive = ro ? !!clockRunning(ro) : false;
+  const clockElapsedMin = ro ? clockElapsedMinutes(ro) : 0;
+
+  /* ── Handlers ────────────────────────────────────── */
+
+  const handleStatusChange = async (status: RepairOrder['status']) => {
+    if (!ro) return;
+    const prevStatus = ro.status;
+    let updatedServices: ROService[] | undefined;
+    let updatedCompletedTime: string | undefined;
+    if (status === 'completed') {
+      updatedCompletedTime = new Date().toISOString();
+      const allDone = (ro.services || []).every((s) => s.status === 'completed');
+      if (!allDone) updatedServices = (ro.services || []).map((s) => ({ ...s, status: 'completed' as const }));
+    } else if (['waiting_pickup', 'active', 'in_progress', 'waiting_parts'].includes(status)) {
+      updatedCompletedTime = '';
+    }
+
+    setRo((prev) => prev ? { ...prev, status, completedTime: updatedCompletedTime, completedDate: updatedCompletedTime, services: updatedServices ?? prev.services } : prev);
+
+    const update: Record<string, unknown> = { status };
+    if (updatedCompletedTime !== undefined) update.completedTime = updatedCompletedTime;
+    if (updatedServices) update.services = JSON.stringify(updatedServices);
+
+    try {
+      await pb.collection('repairOrders').update(ro.id, update);
+      try {
+        const linkedAppointment = await pb.collection('appointments').getFirstListItem(
+          `repairOrderId = '${ro.id}' && userId = '${userId}'`
+        );
+        const as = status === 'completed' || status === 'final_close' || status === 'delivered' ? 'completed' : 'checked_in';
+        if (linkedAppointment?.status !== as) await pb.collection('appointments').update(linkedAppointment.id, { status: as });
+      } catch {}
+      try { await appendROEvent(ro.id, 'status', { from: prevStatus, to: status }); } catch (err) { logError('Failed to append RO status event', err); showToast('Saved, but the timeline event could not be recorded.', 'error'); }
+      showToast(`Status changed to ${status}.`, 'success');
+    } catch {
+      setRo((prev) => prev ? { ...prev, status: prevStatus, completedTime: undefined, completedDate: undefined } : prev);
+      showToast('Failed to update status.', 'error');
+    }
+  };
+
+  const handleClockStart = async () => {
+    if (!ro) return;
+    try { await clockStart(ro.id); setRo((prev) => prev ? { ...prev } : prev); showToast('Clock started.', 'success'); }
+    catch { showToast('Failed to start clock.', 'error'); }
+  };
+
+  const handleClockStop = async () => {
+    if (!ro) return;
+    try { await clockStop(ro.id); setRo((prev) => prev ? { ...prev } : prev); showToast('Clock stopped.', 'success'); }
+    catch { showToast('Failed to stop clock.', 'error'); }
+  };
+
+  const handleSaveReminder = async () => {
+    if (!ro || !userId) return;
+    const mileage = parseInt(reminderMileage) || 0;
+    const interval = parseInt(reminderInterval) || 0;
+    if (!mileage || !interval) { showToast('Please enter mileage and interval.', 'error'); return; }
+    setSavingReminder(true);
+    try {
+      await pb.collection('reminders').create({
+        customerId: ro.customerId || '',
+        customerName: ro.customerName || '',
+        vehicleInfo: ro.vehicleInfo || '',
+        shopUserId: userId,
+        mileageAtService: mileage,
+        intervalMileage: interval,
+        dueMileage: mileage + interval,
+        notes: reminderNotes,
+        active: true,
+      });
+      showToast('Reminder set successfully.', 'success');
+      setShowReminderForm(false);
+      setReminderNotes('');
+    } catch {
+      showToast('Failed to set reminder.', 'error');
+    } finally {
+      setSavingReminder(false);
+    }
+  };
+
+  const handleSetPromisedOverride = async () => {
+    if (!ro) return;
+    try {
+      await setPromisedOverride(ro.id, promisedValue ? new Date(promisedValue).toISOString() : null);
+      setRo((prev) => prev ? { ...prev } : prev);
+      showToast(promisedValue ? 'Promised time pinned.' : 'Override cleared.', 'success');
+    } catch { showToast('Failed to set promised time.', 'error'); }
+    setShowPromisedPicker(false);
+  };
+
+  const handleSetSatisfaction = async (rating: number) => {
+    if (!ro) return;
+    try {
+      await pb.collection('repairOrders').update(ro.id, { satisfaction: rating });
+      try { await appendROEvent(ro.id, 'satisfaction', { rating }); } catch (err) { logError('Failed to append RO satisfaction event', err); showToast('Saved, but the timeline event could not be recorded.', 'error'); }
+      setRo((prev) => prev ? { ...prev, satisfaction: rating } : prev);
+      showToast(`Rated ${rating}★.`, 'success');
+    } catch { showToast('Failed to save rating.', 'error'); }
+  };
+
+  const handleNotifyCustomer = async (channel: 'email' | 'sms') => {
+    if (!ro) return;
+    const subject = `Your vehicle ${ro.vehicleInfo || ''} is ready for pickup — RO ${ro.roNumber || ''}`;
+    const body = [
+      `Hi ${ro.customerName || ''},`,
+      '',
+      `Your vehicle${ro.vehicleInfo ? ` (${ro.vehicleInfo})` : ''} is ready for pickup.`,
+      `Repair Order: ${ro.roNumber || ''}`,
+      ro.total ? `Invoice total: ${formatCurrency(ro.total)}` : '',
+      '',
+      'Please give us a call if you have any questions.',
+    ].filter(Boolean).join('\n');
+    if (channel === 'email') openEmailDraft(ro.customerEmail || '', subject, body);
+    else openSmsDraft(ro.customerPhone || '', body);
+    try { await appendROEvent(ro.id, 'notify', { channel, to: channel === 'email' ? ro.customerEmail : ro.customerPhone }); } catch (err) { logError('Failed to append RO notify event', err); showToast('Saved, but the timeline event could not be recorded.', 'error'); }
+    showToast(`Opened ${channel === 'email' ? 'email' : 'SMS'} draft.`, 'success');
+  };
+
+  const handleVoid = async () => {
+    if (!ro) return;
+    if (!window.confirm(`Void RO ${ro.roNumber || ro.id.slice(0, 8)}?`)) return;
+    try { await setVoided(ro.id, !voided); setRo((prev) => prev ? { ...prev } : prev); showToast(voided ? 'RO un-voided.' : 'RO voided.', 'success'); }
+    catch { showToast('Failed to toggle void.', 'error'); }
+  };
+
+  const handleGenerateQuote = () => {
+    if (!ro) return;
+    const params = new URLSearchParams({
+      fromRO: ro.id,
+      name: ro.customerName || '',
+      phone: ro.customerPhone || '',
+      vehicleInfo: ro.vehicleInfo || '',
+      vin: ro.vin || '',
+      mileage: ro.mileage || '',
+      roNumber: ro.roNumber || '',
+      serviceAdvisor: ro.advisorName || '',
+    });
+    navigate(`/quote?${params.toString()}`);
+  };
+
+  const handlePrintRO = async () => {
+    if (!ro) return;
+    try { await printROPDF(ro, settings); } catch { showToast('Failed to open print window.', 'error'); }
+  };
+
+  const handleDownloadRO = async () => {
+    if (!ro) return;
+    try { await downloadROPDF(ro, settings); showToast('RO PDF downloaded.', 'success'); } catch { showToast('Failed to generate PDF.', 'error'); }
+  };
+
+  const handleAddTime = async (extraMinutes: number) => {
+    if (!ro) return;
+    const newDuration = (ro.estimatedDuration || 60) + extraMinutes;
+    setRo((prev) => prev ? { ...prev, estimatedDuration: newDuration } : prev);
+    try {
+      await pb.collection('repairOrders').update(ro.id, { estimatedTime: (newDuration / 60).toFixed(1) });
+      try { await appendROEvent(ro.id, 'add_time', { minutes: extraMinutes, newTotal: newDuration }); } catch (err) { logError('Failed to append RO add_time event', err); showToast('Saved, but the timeline event could not be recorded.', 'error'); }
+    } catch {
+      showToast('Failed to add time.', 'error');
+      fetchRO();
+    }
+  };
+
+  /* ── Financial tab handlers ─────────────────────────── */
+
+  // Live computed values — warranty deducted from CP, shop charge deducted
+  // from CP gross profit (per shop owner's business rules).
+  const finCpTotalNum = parseFloat(finCpTotal) || 0;
+  const finCpCostNum = parseFloat(finCpCost) || 0;
+  const finWarrTotalNum = parseFloat(finWarrTotal) || 0;
+  const finWarrCostNum = parseFloat(finWarrCost) || 0;
+  const finShopChargeNum = parseFloat(finShopCharge) || 0;
+
+  const cpNetTotal = Math.max(0, finCpTotalNum - finWarrTotalNum);
+  const cpNetCost = Math.max(0, finCpCostNum - finWarrCostNum);
+  const cpGrossProfit = cpNetTotal - cpNetCost - finShopChargeNum;
+  const warrGrossProfit = finWarrTotalNum - finWarrCostNum;
+  const overallGrossProfit = cpGrossProfit + warrGrossProfit;
+
+  const handleSaveFinancial = async () => {
+    if (!ro) return;
+    setFinSaving(true);
+    setFinSaved(false);
+    try {
+      // Read existing financial blob to preserve other keys (e.g. customerType)
+      let existing: Record<string, any> = {};
+      const raw = ro.financial;
+      if (typeof raw === 'string') { try { existing = JSON.parse(raw); } catch { /* ignore */ } }
+      else if (typeof raw === 'object' && raw) { existing = raw as Record<string, any>; }
+
+      const financial = {
+        ...existing,
+        grossTotal: finCpTotalNum,
+        grossCost: finCpCostNum,
+        warrTotal: finWarrTotalNum,
+        warrCost: finWarrCostNum,
+        shopCharge: finShopChargeNum,
+        cpProfit: cpGrossProfit,
+        whProfit: warrGrossProfit,
+        grossProfit: overallGrossProfit,
+        totalAmount: finCpTotalNum + finWarrTotalNum,
+        totalCost: finCpCostNum + finWarrCostNum,
+        completedAt: existing.completedAt || new Date().toISOString(),
+      };
+
+      await pb.collection('repairOrders').update(ro.id, {
+        financial: JSON.stringify(financial),
+      });
+
+      try {
+        await appendROEvent(ro.id, 'financial', { field: 'grossProfit' });
+      } catch (err) {
+        logError('Failed to append RO financial event', err);
+      }
+
+      setRo((prev) => prev ? { ...prev, financial } : prev);
+      setFinSaved(true);
+      showToast('Financial data saved.', 'success');
+      setTimeout(() => setFinSaved(false), 3000);
+    } catch (err) {
+      logError('Failed to save financial data', err);
+      showToast('Failed to save financial data.', 'error');
+    } finally {
+      setFinSaving(false);
+    }
+  };
+
+  /* ── Service handlers ────────────────────────────────── */
+
+  const handleServiceChange = (index: number, field: string, value: string | number | boolean) => {
+    setLocalServices((prev) => {
+      const next = [...prev];
+      next[index] = { ...next[index], [field]: value };
+      return next;
+    });
+    setServicesDirty(true);
+    setServicesSaved(false);
+  };
+
+  const handleRemoveService = (index: number) => {
+    setLocalServices((prev) => prev.filter((_, i) => i !== index));
+    setServicesDirty(true);
+    setServicesSaved(false);
+  };
+
+  const handleAddService = () => {
+    setLocalServices((prev) => [...prev, {
+      id: `new-${Date.now()}`,
+      name: '',
+      description: '',
+      laborHours: 0,
+      laborRate: 0,
+      partsCost: 0,
+      total: 0,
+      status: 'pending',
+      technician: '',
+      pricingMode: settings.defaultPricingMode,
+      applyShopCharge: true,
+    }]);
+    setServicesDirty(true);
+    setServicesSaved(false);
+  };
+
+  const handleAddCatalogService = (svc: ServiceItem) => {
+    const laborPrice = getServiceLaborPrice(svc);
+    const isSplit = getServicePricingMode(svc) === 'split';
+    setLocalServices((prev) => [...prev, {
+      id: `catalog-${svc.id}-${Date.now()}`,
+      name: svc.name,
+      description: svc.description,
+      laborHours: isSplit ? 1 : 0,
+      laborRate: isSplit ? laborPrice : 0,
+      partsCost: isSplit ? svc.partsCost : 0,
+      total: svc.price,
+      status: 'pending',
+      technician: '',
+      pricingMode: isSplit ? 'split' : settings.defaultPricingMode,
+      applyShopCharge: true,
+    }]);
+    setServicesDirty(true);
+    setServicesSaved(false);
+    showToast(`Added "${svc.name}" to RO.`, 'success');
+  };
+
+  const handleSaveServices = async () => {
+    if (!ro) return;
+    setSaving(true);
+    try {
+      const cleaned = localServices.map((s) => ({
+        id: s.id,
+        name: s.name,
+        description: s.description || '',
+        laborHours: s.laborHours || 0,
+        laborRate: s.laborRate || 0,
+        partsCost: s.partsCost || 0,
+        total: roServiceTotal(s),
+        status: s.status || 'pending',
+        technician: s.technician || '',
+        pricingMode: s.pricingMode || 'full',
+        applyShopCharge: s.applyShopCharge !== false,
+      }));
+      const payload = { services: JSON.stringify(cleaned) };
+      await pb.collection('repairOrders').update(ro.id, payload);
+
+      const savedRecord = await pb.collection('repairOrders').getOne(ro.id);
+      const savedServices = parseRepairOrderServices((savedRecord as Record<string, unknown>).services);
+      const savedIds = new Set(savedServices.map((s) => s.id));
+      const missingSavedService = cleaned.some((s) => !savedIds.has(s.id));
+      if (cleaned.length > 0 && (savedServices.length === 0 || missingSavedService)) {
+        throw new Error('Saved repair order did not return the expected services.');
+      }
+
+      syncAssignmentsForROServices(ro.id, savedServices).catch((err) => {
+        logError('Failed to sync technician assignments after service save', err);
+      });
+      try { await appendROEvent(ro.id, 'edit', {}); } catch (err) { logError('Failed to append RO edit event', err); showToast('Saved, but the timeline event could not be recorded.', 'error'); }
+      setRo((prev) => prev ? { ...prev, services: savedServices } : prev);
+      setLocalServices(savedServices);
+      setServicesDirty(false);
+      setServicesSaved(true);
+      showToast('Services saved.', 'success');
+      setTimeout(() => setServicesSaved(false), 3000);
+    } catch (err) {
+      logError('Failed to save services', err);
+      showToast('Failed to save services.', 'error');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  /* ── New catalog service in modal ────────────────── */
+
+  const handleSaveNewService = async () => {
+    if (!newServiceForm.name.trim()) { showToast('Service name is required.', 'error'); return; }
+    if (!userId) return;
+    const fullPrice = Number(newServiceForm.fullPrice) || 0;
+    const laborPrice = Number(newServiceForm.laborPrice) || 0;
+    const partsPrice = Number(newServiceForm.partsPrice) || 0;
+    const isSplit = newServiceForm.pricingMode === 'split';
+    const description = newServiceForm.description.trim();
+    const data = {
+      name: newServiceForm.name.trim(),
+      category: newServiceForm.category.trim(),
+      description,
+      explanation: description,
+      laborHours: isSplit && laborPrice > 0 ? 1 : 0,
+      laborRate: isSplit ? laborPrice : 0,
+      partsCost: isSplit ? partsPrice : 0,
+      price: isSplit ? laborPrice + partsPrice : fullPrice,
+      active: true,
+      userId,
+    };
+    try {
+      const created = await pb.collection('services').create(data) as Record<string, unknown>;
+      const newSvc: ServiceItem = {
+        id: created.id as string,
+        name: data.name,
+        category: data.category,
+        description: data.description,
+        laborHours: data.laborHours,
+        laborRate: data.laborRate,
+        partsCost: data.partsCost,
+        price: data.price,
+        active: true,
+        created: '',
+        updated: '',
+      };
+      setCatalogServices((prev) => [...prev, newSvc].sort((a, b) => a.name.localeCompare(b.name)));
+      handleAddCatalogService(newSvc);
+      setNewServiceForm(createEmptyServiceForm());
+      setShowNewServiceForm(false);
+      showToast('Service created and added to RO.', 'success');
+    } catch {
+      showToast('Failed to create service.', 'error');
+    }
+  };
+
+  /* ── Render ──────────────────────────────────────── */
+
+  if (loading) return <div className="flex min-h-[60vh] items-center justify-center"><LoadingSpinner text="Loading repair order..." /></div>;
+  if (error || !ro) {
+    const content = (
+      <div className="flex flex-col items-center justify-center py-24">
+        <AlertTriangle className="h-12 w-12 text-red-400" />
+        <p className="mt-4 text-sm text-gray-500">{error || 'Repair order not found.'}</p>
+        <button onClick={closeModal} className="mt-4 rounded-lg border border-gray-300 px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:text-gray-300">Close</button>
+      </div>
+    );
+    if (!isModal) return content;
+    return (
+      <div className="fixed inset-0 z-50 flex items-center justify-center bg-gray-950/45 backdrop-blur-sm">
+        <div className="rounded-xl bg-white p-8 dark:bg-gray-900">{content}</div>
+      </div>
+    );
+  }
+
+  const totals = computeROTotals({ services: localServices, discount: ro.discount, settings });
+
+  const filteredCatalog = catalogServices.filter((s) => {
+    if (!catalogSearch.trim()) return true;
+    const q = catalogSearch.toLowerCase();
+    return s.name.toLowerCase().includes(q) || s.category.toLowerCase().includes(q) || s.description.toLowerCase().includes(q);
+  });
+
+  /* ── Tab content builders ────────────────────────── */
+
+  const detailsContent = (
+    <div className={voided ? 'opacity-60' : ''}>
+      {voided && (
+        <div className="mb-4 flex items-center gap-2 rounded-lg border border-red-300 bg-red-50 px-4 py-3 text-sm font-medium text-red-700 dark:border-red-700 dark:bg-red-900/20 dark:text-red-300">
+          <Ban className="h-4 w-4" /> This repair order has been voided.
+        </div>
+      )}
+
+      {/* Header */}
+      <div className="mb-4 flex flex-wrap items-center gap-3">
+        <div className="min-w-0 flex-1">
+          <h2 className="text-lg font-semibold text-gray-900 dark:text-white">{ro.roNumber || `RO #${ro.id.slice(0, 8)}`}</h2>
+          <p className="truncate text-sm text-gray-500 dark:text-gray-400">{ro.customerName} — {ro.vehicleInfo || 'No vehicle'}</p>
+        </div>
+        <div className="flex flex-wrap items-center gap-1.5">
+          <button onClick={handlePrintRO} className="inline-flex items-center gap-1.5 rounded-lg border border-gray-300 bg-white px-3 py-1.5 text-xs font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"><Printer className="h-3.5 w-3.5" /> Print</button>
+          <button onClick={handleDownloadRO} className="inline-flex items-center gap-1.5 rounded-lg border border-gray-300 bg-white px-3 py-1.5 text-xs font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"><Download className="h-3.5 w-3.5" /> PDF</button>
+          <button onClick={handleGenerateQuote} className="inline-flex items-center gap-1.5 rounded-lg bg-green-600 px-3 py-1.5 text-xs font-medium text-white shadow-sm hover:bg-green-700"><FileText className="h-3.5 w-3.5" /> Generate Quote</button>
+          <button onClick={() => { setReminderMileage(ro.mileage || ''); setReminderInterval('5000'); setReminderNotes(''); setShowReminderForm(!showReminderForm); }} className={`inline-flex items-center gap-1.5 rounded-lg border px-3 py-1.5 text-xs font-medium ${showReminderForm ? 'border-blue-300 bg-blue-50 text-blue-700 dark:border-blue-700 dark:bg-blue-900/20 dark:text-blue-300' : 'border-gray-300 bg-white text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700'}`}><BellRing className="h-3.5 w-3.5" /> Set Reminder</button>
+        </div>
+      </div>
+
+      {/* Set Reminder inline form */}
+      {showReminderForm && (
+        <div className="mb-4 rounded-xl border border-blue-200 bg-blue-50 p-4 dark:border-blue-700 dark:bg-blue-900/20">
+          <div className="mb-3 flex items-center justify-between">
+            <h3 className="text-sm font-semibold text-blue-800 dark:text-blue-300">
+              <BellRing className="mr-1.5 inline h-4 w-4" />
+              Set Maintenance Reminder
+            </h3>
+            <button onClick={() => setShowReminderForm(false)} className="rounded p-1 text-blue-400 hover:text-blue-600 dark:hover:text-blue-300">
+              <X className="h-4 w-4" />
+            </button>
+          </div>
+          <div className="mb-3 text-xs text-blue-700 dark:text-blue-400">
+            Customer: <strong>{ro.customerName}</strong> — Vehicle: <strong>{ro.vehicleInfo}</strong>
+          </div>
+          <div className="grid grid-cols-1 gap-3 sm:grid-cols-3">
+            <div>
+              <label className="block text-xs font-medium text-blue-700 dark:text-blue-300">Mileage at Service</label>
+              <input
+                type="number"
+                value={reminderMileage}
+                onChange={(e) => setReminderMileage(e.target.value)}
+                placeholder={ro.mileage || 'Enter mileage'}
+                className="mt-1 w-full rounded border border-blue-300 bg-white px-2 py-1.5 text-sm dark:border-blue-700 dark:bg-gray-800 dark:text-gray-100"
+              />
+            </div>
+            <div>
+              <label className="block text-xs font-medium text-blue-700 dark:text-blue-300">Interval (miles)</label>
+              <input
+                type="number"
+                value={reminderInterval}
+                onChange={(e) => setReminderInterval(e.target.value)}
+                placeholder="5000"
+                className="mt-1 w-full rounded border border-blue-300 bg-white px-2 py-1.5 text-sm dark:border-blue-700 dark:bg-gray-800 dark:text-gray-100"
+              />
+            </div>
+            <div>
+              <label className="block text-xs font-medium text-blue-700 dark:text-blue-300">Due Mileage (computed)</label>
+              <div className="mt-1 flex h-[34px] items-center rounded border border-blue-200 bg-blue-100 px-2 text-sm font-medium text-blue-800 dark:border-blue-700 dark:bg-blue-900/40 dark:text-blue-300">
+                {((parseInt(reminderMileage) || 0) + (parseInt(reminderInterval) || 0)).toLocaleString()}
+              </div>
+            </div>
+          </div>
+          <div className="mt-3">
+            <label className="block text-xs font-medium text-blue-700 dark:text-blue-300">Notes (optional)</label>
+            <textarea
+              value={reminderNotes}
+              onChange={(e) => setReminderNotes(e.target.value)}
+              placeholder="e.g. Next oil change reminder"
+              rows={2}
+              className="mt-1 w-full rounded border border-blue-300 bg-white px-2 py-1.5 text-sm dark:border-blue-700 dark:bg-gray-800 dark:text-gray-100"
+            />
+          </div>
+          <div className="mt-3 flex justify-end gap-2">
+            <button
+              onClick={() => setShowReminderForm(false)}
+              className="rounded-lg border border-gray-300 bg-white px-3 py-1.5 text-xs font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300"
+            >
+              Cancel
+            </button>
+            <button
+              onClick={handleSaveReminder}
+              disabled={savingReminder}
+              className="inline-flex items-center gap-1.5 rounded-lg bg-blue-600 px-3 py-1.5 text-xs font-medium text-white hover:bg-blue-700 disabled:opacity-50"
+            >
+              {savingReminder ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <BellRing className="h-3.5 w-3.5" />}
+              {savingReminder ? 'Saving...' : 'Save Reminder'}
+            </button>
+          </div>
+        </div>
+      )}
+
+      {/* Info bar */}
+      <div className="mb-4 rounded-xl bg-white p-4 ring-1 ring-gray-200 dark:bg-gray-800 dark:ring-gray-700">
+        <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-6">
+          <div>
+            <p className="text-xs font-medium text-gray-500 dark:text-gray-400">Customer</p>
+            <p className="mt-1 text-sm font-medium text-gray-900 dark:text-gray-100">{ro.customerName || '—'}</p>
+            {ro.customerPhone && <p className="text-xs text-gray-400">{ro.customerPhone}</p>}
+          </div>
+          <div>
+            <p className="text-xs font-medium text-gray-500 dark:text-gray-400">Vehicle</p>
+            <p className="mt-1 text-sm text-gray-900 dark:text-gray-100">{ro.vehicleInfo || '—'}</p>
+            {ro.vin && <p className="text-xs text-gray-400">VIN: {ro.vin}</p>}
+            {ro.mileage && <p className="text-xs text-gray-400">Mileage: {ro.mileage}</p>}
+          </div>
+          <div>
+            <p className="text-xs font-medium text-gray-500 dark:text-gray-400">Status</p>
+            <div className="mt-1"><StatusBadge status={voided ? 'voided' : (ro.status || '')} config={statusConfig} /></div>
+          </div>
+          <div>
+            <p className="text-xs font-medium text-gray-500 dark:text-gray-400">Write-up</p>
+            <p className="mt-1 text-sm text-gray-900 dark:text-gray-100">{formatDateTime(ro.writeupTime || ro.created)}</p>
+          </div>
+          <div>
+            <p className="text-xs font-medium text-gray-500 dark:text-gray-400">Promised</p>
+            <div className="mt-1 flex items-center gap-1.5">
+              <span className="text-sm text-gray-900 dark:text-gray-100">{formatDueDateTime(ro)}</span>
+              {isActiveStatus && (
+                <button onClick={() => { setPromisedValue(readPromisedOverride(ro) ? new Date(readPromisedOverride(ro)!).toISOString().slice(0, 16) : ''); setShowPromisedPicker(true); }}
+                  className="text-xs text-blue-600 hover:underline dark:text-blue-400">{readPromisedOverride(ro) ? 'clear' : 'pin'}</button>
+              )}
+            </div>
+          </div>
+          <div>
+            <p className="text-xs font-medium text-gray-500 dark:text-gray-400">{isCompletedStatus ? 'Completed' : 'Time Remaining'}</p>
+            <div className="mt-1 flex items-center gap-2">
+              {isActiveStatus ? (
+                <>
+                  <span className={`text-sm ${urgency === 'urgent' ? 'font-semibold text-red-600 dark:text-red-400' : urgency === 'warning' ? 'font-medium text-amber-600 dark:text-amber-400' : 'text-gray-600 dark:text-gray-400'}`}>
+                    {urgency === 'urgent' && <AlertTriangle className="mr-1 inline h-3.5 w-3.5 text-red-500" />}
+                    {formatTimeRemaining(ro, now)}
+                  </span>
+                  <button onClick={() => setShowAddTimeModal(true)} className="inline-flex items-center gap-1 rounded border border-blue-300 bg-blue-50 px-2 py-0.5 text-xs font-medium text-blue-700 hover:bg-blue-100 dark:border-blue-700 dark:bg-blue-900/20 dark:text-blue-400">+ Add Time</button>
+                </>
+              ) : isCompletedStatus ? (
+                <span className="text-sm text-gray-900 dark:text-gray-100">{formatCompletedTime(ro)}</span>
+              ) : <span className="text-sm text-gray-400">—</span>}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Services summary */}
+      <div className="mb-4 rounded-xl bg-white p-4 ring-1 ring-gray-200 dark:bg-gray-800 dark:ring-gray-700">
+        <div className="mb-3 flex flex-wrap items-center justify-between gap-2">
+          <div>
+            <h3 className="text-sm font-semibold text-gray-800 dark:text-gray-100">Services on this RO</h3>
+            <p className="text-xs text-gray-500 dark:text-gray-400">
+              {localServices.filter((s) => s.name?.trim()).length} service{localServices.filter((s) => s.name?.trim()).length === 1 ? '' : 's'} · {formatCurrency(totals.subtotal)} subtotal
+            </p>
+          </div>
+          <button
+            type="button"
+            onClick={() => setActiveTab('services')}
+            className="inline-flex items-center gap-1.5 rounded-lg border border-green-300 bg-green-50 px-3 py-1.5 text-xs font-medium text-green-700 hover:bg-green-100 dark:border-green-700 dark:bg-green-900/20 dark:text-green-300"
+          >
+            <Wrench className="h-3.5 w-3.5" /> Edit Services
+          </button>
+        </div>
+        {localServices.filter((s) => s.name?.trim()).length > 0 ? (
+          <div className="space-y-2">
+            {localServices.filter((s) => s.name?.trim()).map((svc, i) => (
+              <div key={`${svc.id}-${i}`} className="flex flex-wrap items-start justify-between gap-3 rounded-lg border border-gray-100 bg-gray-50 px-3 py-2 dark:border-gray-700 dark:bg-gray-900/50">
+                <div className="min-w-0 flex-1">
+                  <div className="flex flex-wrap items-center gap-2">
+                    <p className="truncate text-sm font-medium text-gray-900 dark:text-gray-100">{svc.name}</p>
+                    <PricingBadge mode={svc.pricingMode || 'full'} />
+                    <span className={`rounded-md px-2 py-0.5 text-[11px] font-medium ${svc.applyShopCharge !== false ? 'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400' : 'bg-gray-100 text-gray-400 dark:bg-gray-700 dark:text-gray-500'}`}>
+                      {svc.applyShopCharge !== false ? 'Shop Charge On' : 'Shop Charge Off'}
+                    </span>
+                  </div>
+                  {svc.description && <p className="mt-1 line-clamp-2 text-xs text-gray-500 dark:text-gray-400">{svc.description}</p>}
+                </div>
+                <div className="text-right">
+                  <p className="text-sm font-semibold text-gray-900 dark:text-gray-100">{formatCurrency(roServiceTotal(svc))}</p>
+                  <p className="text-[11px] text-gray-400">Line total</p>
+                </div>
+              </div>
+            ))}
+          </div>
+        ) : (
+          <div className="rounded-lg border border-dashed border-gray-300 bg-gray-50 px-4 py-6 text-center dark:border-gray-700 dark:bg-gray-900/40">
+            <p className="text-sm font-medium text-gray-600 dark:text-gray-300">No services have been added to this RO yet.</p>
+            <button
+              type="button"
+              onClick={() => setActiveTab('services')}
+              className="mt-3 inline-flex items-center gap-1.5 rounded-lg bg-green-600 px-3 py-1.5 text-xs font-medium text-white hover:bg-green-700"
+            >
+              <Plus className="h-3.5 w-3.5" /> Add Services
+            </button>
+          </div>
+        )}
+      </div>
+
+      {/* Promised-time override */}
+      {showPromisedPicker && (
+        <div className="mb-4 flex flex-wrap items-center gap-2 rounded-lg border border-orange-200 bg-orange-50 p-3 text-sm dark:border-orange-700 dark:bg-orange-900/20">
+          <label className="text-xs font-medium text-orange-700 dark:text-orange-300">Pin ready-by time:</label>
+          <input type="datetime-local" value={promisedValue} onChange={(e) => setPromisedValue(e.target.value)} className="rounded border border-orange-300 bg-white px-2 py-1 text-sm dark:border-orange-700 dark:bg-gray-800 dark:text-gray-100" />
+          <button onClick={handleSetPromisedOverride} className="rounded bg-orange-600 px-3 py-1 text-xs font-medium text-white hover:bg-orange-700">Set</button>
+          <button onClick={() => { handleSetPromisedOverride(); setShowPromisedPicker(false); }} className="rounded border border-gray-300 bg-white px-3 py-1 text-xs font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300">Clear</button>
+          <button onClick={() => setShowPromisedPicker(false)} className="rounded px-2 py-1 text-xs text-gray-500 hover:text-gray-700 dark:text-gray-400">Cancel</button>
+        </div>
+      )}
+
+      {/* Quick actions */}
+      <div className="mb-4 flex flex-wrap items-center gap-1.5">
+        {!voided && ro.status !== 'active' && (
+          <button onClick={() => handleStatusChange('active')} className="rounded border border-blue-300 bg-blue-50 px-2.5 py-1 text-xs font-medium text-blue-700 hover:bg-blue-100 dark:border-blue-700 dark:bg-blue-900/20 dark:text-blue-400">Active</button>
+        )}
+        {!voided && !['in_progress', 'waiting_pickup', 'completed', 'final_close', 'delivered'].includes(ro.status) && (
+          <button onClick={() => handleStatusChange('in_progress')} className="rounded border border-yellow-300 bg-yellow-50 px-2.5 py-1 text-xs font-medium text-yellow-700 hover:bg-yellow-100 dark:border-yellow-700 dark:bg-yellow-900/20 dark:text-yellow-400">In Progress</button>
+        )}
+        {!voided && !['waiting_parts', 'waiting_pickup', 'completed', 'final_close', 'delivered'].includes(ro.status) && (
+          <button onClick={() => handleStatusChange('waiting_parts')} className="rounded border border-orange-300 bg-orange-50 px-2.5 py-1 text-xs font-medium text-orange-700 hover:bg-orange-100 dark:border-orange-700 dark:bg-orange-900/20 dark:text-orange-400">Waiting Parts</button>
+        )}
+        {!voided && !['waiting_pickup', 'completed', 'final_close', 'delivered'].includes(ro.status) && (
+          <button onClick={() => handleStatusChange('waiting_pickup')} className="rounded border border-teal-300 bg-teal-50 px-2.5 py-1 text-xs font-medium text-teal-700 hover:bg-teal-100 dark:border-teal-700 dark:bg-teal-900/20 dark:text-teal-400">Waiting Pick-up</button>
+        )}
+        {!voided && !['completed', 'final_close', 'delivered'].includes(ro.status) && (
+          <button onClick={() => handleStatusChange('completed')} className="rounded border border-green-300 bg-green-50 px-2.5 py-1 text-xs font-medium text-green-700 hover:bg-green-100 dark:border-green-700 dark:bg-green-900/20 dark:text-green-400">Complete</button>
+        )}
+        {!voided && ro.status === 'completed' && (
+          <button onClick={() => handleStatusChange('final_close')} className="rounded border border-gray-300 bg-gray-50 px-2.5 py-1 text-xs font-medium text-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300">Final Close</button>
+        )}
+        {isCompletedStatus && !voided && (
+          <button onClick={() => handleStatusChange('active')} className="rounded border border-gray-300 bg-gray-50 px-2.5 py-1 text-xs font-medium text-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300">Reopen</button>
+        )}
+        {ro.status === 'waiting_pickup' && !voided && (
+          <>
+            <button onClick={() => handleNotifyCustomer('sms')} className="inline-flex items-center gap-1 rounded border border-teal-300 bg-teal-50 px-2.5 py-1 text-xs font-medium text-teal-700 hover:bg-teal-100 dark:border-teal-700 dark:bg-teal-900/20 dark:text-teal-300"><Phone className="h-3 w-3" /> Notify SMS</button>
+            <button onClick={() => handleNotifyCustomer('email')} className="inline-flex items-center gap-1 rounded border border-teal-300 bg-teal-50 px-2.5 py-1 text-xs font-medium text-teal-700 hover:bg-teal-100 dark:border-teal-700 dark:bg-teal-900/20 dark:text-teal-300"><Mail className="h-3 w-3" /> Notify Email</button>
+          </>
+        )}
+        <span className="mx-1 h-4 w-px bg-gray-200 dark:bg-gray-700" />
+        <button onClick={handleVoid} className={`inline-flex items-center gap-1 rounded border px-2.5 py-1 text-xs font-medium ${voided ? 'border-green-300 bg-green-50 text-green-700 hover:bg-green-100 dark:border-green-700 dark:bg-green-900/20 dark:text-green-300' : 'border-red-300 bg-red-50 text-red-700 hover:bg-red-100 dark:border-red-700 dark:bg-red-900/20 dark:text-red-300'}`}>
+          <Ban className="h-3 w-3" /> {voided ? 'Un-void' : 'Void RO'}
+        </button>
+        <span className="mx-1 h-4 w-px bg-gray-200 dark:bg-gray-700" />
+        <div className="flex items-center gap-1.5">
+          <Clock3 className={`h-4 w-4 ${clockActive ? 'text-indigo-500' : 'text-gray-400'}`} />
+          <span className="text-sm tabular-nums text-gray-700 dark:text-gray-200">{formatElapsed(clockElapsedMin)}</span>
+          {clockActive ? (
+            <button onClick={handleClockStop} className="rounded border border-indigo-300 bg-indigo-50 px-2 py-0.5 text-xs font-medium text-indigo-700 hover:bg-indigo-100 dark:border-indigo-700 dark:bg-indigo-900/20 dark:text-indigo-300">Stop</button>
+          ) : (
+            <button onClick={handleClockStart} className="rounded border border-gray-300 bg-white px-2 py-0.5 text-xs font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300">Start</button>
+          )}
+        </div>
+      </div>
+
+      {/* Customer satisfaction */}
+      {isCompletedStatus && !voided && (
+        <div className="rounded-xl bg-white p-4 ring-1 ring-gray-200 dark:bg-gray-800 dark:ring-gray-700">
+          <p className="mb-1 text-xs font-medium text-gray-500 dark:text-gray-400">Customer Satisfaction</p>
+          <div className="flex gap-0.5">
+            {[1, 2, 3, 4, 5].map((star) => (
+              <button key={star} onClick={() => handleSetSatisfaction(star)}
+                className={`h-6 w-6 transition-colors ${(ro.satisfaction || 0) >= star ? 'text-yellow-400 hover:text-yellow-500' : 'text-gray-300 hover:text-yellow-300 dark:text-gray-600 dark:hover:text-yellow-500'}`}>
+                <span className="text-xl leading-none">★</span>
+              </button>
+            ))}
+            {!ro.satisfaction && <span className="ml-2 self-center text-xs text-gray-400">Not rated</span>}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+
+  const servicesContent = (
+    <div>
+      {/* Sticky save bar */}
+      <div className="sticky top-0 z-10 flex items-center justify-end gap-2 border-b border-gray-200 bg-gray-50 px-4 py-3 dark:border-gray-700 dark:bg-gray-950">
+        {servicesSaved && <span className="text-xs text-green-600 dark:text-green-400">Saved</span>}
+        <button onClick={handleSaveServices} disabled={saving || !servicesDirty}
+          className="inline-flex items-center gap-1.5 rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 disabled:opacity-50">
+          {saving ? <Loader2 className="h-4 w-4 animate-spin" /> : <Save className="h-4 w-4" />}
+          {saving ? 'Saving...' : 'Save Services'}
+        </button>
+      </div>
+
+      {/* Catalog search */}
+      <div className="mb-4 rounded-xl bg-white p-4 ring-1 ring-gray-200 dark:bg-gray-800 dark:ring-gray-700">
+        <h3 className="mb-3 text-sm font-semibold text-gray-700 dark:text-gray-300">Service Catalog</h3>
+        <div className="relative">
+          <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400" />
+          <input type="text" value={catalogSearch} onChange={(e) => setCatalogSearch(e.target.value)}
+            placeholder="Search services from catalog..."
+            className="w-full rounded-lg border border-gray-300 bg-white py-2 pl-9 pr-3 text-sm text-gray-900 placeholder-gray-400 focus:border-green-500 focus:outline-none focus:ring-2 focus:ring-green-500/20 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100" />
+        </div>
+        {filteredCatalog.length > 0 && (
+          <div className="mt-3 max-h-48 space-y-1.5 overflow-y-auto">
+            {filteredCatalog.map((svc) => (
+              <div key={svc.id} className="flex items-center gap-2 rounded-lg border border-gray-100 bg-gray-50 px-3 py-2 dark:border-gray-700 dark:bg-gray-700/50">
+                <div className="min-w-0">
+                  <p className="text-sm font-medium text-gray-900 dark:text-gray-100">{svc.name}</p>
+                  <p className="text-xs text-gray-500 dark:text-gray-400">{svc.category && `${svc.category} — `}${svc.price.toFixed(2)}</p>
+                </div>
+                <button onClick={() => handleAddCatalogService(svc)}
+                  className="inline-flex shrink-0 items-center gap-1 rounded-lg bg-green-600 px-3 py-1.5 text-xs font-medium text-white hover:bg-green-700">
+                  <Plus className="h-3 w-3" /> Add
+                </button>
+              </div>
+            ))}
+          </div>
+        )}
+        {catalogSearch && filteredCatalog.length === 0 && (
+          <p className="mt-2 text-xs text-gray-400">No matching services. <button onClick={() => setShowNewServiceForm(true)} className="text-blue-600 hover:underline dark:text-blue-400">Create one</button>.</p>
+        )}
+        {!showNewServiceForm && (
+          <button onClick={() => setShowNewServiceForm(true)}
+            className="mt-3 inline-flex items-center gap-1 text-xs font-medium text-blue-600 hover:text-blue-700 dark:text-blue-400">
+            <Plus className="h-3 w-3" /> Create new catalog service
+          </button>
+        )}
+      </div>
+
+      {/* New service form */}
+      {showNewServiceForm && (
+        <div className="mb-4 rounded-2xl border border-green-200 bg-green-50 p-5 shadow-sm dark:border-green-700 dark:bg-green-900/10">
+          <div className="mb-4 flex items-center justify-between gap-3">
+            <h2 className="text-base font-semibold text-gray-900 dark:text-gray-100">Add New Service</h2>
+            <button onClick={() => { setShowNewServiceForm(false); setNewServiceForm(createEmptyServiceForm()); }} className="text-gray-400 hover:text-gray-600"><X className="h-4 w-4" /></button>
+          </div>
+          <div className="grid gap-3 sm:grid-cols-2">
+            <FormField label="Service Name"><Input value={newServiceForm.name} onChange={(v) => setNewServiceForm((p) => ({ ...p, name: v }))} placeholder="e.g. Oil Change" icon={<Wrench className="h-4 w-4" />} /></FormField>
+            <FormField label="Category"><Input value={newServiceForm.category} onChange={(v) => setNewServiceForm((p) => ({ ...p, category: v }))} placeholder="e.g. Maintenance" icon={<Layers className="h-4 w-4" />} /></FormField>
+          </div>
+          <div className="mt-3">
+            <FormField label="Description">
+              <div className="space-y-2">
+                <Textarea value={newServiceForm.description} onChange={(v) => setNewServiceForm((p) => ({ ...p, description: v }))} placeholder="Brief description..." rows={2} />
+              </div>
+            </FormField>
+          </div>
+          <div className="mt-3 rounded-xl border border-gray-200 bg-white p-4 dark:border-gray-700 dark:bg-gray-950/40">
+            <p className="text-sm font-medium text-gray-700 dark:text-gray-300">Pricing</p>
+            <div className="mt-3 grid gap-2 sm:grid-cols-2">
+              <button type="button" onClick={() => setNewServiceForm((p) => ({ ...p, pricingMode: 'full' }))}
+                className={`rounded-lg border px-4 py-3 text-left text-sm transition-colors ${newServiceForm.pricingMode === 'full' ? 'border-green-500 bg-green-50 text-green-700 dark:border-green-500 dark:bg-green-900/20 dark:text-green-300' : 'border-gray-300 bg-white text-gray-700 hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:hover:bg-gray-800'}`}>
+                <span className="block font-medium">Full Price</span>
+                <span className="block text-xs text-gray-500 dark:text-gray-400">Single flat price</span>
+              </button>
+              <button type="button" onClick={() => setNewServiceForm((p) => ({ ...p, pricingMode: 'split' }))}
+                className={`rounded-lg border px-4 py-3 text-left text-sm transition-colors ${newServiceForm.pricingMode === 'split' ? 'border-green-500 bg-green-50 text-green-700 dark:border-green-500 dark:bg-green-900/20 dark:text-green-300' : 'border-gray-300 bg-white text-gray-700 hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:hover:bg-gray-800'}`}>
+                <span className="block font-medium">Labor + Parts</span>
+                <span className="block text-xs text-gray-500 dark:text-gray-400">Split pricing</span>
+              </button>
+            </div>
+            {newServiceForm.pricingMode === 'full' ? (
+              <div className="mt-3">
+                <FormField label="Full Price ($)"><Input type="number" value={newServiceForm.fullPrice} onChange={(v) => setNewServiceForm((p) => ({ ...p, fullPrice: Number(v) || 0 }))} icon={<Tag className="h-4 w-4" />} /></FormField>
+              </div>
+            ) : (
+              <div className="mt-3 grid gap-3 sm:grid-cols-3">
+                <FormField label="Labor Price ($)"><Input type="number" value={newServiceForm.laborPrice} onChange={(v) => setNewServiceForm((p) => ({ ...p, laborPrice: Number(v) || 0 }))} icon={<DollarSign className="h-4 w-4" />} /></FormField>
+                <FormField label="Parts Price ($)"><Input type="number" value={newServiceForm.partsPrice} onChange={(v) => setNewServiceForm((p) => ({ ...p, partsPrice: Number(v) || 0 }))} icon={<Package className="h-4 w-4" />} /></FormField>
+                <FormField label="Total">
+                  <div className="flex h-10 items-center rounded-lg border border-gray-300 bg-gray-50 px-3 text-sm font-medium text-gray-900 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100">
+                    <Tag className="mr-2 h-4 w-4 text-gray-400" />${(newServiceForm.laborPrice + newServiceForm.partsPrice).toFixed(2)}
+                  </div>
+                </FormField>
+              </div>
+            )}
+          </div>
+          <div className="mt-4 flex justify-end gap-2">
+            <button onClick={() => { setShowNewServiceForm(false); setNewServiceForm(createEmptyServiceForm()); }}
+              className="inline-flex items-center gap-1.5 rounded-lg border border-gray-300 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-800">
+              <X className="h-4 w-4" /> Cancel
+            </button>
+            <button onClick={handleSaveNewService}
+              className="inline-flex items-center gap-1.5 rounded-lg bg-green-600 px-4 py-2 text-sm font-medium text-white hover:bg-green-700">
+              <Check className="h-4 w-4" /> Create & Add
+            </button>
+          </div>
+        </div>
+      )}
+
+      {/* Current RO services */}
+      <div className="mb-4 rounded-xl bg-white p-4 ring-1 ring-gray-200 dark:bg-gray-800 dark:ring-gray-700">
+        <div className="mb-3 flex items-center justify-between">
+          <h3 className="text-sm font-semibold text-gray-700 dark:text-gray-300">RO Services</h3>
+          <button onClick={handleAddService}
+            className="inline-flex items-center gap-1 rounded-lg border border-gray-300 bg-white px-3 py-1.5 text-xs font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700">
+            <Plus className="h-3.5 w-3.5" /> Add Manual
+          </button>
+        </div>
+        <div className="space-y-3">
+          {localServices.map((svc, i) => (
+            <EditableServiceRow key={i} service={svc} index={i} onChange={handleServiceChange} onRemove={handleRemoveService} defaultLaborRate={settings.defaultLaborRate || 145} />
+          ))}
+          {localServices.length === 0 && (
+            <p className="text-center text-sm text-gray-400">No services on this RO yet.</p>
+          )}
+        </div>
+      </div>
+
+      {/* Totals + Save */}
+      {localServices.filter((s) => s.name?.trim()).length > 0 && (
+        <div className="mb-4 rounded-xl bg-white p-4 ring-1 ring-gray-200 dark:bg-gray-800 dark:ring-gray-700">
+          <div className="mx-auto max-w-md overflow-hidden rounded-xl border border-gray-200 bg-gray-50 dark:border-gray-700 dark:bg-gray-900/40">
+            <div className="border-b border-gray-200 px-4 py-3 dark:border-gray-700">
+              <h3 className="text-sm font-semibold text-gray-800 dark:text-gray-100">RO Total</h3>
+              <p className="mt-0.5 text-xs text-gray-500 dark:text-gray-400">Services and required charges only</p>
+            </div>
+            <div className="space-y-2 px-4 py-3 text-sm">
+              <div className="flex justify-between"><span className="text-gray-500 dark:text-gray-400">Labor</span><span className="font-medium text-gray-900 dark:text-gray-100">{formatCurrency(totals.laborTotal)}</span></div>
+              <div className="flex justify-between"><span className="text-gray-500 dark:text-gray-400">Parts</span><span className="font-medium text-gray-900 dark:text-gray-100">{formatCurrency(totals.partsTotal)}</span></div>
+              <div className="flex justify-between border-t border-gray-200 pt-2 dark:border-gray-700"><span className="font-medium text-gray-700 dark:text-gray-300">Services Subtotal</span><span className="font-semibold text-gray-900 dark:text-gray-100">{formatCurrency(totals.subtotal)}</span></div>
+              {(totals.discountAmount > 0 || totals.shopCharge > 0 || totals.tax > 0) && (
+                <div className="space-y-2 border-t border-gray-200 pt-2 dark:border-gray-700">
+                  {totals.discountAmount > 0 && <div className="flex justify-between"><span className="text-gray-500 dark:text-gray-400">Discount</span><span className="font-medium text-green-600 dark:text-green-400">−{formatCurrency(totals.discountAmount)}</span></div>}
+                  {totals.shopCharge > 0 && <div className="flex justify-between"><span className="text-gray-500 dark:text-gray-400">Shop Charge</span><span className="font-medium text-gray-900 dark:text-gray-100">{formatCurrency(totals.shopCharge)}</span></div>}
+                  {totals.tax > 0 && <div className="flex justify-between"><span className="text-gray-500 dark:text-gray-400">{settings.taxLabel || 'Tax'}</span><span className="font-medium text-gray-900 dark:text-gray-100">{formatCurrency(totals.tax)}</span></div>}
+                </div>
+              )}
+            </div>
+            <div className="flex items-center justify-between bg-blue-50 px-4 py-3 dark:bg-blue-950/30">
+              <span className="text-sm font-bold text-gray-900 dark:text-white">Total Due</span>
+              <span className="text-xl font-bold text-blue-600 dark:text-blue-400">{formatCurrency(totals.total)}</span>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+
+  const financialContent = (
+    <div>
+      {/* Sticky save bar */}
+      <div className="sticky top-0 z-10 flex items-center justify-end gap-2 border-b border-gray-200 bg-gray-50 px-4 py-3 dark:border-gray-700 dark:bg-gray-950">
+        {finSaved && <span className="text-xs text-green-600 dark:text-green-400">Saved</span>}
+        <button onClick={handleSaveFinancial} disabled={finSaving}
+          className="inline-flex items-center gap-1.5 rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 disabled:opacity-50">
+          {finSaving ? <Loader2 className="h-4 w-4 animate-spin" /> : <Save className="h-4 w-4" />}
+          {finSaving ? 'Saving...' : 'Save Financial'}
+        </button>
+      </div>
+
+      <div className="space-y-4 p-4">
+        {/* Helper text */}
+        <div className="rounded-lg border border-blue-200 bg-blue-50 p-3 text-xs text-blue-700 dark:border-blue-700 dark:bg-blue-900/20 dark:text-blue-300">
+          <DollarSign className="mr-1 inline h-3.5 w-3.5" />
+          Enter the actual billed amounts and costs. Warranty totals and costs are deducted from Customer Pay. Shop charge is deducted from Customer Pay gross profits.
+        </div>
+
+        {/* Customer Pay section */}
+        <div className="rounded-xl border border-green-200 bg-green-50 p-4 dark:border-green-700 dark:bg-green-900/10">
+          <h3 className="mb-3 text-sm font-bold text-green-800 dark:text-green-300">Customer Pay</h3>
+          <div className="grid grid-cols-1 gap-3 sm:grid-cols-3">
+            <div>
+              <label className="block text-xs font-semibold text-gray-500 uppercase">CP Total</label>
+              <input type="number" step="0.01" value={finCpTotal} onChange={(e) => setFinCpTotal(e.target.value)} placeholder="0.00"
+                className="mt-1 w-full rounded-lg border border-gray-300 bg-white p-2 text-sm focus:ring-2 focus:ring-green-500 focus:outline-none dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100" />
+            </div>
+            <div>
+              <label className="block text-xs font-semibold text-gray-500 uppercase">CP Cost</label>
+              <input type="number" step="0.01" value={finCpCost} onChange={(e) => setFinCpCost(e.target.value)} placeholder="0.00"
+                className="mt-1 w-full rounded-lg border border-gray-300 bg-white p-2 text-sm focus:ring-2 focus:ring-green-500 focus:outline-none dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100" />
+            </div>
+            <div>
+              <label className="block text-xs font-semibold text-gray-500 uppercase">CP Net Total</label>
+              <div className="mt-1 flex h-[38px] items-center rounded-lg border border-green-200 bg-green-100 px-2 text-sm font-medium text-green-800 dark:border-green-700 dark:bg-green-900/30 dark:text-green-300">
+                {formatCurrency(cpNetTotal)}
+              </div>
+              <p className="mt-1 text-[10px] text-gray-400">CP Total minus Warranty Total</p>
+            </div>
+          </div>
+          <div className="mt-2 grid grid-cols-1 gap-3 sm:grid-cols-2">
+            <div className="rounded-lg bg-white p-2 dark:bg-gray-800">
+              <div className="flex justify-between text-xs">
+                <span className="text-gray-500 dark:text-gray-400">CP Net Cost</span>
+                <span className="font-medium text-gray-900 dark:text-gray-100">{formatCurrency(cpNetCost)}</span>
+              </div>
+              <p className="mt-0.5 text-[10px] text-gray-400">CP Cost minus Warranty Cost</p>
+            </div>
+            <div className="rounded-lg bg-white p-2 dark:bg-gray-800">
+              <div className="flex justify-between text-xs">
+                <span className="text-gray-500 dark:text-gray-400">CP Gross Profit</span>
+                <span className={`font-bold ${cpGrossProfit >= 0 ? 'text-green-700 dark:text-green-400' : 'text-red-600 dark:text-red-400'}`}>{formatCurrency(cpGrossProfit)}</span>
+              </div>
+              <p className="mt-0.5 text-[10px] text-gray-400">Net Total minus Net Cost minus Shop Charge</p>
+            </div>
+          </div>
+        </div>
+
+        {/* Warranty section */}
+        <div className="rounded-xl border border-blue-200 bg-blue-50 p-4 dark:border-blue-700 dark:bg-blue-900/10">
+          <h3 className="mb-3 text-sm font-bold text-blue-800 dark:text-blue-300">Warranty</h3>
+          <div className="grid grid-cols-1 gap-3 sm:grid-cols-3">
+            <div>
+              <label className="block text-xs font-semibold text-gray-500 uppercase">Warranty Total</label>
+              <input type="number" step="0.01" value={finWarrTotal} onChange={(e) => setFinWarrTotal(e.target.value)} placeholder="0.00"
+                className="mt-1 w-full rounded-lg border border-gray-300 bg-white p-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100" />
+            </div>
+            <div>
+              <label className="block text-xs font-semibold text-gray-500 uppercase">Warranty Cost</label>
+              <input type="number" step="0.01" value={finWarrCost} onChange={(e) => setFinWarrCost(e.target.value)} placeholder="0.00"
+                className="mt-1 w-full rounded-lg border border-gray-300 bg-white p-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100" />
+            </div>
+            <div>
+              <label className="block text-xs font-semibold text-gray-500 uppercase">Warranty GP</label>
+              <div className="mt-1 flex h-[38px] items-center rounded-lg border border-blue-200 bg-blue-100 px-2 text-sm font-medium text-blue-800 dark:border-blue-700 dark:bg-blue-900/30 dark:text-blue-300">
+                {formatCurrency(warrGrossProfit)}
+              </div>
+              <p className="mt-1 text-[10px] text-gray-400">Warranty Total minus Warranty Cost</p>
+            </div>
+          </div>
+        </div>
+
+        {/* Shop Charge section */}
+        <div className="rounded-xl border border-amber-200 bg-amber-50 p-4 dark:border-amber-700 dark:bg-amber-900/10">
+          <h3 className="mb-3 text-sm font-bold text-amber-800 dark:text-amber-300">Shop Charge</h3>
+          <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
+            <div>
+              <label className="block text-xs font-semibold text-gray-500 uppercase">Shop Charge</label>
+              <input type="number" step="0.01" value={finShopCharge} onChange={(e) => setFinShopCharge(e.target.value)} placeholder="0.00"
+                className="mt-1 w-full rounded-lg border border-gray-300 bg-white p-2 text-sm focus:ring-2 focus:ring-amber-500 focus:outline-none dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100" />
+              <p className="mt-1 text-[10px] text-gray-400">Deducted from CP Gross Profit</p>
+            </div>
+            <div className="flex items-end">
+              <div className="w-full rounded-lg bg-white p-2 dark:bg-gray-800">
+                <div className="flex justify-between text-xs">
+                  <span className="text-gray-500 dark:text-gray-400">CP GP after Shop Charge</span>
+                  <span className={`font-bold ${cpGrossProfit >= 0 ? 'text-green-700 dark:text-green-400' : 'text-red-600 dark:text-red-400'}`}>{formatCurrency(cpGrossProfit)}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Gross Profit summary */}
+        <div className="rounded-xl bg-gray-100 p-4 dark:bg-gray-700/50">
+          <div className="flex items-center justify-between">
+            <div className="text-sm font-medium text-gray-600 dark:text-gray-300">Overall Gross Profit</div>
+            <div className={`text-2xl font-bold ${overallGrossProfit >= 0 ? 'text-gray-900 dark:text-white' : 'text-red-600 dark:text-red-400'}`}>{formatCurrency(overallGrossProfit)}</div>
+          </div>
+          <div className="mt-2 flex gap-4 text-xs text-gray-500 dark:text-gray-400">
+            <span>CP GP: <strong className={cpGrossProfit >= 0 ? 'text-green-700 dark:text-green-400' : 'text-red-600 dark:text-red-400'}>{formatCurrency(cpGrossProfit)}</strong></span>
+            <span>Warranty GP: <strong className={warrGrossProfit >= 0 ? 'text-blue-700 dark:text-blue-400' : 'text-red-600 dark:text-red-400'}>{formatCurrency(warrGrossProfit)}</strong></span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+
+  const historyContent = (
+    <div>
+      {!ro.vin || !ro.vin.trim() ? (
+        <div className="rounded-xl bg-white p-8 text-center ring-1 ring-gray-200 dark:bg-gray-800 dark:ring-gray-700">
+          <History className="mx-auto h-10 w-10 text-gray-300 dark:text-gray-600" />
+          <p className="mt-3 text-sm text-gray-500 dark:text-gray-400">No VIN on this repair order — vehicle history unavailable.</p>
+        </div>
+      ) : historyLoading ? (
+        <div className="flex items-center justify-center py-12"><LoadingSpinner text="Loading history..." /></div>
+      ) : historyData.length === 0 ? (
+        <div className="rounded-xl bg-white p-8 text-center ring-1 ring-gray-200 dark:bg-gray-800 dark:ring-gray-700">
+          <History className="mx-auto h-10 w-10 text-gray-300 dark:text-gray-600" />
+          <p className="mt-3 text-sm text-gray-500 dark:text-gray-400">No previous records found for VIN {ro.vin}.</p>
+        </div>
+      ) : (
+        <div className="space-y-3">
+          {historyData.map((item) => (
+            <div key={`${item.type}-${item.id}`} className="rounded-xl border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-gray-900">
+              <div className="flex items-start justify-between gap-3">
+                <div className="min-w-0 flex-1">
+                  <div className="flex flex-wrap items-center gap-2">
+                    <span className={`rounded-full px-2 py-0.5 text-xs font-medium ${item.type === 'ro' ? 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300' : 'bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-300'}`}>{item.type === 'ro' ? 'RO' : 'Quote'}</span>
+                    <span className="text-sm font-semibold text-gray-900 dark:text-gray-100">{item.title}</span>
+                    <StatusBadge status={item.status} config={statusConfig} />
+                  </div>
+                  {item.vehicleInfo && <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">{item.vehicleInfo}</p>}
+                  <p className="mt-1 text-xs text-gray-400">{formatDateTime(item.date)}</p>
+                </div>
+                <div className="text-right">
+                  <p className="text-sm font-semibold text-green-600 dark:text-green-400">{formatCurrency(item.total)}</p>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+
+  function formatFieldName(field: string): string {
+    return field
+      .replace(/([A-Z])/g, ' $1')
+      .replace(/^./, (s) => s.toUpperCase())
+      .trim();
+  }
+
+  const timelineContent = (
+    <div className="rounded-xl bg-white p-4 ring-1 ring-gray-200 dark:bg-gray-800 dark:ring-gray-700">
+      <h3 className="mb-2 text-sm font-semibold text-gray-700 dark:text-gray-300">Audit Timeline</h3>
+      {events.length === 0 ? (
+        <p className="text-sm text-gray-400">No recorded events.</p>
+      ) : (
+        <ol className="divide-y divide-gray-100 dark:divide-gray-700">
+          {events.map((ev) => <TimelineEntry key={ev.id} ev={ev} />)}
+        </ol>
+      )}
+
+      {financialAuditLoading ? (
+        <div className="mt-6 flex items-center justify-center py-4">
+          <Loader2 className="h-4 w-4 animate-spin text-gray-400" />
+        </div>
+      ) : financialAuditEntries.length > 0 && (
+        <div className="mt-6">
+          <h3 className="mb-3 text-sm font-semibold text-gray-700 dark:text-gray-300">Financial Audit Trail</h3>
+          <div className="space-y-2">
+            {financialAuditEntries.map((entry) => (
+              <div
+                key={entry.id}
+                className="rounded-lg border border-gray-200 bg-gray-50 p-3 text-sm dark:border-gray-700 dark:bg-gray-800/50"
+              >
+                <div className="flex flex-wrap items-center gap-1.5">
+                  <span className="rounded bg-blue-100 px-1.5 py-0.5 text-xs font-medium text-blue-700 dark:bg-blue-900/30 dark:text-blue-300">
+                    {formatFieldName(entry.field)}
+                  </span>
+                  <span className="text-xs text-gray-400">
+                    {formatDateTime(entry.at)}
+                  </span>
+                </div>
+                <div className="mt-1.5 flex flex-col gap-1">
+                  <div className="flex flex-wrap items-baseline gap-2">
+                    <span className="font-mono text-[11px] text-gray-500 bg-gray-100 rounded px-1.5 py-0.5 dark:bg-gray-700 dark:text-gray-400">
+                      {JSON.stringify(entry.from)}
+                    </span>
+                    <span className="text-gray-400">→</span>
+                    <span className="font-mono text-[11px] text-gray-700 bg-gray-100 rounded px-1.5 py-0.5 dark:bg-gray-700 dark:text-gray-300">
+                      {JSON.stringify(entry.to)}
+                    </span>
+                  </div>
+                  <div className="flex flex-wrap items-center gap-3 text-xs text-gray-400">
+                    {entry.by && <span>by {entry.by}</span>}
+                    <span
+                      className="font-mono text-[10px] text-gray-400 cursor-help"
+                      title={entry.hash}
+                    >
+                      #{entry.hash?.slice(0, 8)}...
+                    </span>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+
+  const activeTabContent = (() => {
+    switch (activeTab) {
+      case 'details': return detailsContent;
+      case 'services': return servicesContent;
+      case 'financial': return financialContent;
+      case 'history': return historyContent;
+      case 'timeline': return timelineContent;
+    }
+  })();
+
+  const content = (
+    <div className="flex h-full flex-col">
+      {/* Tab bar */}
+      <div className="flex items-center gap-1 border-b border-gray-200 bg-gray-50 p-2 dark:border-gray-700 dark:bg-gray-900">
+        <button onClick={closeModal}
+          className="mr-2 rounded-lg p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-600 dark:hover:bg-gray-800 dark:hover:text-gray-300">
+          <X className="h-4 w-4" />
+        </button>
+        <div className="flex gap-1">
+          {TABS.map((tab) => (
+            <button key={tab.id} onClick={() => setActiveTab(tab.id)}
+              className={`inline-flex items-center gap-1.5 rounded-lg px-3 py-2 text-sm font-medium transition-colors ${
+                activeTab === tab.id
+                  ? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400'
+                  : 'text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200'
+              }`}>
+              <tab.icon className="h-4 w-4" />
+              {tab.label}
+            </button>
+          ))}
+        </div>
+        {/* Status badge for reference */}
+        <div className="ml-auto flex items-center gap-2">
+          <span className="text-xs text-gray-400">{ro.roNumber || `#${ro.id.slice(0, 8)}`}</span>
+          <StatusBadge status={voided ? 'voided' : (ro.status || '')} config={statusConfig} />
+        </div>
+      </div>
+
+      {/* Tab content */}
+      <div className="flex-1 overflow-y-auto p-4">
+        {activeTabContent}
+      </div>
+    </div>
+  );
+
+  if (!isModal) {
+    return (
+      <div className="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
+        <div className="mb-8">
+          <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Repair Order Details</h1>
+          <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
+            <button onClick={closeModal} className="inline-flex items-center gap-1 text-blue-600 hover:underline"><ArrowLeft className="h-4 w-4" /> Back to Repair Orders</button>
+          </p>
+        </div>
+        {content}
+      </div>
+    );
+  }
+
+  return (
+    <div className="fixed inset-0 z-50">
+      <button type="button" aria-label="Close" className="absolute inset-0 bg-gray-950/45 backdrop-blur-sm" onClick={closeModal} />
+      <div className="absolute inset-0 flex items-center justify-center p-3 sm:p-6">
+        <div className="relative flex h-[min(92vh,56rem)] w-full max-w-7xl overflow-hidden rounded-3xl border border-gray-200 bg-gray-50 shadow-2xl dark:border-gray-700 dark:bg-gray-950">
+          <div className="flex-1 overflow-hidden">
+            {content}
+          </div>
+        </div>
+      </div>
+
+      <AddTimeModal
+        open={showAddTimeModal}
+        initialMinutes={15}
+        onCancel={() => setShowAddTimeModal(false)}
+        onConfirm={(totalMinutes) => { setShowAddTimeModal(false); if (totalMinutes > 0) handleAddTime(totalMinutes); }}
+      />
+    </div>
+  );
+}
diff --git a/src/pages/RepairOrders.tsx b/src/pages/RepairOrders.tsx
new file mode 100644
index 0000000..2061de7
--- /dev/null
+++ b/src/pages/RepairOrders.tsx
@@ -0,0 +1,943 @@
+import { useEffect, useState, useCallback, useRef, useMemo } from 'react';
+import { useNavigate, useLocation } from 'react-router-dom';
+import { pb } from '../lib/pocketbase';
+import {
+  Search,
+  X,
+  Plus,
+  Ban,
+  UserCheck,
+  Filter,
+  MapPin,
+} from 'lucide-react';
+import type { RepairOrder, ROService, CustomerType } from '../types';
+import { repairOrderWriteSchema } from '../schemas/repairOrder';
+import {
+  getStatusConfig,
+  statusLabelForBusiness,
+} from '../lib/status';
+import { formatCurrency, formatDateTime } from '../lib/format';
+import {
+  appendROEvent,
+  isVoided,
+  setVoided,
+} from '../lib/roEvents';
+import { useToast } from '../components/ui/Toast';
+import { getSetupRequiredMessage, isMissingCollectionError, logError } from '../lib/userMessages';
+import { useSettings } from '../store/settings';
+import type { TechnicianAssignment, TechnicianUser } from '../lib/technicianData';
+import { fetchAllAssignmentsForShop, fetchTechnicianUsers, syncAssignmentsForROServices } from '../lib/technicianData';
+import { usePagedList } from '../hooks/usePagedList';
+
+// Extracted components from the barrel
+import {
+  type TabId,
+  type CompletedRangeFilter,
+  type CompletedStatusFilter,
+  type CompletedRatingFilter,
+  type SavedView,
+  TABS,
+  loadSavedViews,
+  persistSavedViews,
+  TabButton,
+  LoadingSkeleton,
+  EmptyState,
+  ErrorState,
+  ROModal,
+  FragmentRow,
+  CompletedRow,
+  StatusBadge,
+  CustomerTypeBadge,
+  TimeRemainingCell,
+  RowProgressBar,
+} from '../components/repairOrders';
+
+// Pure helpers
+import {
+  normalizeRO,
+  sortOrders,
+  sortCompletedOrders,
+  getUrgencyClass,
+  displayCustomerName,
+  isWithinCompletedRange,
+  formatDueDateTime,
+  getCompletedMetricDate,
+  getStatusChips,
+  ratingLabel,
+} from '../lib/repairOrders';
+
+/* ── Main Repair Orders Component ───────────────────── */
+
+export default function RepairOrders() {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const { showToast } = useToast();
+
+  const [error, setError] = useState<string | null>(null);
+  const [activeTab, setActiveTab] = useState<TabId>('active');
+  const [searchQuery, setSearchQuery] = useState('');
+  const [showModal, setShowModal] = useState(false);
+  const [editRO, setEditRO] = useState<RepairOrder | null>(null);
+  const [now, setNow] = useState(Date.now());
+  const tickRef = useRef<ReturnType<typeof setInterval> | null>(null);
+  const [techAssignments, setTechAssignments] = useState<TechnicianAssignment[]>([]);
+  const [techUsers, setTechUsers] = useState<TechnicianUser[]>([]);
+  const [customers, setCustomers] = useState<import('./Customers').CustomerWithVehicles[]>([]);
+
+  // ── List-page filter state ──
+  const [statusChips, setStatusChips] = useState<string[]>([]);
+  const [waiterOnly, setWaiterOnly] = useState(false);
+  const [showVoided, setShowVoided] = useState(false);
+  const [completedRangeFilter, setCompletedRangeFilter] = useState<CompletedRangeFilter>('all');
+  const [completedStatusFilter, setCompletedStatusFilter] = useState<CompletedStatusFilter>('all');
+  const [completedRatingFilter, setCompletedRatingFilter] = useState<CompletedRatingFilter>('all');
+
+  // Saved views loaded once on mount.
+  const [savedViews, setSavedViews] = useState<SavedView[]>(() => loadSavedViews());
+  const [savedViewName, setSavedViewName] = useState('');
+
+  // ── Bulk selection ──
+  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
+
+  const settings = useSettings();
+  const statusConfig = useMemo(() => getStatusConfig(settings), [settings]);
+  const statusChipOptions = useMemo(() => getStatusChips(settings), [settings]);
+
+  const userId = pb.authStore.model?.id;
+
+  const fetchOrdersPage = useCallback(async (_page: number, perPage: number) => {
+    if (!userId) return { items: [], page: 1, perPage, totalItems: 0, totalPages: 1 };
+    const records = await pb.collection('repairOrders').getFullList({
+      filter: `userId = '${userId}'`,
+      sort: '-id',
+    });
+    return {
+      items: (records as any[]).map(normalizeRO),
+      page: 1,
+      perPage: 999999,
+      totalItems: records.length,
+      totalPages: 1,
+    };
+  }, [userId]);
+
+  const {
+    items: orders,
+    setItems: setOrders,
+    loading,
+    hasMore,
+    loadMore,
+    refresh: refreshOrders,
+    adjustTotal: adjustOrderTotal,
+    replaceItem: replaceOrderItem,
+    removeItem: removeOrderItem,
+  } = usePagedList<RepairOrder>(fetchOrdersPage, 50);
+
+  const existingRoNumbers = useMemo(
+    () => new Set(orders.map((o) => o.roNumber).filter(Boolean) as string[]),
+    [orders]
+  );
+
+  const ordersRef = useRef<RepairOrder[]>([]);
+  ordersRef.current = orders;
+
+  const fetchTechAssignments = useCallback(async () => {
+    if (!userId) return;
+    const [assignments, users] = await Promise.all([
+      fetchAllAssignmentsForShop(userId),
+      fetchTechnicianUsers(userId),
+    ]);
+    setTechAssignments(assignments);
+    setTechUsers(users);
+  }, [userId]);
+
+  useEffect(() => {
+    fetchTechAssignments();
+  }, [fetchTechAssignments]);
+
+  const fetchCustomers = useCallback(async () => {
+    if (!userId) return;
+    try {
+      const result = await pb.collection('customers').getList(1, 500, {
+        filter: `userId = '${userId}'`,
+        sort: 'name',
+        fields: 'id,name,phone,email,address,notes,userId,created,updated',
+      });
+      const list = result.items as unknown as import('./Customers').CustomerRecord[];
+      const enriched: import('./Customers').CustomerWithVehicles[] = list.map((c) => ({ ...c, vehicles: [], vehicleCount: 0 }));
+      setCustomers(enriched);
+    } catch { /* non-critical */ }
+  }, [userId]);
+
+  useEffect(() => {
+    fetchCustomers();
+  }, [fetchCustomers]);
+
+  const techAssignmentMap = useMemo(() => {
+    const map = new Map<string, TechnicianAssignment[]>();
+    for (const a of techAssignments) {
+      const existing = map.get(a.repairOrderId) ?? [];
+      existing.push(a);
+      map.set(a.repairOrderId, existing);
+    }
+    return map;
+  }, [techAssignments]);
+
+  const techNameById = useMemo(() => {
+    const map = new Map<string, string>();
+    for (const tech of techUsers) {
+      map.set(tech.id, tech.displayName || tech.email || 'Technician');
+    }
+    return map;
+  }, [techUsers]);
+
+  const techNamesByRO = useMemo(() => {
+    const map = new Map<string, string[]>();
+    for (const [roId, assignments] of techAssignmentMap.entries()) {
+      const names = assignments.map((a) => techNameById.get(a.technicianUserId) || 'Technician');
+      map.set(roId, Array.from(new Set(names)));
+    }
+    return map;
+  }, [techAssignmentMap, techNameById]);
+
+  // ── PocketBase realtime subscription ──────────────────────────────────────
+  useEffect(() => {
+    if (!userId) return;
+    let unsubRO: (() => Promise<void>) | null = null;
+    let unsubTA: (() => Promise<void>) | null = null;
+    let cancelled = false;
+    (async () => {
+      try {
+        unsubRO = await pb.collection('repairOrders').subscribe('*', (data: any) => {
+          if (cancelled) return;
+          const action = data.action;
+          const record = data.record;
+          if (!record) return;
+          if (record.userId && record.userId !== userId) return;
+          if (action === 'delete') {
+            removeOrderItem(record.id, (o) => o.id);
+            adjustOrderTotal(-1);
+            return;
+          }
+          const norm = normalizeRO(record) as unknown as RepairOrder;
+          replaceOrderItem(record.id, norm, (o) => o.id);
+          // If it's a new insert (didn't exist in window), prepend
+          setOrders((prev) => {
+            if (prev.some((o) => o.id === record.id)) return prev;
+            adjustOrderTotal(1);
+            return [norm, ...prev];
+          });
+        });
+      } catch (e) {
+        console.warn('RO realtime subscribe failed, polling every 30s', e);
+      }
+    })();
+
+    (async () => {
+      try {
+        unsubTA = await pb.collection('technicianAssignments').subscribe('*', () => {
+          if (!cancelled) fetchTechAssignments();
+        });
+      } catch {
+        // non-critical
+      }
+    })();
+
+    return () => {
+      cancelled = true;
+      if (unsubRO) unsubRO().catch(() => {});
+      if (unsubTA) unsubTA().catch(() => {});
+    };
+  }, [userId, fetchTechAssignments, removeOrderItem, adjustOrderTotal, replaceOrderItem, setOrders]);
+
+  // Live countdown tick
+  useEffect(() => {
+    const tick = () => {
+      const ts = Date.now();
+      const minuteBucket = Math.floor(ts / 60000);
+      setNow((prev) => (Math.floor(prev / 60000) === minuteBucket ? prev : ts));
+    };
+    tickRef.current = setInterval(tick, 30000);
+    return () => { if (tickRef.current) clearInterval(tickRef.current); };
+  }, []);
+
+  /* ── Customer Type Toggle (list row badge) ────────────────────────────── */
+
+  const handleToggleCustomerType = useCallback(
+    (id: string, currentType?: CustomerType) => {
+      const newType: CustomerType = currentType === 'waiter' ? 'drop-off' : 'waiter';
+      const confirmed = window.confirm(
+        `Are you sure you want to change this customer to "${newType === 'waiter' ? 'Waiter' : 'Drop-Off'}"?`
+      );
+      if (!confirmed) return;
+
+      setOrders((prev) =>
+        prev.map((o) => (o.id === id ? { ...o, customerType: newType } : o))
+      );
+
+      const ro = ordersRef.current.find((o) => o.id === id);
+      let financial: Record<string, any> = {};
+      if (ro?.financial) {
+        try { financial = typeof ro.financial === 'string' ? JSON.parse(ro.financial) : ro.financial; } catch (err) { logError('Failed to parse RO financial blob', err); }
+      }
+      financial.customerType = newType;
+      pb.collection('repairOrders')
+        .update(id, { financial: JSON.stringify(financial), customerType: newType })
+        .catch(() => {
+          setOrders((prev) =>
+            prev.map((o) => (o.id === id ? { ...o, customerType: currentType } : o))
+          );
+        });
+    },
+    [setOrders]
+  );
+
+  /* ── Filter & sort ───────────────────────────────────────────────────── */
+
+  const filteredOrders = useMemo(() => {
+    const filtered = orders.filter((ro) => {
+      const voided = isVoided(ro);
+      if (voided && !showVoided) return false;
+      if (!voided && showVoided) return false;
+
+      if (statusChips.length > 0 && !statusChips.includes(ro.status || '')) return false;
+
+      if (waiterOnly && ro.customerType !== 'waiter') return false;
+
+      if (activeTab === 'active') {
+        if (ro.status === 'completed' || ro.status === 'final_close' || ro.status === 'delivered') return false;
+      } else if (activeTab === 'completed') {
+        if (ro.status !== 'completed' && ro.status !== 'final_close' && ro.status !== 'delivered') return false;
+        if (completedStatusFilter !== 'all' && ro.status !== completedStatusFilter) return false;
+        if (!isWithinCompletedRange(ro, completedRangeFilter)) return false;
+        if (completedRatingFilter === 'rated' && !ro.satisfaction) return false;
+        if (completedRatingFilter === 'unrated' && ro.satisfaction) return false;
+      }
+
+      if (searchQuery.trim()) {
+        const q = searchQuery.toLowerCase();
+        const name = (ro.customerName || '').toLowerCase();
+        const roNum = (ro.roNumber || '').toLowerCase();
+        const vehicle = (ro.vehicleInfo || '').toLowerCase();
+        const vin = (ro.vin || '').toLowerCase();
+        const advisor = (ro.advisorName || '').toLowerCase();
+        const location = (ro.serviceLocation || '').toLowerCase();
+        const tripMiles = ro.tripMiles ? String(ro.tripMiles) : '';
+        if (
+          !name.includes(q) && !roNum.includes(q) && !vehicle.includes(q) &&
+          !vin.includes(q) && !advisor.includes(q) && !location.includes(q) &&
+          !tripMiles.includes(q)
+        ) {
+          return false;
+        }
+      }
+      return true;
+    });
+    return activeTab === 'completed' ? sortCompletedOrders(filtered) : sortOrders(filtered);
+  }, [orders, activeTab, searchQuery, statusChips, waiterOnly, showVoided, completedRangeFilter, completedStatusFilter, completedRatingFilter]);
+
+  const activeCount = orders.filter(
+    (ro) => !isVoided(ro) && ro.status !== 'completed' && ro.status !== 'final_close' && ro.status !== 'delivered'
+  ).length;
+  const completedCount = orders.filter(
+    (ro) => !isVoided(ro) && (ro.status === 'completed' || ro.status === 'final_close' || ro.status === 'delivered')
+  ).length;
+
+  const completedSummary = useMemo(() => {
+    const completedOrders = orders.filter(
+      (ro) => !isVoided(ro) && (ro.status === 'completed' || ro.status === 'final_close' || ro.status === 'delivered')
+    );
+    const rated = completedOrders.filter((ro) => ro.satisfaction);
+    return {
+      total: completedOrders.length,
+      today: completedOrders.filter((ro) => isWithinCompletedRange(ro, 'today')).length,
+      finalClose: completedOrders.filter((ro) => ro.status === 'final_close' || ro.status === 'delivered').length,
+      avgRating: rated.length > 0
+        ? rated.reduce((sum, ro) => sum + (ro.satisfaction || 0), 0) / rated.length
+        : 0,
+    };
+  }, [orders]);
+
+  /* ── CRUD handlers ───────────────────────────────────────────────────── */
+
+  const handleSave = async (data: Partial<RepairOrder>) => {
+    const parsed = repairOrderWriteSchema.safeParse(data);
+    if (!parsed.success) {
+      showToast(parsed.error.issues[0].message, 'error');
+      return;
+    }
+    try {
+      const { estimatedDuration, customerType, ...rest } = data;
+      const payload: Record<string, any> = {
+        ...rest,
+        userId,
+        services: JSON.stringify(data.services || []),
+        estimatedTime: estimatedDuration != null ? (estimatedDuration / 60).toFixed(1) : '',
+      };
+      if (customerType) {
+        let existingBlob: Record<string, any> = {};
+        if (editRO) {
+          const existingFin = editRO.financial;
+          if (typeof existingFin === 'string') {
+            try { existingBlob = JSON.parse(existingFin); } catch (err) { logError('Failed to parse existing financial blob', err); }
+          } else if (typeof existingFin === 'object' && existingFin) {
+            existingBlob = existingFin as Record<string, any>;
+          }
+        }
+        payload.financial = JSON.stringify({ ...existingBlob, customerType });
+      }
+
+      if (editRO) {
+        await pb.collection('repairOrders').update(editRO.id, payload);
+        await syncAssignmentsForROServices(editRO.id, (data.services || []) as ROService[]);
+        showToast('Repair order updated.', 'success');
+      } else {
+        const created = await pb.collection('repairOrders').create(payload);
+        if (created?.id) {
+          try { await appendROEvent(created.id, 'created', {}); } catch (err) { logError('Failed to append RO created event', err); showToast('Saved, but the timeline event could not be recorded.', 'error'); }
+        }
+        showToast('Repair order created.', 'success');
+      }
+
+      refreshOrders();
+    } catch (err) {
+      logError('Failed to save repair order', err);
+      if (isMissingCollectionError(err)) {
+        throw new Error(getSetupRequiredMessage());
+      }
+      throw new Error('Repair order could not be saved. Please try again.');
+    }
+  };
+
+  const handleOpenCreate = () => {
+    setEditRO(null);
+    setShowModal(true);
+  };
+
+  const handleStatusChange = async (id: string, status: RepairOrder['status']) => {
+    const prev = ordersRef.current.find((o) => o.id === id);
+    if (!prev) return;
+
+    const prevStatus = prev.status;
+    const prevServices = prev.services || [];
+    const prevCompletedTime = prev.completedTime || prev.completedDate;
+
+    let updatedServices: ROService[] | undefined;
+    let updatedCompletedTime: string | undefined;
+
+    if (status === 'completed') {
+      updatedCompletedTime = new Date().toISOString();
+      const allDone = prevServices.every((s: ROService) => s.status === 'completed');
+      if (!allDone) {
+        updatedServices = prevServices.map((s: ROService) => ({ ...s, status: 'completed' as const })) as ROService[];
+      }
+    } else if (status === 'waiting_pickup' || status === 'active' || status === 'in_progress' || status === 'waiting_parts') {
+      updatedCompletedTime = '';
+    }
+
+    // Optimistic local update
+    setOrders((prevOrders) =>
+      prevOrders.map((o) => {
+        if (o.id !== id) return o;
+        return { ...o, status, completedTime: updatedCompletedTime, completedDate: updatedCompletedTime, services: updatedServices ?? o.services };
+      })
+    );
+
+    const update: Partial<RepairOrder> = { status };
+    if (updatedCompletedTime !== undefined) update.completedTime = updatedCompletedTime;
+    if (updatedServices) update.services = updatedServices;
+
+    const linkedAppointmentStatus =
+      status === 'completed' || status === 'final_close' || status === 'delivered'
+        ? 'completed'
+        : 'checked_in';
+
+    try {
+      await pb.collection('repairOrders').update(id, update);
+      try {
+        const linkedAppointment = await pb.collection('appointments').getFirstListItem(
+          `repairOrderId = '${id}' && userId = '${userId}'`
+        );
+        if (linkedAppointment?.status !== linkedAppointmentStatus) {
+          await pb.collection('appointments').update(linkedAppointment.id, { status: linkedAppointmentStatus });
+        }
+      } catch {
+        // Not every RO originates from an appointment.
+      }
+      try { await appendROEvent(id, 'status', { from: prevStatus, to: status }); } catch (err) { logError('Failed to append RO status event', err); showToast('Saved, but the timeline event could not be recorded.', 'error'); }
+    } catch (err) {
+      // Rollback on failure
+      setOrders((prevOrders) =>
+        prevOrders.map((o) => {
+          if (o.id !== id) return o;
+          return { ...o, status: prevStatus, completedTime: prevCompletedTime, completedDate: prevCompletedTime, services: prevServices as ROService[] };
+        })
+      );
+      logError('Failed to update repair order status', err);
+      if (isMissingCollectionError(err)) {
+        setError(getSetupRequiredMessage());
+      } else {
+        showToast('Repair order status could not be updated. Please try again.', 'error');
+      }
+    }
+  };
+
+  /* ── Bulk selection helpers ──────────────────────────────────────────── */
+
+  const toggleSelect = (id: string) => {
+    setSelectedIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  };
+  const selectAllVisible = () => setSelectedIds(new Set(filteredOrders.map((o) => o.id)));
+  const clearSelection = () => setSelectedIds(new Set());
+
+  const bulkStatusChange = async (status: RepairOrder['status']) => {
+    const ids = Array.from(selectedIds);
+    showToast(`Updating ${ids.length} RO(s) to ${statusLabelForBusiness(status, settings)}…`, 'info');
+    let failed = 0;
+    for (const id of ids) {
+      try {
+        await handleStatusChange(id, status);
+      } catch { failed++; }
+    }
+    if (failed === 0) showToast(`Marked ${ids.length} RO(s) as ${statusLabelForBusiness(status, settings)}.`, 'success');
+    else showToast(`${ids.length - failed} updated, ${failed} failed.`, 'error');
+    clearSelection();
+  };
+
+  const bulkVoid = async () => {
+    if (!window.confirm(`Void ${selectedIds.size} selected RO(s)? This is reversible from each RO's Details page.`)) return;
+    const ids = Array.from(selectedIds);
+    for (const id of ids) { try { await setVoided(id, true); } catch {} }
+    refreshOrders();
+    clearSelection();
+    showToast(`Voided ${ids.length} RO(s).`, 'success');
+  };
+
+  /* ── Saved-view helpers ──────────────────────────────────────────────── */
+
+  const saveCurrentView = () => {
+    const name = savedViewName.trim();
+    if (!name) { showToast('Enter a name for the saved view first.', 'error'); return; }
+    const view: SavedView = {
+      id: `${Date.now()}-${Math.random().toString(36).slice(2, 6)}`,
+      label: name,
+      statusChips: [...statusChips],
+      waiterOnly,
+      showVoided,
+      search: searchQuery,
+    };
+    const next = [...savedViews.filter((v) => v.label !== name), view];
+    setSavedViews(next);
+    persistSavedViews(next);
+    setSavedViewName('');
+    showToast(`Saved view "${name}".`, 'success');
+  };
+  const applySavedView = (v: SavedView) => {
+    setStatusChips(v.statusChips);
+    setWaiterOnly(v.waiterOnly);
+    setShowVoided(v.showVoided);
+    setSearchQuery(v.search);
+    showToast(`Loaded view "${v.label}".`, 'info');
+  };
+  const deleteSavedView = (id: string) => {
+    const next = savedViews.filter((v) => v.id !== id);
+    setSavedViews(next);
+    persistSavedViews(next);
+  };
+
+  const toggleStatusChip = (value: string) => {
+    setStatusChips((prev) =>
+      prev.includes(value) ? prev.filter((v) => v !== value) : [...prev, value]
+    );
+  };
+
+  /* ── Render: List ────────────────────────────────────────────────────── */
+
+  const mainContent = (
+    <>
+      {/* Tabs + Search + Create */}
+      <div className="mb-4 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+        <div className="flex items-center gap-2">
+          {TABS.map((tab) => (
+            <TabButton
+              key={tab.id}
+              tab={tab.id}
+              active={activeTab === tab.id}
+              count={
+                tab.id === 'active' ? activeCount
+                : tab.id === 'completed' ? completedCount
+                : undefined
+              }
+              onClick={() => { setActiveTab(tab.id); clearSelection(); }}
+            />
+          ))}
+        </div>
+        <div className="flex items-center gap-3">
+          <div className="relative">
+            <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400" />
+            <input
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              placeholder="Search name, RO#, vehicle, VIN, advisor, location..."
+              className="w-64 rounded-lg border border-gray-300 bg-white py-2 pl-10 pr-4 text-sm dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400"
+            />
+            {searchQuery && (
+              <button
+                onClick={() => setSearchQuery('')}
+                className="absolute right-2 top-1/2 -translate-y-1/2 rounded p-0.5 text-gray-400 hover:text-gray-600"
+              >
+                <X className="h-4 w-4" />
+              </button>
+            )}
+          </div>
+          <button
+            onClick={handleOpenCreate}
+            className="inline-flex items-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white shadow-sm transition-colors hover:bg-blue-700"
+          >
+            <Plus className="h-4 w-4" />
+            New RO
+          </button>
+        </div>
+      </div>
+
+      {/* Filter bar */}
+      <div className="mb-4 flex flex-wrap items-center gap-2 rounded-lg border border-gray-200 bg-white p-3 text-sm dark:border-gray-700 dark:bg-gray-800">
+        <Filter className="h-4 w-4 text-gray-400" />
+        {statusChipOptions.map((chip) => {
+          const active = statusChips.includes(chip.value);
+          return (
+            <button
+              key={chip.value}
+              onClick={() => toggleStatusChip(chip.value)}
+              className={`rounded-full px-2.5 py-1 text-xs font-medium transition ${
+                active
+                  ? 'ring-2 ' + chip.colors
+                  : 'bg-gray-100 text-gray-500 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-400'
+              }`}
+            >
+              {chip.label}
+            </button>
+          );
+        })}
+        <span className="mx-1 h-4 w-px bg-gray-200 dark:bg-gray-700" />
+        <label className="inline-flex cursor-pointer items-center gap-1.5 text-xs text-gray-600 dark:text-gray-400">
+          <input type="checkbox" checked={waiterOnly} onChange={(e) => setWaiterOnly(e.target.checked)} className="rounded border-gray-300 text-purple-600 focus:ring-purple-500" />
+          <UserCheck className="h-3.5 w-3.5 text-purple-500" /> Waiters only
+        </label>
+        <label className="inline-flex cursor-pointer items-center gap-1.5 text-xs text-gray-600 dark:text-gray-400">
+          <input type="checkbox" checked={showVoided} onChange={(e) => setShowVoided(e.target.checked)} className="rounded border-gray-300 text-red-600 focus:ring-red-500" />
+          <Ban className="h-3.5 w-3.5 text-red-500" /> Show voided
+        </label>
+        <span className="mx-1 h-4 w-px bg-gray-200 dark:bg-gray-700" />
+        <span className="text-xs text-gray-500 dark:text-gray-400">Views:</span>
+        {savedViews.map((v) => (
+          <span key={v.id} className="inline-flex items-center gap-1 rounded-full bg-blue-50 px-2 py-0.5 text-xs text-blue-700 dark:bg-blue-900/30 dark:text-blue-300">
+            <button onClick={() => applySavedView(v)} className="hover:underline">{v.label}</button>
+            <button onClick={() => deleteSavedView(v.id)} className="text-blue-400 hover:text-red-500" title="Delete saved view">×</button>
+          </span>
+        ))}
+        <input
+          value={savedViewName}
+          onChange={(e) => setSavedViewName(e.target.value)}
+          placeholder="Save as…"
+          className="w-24 rounded border border-gray-300 bg-white px-2 py-1 text-xs dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100"
+        />
+        <button
+          onClick={saveCurrentView}
+          className="rounded border border-gray-300 bg-white px-2 py-1 text-xs text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300"
+        >Save</button>
+      </div>
+
+      {activeTab === 'completed' && (
+        <div className="mb-4 space-y-4">
+          <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-4">
+            <div className="rounded-xl bg-white p-4 ring-1 ring-gray-200 dark:bg-gray-800 dark:ring-gray-700">
+              <p className="text-xs font-medium text-gray-500 dark:text-gray-400">Completed/Final Close</p>
+              <p className="mt-1 text-2xl font-bold text-gray-900 dark:text-white">{completedSummary.total}</p>
+            </div>
+            <div className="rounded-xl bg-white p-4 ring-1 ring-gray-200 dark:bg-gray-800 dark:ring-gray-700">
+              <p className="text-xs font-medium text-gray-500 dark:text-gray-400">Completed Today</p>
+              <p className="mt-1 text-2xl font-bold text-green-600 dark:text-green-400">{completedSummary.today}</p>
+            </div>
+            <div className="rounded-xl bg-white p-4 ring-1 ring-gray-200 dark:bg-gray-800 dark:ring-gray-700">
+              <p className="text-xs font-medium text-gray-500 dark:text-gray-400">Final Close</p>
+              <p className="mt-1 text-2xl font-bold text-gray-900 dark:text-white">{completedSummary.finalClose}</p>
+            </div>
+            <div className="rounded-xl bg-white p-4 ring-1 ring-gray-200 dark:bg-gray-800 dark:ring-gray-700">
+              <p className="text-xs font-medium text-gray-500 dark:text-gray-400">Avg Rating</p>
+              <p className="mt-1 text-2xl font-bold text-yellow-500">
+                {completedSummary.avgRating > 0 ? completedSummary.avgRating.toFixed(1) : '—'}
+              </p>
+            </div>
+          </div>
+
+          <div className="flex flex-wrap items-center gap-2 rounded-lg border border-gray-200 bg-white p-3 text-sm dark:border-gray-700 dark:bg-gray-800">
+            <span className="text-xs font-medium text-gray-500 dark:text-gray-400">Completed filters:</span>
+            {([
+              ['all', 'All'],
+              ['today', 'Today'],
+              ['this_week', 'This Week'],
+              ['this_month', 'This Month'],
+            ] as [CompletedRangeFilter, string][]).map(([value, label]) => (
+              <button
+                key={value}
+                onClick={() => setCompletedRangeFilter(value)}
+                className={`rounded-full px-2.5 py-1 text-xs font-medium transition ${
+                  completedRangeFilter === value
+                    ? 'bg-blue-100 text-blue-800 ring-2 ring-blue-300 dark:bg-blue-900/40 dark:text-blue-300 dark:ring-blue-700'
+                    : 'bg-gray-100 text-gray-500 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-400'
+                }`}
+              >
+                {label}
+              </button>
+            ))}
+            <span className="mx-1 h-4 w-px bg-gray-200 dark:bg-gray-700" />
+            {([
+              ['all', 'Any Status'],
+              ['completed', 'Completed'],
+              ['final_close', 'Final Close'],
+            ] as [CompletedStatusFilter, string][]).map(([value, label]) => (
+              <button
+                key={value}
+                onClick={() => setCompletedStatusFilter(value)}
+                className={`rounded-full px-2.5 py-1 text-xs font-medium transition ${
+                  completedStatusFilter === value
+                    ? 'bg-green-100 text-green-800 ring-2 ring-green-300 dark:bg-green-900/40 dark:text-green-300 dark:ring-green-700'
+                    : 'bg-gray-100 text-gray-500 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-400'
+                }`}
+              >
+                {label}
+              </button>
+            ))}
+            <span className="mx-1 h-4 w-px bg-gray-200 dark:bg-gray-700" />
+            {([
+              ['all', 'Any Rating'],
+              ['rated', 'Rated'],
+              ['unrated', 'Unrated'],
+            ] as [CompletedRatingFilter, string][]).map(([value, label]) => (
+              <button
+                key={value}
+                onClick={() => setCompletedRatingFilter(value)}
+                className={`rounded-full px-2.5 py-1 text-xs font-medium transition ${
+                  completedRatingFilter === value
+                    ? 'bg-yellow-100 text-yellow-800 ring-2 ring-yellow-300 dark:bg-yellow-900/40 dark:text-yellow-300 dark:ring-yellow-700'
+                    : 'bg-gray-100 text-gray-500 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-400'
+                }`}
+              >
+                {label}
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Bulk action bar */}
+      {selectedIds.size > 0 && (
+        <div className="sticky top-0 z-20 mb-3 flex flex-wrap items-center gap-2 rounded-lg border border-blue-300 bg-blue-50 p-3 text-sm shadow-sm dark:border-blue-700 dark:bg-blue-900/30">
+          <span className="font-medium text-blue-700 dark:text-blue-300">{selectedIds.size} selected</span>
+          <button onClick={selectAllVisible} className="rounded border border-blue-300 bg-white px-2 py-1 text-xs text-blue-700 hover:bg-blue-100 dark:border-blue-700 dark:bg-blue-900/30 dark:text-blue-300">Select all visible</button>
+          <button onClick={clearSelection} className="rounded border border-gray-300 bg-white px-2 py-1 text-xs text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300">Clear</button>
+          <span className="mx-1 h-4 w-px bg-blue-200 dark:bg-blue-800" />
+          <span className="text-xs text-gray-500 dark:text-gray-400">Bulk:</span>
+          {activeTab !== 'completed' && (
+            <button onClick={() => bulkStatusChange('completed')} className="rounded border border-green-300 bg-white px-2 py-1 text-xs text-green-700 hover:bg-green-50 dark:border-green-700 dark:bg-green-900/20 dark:text-green-300">Mark Complete</button>
+          )}
+          <button onClick={() => bulkStatusChange('final_close')} className="rounded border border-gray-300 bg-white px-2 py-1 text-xs text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300">Final Close</button>
+          <button onClick={() => bulkStatusChange('active')} className="rounded border border-blue-300 bg-white px-2 py-1 text-xs text-blue-700 hover:bg-blue-50 dark:border-blue-700 dark:bg-blue-900/20 dark:text-blue-300">Reopen</button>
+          <button onClick={bulkVoid} className="inline-flex items-center gap-1 rounded border border-red-300 bg-white px-2 py-1 text-xs text-red-700 hover:bg-red-50 dark:border-red-700 dark:bg-red-900/20 dark:text-red-300">
+            <Ban className="h-3 w-3" /> Void
+          </button>
+        </div>
+      )}
+
+      {loading && <LoadingSkeleton />}
+      {!loading && error && <ErrorState message={error} onRetry={refreshOrders} />}
+
+      {!loading && !error && (
+        <>
+          {filteredOrders.length === 0 ? (
+            <EmptyState tab={activeTab} onCreate={handleOpenCreate} />
+          ) : (
+            <div className="rounded-xl bg-white ring-1 ring-gray-200 dark:bg-gray-800 dark:ring-gray-700">
+              {/* Desktop table */}
+              <div className="hidden overflow-x-auto xl:block">
+                <table className="w-full text-left text-xs">
+                  <thead>
+                    {activeTab === 'completed' ? (
+                      <tr className="border-b border-gray-200 text-xs uppercase tracking-wide text-gray-500 dark:border-gray-700 dark:text-gray-400">
+                        <th className="px-2 py-2" />
+                        <th className="px-3 py-2 font-medium">RO #</th>
+                        <th className="px-3 py-2 font-medium">Customer</th>
+                        <th className="px-3 py-2 font-medium">Vehicle</th>
+                        <th className="px-3 py-2 font-medium">Completed</th>
+                        <th className="px-3 py-2 font-medium">Status</th>
+                        <th className="px-3 py-2 font-medium">Total</th>
+                        <th className="px-3 py-2 font-medium">Rating</th>
+                        <th className="px-3 py-2 font-medium">Tech</th>
+                        <th className="w-10 px-3 py-2" />
+                      </tr>
+                    ) : (
+                      <tr className="border-b border-gray-200 text-xs uppercase tracking-wide text-gray-500 dark:border-gray-700 dark:text-gray-400">
+                        <th className="px-2 py-2" />
+                        <th className="px-3 py-2 font-medium">RO #</th>
+                        <th className="px-3 py-2 font-medium">Customer</th>
+                        <th className="px-3 py-2 font-medium">Vehicle</th>
+                        <th className="px-3 py-2 font-medium">Status</th>
+                        <th className="px-3 py-2 font-medium">Write-up</th>
+                        <th className="px-3 py-2 font-medium">Promised</th>
+                        <th className="px-3 py-2 font-medium">Remaining</th>
+                        <th className="px-3 py-2 font-medium">Progress</th>
+                        <th className="px-3 py-2 font-medium">Tech</th>
+                        <th className="w-10 px-3 py-2" />
+                      </tr>
+                    )}
+                  </thead>
+                  <tbody className="divide-y divide-gray-200 dark:divide-gray-700">
+                    {filteredOrders.map((ro) => activeTab === 'completed' ? (
+                      <CompletedRow
+                        key={ro.id}
+                        ro={ro}
+                        selected={selectedIds.has(ro.id)}
+                        onToggleSelect={() => toggleSelect(ro.id)}
+                        onOpen={() => navigate(`/repair-orders/${ro.id}`, { state: { backgroundLocation: location } })}
+                        onToggleCustomerType={handleToggleCustomerType}
+                        techNames={techNamesByRO.get(ro.id) ?? []}
+                      />
+                    ) : (
+                      <FragmentRow
+                        key={ro.id}
+                        ro={ro}
+                        now={now}
+                        selected={selectedIds.has(ro.id)}
+                        onToggleSelect={() => toggleSelect(ro.id)}
+                        onOpen={() => navigate(`/repair-orders/${ro.id}`, { state: { backgroundLocation: location } })}
+                        onToggleCustomerType={handleToggleCustomerType}
+                        techNames={techNamesByRO.get(ro.id) ?? []}
+                      />
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+
+              {/* Cards (tablet / narrow) */}
+              <div className="divide-y divide-gray-200 dark:divide-gray-700 xl:hidden">
+                {filteredOrders.map((ro) => {
+                  const urgency = getUrgencyClass(ro, now);
+                  const voided = isVoided(ro);
+                  const cardClass = voided ? 'opacity-50' : urgency === 'urgent' ? 'bg-red-50 dark:bg-red-900/15' : '';
+                  const completedDate = getCompletedMetricDate(ro);
+                  const roTechNames = techNamesByRO.get(ro.id) ?? [];
+                  return (
+                    <div key={ro.id} className={`flex items-start gap-2 ${cardClass}`}>
+                      <button
+                        onClick={(e) => { e.stopPropagation(); toggleSelect(ro.id); }}
+                        className="mt-4 ml-3 text-gray-400 hover:text-blue-600 dark:hover:text-blue-400"
+                      >
+                        {selectedIds.has(ro.id)
+                          ? <span className="h-4 w-4 rounded bg-blue-600" />
+                          : <span className="inline-block h-4 w-4 rounded border border-gray-400" />}
+                      </button>
+                      <div
+                        onClick={() => navigate(`/repair-orders/${ro.id}`, { state: { backgroundLocation: location } })}
+                        className="flex-1 cursor-pointer px-5 py-4 transition-colors hover:bg-gray-50 dark:hover:bg-gray-700/50"
+                      >
+                        <div className="mb-1 flex items-center justify-between">
+                          <span className="font-mono text-xs text-gray-400">{ro.roNumber || ro.id.slice(0, 8)}</span>
+                          <div className="flex items-center gap-2">
+                            {roTechNames.length > 0 && (
+                              <span className="max-w-[10rem] truncate rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-700 dark:bg-green-900/30 dark:text-green-400" title={roTechNames.join(', ')}>
+                                {roTechNames.join(', ')}
+                              </span>
+                            )}
+                            <StatusBadge status={voided ? 'voided' : (ro.status || '')} config={statusConfig} />
+                          </div>
+                        </div>
+                        <div className="flex items-center gap-2">
+                          <p className="font-medium text-gray-900 dark:text-white">{displayCustomerName(ro.customerName)}</p>
+                          <CustomerTypeBadge customerType={ro.customerType} onClick={() => handleToggleCustomerType(ro.id, ro.customerType)} />
+                        </div>
+                        <p className="mt-0.5 text-sm text-gray-500 dark:text-gray-400">
+                          {ro.vehicleInfo || '—'} &middot; {activeTab === 'completed'
+                            ? `Completed: ${completedDate ? formatDateTime(completedDate) : '—'}`
+                            : formatDateTime(ro.writeupTime || ro.created)}
+                        </p>
+                        {ro.serviceLocation && (
+                          <p className="mt-1 inline-flex items-center gap-1 text-xs text-sky-600 dark:text-sky-400">
+                            <MapPin className="h-3.5 w-3.5" />
+                            <span className="truncate">{ro.serviceLocation}</span>
+                          </p>
+                        )}
+                        {typeof ro.tripMiles === 'number' && ro.tripMiles > 0 && (
+                          <p className="mt-1 text-xs text-purple-600 dark:text-purple-400">
+                            {ro.tripMiles} trip mi
+                          </p>
+                        )}
+                        {roTechNames.length > 0 && (
+                          <p className="mt-1 text-xs text-green-700 dark:text-green-400">
+                            Tech: {roTechNames.join(', ')}
+                          </p>
+                        )}
+                        {activeTab === 'completed' ? (
+                          <div className="mt-1 flex items-center justify-between text-xs text-gray-500 dark:text-gray-400">
+                            <span>{formatCurrency(ro.total || 0)}</span>
+                            <span>{ratingLabel(ro.satisfaction)}</span>
+                          </div>
+                        ) : (
+                          <>
+                            <p className="text-xs text-gray-400 dark:text-gray-500">Due: {formatDueDateTime(ro)}</p>
+                            <div className="mt-1 flex items-center justify-between">
+                              <TimeRemainingCell ro={ro} now={now} />
+                              <RowProgressBar ro={ro} />
+                            </div>
+                          </>
+                        )}
+                      </div>
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+          )}
+          {hasMore && (
+            <div className="mt-4 flex justify-center">
+              <button
+                onClick={loadMore}
+                disabled={loading}
+                className="rounded-lg border border-gray-300 bg-white px-6 py-2 text-sm font-medium text-gray-700 shadow-sm transition-colors hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-60 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
+              >
+                {loading ? 'Loading…' : 'Load more'}
+              </button>
+            </div>
+          )}
+        </>
+      )}
+    </>
+  );
+
+  return (
+    <div className="px-4 py-8 sm:px-6 lg:px-8">
+      <div className="mb-8">
+        <h1 className="text-xl font-bold text-gray-900 dark:text-white">Repair Orders</h1>
+        <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
+          Manage active repair orders, track services, and update statuses.
+        </p>
+      </div>
+
+      {mainContent}
+
+      <ROModal
+        isOpen={showModal}
+        onClose={() => { setShowModal(false); setEditRO(null); }}
+        onSave={handleSave}
+        existingRoNumbers={existingRoNumbers}
+        settings={settings}
+        editRO={editRO}
+        customers={customers}
+      />
+    </div>
+  );
+}
diff --git a/src/pages/ServiceCatalog.tsx b/src/pages/ServiceCatalog.tsx
new file mode 100644
index 0000000..ff134cd
--- /dev/null
+++ b/src/pages/ServiceCatalog.tsx
@@ -0,0 +1,414 @@
+import { useCallback, useEffect, useState } from 'react';
+import { pb } from '../lib/pocketbase';
+import type { ServiceItem } from '../types';
+import { useToast } from '../components/ui/Toast';
+import { Search, Plus, Edit3, Trash2, ToggleLeft, ToggleRight, Wrench, DollarSign, Package, Tag, Check, X, Layers, Sparkles, Loader2 } from 'lucide-react';
+import { aiWriteCatalogDescription } from '../lib/ai';
+import { logError } from '../lib/userMessages';
+import { ListSkeleton } from '../components/ui/ListSkeleton';
+import { ListError } from '../components/ui/ListError';
+
+type ServicePricingMode = 'full' | 'split';
+
+type ServiceFormState = {
+  name: string;
+  category: string;
+  description: string;
+  pricingMode: ServicePricingMode;
+  fullPrice: number;
+  laborPrice: number;
+  partsPrice: number;
+};
+
+function getServiceLaborPrice(service: Pick<ServiceItem, 'laborHours' | 'laborRate'>): number {
+  return (Number(service.laborHours) || 0) * (Number(service.laborRate) || 0);
+}
+
+function getServicePricingMode(service: Pick<ServiceItem, 'laborHours' | 'laborRate' | 'partsCost'>): ServicePricingMode {
+  return getServiceLaborPrice(service) > 0 || (Number(service.partsCost) || 0) > 0 ? 'split' : 'full';
+}
+
+function createEmptyServiceForm(): ServiceFormState {
+  return {
+    name: '',
+    category: '',
+    description: '',
+    pricingMode: 'full',
+    fullPrice: 0,
+    laborPrice: 0,
+    partsPrice: 0,
+  };
+}
+
+function FormField({ label, children }: { label: string; children: React.ReactNode }) {
+  return (
+    <div className="space-y-1.5">
+      <label className="block text-sm font-medium text-gray-700 dark:text-gray-300">{label}</label>
+      {children}
+    </div>
+  );
+}
+
+function Input({ value, onChange, placeholder, type = 'text', icon }: { value: string | number; onChange: (value: string) => void; placeholder?: string; type?: string; icon?: React.ReactNode }) {
+  return (
+    <div className="relative">
+      {icon && <span className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-gray-400">{icon}</span>}
+      <input
+        type={type}
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        placeholder={placeholder}
+        className={`w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 placeholder-gray-400 focus:border-green-500 focus:outline-none focus:ring-2 focus:ring-green-500/20 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 ${icon ? 'pl-9' : ''}`}
+      />
+    </div>
+  );
+}
+
+function Textarea({ value, onChange, placeholder, rows = 3 }: { value: string; onChange: (value: string) => void; placeholder?: string; rows?: number }) {
+  return (
+    <textarea
+      value={value}
+      onChange={(e) => onChange(e.target.value)}
+      placeholder={placeholder}
+      rows={rows}
+      className="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 placeholder-gray-400 focus:border-green-500 focus:outline-none focus:ring-2 focus:ring-green-500/20 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100"
+    />
+  );
+}
+
+function ServiceRow({ service, onEdit, onDelete, onToggleActive }: { service: ServiceItem; onEdit: () => void; onDelete: () => void; onToggleActive: () => void }) {
+  const laborPrice = getServiceLaborPrice(service);
+  const pricingMode = getServicePricingMode(service);
+
+  return (
+    <div className="rounded-xl border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-gray-900">
+      <div className="flex items-start justify-between gap-3">
+        <div className="min-w-0 flex-1">
+          <div className="flex flex-wrap items-center gap-2">
+            <h3 className="truncate text-sm font-semibold text-gray-900 dark:text-gray-100">{service.name}</h3>
+            {service.category && <span className="rounded-full bg-blue-100 px-2 py-0.5 text-xs font-medium text-blue-700 dark:bg-blue-900/30 dark:text-blue-300">{service.category}</span>}
+            <span className={`rounded-full px-2 py-0.5 text-xs font-medium ${service.active ? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300' : 'bg-gray-100 text-gray-500 dark:bg-gray-800 dark:text-gray-400'}`}>{service.active ? 'Active' : 'Inactive'}</span>
+          </div>
+          {service.description && <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">{service.description}</p>}
+          <div className="mt-2 flex flex-wrap gap-x-4 gap-y-1 text-xs text-gray-600 dark:text-gray-400">
+            {pricingMode === 'split' && <span className="flex items-center gap-1"><DollarSign className="h-3 w-3" />Labor: ${laborPrice.toFixed(2)}</span>}
+            {pricingMode === 'split' && <span className="flex items-center gap-1"><Package className="h-3 w-3" />Parts: ${(service.partsCost || 0).toFixed(2)}</span>}
+            <span className="flex items-center gap-1 font-semibold text-green-600 dark:text-green-400"><Tag className="h-3 w-3" />${(service.price || 0).toFixed(2)}</span>
+          </div>
+        </div>
+        <div className="flex shrink-0 items-center gap-1">
+          <button onClick={onToggleActive} className={`rounded p-1.5 transition-colors ${service.active ? 'text-green-500 hover:bg-green-100 dark:hover:bg-green-900/30' : 'text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800'}`} title={service.active ? 'Deactivate' : 'Activate'}>
+            {service.active ? <ToggleRight className="h-4 w-4" /> : <ToggleLeft className="h-4 w-4" />}
+          </button>
+          <button onClick={onEdit} className="rounded p-1.5 text-gray-400 transition-colors hover:bg-gray-100 hover:text-blue-600 dark:hover:bg-gray-800 dark:hover:text-blue-400" title="Edit service">
+            <Edit3 className="h-4 w-4" />
+          </button>
+          <button onClick={onDelete} className="rounded p-1.5 text-gray-400 transition-colors hover:bg-gray-100 hover:text-red-600 dark:hover:bg-gray-800 dark:hover:text-red-400" title="Delete service">
+            <Trash2 className="h-4 w-4" />
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default function ServiceCatalog() {
+  const { showToast } = useToast();
+  const userId = pb.authStore.model?.id;
+  const [services, setServices] = useState<ServiceItem[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [aiWritingDescription, setAiWritingDescription] = useState(false);
+  const [showServiceForm, setShowServiceForm] = useState(false);
+  const [editingService, setEditingService] = useState<ServiceItem | null>(null);
+  const [serviceSearch, setServiceSearch] = useState('');
+  const [serviceForm, setServiceForm] = useState<ServiceFormState>(createEmptyServiceForm());
+
+  const loadServices = useCallback(async () => {
+    if (!userId) {
+      setServices([]);
+      setLoading(false);
+      return;
+    }
+    setLoading(true);
+    try {
+      const records = await pb.collection('services').getFullList({ filter: `userId="${userId}"`, sort: 'name' });
+      setServices(records.map((r: Record<string, unknown>) => ({
+        id: r.id as string,
+        name: (r.name as string) || '',
+        category: (r.category as string) || '',
+        description: (r.explanation as string) || (r.description as string) || '',
+        laborHours: Number(r.laborHours) || 0,
+        laborRate: Number(r.laborRate) || 0,
+        partsCost: Number(r.partsCost) || 0,
+        price: Number(r.price) || 0,
+        active: r.active !== false,
+        created: (r.created as string) || '',
+        updated: (r.updated as string) || '',
+      })));
+    } catch (err) {
+      logError('Failed to load services', err);
+      setError('Failed to load services. Check your connection and try again.');
+      setServices([]);
+    } finally {
+      setLoading(false);
+    }
+  }, [userId]);
+
+  useEffect(() => {
+    loadServices();
+  }, [loadServices]);
+
+  const resetServiceForm = () => {
+    setServiceForm(createEmptyServiceForm());
+    setEditingService(null);
+    setShowServiceForm(false);
+    setAiWritingDescription(false);
+  };
+
+  const handleAiWriteDescription = async () => {
+    if (!serviceForm.name.trim()) {
+      showToast('Enter a service name before using AI Write', 'error');
+      return;
+    }
+    setAiWritingDescription(true);
+    try {
+      const description = await aiWriteCatalogDescription({
+        serviceName: serviceForm.name,
+        category: serviceForm.category,
+        existingDescription: serviceForm.description,
+      });
+      if (!description) {
+        showToast('AI Write returned no result', 'error');
+        return;
+      }
+      setServiceForm((prev) => ({ ...prev, description }));
+      showToast(`AI description generated for ${serviceForm.name}`, 'success');
+    } catch (err) {
+      logError('Failed to generate catalog description', err);
+      showToast('Service description could not be generated. Please try again.', 'error');
+    } finally {
+      setAiWritingDescription(false);
+    }
+  };
+
+  const handleSaveService = async () => {
+    if (!serviceForm.name.trim()) {
+      showToast('Service name is required', 'error');
+      return;
+    }
+    if (!userId) {
+      showToast('Please log in to manage services', 'error');
+      return;
+    }
+    const fullPrice = Number(serviceForm.fullPrice) || 0;
+    const laborPrice = Number(serviceForm.laborPrice) || 0;
+    const partsPrice = Number(serviceForm.partsPrice) || 0;
+    const isSplitPricing = serviceForm.pricingMode === 'split';
+    const description = serviceForm.description.trim();
+    const data = {
+      name: serviceForm.name.trim(),
+      category: serviceForm.category.trim(),
+      description,
+      explanation: description,
+      laborHours: isSplitPricing && laborPrice > 0 ? 1 : 0,
+      laborRate: isSplitPricing ? laborPrice : 0,
+      partsCost: isSplitPricing ? partsPrice : 0,
+      price: isSplitPricing ? laborPrice + partsPrice : fullPrice,
+      active: editingService ? editingService.active : true,
+      userId,
+    };
+    try {
+      if (editingService?.id) {
+        await pb.collection('services').update(editingService.id, data);
+        showToast('Service updated', 'success');
+      } else {
+        await pb.collection('services').create(data);
+        showToast('Service added', 'success');
+      }
+      resetServiceForm();
+      await loadServices();
+    } catch (err) {
+      logError('Failed to save service', err);
+      showToast('Service could not be saved. Please try again.', 'error');
+    }
+  };
+
+  const handleDeleteService = async (service: ServiceItem) => {
+    if (!userId || !service.id) return;
+    try {
+      await pb.collection('services').delete(service.id);
+      showToast('Service deleted', 'success');
+      await loadServices();
+    } catch (err) {
+      logError('Failed to delete service', err);
+      showToast('Service could not be deleted. Please try again.', 'error');
+    }
+  };
+
+  const handleToggleServiceActive = async (service: ServiceItem) => {
+    if (!userId || !service.id) return;
+    try {
+      await pb.collection('services').update(service.id, { active: !service.active });
+      await loadServices();
+    } catch (err) {
+      console.error(err);
+      showToast('Failed to toggle service', 'error');
+    }
+  };
+
+  const startEditService = (service: ServiceItem) => {
+    setEditingService(service);
+    const pricingMode = getServicePricingMode(service);
+    setServiceForm({
+      name: service.name,
+      category: service.category,
+      description: service.description,
+      pricingMode,
+      fullPrice: service.price,
+      laborPrice: getServiceLaborPrice(service),
+      partsPrice: service.partsCost,
+    });
+    setShowServiceForm(true);
+  };
+
+  const filteredServices = services.filter((service) => {
+    if (!serviceSearch.trim()) return true;
+    const q = serviceSearch.toLowerCase();
+    return service.name.toLowerCase().includes(q) || service.category.toLowerCase().includes(q) || service.description.toLowerCase().includes(q);
+  });
+
+  if (loading) {
+    return <div className="mx-auto max-w-6xl px-4 py-8 sm:px-6"><ListSkeleton rows={8} /></div>;
+  }
+
+  if (error) {
+    return (
+      <div className="mx-auto max-w-6xl px-4 py-8 sm:px-6">
+        <ListError title="Unable to load services" message={error} onRetry={loadServices} />
+      </div>
+    );
+  }
+
+  return (
+    <div className="mx-auto max-w-6xl px-4 py-8 sm:px-6">
+      <div className="mb-8 flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
+        <div>
+          <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Service Catalog</h1>
+          <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">Manage reusable services, pricing templates, and catalog defaults outside of settings.</p>
+        </div>
+        {!showServiceForm && (
+          <button onClick={() => setShowServiceForm(true)} className="inline-flex items-center gap-2 rounded-lg bg-green-600 px-4 py-2.5 text-sm font-medium text-white transition-colors hover:bg-green-700">
+            <Plus className="h-4 w-4" /> Add Service
+          </button>
+        )}
+      </div>
+
+      <div className="mb-6 rounded-2xl border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-gray-900">
+        <div className="relative max-w-md">
+          <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400" />
+          <input
+            type="text"
+            value={serviceSearch}
+            onChange={(e) => setServiceSearch(e.target.value)}
+            placeholder="Search services, categories, or descriptions"
+            className="w-full rounded-lg border border-gray-300 bg-white py-2.5 pl-9 pr-3 text-sm text-gray-900 placeholder-gray-400 focus:border-green-500 focus:outline-none focus:ring-2 focus:ring-green-500/20 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100"
+          />
+        </div>
+      </div>
+
+      {showServiceForm && (
+        <div className="mb-6 rounded-2xl border border-green-200 bg-green-50 p-5 shadow-sm dark:border-green-700 dark:bg-green-900/10">
+          <div className="mb-4 flex items-center justify-between gap-3">
+            <div>
+              <h2 className="text-base font-semibold text-gray-900 dark:text-gray-100">{editingService ? 'Edit Service' : 'Add New Service'}</h2>
+              <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">Build a reusable service template for quotes and write-ups.</p>
+            </div>
+          </div>
+          <div className="grid gap-3 sm:grid-cols-2">
+            <FormField label="Service Name"><Input value={serviceForm.name} onChange={(value) => setServiceForm((prev) => ({ ...prev, name: value }))} placeholder="e.g. Oil Change" icon={<Wrench className="h-4 w-4" />} /></FormField>
+            <FormField label="Category"><Input value={serviceForm.category} onChange={(value) => setServiceForm((prev) => ({ ...prev, category: value }))} placeholder="e.g. Maintenance" icon={<Layers className="h-4 w-4" />} /></FormField>
+          </div>
+          <div className="mt-3">
+            <FormField label="Description">
+              <div className="space-y-2">
+                <Textarea value={serviceForm.description} onChange={(value) => setServiceForm((prev) => ({ ...prev, description: value }))} placeholder="Brief description of the service..." rows={2} />
+                <div className="flex justify-end">
+                  <button
+                    type="button"
+                    onClick={handleAiWriteDescription}
+                    disabled={aiWritingDescription}
+                    className="inline-flex items-center gap-1.5 rounded-lg border border-purple-300 bg-purple-50 px-3 py-2 text-xs font-medium text-purple-700 transition-colors hover:bg-purple-100 disabled:cursor-not-allowed disabled:opacity-50 dark:border-purple-700 dark:bg-purple-900/20 dark:text-purple-300 dark:hover:bg-purple-900/30"
+                  >
+                    {aiWritingDescription ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <Sparkles className="h-3.5 w-3.5" />}
+                    AI Write
+                  </button>
+                </div>
+              </div>
+            </FormField>
+          </div>
+          <div className="mt-3 rounded-xl border border-gray-200 bg-white p-4 dark:border-gray-700 dark:bg-gray-950/40">
+            <p className="text-sm font-medium text-gray-700 dark:text-gray-300">Pricing</p>
+            <div className="mt-3 grid gap-2 sm:grid-cols-2">
+              <button
+                type="button"
+                onClick={() => setServiceForm((prev) => ({ ...prev, pricingMode: 'full' }))}
+                className={`rounded-lg border px-4 py-3 text-left text-sm transition-colors ${serviceForm.pricingMode === 'full' ? 'border-green-500 bg-green-50 text-green-700 dark:border-green-500 dark:bg-green-900/20 dark:text-green-300' : 'border-gray-300 bg-white text-gray-700 hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:hover:bg-gray-800'}`}
+              >
+                <span className="block font-medium">Option 1</span>
+                <span className="block text-xs text-gray-500 dark:text-gray-400">Enter one full price for the service.</span>
+              </button>
+              <button
+                type="button"
+                onClick={() => setServiceForm((prev) => ({ ...prev, pricingMode: 'split' }))}
+                className={`rounded-lg border px-4 py-3 text-left text-sm transition-colors ${serviceForm.pricingMode === 'split' ? 'border-green-500 bg-green-50 text-green-700 dark:border-green-500 dark:bg-green-900/20 dark:text-green-300' : 'border-gray-300 bg-white text-gray-700 hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:hover:bg-gray-800'}`}
+              >
+                <span className="block font-medium">Option 2</span>
+                <span className="block text-xs text-gray-500 dark:text-gray-400">Enter labor price and parts price separately.</span>
+              </button>
+            </div>
+            {serviceForm.pricingMode === 'full' ? (
+              <div className="mt-3 grid gap-3 sm:grid-cols-2">
+                <FormField label="Full Price ($)"><Input type="number" value={serviceForm.fullPrice} onChange={(value) => setServiceForm((prev) => ({ ...prev, fullPrice: Number(value) || 0 }))} icon={<Tag className="h-4 w-4" />} /></FormField>
+              </div>
+            ) : (
+              <div className="mt-3 grid gap-3 sm:grid-cols-3">
+                <FormField label="Labor Price ($)"><Input type="number" value={serviceForm.laborPrice} onChange={(value) => setServiceForm((prev) => ({ ...prev, laborPrice: Number(value) || 0 }))} icon={<DollarSign className="h-4 w-4" />} /></FormField>
+                <FormField label="Parts Price ($)"><Input type="number" value={serviceForm.partsPrice} onChange={(value) => setServiceForm((prev) => ({ ...prev, partsPrice: Number(value) || 0 }))} icon={<Package className="h-4 w-4" />} /></FormField>
+                <FormField label="Total Price ($)">
+                  <div className="flex h-10 items-center rounded-lg border border-gray-300 bg-gray-50 px-3 text-sm font-medium text-gray-900 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100">
+                    <Tag className="mr-2 h-4 w-4 text-gray-400" />
+                    {(serviceForm.laborPrice + serviceForm.partsPrice).toFixed(2)}
+                  </div>
+                </FormField>
+              </div>
+            )}
+          </div>
+          <div className="mt-4 flex justify-end gap-2">
+            <button onClick={resetServiceForm} className="inline-flex items-center gap-1.5 rounded-lg border border-gray-300 px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-100 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-800"><X className="h-4 w-4" />Cancel</button>
+            <button onClick={handleSaveService} className="inline-flex items-center gap-1.5 rounded-lg bg-green-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-green-700"><Check className="h-4 w-4" />{editingService ? 'Update' : 'Add'}</button>
+          </div>
+        </div>
+      )}
+
+      {filteredServices.length === 0 ? (
+        <div className="rounded-2xl border border-dashed border-gray-300 px-6 py-14 text-center dark:border-gray-700">
+          <Wrench className="mx-auto h-10 w-10 text-gray-300 dark:text-gray-600" />
+          <p className="mt-3 text-sm text-gray-500 dark:text-gray-400">{serviceSearch ? 'No catalog services matched your search. Try a broader name or category.' : 'No services are in the catalog yet. Add reusable labor and parts packages to build quotes more efficiently.'}</p>
+        </div>
+      ) : (
+        <div className="space-y-3">
+          {filteredServices.map((service) => (
+            <ServiceRow
+              key={service.id}
+              service={service}
+              onEdit={() => startEditService(service)}
+              onDelete={() => handleDeleteService(service)}
+              onToggleActive={() => handleToggleServiceActive(service)}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/pages/Settings.tsx b/src/pages/Settings.tsx
new file mode 100644
index 0000000..76da3e4
--- /dev/null
+++ b/src/pages/Settings.tsx
@@ -0,0 +1,1876 @@
+import { useState, useCallback, useEffect, useMemo, type ReactNode, type ComponentType } from 'react';
+import { Link, useLocation, useNavigate } from 'react-router-dom';
+import { pb } from '../lib/pocketbase';
+import { useAuth } from '../lib/pocketbase';
+import { RequireOwnerRole } from '../lib/rbx';
+import type { Quote, QuotePdfAppearance, QuotePdfTextStyle, ShopSettings } from '../types';
+import { useToast } from '../components/ui/Toast';
+import LoadingSpinner from '../components/ui/LoadingSpinner';
+import { DEFAULT_QUOTE_PDF_APPEARANCE, getRoleLabel, loadSettings, loadSettingsForUser, saveSettingsForUser, uploadLogoFile, removeLogoFile } from '../lib/settings';
+import { useSettingsStore } from '../store/settings';
+import { parseRichText, hasRichText } from '../lib/richtext';
+import { isMissingCollectionError, logError } from '../lib/userMessages';
+import { settingsWriteSchema, accountSettingsWriteSchema } from '../schemas/settings';
+import { generateQuotePDF } from '../lib/pdf';
+import { formatZodError } from '../schemas/index';
+import {
+  Store,
+  User,
+  DollarSign,
+  MessageSquareText,
+  Wrench,
+  Bell,
+  Moon,
+  Save,
+  Building2,
+  Phone,
+  Mail,
+  Plus,
+  Trash2,
+  Edit3,
+  Check,
+  X,
+  Percent,
+  DollarSign as DollarIcon,
+  FileImage,
+  Search,
+  Shield,
+} from 'lucide-react';
+import SetupBanner from '../components/SetupBanner';
+
+/* ── Constants ──────────────────────────────────────── */
+
+// Shared settings helpers live in src/lib/settings.ts so this page and the
+// onboarding flow persist through the same code paths.
+
+/* ── Types ──────────────────────────────────────────── */
+
+interface ServiceAdvisor {
+  id?: string;
+  name: string;
+  email: string;
+}
+
+interface SettingsTab {
+  id: string;
+  label: string;
+  group: string;
+  description: string;
+  icon: ComponentType<{ className?: string }>;
+}
+
+const TABS: SettingsTab[] = [
+  { id: 'account', label: 'Account Settings', group: 'Account', description: 'Manage your login profile and security.', icon: User },
+  { id: 'business', label: 'Business Info', group: 'Shop', description: 'Core business identity and contact details.', icon: Store },
+  { id: 'advisors', label: 'Service Advisors', group: 'Shop', description: 'Manage advisor names and defaults.', icon: User },
+  { id: 'tax', label: 'Tax & Fees', group: 'Shop', description: 'Shop charges, tax rates, and pricing rules.', icon: DollarSign },
+  { id: 'quotes', label: 'Quote Defaults', group: 'Quotes', description: 'Default text and quote presentation settings.', icon: MessageSquareText },
+  { id: 'pdf', label: 'PDF & Branding', group: 'Quotes', description: 'Branding, logo, and exported document styling.', icon: FileImage },
+  { id: 'business-ops', label: 'Business Ops', group: 'Operations', description: 'Operational defaults used across the shop.', icon: Building2 },
+  { id: 'notifications', label: 'Notifications', group: 'Preferences', description: 'Alerts, autosave, and appearance preferences.', icon: Bell },
+];
+
+/* ── Helpers ────────────────────────────────────────── */
+
+// Delegate to the shared settings module so defaults + storage key stay in
+// one place across the app.
+const loadLocalSettings = loadSettings;
+
+/* ── Sub-components ─────────────────────────────────── */
+
+function SectionCard({
+  title,
+  icon: Icon,
+  children,
+}: {
+  title: string;
+  icon: ComponentType<{ className?: string }>;
+  children: ReactNode;
+}) {
+  return (
+    <div className="rounded-2xl border border-gray-200/90 dark:border-gray-700 bg-white dark:bg-gray-900 shadow-sm">
+      <div className="flex items-center gap-2 border-b border-gray-100 dark:border-gray-700 px-6 py-4">
+        <Icon className="h-5 w-5 text-green-600 dark:text-green-400" />
+        <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
+          {title}
+        </h2>
+      </div>
+      <div className="px-6 py-5">{children}</div>
+    </div>
+  );
+}
+
+function FormField({ label, hint, children }: { label: string; hint?: string; children: ReactNode }) {
+  return (
+    <div className="space-y-1.5">
+      <label className="block text-sm font-medium text-gray-700 dark:text-gray-300">{label}</label>
+      {children}
+      {hint && <p className="text-xs text-gray-400 dark:text-gray-500">{hint}</p>}
+    </div>
+  );
+}
+
+// Live preview of the inline-rich-text markup (`{accent}…{/accent}`,
+// `{muted}…{/muted}`, `{bold}…{/bold}`) so users can see exactly what the
+// PDF footer will look like before they generate one. Mirrors the parser
+// used by src/lib/pdf.ts so the preview and the output can't drift apart.
+function RichTextPreview({ text, accentHex }: { text: string; accentHex?: string }) {
+  if (!text) return null;
+  if (!hasRichText(text)) return null;
+  const segments = parseRichText(text);
+  return (
+    <div className="mt-1.5 rounded-md border border-gray-200 bg-gray-50 px-2.5 py-1.5 text-xs dark:border-gray-700 dark:bg-gray-800/50">
+      <span className="mr-1.5 text-gray-400 dark:text-gray-500">Preview:</span>
+      {segments.map((seg, i) => {
+        const cls =
+          seg.style === 'accent' ? 'font-medium'
+          : seg.style === 'muted' ? 'text-gray-400 dark:text-gray-500'
+          : seg.style === 'bold' ? 'font-bold'
+          : '';
+        const style = seg.style === 'accent' ? { color: accentHex || '#16a34a' } : undefined;
+        return <span key={i} className={cls} style={style}>{seg.text}</span>;
+      })}
+    </div>
+  );
+}
+
+function Input({
+  value,
+  onChange,
+  placeholder,
+  type = 'text',
+  prefix,
+}: {
+  value: string | number;
+  onChange: (val: string) => void;
+  placeholder?: string;
+  type?: string;
+  prefix?: ReactNode;
+}) {
+  return (
+    <div className="relative">
+      {prefix && (
+        <span className="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-400 dark:text-gray-500 text-sm pointer-events-none">
+          {prefix}
+        </span>
+      )}
+      <input
+        type={type}
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        placeholder={placeholder}
+        className={`w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-3 py-2 text-sm text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:border-green-500 focus:ring-2 focus:ring-green-500/20 focus:outline-none transition-colors ${
+          prefix ? 'pl-8' : ''
+        }`}
+      />
+    </div>
+  );
+}
+
+function Textarea({
+  value,
+  onChange,
+  placeholder,
+  rows = 3,
+  hint,
+}: {
+  value: string;
+  onChange: (val: string) => void;
+  placeholder?: string;
+  rows?: number;
+  hint?: string;
+}) {
+  return (
+    <div>
+      <textarea
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        placeholder={placeholder}
+        rows={rows}
+        className="w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-3 py-2 text-sm text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:border-green-500 focus:ring-2 focus:ring-green-500/20 focus:outline-none transition-colors resize-y"
+      />
+      {hint && <p className="mt-1 text-xs text-gray-400 dark:text-gray-500">{hint}</p>}
+    </div>
+  );
+}
+
+function Toggle({
+  label,
+  description,
+  enabled,
+  onChange,
+}: {
+  label: string;
+  description?: string;
+  enabled: boolean;
+  onChange: (v: boolean) => void;
+}) {
+  return (
+    <div className="flex items-center justify-between py-2">
+      <div className="flex-1">
+        <p className="text-sm font-medium text-gray-900 dark:text-gray-100">{label}</p>
+        {description && (
+          <p className="text-xs text-gray-500 dark:text-gray-400">{description}</p>
+        )}
+      </div>
+      <button
+        type="button"
+        onClick={() => onChange(!enabled)}
+        className={`relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-green-500/40 ${
+          enabled ? 'bg-green-600' : 'bg-gray-300 dark:bg-gray-600'
+        }`}
+        role="switch"
+        aria-checked={enabled}
+      >
+        <span
+          className={`pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out ${
+            enabled ? 'translate-x-5' : 'translate-x-0'
+          }`}
+        />
+      </button>
+    </div>
+  );
+}
+
+const selectClass = 'w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-3 py-2 text-sm text-gray-900 dark:text-gray-100 focus:border-green-500 focus:ring-2 focus:ring-green-500/20 focus:outline-none transition-colors';
+
+function SelectField({ value, onChange, children }: { value: string; onChange: (value: string) => void; children: ReactNode }) {
+  return (
+    <select value={value} onChange={(e) => onChange(e.target.value)} className={selectClass}>
+      {children}
+    </select>
+  );
+}
+
+function QuotePdfAppearanceSection({
+  settings,
+  updateSetting,
+}: {
+  settings: ShopSettings;
+  updateSetting: <K extends keyof ShopSettings>(key: K, value: ShopSettings[K]) => void;
+}) {
+  const { showToast } = useToast();
+  const appearance = settings.quotePdfAppearance;
+  const updateAppearance = (updates: Partial<QuotePdfAppearance>) => {
+    updateSetting('quotePdfAppearance', { ...appearance, ...updates });
+  };
+  const updateStyle = (key: keyof Pick<QuotePdfAppearance, 'sectionHeader' | 'serviceTitle' | 'serviceDescription' | 'recommendation' | 'priority' | 'authorization' | 'totals' | 'footer'>, updates: Partial<QuotePdfTextStyle>) => {
+    updateAppearance({ [key]: { ...appearance[key], ...updates } } as Partial<QuotePdfAppearance>);
+  };
+  const updateLabel = (key: keyof QuotePdfAppearance['labels'], value: string) => {
+    updateAppearance({ labels: { ...appearance.labels, [key]: value } });
+  };
+  const updateColor = (key: keyof QuotePdfAppearance['colors'], value: string) => {
+    updateAppearance({ colors: { ...appearance.colors, [key]: value } });
+  };
+
+  const previewQuotePdf = async () => {
+    const sampleQuote: Quote = {
+      id: 'preview-quote',
+      createdAt: new Date().toISOString(),
+      updatedAt: new Date().toISOString(),
+      status: 'sent',
+      discount: { value: 25, type: 'dollar' },
+      customerInfo: {
+        firstName: 'Alex', middleName: '', lastName: 'Morgan', name: 'Alex Morgan',
+        phone: '(555) 555-0123', email: 'alex@example.com', vehicleInfo: '2019 Toyota Camry XLE',
+        vin: '4T1B11HKXKU123456', mileage: '78,420', roNumber: 'PREVIEW-1001', serviceAdvisor: settings.serviceAdvisor || 'Service Advisor',
+      },
+      services: [
+        {
+          id: 'preview-approved', name: 'Front Brake Pad and Rotor Service', price: 489.95, selected: true, approved: true,
+          customerDecision: 'approved', authorizedBy: 'Alex Morgan', authorizedAt: new Date().toISOString(), authorizedMethod: 'phone',
+          priority: 'SAFETY_CONCERN', priorityReason: 'Front pads are below safe thickness and rotors show heavy scoring.',
+          recommendation: 'Brake service is recommended to restore safe stopping performance.',
+          explanation: 'The front brake pads are worn close to the service limit. Replacing the pads and rotors together helps prevent brake noise, vibration, and reduced stopping ability.',
+          applyShopCharge: true,
+        },
+        {
+          id: 'preview-pending', name: 'Transmission Fluid Exchange', price: 219.5, selected: true, approved: false,
+          customerDecision: 'pending', priority: 'MAINTENANCE', priorityReason: 'Mileage indicates the fluid service interval is due.',
+          recommendation: 'Recommended maintenance based on mileage.',
+          explanation: 'Fresh transmission fluid helps protect internal components and can improve shift quality over time.',
+          applyShopCharge: true,
+        },
+        {
+          id: 'preview-declined', name: 'Cabin Air Filter Replacement', price: 59.95, selected: true, approved: false,
+          customerDecision: 'declined', authorizedBy: 'Alex Morgan', authorizedAt: new Date().toISOString(), authorizedMethod: 'text',
+          recommendation: 'Filter is dirty and restricting airflow.', explanation: 'A restricted cabin filter can reduce HVAC performance and contribute to odors inside the vehicle.',
+          applyShopCharge: false,
+        },
+      ],
+    };
+    try {
+      const blob = await generateQuotePDF(sampleQuote, settings);
+      window.open(URL.createObjectURL(blob), '_blank');
+    } catch (err) {
+      logError('Failed to generate quote PDF preview', err);
+      showToast('Quote PDF preview could not be generated.', 'error');
+    }
+  };
+
+  const renderTextStyle = (
+    label: string,
+    key: keyof Pick<QuotePdfAppearance, 'sectionHeader' | 'serviceTitle' | 'serviceDescription' | 'recommendation' | 'priority' | 'authorization' | 'totals' | 'footer'>,
+  ) => (
+    <div className="rounded-xl border border-gray-200 p-3 dark:border-gray-700">
+      <p className="mb-3 text-sm font-semibold text-gray-900 dark:text-gray-100">{label}</p>
+      <div className="grid gap-3 sm:grid-cols-3">
+        <FormField label="Font">
+          <SelectField value={appearance[key].font} onChange={(v) => updateStyle(key, { font: v as QuotePdfTextStyle['font'] })}>
+            <option value="helvetica">Helvetica</option>
+            <option value="times">Times</option>
+            <option value="courier">Courier</option>
+          </SelectField>
+        </FormField>
+        <FormField label="Size">
+          <Input type="number" value={appearance[key].size} onChange={(v) => updateStyle(key, { size: Number(v) || appearance[key].size })} />
+        </FormField>
+        <FormField label="Weight">
+          <SelectField value={appearance[key].weight} onChange={(v) => updateStyle(key, { weight: v as QuotePdfTextStyle['weight'] })}>
+            <option value="normal">Normal</option>
+            <option value="bold">Bold</option>
+          </SelectField>
+        </FormField>
+      </div>
+    </div>
+  );
+
+  const renderColor = (label: string, key: keyof QuotePdfAppearance['colors']) => (
+    <FormField label={label}>
+      <div className="flex items-center gap-3">
+        <input
+          type="color"
+          value={appearance.colors[key]}
+          onChange={(e) => updateColor(key, e.target.value)}
+          className="h-9 w-12 cursor-pointer rounded border border-gray-300 bg-white p-0.5 dark:border-gray-600"
+        />
+        <Input value={appearance.colors[key]} onChange={(v) => updateColor(key, v)} />
+      </div>
+    </FormField>
+  );
+
+  return (
+    <SectionCard title="Quote PDF Appearance" icon={FileImage}>
+      <div className="space-y-6">
+        <div className="flex flex-col gap-3 rounded-xl border border-green-200 bg-green-50 p-4 dark:border-green-900/60 dark:bg-green-900/20 sm:flex-row sm:items-center sm:justify-between">
+          <div>
+            <p className="text-sm font-semibold text-green-900 dark:text-green-100">Customer-facing PDF controls</p>
+            <p className="mt-1 text-xs text-green-800 dark:text-green-200">These options affect downloaded and printed quote PDFs only.</p>
+          </div>
+          <div className="flex flex-wrap gap-2">
+            <button
+              type="button"
+              onClick={previewQuotePdf}
+              className="inline-flex items-center justify-center rounded-lg bg-green-600 px-3 py-2 text-xs font-medium text-white transition-colors hover:bg-green-700"
+            >
+              Preview PDF
+            </button>
+            <button
+              type="button"
+              onClick={() => updateSetting('quotePdfAppearance', DEFAULT_QUOTE_PDF_APPEARANCE)}
+              className="inline-flex items-center justify-center rounded-lg border border-green-300 bg-white px-3 py-2 text-xs font-medium text-green-700 transition-colors hover:bg-green-100 dark:border-green-700 dark:bg-gray-900 dark:text-green-300 dark:hover:bg-green-900/30"
+            >
+              Reset Appearance
+            </button>
+          </div>
+        </div>
+
+        <div className="grid gap-4 lg:grid-cols-2">
+          <div>
+            <p className="mb-2 text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">Header & Footer</p>
+            <div className="divide-y divide-gray-100 rounded-xl border border-gray-200 px-3 dark:divide-gray-700 dark:border-gray-700">
+              <Toggle label="Show business address" enabled={appearance.showBusinessAddress} onChange={(v) => updateAppearance({ showBusinessAddress: v })} />
+              <Toggle label="Show business phone" enabled={appearance.showBusinessPhone} onChange={(v) => updateAppearance({ showBusinessPhone: v })} />
+              <Toggle label="Show customer info block" enabled={appearance.showCustomerInfo} onChange={(v) => updateAppearance({ showCustomerInfo: v })} />
+              <Toggle label="Show RO number" enabled={appearance.showRoNumber} onChange={(v) => updateAppearance({ showRoNumber: v })} />
+              <Toggle label="Show VIN" enabled={appearance.showVin} onChange={(v) => updateAppearance({ showVin: v })} />
+              <Toggle label="Show mileage" enabled={appearance.showMileage} onChange={(v) => updateAppearance({ showMileage: v })} />
+              <Toggle label="Show quote date" enabled={appearance.showQuoteDate} onChange={(v) => updateAppearance({ showQuoteDate: v })} />
+              <Toggle label="Show header message" enabled={appearance.showHeaderMessage} onChange={(v) => updateAppearance({ showHeaderMessage: v })} />
+              <Toggle label="Show payment terms" enabled={appearance.showPaymentTerms} onChange={(v) => updateAppearance({ showPaymentTerms: v })} />
+              <Toggle label="Show footer message" enabled={appearance.showFooterMessage} onChange={(v) => updateAppearance({ showFooterMessage: v })} />
+              <Toggle label="Show quote expiry/footer note" enabled={appearance.showQuoteFooterNote} onChange={(v) => updateAppearance({ showQuoteFooterNote: v })} />
+            </div>
+          </div>
+          <div>
+            <p className="mb-2 text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">Services & Totals</p>
+            <div className="divide-y divide-gray-100 rounded-xl border border-gray-200 px-3 dark:divide-gray-700 dark:border-gray-700">
+              <Toggle label="Show service prices" enabled={appearance.showServicePrices} onChange={(v) => updateAppearance({ showServicePrices: v })} />
+              <Toggle label="Show totals summary" enabled={appearance.showTotalsSummary} onChange={(v) => updateAppearance({ showTotalsSummary: v })} />
+              <Toggle label="Show shop charge line" enabled={appearance.showShopChargeLine} onChange={(v) => updateAppearance({ showShopChargeLine: v })} />
+              <Toggle label="Show discount line" enabled={appearance.showDiscountLine} onChange={(v) => updateAppearance({ showDiscountLine: v })} />
+              <Toggle label="Show tax line" enabled={appearance.showTaxLine} onChange={(v) => updateAppearance({ showTaxLine: v })} />
+              <Toggle label="Show approval/decline badges" enabled={appearance.showServiceDecisionBadges} onChange={(v) => updateAppearance({ showServiceDecisionBadges: v })} />
+              <Toggle label="Show authorization line" enabled={appearance.showAuthorizationLine} onChange={(v) => updateAppearance({ showAuthorizationLine: v })} />
+              <Toggle label="Show priority" enabled={appearance.showPriority} onChange={(v) => updateAppearance({ showPriority: v })} />
+              <Toggle label="Show priority reason" enabled={appearance.showPriorityReason} onChange={(v) => updateAppearance({ showPriorityReason: v })} />
+              <Toggle label="Show why recommended" enabled={appearance.showRecommendation} onChange={(v) => updateAppearance({ showRecommendation: v })} />
+              <Toggle label="Show service description" enabled={appearance.showServiceDescription} onChange={(v) => updateAppearance({ showServiceDescription: v })} />
+              <Toggle label="Show parts status notes" enabled={appearance.showPartsStatus} onChange={(v) => updateAppearance({ showPartsStatus: v })} />
+              <Toggle label="Show aftermarket options" enabled={appearance.showAftermarketOptions} onChange={(v) => updateAppearance({ showAftermarketOptions: v })} />
+              <Toggle label="Show additional recommendations" enabled={appearance.showPendingRecommendations} onChange={(v) => updateAppearance({ showPendingRecommendations: v })} />
+              <Toggle label="Show declined/postponed services" enabled={appearance.showDeclinedServices} onChange={(v) => updateAppearance({ showDeclinedServices: v })} />
+              <Toggle label="Show service separators" enabled={appearance.serviceSeparators} onChange={(v) => updateAppearance({ serviceSeparators: v })} />
+            </div>
+          </div>
+        </div>
+
+        <div className="grid gap-4 sm:grid-cols-3">
+          <FormField label="Header Layout">
+            <SelectField value={appearance.headerLayout} onChange={(v) => updateAppearance({ headerLayout: v as QuotePdfAppearance['headerLayout'] })}>
+              <option value="boxed">Boxed</option>
+              <option value="simple">Simple</option>
+              <option value="minimal">Minimal</option>
+            </SelectField>
+          </FormField>
+          <FormField label="Logo Alignment">
+            <SelectField value={appearance.logoAlignment} onChange={(v) => updateAppearance({ logoAlignment: v as QuotePdfAppearance['logoAlignment'] })}>
+              <option value="left">Left</option>
+              <option value="center">Center</option>
+              <option value="right">Right</option>
+            </SelectField>
+          </FormField>
+          <FormField label="Logo Width">
+            <Input type="number" value={appearance.logoWidth} onChange={(v) => updateAppearance({ logoWidth: Number(v) || DEFAULT_QUOTE_PDF_APPEARANCE.logoWidth })} />
+          </FormField>
+          <FormField label="Logo Height">
+            <Input type="number" value={appearance.logoHeight} onChange={(v) => updateAppearance({ logoHeight: Number(v) || DEFAULT_QUOTE_PDF_APPEARANCE.logoHeight })} />
+          </FormField>
+          <FormField label="Price Display">
+            <SelectField value={appearance.priceDisplay} onChange={(v) => updateAppearance({ priceDisplay: v as QuotePdfAppearance['priceDisplay'] })}>
+              <option value="right">Right Aligned</option>
+              <option value="inline">Inline With Title</option>
+              <option value="hidden">Hidden</option>
+            </SelectField>
+          </FormField>
+          <FormField label="Section Order">
+            <SelectField value={appearance.sectionOrder} onChange={(v) => updateAppearance({ sectionOrder: v as QuotePdfAppearance['sectionOrder'] })}>
+              <option value="approved_first">Approved First</option>
+              <option value="recommendations_first">Recommendations First</option>
+              <option value="combined">Combined List</option>
+            </SelectField>
+          </FormField>
+          <FormField label="Service Spacing">
+            <SelectField value={appearance.serviceSpacing} onChange={(v) => updateAppearance({ serviceSpacing: v as QuotePdfAppearance['serviceSpacing'] })}>
+              <option value="compact">Compact</option>
+              <option value="normal">Normal</option>
+              <option value="spacious">Spacious</option>
+            </SelectField>
+          </FormField>
+          <FormField label="Section Spacing">
+            <SelectField value={appearance.sectionSpacing} onChange={(v) => updateAppearance({ sectionSpacing: v as QuotePdfAppearance['sectionSpacing'] })}>
+              <option value="compact">Compact</option>
+              <option value="normal">Normal</option>
+              <option value="spacious">Spacious</option>
+            </SelectField>
+          </FormField>
+        </div>
+
+        <div>
+          <p className="mb-2 text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">Colors</p>
+          <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
+            {renderColor('Section Header', 'sectionHeader')}
+            {renderColor('Service Title', 'serviceTitle')}
+            {renderColor('Description Text', 'description')}
+            {renderColor('Why Recommended', 'recommendation')}
+            {renderColor('Header Background', 'headerBackground')}
+            {renderColor('Separator Lines', 'separator')}
+            {renderColor('Totals Background', 'totalsBackground')}
+            {renderColor('Footer Text', 'footer')}
+            {renderColor('Approved Badge', 'approvedBadge')}
+            {renderColor('Declined Badge', 'declinedBadge')}
+            {renderColor('Recommendations Section', 'recommendationsSection')}
+          </div>
+        </div>
+
+        <div>
+          <p className="mb-2 text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">Fonts</p>
+          <div className="grid gap-3 lg:grid-cols-2">
+            {renderTextStyle('Section Headers', 'sectionHeader')}
+            {renderTextStyle('Service Titles', 'serviceTitle')}
+            {renderTextStyle('Service Description', 'serviceDescription')}
+            {renderTextStyle('Why Recommended', 'recommendation')}
+            {renderTextStyle('Priority', 'priority')}
+            {renderTextStyle('Authorization Line', 'authorization')}
+            {renderTextStyle('Totals', 'totals')}
+            {renderTextStyle('Footer', 'footer')}
+          </div>
+        </div>
+
+        <FormField label="Why Recommended Text Transform">
+          <SelectField value={appearance.recommendationTransform} onChange={(v) => updateAppearance({ recommendationTransform: v as QuotePdfAppearance['recommendationTransform'] })}>
+            <option value="uppercase">Uppercase</option>
+            <option value="none">Normal</option>
+          </SelectField>
+        </FormField>
+
+        <div>
+          <p className="mb-2 text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">Printed Labels</p>
+          <div className="grid gap-3 sm:grid-cols-2">
+            <FormField label="Approved Section"><Input value={appearance.labels.approvedSection} onChange={(v) => updateLabel('approvedSection', v)} /></FormField>
+            <FormField label="Recommendations Section"><Input value={appearance.labels.recommendationsSection} onChange={(v) => updateLabel('recommendationsSection', v)} /></FormField>
+            <FormField label="Declined Section"><Input value={appearance.labels.declinedSection} onChange={(v) => updateLabel('declinedSection', v)} /></FormField>
+            <FormField label="Approved Badge"><Input value={appearance.labels.customerApproved} onChange={(v) => updateLabel('customerApproved', v)} /></FormField>
+            <FormField label="Declined Badge"><Input value={appearance.labels.customerDeclined} onChange={(v) => updateLabel('customerDeclined', v)} /></FormField>
+            <FormField label="Priority Reason Label"><Input value={appearance.labels.priorityReason} onChange={(v) => updateLabel('priorityReason', v)} /></FormField>
+            <FormField label="Subtotal Label"><Input value={appearance.labels.subtotal} onChange={(v) => updateLabel('subtotal', v)} /></FormField>
+            <FormField label="Shop Charge Label"><Input value={appearance.labels.shopCharge} onChange={(v) => updateLabel('shopCharge', v)} /></FormField>
+            <FormField label="Discount Label"><Input value={appearance.labels.discount} onChange={(v) => updateLabel('discount', v)} /></FormField>
+            <FormField label="Total Label"><Input value={appearance.labels.total} onChange={(v) => updateLabel('total', v)} /></FormField>
+            <FormField label="Payment Terms Label"><Input value={appearance.labels.paymentTerms} onChange={(v) => updateLabel('paymentTerms', v)} /></FormField>
+            <FormField label="In-Person Authorization"><Input value={appearance.labels.authorizedInPerson} onChange={(v) => updateLabel('authorizedInPerson', v)} /></FormField>
+            <FormField label="Text Authorization"><Input value={appearance.labels.authorizedByText} onChange={(v) => updateLabel('authorizedByText', v)} /></FormField>
+            <FormField label="Call Authorization"><Input value={appearance.labels.authorizedByCall} onChange={(v) => updateLabel('authorizedByCall', v)} /></FormField>
+            <FormField label="Signature Authorization"><Input value={appearance.labels.authorizedWithSignature} onChange={(v) => updateLabel('authorizedWithSignature', v)} /></FormField>
+            <FormField label="Email Authorization"><Input value={appearance.labels.authorizedByEmail} onChange={(v) => updateLabel('authorizedByEmail', v)} /></FormField>
+            <FormField label="Authorized Total"><Input value={appearance.labels.authorizedTotal} onChange={(v) => updateLabel('authorizedTotal', v)} /></FormField>
+            <FormField label="Add-On Total"><Input value={appearance.labels.addOnTotal} onChange={(v) => updateLabel('addOnTotal', v)} /></FormField>
+            <FormField label="All Work Subtotal"><Input value={appearance.labels.allWorkSubtotal} onChange={(v) => updateLabel('allWorkSubtotal', v)} /></FormField>
+            <FormField label="Total If All Approved"><Input value={appearance.labels.totalIfAllApproved} onChange={(v) => updateLabel('totalIfAllApproved', v)} /></FormField>
+          </div>
+        </div>
+      </div>
+    </SectionCard>
+  );
+}
+
+/* ── Service Advisor Manager ────────────────────────── */
+
+function AdvisorRow({
+  advisor,
+  onEdit,
+  onDelete,
+}: {
+  advisor: ServiceAdvisor;
+  onEdit: () => void;
+  onDelete: () => void;
+}) {
+  return (
+    <div className="flex items-center justify-between rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-750 p-3">
+      <div className="flex-1 min-w-0">
+        <p className="text-sm font-medium text-gray-900 dark:text-gray-100 truncate">
+          {advisor.name}
+        </p>
+        {advisor.email && (
+          <p className="text-xs text-gray-500 dark:text-gray-400 truncate">{advisor.email}</p>
+        )}
+      </div>
+      <div className="flex items-center gap-2 ml-3 shrink-0">
+        <button
+          onClick={onEdit}
+          className="rounded p-1.5 text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
+          title="Edit advisor"
+        >
+          <Edit3 className="h-4 w-4" />
+        </button>
+        <button
+          onClick={onDelete}
+          className="rounded p-1.5 text-gray-400 hover:text-red-600 dark:hover:text-red-400 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
+          title="Remove advisor"
+        >
+          <Trash2 className="h-4 w-4" />
+        </button>
+      </div>
+    </div>
+  );
+}
+
+/* ── PDF & Branding Section ──────────────────────── */
+function PDFBrandingSection({
+  settings,
+  updateSetting,
+  saveAllSettings,
+  saving,
+  isModal,
+  userId,
+}: {
+  settings: ShopSettings;
+  updateSetting: <K extends keyof ShopSettings>(key: K, value: ShopSettings[K]) => void;
+  saveAllSettings: () => Promise<void>;
+  saving: boolean;
+  isModal?: boolean;
+  userId?: string;
+}) {
+  const { showToast } = useToast();
+  const handleLogoUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    if (file.size > 500 * 1024) {
+      showToast('Logo must be under 500KB', 'error');
+      return;
+    }
+    try {
+      const base64 = await uploadLogoFile(userId ?? '', file);
+      updateSetting('logoUrl', base64);
+    } catch {
+      showToast('Failed to upload logo', 'error');
+    }
+  };
+
+  return (
+    <SectionCard title="PDF & Branding" icon={FileImage}>
+      <div className="space-y-4">
+        {/* Logo upload */}
+        <FormField label="Logo" hint="Upload your shop logo (PNG/JPG, max 500KB). It will appear on PDF quotes.">
+          <div className="flex items-center gap-3">
+            {settings.logoUrl ? (
+              <div className="relative">
+                <img src={settings.logoUrl} alt="Shop logo" className="h-14 w-auto rounded border border-gray-200 dark:border-gray-600 object-contain" />
+                <button
+                  onClick={() => {
+                    updateSetting('logoUrl', '');
+                    if (userId) removeLogoFile(userId).catch(() => {});
+                  }}
+                  className="absolute -top-2 -right-2 rounded-full bg-red-500 p-0.5 text-white shadow hover:bg-red-600"
+                  title="Remove logo"
+                >
+                  <X className="h-3 w-3" />
+                </button>
+              </div>
+            ) : (
+              <label className="flex cursor-pointer items-center gap-2 rounded-lg border border-dashed border-gray-300 px-4 py-3 text-sm text-gray-500 hover:border-gray-400 dark:border-gray-600 dark:text-gray-400 dark:hover:border-gray-500">
+                <FileImage className="h-5 w-5" />
+                <span>Choose logo image</span>
+                <input type="file" accept="image/*" onChange={handleLogoUpload} className="hidden" />
+              </label>
+            )}
+          </div>
+        </FormField>
+
+        <Toggle
+          label="Show logo on PDF"
+          description="Display the uploaded logo on generated quote PDFs"
+          enabled={settings.showLogoOnPdf}
+          onChange={(v) => updateSetting('showLogoOnPdf', v)}
+        />
+
+        <FormField label="Quote Expiry (days)" hint="Number of days a quote is valid for">
+          <Input
+            type="number"
+            value={settings.quoteExpiryDays}
+            onChange={(v) => updateSetting('quoteExpiryDays', Number(v) || 30)}
+          />
+        </FormField>
+
+        <FormField label="Quote Number Prefix" hint="Prepended to quote IDs on PDF (e.g. Q-2026-)">
+          <Input
+            value={settings.quoteNumberPrefix}
+            onChange={(v) => updateSetting('quoteNumberPrefix', v)}
+            placeholder="e.g. Q-"
+          />
+        </FormField>
+
+        <FormField label="Accent Color" hint="Brand color used for headers and accents on PDF quotes">
+          <div className="flex items-center gap-3">
+            <input
+              type="color"
+              value={settings.pdfAccentColor}
+              onChange={(e) => updateSetting('pdfAccentColor', e.target.value)}
+              className="h-9 w-12 cursor-pointer rounded border border-gray-300 dark:border-gray-600 bg-white p-0.5"
+            />
+            <span className="text-sm font-mono text-gray-600 dark:text-gray-400">
+              {settings.pdfAccentColor}
+            </span>
+          </div>
+        </FormField>
+
+        <FormField label="PDF Style" hint="Choose the layout style for generated quote PDFs">
+          <div className="flex gap-3">
+            <button
+              type="button"
+              onClick={() => updateSetting('pdfStyle', 'professional')}
+              className={`flex-1 rounded-lg border p-3 text-left transition-colors ${settings.pdfStyle === 'professional' ? 'border-green-500 bg-green-50 dark:bg-green-900/20 dark:border-green-600' : 'border-gray-300 dark:border-gray-600'}`}
+            >
+              <span className="text-sm font-semibold text-gray-900 dark:text-gray-100">Professional</span>
+              <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">Full header with colored background, detailed layout</p>
+            </button>
+            <button
+              type="button"
+              onClick={() => updateSetting('pdfStyle', 'compact')}
+              className={`flex-1 rounded-lg border p-3 text-left transition-colors ${settings.pdfStyle === 'compact' ? 'border-green-500 bg-green-50 dark:bg-green-900/20 dark:border-green-600' : 'border-gray-300 dark:border-gray-600'}`}
+            >
+              <span className="text-sm font-semibold text-gray-900 dark:text-gray-100">Compact</span>
+              <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">Minimal header, tighter spacing, reduced page counts</p>
+            </button>
+          </div>
+        </FormField>
+
+        {/* ── Quote Display toggles ── */}
+        <div className="border-t border-gray-200 pt-4 dark:border-gray-700">
+          <p className="mb-2 text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">
+            Quote Display
+          </p>
+          <Toggle
+            label="Show Advisor Name"
+            description="Display the service advisor name on generated quote PDFs"
+            enabled={settings.showAdvisorOnQuote}
+            onChange={(v) => updateSetting('showAdvisorOnQuote', v)}
+          />
+          <Toggle
+            label="Show Technician Name"
+            description="Display the technician name on generated quote PDFs"
+            enabled={settings.showTechnicianOnQuote}
+            onChange={(v) => updateSetting('showTechnicianOnQuote', v)}
+          />
+          {settings.showTechnicianOnQuote && (
+            <FormField label="Default Technician Name" hint="Name used when no technician is assigned to the quote">
+              <Input
+                value={settings.defaultTechnician}
+                onChange={(v) => updateSetting('defaultTechnician', v)}
+                placeholder="e.g. Jane Doe"
+              />
+            </FormField>
+          )}
+        </div>
+
+        {!isModal && (
+          <div className="flex justify-end pt-2">
+            <button
+              onClick={saveAllSettings}
+              disabled={saving}
+              className="inline-flex items-center gap-2 rounded-lg bg-green-600 px-5 py-2.5 text-sm font-medium text-white shadow-sm hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500/40 disabled:opacity-60 disabled:cursor-not-allowed transition-colors"
+            >
+              <Save className="h-4 w-4" />
+              {saving ? 'Saving...' : 'Save All Settings'}
+            </button>
+          </div>
+        )}
+      </div>
+    </SectionCard>
+  );
+}
+
+/* ── Business Ops Section ────────────────────────── */
+function BusinessOpsSection({
+  settings,
+  updateSetting,
+  saveAllSettings,
+  saving,
+  isModal,
+}: {
+  settings: ShopSettings;
+  updateSetting: <K extends keyof ShopSettings>(key: K, value: ShopSettings[K]) => void;
+  saveAllSettings: () => Promise<void>;
+  saving: boolean;
+  isModal?: boolean;
+}) {
+
+  return (
+    <SectionCard title="Business Operations" icon={Building2}>
+      <div className="space-y-4">
+        <FormField label="Tax Label" hint="What your shop calls tax (Sales Tax, HST, VAT, etc.)">
+          <Input
+            value={settings.taxLabel}
+            onChange={(v) => updateSetting('taxLabel', v)}
+            placeholder="Tax"
+          />
+        </FormField>
+
+        <FormField label="Payment Terms" hint="Shown on invoices and quotes. Wrap text in {accent}…{/accent} to color it (uses the PDF accent color), {muted}…{/muted} for gray, {bold}…{/bold} for emphasis.">
+          <Input
+            value={settings.paymentTerms}
+            onChange={(v) => updateSetting('paymentTerms', v)}
+            placeholder="Due on Receipt"
+          />
+          <RichTextPreview text={`Payment Terms: ${settings.paymentTerms}`} accentHex={settings.pdfAccentColor} />
+        </FormField>
+
+        <FormField label="Default Labor Rate ($/hr)" hint="Preset when adding new services to the catalog">
+          <Input
+            type="number"
+            value={settings.defaultLaborRate}
+            onChange={(v) => updateSetting('defaultLaborRate', Number(v) || 0)}
+            prefix={<DollarIcon className="h-4 w-4" />}
+          />
+        </FormField>
+
+        <FormField label="Default Service Pricing" hint="How new services are priced by default">
+          <div className="flex rounded-xl border border-gray-300 dark:border-gray-600 overflow-hidden text-sm">
+            <button
+              type="button"
+              onClick={() => updateSetting('defaultPricingMode', 'full')}
+              className={`flex-1 px-4 py-2.5 font-medium transition-colors ${
+                settings.defaultPricingMode === 'full'
+                  ? 'bg-blue-600 text-white'
+                  : 'bg-white text-gray-600 hover:bg-gray-50 dark:bg-gray-900 dark:text-gray-400 dark:hover:bg-gray-800'
+              }`}
+            >
+              Full Price
+            </button>
+            <button
+              type="button"
+              onClick={() => updateSetting('defaultPricingMode', 'split')}
+              className={`flex-1 px-4 py-2.5 font-medium transition-colors ${
+                settings.defaultPricingMode === 'split'
+                  ? 'bg-blue-600 text-white'
+                  : 'bg-white text-gray-600 hover:bg-gray-50 dark:bg-gray-900 dark:text-gray-400 dark:hover:bg-gray-800'
+              }`}
+            >
+              Labor + Parts
+            </button>
+          </div>
+        </FormField>
+
+        <FormField label="Business Hours" hint='Enter hours as JSON: {&quot;monday&quot;:{&quot;open&quot;:&quot;08:00&quot;,&quot;close&quot;:&quot;17:00&quot;}} or type a plain text schedule'>
+          <Textarea
+            value={settings.businessHours || ''}
+            onChange={(v) => updateSetting('businessHours', v)}
+            rows={4}
+          />
+        </FormField>
+
+        {!isModal && (
+          <div className="flex justify-end pt-2">
+            <button
+              onClick={saveAllSettings}
+              disabled={saving}
+              className="inline-flex items-center gap-2 rounded-lg bg-green-600 px-5 py-2.5 text-sm font-medium text-white shadow-sm hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500/40 disabled:opacity-60 disabled:cursor-not-allowed transition-colors"
+            >
+              <Save className="h-4 w-4" />
+              {saving ? 'Saving...' : 'Save All Settings'}
+            </button>
+          </div>
+        )}
+      </div>
+    </SectionCard>
+  );
+}
+
+/* ── Main Settings Component ────────────────────────── */
+
+export default function Settings() {
+  const { showToast } = useToast();
+  const { user } = useAuth();
+  const userId = user?.id;
+  const location = useLocation();
+  const navigate = useNavigate();
+
+  const modalBackground = (location.state as any)?.backgroundLocation;
+  const isModal = Boolean(modalBackground);
+
+  /* ── State ───────────────────────────────────── */
+  const [activeTab, setActiveTab] = useState('business');
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+
+  // Settings
+  const [settings, setSettings] = useState<ShopSettings>(loadLocalSettings);
+
+  // Account
+  const [accountName, setAccountName] = useState('');
+  const [accountEmail, setAccountEmail] = useState('');
+  const [accountEmailVisibility, setAccountEmailVisibility] = useState(true);
+  const [currentPassword, setCurrentPassword] = useState('');
+  const [newPassword, setNewPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [resendingVerification, setResendingVerification] = useState(false);
+  const [userVerified, setUserVerified] = useState<boolean | null>(null);
+  const [checkingVerification, setCheckingVerification] = useState(false);
+
+  // Service Advisors
+  const [advisors, setAdvisors] = useState<ServiceAdvisor[]>([]);
+  const [advisorsLoading, setAdvisorsLoading] = useState(false);
+  const [advisorsCollMissing, setAdvisorsCollMissing] = useState(false);
+  const [showAdvisorForm, setShowAdvisorForm] = useState(false);
+  const [editingAdvisor, setEditingAdvisor] = useState<ServiceAdvisor | null>(null);
+  const [advisorName, setAdvisorName] = useState('');
+  const [advisorEmail, setAdvisorEmail] = useState('');
+
+  // Notifications
+  const [emailNotifications, setEmailNotifications] = useState(true);
+  const [autoSave, setAutoSave] = useState(true);
+
+  // Dark mode
+  const [darkMode, setDarkMode] = useState(() => {
+    if (typeof document !== 'undefined') {
+      return document.documentElement.classList.contains('dark');
+    }
+    return localStorage.getItem('spq-dark-mode') === 'true';
+  });
+  const roleLabel = getRoleLabel(settings);
+  const roleLabelPlural = roleLabel === 'Service Advisor' ? 'Service Advisors' : 'Technicians';
+
+  async function loadAdvisors() {
+    if (!userId) return;
+    setAdvisorsLoading(true);
+    setAdvisorsCollMissing(false);
+    try {
+      const records = await pb.collection('service_advisors').getFullList({
+        filter: `userId="${userId}"`,
+        sort: 'name',
+      });
+      setAdvisors(records.map((r: Record<string, unknown>) => ({
+        id: r.id as string,
+        name: (r.name as string) || '',
+        email: (r.email as string) || '',
+      })));
+    } catch (err: unknown) {
+      logError('Failed to load advisors', err);
+      if (isMissingCollectionError(err)) {
+        setAdvisorsCollMissing(true);
+      }
+      setAdvisors([]);
+    } finally {
+      setAdvisorsLoading(false);
+    }
+  }
+
+  /* ── Close / Escape handler ───────────────────── */
+
+  const closeSettings = useCallback(() => {
+    if (isModal) {
+      navigate(-1);
+    } else {
+      navigate('/');
+    }
+  }, [isModal, navigate]);
+
+  useEffect(() => {
+    if (!isModal) return;
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') closeSettings();
+    };
+    document.addEventListener('keydown', handler);
+    return () => document.removeEventListener('keydown', handler);
+  }, [isModal, closeSettings]);
+
+  /* ── Initial load ─────────────────────────────── */
+
+  useEffect(() => {
+    if (pb.authStore.model) {
+      setUserVerified(!!pb.authStore.model.verified);
+    }
+
+    setAccountName(typeof user?.name === 'string' ? user.name : '');
+    setAccountEmail(typeof user?.email === 'string' ? user.email : '');
+    setAccountEmailVisibility(Boolean(user?.emailVisibility));
+  }, [user]);
+
+  useEffect(() => {
+    async function init() {
+      setLoading(true);
+      const merged = await loadSettingsForUser(userId);
+      setSettings(merged);
+      useSettingsStore.getState().setSettings(merged);
+
+      // Load advisors
+      await loadAdvisors();
+
+      // Load notif prefs from localStorage
+      const emailNotif = localStorage.getItem('spq-emailNotifications');
+      if (emailNotif !== null) setEmailNotifications(emailNotif === 'true');
+      const autoSavePref = localStorage.getItem('spq-autoSave');
+      if (autoSavePref !== null) setAutoSave(autoSavePref === 'true');
+
+      setLoading(false);
+    }
+    init();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [userId]);
+
+  /* ── Settings update helper ───────────────────── */
+
+  const updateSetting = useCallback(
+    <K extends keyof ShopSettings>(key: K, value: ShopSettings[K]) => {
+      setSettings((prev) => {
+        const next = { ...prev, [key]: value };
+        useSettingsStore.getState().setSettings(next);
+        return next;
+      });
+    },
+    []
+  );
+
+  const saveAllSettings = useCallback(async () => {
+    const parsed = settingsWriteSchema.safeParse(settings);
+    if (!parsed.success) {
+      showToast(`Settings could not be saved: ${formatZodError(parsed.error)}`, 'error');
+      return;
+    }
+    setSaving(true);
+    try {
+      await saveSettingsForUser(userId, settings);
+      useSettingsStore.getState().setSettings(settings);
+      showToast('Settings saved successfully', 'success');
+    } catch (err) {
+      logError('Failed to save settings to cloud', err);
+      useSettingsStore.getState().setSettings(settings);
+      showToast('Settings could not be saved to the cloud. Saved locally.', 'error');
+    } finally {
+      setSaving(false);
+    }
+  }, [settings, showToast, userId]);
+
+  const saveAccountSettings = useCallback(async () => {
+    if (!userId) {
+      showToast('You must be logged in to update account settings', 'error');
+      return;
+    }
+    const trimmedEmail = accountEmail.trim();
+    const currentUserEmail = typeof user?.email === 'string' ? user.email.trim() : '';
+    const emailChanged = trimmedEmail !== currentUserEmail;
+    const passwordChangeRequested = Boolean(newPassword || confirmPassword);
+    const requiresCurrentPassword = emailChanged || passwordChangeRequested;
+
+    const aptParsed = accountSettingsWriteSchema.safeParse({ name: accountName.trim(), email: trimmedEmail });
+    if (!aptParsed.success) {
+      showToast(formatZodError(aptParsed.error), 'error');
+      return;
+    }
+    if (requiresCurrentPassword && !currentPassword) {
+      showToast('Current password is required to change your email or password', 'error');
+      return;
+    }
+    if (passwordChangeRequested) {
+      if (newPassword.length < 8) {
+        showToast('New password must be at least 8 characters', 'error');
+        return;
+      }
+      if (newPassword !== confirmPassword) {
+        showToast('New password and confirmation do not match', 'error');
+        return;
+      }
+    }
+
+    setSaving(true);
+    try {
+      const payload: Record<string, unknown> = {
+        name: accountName.trim(),
+        email: trimmedEmail,
+        emailVisibility: accountEmailVisibility,
+      };
+
+      if (requiresCurrentPassword) {
+        payload.oldPassword = currentPassword;
+      }
+
+      if (passwordChangeRequested) {
+        payload.password = newPassword;
+        payload.passwordConfirm = confirmPassword;
+      }
+
+      await pb.collection('users').update(userId, payload);
+      await pb.collection('users').authRefresh();
+      setCurrentPassword('');
+      setNewPassword('');
+      setConfirmPassword('');
+      showToast('Account settings saved successfully', 'success');
+    } catch (err) {
+      logError('Failed to save account settings', err);
+      showToast('Account settings could not be saved. Please try again.', 'error');
+    } finally {
+      setSaving(false);
+    }
+  }, [accountEmail, accountEmailVisibility, accountName, confirmPassword, currentPassword, newPassword, showToast, user, userId]);
+
+  const resendVerificationEmail = useCallback(async () => {
+    const trimmedEmail = accountEmail.trim();
+    if (!trimmedEmail) {
+      showToast('Email is required before sending a verification email', 'error');
+      return;
+    }
+
+    setResendingVerification(true);
+    try {
+      await pb.collection('users').requestVerification(trimmedEmail);
+      showToast('Verification email sent', 'success');
+    } catch (err) {
+      logError('Failed to send verification email', err);
+      showToast('Verification email could not be sent. Please try again.', 'error');
+    } finally {
+      setResendingVerification(false);
+    }
+  }, [accountEmail, showToast]);
+
+  const refreshVerificationStatus = useCallback(async () => {
+    setCheckingVerification(true);
+    try {
+      await pb.collection('users').authRefresh();
+      setUserVerified(!!pb.authStore.model?.verified);
+      showToast(pb.authStore.model?.verified ? 'Account verified.' : 'Not yet verified.', 'success');
+    } catch (err) {
+      logError('Failed to check verification', err);
+      setUserVerified(!!pb.authStore.model?.verified);
+      showToast('Could not check. Try signing out and in again.', 'error');
+    } finally {
+      setCheckingVerification(false);
+    }
+  }, [showToast]);
+
+  /* ── Advisor CRUD ─────────────────────────────── */
+
+  function resetAdvisorForm() {
+    setAdvisorName('');
+    setAdvisorEmail('');
+    setEditingAdvisor(null);
+    setShowAdvisorForm(false);
+  }
+
+  async function handleSaveAdvisor() {
+    if (!advisorName.trim()) {
+      showToast('Advisor name is required', 'error');
+      return;
+    }
+    if (!userId) {
+      // Fallback: save to local settings
+      updateSetting('serviceAdvisor', advisorName.trim());
+      showToast('Advisor saved locally', 'success');
+      resetAdvisorForm();
+      return;
+    }
+    try {
+      if (editingAdvisor?.id) {
+        await pb.collection('service_advisors').update(editingAdvisor.id, {
+          name: advisorName.trim(),
+          email: advisorEmail.trim(),
+        });
+        showToast('Advisor updated', 'success');
+      } else {
+        await pb.collection('service_advisors').create({
+          name: advisorName.trim(),
+          email: advisorEmail.trim(),
+          userId,
+        });
+        showToast('Advisor added', 'success');
+      }
+      resetAdvisorForm();
+      await loadAdvisors();
+    } catch (err) {
+      logError('Failed to save advisor', err);
+      showToast('Advisor could not be saved. Please try again.', 'error');
+    }
+  }
+
+  async function handleDeleteAdvisor(advisor: ServiceAdvisor) {
+    if (!userId || !advisor.id) {
+      showToast('Cannot delete: not authenticated', 'error');
+      return;
+    }
+    try {
+      await pb.collection('service_advisors').delete(advisor.id);
+      showToast('Advisor removed', 'success');
+      await loadAdvisors();
+    } catch (err) {
+      logError('Failed to delete advisor', err);
+      showToast('Advisor could not be deleted. Please try again.', 'error');
+    }
+  }
+
+  function startEditAdvisor(advisor: ServiceAdvisor) {
+    setEditingAdvisor(advisor);
+    setAdvisorName(advisor.name);
+    setAdvisorEmail(advisor.email);
+    setShowAdvisorForm(true);
+  }
+
+  /* ── Dark mode handler ────────────────────────── */
+
+  const handleDarkModeToggle = useCallback(() => {
+    const next = !darkMode;
+    setDarkMode(next);
+    document.documentElement.classList.toggle('dark', next);
+    localStorage.setItem('spq-dark-mode', String(next));
+  }, [darkMode]);
+
+  /* ── Notifications save ───────────────────────── */
+
+  const saveNotificationPrefs = useCallback(() => {
+    localStorage.setItem('spq-emailNotifications', String(emailNotifications));
+    localStorage.setItem('spq-autoSave', String(autoSave));
+    showToast('Notification preferences saved', 'success');
+  }, [emailNotifications, autoSave, showToast]);
+
+  /* ── Sidebar search ───────────────────────────── */
+
+  const [searchQuery, setSearchQuery] = useState('');
+
+  const groupedTabs = useMemo(() => {
+    const groups = new Map<string, SettingsTab[]>();
+    TABS.forEach((tab) => {
+      const list = groups.get(tab.group) || [];
+      list.push(tab);
+      groups.set(tab.group, list);
+    });
+    return Array.from(groups.entries());
+  }, []);
+
+  const filteredGroups = useMemo(() => {
+    if (!searchQuery.trim()) return groupedTabs;
+    const q = searchQuery.toLowerCase();
+    return groupedTabs
+      .map(
+        ([group, tabs]) =>
+          [group, tabs.filter((t) => t.label.toLowerCase().includes(q) || t.description.toLowerCase().includes(q))] as const,
+      )
+      .filter(([, tabs]) => tabs.length > 0);
+  }, [groupedTabs, searchQuery]);
+
+  /* ── Render ───────────────────────────────────── */
+
+  if (loading) {
+    return (
+      <div className="flex min-h-[60vh] items-center justify-center">
+        <LoadingSpinner text="Loading settings..." />
+    </div>
+  );
+}
+
+  const trimmedAccountEmail = accountEmail.trim();
+  const currentUserEmail = typeof user?.email === 'string' ? user.email.trim() : '';
+  const passwordChangeStarted = newPassword.length > 0 || confirmPassword.length > 0;
+  const emailChangeStarted = trimmedAccountEmail !== currentUserEmail;
+  const requiresCurrentPassword = emailChangeStarted || passwordChangeStarted;
+  const passwordTooShort = passwordChangeStarted && newPassword.length > 0 && newPassword.length < 8;
+  const passwordMismatch = passwordChangeStarted && newPassword !== confirmPassword;
+  const missingCurrentPassword = requiresCurrentPassword && !currentPassword;
+  const accountValidationMessage = !trimmedAccountEmail
+    ? 'Email is required.'
+    : missingCurrentPassword
+      ? 'Current password is required to change your email or password.'
+    : passwordTooShort
+      ? 'New password must be at least 8 characters.'
+    : passwordMismatch
+      ? 'New password and confirmation must match.'
+      : null;
+  const accountHelperMessage = passwordChangeStarted
+    ? accountValidationMessage || 'Password looks good and will be updated when you save.'
+    : 'Leave the password fields blank to keep your current password.';
+  const isAccountSaveDisabled = saving || Boolean(accountValidationMessage);
+
+  const activeTabMeta = TABS.find((tab) => tab.id === activeTab) || TABS[0];
+  const ActiveTabIcon = activeTabMeta.icon;
+  const showsGlobalSave = activeTab !== 'notifications';
+  const handlePrimarySave = activeTab === 'account' ? saveAccountSettings : saveAllSettings;
+  const primarySaveLabel = activeTab === 'account' ? 'Save Account' : 'Save';
+
+  const tabNavigation = (
+    <aside className="flex flex-col h-full">
+      <div className="p-4 border-b border-gray-200 dark:border-gray-700">
+        <div className="relative">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400" />
+          <input
+            type="text"
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            placeholder="Search settings..."
+            className="w-full pl-9 pr-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-sm text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:border-green-500 focus:ring-2 focus:ring-green-500/20 focus:outline-none transition-colors"
+          />
+        </div>
+      </div>
+      <nav className="flex-1 overflow-y-auto p-3 space-y-4">
+        {filteredGroups.map(([group, tabs]) => (
+          <div key={group}>
+            <p className="px-2 mb-1.5 text-xs font-semibold uppercase tracking-wider text-gray-400 dark:text-gray-500">
+              {group}
+            </p>
+            <div className="space-y-0.5">
+              {tabs.map((tab) => {
+                const Icon = tab.icon;
+                const isActive = activeTab === tab.id;
+                return (
+                  <button
+                    key={tab.id}
+                    onClick={() => setActiveTab(tab.id)}
+                    className={`w-full flex items-center gap-2.5 px-2.5 py-2 rounded-lg text-sm font-medium transition-colors ${
+                      isActive
+                        ? 'bg-green-50 text-green-700 dark:bg-green-900/20 dark:text-green-400'
+                        : 'text-gray-600 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-800'
+                    }`}
+                  >
+                    <Icon className="h-4 w-4 shrink-0" />
+                    <span className="truncate">{tab.label}</span>
+                  </button>
+                );
+              })}
+            </div>
+          </div>
+        ))}
+        {filteredGroups.length === 0 && (
+          <p className="text-sm text-gray-400 dark:text-gray-500 text-center py-4">
+            No settings matched your search. Try a broader term.
+          </p>
+        )}
+      </nav>
+    </aside>
+  );
+
+  const settingsPanels = (
+    <>
+      {/* ─── Account Tab ──────────────────────────── */}
+      {activeTab === 'account' && (
+        <SectionCard title="Account Settings" icon={User}>
+          <div className="space-y-5">
+            <FormField label="Full Name" hint="Shown as your profile name in your account.">
+              <Input
+                value={accountName}
+                onChange={setAccountName}
+                placeholder="Your name"
+                prefix={<User className="h-4 w-4" />}
+              />
+            </FormField>
+
+            <FormField label="Email Address" hint="Used to sign in to your account.">
+              <Input
+                type="email"
+                value={accountEmail}
+                onChange={setAccountEmail}
+                placeholder="you@example.com"
+                prefix={<Mail className="h-4 w-4" />}
+              />
+            </FormField>
+
+            <Toggle
+              label="Public Email Visibility"
+              description="Controls the PocketBase email visibility flag for your user profile."
+              enabled={accountEmailVisibility}
+              onChange={setAccountEmailVisibility}
+            />
+
+            <div className="grid gap-4 sm:grid-cols-3">
+              <FormField label="Current Password" hint="Required only when changing your email or password.">
+                <Input
+                  type="password"
+                  value={currentPassword}
+                  onChange={setCurrentPassword}
+                  placeholder={requiresCurrentPassword ? 'Enter current password' : 'Not required for this change'}
+                />
+              </FormField>
+
+              <FormField label="New Password" hint="Leave blank to keep your current password.">
+                <Input
+                  type="password"
+                  value={newPassword}
+                  onChange={setNewPassword}
+                  placeholder="Minimum 8 characters"
+                />
+              </FormField>
+
+              <FormField label="Confirm New Password">
+                <Input
+                  type="password"
+                  value={confirmPassword}
+                  onChange={setConfirmPassword}
+                  placeholder="Re-enter new password"
+                />
+              </FormField>
+            </div>
+
+            <div className={`rounded-xl border px-4 py-3 text-sm ${accountValidationMessage ? 'border-amber-200 bg-amber-50 text-amber-700 dark:border-amber-700 dark:bg-amber-900/20 dark:text-amber-300' : 'border-gray-200 bg-gray-50 text-gray-600 dark:border-gray-700 dark:bg-gray-800/50 dark:text-gray-300'}`}>
+              {accountHelperMessage}
+            </div>
+
+            <div className="rounded-xl border border-gray-200 bg-gray-50 px-4 py-3 text-sm dark:border-gray-700 dark:bg-gray-800/50">
+              <div className="flex flex-wrap items-center justify-between gap-3">
+                <div>
+                  <span className="text-gray-500 dark:text-gray-400">Account verification</span>
+                  {!userVerified && (
+                    <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
+                      Verify your email via the link we sent, then sign out and sign in again to update your account status.
+                    </p>
+                  )}
+                </div>
+                <div className="flex items-center gap-2">
+                  <span className={`inline-flex items-center rounded-full px-2.5 py-1 text-xs font-medium ${userVerified ? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300' : 'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300'}`}>
+                    {userVerified ? 'Verified' : 'Unverified'}
+                  </span>
+                  {!userVerified && (
+                    <>
+                      <button
+                        type="button"
+                        onClick={resendVerificationEmail}
+                        disabled={resendingVerification || !trimmedAccountEmail}
+                        className="inline-flex items-center rounded-lg border border-gray-300 px-3 py-1.5 text-xs font-medium text-gray-700 transition-colors hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-60 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-700"
+                      >
+                        {resendingVerification ? 'Sending...' : 'Resend Email'}
+                      </button>
+                      <button
+                        type="button"
+                        onClick={refreshVerificationStatus}
+                        disabled={checkingVerification}
+                        className="inline-flex items-center rounded-lg border border-gray-300 px-3 py-1.5 text-xs font-medium text-gray-700 transition-colors hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-60 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-700"
+                      >
+                        {checkingVerification ? 'Checking...' : 'Refresh Status'}
+                      </button>
+                    </>
+                  )}
+                </div>
+              </div>
+            </div>
+
+            <div className="rounded-xl border border-gray-200 bg-gray-50 px-4 py-3 text-sm dark:border-gray-700 dark:bg-gray-800/50">
+              <div className="flex items-center justify-between">
+                <div>
+                  <span className="font-medium text-gray-700 dark:text-gray-200">Data & Privacy</span>
+                  <p className="mt-0.5 text-xs text-gray-500 dark:text-gray-400">
+                    Export your data or permanently delete your account.
+                  </p>
+                </div>
+                <Link
+                  to="/privacy"
+                  className="inline-flex items-center gap-1.5 rounded-lg border border-gray-300 bg-white px-3 py-1.5 text-xs font-medium text-gray-700 transition-colors hover:bg-gray-100 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600"
+                >
+                  <Shield className="h-3.5 w-3.5" />
+                  Manage
+                </Link>
+              </div>
+            </div>
+
+            {!isModal && (
+            <div className="flex justify-end pt-2">
+              <button
+                onClick={saveAccountSettings}
+                disabled={isAccountSaveDisabled}
+                className="inline-flex items-center gap-2 rounded-lg bg-green-600 px-5 py-2.5 text-sm font-medium text-white shadow-sm hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500/40 disabled:opacity-60 disabled:cursor-not-allowed transition-colors"
+              >
+                <Save className="h-4 w-4" />
+                {saving ? 'Saving...' : 'Save Account Settings'}
+              </button>
+            </div>
+            )}
+          </div>
+        </SectionCard>
+      )}
+
+      {/* ─── Business Info Tab ─────────────────────── */}
+      {activeTab === 'business' && (
+        <SectionCard title="Business Information" icon={Store}>
+          <div className="space-y-4">
+            <FormField label="Business Name">
+              <Input
+                value={settings.businessName}
+                onChange={(v) => updateSetting('businessName', v)}
+                placeholder="e.g. Joe's Auto Repair"
+                prefix={<Building2 className="h-4 w-4" />}
+              />
+            </FormField>
+            <FormField label="Business Address">
+              <Textarea
+                value={settings.businessAddress}
+                onChange={(v) => updateSetting('businessAddress', v)}
+                placeholder="123 Main St, City, State ZIP"
+                rows={2}
+              />
+            </FormField>
+            <FormField label="Business Phone">
+              <Input
+                value={settings.businessPhone}
+                onChange={(v) => updateSetting('businessPhone', v)}
+                placeholder="(555) 555-5555"
+                prefix={<Phone className="h-4 w-4" />}
+              />
+            </FormField>
+            <FormField label="Default Service Advisor" hint="Pre-fills the Service Advisor field when creating new quotes">
+              <Input
+                value={settings.serviceAdvisor}
+                onChange={(v) => updateSetting('serviceAdvisor', v)}
+                placeholder="e.g. John Smith"
+                prefix={<User className="h-4 w-4" />}
+              />
+            </FormField>
+            {!isModal && (
+            <div className="flex justify-end pt-2">
+              <button
+                onClick={saveAllSettings}
+                disabled={saving}
+                className="inline-flex items-center gap-2 rounded-lg bg-green-600 px-5 py-2.5 text-sm font-medium text-white shadow-sm hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500/40 disabled:opacity-60 disabled:cursor-not-allowed transition-colors"
+              >
+                <Save className="h-4 w-4" />
+                {saving ? 'Saving...' : 'Save All Settings'}
+              </button>
+            </div>
+            )}
+          </div>
+        </SectionCard>
+      )}
+
+      {/* ─── Service Advisors Tab ──────────────────── */}
+      {activeTab === 'advisors' && (
+        <SectionCard title={roleLabelPlural} icon={User}>
+          <div className="space-y-4">
+            {!userId && (
+              <div className="rounded-lg bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-700 p-3 text-sm text-amber-700 dark:text-amber-300">
+                Log in to manage advisors. For now, changes save locally.
+              </div>
+            )}
+
+            {/* Setup state for missing service_advisors collection */}
+            {advisorsCollMissing && (
+              <div className="mb-4">
+                <SetupBanner collectionName="service_advisors" />
+              </div>
+            )}
+
+            {/* Advisor list */}
+            {advisorsLoading ? (
+              <LoadingSpinner text="Loading advisors..." />
+            ) : advisors.length === 0 && !showAdvisorForm ? (
+              <p className="text-sm text-gray-400 dark:text-gray-500 text-center py-4">
+                No {roleLabelPlural.toLowerCase()} have been configured yet. Add one to keep customer-facing records consistent.
+              </p>
+            ) : (
+              <div className="space-y-2">
+                {advisors.map((advisor) => (
+                  <AdvisorRow
+                    key={advisor.id || advisor.name}
+                    advisor={advisor}
+                    onEdit={() => startEditAdvisor(advisor)}
+                    onDelete={() => handleDeleteAdvisor(advisor)}
+                  />
+                ))}
+              </div>
+            )}
+
+            {/* Advisor form */}
+            {showAdvisorForm && (
+              <div className="rounded-lg border border-green-200 dark:border-green-700 bg-green-50 dark:bg-green-900/10 p-4 space-y-3">
+                <h3 className="text-sm font-semibold text-gray-900 dark:text-gray-100">
+                  {editingAdvisor ? `Edit ${roleLabel}` : `Add ${roleLabel}`}
+                </h3>
+                <FormField label="Name">
+                  <Input
+                    value={advisorName}
+                    onChange={setAdvisorName}
+                    placeholder="e.g. John Smith"
+                    prefix={<User className="h-4 w-4" />}
+                  />
+                </FormField>
+                <FormField label="Email">
+                  <Input
+                    value={advisorEmail}
+                    onChange={setAdvisorEmail}
+                    placeholder="john@example.com"
+                    prefix={<Mail className="h-4 w-4" />}
+                  />
+                </FormField>
+                <div className="flex justify-end gap-2 pt-1">
+                  <button
+                    onClick={resetAdvisorForm}
+                    className="inline-flex items-center gap-1.5 rounded-lg border border-gray-300 dark:border-gray-600 px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
+                  >
+                    <X className="h-4 w-4" />
+                    Cancel
+                  </button>
+                  <button
+                    onClick={handleSaveAdvisor}
+                    className="inline-flex items-center gap-1.5 rounded-lg bg-green-600 px-4 py-2 text-sm font-medium text-white hover:bg-green-700 transition-colors"
+                  >
+                    <Check className="h-4 w-4" />
+                    {editingAdvisor ? 'Update' : 'Add'}
+                  </button>
+                </div>
+              </div>
+            )}
+
+            {/* Add button */}
+            {!showAdvisorForm && (
+              <button
+                onClick={() => setShowAdvisorForm(true)}
+                className="inline-flex items-center gap-1.5 rounded-lg border border-dashed border-gray-300 dark:border-gray-600 px-4 py-2 text-sm font-medium text-gray-600 dark:text-gray-400 hover:border-green-400 hover:text-green-600 dark:hover:text-green-400 transition-colors"
+              >
+                <Plus className="h-4 w-4" />
+                Add {roleLabel}
+              </button>
+            )}
+          </div>
+        </SectionCard>
+      )}
+
+      {/* ─── Tax & Fees Tab ────────────────────────── */}
+      {activeTab === 'tax' && (
+        <SectionCard title="Tax & Fees" icon={DollarSign}>
+          <div className="space-y-5">
+            <div className="grid gap-4 sm:grid-cols-2">
+              <FormField label="Tax Rate (%)">
+                <Input
+                  type="number"
+                  value={settings.taxRate}
+                  onChange={(v) => updateSetting('taxRate', Number(v) || 0)}
+                  placeholder="e.g. 8.25"
+                  prefix={<Percent className="h-4 w-4" />}
+                />
+              </FormField>
+              <FormField
+                label="Shop Charge Rate (%)"
+                hint="Applied to selected services with the shop-charge flag"
+              >
+                <Input
+                  type="number"
+                  value={settings.shopChargeRate}
+                  onChange={(v) => updateSetting('shopChargeRate', Number(v) || 0)}
+                  placeholder="e.g. 3"
+                  prefix={<Percent className="h-4 w-4" />}
+                />
+              </FormField>
+              <FormField
+                label="Shop Charge Cap ($)"
+                hint="Maximum shop-charge amount per quote (0 = no cap)"
+              >
+                <Input
+                  type="number"
+                  value={settings.shopChargeCap}
+                  onChange={(v) => updateSetting('shopChargeCap', Number(v) || 0)}
+                  placeholder="e.g. 69.95"
+                  prefix={<DollarIcon className="h-4 w-4" />}
+                />
+              </FormField>
+            </div>
+            <FormField
+              label="Shop Charge Explanation"
+              hint="Displayed on the quote next to the shop charge line item"
+            >
+              <Textarea
+                value={settings.shopChargeExplanation}
+                onChange={(v) => updateSetting('shopChargeExplanation', v)}
+                placeholder="e.g. A 3% shop charge is added to cover shop supplies..."
+                rows={3}
+              />
+            </FormField>
+            {!isModal && (
+            <div className="flex justify-end pt-2">
+              <button
+                onClick={saveAllSettings}
+                disabled={saving}
+                className="inline-flex items-center gap-2 rounded-lg bg-green-600 px-5 py-2.5 text-sm font-medium text-white shadow-sm hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500/40 disabled:opacity-60 disabled:cursor-not-allowed transition-colors"
+              >
+                <Save className="h-4 w-4" />
+                {saving ? 'Saving...' : 'Save Tax & Fees'}
+              </button>
+            </div>
+            )}
+          </div>
+        </SectionCard>
+      )}
+
+      {/* ─── Quote Defaults Tab ─────────────────────── */}
+      {activeTab === 'quotes' && (
+        <SectionCard title="Quote Defaults" icon={MessageSquareText}>
+          <div className="space-y-5">
+            <FormField
+              label="Header Message"
+              hint="Use {'{customerName}'} and {'{vehicleInfo}'} as placeholders"
+            >
+              <Textarea
+                value={settings.headerMessage}
+                onChange={(v) => updateSetting('headerMessage', v)}
+                placeholder="Hi {customerName}, here is the explanation..."
+                rows={3}
+              />
+            </FormField>
+            <FormField label="Footer Message" hint="Wrap text in {accent}…{/accent}, {muted}…{/muted}, or {bold}…{/bold} to style a portion of it.">
+              <Textarea
+                value={settings.footerMessage}
+                onChange={(v) => updateSetting('footerMessage', v)}
+                placeholder="Thank you for choosing our shop!"
+                rows={2}
+              />
+              <RichTextPreview text={settings.footerMessage} accentHex={settings.pdfAccentColor} />
+            </FormField>
+            <FormField label="Quote Footer Note" hint="Same {accent}/{muted}/{bold} markup supported. {days} is auto-replaced with the quote-expiry-day count.">
+              <Textarea
+                value={settings.quoteFooterNote}
+                onChange={(v) => updateSetting('quoteFooterNote', v)}
+                placeholder="All prices include parts and labor unless otherwise noted."
+                rows={2}
+              />
+              <RichTextPreview text={settings.quoteFooterNote} accentHex={settings.pdfAccentColor} />
+            </FormField>
+            {!isModal && (
+            <div className="flex justify-end pt-2">
+              <button
+                onClick={saveAllSettings}
+                disabled={saving}
+                className="inline-flex items-center gap-2 rounded-lg bg-green-600 px-5 py-2.5 text-sm font-medium text-white shadow-sm hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500/40 disabled:opacity-60 disabled:cursor-not-allowed transition-colors"
+              >
+                <Save className="h-4 w-4" />
+                {saving ? 'Saving...' : 'Save Quote Defaults'}
+              </button>
+            </div>
+            )}
+          </div>
+        </SectionCard>
+      )}
+
+      {/* ─── PDF & Branding Tab ─────────────────────── */}
+      {activeTab === 'pdf' && (
+        <div className="space-y-6">
+          <PDFBrandingSection
+            settings={settings}
+            updateSetting={updateSetting}
+            saveAllSettings={saveAllSettings}
+            userId={userId}
+            saving={saving}
+            isModal={isModal}
+          />
+          <QuotePdfAppearanceSection
+            settings={settings}
+            updateSetting={updateSetting}
+          />
+        </div>
+      )}
+
+      {/* ─── Business Ops Tab ───────────────────────── */}
+      {activeTab === 'business-ops' && (
+        <div className="space-y-6">
+          <BusinessOpsSection
+            settings={settings}
+            updateSetting={updateSetting}
+            saveAllSettings={saveAllSettings}
+            saving={saving}
+            isModal={isModal}
+          />
+          <SectionCard title="Service Catalog" icon={Wrench}>
+            <div className="rounded-xl border border-dashed border-gray-300 bg-gray-50 p-4 dark:border-gray-700 dark:bg-gray-800/50">
+              <p className="text-sm font-medium text-gray-900 dark:text-gray-100">Service Catalog now lives in its own workspace.</p>
+              <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">Open the dedicated page to manage reusable services, pricing templates, and active catalog items.</p>
+              <div className="mt-4">
+                <Link
+                  to="/service-catalog"
+                  className="inline-flex items-center gap-2 rounded-lg bg-green-600 px-4 py-2.5 text-sm font-medium text-white transition-colors hover:bg-green-700"
+                >
+                  <Wrench className="h-4 w-4" />
+                  Open Service Catalog
+                </Link>
+              </div>
+            </div>
+          </SectionCard>
+        </div>
+      )}
+
+      {/* ─── Notifications Tab ──────────────────────── */}
+      {activeTab === 'notifications' && (
+        <div className="space-y-6">
+          <SectionCard title="Notification Preferences" icon={Bell}>
+            <div className="space-y-1 divide-y divide-gray-100 dark:divide-gray-700">
+              <Toggle
+                label="Email Notifications"
+                description="Receive email notifications for quote updates and approvals"
+                enabled={emailNotifications}
+                onChange={setEmailNotifications}
+              />
+              <Toggle
+                label="Auto-Save Forms"
+                description="Automatically save form data as you type to prevent data loss"
+                enabled={autoSave}
+                onChange={setAutoSave}
+              />
+            </div>
+            <div className="flex justify-end pt-4">
+              <button
+                onClick={saveNotificationPrefs}
+                className="inline-flex items-center gap-2 rounded-lg bg-green-600 px-5 py-2.5 text-sm font-medium text-white shadow-sm hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500/40 transition-colors"
+              >
+                <Save className="h-4 w-4" />
+                Save Preferences
+              </button>
+            </div>
+          </SectionCard>
+
+          <SectionCard title="Appearance" icon={Moon}>
+            <div className="space-y-4">
+              <Toggle
+                label="Dark Mode"
+                description="Toggle dark mode for the entire application"
+                enabled={darkMode}
+                onChange={handleDarkModeToggle}
+              />
+              <div className="rounded-lg bg-gray-50 dark:bg-gray-750 border border-gray-200 dark:border-gray-700 p-3">
+                <div className="flex items-center gap-2 text-sm">
+                  <Moon className="h-4 w-4 text-gray-400" />
+                  <span className="text-gray-600 dark:text-gray-400">
+                    Current theme:{' '}
+                    <span className="font-medium text-gray-900 dark:text-gray-100">
+                      {darkMode ? 'Dark' : 'Light'}
+                    </span>
+                  </span>
+                  <span
+                    className={`ml-auto inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${
+                      darkMode
+                        ? 'bg-indigo-100 text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-300'
+                        : 'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300'
+                    }`}
+                  >
+                    {darkMode ? 'Dark' : 'Light'}
+                  </span>
+                </div>
+              </div>
+            </div>
+          </SectionCard>
+        </div>
+      )}
+    </>
+  );
+
+  const settingsContent = (
+    <div className="flex h-full min-h-0">
+      <div className="hidden w-72 shrink-0 lg:block">{tabNavigation}</div>
+      <div className="flex min-h-0 flex-1 flex-col bg-gray-50 dark:bg-gray-950">
+        <div className="sticky top-0 z-10 border-b border-gray-200 bg-gray-50/95 px-5 py-4 backdrop-blur dark:border-gray-800 dark:bg-gray-950/95 sm:px-8">
+          <div className="flex items-start justify-between gap-4">
+            <div className="min-w-0">
+              <div className="flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.2em] text-gray-400 dark:text-gray-500">
+                <ActiveTabIcon className="h-3.5 w-3.5" />
+                {activeTabMeta.label}
+              </div>
+              <h1 className="mt-2 text-2xl font-semibold text-gray-900 dark:text-gray-100">Settings</h1>
+              <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
+                {activeTabMeta.description}
+              </p>
+            </div>
+            <div className="flex items-center gap-2">
+              {showsGlobalSave && (
+                <button
+                  type="button"
+                  onClick={handlePrimarySave}
+                  disabled={activeTab === 'account' ? isAccountSaveDisabled : saving}
+                  className="inline-flex items-center gap-2 rounded-xl bg-gray-900 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-black disabled:cursor-not-allowed disabled:opacity-60 dark:bg-white dark:text-gray-900 dark:hover:bg-gray-200"
+                >
+                  <Save className="h-4 w-4" />
+                  {saving ? 'Saving...' : primarySaveLabel}
+                </button>
+              )}
+              <button
+                type="button"
+                onClick={closeSettings}
+                className="rounded-xl p-2 text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600 dark:hover:bg-gray-800 dark:hover:text-gray-200"
+                aria-label="Close settings"
+              >
+                <X className="h-5 w-5" />
+              </button>
+            </div>
+          </div>
+
+          <div className="mt-4 lg:hidden">{tabNavigation}</div>
+        </div>
+
+        <div className="min-h-0 flex-1 overflow-y-auto px-5 py-6 sm:px-8">
+          <div className="mx-auto max-w-4xl space-y-6">{settingsPanels}</div>
+        </div>
+      </div>
+    </div>
+  );
+
+  if (!isModal) {
+    return settingsContent;
+  }
+
+  return (
+    <RequireOwnerRole>
+      <div className="fixed inset-0 z-50">
+      <button
+        type="button"
+        aria-label="Close settings"
+        className="absolute inset-0 bg-gray-950/45 backdrop-blur-sm"
+        onClick={closeSettings}
+      />
+      <div className="absolute inset-0 flex items-center justify-center p-3 sm:p-6">
+        <div className="relative flex h-[min(92vh,56rem)] w-full max-w-6xl overflow-hidden rounded-3xl border border-gray-200 bg-gray-50 shadow-2xl dark:border-gray-700 dark:bg-gray-950">
+          <div className="flex-1 overflow-y-auto">
+            {settingsContent}
+          </div>
+        </div>
+      </div>
+    </div>
+    </RequireOwnerRole>
+  );
+}
diff --git a/src/pages/Setup.tsx b/src/pages/Setup.tsx
new file mode 100644
index 0000000..fec90ed
--- /dev/null
+++ b/src/pages/Setup.tsx
@@ -0,0 +1,578 @@
+import { useEffect, useMemo, useState, type ReactNode } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Building2, DollarSign, FileImage, CheckCircle2, Truck, Upload, X } from 'lucide-react';
+import { pb, APP_NAME, useAuth } from '../lib/pocketbase';
+import type { ShopSettings } from '../types';
+import { getAddressLabel, getRoleLabel, loadSettings, loadSettingsForUser, saveSettingsForUser, isSetupComplete, uploadLogoFile, removeLogoFile } from '../lib/settings';
+import { useSettingsStore } from '../store/settings';
+import { useToast } from '../components/ui/Toast';
+import { logError } from '../lib/userMessages';
+
+type StepId = 'business' | 'pricing' | 'quotes' | 'review';
+
+const STEPS: { id: StepId; label: string; icon: React.ComponentType<{ className?: string }> }[] = [
+  { id: 'business', label: 'Business Profile', icon: Building2 },
+  { id: 'pricing', label: 'Pricing Defaults', icon: DollarSign },
+  { id: 'quotes', label: 'Quote & Branding', icon: FileImage },
+  { id: 'review', label: 'Review', icon: CheckCircle2 },
+];
+
+function SectionCard({ title, hint, children }: { title: string; hint?: string; children: ReactNode }) {
+  return (
+    <div className="rounded-2xl border border-gray-200 bg-white p-6 shadow-sm dark:border-gray-800 dark:bg-gray-900">
+      <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">{title}</h2>
+      {hint && <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">{hint}</p>}
+      <div className="mt-5 space-y-4">{children}</div>
+    </div>
+  );
+}
+
+function FormField({ label, hint, children }: { label: string; hint?: string; children: ReactNode }) {
+  return (
+    <div className="space-y-1.5">
+      <label className="block text-sm font-medium text-gray-700 dark:text-gray-300">{label}</label>
+      {children}
+      {hint && <p className="text-xs text-gray-400 dark:text-gray-500">{hint}</p>}
+    </div>
+  );
+}
+
+function Input({ id, value, onChange, type = 'text', placeholder }: { id?: string; value: string | number; onChange: (value: string) => void; type?: string; placeholder?: string }) {
+  return (
+    <input
+      id={id}
+      type={type}
+      value={value}
+      onChange={(e) => onChange(e.target.value)}
+      placeholder={placeholder}
+      className="w-full rounded-xl border border-gray-300 bg-white px-3 py-2.5 text-sm text-gray-900 shadow-sm focus:border-green-500 focus:outline-none focus:ring-2 focus:ring-green-500/20 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100"
+    />
+  );
+}
+
+function Textarea({ id, value, onChange, rows = 3, placeholder }: { id?: string; value: string; onChange: (value: string) => void; rows?: number; placeholder?: string }) {
+  return (
+    <textarea
+      id={id}
+      value={value}
+      onChange={(e) => onChange(e.target.value)}
+      rows={rows}
+      placeholder={placeholder}
+      className="w-full rounded-xl border border-gray-300 bg-white px-3 py-2.5 text-sm text-gray-900 shadow-sm focus:border-green-500 focus:outline-none focus:ring-2 focus:ring-green-500/20 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100"
+    />
+  );
+}
+
+function ChecklistCard({ items }: { items: string[] }) {
+  return (
+    <div className="rounded-2xl border border-amber-200 bg-amber-50 p-4 dark:border-amber-900/60 dark:bg-amber-950/20">
+      <p className="text-sm font-semibold text-amber-900 dark:text-amber-200">Complete this step before continuing</p>
+      <ul className="mt-3 space-y-2 text-sm text-amber-800 dark:text-amber-300">
+        {items.map((item) => (
+          <li key={item} className="flex items-start gap-2">
+            <span className="mt-0.5 inline-block h-1.5 w-1.5 rounded-full bg-amber-500" />
+            <span>{item}</span>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+function focusField(fieldId?: string) {
+  if (!fieldId || typeof document === 'undefined') return;
+  const element = document.getElementById(fieldId) as HTMLInputElement | HTMLTextAreaElement | null;
+  element?.focus();
+}
+
+export default function Setup() {
+  const navigate = useNavigate();
+  const { user } = useAuth();
+  const { showToast } = useToast();
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [stepIndex, setStepIndex] = useState(0);
+  const [settings, setSettings] = useState<ShopSettings>(loadSettings);
+
+  useEffect(() => {
+    let active = true;
+
+    async function init() {
+      setLoading(true);
+      const next = await loadSettingsForUser(user?.id);
+      if (!active) return;
+      if (isSetupComplete(next)) {
+        navigate('/', { replace: true });
+        return;
+      }
+      if (next.businessType === 'shop' || next.businessType === 'home') {
+        next.businessType = next.businessType === 'home' ? 'mobile' : 'advisor';
+      }
+      setSettings(next);
+      useSettingsStore.getState().setSettings(next);
+      setLoading(false);
+    }
+
+    void init();
+    return () => {
+      active = false;
+    };
+  }, [navigate, user?.id]);
+
+  const currentStep = STEPS[stepIndex];
+  const roleLabel = getRoleLabel(settings);
+  const businessAddressLabel = getAddressLabel(settings);
+  const businessAddressHint = settings.businessType === 'mobile' || settings.businessType === 'home'
+    ? 'Enter the city, region, or service radius you cover.'
+    : 'Enter the address that should appear on customer-facing documents.';
+  const roleNameLabel = `Default ${roleLabel} Name`;
+
+  const applyBusinessTypePreset = (businessType: ShopSettings['businessType']) => {
+    setSettings((prev) => {
+      const next = { ...prev, businessType };
+
+      if (!prev.taxLabel.trim()) next.taxLabel = 'Tax';
+
+      if (!prev.footerMessage.trim() || prev.footerMessage === 'Thank you for choosing our shop for your automotive care!') {
+        next.footerMessage = businessType === 'mobile' || businessType === 'home'
+          ? 'Thank you for choosing our mobile automotive service.'
+          : 'Thank you for choosing our shop for your automotive care!';
+      }
+
+      if (!prev.headerMessage.trim() || prev.headerMessage === 'Hi {customerName}, here is the explanation of the services and repairs that your technician has recommended for your {vehicleInfo}.') {
+        next.headerMessage = businessType === 'advisor'
+          ? 'Hi {customerName}, here is the explanation of the services and repairs that your service advisor has prepared for your {vehicleInfo}.'
+          : 'Hi {customerName}, here is the explanation of the services and repairs that your technician has recommended for your {vehicleInfo}.';
+      }
+
+      if (!prev.quoteFooterNote.trim() || prev.quoteFooterNote === 'This quote is valid for {days} days from the date above.') {
+        next.quoteFooterNote = businessType === 'mobile' || businessType === 'home'
+          ? 'This service quote is valid for {days} days from the date above.'
+          : 'This quote is valid for {days} days from the date above.';
+      }
+
+      if (!prev.paymentTerms.trim() || prev.paymentTerms === 'Due on Receipt') {
+        next.paymentTerms = businessType === 'mobile' || businessType === 'home'
+          ? 'Payment due at service completion'
+          : 'Due on Receipt';
+      }
+
+      useSettingsStore.getState().setSettings(next);
+      return next;
+    });
+  };
+
+  const updateSetting = <K extends keyof ShopSettings>(key: K, value: ShopSettings[K]) => {
+    setSettings((prev) => {
+      const next = { ...prev, [key]: value };
+      useSettingsStore.getState().setSettings(next);
+      return next;
+    });
+  };
+
+  const stepValid = useMemo(() => {
+    switch (currentStep.id) {
+      case 'business':
+        return Boolean(
+          settings.businessName.trim() &&
+          settings.businessPhone.trim() &&
+          settings.serviceAdvisor.trim()
+        );
+      case 'pricing':
+        return Number(settings.defaultLaborRate) > 0;
+      default:
+        return true;
+    }
+  }, [currentStep.id, settings]);
+
+  const stepIssues = useMemo<{ id: string; message: string }[]>(() => {
+    switch (currentStep.id) {
+      case 'business': {
+        const issues: { id: string; message: string }[] = [];
+        if (!settings.businessName.trim()) issues.push({ id: 'setup-business-name', message: 'Enter the business name shown on quotes and invoices.' });
+        if (!settings.businessPhone.trim()) issues.push({ id: 'setup-business-phone', message: 'Enter the primary business phone number customers should call.' });
+        if (!settings.serviceAdvisor.trim()) issues.push({ id: 'setup-role-name', message: `Enter the default ${roleLabel.toLowerCase()} name used on quotes and repair orders.` });
+        return issues;
+      }
+      case 'pricing': {
+        const issues: { id: string; message: string }[] = [];
+        if (Number(settings.defaultLaborRate) <= 0) issues.push({ id: 'setup-labor-rate', message: 'Set a default labor rate greater than $0 per hour.' });
+        if (Number(settings.taxRate) < 0) issues.push({ id: 'setup-tax-rate', message: 'Tax rate cannot be negative.' });
+        if (!settings.taxLabel.trim()) issues.push({ id: 'setup-tax-label', message: 'Enter the label used for tax on customer documents.' });
+        return issues;
+      }
+      case 'quotes': {
+        const issues: { id: string; message: string }[] = [];
+        if (Number(settings.quoteExpiryDays) <= 0) issues.push({ id: 'setup-quote-expiry', message: 'Set a quote expiration period greater than 0 days.' });
+        if (!settings.quoteFooterNote.trim()) issues.push({ id: 'setup-quote-footer', message: 'Add a quote footer note for customer-facing documents.' });
+        return issues;
+      }
+      default:
+        return [] as { id: string; message: string }[];
+    }
+  }, [currentStep.id, roleLabel, settings]);
+
+  const setupProgress = useMemo(() => {
+    const checks = [
+      Boolean(settings.businessName.trim()),
+      Boolean(settings.businessPhone.trim()),
+      Boolean(settings.serviceAdvisor.trim()),
+      Number(settings.defaultLaborRate) > 0,
+      Number(settings.quoteExpiryDays) > 0,
+      Boolean(settings.paymentTerms.trim()),
+    ];
+    const completed = checks.filter(Boolean).length;
+    return Math.round((completed / checks.length) * 100);
+  }, [settings]);
+
+  const handleLogoUpload = async (file: File | null) => {
+    if (!file) return;
+    if (file.size > 500 * 1024) {
+      showToast('Logo must be under 500KB.', 'error');
+      return;
+    }
+    try {
+      const base64 = await uploadLogoFile(user?.id ?? '', file);
+      updateSetting('logoUrl', base64);
+    } catch {
+      showToast('Failed to upload logo', 'error');
+    }
+  };
+
+  const handleNext = () => {
+    if (!stepValid) {
+      focusField(stepIssues[0]?.id);
+      return;
+    }
+    setStepIndex((prev) => Math.min(prev + 1, STEPS.length - 1));
+  };
+
+  const handleFinish = async () => {
+    if (!isSetupComplete(settings)) {
+      showToast('Complete the required business profile fields before finishing setup.', 'error');
+      focusField('setup-business-name');
+      return;
+    }
+
+    setSaving(true);
+    try {
+      await saveSettingsForUser(user?.id, settings);
+      useSettingsStore.getState().setSettings(settings);
+
+      const selectedRole = settings.businessType === 'mobile' ? 'mobile' : 'advisor';
+      if (user?.id) {
+        try {
+          await pb.collection('users').update(user.id, { role: selectedRole });
+          await pb.collection('users').authRefresh();
+        } catch (roleErr) {
+          logError('Failed to update user role', roleErr);
+        }
+      }
+
+      showToast('Setup complete.', 'success');
+      navigate('/', { replace: true });
+    } catch (err) {
+      logError('Failed to finish setup', err);
+      showToast('Setup was saved locally. You can continue, but cloud sync could not be completed.', 'info');
+      navigate('/', { replace: true });
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="flex min-h-screen items-center justify-center bg-gray-50 px-4 dark:bg-gray-950">
+        <div className="flex items-center gap-3 text-sm text-gray-500 dark:text-gray-400">
+          <div className="h-5 w-5 animate-spin rounded-full border-2 border-green-600 border-t-transparent" />
+          Loading setup...
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-[radial-gradient(circle_at_top_left,_rgba(22,163,74,0.10),_transparent_32%),radial-gradient(circle_at_top_right,_rgba(15,23,42,0.08),_transparent_28%)] bg-gray-50 px-4 py-10 dark:bg-[radial-gradient(circle_at_top_left,_rgba(34,197,94,0.16),_transparent_30%),radial-gradient(circle_at_top_right,_rgba(148,163,184,0.08),_transparent_24%)] dark:bg-gray-950">
+      <div className="mx-auto max-w-5xl">
+        <div className="mb-8 flex flex-col gap-6 lg:flex-row lg:items-end lg:justify-between">
+          <div>
+          <p className="text-xs font-semibold uppercase tracking-[0.2em] text-green-600 dark:text-green-400">
+            First-Run Setup
+          </p>
+          <h1 className="mt-2 text-3xl font-semibold text-gray-900 dark:text-white">
+            Set up your business profile
+          </h1>
+          <p className="mt-2 max-w-2xl text-sm text-gray-500 dark:text-gray-400">
+            These details appear on quotes, repair orders, invoices, and other customer-facing documents.
+          </p>
+          </div>
+          <div className="rounded-2xl border border-gray-200 bg-white/90 px-5 py-4 shadow-sm backdrop-blur dark:border-gray-800 dark:bg-gray-900/80">
+            <p className="text-xs font-semibold uppercase tracking-[0.18em] text-gray-400 dark:text-gray-500">Setup Progress</p>
+            <div className="mt-2 flex items-end gap-3">
+              <span className="text-3xl font-semibold text-gray-900 dark:text-white">{setupProgress}%</span>
+                  <span className="pb-1 text-sm text-gray-500 dark:text-gray-400">workflow defaults ready</span>
+            </div>
+            <div className="mt-3 h-2.5 overflow-hidden rounded-full bg-gray-200 dark:bg-gray-800">
+              <div className="h-full rounded-full bg-green-600 transition-all" style={{ width: `${setupProgress}%` }} />
+            </div>
+          </div>
+        </div>
+
+        <div className="mb-8 grid gap-3 sm:grid-cols-4">
+          {STEPS.map((step, index) => {
+            const active = index === stepIndex;
+            const complete = index < stepIndex;
+            return (
+              <div
+                key={step.id}
+                className={`rounded-2xl border px-4 py-3 ${
+                  active
+                    ? 'border-green-500 bg-green-50 dark:border-green-600 dark:bg-green-900/20'
+                    : complete
+                      ? 'border-gray-300 bg-white dark:border-gray-700 dark:bg-gray-900'
+                      : 'border-gray-200 bg-white/80 dark:border-gray-800 dark:bg-gray-900/60'
+                }`}
+              >
+                <div className="flex items-center gap-2">
+                  <step.icon className={`h-4 w-4 ${active ? 'text-green-600 dark:text-green-400' : 'text-gray-400'}`} />
+                  <span className="text-sm font-medium text-gray-900 dark:text-gray-100">{step.label}</span>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+
+        <div className="space-y-6">
+          {currentStep.id === 'business' && (
+            <SectionCard title="Business Profile" hint="Set the core information used throughout the app.">
+              <FormField label="Primary Workflow" hint={`Select how you will use ${APP_NAME} day to day. This determines your app experience and layout.`}>
+                <div className="grid gap-4 sm:grid-cols-2">
+                  <button
+                    type="button"
+                    onClick={() => applyBusinessTypePreset('advisor')}
+                    className={`relative rounded-xl border-2 p-5 text-left transition-all duration-200 hover:shadow-md ${
+                      settings.businessType === 'advisor'
+                        ? 'border-green-500 bg-green-50 shadow-sm dark:border-green-600 dark:bg-green-900/20'
+                        : 'border-gray-200 bg-white hover:border-gray-300 dark:border-gray-700 dark:bg-gray-800/50 dark:hover:border-gray-600'
+                    }`}
+                  >
+                    {settings.businessType === 'advisor' && (
+                      <span className="absolute right-3 top-3 flex h-6 w-6 items-center justify-center rounded-full bg-green-500">
+                        <CheckCircle2 className="h-4 w-4 text-white" />
+                      </span>
+                    )}
+                    <Building2 className="mb-3 h-8 w-8 text-green-600 dark:text-green-400" />
+                    <h3 className="font-semibold text-gray-900 dark:text-white">Shop Desk / Service Advisor</h3>
+                    <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
+                      Full desktop workflow for managing quotes, repair orders, customers, and your team.
+                    </p>
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => applyBusinessTypePreset('mobile')}
+                    className={`relative rounded-xl border-2 p-5 text-left transition-all duration-200 hover:shadow-md ${
+                      settings.businessType === 'mobile'
+                        ? 'border-green-500 bg-green-50 shadow-sm dark:border-green-600 dark:bg-green-900/20'
+                        : 'border-gray-200 bg-white hover:border-gray-300 dark:border-gray-700 dark:bg-gray-800/50 dark:hover:border-gray-600'
+                    }`}
+                  >
+                    {settings.businessType === 'mobile' && (
+                      <span className="absolute right-3 top-3 flex h-6 w-6 items-center justify-center rounded-full bg-green-500">
+                        <CheckCircle2 className="h-4 w-4 text-white" />
+                      </span>
+                    )}
+                    <Truck className="mb-3 h-8 w-8 text-green-600 dark:text-green-400" />
+                    <h3 className="font-semibold text-gray-900 dark:text-white">Standalone Mobile Mechanic</h3>
+                    <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
+                      Full owner tools in a mobile-first layout, optimized for field work.
+                    </p>
+                  </button>
+                </div>
+              </FormField>
+
+              <div className="grid gap-4 sm:grid-cols-2">
+                <FormField label="Business Name">
+                  <Input id="setup-business-name" value={settings.businessName} onChange={(v) => updateSetting('businessName', v)} placeholder="Example Auto Repair" />
+                </FormField>
+                <FormField label="Business Phone">
+                  <Input id="setup-business-phone" value={settings.businessPhone} onChange={(v) => updateSetting('businessPhone', v)} placeholder="(555) 555-5555" />
+                </FormField>
+                <FormField label={businessAddressLabel} hint={businessAddressHint}>
+                  <Textarea id="setup-business-address" value={settings.businessAddress} onChange={(v) => updateSetting('businessAddress', v)} rows={3} placeholder="123 Main St, Knoxville, TN or Greater Knoxville area" />
+                </FormField>
+                <FormField label={roleNameLabel}>
+                  <Input id="setup-role-name" value={settings.serviceAdvisor} onChange={(v) => updateSetting('serviceAdvisor', v)} placeholder="Alex Rivera" />
+                </FormField>
+              </div>
+
+              {stepIssues.length > 0 && <ChecklistCard items={stepIssues.map((issue) => issue.message)} />}
+            </SectionCard>
+          )}
+
+          {currentStep.id === 'pricing' && (
+            <SectionCard title="Pricing Defaults" hint="These defaults apply when creating quotes and repair orders.">
+              <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+                <FormField label="Default Labor Rate ($/hr)">
+                  <Input id="setup-labor-rate" type="number" value={settings.defaultLaborRate} onChange={(v) => updateSetting('defaultLaborRate', Number(v) || 0)} />
+                </FormField>
+                <FormField label="Tax Rate (%)">
+                  <Input id="setup-tax-rate" type="number" value={settings.taxRate} onChange={(v) => updateSetting('taxRate', Number(v) || 0)} />
+                </FormField>
+                <FormField label="Tax Label">
+                  <Input id="setup-tax-label" value={settings.taxLabel} onChange={(v) => updateSetting('taxLabel', v)} placeholder="Tax" />
+                </FormField>
+                <FormField label="Shop Charge Rate (%)">
+                  <Input type="number" value={settings.shopChargeRate} onChange={(v) => updateSetting('shopChargeRate', Number(v) || 0)} />
+                </FormField>
+                <FormField label="Shop Charge Cap ($)">
+                  <Input type="number" value={settings.shopChargeCap} onChange={(v) => updateSetting('shopChargeCap', Number(v) || 0)} />
+                </FormField>
+                <FormField label="Payment Terms">
+                  <Input value={settings.paymentTerms} onChange={(v) => updateSetting('paymentTerms', v)} placeholder="Due on Receipt" />
+                </FormField>
+                <FormField label="Default Travel Fee ($)" hint="Preset fee for mobile/home diagnostic visits.">
+                  <Input type="number" value={settings.defaultTravelFee} onChange={(v) => updateSetting('defaultTravelFee', Number(v) || 0)} />
+                </FormField>
+              </div>
+
+              <FormField label="Travel Fee Explanation">
+                <Textarea
+                  value={settings.travelFeeExplanation}
+                  onChange={(v) => updateSetting('travelFeeExplanation', v)}
+                  rows={2}
+                  placeholder="Explain the travel or diagnostic fee on customer-facing documents."
+                />
+              </FormField>
+
+              <FormField label="Shop Charge Explanation">
+                <Textarea
+                  value={settings.shopChargeExplanation}
+                  onChange={(v) => updateSetting('shopChargeExplanation', v)}
+                  rows={3}
+                  placeholder="Explain the purpose of the shop charge on customer quotes."
+                />
+              </FormField>
+
+              {stepIssues.length > 0 && <ChecklistCard items={stepIssues.map((issue) => issue.message)} />}
+            </SectionCard>
+          )}
+
+          {currentStep.id === 'quotes' && (
+            <SectionCard title="Quote & Branding" hint="These settings shape the professional appearance of your customer-facing documents.">
+              <div className="grid gap-4 sm:grid-cols-2">
+                <FormField label="Quote Expiration (days)">
+                  <Input id="setup-quote-expiry" type="number" value={settings.quoteExpiryDays} onChange={(v) => updateSetting('quoteExpiryDays', Number(v) || 30)} />
+                </FormField>
+                <FormField label="PDF Accent Color">
+                  <div className="flex items-center gap-3">
+                    <input
+                      type="color"
+                      value={settings.pdfAccentColor}
+                      onChange={(e) => updateSetting('pdfAccentColor', e.target.value)}
+                      className="h-10 w-14 rounded-lg border border-gray-300 bg-white p-1 dark:border-gray-700 dark:bg-gray-800"
+                    />
+                    <span className="text-sm font-mono text-gray-600 dark:text-gray-400">{settings.pdfAccentColor}</span>
+                  </div>
+                </FormField>
+              </div>
+
+              <FormField label="Quote Footer Note" hint="Shown on generated quotes.">
+                <Textarea
+                  id="setup-quote-footer"
+                  value={settings.quoteFooterNote}
+                  onChange={(v) => updateSetting('quoteFooterNote', v)}
+                  rows={3}
+                  placeholder="This quote is valid for {days} days from the date above."
+                />
+              </FormField>
+
+              <FormField label="Logo Upload" hint="Optional. PNG or JPG under 500KB.">
+                <div className="flex items-center gap-4">
+                  {settings.logoUrl ? (
+                    <div className="relative rounded-xl border border-gray-200 bg-white p-3 dark:border-gray-700 dark:bg-gray-800">
+                      <img src={settings.logoUrl} alt="Business logo" className="h-16 w-auto object-contain" />
+                      <button
+                        type="button"
+                        onClick={() => {
+                          updateSetting('logoUrl', '');
+                          if (user?.id) removeLogoFile(user.id).catch(() => {});
+                        }}
+                        className="absolute -right-2 -top-2 rounded-full bg-red-500 p-1 text-white hover:bg-red-600"
+                        aria-label="Remove logo"
+                      >
+                        <X className="h-3 w-3" />
+                      </button>
+                    </div>
+                  ) : (
+                    <label className="inline-flex cursor-pointer items-center gap-2 rounded-xl border border-dashed border-gray-300 bg-white px-4 py-3 text-sm text-gray-600 hover:border-green-500 hover:text-green-600 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:border-green-500 dark:hover:text-green-400">
+                      <Upload className="h-4 w-4" />
+                      Upload Logo
+                      <input type="file" accept="image/*" className="hidden" onChange={(e) => handleLogoUpload(e.target.files?.[0] || null)} />
+                    </label>
+                  )}
+                </div>
+              </FormField>
+
+              {stepIssues.length > 0 && <ChecklistCard items={stepIssues.map((issue) => issue.message)} />}
+            </SectionCard>
+          )}
+
+          {currentStep.id === 'review' && (
+            <SectionCard title="Review Setup" hint="Confirm the details that will appear across your workflow.">
+              <div className="grid gap-4 sm:grid-cols-2">
+                <div>
+                  <p className="text-xs font-medium uppercase tracking-wide text-gray-400">Business</p>
+                  <p className="mt-1 text-sm text-gray-700 dark:text-gray-300">{settings.businessName || 'Not set'}</p>
+                  <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">{settings.businessPhone || 'No phone number'}</p>
+                  <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">{settings.businessAddress || 'No address or service area'}</p>
+                </div>
+                <div>
+                  <p className="text-xs font-medium uppercase tracking-wide text-gray-400">Defaults</p>
+                  <p className="mt-1 text-sm text-gray-700 dark:text-gray-300">{roleLabel}: {settings.serviceAdvisor || 'Not set'}</p>
+                  <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">Labor Rate: ${Number(settings.defaultLaborRate || 0).toFixed(2)}/hr</p>
+                  <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">Tax: {settings.taxLabel} {Number(settings.taxRate || 0).toFixed(2)}%</p>
+                  <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">Payment Terms: {settings.paymentTerms || 'Not set'}</p>
+                </div>
+              </div>
+
+              {!isSetupComplete(settings) && <ChecklistCard items={['Complete all required business profile fields before finishing setup.']} />}
+            </SectionCard>
+          )}
+        </div>
+
+        <div className="mt-8 flex items-center justify-between">
+          <button
+            type="button"
+            onClick={() => setStepIndex((prev) => Math.max(prev - 1, 0))}
+            disabled={stepIndex === 0 || saving}
+            className="rounded-xl border border-gray-300 bg-white px-4 py-2.5 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-200 dark:hover:bg-gray-800"
+          >
+            Back
+          </button>
+
+          <div className="flex items-center gap-3">
+            {stepIndex < STEPS.length - 1 ? (
+              <button
+                type="button"
+                onClick={handleNext}
+                disabled={!stepValid || saving}
+                className="rounded-xl bg-green-600 px-5 py-2.5 text-sm font-medium text-white transition-colors hover:bg-green-700 disabled:cursor-not-allowed disabled:opacity-50"
+              >
+                Continue
+              </button>
+            ) : (
+              <button
+                type="button"
+                onClick={handleFinish}
+                disabled={saving}
+                className="rounded-xl bg-green-600 px-5 py-2.5 text-sm font-medium text-white transition-colors hover:bg-green-700 disabled:cursor-not-allowed disabled:opacity-50"
+              >
+                {saving ? 'Finishing...' : 'Finish Setup'}
+              </button>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/pages/TechnicianInvite.tsx b/src/pages/TechnicianInvite.tsx
new file mode 100644
index 0000000..c1f449c
--- /dev/null
+++ b/src/pages/TechnicianInvite.tsx
@@ -0,0 +1,203 @@
+import { useEffect, useState, type FormEvent } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import { Eye, EyeOff, Lock, Mail, User, Wrench } from 'lucide-react';
+import { pb } from '../lib/pocketbase';
+import type { TechnicianInvite } from '../lib/technicianInvites';
+import { acceptTechnicianInvite, fetchInviteByToken } from '../lib/technicianInvites';
+import { logError } from '../lib/userMessages';
+
+export default function TechnicianInvite() {
+  const { token } = useParams<{ token: string }>();
+  const navigate = useNavigate();
+  const [invite, setInvite] = useState<TechnicianInvite | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [submitting, setSubmitting] = useState(false);
+  const [displayName, setDisplayName] = useState('');
+  const [password, setPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [showPassword, setShowPassword] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [success, setSuccess] = useState<string | null>(null);
+
+  useEffect(() => {
+    let active = true;
+    async function loadInvite() {
+      setLoading(true);
+      if (!token) {
+        setInvite(null);
+        setLoading(false);
+        return;
+      }
+      const found = await fetchInviteByToken(token);
+      if (!active) return;
+      setInvite(found);
+      setDisplayName(found?.displayName ?? '');
+      setLoading(false);
+    }
+    void loadInvite();
+    return () => {
+      active = false;
+    };
+  }, [token]);
+
+  const handleSubmit = async (e: FormEvent) => {
+    e.preventDefault();
+    setError(null);
+    setSuccess(null);
+    if (!invite || !token) return;
+    if (!password) { setError('Enter a password.'); return; }
+    if (password.length < 8) { setError('Password must be at least 8 characters.'); return; }
+    if (password !== confirmPassword) { setError('Passwords do not match.'); return; }
+
+    setSubmitting(true);
+    try {
+      const user = await pb.collection('users').create({
+        email: invite.email,
+        password,
+        passwordConfirm: confirmPassword,
+        name: displayName.trim(),
+        displayName: displayName.trim(),
+        role: 'technician',
+        shopUserId: invite.shopUserId,
+        emailVisibility: true,
+      });
+
+      await acceptTechnicianInvite(invite, token, user.id);
+
+      try {
+        await pb.collection('users').requestVerification(invite.email);
+      } catch (err) { logError('requestVerification failed (non-critical)', err); }
+
+      try {
+        await pb.collection('users').authWithPassword(invite.email, password);
+        navigate('/technician', { replace: true });
+      } catch {
+        setSuccess('Technician account created. Check your email, verify the account, then sign in.');
+      }
+    } catch (err) {
+      logError('Failed to accept technician invite', err);
+      setError('Unable to create technician account. The invite may be expired or the email may already be registered.');
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-gradient-to-br from-gray-50 to-gray-100 px-4 dark:from-gray-950 dark:to-gray-900">
+      <div className="w-full max-w-md">
+        <div className="mb-8 text-center">
+          <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-2xl bg-green-600 shadow-lg shadow-green-600/20 dark:bg-green-700">
+            <Wrench className="h-8 w-8 text-white" />
+          </div>
+          <h1 className="text-3xl font-bold tracking-tight text-gray-900 dark:text-white">
+            Join the Bay Team
+          </h1>
+          <p className="mt-1.5 text-sm text-gray-500 dark:text-gray-400">
+            Create your technician login for assigned repair orders.
+          </p>
+        </div>
+
+        <div className="rounded-xl border border-gray-200 bg-white p-8 shadow-xl shadow-gray-200/50 dark:border-gray-800 dark:bg-gray-900 dark:shadow-black/20">
+          {loading ? (
+            <div className="flex items-center justify-center py-12">
+              <div className="h-8 w-8 animate-spin rounded-full border-4 border-green-500 border-t-transparent" />
+            </div>
+          ) : !invite ? (
+            <div className="text-center">
+              <p className="text-base font-semibold text-gray-900 dark:text-white">Invite unavailable</p>
+              <p className="mt-2 text-sm text-gray-500 dark:text-gray-400">
+                This technician invite is expired, revoked, or has already been used.
+              </p>
+              <button
+                onClick={() => navigate('/login')}
+                className="mt-6 rounded-lg bg-green-600 px-4 py-2 text-sm font-medium text-white hover:bg-green-700"
+              >
+                Go to sign in
+              </button>
+            </div>
+          ) : (
+            <form onSubmit={handleSubmit} className="space-y-4" noValidate>
+              {success && (
+                <div className="rounded-lg border border-green-200 bg-green-50 px-4 py-3 text-sm text-green-700 dark:border-green-800/50 dark:bg-green-950/50 dark:text-green-400">
+                  {success}
+                </div>
+              )}
+              {error && (
+                <div className="rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700 dark:border-red-800/50 dark:bg-red-950/50 dark:text-red-400">
+                  {error}
+                </div>
+              )}
+
+              <div>
+                <label className="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-300">Email</label>
+                <div className="relative">
+                  <Mail className="pointer-events-none absolute left-3 top-1/2 h-5 w-5 -translate-y-1/2 text-gray-400" />
+                  <input
+                    value={invite.email}
+                    readOnly
+                    className="w-full rounded-lg border border-gray-300 bg-gray-50 py-2.5 pl-10 pr-3 text-sm text-gray-600 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300"
+                  />
+                </div>
+              </div>
+
+              <div>
+                <label className="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-300">Display Name</label>
+                <div className="relative">
+                  <User className="pointer-events-none absolute left-3 top-1/2 h-5 w-5 -translate-y-1/2 text-gray-400" />
+                  <input
+                    value={displayName}
+                    onChange={(e) => setDisplayName(e.target.value)}
+                    className="w-full rounded-lg border border-gray-300 bg-white py-2.5 pl-10 pr-3 text-sm text-gray-900 focus:border-green-500 focus:outline-none focus:ring-2 focus:ring-green-500/20 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100"
+                  />
+                </div>
+              </div>
+
+              <div>
+                <label className="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-300">Password</label>
+                <div className="relative">
+                  <Lock className="pointer-events-none absolute left-3 top-1/2 h-5 w-5 -translate-y-1/2 text-gray-400" />
+                  <input
+                    type={showPassword ? 'text' : 'password'}
+                    value={password}
+                    onChange={(e) => setPassword(e.target.value)}
+                    placeholder="At least 8 characters"
+                    className="w-full rounded-lg border border-gray-300 bg-white py-2.5 pl-10 pr-10 text-sm text-gray-900 focus:border-green-500 focus:outline-none focus:ring-2 focus:ring-green-500/20 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100"
+                  />
+                  <button
+                    type="button"
+                    onClick={() => setShowPassword((prev) => !prev)}
+                    className="absolute right-2.5 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
+                  >
+                    {showPassword ? <EyeOff className="h-5 w-5" /> : <Eye className="h-5 w-5" />}
+                  </button>
+                </div>
+              </div>
+
+              <div>
+                <label className="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-300">Confirm Password</label>
+                <div className="relative">
+                  <Lock className="pointer-events-none absolute left-3 top-1/2 h-5 w-5 -translate-y-1/2 text-gray-400" />
+                  <input
+                    type={showPassword ? 'text' : 'password'}
+                    value={confirmPassword}
+                    onChange={(e) => setConfirmPassword(e.target.value)}
+                    placeholder="Repeat your password"
+                    className="w-full rounded-lg border border-gray-300 bg-white py-2.5 pl-10 pr-3 text-sm text-gray-900 focus:border-green-500 focus:outline-none focus:ring-2 focus:ring-green-500/20 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100"
+                  />
+                </div>
+              </div>
+
+              <button
+                type="submit"
+                disabled={submitting}
+                className="flex w-full items-center justify-center rounded-lg bg-green-600 px-4 py-2.5 text-sm font-semibold text-white hover:bg-green-700 disabled:cursor-not-allowed disabled:opacity-60"
+              >
+                {submitting ? 'Creating account…' : 'Create Technician Account'}
+              </button>
+            </form>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/pages/Verify.tsx b/src/pages/Verify.tsx
new file mode 100644
index 0000000..d59b36b
--- /dev/null
+++ b/src/pages/Verify.tsx
@@ -0,0 +1,150 @@
+import { useEffect, useState } from 'react';
+import { useNavigate, useSearchParams, Link } from 'react-router-dom';
+import { CheckCircle2, AlertTriangle, Loader2, LogIn } from 'lucide-react';
+import { pb } from '../lib/pocketbase';
+
+type Status = 'loading' | 'success' | 'expired' | 'network-error';
+
+export default function Verify() {
+  const [searchParams] = useSearchParams();
+  const navigate = useNavigate();
+  const token = searchParams.get('token');
+  const [status, setStatus] = useState<Status>('loading');
+
+  useEffect(() => {
+    if (!token) {
+      setStatus('expired');
+      return;
+    }
+
+    let cancelled = false;
+
+    async function confirm() {
+      try {
+        await pb.collection('users').confirmVerification(token!);
+        if (cancelled) return;
+        setStatus('success');
+
+        // If already signed in, navigate to settings after a short delay.
+        if (pb.authStore.isValid) {
+          setTimeout(() => navigate('/settings', { replace: true }), 1500);
+        }
+      } catch (err: unknown) {
+        if (cancelled) return;
+        const msg = err instanceof Error ? err.message : '';
+        // 400-level errors typically mean expired/invalid token
+        if (msg.includes('400') || msg.includes('invalid') || msg.includes('expired')) {
+          setStatus('expired');
+        } else {
+          setStatus('network-error');
+        }
+      }
+    }
+
+    void confirm();
+    return () => { cancelled = true; };
+  }, [navigate, token]);
+
+  if (status === 'loading') {
+    return (
+      <div className="flex min-h-screen items-center justify-center bg-gray-50 px-4 dark:bg-gray-950">
+        <div className="text-center">
+          <Loader2 className="mx-auto h-10 w-10 animate-spin text-green-600" />
+          <p className="mt-4 text-sm text-gray-500 dark:text-gray-400">
+            Verifying your email address...
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  if (status === 'success') {
+    return (
+      <div className="flex min-h-screen items-center justify-center bg-gray-50 px-4 dark:bg-gray-950">
+        <div className="w-full max-w-md text-center">
+          <div className="mx-auto mb-6 flex h-20 w-20 items-center justify-center rounded-2xl bg-green-100 dark:bg-green-900/30">
+            <CheckCircle2 className="h-10 w-10 text-green-600 dark:text-green-400" />
+          </div>
+          <h1 className="text-2xl font-semibold text-gray-900 dark:text-white">
+            Account verified
+          </h1>
+          <p className="mt-2 text-sm text-gray-500 dark:text-gray-400">
+            {pb.authStore.isValid
+              ? 'Your account is now verified. Redirecting to settings...'
+              : 'Your email has been confirmed. Sign in to continue.'}
+          </p>
+          {!pb.authStore.isValid && (
+            <div className="mt-6">
+              <Link
+                to="/login"
+                className="inline-flex items-center gap-2 rounded-xl bg-green-600 px-5 py-2.5 text-sm font-medium text-white transition-colors hover:bg-green-700"
+              >
+                <LogIn className="h-4 w-4" />
+                Sign In
+              </Link>
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  if (status === 'expired') {
+    return (
+      <div className="flex min-h-screen items-center justify-center bg-gray-50 px-4 dark:bg-gray-950">
+        <div className="w-full max-w-md text-center">
+          <div className="mx-auto mb-6 flex h-20 w-20 items-center justify-center rounded-2xl bg-amber-100 dark:bg-amber-900/30">
+            <AlertTriangle className="h-10 w-10 text-amber-600 dark:text-amber-400" />
+          </div>
+          <h1 className="text-2xl font-semibold text-gray-900 dark:text-white">
+            Link expired or invalid
+          </h1>
+          <p className="mt-2 text-sm text-gray-500 dark:text-gray-400">
+            {!token
+              ? 'No verification token was provided. Use the link from your email.'
+              : 'This verification link is no longer valid. You may need to request a new one.'}
+          </p>
+          <div className="mt-6 flex justify-center gap-3">
+            <Link
+              to="/login"
+              className="inline-flex items-center gap-2 rounded-xl border border-gray-300 bg-white px-5 py-2.5 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
+            >
+              Sign In
+            </Link>
+            <Link
+              to="/settings"
+              className="inline-flex items-center gap-2 rounded-xl bg-green-600 px-5 py-2.5 text-sm font-medium text-white transition-colors hover:bg-green-700"
+            >
+              Resend Email
+            </Link>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-gray-50 px-4 dark:bg-gray-950">
+      <div className="w-full max-w-md text-center">
+        <div className="mx-auto mb-6 flex h-20 w-20 items-center justify-center rounded-2xl bg-red-100 dark:bg-red-900/30">
+          <AlertTriangle className="h-10 w-10 text-red-600 dark:text-red-400" />
+        </div>
+        <h1 className="text-2xl font-semibold text-gray-900 dark:text-white">
+          Unable to verify
+        </h1>
+        <p className="mt-2 text-sm text-gray-500 dark:text-gray-400">
+          We could not verify your email right now. Check your connection and try the link again, or sign in and request a new verification email.
+        </p>
+        <div className="mt-6">
+          <Link
+            to="/login"
+            className="inline-flex items-center gap-2 rounded-xl bg-green-600 px-5 py-2.5 text-sm font-medium text-white transition-colors hover:bg-green-700"
+          >
+            <LogIn className="h-4 w-4" />
+            Sign In
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/pages/advisor/AdvisorTeam.tsx b/src/pages/advisor/AdvisorTeam.tsx
new file mode 100644
index 0000000..e0802ae
--- /dev/null
+++ b/src/pages/advisor/AdvisorTeam.tsx
@@ -0,0 +1,324 @@
+import { useCallback, useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Copy, Eye, Mail, RefreshCw, ShieldCheck, User, UserPlus, X } from 'lucide-react';
+import { pb } from '../../lib/pocketbase';
+import type { TechnicianUser } from '../../lib/technicianData';
+import { fetchTechnicianUsers } from '../../lib/technicianData';
+import type { TechnicianInvite } from '../../lib/technicianInvites';
+import {
+  createTechnicianInvite,
+  fetchTechnicianInvites,
+  revokeTechnicianInvite,
+} from '../../lib/technicianInvites';
+import { ListSkeleton } from '../../components/ui/ListSkeleton';
+import { ListError } from '../../components/ui/ListError';
+
+export default function AdvisorTeam() {
+  const navigate = useNavigate();
+  const userId = pb.authStore.model?.id as string | undefined;
+  const [technicians, setTechnicians] = useState<TechnicianUser[]>([]);
+  const [invites, setInvites] = useState<TechnicianInvite[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [techsError, setTechsError] = useState(false);
+  const [invitesError, setInvitesError] = useState(false);
+  const [showInviteForm, setShowInviteForm] = useState(false);
+  const [email, setEmail] = useState('');
+  const [displayName, setDisplayName] = useState('');
+  const [creating, setCreating] = useState(false);
+  const [message, setMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null);
+  const [lastInviteUrl, setLastInviteUrl] = useState('');
+
+  const loadTeam = useCallback(async () => {
+    if (!userId) return;
+    setLoading(true);
+    setTechsError(false);
+    setInvitesError(false);
+    try {
+      const [techs, nextInvites] = await Promise.all([
+        fetchTechnicianUsers(userId),
+        fetchTechnicianInvites(userId),
+      ]);
+      setTechnicians(techs);
+      setInvites(nextInvites);
+    } catch {
+      setTechsError(true);
+      setInvitesError(true);
+    } finally {
+      setLoading(false);
+    }
+  }, [userId]);
+
+  useEffect(() => {
+    void loadTeam();
+  }, [loadTeam]);
+
+  const copyText = async (value: string) => {
+    try {
+      await navigator.clipboard.writeText(value);
+      setMessage({ type: 'success', text: 'Invite link copied.' });
+    } catch {
+      setMessage({ type: 'error', text: 'Copy failed. Select and copy the link manually.' });
+    }
+  };
+
+  const handleCreateInvite = async () => {
+    if (!userId) return;
+    if (!email.trim()) {
+      setMessage({ type: 'error', text: 'Enter the technician email.' });
+      return;
+    }
+
+    setCreating(true);
+    setMessage(null);
+    try {
+      const created = await createTechnicianInvite(userId, email, displayName);
+      setEmail('');
+      setDisplayName('');
+      setShowInviteForm(false);
+      setLastInviteUrl(created.inviteUrl);
+      await loadTeam();
+      await copyText(created.inviteUrl);
+    } catch {
+      setMessage({ type: 'error', text: 'Invite could not be created. Check PocketBase setup and try again.' });
+    } finally {
+      setCreating(false);
+    }
+  };
+
+  const handleRevoke = async (invite: TechnicianInvite) => {
+    if (!window.confirm(`Revoke invite for ${invite.email}?`)) return;
+    try {
+      await revokeTechnicianInvite(invite.id);
+      await loadTeam();
+      setMessage({ type: 'success', text: 'Invite revoked.' });
+    } catch {
+      setMessage({ type: 'error', text: 'Invite could not be revoked.' });
+    }
+  };
+
+  const pendingInvites = invites.filter((invite) => invite.status === 'pending');
+
+  return (
+    <div className="mx-auto max-w-6xl space-y-6">
+      <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+        <div>
+          <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Team</h1>
+          <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
+            Invite technicians and manage who can see assigned bay work.
+          </p>
+        </div>
+        <div className="flex gap-2">
+          <button
+            onClick={loadTeam}
+            className="inline-flex items-center gap-1.5 rounded-lg border border-gray-200 bg-white px-3 py-2 text-sm font-medium text-gray-600 hover:bg-gray-50 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-400 dark:hover:bg-gray-800"
+          >
+            <RefreshCw className="h-4 w-4" />
+            Refresh
+          </button>
+          <button
+            onClick={() => setShowInviteForm(true)}
+            className="inline-flex items-center gap-1.5 rounded-lg bg-green-600 px-4 py-2 text-sm font-medium text-white hover:bg-green-700"
+          >
+            <UserPlus className="h-4 w-4" />
+            Invite Technician
+          </button>
+        </div>
+      </div>
+
+      {message && (
+        <div className={`rounded-lg px-4 py-3 text-sm font-medium ${
+          message.type === 'success'
+            ? 'bg-green-50 text-green-700 dark:bg-green-900/30 dark:text-green-400'
+            : 'bg-red-50 text-red-700 dark:bg-red-900/30 dark:text-red-400'
+        }`}>
+          {message.text}
+        </div>
+      )}
+
+      {lastInviteUrl && (
+        <div className="rounded-xl border border-green-200 bg-green-50 p-4 dark:border-green-900/50 dark:bg-green-900/20">
+          <p className="text-sm font-medium text-green-800 dark:text-green-300">Latest invite link</p>
+          <div className="mt-2 flex gap-2">
+            <input
+              readOnly
+              value={lastInviteUrl}
+              className="min-w-0 flex-1 rounded-lg border border-green-200 bg-white px-3 py-2 text-xs text-gray-700 dark:border-green-900/50 dark:bg-gray-900 dark:text-gray-300"
+            />
+            <button
+              onClick={() => copyText(lastInviteUrl)}
+              className="inline-flex items-center gap-1 rounded-lg bg-green-600 px-3 py-2 text-xs font-medium text-white hover:bg-green-700"
+            >
+              <Copy className="h-3.5 w-3.5" />
+              Copy
+            </button>
+          </div>
+        </div>
+      )}
+
+      <div className="grid gap-4 sm:grid-cols-3">
+        <MetricCard label="Technicians" value={technicians.length} />
+        <MetricCard label="Pending Invites" value={pendingInvites.length} />
+        <MetricCard label="Active Access" value={technicians.length + pendingInvites.length} />
+      </div>
+
+      <div className="grid gap-6 lg:grid-cols-2">
+        <section className="rounded-2xl border border-gray-200 bg-white p-5 shadow-sm dark:border-gray-800 dark:bg-gray-900">
+          <div className="flex items-center gap-2">
+            <ShieldCheck className="h-5 w-5 text-green-600 dark:text-green-400" />
+            <h2 className="text-lg font-semibold text-gray-900 dark:text-white">Technician Accounts</h2>
+          </div>
+
+          {loading ? (
+            <ListSkeleton rows={3} />
+          ) : techsError ? (
+            <ListError title="Unable to load technicians" message="Failed to load technician accounts." onRetry={loadTeam} />
+          ) : technicians.length === 0 ? (
+            <EmptyBlock text="No technicians have accepted an invite yet." />
+          ) : (
+            <div className="mt-4 space-y-2">
+              {technicians.map((tech) => (
+                <div key={tech.id} className="flex items-center gap-3 rounded-xl border border-gray-100 bg-gray-50 p-3 dark:border-gray-800 dark:bg-gray-800/50">
+                  <div className="flex h-10 w-10 items-center justify-center rounded-full bg-green-100 dark:bg-green-900/30">
+                    <User className="h-5 w-5 text-green-600 dark:text-green-400" />
+                  </div>
+                  <div className="min-w-0 flex-1">
+                    <p className="truncate text-sm font-medium text-gray-900 dark:text-white">{tech.displayName || 'Technician'}</p>
+                    <p className="truncate text-xs text-gray-500 dark:text-gray-400">{tech.email}</p>
+                  </div>
+                  <button
+                    onClick={() => navigate(`/technician?view_as=${tech.id}`)}
+                    className="shrink-0 inline-flex items-center gap-1 rounded-lg bg-blue-50 px-3 py-1.5 text-xs font-medium text-blue-600 hover:bg-blue-100 dark:bg-blue-900/20 dark:text-blue-400 dark:hover:bg-blue-900/40"
+                  >
+                    <Eye className="h-3.5 w-3.5" />
+                    View Portal
+                  </button>
+                </div>
+              ))}
+            </div>
+          )}
+        </section>
+
+        <section className="rounded-2xl border border-gray-200 bg-white p-5 shadow-sm dark:border-gray-800 dark:bg-gray-900">
+          <div className="flex items-center gap-2">
+            <Mail className="h-5 w-5 text-green-600 dark:text-green-400" />
+            <h2 className="text-lg font-semibold text-gray-900 dark:text-white">Invites</h2>
+          </div>
+
+          {loading ? (
+            <ListSkeleton rows={3} />
+          ) : invitesError ? (
+            <ListError title="Unable to load invites" message="Failed to load technician invites." onRetry={loadTeam} />
+          ) : invites.length === 0 ? (
+            <EmptyBlock text="No technician invites created yet." />
+          ) : (
+            <div className="mt-4 space-y-2">
+              {invites.map((invite) => (
+                <div key={invite.id} className="rounded-xl border border-gray-100 bg-gray-50 p-3 dark:border-gray-800 dark:bg-gray-800/50">
+                  <div className="flex items-start justify-between gap-3">
+                    <div className="min-w-0">
+                      <p className="truncate text-sm font-medium text-gray-900 dark:text-white">{invite.displayName || invite.email}</p>
+                      <p className="truncate text-xs text-gray-500 dark:text-gray-400">{invite.email}</p>
+                      <p className="mt-1 text-xs text-gray-400 dark:text-gray-500">Expires {formatDate(invite.expiresAt)}</p>
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <InviteBadge status={invite.status} />
+                      {invite.status === 'pending' && (
+                        <button
+                          onClick={() => handleRevoke(invite)}
+                          className="rounded-lg p-1 text-gray-400 hover:bg-red-50 hover:text-red-600 dark:hover:bg-red-900/20 dark:hover:text-red-400"
+                          title="Revoke invite"
+                        >
+                          <X className="h-4 w-4" />
+                        </button>
+                      )}
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </section>
+      </div>
+
+      {showInviteForm && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4">
+          <div className="w-full max-w-md rounded-2xl border border-gray-200 bg-white p-6 shadow-xl dark:border-gray-800 dark:bg-gray-900">
+            <div className="flex items-center justify-between">
+              <h3 className="text-lg font-semibold text-gray-900 dark:text-white">Invite Technician</h3>
+              <button onClick={() => setShowInviteForm(false)} className="rounded-lg p-1 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
+                <X className="h-5 w-5" />
+              </button>
+            </div>
+
+            <div className="mt-4 space-y-4">
+              <label className="block">
+                <span className="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-300">Technician Email</span>
+                <input
+                  type="email"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  placeholder="tech@example.com"
+                  className="w-full rounded-xl border border-gray-300 bg-white px-3 py-2.5 text-sm text-gray-900 focus:border-green-500 focus:outline-none focus:ring-2 focus:ring-green-500/20 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100"
+                />
+              </label>
+              <label className="block">
+                <span className="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-300">Display Name</span>
+                <input
+                  value={displayName}
+                  onChange={(e) => setDisplayName(e.target.value)}
+                  placeholder="Alex Rivera"
+                  className="w-full rounded-xl border border-gray-300 bg-white px-3 py-2.5 text-sm text-gray-900 focus:border-green-500 focus:outline-none focus:ring-2 focus:ring-green-500/20 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100"
+                />
+              </label>
+            </div>
+
+            <div className="mt-5 flex gap-3">
+              <button
+                onClick={() => setShowInviteForm(false)}
+                className="flex-1 rounded-xl border border-gray-200 bg-white px-4 py-2.5 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300 dark:hover:bg-gray-800"
+              >
+                Cancel
+              </button>
+              <button
+                onClick={handleCreateInvite}
+                disabled={creating}
+                className="flex-1 rounded-xl bg-green-600 px-4 py-2.5 text-sm font-medium text-white hover:bg-green-700 disabled:cursor-not-allowed disabled:opacity-50"
+              >
+                {creating ? 'Creating…' : 'Create Invite'}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function MetricCard({ label, value }: { label: string; value: number }) {
+  return (
+    <div className="rounded-2xl border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-800 dark:bg-gray-900">
+      <p className="text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">{label}</p>
+      <p className="mt-2 text-3xl font-bold text-gray-900 dark:text-white">{value}</p>
+    </div>
+  );
+}
+
+function EmptyBlock({ text }: { text: string }) {
+  return <p className="py-10 text-center text-sm text-gray-500 dark:text-gray-400">{text}</p>;
+}
+
+function InviteBadge({ status }: { status: TechnicianInvite['status'] }) {
+  const classes = {
+    pending: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/40 dark:text-yellow-300',
+    accepted: 'bg-green-100 text-green-800 dark:bg-green-900/40 dark:text-green-300',
+    revoked: 'bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400',
+  }[status];
+  return <span className={`rounded-full px-2 py-0.5 text-xs font-medium ${classes}`}>{status}</span>;
+}
+
+function formatDate(value: string): string {
+  if (!value) return '—';
+  const d = new Date(value);
+  if (Number.isNaN(d.getTime())) return '—';
+  return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
+}
diff --git a/src/pages/advisor/TimeCards.tsx b/src/pages/advisor/TimeCards.tsx
new file mode 100644
index 0000000..569bd5c
--- /dev/null
+++ b/src/pages/advisor/TimeCards.tsx
@@ -0,0 +1,372 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { Download, RefreshCw } from 'lucide-react';
+import { pb } from '../../lib/pocketbase';
+import type { TechnicianAssignment, TechnicianUser } from '../../lib/technicianData';
+import { fetchAllAssignmentsForShop, fetchTechnicianUsers } from '../../lib/technicianData';
+import { ListSkeleton } from '../../components/ui/ListSkeleton';
+import { ListError } from '../../components/ui/ListError';
+
+interface CsvRow {
+  techName: string;
+  date: string;
+  roNumber: string;
+  vehicle: string;
+  clockIn: string;
+  clockOut: string;
+  minutes: number;
+  status: string;
+}
+
+function getWeekDefaults(): { from: string; to: string } {
+  const today = new Date();
+  const dayOfWeek = today.getDay();
+  const monday = new Date(today);
+  monday.setDate(today.getDate() - (dayOfWeek === 0 ? 6 : dayOfWeek - 1));
+  const sunday = new Date(monday);
+  sunday.setDate(monday.getDate() + 6);
+
+  const fmt = (d: Date): string => {
+    const y = d.getFullYear();
+    const m = String(d.getMonth() + 1).padStart(2, '0');
+    const day = String(d.getDate()).padStart(2, '0');
+    return `${y}-${m}-${day}`;
+  };
+
+  return { from: fmt(monday), to: fmt(sunday) };
+}
+
+function csvEscape(value: string | number): string {
+  const s = typeof value === 'number' ? String(value) : value;
+  if (s.includes('"') || s.includes(',') || s.includes('\n')) {
+    return `"${s.replace(/"/g, '""')}"`;
+  }
+  return s;
+}
+
+function formatTime(iso: string): string {
+  if (!iso) return '';
+  const d = new Date(iso);
+  if (Number.isNaN(d.getTime())) return '';
+  return d.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit', hour12: true });
+}
+
+function formatDate(value: string): string {
+  if (!value) return '';
+  const d = new Date(value);
+  if (Number.isNaN(d.getTime())) return '';
+  return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
+}
+
+function ymd(date: Date): string {
+  const y = date.getFullYear();
+  const m = String(date.getMonth() + 1).padStart(2, '0');
+  const d = String(date.getDate()).padStart(2, '0');
+  return `${y}-${m}-${d}`;
+}
+
+function buildTechLookup(techs: TechnicianUser[]): Map<string, string> {
+  const map = new Map<string, string>();
+  for (const t of techs) {
+    map.set(t.id, t.displayName || t.email || t.id);
+  }
+  return map;
+}
+
+export default function TimeCards() {
+  const userId = pb.authStore.model?.id as string | undefined;
+  const week = useMemo(() => getWeekDefaults(), []);
+  const [dateFrom, setDateFrom] = useState(week.from);
+  const [dateTo, setDateTo] = useState(week.to);
+  const [assignments, setAssignments] = useState<TechnicianAssignment[]>([]);
+  const [techLookup, setTechLookup] = useState<Map<string, string>>(new Map());
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(false);
+  const [generating, setGenerating] = useState(false);
+
+  const loadData = useCallback(async () => {
+    if (!userId) return;
+    setLoading(true);
+    setError(false);
+    try {
+      const [techs, allAssignments] = await Promise.all([
+        fetchTechnicianUsers(userId),
+        fetchAllAssignmentsForShop(userId),
+      ]);
+      setTechLookup(buildTechLookup(techs));
+      setAssignments(allAssignments);
+    } catch {
+      setError(true);
+    } finally {
+      setLoading(false);
+    }
+  }, [userId]);
+
+  useEffect(() => {
+    void loadData();
+  }, [loadData]);
+
+  // Filter assignments whose clock entries fall within the selected date range
+  const rows = useMemo((): CsvRow[] => {
+    if (!dateFrom || !dateTo) return [];
+
+    const fromDate = ymd(new Date(dateFrom + 'T00:00:00'));
+    const toDate = ymd(new Date(dateTo + 'T23:59:59'));
+
+    const results: CsvRow[] = [];
+
+    for (const a of assignments) {
+      for (const entry of a.clockEntries) {
+        if (!entry.start) continue;
+        const startDate = new Date(entry.start);
+        if (Number.isNaN(startDate.getTime())) continue;
+        const entryDate = ymd(startDate);
+        if (entryDate < fromDate || entryDate > toDate) continue;
+
+        const techName = techLookup.get(a.technicianUserId) || a.technicianUserId;
+
+        let endDisplay = '';
+        let mins = 0;
+        if (entry.end) {
+          endDisplay = formatTime(entry.end);
+          mins = entry.minutes ?? 0;
+        }
+        // If still running, show "—" for clock out and compute elapsed
+        if (!entry.end) {
+          mins = entry.minutes ?? Math.max(0, Math.round((Date.now() - startDate.getTime()) / 60000));
+        }
+
+        results.push({
+          techName,
+          date: formatDate(entry.start),
+          roNumber: a.roNumber,
+          vehicle: a.vehicleInfo,
+          clockIn: formatTime(entry.start),
+          clockOut: entry.end ? endDisplay : '—',
+          minutes: mins,
+          status: a.status,
+        });
+      }
+    }
+
+    return results;
+  }, [assignments, techLookup, dateFrom, dateTo]);
+
+  const buildCsv = useCallback((): string => {
+    const headers = [
+      'Technician Name',
+      'Date',
+      'RO#',
+      'Vehicle',
+      'Clock In',
+      'Clock Out',
+      'Minutes',
+      'Status',
+    ];
+
+    const lines = [headers.map(csvEscape).join(',')];
+    for (const row of rows) {
+      lines.push(
+        [
+          csvEscape(row.techName),
+          csvEscape(row.date),
+          csvEscape(row.roNumber),
+          csvEscape(row.vehicle),
+          csvEscape(row.clockIn),
+          csvEscape(row.clockOut),
+          csvEscape(row.minutes),
+          csvEscape(row.status),
+        ].join(','),
+      );
+    }
+    return lines.join('\n');
+  }, [rows]);
+
+  const handleDownload = useCallback(() => {
+    setGenerating(true);
+    try {
+      const csvContent = buildCsv();
+      const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = `timecard-${dateFrom}-to-${dateTo}.csv`;
+      a.click();
+      URL.revokeObjectURL(url);
+    } finally {
+      setGenerating(false);
+    }
+  }, [buildCsv, dateFrom, dateTo]);
+
+  const hasData = rows.length > 0;
+
+  return (
+    <div className="mx-auto max-w-7xl space-y-6">
+      <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+        <div>
+          <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Time Cards</h1>
+          <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
+            Export technician clock-in / clock-out data as CSV.
+          </p>
+        </div>
+        <button
+          onClick={loadData}
+          className="inline-flex items-center gap-1.5 rounded-lg border border-gray-200 bg-white px-3 py-2 text-sm font-medium text-gray-600 hover:bg-gray-50 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-400 dark:hover:bg-gray-800"
+        >
+          <RefreshCw className="h-4 w-4" />
+          Refresh
+        </button>
+      </div>
+
+      {/* Date range controls */}
+      <div className="rounded-2xl border border-gray-200 bg-white p-5 shadow-sm dark:border-gray-800 dark:bg-gray-900">
+        <div className="flex flex-col gap-4 sm:flex-row sm:items-end">
+          <label className="block">
+            <span className="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-300">
+              From
+            </span>
+            <input
+              type="date"
+              value={dateFrom}
+              onChange={(e) => setDateFrom(e.target.value)}
+              className="rounded-xl border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 focus:border-green-500 focus:outline-none focus:ring-2 focus:ring-green-500/20 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100"
+            />
+          </label>
+          <label className="block">
+            <span className="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-300">
+              To
+            </span>
+            <input
+              type="date"
+              value={dateTo}
+              onChange={(e) => setDateTo(e.target.value)}
+              className="rounded-xl border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 focus:border-green-500 focus:outline-none focus:ring-2 focus:ring-green-500/20 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100"
+            />
+          </label>
+          <button
+            onClick={handleDownload}
+            disabled={!hasData || generating}
+            className="inline-flex items-center gap-1.5 rounded-xl bg-green-600 px-4 py-2 text-sm font-medium text-white hover:bg-green-700 disabled:cursor-not-allowed disabled:opacity-50"
+          >
+            <Download className="h-4 w-4" />
+            {generating ? 'Generating...' : 'Download CSV'}
+          </button>
+        </div>
+        <p className="mt-3 text-xs text-gray-500 dark:text-gray-400">
+          {loading
+            ? 'Loading data...'
+            : error
+              ? 'Failed to load data. Try again.'
+              : `${rows.length} clock-entry row${rows.length !== 1 ? 's' : ''} in range`}
+        </p>
+      </div>
+
+      {/* Preview table */}
+      {loading ? (
+        <ListSkeleton rows={5} />
+      ) : error ? (
+        <ListError
+          title="Unable to load time-card data"
+          message="Failed to load assignments or technician data."
+          onRetry={loadData}
+        />
+      ) : (
+        <div className="overflow-hidden rounded-2xl border border-gray-200 bg-white shadow-sm dark:border-gray-800 dark:bg-gray-900">
+          <div className="overflow-x-auto">
+            <table className="w-full text-left text-sm">
+              <thead className="border-b border-gray-200 bg-gray-50 dark:border-gray-800 dark:bg-gray-800/50">
+                <tr>
+                  <th className="px-4 py-3 font-medium text-gray-700 dark:text-gray-300">
+                    Technician Name
+                  </th>
+                  <th className="px-4 py-3 font-medium text-gray-700 dark:text-gray-300">
+                    Date
+                  </th>
+                  <th className="px-4 py-3 font-medium text-gray-700 dark:text-gray-300">
+                    RO#
+                  </th>
+                  <th className="px-4 py-3 font-medium text-gray-700 dark:text-gray-300">
+                    Vehicle
+                  </th>
+                  <th className="px-4 py-3 font-medium text-gray-700 dark:text-gray-300">
+                    Clock In
+                  </th>
+                  <th className="px-4 py-3 font-medium text-gray-700 dark:text-gray-300">
+                    Clock Out
+                  </th>
+                  <th className="px-4 py-3 font-medium text-gray-700 dark:text-gray-300">
+                    Minutes
+                  </th>
+                  <th className="px-4 py-3 font-medium text-gray-700 dark:text-gray-300">
+                    Status
+                  </th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-gray-100 dark:divide-gray-800">
+                {rows.length === 0 ? (
+                  <tr>
+                    <td colSpan={8} className="px-4 py-10 text-center text-sm text-gray-500 dark:text-gray-400">
+                      No clock entries found in the selected date range.
+                    </td>
+                  </tr>
+                ) : (
+                  rows.map((row, idx) => (
+                    <tr
+                      key={idx}
+                      className="hover:bg-gray-50 dark:hover:bg-gray-800/30"
+                    >
+                      <td className="px-4 py-2.5 text-gray-900 dark:text-white">
+                        {row.techName}
+                      </td>
+                      <td className="px-4 py-2.5 whitespace-nowrap text-gray-600 dark:text-gray-400">
+                        {row.date}
+                      </td>
+                      <td className="px-4 py-2.5 whitespace-nowrap text-gray-600 dark:text-gray-400">
+                        {row.roNumber}
+                      </td>
+                      <td className="px-4 py-2.5 text-gray-600 dark:text-gray-400">
+                        {row.vehicle}
+                      </td>
+                      <td className="px-4 py-2.5 whitespace-nowrap text-gray-600 dark:text-gray-400">
+                        {row.clockIn}
+                      </td>
+                      <td className="px-4 py-2.5 whitespace-nowrap text-gray-600 dark:text-gray-400">
+                        {row.clockOut}
+                      </td>
+                      <td className="px-4 py-2.5 whitespace-nowrap text-gray-900 dark:text-white">
+                        {row.minutes}
+                      </td>
+                      <td className="px-4 py-2.5 whitespace-nowrap">
+                        <StatusBadge status={row.status} />
+                      </td>
+                    </tr>
+                  ))
+                )}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function StatusBadge({ status }: { status: string }) {
+  const classes: Record<string, string> = {
+    pending: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/40 dark:text-yellow-300',
+    in_progress: 'bg-blue-100 text-blue-800 dark:bg-blue-900/40 dark:text-blue-300',
+    waiting_parts: 'bg-orange-100 text-orange-800 dark:bg-orange-900/40 dark:text-orange-300',
+    completed: 'bg-green-100 text-green-800 dark:bg-green-900/40 dark:text-green-300',
+  };
+
+  const label = status.replace(/_/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase());
+
+  return (
+    <span
+      className={`rounded-full px-2 py-0.5 text-xs font-medium ${
+        classes[status] || 'bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400'
+      }`}
+    >
+      {label}
+    </span>
+  );
+}
diff --git a/src/pages/technician/TechnicianDashboard.tsx b/src/pages/technician/TechnicianDashboard.tsx
new file mode 100644
index 0000000..51ee3c9
--- /dev/null
+++ b/src/pages/technician/TechnicianDashboard.tsx
@@ -0,0 +1,273 @@
+import { useEffect, useState } from 'react';
+import { useTechnicianContext, useTechnicianNav } from '../../components/technician/TechnicianContext';
+import {
+  Wrench,
+  ClipboardList,
+  CheckCircle2,
+  AlertTriangle,
+  Play,
+  Timer,
+} from 'lucide-react';
+import type { TechnicianAssignment } from '../../lib/technicianData';
+import {
+  fetchAllTechnicianAssignments,
+  clockElapsedMinutes,
+} from '../../lib/technicianData';
+import { formatElapsed } from '../../lib/format';
+import { ListSkeleton } from '../../components/ui/ListSkeleton';
+import { ListError } from '../../components/ui/ListError';
+
+export default function TechnicianDashboard() {
+  const { navigateTech } = useTechnicianNav();
+  const { effectiveUserId } = useTechnicianContext();
+  const [assignments, setAssignments] = useState<TechnicianAssignment[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [, setTick] = useState(0);
+
+  const load = async () => {
+    if (!effectiveUserId) return;
+    setLoading(true);
+    setError(null);
+    try {
+      const data = await fetchAllTechnicianAssignments(effectiveUserId);
+      setAssignments(data);
+    } catch {
+      setError('Failed to load your assignments. Please try again.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    load();
+  }, [effectiveUserId]);
+
+  useEffect(() => {
+    const running = assignments.some((a) =>
+      a.clockEntries.some((e) => !e.end),
+    );
+    if (!running) return;
+    const id = setInterval(() => setTick((t) => t + 1), 5000);
+    return () => clearInterval(id);
+  }, [assignments]);
+
+  const active = assignments.filter(
+    (a) => a.status === 'in_progress' || a.status === 'pending',
+  );
+  const inProgress = assignments.filter((a) => a.status === 'in_progress');
+  const waitingParts = assignments.filter((a) => a.status === 'waiting_parts');
+  const completed = assignments.filter((a) => a.status === 'completed');
+  const todayCompleted = completed.filter((a) => {
+    const d = new Date(a.updated);
+    const now = new Date();
+    return d.toDateString() === now.toDateString();
+  });
+
+  const totalElapsed = assignments.reduce(
+    (sum, a) => sum + clockElapsedMinutes(a.clockEntries),
+    0,
+  );
+
+  const runningCount = assignments.filter((a) =>
+    a.clockEntries.some((e) => !e.end),
+  ).length;
+
+  if (loading) {
+    return (
+      <div className="mx-auto max-w-4xl px-4 py-8">
+        <ListSkeleton rows={4} />
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="mx-auto max-w-4xl px-4 py-8">
+        <ListError title="Unable to load dashboard" message={error} onRetry={load} />
+      </div>
+    );
+  }
+
+  if (assignments.length === 0) {
+    return (
+      <div className="mx-auto max-w-4xl px-4 py-16 text-center">
+        <div className="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-gray-100 dark:bg-gray-800">
+          <Wrench className="h-8 w-8 text-gray-400 dark:text-gray-500" />
+        </div>
+        <h2 className="mt-6 text-xl font-semibold text-gray-900 dark:text-white">
+          No Assigned Jobs
+        </h2>
+        <p className="mt-2 text-sm text-gray-500 dark:text-gray-400">
+          Your advisor hasn't assigned any work yet. Check back soon or
+          reach out to the front desk.
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="mx-auto max-w-4xl space-y-6">
+      {/* Stats row */}
+      <div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
+        <StatCard
+          icon={ClipboardList}
+          label="Active"
+          value={active.length}
+          color="blue"
+        />
+        <StatCard
+          icon={Play}
+          label="In Bay"
+          value={inProgress.length}
+          color="yellow"
+        />
+        <StatCard
+          icon={AlertTriangle}
+          label="Waiting Parts"
+          value={waitingParts.length}
+          color="orange"
+        />
+        <StatCard
+          icon={CheckCircle2}
+          label="Completed Today"
+          value={todayCompleted.length}
+          color="green"
+        />
+      </div>
+
+      {/* Clock status */}
+      <div className="rounded-2xl border border-gray-200 bg-white p-5 shadow-sm dark:border-gray-800 dark:bg-gray-900">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            <div
+              className={`flex h-10 w-10 items-center justify-center rounded-full ${
+                runningCount > 0
+                  ? 'bg-green-100 text-green-600 dark:bg-green-900/30 dark:text-green-400'
+                  : 'bg-gray-100 text-gray-400 dark:bg-gray-800 dark:text-gray-500'
+              }`}
+            >
+              <Timer className="h-5 w-5" />
+            </div>
+            <div>
+              <p className="text-sm font-medium text-gray-900 dark:text-white">
+                {runningCount > 0
+                  ? `${runningCount} clock${runningCount > 1 ? 's' : ''} running`
+                  : 'All clocks stopped'}
+              </p>
+              <p className="text-xs text-gray-500 dark:text-gray-400">
+                {formatElapsed(totalElapsed)} total tracked
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Active jobs list */}
+      {active.length > 0 && (
+        <div>
+          <h2 className="mb-3 text-sm font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">
+            Active Jobs
+          </h2>
+          <div className="space-y-3">
+            {active.map((job) => {
+              const running = job.clockEntries.some((e) => !e.end);
+              return (
+                <button
+                  key={job.id}
+                  onClick={() => navigateTech(`/technician/jobs/${job.id}`)}
+                  className="w-full rounded-2xl border border-gray-200 bg-white p-5 text-left shadow-sm transition-colors hover:border-green-300 hover:shadow-md dark:border-gray-800 dark:bg-gray-900 dark:hover:border-green-700"
+                >
+                  <div className="flex items-start justify-between gap-4">
+                    <div className="min-w-0 flex-1">
+                      <div className="flex items-center gap-2">
+                        <span className="text-lg font-bold text-gray-900 dark:text-white">
+                          {job.roNumber || '—'}
+                        </span>
+                        {job.status === 'in_progress' && (
+                          <span className="inline-flex items-center rounded-full bg-yellow-100 px-2 py-0.5 text-xs font-medium text-yellow-800 dark:bg-yellow-900/40 dark:text-yellow-300">
+                            In Progress
+                          </span>
+                        )}
+                      </div>
+                      <p className="mt-1 text-sm text-gray-600 dark:text-gray-400">
+                        {job.vehicleInfo || 'No vehicle info'}
+                      </p>
+                      {job.serviceLocation && (
+                        <p className="mt-0.5 text-xs text-gray-400 dark:text-gray-500">
+                          {job.serviceLocation}
+                        </p>
+                      )}
+                    </div>
+                    <div className="flex flex-col items-end gap-2">
+                      {running ? (
+                        <span className="inline-flex items-center gap-1 rounded-full bg-green-100 px-2.5 py-0.5 text-xs font-medium text-green-700 dark:bg-green-900/30 dark:text-green-400">
+                          <span className="h-1.5 w-1.5 animate-pulse rounded-full bg-green-500" />
+                          Clocked In
+                        </span>
+                      ) : (
+                        <span className="text-xs text-gray-400 dark:text-gray-500">
+                          {formatElapsed(
+                            clockElapsedMinutes(job.clockEntries),
+                          )}
+                        </span>
+                      )}
+                    </div>
+                  </div>
+                </button>
+              );
+            })}
+          </div>
+        </div>
+      )}
+
+      {/* Quick action: View all jobs */}
+      <div className="pt-2">
+        <button
+          onClick={() => navigateTech('/technician/jobs')}
+          className="flex w-full items-center justify-center gap-2 rounded-xl border border-dashed border-gray-300 p-4 text-sm font-medium text-gray-600 transition-colors hover:border-green-400 hover:text-green-600 dark:border-gray-700 dark:text-gray-400 dark:hover:border-green-600 dark:hover:text-green-400"
+        >
+          <ClipboardList className="h-4 w-4" />
+          View All Assigned Jobs ({assignments.length})
+        </button>
+      </div>
+    </div>
+  );
+}
+
+function StatCard({
+  icon: Icon,
+  label,
+  value,
+  color,
+}: {
+  icon: React.ComponentType<{ className?: string }>;
+  label: string;
+  value: number;
+  color: 'blue' | 'yellow' | 'orange' | 'green';
+}) {
+  const colorMap: Record<string, string> = {
+    blue: 'bg-blue-100 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400',
+    yellow:
+      'bg-yellow-100 text-yellow-600 dark:bg-yellow-900/30 dark:text-yellow-400',
+    orange:
+      'bg-orange-100 text-orange-600 dark:bg-orange-900/30 dark:text-orange-400',
+    green:
+      'bg-green-100 text-green-600 dark:bg-green-900/30 dark:text-green-400',
+  };
+  return (
+    <div className="rounded-2xl border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-800 dark:bg-gray-900">
+      <div
+        className={`mx-auto flex h-10 w-10 items-center justify-center rounded-full ${colorMap[color]}`}
+      >
+        <Icon className="h-5 w-5" />
+      </div>
+      <p className="mt-2 text-center text-2xl font-bold text-gray-900 dark:text-white">
+        {value}
+      </p>
+      <p className="text-center text-xs text-gray-500 dark:text-gray-400">
+        {label}
+      </p>
+    </div>
+  );
+}
diff --git a/src/pages/technician/TechnicianJobDetail.tsx b/src/pages/technician/TechnicianJobDetail.tsx
new file mode 100644
index 0000000..ba15a16
--- /dev/null
+++ b/src/pages/technician/TechnicianJobDetail.tsx
@@ -0,0 +1,521 @@
+import { useEffect, useState } from 'react';
+import { useParams } from 'react-router-dom';
+import { pb } from '../../lib/pocketbase';
+import { useTechnicianNav } from '../../components/technician/TechnicianContext';
+import {
+  ArrowLeft,
+  Clock,
+  Play,
+  Square,
+  CheckCircle2,
+  MessageSquare,
+  MapPin,
+  Wrench,
+} from 'lucide-react';
+import type { TechnicianAssignment, SanitizedService } from '../../lib/technicianData';
+import {
+  fetchTechnicianAssignment,
+  updateServiceStatus,
+  updateServiceSubStatus,
+  clockStart,
+  clockStop,
+  clockElapsedMinutes,
+  submitAdvisorRequest,
+} from '../../lib/technicianData';
+import { useToast } from '../../components/ui/Toast';
+import { formatElapsed, formatClockTime } from '../../lib/format';
+import { logError } from '../../lib/userMessages';
+
+const SERVICE_STATUS_CONFIG: Record<
+  string,
+  { label: string; colors: string }
+> = {
+  pending: {
+    label: 'Pending',
+    colors: 'bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400',
+  },
+  in_progress: {
+    label: 'In Progress',
+    colors:
+      'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/40 dark:text-yellow-300',
+  },
+  completed: {
+    label: 'Completed',
+    colors:
+      'bg-green-100 text-green-800 dark:bg-green-900/40 dark:text-green-300',
+  },
+};
+
+export default function TechnicianJobDetail() {
+  const { id } = useParams<{ id: string }>();
+  const { navigateTech } = useTechnicianNav();
+  const { showToast } = useToast();
+  const [assignment, setAssignment] = useState<TechnicianAssignment | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [requestText, setRequestText] = useState('');
+  const [requestType, setRequestType] = useState<'parts' | 'help' | 'info'>('parts');
+  const [sendingRequest, setSendingRequest] = useState(false);
+
+  const load = async () => {
+    if (!id) return;
+    setLoading(true);
+    const data = await fetchTechnicianAssignment(id);
+    setAssignment(data);
+    setLoading(false);
+  };
+
+  useEffect(() => {
+    load();
+  }, [id]);
+
+  const handleServiceStatus = async (serviceId: string, newStatus: SanitizedService['status']) => {
+    if (!id || !assignment) return;
+    try {
+      await updateServiceStatus(id, serviceId, newStatus);
+    } catch (err: any) {
+      if (err?.name === 'StaleWriteError') {
+        showToast('This job was just edited. Reloading…', 'error');
+        setTimeout(() => window.location.reload(), 1200);
+        return;
+      }
+      showToast('Failed to update service status.', 'error');
+      logError('handleServiceStatus', err);
+      return;
+    }
+
+    // Reload to get fresh data
+    await load();
+
+    // If all services are now completed, sync the parent RO status
+    const updated = await fetchTechnicianAssignment(id);
+    if (updated && updated.repairOrderId && updated.services.every((s) => s.status === 'completed')) {
+      try {
+        await pb.collection('repairOrders').update(updated.repairOrderId, {
+          status: 'waiting_pickup',
+        });
+      } catch {
+        // non-critical — the assignment is recorded regardless
+      }
+    }
+  };
+
+  const handleClockToggle = async () => {
+    if (!id || !assignment) return;
+    const running = assignment.clockEntries.some((e) => !e.end);
+    try {
+      if (running) {
+        await clockStop(id);
+      } else {
+        await clockStart(id);
+      }
+    } catch (err: any) {
+      if (err?.name === 'StaleWriteError') {
+        showToast('This job was just edited. Reloading…', 'error');
+        setTimeout(() => window.location.reload(), 1200);
+        return;
+      }
+      showToast('Failed to toggle clock.', 'error');
+      logError('handleClockToggle', err);
+      return;
+    }
+    await load();
+  };
+
+  const handleSubmitRequest = async () => {
+    if (!id || !requestText.trim()) return;
+    setSendingRequest(true);
+    try {
+      await submitAdvisorRequest(id, {
+        type: requestType,
+        message: requestText.trim(),
+      });
+      setRequestText('');
+      await load();
+    } catch (err: any) {
+      if (err?.name === 'StaleWriteError') {
+        showToast('This job was just edited. Reloading…', 'error');
+        setTimeout(() => window.location.reload(), 1200);
+        return;
+      }
+      showToast('Failed to send request.', 'error');
+      logError('handleSubmitRequest', err);
+    } finally {
+      setSendingRequest(false);
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center py-24">
+        <div className="animate-spin h-8 w-8 border-4 border-green-500 border-t-transparent rounded-full" />
+      </div>
+    );
+  }
+
+  if (!assignment) {
+    return (
+      <div className="mx-auto max-w-4xl px-4 py-16 text-center">
+        <div className="mx-auto flex h-14 w-14 items-center justify-center rounded-full bg-gray-100 dark:bg-gray-800">
+          <Wrench className="h-7 w-7 text-gray-400 dark:text-gray-500" />
+        </div>
+        <h2 className="mt-5 text-xl font-semibold text-gray-900 dark:text-white">
+          Job Not Found
+        </h2>
+        <p className="mt-2 text-sm text-gray-500 dark:text-gray-400">
+          This assignment may have been removed or you don't have access.
+        </p>
+        <button
+          onClick={() => navigateTech('/technician/jobs')}
+          className="mt-6 inline-flex items-center gap-2 rounded-xl bg-green-600 px-5 py-2.5 text-sm font-medium text-white hover:bg-green-700"
+        >
+          <ArrowLeft className="h-4 w-4" />
+          Back to Jobs
+        </button>
+      </div>
+    );
+  }
+
+  const running = assignment.clockEntries.some((e) => !e.end);
+  const elapsed = clockElapsedMinutes(assignment.clockEntries);
+  const completedServices = assignment.services.filter(
+    (s) => s.status === 'completed',
+  ).length;
+
+  return (
+    <div className="mx-auto max-w-4xl space-y-5">
+      {/* Back button */}
+      <button
+        onClick={() => navigateTech('/technician/jobs')}
+        className="inline-flex items-center gap-1.5 text-sm font-medium text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
+      >
+        <ArrowLeft className="h-4 w-4" />
+        All Jobs
+      </button>
+
+      {/* Vehicle header */}
+      <div className="rounded-2xl border border-gray-200 bg-white p-6 shadow-sm dark:border-gray-800 dark:bg-gray-900">
+        <div className="flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between">
+          <div>
+            <div className="flex items-center gap-2">
+              <h1 className="text-xl font-bold text-gray-900 dark:text-white">
+                {assignment.roNumber || 'Unknown RO'}
+              </h1>
+              <StatusBadge status={assignment.status} />
+            </div>
+            <p className="mt-1 text-lg text-gray-700 dark:text-gray-300">
+              {assignment.vehicleInfo || 'No vehicle info'}
+            </p>
+            <div className="mt-2 flex flex-wrap gap-4 text-sm text-gray-500 dark:text-gray-400">
+              {assignment.vin && <span>VIN: {assignment.vin}</span>}
+              {assignment.mileage && (
+                <span>Mileage: {assignment.mileage}</span>
+              )}
+            </div>
+            {assignment.serviceLocation && (
+              <div className="mt-2 flex items-center gap-1.5 text-sm text-gray-500 dark:text-gray-400">
+                <MapPin className="h-3.5 w-3.5" />
+                {assignment.serviceLocation}
+              </div>
+            )}
+          </div>
+
+          {/* Clock */}
+          <div className="flex flex-col items-end gap-2">
+            <div className="text-right">
+              <p className="text-2xl font-bold tabular-nums text-gray-900 dark:text-white">
+                {formatElapsed(elapsed)}
+              </p>
+              <p className="text-xs text-gray-400 dark:text-gray-500">
+                {running ? 'Running' : 'Stopped'}
+              </p>
+            </div>
+            <button
+              onClick={handleClockToggle}
+              className={`inline-flex items-center gap-1.5 rounded-xl px-4 py-2 text-sm font-medium transition-colors ${
+                running
+                  ? 'bg-red-100 text-red-700 hover:bg-red-200 dark:bg-red-900/30 dark:text-red-400 dark:hover:bg-red-900/50'
+                  : 'bg-green-100 text-green-700 hover:bg-green-200 dark:bg-green-900/30 dark:text-green-400 dark:hover:bg-green-900/50'
+              }`}
+            >
+              {running ? (
+                <>
+                  <Square className="h-4 w-4 fill-current" />
+                  Stop
+                </>
+              ) : (
+                <>
+                  <Play className="h-4 w-4 fill-current" />
+                  Start
+                </>
+              )}
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* Services */}
+      <div className="rounded-2xl border border-gray-200 bg-white p-5 shadow-sm dark:border-gray-800 dark:bg-gray-900">
+        <h2 className="mb-1 text-sm font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">
+          Services
+        </h2>
+        <p className="mb-4 text-xs text-gray-400 dark:text-gray-500">
+          {completedServices}/{assignment.services.length} completed
+        </p>
+        <div className="space-y-3">
+          {assignment.services.map((svc) => (
+            <div
+              key={svc.id}
+              className="rounded-xl border border-gray-100 bg-gray-50 p-4 dark:border-gray-800 dark:bg-gray-800/50"
+            >
+              <div className="flex items-start justify-between gap-3">
+                <div className="min-w-0 flex-1">
+                  <p className="font-medium text-gray-900 dark:text-white">
+                    {svc.name}
+                  </p>
+                  {svc.description && (
+                    <p className="mt-0.5 text-sm text-gray-500 dark:text-gray-400">
+                      {svc.description}
+                    </p>
+                  )}
+                </div>
+                <StatusBadge status={svc.status} />
+              </div>
+
+              {svc.technicianNotes && (
+                <div className="mt-2 rounded-lg bg-white p-3 text-xs text-gray-600 dark:bg-gray-800 dark:text-gray-400">
+                  {svc.technicianNotes}
+                </div>
+              )}
+
+              {/* Service actions */}
+              <div className="mt-3 flex flex-wrap gap-2">
+                {svc.status === 'pending' && (
+                  <ServiceActionButton
+                    label="Start"
+                    onClick={() => handleServiceStatus(svc.id, 'in_progress')}
+                    color="yellow"
+                  />
+                )}
+                {svc.status === 'in_progress' && (
+                  <>
+                    <ServiceActionButton
+                      label="Mark Complete"
+                      onClick={() =>
+                        handleServiceStatus(svc.id, 'completed')
+                      }
+                      color="green"
+                    />
+                    <ServiceActionButton
+                      label="Parts Ordered"
+                      onClick={async () => {
+                        if (!id) return;
+                        try {
+                          await updateServiceSubStatus(
+                            id,
+                            svc.id,
+                            'parts_ordered',
+                          );
+                          await load();
+                        } catch (err: any) {
+                          if (err?.name === 'StaleWriteError') {
+                            showToast('This job was just edited. Reloading…', 'error');
+                            setTimeout(() => window.location.reload(), 1200);
+                            return;
+                          }
+                          showToast('Failed to update sub-status.', 'error');
+                          logError('updateServiceSubStatus', err);
+                        }
+                      }}
+                      color="orange"
+                    />
+                  </>
+                )}
+                {svc.status === 'completed' && (
+                  <span className="inline-flex items-center gap-1 text-xs text-green-600 dark:text-green-400">
+                    <CheckCircle2 className="h-3.5 w-3.5" />
+                    Done
+                  </span>
+                )}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Advisor Requests */}
+      <div className="rounded-2xl border border-gray-200 bg-white p-5 shadow-sm dark:border-gray-800 dark:bg-gray-900">
+        <div className="flex items-center gap-2">
+          <MessageSquare className="h-4 w-4 text-gray-400" />
+          <h2 className="text-sm font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">
+            Advisor Requests
+          </h2>
+        </div>
+
+        {assignment.advisorRequests.length > 0 && (
+          <div className="mt-3 space-y-2">
+            {assignment.advisorRequests.map((req) => (
+              <div
+                key={req.id}
+                className="rounded-lg border border-gray-100 bg-gray-50 p-3 dark:border-gray-800 dark:bg-gray-800/50"
+              >
+                <div className="flex items-center gap-2">
+                  <span
+                    className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${
+                      req.type === 'parts'
+                        ? 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400'
+                        : req.type === 'help'
+                          ? 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400'
+                          : 'bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-400'
+                    }`}
+                  >
+                    {req.type}
+                  </span>
+                  <span
+                    className={`text-xs ${
+                      req.status === 'resolved'
+                        ? 'text-green-600 dark:text-green-400'
+                        : 'text-yellow-600 dark:text-yellow-400'
+                    }`}
+                  >
+                    {req.status}
+                  </span>
+                </div>
+                <p className="mt-1 text-sm text-gray-700 dark:text-gray-300">
+                  {req.message}
+                </p>
+                <p className="mt-0.5 text-xs text-gray-400 dark:text-gray-500">
+                  {new Date(req.createdAt).toLocaleString()}
+                </p>
+              </div>
+            ))}
+          </div>
+        )}
+
+        {/* New request form */}
+        <div className="mt-4 space-y-3">
+          <div className="flex gap-2">
+            {(['parts', 'help', 'info'] as const).map((type) => (
+              <button
+                key={type}
+                onClick={() => setRequestType(type)}
+                className={`rounded-lg px-3 py-1.5 text-xs font-medium transition-colors ${
+                  requestType === type
+                    ? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400'
+                    : 'bg-gray-100 text-gray-500 hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700'
+                }`}
+              >
+                {type === 'parts' ? 'Parts' : type === 'help' ? 'Help' : 'Info'}
+              </button>
+            ))}
+          </div>
+          <textarea
+            value={requestText}
+            onChange={(e) => setRequestText(e.target.value)}
+            placeholder="Describe what you need…"
+            rows={2}
+            className="w-full rounded-xl border border-gray-200 bg-white p-3 text-sm text-gray-900 placeholder-gray-400 focus:border-green-400 focus:outline-none focus:ring-2 focus:ring-green-100 dark:border-gray-800 dark:bg-gray-900 dark:text-white dark:placeholder-gray-500 dark:focus:border-green-600 dark:focus:ring-green-900/30"
+          />
+          <button
+            onClick={handleSubmitRequest}
+            disabled={!requestText.trim() || sendingRequest}
+            className="inline-flex items-center gap-1.5 rounded-xl bg-green-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-green-700 disabled:cursor-not-allowed disabled:opacity-50"
+          >
+            {sendingRequest ? 'Sending…' : 'Send Request'}
+          </button>
+        </div>
+      </div>
+
+      {/* Clock history */}
+      {assignment.clockEntries.length > 0 && (
+        <div className="rounded-2xl border border-gray-200 bg-white p-5 shadow-sm dark:border-gray-800 dark:bg-gray-900">
+          <div className="flex items-center gap-2">
+            <Clock className="h-4 w-4 text-gray-400" />
+            <h2 className="text-sm font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">
+              Time Log
+            </h2>
+          </div>
+          <div className="mt-3 space-y-1.5">
+            {assignment.clockEntries.map((entry, i) => (
+              <div
+                key={i}
+                className="flex items-center justify-between text-sm"
+              >
+                <span className="text-gray-500 dark:text-gray-400">
+                  {formatClockTime(entry.start)}
+                  {entry.end && ` → ${formatClockTime(entry.end)}`}
+                  {!entry.end && (
+                    <span className="ml-1 text-green-500">(running)</span>
+                  )}
+                </span>
+                <span className="tabular-nums text-gray-700 dark:text-gray-300">
+                  {entry.minutes != null
+                    ? formatElapsed(entry.minutes)
+                    : entry.end
+                      ? formatElapsed(
+                          Math.round(
+                            (new Date(entry.end).getTime() -
+                              new Date(entry.start).getTime()) /
+                              60000,
+                          ),
+                        )
+                      : formatElapsed(
+                          Math.round(
+                            (Date.now() -
+                              new Date(entry.start).getTime()) /
+                              60000,
+                          ),
+                        )}
+                </span>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function StatusBadge({
+  status,
+}: {
+  status: string;
+}) {
+  const cfg = SERVICE_STATUS_CONFIG[status] ?? {
+    label: status,
+    colors: 'bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400',
+  };
+  return (
+    <span
+      className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${cfg.colors}`}
+    >
+      {cfg.label}
+    </span>
+  );
+}
+
+function ServiceActionButton({
+  label,
+  onClick,
+  color,
+}: {
+  label: string;
+  onClick: () => void;
+  color: 'green' | 'yellow' | 'orange';
+}) {
+  const colorMap: Record<string, string> = {
+    green:
+      'bg-green-100 text-green-700 hover:bg-green-200 dark:bg-green-900/30 dark:text-green-400 dark:hover:bg-green-900/50',
+    yellow:
+      'bg-yellow-100 text-yellow-700 hover:bg-yellow-200 dark:bg-yellow-900/30 dark:text-yellow-400 dark:hover:bg-yellow-900/50',
+    orange:
+      'bg-orange-100 text-orange-700 hover:bg-orange-200 dark:bg-orange-900/30 dark:text-orange-400 dark:hover:bg-orange-900/50',
+  };
+  return (
+    <button
+      onClick={onClick}
+      className={`inline-flex items-center gap-1 rounded-lg px-3 py-1.5 text-xs font-medium transition-colors ${colorMap[color]}`}
+    >
+      {label}
+    </button>
+  );
+}
diff --git a/src/pages/technician/TechnicianJobs.tsx b/src/pages/technician/TechnicianJobs.tsx
new file mode 100644
index 0000000..e95f1e8
--- /dev/null
+++ b/src/pages/technician/TechnicianJobs.tsx
@@ -0,0 +1,323 @@
+import { useState, useMemo } from 'react';
+import { pb } from '../../lib/pocketbase';
+import { Search, X, ChevronRight, AlertTriangle } from 'lucide-react';
+import type { TechnicianAssignment, AvailableRepairOrder } from '../../lib/technicianData';
+import { fetchTechnicianAssignments, fetchAvailableRepairOrders, createTechnicianAssignment, clockElapsedMinutes, parseRepairOrderServices } from '../../lib/technicianData';
+import { useTechnicianContext, useTechnicianNav } from '../../components/technician/TechnicianContext';
+import { useToast } from '../../components/ui/Toast';
+import { ListSkeleton } from '../../components/ui/ListSkeleton';
+import { ListError } from '../../components/ui/ListError';
+import { formatElapsed } from '../../lib/format';
+import { usePagedList } from '../../hooks/usePagedList';
+
+type StatusTab = 'all' | 'active' | 'completed' | 'available';
+
+export default function TechnicianJobs() {
+  const { navigateTech } = useTechnicianNav();
+  const { showToast } = useToast();
+  const { effectiveUserId, isImpersonating } = useTechnicianContext();
+  const authUserId = pb.authStore.model?.id as string | undefined;
+
+  const shopUserId = isImpersonating ? authUserId : (pb.authStore.model as Record<string, unknown>)?.shopUserId as string | undefined;
+
+  const {
+    items: assignments,
+    loading,
+    error: assignmentsError,
+  } = usePagedList<TechnicianAssignment>(
+    (page, perPage) => {
+      if (!effectiveUserId) return Promise.resolve({ items: [], page: 1, perPage, totalItems: 0, totalPages: 1 });
+      return fetchTechnicianAssignments(effectiveUserId, page, perPage);
+    },
+    50,
+  );
+
+  const {
+    items: availableRDs,
+    loading: availableLoading,
+    error: availableError,
+  } = usePagedList<AvailableRepairOrder>(
+    (page, perPage) => {
+      if (!shopUserId) return Promise.resolve({ items: [], page: 1, perPage, totalItems: 0, totalPages: 1 });
+      return fetchAvailableRepairOrders(shopUserId, page, perPage);
+    },
+    50,
+  );
+
+  const [search, setSearch] = useState('');
+  const [statusTab, setStatusTab] = useState<StatusTab>('active');
+  const [claimingId, setClaimingId] = useState<string | null>(null);
+  const [claimError, setClaimError] = useState<string | null>(null);
+
+  const filtered = useMemo(() => {
+    let list = assignments;
+    if (statusTab === 'active') {
+      list = list.filter(
+        (a) =>
+          a.status === 'pending' ||
+          a.status === 'in_progress' ||
+          a.status === 'waiting_parts',
+      );
+    } else if (statusTab === 'completed') {
+      list = list.filter((a) => a.status === 'completed');
+    }
+    if (search.trim()) {
+      const q = search.toLowerCase();
+      list = list.filter(
+        (a) =>
+          a.roNumber?.toLowerCase().includes(q) ||
+          a.vehicleInfo?.toLowerCase().includes(q) ||
+          a.vin?.toLowerCase().includes(q),
+      );
+    }
+
+    return list;
+  }, [assignments, statusTab, search]);
+
+  const assignedROIds = useMemo(() => {
+    return new Set(assignments.map((a) => a.repairOrderId));
+  }, [assignments]);
+
+  const unclaimedRDs = useMemo(() => {
+    return availableRDs.filter((ro) => !assignedROIds.has(ro.id));
+  }, [availableRDs, assignedROIds]);
+
+  const handleClaim = async (ro: AvailableRepairOrder) => {
+    setClaimError(null);
+    if (!effectiveUserId) {
+      showToast('You must be signed in to claim a job.', 'error');
+      return;
+    }
+    const shopUserId = isImpersonating ? authUserId : (pb.authStore.model as Record<string, unknown>)?.shopUserId as string | undefined;
+    if (!shopUserId) {
+      showToast('Your account is not linked to a shop. Contact your shop owner.', 'error');
+      return;
+    }
+    setClaimingId(ro.id);
+    try {
+      const full = await pb.collection('repairOrders').getOne(ro.id) as Record<string, unknown>;
+      const serviceList = parseRepairOrderServices(full.services).map((s) => ({
+        id: s.id,
+        name: s.name,
+        description: s.description || '',
+        status: s.status || 'pending',
+      }));
+      if (serviceList.length === 0) {
+        showToast('This repair order has no services to claim.', 'error');
+        setClaimingId(null);
+        return;
+      }
+      const allIds = serviceList.map((s: { id: string }) => s.id);
+      const assignment = await createTechnicianAssignment(
+        {
+          id: ro.id,
+          roNumber: (full.roNumber as string) || '',
+          vehicleInfo: (full.vehicleInfo as string) || '',
+          vin: (full.vin as string) || '',
+          mileage: (full.mileage as string) || '',
+          serviceLocation: (full.serviceLocation as string) || '',
+          services: serviceList,
+        },
+        effectiveUserId,
+        allIds,
+        shopUserId,
+      );
+      showToast('Job claimed successfully.', 'success');
+      navigateTech(`/technician/jobs/${assignment.id}`);
+    } catch (err) {
+      console.error('Failed to claim job', err);
+      showToast('Failed to claim job. Please try again.', 'error');
+      setClaimingId(null);
+    }
+  };
+  const tabs: { id: StatusTab; label: string }[] = [
+    { id: 'active', label: 'Active' },
+    { id: 'available', label: 'Available' },
+    { id: 'all', label: 'All' },
+    { id: 'completed', label: 'Completed' },
+  ];
+
+  return (
+    <div className="mx-auto max-w-4xl space-y-4">
+      {/* Search */}
+      <div className="relative">
+        <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400" />
+        <input
+          type="text"
+          placeholder="Search by RO#, vehicle, or VIN…"
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          className="w-full rounded-xl border border-gray-200 bg-white py-3 pl-10 pr-10 text-sm text-gray-900 placeholder-gray-400 focus:border-green-400 focus:outline-none focus:ring-2 focus:ring-green-100 dark:border-gray-800 dark:bg-gray-900 dark:text-white dark:placeholder-gray-500 dark:focus:border-green-600 dark:focus:ring-green-900/30"
+        />
+        {search && (
+          <button
+            onClick={() => setSearch('')}
+            className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
+          >
+            <X className="h-4 w-4" />
+          </button>
+        )}
+      </div>
+
+      {/* Tabs */}
+      <div className="flex gap-1 rounded-xl bg-gray-100 p-1 dark:bg-gray-800">
+        {tabs.map((tab) => (
+          <button
+            key={tab.id}
+            onClick={() => setStatusTab(tab.id)}
+            className={`flex-1 rounded-lg px-4 py-2 text-sm font-medium transition-colors ${
+              statusTab === tab.id
+                ? 'bg-white text-gray-900 shadow-sm dark:bg-gray-700 dark:text-white'
+                : 'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'
+            }`}
+          >
+            {tab.label}
+          </button>
+        ))}
+      </div>
+
+      {/* Error banner */}
+      {claimError && (
+        <div className="flex items-center gap-2 rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700 dark:border-red-800/50 dark:bg-red-950/50 dark:text-red-400">
+          <AlertTriangle className="h-4 w-4 shrink-0" />
+          <span>{claimError}</span>
+          <button onClick={() => setClaimError(null)} className="ml-auto shrink-0 text-red-400 hover:text-red-600 dark:hover:text-red-300">
+            <X className="h-4 w-4" />
+          </button>
+        </div>
+      )}
+
+      {/* List */}
+      {statusTab === 'available' ? (
+        availableLoading ? (
+          <ListSkeleton rows={4} />
+        ) : availableError ? (
+          <ListError title="Unable to load available jobs" message="Failed to load available repair orders." onRetry={() => window.location.reload()} />
+        ) : unclaimedRDs.length === 0 ? (
+          <div className="rounded-2xl border border-gray-200 bg-white p-12 text-center shadow-sm dark:border-gray-800 dark:bg-gray-900">
+            <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-gray-100 dark:bg-gray-800">
+              <Search className="h-6 w-6 text-gray-400 dark:text-gray-500" />
+            </div>
+            <p className="mt-4 text-sm text-gray-500 dark:text-gray-400">
+              No active repair orders available to claim.
+            </p>
+          </div>
+        ) : (
+          <div className="space-y-3">
+            {unclaimedRDs.map((ro) => {
+              const statusBadge: Record<string, string> = {
+                active: 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400',
+                in_progress: 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400',
+                waiting_parts: 'bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400',
+                waiting_pickup: 'bg-teal-100 text-teal-700 dark:bg-teal-900/30 dark:text-teal-400',
+              };
+              const badge = statusBadge[ro.status] ?? 'bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400';
+              return (
+                <div
+                  key={ro.id}
+                  className="rounded-2xl border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-800 dark:bg-gray-900"
+                >
+                  <div className="flex items-center justify-between gap-3">
+                    <div className="min-w-0 flex-1">
+                      <div className="flex items-center gap-2">
+                        <span className="text-base font-bold text-gray-900 dark:text-white">
+                          {ro.roNumber || '—'}
+                        </span>
+                        <span className={`rounded-full px-2 py-0.5 text-xs font-medium ${badge}`}>
+                          {ro.status.replace(/_/g, ' ')}
+                        </span>
+                      </div>
+                      <p className="mt-0.5 text-sm text-gray-600 dark:text-gray-400">
+                        {ro.vehicleInfo || 'No vehicle info'}
+                      </p>
+                      <div className="mt-1 flex items-center gap-3 text-xs text-gray-400 dark:text-gray-500">
+                        {ro.vin && <span>VIN {ro.vin}</span>}
+                        {ro.mileage && <span>{ro.mileage} mi</span>}
+                        <span>{ro.serviceCount} service{ro.serviceCount !== 1 ? 's' : ''}</span>
+                      </div>
+                    </div>
+                    <button
+                      onClick={() => handleClaim(ro)}
+                      disabled={claimingId === ro.id}
+                      className="shrink-0 rounded-xl bg-green-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-green-700 disabled:cursor-not-allowed disabled:opacity-60"
+                    >
+                      {claimingId === ro.id ? 'Claiming…' : 'Claim'}
+                    </button>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        )
+      ) : loading ? (
+        <ListSkeleton rows={4} />
+      ) : assignmentsError ? (
+        <ListError title="Unable to load assigned jobs" message="Failed to load your assigned jobs." onRetry={() => window.location.reload()} />
+      ) : filtered.length === 0 ? (
+        <div className="rounded-2xl border border-gray-200 bg-white p-12 text-center shadow-sm dark:border-gray-800 dark:bg-gray-900">
+          <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-gray-100 dark:bg-gray-800">
+            <Search className="h-6 w-6 text-gray-400 dark:text-gray-500" />
+          </div>
+          <p className="mt-4 text-sm text-gray-500 dark:text-gray-400">
+            {search
+              ? 'No results match your search.'
+              : 'No assigned jobs yet.'}
+          </p>
+        </div>
+      ) : (
+        <div className="space-y-3">
+          {filtered.map((job) => {
+            const running = job.clockEntries.some((e) => !e.end);
+            const statusColors: Record<string, string> = {
+              pending: 'border-l-gray-300 dark:border-l-gray-700',
+              in_progress: 'border-l-yellow-400 dark:border-l-yellow-600',
+              waiting_parts: 'border-l-orange-400 dark:border-l-orange-600',
+              completed: 'border-l-green-400 dark:border-l-green-600',
+            };
+            return (
+              <button
+                key={job.id}
+                onClick={() => navigateTech(`/technician/jobs/${job.id}`)}
+                className={`w-full rounded-2xl border border-gray-200 bg-white p-4 text-left shadow-sm transition-colors hover:border-green-300 dark:border-gray-800 dark:bg-gray-900 dark:hover:border-green-700 ${
+                  statusColors[job.status] ?? 'border-l-gray-300'
+                } border-l-4`}
+              >
+                <div className="flex items-center justify-between gap-3">
+                  <div className="min-w-0 flex-1">
+                    <div className="flex items-center gap-2">
+                      <span className="text-base font-bold text-gray-900 dark:text-white">
+                        {job.roNumber || '—'}
+                      </span>
+                      {job.status === 'waiting_parts' && (
+                        <AlertTriangle className="h-4 w-4 text-orange-500" />
+                      )}
+                    </div>
+                    <p className="mt-0.5 text-sm text-gray-600 dark:text-gray-400">
+                      {job.vehicleInfo || 'No vehicle info'}
+                    </p>
+                    <div className="mt-1 flex items-center gap-3 text-xs text-gray-400 dark:text-gray-500">
+                      {job.vin && <span>VIN {job.vin}</span>}
+                      {job.mileage && <span>{job.mileage} mi</span>}
+                    </div>
+                  </div>
+                  <div className="flex flex-col items-end gap-1.5">
+                    {running && (
+                      <span className="inline-flex items-center gap-1 rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-700 dark:bg-green-900/30 dark:text-green-400">
+                        <span className="h-1.5 w-1.5 animate-pulse rounded-full bg-green-500" />
+                        Clocked
+                      </span>
+                    )}
+                    <span className="text-xs text-gray-400 dark:text-gray-500">
+                      {formatElapsed(clockElapsedMinutes(job.clockEntries))}
+                    </span>
+                    <ChevronRight className="h-4 w-4 text-gray-300 dark:text-gray-600" />
+                  </div>
+                </div>
+              </button>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/pages/technician/TechnicianProfile.tsx b/src/pages/technician/TechnicianProfile.tsx
new file mode 100644
index 0000000..2524422
--- /dev/null
+++ b/src/pages/technician/TechnicianProfile.tsx
@@ -0,0 +1,135 @@
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { pb } from '../../lib/pocketbase';
+import { useTechnicianContext } from '../../components/technician/TechnicianContext';
+import { User, Sun, Moon, LogOut, Mail, Tag } from 'lucide-react';
+
+export default function TechnicianProfile() {
+  const navigate = useNavigate();
+  const { isImpersonating, impersonatedTech } = useTechnicianContext();
+  const userEmail = isImpersonating ? (impersonatedTech?.email || '') : (pb.authStore.model?.email as string);
+  const displayName = isImpersonating ? (impersonatedTech?.displayName || '') : (pb.authStore.model?.displayName as string);
+
+  const [dark, setDark] = useState(() => {
+    if (typeof window === 'undefined') return false;
+    return localStorage.getItem('spq-dark-mode') === 'true';
+  });
+
+  const toggleDark = () => {
+    const next = !dark;
+    setDark(next);
+    document.documentElement.classList.toggle('dark', next);
+    localStorage.setItem('spq-dark-mode', String(next));
+  };
+
+  const handleLogout = () => {
+    pb.authStore.clear();
+    navigate('/login');
+  };
+
+  return (
+    <div className="mx-auto max-w-2xl space-y-5">
+      {/* Avatar card */}
+      <div className="rounded-2xl border border-gray-200 bg-white p-8 text-center shadow-sm dark:border-gray-800 dark:bg-gray-900">
+        <div className="mx-auto flex h-20 w-20 items-center justify-center rounded-full bg-green-100 dark:bg-green-900/30">
+          <User className="h-10 w-10 text-green-600 dark:text-green-400" />
+        </div>
+        <h1 className="mt-4 text-xl font-bold text-gray-900 dark:text-white">
+          {displayName || 'Technician'}
+        </h1>
+        {displayName && userEmail && (
+          <p className="mt-0.5 text-sm text-gray-500 dark:text-gray-400">
+            {userEmail}
+          </p>
+        )}
+        <span className="mt-3 inline-flex items-center rounded-full bg-gray-100 px-3 py-1 text-xs font-medium text-gray-600 dark:bg-gray-800 dark:text-gray-400">
+          Technician
+        </span>
+      </div>
+
+      {/* Account info */}
+      <div className="rounded-2xl border border-gray-200 bg-white p-5 shadow-sm dark:border-gray-800 dark:bg-gray-900">
+        <h2 className="mb-3 text-sm font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">
+          Account
+        </h2>
+        <div className="space-y-3">
+          <div className="flex items-center gap-3">
+            <div className="flex h-9 w-9 items-center justify-center rounded-full bg-gray-100 dark:bg-gray-800">
+              <Mail className="h-4 w-4 text-gray-500 dark:text-gray-400" />
+            </div>
+            <div>
+              <p className="text-sm text-gray-500 dark:text-gray-400">Email</p>
+              <p className="text-sm font-medium text-gray-900 dark:text-white">
+                {userEmail || '—'}
+              </p>
+            </div>
+          </div>
+          {displayName && (
+            <div className="flex items-center gap-3">
+              <div className="flex h-9 w-9 items-center justify-center rounded-full bg-gray-100 dark:bg-gray-800">
+                <Tag className="h-4 w-4 text-gray-500 dark:text-gray-400" />
+              </div>
+              <div>
+                <p className="text-sm text-gray-500 dark:text-gray-400">
+                  Display Name
+                </p>
+                <p className="text-sm font-medium text-gray-900 dark:text-white">
+                  {displayName}
+                </p>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Preferences */}
+      <div className="rounded-2xl border border-gray-200 bg-white p-5 shadow-sm dark:border-gray-800 dark:bg-gray-900">
+        <h2 className="mb-3 text-sm font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">
+          Preferences
+        </h2>
+        <button
+          onClick={toggleDark}
+          className="flex w-full items-center justify-between rounded-xl p-3 transition-colors hover:bg-gray-50 dark:hover:bg-gray-800/50"
+        >
+          <div className="flex items-center gap-3">
+            <div className="flex h-9 w-9 items-center justify-center rounded-full bg-gray-100 dark:bg-gray-800">
+              {dark ? (
+                <Sun className="h-4 w-4 text-yellow-500" />
+              ) : (
+                <Moon className="h-4 w-4 text-gray-500" />
+              )}
+            </div>
+            <div className="text-left">
+              <p className="text-sm font-medium text-gray-900 dark:text-white">
+                Dark Mode
+              </p>
+              <p className="text-xs text-gray-500 dark:text-gray-400">
+                {dark ? 'On' : 'Off'}
+              </p>
+            </div>
+          </div>
+          <div
+            className={`h-6 w-10 rounded-full transition-colors ${
+              dark ? 'bg-green-500' : 'bg-gray-300 dark:bg-gray-600'
+            } relative`}
+          >
+            <div
+              className={`absolute top-0.5 h-5 w-5 rounded-full bg-white shadow-sm transition-all ${
+                dark ? 'left-[18px]' : 'left-0.5'
+              }`}
+            />
+          </div>
+        </button>
+      </div>
+
+      {/* Logout */}
+      <button
+        onClick={handleLogout}
+        className="flex w-full items-center justify-center gap-2 rounded-2xl border border-red-200 bg-white p-4 text-sm font-medium text-red-600 transition-colors hover:bg-red-50 dark:border-red-900/50 dark:bg-gray-900 dark:text-red-400 dark:hover:bg-red-900/20"
+      >
+        <LogOut className="h-4 w-4" />
+        Logout
+      </button>
+    </div>
+  );
+}
diff --git a/src/schemas/__tests__/customer.test.ts b/src/schemas/__tests__/customer.test.ts
new file mode 100644
index 0000000..84574cb
--- /dev/null
+++ b/src/schemas/__tests__/customer.test.ts
@@ -0,0 +1,41 @@
+import { describe, it, expect } from 'vitest';
+import { customerWriteSchema } from '../customer';
+
+const validData = {
+  name: 'Alice Johnson',
+  phone: '555-9999',
+};
+
+describe('customerWriteSchema', () => {
+  it('accepts valid data', () => {
+    const result = customerWriteSchema.safeParse(validData);
+    expect(result.success).toBe(true);
+  });
+
+  it('accepts valid data with email', () => {
+    const result = customerWriteSchema.safeParse({ ...validData, email: 'alice@example.com' });
+    expect(result.success).toBe(true);
+  });
+
+  it('accepts empty email', () => {
+    const result = customerWriteSchema.safeParse({ ...validData, email: '' });
+    expect(result.success).toBe(true);
+  });
+
+  it('rejects empty name', () => {
+    const result = customerWriteSchema.safeParse({ ...validData, name: '' });
+    expect(result.success).toBe(false);
+    if (!result.success) expect(result.error.issues[0].message).toBe('Customer name is required');
+  });
+
+  it('rejects empty phone', () => {
+    const result = customerWriteSchema.safeParse({ ...validData, phone: '' });
+    expect(result.success).toBe(false);
+    if (!result.success) expect(result.error.issues[0].message).toBe('Phone is required');
+  });
+
+  it('rejects invalid email', () => {
+    const result = customerWriteSchema.safeParse({ ...validData, email: 'not-an-email' });
+    expect(result.success).toBe(false);
+  });
+});
diff --git a/src/schemas/__tests__/invoice.test.ts b/src/schemas/__tests__/invoice.test.ts
new file mode 100644
index 0000000..eff2d3c
--- /dev/null
+++ b/src/schemas/__tests__/invoice.test.ts
@@ -0,0 +1,69 @@
+import { describe, it, expect } from 'vitest';
+import { invoiceWriteSchema } from '../invoice';
+
+const validItem = {
+  description: 'Oil change service',
+  quantity: 1,
+  unitPrice: 49.99,
+  total: 49.99,
+};
+
+const validData = {
+  customerName: 'Bob Williams',
+  vehicleInfo: '2021 Toyota Camry',
+  items: [validItem],
+  subtotal: 49.99,
+  tax: 4.00,
+  total: 53.99,
+  status: 'draft' as const,
+  dueDate: '2026-08-01',
+};
+
+describe('invoiceWriteSchema', () => {
+  it('accepts valid data', () => {
+    const result = invoiceWriteSchema.safeParse(validData);
+    expect(result.success).toBe(true);
+  });
+
+  it('rejects empty customer name', () => {
+    const result = invoiceWriteSchema.safeParse({ ...validData, customerName: '' });
+    expect(result.success).toBe(false);
+    if (!result.success) expect(result.error.issues[0].message).toBe('Customer name is required');
+  });
+
+  it('rejects empty vehicle info', () => {
+    const result = invoiceWriteSchema.safeParse({ ...validData, vehicleInfo: '' });
+    expect(result.success).toBe(false);
+  });
+
+  it('rejects empty items array', () => {
+    const result = invoiceWriteSchema.safeParse({ ...validData, items: [] });
+    expect(result.success).toBe(false);
+  });
+
+  it('rejects item with empty description', () => {
+    const result = invoiceWriteSchema.safeParse({
+      ...validData,
+      items: [{ ...validItem, description: '' }],
+    });
+    expect(result.success).toBe(false);
+  });
+
+  it('rejects item with zero quantity', () => {
+    const result = invoiceWriteSchema.safeParse({
+      ...validData,
+      items: [{ ...validItem, quantity: 0 }],
+    });
+    expect(result.success).toBe(false);
+  });
+
+  it('rejects total not matching subtotal+tax', () => {
+    const result = invoiceWriteSchema.safeParse({ ...validData, total: 99.99 });
+    expect(result.success).toBe(false);
+  });
+
+  it('rejects invalid status enum', () => {
+    const result = invoiceWriteSchema.safeParse({ ...validData, status: 'cancelled' });
+    expect(result.success).toBe(false);
+  });
+});
diff --git a/src/schemas/__tests__/quote.test.ts b/src/schemas/__tests__/quote.test.ts
new file mode 100644
index 0000000..128ea1d
--- /dev/null
+++ b/src/schemas/__tests__/quote.test.ts
@@ -0,0 +1,65 @@
+import { describe, it, expect } from 'vitest';
+import { quoteWriteSchema } from '../quote';
+
+const validService = {
+  id: 'svc1',
+  name: 'Oil Change',
+  price: 49.99,
+  selected: true,
+  approved: false,
+  customerDecision: 'pending' as const,
+};
+
+const validData = {
+  customerName: 'John Doe',
+  vehicleInfo: '2020 Honda Accord',
+  services: [validService],
+  discountValue: 0,
+  discountType: 'dollar' as const,
+  subtotal: 49.99,
+  tax: 4.00,
+  total: 53.99,
+  status: 'draft' as const,
+};
+
+describe('quoteWriteSchema', () => {
+  it('accepts valid data', () => {
+    const result = quoteWriteSchema.safeParse(validData);
+    expect(result.success).toBe(true);
+  });
+
+  it('rejects empty customer name', () => {
+    const result = quoteWriteSchema.safeParse({ ...validData, customerName: '' });
+    expect(result.success).toBe(false);
+    if (!result.success) expect(result.error.issues[0].message).toBe('Customer name is required');
+  });
+
+  it('rejects empty vehicle info', () => {
+    const result = quoteWriteSchema.safeParse({ ...validData, vehicleInfo: '' });
+    expect(result.success).toBe(false);
+    if (!result.success) expect(result.error.issues[0].message).toBe('Vehicle info is required');
+  });
+
+  it('rejects empty services array', () => {
+    const result = quoteWriteSchema.safeParse({ ...validData, services: [] });
+    expect(result.success).toBe(false);
+  });
+
+  it('rejects negative price on service', () => {
+    const result = quoteWriteSchema.safeParse({
+      ...validData,
+      services: [{ ...validService, price: -5 }],
+    });
+    expect(result.success).toBe(false);
+  });
+
+  it('rejects negative discount value', () => {
+    const result = quoteWriteSchema.safeParse({ ...validData, discountValue: -1 });
+    expect(result.success).toBe(false);
+  });
+
+  it('rejects invalid discount type', () => {
+    const result = quoteWriteSchema.safeParse({ ...validData, discountType: 'half' });
+    expect(result.success).toBe(false);
+  });
+});
diff --git a/src/schemas/__tests__/repairOrder.test.ts b/src/schemas/__tests__/repairOrder.test.ts
new file mode 100644
index 0000000..2e9389c
--- /dev/null
+++ b/src/schemas/__tests__/repairOrder.test.ts
@@ -0,0 +1,69 @@
+import { describe, it, expect } from 'vitest';
+import { repairOrderWriteSchema } from '../repairOrder';
+
+const validService = {
+  id: 'svc1',
+  name: 'Brake Pad Replacement',
+  laborHours: 2,
+  laborRate: 95,
+  partsCost: 85,
+  total: 275,
+  status: 'pending' as const,
+};
+
+const validData = {
+  customerName: 'Jane Smith',
+  customerPhone: '555-0123',
+  vehicleInfo: '2019 Ford F-150',
+  services: [validService],
+};
+
+describe('repairOrderWriteSchema', () => {
+  it('accepts valid data', () => {
+    const result = repairOrderWriteSchema.safeParse(validData);
+    expect(result.success).toBe(true);
+  });
+
+  it('rejects empty customer name', () => {
+    const result = repairOrderWriteSchema.safeParse({ ...validData, customerName: '' });
+    expect(result.success).toBe(false);
+    if (!result.success) expect(result.error.issues[0].message).toBe('Customer name is required');
+  });
+
+  it('rejects empty phone', () => {
+    const result = repairOrderWriteSchema.safeParse({ ...validData, customerPhone: '' });
+    expect(result.success).toBe(false);
+    if (!result.success) expect(result.error.issues[0].message).toBe('Phone is required');
+  });
+
+  it('rejects empty vehicle info', () => {
+    const result = repairOrderWriteSchema.safeParse({ ...validData, vehicleInfo: '' });
+    expect(result.success).toBe(false);
+  });
+
+  it('rejects empty services array', () => {
+    const result = repairOrderWriteSchema.safeParse({ ...validData, services: [] });
+    expect(result.success).toBe(false);
+  });
+
+  it('rejects service with empty name', () => {
+    const result = repairOrderWriteSchema.safeParse({
+      ...validData,
+      services: [{ ...validService, name: '' }],
+    });
+    expect(result.success).toBe(false);
+  });
+
+  it('rejects negative total', () => {
+    const result = repairOrderWriteSchema.safeParse({
+      ...validData,
+      services: [{ ...validService, total: -1 }],
+    });
+    expect(result.success).toBe(false);
+  });
+
+  it('rejects invalid status enum', () => {
+    const result = repairOrderWriteSchema.safeParse({ ...validData, status: 'shipped' });
+    expect(result.success).toBe(false);
+  });
+});
diff --git a/src/schemas/__tests__/settings.test.ts b/src/schemas/__tests__/settings.test.ts
new file mode 100644
index 0000000..908f333
--- /dev/null
+++ b/src/schemas/__tests__/settings.test.ts
@@ -0,0 +1,74 @@
+import { describe, it, expect } from 'vitest';
+import { settingsWriteSchema, accountSettingsWriteSchema } from '../settings';
+
+const validData = {
+  businessName: 'Auto Pro Repair',
+  businessPhone: '555-1000',
+  serviceAdvisor: 'Mike',
+  defaultLaborRate: 95,
+};
+
+describe('settingsWriteSchema', () => {
+  it('accepts valid data', () => {
+    const result = settingsWriteSchema.safeParse(validData);
+    expect(result.success).toBe(true);
+  });
+
+  it('rejects empty business name', () => {
+    const result = settingsWriteSchema.safeParse({ ...validData, businessName: '' });
+    expect(result.success).toBe(false);
+    if (!result.success) expect(result.error.issues[0].message).toBe('Business name is required');
+  });
+
+  it('rejects empty business phone', () => {
+    const result = settingsWriteSchema.safeParse({ ...validData, businessPhone: '' });
+    expect(result.success).toBe(false);
+  });
+
+  it('rejects empty service advisor', () => {
+    const result = settingsWriteSchema.safeParse({ ...validData, serviceAdvisor: '' });
+    expect(result.success).toBe(false);
+  });
+
+  it('rejects negative default labor rate', () => {
+    const result = settingsWriteSchema.safeParse({ ...validData, defaultLaborRate: -1 });
+    expect(result.success).toBe(false);
+  });
+
+  it('rejects zero default labor rate', () => {
+    const result = settingsWriteSchema.safeParse({ ...validData, defaultLaborRate: 0 });
+    expect(result.success).toBe(false);
+  });
+
+  it('rejects malformed accent color', () => {
+    const result = settingsWriteSchema.safeParse({ ...validData, pdfAccentColor: 'green' });
+    expect(result.success).toBe(false);
+  });
+
+  it('accepts valid accent color', () => {
+    const result = settingsWriteSchema.safeParse({ ...validData, pdfAccentColor: '#ff6600' });
+    expect(result.success).toBe(true);
+  });
+
+  it('rejects invalid business type', () => {
+    const result = settingsWriteSchema.safeParse({ ...validData, businessType: 'admin' });
+    expect(result.success).toBe(false);
+  });
+
+  it('rejects invalid pdf style', () => {
+    const result = settingsWriteSchema.safeParse({ ...validData, pdfStyle: 'fancy' });
+    expect(result.success).toBe(false);
+  });
+});
+
+describe('accountSettingsWriteSchema', () => {
+  it('accepts valid email', () => {
+    const result = accountSettingsWriteSchema.safeParse({ name: 'Mike', email: 'mike@example.com' });
+    expect(result.success).toBe(true);
+  });
+
+  it('rejects invalid email', () => {
+    const result = accountSettingsWriteSchema.safeParse({ name: 'Mike', email: 'bad' });
+    expect(result.success).toBe(false);
+  });
+});
diff --git a/src/schemas/customer.ts b/src/schemas/customer.ts
new file mode 100644
index 0000000..557d094
--- /dev/null
+++ b/src/schemas/customer.ts
@@ -0,0 +1,15 @@
+import { z } from 'zod';
+
+export const customerWriteSchema = z.object({
+  userId: z.string().optional(),
+  name: z.string().min(1, 'Customer name is required'),
+  firstName: z.string().optional().default(''),
+  middleName: z.string().optional().default(''),
+  lastName: z.string().optional().default(''),
+  phone: z.string().min(1, 'Phone is required'),
+  email: z.union([z.string().email('Must be a valid email'), z.literal('')]).optional().default(''),
+  address: z.string().optional().default(''),
+  notes: z.string().optional().default(''),
+});
+
+export type CustomerWrite = z.infer<typeof customerWriteSchema>;
diff --git a/src/schemas/index.ts b/src/schemas/index.ts
new file mode 100644
index 0000000..edaac2e
--- /dev/null
+++ b/src/schemas/index.ts
@@ -0,0 +1,14 @@
+import type { ZodError } from 'zod';
+
+export function formatZodError(err: ZodError): string {
+  return err.issues[0]?.message ?? 'Validation failed';
+}
+
+export function zodErrorsToFormFields(err: ZodError): Record<string, string> {
+  const map: Record<string, string> = {};
+  for (const issue of err.issues) {
+    const key = String(issue.path[0] || '_root');
+    if (!map[key]) map[key] = issue.message;
+  }
+  return map;
+}
diff --git a/src/schemas/invoice.ts b/src/schemas/invoice.ts
new file mode 100644
index 0000000..644c106
--- /dev/null
+++ b/src/schemas/invoice.ts
@@ -0,0 +1,28 @@
+import { z } from 'zod';
+
+export const invoiceItemSchema = z.object({
+  description: z.string().min(1, 'Item description is required'),
+  quantity: z.number().positive('Quantity must be at least 1'),
+  unitPrice: z.number().nonnegative(),
+  total: z.number().nonnegative(),
+});
+
+export const invoiceWriteSchema = z.object({
+  userId: z.string().optional(),
+  customerName: z.string().min(1, 'Customer name is required'),
+  customerEmail: z.string().optional().default(''),
+  customerPhone: z.string().optional().default(''),
+  vehicleInfo: z.string().min(1, 'Vehicle info is required'),
+  items: z.array(invoiceItemSchema).min(1, 'At least one item is required'),
+  subtotal: z.number().nonnegative(),
+  tax: z.number().nonnegative(),
+  total: z.number().nonnegative(),
+  status: z.enum(['draft', 'sent', 'paid', 'overdue']).optional(),
+  dueDate: z.string().min(1, 'Due date is required'),
+  notes: z.string().optional().default(''),
+}).refine(
+  (data) => Math.abs(data.total - (data.subtotal + data.tax)) < 0.01,
+  { message: 'Total must equal subtotal + tax', path: ['total'] },
+);
+
+export type InvoiceWrite = z.infer<typeof invoiceWriteSchema>;
diff --git a/src/schemas/quote.ts b/src/schemas/quote.ts
new file mode 100644
index 0000000..f3383b8
--- /dev/null
+++ b/src/schemas/quote.ts
@@ -0,0 +1,55 @@
+import { z } from 'zod';
+
+export const quoteServiceSchema = z.object({
+  id: z.string().min(1),
+  name: z.string().min(1, 'Service name is required'),
+  price: z.number().nonnegative('Price must be 0 or more'),
+  explanation: z.string().optional().default(''),
+  recommendation: z.string().optional().default(''),
+  priority: z.enum(['CRITICAL_SAFETY', 'SAFETY_CONCERN', 'RECOMMENDED', 'MAINTENANCE', 'OPTIONAL']).optional(),
+  priorityReason: z.string().optional().default(''),
+  selected: z.boolean(),
+  approved: z.boolean(),
+  customerDecision: z.enum(['approved', 'declined', 'pending']),
+  authorizedBy: z.string().optional().default(''),
+  authorizedAt: z.string().optional().default(''),
+  authorizedMethod: z.enum(['in_person', 'phone', 'email', 'text', 'signature', 'online']).optional(),
+  applyShopCharge: z.boolean().optional().default(true),
+  technicianNotes: z.string().optional().default(''),
+  noPartsRequired: z.boolean().optional(),
+  partsNotInStock: z.boolean().optional(),
+  aftermarketAvailable: z.boolean().optional(),
+  aftermarketPartsList: z.string().optional().default(''),
+  partsDeliveryTime: z.string().optional().default(''),
+  recommendationReason: z.string().optional().default(''),
+  sourceROServiceId: z.string().optional(),
+  pricingMode: z.enum(['full', 'split']).optional(),
+  laborHours: z.number().nonnegative().optional(),
+  laborRate: z.number().nonnegative().optional(),
+  partsCost: z.number().nonnegative().optional(),
+});
+
+export const quoteWriteSchema = z.object({
+  userId: z.string().optional(),
+  customerId: z.string().optional().default(''),
+  customerName: z.string().min(1, 'Customer name is required'),
+  customerPhone: z.string().optional().default(''),
+  vehicleInfo: z.string().min(1, 'Vehicle info is required'),
+  vin: z.string().optional().default(''),
+  mileage: z.string().optional().default(''),
+  repairOrderNumber: z.string().optional().default(''),
+  serviceAdvisor: z.string().optional().default(''),
+  services: z.array(quoteServiceSchema).min(1, 'At least one service is required'),
+  discountValue: z.number().nonnegative(),
+  discountType: z.enum(['dollar', 'percent']),
+  subtotal: z.number(),
+  tax: z.number(),
+  total: z.number(),
+  status: z.enum(['draft', 'sent', 'approved', 'declined']),
+  createdAt: z.string().optional(),
+  lastUpdated: z.string().optional(),
+  repairOrderId: z.string().optional(),
+  shareToken: z.string().optional(),
+});
+
+export type QuoteWrite = z.infer<typeof quoteWriteSchema>;
diff --git a/src/schemas/repairOrder.ts b/src/schemas/repairOrder.ts
new file mode 100644
index 0000000..1decdcf
--- /dev/null
+++ b/src/schemas/repairOrder.ts
@@ -0,0 +1,49 @@
+import { z } from 'zod';
+
+export const roServiceSchema = z.object({
+  id: z.string().min(1),
+  name: z.string().min(1, 'Service name is required'),
+  description: z.string().optional().default(''),
+  laborHours: z.number().nonnegative(),
+  laborRate: z.number().nonnegative(),
+  partsCost: z.number().nonnegative().default(0),
+  total: z.number().nonnegative(),
+  status: z.enum(['pending', 'in_progress', 'completed']),
+  technician: z.string().optional().default(''),
+  subStatus: z.enum(['parts_ordered', 'in_bay', 'qc_passed', '']).optional().default(''),
+  pricingMode: z.enum(['full', 'split']).optional(),
+  applyShopCharge: z.boolean().optional().default(true),
+});
+
+export const repairOrderWriteSchema = z.object({
+  userId: z.string().optional(),
+  customerId: z.string().optional().default(''),
+  customerName: z.string().min(1, 'Customer name is required'),
+  customerPhone: z.string().min(1, 'Phone is required'),
+  customerEmail: z.string().optional().default(''),
+  vehicleInfo: z.string().min(1, 'Vehicle info is required'),
+  vin: z.string().optional().default(''),
+  mileage: z.string().optional().default(''),
+  roNumber: z.string().optional().default(''),
+  advisorName: z.string().optional().default(''),
+  notes: z.string().optional().default(''),
+  services: z.array(roServiceSchema).min(1, 'At least one service is required'),
+  status: z.enum(['active', 'in_progress', 'waiting_parts', 'waiting_pickup', 'completed', 'final_close', 'delivered']).optional(),
+  total: z.number().nonnegative().default(0),
+  tax: z.number().nonnegative().default(0),
+  shopCharges: z.number().nonnegative().default(0),
+  discount: z.object({ value: z.number().nonnegative(), type: z.enum(['dollar', 'percent']) }).optional(),
+  estimatedTime: z.string().optional().default(''),
+  serviceLocation: z.string().optional().default(''),
+  travelFee: z.number().nonnegative().optional().default(0),
+  tripMiles: z.number().nonnegative().optional().default(0),
+  completedTime: z.string().optional(),
+  completedDate: z.string().optional(),
+  warranty: z.boolean().optional().default(false),
+  customerType: z.enum(['waiter', 'drop-off']).optional(),
+  estimatedDuration: z.number().optional(),
+  writeupTime: z.string().optional(),
+  financial: z.string().optional(),
+});
+
+export type RepairOrderWrite = z.infer<typeof repairOrderWriteSchema>;
diff --git a/src/schemas/settings.ts b/src/schemas/settings.ts
new file mode 100644
index 0000000..6fb4ed1
--- /dev/null
+++ b/src/schemas/settings.ts
@@ -0,0 +1,39 @@
+import { z } from 'zod';
+
+export const settingsWriteSchema = z.object({
+  businessType: z.enum(['shop', 'advisor', 'mobile', 'home']).optional(),
+  businessName: z.string().min(1, 'Business name is required'),
+  businessAddress: z.string().optional().default(''),
+  businessPhone: z.string().min(1, 'Business phone is required'),
+  serviceAdvisor: z.string().min(1, 'Service advisor name is required'),
+  taxRate: z.number().nonnegative().default(0),
+  taxLabel: z.string().optional().default('Tax'),
+  shopChargeRate: z.number().nonnegative().default(3),
+  shopChargeCap: z.number().nonnegative().default(69.95),
+  shopChargeExplanation: z.string().optional().default(''),
+  headerMessage: z.string().optional().default(''),
+  footerMessage: z.string().optional().default(''),
+  quoteFooterNote: z.string().optional().default(''),
+  logoUrl: z.string().optional().default(''),
+  showLogoOnPdf: z.boolean().optional().default(true),
+  quoteExpiryDays: z.number().int().positive().default(30),
+  quoteNumberPrefix: z.string().optional().default(''),
+  pdfAccentColor: z.string().regex(/^#[0-9a-fA-F]{6}$/, 'Must be a valid hex color like #16a34a').optional().default('#16a34a'),
+  pdfStyle: z.enum(['professional', 'compact']).optional().default('professional'),
+  businessHours: z.string().optional().default(''),
+  defaultLaborRate: z.number().positive('Labor rate must be greater than 0').default(95),
+  paymentTerms: z.string().optional().default('Due on Receipt'),
+  serviceLocationFieldsEnabled: z.boolean().optional().default(false),
+  defaultTravelFee: z.number().nonnegative().default(0),
+  travelFeeExplanation: z.string().optional().default(''),
+});
+
+export type SettingsWrite = z.infer<typeof settingsWriteSchema>;
+
+export const accountSettingsWriteSchema = z.object({
+  name: z.string().min(1, 'Name is required'),
+  email: z.string().email('Must be a valid email'),
+  emailVisibility: z.boolean().optional(),
+}).partial();
+
+export type AccountSettingsWrite = z.infer<typeof accountSettingsWriteSchema>;
diff --git a/src/store/__tests__/quote.test.ts b/src/store/__tests__/quote.test.ts
new file mode 100644
index 0000000..17688a5
--- /dev/null
+++ b/src/store/__tests__/quote.test.ts
@@ -0,0 +1,93 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { useQuoteStore } from '../quote';
+import type { QuoteService } from '../../types';
+
+const mockService = (id: string, price: number, overrides: Partial<QuoteService> = {}): QuoteService => ({
+  id,
+  name: `Service ${id}`,
+  price,
+  selected: true,
+  approved: true,
+  customerDecision: 'approved',
+  ...overrides,
+});
+
+describe('QuoteStore', () => {
+  beforeEach(() => {
+    useQuoteStore.setState({
+      customerInfo: { firstName: '', middleName: '', lastName: '', name: '', phone: '', vehicleInfo: '', vin: '', mileage: '', roNumber: '', serviceAdvisor: '', email: '' },
+      services: [],
+      discount: { value: 0, type: 'dollar' },
+    });
+  });
+
+  it('should start with empty state', () => {
+    const state = useQuoteStore.getState();
+    expect(state.services).toHaveLength(0);
+    expect(state.discount.value).toBe(0);
+    expect(state.customerInfo.name).toBe('');
+  });
+
+  it('should add a service', () => {
+    const svc = mockService('1', 100);
+    useQuoteStore.getState().addService(svc);
+    expect(useQuoteStore.getState().services).toHaveLength(1);
+    expect(useQuoteStore.getState().services[0].name).toBe('Service 1');
+  });
+
+  it('should not add duplicate services', () => {
+    const svc = mockService('1', 100);
+    useQuoteStore.getState().addService(svc);
+    useQuoteStore.getState().addService(svc);
+    expect(useQuoteStore.getState().services).toHaveLength(1);
+  });
+
+  it('should remove a service', () => {
+    useQuoteStore.getState().addService(mockService('1', 100));
+    useQuoteStore.getState().addService(mockService('2', 200));
+    useQuoteStore.getState().removeService('1');
+    expect(useQuoteStore.getState().services).toHaveLength(1);
+    expect(useQuoteStore.getState().services[0].id).toBe('2');
+  });
+
+  it('should calculate subtotal correctly', () => {
+    useQuoteStore.getState().addService(mockService('1', 100));
+    useQuoteStore.getState().addService(mockService('2', 250.50));
+    expect(useQuoteStore.getState().subtotal()).toBe(350.50);
+  });
+
+  it('should calculate discount correctly', () => {
+    useQuoteStore.getState().addService(mockService('1', 100));
+    useQuoteStore.getState().addService(mockService('2', 200));
+    useQuoteStore.getState().setDiscount(10, 'percent');
+    const state = useQuoteStore.getState();
+    const sub = state.subtotal();
+    const disc = sub * 0.1;
+    expect(state.total()).toBe(sub - disc);
+  });
+
+  it('should toggle service approval', () => {
+    useQuoteStore.getState().addService(mockService('1', 100, { approved: true }));
+    useQuoteStore.getState().toggleApproved('1');
+    expect(useQuoteStore.getState().services[0].approved).toBe(false);
+    expect(useQuoteStore.getState().services[0].customerDecision).toBe('pending');
+  });
+
+  it('should update customer info', () => {
+    useQuoteStore.getState().setCustomerInfo({ name: 'John Doe', phone: '555-0100' });
+    const state = useQuoteStore.getState();
+    expect(state.customerInfo.name).toBe('John Doe');
+    expect(state.customerInfo.phone).toBe('555-0100');
+  });
+
+  it('should reset to initial state', () => {
+    useQuoteStore.getState().addService(mockService('1', 100));
+    useQuoteStore.getState().setCustomerInfo({ name: 'John' });
+    useQuoteStore.getState().setDiscount(50, 'dollar');
+    useQuoteStore.getState().reset();
+    const state = useQuoteStore.getState();
+    expect(state.services).toHaveLength(0);
+    expect(state.customerInfo.name).toBe('');
+    expect(state.discount.value).toBe(0);
+  });
+});
diff --git a/src/store/quote.ts b/src/store/quote.ts
new file mode 100644
index 0000000..7b17e40
--- /dev/null
+++ b/src/store/quote.ts
@@ -0,0 +1,167 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+import type { QuoteService, CustomerInfo, QuoteAuthorizationMethod } from '../types';
+import { loadSettings } from '../lib/settings';
+import { billableServices } from '../lib/totals';
+
+interface QuoteState {
+  customerInfo: CustomerInfo;
+  services: QuoteService[];
+  discount: { value: number; type: 'dollar' | 'percent' };
+  currentWorkAuthorizationMethod: QuoteAuthorizationMethod;
+  additionalWorkAuthorizationMethod: QuoteAuthorizationMethod;
+  // Actions
+  setCustomerInfo: (info: Partial<CustomerInfo>) => void;
+  addService: (service: QuoteService) => void;
+  removeService: (id: string) => void;
+  toggleApproved: (id: string) => void;
+  toggleDeclined: (id: string) => void;
+  updateService: (id: string, updates: Partial<QuoteService>) => void;
+  clearServices: () => void;
+  setDiscount: (value: number, type: 'dollar' | 'percent') => void;
+  setCurrentWorkAuthorizationMethod: (method: QuoteAuthorizationMethod) => void;
+  setAdditionalWorkAuthorizationMethod: (method: QuoteAuthorizationMethod) => void;
+  reset: () => void;
+  // Computed
+  subtotal: () => number;
+  approvedSubtotal: () => number;
+  total: () => number;
+}
+
+const emptyCustomer: CustomerInfo = {
+  firstName: '', middleName: '', lastName: '', name: '',
+  phone: '', vehicleInfo: '', vin: '', mileage: '',
+  roNumber: '', repairOrderId: '', serviceAdvisor: '', email: '',
+};
+
+export const useQuoteStore = create<QuoteState>()(
+  persist(
+    (set, get) => ({
+      customerInfo: { ...emptyCustomer },
+      services: [],
+      discount: { value: 0, type: 'dollar' },
+      currentWorkAuthorizationMethod: 'in_person',
+      additionalWorkAuthorizationMethod: 'in_person',
+
+      setCustomerInfo: (info) => set((s) => {
+        const merged = { ...s.customerInfo, ...info };
+        // Auto-compose name from firstName + lastName if those changed
+        if (info.firstName !== undefined || info.lastName !== undefined || info.middleName !== undefined) {
+          const parts = [merged.firstName, merged.middleName, merged.lastName].filter(Boolean);
+          merged.name = parts.join(' ') || merged.name;
+        }
+        // Backward compat: if caller passes `name` directly, split it
+        if (info.name !== undefined && info.name !== merged.name && info.firstName === undefined) {
+          const parts = info.name.trim().split(/\s+/);
+          merged.firstName = parts[0] || '';
+          merged.lastName = parts.slice(1).join(' ') || '';
+        }
+        return { customerInfo: merged };
+      }),
+      
+      addService: (service) => set((s) => {
+        if (s.services.find((x) => x.id === service.id)) return s;
+        return { services: [...s.services, service] };
+      }),
+      
+      removeService: (id) => set((s) => ({ services: s.services.filter((x) => x.id !== id) })),
+      
+      toggleApproved: (id) => set((s) => ({
+        services: s.services.map((x) => {
+          if (x.id !== id) return x;
+          const now = new Date().toISOString();
+          if (x.approved) {
+            return { ...x, approved: false, customerDecision: 'pending', authorizedBy: undefined, authorizedAt: undefined, authorizedMethod: undefined };
+          }
+          return {
+            ...x,
+            approved: true,
+            customerDecision: 'approved',
+            authorizedBy: x.authorizedBy || s.customerInfo.name || '',
+            authorizedAt: now,
+            authorizedMethod: s.additionalWorkAuthorizationMethod,
+          };
+        }),
+      })),
+      
+      toggleDeclined: (id) => set((s) => ({
+        services: s.services.map((x) => {
+          if (x.id !== id) return x;
+          const now = new Date().toISOString();
+          if (x.customerDecision === 'declined') {
+            return { ...x, approved: false, customerDecision: 'pending', authorizedBy: undefined, authorizedAt: undefined, authorizedMethod: undefined };
+          }
+          return {
+            ...x,
+            approved: false,
+            customerDecision: 'declined',
+            authorizedBy: x.authorizedBy || s.customerInfo.name || '',
+            authorizedAt: now,
+            authorizedMethod: s.additionalWorkAuthorizationMethod,
+          };
+        }),
+      })),
+      
+      updateService: (id, updates) => set((s) => ({
+        services: s.services.map((x) => (x.id === id ? { ...x, ...updates } : x)),
+      })),
+      
+      clearServices: () => set({ services: [] }),
+      setDiscount: (value, type) => set({ discount: { value, type } }),
+      setCurrentWorkAuthorizationMethod: (method) => set((s) => {
+        const now = new Date().toISOString();
+        return {
+          currentWorkAuthorizationMethod: method,
+          services: s.services.map((x) => {
+            if (x.customerDecision !== 'approved' && x.customerDecision !== 'declined') return x;
+            return {
+              ...x,
+              authorizedBy: x.authorizedBy || s.customerInfo.name || '',
+              authorizedAt: x.authorizedAt || now,
+              authorizedMethod: method,
+            };
+          }),
+        };
+      }),
+      setAdditionalWorkAuthorizationMethod: (method) => set({ additionalWorkAuthorizationMethod: method }),
+      
+      reset: () => set({
+        customerInfo: { ...emptyCustomer },
+        services: [],
+        discount: { value: 0, type: 'dollar' },
+        currentWorkAuthorizationMethod: 'in_person',
+        additionalWorkAuthorizationMethod: 'in_person',
+      }),
+
+      // Subtotal uses billableServices: counts all non-declined when unanimous,
+      // only approved when mixed.
+      subtotal: () => {
+        const billable = billableServices(get().services) as QuoteService[];
+        return billable.reduce((sum, s) => sum + s.price, 0);
+      },
+      approvedSubtotal: () => {
+        const billable = billableServices(get().services) as QuoteService[];
+        return billable.reduce((sum, s) => sum + s.price, 0);
+      },
+      total: () => {
+        const s = get();
+        const sub = s.subtotal();
+        const discount = s.discount.type === 'percent' ? sub * (s.discount.value / 100) : s.discount.value;
+        return Math.max(0, sub - discount);
+      },
+    }),
+    {
+      name: 'spq-quote',
+      onRehydrateStorage: () => (_state, error) => {
+        if (error) return;
+        const s = useQuoteStore.getState();
+        if (!s.customerInfo.serviceAdvisor) {
+          const settings = loadSettings();
+          if (settings.serviceAdvisor) {
+            s.setCustomerInfo({ serviceAdvisor: settings.serviceAdvisor });
+          }
+        }
+      },
+    }
+  )
+);
diff --git a/src/store/settings.ts b/src/store/settings.ts
new file mode 100644
index 0000000..8aeb715
--- /dev/null
+++ b/src/store/settings.ts
@@ -0,0 +1,32 @@
+import { create } from 'zustand';
+import { loadSettings, saveSettings } from '../lib/settings';
+import type { ShopSettings } from '../types';
+
+const STORAGE_KEY = 'spq-settings';
+
+interface SettingsState {
+  settings: ShopSettings;
+  setSettings: (s: ShopSettings) => void;
+  hydrate: () => void;
+}
+
+export const useSettingsStore = create<SettingsState>((set) => ({
+  settings: loadSettings(),
+  setSettings: (s) => {
+    saveSettings(s);
+    set({ settings: s });
+  },
+  hydrate: () => set({ settings: loadSettings() }),
+}));
+
+export function useSettings(): ShopSettings {
+  return useSettingsStore((s) => s.settings);
+}
+
+if (typeof window !== 'undefined') {
+  window.addEventListener('storage', (e) => {
+    if (e.key === STORAGE_KEY && e.newValue && e.newValue !== e.oldValue) {
+      useSettingsStore.getState().hydrate();
+    }
+  });
+}
diff --git a/src/test/setup.ts b/src/test/setup.ts
new file mode 100644
index 0000000..7b0828b
--- /dev/null
+++ b/src/test/setup.ts
@@ -0,0 +1 @@
+import '@testing-library/jest-dom';
diff --git a/src/types.ts b/src/types.ts
new file mode 100644
index 0000000..36524bc
--- /dev/null
+++ b/src/types.ts
@@ -0,0 +1,423 @@
+export interface Service {
+  id: string;
+  name: string;
+  price: number;
+  explanation?: string;
+  recommendation?: string;
+  priority?: 'CRITICAL_SAFETY' | 'SAFETY_CONCERN' | 'RECOMMENDED' | 'MAINTENANCE' | 'OPTIONAL';
+  priorityReason?: string;
+  applyShopCharge?: boolean;
+  laborHours?: number;
+  laborRate?: number;
+  partsCost?: number;
+  pricingMode?: 'full' | 'split';
+}
+
+export interface QuoteService extends Service {
+  selected: boolean;
+  approved: boolean;
+  customerDecision: 'approved' | 'declined' | 'pending';
+  authorizedBy?: string;
+  authorizedAt?: string;
+  authorizedMethod?: 'in_person' | 'phone' | 'email' | 'text' | 'signature' | 'online';
+  technicianNotes?: string;
+  // Parts status flags (replicated from legacy quote-tab-manager.js)
+  noPartsRequired?: boolean;
+  partsNotInStock?: boolean;
+  aftermarketAvailable?: boolean;
+  aftermarketPartsList?: string;   // legacy: aftermarketPartsList — displayed in PDF
+  partsDeliveryTime?: string;      // legacy: partsDeliveryTime — displayed in PDF when partsNotInStock
+  recommendationReason?: string;   // legacy: recommendationReason — shown in PDF as uppercase text
+  sourceROServiceId?: string;       // originating RO service id when generated from an RO
+}
+
+export type QuoteAuthorizationMethod = 'in_person' | 'phone' | 'text';
+
+export interface CustomerInfo {
+  customerId?: string;       // link to customers collection
+  firstName: string;
+  middleName: string;
+  lastName: string;
+  name: string;              // auto-composed: "firstName lastName"
+  phone: string;
+  email?: string;            // optionally stored, used for sending quotes
+  vehicleInfo: string;
+  vin: string;
+  mileage: string;
+  roNumber: string;
+  repairOrderId?: string;      // originating RO id when quote was generated from an RO
+  serviceAdvisor: string;
+  serviceLocation?: string;     // job-site address for mobile/home work
+}
+
+export interface Quote {
+  id: string;
+  customerInfo: CustomerInfo;
+  services: QuoteService[];
+  discount: { value: number; type: 'dollar' | 'percent' };
+  createdAt: string;
+  updatedAt: string;
+  status: 'draft' | 'sent' | 'approved' | 'declined';
+  repairOrderId?: string;   // link back to the originating RO when generated from one
+  shareToken?: string;       // secret token for public customer review/approval URL
+  viewedAt?: string;          // ISO timestamp of first customer view via public approval link
+}
+
+export type QuotePdfFont = 'helvetica' | 'times' | 'courier';
+export type QuotePdfFontWeight = 'normal' | 'bold';
+export type QuotePdfTextTransform = 'none' | 'uppercase';
+export type QuotePdfSpacing = 'compact' | 'normal' | 'spacious';
+export type QuotePdfHeaderLayout = 'boxed' | 'simple' | 'minimal';
+export type QuotePdfLogoAlignment = 'left' | 'center' | 'right';
+export type QuotePdfPriceDisplay = 'right' | 'inline' | 'hidden';
+export type QuotePdfSectionOrder = 'approved_first' | 'recommendations_first' | 'combined';
+
+export interface QuotePdfTextStyle {
+  font: QuotePdfFont;
+  size: number;
+  weight: QuotePdfFontWeight;
+}
+
+export interface QuotePdfLabels {
+  approvedSection: string;
+  recommendationsSection: string;
+  declinedSection: string;
+  customerApproved: string;
+  customerDeclined: string;
+  priorityReason: string;
+  subtotal: string;
+  shopCharge: string;
+  discount: string;
+  total: string;
+  paymentTerms: string;
+  authorizedInPerson: string;
+  authorizedByText: string;
+  authorizedByCall: string;
+  authorizedOnline: string;
+  authorizedWithSignature: string;
+  authorizedByEmail: string;
+  authorizedTotal: string;
+  addOnTotal: string;
+  allWorkSubtotal: string;
+  totalIfAllApproved: string;
+}
+
+export interface QuotePdfColors {
+  sectionHeader: string;
+  serviceTitle: string;
+  description: string;
+  recommendation: string;
+  headerBackground: string;
+  separator: string;
+  totalsBackground: string;
+  footer: string;
+  approvedBadge: string;
+  declinedBadge: string;
+  recommendationsSection: string;
+}
+
+export interface QuotePdfAppearance {
+  showBusinessAddress: boolean;
+  showBusinessPhone: boolean;
+  showCustomerInfo: boolean;
+  showVin: boolean;
+  showMileage: boolean;
+  showRoNumber: boolean;
+  showQuoteDate: boolean;
+  showHeaderMessage: boolean;
+  showFooterMessage: boolean;
+  showQuoteFooterNote: boolean;
+  showPaymentTerms: boolean;
+  showServiceDecisionBadges: boolean;
+  showAuthorizationLine: boolean;
+  showServicePrices: boolean;
+  showTotalsSummary: boolean;
+  showShopChargeLine: boolean;
+  showDiscountLine: boolean;
+  showTaxLine: boolean;
+  showPriority: boolean;
+  showPriorityReason: boolean;
+  showRecommendation: boolean;
+  showServiceDescription: boolean;
+  showPartsStatus: boolean;
+  showAftermarketOptions: boolean;
+  showDeclinedServices: boolean;
+  showPendingRecommendations: boolean;
+  serviceSeparators: boolean;
+  headerLayout: QuotePdfHeaderLayout;
+  logoAlignment: QuotePdfLogoAlignment;
+  logoWidth: number;
+  logoHeight: number;
+  priceDisplay: QuotePdfPriceDisplay;
+  sectionOrder: QuotePdfSectionOrder;
+  serviceSpacing: QuotePdfSpacing;
+  sectionSpacing: QuotePdfSpacing;
+  colors: QuotePdfColors;
+  sectionHeader: QuotePdfTextStyle;
+  serviceTitle: QuotePdfTextStyle;
+  serviceDescription: QuotePdfTextStyle;
+  recommendation: QuotePdfTextStyle;
+  recommendationTransform: QuotePdfTextTransform;
+  priority: QuotePdfTextStyle;
+  authorization: QuotePdfTextStyle;
+  totals: QuotePdfTextStyle;
+  footer: QuotePdfTextStyle;
+  labels: QuotePdfLabels;
+}
+
+export interface ShopSettings {
+  businessType?: 'shop' | 'advisor' | 'mobile' | 'home';
+  businessName: string;
+  businessAddress: string;
+  businessPhone: string;
+  serviceAdvisor: string;
+  taxRate: number;
+  shopChargeRate: number;
+  shopChargeCap: number;       // max dollar amount for shop charge (default 69.95)
+  shopChargeExplanation: string;
+  headerMessage: string;
+  footerMessage: string;
+  quoteFooterNote: string;
+  // ── Quote & PDF Enhancements ──
+  logoUrl?: string;           // base64 data-URL or empty — shop logo on PDF
+  showLogoOnPdf: boolean;     // toggle logo visibility
+  quoteExpiryDays: number;    // "valid for X days" in footer (default 30)
+  quoteNumberPrefix: string;  // e.g. "Q-" prepended to quote IDs
+  pdfAccentColor: string;     // hex color like "#16a34a" (default green)
+  pdfStyle: 'professional' | 'compact';  // quote PDF layout style
+  // ── Business Operations ──
+  businessHours?: string;     // JSON string of weekly schedule
+  defaultLaborRate: number;   // default $/hr when adding catalog services
+  taxLabel: string;           // "Tax" | "Sales Tax" | "HST" etc.
+  paymentTerms: string;       // "Due on Receipt" | "Net 15" | "Net 30"
+  // ── Mobile / On-Site Service ──
+  serviceLocationFieldsEnabled: boolean;  // show service-location inputs in RO/quote forms
+  defaultTravelFee: number;              // preset travel/diagnostic fee per job
+  travelFeeExplanation: string;          // shown on quotes next to the travel fee
+  defaultPricingMode: 'full' | 'split'; // default service pricing mode
+  // ── Quote Display Options ──
+  showAdvisorOnQuote: boolean;    // show advisor name on PDF quotes
+  showTechnicianOnQuote: boolean; // show technician name on PDF quotes
+  defaultTechnician: string;      // default technician name used on quotes
+  quotePdfAppearance: QuotePdfAppearance;
+}
+
+// === NEW: Extended types for full shop management ===
+
+export interface Customer {
+  id: string;
+  name: string;
+  phone: string;
+  email: string;
+  address: string;
+  vehicles: Vehicle[];
+  notes: string;
+  created: string;
+  updated: string;
+}
+
+export interface Vehicle {
+  id: string;
+  make: string;
+  model: string;
+  year: string;
+  vin: string;
+  licensePlate: string;
+  mileage: string;
+  color: string;
+  engine: string;
+}
+
+export type CustomerType = 'waiter' | 'drop-off';
+
+// Sub-status granularly tracks a service line's progress between "in_progress"
+// and "completed". Stored on the ROService (inside the services JSON), so no
+// schema migration is needed.
+export type ServiceSubStatus = 'parts_ordered' | 'in_bay' | 'qc_passed' | '';
+
+// Chronological audit-trail entry for an RO. We keep these inside the
+// `financial` JSON blob under the `events` key (see src/lib/roEvents.ts) so
+// the feature ships without a PocketBase schema migration — the `financial`
+// column is already a JSON type.
+export interface ROEvent {
+  id: string;            // stable unique id (timestamp + random)
+  type:
+    | 'created'
+    | 'status'
+    | 'add_time'
+    | 'satisfaction'
+    | 'financial'
+    | 'clock_start'
+    | 'clock_stop'
+    | 'notify'
+    | 'void'
+    | 'unvoid'
+    | 'promised_override'
+    | 'edit';
+  at: string;            // ISO timestamp
+  // Free-form payload — varies per type. Common keys:
+  //   status:        { from, to }
+  //   add_time:      { minutes, newTotal }
+  //   satisfaction:  { rating }
+  //   financial:     { field }
+  //   clock_start:   { at }
+  //   clock_stop:    { elapsedMin }
+  //   notify:        { channel: 'email'|'sms', to }
+  //   void:          {}
+  //   promised_override: { value | null }
+  data?: Record<string, any>;
+  by?: string;          // advisor name (optional, best-effort)
+}
+
+export interface ClockEntry {
+  start: string;         // ISO timestamp
+  end?: string;          // ISO timestamp; undefined = still running
+  minutes?: number;      // computed when stopped
+}
+
+export interface RepairOrder {
+  id: string;
+  quoteId?: string;          // link back to the source quote when converted from one
+  customerId: string;
+  customerName: string;
+  customerPhone: string;
+  customerEmail: string;
+  vehicleInfo: string;
+  vin: string;
+  mileage: string;
+  status: 'active' | 'in_progress' | 'waiting_parts' | 'waiting_pickup' | 'completed' | 'final_close' | 'delivered';
+  services: ROService[];
+  discount?: { value: number; type: 'dollar' | 'percent' };  // optional RO-level discount
+  total: number;
+  tax: number;
+  shopCharges: number;
+  created: string;
+  updated: string;
+  createdAt?: string;
+  updatedAt?: string;
+  completedTime?: string;
+  completedDate?: string;
+  advisorName: string;
+  roNumber: string;
+  notes: string;
+  warranty: boolean;
+  satisfaction?: number;            // 1-5 customer satisfaction rating
+  customerPayTotal?: number;        // customer-pay billed amount
+  customerPayCost?: number;         // shop's cost for customer-pay work
+  warrantyTotal?: number;           // warranty reimbursement
+  warrantyCost?: number;            // shop's cost for warranty work
+  promisedTime?: string;            // legacy — kept for backward compat
+  customerType?: CustomerType;     // waiter or drop-off (default: 'drop-off')
+  estimatedDuration?: number;      // duration in minutes
+  writeupTime?: string;            // ISO timestamp of RO creation
+  serviceLocation?: string;        // job-site address for mobile/home work
+  travelFee?: number;              // travel/diagnostic fee added to RO total
+  tripMiles?: number;              // miles driven for this service call
+  financial?: any;                 // PB JSON blob — stores customerType, financial data
+  // ── New fields (stored inside the `financial` JSON blob; see lib/roEvents.ts) ──
+  // promisedTimeOverride?: string;     // ISO timestamp — pins due time regardless of duration
+  // voided?: boolean;                  // soft-void flag (hidden from default tabs)
+  // events?: ROEvent[];                // audit timeline entries
+  // clockEntries?: ClockEntry[];       // technician stopwatch entries
+}
+
+export interface ROService {
+  id: string;
+  name: string;
+  description: string;
+  laborHours: number;
+  laborRate: number;
+  partsCost: number;
+  total: number;
+  status: 'pending' | 'in_progress' | 'completed';
+  technician: string;
+  subStatus?: ServiceSubStatus;   // finer-grained progress (parts_ordered | in_bay | qc_passed)
+  pricingMode?: 'full' | 'split';
+  applyShopCharge?: boolean;
+}
+
+export interface Appointment {
+  id: string;
+  customerId?: string;
+  customerName: string;
+  customerPhone: string;
+  customerEmail: string;
+  vehicleInfo: string;
+  vin: string;
+  date: string;
+  time: string;
+  durationMinutes?: number;
+  repairOrderId?: string;
+  advisorName: string;
+  serviceType: string;
+  notes: string;
+  serviceLocation?: string;   // job-site address for mobile/home visits
+  travelFee?: number;
+  tripMiles?: number;         // miles driven for this service call
+  arrivalWindowMinutes?: number;  // width of the arrival window in minutes (e.g. 120 = ±1h shown as a range)
+  status: 'scheduled' | 'checked_in' | 'completed' | 'cancelled' | 'no_show';
+  created: string;
+  updated: string;
+}
+
+export interface Invoice {
+  id: string;
+  repairOrderId?: string;
+  customerName: string;
+  customerEmail: string;
+  customerPhone: string;
+  vehicleInfo: string;
+  items: InvoiceItem[];
+  subtotal: number;
+  tax: number;
+  total: number;
+  status: 'draft' | 'sent' | 'paid' | 'overdue';
+  created: string;
+  dueDate: string;
+  notes: string;
+}
+
+export interface InvoiceItem {
+  description: string;
+  quantity: number;
+  unitPrice: number;
+  total: number;
+}
+
+export interface FinancialMetrics {
+  totalRevenue: number;
+  totalCosts: number;
+  netProfit: number;
+  completedJobs: number;
+  avgJobValue: number;
+  customerLTV: number;
+  avgReturnTime: number;
+  customerSatisfaction: number;
+  monthlyRevenue: { month: string; revenue: number; costs: number }[];
+}
+
+export interface ServiceItem {
+  id: string;
+  name: string;
+  category: string;
+  description: string;
+  laborHours: number;
+  laborRate: number;
+  partsCost: number;
+  price: number;
+  active: boolean;
+  created: string;
+  updated: string;
+}
+
+export interface ROFinancialAuditEntry {
+  id: string;
+  roId: string;
+  field: string;
+  from: unknown;
+  to: unknown;
+  by: string;
+  at: string;
+  prevHash: string;
+  hash: string;
+}
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
new file mode 100644
index 0000000..8fcf21b
--- /dev/null
+++ b/src/vite-env.d.ts
@@ -0,0 +1,13 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_PB_URL: string;
+  readonly VITE_APP_NAME: string;
+  readonly VITE_GLITCHTIP_DSN: string;
+  readonly VITE_AI_ENABLED: string;
+  readonly VITE_ENV: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}
diff --git a/tsconfig.app.json b/tsconfig.app.json
new file mode 100644
index 0000000..7f42e5f
--- /dev/null
+++ b/tsconfig.app.json
@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "es2023",
+    "lib": ["ES2023", "DOM"],
+    "module": "esnext",
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..1ffef60
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}
diff --git a/tsconfig.node.json b/tsconfig.node.json
new file mode 100644
index 0000000..8455dcb
--- /dev/null
+++ b/tsconfig.node.json
@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "es2023",
+    "lib": ["ES2023"],
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "module": "nodenext",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/vite.config.ts b/vite.config.ts
new file mode 100644
index 0000000..091c744
--- /dev/null
+++ b/vite.config.ts
@@ -0,0 +1,25 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
+
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+  optimizeDeps: {
+    exclude: ['pocketbase'], // uses 'import' as method name — breaks esbuild pre-bundle
+  },
+  server: {
+    host: '0.0.0.0',
+    proxy: {
+      '/pb': {
+        target: 'http://127.0.0.1:8091',
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/pb/, ''),
+      },
+      '/deepseek': {
+        target: 'https://127.0.0.1:3448',
+        changeOrigin: true,
+        secure: false,          // Let's Encrypt cert hostname mismatch on 127.0.0.1
+      },
+    },
+  },
+})
diff --git a/vitest.config.ts b/vitest.config.ts
new file mode 100644
index 0000000..d7fd56e
--- /dev/null
+++ b/vitest.config.ts
@@ -0,0 +1,11 @@
+import { defineConfig } from 'vitest/config';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    environment: 'jsdom',
+    setupFiles: ['./src/test/setup.ts'],
+    globals: true,
+  },
+});