diff --git a/Ralph/IMPLEMENTATION_PLAN.md b/Ralph/IMPLEMENTATION_PLAN.md index fdf3979..db01ccb 100644 --- a/Ralph/IMPLEMENTATION_PLAN.md +++ b/Ralph/IMPLEMENTATION_PLAN.md @@ -135,7 +135,7 @@ src/ Create `src/components/views/ConsultationsView.tsx`. Reverse-chronological journal of 5 roles. Each entry: collapsed state shows date, organization (NHS blue), role title, key coded entry, expand chevron. Click to expand: shows Duration, HISTORY section (context/background), EXAMINATION section (bullet list of analysis/findings), PLAN section (bullet list of outcomes), CODED ENTRIES (SNOMED-style codes like [EFF001], [ALG001]). Section headers styled as clinical consultation dividers (uppercase, letter-spacing). Only one entry expanded at a time. Color-coded left border: NHS blue for NHS N&W ICB, Teal (#00897B) for Tesco PLC. Expand animation: height 0→auto (200ms, ease-out). -- [ ] **Task 8: Build MedicationsView with sortable table and prescribing history** +- [x] **Task 8: Build MedicationsView with sortable table and prescribing history** Create `src/components/views/MedicationsView.tsx`. Three category tabs: Active Medications (technical skills), Clinical Medications (healthcare domain skills), PRN (strategic skills). Each tab shows a table: Drug Name | Dose (%) | Frequency | Start | Status. Sortable columns: clicking header sorts (asc/desc toggle). Default sort: by category grouping. Table styling: gray-200 borders, alternating row colors, 40px row height. Hover: subtle blue tint (#EFF6FF). Click row to expand "Prescribing History" — mini-timeline showing skill progression (year + description). History styled in Geist Mono. 18 total medications mapped from CV skills with accurate proficiency percentages and usage frequencies. diff --git a/Ralph/progress.txt b/Ralph/progress.txt index 3c0883b..8445d61 100644 --- a/Ralph/progress.txt +++ b/Ralph/progress.txt @@ -244,3 +244,35 @@ This is a complete redesign of the CV presentation, moving from the ECG animatio - Height animation uses `height: auto` which requires setting height to undefined after animation - Content inside expanded area uses separate opacity transition for smooth appearance - Border-left styling with explicit width/color in style prop for dynamic org colors + +### Iteration 8 — Task 8: Build MedicationsView with sortable table and prescribing history +- **Completed**: Task 8 - Created MedicationsView with sortable table and category tabs +- **Files created**: + - `src/components/views/MedicationsView.tsx` - Full Medications view with 3 category tabs +- **Files modified**: + - `src/components/PMRInterface.tsx` - Added MedicationsView to renderView switch + - `src/index.css` - Added fadeIn animation for expanded content +- **Design decisions**: + - Three category tabs: Active Medications (technical), Clinical Medications (healthcare), PRN (strategic) + - Tabs have descriptive subtitles to explain the mapping + - Sortable columns: clicking header toggles asc/desc/null with visual indicators + - Sort icons: ArrowUpDown (unsorted), ArrowUp (asc), ArrowDown (desc) in NHS blue + - Table columns: Drug Name, Dose (%), Frequency, Start (year), Status + - Row height: ~40px with 10px py padding + - Alternating row colors: white / gray-50 + - Hover state: blue-50 (#EFF6FF) tint + - Traffic light status dots: 8px circles (green=Active, gray=Historical) with text labels + - Expandable rows: click to show "Prescribing History" mini-timeline + - Prescribing history: year + description, styled in Geist Mono + - fadeIn animation (200ms ease-out) for expanded content +- **Accessibility**: + - Proper semantic `