feat: implement KPI row with reactive metrics (Task 2.3)

- 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
This commit is contained in:
Andrew Charlwood
2026-02-04 13:52:57 +00:00
parent 23335387b8
commit 2df3a0976b
2 changed files with 159 additions and 30 deletions
+5 -5
View File
@@ -74,14 +74,14 @@ cd pathways_app && timeout 60 python -m reflex run 2>&1 | head -30
- [x] Style according to design system
### 2.3 KPI Row
- [ ] Create `kpi_card()` component:
- [x] Create `kpi_card()` component:
- Large mono number (32-48px)
- Label below (caption style)
- Subtle background tint
- [ ] Create `kpi_row()` component with responsive grid
- [ ] Initially show: Unique Patients count
- [ ] Leave space for future metrics (Drugs count, Total cost, Match rate)
- [ ] KPIs should be reactive to filter state
- [x] Create `kpi_row()` component with responsive grid
- [x] Initially show: Unique Patients count
- [x] Leave space for future metrics (Drugs count, Total cost, Match rate)
- [x] KPIs should be reactive to filter state
### 2.4 Chart Container
- [ ] Create `chart_section()` component