adf6c3fb96
E5.S2 compleet: Bronnotitie links met hover preview in OverdrachtBlock. Voortgang: 66 SP / 82 SP (80%) - Epic 5 40% compleet! Implementatie: - Bronverwijzingen nu klikbaar met hover popover voor volledige content - Source data enrichment in API response - Type-specific content display (observaties, rapportages, risico's) - Visual feedback met icons en kleuren per bron type Components & Types: - LinkedEvidence component (160 regels) - Reusable popover voor alle bron types - Aandachtspunt type extended met optionele sourceData field - enrichWithSourceData() functie in API route (48 regels) LinkedEvidence Features: - Hover popover met volledige bron content - Type-specific icons: Activity (observatie), FileText (rapportage), AlertTriangle (risico) - Click/hover trigger met underline-dotted styling - ExternalLink icon voor visual affordance - Popover positioning: top-start voor beste UX Source Data per Type: - Observaties: value + unit + interpretation (HH/H/N/L/LL) met kleuren - Rapportages/Verpleegkundig: content + createdBy - Risico's: riskLevel + rationale met severity kleuren API Enrichment Logic: - enrichWithSourceData() lookup in context (vitals, reports, risks) - Source data toegevoegd aan aandachtspunten vóór response - Type-safe matching op bron.id en bron.type - Backwards compatible: werkt met/zonder sourceData UI/UX Improvements: - Color-coded interpretations: Red (HH/LL kritiek), Amber (H/L), Teal (N) - Color-coded risk levels: Red (zeer hoog/hoog), Amber (gemiddeld), Teal (laag) - Formatted text display met bg-slate-50 border - Responsive popover met max-width 96 (384px) - Fallback: geen sourceData = plain text zonder popover Integration in OverdrachtBlock: - AandachtspuntItem gebruikt LinkedEvidence component - Replaced: "bron.label • bron.datum" plain text - Now: LinkedEvidence met hover preview Files Changed: - lib/types/overdracht.ts: +12 lines (sourceData interface) - app/api/overdracht/generate/route.ts: +58 lines (enrichWithSourceData) - components/swift/blocks/overdracht-block.tsx: +1/-3 lines (LinkedEvidence import/usage) - components/swift/shared/linked-evidence.tsx: +160 lines (NEW) Technical Details: - Popover from shadcn/ui (@/components/ui/popover) - Icons from lucide-react (Activity, FileText, AlertTriangle, ExternalLink) - Type guards voor safe property access (sourceData?.value) - Underline decoration-dotted cursor-help voor accessibility Testing: - Build succesvol (pnpm build) - /epd/swift: 143 kB (+24 kB door LinkedEvidence component) - Geen nieuwe type errors - Popover trigger werkt met keyboard (accessible) Voortgang: 66 SP / 82 SP (80%) - E5.S2 compleet (3 SP) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This is a Next.js project bootstrapped with create-next-app.
Getting Started
First, run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
Open http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.
This project uses next/font to automatically optimize and load Geist, a new font family for Vercel.
Learn More
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
Deploy on Vercel
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.