feat(GRO-2319): dev→uat — live StatusBadge palette (web) (#70 )

Merge pull request 'Promote uat → main (PROD): GRO-2160 route nav export + offline polish' (#68 ) from flea/uat-to-main-gro-2160 into main
Promote dev → uat: GRO-2160 route nav export + offline polish (#67 )
2026-06-10 08:29:49 +00:00 · 2026-06-09 05:27:25 +00:00 · 2026-06-09 04:40:32 +00:00 · 2026-06-09 04:00:43 +00:00 · 2026-06-09 03:10:17 +00:00 · 2026-06-09 02:37:35 +00:00
10 changed files with 1545 additions and 22 deletions
@@ -217,6 +217,25 @@ export const { signIn, signOut, useSession, changePassword } = authClient;
 | TC-WEB-5.12.16 | Badge status from data | Compare badge label to appointment.status field | Badge label matches the API appointment status exactly |
 | TC-WEB-5.12.17 | Unknown status fallback | Render badge with unknown status value | Badge renders with the raw status string as label and fallback CSS class |

+#### 5.12f Live StatusBadge palette — no-show / pending / waitlisted (GRO-2319)
+
+These cases exercise the full StatusBadge palette as it is now produced live by
+the seeded UAT customer (`uat-customer@groombook.dev`), not just unit-rendered.
+
+| # | Scenario | Steps | Expected |
+|---|----------|-------|----------|
+| TC-WEB-5.12.26 | No-show badge (item 1) | Sign in as `uat-customer@groombook.dev`, open `Appointments` → **Past** tab, find the seeded `no_show` appointment | A styled yellow **"No-show"** badge renders (`bg-yellow-100 text-yellow-700`) — **not** a raw gray `no_show` label. The DB `no_show` (underscore) status is normalized to the `no-show` palette key. |
+| TC-WEB-5.12.27 | Pending derivation (item 2) | On the **Upcoming** tab, find the seeded upcoming appointment whose `confirmationStatus` is `pending` (groomer-unconfirmed) | The card's top-row badge reads amber **"Pending"** (derived from `confirmationStatus`), even though the raw appointment status is `scheduled`. |
+| TC-WEB-5.12.28 | Confirmed not overridden | On the **Upcoming** tab, find the seeded confirmed appointment (`confirmationStatus = confirmed`) | Badge still reads green **"Confirmed"** — the pending derivation does not override a confirmed appointment. |
+| TC-WEB-5.12.29 | Waitlisted card (item 2) | On the **Upcoming** tab, find the seeded waitlist entry for the customer | A card renders with a blue **"Waitlisted"** badge, a **dashed muted border**, and the subtext _"You're on the waitlist — we'll let you know if a spot opens."_ The Confirm / Reschedule / Cancel / Notes actions are **not** shown for this entry (it is not a booked appointment). |
+
+> **GRO-2319 note:** the DB `appointment_status` enum cannot represent `pending`
+> or `waitlisted`, so those badges are derived in the portal: `pending` from an
+> upcoming appointment's `confirmationStatus`, and `waitlisted` from active
+> `waitlist_entries` surfaced by `GET /api/portal/appointments` as synthetic
+> cards. The `no_show` → `no-show` key normalization fixes the cosmetic badge
+> mismatch (item 1).
+
 #### 5.12d Appointment API Shape Normalization (GRO-2180)

 | # | Scenario | Steps | Expected |
@@ -471,6 +490,55 @@ These cases guard against the regression where an SSO-bridge customer (no `?sess
 | TC-WEB-5.26.3 | Impersonation flow reschedule is unchanged (no regression) | 1. With an active impersonation session (`?sessionId=<active>`), load `/`. 2. Click **Reschedule** on an appointment. 3. Pick a date. | `GET /api/book/availability` includes `X-Impersonation-Session-Id` equal to the impersonation `sessionId` (not `portalSessionId`). Returns 200. Behaves identically to the pre-fix build. |
 | TC-WEB-5.26.4 | No `X-Impersonation-Session-Id` is empty / null | From TC-WEB-5.26.1, inspect every `/api/portal/*` and `/api/book/*` request. | No request has an empty or `null` `X-Impersonation-Session-Id` header. |

+### 5.28 Route Planner Page (GRO-2158)
+
+The admin Route Planner lives at `/admin/routes`. It shows a groomer's geocoded appointment stops for a chosen date on a `react-leaflet` / OpenStreetMap map (numbered pins + a connecting polyline), a stop-list panel, a travel-time/distance summary, a route status badge, and an **Optimize** button wired to `POST /api/routes/optimize`. Leaflet is loaded via a dynamic import so it ships as a separate code-split chunk. Groomers are auto-filtered to their own route (no groomer selector); managers/receptionists pick a groomer.
+
+**Pre-conditions:**
+
+- Sign in to `/admin` as a manager (e.g. uat-manager) and, separately, as a groomer (uat-groomer).
+- At least one groomer has appointments on the test date whose clients have geocoded addresses.
+
+| # | Scenario | Steps | Expected |
+|---|----------|-------|----------|
+| TC-WEB-5.28.1 | Page loads and is reachable from nav | 1. Sign in as a manager. 2. Click **Routes** in the admin nav. | URL is `/admin/routes`. The "Route Planner" heading, a Date picker, a Groomer selector, and an **Optimize** button render. No console errors. |
+| TC-WEB-5.28.2 | Leaflet map is code-split | 1. Open DevTools → Network (JS filter). 2. Load `/admin/reports` first, confirm no `RouteMap` chunk loads. 3. Navigate to `/admin/routes`. | A separate `RouteMap-*.js` chunk (and `RouteMap-*.css`) is fetched only when the Routes page renders, not on other admin pages. |
+| TC-WEB-5.28.3 | Map shows numbered pins + polyline | Select a groomer + date that has a built route with ≥2 geocoded stops. | The OSM map renders with one numbered pin per stop (1, 2, 3…) and a polyline connecting them in order. Tile attribution to OpenStreetMap is visible. |
+| TC-WEB-5.28.4 | Stop-list panel cards | Inspect the panel beside the map. | Each stop card shows the stop number, client name, appointment time, address, and travel time from the previous stop (stop 1 shows "Start of route"). |
+| TC-WEB-5.28.5 | Summary + status badge | Inspect the summary bar and badge. | Stops count, total travel time, and total distance (km) are shown. A status badge reads one of Draft / Optimized / In progress / Completed matching the route's status. |
+| TC-WEB-5.28.6 | Optimize button | Click **Optimize**. | A `POST /api/routes/optimize` with `{ staffId, date }` fires. On success the map, stop order, summary, and status badge refresh. Any skipped (non-geocoded) clients surface as a warning. |
+| TC-WEB-5.28.7 | Groomer role auto-filter | Sign in as a groomer and open `/admin/routes`. | No groomer selector is shown. The page loads the signed-in groomer's own route for the selected date. The groomer cannot view another groomer's route. |
+| TC-WEB-5.28.8 | Empty / no-route state | Select a date with no appointments. | The map area and stop panel show a friendly empty state ("No stops…"). No crash; **Optimize** is still clickable. |
+
+### 5.29 Route Planner — Drag-to-Reorder & Re-optimize (GRO-2159)
+
+The stop-list panel is drag-sortable (`@dnd-kit`). Each stop card has a grab handle (⠿). Dropping a stop in a new position calls `PATCH /api/routes/:routeId/reorder` with `{ stopOrder: [routeStopId…] }` (full first-to-last order); the UI updates optimistically and rolls back on error. The server recomputes per-leg travel, buffers, totals and tight-schedule conflict flags, and the panel/map/summary adopt the response. A "tight schedule" warning is shown on any stop whose gap is shorter than its travel + buffer. After a manual reorder a hint with a **Re-optimize** button appears (re-runs `POST /api/routes/optimize`). Drag works via mouse (desktop), press-and-hold touch (mobile groomers), and keyboard (focus handle → Space → arrows → Space).
+
+| Test Case | Description | Steps | Expected Result |
+|-----------|-------------|-------|-----------------|
+| TC-WEB-5.29.1 | Drag handle present | Open `/admin/routes` for a route with ≥2 stops. | Each stop card shows a grab handle (⠿) with an accessible label "Drag to reorder <client>". |
+| TC-WEB-5.29.2 | Reorder persists | Drag a stop to a new position and drop it. | A `PATCH /api/routes/:routeId/reorder` fires with the new `stopOrder` (every stop id once, new order). Stop numbers, the map polyline order, and travel-from-previous labels refresh to match. |
+| TC-WEB-5.29.3 | Optimistic update + rollback | Simulate a failing reorder (e.g. server returns an error / offline). | The list shows the new order immediately, then reverts to the prior order when the PATCH fails, and an error message is shown. No stuck/partial order. |
+| TC-WEB-5.29.4 | Tight-schedule warning re-evaluated | Reorder so two stops are too close together. | The affected stop card shows "⚠ Tight schedule — travel + buffer may exceed the gap" (red border) after the server recomputes; warnings clear on a roomier order. |
+| TC-WEB-5.29.5 | Re-optimize button | After a manual drag reorder, locate the hint banner. | A "Stops reordered manually…" hint with a **Re-optimize** button appears. Clicking it fires `POST /api/routes/optimize` and the hint clears once the optimized route loads. The hint is absent before any manual reorder. |
+| TC-WEB-5.29.6 | Touch / mobile drag | On a touch device (or mobile emulation), press-and-hold a stop's handle (~200ms) then drag. | The stop lifts and can be dropped in a new position; page scroll is not hijacked by a quick swipe. Reorder persists as in 5.29.2. |
+| TC-WEB-5.29.7 | Groomer reorders own route | Sign in as a groomer, reorder stops on the own route. | Reorder succeeds (groomer is authorized for their own route). |
+
+### 5.30 Route Planner — Navigation Export & Offline (GRO-2160)
+
+When a route has stops, an export panel offers **Open in Google Maps** and **Open in Apple Maps** buttons. Each fetches `GET /api/routes/:routeId/export/google-maps` (or `/apple-maps`) and opens the returned deep-link URL in the device's maps app (Google Maps `https://www.google.com/maps/dir/?...`, Apple Maps `maps://...`). The page detects the device OS (iOS / Android / desktop) and renders the most relevant button prominently (filled) with the other as a secondary outline button; on iOS Apple Maps leads, otherwise Google Maps leads. Offline support: the existing Workbox `NetworkFirst` rule caches `/api/routes/*` responses (24h TTL) so a previously-loaded route still renders without network; a `CacheFirst` rule (`osm-tiles`, 7-day TTL, 400 entries) caches OpenStreetMap tiles. On every route load and after each optimize/reorder, the page pre-warms the OSM tiles covering the route's bounding box (zooms 12–14, capped at 80 tiles) so the map is viewable offline. The layout is responsive: below 768px the map/stop-list stack to one column, the map shrinks, and the export buttons go full-width.
+
+| Test Case | Description | Steps | Expected Result |
+|-----------|-------------|-------|-----------------|
+| TC-WEB-5.30.1 | Export buttons render | Open `/admin/routes` for a route with ≥1 stop. | An export panel shows both **Open in Google Maps** and **Open in Apple Maps** buttons. Buttons are absent when there are no stops. |
+| TC-WEB-5.30.2 | Google Maps deep link | Click **Open in Google Maps**. | A `GET /api/routes/:routeId/export/google-maps` fires and the returned `https://www.google.com/maps/dir/?...` URL opens (new tab / Google Maps app) with origin, destination, and waypoints in route order. |
+| TC-WEB-5.30.3 | Apple Maps deep link | On iOS (or emulation), click **Open in Apple Maps**. | A `GET /api/routes/:routeId/export/apple-maps` fires and the returned `maps://...` URL opens Apple Maps with the route chained `+to:`. |
+| TC-WEB-5.30.4 | Platform-aware prominence | Open the page on an iPhone (or iOS UA emulation) vs Android/desktop. | On iOS the **Apple Maps** button is the prominent (filled) one and Google Maps is the secondary (outline); on Android/desktop **Google Maps** is prominent and Apple Maps secondary. Both buttons are always available. |
+| TC-WEB-5.30.5 | Export error handling | Trigger an export that errors (e.g. route exceeds the platform waypoint cap). | The pre-opened tab is closed and an inline error message is shown; no silent failure. |
+| TC-WEB-5.30.6 | Offline route data | Load a route online, then in DevTools → Network set **Offline** and reload `/admin/routes` for the same groomer/date. | The route data still loads from the `api-cache` (NetworkFirst fallback); stops, summary, and badge render without network. |
+| TC-WEB-5.30.7 | Offline map tiles | After viewing/optimizing a route online, go **Offline** and view the same route. | The OSM map tiles for the route area render from the `osm-tiles` CacheFirst cache (pre-warmed); the map is not blank in the route's vicinity. |
+| TC-WEB-5.30.8 | Responsive mobile layout | Open the page at a phone width (≤768px, e.g. 390px). | Map and stop-list stack into a single column, the map height shrinks, and the export buttons span full width. No horizontal scroll; controls remain usable with a thumb. |
+
 ## 6. Pass/Fail Criteria

 **Pass:**
@@ -13,14 +13,19 @@
    "test:e2e": "playwright test -c e2e/playwright.config.ts"
  },
  "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
    "@groombook/types": "workspace:*",
    "@stripe/react-stripe-js": "^6.1.0",
    "@stripe/stripe-js": "^9.1.0",
    "@tailwindcss/vite": "^4.2.2",
    "better-auth": "^1.5.6",
+    "leaflet": "^1.9.4",
    "lucide-react": "^0.577.0",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
+    "react-leaflet": "^5.0.0",
    "react-router-dom": "^7.1.2",
    "recharts": "^3.8.0",
    "tailwindcss": "^4.2.2"
@@ -30,6 +35,7 @@
    "@testing-library/jest-dom": "^6.9.1",
    "@testing-library/react": "^16.3.2",
    "@testing-library/user-event": "^14.6.1",
+    "@types/leaflet": "^1.9.12",
    "@types/node": "^25.6.0",
    "@types/react": "^19.0.6",
    "@types/react-dom": "^19.0.3",
@@ -8,6 +8,15 @@ importers:

  .:
    dependencies:
+      '@dnd-kit/core':
+        specifier: ^6.3.1
+        version: 6.3.1(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@dnd-kit/sortable':
+        specifier: ^10.0.0
+        version: 10.0.0(@dnd-kit/core@6.3.1(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(react@19.2.6)
+      '@dnd-kit/utilities':
+        specifier: ^3.2.2
+        version: 3.2.2(react@19.2.6)
      '@groombook/types':
        specifier: workspace:*
        version: link:packages/types
@@ -23,6 +32,9 @@ importers:
      better-auth:
        specifier: ^1.5.6
        version: 1.6.10(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(vitest@3.2.4(@types/node@25.6.2)(jiti@2.7.0)(jsdom@26.1.0)(lightningcss@1.32.0)(terser@5.47.1))
+      leaflet:
+        specifier: ^1.9.4
+        version: 1.9.4
      lucide-react:
        specifier: ^0.577.0
        version: 0.577.0(react@19.2.6)
@@ -32,12 +44,15 @@ importers:
      react-dom:
        specifier: ^19.0.0
        version: 19.2.6(react@19.2.6)
+      react-leaflet:
+        specifier: ^5.0.0
+        version: 5.0.0(leaflet@1.9.4)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
      react-router-dom:
        specifier: ^7.1.2
        version: 7.15.0(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
      recharts:
        specifier: ^3.8.0
-        version: 3.8.1(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react-is@16.13.1)(react@19.2.6)(redux@5.0.1)
+        version: 3.8.1(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react-is@17.0.2)(react@19.2.6)(redux@5.0.1)
      tailwindcss:
        specifier: ^4.2.2
        version: 4.3.0
@@ -54,6 +69,9 @@ importers:
      '@testing-library/user-event':
        specifier: ^14.6.1
        version: 14.6.1(@testing-library/dom@10.4.1)
+      '@types/leaflet':
+        specifier: ^1.9.12
+        version: 1.9.21
      '@types/node':
        specifier: ^25.6.0
        version: 25.6.2
@@ -739,6 +757,28 @@ packages:
    resolution: {integrity: sha512-Vd/9EVDiu6PPJt9yAh6roZP6El1xHrdvIVGjyBsHR0RYwNHgL7FJPyIIW4fANJNG6FtyZfvlRPpFI4ZM/lubvw==}
    engines: {node: '>=18'}

+  '@dnd-kit/accessibility@3.1.1':
+    resolution: {integrity: sha512-2P+YgaXF+gRsIihwwY1gCsQSYnu9Zyj2py8kY5fFvUM1qm2WA2u639R6YNVfU4GWr+ZM5mqEsfHZZLoRONbemw==}
+    peerDependencies:
+      react: '>=16.8.0'
+
+  '@dnd-kit/core@6.3.1':
+    resolution: {integrity: sha512-xkGBRQQab4RLwgXxoqETICr6S5JlogafbhNsidmrkVv2YRs5MLwpjoF2qpiGjQt8S9AoxtIV603s0GIUpY5eYQ==}
+    peerDependencies:
+      react: '>=16.8.0'
+      react-dom: '>=16.8.0'
+
+  '@dnd-kit/sortable@10.0.0':
+    resolution: {integrity: sha512-+xqhmIIzvAYMGfBYYnbKuNicfSsk4RksY2XdmJhT+HAC01nix6fHCztU68jooFiMUB01Ky3F0FyOvhG/BZrWkg==}
+    peerDependencies:
+      '@dnd-kit/core': ^6.3.0
+      react: '>=16.8.0'
+
+  '@dnd-kit/utilities@3.2.2':
+    resolution: {integrity: sha512-+MKAJEOfaBe5SmV6t34p80MMKhjvUz0vRrvVJbPT0WElzaOJ/1xs+D+KDv+tD/NE5ujfrChEcshd4fLn0wpiqg==}
+    peerDependencies:
+      react: '>=16.8.0'
+
  '@esbuild/aix-ppc64@0.25.12':
    resolution: {integrity: sha512-Hhmwd6CInZ3dwpuGTF8fJG6yoWmsToE+vYgD4nytZVxcu1ulHpUQRAB1UJ8+N1Am3Mz4+xOByoQoSZf4D+CpkA==}
    engines: {node: '>=18'}
@@ -1005,6 +1045,13 @@ packages:
    engines: {node: '>=18'}
    hasBin: true

+  '@react-leaflet/core@3.0.0':
+    resolution: {integrity: sha512-3EWmekh4Nz+pGcr+xjf0KNyYfC3U2JjnkWsh0zcqaexYqmmB5ZhH37kz41JXGmKzpaMZCnPofBBm64i+YrEvGQ==}
+    peerDependencies:
+      leaflet: ^1.9.0
+      react: ^19.0.0
+      react-dom: ^19.0.0
+
  '@reduxjs/toolkit@2.11.2':
    resolution: {integrity: sha512-Kd6kAHTA6/nUpp8mySPqj3en3dm0tdMIgbttnQ1xFMVpufoj+ADi8pXLBsd4xzTRHQa7t/Jv8W5UnCuW4kuWMQ==}
    peerDependencies:
@@ -1102,66 +1149,79 @@ packages:
    resolution: {integrity: sha512-DV6fJoxEYWJOvaZIsok7KrYl0tPvga5OZ2yvKHNNYyk/2roMLqQAbGhr78EQ5YhHpnhLKJD3S1WFusAkmUuV5g==}
    cpu: [arm]
    os: [linux]
+    libc: [glibc]

  '@rollup/rollup-linux-arm-musleabihf@4.60.3':
    resolution: {integrity: sha512-mQKoJAzvuOs6F+TZybQO4GOTSMUu7v0WdxEk24krQ/uUxXoPTtHjuaUuPmFhtBcM4K0ons8nrE3JyhTuCFtT/w==}
    cpu: [arm]
    os: [linux]
+    libc: [musl]

  '@rollup/rollup-linux-arm64-gnu@4.60.3':
    resolution: {integrity: sha512-Whjj2qoiJ6+OOJMGptTYazaJvjOJm+iKHpXQM1P3LzGjt7Ff++Tp7nH4N8J/BUA7R9IHfDyx4DJIflifwnbmIA==}
    cpu: [arm64]
    os: [linux]
+    libc: [glibc]

  '@rollup/rollup-linux-arm64-musl@4.60.3':
    resolution: {integrity: sha512-4YTNHKqGng5+yiZt3mg77nmyuCfmNfX4fPmyUapBcIk+BdwSwmCWGXOUxhXbBEkFHtoN5boLj/5NON+u5QC9tg==}
    cpu: [arm64]
    os: [linux]
+    libc: [musl]

  '@rollup/rollup-linux-loong64-gnu@4.60.3':
    resolution: {integrity: sha512-SU3kNlhkpI4UqlUc2VXPGK9o886ZsSeGfMAX2ba2b8DKmMXq4AL7KUrkSWVbb7koVqx41Yczx6dx5PNargIrEA==}
    cpu: [loong64]
    os: [linux]
+    libc: [glibc]

  '@rollup/rollup-linux-loong64-musl@4.60.3':
    resolution: {integrity: sha512-6lDLl5h4TXpB1mTf2rQWnAk/LcXrx9vBfu/DT5TIPhvMhRWaZ5MxkIc8u4lJAmBo6klTe1ywXIUHFjylW505sg==}
    cpu: [loong64]
    os: [linux]
+    libc: [musl]

  '@rollup/rollup-linux-ppc64-gnu@4.60.3':
    resolution: {integrity: sha512-BMo8bOw8evlup/8G+cj5xWtPyp93xPdyoSN16Zy90Q2QZ0ZYRhCt6ZJSwbrRzG9HApFabjwj2p25TUPDWrhzqQ==}
    cpu: [ppc64]
    os: [linux]
+    libc: [glibc]

  '@rollup/rollup-linux-ppc64-musl@4.60.3':
    resolution: {integrity: sha512-E0L8X1dZN1/Rph+5VPF6Xj2G7JJvMACVXtamTJIDrVI44Y3K+G8gQaMEAavbqCGTa16InptiVrX6eM6pmJ+7qA==}
    cpu: [ppc64]
    os: [linux]
+    libc: [musl]

  '@rollup/rollup-linux-riscv64-gnu@4.60.3':
    resolution: {integrity: sha512-oZJ/WHaVfHUiRAtmTAeo3DcevNsVvH8mbvodjZy7D5QKvCefO371SiKRpxoDcCxB3PTRTLayWBkvmDQKTcX/sw==}
    cpu: [riscv64]
    os: [linux]
+    libc: [glibc]

  '@rollup/rollup-linux-riscv64-musl@4.60.3':
    resolution: {integrity: sha512-Dhbyh7j9FybM3YaTgaHmVALwA8AkUwTPccyCQ79TG9AJUsMQqgN1DDEZNr4+QUfwiWvLDumW5vdwzoeUF+TNxQ==}
    cpu: [riscv64]
    os: [linux]
+    libc: [musl]

  '@rollup/rollup-linux-s390x-gnu@4.60.3':
    resolution: {integrity: sha512-cJd1X5XhHHlltkaypz1UcWLA8AcoIi1aWhsvaWDskD1oz2eKCypnqvTQ8ykMNI0RSmm7NkTdSqSSD7zM0xa6Ig==}
    cpu: [s390x]
    os: [linux]
+    libc: [glibc]

  '@rollup/rollup-linux-x64-gnu@4.60.3':
    resolution: {integrity: sha512-DAZDBHQfG2oQuhY7mc6I3/qB4LU2fQCjRvxbDwd/Jdvb9fypP4IJ4qmtu6lNjes6B531AI8cg1aKC2di97bUxA==}
    cpu: [x64]
    os: [linux]
+    libc: [glibc]

  '@rollup/rollup-linux-x64-musl@4.60.3':
    resolution: {integrity: sha512-cRxsE8c13mZOh3vP+wLDxpQBRrOHDIGOWyDL93Sy0Ga8y515fBcC2pjUfFwUe5T7tqvTvWbCpg1URM/AXdWIXA==}
    cpu: [x64]
    os: [linux]
+    libc: [musl]

  '@rollup/rollup-openbsd-x64@4.60.3':
    resolution: {integrity: sha512-QaWcIgRxqEdQdhJqW4DJctsH6HCmo5vHxY0krHSX4jMtOqfzC+dqDGuHM87bu4H8JBeibWx7jFz+h6/4C8wA5Q==}
@@ -1248,24 +1308,28 @@ packages:
    engines: {node: '>= 20'}
    cpu: [arm64]
    os: [linux]
+    libc: [glibc]

  '@tailwindcss/oxide-linux-arm64-musl@4.3.0':
    resolution: {integrity: sha512-Z6sukiQsngnWO+l39X4pPbiWT81IC+PLKF+PHxIlyZbGNb9MODfYlXEVlFvej5BOZInWX01kVyzeLvHsXhfczQ==}
    engines: {node: '>= 20'}
    cpu: [arm64]
    os: [linux]
+    libc: [musl]

  '@tailwindcss/oxide-linux-x64-gnu@4.3.0':
    resolution: {integrity: sha512-DRNdQRpSGzRGfARVuVkxvM8Q12nh19l4BF/G7zGA1oe+9wcC6saFBHTISrpIcKzhiXtSrlSrluCfvMuledoCTQ==}
    engines: {node: '>= 20'}
    cpu: [x64]
    os: [linux]
+    libc: [glibc]

  '@tailwindcss/oxide-linux-x64-musl@4.3.0':
    resolution: {integrity: sha512-Z0IADbDo8bh6I7h2IQMx601AdXBLfFpEdUotft86evd/8ZPflZe9COPO8Q1vw+pfLWIUo9zN/JGZvwuAJqduqg==}
    engines: {node: '>= 20'}
    cpu: [x64]
    os: [linux]
+    libc: [musl]

  '@tailwindcss/oxide-wasm32-wasi@4.3.0':
    resolution: {integrity: sha512-HNZGOUxEmElksYR7S6sC5jTeNGpobAsy9u7Gu0AskJ8/20FR9GqebUyB+HBcU/ax6BHuiuJi+Oda4B+YX6H1yA==}
@@ -1387,9 +1451,15 @@ packages:
  '@types/estree@1.0.9':
    resolution: {integrity: sha512-GhdPgy1el4/ImP05X05Uw4cw2/M93BCUmnEvWZNStlCzEKME4Fkk+YpoA5OiHNQmoS7Cafb8Xa3Pya8m1Qrzeg==}

+  '@types/geojson@7946.0.16':
+    resolution: {integrity: sha512-6C8nqWur3j98U6+lXDfTUWIfgvZU+EumvpHKcYjujKH7woYyLj2sUmff0tRhrqM7BohUw7Pz3ZB1jj2gW9Fvmg==}
+
  '@types/json-schema@7.0.15':
    resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}

+  '@types/leaflet@1.9.21':
+    resolution: {integrity: sha512-TbAd9DaPGSnzp6QvtYngntMZgcRk+igFELwR2N99XZn7RXUdKgsXMR+28bUO0rPsWp8MIu/f47luLIQuSLYv/w==}
+
  '@types/node@25.6.2':
    resolution: {integrity: sha512-sokuT28dxf9JT5Kady1fsXOvI4HVpjZa95NKT5y9PNTIrs2AsobR4GFAA90ZG8M+nxVRLysCXsVj6eGC7Vbrlw==}

@@ -2462,6 +2532,9 @@ packages:
    resolution: {integrity: sha512-nbD8lB9EB3wNdMhOCdx5Li8DxnLbvKByylRLcJ1h+4SkrowVeECAyZlyiKMThF7xFdRz0jSQ2MoJr+wXux2y0Q==}
    engines: {node: '>=20.0.0'}

+  leaflet@1.9.4:
+    resolution: {integrity: sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==}
+
  leven@3.1.0:
    resolution: {integrity: sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==}
    engines: {node: '>=6'}
@@ -2505,24 +2578,28 @@ packages:
    engines: {node: '>= 12.0.0'}
    cpu: [arm64]
    os: [linux]
+    libc: [glibc]

  lightningcss-linux-arm64-musl@1.32.0:
    resolution: {integrity: sha512-UpQkoenr4UJEzgVIYpI80lDFvRmPVg6oqboNHfoH4CQIfNA+HOrZ7Mo7KZP02dC6LjghPQJeBsvXhJod/wnIBg==}
    engines: {node: '>= 12.0.0'}
    cpu: [arm64]
    os: [linux]
+    libc: [musl]

  lightningcss-linux-x64-gnu@1.32.0:
    resolution: {integrity: sha512-V7Qr52IhZmdKPVr+Vtw8o+WLsQJYCTd8loIfpDaMRWGUZfBOYEJeyJIkqGIDMZPwPx24pUMfwSxxI8phr/MbOA==}
    engines: {node: '>= 12.0.0'}
    cpu: [x64]
    os: [linux]
+    libc: [glibc]

  lightningcss-linux-x64-musl@1.32.0:
    resolution: {integrity: sha512-bYcLp+Vb0awsiXg/80uCRezCYHNg1/l3mt0gzHnWV9XP1W5sKa5/TCdGWaR/zBM2PeF/HbsQv/j2URNOiVuxWg==}
    engines: {node: '>= 12.0.0'}
    cpu: [x64]
    os: [linux]
+    libc: [musl]

  lightningcss-win32-arm64-msvc@1.32.0:
    resolution: {integrity: sha512-8SbC8BR40pS6baCM8sbtYDSwEVQd4JlFTOlaD3gWGHfThTcABnNDBda6eTZeqbofalIJhFx0qKzgHJmcPTnGdw==}
@@ -2764,6 +2841,13 @@ packages:
  react-is@17.0.2:
    resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==}

+  react-leaflet@5.0.0:
+    resolution: {integrity: sha512-CWbTpr5vcHw5bt9i4zSlPEVQdTVcML390TjeDG0cK59z1ylexpqC6M1PJFjV8jD7CF+ACBFsLIDs6DRMoLEofw==}
+    peerDependencies:
+      leaflet: ^1.9.0
+      react: ^19.0.0
+      react-dom: ^19.0.0
+
  react-redux@9.2.0:
    resolution: {integrity: sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==}
    peerDependencies:
@@ -3123,6 +3207,9 @@ packages:
    peerDependencies:
      typescript: '>=4.8.4'

+  tslib@2.8.1:
+    resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
+
  type-check@0.4.0:
    resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
    engines: {node: '>= 0.8.0'}
@@ -4208,6 +4295,31 @@ snapshots:

  '@csstools/css-tokenizer@3.0.4': {}

+  '@dnd-kit/accessibility@3.1.1(react@19.2.6)':
+    dependencies:
+      react: 19.2.6
+      tslib: 2.8.1
+
+  '@dnd-kit/core@6.3.1(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
+    dependencies:
+      '@dnd-kit/accessibility': 3.1.1(react@19.2.6)
+      '@dnd-kit/utilities': 3.2.2(react@19.2.6)
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
+      tslib: 2.8.1
+
+  '@dnd-kit/sortable@10.0.0(@dnd-kit/core@6.3.1(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(react@19.2.6)':
+    dependencies:
+      '@dnd-kit/core': 6.3.1(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@dnd-kit/utilities': 3.2.2(react@19.2.6)
+      react: 19.2.6
+      tslib: 2.8.1
+
+  '@dnd-kit/utilities@3.2.2(react@19.2.6)':
+    dependencies:
+      react: 19.2.6
+      tslib: 2.8.1
+
  '@esbuild/aix-ppc64@0.25.12':
    optional: true

@@ -4398,6 +4510,12 @@ snapshots:
    dependencies:
      playwright: 1.59.1

+  '@react-leaflet/core@3.0.0(leaflet@1.9.4)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
+    dependencies:
+      leaflet: 1.9.4
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
+
  '@reduxjs/toolkit@2.11.2(react-redux@9.2.0(@types/react@19.2.14)(react@19.2.6)(redux@5.0.1))(react@19.2.6)':
    dependencies:
      '@standard-schema/spec': 1.1.0
@@ -4711,8 +4829,14 @@ snapshots:

  '@types/estree@1.0.9': {}

+  '@types/geojson@7946.0.16': {}
+
  '@types/json-schema@7.0.15': {}

+  '@types/leaflet@1.9.21':
+    dependencies:
+      '@types/geojson': 7946.0.16
+
  '@types/node@25.6.2':
    dependencies:
      undici-types: 7.19.2
@@ -5884,6 +6008,8 @@ snapshots:

  kysely@0.28.17: {}

+  leaflet@1.9.4: {}
+
  leven@3.1.0: {}

  levn@0.4.1:
@@ -6135,6 +6261,13 @@ snapshots:

  react-is@17.0.2: {}

+  react-leaflet@5.0.0(leaflet@1.9.4)(react-dom@19.2.6(react@19.2.6))(react@19.2.6):
+    dependencies:
+      '@react-leaflet/core': 3.0.0(leaflet@1.9.4)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      leaflet: 1.9.4
+      react: 19.2.6
+      react-dom: 19.2.6(react@19.2.6)
+
  react-redux@9.2.0(@types/react@19.2.14)(react@19.2.6)(redux@5.0.1):
    dependencies:
      '@types/use-sync-external-store': 0.0.6
@@ -6162,7 +6295,7 @@ snapshots:

  react@19.2.6: {}

-  recharts@3.8.1(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react-is@16.13.1)(react@19.2.6)(redux@5.0.1):
+  recharts@3.8.1(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react-is@17.0.2)(react@19.2.6)(redux@5.0.1):
    dependencies:
      '@reduxjs/toolkit': 2.11.2(react-redux@9.2.0(@types/react@19.2.14)(react@19.2.6)(redux@5.0.1))(react@19.2.6)
      clsx: 2.1.1
@@ -6172,7 +6305,7 @@ snapshots:
      immer: 10.2.0
      react: 19.2.6
      react-dom: 19.2.6(react@19.2.6)
-      react-is: 16.13.1
+      react-is: 17.0.2
      react-redux: 9.2.0(@types/react@19.2.14)(react@19.2.6)(redux@5.0.1)
      reselect: 5.1.1
      tiny-invariant: 1.3.3
@@ -6553,6 +6686,8 @@ snapshots:
    dependencies:
      typescript: 5.9.3

+  tslib@2.8.1: {}
+
  type-check@0.4.0:
    dependencies:
      prelude-ls: 1.2.1
@@ -8,6 +8,7 @@ import { StaffPage } from "./pages/Staff.js";
 import { InvoicesPage } from "./pages/Invoices.js";
 import { BookPage } from "./pages/Book.js";
 import { ReportsPage } from "./pages/Reports.js";
+import { RoutesPage } from "./pages/Routes.js";
 import { GroupBookingPage } from "./pages/GroupBooking.js";
 import { SettingsPage } from "./pages/Settings.js";
 import { BookingConfirmedPage } from "./pages/BookingConfirmed.js";
@@ -175,6 +176,7 @@ const NAV_LINKS = [
  { to: "/admin/staff", label: "Staff" },
  { to: "/admin/invoices", label: "Invoices" },
  { to: "/admin/group-bookings", label: "Group Bookings" },
+  { to: "/admin/routes", label: "Routes" },
  { to: "/admin/reports", label: "Reports" },
  { to: "/admin/settings", label: "Settings" },
  { to: "/", label: "Customer Portal" },
@@ -303,6 +305,7 @@ function AdminLayout() {
          <Route path="/invoices" element={<InvoicesPage />} />
          <Route path="/book" element={<BookPage />} />
          <Route path="/group-bookings" element={<GroupBookingPage />} />
+          <Route path="/routes" element={<RoutesPage />} />
          <Route path="/reports" element={<ReportsPage />} />
          <Route path="/settings" element={<SettingsPage />} />
        </Routes>
@@ -1,6 +1,6 @@
 import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
 import { render, screen, fireEvent, waitFor } from "@testing-library/react";
-import { parseTimeTo24Hour, isUpcoming, normalizeAppointment, CustomerNotesSection, ConfirmationSection, StatusBadge, formatSlotLabel, slotToTime, BookingFlow } from "../portal/sections/Appointments.tsx";
+import { parseTimeTo24Hour, isUpcoming, normalizeAppointment, normalizeService, formatServicePrice, CustomerNotesSection, ConfirmationSection, StatusBadge, normalizeStatusKey, deriveDisplayStatus, formatSlotLabel, slotToTime, BookingFlow } from "../portal/sections/Appointments.tsx";

 const UPCOMING_APPT = {
  id: "appt-1",
@@ -517,6 +517,52 @@ describe("StatusBadge", () => {
    expect(badge?.className).toContain("bg-stone-100");
    expect(badge?.className).toContain("text-stone-600");
  });
+
+  // GRO-2319 item 1: DB stores `no_show` (underscore) but the palette key is
+  // `no-show` (hyphen) — without normalization it rendered raw gray text.
+  it("renders the styled No-show badge for DB `no_show` status", () => {
+    render(<StatusBadge status="no_show" />);
+    const badge = screen.getByText("No-show").closest('span');
+    expect(badge?.className).toContain("bg-yellow-100");
+    expect(badge?.className).toContain("text-yellow-700");
+  });
+});
+
+describe("normalizeStatusKey (GRO-2319 item 1)", () => {
+  it("maps underscore status keys to the hyphen palette key", () => {
+    expect(normalizeStatusKey("no_show")).toBe("no-show");
+  });
+
+  it("leaves already-hyphenated / single-word keys unchanged", () => {
+    expect(normalizeStatusKey("no-show")).toBe("no-show");
+    expect(normalizeStatusKey("confirmed")).toBe("confirmed");
+  });
+});
+
+describe("deriveDisplayStatus (GRO-2319 item 2)", () => {
+  it("derives Pending for an upcoming, unconfirmed appointment", () => {
+    expect(
+      deriveDisplayStatus({ ...UPCOMING_APPT, status: "scheduled", confirmationStatus: "pending" }),
+    ).toBe("pending");
+  });
+
+  it("keeps the raw status when the appointment is confirmed", () => {
+    expect(
+      deriveDisplayStatus({ ...UPCOMING_APPT, status: "confirmed", confirmationStatus: "confirmed" }),
+    ).toBe("confirmed");
+  });
+
+  it("does not derive Pending for a past appointment", () => {
+    expect(
+      deriveDisplayStatus({ ...PAST_APPT, status: "completed", confirmationStatus: "pending" }),
+    ).toBe("completed");
+  });
+
+  it("always shows Waitlisted for a waitlist-backed entry", () => {
+    expect(
+      deriveDisplayStatus({ ...UPCOMING_APPT, status: "waitlisted", confirmationStatus: undefined }),
+    ).toBe("waitlisted");
+  });
 });

 describe("RescheduleFlow dynamic time slots", () => {
@@ -873,3 +919,65 @@ describe("BookingFlow Book New funnel (GRO-2213)", () => {
    expect(screen.queryByText(/Failed to book appointment/i)).not.toBeInTheDocument();
  });
 });
+
+describe("normalizeService", () => {
+  it("maps API basePriceCents/durationMinutes to price (dollars)/duration", () => {
+    const svc = normalizeService({
+      id: "svc-1",
+      name: "Full Groom",
+      basePriceCents: 4500,
+      durationMinutes: 60,
+    });
+    expect(svc.price).toBe(45);
+    expect(svc.duration).toBe(60);
+  });
+
+  it("preserves an already-normalized payload (price/duration)", () => {
+    const svc = normalizeService({
+      id: "svc-2",
+      name: "Bath",
+      price: 30,
+      duration: 30,
+    });
+    expect(svc.price).toBe(30);
+    expect(svc.duration).toBe(30);
+  });
+
+  it("leaves price/duration undefined when both source shapes are absent", () => {
+    const svc = normalizeService({ id: "svc-3", name: "Mystery" });
+    expect(svc.price).toBeUndefined();
+    expect(svc.duration).toBeUndefined();
+  });
+
+  it("coerces null fields to undefined", () => {
+    const svc = normalizeService({
+      id: "svc-4",
+      name: "Nail Trim",
+      basePriceCents: null,
+      durationMinutes: null,
+      description: null,
+    });
+    expect(svc.price).toBeUndefined();
+    expect(svc.duration).toBeUndefined();
+    expect(svc.description).toBeUndefined();
+  });
+});
+
+describe("formatServicePrice", () => {
+  it("prefers an explicit priceRange string", () => {
+    expect(formatServicePrice({ priceRange: "$40–$60", price: 45 })).toBe("$40–$60");
+  });
+
+  it("formats integer dollars without trailing zeros", () => {
+    expect(formatServicePrice({ price: 45 })).toBe("$45");
+  });
+
+  it("formats fractional dollars to cents", () => {
+    expect(formatServicePrice({ price: 45.5 })).toBe("$45.50");
+  });
+
+  it("returns null when no price is available (never '$undefined')", () => {
+    expect(formatServicePrice({})).toBeNull();
+    expect(formatServicePrice({ price: undefined })).toBeNull();
+  });
+});
@@ -0,0 +1,211 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen, waitFor, fireEvent } from "@testing-library/react";
+import { RoutesPage } from "../pages/Routes.tsx";
+
+// Leaflet does not render in jsdom — replace the lazily-loaded map with a stub
+// that just reports the stop count so we can assert it received the route data.
+vi.mock("../components/RouteMap.js", () => ({
+  default: ({ stops }: { stops: unknown[] }) => (
+    <div data-testid="route-map">map:{stops.length}</div>
+  ),
+}));
+
+const MANAGER = { id: "m1", name: "Manager", role: "manager", active: true };
+const GROOMER = { id: "g1", name: "Sam Groomer", role: "groomer", active: true };
+
+const ROUTE_RESPONSE = {
+  route: {
+    id: "r1",
+    staffId: "g1",
+    routeDate: "2026-06-09",
+    status: "optimized",
+    totalTravelMins: 95,
+    totalDistanceKm: "42.50",
+  },
+  stops: [
+    {
+      id: "s1",
+      appointmentId: "a1",
+      stopOrder: 1,
+      latitude: 51.5,
+      longitude: -0.1,
+      travelMinsFromPrev: null,
+      travelDistanceKmFromPrev: null,
+      bufferMins: 15,
+      appointmentStartTime: "2026-06-09T09:00:00.000Z",
+      appointmentEndTime: "2026-06-09T10:00:00.000Z",
+      appointmentStatus: "confirmed",
+      clientId: "c1",
+      clientName: "Alice",
+      clientAddress: "1 High St",
+      conflict: { hasConflict: false },
+    },
+    {
+      id: "s2",
+      appointmentId: "a2",
+      stopOrder: 2,
+      latitude: 51.52,
+      longitude: -0.12,
+      travelMinsFromPrev: 20,
+      travelDistanceKmFromPrev: "8.00",
+      bufferMins: 15,
+      appointmentStartTime: "2026-06-09T11:00:00.000Z",
+      appointmentEndTime: "2026-06-09T12:00:00.000Z",
+      appointmentStatus: "confirmed",
+      clientId: "c2",
+      clientName: "Bob",
+      clientAddress: "2 Low St",
+      conflict: { hasConflict: true },
+    },
+  ],
+  hasConflicts: true,
+  conflictCount: 1,
+};
+
+function mockFetch(meRole: "manager" | "groomer") {
+  return vi.fn((url: string, opts?: RequestInit) => {
+    if (url === "/api/staff/me") {
+      return Promise.resolve({
+        ok: true,
+        json: () => Promise.resolve(meRole === "manager" ? MANAGER : GROOMER),
+      } as Response);
+    }
+    if (url === "/api/staff") {
+      return Promise.resolve({ ok: true, json: () => Promise.resolve([MANAGER, GROOMER]) } as Response);
+    }
+    if (url.startsWith("/api/routes/daily")) {
+      return Promise.resolve({ ok: true, json: () => Promise.resolve(ROUTE_RESPONSE) } as Response);
+    }
+    if (url === "/api/routes/optimize" && opts?.method === "POST") {
+      return Promise.resolve({ ok: true, json: () => Promise.resolve(ROUTE_RESPONSE) } as Response);
+    }
+    if (/^\/api\/routes\/[^/]+\/reorder$/.test(url) && opts?.method === "PATCH") {
+      return Promise.resolve({ ok: true, json: () => Promise.resolve(ROUTE_RESPONSE) } as Response);
+    }
+    if (/^\/api\/routes\/[^/]+\/export\/google-maps$/.test(url)) {
+      return Promise.resolve({
+        ok: true,
+        json: () => Promise.resolve({ platform: "google-maps", url: "https://www.google.com/maps/dir/?api=1", stopCount: 2, waypointCount: 0 }),
+      } as Response);
+    }
+    if (/^\/api\/routes\/[^/]+\/export\/apple-maps$/.test(url)) {
+      return Promise.resolve({
+        ok: true,
+        json: () => Promise.resolve({ platform: "apple-maps", url: "maps://?saddr=51.5,-0.1&daddr=51.52,-0.12", stopCount: 2, waypointCount: 0 }),
+      } as Response);
+    }
+    return Promise.resolve({ ok: true, json: () => Promise.resolve({}) } as Response);
+  });
+}
+
+beforeEach(() => {
+  vi.restoreAllMocks();
+});
+
+describe("RoutesPage", () => {
+  it("renders stop cards, summary, status badge and map for a manager", async () => {
+    global.fetch = mockFetch("manager") as unknown as typeof fetch;
+    render(<RoutesPage />);
+
+    await waitFor(() => expect(screen.getByText("Alice")).toBeInTheDocument());
+    expect(screen.getByText("Bob")).toBeInTheDocument();
+    expect(screen.getByText("1 High St")).toBeInTheDocument();
+
+    // Summary: travel time formatted, distance shown
+    expect(screen.getByText("1 h 35 min")).toBeInTheDocument();
+    expect(screen.getByText("42.50 km")).toBeInTheDocument();
+
+    // Status badge
+    expect(screen.getByText("Optimized")).toBeInTheDocument();
+
+    // First stop is start-of-route; second shows travel from previous
+    expect(screen.getByText("Start of route")).toBeInTheDocument();
+    expect(screen.getByText("20 min travel from previous")).toBeInTheDocument();
+
+    // Map received both stops (lazy chunk resolves asynchronously)
+    expect(await screen.findByTestId("route-map")).toHaveTextContent("map:2");
+  });
+
+  it("shows the groomer selector for managers", async () => {
+    global.fetch = mockFetch("manager") as unknown as typeof fetch;
+    render(<RoutesPage />);
+    await waitFor(() => expect(screen.getByText("Groomer")).toBeInTheDocument());
+  });
+
+  it("hides the groomer selector for groomer role (auto-filtered)", async () => {
+    global.fetch = mockFetch("groomer") as unknown as typeof fetch;
+    render(<RoutesPage />);
+    await waitFor(() => expect(screen.getByText("Alice")).toBeInTheDocument());
+    expect(screen.queryByText("Groomer")).not.toBeInTheDocument();
+  });
+
+  it("renders a drag handle for each stop (drag-to-reorder enabled)", async () => {
+    global.fetch = mockFetch("manager") as unknown as typeof fetch;
+    render(<RoutesPage />);
+
+    await waitFor(() => expect(screen.getByText("Alice")).toBeInTheDocument());
+    expect(screen.getByLabelText("Drag to reorder Alice")).toBeInTheDocument();
+    expect(screen.getByLabelText("Drag to reorder Bob")).toBeInTheDocument();
+  });
+
+  it("flags the tight-schedule conflict on the affected stop", async () => {
+    global.fetch = mockFetch("manager") as unknown as typeof fetch;
+    render(<RoutesPage />);
+
+    await waitFor(() => expect(screen.getByText("Bob")).toBeInTheDocument());
+    expect(
+      screen.getByText(/Tight schedule — travel \+ buffer may exceed the gap/)
+    ).toBeInTheDocument();
+  });
+
+  it("does not show the re-optimize hint before any manual reorder", async () => {
+    global.fetch = mockFetch("manager") as unknown as typeof fetch;
+    render(<RoutesPage />);
+
+    await waitFor(() => expect(screen.getByText("Alice")).toBeInTheDocument());
+    expect(screen.queryByText("Re-optimize")).not.toBeInTheDocument();
+  });
+
+  it("calls the optimize endpoint when Optimize is clicked", async () => {
+    const fetchMock = mockFetch("manager");
+    global.fetch = fetchMock as unknown as typeof fetch;
+    render(<RoutesPage />);
+
+    await waitFor(() => expect(screen.getByText("Alice")).toBeInTheDocument());
+    fireEvent.click(screen.getByText("Optimize"));
+
+    await waitFor(() =>
+      expect(fetchMock).toHaveBeenCalledWith(
+        "/api/routes/optimize",
+        expect.objectContaining({ method: "POST" })
+      )
+    );
+  });
+
+  it("renders both navigation export buttons when the route has stops", async () => {
+    global.fetch = mockFetch("manager") as unknown as typeof fetch;
+    render(<RoutesPage />);
+
+    await waitFor(() => expect(screen.getByText("Alice")).toBeInTheDocument());
+    expect(screen.getByRole("button", { name: "Open in Google Maps" })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Open in Apple Maps" })).toBeInTheDocument();
+  });
+
+  it("fetches the export deep link and opens it when Open in Google Maps is clicked", async () => {
+    const fetchMock = mockFetch("manager");
+    global.fetch = fetchMock as unknown as typeof fetch;
+    const openSpy = vi
+      .spyOn(window, "open")
+      .mockReturnValue({ location: { href: "" }, close: vi.fn() } as unknown as Window);
+
+    render(<RoutesPage />);
+    await waitFor(() => expect(screen.getByText("Alice")).toBeInTheDocument());
+
+    fireEvent.click(screen.getByRole("button", { name: "Open in Google Maps" }));
+
+    await waitFor(() =>
+      expect(fetchMock).toHaveBeenCalledWith("/api/routes/r1/export/google-maps")
+    );
+    expect(openSpy).toHaveBeenCalled();
+  });
+});
@@ -0,0 +1,97 @@
+import { useEffect } from "react";
+import {
+  MapContainer,
+  TileLayer,
+  Marker,
+  Polyline,
+  Tooltip,
+  useMap,
+} from "react-leaflet";
+import L from "leaflet";
+import "leaflet/dist/leaflet.css";
+
+// This component is loaded via React.lazy from the route planner page so that
+// Leaflet + react-leaflet land in a separate code-split chunk and never weigh
+// down the main admin bundle.
+
+export interface RouteMapStop {
+  id: string;
+  stopOrder: number;
+  latitude: number;
+  longitude: number;
+  clientName: string;
+}
+
+interface RouteMapProps {
+  stops: RouteMapStop[];
+  primaryColor: string;
+}
+
+/** A numbered teardrop pin rendered as an inline-SVG divIcon (no image assets). */
+function numberedIcon(order: number, color: string): L.DivIcon {
+  return L.divIcon({
+    className: "route-stop-pin",
+    html: `<div style="position:relative;width:28px;height:40px">
+      <svg width="28" height="40" viewBox="0 0 28 40" xmlns="http://www.w3.org/2000/svg">
+        <path d="M14 0C6.27 0 0 6.27 0 14c0 9.5 14 26 14 26s14-16.5 14-26C28 6.27 21.73 0 14 0z" fill="${color}" stroke="#ffffff" stroke-width="1.5"/>
+      </svg>
+      <span style="position:absolute;top:5px;left:0;width:28px;text-align:center;color:#fff;font-size:13px;font-weight:700;font-family:system-ui,sans-serif">${order}</span>
+    </div>`,
+    iconSize: [28, 40],
+    iconAnchor: [14, 40],
+    tooltipAnchor: [0, -34],
+  });
+}
+
+/** Keeps the viewport framed around all stops whenever the route changes. */
+function FitBounds({ stops }: { stops: RouteMapStop[] }) {
+  const map = useMap();
+  useEffect(() => {
+    if (stops.length === 0) return;
+    const latlngs = stops.map((s) => [s.latitude, s.longitude] as [number, number]);
+    if (latlngs.length === 1) {
+      map.setView(latlngs[0]!, 14);
+    } else {
+      map.fitBounds(L.latLngBounds(latlngs), { padding: [40, 40] });
+    }
+  }, [map, stops]);
+  return null;
+}
+
+export default function RouteMap({ stops, primaryColor }: RouteMapProps) {
+  // Fallback centre (London) only used briefly before FitBounds runs or when the
+  // route has no geocoded stops.
+  const center: [number, number] = stops[0]
+    ? [stops[0].latitude, stops[0].longitude]
+    : [51.505, -0.09];
+  const line = stops.map((s) => [s.latitude, s.longitude] as [number, number]);
+
+  return (
+    <MapContainer
+      center={center}
+      zoom={12}
+      scrollWheelZoom
+      style={{ height: "100%", width: "100%", borderRadius: 8 }}
+    >
+      <TileLayer
+        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+      />
+      {line.length >= 2 && (
+        <Polyline positions={line} color={primaryColor} weight={4} opacity={0.7} />
+      )}
+      {stops.map((s) => (
+        <Marker
+          key={s.id}
+          position={[s.latitude, s.longitude]}
+          icon={numberedIcon(s.stopOrder, primaryColor)}
+        >
+          <Tooltip>
+            {s.stopOrder}. {s.clientName}
+          </Tooltip>
+        </Marker>
+      ))}
+      <FitBounds stops={stops} />
+    </MapContainer>
+  );
+}
@@ -0,0 +1,781 @@
+import { Suspense, lazy, useCallback, useEffect, useMemo, useState } from "react";
+import {
+  DndContext,
+  KeyboardSensor,
+  PointerSensor,
+  TouchSensor,
+  closestCenter,
+  useSensor,
+  useSensors,
+  type DragEndEvent,
+} from "@dnd-kit/core";
+import {
+  SortableContext,
+  arrayMove,
+  sortableKeyboardCoordinates,
+  useSortable,
+  verticalListSortingStrategy,
+} from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { useBranding } from "../BrandingContext.js";
+import type { RouteMapStop } from "../components/RouteMap.js";
+
+// Leaflet is heavy and only needed on this page — load it as a separate chunk.
+const RouteMap = lazy(() => import("../components/RouteMap.js"));
+
+// ─── Types (mirror groombook/api /api/routes responses) ─────────────────────────
+
+type RouteStatus = "draft" | "optimized" | "in_progress" | "completed";
+
+interface RouteRow {
+  id: string;
+  staffId: string;
+  routeDate: string;
+  status: RouteStatus;
+  totalTravelMins: number | null;
+  totalDistanceKm: string | null;
+}
+
+interface ConflictFlags {
+  hasConflict: boolean;
+}
+
+interface RouteStop {
+  id: string;
+  appointmentId: string;
+  stopOrder: number;
+  latitude: number;
+  longitude: number;
+  travelMinsFromPrev: number | null;
+  travelDistanceKmFromPrev: string | null;
+  bufferMins: number;
+  appointmentStartTime: string;
+  appointmentEndTime: string;
+  appointmentStatus: string;
+  clientId: string;
+  clientName: string;
+  clientAddress: string | null;
+  conflict: ConflictFlags;
+}
+
+interface RouteResponse {
+  route: RouteRow;
+  stops: RouteStop[];
+  hasConflicts: boolean;
+  conflictCount: number;
+  warnings?: string[];
+  skipped?: Array<{ appointmentId: string; clientName: string; reason: string }>;
+}
+
+interface StaffMember {
+  id: string;
+  name: string;
+  role: "groomer" | "receptionist" | "manager";
+  active: boolean;
+}
+
+// ─── Helpers ────────────────────────────────────────────────────────────────────
+
+function todayIso(): string {
+  return new Date().toISOString().slice(0, 10);
+}
+
+function fmtDuration(mins: number | null | undefined): string {
+  if (mins == null) return "—";
+  if (mins < 60) return `${mins} min`;
+  const h = Math.floor(mins / 60);
+  const m = mins % 60;
+  return m === 0 ? `${h} h` : `${h} h ${m} min`;
+}
+
+function fmtTime(iso: string): string {
+  const d = new Date(iso);
+  if (Number.isNaN(d.getTime())) return iso;
+  return d.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+}
+
+// ─── Navigation export ────────────────────────────────────────────────────────
+
+/** Navigation target platforms supported by the API export endpoints. */
+type NavigationPlatform = "google-maps" | "apple-maps";
+
+type DevicePlatform = "ios" | "android" | "other";
+
+/**
+ * Best-effort mobile-OS detection so we can surface the most useful navigation
+ * app first. Apple Maps deep links (`maps://`) only resolve on iOS; everywhere
+ * else Google Maps is the safe default. iPadOS 13+ reports a desktop UA, so we
+ * also treat a touch-capable "MacIntel" device as iOS.
+ */
+function detectPlatform(): DevicePlatform {
+  if (typeof navigator === "undefined") return "other";
+  const ua = navigator.userAgent || "";
+  if (/iphone|ipad|ipod/i.test(ua)) return "ios";
+  if (navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1) return "ios";
+  if (/android/i.test(ua)) return "android";
+  return "other";
+}
+
+// ─── Offline map-tile pre-warming ────────────────────────────────────────────
+
+/** OSM tile zoom levels pre-fetched around a route so the map renders offline. */
+const PREWARM_ZOOM_LEVELS = [12, 13, 14] as const;
+/** Hard cap on tiles fetched per pre-warm pass — keeps us friendly to OSM. */
+const MAX_PREWARM_TILES = 80;
+/** Subdomains Leaflet's default OSM TileLayer rotates through (`{s}`). */
+const TILE_SUBDOMAINS = ["a", "b", "c"] as const;
+
+/** Web-Mercator longitude → tile X index at the given zoom. */
+function lonToTileX(lon: number, z: number): number {
+  return Math.floor(((lon + 180) / 360) * 2 ** z);
+}
+
+/** Web-Mercator latitude → tile Y index at the given zoom. */
+function latToTileY(lat: number, z: number): number {
+  const rad = (lat * Math.PI) / 180;
+  return Math.floor(
+    ((1 - Math.log(Math.tan(rad) + 1 / Math.cos(rad)) / Math.PI) / 2) * 2 ** z
+  );
+}
+
+/**
+ * Warm the browser/service-worker cache with the OSM tiles covering the route's
+ * bounding box (plus a one-tile margin) across a few zoom levels. Tiles are
+ * fetched via `new Image()` so they hit the same URLs Leaflet later requests and
+ * land in the CacheFirst tile cache, making the map viewable offline. Bounded by
+ * MAX_PREWARM_TILES so a sprawling route never floods the network.
+ */
+function prewarmRouteTiles(
+  stops: Array<{ latitude: number; longitude: number }>
+): void {
+  if (typeof window === "undefined" || stops.length === 0) return;
+  const lats = stops.map((s) => s.latitude);
+  const lons = stops.map((s) => s.longitude);
+  const minLat = Math.min(...lats);
+  const maxLat = Math.max(...lats);
+  const minLon = Math.min(...lons);
+  const maxLon = Math.max(...lons);
+
+  const urls: string[] = [];
+  for (const z of PREWARM_ZOOM_LEVELS) {
+    const x0 = lonToTileX(minLon, z) - 1;
+    const x1 = lonToTileX(maxLon, z) + 1;
+    // Tile Y grows as latitude decreases, so maxLat → smaller Y.
+    const y0 = latToTileY(maxLat, z) - 1;
+    const y1 = latToTileY(minLat, z) + 1;
+    for (let x = x0; x <= x1; x++) {
+      for (let y = y0; y <= y1; y++) {
+        if (x < 0 || y < 0 || x >= 2 ** z || y >= 2 ** z) continue;
+        const s = TILE_SUBDOMAINS[(x + y) % TILE_SUBDOMAINS.length];
+        urls.push(`https://${s}.tile.openstreetmap.org/${z}/${x}/${y}.png`);
+      }
+    }
+  }
+
+  for (const url of urls.slice(0, MAX_PREWARM_TILES)) {
+    const img = new Image();
+    img.src = url;
+  }
+}
+
+// ─── Responsive layout ────────────────────────────────────────────────────────
+
+/** Tracks a `max-width` media query so the page can adapt to phone widths. */
+function useIsMobile(maxWidthPx = 768): boolean {
+  const query = `(max-width: ${maxWidthPx}px)`;
+  const [isMobile, setIsMobile] = useState(
+    () => typeof window !== "undefined" && typeof window.matchMedia === "function"
+      ? window.matchMedia(query).matches
+      : false
+  );
+  useEffect(() => {
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
+    const mq = window.matchMedia(query);
+    const onChange = (e: MediaQueryListEvent) => setIsMobile(e.matches);
+    setIsMobile(mq.matches);
+    mq.addEventListener("change", onChange);
+    return () => mq.removeEventListener("change", onChange);
+  }, [query]);
+  return isMobile;
+}
+
+const STATUS_STYLES: Record<RouteStatus, { bg: string; fg: string; label: string }> = {
+  draft: { bg: "#f1f5f9", fg: "#475569", label: "Draft" },
+  optimized: { bg: "#ecfdf5", fg: "#047857", label: "Optimized" },
+  in_progress: { bg: "#eff6ff", fg: "#1d4ed8", label: "In progress" },
+  completed: { bg: "#f5f3ff", fg: "#6d28d9", label: "Completed" },
+};
+
+function StatusBadge({ status }: { status: RouteStatus }) {
+  const s = STATUS_STYLES[status] ?? STATUS_STYLES.draft;
+  return (
+    <span
+      style={{
+        background: s.bg,
+        color: s.fg,
+        borderRadius: 999,
+        padding: "0.2rem 0.7rem",
+        fontSize: 12,
+        fontWeight: 600,
+        textTransform: "none",
+      }}
+    >
+      {s.label}
+    </span>
+  );
+}
+
+const inputStyle: React.CSSProperties = {
+  padding: "0.4rem 0.6rem",
+  borderRadius: 6,
+  border: "1px solid #cbd5e1",
+  fontSize: 14,
+};
+
+/**
+ * A single draggable stop card. The drag handle (⠿) carries the dnd-kit
+ * listeners so the rest of the card stays scrollable/selectable; the handle is
+ * sized for touch and works with pointer, touch and keyboard sensors.
+ */
+function SortableStop({
+  stop,
+  primaryColor,
+  disabled,
+}: {
+  stop: RouteStop;
+  primaryColor: string;
+  disabled: boolean;
+}) {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } =
+    useSortable({ id: stop.id, disabled });
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={{
+        background: "#fff",
+        border: `1px solid ${stop.conflict?.hasConflict ? "#fca5a5" : "#e2e8f0"}`,
+        borderRadius: 8,
+        padding: "0.7rem 0.85rem",
+        display: "flex",
+        gap: 10,
+        transform: CSS.Transform.toString(transform),
+        transition,
+        opacity: isDragging ? 0.6 : 1,
+        boxShadow: isDragging ? "0 6px 16px rgba(0,0,0,0.18)" : "none",
+        touchAction: "none",
+      }}
+    >
+      <button
+        type="button"
+        aria-label={`Drag to reorder ${stop.clientName}`}
+        disabled={disabled}
+        {...attributes}
+        {...listeners}
+        style={{
+          flexShrink: 0,
+          alignSelf: "stretch",
+          width: 28,
+          border: "none",
+          background: "transparent",
+          color: "#94a3b8",
+          fontSize: 18,
+          lineHeight: 1,
+          cursor: disabled ? "not-allowed" : "grab",
+          touchAction: "none",
+          padding: 0,
+        }}
+      >
+        ⠿
+      </button>
+      <div
+        style={{
+          flexShrink: 0,
+          width: 26,
+          height: 26,
+          borderRadius: "50%",
+          background: primaryColor,
+          color: "#fff",
+          fontSize: 13,
+          fontWeight: 700,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+        }}
+      >
+        {stop.stopOrder}
+      </div>
+      <div style={{ minWidth: 0, flex: 1 }}>
+        <div style={{ display: "flex", justifyContent: "space-between", gap: 8 }}>
+          <strong style={{ fontSize: 14, color: "#1a202c" }}>{stop.clientName}</strong>
+          <span style={{ fontSize: 13, color: "#4b5563", whiteSpace: "nowrap" }}>{fmtTime(stop.appointmentStartTime)}</span>
+        </div>
+        <div style={{ fontSize: 12, color: "#6b7280", marginTop: 2 }}>{stop.clientAddress || "No address on file"}</div>
+        <div style={{ fontSize: 12, color: "#6b7280", marginTop: 4 }}>
+          {stop.stopOrder === 1 || stop.travelMinsFromPrev == null
+            ? "Start of route"
+            : `${fmtDuration(stop.travelMinsFromPrev)} travel from previous`}
+        </div>
+        {stop.conflict?.hasConflict && (
+          <div style={{ fontSize: 12, color: "#b91c1c", marginTop: 4, fontWeight: 600 }}>
+            ⚠ Tight schedule — travel + buffer may exceed the gap
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Navigation export controls. Fetches a platform deep-link from the API and opens
+ * it. The button matching the detected device OS is shown prominently (filled);
+ * the other is offered as a secondary outline button. On desktop both are
+ * secondary and Google Maps leads.
+ */
+function NavExportButtons({
+  routeId,
+  primaryColor,
+  fullWidth,
+}: {
+  routeId: string;
+  primaryColor: string;
+  fullWidth: boolean;
+}) {
+  const [busy, setBusy] = useState<NavigationPlatform | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const platform = useMemo(detectPlatform, []);
+
+  const openIn = useCallback(
+    async (target: NavigationPlatform) => {
+      setBusy(target);
+      setError(null);
+      // Pre-open a tab synchronously: mobile Safari/Chrome block window.open()
+      // calls that happen after an await (no longer in the user-gesture turn).
+      const win = window.open("", "_blank");
+      try {
+        const r = await fetch(`/api/routes/${encodeURIComponent(routeId)}/export/${target}`);
+        if (!r.ok) {
+          const body = await r.json().catch(() => ({}));
+          throw new Error(body.error || `Export failed (${r.status})`);
+        }
+        const { url } = (await r.json()) as { url: string };
+        if (win) win.location.href = url;
+        else window.location.href = url;
+      } catch (e) {
+        win?.close();
+        setError(e instanceof Error ? e.message : "Export failed");
+      } finally {
+        setBusy(null);
+      }
+    },
+    [routeId]
+  );
+
+  const baseBtn: React.CSSProperties = {
+    padding: "0.55rem 1rem",
+    borderRadius: 6,
+    fontWeight: 600,
+    fontSize: 14,
+    cursor: busy ? "wait" : "pointer",
+    flex: fullWidth ? "1 1 0" : "0 0 auto",
+  };
+  const primaryBtn: React.CSSProperties = {
+    ...baseBtn,
+    border: "none",
+    background: primaryColor,
+    color: "#fff",
+  };
+  const secondaryBtn: React.CSSProperties = {
+    ...baseBtn,
+    border: `1px solid ${primaryColor}`,
+    background: "#fff",
+    color: primaryColor,
+  };
+
+  const label = (p: NavigationPlatform) =>
+    busy === p
+      ? "Opening…"
+      : p === "google-maps"
+        ? "Open in Google Maps"
+        : "Open in Apple Maps";
+
+  const google = (
+    <button
+      key="google"
+      type="button"
+      onClick={() => openIn("google-maps")}
+      disabled={busy !== null}
+      style={platform === "ios" ? secondaryBtn : primaryBtn}
+    >
+      {label("google-maps")}
+    </button>
+  );
+  const apple = (
+    <button
+      key="apple"
+      type="button"
+      onClick={() => openIn("apple-maps")}
+      disabled={busy !== null}
+      style={platform === "ios" ? primaryBtn : secondaryBtn}
+    >
+      {label("apple-maps")}
+    </button>
+  );
+  // Prominent (filled) button first; secondary second.
+  const ordered = platform === "ios" ? [apple, google] : [google, apple];
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
+      <div style={{ display: "flex", gap: 8, flexWrap: "wrap", alignItems: "center" }}>
+        <span style={{ fontSize: 12, color: "#4b5563", fontWeight: 600, marginRight: 4 }}>
+          Navigate
+        </span>
+        {ordered}
+      </div>
+      {error && <div style={{ fontSize: 12, color: "#991b1b" }}>{error}</div>}
+    </div>
+  );
+}
+
+// ─── Page ───────────────────────────────────────────────────────────────────────
+
+export function RoutesPage() {
+  const { branding } = useBranding();
+  const primaryColor = branding.primaryColor || "#4f8a6f";
+
+  const [me, setMe] = useState<StaffMember | null>(null);
+  const [meLoaded, setMeLoaded] = useState(false);
+  const [groomers, setGroomers] = useState<StaffMember[]>([]);
+  const [staffId, setStaffId] = useState<string>("");
+  const [date, setDate] = useState<string>(todayIso());
+
+  const [data, setData] = useState<RouteResponse | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [optimizing, setOptimizing] = useState(false);
+  const [reordering, setReordering] = useState(false);
+  const [manuallyReordered, setManuallyReordered] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const isGroomer = me?.role === "groomer";
+  const isMobile = useIsMobile();
+
+  // Resolve the current staff member; groomers are pinned to their own route.
+  useEffect(() => {
+    fetch("/api/staff/me")
+      .then((r) => (r.ok ? r.json() : null))
+      .then((row: StaffMember | null) => {
+        setMe(row);
+        if (row?.role === "groomer") setStaffId(row.id);
+      })
+      .catch(() => setMe(null))
+      .finally(() => setMeLoaded(true));
+  }, []);
+
+  // Managers / receptionists pick a groomer; groomers never see the selector.
+  useEffect(() => {
+    if (!meLoaded || isGroomer) return;
+    fetch("/api/staff")
+      .then((r) => (r.ok ? r.json() : []))
+      .then((rows: StaffMember[]) => {
+        const gs = rows.filter((s) => s.active && s.role === "groomer");
+        setGroomers(gs);
+        setStaffId((cur) => cur || gs[0]?.id || "");
+      })
+      .catch(() => setGroomers([]));
+  }, [meLoaded, isGroomer]);
+
+  const loadRoute = useCallback(async () => {
+    if (!staffId || !date) return;
+    setLoading(true);
+    setError(null);
+    try {
+      const r = await fetch(
+        `/api/routes/daily?staffId=${encodeURIComponent(staffId)}&date=${encodeURIComponent(date)}`
+      );
+      if (!r.ok) {
+        const body = await r.json().catch(() => ({}));
+        throw new Error(body.error || `Failed to load route (${r.status})`);
+      }
+      setData(await r.json());
+      setManuallyReordered(false);
+    } catch (e) {
+      setData(null);
+      setError(e instanceof Error ? e.message : "Failed to load route");
+    } finally {
+      setLoading(false);
+    }
+  }, [staffId, date]);
+
+  useEffect(() => {
+    void loadRoute();
+  }, [loadRoute]);
+
+  const optimize = useCallback(async () => {
+    if (!staffId || !date) return;
+    setOptimizing(true);
+    setError(null);
+    try {
+      const r = await fetch("/api/routes/optimize", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ staffId, date }),
+      });
+      if (!r.ok) {
+        const body = await r.json().catch(() => ({}));
+        throw new Error(body.error || `Optimization failed (${r.status})`);
+      }
+      setData(await r.json());
+      setManuallyReordered(false);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Optimization failed");
+    } finally {
+      setOptimizing(false);
+    }
+  }, [staffId, date]);
+
+  // Drag-to-reorder: pointer for desktop, touch (press-and-hold) for mobile
+  // groomers, keyboard for accessibility. Touch uses a short delay so vertical
+  // scrolling of the stop list still works without triggering a drag.
+  const sensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
+    useSensor(TouchSensor, { activationConstraint: { delay: 200, tolerance: 8 } }),
+    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
+  );
+
+  // Persist a manually reordered stop list. Optimistic: the UI is updated
+  // immediately from the dropped order and rolled back if the PATCH fails.
+  const reorder = useCallback(
+    async (orderedIds: string[]) => {
+      const routeId = data?.route?.id;
+      if (!routeId) return;
+      const previous = data;
+      // Optimistic local update: renumber stopOrder to match the new order so
+      // the list and the map reflect the drop before the server responds.
+      const byId = new Map((data?.stops ?? []).map((s) => [s.id, s]));
+      const optimisticStops = orderedIds
+        .map((id, i) => {
+          const s = byId.get(id);
+          return s ? { ...s, stopOrder: i + 1 } : null;
+        })
+        .filter((s): s is RouteStop => s !== null);
+      setData((cur) => (cur ? { ...cur, stops: optimisticStops } : cur));
+      setManuallyReordered(true);
+      setReordering(true);
+      setError(null);
+      try {
+        const r = await fetch(`/api/routes/${encodeURIComponent(routeId)}/reorder`, {
+          method: "PATCH",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ stopOrder: orderedIds }),
+        });
+        if (!r.ok) {
+          const body = await r.json().catch(() => ({}));
+          throw new Error(body.error || `Reorder failed (${r.status})`);
+        }
+        // Server recomputes travel legs, buffers and conflict flags — adopt its
+        // authoritative response over the optimistic guess.
+        setData(await r.json());
+      } catch (e) {
+        setData(previous); // rollback
+        setError(e instanceof Error ? e.message : "Reorder failed");
+      } finally {
+        setReordering(false);
+      }
+    },
+    [data]
+  );
+
+  const handleDragEnd = useCallback(
+    (event: DragEndEvent) => {
+      const { active, over } = event;
+      if (!over || active.id === over.id) return;
+      const ids = (data?.stops ?? []).map((s) => s.id);
+      const from = ids.indexOf(String(active.id));
+      const to = ids.indexOf(String(over.id));
+      if (from === -1 || to === -1) return;
+      void reorder(arrayMove(ids, from, to));
+    },
+    [data, reorder]
+  );
+
+  const mapStops: RouteMapStop[] = useMemo(
+    () =>
+      (data?.stops ?? []).map((s) => ({
+        id: s.id,
+        stopOrder: s.stopOrder,
+        latitude: s.latitude,
+        longitude: s.longitude,
+        clientName: s.clientName,
+      })),
+    [data]
+  );
+
+  // Pre-warm OSM map tiles for the route area whenever a route (re)loads or is
+  // re-optimized, so the map stays viewable offline. Runs after today's route is
+  // fetched on page load and after every optimize/reorder that yields new stops.
+  useEffect(() => {
+    if (mapStops.length > 0) prewarmRouteTiles(mapStops);
+  }, [mapStops]);
+
+  const stops = data?.stops ?? [];
+  const route = data?.route ?? null;
+
+  return (
+    <div style={{ padding: "1.25rem", maxWidth: 1280, margin: "0 auto" }}>
+      <div style={{ display: "flex", alignItems: "center", gap: 12, flexWrap: "wrap", marginBottom: "1rem" }}>
+        <h1 style={{ fontSize: 22, fontWeight: 700, color: "#1a202c", margin: 0 }}>Route Planner</h1>
+        {route && <StatusBadge status={route.status} />}
+      </div>
+
+      {/* Controls */}
+      <div style={{ display: "flex", gap: 12, flexWrap: "wrap", alignItems: "flex-end", marginBottom: "1rem" }}>
+        <label style={{ display: "flex", flexDirection: "column", gap: 4, fontSize: 12, color: "#4b5563", fontWeight: 600 }}>
+          Date
+          <input type="date" value={date} onChange={(e) => setDate(e.target.value)} style={inputStyle} />
+        </label>
+
+        {!isGroomer && (
+          <label style={{ display: "flex", flexDirection: "column", gap: 4, fontSize: 12, color: "#4b5563", fontWeight: 600 }}>
+            Groomer
+            <select
+              value={staffId}
+              onChange={(e) => setStaffId(e.target.value)}
+              style={{ ...inputStyle, minWidth: 180 }}
+            >
+              {groomers.length === 0 && <option value="">No groomers</option>}
+              {groomers.map((g) => (
+                <option key={g.id} value={g.id}>
+                  {g.name}
+                </option>
+              ))}
+            </select>
+          </label>
+        )}
+
+        <button
+          onClick={optimize}
+          disabled={optimizing || !staffId}
+          style={{
+            padding: "0.5rem 1.1rem",
+            borderRadius: 6,
+            border: "none",
+            background: primaryColor,
+            color: "#fff",
+            fontWeight: 600,
+            fontSize: 14,
+            cursor: optimizing || !staffId ? "wait" : "pointer",
+            opacity: optimizing || !staffId ? 0.7 : 1,
+          }}
+        >
+          {optimizing ? "Optimizing…" : "Optimize"}
+        </button>
+      </div>
+
+      {error && (
+        <div style={{ background: "#fef2f2", border: "1px solid #fecaca", borderRadius: 6, padding: "0.6rem 0.8rem", color: "#991b1b", fontSize: 13, marginBottom: "1rem" }}>
+          {error}
+        </div>
+      )}
+
+      {data?.warnings && data.warnings.length > 0 && (
+        <div style={{ background: "#fffbeb", border: "1px solid #fde68a", borderRadius: 6, padding: "0.6rem 0.8rem", color: "#92400e", fontSize: 13, marginBottom: "1rem" }}>
+          {data.warnings.map((w, i) => (
+            <div key={i}>{w}</div>
+          ))}
+        </div>
+      )}
+
+      {/* Summary */}
+      <div style={{ display: "flex", gap: 24, flexWrap: "wrap", marginBottom: "1rem", padding: "0.8rem 1rem", background: "#fff", borderRadius: 8, border: "1px solid #e2e8f0" }}>
+        <Summary label="Stops" value={String(stops.length)} />
+        <Summary label="Total travel time" value={fmtDuration(route?.totalTravelMins)} />
+        <Summary label="Total distance" value={route?.totalDistanceKm != null ? `${route.totalDistanceKm} km` : "—"} />
+      </div>
+
+      {/* Navigation export — open the route in the device's maps app */}
+      {route && stops.length > 0 && (
+        <div style={{ marginBottom: "1rem", padding: "0.8rem 1rem", background: "#fff", borderRadius: 8, border: "1px solid #e2e8f0" }}>
+          <NavExportButtons routeId={route.id} primaryColor={primaryColor} fullWidth={isMobile} />
+        </div>
+      )}
+
+      <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "minmax(0, 1.5fr) minmax(280px, 1fr)", gap: 16, alignItems: "stretch" }}>
+        {/* Map */}
+        <div style={{ height: isMobile ? 340 : 540, background: "#e5e7eb", borderRadius: 8, overflow: "hidden", border: "1px solid #e2e8f0" }}>
+          {mapStops.length > 0 ? (
+            <Suspense fallback={<Centered>Loading map…</Centered>}>
+              <RouteMap stops={mapStops} primaryColor={primaryColor} />
+            </Suspense>
+          ) : (
+            <Centered>{loading ? "Loading route…" : "No stops to display. Click Optimize to build the route."}</Centered>
+          )}
+        </div>
+
+        {/* Stop list panel — drag-to-reorder */}
+        <div style={{ display: "flex", flexDirection: "column", gap: 10, maxHeight: isMobile ? "none" : 540, overflowY: isMobile ? "visible" : "auto" }}>
+          {stops.length === 0 && !loading && (
+            <div style={{ color: "#6b7280", fontSize: 14, padding: "1rem" }}>No stops for this day.</div>
+          )}
+          {stops.length > 0 && (
+            <>
+              {manuallyReordered && (
+                <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 8, background: "#fffbeb", border: "1px solid #fde68a", borderRadius: 8, padding: "0.55rem 0.7rem" }}>
+                  <span style={{ fontSize: 12, color: "#92400e" }}>
+                    Stops reordered manually. Re-optimize to recompute the best route.
+                  </span>
+                  <button
+                    type="button"
+                    onClick={optimize}
+                    disabled={optimizing || reordering || !staffId}
+                    style={{
+                      flexShrink: 0,
+                      padding: "0.35rem 0.7rem",
+                      borderRadius: 6,
+                      border: "none",
+                      background: primaryColor,
+                      color: "#fff",
+                      fontSize: 13,
+                      fontWeight: 600,
+                      cursor: optimizing || reordering || !staffId ? "not-allowed" : "pointer",
+                      opacity: optimizing || reordering || !staffId ? 0.6 : 1,
+                    }}
+                  >
+                    {optimizing ? "Optimizing…" : "Re-optimize"}
+                  </button>
+                </div>
+              )}
+              <DndContext
+                sensors={sensors}
+                collisionDetection={closestCenter}
+                onDragEnd={handleDragEnd}
+              >
+                <SortableContext items={stops.map((s) => s.id)} strategy={verticalListSortingStrategy}>
+                  {stops.map((s) => (
+                    <SortableStop key={s.id} stop={s} primaryColor={primaryColor} disabled={reordering} />
+                  ))}
+                </SortableContext>
+              </DndContext>
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function Summary({ label, value }: { label: string; value: string }) {
+  return (
+    <div>
+      <div style={{ fontSize: 12, color: "#6b7280", fontWeight: 600 }}>{label}</div>
+      <div style={{ fontSize: 18, color: "#1a202c", fontWeight: 700 }}>{value}</div>
+    </div>
+  );
+}
+
+function Centered({ children }: { children: React.ReactNode }) {
+  return (
+    <div style={{ height: "100%", display: "flex", alignItems: "center", justifyContent: "center", color: "#6b7280", fontSize: 14, textAlign: "center", padding: "1rem" }}>
+      {children}
+    </div>
+  );
+}
@@ -89,8 +89,8 @@ interface Service {
  id: string;
  name: string;
  description?: string;
-  duration: number;
-  price: number;
+  duration?: number;
+  price?: number;
  priceRange?: string;
  isAddOn?: boolean;
 }
