Flow Meter Sidebar Redesign

Date: 2025-01-15 Prototype: prototype/flow_meter_sidebar.htmlTarget File: src/app/(admin)/(pages)/flow-meter/index.tsx

Overview

Refactor the Flow Meter page sidebar to match the prototype design while preserving all existing functionality.

Design Decisions

1. Keep all existing features - Mine Site selector, Date Range selector, Refresh Data, Export, Refills, Manage Sites, Calibration Reminder
2. Adopt prototype visual style - Rounded cards, icons, improved spacing
3. Rewrite Date Range selector - Preset dropdown + always-visible date inputs (not just for Custom Range)
4. Button layout - Refresh Data full-width primary, others in 2-column grid

Sidebar Structure

┌─────────────────────────────────┐
│  Mine Site              Manage  │  ← Icon label + link
│  ┌─────────────────────────┐   │
│  │ [Site Dropdown]      ▼  │   │
│  └─────────────────────────┘   │
├─────────────────────────────────┤
│  📅 Date Range                  │
│  ┌─────────────────────────┐   │
│  │ [Preset Dropdown]    ▼  │   │
│  └─────────────────────────┘   │
│  ┌───────────┐ ┌───────────┐   │
│  │Start Date │ │ End Date  │   │
│  └───────────┘ └───────────┘   │
├─────────────────────────────────┤
│  ┌─────────────────────────┐   │
│  │   🔄 Refresh Data       │   │  ← Primary button (blue)
│  └─────────────────────────┘   │
│  ┌───────────┐ ┌───────────┐   │
│  │ 📥 Export │ │ 📦 Refills│   │  ← Secondary buttons
│  └───────────┘ └───────────┘   │
│  ┌───────────┐ ┌───────────┐   │
│  │ ⚙️ Sites  │ │ 🧭 Calib. │   │  ← Secondary buttons
│  └───────────┘ └───────────┘   │
└─────────────────────────────────┘

Date Range Presets (Preserved)

Value	Label
all_time	All Time
today	Today
yesterday	Yesterday
this_week	This Week
last_week	Last Week
this_month	This Month
last_month	Last Month
this_quarter	This Quarter
last_quarter	Last Quarter
this_year	This Year
last_year	Last Year
last_7_days	Last 7 Days
last_14_days	Last 14 Days
last_30_days	Last 30 Days
last_60_days	Last 60 Days
last_90_days	Last 90 Days
custom	Custom Range

Interaction Logic

Date Range

• Selecting a preset auto-updates Start/End date inputs
• Manually editing date inputs switches preset to "Custom Range"
• Date format: DD/MM/YYYY (Australian format)
• Persists to localStorage (existing behavior)

Buttons

• Refresh Data - Opens scraper config modal (existing)
• Export - Exports report for selected site (existing)
• Refills - Links to /refill-management (existing)
• Manage Sites - Opens site visibility manager modal (existing)
• Calibration - Links to /calibration-reminders (existing)

Visual Style (from prototype)

• Container: w-[340px] rounded-2xl with shadow
• Section padding: p-6
• Labels: text-sm font-semibold text-gray-900 with icons
• Inputs: bg-gray-50 or bg-white with border-gray-200, rounded-lg
• Primary button: bg-blue-600 with shadow
• Secondary buttons: bg-white border border-gray-200

Implementation Notes

1. Create new FlowMeterSidebar component in src/features/flow-meter/components/
2. Inline the date range logic (don't use existing DateRangeSelector component)
3. Preserve all localStorage keys for backward compatibility
4. Support dark mode (existing theme system)