feat(diagnose): Master-detail layout en verbeterde ICD-10 combobox

Diagnose pagina:
- Master-detail layout (lijst links, formulier rechts)
- URL state voor selectie (?selected=uuid of ?selected=new)
- Inline CRUD zonder modals of navigatie
- Vereenvoudigde header (alleen actieve diagnoses teller)

ICD-10 Combobox:
- Vervangen cmdk/Command met simpele Popover + buttons (fix selectie bug)
- Direct typen in input veld (geen extra klik nodig)
- Auto-open dropdown bij focus/typen

Database:
- Fix FK constraint: conditions.encounter_id -> intakes (was encounters)

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

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

app/epd/patients/[id]/diagnose/actions.ts

@@ -1,9 +1,11 @@
 'use server';
 
+import { revalidatePath } from 'next/cache';
 import { createClient } from '@/lib/auth/server';
 import type { Database } from '@/lib/supabase/database.types';
 
 export type Condition = Database['public']['Tables']['conditions']['Row'];
+type ClinicalStatus = 'active' | 'recurrence' | 'relapse' | 'inactive' | 'remission' | 'resolved';
 
 export type IntakeInfo = {
   id: string;
@@ -69,3 +71,131 @@ export async function getPatientDiagnoses(patientId: string): Promise<DiagnosisW
     intake: condition.encounter_id ? intakeMap.get(condition.encounter_id) || null : null,
   }));
 }
+
+/**
+ * Haal alle intakes op voor een patiënt (voor intake selectie dropdown)
+ */
+export async function getPatientIntakes(patientId: string) {
+  const supabase = await createClient();
+  const { data, error } = await supabase
+    .from('intakes')
+    .select('id, title, department, start_date')
+    .eq('patient_id', patientId)
+    .order('start_date', { ascending: false });
+
+  if (error) {
+    console.error('getPatientIntakes error', error);
+    throw new Error('Kon intakes niet ophalen');
+  }
+  return data || [];
+}
+
+// ---------------- CRUD Actions ----------------
+
+export interface CreateDiagnosisPayload {
+  patientId: string;
+  intakeId: string;
+  code: string;
+  description: string;
+  severity?: string;
+  status?: ClinicalStatus;
+  notes?: string;
+  diagnosisType?: 'primary' | 'secondary';
+}
+
+export async function createPatientDiagnosis(payload: CreateDiagnosisPayload) {
+  const supabase = await createClient();
+
+  const insertData = {
+    patient_id: payload.patientId,
+    encounter_id: payload.intakeId,
+    code_code: payload.code,
+    code_display: payload.description,
+    code_system: 'ICD-10',
+    clinical_status: payload.status || 'active',
+    severity_display: payload.severity || null,
+    category: payload.diagnosisType === 'primary' ? 'primary-diagnosis' : 'encounter-diagnosis',
+    note: payload.notes || null,
+    recorded_date: new Date().toISOString(),
+  };
+
+  console.log('createPatientDiagnosis payload:', JSON.stringify(insertData, null, 2));
+
+  const { error } = await supabase.from('conditions').insert(insertData);
+
+  if (error) {
+    console.error('createPatientDiagnosis error:', error.message, error.details, error.hint);
+    throw new Error(`Diagnose opslaan mislukt: ${error.message}`);
+  }
+
+  revalidatePath(`/epd/patients/${payload.patientId}/diagnose`);
+}
+
+export interface UpdateDiagnosisPayload {
+  code?: string;
+  description?: string;
+  severity?: string;
+  status?: string;
+  notes?: string;
+  diagnosisType?: 'primary' | 'secondary';
+}
+
+export async function updatePatientDiagnosis(
+  patientId: string,
+  diagnosisId: string,
+  payload: UpdateDiagnosisPayload
+): Promise<{ success: boolean; error?: string }> {
+  const supabase = await createClient();
+
+  const updateData: Record<string, unknown> = {
+    updated_at: new Date().toISOString(),
+  };
+
+  if (payload.code !== undefined) {
+    updateData.code_code = payload.code;
+  }
+  if (payload.description !== undefined) {
+    updateData.code_display = payload.description;
+  }
+  if (payload.status !== undefined) {
+    updateData.clinical_status = payload.status;
+  }
+  if (payload.severity !== undefined) {
+    updateData.severity_display = payload.severity;
+  }
+  if (payload.notes !== undefined) {
+    updateData.note = payload.notes;
+  }
+  if (payload.diagnosisType !== undefined) {
+    updateData.category = payload.diagnosisType === 'primary' ? 'primary-diagnosis' : 'encounter-diagnosis';
+  }
+
+  const { error } = await supabase
+    .from('conditions')
+    .update(updateData)
+    .eq('id', diagnosisId);
+
+  if (error) {
+    console.error('updatePatientDiagnosis error', error);
+    return { success: false, error: 'Diagnose bijwerken mislukt' };
+  }
+
+  revalidatePath(`/epd/patients/${patientId}/diagnose`);
+  return { success: true };
+}
+
+export async function deletePatientDiagnosis(
+  patientId: string,
+  diagnosisId: string
+): Promise<{ success: boolean; error?: string }> {
+  const supabase = await createClient();
+  const { error } = await supabase.from('conditions').delete().eq('id', diagnosisId);
+
+  if (error) {
+    console.error('deletePatientDiagnosis error', error);
+    return { success: false, error: 'Diagnose verwijderen mislukt' };
+  }
+
+  revalidatePath(`/epd/patients/${patientId}/diagnose`);
+  return { success: true };
+}

