feat(agenda): Epic 4 - EPD Koppeling (appointment-report integration)

Implements bidirectional linking between appointments and reports:
- E4.S1: Create report from appointment modal with encounter pre-linked
- E4.S2: Link existing reports to appointments via EncounterSelector
- E4.S3: Show linked reports in appointment modal edit view
- E4.S4: Navigation between appointments and reports with deep linking

Also includes bug fixes for patient search:
- Fix FHIR to internal format mapping for patient data
- Fix debounced search interference after patient selection
- Fix UUID handling for optional practitioner_id

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

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

app/epd/agenda/components/cancel-dialog.tsx

@@ -0,0 +1,95 @@
+'use client';
+
+/**
+ * Cancel Appointment Confirmation Dialog
+ *
+ * Confirms appointment cancellation (soft delete).
+ */
+
+import { format } from 'date-fns';
+import { nl } from 'date-fns/locale';
+import { AlertTriangle, Calendar } from 'lucide-react';
+
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+
+interface CancelDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  patientName: string;
+  appointmentType: string;
+  appointmentDate: Date;
+  onConfirm: () => void;
+  isLoading?: boolean;
+}
+
+export function CancelDialog({
+  open,
+  onOpenChange,
+  patientName,
+  appointmentType,
+  appointmentDate,
+  onConfirm,
+  isLoading,
+}: CancelDialogProps) {
+  const formatDateTime = (date: Date) => {
+    return format(date, "EEEE d MMMM 'om' HH:mm", { locale: nl });
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2 text-red-600">
+            <AlertTriangle className="h-5 w-5" />
+            Afspraak annuleren
+          </DialogTitle>
+          <DialogDescription asChild>
+            <div className="space-y-4 pt-2">
+              <p>
+                Weet je zeker dat je deze afspraak wilt annuleren? Deze actie kan
+                niet ongedaan worden gemaakt.
+              </p>
+
+              <div className="bg-red-50 rounded-lg p-4 border border-red-100">
+                <div className="flex items-start gap-3">
+                  <Calendar className="h-5 w-5 text-red-600 mt-0.5" />
+                  <div>
+                    <div className="font-medium text-slate-900">{patientName}</div>
+                    <div className="text-sm text-slate-600">{appointmentType}</div>
+                    <div className="text-sm text-slate-500 mt-1">
+                      {formatDateTime(appointmentDate)}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </DialogDescription>
+        </DialogHeader>
+        <DialogFooter className="gap-2 sm:gap-0">
+          <Button
+            variant="outline"
+            onClick={() => onOpenChange(false)}
+            disabled={isLoading}
+          >
+            Terug
+          </Button>
+          <Button
+            variant="destructive"
+            onClick={onConfirm}
+            disabled={isLoading}
+          >
+            {isLoading ? 'Annuleren...' : 'Afspraak annuleren'}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}