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
1.9 KiB
1.9 KiB
Plan 02 Summary - Header & Voltage Components
Plan: 02
Phase: 01-foundation-dashboard
Completed: 2026-03-13
Tasks Completed
Task 1: VoltageDisplay Component
- Created
src/app/components/VoltageDisplay.tsx:- Props: label, voltage, className
- Displays voltage with one decimal place
- Uses Zap icon from Lucide
- Min-height 44px for touch targets
Task 2: BatteryStatus Component
- Created
src/app/components/BatteryStatus.tsx:- Props: voltage, threshold (default 12.0V), className
- Shows color-coded status badge (HIGH/LOW)
- Green for >= 12V, Red for < 12V
- Touch-friendly (44px min)
Task 3: Modernize Header Component
- Updated
src/app/components/Header.tsx:- Imports and uses sensor store
- Shows: logo, station ID, version, time, date
- Shows: solar voltage, battery voltage with status
- Shows: communication status (ASU/dBm/percentage)
- Shows: login status
- Clock updates every second with cleanup
Task 4: Touch Target Verification
- All interactive elements have min-height 44px
- Verified in VoltageDisplay, BatteryStatus, Header
Task 5: DashboardLayout Integration
- DashboardLayout already uses Header component
- Layout works correctly with sidebar
Files Created/Modified
| File | Status |
|---|---|
| src/app/components/VoltageDisplay.tsx | Created |
| src/app/components/BatteryStatus.tsx | Created |
| src/app/components/Header.tsx | Modified |
Component Usage
// VoltageDisplay
<VoltageDisplay label="Solar" voltage={12.5} />
// BatteryStatus
<BatteryStatus voltage={12.5} threshold={12.0} />
// In Header
<VoltageDisplay label="Solar" voltage={data.voltage.solar} />
<BatteryStatus voltage={data.voltage.battery} />
Notes
- Components use Tailwind CSS classes
- Icons from Lucide React
- Touch targets meet 44px minimum requirement
- Status colors follow design guidelines (green/yellow/red)