Task 11: Build CoreSkills tile ("Repeat Medications")

Created CoreSkillsTile component that presents skills as medications
with frequency dosing metaphor:
- Half-width card with amber dot header "REPEAT MEDICATIONS"
- 5 skill items with teal icon containers (lucide-react icons)
- Each item shows: skill name, frequency (e.g., "Twice daily"),
  start year, years of experience, and "Active" status badge
- Uses medication metaphor: "Data Analysis · Twice daily · Since
  2016 · 9 yrs"
- Data from src/data/skills.ts with user-specified frequencies
- Styled to match GP System concept with 6px radius items on
  dashboard background (#F0F5F4)
- Integrated into DashboardLayout in right column next to
  LatestResultsTile

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
2026-02-13 17:24:26 +00:00
parent 5ad67a512f
commit 6d47f2a948
2 changed files with 98 additions and 0 deletions
+2
View File
@@ -4,6 +4,7 @@ import { TopBar } from './TopBar'
import Sidebar from './Sidebar'
import { PatientSummaryTile } from './tiles/PatientSummaryTile'
import { LatestResultsTile } from './tiles/LatestResultsTile'
import { CoreSkillsTile } from './tiles/CoreSkillsTile'
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches
@@ -101,6 +102,7 @@ export function DashboardLayout() {
{/* LatestResultsTile — half width (left) */}
<LatestResultsTile />
{/* CoreSkillsTile — half width (right) */}
<CoreSkillsTile />
{/* LastConsultationTile — full width */}
{/* CareerActivityTile — full width */}
{/* EducationTile — full width */}