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.jsif 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.jsxif counts or labels need adjustment -
Modify:
src/layouts/AppShell.test.jsxif 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"