# Reference: Tasks 8-11 — Card Component and Top Tiles

## Task 8: Reusable Card Component

### File: `src/components/Card.tsx`

### Base Card
```typescript
interface CardProps {
  children: React.ReactNode
  full?: boolean       // spans both grid columns
  className?: string
}
```

**Styling:**
- `background: var(--surface)` (#FFFFFF)
- `border: 1px solid var(--border-light)` (#E4EDEB)
- `border-radius: var(--radius)` (8px)
- `padding: 20px`
- `box-shadow: var(--shadow-sm)` (0 1px 2px rgba(26,43,42,0.05))
- Hover: `box-shadow: var(--shadow-md)`, `border-color: var(--border)` (#D4E0DE)
- `transition: box-shadow 0.2s, border-color 0.2s`
- Full variant: `grid-column: 1 / -1`

### CardHeader Sub-component
```typescript
interface CardHeaderProps {
  dotColor: 'teal' | 'amber' | 'green' | 'alert' | 'purple'
  title: string
  rightText?: string
}
```

**Styling:**
- `display: flex`, `align-items: center`, `gap: 8px`, `margin-bottom: 16px`
- Dot: 8px circle, `border-radius: 50%`, flex-shrink-0
  - teal: `#0D6E6E`, amber: `#D97706`, green: `#059669`, alert: `#DC2626`, purple: `#7C3AED`
- Title: 12px, 600 weight, uppercase, `letter-spacing: 0.06em`, text-secondary (#5B7A78)
- Right text (optional): 10px, 400 weight, normal case, no tracking, text-tertiary, mono font, `margin-left: auto`

---

## Task 9: PatientSummary Tile

### File: `src/components/tiles/PatientSummaryTile.tsx`

**Layout:** Full-width card, first in grid.

**Content:**
- CardHeader: teal dot + "PATIENT SUMMARY"
- Body: personal statement text from `src/data/profile.ts`
- Typography: 13px, font-ui, `line-height: 1.6` (leading-relaxed), text-primary
- No interactive elements — read-only

**Data:** `import { personalStatement } from '@/data/profile'`

This is a simple tile. No expansion, no interactivity.

---

## Task 10: LatestResults Tile

### File: `src/components/tiles/LatestResultsTile.tsx`

**Layout:** Half-width card (single grid column). Sits in the LEFT column.

**Content:**
- CardHeader: teal dot + "LATEST RESULTS" + right text "Updated May 2025"
- 2×2 metric grid inside

**Metric Grid:**
- `display: grid`, `grid-template-columns: 1fr 1fr`, `gap: 12px`

**Each Metric Card:**
- `padding: 14px`, `border-radius: var(--radius-sm)` (6px)
- `border: 1px solid var(--border-light)`, `background: var(--bg)` (#F0F5F4)
- Value: 22px, 700 weight, `letter-spacing: -0.02em`, `line-height: 1.2`
  - Color by variant: green=#059669, amber=#D97706, teal=#0D6E6E
- Label: 11px, text-secondary, 500 weight, `margin-top: 3px`
- Sub: 10px, text-tertiary, mono font, `margin-top: 4px`

**Data:** `import { kpis } from '@/data/kpis'`

**KPI flip prep:** Each metric card should accept a `data-kpi-id` or an `onClick` prop placeholder — Task 17 will add the flip interaction. For now, render as static display.

**Values:**
| Value | Label | Sub | Color |
|-------|-------|-----|-------|
| £220M | Budget Oversight | NHS prescribing | green |
| £14.6M | Efficiency Savings | Identified & tracked | amber |
| 9+ | Years in NHS | Since 2016 | teal |
| 12 | Team Size Led | Cross-functional | green |

---

## Task 11: CoreSkills Tile ("Repeat Medications")

### File: `src/components/tiles/CoreSkillsTile.tsx`

**Layout:** Half-width card (single grid column). Sits in the RIGHT column, next to LatestResults.

**Content:**
- CardHeader: amber dot + "REPEAT MEDICATIONS"
- Vertical list of skill items, `gap: 10px`

**Each Skill Item:**
Matches the concept's `.dev-item` pattern:
- `display: flex`, `align-items: center`, `gap: 10px`
- 12.5px font, `padding: 10px 12px`
- `background: var(--bg)` (#F0F5F4), `border-radius: var(--radius-sm)` (6px)
- `border: 1px solid var(--border-light)`

**Item structure:**
- **Icon container** (28px square, 6px radius):
  - `background: var(--accent-light)`, `color: var(--accent)` (teal)
  - Lucide icon inside (14px): `BarChart3` for Data Analysis, `Code2` for Python, `Database` for SQL, `PieChart` for Power BI, `FileCode2` for JS/TS
- **Text block** (flex: 1):
  - Name: 600 weight, text-primary (e.g., "Data Analysis")
  - Frequency + years: 11px, text-tertiary, mono font (e.g., "Twice daily · Since 2016 · 9 yrs")
- **Optional status badge**: 10px, 500 weight, pill shape (padding 3px 8px, border-radius 20px), flex-shrink-0
  - Could show proficiency or "Active" status

**Medication metaphor format:**
```
[📊] Data Analysis                     Active
     Twice daily · Since 2016 · 9 yrs

[💻] Python                            Active
     Daily · Since 2019 · 6 yrs

[🗄️] SQL                               Active
     Daily · Since 2018 · 7 yrs

[📈] Power BI                          Active
     Once weekly · Since 2020 · 5 yrs

[📝] JavaScript / TypeScript           Active
     When required · Since 2022 · 3 yrs
```

**Data:** `import { skills } from '@/data/skills'`

**Expansion prep:** Each item should accept an onClick prop placeholder — Task 16 will add expansion to show prescribing history (from existing medications data).