admin
9e3cc99bed
- Core infrastructure: Zustand store, API client with mock fallback - Mode detection: Port 8080 (kiosk) / 9090 (remote) - Dashboard components: RainfallCard, ClockDisplay, CommStatus - Header components: VoltageDisplay, BatteryStatus, LoginIndicator - Data polling with visibility awareness - Bundle size: ~100KB gzipped Also adds README.md and WIKI.md documentation
2.1 KiB
2.1 KiB
Plan 03 Summary - Dashboard View
Plan: 03
Phase: 01-foundation-dashboard
Completed: 2026-03-13
Tasks Completed
Task 1: RainfallCard Component
- Created
src/app/components/RainfallCard.tsx:- Props: label, value, variant (today/hourly/monthly/yearly)
- Color-coded: Today (blue), Hourly (cyan), MAR (green), Yearly (purple)
- Large value display with unit
- CloudRain icon from Lucide
Task 2: ClockDisplay Component
- Created
src/app/components/ClockDisplay.tsx:- Real-time clock (HH:MM:SS) updating every second
- Date display (YYYY-MM-DD)
- Proper cleanup on unmount
Task 3: CommStatus Component
- Created
src/app/components/CommStatus.tsx:- Props: asu, dBm, percentage
- Color-coded signal quality indicator
- Shows: good (green), fair (yellow), poor (red)
Task 4: RainfallView Dashboard
- Updated
src/app/components/views/RainfallView.tsx:- Uses sensor store for real-time data
- 4 rainfall cards in responsive grid
- ClockDisplay and CommStatus integrated
- Last update timestamp
Task 5: Dual-Mode Responsive Layout
- Implemented port-based mode detection
- Kiosk (1024x600): 2-column grid, compact padding
- Remote (Full HD): 4-column grid, more spacing
Files Created/Modified
| File | Status |
|---|---|
| src/app/components/RainfallCard.tsx | Created |
| src/app/components/ClockDisplay.tsx | Created |
| src/app/components/CommStatus.tsx | Created |
| src/app/components/views/RainfallView.tsx | Modified |
Component Usage
// RainfallCard
<RainfallCard label="Today" value={12.5} variant="today" />
// ClockDisplay
<ClockDisplay />
// CommStatus
<CommStatus asu={15} dBm={-75} percentage={50} />
// In RainfallView
<RainfallCard
label={item.label}
value={item.value}
variant={item.variant}
/>
Responsive Behavior
- Kiosk (port 8080): 2-column grid, smaller padding
- Remote (port 9090): 4-column grid, expanded layout
Notes
- Dashboard updates in real-time from sensor store
- All components connect to Zustand store
- Dual-mode display responds to port number
- Touch-friendly with adequate hit areas