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,147 @@
+# Reference: Tasks 4-6 — TopBar and Sidebar
+
+## Concept Reference
+
+All specs below are derived from `References/GPSystemconcept.html`. Open it in a browser for visual reference.
+
+---
+
+## Task 4: TopBar Component
+
+### File: `src/components/TopBar.tsx`
+
+### Structure
+```
+┌─────────────────────────────────────────────────────────────┐
+│ [🏠] Headhunt Medical Center  Remote  │  [🔍 Search... Ctrl+K]  │  Dr. A.CHARLWOOD · Active Session · 12:23  [Ctrl+K] │
+└─────────────────────────────────────────────────────────────┘
+```
+
+### Specs
+
+**Container:**
+- `position: fixed`, `top: 0`, `left: 0`, `right: 0`
+- `height: var(--topbar-height)` (48px)
+- `background: var(--surface)` (#FFFFFF)
+- `border-bottom: 1px solid var(--border)` (#D4E0DE)
+- `display: flex`, `align-items: center`, `justify-content: space-between`
+- `padding: 0 20px`
+- `z-index: 100`
+
+**Brand (left):**
+- `Home` icon from lucide-react (18px, accent color)
+- Text: "Headhunt Medical Center" — 13px, font-ui, 600 weight, text-primary
+- Version badge: "Remote" — 11px, 400 weight, text-tertiary, margin-left 2px
+
+**Search bar (center):**
+- Wrapper: `max-width: 560px`, `min-width: 400px`
+- Container: `height: 42px`, `border: 1.5px solid var(--border)`, `border-radius: var(--radius)` (8px), `padding: 0 14px`, white bg
+- Search icon (16px, tertiary) + input + "Ctrl+K" kbd badge
+- Input: 13px, font-body, placeholder "Search records, experience, skills... (Ctrl+K)"
+- Hover: `border-color: var(--accent-border)`
+- Focus: `border-color: var(--accent)`, `box-shadow: 0 0 0 3px rgba(13,110,110,0.12)`
+- **On click/focus: opens Command Palette** (Task 18). Does NOT do inline search.
+- Kbd badge: mono font, 10px, tertiary, bg: var(--bg), border, padding 2px 6px, radius 4px
+
+**Session info (right):**
+- Text: "Dr. A.CHARLWOOD · Active Session · [time]" — 12px, text-secondary
+- Session pill: mono 11px, tertiary, `background: var(--accent-light)`, `padding: 3px 10px`, radius 4px, `border: 1px solid var(--accent-border)`
+- Ctrl+K shortcut badge (same style as search bar badge)
+
+**Responsive:**
+- Mobile (<768px): hide center search bar. Show only brand + session info (or hamburger).
+- Tablet: search bar may shrink.
+
+---
+
+## Task 5: Sidebar — PersonHeader
+
+### File: `src/components/Sidebar.tsx`
+
+### Overall Sidebar Container
+- `width: var(--sidebar-width)` (272px)
+- `min-width: var(--sidebar-width)`
+- `background: var(--sidebar-bg)` (#F7FAFA)
+- `border-right: 1px solid var(--border)` (#D4E0DE)
+- `overflow-y: auto`, custom scrollbar (4px width, transparent track, border-colored thumb)
+- `padding: 20px 16px`
+- `display: flex`, `flex-direction: column`, `gap: 2px`
+
+### PersonHeader Section
+Bordered below: `border-bottom: 2px solid var(--accent)`, `padding-bottom: 16px`, `margin-bottom: 6px`
+
+**Avatar:**
+- 52px × 52px circle
+- `background: linear-gradient(135deg, var(--accent), #0A8080)`
+- White text "AC", 700 weight, 18px, centered
+- `box-shadow: 0 2px 8px rgba(13,110,110,0.25)`
+- `margin-bottom: 12px`
+
+**Name:**
+- "CHARLWOOD, Andrew"
+- 15px, 700 weight, text-primary, `letter-spacing: -0.01em`
+
+**Title:**
+- "Pharmacy Data Technologist"
+- 11.5px, mono font, 400 weight, text-secondary
+- `margin-top: 2px`
+
+**Status badge:**
+- Inline-flex, gap 5px
+- `margin-top: 8px`
+- 11px, 500 weight, success color (#059669)
+- `background: var(--success-light)`, `border: 1px solid var(--success-border)`
+- `padding: 3px 9px`, `border-radius: 20px` (pill)
+- Animated dot: 6px circle, success color, `animation: pulse 2s infinite` (opacity 1→0.4→1)
+- Text: "Open to Opportunities"
+
+**Details grid:**
+- `display: grid`, `grid-template-columns: 1fr`, `gap: 6px`, `margin-top: 12px`
+- Each row: `display: flex`, `justify-content: space-between`, `align-items: center`, 11.5px, `padding: 2px 0`
+- Label: text-tertiary, 400 weight
+- Value: text-primary, 500 weight, text-align right
+- GPhC No. value: mono font, 11px, `letter-spacing: 0.12em` → "2211810"
+- Education value: "MPharm 2.1 (Hons)"
+- Location: "Norwich, Norfolk"
+- Phone: link in accent color, `text-decoration: none`, underline on hover → "07795 553 088"
+- Email: link → "andy@charlwood.xyz"
+- Registered: "August 2016"
+
+**Data source:** `src/data/patient.ts`
+
+---
+
+## Task 6: Sidebar — Tags + Alerts
+
+### Section Title Component
+Reusable within sidebar. Used for "Tags", "Alerts / Highlights", and any future sections.
+
+- `font-size: 10px`, `font-weight: 600`, `text-transform: uppercase`, `letter-spacing: 0.08em`
+- Color: text-tertiary
+- `margin-bottom: 10px`
+- Flex row with `::after` pseudo-element: `flex: 1`, `height: 1px`, `background: var(--border-light)`, `gap: 6px`
+
+### Tags Section
+- Container: `display: flex`, `flex-wrap: wrap`, `gap: 5px`
+- Each tag: 10.5px, 500 weight, `padding: 3px 8px`, `border-radius: 4px`, inline-flex, `line-height: 1.3`
+- **Color variants:**
+  - `teal`: `background: var(--accent-light)`, `color: var(--accent)`, `border: 1px solid var(--accent-border)`
+  - `amber`: `background: var(--amber-light)`, `color: var(--amber)`, `border: 1px solid var(--amber-border)`
+  - `green`: `background: var(--success-light)`, `color: var(--success)`, `border: 1px solid var(--success-border)`
+- **Data source:** `src/data/tags.ts`
+
+### Alerts / Highlights Section
+- Container: `display: flex`, `flex-direction: column`, `gap: 6px`
+- Each flag item: `display: flex`, `align-items: center`, `gap: 8px`
+  - 11px, 700 weight, `padding: 7px 10px`, `border-radius: var(--radius-sm)` (6px), `letter-spacing: 0.02em`
+- **Alert variant** (red):
+  - `background: var(--alert-light)`, `color: var(--alert)`, `border: 1px solid var(--alert-border)`
+  - Icon: `AlertTriangle` from lucide-react (14px, 2.5 stroke-width)
+- **Amber variant:**
+  - `background: var(--amber-light)`, `color: var(--amber)`, `border: 1px solid var(--amber-border)`
+  - Icon: `AlertCircle` from lucide-react (14px, 2.5 stroke-width)
+- Icon container: 16px square, flex center, flex-shrink-0
+- **Data source:** `src/data/alerts.ts`
+
+### Section Padding
+Each sidebar section: `padding: 14px 0 6px`