app/epd/patients/[id]/diagnose/components/diagnosis-detail-form.tsx

@@ -0,0 +1,435 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Loader2, Stethoscope, Trash2 } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { toast } from '@/hooks/use-toast';
+import { ICD10Combobox } from '@/app/epd/patients/[id]/intakes/[intakeId]/diagnosis/components/icd10-combobox';
+import {
+  diagnosisSchema,
+  diagnosisDefaults,
+  type DiagnosisFormData,
+  DIAGNOSIS_SEVERITIES,
+  DIAGNOSIS_TYPES,
+  DIAGNOSIS_STATUSES,
+} from '@/lib/schemas/diagnosis';
+import {
+  createPatientDiagnosis,
+  updatePatientDiagnosis,
+  deletePatientDiagnosis,
+  type DiagnosisWithIntake,
+  type IntakeInfo,
+} from '../actions';
+import type { ICD10Code } from '@/lib/types/icd10';
+
+interface DiagnosisDetailFormProps {
+  patientId: string;
+  intakes: IntakeInfo[];
+  diagnosis: DiagnosisWithIntake | null;
+  isNew: boolean;
+  onSaved: () => void;
+  onDeleted: () => void;
+}
+
+const STATUS_LABELS: Record<string, string> = {
+  active: 'Actief',
+  remission: 'In remissie',
+  resolved: 'Opgelost',
+  inactive: 'Inactief',
+};
+
+const SEVERITY_LABELS: Record<string, string> = {
+  licht: 'Licht',
+  matig: 'Matig',
+  ernstig: 'Ernstig',
+};
+
+const DIAGNOSIS_TYPE_LABELS: Record<string, string> = {
+  primary: 'Hoofddiagnose',
+  secondary: 'Nevendiagnose',
+};
+
+export function DiagnosisDetailForm({
+  patientId,
+  intakes,
+  diagnosis,
+  isNew,
+  onSaved,
+  onDeleted,
+}: DiagnosisDetailFormProps) {
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [isDeleting, setIsDeleting] = useState(false);
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
+  const [selectedICD10Code, setSelectedICD10Code] = useState<ICD10Code | null>(null);
+  const [selectedIntakeId, setSelectedIntakeId] = useState<string>(
+    diagnosis?.encounter_id || intakes[0]?.id || ''
+  );
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+    reset,
+    setValue,
+    watch,
+  } = useForm<DiagnosisFormData>({
+    resolver: zodResolver(diagnosisSchema),
+    defaultValues: diagnosisDefaults,
+  });
+
+  const diagnosisType = watch('diagnosisType');
+  const severity = watch('severity');
+  const status = watch('status');
+
+  // Reset form wanneer diagnosis wijzigt
+  useEffect(() => {
+    if (diagnosis) {
+      setValue('code', diagnosis.code_code || '');
+      setValue('description', diagnosis.code_display || '');
+      setValue('severity', (diagnosis.severity_display as 'licht' | 'matig' | 'ernstig') || 'matig');
+      setValue('status', (diagnosis.clinical_status as 'active' | 'remission' | 'resolved' | 'inactive') || 'active');
+      setValue('diagnosisType', diagnosis.category === 'primary-diagnosis' ? 'primary' : 'secondary');
+      setValue('notes', diagnosis.note || '');
+
+      if (diagnosis.code_code && diagnosis.code_display) {
+        setSelectedICD10Code({
+          code: diagnosis.code_code,
+          display: diagnosis.code_display,
+          keywords: [],
+        });
+      }
+      setSelectedIntakeId(diagnosis.encounter_id || intakes[0]?.id || '');
+    } else {
+      reset(diagnosisDefaults);
+      setSelectedICD10Code(null);
+      setSelectedIntakeId(intakes[0]?.id || '');
+    }
+    setShowDeleteConfirm(false);
+  }, [diagnosis, reset, setValue, intakes]);
+
+  const handleICD10Select = (code: ICD10Code) => {
+    setSelectedICD10Code(code);
+    setValue('code', code.code);
+    setValue('description', code.display);
+  };
+
+  const onSubmit = async (data: DiagnosisFormData) => {
+    if (!selectedIntakeId) {
+      toast({
+        variant: 'destructive',
+        title: 'Intake vereist',
+        description: 'Selecteer een intake om de diagnose aan te koppelen.',
+      });
+      return;
+    }
+
+    setIsSubmitting(true);
+
+    try {
+      if (isNew) {
+        await createPatientDiagnosis({
+          patientId,
+          intakeId: selectedIntakeId,
+          code: data.code,
+          description: data.description,
+          severity: data.severity,
+          status: data.status,
+          notes: data.notes || undefined,
+          diagnosisType: data.diagnosisType,
+        });
+
+        toast({
+          title: 'Diagnose toegevoegd',
+          description: `${data.code} — ${data.description}`,
+        });
+      } else if (diagnosis) {
+        const result = await updatePatientDiagnosis(patientId, diagnosis.id, {
+          code: data.code,
+          description: data.description,
+          severity: data.severity,
+          status: data.status,
+          notes: data.notes || undefined,
+          diagnosisType: data.diagnosisType,
+        });
+
+        if (!result.success) {
+          toast({
+            variant: 'destructive',
+            title: 'Bijwerken mislukt',
+            description: result.error || 'Er ging iets mis.',
+          });
+          return;
+        }
+
+        toast({
+          title: 'Diagnose bijgewerkt',
+          description: `${data.code} — ${data.description}`,
+        });
+      }
+
+      onSaved();
+    } catch (error) {
+      toast({
+        variant: 'destructive',
+        title: 'Opslaan mislukt',
+        description: error instanceof Error ? error.message : 'Er ging iets mis.',
+      });
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleDelete = async () => {
+    if (!diagnosis) return;
+
+    setIsDeleting(true);
+
+    try {
+      const result = await deletePatientDiagnosis(patientId, diagnosis.id);
+
+      if (!result.success) {
+        toast({
+          variant: 'destructive',
+          title: 'Verwijderen mislukt',
+          description: result.error || 'Er ging iets mis.',
+        });
+        return;
+      }
+
+      toast({
+        title: 'Diagnose verwijderd',
+        description: `${diagnosis.code_code} is verwijderd.`,
+      });
+
+      onDeleted();
+    } catch (error) {
+      toast({
+        variant: 'destructive',
+        title: 'Verwijderen mislukt',
+        description: error instanceof Error ? error.message : 'Er ging iets mis.',
+      });
+    } finally {
+      setIsDeleting(false);
+      setShowDeleteConfirm(false);
+    }
+  };
+
+  // Empty state
+  if (!isNew && !diagnosis) {
+    return (
+      <div className="flex flex-col items-center justify-center h-full py-12 text-center">
+        <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-slate-100 mb-4">
+          <Stethoscope className="h-8 w-8 text-slate-400" />
+        </div>
+        <h3 className="text-lg font-medium text-slate-900 mb-1">Geen diagnose geselecteerd</h3>
+        <p className="text-sm text-slate-500">
+          Selecteer een diagnose uit de lijst of voeg een nieuwe toe.
+        </p>
+      </div>
+    );
+  }
+
+  const selectedIntake = intakes.find((i) => i.id === selectedIntakeId);
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)} className="space-y-5">
+      {/* Header */}
+      <div className="border-b border-slate-200 pb-4">
+        <h3 className="text-lg font-semibold text-slate-900">
+          {isNew ? 'Nieuwe diagnose' : 'Diagnose bewerken'}
+        </h3>
+        {!isNew && diagnosis && (
+          <p className="text-sm text-slate-500 mt-1">
+            Gekoppeld aan: {diagnosis.intake?.title || diagnosis.intake?.department || 'Intake'}
+          </p>
+        )}
+      </div>
+
+      {/* Intake selectie (alleen bij nieuwe diagnose) */}
+      {isNew && intakes.length > 0 && (
+        <div className="space-y-2">
+          <Label>
+            Intake <span className="text-red-500">*</span>
+          </Label>
+          <Select
+            value={selectedIntakeId}
+            onValueChange={setSelectedIntakeId}
+            disabled={isSubmitting}
+          >
+            <SelectTrigger>
+              <SelectValue placeholder="Selecteer intake" />
+            </SelectTrigger>
+            <SelectContent>
+              {intakes.map((intake) => (
+                <SelectItem key={intake.id} value={intake.id}>
+                  {intake.title || intake.department || 'Intake'}{' '}
+                  {intake.start_date && `(${new Date(intake.start_date).toLocaleDateString('nl-NL')})`}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+      )}
+
+      {/* ICD-10 Code */}
+      <div className="space-y-2">
+        <Label>
+          ICD-10 Code <span className="text-red-500">*</span>
+        </Label>
+        <ICD10Combobox
+          value={selectedICD10Code?.code || ''}
+          onSelect={handleICD10Select}
+          placeholder="Zoek op code of beschrijving..."
+          disabled={isSubmitting}
+        />
+        {errors.code && <p className="text-sm text-red-600">{errors.code.message}</p>}
+        {errors.description && <p className="text-sm text-red-600">{errors.description.message}</p>}
+      </div>
+
+      {/* Ernst en Type */}
+      <div className="grid grid-cols-2 gap-4">
+        <div className="space-y-2">
+          <Label>
+            Ernst <span className="text-red-500">*</span>
+          </Label>
+          <Select
+            value={severity}
+            onValueChange={(value) => setValue('severity', value as 'licht' | 'matig' | 'ernstig')}
+            disabled={isSubmitting}
+          >
+            <SelectTrigger>
+              <SelectValue placeholder="Selecteer" />
+            </SelectTrigger>
+            <SelectContent>
+              {DIAGNOSIS_SEVERITIES.map((sev) => (
+                <SelectItem key={sev} value={sev}>
+                  {SEVERITY_LABELS[sev]}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+          {errors.severity && <p className="text-sm text-red-600">{errors.severity.message}</p>}
+        </div>
+
+        <div className="space-y-2">
+          <Label>
+            Type <span className="text-red-500">*</span>
+          </Label>
+          <div className="flex gap-4 pt-2">
+            {DIAGNOSIS_TYPES.map((type) => (
+              <label key={type} className="flex items-center gap-2 cursor-pointer">
+                <input
+                  type="radio"
+                  value={type}
+                  checked={diagnosisType === type}
+                  onChange={(e) => setValue('diagnosisType', e.target.value as 'primary' | 'secondary')}
+                  disabled={isSubmitting}
+                  className="h-4 w-4 text-teal-600 focus:ring-teal-500"
+                />
+                <span className="text-sm">{DIAGNOSIS_TYPE_LABELS[type]}</span>
+              </label>
+            ))}
+          </div>
+          {errors.diagnosisType && <p className="text-sm text-red-600">{errors.diagnosisType.message}</p>}
+        </div>
+      </div>
+
+      {/* Status */}
+      <div className="space-y-2">
+        <Label>
+          Status <span className="text-red-500">*</span>
+        </Label>
+        <Select
+          value={status}
+          onValueChange={(value) => setValue('status', value as 'active' | 'remission' | 'resolved' | 'inactive')}
+          disabled={isSubmitting}
+        >
+          <SelectTrigger>
+            <SelectValue placeholder="Selecteer" />
+          </SelectTrigger>
+          <SelectContent>
+            {DIAGNOSIS_STATUSES.map((stat) => (
+              <SelectItem key={stat} value={stat}>
+                {STATUS_LABELS[stat]}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+        {errors.status && <p className="text-sm text-red-600">{errors.status.message}</p>}
+      </div>
+
+      {/* Onderbouwing */}
+      <div className="space-y-2">
+        <Label>Onderbouwing (optioneel)</Label>
+        <Textarea
+          {...register('notes')}
+          placeholder="Klinische redenering..."
+          rows={4}
+          disabled={isSubmitting}
+          maxLength={500}
+        />
+        <p className="text-xs text-slate-500">{watch('notes')?.length || 0} / 500 karakters</p>
+        {errors.notes && <p className="text-sm text-red-600">{errors.notes.message}</p>}
+      </div>
+
+      {/* Actions */}
+      <div className="flex items-center justify-between pt-4 border-t border-slate-200">
+        {!isNew && diagnosis && !showDeleteConfirm && (
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            onClick={() => setShowDeleteConfirm(true)}
+            disabled={isSubmitting || isDeleting}
+            className="text-red-600 hover:text-red-700 hover:bg-red-50"
+          >
+            <Trash2 className="h-4 w-4 mr-1" />
+            Verwijderen
+          </Button>
+        )}
+
+        {showDeleteConfirm && (
+          <div className="flex items-center gap-2">
+            <span className="text-sm text-red-600">Zeker weten?</span>
+            <Button
+              type="button"
+              variant="destructive"
+              size="sm"
+              onClick={handleDelete}
+              disabled={isDeleting}
+            >
+              {isDeleting ? <Loader2 className="h-4 w-4 animate-spin" /> : 'Ja, verwijder'}
+            </Button>
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              onClick={() => setShowDeleteConfirm(false)}
+              disabled={isDeleting}
+            >
+              Annuleren
+            </Button>
+          </div>
+        )}
+
+        {(isNew || !showDeleteConfirm) && (
+          <Button type="submit" disabled={isSubmitting} className={isNew ? 'ml-auto' : ''}>
+            {isSubmitting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+            {isSubmitting ? 'Opslaan...' : 'Opslaan'}
+          </Button>
+        )}
+      </div>
+    </form>
+  );
+}

app/epd/patients/[id]/diagnose/components/diagnosis-list-item.tsx

@@ -0,0 +1,64 @@
+'use client';
+
+import { Badge } from '@/components/ui/badge';
+import { cn } from '@/lib/utils';
+import type { DiagnosisWithIntake } from '../actions';
+
+interface DiagnosisListItemProps {
+  diagnosis: DiagnosisWithIntake;
+  isSelected: boolean;
+  onClick: () => void;
+}
+
+const STATUS_CONFIG: Record<string, { label: string; className: string }> = {
+  active: { label: 'Actief', className: 'bg-green-100 text-green-700 border-green-300' },
+  remission: { label: 'Remissie', className: 'bg-blue-100 text-blue-700 border-blue-300' },
+  resolved: { label: 'Opgelost', className: 'bg-slate-100 text-slate-700 border-slate-300' },
+  inactive: { label: 'Inactief', className: 'bg-amber-100 text-amber-700 border-amber-300' },
+};
+
+export function DiagnosisListItem({ diagnosis, isSelected, onClick }: DiagnosisListItemProps) {
+  const code = diagnosis.code_code || '';
+  const description = diagnosis.code_display || '';
+  const status = diagnosis.clinical_status || 'active';
+  const isPrimary = diagnosis.category === 'primary-diagnosis';
+  const statusConfig = STATUS_CONFIG[status] || STATUS_CONFIG.active;
+
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={cn(
+        'w-full text-left p-3 rounded-lg border transition-all',
+        'hover:border-teal-300 hover:bg-teal-50/50',
+        isSelected
+          ? 'border-teal-500 bg-teal-50 ring-1 ring-teal-500'
+          : 'border-slate-200 bg-white'
+      )}
+    >
+      <div className="flex items-start justify-between gap-2">
+        <div className="min-w-0 flex-1">
+          <div className="font-medium text-slate-900 truncate">
+            <span className="font-mono text-sm">{code}</span>
+            {description && (
+              <span className="ml-1.5 text-slate-700 font-normal">{description}</span>
+            )}
+          </div>
+          <div className="flex items-center gap-2 mt-1">
+            <Badge
+              variant="outline"
+              className={cn('text-xs', statusConfig.className)}
+            >
+              {statusConfig.label}
+            </Badge>
+            {isPrimary && (
+              <Badge className="bg-green-600 text-white text-xs hover:bg-green-600">
+                HOOFD
+              </Badge>
+            )}
+          </div>
+        </div>
+      </div>
+    </button>
+  );
+}

app/epd/patients/[id]/diagnose/components/diagnosis-master-detail.tsx

@@ -0,0 +1,133 @@
+'use client';
+
+import { useSearchParams, useRouter, usePathname } from 'next/navigation';
+import { Plus, Stethoscope } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { DiagnosisListItem } from './diagnosis-list-item';
+import { DiagnosisDetailForm } from './diagnosis-detail-form';
+import type { DiagnosisWithIntake, IntakeInfo } from '../actions';
+
+interface DiagnosisMasterDetailProps {
+  patientId: string;
+  diagnoses: DiagnosisWithIntake[];
+  intakes: IntakeInfo[];
+}
+
+export function DiagnosisMasterDetail({
+  patientId,
+  diagnoses,
+  intakes,
+}: DiagnosisMasterDetailProps) {
+  const searchParams = useSearchParams();
+  const router = useRouter();
+  const pathname = usePathname();
+
+  const selectedId = searchParams.get('selected');
+  const isNew = selectedId === 'new';
+  const selectedDiagnosis = selectedId && !isNew
+    ? diagnoses.find((d) => d.id === selectedId) || null
+    : null;
+
+  const updateSelection = (id: string | null) => {
+    const params = new URLSearchParams(searchParams.toString());
+    if (id) {
+      params.set('selected', id);
+    } else {
+      params.delete('selected');
+    }
+    router.push(`${pathname}?${params.toString()}`, { scroll: false });
+  };
+
+  const handleNewDiagnosis = () => {
+    updateSelection('new');
+  };
+
+  const handleSelectDiagnosis = (id: string) => {
+    updateSelection(id);
+  };
+
+  const handleSaved = () => {
+    // Na opslaan blijven we op dezelfde selectie (of clear bij new)
+    if (isNew) {
+      updateSelection(null);
+    }
+    // Router refresh gebeurt automatisch door revalidatePath
+  };
+
+  const handleDeleted = () => {
+    updateSelection(null);
+  };
+
+  // Sorteer: hoofddiagnoses eerst, dan actieve, dan op datum
+  const sortedDiagnoses = [...diagnoses].sort((a, b) => {
+    const aIsPrimary = a.category === 'primary-diagnosis';
+    const bIsPrimary = b.category === 'primary-diagnosis';
+    if (aIsPrimary && !bIsPrimary) return -1;
+    if (!aIsPrimary && bIsPrimary) return 1;
+
+    const aIsActive = a.clinical_status === 'active';
+    const bIsActive = b.clinical_status === 'active';
+    if (aIsActive && !bIsActive) return -1;
+    if (!aIsActive && bIsActive) return 1;
+
+    const aDate = a.recorded_date ? new Date(a.recorded_date).getTime() : 0;
+    const bDate = b.recorded_date ? new Date(b.recorded_date).getTime() : 0;
+    return bDate - aDate;
+  });
+
+  return (
+    <div className="grid grid-cols-1 lg:grid-cols-5 gap-6 min-h-[500px]">
+      {/* Master: Lijst (2 kolommen) */}
+      <div className="lg:col-span-2 space-y-3">
+        <div className="flex items-center justify-between mb-4">
+          <h3 className="text-sm font-medium text-slate-700">
+            {diagnoses.length} diagnose{diagnoses.length !== 1 ? 's' : ''}
+          </h3>
+          <Button onClick={handleNewDiagnosis} size="sm" disabled={intakes.length === 0}>
+            <Plus className="h-4 w-4 mr-1" />
+            Nieuw
+          </Button>
+        </div>
+
+        {intakes.length === 0 && (
+          <div className="bg-amber-50 border border-amber-200 rounded-lg p-4 text-sm text-amber-800">
+            Er is nog geen intake voor deze patiënt. Maak eerst een intake aan.
+          </div>
+        )}
+
+        {sortedDiagnoses.length === 0 && intakes.length > 0 ? (
+          <div className="text-center py-8 text-slate-500">
+            <div className="inline-flex items-center justify-center w-12 h-12 rounded-full bg-slate-100 mb-3">
+              <Stethoscope className="h-6 w-6 text-slate-400" />
+            </div>
+            <p className="text-sm">Nog geen diagnoses</p>
+            <p className="text-xs mt-1">Klik op &quot;Nieuw&quot; om er een toe te voegen.</p>
+          </div>
+        ) : (
+          <div className="space-y-2">
+            {sortedDiagnoses.map((diagnosis) => (
+              <DiagnosisListItem
+                key={diagnosis.id}
+                diagnosis={diagnosis}
+                isSelected={selectedId === diagnosis.id}
+                onClick={() => handleSelectDiagnosis(diagnosis.id)}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* Detail: Formulier (3 kolommen) */}
+      <div className="lg:col-span-3 bg-white rounded-lg border border-slate-200 p-5">
+        <DiagnosisDetailForm
+          patientId={patientId}
+          intakes={intakes}
+          diagnosis={selectedDiagnosis}
+          isNew={isNew}
+          onSaved={handleSaved}
+          onDeleted={handleDeleted}
+        />
+      </div>
+    </div>
+  );
+}

app/epd/patients/[id]/diagnose/page.tsx

@@ -1,16 +1,15 @@
 /**
  * Diagnose Overzicht Pagina
  *
- * Toont alle diagnoses van een patiënt (uit alle intakes).
+ * Master-detail layout voor diagnoses:
- * Diagnoses kunnen worden bewerkt via de gekoppelde intake.
+ * - Links: lijst van diagnoses met selectie
+ * - Rechts: formulier voor bekijken/bewerken/toevoegen
  */
 
-import { Stethoscope, Plus } from 'lucide-react';
+import { Suspense } from 'react';
-import Link from 'next/link';
+import { Activity } from 'lucide-react';
-import { Button } from '@/components/ui/button';
+import { getPatientDiagnoses, getPatientIntakes } from './actions';
-import { getPatientDiagnoses } from './actions';
+import { DiagnosisMasterDetail } from './components/diagnosis-master-detail';
-import { DiagnosisOverviewCard } from './components/diagnosis-overview-card';
-import { createClient } from '@/lib/auth/server';
 
 export default async function DiagnosePage({
   params,
@@ -19,127 +18,37 @@ export default async function DiagnosePage({
 }) {
   const { id: patientId } = await params;
 
-  // Haal alle diagnoses op
+  // Haal diagnoses en intakes parallel op
-  const diagnoses = await getPatientDiagnoses(patientId);
+  const [diagnoses, intakes] = await Promise.all([
-
+    getPatientDiagnoses(patientId),
-  // Sorteer: hoofddiagnoses eerst, dan actieve, dan op datum
+    getPatientIntakes(patientId),
-  const sortedDiagnoses = [...diagnoses].sort((a, b) => {
+  ]);
-    // Hoofddiagnoses eerst
-    const aIsPrimary = a.category === 'primary-diagnosis';
-    const bIsPrimary = b.category === 'primary-diagnosis';
-    if (aIsPrimary && !bIsPrimary) return -1;
-    if (!aIsPrimary && bIsPrimary) return 1;
-
-    // Actieve diagnoses eerst
-    const aIsActive = a.clinical_status === 'active';
-    const bIsActive = b.clinical_status === 'active';
-    if (aIsActive && !bIsActive) return -1;
-    if (!aIsActive && bIsActive) return 1;
-
-    // Dan op datum (nieuwste eerst)
-    const aDate = a.recorded_date ? new Date(a.recorded_date).getTime() : 0;
-    const bDate = b.recorded_date ? new Date(b.recorded_date).getTime() : 0;
-    return bDate - aDate;
-  });
 
   // Tel actieve diagnoses
   const activeDiagnoses = diagnoses.filter((d) => d.clinical_status === 'active');
-  const primaryDiagnosis = diagnoses.find((d) => d.category === 'primary-diagnosis');
-
-  // Haal meest recente intake op voor "Nieuwe diagnose" link
-  const supabase = await createClient();
-  const { data: recentIntake } = await supabase
-    .from('intakes')
-    .select('id')
-    .eq('patient_id', patientId)
-    .order('start_date', { ascending: false })
-    .limit(1)
-    .maybeSingle();
-
-  const newDiagnosisUrl = recentIntake
-    ? `/epd/patients/${patientId}/intakes/${recentIntake.id}/diagnosis`
-    : null;
 
   return (
     <div className="p-6 space-y-6">
       {/* Page Header */}
-      <div className="flex items-start justify-between">
       <div>
         <h2 className="text-lg font-semibold text-slate-900">Diagnoses</h2>
-          <p className="text-sm text-slate-600 mt-1">
+        <div className="flex items-center gap-2 mt-1">
-            Overzicht van alle diagnoses (ICD-10) voor deze patiënt.
+          <Activity className="h-4 w-4 text-green-600" />
-          </p>
+          <span className="text-sm">
-        </div>
+            <span className="font-medium text-green-600">{activeDiagnoses.length} actief</span>
-
+            <span className="text-slate-500"> van {diagnoses.length} totaal</span>
-        {newDiagnosisUrl && (
+          </span>
-          <Button asChild>
-            <Link href={newDiagnosisUrl}>
-              <Plus className="h-4 w-4 mr-2" />
-              Nieuwe diagnose
-            </Link>
-          </Button>
-        )}
-      </div>
-
-      {/* Summary cards */}
-      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-        <div className="bg-white rounded-lg border border-slate-200 p-4">
-          <div className="text-2xl font-bold text-slate-900">{diagnoses.length}</div>
-          <div className="text-sm text-slate-600">Totaal diagnoses</div>
-        </div>
-        <div className="bg-white rounded-lg border border-slate-200 p-4">
-          <div className="text-2xl font-bold text-green-600">{activeDiagnoses.length}</div>
-          <div className="text-sm text-slate-600">Actieve diagnoses</div>
-        </div>
-        <div className="bg-white rounded-lg border border-slate-200 p-4">
-          <div className="text-sm font-medium text-slate-900 truncate">
-            {primaryDiagnosis ? (
-              <>
-                <span className="font-mono">{primaryDiagnosis.code_code}</span>
-                {' — '}
-                {primaryDiagnosis.code_display}
-              </>
-            ) : (
-              <span className="text-slate-400">Geen hoofddiagnose</span>
-            )}
-          </div>
-          <div className="text-sm text-slate-600">Hoofddiagnose</div>
         </div>
       </div>
 
-      {/* Diagnoses lijst */}
+      {/* Master-Detail Layout */}
-      {sortedDiagnoses.length === 0 ? (
+      <Suspense fallback={<div className="text-sm text-slate-500">Laden...</div>}>
-        <div className="bg-white rounded-lg border border-slate-200 p-12 text-center">
+        <DiagnosisMasterDetail
-          <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-purple-50 mb-4">
-            <Stethoscope className="h-8 w-8 text-purple-500" />
-          </div>
-          <h3 className="text-lg font-semibold text-slate-900 mb-2">
-            Nog geen diagnoses
-          </h3>
-          <p className="text-sm text-slate-600 max-w-md mx-auto mb-4">
-            Er zijn nog geen diagnoses geregistreerd voor deze patiënt.
-            Diagnoses worden vastgelegd tijdens een intake.
-          </p>
-          {newDiagnosisUrl && (
-            <Button asChild>
-              <Link href={newDiagnosisUrl}>
-                <Plus className="h-4 w-4 mr-2" />
-                Eerste diagnose toevoegen
-              </Link>
-            </Button>
-          )}
-        </div>
-      ) : (
-        <div className="space-y-3">
-          {sortedDiagnoses.map((diagnosis) => (
-            <DiagnosisOverviewCard
-              key={diagnosis.id}
-              diagnosis={diagnosis}
           patientId={patientId}
+          diagnoses={diagnoses}
+          intakes={intakes}
         />
-          ))}
+      </Suspense>
-        </div>
-      )}
     </div>
   );
 }

app/epd/patients/[id]/intakes/[intakeId]/diagnosis/components/icd10-combobox.tsx

@@ -1,17 +1,10 @@
 'use client';
 
-import { useState, useEffect, useMemo } from 'react';
+import { useState, useEffect, useMemo, useRef } from 'react';
-import { Check, ChevronsUpDown } from 'lucide-react';
+import { Check, ChevronsUpDown, Search } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import { Button } from '@/components/ui/button';
-import {
+import { Input } from '@/components/ui/input';
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-} from '@/components/ui/command';
 import {
   Popover,
   PopoverContent,
@@ -59,6 +52,7 @@ export function ICD10Combobox({
 }: ICD10ComboboxProps) {
   const [open, setOpen] = useState(false);
   const [searchQuery, setSearchQuery] = useState('');
+  const inputRef = useRef<HTMLInputElement>(null);
 
   // Flatten ICD-10 codes once
   const flatCodes = useMemo(() => {
@@ -71,10 +65,8 @@ export function ICD10Combobox({
   // Get search results or frequent codes
   const displayCodes = useMemo(() => {
     if (debouncedQuery.trim()) {
-      // Search mode: max 8 results
       return searchICD10Codes(flatCodes, debouncedQuery, 8);
     } else {
-      // Empty field: show top 5 frequent codes
       return getFrequentCodes(flatCodes, icd10CodesData.frequentCodes).slice(0, 5);
     }
   }, [debouncedQuery, flatCodes]);
@@ -95,98 +87,90 @@ export function ICD10Combobox({
     setSearchQuery('');
   };
 
+  // Focus input when popover opens
+  useEffect(() => {
+    if (open && inputRef.current) {
+      setTimeout(() => inputRef.current?.focus(), 0);
+    }
+  }, [open]);
+
   return (
     <Popover open={open} onOpenChange={setOpen}>
       <PopoverTrigger asChild>
-        <Button
+        <div className="relative">
-          variant="outline"
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none" />
-          role="combobox"
+          <Input
-          aria-expanded={open}
+            ref={inputRef}
-          className="w-full justify-between"
+            placeholder={placeholder}
+            value={open ? searchQuery : (selectedCode ? `${selectedCode.code} — ${selectedCode.display}` : '')}
+            onChange={(e) => {
+              setSearchQuery(e.target.value);
+              if (!open) setOpen(true);
+            }}
+            onFocus={() => setOpen(true)}
             disabled={disabled}
-        >
+            className="pl-9 pr-8"
-          {selectedCode ? (
+          />
-            <span className="truncate">
+          <ChevronsUpDown className="absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none" />
-              {selectedCode.code} — {selectedCode.display}
+        </div>
-            </span>
-          ) : (
-            <span className="text-muted-foreground">{placeholder}</span>
-          )}
-          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-        </Button>
       </PopoverTrigger>
       <PopoverContent className="w-[400px] p-0" align="start">
-        <Command>
+
-          <CommandInput
+        {/* Results */}
-            placeholder="Zoek op code of beschrijving..."
+        <div className="max-h-[300px] overflow-y-auto">
-            value={searchQuery}
+          {displayCodes.length === 0 ? (
-            onValueChange={setSearchQuery}
+            <div className="py-6 text-center text-sm text-muted-foreground">
-          />
-          <CommandList>
-            <CommandEmpty>
               {debouncedQuery.trim()
                 ? 'Geen codes gevonden.'
                 : 'Begin met typen om te zoeken...'}
-            </CommandEmpty>
-            {!debouncedQuery.trim() && (
-              <CommandGroup heading="Veelgebruikte codes">
-                {displayCodes.map((code) => (
-                  <CommandItem
-                    key={code.code}
-                    value={code.code}
-                    onSelect={() => handleSelect(code)}
-                  >
-                    <Check
-                      className={cn(
-                        'mr-2 h-4 w-4',
-                        selectedCode?.code === code.code
-                          ? 'opacity-100'
-                          : 'opacity-0'
-                      )}
-                    />
-                    <div className="flex flex-col">
-                      <span className="font-medium">{code.code}</span>
-                      <span className="text-xs text-muted-foreground">
-                        {code.display}
-                      </span>
             </div>
-                  </CommandItem>
+          ) : (
-                ))}
+            <div className="p-1">
-              </CommandGroup>
+              {!debouncedQuery.trim() && (
+                <div className="px-2 py-1.5 text-xs font-medium text-muted-foreground">
+                  Veelgebruikte codes
+                </div>
               )}
               {debouncedQuery.trim() && (
-              <CommandGroup heading="Zoekresultaten">
+                <div className="px-2 py-1.5 text-xs font-medium text-muted-foreground">
+                  Zoekresultaten
+                </div>
+              )}
               {displayCodes.map((code) => (
-                  <CommandItem
+                <button
                   key={code.code}
-                    value={code.code}
+                  type="button"
-                    onSelect={() => handleSelect(code)}
+                  onClick={() => handleSelect(code)}
+                  className={cn(
+                    'relative flex w-full cursor-pointer select-none items-center rounded-sm px-2 py-2 text-sm outline-none',
+                    'hover:bg-accent hover:text-accent-foreground',
+                    'focus:bg-accent focus:text-accent-foreground',
+                    selectedCode?.code === code.code && 'bg-accent'
+                  )}
                 >
                   <Check
                     className={cn(
-                        'mr-2 h-4 w-4',
+                      'mr-2 h-4 w-4 shrink-0',
-                        selectedCode?.code === code.code
+                      selectedCode?.code === code.code ? 'opacity-100' : 'opacity-0'
-                          ? 'opacity-100'
-                          : 'opacity-0'
                     )}
                   />
-                    <div className="flex flex-col">
+                  <div className="flex flex-col items-start">
                     <span className="font-medium">{code.code}</span>
                     <span className="text-xs text-muted-foreground">
                       {code.display}
                     </span>
+                    {debouncedQuery.trim() && (
                       <span className="text-xs text-muted-foreground italic">
                         {code.category}
                       </span>
-                    </div>
-                  </CommandItem>
-                ))}
-              </CommandGroup>
                     )}
-          </CommandList>
+                  </div>
-        </Command>
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
       </PopoverContent>
     </Popover>
   );
 }
-

supabase/migrations/20251217_fix_conditions_fk.sql

@@ -0,0 +1,15 @@
+-- Migration: Fix conditions.encounter_id foreign key
+-- The encounter_id column references intakes, not encounters
+-- This migration drops the incorrect FK constraint and adds the correct one
+
+-- Step 1: Drop the incorrect foreign key constraint
+ALTER TABLE conditions
+DROP CONSTRAINT IF EXISTS conditions_encounter_id_fkey;
+
+-- Step 2: Add the correct foreign key constraint to intakes table
+ALTER TABLE conditions
+ADD CONSTRAINT conditions_intake_id_fkey
+FOREIGN KEY (encounter_id) REFERENCES intakes(id) ON DELETE SET NULL;
+
+-- Add comment for clarity
+COMMENT ON COLUMN conditions.encounter_id IS 'Reference to intake (despite column name, links to intakes table for historical reasons)';