# order_groups Migration Implementation Plan

> **For agentic workers:** REQUIRED: Use superpowers:subagent-driven-development (if subagents available) or superpowers:executing-plans to implement this plan. Steps use checkbox (`- [ ]`) syntax for tracking.

**Goal:** Move the dashboard UI from legacy `orders` records to `order_groups` so all roles work from the grouped delivery table.

**Architecture:** Introduce a dedicated `order_groups` repository and normalize each row into a delivery-group view model. Update the dashboard, list panels, and detail panels to render that model directly, removing assumptions about order-level fields like address, items, history, and delivery slots that no longer exist.

**Tech Stack:** React, Vite, Supabase JS, Vitest, Tailwind CSS.

---

## Chunk 1: Data access and demo fallback

**Files:**
- Create: `src/services/supabase/orderGroupRepository.js`
- Modify: `src/hooks/useOrders.js`
- Modify: `src/data/mockAppData.js`
- Modify: `src/services/deliverySetViews.js`
- Test: `src/services/supabase/orderGroupRepository.test.js` if needed

- [ ] **Step 1: Write the failing test**

Cover the `order_groups` row mapper and a few derived view fields, including customer identity, group counts, and status.

- [ ] **Step 2: Run test to verify it fails**

Run: `npm test -- --run src/services/supabase/orderGroupRepository.test.js`

- [ ] **Step 3: Write minimal implementation**

Add `fetchOrderGroups`, `mapOrderGroupRowToGroup`, and a demo fallback array shaped like the new table.

- [ ] **Step 4: Run test to verify it passes**

Run: `npm test -- --run src/services/supabase/orderGroupRepository.test.js`

- [ ] **Step 5: Commit**

```bash
git add src/services/supabase/orderGroupRepository.js src/hooks/useOrders.js src/data/mockAppData.js src/services/deliverySetViews.js src/services/supabase/orderGroupRepository.test.js
git commit -m "feat: load dashboard from order_groups"
```

## Chunk 2: Dashboard surfaces

**Files:**
- Modify: `src/pages/DashboardPage.jsx`
- Modify: `src/components/orders/OrdersTable.jsx`
- Modify: `src/components/orders/OrderDetailPanel.jsx`
- Modify: `src/components/driver/DriverDeliveryPlanner.jsx`
- Modify: `src/components/logistics/LogisticsReadinessBoard.jsx`
- Modify: `src/components/logistics/DeliverySetDetailPanel.jsx`
- Modify: `src/components/orders/OrderFilters.jsx`

- [ ] **Step 1: Write the failing test**

Update component tests to expect group labels, counts, and `order_numbers`-based summaries instead of order-level fields.

- [ ] **Step 2: Run test to verify it fails**

Run: `npm test -- --run src/components/orders/OrdersTable.test.jsx src/components/driver/DriverDeliveryPlanner.test.jsx src/components/logistics/DeliverySetDetailPanel.test.jsx`

- [ ] **Step 3: Write minimal implementation**

Replace order-specific text and bindings with group-based fields and simplify unsupported actions.

- [ ] **Step 4: Run test to verify it passes**

Run: `npm test -- --run src/components/orders/OrdersTable.test.jsx src/components/driver/DriverDeliveryPlanner.test.jsx src/components/logistics/DeliverySetDetailPanel.test.jsx`

- [ ] **Step 5: Commit**

```bash
git add src/pages/DashboardPage.jsx src/components/orders/OrdersTable.jsx src/components/orders/OrderDetailPanel.jsx src/components/driver/DriverDeliveryPlanner.jsx src/components/logistics/LogisticsReadinessBoard.jsx src/components/logistics/DeliverySetDetailPanel.jsx src/components/orders/OrderFilters.jsx
git commit -m "feat: render order groups in dashboard"
```

## Chunk 3: Verification

**Files:**
- Modify: `src/layouts/AppShell.jsx` if counts or labels need adjustment
- Modify: `src/layouts/AppShell.test.jsx` if badge labels change

- [ ] **Step 1: Run the full test suite**

Run: `npm test`

- [ ] **Step 2: Build the app**

Run: `npm run build`

- [ ] **Step 3: Check the UI in the browser**

Open `http://localhost:5174/dashboard` and confirm the grouped delivery list, detail modal, and driver view all render from `order_groups`.

- [ ] **Step 4: Commit**

```bash
git add src/layouts/AppShell.jsx src/layouts/AppShell.test.jsx
git commit -m "test: verify order_groups dashboard migration"
```