774 lines
28 KiB
Markdown
774 lines
28 KiB
Markdown
# Implementation Workflow: Adding Depth to the GP Clinical Record
|
||
|
||
> Generated: Feb 2026
|
||
> Source: `Ralph/depth-requirements.md` + `Ralph/depth-design.md`
|
||
> Prerequisite: Task 21 (cleanup) from current plan should be completed first
|
||
|
||
---
|
||
|
||
## Dependency Graph
|
||
|
||
```
|
||
Phase 1: Core Infrastructure
|
||
T1 ─── Types & CSS foundations
|
||
T2 ─── DetailPanelContext + DetailPanel component ──── depends on T1
|
||
T3 ─── useFocusTrap hook ─────────────────────────── depends on T1
|
||
T4 ─── SubNav + useActiveSection update ──────────── depends on T1
|
||
T5 ─── DashboardLayout restructure ──────────────── depends on T2, T3, T4
|
||
|
||
Phase 2: Data Expansion
|
||
T6 ─── Expand skills.ts (5 → ~20, categorised) ──── depends on T1
|
||
T7 ─── Add KPI stories to kpis.ts ────────────────── depends on T1
|
||
T8 ─── Create constellation.ts data ──────────────── depends on T6
|
||
T9 ─── Create educationExtras.ts ─────────────────── depends on T1
|
||
|
||
Phase 3: Tile Modifications (parallel where possible)
|
||
T10 ─── LatestResultsTile (bigger numbers, panel) ─── depends on T2, T7
|
||
T11 ─── CoreSkillsTile (full width, categorised) ──── depends on T2, T6
|
||
T12 ─── ProjectsTile (half width, card grid) ──────── depends on T2
|
||
T13 ─── LastConsultationTile (panel trigger) ──────── depends on T2
|
||
T14 ─── CareerActivityTile (panel triggers, hover) ── depends on T2
|
||
T15 ─── EducationTile (richer content, panel) ─────── depends on T2, T9
|
||
T16 ─── PatientSummaryTile (structured presentation)─ depends on T5
|
||
|
||
Phase 4: Detail Panel Renderers
|
||
T17 ─── KPIDetail renderer ────────────────────────── depends on T10
|
||
T18 ─── ConsultationDetail renderer ───────────────── depends on T13, T14
|
||
T19 ─── ProjectDetail renderer ────────────────────── depends on T12
|
||
T20 ─── SkillDetail + SkillsAllDetail renderers ───── depends on T11
|
||
T21 ─── EducationDetail renderer ──────────────────── depends on T15
|
||
|
||
Phase 5: Career Constellation (D3.js)
|
||
T22 ─── Install d3, scaffold CareerConstellation ──── depends on T8
|
||
T23 ─── D3 force graph rendering ──────────────────── depends on T22
|
||
T24 ─── Hover/click interactions → detail panel ───── depends on T23, T18, T20
|
||
T25 ─── Constellation accessibility ───────────────── depends on T23
|
||
|
||
Phase 6: Login Refresh
|
||
T26 ─── LoginScreen visual restyle ────────────────── independent
|
||
T27 ─── Username → a.recruiter + connection status ── depends on T26
|
||
T28 ─── Post-login loading state ──────────────────── depends on T27
|
||
T29 ─── TopBar session name update ────────────────── depends on T28
|
||
|
||
Phase 7: Polish & Integration
|
||
T30 ─── CommandPalette updates for new content ────── depends on T17-T21
|
||
T31 ─── Responsive testing (panels, sub-nav) ──────── depends on T5, T2
|
||
T32 ─── prefers-reduced-motion audit ──────────────── depends on all
|
||
T33 ─── Final visual review + cleanup ─────────────── depends on all
|
||
```
|
||
|
||
---
|
||
|
||
## Pre-Flight: Complete Task 21 (Cleanup)
|
||
|
||
Before starting depth work, the current plan's final task must be done:
|
||
|
||
- [ ] Remove unused old components (PatientBanner, ClinicalSidebar, Breadcrumb, MobileBottomNav, PMRInterface)
|
||
- [ ] Remove old view files (`src/components/views/*.tsx`)
|
||
- [ ] Remove old portfolio components (Contact, Education, Experience, FloatingNav, Footer, Hero, Projects, Skills)
|
||
- [ ] Remove unused hooks (useScrollCondensation if unused)
|
||
- [ ] Verify no dead imports
|
||
- [ ] `npm run build` clean
|
||
|
||
**Checkpoint:** Clean build with zero unused components.
|
||
|
||
---
|
||
|
||
## Phase 1: Core Infrastructure
|
||
|
||
### Task 1: Types & CSS Foundations
|
||
|
||
**Files:** `src/types/pmr.ts`, `src/index.css`
|
||
**Effort:** Small
|
||
|
||
Add all new TypeScript types and CSS custom properties needed by subsequent tasks.
|
||
|
||
**Types to add (`src/types/pmr.ts`):**
|
||
- `SkillCategory` — `'Technical' | 'Domain' | 'Leadership'`
|
||
- `KPIStory` — context, role, outcomes[], period
|
||
- Augment `KPI` with optional `story?: KPIStory`
|
||
- `ConstellationNode` — id, type, label, domain, org data
|
||
- `ConstellationLink` — source, target, strength
|
||
- `DetailPanelContent` — discriminated union (kpi | skill | skills-all | consultation | project | education | career-role)
|
||
- `EducationExtra` — documentId, extracurriculars, researchDescription, programmeDetail
|
||
- Add `category?: SkillCategory` field to `SkillMedication`
|
||
|
||
**CSS to add (`src/index.css`):**
|
||
```css
|
||
--subnav-height: 36px;
|
||
--panel-narrow: 400px;
|
||
--panel-wide: 60vw;
|
||
--backdrop-blur: 4px;
|
||
--backdrop-bg: rgba(26,43,42,0.15);
|
||
```
|
||
|
||
Plus panel animation keyframes (`panel-slide-in`, `panel-slide-out`, `backdrop-fade-in`) with `prefers-reduced-motion` overrides.
|
||
|
||
**Validation:** `npm run typecheck` passes.
|
||
|
||
---
|
||
|
||
### Task 2: DetailPanelContext + DetailPanel Component
|
||
|
||
**New files:** `src/contexts/DetailPanelContext.tsx`, `src/components/DetailPanel.tsx`
|
||
**Depends on:** T1
|
||
**Effort:** Medium
|
||
|
||
**DetailPanelContext (`src/contexts/DetailPanelContext.tsx`):**
|
||
- `DetailPanelContextValue`: `{ content, openPanel, closePanel, isOpen }`
|
||
- `DetailPanelProvider` wraps children, manages state
|
||
- Width mapping: deterministic from `content.type` (narrow for kpi/skill/education, wide for consultation/project/career-role)
|
||
- Title mapping: derived from content data
|
||
|
||
**DetailPanel (`src/components/DetailPanel.tsx`):**
|
||
- Full-screen backdrop (`backdrop-filter: blur(4px)`, click to close)
|
||
- Panel slides from right (`translateX(100%)` → `translateX(0)`, 250ms ease-out)
|
||
- Adaptive width: `var(--panel-narrow)` or `var(--panel-wide)` based on content type
|
||
- Header: close button (X, lucide `X` icon) + dot + section title
|
||
- Scrollable content area renders `{children}` (or delegates to content renderers)
|
||
- Close triggers: backdrop click, Escape key, X button
|
||
- `aria-modal="true"`, `role="dialog"`, `aria-labelledby`
|
||
- Mobile: both widths become 100vw
|
||
- `prefers-reduced-motion`: instant appear, no slide
|
||
|
||
**Integration:** Initially renders placeholder content ("Detail panel for {type}"). Real content renderers come in Phase 4.
|
||
|
||
**Validation:** Panel opens/closes correctly with keyboard and mouse. `npm run typecheck` + `npm run build`.
|
||
|
||
---
|
||
|
||
### Task 3: useFocusTrap Hook
|
||
|
||
**New file:** `src/hooks/useFocusTrap.ts`
|
||
**Depends on:** T1
|
||
**Effort:** Small
|
||
|
||
- `useFocusTrap(containerRef: RefObject<HTMLElement>, isActive: boolean): void`
|
||
- When active: Tab/Shift+Tab cycle within container, first focusable element receives focus
|
||
- When deactivated: focus returns to the element that was focused before trap activated
|
||
- Used by DetailPanel (and already used by CommandPalette — consider if CommandPalette can share this hook)
|
||
|
||
**Validation:** Tab cycling confirmed in DetailPanel. Focus returns correctly on close.
|
||
|
||
---
|
||
|
||
### Task 4: SubNav + useActiveSection Update
|
||
|
||
**New file:** `src/components/SubNav.tsx`
|
||
**Modified file:** `src/hooks/useActiveSection.ts`
|
||
**Depends on:** T1
|
||
**Effort:** Medium
|
||
|
||
**SubNav component:**
|
||
- Fixed/sticky below TopBar (`top: 48px`, `z-index: 99`)
|
||
- 5 sections: Overview | Skills | Experience | Projects | Education
|
||
- Click → smooth-scroll to `[data-tile-id="${tileId}"]`
|
||
- Active tab: teal underline (2px), text colour `var(--accent)`
|
||
- Inactive: `var(--text-secondary)`
|
||
- Height: 36px, background `var(--surface)`, bottom border
|
||
- Tabs: 13px, font-weight 500, gap 24px
|
||
- Teal underline slides with 200ms transition
|
||
|
||
**useActiveSection update:**
|
||
- Observe `data-tile-id` attributes on tile elements
|
||
- Map tile IDs to section IDs (patient-summary→overview, core-skills→skills, etc.)
|
||
- Use IntersectionObserver with appropriate thresholds
|
||
|
||
**Tile `data-tile-id` attributes:** Ensure each tile's Card has this attribute. May need to add `tileId` prop to Card if not already present.
|
||
|
||
**Validation:** Scroll triggers correct active tab. Click scrolls to correct section. `npm run build`.
|
||
|
||
---
|
||
|
||
### Task 5: DashboardLayout Restructure
|
||
|
||
**Modified file:** `src/components/DashboardLayout.tsx`
|
||
**Depends on:** T2, T3, T4
|
||
**Effort:** Medium
|
||
|
||
**Changes:**
|
||
1. Wrap with `DetailPanelProvider` (in App.tsx or DashboardLayout)
|
||
2. Add `SubNav` between TopBar and content
|
||
3. Reorder tiles:
|
||
- PatientSummaryTile (full width)
|
||
- LatestResultsTile (half) + ProjectsTile (half) — side by side
|
||
- CoreSkillsTile (full width) — was half, now full
|
||
- LastConsultationTile (full width)
|
||
- CareerActivityTile (full width)
|
||
- EducationTile (full width)
|
||
4. Render `DetailPanel` alongside CommandPalette
|
||
5. Adjust margin-top: `calc(var(--topbar-height) + var(--subnav-height))`
|
||
6. Add `data-tile-id` attributes to tile wrappers
|
||
|
||
**Validation:** Layout renders correctly with new tile order. SubNav visible. Detail panel renders. No visual regressions. `npm run build`.
|
||
|
||
**Checkpoint:** Core infrastructure complete. Detail panel opens (with placeholder content), sub-nav works, new tile order in place.
|
||
|
||
---
|
||
|
||
## Phase 2: Data Expansion
|
||
|
||
### Task 6: Expand Skills Data
|
||
|
||
**Modified file:** `src/data/skills.ts`
|
||
**Depends on:** T1
|
||
**Effort:** Medium
|
||
|
||
Expand from 5 → ~20 skills across 3 categories. Each skill retains the medication metaphor.
|
||
|
||
**Categories:**
|
||
- **Technical (8):** Data Analysis, Python, SQL, Power BI, JavaScript/TypeScript, Excel, Algorithm Design, Data Pipelines
|
||
- **Healthcare Domain (6):** Medicines Optimisation, Population Health, NICE TA Implementation, Health Economics, Clinical Pathways, Controlled Drugs
|
||
- **Strategic & Leadership (7):** Budget Management, Stakeholder Engagement, Pharmaceutical Negotiation, Team Development, Change Management, Financial Modelling, Executive Communication
|
||
|
||
Each skill: `id`, `name`, `genericName`, `frequency`, `startYear`, `yearsOfExperience`, `status`, `proficiency`, `category`
|
||
|
||
**Source:** CV_v4.md Core Competencies section.
|
||
|
||
**Validation:** Types check. Existing CoreSkillsTile still renders (it will show all skills or first 5 depending on current implementation).
|
||
|
||
---
|
||
|
||
### Task 7: Add KPI Stories
|
||
|
||
**Modified file:** `src/data/kpis.ts`
|
||
**Depends on:** T1
|
||
**Effort:** Small
|
||
|
||
Add `story` field to each of the 4 KPIs:
|
||
|
||
1. **£220M** — prescribing budget, forecasting models, ICB board accountability
|
||
2. **£14.6M** — efficiency programme, data analysis identification, over-target by Oct 2025
|
||
3. **9+ Years** — career span Aug 2016–present, progression narrative
|
||
4. **1.2M** — population served, Norfolk & Waveney ICS scope
|
||
|
||
**Source:** CV_v4.md role descriptions.
|
||
|
||
**Validation:** Types check. Existing tile unaffected (story field is optional).
|
||
|
||
---
|
||
|
||
### Task 8: Create Constellation Data
|
||
|
||
**New file:** `src/data/constellation.ts`
|
||
**Depends on:** T6 (needs skill IDs)
|
||
**Effort:** Medium
|
||
|
||
Define role-skill mapping for the D3 graph:
|
||
|
||
- 6 role nodes (Paydens → Tesco Duty → Tesco Manager → NHS HCD → NHS Deputy → NHS Interim)
|
||
- Skill nodes (from expanded skills data)
|
||
- Links connecting skills to roles with strength values
|
||
- Colour assignments: role nodes get org colours, skill nodes get domain colours
|
||
|
||
**Validation:** Types check. Data importable.
|
||
|
||
---
|
||
|
||
### Task 9: Create Education Extras
|
||
|
||
**New file:** `src/data/educationExtras.ts`
|
||
**Depends on:** T1
|
||
**Effort:** Small
|
||
|
||
Expanded detail for education entries:
|
||
- MPharm: extracurriculars (Pharmacy Society President, Ultimate Frisbee VP, Alzheimer's Society), research project description
|
||
- Mary Seacole: programme detail (change management, healthcare leadership, system-level thinking)
|
||
- A-Levels: no extras needed
|
||
|
||
**Source:** CV_v4.md Education section.
|
||
|
||
**Validation:** Types check. Data importable.
|
||
|
||
**Checkpoint:** All data expanded and ready for consumption by tiles and detail renderers.
|
||
|
||
---
|
||
|
||
## Phase 3: Tile Modifications
|
||
|
||
Tasks in this phase can be done in parallel where dependencies allow.
|
||
|
||
### Task 10: LatestResultsTile — Remove Flip, Add Panel
|
||
|
||
**Modified file:** `src/components/tiles/LatestResultsTile.tsx`
|
||
**Modified file:** `src/index.css` (remove flip CSS if dedicated)
|
||
**Depends on:** T2, T7
|
||
**Effort:** Medium
|
||
|
||
**Changes:**
|
||
1. Remove CSS perspective flip animation entirely
|
||
2. Remove `.metric-card`, `.metric-card-inner`, `.metric-card-front`, `.metric-card-back` CSS classes
|
||
3. Replace with clickable KPI cards:
|
||
- Headline number at 28-32px, bold (700), coloured by variant
|
||
- Label at 12px, weight 500
|
||
- Sub-text at 10px, Geist Mono, tertiary
|
||
4. Click → `openPanel({ type: 'kpi', kpi })`
|
||
5. Hover: border colour shift + shadow deepens
|
||
6. Keyboard: Enter/Space triggers panel
|
||
|
||
**Validation:** KPIs display with bigger numbers. Click opens detail panel (placeholder). No flip remnants. `npm run build`.
|
||
|
||
---
|
||
|
||
### Task 11: CoreSkillsTile — Full Width, Categorised
|
||
|
||
**Modified file:** `src/components/tiles/CoreSkillsTile.tsx`
|
||
**Depends on:** T2, T6
|
||
**Effort:** Large
|
||
|
||
**Changes:**
|
||
1. Change from half-width to full-width (`full` prop on Card)
|
||
2. Display skills grouped by category (Technical, Healthcare Domain, Strategic & Leadership)
|
||
3. Category headers: thin divider line + label (styled like sidebar section dividers)
|
||
4. Show top 3-4 skills per category on the dashboard
|
||
5. "View all" button per category → `openPanel({ type: 'skills-all', category })`
|
||
6. Individual skill click → `openPanel({ type: 'skill', skill })`
|
||
7. Retain medication metaphor (frequency, status badge)
|
||
8. Remove single-expand accordion for skills (replaced by panel interaction)
|
||
|
||
**Validation:** Skills display in 3 categories. View all opens panel. Individual click opens panel. `npm run build`.
|
||
|
||
---
|
||
|
||
### Task 12: ProjectsTile — Half Width, Card Grid
|
||
|
||
**Modified file:** `src/components/tiles/ProjectsTile.tsx`
|
||
**Depends on:** T2
|
||
**Effort:** Medium
|
||
|
||
**Changes:**
|
||
1. Change from full-width to half-width (remove `full` prop)
|
||
2. Position alongside LatestResultsTile in the grid (handled by T5 layout reorder)
|
||
3. Compact card layout: status dot + name + year (right-aligned)
|
||
4. Tech stack as small inline tags
|
||
5. Click → `openPanel({ type: 'project', investigation })`
|
||
6. Remove in-place expansion (replaced by panel)
|
||
7. Hover: border shift, shadow deepens
|
||
|
||
**Validation:** Projects render in half-width alongside KPIs. Click opens panel. `npm run build`.
|
||
|
||
---
|
||
|
||
### Task 13: LastConsultationTile — Panel Trigger
|
||
|
||
**Modified file:** `src/components/tiles/LastConsultationTile.tsx`
|
||
**Depends on:** T2
|
||
**Effort:** Small
|
||
|
||
**Changes:**
|
||
1. Add "View full record" button/link at the bottom
|
||
2. Click → `openPanel({ type: 'consultation', consultation })`
|
||
3. Make the tile header area clickable too
|
||
4. Keep existing inline content (header info row, achievements preview)
|
||
|
||
**Validation:** Click opens panel. Existing content unchanged. `npm run build`.
|
||
|
||
---
|
||
|
||
### Task 14: CareerActivityTile — Panel Triggers, Hover
|
||
|
||
**Modified file:** `src/components/tiles/CareerActivityTile.tsx`
|
||
**Depends on:** T2
|
||
**Effort:** Medium
|
||
|
||
**Changes:**
|
||
1. Timeline items: click → `openPanel({ type: 'career-role', consultation })` (for role entries)
|
||
2. Remove in-place accordion expansion (replaced by panel)
|
||
3. Hover preview: items lift slightly on hover, show 1-2 lines of preview text
|
||
4. Keep colour-coded dots and entry type styling
|
||
5. Reserve space for CareerConstellation embed (Phase 5)
|
||
|
||
**Note:** Extended timeline back to school (2009) — add education entries (Highworth Grammar, UEA) to the timeline data if not already present.
|
||
|
||
**Validation:** Click opens panel for role items. Hover shows preview. No accordion. `npm run build`.
|
||
|
||
---
|
||
|
||
### Task 15: EducationTile — Richer Content, Panel
|
||
|
||
**Modified file:** `src/components/tiles/EducationTile.tsx`
|
||
**Depends on:** T2, T9
|
||
**Effort:** Small
|
||
|
||
**Changes:**
|
||
1. Show richer inline content: research project score (75.1%), OSCE score (80%), A-level grades
|
||
2. Each education entry clickable → `openPanel({ type: 'education', document })`
|
||
3. Hover: border shift
|
||
|
||
**Validation:** Richer content visible. Click opens panel. `npm run build`.
|
||
|
||
---
|
||
|
||
### Task 16: PatientSummaryTile — Structured Presentation
|
||
|
||
**Modified file:** `src/components/tiles/PatientSummaryTile.tsx`
|
||
**Depends on:** T5
|
||
**Effort:** Small
|
||
|
||
**Changes:**
|
||
1. Use full profile paragraph from CV_v4.md (verify `profile.ts` has complete text)
|
||
2. Pull out key highlights as a visual strip (years of experience, population served, budget)
|
||
3. Break up wall of text with hierarchy (bold key phrases, structured paragraphs)
|
||
|
||
**Validation:** Profile reads well, not a wall of text. Highlight strip visible. `npm run build`.
|
||
|
||
**Checkpoint:** All tiles modified. Dashboard shows new layout with panel triggers on all interactive elements. Detail panel opens with placeholder content for each type.
|
||
|
||
---
|
||
|
||
## Phase 4: Detail Panel Renderers
|
||
|
||
### Task 17: KPIDetail Renderer
|
||
|
||
**New file:** `src/components/detail/KPIDetail.tsx`
|
||
**Depends on:** T10
|
||
**Effort:** Medium
|
||
|
||
**Content:**
|
||
- Headline number (large, coloured by variant)
|
||
- Context paragraph (from `kpi.story.context`)
|
||
- "Your role" paragraph (from `kpi.story.role`)
|
||
- Outcome bullets (from `kpi.story.outcomes`)
|
||
- Period badge (from `kpi.story.period`)
|
||
|
||
**Wire into DetailPanel:** When `content.type === 'kpi'`, render `<KPIDetail kpi={content.kpi} />`.
|
||
|
||
**Validation:** Panel renders full KPI story. Content matches CV_v4.md. `npm run build`.
|
||
|
||
---
|
||
|
||
### Task 18: ConsultationDetail Renderer
|
||
|
||
**New file:** `src/components/detail/ConsultationDetail.tsx`
|
||
**Depends on:** T13, T14
|
||
**Effort:** Medium
|
||
|
||
**Content:**
|
||
- Role title + organisation + dates
|
||
- History paragraph (from `consultation.history`)
|
||
- Achievement bullets (from `consultation.examination`)
|
||
- Plan/outcomes (from `consultation.plan`)
|
||
- Coded entries badges (from `consultation.codedEntries`)
|
||
|
||
**Validation:** Panel renders full role detail. `npm run build`.
|
||
|
||
---
|
||
|
||
### Task 19: ProjectDetail Renderer
|
||
|
||
**New file:** `src/components/detail/ProjectDetail.tsx`
|
||
**Depends on:** T12
|
||
**Effort:** Medium
|
||
|
||
**Content:**
|
||
- Project name + year + status badge
|
||
- Methodology description
|
||
- Tech stack tags
|
||
- Results bullets
|
||
- External link button (if `investigation.link` exists)
|
||
|
||
**Validation:** Panel renders full project detail. External link works. `npm run build`.
|
||
|
||
---
|
||
|
||
### Task 20: SkillDetail + SkillsAllDetail Renderers
|
||
|
||
**New files:** `src/components/detail/SkillDetail.tsx`, `src/components/detail/SkillsAllDetail.tsx`
|
||
**Depends on:** T11
|
||
**Effort:** Medium
|
||
|
||
**SkillDetail:**
|
||
- Skill name + frequency + status badge
|
||
- Proficiency bar (visual)
|
||
- Years of experience
|
||
- "Used in" section: roles that used this skill (from constellation mapping, or hardcoded until T8 data available)
|
||
|
||
**SkillsAllDetail:**
|
||
- Full categorised list grouped by Technical / Domain / Leadership
|
||
- Each skill row clickable → switches panel to individual SkillDetail
|
||
- Category headers matching tile styling
|
||
|
||
**Validation:** Both renderers work. Skill click within SkillsAll switches to SkillDetail. `npm run build`.
|
||
|
||
---
|
||
|
||
### Task 21: EducationDetail Renderer
|
||
|
||
**New file:** `src/components/detail/EducationDetail.tsx`
|
||
**Depends on:** T15
|
||
**Effort:** Small
|
||
|
||
**Content:**
|
||
- Title + institution + dates + classification
|
||
- Research project description (if MPharm, from `educationExtras`)
|
||
- Extracurricular activities (from `educationExtras`)
|
||
- Programme detail (if Mary Seacole, from `educationExtras`)
|
||
- Notes from document data
|
||
|
||
**Validation:** Panel renders education detail with extras. `npm run build`.
|
||
|
||
**Checkpoint:** All detail panel content renderers complete. Every interactive element in the dashboard opens its corresponding rich detail view.
|
||
|
||
---
|
||
|
||
## Phase 5: Career Constellation (D3.js)
|
||
|
||
### Task 22: Install D3, Scaffold CareerConstellation
|
||
|
||
**Modified file:** `package.json` (add `d3`, `@types/d3`)
|
||
**New file:** `src/components/CareerConstellation.tsx` (scaffold)
|
||
**Depends on:** T8
|
||
**Effort:** Small
|
||
|
||
- `npm install d3 @types/d3`
|
||
- Create component with `useRef<SVGSVGElement>` for the SVG container
|
||
- Render an empty SVG with viewBox, correct container sizing
|
||
- Import constellation data
|
||
|
||
**Validation:** Component renders empty SVG. d3 imports resolve. `npm run build`.
|
||
|
||
---
|
||
|
||
### Task 23: D3 Force Graph Rendering
|
||
|
||
**Modified file:** `src/components/CareerConstellation.tsx`
|
||
**Depends on:** T22
|
||
**Effort:** Large
|
||
|
||
**Implement the force-directed graph:**
|
||
- `d3.forceSimulation` with charge, link, x (chronological), y (centred), collision forces
|
||
- Role nodes: 24px radius, org colour fill, white text
|
||
- Skill nodes: 10px radius, domain colour-coded (clinical=green, technical=teal, leadership=amber)
|
||
- Links: thin lines (1px), `var(--border)`, opacity 0.3
|
||
- Container: full width of CareerActivityTile, 400px desktop / 300px tablet / 250px mobile
|
||
- SVG with responsive viewBox
|
||
- Subtle radial gradient background
|
||
|
||
**D3 integration pattern:**
|
||
- D3 operates imperatively via `useEffect` on the SVG ref
|
||
- React handles wrapper, D3 handles graph
|
||
- No React state for node positions (performance)
|
||
|
||
**Validation:** Graph renders with nodes and links. Nodes positioned chronologically. `npm run build`.
|
||
|
||
---
|
||
|
||
### Task 24: Constellation Interactions → Detail Panel
|
||
|
||
**Modified file:** `src/components/CareerConstellation.tsx`
|
||
**Depends on:** T23, T18, T20
|
||
**Effort:** Medium
|
||
|
||
**Hover interactions:**
|
||
- Hover role → connected skill nodes scale up, links brighten to `var(--accent)`, non-connected nodes fade to 0.15 opacity
|
||
- Hover skill → all connected role nodes highlight, link paths illuminate
|
||
- Tooltip with node name on hover
|
||
|
||
**Click interactions:**
|
||
- Click role → `onRoleClick(id)` → opens ConsultationDetail panel
|
||
- Click skill → `onSkillClick(id)` → opens SkillDetail panel
|
||
|
||
**Validation:** Hover highlighting works correctly. Click opens correct detail panels.
|
||
|
||
---
|
||
|
||
### Task 25: Constellation Accessibility
|
||
|
||
**Modified file:** `src/components/CareerConstellation.tsx`
|
||
**Depends on:** T23
|
||
**Effort:** Medium
|
||
|
||
- `role="img"` on SVG with `aria-label`
|
||
- Screen-reader-only text description of graph structure
|
||
- Keyboard navigation: Tab through role nodes, Enter to open detail
|
||
- `prefers-reduced-motion`: disable force simulation animation, render static final layout
|
||
- Focus indicators on nodes when keyboard-navigating
|
||
|
||
**Validation:** Screen reader describes graph. Keyboard nav works. Reduced motion shows static layout. `npm run build`.
|
||
|
||
**Checkpoint:** Career Constellation complete and integrated into CareerActivityTile. Interactive, accessible, visually impressive.
|
||
|
||
---
|
||
|
||
## Phase 6: Login Refresh
|
||
|
||
### Task 26: LoginScreen Visual Restyle
|
||
|
||
**Modified file:** `src/components/LoginScreen.tsx`
|
||
**Depends on:** None (independent)
|
||
**Effort:** Medium
|
||
|
||
**Colour changes:**
|
||
- `#005EB8` → `#0D6E6E` (shield icon bg, active field border, cursor, button)
|
||
- `#004D9F` → `#0A8080` (button hover)
|
||
- `#004494` → `#085858` (button pressed)
|
||
- Background: `#1E293B` → keep or lighten to `#1A2B2A`
|
||
|
||
**Typography:**
|
||
- Ensure Elvaro Grotesque is used (not DM Sans or system defaults)
|
||
- Shadows should match three-tier system
|
||
|
||
**Validation:** Login looks cohesive with dashboard. Teal accents throughout. `npm run build`.
|
||
|
||
---
|
||
|
||
### Task 27: Username → a.recruiter + Connection Status
|
||
|
||
**Modified file:** `src/components/LoginScreen.tsx`
|
||
**Depends on:** T26
|
||
**Effort:** Medium
|
||
|
||
**Username change:**
|
||
- Typed username: `a.recruiter` (not `A.CHARLWOOD`)
|
||
- Password typing remains as dots
|
||
|
||
**Connection status indicator (below login button):**
|
||
- New state: `ConnectionState = 'connecting' | 'connected'`
|
||
- Initial: red dot + "Awaiting secure connection..."
|
||
- After ~2000ms: green dot + "Secure connection established"
|
||
- Dot: 6px circle, colour transitions with 300ms ease-out
|
||
- Text: 10px, Geist Mono, tertiary colour
|
||
- Login button disabled until BOTH `typingComplete` AND `connectionState === 'connected'`
|
||
|
||
**Validation:** Username types as `a.recruiter`. Connection dot transitions red→green. Button enables correctly.
|
||
|
||
---
|
||
|
||
### Task 28: Post-Login Loading State
|
||
|
||
**Modified file:** `src/components/LoginScreen.tsx`
|
||
**Depends on:** T27
|
||
**Effort:** Small
|
||
|
||
- On login click: `isLoading = true`
|
||
- Card content replaces with: spinner + "Loading clinical records..."
|
||
- Duration: ~600ms
|
||
- Then calls `onComplete()` → dashboard materialises
|
||
|
||
**Validation:** Brief loading state visible between login click and dashboard. Feels purposeful, not slow.
|
||
|
||
---
|
||
|
||
### Task 29: TopBar Session Name Update
|
||
|
||
**Modified file:** `src/components/TopBar.tsx`
|
||
**Depends on:** T28
|
||
**Effort:** Tiny
|
||
|
||
- Change session display: `Dr. A.CHARLWOOD` → `A.RECRUITER`
|
||
- Geist Mono font (should already be the case)
|
||
|
||
**Validation:** TopBar shows `A.RECRUITER`. `npm run build`.
|
||
|
||
**Checkpoint:** Login flow refreshed with teal aesthetic, recruiter narrative, connection status, and loading state.
|
||
|
||
---
|
||
|
||
## Phase 7: Polish & Integration
|
||
|
||
### Task 30: CommandPalette Updates
|
||
|
||
**Modified file:** `src/components/CommandPalette.tsx`, `src/lib/search.ts`
|
||
**Depends on:** T17-T21
|
||
**Effort:** Medium
|
||
|
||
- Update search index to include expanded skills (20 skills vs 5)
|
||
- Add "View [X] detail" actions that open the detail panel directly
|
||
- Ensure palette results link to panel opens, not just scroll-to-section
|
||
- Update grouping if new content types warrant it
|
||
|
||
**Validation:** Search finds all 20 skills. Selecting a result opens the detail panel. `npm run build`.
|
||
|
||
---
|
||
|
||
### Task 31: Responsive Testing
|
||
|
||
**Modified file:** Various
|
||
**Depends on:** T5, T2
|
||
**Effort:** Medium
|
||
|
||
- DetailPanel: both `narrow` and `wide` become 100vw on mobile (<768px)
|
||
- SubNav: test on tablet/mobile (may need horizontal scroll or hamburger)
|
||
- Constellation: test at 300px/250px heights on smaller screens
|
||
- Projects + KPIs: stack vertically on mobile (grid fallback)
|
||
- Touch targets: all interactive elements ≥48px
|
||
|
||
**Validation:** Test at 375px, 768px, 1024px, 1440px breakpoints. No overflow, no hidden content.
|
||
|
||
---
|
||
|
||
### Task 32: prefers-reduced-motion Audit
|
||
|
||
**Modified file:** Various
|
||
**Depends on:** All phases
|
||
**Effort:** Small
|
||
|
||
Verify every new animation respects `prefers-reduced-motion: reduce`:
|
||
- DetailPanel slide → instant appear
|
||
- Backdrop fade → instant
|
||
- SubNav underline transition → instant
|
||
- Constellation force simulation → static layout
|
||
- Connection status dot transition → instant
|
||
- Post-login spinner → static indicator
|
||
- Hover shadows/borders → can keep (non-motion)
|
||
|
||
**Validation:** Enable `prefers-reduced-motion` in browser. No animations visible except hover state changes.
|
||
|
||
---
|
||
|
||
### Task 33: Final Visual Review + Cleanup
|
||
|
||
**Depends on:** All phases
|
||
**Effort:** Medium
|
||
|
||
- Visual review against `References/GPSystemconcept.html` (where applicable)
|
||
- Content verification against `References/CV_v4.md`
|
||
- Dead import cleanup
|
||
- Unused CSS removal (old flip card styles)
|
||
- Console warning check
|
||
- `npm run typecheck` — zero errors
|
||
- `npm run lint` — pass (pre-existing warning OK)
|
||
- `npm run build` — clean
|
||
|
||
**Final checkpoint:** Complete depth enhancement. All features working, accessible, responsive, and polished.
|
||
|
||
---
|
||
|
||
## Summary
|
||
|
||
| Phase | Tasks | New Files | Modified Files | Effort |
|
||
|-------|-------|-----------|----------------|--------|
|
||
| 1. Core Infrastructure | T1-T5 | 3 | 3 | Medium-Large |
|
||
| 2. Data Expansion | T6-T9 | 2 | 2 | Medium |
|
||
| 3. Tile Modifications | T10-T16 | 0 | 7 | Large |
|
||
| 4. Detail Renderers | T17-T21 | 6 | 1 | Medium |
|
||
| 5. Career Constellation | T22-T25 | 1 | 1 | Large |
|
||
| 6. Login Refresh | T26-T29 | 0 | 2 | Medium |
|
||
| 7. Polish | T30-T33 | 0 | Several | Medium |
|
||
| **Total** | **33 tasks** | **12 new files** | **~16 modified** | |
|
||
|
||
### Parallelisation Opportunities
|
||
|
||
- **T2, T3, T4** can be built in parallel (all depend only on T1)
|
||
- **T6, T7, T9** can be built in parallel (all depend only on T1)
|
||
- **T10-T15** can be built in parallel (all depend on T2 + their data task)
|
||
- **T17-T21** can be built in parallel (each depends on its tile task)
|
||
- **T26-T29** (login refresh) is independent of Phases 2-5, can run in parallel
|
||
|
||
### Critical Path
|
||
|
||
T1 → T2 → T5 → T10 → T17 (shortest path to first visible depth feature)
|
||
T1 → T6 → T8 → T22 → T23 → T24 (path to constellation)
|
||
|
||
### New Dependency
|
||
|
||
```bash
|
||
npm install d3 @types/d3
|
||
```
|
||
|
||
---
|
||
|
||
## Next Step
|
||
|
||
Use `/sc:implement` or begin manual implementation following this workflow phase by phase.
|