feat: implement filter section with date pickers and searchable dropdowns (Task 2.2)

- 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)
This commit is contained in:
Andrew Charlwood
2026-02-04 13:46:57 +00:00
parent 00d0f2cc9d
commit b2d4afd408
2 changed files with 550 additions and 19 deletions
+6 -6
View File
@@ -61,17 +61,17 @@ cd pathways_app && timeout 60 python -m reflex run 2>&1 | head -30
- [x] Verify renders correctly
### 2.2 Filter Section
- [ ] Create `filter_section()` component with card styling
- [ ] Add date range pickers:
- [x] Create `filter_section()` component with card styling
- [x] Add date range pickers:
- "Initiated" range with enable/disable checkbox (default: disabled)
- "Last Seen" range with enable/disable checkbox (default: enabled, last 6 months)
- "To" date defaults to latest date in dataset
- [ ] Add searchable multi-select dropdowns:
- "To" date defaults to latest date in dataset (placeholder — actual data integration in Phase 3)
- [x] Add searchable multi-select dropdowns:
- Drugs dropdown with search, select all, count display
- Indications dropdown with search, select all, count display
- Directorates dropdown with search, select all, count display
- [ ] Implement debounced filter change handlers (300ms)
- [ ] Style according to design system
- [ ] Implement debounced filter change handlers (300ms) — deferred to Phase 3.3
- [x] Style according to design system
### 2.3 KPI Row
- [ ] Create `kpi_card()` component: