diff --git a/Ralph/IMPLEMENTATION_PLAN.md b/Ralph/IMPLEMENTATION_PLAN.md index 8611b6f..8decf84 100644 --- a/Ralph/IMPLEMENTATION_PLAN.md +++ b/Ralph/IMPLEMENTATION_PLAN.md @@ -46,7 +46,7 @@ Also read `CLAUDE.md` for font setup instructions (Elvaro Grotesque and Blumir c - [x] **Task 6: Rebuild PMRInterface layout + Breadcrumb.** Read `Ralph/refs/ref-banner-sidebar.md` (PMRInterface Layout + Breadcrumb sections). Fixed sidebar + sticky banner + scrollable content on `#F5F7FA`. Create `Breadcrumb.tsx`. Interface materialization animations (banner → sidebar → content stagger). View switching is INSTANT. Mobile: bottom nav bar. Update ViewId type if needed. -- [ ] **Task 7: Rebuild SummaryView + Clinical Alert.** Read `Ralph/refs/ref-summary-alert.md`. Clinical Alert with spring animation entrance, acknowledge → checkmark → collapse sequence. Summary cards: Demographics (full-width key-value), Active Problems (traffic lights), Current Skills quick table, Last Consultation preview. 2-column grid desktop, single column mobile. Navigation links to other views. +- [x] **Task 7: Rebuild SummaryView + Clinical Alert.** Read `Ralph/refs/ref-summary-alert.md`. Clinical Alert with spring animation entrance, acknowledge → checkmark → collapse sequence. Summary cards: Demographics (full-width key-value), Active Problems (traffic lights), Current Skills quick table, Last Consultation preview. 2-column grid desktop, single column mobile. Navigation links to other views. - [ ] **Task 8: Rebuild ConsultationsView.** Read `Ralph/refs/ref-consultations.md`. Reverse-chronological journal. Collapsed entries with date, org, role, key achievement. Expanded: H/E/P structure with coded entries. Height-only expand animation (no opacity fade). One expanded at a time. 3px left border color-coded by employer. Second clinical alert on first visit. diff --git a/Ralph/progress.txt b/Ralph/progress.txt index b6d3952..9b566db 100644 --- a/Ralph/progress.txt +++ b/Ralph/progress.txt @@ -439,3 +439,68 @@ Do NOT invoke the `/frontend-design` skill at runtime — it was pre-run and the **Next task:** Task 7 — Rebuild SummaryView + Clinical Alert +### Iteration 8 — Task 7: Rebuild SummaryView + Clinical Alert +**Completed:** Task 7 +**Changes made:** +- **SummaryView.tsx**: Complete rebuild from ref-summary-alert.md spec: + - **ClinicalAlert**: Replaced CSS transition-based animation with Framer Motion spring animation + - State machine: `'visible' | 'acknowledging' | 'dismissed'` (was: 3 separate boolean states) + - Entrance: `type: 'spring', stiffness: 300, damping: 25` — creates subtle overshoot effect + - Dismiss sequence: icon crossfade (AlertTriangle → CheckCircle, 200ms) → hold beat (200ms) → height collapse (200ms ease-out) + - `AnimatePresence` wraps alert for exit animation (height → 0, opacity → 0) + - Button disables during acknowledging state, text changes to "Acknowledged" + - `prefers-reduced-motion`: instant appear/dismiss, no animation + - **DemographicsCard**: Full-width (`lg:col-span-2`), 2-column key-value layout + - Labels: `font-ui font-medium text-[13px] text-gray-500`, right-aligned, min-width 100px + - Values: `font-ui text-sm text-gray-900` (or `font-geist` for coded data like DOB, registration number) + - Proper spacing: `gap-x-12 gap-y-2` between columns and rows + - **ActiveProblemsCard**: Traffic light dots now include text labels (was: dot-only, guardrail violation) + - Green dot + "Active" text, amber dot + "In Progress" text + - Hover state: `bg-[#EFF6FF]` blue tint (was: `bg-gray-50`) + - **QuickMedsCard**: Proper semantic `