perf: Performance optimalisaties (4 iteraties)

Iteratie 1 - Parallel Fetching:
- Patient dashboard: Promise.all voor 3 data fetches
- Resultaat: ~45% sneller (800ms → 440ms)

Iteratie 2 - Loading States:
- Skeleton loaders voor EPD, patient, agenda, rapportage
- Betere perceived performance tijdens laden

Iteratie 3 - Lazy Load FullCalendar:
- Dynamic import met next/dynamic (ssr: false)
- ~150KB minder in initiële bundle

Iteratie 4 - Reports API Optimalisatie:
- Selectieve kolommen (10 i.p.v. 20)
- Server-side pagination (limit/offset)
- Database indexes voor timeline queries
- Resultaat: 89% sneller (1671ms → 188ms)

Overige fixes:
- Type casts voor Json → Behandelstructuur/SmartGoal/etc.
- Metadata template fix in layout.tsx

Documentatie:
- docs/audit-rapport.md - PO-vriendelijk audit rapport
- docs/performance/baseline-2025-12-12.md - Metingen + resultaten

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

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

app/epd/agenda/components/agenda-view.tsx

@@ -7,10 +7,25 @@
  */
 
 import React, { useState, useCallback, useRef, useTransition, useEffect } from 'react';
+import dynamic from 'next/dynamic';
 import { startOfWeek, endOfWeek, addDays, format } from 'date-fns';
 import { toast } from '@/hooks/use-toast';
 
-import { AgendaCalendar } from './agenda-calendar';
+// Lazy load FullCalendar component (~150KB+ savings)
+const AgendaCalendar = dynamic(
+  () => import('./agenda-calendar').then((mod) => mod.AgendaCalendar),
+  {
+    ssr: false,
+    loading: () => (
+      <div className="h-full bg-slate-50 rounded-lg flex items-center justify-center">
+        <div className="flex flex-col items-center gap-3">
+          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-teal-600" />
+          <span className="text-sm text-slate-500">Agenda laden...</span>
+        </div>
+      </div>
+    ),
+  }
+);
 import { AgendaToolbar } from './agenda-toolbar';
 import { AppointmentModal } from './appointment-modal';
 import { RescheduleDialog } from './reschedule-dialog';

app/epd/agenda/loading.tsx

@@ -0,0 +1,19 @@
+export default function AgendaLoading() {
+  return (
+    <div className="p-6 space-y-4">
+      {/* Header skeleton */}
+      <div className="flex items-center justify-between">
+        <div className="h-8 w-32 bg-slate-200 rounded animate-pulse" />
+        <div className="flex gap-2">
+          <div className="h-10 w-24 bg-slate-100 rounded animate-pulse" />
+          <div className="h-10 w-24 bg-slate-100 rounded animate-pulse" />
+        </div>
+      </div>
+
+      {/* Calendar skeleton */}
+      <div className="h-[600px] bg-slate-100 rounded-lg animate-pulse flex items-center justify-center">
+        <span className="text-slate-400">Agenda laden...</span>
+      </div>
+    </div>
+  );
+}