127 lines
5.5 KiB
Markdown
127 lines
5.5 KiB
Markdown
---
|
|
phase: 14-site-dashboard-sector-views-wireless-ui
|
|
plan: 03
|
|
subsystem: ui
|
|
tags: [react, tanstack-query, tailwind, site-dashboard, sectors, wireless]
|
|
|
|
requires:
|
|
- phase: 14-site-dashboard-sector-views-wireless-ui
|
|
provides: sectorsApi, wirelessApi, devicesApi with site_id filter, WirelessLinksTable with siteId prop, signalColor helper
|
|
provides:
|
|
- Tabbed site dashboard with Health Grid, Sectors, and Links views
|
|
- SiteHealthGrid component with device status cards, CPU/memory bars, uptime
|
|
- SiteSectorView with collapsible sector sections, AP cards, CPE lists, aggregate stats, sector assignment
|
|
- SectorFormDialog for create/edit sectors
|
|
- SiteLinksTab wrapping WirelessLinksTable with site filtering
|
|
affects: [site-management, fleet-views]
|
|
|
|
tech-stack:
|
|
added: []
|
|
patterns:
|
|
- useState-based tab switching consistent with device detail page pattern
|
|
- Fleet summary data merged with device list for CPU/memory metrics on health grid
|
|
- Collapsible sector sections with inline aggregate stats (client count, avg signal, link count)
|
|
|
|
key-files:
|
|
created:
|
|
- frontend/src/components/sites/SiteHealthGrid.tsx
|
|
- frontend/src/components/sites/SiteSectorView.tsx
|
|
- frontend/src/components/sites/SectorFormDialog.tsx
|
|
- frontend/src/components/sites/SiteLinksTab.tsx
|
|
modified:
|
|
- frontend/src/routes/_authenticated/tenants/$tenantId/sites/$siteId.tsx
|
|
- frontend/src/lib/api.ts
|
|
|
|
key-decisions:
|
|
- "Used fleet summary API for CPU/memory data since devicesApi.list does not return health metrics"
|
|
- "Sector assignment dropdown uses sentinel value '__unassigned__' since Radix Select requires string values"
|
|
|
|
patterns-established:
|
|
- "Site dashboard tab pattern: useState with conditional rendering (health/sectors/links)"
|
|
- "Sector section pattern: collapsible cards with inline aggregate wireless stats"
|
|
|
|
requirements-completed: [DASH-02, DASH-03, DASH-04, SECT-03]
|
|
|
|
duration: 3min
|
|
completed: 2026-03-19
|
|
---
|
|
|
|
# Phase 14 Plan 03: Site Dashboard Integration Summary
|
|
|
|
**Tabbed site dashboard with device health grid, sector-organized AP/CPE view with aggregate wireless stats, and site-filtered wireless links**
|
|
|
|
## Performance
|
|
|
|
- **Duration:** 3 min
|
|
- **Started:** 2026-03-19T11:50:42Z
|
|
- **Completed:** 2026-03-19T11:54:14Z
|
|
- **Tasks:** 2
|
|
- **Files modified:** 6
|
|
|
|
## Accomplishments
|
|
- Site detail page upgraded from placeholder to full tabbed dashboard with three views
|
|
- Health Grid shows per-device cards with status dots, CPU/memory progress bars, and uptime
|
|
- Sector View groups APs by sector with collapsible sections, connected CPE lists, aggregate stats, and sector assignment dropdown
|
|
- Operators can create, edit, and delete sectors; reassign devices between sectors
|
|
|
|
## Task Commits
|
|
|
|
Each task was committed atomically:
|
|
|
|
1. **Task 1: Create SiteHealthGrid, SectorFormDialog, SiteSectorView, and SiteLinksTab components** - `d89233b` (feat)
|
|
2. **Task 2: Replace site detail page placeholder with tabbed dashboard** - `a9db9e4` (feat)
|
|
|
|
## Files Created/Modified
|
|
- `frontend/src/components/sites/SiteHealthGrid.tsx` - Device health grid with status, CPU/memory bars, uptime
|
|
- `frontend/src/components/sites/SiteSectorView.tsx` - Sector-organized view with AP cards, CPE lists, aggregate stats
|
|
- `frontend/src/components/sites/SectorFormDialog.tsx` - Sector create/edit dialog following SiteFormDialog pattern
|
|
- `frontend/src/components/sites/SiteLinksTab.tsx` - Wrapper for WirelessLinksTable with siteId filtering
|
|
- `frontend/src/routes/_authenticated/tenants/$tenantId/sites/$siteId.tsx` - Tabbed dashboard replacing placeholder
|
|
- `frontend/src/lib/api.ts` - Added sector_id/sector_name to DeviceResponse, site_id/sector_id to DeviceListParams
|
|
|
|
## Decisions Made
|
|
- Used fleet summary API for CPU/memory data since devicesApi.list does not return health metrics
|
|
- Sector assignment dropdown uses sentinel value '__unassigned__' since Radix Select requires string values
|
|
|
|
## Deviations from Plan
|
|
|
|
### Auto-fixed Issues
|
|
|
|
**1. [Rule 3 - Blocking] Added sector_id and sector_name to DeviceResponse type**
|
|
- **Found during:** Task 1 (SiteSectorView needs sector_id to group devices)
|
|
- **Issue:** Backend returns sector_id and sector_name on devices but frontend TypeScript type was missing them
|
|
- **Fix:** Added sector_id and sector_name to DeviceResponse interface
|
|
- **Files modified:** frontend/src/lib/api.ts
|
|
- **Verification:** TypeScript type matches backend schema
|
|
- **Committed in:** d89233b (Task 1 commit)
|
|
|
|
**2. [Rule 3 - Blocking] Added site_id and sector_id to DeviceListParams**
|
|
- **Found during:** Task 1 (SiteHealthGrid needs to filter devices by site)
|
|
- **Issue:** DeviceListParams missing site_id/sector_id even though backend accepts them
|
|
- **Fix:** Added site_id and sector_id to DeviceListParams interface
|
|
- **Files modified:** frontend/src/lib/api.ts
|
|
- **Verification:** devicesApi.list now accepts site_id filter parameter
|
|
- **Committed in:** d89233b (Task 1 commit)
|
|
|
|
---
|
|
|
|
**Total deviations:** 2 auto-fixed (2 blocking)
|
|
**Impact on plan:** Both fixes necessary for type correctness. Plan 01 added these backend fields but the frontend types were not updated to match.
|
|
|
|
## Issues Encountered
|
|
None
|
|
|
|
## User Setup Required
|
|
None - no external service configuration required.
|
|
|
|
## Next Phase Readiness
|
|
- Phase 14 complete: all three plans delivered
|
|
- Site dashboard fully functional with health grid, sector management, and wireless links
|
|
- Foundation ready for future enhancements (real-time updates, alert integration)
|
|
|
|
---
|
|
*Phase: 14-site-dashboard-sector-views-wireless-ui*
|
|
*Completed: 2026-03-19*
|
|
|
|
## Self-Check: PASSED
|