From f648e7a4fc0a5acac53a8d7787437d1e499ee32d Mon Sep 17 00:00:00 2001 From: A Charlwood Date: Wed, 11 Feb 2026 02:14:55 +0000 Subject: [PATCH] Progress update: Mark Task 11 complete and log iteration --- Ralph/IMPLEMENTATION_PLAN.md | 2 +- Ralph/progress.txt | 28 ++++++++++++++++++++++++++++ 2 files changed, 29 insertions(+), 1 deletion(-) diff --git a/Ralph/IMPLEMENTATION_PLAN.md b/Ralph/IMPLEMENTATION_PLAN.md index 27bed19..671ba17 100644 --- a/Ralph/IMPLEMENTATION_PLAN.md +++ b/Ralph/IMPLEMENTATION_PLAN.md @@ -147,7 +147,7 @@ src/ Create `src/components/views/InvestigationsView.tsx`. Projects presented as diagnostic investigations. Table: Test Name | Requested | Status | Result. Status badges: Complete (green dot), Ongoing (amber dot), Live (pulsing green dot for PharMetrics). 5 investigations: PharMetrics Interactive Platform, Patient Switching Algorithm, Blueteq Generator, CD Monitoring System, Sankey Chart Analysis Tool. Click row to expand "results panel" with tree-indented structure: Date Requested, Date Reported, Status, Requesting Clinician, Methodology, Results, Tech Stack. PharMetrics has "View Results" button linking to medicines.charlwood.xyz. -- [ ] **Task 11: Build DocumentsView for education/certifications** +- [x] **Task 11: Build DocumentsView for education/certifications** Create `src/components/views/DocumentsView.tsx`. Education presented as attached documents. Table: Type (icon), Document, Date, Source. Icons: FileText (certificates), Award (registrations), GraduationCap (academic), FlaskConical (research). 4 documents: MPharm (Hons) 2:1 UEA 2015, GPhC Registration 2016, Mary Seacole Programme 2018, A-Levels 2011 + Drug Delivery Research. Click to expand "preview" panel with tree-indented details: Type, Date Awarded, Institution, Classification, Duration, Research details, Notes. Consistent with Investigations expanded view style. diff --git a/Ralph/progress.txt b/Ralph/progress.txt index b497690..c969c7e 100644 --- a/Ralph/progress.txt +++ b/Ralph/progress.txt @@ -336,3 +336,31 @@ This is a complete redesign of the CV presentation, moving from the ECG animatio - Live status uses Tailwind animate-ping for pulsing effect (requires relative container) - Tree-indented structure uses flex with fixed-width labels for clean alignment - Results as bullet list provides better readability than comma-separated text + +### Iteration 11 — Task 11: Build DocumentsView for education/certifications +- **Completed**: Task 11 - Created DocumentsView with expandable rows and preview panel +- **Files created**: + - `src/components/views/DocumentsView.tsx` - Full Documents view with 5 document entries +- **Files modified**: + - `src/components/PMRInterface.tsx` - Added DocumentsView to renderView switch +- **Design decisions**: + - Document type icons: FileText (Certificate), Award (Registration), GraduationCap (Results), FlaskConical (Research) + - Table columns: Type (icon), Document, Date, Source + - Expandable rows: click to show tree-indented preview panel + - Preview panel uses key-value layout with fixed-width labels (w-40) for alignment + - Shows: Type, Date Awarded, Institution, Classification, Duration, Research (with grade), Notes + - Height animation: 200ms ease-out for expand/collapse + - Accordion behavior: only one row expanded at a time (global) + - Hover state: blue-50 (#EFF6FF) background tint + - Consistent with InvestigationsView expanded view style +- **Accessibility**: + - Proper semantic `` markup with `scope="col"` on headers + - `aria-expanded` on clickable rows + - Screen reader-only column header for expand button + - Respects `prefers-reduced-motion`: height transition disabled +- **Quality checks**: `npm run typecheck` ✓, `npm run lint` ✓, `npm run build` ✓ +- **Learnings**: + - Document type icons from Lucide match design spec exactly + - Research documents show both detail and grade in same field with line break + - Tree-indented structure consistency across Investigations and Documents views +