Redesign CVMIS system 2

2026-02-13 16:42:45 +00:00
parent 000df670a3
commit e13a073a6f
26 changed files with 24405 additions and 0 deletions
@@ -0,0 +1,156 @@
+# Reference: Tasks 19-21 — Polish
+
+## Task 19: Responsive Design
+
+### Desktop (>1024px)
+- Full sidebar (272px) + TopBar + 2-column card grid
+- All tiles at full spec (as designed in Tasks 8-15)
+- Command palette at 580px width
+
+### Tablet (768–1024px)
+- Sidebar: collapse to icon-only (56px) or hide entirely with toggle
+- TopBar: full, but search bar may shrink (reduce min-width)
+- Card grid: can stay 2-column if space permits, or switch to 1-column
+- Activity grid inside CareerActivity tile: switch to 1-column
+
+### Mobile (<768px)
+- Sidebar: hidden entirely (off-canvas or removed)
+- TopBar: simplified — brand text may truncate, hide search bar center section
+- Navigation: consider a hamburger menu or bottom nav for key actions
+- Card grid: single column
+- All tiles stack vertically (full-width)
+- Metric grid in LatestResults: stays 2x2 (compact enough)
+- Activity grid in CareerActivity: single column
+- Touch targets: all clickable elements 48px+ minimum
+- Command palette: full-width with reduced padding
+
+### Breakpoint Strategy
+Use Tailwind responsive prefixes:
+- `lg:` for desktop (>1024px)
+- `md:` for tablet (>768px)
+- Default styles for mobile-first
+
+### Key responsive classes:
+```
+/* Card grid */
+grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-[16px]
+
+/* Sidebar visibility */
+hidden lg:flex lg:flex-col
+
+/* TopBar search */
+hidden md:block
+
+/* Activity grid */
+grid grid-cols-1 md:grid-cols-2
+
+/* Sidebar width */
+lg:w-[272px] lg:min-w-[272px]
+```
+
+---
+
+## Task 20: Accessibility Audit
+
+### Semantic HTML
+| Element | Tag | Notes |
+|---------|-----|-------|
+| TopBar | `<header>` | Fixed at top |
+| Sidebar | `<aside>` or `<nav>` | Navigation/info panel |
+| Main content | `<main>` | Card grid container |
+| Individual tiles | `<article>` | Self-contained content sections |
+| Tile sections | `<section>` | Within tiles (e.g., metric grid, bullet list) |
+| Command palette | `<dialog>` or `div role="dialog"` | Modal overlay |
+
+### Keyboard Navigation
+| Key | Action |
+|-----|--------|
+| Tab | Move between interactive elements (tiles, buttons, links) |
+| Enter/Space | Expand tile items, flip KPI cards, select palette results |
+| Escape | Close expanded items, close command palette |
+| Ctrl+K | Open command palette |
+| Arrow Up/Down | Navigate command palette results |
+
+### ARIA Attributes
+- **Command palette search**: `role="combobox"`, `aria-expanded`, `aria-controls="palette-results"`, `aria-autocomplete="list"`
+- **Palette results**: `role="listbox"`, each result `role="option"`
+- **Palette overlay**: `role="dialog"`, `aria-modal="true"`, `aria-label="Search records"`
+- **Expandable items**: `aria-expanded="true|false"` on trigger element
+- **KPI flip cards**: `aria-label` describing front/back content, `role="button"`, `tabIndex={0}`
+- **Status dots with text**: text labels present → dot can be `aria-hidden="true"`
+- **Alert flags**: `role="status"` or decorative (visible text is sufficient)
+- **Live region**: When palette opens/closes, announce via `aria-live="polite"` region
+- **TopBar session info**: `aria-label="Active session information"`
+
+### Focus Management
+- **Command palette**: focus trap when open. Focus moves to search input on open. Returns to trigger element on close.
+- **Focus visible**: `focus-visible:ring-2 focus-visible:ring-[var(--accent)]/40` on all interactive elements (buttons, links, expandable items, KPI cards)
+- **Skip to content**: Optional "Skip to main content" link (only visible on focus)
+- **After tile expansion**: focus should remain on the trigger or move into expanded content
+
+### `prefers-reduced-motion`
+Every animation must check:
+```typescript
+const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches
+```
+
+| Animation | Reduced Motion Behavior |
+|-----------|------------------------|
+| Dashboard entrance (topbar/sidebar/content) | Instant, no slide/fade |
+| Tile expansion | Instant height change (duration: 0) |
+| KPI flip | Instant content swap (no rotateY) |
+| Palette entrance | Instant show (no scale/translate) |
+| Status badge pulse | No animation |
+| Hover transitions | Can keep (very brief) or disable |
+
+### Color Contrast Verification
+| Foreground | Background | Expected Ratio | Meets AA? |
+|------------|-----------|-----------------|-----------|
+| #0D6E6E (accent) | #FFFFFF (white) | ~5.5:1 | Yes |
+| #1A2B2A (primary) | #FFFFFF | ~15:1 | Yes |
+| #5B7A78 (secondary) | #FFFFFF | ~4.6:1 | Borderline — verify |
+| #8DA8A5 (tertiary) | #FFFFFF | ~3.0:1 | Fails for body text — use only for decorative/supplementary |
+| #0D6E6E (accent) | #F0F5F4 (bg) | ~4.8:1 | Yes for large text |
+
+**Important:** Tertiary text (#8DA8A5) does NOT meet AA for body text. Use only for supplementary labels, dates, and decorative text where the information is also conveyed elsewhere (e.g., a date that's also in the title). For standalone readable text, use secondary (#5B7A78) or primary (#1A2B2A).
+
+---
+
+## Task 21: Clean Up and Final Polish
+
+### Components to Remove (only after confirming unused)
+- `src/components/PatientBanner.tsx` — replaced by TopBar
+- `src/components/ClinicalSidebar.tsx` — replaced by Sidebar
+- `src/components/Breadcrumb.tsx` — no longer needed (no view switching)
+- `src/components/MobileBottomNav.tsx` — may be replaced or redesigned
+- `src/components/PMRInterface.tsx` — replaced by DashboardLayout
+
+### Views to Assess
+The `src/components/views/` directory contains the old view components. Some may be reusable:
+- **ConsultationsView.tsx**: Expanded entry rendering could be reused in CareerActivity expansion (Task 16). Check before removing.
+- **MedicationsView.tsx**: Prescribing history rendering could be reused in CoreSkills expansion. Check before removing.
+- **Other views**: If expansion (Task 16) doesn't reuse them, they can be removed.
+
+**Rule: Only remove files that are confirmed unused.** Run a grep for imports before deleting.
+
+### Hooks to Remove
+- `src/hooks/useScrollCondensation.ts` — only used by PatientBanner. If PatientBanner is removed, this can go too.
+
+### Verification Checklist
+- [ ] No dead imports (run `npm run lint` — ESLint catches unused imports)
+- [ ] No TypeScript errors (`npm run typecheck`)
+- [ ] Clean build (`npm run build`)
+- [ ] Bundle size reasonable (should be similar to or smaller than current ~417KB)
+- [ ] No console errors in dev mode
+
+### Final Visual Review
+Open `http://localhost:5173` and compare against `References/GPSystemconcept.html`:
+- [ ] TopBar layout matches (brand, search, session)
+- [ ] Sidebar matches (person header, tags, alerts)
+- [ ] Card grid layout (2-column, full-width tiles span both)
+- [ ] Each tile's visual treatment matches concept
+- [ ] Shadows, borders, radius consistent
+- [ ] Typography: Elvaro Grotesque (not DM Sans)
+- [ ] Colors: teal accent (not NHS Blue)
+- [ ] Hover states work (card shadow lift, border color change)
+- [ ] Responsive: test at 1280px, 800px, 375px widths