supersam/docs/superpowers/plans/2026-05-06-order-groups-mig...

4.1 KiB

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
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
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
git add src/layouts/AppShell.jsx src/layouts/AppShell.test.jsx
git commit -m "test: verify order_groups dashboard migration"