feat(overdracht): E4 + E5 + E6 - Overdracht UI compleet

Epic 4 - Overdracht Overzicht:
- /epd/overdracht pagina met patiënten grid
- PatientCard component met alert badges
- Filter tabs (Alle patiënten / Met alerts)
- Responsive grid layout

Epic 5 - Overdracht Detail:
- /epd/overdracht/[patientId] pagina
- VitalsBlock: vitale functies met interpretatie kleuren
- ReportsBlock: rapportages laatste 24 uur
- NursingLogsBlock: gemarkeerde dagnotities
- RisksBlock: actieve risico's gesorteerd op niveau
- AISummaryBlock: Claude AI samenvatting met bronverwijzingen

Epic 6 - Integratie & Polish:
- Overdracht link in EPD sidebar
- Navigatie links dagregistratie <-> overdracht
- Build en type check passed

Bouwplan v1.3: alle 19 stories afgerond

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

app/epd/overdracht/[patientId]/components/ai-summary-block.tsx

@@ -0,0 +1,257 @@
+'use client';
+
+/**
+ * AISummaryBlock Component
+ * E5.S4: AI Samenvatting met bronverwijzingen
+ */
+
+import { useState } from 'react';
+import {
+  Sparkles,
+  Loader2,
+  AlertTriangle,
+  CheckCircle2,
+  Clock,
+  ExternalLink,
+  RefreshCw,
+} from 'lucide-react';
+import type { AISamenvatting, Aandachtspunt } from '@/lib/types/overdracht';
+
+interface AISummaryBlockProps {
+  patientId: string;
+}
+
+function formatDuration(ms: number): string {
+  if (ms < 1000) return `${ms}ms`;
+  return `${(ms / 1000).toFixed(1)}s`;
+}
+
+function formatTime(datetime: string): string {
+  return new Date(datetime).toLocaleTimeString('nl-NL', {
+    hour: '2-digit',
+    minute: '2-digit',
+  });
+}
+
+function getBronTypeLabel(type: string): string {
+  const labels: Record<string, string> = {
+    observatie: 'Vitale functie',
+    rapportage: 'Rapportage',
+    dagnotitie: 'Dagnotitie',
+    risico: 'Risicobeoordeling',
+  };
+  return labels[type] || type;
+}
+
+function getBronTypeStyle(type: string): { bg: string; text: string } {
+  switch (type) {
+    case 'observatie':
+      return { bg: 'bg-teal-100', text: 'text-teal-700' };
+    case 'rapportage':
+      return { bg: 'bg-indigo-100', text: 'text-indigo-700' };
+    case 'dagnotitie':
+      return { bg: 'bg-amber-100', text: 'text-amber-700' };
+    case 'risico':
+      return { bg: 'bg-red-100', text: 'text-red-700' };
+    default:
+      return { bg: 'bg-slate-100', text: 'text-slate-700' };
+  }
+}
+
+export function AISummaryBlock({ patientId }: AISummaryBlockProps) {
+  const [summary, setSummary] = useState<AISamenvatting | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  async function generateSummary() {
+    setLoading(true);
+    setError(null);
+
+    try {
+      const response = await fetch('/api/overdracht/generate', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ patientId }),
+      });
+
+      if (!response.ok) {
+        const data = await response.json();
+        throw new Error(data.error || 'Fout bij genereren samenvatting');
+      }
+
+      const data: AISamenvatting = await response.json();
+      setSummary(data);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Onbekende fout');
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <div className="bg-white rounded-xl border border-slate-200 p-6">
+      {/* Header */}
+      <div className="flex items-center gap-3 mb-4">
+        <div className="w-10 h-10 bg-violet-100 rounded-lg flex items-center justify-center">
+          <Sparkles className="h-5 w-5 text-violet-600" />
+        </div>
+        <div>
+          <h2 className="text-lg font-semibold text-slate-900">AI Samenvatting</h2>
+          <p className="text-sm text-slate-500">
+            Gegenereerd met Claude AI
+          </p>
+        </div>
+      </div>
+
+      {/* Content */}
+      {!summary && !loading && !error && (
+        <div className="py-6 text-center">
+          <Sparkles className="h-10 w-10 text-slate-300 mx-auto mb-3" />
+          <p className="text-sm text-slate-600 mb-4">
+            Genereer een beknopte overdracht samenvatting op basis van alle beschikbare patiëntgegevens.
+          </p>
+          <button
+            onClick={generateSummary}
+            className="inline-flex items-center gap-2 px-4 py-2.5 bg-gradient-to-r from-violet-600 to-violet-700 hover:from-violet-700 hover:to-violet-800 text-white font-medium rounded-lg shadow-sm hover:shadow-md transition-all"
+          >
+            <Sparkles className="h-4 w-4" />
+            Genereer samenvatting
+          </button>
+        </div>
+      )}
+
+      {loading && (
+        <div className="py-8 text-center">
+          <Loader2 className="h-8 w-8 text-violet-600 mx-auto mb-3 animate-spin" />
+          <p className="text-sm text-slate-600">
+            Samenvatting wordt gegenereerd...
+          </p>
+          <p className="text-xs text-slate-400 mt-1">
+            Dit duurt meestal 3-5 seconden
+          </p>
+        </div>
+      )}
+
+      {error && (
+        <div className="py-6">
+          <div className="p-4 bg-red-50 rounded-lg border border-red-200 mb-4">
+            <div className="flex items-start gap-3">
+              <AlertTriangle className="h-5 w-5 text-red-600 flex-shrink-0 mt-0.5" />
+              <div>
+                <p className="text-sm font-medium text-red-800">
+                  Fout bij genereren
+                </p>
+                <p className="text-sm text-red-700 mt-1">{error}</p>
+              </div>
+            </div>
+          </div>
+          <button
+            onClick={generateSummary}
+            className="w-full inline-flex items-center justify-center gap-2 px-4 py-2 bg-slate-100 hover:bg-slate-200 text-slate-700 font-medium rounded-lg transition-colors"
+          >
+            <RefreshCw className="h-4 w-4" />
+            Opnieuw proberen
+          </button>
+        </div>
+      )}
+
+      {summary && (
+        <div className="space-y-5">
+          {/* Samenvatting */}
+          <div>
+            <h3 className="text-sm font-medium text-slate-700 mb-2">Samenvatting</h3>
+            <p className="text-sm text-slate-600 leading-relaxed bg-slate-50 p-3 rounded-lg">
+              {summary.samenvatting}
+            </p>
+          </div>
+
+          {/* Aandachtspunten */}
+          {summary.aandachtspunten.length > 0 && (
+            <div>
+              <h3 className="text-sm font-medium text-slate-700 mb-2">
+                Aandachtspunten ({summary.aandachtspunten.length})
+              </h3>
+              <div className="space-y-2">
+                {summary.aandachtspunten.map((punt, index) => (
+                  <AandachtspuntItem key={index} punt={punt} />
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* Actiepunten */}
+          {summary.actiepunten.length > 0 && (
+            <div>
+              <h3 className="text-sm font-medium text-slate-700 mb-2">
+                Actiepunten ({summary.actiepunten.length})
+              </h3>
+              <ul className="space-y-2">
+                {summary.actiepunten.map((actie, index) => (
+                  <li
+                    key={index}
+                    className="flex items-start gap-2 text-sm text-slate-600"
+                  >
+                    <CheckCircle2 className="h-4 w-4 text-teal-600 flex-shrink-0 mt-0.5" />
+                    <span>{actie}</span>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          )}
+
+          {/* Footer */}
+          <div className="pt-4 border-t border-slate-100 flex items-center justify-between">
+            <div className="flex items-center gap-2 text-xs text-slate-500">
+              <Clock className="h-3.5 w-3.5" />
+              <span>
+                Gegenereerd om {formatTime(summary.generatedAt)} ({formatDuration(summary.durationMs)})
+              </span>
+            </div>
+            <button
+              onClick={generateSummary}
+              disabled={loading}
+              className="inline-flex items-center gap-1 text-xs text-violet-600 hover:text-violet-700 font-medium"
+            >
+              <RefreshCw className="h-3.5 w-3.5" />
+              Vernieuwen
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function AandachtspuntItem({ punt }: { punt: Aandachtspunt }) {
+  const bronStyle = getBronTypeStyle(punt.bron.type);
+
+  return (
+    <div
+      className={`
+        p-3 rounded-lg border-l-4
+        ${punt.urgent ? 'bg-red-50 border-red-400' : 'bg-slate-50 border-slate-300'}
+      `}
+    >
+      <div className="flex items-start justify-between gap-2 mb-1">
+        <p className={`text-sm ${punt.urgent ? 'text-red-800 font-medium' : 'text-slate-700'}`}>
+          {punt.urgent && (
+            <AlertTriangle className="h-3.5 w-3.5 inline mr-1 text-red-600" />
+          )}
+          {punt.tekst}
+        </p>
+      </div>
+      <div className="flex items-center gap-2 mt-2">
+        <span className={`
+          inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-xs
+          ${bronStyle.bg} ${bronStyle.text}
+        `}>
+          <ExternalLink className="h-3 w-3" />
+          {getBronTypeLabel(punt.bron.type)}
+        </span>
+        <span className="text-xs text-slate-500">
+          {punt.bron.label} • {punt.bron.datum}
+        </span>
+      </div>
+    </div>
+  );
+}

app/epd/overdracht/[patientId]/components/nursing-logs-block.tsx

@@ -0,0 +1,151 @@
+/**
+ * NursingLogsBlock Component
+ * E5.S3: Dagnotities gemarkeerd voor overdracht
+ */
+
+import { ClipboardList, Clock, Pill, Utensils, User, AlertTriangle, FileText, CheckCircle2 } from 'lucide-react';
+import type { NursingLog } from '@/lib/types/nursing-log';
+import type { NursingLogCategory } from '@/lib/types/nursing-log';
+
+interface NursingLogsBlockProps {
+  logs: NursingLog[];
+}
+
+const CATEGORY_CONFIG: Record<NursingLogCategory, {
+  label: string;
+  icon: React.ReactNode;
+  bgColor: string;
+  textColor: string;
+}> = {
+  medicatie: {
+    label: 'Medicatie',
+    icon: <Pill className="h-3.5 w-3.5" />,
+    bgColor: 'bg-blue-100',
+    textColor: 'text-blue-700',
+  },
+  adl: {
+    label: 'ADL',
+    icon: <Utensils className="h-3.5 w-3.5" />,
+    bgColor: 'bg-green-100',
+    textColor: 'text-green-700',
+  },
+  gedrag: {
+    label: 'Gedrag',
+    icon: <User className="h-3.5 w-3.5" />,
+    bgColor: 'bg-purple-100',
+    textColor: 'text-purple-700',
+  },
+  incident: {
+    label: 'Incident',
+    icon: <AlertTriangle className="h-3.5 w-3.5" />,
+    bgColor: 'bg-red-100',
+    textColor: 'text-red-700',
+  },
+  observatie: {
+    label: 'Observatie',
+    icon: <FileText className="h-3.5 w-3.5" />,
+    bgColor: 'bg-slate-100',
+    textColor: 'text-slate-700',
+  },
+};
+
+function formatTime(datetime: string): string {
+  return new Date(datetime).toLocaleTimeString('nl-NL', {
+    hour: '2-digit',
+    minute: '2-digit',
+  });
+}
+
+export function NursingLogsBlock({ logs }: NursingLogsBlockProps) {
+  // Filter logs marked for handover
+  const markedLogs = logs.filter(log => log.include_in_handover);
+  const incidentCount = markedLogs.filter(log => log.category === 'incident').length;
+
+  return (
+    <div className="bg-white rounded-xl border border-slate-200 p-6">
+      {/* Header */}
+      <div className="flex items-center justify-between mb-4">
+        <div className="flex items-center gap-3">
+          <div className="w-10 h-10 bg-amber-100 rounded-lg flex items-center justify-center">
+            <ClipboardList className="h-5 w-5 text-amber-600" />
+          </div>
+          <div>
+            <h2 className="text-lg font-semibold text-slate-900">Dagnotities</h2>
+            <p className="text-sm text-slate-500">
+              {markedLogs.length} gemarkeerd voor overdracht
+            </p>
+          </div>
+        </div>
+        {incidentCount > 0 && (
+          <span className="px-2.5 py-1 bg-red-100 text-red-700 rounded-full text-xs font-medium">
+            {incidentCount} incident{incidentCount > 1 ? 'en' : ''}
+          </span>
+        )}
+      </div>
+
+      {/* Content */}
+      {markedLogs.length === 0 ? (
+        <div className="py-8 text-center">
+          <ClipboardList className="h-8 w-8 text-slate-300 mx-auto mb-2" />
+          <p className="text-sm text-slate-500">Geen dagnotities gemarkeerd voor overdracht</p>
+          {logs.length > 0 && (
+            <p className="text-xs text-slate-400 mt-1">
+              {logs.length} notitie{logs.length > 1 ? 's' : ''} niet gemarkeerd
+            </p>
+          )}
+        </div>
+      ) : (
+        <div className="space-y-3">
+          {markedLogs.map((log) => {
+            const config = CATEGORY_CONFIG[log.category as NursingLogCategory] || CATEGORY_CONFIG.observatie;
+
+            return (
+              <div
+                key={log.id}
+                className={`
+                  p-3 rounded-lg border-l-4
+                  ${log.category === 'incident' ? 'bg-red-50 border-red-400' : 'bg-slate-50 border-slate-300'}
+                `}
+              >
+                {/* Log header */}
+                <div className="flex items-center justify-between mb-2">
+                  <div className="flex items-center gap-2">
+                    <span className={`
+                      inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs font-medium
+                      ${config.bgColor} ${config.textColor}
+                    `}>
+                      {config.icon}
+                      {config.label}
+                    </span>
+                    <span className="inline-flex items-center gap-1 px-1.5 py-0.5 bg-teal-100 text-teal-700 rounded text-xs">
+                      <CheckCircle2 className="h-3 w-3" />
+                      Overdracht
+                    </span>
+                  </div>
+                  <div className="flex items-center gap-1 text-xs text-slate-500">
+                    <Clock className="h-3 w-3" />
+                    {formatTime(log.timestamp)}
+                  </div>
+                </div>
+
+                {/* Log content */}
+                <p className="text-sm text-slate-700 leading-relaxed">
+                  {log.content}
+                </p>
+              </div>
+            );
+          })}
+        </div>
+      )}
+
+      {/* Footer with total count */}
+      {logs.length > markedLogs.length && (
+        <div className="mt-4 pt-3 border-t border-slate-100">
+          <p className="text-xs text-slate-500">
+            + {logs.length - markedLogs.length} andere notitie{logs.length - markedLogs.length > 1 ? 's' : ''} vandaag (niet gemarkeerd)
+          </p>
+        </div>
+      )}
+    </div>
+  );
+}

app/epd/overdracht/[patientId]/components/reports-block.tsx

@@ -0,0 +1,141 @@
+/**
+ * ReportsBlock Component
+ * E5.S2: Rapportages laatste 24 uur
+ */
+
+import { FileText, Clock, User } from 'lucide-react';
+import type { Report } from '@/lib/types/overdracht';
+
+interface ReportsBlockProps {
+  reports: Report[];
+}
+
+function getReportTypeLabel(type: string): string {
+  const types: Record<string, string> = {
+    voortgang: 'Voortgang',
+    observatie: 'Observatie',
+    incident: 'Incident',
+    overdracht: 'Overdracht',
+    contact: 'Contact',
+    algemeen: 'Algemeen',
+  };
+  return types[type] || type;
+}
+
+function getReportTypeStyle(type: string): { bg: string; text: string } {
+  switch (type) {
+    case 'incident':
+      return { bg: 'bg-red-100', text: 'text-red-700' };
+    case 'observatie':
+      return { bg: 'bg-blue-100', text: 'text-blue-700' };
+    case 'voortgang':
+      return { bg: 'bg-green-100', text: 'text-green-700' };
+    case 'overdracht':
+      return { bg: 'bg-purple-100', text: 'text-purple-700' };
+    case 'contact':
+      return { bg: 'bg-amber-100', text: 'text-amber-700' };
+    default:
+      return { bg: 'bg-slate-100', text: 'text-slate-700' };
+  }
+}
+
+function formatDateTime(datetime: string): string {
+  const date = new Date(datetime);
+  const now = new Date();
+  const isToday = date.toDateString() === now.toDateString();
+
+  if (isToday) {
+    return date.toLocaleTimeString('nl-NL', {
+      hour: '2-digit',
+      minute: '2-digit',
+    });
+  }
+
+  return date.toLocaleDateString('nl-NL', {
+    day: 'numeric',
+    month: 'short',
+    hour: '2-digit',
+    minute: '2-digit',
+  });
+}
+
+function truncateContent(content: string, maxLength: number = 150): string {
+  if (content.length <= maxLength) return content;
+  return content.substring(0, maxLength).trim() + '...';
+}
+
+export function ReportsBlock({ reports }: ReportsBlockProps) {
+  const incidentCount = reports.filter(r => r.type === 'incident').length;
+
+  return (
+    <div className="bg-white rounded-xl border border-slate-200 p-6">
+      {/* Header */}
+      <div className="flex items-center justify-between mb-4">
+        <div className="flex items-center gap-3">
+          <div className="w-10 h-10 bg-indigo-100 rounded-lg flex items-center justify-center">
+            <FileText className="h-5 w-5 text-indigo-600" />
+          </div>
+          <div>
+            <h2 className="text-lg font-semibold text-slate-900">Rapportages</h2>
+            <p className="text-sm text-slate-500">
+              {reports.length} rapportages (24u)
+            </p>
+          </div>
+        </div>
+        {incidentCount > 0 && (
+          <span className="px-2.5 py-1 bg-red-100 text-red-700 rounded-full text-xs font-medium">
+            {incidentCount} incident{incidentCount > 1 ? 'en' : ''}
+          </span>
+        )}
+      </div>
+
+      {/* Content */}
+      {reports.length === 0 ? (
+        <div className="py-8 text-center">
+          <FileText className="h-8 w-8 text-slate-300 mx-auto mb-2" />
+          <p className="text-sm text-slate-500">Geen rapportages in de laatste 24 uur</p>
+        </div>
+      ) : (
+        <div className="space-y-3">
+          {reports.map((report) => {
+            const typeStyle = getReportTypeStyle(report.type);
+
+            return (
+              <div
+                key={report.id}
+                className="p-3 bg-slate-50 rounded-lg hover:bg-slate-100 transition-colors"
+              >
+                {/* Report header */}
+                <div className="flex items-center justify-between mb-2">
+                  <span className={`
+                    px-2 py-0.5 rounded text-xs font-medium
+                    ${typeStyle.bg} ${typeStyle.text}
+                  `}>
+                    {getReportTypeLabel(report.type)}
+                  </span>
+                  <div className="flex items-center gap-2 text-xs text-slate-500">
+                    <Clock className="h-3 w-3" />
+                    {formatDateTime(report.created_at)}
+                  </div>
+                </div>
+
+                {/* Report content */}
+                <p className="text-sm text-slate-700 leading-relaxed">
+                  {truncateContent(report.content)}
+                </p>
+
+                {/* Author if available */}
+                {report.created_by && (
+                  <div className="flex items-center gap-1 mt-2 text-xs text-slate-500">
+                    <User className="h-3 w-3" />
+                    {report.created_by}
+                  </div>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}

app/epd/overdracht/[patientId]/components/risks-block.tsx

@@ -0,0 +1,154 @@
+/**
+ * RisksBlock Component
+ * E5.S3: Actieve risico's
+ */
+
+import { ShieldAlert, AlertTriangle, Info } from 'lucide-react';
+import type { RiskAssessment } from '@/lib/types/overdracht';
+
+interface RisksBlockProps {
+  risks: RiskAssessment[];
+}
+
+function getRiskLevelConfig(level: string): {
+  label: string;
+  bgColor: string;
+  textColor: string;
+  borderColor: string;
+  icon: React.ReactNode;
+} {
+  switch (level) {
+    case 'zeer_hoog':
+      return {
+        label: 'Zeer hoog',
+        bgColor: 'bg-red-100',
+        textColor: 'text-red-700',
+        borderColor: 'border-red-400',
+        icon: <AlertTriangle className="h-4 w-4" />,
+      };
+    case 'hoog':
+      return {
+        label: 'Hoog',
+        bgColor: 'bg-orange-100',
+        textColor: 'text-orange-700',
+        borderColor: 'border-orange-400',
+        icon: <AlertTriangle className="h-4 w-4" />,
+      };
+    case 'gemiddeld':
+      return {
+        label: 'Gemiddeld',
+        bgColor: 'bg-amber-100',
+        textColor: 'text-amber-700',
+        borderColor: 'border-amber-400',
+        icon: <Info className="h-4 w-4" />,
+      };
+    case 'laag':
+    default:
+      return {
+        label: 'Laag',
+        bgColor: 'bg-green-100',
+        textColor: 'text-green-700',
+        borderColor: 'border-green-400',
+        icon: <Info className="h-4 w-4" />,
+      };
+  }
+}
+
+function getRiskTypeLabel(type: string): string {
+  const types: Record<string, string> = {
+    valrisico: 'Valrisico',
+    decubitus: 'Decubitus',
+    ondervoeding: 'Ondervoeding',
+    delier: 'Delier',
+    infectie: 'Infectie',
+    suiciderisico: 'Suïciderisico',
+    agressie: 'Agressie',
+    weglopen: 'Weglopen',
+  };
+  return types[type] || type;
+}
+
+export function RisksBlock({ risks }: RisksBlockProps) {
+  // Sort risks by level (highest first)
+  const sortedRisks = [...risks].sort((a, b) => {
+    const order = ['zeer_hoog', 'hoog', 'gemiddeld', 'laag'];
+    return order.indexOf(a.risk_level) - order.indexOf(b.risk_level);
+  });
+
+  const highRiskCount = risks.filter(
+    r => r.risk_level === 'hoog' || r.risk_level === 'zeer_hoog'
+  ).length;
+
+  return (
+    <div className="bg-white rounded-xl border border-slate-200 p-6">
+      {/* Header */}
+      <div className="flex items-center justify-between mb-4">
+        <div className="flex items-center gap-3">
+          <div className="w-10 h-10 bg-red-100 rounded-lg flex items-center justify-center">
+            <ShieldAlert className="h-5 w-5 text-red-600" />
+          </div>
+          <div>
+            <h2 className="text-lg font-semibold text-slate-900">Risico&apos;s</h2>
+            <p className="text-sm text-slate-500">
+              {risks.length} actieve risico&apos;s
+            </p>
+          </div>
+        </div>
+        {highRiskCount > 0 && (
+          <span className="px-2.5 py-1 bg-red-100 text-red-700 rounded-full text-xs font-medium">
+            {highRiskCount} hoog risico
+          </span>
+        )}
+      </div>
+
+      {/* Content */}
+      {sortedRisks.length === 0 ? (
+        <div className="py-8 text-center">
+          <ShieldAlert className="h-8 w-8 text-slate-300 mx-auto mb-2" />
+          <p className="text-sm text-slate-500">Geen actieve risico&apos;s geregistreerd</p>
+        </div>
+      ) : (
+        <div className="space-y-3">
+          {sortedRisks.map((risk) => {
+            const config = getRiskLevelConfig(risk.risk_level);
+
+            return (
+              <div
+                key={risk.id}
+                className={`
+                  p-3 rounded-lg border-l-4
+                  ${config.bgColor} ${config.borderColor}
+                `}
+              >
+                {/* Risk header */}
+                <div className="flex items-center justify-between mb-1">
+                  <div className="flex items-center gap-2">
+                    <span className={`${config.textColor}`}>
+                      {config.icon}
+                    </span>
+                    <span className={`font-medium ${config.textColor}`}>
+                      {getRiskTypeLabel(risk.risk_type)}
+                    </span>
+                  </div>
+                  <span className={`
+                    px-2 py-0.5 rounded text-xs font-medium
+                    ${config.bgColor} ${config.textColor}
+                  `}>
+                    {config.label}
+                  </span>
+                </div>
+
+                {/* Rationale if available */}
+                {risk.rationale && (
+                  <p className="text-sm text-slate-600 mt-2 leading-relaxed">
+                    {risk.rationale}
+                  </p>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}

app/epd/overdracht/[patientId]/components/vitals-block.tsx

@@ -0,0 +1,168 @@
+/**
+ * VitalsBlock Component
+ * E5.S2: Vitale functies metingen vandaag
+ */
+
+import { Activity, TrendingUp, TrendingDown, Minus } from 'lucide-react';
+import type { VitalSign } from '@/lib/types/overdracht';
+
+interface VitalsBlockProps {
+  vitals: VitalSign[];
+}
+
+function getInterpretationStyle(code: string | null | undefined): {
+  bg: string;
+  text: string;
+  icon: React.ReactNode;
+  label: string;
+} {
+  switch (code) {
+    case 'HH':
+      return {
+        bg: 'bg-red-100',
+        text: 'text-red-700',
+        icon: <TrendingUp className="h-3 w-3" />,
+        label: 'Kritisch hoog',
+      };
+    case 'H':
+      return {
+        bg: 'bg-orange-100',
+        text: 'text-orange-700',
+        icon: <TrendingUp className="h-3 w-3" />,
+        label: 'Hoog',
+      };
+    case 'LL':
+      return {
+        bg: 'bg-red-100',
+        text: 'text-red-700',
+        icon: <TrendingDown className="h-3 w-3" />,
+        label: 'Kritisch laag',
+      };
+    case 'L':
+      return {
+        bg: 'bg-orange-100',
+        text: 'text-orange-700',
+        icon: <TrendingDown className="h-3 w-3" />,
+        label: 'Laag',
+      };
+    case 'N':
+    default:
+      return {
+        bg: 'bg-green-100',
+        text: 'text-green-700',
+        icon: <Minus className="h-3 w-3" />,
+        label: 'Normaal',
+      };
+  }
+}
+
+function formatTime(datetime: string): string {
+  return new Date(datetime).toLocaleTimeString('nl-NL', {
+    hour: '2-digit',
+    minute: '2-digit',
+  });
+}
+
+function formatValue(value: number | null, unit: string | null): string {
+  if (value === null) return '-';
+  if (unit) return `${value} ${unit}`;
+  return String(value);
+}
+
+export function VitalsBlock({ vitals }: VitalsBlockProps) {
+  // Group vitals by type (code_display)
+  const groupedVitals = vitals.reduce((acc, vital) => {
+    const key = vital.code_display;
+    if (!acc[key]) {
+      acc[key] = [];
+    }
+    acc[key].push(vital);
+    return acc;
+  }, {} as Record<string, VitalSign[]>);
+
+  // Get most recent vital per type
+  const latestVitals = Object.entries(groupedVitals).map(([type, measurements]) => ({
+    type,
+    latest: measurements[0], // Already sorted by time desc
+    count: measurements.length,
+  }));
+
+  const abnormalCount = vitals.filter(
+    v => v.interpretation_code && ['H', 'L', 'HH', 'LL'].includes(v.interpretation_code)
+  ).length;
+
+  return (
+    <div className="bg-white rounded-xl border border-slate-200 p-6">
+      {/* Header */}
+      <div className="flex items-center justify-between mb-4">
+        <div className="flex items-center gap-3">
+          <div className="w-10 h-10 bg-teal-100 rounded-lg flex items-center justify-center">
+            <Activity className="h-5 w-5 text-teal-600" />
+          </div>
+          <div>
+            <h2 className="text-lg font-semibold text-slate-900">Vitale functies</h2>
+            <p className="text-sm text-slate-500">
+              {vitals.length} metingen vandaag
+            </p>
+          </div>
+        </div>
+        {abnormalCount > 0 && (
+          <span className="px-2.5 py-1 bg-orange-100 text-orange-700 rounded-full text-xs font-medium">
+            {abnormalCount} afwijkend
+          </span>
+        )}
+      </div>
+
+      {/* Content */}
+      {latestVitals.length === 0 ? (
+        <div className="py-8 text-center">
+          <Activity className="h-8 w-8 text-slate-300 mx-auto mb-2" />
+          <p className="text-sm text-slate-500">Geen vitale functies gemeten vandaag</p>
+        </div>
+      ) : (
+        <div className="space-y-3">
+          {latestVitals.map(({ type, latest, count }) => {
+            const style = getInterpretationStyle(latest.interpretation_code);
+            const isAbnormal = latest.interpretation_code && ['H', 'L', 'HH', 'LL'].includes(latest.interpretation_code);
+
+            return (
+              <div
+                key={latest.id}
+                className={`
+                  flex items-center justify-between p-3 rounded-lg
+                  ${isAbnormal ? style.bg : 'bg-slate-50'}
+                `}
+              >
+                <div className="flex items-center gap-3">
+                  <div className={`
+                    w-8 h-8 rounded-full flex items-center justify-center
+                    ${isAbnormal ? style.bg : 'bg-white'}
+                  `}>
+                    {style.icon}
+                  </div>
+                  <div>
+                    <p className={`font-medium ${isAbnormal ? style.text : 'text-slate-900'}`}>
+                      {type}
+                    </p>
+                    <p className="text-xs text-slate-500">
+                      {formatTime(latest.effective_datetime)}
+                      {count > 1 && ` • ${count} metingen`}
+                    </p>
+                  </div>
+                </div>
+                <div className="text-right">
+                  <p className={`text-lg font-semibold ${isAbnormal ? style.text : 'text-slate-900'}`}>
+                    {formatValue(latest.value_quantity_value, latest.value_quantity_unit)}
+                  </p>
+                  {isAbnormal && (
+                    <p className={`text-xs ${style.text}`}>{style.label}</p>
+                  )}
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}