@@ -249,6 +249,52 @@ export function normalizeAppointment(raw: RawApiAppointment): Appointment {
  };
 }

+// Raw service shape from `GET /api/portal/services`, which projects the
+// canonical DB columns (`basePriceCents`, `durationMinutes`). Also tolerates an
+// already-normalized payload so either shape renders correctly.
+interface RawApiService {
+  id: string;
+  name: string;
+  description?: string | null;
+  basePriceCents?: number | null;
+  durationMinutes?: number | null;
+  price?: number | null;
+  duration?: number | null;
+  priceRange?: string | null;
+  isAddOn?: boolean | null;
+}
+
+// Normalizes a raw API service into the flat `Service` shape the cards render:
+// price as dollars (from `basePriceCents`) and duration in minutes (from
+// `durationMinutes`). Leaves fields undefined when genuinely absent so the card
+// can hide them rather than print `$undefined` / empty `min`.
+export function normalizeService(raw: RawApiService): Service {
+  const price =
+    raw.price ?? (typeof raw.basePriceCents === 'number' ? raw.basePriceCents / 100 : undefined);
+  const duration = raw.duration ?? raw.durationMinutes ?? undefined;
+  return {
+    id: raw.id,
+    name: raw.name,
+    description: raw.description ?? undefined,
+    duration: duration ?? undefined,
+    price: price ?? undefined,
+    priceRange: raw.priceRange ?? undefined,
+    isAddOn: raw.isAddOn ?? undefined,
+  };
+}
+
+// Renders a service price for display, preferring an explicit `priceRange`
+// string, then a numeric dollar `price` (integers without trailing zeros, e.g.
+// `$45`; fractional values to cents, e.g. `$45.50`). Returns null when neither
+// is available so the caller can omit the price line entirely.
+export function formatServicePrice(svc: Pick<Service, 'price' | 'priceRange'>): string | null {
+  if (svc.priceRange) return svc.priceRange;
+  if (typeof svc.price === 'number' && Number.isFinite(svc.price)) {
+    return `$${Number.isInteger(svc.price) ? svc.price : svc.price.toFixed(2)}`;
+  }
+  return null;
+}
+
 const STATUS_COLORS: Record<string, string> = {
  confirmed: 'bg-green-100 text-green-700',
  pending: 'bg-amber-100 text-amber-600',
@@ -269,9 +315,19 @@ const STATUS_LABELS: Record<string, string> = {
  scheduled: 'Scheduled',
 };

+// The DB `appointment_status` enum stores `no_show` (underscore), but the badge
+// palette is keyed on `no-show` (hyphen). Without normalization a no-show
+// appointment renders as a raw gray `no_show` label instead of the styled
+// "No-show" badge (GRO-2319 item 1). Map underscore status keys to the hyphen
+// palette key so DB-sourced statuses resolve to their intended badge style.
+export function normalizeStatusKey(status: string): string {
+  return status.replace(/_/g, '-');
+}
+
 export function StatusBadge({ status }: { status: string }) {
-  const label = STATUS_LABELS[status] ?? status;
-  const colorClass = STATUS_COLORS[status] ?? 'bg-stone-100 text-stone-600';
+  const key = normalizeStatusKey(status);
+  const label = STATUS_LABELS[key] ?? status;
+  const colorClass = STATUS_COLORS[key] ?? 'bg-stone-100 text-stone-600';
  return (
    <span className={`px-2 py-0.5 rounded-full text-xs font-medium ${colorClass}`}>
      {label}
@@ -279,6 +335,19 @@ export function StatusBadge({ status }: { status: string }) {
  );
 }

+// Derives the badge state shown on an Upcoming/Past card from the appointment's
+// raw status plus its confirmationStatus (GRO-2319 item 2, CMPO-approved):
+//   - a synthetic waitlist entry (status `waitlisted`) always shows Waitlisted
+//   - an upcoming appointment the groomer has not yet confirmed
+//     (`confirmationStatus === 'pending'`) shows Pending — semantically honest
+//     and reduces anxiety-driven follow-up messages
+//   - otherwise the raw status drives the badge
+export function deriveDisplayStatus(appt: Appointment): string {
+  if (appt.status === 'waitlisted') return 'waitlisted';
+  if (isUpcoming(appt) && appt.confirmationStatus === 'pending') return 'pending';
+  return appt.status;
+}
+
 const CONFIRMATION_STATUS_COLORS: Record<string, string> = {
  confirmed: 'bg-green-100 text-green-700',
  pending: 'bg-amber-100 text-amber-700',
@@ -462,11 +531,24 @@ function AppointmentCard({
  sessionId: string | null;
  onReschedule: (appt: Appointment) => void;
 }) {
+  // A waitlist-backed entry (GRO-2319 item 2, CMPO UX spec GRO-2328) is not a
+  // confirmed appointment: it gets a muted, dashed-border card and a subtext
+  // line so the customer can tell it apart from booked appointments, and the
+  // appointment-only actions (confirm / notes / reschedule / cancel) are hidden.
+  const isWaitlist = appt.status === 'waitlisted';
  return (
-    <div className="bg-white rounded-xl border border-stone-200 shadow-sm overflow-hidden">
+    <div
+      className={
+        isWaitlist
+          ? 'bg-stone-50/60 rounded-xl border border-dashed border-stone-300 shadow-sm overflow-hidden'
+          : 'bg-white rounded-xl border border-stone-200 shadow-sm overflow-hidden'
+      }
+    >
      <button
        onClick={onToggle}
-        className="w-full flex items-center gap-4 p-4 text-left hover:bg-stone-50"
+        className={`w-full flex items-center gap-4 p-4 text-left ${
+          isWaitlist ? 'hover:bg-stone-100/60' : 'hover:bg-stone-50'
+        }`}
      >
        <div className="w-10 h-10 rounded-lg bg-blue-100 flex items-center justify-center text-lg shrink-0">
          {appt.petName?.charAt(0) || 'P'}
@@ -486,8 +568,13 @@ function AppointmentCard({
            </span>
            <span>with {appt.groomerName || 'First Available'}</span>
          </div>
+          {isWaitlist && (
+            <p className="text-xs text-stone-400 mt-1">
+              You're on the waitlist — we'll let you know if a spot opens.
+            </p>
+          )}
        </div>
-        <StatusBadge status={appt.status} />
+        <StatusBadge status={deriveDisplayStatus(appt)} />
        {expanded ? (
          <ChevronDown size={16} className="text-stone-400" />
        ) : (
@@ -521,11 +608,14 @@ function AppointmentCard({
              {appt.notes}
            </p>
          )}
-          {isUpcoming(appt) && !readOnly && (
+          {!isWaitlist && isUpcoming(appt) && !readOnly && (
            <CustomerNotesSection appointment={appt} sessionId={sessionId} />
          )}
-          {isUpcoming(appt) && <ConfirmationSection appointment={appt} sessionId={sessionId} />}
-          {appt.status !== 'completed' &&
+          {!isWaitlist && isUpcoming(appt) && (
+            <ConfirmationSection appointment={appt} sessionId={sessionId} />
+          )}
+          {!isWaitlist &&
+            appt.status !== 'completed' &&
            appt.status !== 'cancelled' &&
            !readOnly && (
              <div className="flex gap-2 mt-3">
@@ -994,7 +1084,8 @@ export function BookingFlow({ onClose, sessionId }: BookingFlowProps) {

        if (servicesRes.ok) {
          const servicesData = await servicesRes.json();
-          setServices(servicesData.services || servicesData || []);
+          const rawServices: RawApiService[] = servicesData.services || servicesData || [];
+          setServices(rawServices.map(normalizeService));
        }
      } catch {
        setError('Failed to load data. Please try again.');
@@ -1190,10 +1281,14 @@ export function BookingFlow({ onClose, sessionId }: BookingFlowProps) {
                          )}
                        </div>
                        <div className="text-right shrink-0 ml-3">
-                          <p className="text-sm font-medium text-stone-700">
-                            {svc.priceRange || `$${svc.price}`}
-                          </p>
-                          <p className="text-xs text-stone-400">{svc.duration} min</p>
+                          {formatServicePrice(svc) && (
+                            <p className="text-sm font-medium text-stone-700">
+                              {formatServicePrice(svc)}
+                            </p>
+                          )}
+                          {typeof svc.duration === 'number' && (
+                            <p className="text-xs text-stone-400">{svc.duration} min</p>
+                          )}
                        </div>
                      </button>
                    ))}
@@ -1226,9 +1321,11 @@ export function BookingFlow({ onClose, sessionId }: BookingFlowProps) {
                                <p className="text-xs text-stone-500">{svc.description}</p>
                              )}
                            </div>
-                            <span className="text-stone-600 shrink-0 ml-3">
-                              {svc.priceRange || `$${svc.price}`}
-                            </span>
+                            {formatServicePrice(svc) && (
+                              <span className="text-stone-600 shrink-0 ml-3">
+                                {formatServicePrice(svc)}
+                              </span>
+                            )}
                          </button>
                        ))}
                      </div>
@@ -57,6 +57,23 @@ export default defineConfig({
              },
            },
          },
+          {
+            // OpenStreetMap raster tiles for the Route Planner map. CacheFirst so
+            // tiles pre-warmed for a route render offline during the day. Capped
+            // entries + 7-day TTL keep the cache bounded.
+            urlPattern: /^https:\/\/[abc]\.tile\.openstreetmap\.org\/.*\.png$/i,
+            handler: "CacheFirst",
+            options: {
+              cacheName: "osm-tiles",
+              expiration: {
+                maxEntries: 400,
+                maxAgeSeconds: 60 * 60 * 24 * 7, // 7 days
+              },
+              cacheableResponse: {
+                statuses: [0, 200],
+              },
+            },
+          },
        ],
      },
    }),
Author	SHA1	Message	Date
Flea Flicker	3bfcf0b970	feat(GRO-2319): dev→uat — live StatusBadge palette (web) (#70 ) CI / Test (pull_request) Successful in 24s Details CI / Lint & Typecheck (pull_request) Successful in 31s Details CI / Build & Push Docker Image (pull_request) Successful in 11s Details	2026-06-10 08:29:49 +00:00
Scrubs McBarkley	7ef270312c	Merge pull request 'Promote uat → main (PROD): GRO-2160 route nav export + offline polish' (#68 ) from flea/uat-to-main-gro-2160 into main CI / Test (push) Successful in 19s Details CI / Lint & Typecheck (push) Successful in 27s Details CI / Build & Push Docker Image (push) Successful in 15s Details	2026-06-09 05:27:25 +00:00
Flea Flicker	f58a0e569b	Promote dev → uat: GRO-2160 route nav export + offline polish (#67 ) CI / Test (push) Successful in 20s Details CI / Lint & Typecheck (push) Successful in 26s Details CI / Build & Push Docker Image (push) Successful in 10s Details CI / Test (pull_request) Successful in 21s Details CI / Lint & Typecheck (pull_request) Successful in 28s Details CI / Build & Push Docker Image (pull_request) Successful in 14s Details	2026-06-09 04:40:32 +00:00
Scrubs McBarkley	2a401a4584	Merge pull request 'Promote uat → main (PROD): GRO-2159 drag-to-reorder + re-optimize + GRO-2236 price/duration display fix' CI / Test (push) Successful in 18s Details CI / Lint & Typecheck (push) Successful in 25s Details CI / Build & Push Docker Image (push) Successful in 12s Details CEO prod merge. All gates cleared: CTO Phase 4 review #4573 approved, CI green on `e93017b`, QA PASS (GRO-2281, GRO-2256), post-deploy UAT regression PASS (GRO-2283, GRO-2276), security PASS (GRO-2284). Merging GRO-2159 + GRO-2236 to main.	2026-06-09 04:00:43 +00:00
Flea Flicker	e93017b279	Promote dev → uat: GRO-2159 drag-to-reorder + re-optimize (#64 ) CI / Test (push) Successful in 35s Details CI / Lint & Typecheck (push) Successful in 44s Details CI / Build & Push Docker Image (push) Successful in 11s Details CI / Test (pull_request) Successful in 21s Details CI / Lint & Typecheck (pull_request) Successful in 27s Details CI / Build & Push Docker Image (pull_request) Successful in 12s Details	2026-06-09 03:10:17 +00:00
Scrubs McBarkley	27c59113e2	Merge pull request 'Promote uat → main (PROD): GRO-2158 route planner page' (#62 ) from flea/uat-to-main-gro-2158 into main CI / Test (push) Successful in 22s Details CI / Lint & Typecheck (push) Successful in 27s Details CI / Build & Push Docker Image (push) Failing after 9s Details Promote uat → main (PROD): GRO-2158 route planner page Merged by CEO (gb_scrubs) — board-gated prod merge. Validated SHA: `980615b` (GRO-2272/2273/2274 all PASS). CTO review: APPROVED (review #4567 by gb_dogfather). Co-Authored-By: Paperclip <noreply@paperclip.ing>	2026-06-09 02:37:35 +00:00
Flea Flicker	db11e5f2bd	Merge pull request 'Promote dev → uat: GRO-2236 portal Book New service cards price + duration' (#58 ) from flea/dev-to-uat-gro-2236 into uat CI / Test (push) Successful in 24s Details CI / Lint & Typecheck (push) Successful in 30s Details CI / Build & Push Docker Image (push) Successful in 48s Details	2026-06-09 02:13:08 +00:00
Flea Flicker	980615b8e6	Promote dev → uat: GRO-2158 route planner page (#61 ) CI / Test (push) Successful in 18s Details CI / Lint & Typecheck (push) Successful in 27s Details CI / Build & Push Docker Image (push) Successful in 14s Details CI / Test (pull_request) Successful in 20s Details CI / Lint & Typecheck (pull_request) Successful in 30s Details CI / Build & Push Docker Image (pull_request) Successful in 41s Details	2026-06-09 02:00:55 +00:00
Flea Flicker	95c688764b	Merge pull request 'uat→main (PROD): GRO-2234 portal Book New fix + validated batch' (#59 ) from flea/uat-to-main-gro-2234-web into main CI / Test (push) Successful in 21s Details CI / Lint & Typecheck (push) Successful in 27s Details CI / Build & Push Docker Image (push) Successful in 16s Details	2026-06-09 00:37:47 +00:00
The Dogfather	f549101962	fix(GRO-2236): portal Book New service cards show price + duration (#57 ) CI / Test (pull_request) Successful in 20s Details CI / Lint & Typecheck (pull_request) Successful in 28s Details CI / Build & Push Docker Image (pull_request) Successful in 14s Details Co-authored-by: The Dogfather <20+gb_dogfather@noreply.git.farh.net> Co-committed-by: The Dogfather <20+gb_dogfather@noreply.git.farh.net>	2026-06-08 23:32:19 +00:00
Flea Flicker	5bb8fbcb7d	Merge pull request 'Promote uat → main (atomic): GRO-2105/2094/2099/2089/2180/2213 portal bundle' (#48 ) from uat into main CI / Test (push) Successful in 19s Details CI / Lint & Typecheck (push) Successful in 27s Details CI / Build & Push Docker Image (push) Successful in 40s Details	2026-06-08 19:29:49 +00:00
Scrubs McBarkley	fdff0977ad	Merge pull request 'Promote uat → main: GRO-2012 RescheduleFlow portalSessionId fallback' (#40 ) from uat into main CI / Test (push) Successful in 23s Details CI / Lint & Typecheck (push) Successful in 29s Details CI / Build & Push Docker Image (push) Successful in 16s Details Promote uat → main: GRO-2012 RescheduleFlow portalSessionId fallback Gate checks: - UAT: GRO-2023 done (CTO verified, `ec29f719`) - Security: GRO-2032 Barkley PASS - UAT_PLAYBOOK.md: TC-WEB-5.26 present Fix: CustomerPortal.tsx:329 sessionId={session?.id ?? portalSessionId} Fix commit: `f29f1828c8` Co-Authored-By: Paperclip <noreply@paperclip.ing>	2026-06-01 19:10:08 +00:00
Scrubs McBarkley	2aad7cb6a0	Merge pull request 'promote: uat → main (GRO-1757 SSO auto-provision fix)' (#21 ) from uat into main CI / Test (push) Successful in 13s Details CI / Lint & Typecheck (push) Successful in 21s Details CI / Build & Push Docker Image (push) Successful in 13s Details	2026-05-26 02:16:28 +00:00
Chris Farhood	0c41640f59	Add .mcp.json CI / Test (push) Successful in 20s Details CI / Lint & Typecheck (push) Successful in 27s Details CI / Build & Push Docker Image (push) Successful in 4m1s Details	2026-05-24 18:15:24 +00:00