docs(03-02): complete setup frontend plan
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
130
.planning/phases/03-setups-and-dashboard/03-02-SUMMARY.md
Normal file
130
.planning/phases/03-setups-and-dashboard/03-02-SUMMARY.md
Normal file
@@ -0,0 +1,130 @@
|
||||
---
|
||||
phase: 03-setups-and-dashboard
|
||||
plan: 02
|
||||
subsystem: ui
|
||||
tags: [tanstack-router, react, zustand, tanstack-query, slide-out-panel]
|
||||
|
||||
requires:
|
||||
- phase: 03-setups-and-dashboard
|
||||
provides: Setup CRUD API at /api/setups, junction table setup_items
|
||||
- phase: 01-collection-core
|
||||
provides: ItemCard, CategoryHeader, TotalsBar, SlideOutPanel, formatters
|
||||
- phase: 02-planning-threads
|
||||
provides: ThreadCard, ThreadTabs, useThreads hooks
|
||||
provides:
|
||||
- Dashboard page at / with three summary cards (Collection, Planning, Setups)
|
||||
- Collection page at /collection with gear/planning tabs (moved from /)
|
||||
- Setups list page at /setups with inline create form
|
||||
- Setup detail page at /setups/:id with item picker and category-grouped items
|
||||
- ItemPicker component for checklist-based item assignment
|
||||
- Route-aware TotalsBar with optional stats/linkTo/title props
|
||||
- Setup query/mutation hooks (useSetups, useSetup, useCreateSetup, etc.)
|
||||
affects: [03-03-visual-verification]
|
||||
|
||||
tech-stack:
|
||||
added: []
|
||||
patterns: [route-aware-totals-bar, checklist-picker-in-slide-panel, dashboard-card-grid]
|
||||
|
||||
key-files:
|
||||
created:
|
||||
- src/client/routes/collection/index.tsx
|
||||
- src/client/routes/setups/index.tsx
|
||||
- src/client/routes/setups/$setupId.tsx
|
||||
- src/client/components/DashboardCard.tsx
|
||||
- src/client/components/SetupCard.tsx
|
||||
- src/client/components/ItemPicker.tsx
|
||||
- src/client/hooks/useSetups.ts
|
||||
modified:
|
||||
- src/client/routes/index.tsx
|
||||
- src/client/routes/__root.tsx
|
||||
- src/client/components/TotalsBar.tsx
|
||||
- src/client/components/ItemCard.tsx
|
||||
- src/client/hooks/useItems.ts
|
||||
- src/client/stores/uiStore.ts
|
||||
- src/client/routeTree.gen.ts
|
||||
|
||||
key-decisions:
|
||||
- "TotalsBar refactored to accept optional props instead of creating separate components per page"
|
||||
- "Setup detail computes totals client-side from items array rather than separate API call"
|
||||
- "ItemPicker uses local state for selections, syncs on Done button press"
|
||||
- "FAB only visible on /collection gear tab, hidden on dashboard and setups"
|
||||
|
||||
patterns-established:
|
||||
- "Route-aware TotalsBar: optional stats/linkTo/title props with backward-compatible default"
|
||||
- "Checklist picker pattern: SlideOutPanel with category-grouped checkboxes and Done/Cancel"
|
||||
- "Dashboard card pattern: DashboardCard with icon, stats, and optional empty text"
|
||||
|
||||
requirements-completed: [SETP-01, SETP-02, SETP-03, DASH-01]
|
||||
|
||||
duration: 5min
|
||||
completed: 2026-03-15
|
||||
---
|
||||
|
||||
# Phase 3 Plan 2: Setup Frontend Summary
|
||||
|
||||
**Dashboard with summary cards, setup CRUD UI with category-grouped item picker, and route-aware TotalsBar**
|
||||
|
||||
## Performance
|
||||
|
||||
- **Duration:** 5 min
|
||||
- **Started:** 2026-03-15T11:45:33Z
|
||||
- **Completed:** 2026-03-15T11:50:33Z
|
||||
- **Tasks:** 2
|
||||
- **Files modified:** 14
|
||||
|
||||
## Accomplishments
|
||||
- Dashboard at / with three summary cards linking to Collection, Planning, and Setups
|
||||
- Full setup CRUD UI: list page with inline create, detail page with item management
|
||||
- ItemPicker component in SlideOutPanel for checklist-based item assignment to setups
|
||||
- Route-aware TotalsBar that shows contextual stats per page
|
||||
- Navigation restructure moving collection to /collection with GearBox title linking home
|
||||
|
||||
## Task Commits
|
||||
|
||||
Each task was committed atomically:
|
||||
|
||||
1. **Task 1: Navigation restructure, TotalsBar refactor, and setup hooks** - `86a7a0d` (feat)
|
||||
2. **Task 2: Setup list page, detail page, and item picker** - `6709955` (feat)
|
||||
|
||||
## Files Created/Modified
|
||||
- `src/client/routes/index.tsx` - Dashboard page with three DashboardCard components
|
||||
- `src/client/routes/collection/index.tsx` - Collection page with gear/planning tabs (moved from /)
|
||||
- `src/client/routes/setups/index.tsx` - Setup list page with inline create form and SetupCard grid
|
||||
- `src/client/routes/setups/$setupId.tsx` - Setup detail with category-grouped items, totals bar, item picker, delete
|
||||
- `src/client/routes/__root.tsx` - Route-aware TotalsBar props, FAB visibility, resolve navigation update
|
||||
- `src/client/components/TotalsBar.tsx` - Refactored to accept optional stats/linkTo/title props
|
||||
- `src/client/components/DashboardCard.tsx` - Dashboard summary card with icon, stats, empty text
|
||||
- `src/client/components/SetupCard.tsx` - Setup list card with name, item count, weight, cost
|
||||
- `src/client/components/ItemPicker.tsx` - Checklist picker in SlideOutPanel for item selection
|
||||
- `src/client/components/ItemCard.tsx` - Added optional onRemove prop for setup item removal
|
||||
- `src/client/hooks/useSetups.ts` - TanStack Query hooks for setup CRUD and item sync/remove
|
||||
- `src/client/hooks/useItems.ts` - Added setups invalidation on item update/delete
|
||||
- `src/client/stores/uiStore.ts` - Added itemPicker and confirmDeleteSetup UI state
|
||||
- `src/client/routeTree.gen.ts` - Updated with new collection/setups routes
|
||||
|
||||
## Decisions Made
|
||||
- TotalsBar refactored with optional props rather than creating separate components per page
|
||||
- Setup detail computes totals client-side from items array (avoids extra API call)
|
||||
- ItemPicker tracks selections locally, syncs batch on Done (not per-toggle)
|
||||
- FAB restricted to /collection gear tab only (hidden on dashboard and setups)
|
||||
|
||||
## Deviations from Plan
|
||||
|
||||
None - plan executed exactly as written.
|
||||
|
||||
## Issues Encountered
|
||||
|
||||
None
|
||||
|
||||
## User Setup Required
|
||||
|
||||
None - no external service configuration required.
|
||||
|
||||
## Next Phase Readiness
|
||||
- All frontend features complete, ready for visual verification in Plan 03
|
||||
- All 87 backend tests still passing
|
||||
- TypeScript compiles clean (only pre-existing warnings in CategoryPicker/OnboardingWizard)
|
||||
|
||||
---
|
||||
*Phase: 03-setups-and-dashboard*
|
||||
*Completed: 2026-03-15*
|
||||
Reference in New Issue
Block a user