194 lines
13 KiB
Markdown
194 lines
13 KiB
Markdown
# PRD: Dashboard Restructure — Section Hierarchy & Graph Improvements
|
||
|
||
## Introduction
|
||
|
||
Restructure the dashboard from a flat list of independent tiles into a hierarchical layout with two parent sections: **Patient Summary** (containing Latest Results as a subsection) and **Patient Pathway** (containing the constellation graph, last consultation, work experience, skills, and education). Improve the constellation graph's visual clarity, add cross-component hover highlighting, remove CV data that doesn't match the source CV, and explore typography options for parent section headers.
|
||
|
||
## Goals
|
||
|
||
- Consolidate related content into two clear parent sections with visually distinct subsections
|
||
- Improve the constellation graph's readability (background, line weight, node size, zoom)
|
||
- Add interactive hover-highlighting between experience/skills and the graph
|
||
- Ensure all career data matches `References/CV_v4.md` exactly
|
||
- Find the best typography treatment for parent section headers
|
||
- Maintain responsive behaviour across all breakpoints
|
||
|
||
## User Stories
|
||
|
||
### US-001: Create Parent Section component with subsection support
|
||
**Description:** As a developer, I need a parent section wrapper that visually distinguishes parent tiles from child subsections so the hierarchy is clear.
|
||
|
||
**Acceptance Criteria:**
|
||
- [ ] Parent section header text is significant and prominent — at least as large as the current KPI value text (which uses ~36px), not the small 12px uppercase tile headers
|
||
- [ ] Child subsections have their own smaller headers but are clearly nested within the parent
|
||
- [ ] Visual separation between subsections (divider or spacing) without looking like independent cards
|
||
- [ ] Typecheck passes (`npm run typecheck`)
|
||
- [ ] Verify in browser using Playwright
|
||
|
||
### US-002: Restructure Patient Summary as parent section
|
||
**Description:** As a visitor, I want the Patient Summary to contain the personal profile and Latest Results (KPIs) as a subsection, so related overview information is grouped together.
|
||
|
||
**Acceptance Criteria:**
|
||
- [ ] Patient Summary is a parent section with large, prominent header text
|
||
- [ ] Remove the 4 headline metric figures currently in Patient Summary (9+ Years, 1.2M, £220M, £14.6M+)
|
||
- [ ] Latest Results (KPI flip cards) appears as a named subsection within Patient Summary
|
||
- [ ] Profile text remains in Patient Summary above the Latest Results subsection
|
||
- [ ] KPI cards retain their existing click-to-detail behaviour
|
||
- [ ] Typecheck passes
|
||
- [ ] Verify in browser using Playwright
|
||
|
||
### US-003: Rename Career Activity to Patient Pathway and restructure as parent section
|
||
**Description:** As a visitor, I want all career-related content (graph, latest role, experience, skills, education) grouped under one "Patient Pathway" parent section.
|
||
|
||
**Acceptance Criteria:**
|
||
- [ ] Section renamed from "CAREER ACTIVITY" to "PATIENT PATHWAY"
|
||
- [ ] Patient Pathway is a parent section with large, prominent header text (matching Patient Summary)
|
||
- [ ] Contains the constellation graph at the top
|
||
- [ ] Last Consultation content appears as a subsection below the graph
|
||
- [ ] Education appears as a subsection at the bottom (including A-Levels)
|
||
- [ ] The old standalone LastConsultationTile is removed from the dashboard
|
||
- [ ] The old standalone EducationTile is removed from the dashboard
|
||
- [ ] Typecheck passes
|
||
- [ ] Verify in browser using Playwright
|
||
|
||
### US-004: Two-column layout for experience and skills within Patient Pathway
|
||
**Description:** As a visitor, I want to see work experience on the left and skills on the right beneath the graph/consultation, so I can see how they relate.
|
||
|
||
**Acceptance Criteria:**
|
||
- [ ] Two-column grid below the consultation subsection: experience (left), skills (right)
|
||
- [ ] Work experience column shows all roles from consultations.ts with accordion expand (one at a time)
|
||
- [ ] Skills column shows the existing CoreSkillsTile content (categorised skills with expand)
|
||
- [ ] On mobile, columns stack vertically (experience above skills)
|
||
- [ ] Both columns are subsections with their own headers
|
||
- [ ] Typecheck passes
|
||
- [ ] Verify in browser using Playwright
|
||
|
||
### US-005: Hover-highlighting between experience/skills and constellation graph
|
||
**Description:** As a visitor, I want to hover over a work experience entry or skill and see the corresponding node highlighted in the constellation graph, so I can visually trace relationships.
|
||
|
||
**Acceptance Criteria:**
|
||
- [ ] Hovering a work experience entry highlights its role node in the graph (and connected skill nodes)
|
||
- [ ] Hovering a skill entry highlights its skill node in the graph (and connected role nodes)
|
||
- [ ] Non-related nodes dim (matching existing graph hover behaviour)
|
||
- [ ] Highlight clears when mouse leaves the entry
|
||
- [ ] Touch devices: tap to highlight, tap elsewhere to clear
|
||
- [ ] No performance issues (highlight should feel immediate)
|
||
- [ ] Typecheck passes
|
||
- [ ] Verify in browser using Playwright
|
||
|
||
### US-006: Improve constellation graph visual clarity
|
||
**Description:** As a visitor, I want the constellation graph to be clearer and easier to read, with better contrast and larger interactive elements.
|
||
|
||
**Acceptance Criteria:**
|
||
- [ ] Graph has an off-white/light background (e.g. `#F5F7F6` or similar warm neutral) instead of transparent
|
||
- [ ] Link lines are more visible — slightly thicker stroke and/or higher contrast colour
|
||
- [ ] Node bubbles are larger (increase radius for both role and skill nodes)
|
||
- [ ] Graph is initially zoomed in to a comfortable level so nodes and labels are clearly readable
|
||
- [ ] Graph remains interactive (hover, click behaviour preserved)
|
||
- [ ] Responsive sizing still works across breakpoints
|
||
- [ ] Typecheck passes
|
||
- [ ] Verify in browser using Playwright
|
||
|
||
### US-007: Remove inaccurate CV data and fix entries
|
||
**Description:** As Andy, I want the portfolio to only contain career entries that match my actual CV so there is no fabricated content.
|
||
|
||
**Acceptance Criteria:**
|
||
- [ ] Remove "Duty Pharmacy Manager" consultation entry (`duty-pharmacist-2016`) — this role is not in the CV
|
||
- [ ] Remove "Power BI Data Analyst Associate" certification — not in the CV
|
||
- [ ] Remove "Clinical Pharmacy Diploma" certification — not in the CV (CV lists "NHS Leadership Academy — Mary Seacole Programme" instead)
|
||
- [ ] Add "NHS Leadership Academy — Mary Seacole Programme (2018)" as a certification entry
|
||
- [ ] Update constellation graph nodes/links to remove references to the deleted role
|
||
- [ ] Remove "SQL Analytics Transformation" project entry — not in the CV as a standalone project
|
||
- [ ] Convert "Budget Oversight" from a project entry to a skill entry under Budget Management (already exists in skills.ts — just remove the project timeline entry)
|
||
- [ ] Add A-Levels to education: Mathematics (A*), Chemistry (B), Politics (C) — Highworth Grammar School, 2009–2011
|
||
- [ ] Verify remaining entries (4 roles, GPhC registration, MPharm, Mary Seacole, A-Levels) match CV dates and titles exactly
|
||
- [ ] Typecheck passes
|
||
|
||
### US-008: Remove old standalone tiles from dashboard
|
||
**Description:** As a developer, I need to clean up tiles that have been absorbed into parent sections so there are no duplicates.
|
||
|
||
**Acceptance Criteria:**
|
||
- [ ] LastConsultationTile removed from DashboardLayout grid (content now inside Patient Pathway)
|
||
- [ ] CoreSkillsTile removed from DashboardLayout grid (content now inside Patient Pathway)
|
||
- [ ] LatestResultsTile removed from DashboardLayout grid (content now inside Patient Summary)
|
||
- [ ] EducationTile removed from DashboardLayout grid (content now inside Patient Pathway)
|
||
- [ ] Old standalone tile components deleted from codebase
|
||
- [ ] No visual gaps or broken grid layout after removal
|
||
- [ ] Typecheck passes
|
||
- [ ] Verify in browser using Playwright
|
||
|
||
### US-009: Explore parent header typography options
|
||
**Description:** As a designer, I want to evaluate different font choices and sizes for the parent section headers to find the most visually striking and appropriate treatment.
|
||
|
||
**Acceptance Criteria:**
|
||
- [ ] Use the `bencium-innovative-ux-designer` skill to evaluate font options for the parent headers
|
||
- [ ] Test parent headers with existing project fonts: Elvaro Grotesque (various weights 300-900) and Blumir (variable 100-700)
|
||
- [ ] Consider whether a different weight/style of the existing fonts creates sufficient visual impact at large sizes
|
||
- [ ] Headers must feel premium and intentional — not generic. Should complement the clinical/luxury aesthetic
|
||
- [ ] Produce at least 2-3 options with screenshots for comparison
|
||
- [ ] Typecheck passes
|
||
- [ ] Verify in browser using Playwright
|
||
|
||
**Note:** This story should be done AFTER US-001 through US-004 are complete (layout must be in place first so fonts can be evaluated in context).
|
||
|
||
### US-010: Apply chosen parent header typography
|
||
**Description:** As a developer, I need to apply the selected font treatment to all parent section headers consistently.
|
||
|
||
**Acceptance Criteria:**
|
||
- [ ] Chosen font/weight/size applied to Patient Summary and Patient Pathway headers
|
||
- [ ] Headers are consistent in treatment across both parent sections
|
||
- [ ] Font scales appropriately across breakpoints (may need responsive size adjustments)
|
||
- [ ] Typecheck passes
|
||
- [ ] Verify in browser using Playwright
|
||
|
||
**Note:** This story depends on US-009 (font exploration) being completed and a choice being made.
|
||
|
||
## Functional Requirements
|
||
|
||
- FR-1: Patient Summary parent section contains: profile text + Latest Results subsection (KPI cards)
|
||
- FR-2: Patient Pathway parent section contains: constellation graph + Last Consultation subsection + two-column (experience | skills) subsection + Education subsection
|
||
- FR-3: Parent section headers use large, prominent typography — at minimum the size of current KPI values (~36px) — clearly establishing them as top-level sections
|
||
- FR-4: Constellation graph renders with off-white background, thicker/clearer links, and larger node radius
|
||
- FR-5: Graph is initially zoomed/scaled so content fills the container at a comfortable reading size
|
||
- FR-6: Hovering an experience or skill entry triggers the graph's existing highlight behaviour for the corresponding node
|
||
- FR-7: Experience entries maintain accordion-expand behaviour (single open at a time)
|
||
- FR-8: All career data matches `References/CV_v4.md` — no fabricated roles, certifications, or projects
|
||
- FR-9: Responsive: two-column experience/skills grid stacks to single column on mobile; graph height adjusts per existing breakpoints
|
||
- FR-10: Rename "CAREER ACTIVITY" to "PATIENT PATHWAY" throughout
|
||
- FR-11: Education subsection includes MPharm, Mary Seacole Programme, and A-Levels
|
||
- FR-12: Parent header font treatment is evaluated using the frontend-design skill before final implementation
|
||
|
||
## Non-Goals
|
||
|
||
- No changes to boot sequence, ECG animation, or login screen
|
||
- No changes to the Sidebar (person header, tags, alerts)
|
||
- No changes to the TopBar or Command Palette
|
||
- No new data fields or API integrations
|
||
- No changes to the DetailPanel component or its content
|
||
- No changes to existing colour palette (only typography adjustments for parent headers)
|
||
|
||
## Design Considerations
|
||
|
||
- Parent section headers must be a significant visual element — they are the primary structural markers of the page. Think "section title" not "card label". At minimum ~36px (matching KPI values), potentially larger.
|
||
- Subsection headers should retain the current style (small, uppercase, coloured dot) so the hierarchy is clear through contrast
|
||
- The two-column experience/skills layout within Patient Pathway should feel like a natural part of the same card, not two separate cards jammed together
|
||
- Graph background should be subtle enough not to compete with card backgrounds — a very light warm neutral
|
||
- Font exploration (US-009) should use the `bencium-innovative-ux-designer` skill to evaluate options — the headers need to feel premium, not just "big text"
|
||
- Typography evaluation must happen with the layout already in place so the fonts can be judged in their real context
|
||
|
||
## Technical Considerations
|
||
|
||
- The hover-highlighting (US-005) requires lifting hover state up: experience/skills items need to communicate hovered IDs to CareerConstellation via shared state (React context or prop drilling through the parent)
|
||
- CareerConstellation already supports external highlight via its existing hover logic — this needs to be made controllable from outside (imperative ref or controlled prop)
|
||
- Removing `duty-pharmacist-2016` from consultations.ts will affect constellation.ts nodes/links — both must be updated together
|
||
- The `buildTimeline()` function in CareerActivityTile will be replaced by the new structure; the work experience list should read directly from consultations.ts
|
||
- US-009 and US-010 are sequentially dependent on US-001–US-004 completing first
|
||
|
||
## Success Metrics
|
||
|
||
- All career data verifiably matches CV_v4.md
|
||
- Graph nodes and labels are readable without zooming on a 1920x1080 desktop viewport
|
||
- Hover highlighting connects experience/skills to graph nodes with no perceptible delay
|
||
- Parent section headers are immediately recognisable as top-level structural elements
|
||
- Dashboard passes visual check at desktop (1280px+), tablet (768px), and mobile (375px) widths
|