- Add apply_filters() method that queries SQLite with current filter state
- Handle initiated date filter (first intervention date range)
- Handle last seen date filter (last intervention date range)
- Handle drug and directorate multi-select filters
- Use CTE pattern for efficient patient-level date filtering
- Update KPI values (unique_patients, total_drugs, total_cost) on filter change
- Call apply_filters() from all filter event handlers
- Call apply_filters() after initial data load
- Add load_data() method to AppState that connects to SQLite database
- Populate available_drugs, available_directorates, available_indications from DB
- Detect latest date in dataset and set filter defaults accordingly
- Load KPI values: total_records, unique_patients, total_drugs, total_cost
- Add on_load handler to trigger data loading on page initialization
- Handle database errors gracefully with meaningful error messages
- Add datetime imports for date handling
- Add data state variables: last_updated, raw_data, latest_date_in_data
- Set last_seen date defaults (6 months ago to today)
- Add last_updated_display computed var for top bar
- Update top bar to show dynamic refresh timestamp
- Add chart_loading_skeleton() with animated bar chart and spinner
- Add chart_error_state() for displaying errors with guidance
- Add chart_empty_state() for when filters yield no results
- Add chart_ready_placeholder() for Phase 4 Plotly integration
- Rewrite chart_section() with 4-state rx.cond() logic
- Fix icon names (triangle-alert) and color references (SLATE_500)
This completes Phase 2 Layout Components.
- Create kpi_card() component with icon, value, label, and highlight option
- Create kpi_row() with 4 KPI cards: Unique Patients, Drug Types, Total Cost, Indication Match
- Add computed vars for formatted KPI display values
- Add placeholder KPI state variables (unique_patients, total_drugs, total_cost, indication_match_rate)
- Use design system tokens for styling with hover effects
- Responsive flex-wrap layout for smaller screens
- Add date_range_picker() component with enable/disable checkbox
- Add searchable_dropdown() component with search, select all, clear
- Implement filter_section() with layout for dates and multi-selects
- Add comprehensive state management in AppState:
- Filter toggle states (initiated_filter_enabled, last_seen_filter_enabled)
- Date values for both ranges
- Dropdown visibility state
- Selection state for drugs, indications, directorates
- Search text state for filtering options
- Event handlers for all filter interactions
- Computed vars for filtered options and selection counts
- Style components using design tokens from styles.py
- Debounced handlers deferred to Phase 3.3 (Filter Logic)
- Add chart_tab() component for chart type pills
- Implement full top_bar() with logo, title, chart tabs, data freshness
- Heritage Blue background with white text, 64px fixed height
- Reactive data freshness indicator using rx.cond for loading states
- Added Transitions import to styles
- Add app_v2.py with basic Reflex app structure
- AppState class with placeholder state variables
- Layout components: top_bar, filter_section, kpi_row, chart_section
- Page layout matching DESIGN_SYSTEM.md structure
- Theme configured with design system colors
- Google Fonts for Inter and JetBrains Mono
- Add Colors class with NHS-inspired blue palette and neutrals
- Add Typography class with font family, sizes, weights
- Add Spacing, Radii, Shadows, Transitions classes
- Add helper functions: card_style(), button_*_style(), input_style()
- Add KPI card and text style helpers
- Add layout constants (TOP_BAR_HEIGHT, PAGE_MAX_WIDTH)
All tokens match DESIGN_SYSTEM.md specifications.
Andrew Charlwood