{{ site.title }}

{{ theme.darkModeSwitchLabel || 'Appearance' }}

Flow Meter Page Sidebar Refactor Design ​

Overview ​

Refactor the Flow Meter page to use a sidebar layout similar to the Heat Map page. The sidebar will contain filters and action buttons, while the main content area displays site cards, charts, and tables.

Layout Structure ​

┌─────────────────────────────────────────────────────────────┐
│ PageBreadcrumb: "Flow Meter"                                │
├──────────────────┬──────────────────────────────────────────┤
│                  │                                          │
│   LEFT SIDEBAR   │         MAIN CONTENT AREA                │
│   (lg:w-96)      │         (flex-1)                         │
│                  │                                          │
│ Flow Meter       │  ┌─ Sites Header + Sort dropdown ──────┐ │
│ Controls         │  └─────────────────────────────────────┘ │
│                  │  ┌─ Site Cards Grid (3 cols max) ─────┐ │
│ ┌─ Filters ────┐ │  │  [Card] [Card] [Card]              │ │
│ │ Mine Site    │ │  │  [Card] [Card] ...                 │ │
│ │ Date Range   │ │  └─────────────────────────────────────┘ │
│ └──────────────┘ │                                          │
│                  │  ┌─ Tank Levels ──────────────────────┐ │
│ ┌─ Actions ────┐ │  └─────────────────────────────────────┘ │
│ │ Manage Sites │ │                                          │
│ │ Refresh Data │ │  ┌─ Charts & Tables ──────────────────┐ │
│ │ Manage Refill│ │  │  (for selected site)               │ │
│ │ Calibration  │ │  └─────────────────────────────────────┘ │
│ │ Export Report│ │                                          │
│ └──────────────┘ │                                          │
└──────────────────┴──────────────────────────────────────────┘
  • Title: "Flow Meter Controls"
  • Icon: solar:drop-bold-duotone (water drop)
  • Subtitle: "Adjust filters and actions"

Filters Section ​

Grouped in a bordered container with header "Data Filters":

  1. Mine Site Selector

    • Icon: solar:buildings-2-bold-duotone
    • Dropdown showing flow_meter_enabled sites
    • Shows currently selected site name below

  2. Date Range Selector

    • Icon: solar:calendar-bold-duotone
    • Preset dropdown (Today, Last 7 Days, Last 30 Days, etc.)
    • Start/End date inputs
    • Display current range as text below

Actions Section ​

Grouped in a bordered container with header "Actions":

  1. Manage Sites - Opens SiteVisibilityManager modal

    • Icon: solar:settings-bold-duotone
    • Style: Secondary button (border, not filled)

  2. Refresh Data - Opens ScraperConfigModal

    • Icon: solar:refresh-bold-duotone
    • Style: Primary button (blue filled)
    • Shows loading spinner when refreshing

  3. Manage Refills - Link to /refill-management

    • Icon: solar:settings-bold-duotone
    • Style: Green button

  4. Calibration Reminder - Link to /calibration-reminders

    • Icon: solar:compass-bold-duotone
    • Style: Amber button

  5. Export Report - Triggers chart export

    • Icon: solar:download-bold-duotone
    • Style: Primary button
    • Only enabled when a site with data is selected

Main Content Area ​

Sites Header Row ​

  • Left: "Sites" title (h2, text-xl font-semibold)
  • Right: Sort dropdown with options:
    • Name (A-Z)
    • Name (Z-A)
    • Usage (High to Low)
    • Usage (Low to High)
    • Events (Most to Least)
    • Events (Least to Most)

Site Cards Grid ​

  • Responsive columns:
    • xl: 3 columns (xl:grid-cols-3)
    • lg: 2 columns (lg:grid-cols-2)
    • md and below: 1 column
  • Uses existing SiteSummaryCard component
  • Click behavior unchanged (selects site)

Below Cards (unchanged) ​

  • Tank Level Display
  • Daily Usage Chart
  • Timeline Chart
  • Records Table with pagination
  • Usage Gap Analysis

Responsive Behavior ​

Desktop (lg breakpoint and above) ​

  • Sidebar: fixed width lg:w-96 (384px)
  • Main content: flex-1 fills remaining space
  • Both areas scroll independently
  • Layout: flex-row

Tablet/Mobile (below lg) ​

  • Sidebar: full width, stacked above content
  • Sidebar: max-h-[40vh] with overflow-y-auto
  • Main content: full width below
  • Layout: flex-col

Container ​

  • Overall height: h-[calc(100vh-180px)]
  • Minimum height: min-h-[600px]

Implementation Notes ​

Files to Modify ​

  • src/app/(admin)/(pages)/flow-meter/index.tsx - Main page refactor

Components to Reference ​

  • src/app/(admin)/(pages)/heatmap/index.tsx - Sidebar layout pattern
  • src/components/ui/DateRangeSelector.tsx - Date range component

Key Changes ​

  1. Wrap content in flex container
  2. Create sidebar div with controls
  3. Move DateRangeSelector to sidebar
  4. Move action buttons to sidebar
  5. Adjust site cards grid columns
  6. Keep Sort dropdown in main area

No Changes Required ​

  • SiteSummaryCard component
  • Chart components
  • Modal components
  • Data fetching logic
  • State management