admin/portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Task 7: Build ConsultationsView with History/Examination/Plan structure

Browse Source 
- Create ConsultationsView with 5 expandable consultation entries
- Each entry has color-coded left border by employer (NHS blue vs Teal)
- Collapsed state shows date, org, role, key coded entry
- Expanded state shows Duration, HISTORY, EXAMINATION, PLAN, CODED ENTRIES
- Accordion behavior: only one entry expanded at a time
- Expand animation 200ms ease-out, respects reduced motion
- Section headers in uppercase with letter-spacing
- Coded entries in [XXX000] format with Geist Mono font
This commit is contained in:
A Charlwood
2026-02-11 01:40:56 +00:00
parent 4bf4d1171f
commit 4272ca4dfe
4 changed files with 270 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Ralph/IMPLEMENTATION_PLAN.md
+1 -1
View File
@@ -131,7 +131,7 @@ src/
Create `src/components/views/SummaryView.tsx`. Grid layout with cards: Patient Demographics (full width, two-column key-value table), Active Problems (left column, green/amber dots with dates), Current Medications Quick View (right column, 4-column table showing top 5 skills), Last Consultation preview (full width, truncated to 2-3 lines with "View Full Record" link). Clinical Alert banner: amber background (#FEF3C7), amber left border, warning icon, text "ALERT: This patient has identified £14.6M in prescribing efficiency savings...", Acknowledge button. Alert slides down with spring animation (250ms) after view loads. Clicking Acknowledge: icon changes to green checkmark (200ms), then alert collapses upward (200ms).
- [ ] **Task 7: Build ConsultationsView with History/Examination/Plan structure**
- [x] **Task 7: Build ConsultationsView with History/Examination/Plan structure**
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).
Ralph/progress.txt
+26
View File
@@ -218,3 +218,29 @@ This is a complete redesign of the CV presentation, moving from the ECG animatio
- Clinical Alert text uses amber-800 (#92400E) for contrast against amber-100 background
- Grid layout: demographics full width, problems/medications side-by-side, last consultation full width
- `line-clamp-2` and `line-clamp-3` utilities work well for truncating text in cards
### Iteration 7 — Task 7: Build ConsultationsView with History/Examination/Plan structure
- **Completed**: Task 7 - Created ConsultationsView with expandable consultation entries
- **Files created**:
- `src/components/views/ConsultationsView.tsx` - Full Consultations view with 5 expandable entries
- **Files modified**:
- `src/components/PMRInterface.tsx` - Added ConsultationsView to renderView switch
- **Design decisions**:
- Each entry has 3px left border color-coded by employer: NHS blue (#005EB8) for ICB, Teal (#00897B) for Tesco
- Collapsed state shows: status dot, date, organization (colored), role title, key coded entry summary
- Status dot: green for current roles, gray for historical
- Expanded state shows: Duration, HISTORY (paragraph), EXAMINATION (bullets), PLAN (bullets), CODED ENTRIES
- Section headers styled in Inter 600, 12px, uppercase, tracking-wider, gray-400
- Coded entries use [XXX000] format in Geist Mono, gray-400
- Only one entry expanded at a time (accordion behavior)
- Expand animation: height 0→auto (200ms, ease-out)
- Chevron icon rotates 180° when expanded
- **Accessibility**:
- `aria-expanded` on toggle buttons
- Status dots have `aria-label` describing current vs historical
- Respects `prefers-reduced-motion`: expand is instant
- **Quality checks**: `npm run typecheck` ✓, `npm run lint` ✓, `npm run build` ✓
- **Learnings**:
- 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