feat: rapportage API, speech recorder refactor, docs reorganisatie

Multiple features and improvements:

Reports/Rapportage API:
- Created REST API endpoints: /api/reports (GET/POST), /api/reports/[id] (GET/PATCH/DELETE)
- Added /api/reports/classify endpoint for AI classification
- Supabase migrations: reports table + RLS policies
- Server utilities: api-client.ts for DRY fetch logic
- Type definitions: lib/types/report.ts with Zod schemas
- Removed old rapportage-modal component (replaced by split-view)

Speech Recorder Refactor:
- Moved speech-recorder from intake-specific to shared components/
- Updated treatment-advice-form to use new location
- Updated intake actions for speech functionality

UI Components (shadcn):
- Added dialog, dropdown-menu, toast, toaster components
- Added use-toast hook for toast notifications

Documentation:
- Reorganized docs/release/ → docs/reports/ for better structure
- Archived old specs to docs/specs/archive/
- Added screening-system.mdx documentation
- Added rapportage-split-view-design.md
- Added UI screenshots for troubleshooting

Dependencies:
- Updated package.json and pnpm-lock.yaml
- Regenerated database.types.ts from Supabase

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

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

app/api/reports/[reportId]/route.ts

@@ -0,0 +1,138 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { z } from 'zod';
+import { createClient } from '@/lib/auth/server';
+
+const uuidSchema = z.string().uuid('reportId moet een geldige UUID zijn');
+
+export async function GET(
+  _request: NextRequest,
+  { params }: { params: Promise<{ reportId: string }> }
+) {
+  try {
+    const { reportId } = await params;
+
+    if (!uuidSchema.safeParse(reportId).success) {
+      return NextResponse.json(
+        { error: 'reportId moet een geldige UUID zijn' },
+        { status: 400 }
+      );
+    }
+
+    const supabase = await createClient();
+    const { data, error } = await supabase
+      .from('reports')
+      .select('*')
+      .eq('id', reportId)
+      .is('deleted_at', null)
+      .single();
+
+    if (error) {
+      if (error.code === 'PGRST116') {
+        return NextResponse.json({ error: 'Rapport niet gevonden' }, { status: 404 });
+      }
+
+      console.error('Error fetching report:', error);
+      return NextResponse.json(
+        { error: 'Fout bij ophalen rapport', details: error.message },
+        { status: 500 }
+      );
+    }
+
+    return NextResponse.json(data);
+  } catch (error) {
+    console.error('Unexpected error in GET /api/reports/[reportId]:', error);
+    return NextResponse.json(
+      { error: 'Onverwachte serverfout' },
+      { status: 500 }
+    );
+  }
+}
+
+export async function PATCH(
+  request: NextRequest,
+  { params }: { params: Promise<{ reportId: string }> }
+) {
+  try {
+    const { reportId } = await params;
+    const body = await request.json();
+
+    if (!uuidSchema.safeParse(reportId).success) {
+      return NextResponse.json(
+        { error: 'reportId moet een geldige UUID zijn' },
+        { status: 400 }
+      );
+    }
+
+    const supabase = await createClient();
+    const { data, error } = await supabase
+      .from('reports')
+      .update({ ...body, updated_at: new Date().toISOString() })
+      .eq('id', reportId)
+      .select('*')
+      .single();
+
+    if (error) {
+      if (error.code === 'PGRST116') {
+        return NextResponse.json({ error: 'Rapport niet gevonden' }, { status: 404 });
+      }
+
+      console.error('Error updating report:', error);
+      return NextResponse.json(
+        { error: 'Fout bij updaten rapport', details: error.message },
+        { status: 500 }
+      );
+    }
+
+    return NextResponse.json(data);
+  } catch (error) {
+    console.error('Unexpected error in PATCH /api/reports/[reportId]:', error);
+    if (error instanceof SyntaxError) {
+      return NextResponse.json(
+        { error: 'Ongeldige JSON in request body' },
+        { status: 400 }
+      );
+    }
+    return NextResponse.json(
+      { error: 'Onverwachte serverfout' },
+      { status: 500 }
+    );
+  }
+}
+
+export async function DELETE(
+  _request: NextRequest,
+  { params }: { params: Promise<{ reportId: string }> }
+) {
+  try {
+    const { reportId } = await params;
+
+    if (!uuidSchema.safeParse(reportId).success) {
+      return NextResponse.json(
+        { error: 'reportId moet een geldige UUID zijn' },
+        { status: 400 }
+      );
+    }
+
+    const supabase = await createClient();
+    const { error } = await supabase
+      .from('reports')
+      .update({ deleted_at: new Date().toISOString() })
+      .eq('id', reportId);
+
+    if (error) {
+      console.error('Error deleting report:', error);
+      return NextResponse.json(
+        { error: 'Verwijderen mislukt', details: error.message },
+        { status: 500 }
+      );
+    }
+
+    return NextResponse.json({ success: true });
+  } catch (error) {
+    console.error('Unexpected error in DELETE /api/reports/[reportId]:', error);
+    return NextResponse.json(
+      { error: 'Onverwachte serverfout' },
+      { status: 500 }
+    );
+  }
+}

app/api/reports/classify/route.ts

@@ -0,0 +1,79 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+const CLASSIFICATION_PROMPT = `
+Je bent een classificatie-assistent voor een GGZ EPD-systeem.
+
+Classificeer de volgende rapportage als één van deze types:
+
+**Behandeladvies:**
+- Bevat een concreet behandelplan of voorstel
+- Noemt doelen, interventies, aanpak
+- Woorden zoals: "advies", "plan", "traject", "sessies", "behandeling"
+
+**Vrije notitie:**
+- Alles wat niet duidelijk een behandeladvies is
+- Algemene observaties, opmerkingen, aantekeningen
+
+Return ALLEEN JSON:
+{
+  "type": "behandeladvies" | "vrije_notitie",
+  "confidence": 0.0-1.0,
+  "reasoning": "optionele uitleg"
+}`;
+
+export async function POST(request: NextRequest) {
+  try {
+    const { content } = await request.json();
+
+    if (!content || content.length < 20) {
+      return NextResponse.json(
+        { error: 'Content moet minimaal 20 karakters bevatten' },
+        { status: 400 }
+      );
+    }
+
+    const apiKey = process.env.ANTHROPIC_API_KEY;
+    if (!apiKey) {
+      return NextResponse.json(
+        { error: 'ANTHROPIC_API_KEY ontbreekt' },
+        { status: 500 }
+      );
+    }
+
+    const anthropicResponse = await fetch('https://api.anthropic.com/v1/messages', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'x-api-key': apiKey,
+        'anthropic-version': '2023-06-01',
+      },
+      body: JSON.stringify({
+        model: 'claude-3-5-sonnet-20240620',
+        max_tokens: 256,
+        temperature: 0,
+        system: CLASSIFICATION_PROMPT,
+        messages: [
+          { role: 'user', content: content.trim() },
+        ],
+      }),
+    });
+
+    if (!anthropicResponse.ok) {
+      const errorBody = await anthropicResponse.text();
+      throw new Error(`Claude API error: ${errorBody}`);
+    }
+
+    const data = await anthropicResponse.json();
+    const rawText = data?.content?.[0]?.text ?? '';
+    const parsed = JSON.parse(rawText);
+
+    return NextResponse.json(parsed);
+  } catch (error) {
+    console.error('AI classification error:', error);
+    return NextResponse.json({
+      type: 'vrije_notitie',
+      confidence: 0.5,
+      reasoning: 'AI classificatie mislukt. Kies handmatig een type.',
+    });
+  }
+}

app/api/reports/route.ts

@@ -0,0 +1,120 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { z } from 'zod';
+import { createClient } from '@/lib/auth/server';
+import { CreateReportSchema, type ReportListResponse } from '@/lib/types/report';
+
+export async function GET(request: NextRequest) {
+  try {
+    const { searchParams } = new URL(request.url);
+    const patientId = searchParams.get('patientId');
+
+    if (!patientId) {
+      return NextResponse.json(
+        { error: 'patientId query parameter is verplicht' },
+        { status: 400 }
+      );
+    }
+
+    if (!z.string().uuid().safeParse(patientId).success) {
+      return NextResponse.json(
+        { error: 'patientId moet een geldige UUID zijn' },
+        { status: 400 }
+      );
+    }
+
+    const supabase = await createClient();
+    const { data, error } = await supabase
+      .from('reports')
+      .select('*')
+      .eq('patient_id', patientId)
+      .is('deleted_at', null)
+      .order('created_at', { ascending: false });
+
+    if (error) {
+      console.error('Error fetching reports:', error);
+      return NextResponse.json(
+        { error: 'Fout bij ophalen rapportages', details: error.message },
+        { status: 500 }
+      );
+    }
+
+    const response: ReportListResponse = {
+      reports: data ?? [],
+      total: data?.length ?? 0,
+    };
+
+    return NextResponse.json(response);
+  } catch (error) {
+    console.error('Unexpected error in GET /api/reports:', error);
+    return NextResponse.json(
+      { error: 'Onverwachte serverfout' },
+      { status: 500 }
+    );
+  }
+}
+
+export async function POST(request: NextRequest) {
+  try {
+    const body = await request.json();
+    const result = CreateReportSchema.safeParse(body);
+
+    if (!result.success) {
+      return NextResponse.json(
+        {
+          error: 'Validatiefout',
+          details: result.error.issues.map((issue) => ({
+            field: issue.path.join('.'),
+            message: issue.message,
+          })),
+        },
+        { status: 400 }
+      );
+    }
+
+    const supabase = await createClient();
+    const { data: authData } = await supabase.auth.getUser();
+
+    if (!authData?.user) {
+      return NextResponse.json(
+        { error: 'Niet geautoriseerd' },
+        { status: 401 }
+      );
+    }
+
+    const { patient_id, type, content, ai_confidence, ai_reasoning } = result.data;
+    const { data, error } = await supabase
+      .from('reports')
+      .insert({
+        patient_id,
+        type,
+        content,
+        ai_confidence,
+        ai_reasoning,
+        created_by: authData.user.id,
+      })
+      .select('*')
+      .single();
+
+    if (error) {
+      console.error('Error creating report:', error);
+      return NextResponse.json(
+        { error: 'Opslaan mislukt', details: error.message },
+        { status: 500 }
+      );
+    }
+
+    return NextResponse.json(data, { status: 201 });
+  } catch (error) {
+    console.error('Unexpected error in POST /api/reports:', error);
+    if (error instanceof SyntaxError) {
+      return NextResponse.json(
+        { error: 'Ongeldige JSON in request body' },
+        { status: 400 }
+      );
+    }
+    return NextResponse.json(
+      { error: 'Onverwachte serverfout' },
+      { status: 500 }
+    );
+  }
+}

app/epd/patients/[id]/intakes/[intakeId]/behandeladvies/components/speech-recorder.tsx

@@ -1,130 +0,0 @@
-'use client';
-
-import { useEffect, useRef, useState, useCallback } from 'react';
-import { Loader2, Mic, Square } from 'lucide-react';
-
-interface SpeechRecorderProps {
-  onTranscript: (text: string) => void;
-}
-
-export function SpeechRecorder({ onTranscript }: SpeechRecorderProps) {
-  const mediaRecorderRef = useRef<MediaRecorder | null>(null);
-  const chunksRef = useRef<Blob[]>([]);
-  const [isRecording, setIsRecording] = useState(false);
-  const [isUploading, setIsUploading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [permissionDenied, setPermissionDenied] = useState(false);
-
-  useEffect(() => {
-    return () => {
-      mediaRecorderRef.current?.stream.getTracks().forEach((track) => track.stop());
-    };
-  }, []);
-
-  const stopStream = () => {
-    mediaRecorderRef.current?.stream.getTracks().forEach((track) => track.stop());
-    mediaRecorderRef.current = null;
-  };
-
-  const handleStop = useCallback(async () => {
-    setIsRecording(false);
-    const chunks = chunksRef.current;
-    chunksRef.current = [];
-    stopStream();
-
-    if (chunks.length === 0) return;
-
-    const blob = new Blob(chunks, { type: 'audio/webm' });
-    const formData = new FormData();
-    formData.append('file', blob, 'recording.webm');
-
-    try {
-      setIsUploading(true);
-      setError(null);
-      const response = await fetch('/api/deepgram/transcribe', {
-        method: 'POST',
-        body: formData,
-      });
-
-      if (!response.ok) {
-        const data = await response.json().catch(() => ({}));
-        throw new Error(data.error || 'Transcriptie mislukt');
-      }
-
-      const data = await response.json();
-      if (data.transcript) {
-        onTranscript(data.transcript as string);
-      }
-    } catch (err) {
-      console.error(err);
-      setError(err instanceof Error ? err.message : 'Onbekende fout');
-    } finally {
-      setIsUploading(false);
-    }
-  }, [onTranscript]);
-
-  const startRecording = async () => {
-    try {
-      setError(null);
-      setPermissionDenied(false);
-      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
-      const mediaRecorder = new MediaRecorder(stream, { mimeType: 'audio/webm' });
-      mediaRecorderRef.current = mediaRecorder;
-      chunksRef.current = [];
-
-      mediaRecorder.ondataavailable = (event) => {
-        if (event.data.size > 0) {
-          chunksRef.current.push(event.data);
-        }
-      };
-
-      mediaRecorder.onstop = handleStop;
-      mediaRecorder.start();
-      setIsRecording(true);
-    } catch (err) {
-      console.error(err);
-      setPermissionDenied(true);
-      setError('Toegang tot microfoon geweigerd of niet beschikbaar.');
-    }
-  };
-
-  const stopRecording = () => {
-    if (mediaRecorderRef.current && mediaRecorderRef.current.state !== 'inactive') {
-      mediaRecorderRef.current.stop();
-    }
-  };
-
-  const isBusy = isRecording || isUploading;
-
-  return (
-    <div className="rounded-lg border border-slate-200 p-4 bg-white space-y-2">
-      <div className="flex items-center justify-between">
-        <div>
-          <p className="text-sm font-semibold text-slate-900">Spraak-naar-tekst</p>
-          <p className="text-xs text-slate-500">
-            {isRecording ? 'Opname loopt…' : 'Neem een fragment op en laat Deepgram transcriberen.'}
-          </p>
-        </div>
-        <button
-          type="button"
-          onClick={isRecording ? stopRecording : startRecording}
-          disabled={isUploading}
-          className="inline-flex items-center gap-2 rounded-md border border-slate-300 px-3 py-1.5 text-xs font-medium text-slate-700 hover:bg-slate-50 disabled:opacity-60"
-        >
-          {isRecording ? <><Square className="h-3 w-3 text-red-600" /> Stop</> : <><Mic className="h-3 w-3 text-teal-600" /> Opnemen</>}
-        </button>
-      </div>
-      {isUploading && (
-        <p className="text-xs text-slate-500 inline-flex items-center gap-1">
-          <Loader2 className="h-3 w-3 animate-spin" /> Transcriptie bezig…
-        </p>
-      )}
-      {permissionDenied && (
-        <p className="text-xs text-red-600">Microfoontoegang nodig om op te nemen.</p>
-      )}
-      {error && !permissionDenied && (
-        <p className="text-xs text-red-600">{error}</p>
-      )}
-    </div>
-  );
-}

app/epd/patients/[id]/intakes/[intakeId]/behandeladvies/components/treatment-advice-form.tsx

@@ -5,7 +5,7 @@ import { saveTreatmentAdvice } from '../../actions';
 import { Loader2, Calendar, UserCircle, ClipboardList, Share2, CheckCircle2 } from 'lucide-react';
 import Link from 'next/link';
 import { RichTextEditor } from '@/components/rich-text-editor';
-import { SpeechRecorder } from './speech-recorder';
+import { SpeechRecorder } from '@/components/speech-recorder';
 
 interface AdviceData {
   advice?: string;

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

@@ -9,7 +9,7 @@
 
 import { revalidatePath } from 'next/cache';
 import { redirect } from 'next/navigation';
-import { headers, cookies } from 'next/headers';
+import { authFetch, getBaseUrl } from '@/lib/server/api-client';
 import type {
   Intake,
   CreateIntakeInput,
@@ -21,42 +21,6 @@ import type {
  * Get the base URL for API calls in server actions
  * Uses headers() to get the host from the request
  */
-function getBaseUrl(): string {
-  // Try environment variable first
-  if (process.env.NEXT_PUBLIC_APP_URL) {
-    return process.env.NEXT_PUBLIC_APP_URL;
-  }
-  
-  // Try to get from headers (works in server components/actions)
-  try {
-    const headersList = headers();
-    const host = headersList.get('host');
-    const protocol = headersList.get('x-forwarded-proto') || 'http';
-    if (host) {
-      return `${protocol}://${host}`;
-    }
-  } catch {
-    // Headers not available, fallback to localhost
-  }
-  
-  // Fallback to localhost
-  return 'http://localhost:3000';
-}
-
-/**
- * Get cookies as a string for fetch headers
- */
-async function getCookieHeader(): Promise<string> {
-  try {
-    const cookieStore = await cookies();
-    return cookieStore
-      .getAll()
-      .map((cookie) => `${cookie.name}=${cookie.value}`)
-      .join('; ');
-  } catch {
-    return '';
-  }
-}
 
 /**
  * Get all intakes for a specific patient
@@ -69,13 +33,8 @@ export async function getIntakesByPatientId(patientId: string): Promise<Intake[]
     const url = new URL('/api/intakes', baseUrl);
     url.searchParams.set('patientId', patientId);
     
-    const cookieHeader = await getCookieHeader();
-
-    const response = await fetch(url.toString(), {
+    const response = await authFetch(url.toString(), {
       cache: 'no-store',
-      headers: {
-        ...(cookieHeader && { Cookie: cookieHeader }),
-      },
     });
 
     if (!response.ok) {
@@ -112,13 +71,8 @@ export async function getIntakeById(intakeId: string): Promise<Intake | null> {
   try {
     const baseUrl = getBaseUrl();
     const url = `${baseUrl}/api/intakes/${intakeId}`;
-    const cookieHeader = await getCookieHeader();
-
-    const response = await fetch(url, {
+    const response = await authFetch(url, {
       cache: 'no-store',
-      headers: {
-        ...(cookieHeader && { Cookie: cookieHeader }),
-      },
     });
 
     if (response.status === 404) {
@@ -163,13 +117,10 @@ export async function createIntake(input: CreateIntakeInput): Promise<Intake> {
   try {
     const baseUrl = getBaseUrl();
     const url = `${baseUrl}/api/intakes`;
-    const cookieHeader = await getCookieHeader();
-
-    const response = await fetch(url, {
+    const response = await authFetch(url, {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',
-        ...(cookieHeader && { Cookie: cookieHeader }),
       },
       body: JSON.stringify(input),
     });
@@ -230,13 +181,10 @@ export async function updateIntake(
   try {
     const baseUrl = getBaseUrl();
     const url = `${baseUrl}/api/intakes/${intakeId}`;
-    const cookieHeader = await getCookieHeader();
-
-    const response = await fetch(url, {
+    const response = await authFetch(url, {
       method: 'PUT',
       headers: {
         'Content-Type': 'application/json',
-        ...(cookieHeader && { Cookie: cookieHeader }),
       },
       body: JSON.stringify(input),
     });
@@ -332,4 +280,3 @@ export async function deleteIntake(intakeId: string, patientId: string): Promise
     throw error instanceof Error ? error : new Error('Failed to delete intake');
   }
 }
-

app/epd/patients/[id]/rapportage/components/rapportage-modal.tsx

@@ -1,196 +0,0 @@
-'use client';
-
-import { useEffect, useState } from 'react';
-import { useRouter } from 'next/navigation';
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from '@/components/ui/dialog';
-import { Button } from '@/components/ui/button';
-import { SpeechRecorder } from '@/components/speech-recorder';
-import type { ClassificationResult } from '@/lib/types/report';
-import { createReport } from '../actions';
-import { toast } from '@/hooks/use-toast';
-
-interface RapportageModalProps {
-  isOpen: boolean;
-  onClose: () => void;
-  patientId: string;
-  patientName: string;
-}
-
-export function RapportageModal({ isOpen, onClose, patientId, patientName }: RapportageModalProps) {
-  const [content, setContent] = useState('');
-  const [classification, setClassification] = useState<ClassificationResult | null>(null);
-  const [selectedType, setSelectedType] = useState<'behandeladvies' | 'vrije_notitie'>('vrije_notitie');
-  const [isAnalyzing, setIsAnalyzing] = useState(false);
-  const [isSaving, setIsSaving] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const router = useRouter();
-
-  useEffect(() => {
-    if (!isOpen) {
-      setContent('');
-      setClassification(null);
-      setSelectedType('vrije_notitie');
-      setError(null);
-      setIsAnalyzing(false);
-      setIsSaving(false);
-    }
-  }, [isOpen]);
-
-  const handleAnalyze = async () => {
-    if (contentInvalid) return;
-    setIsAnalyzing(true);
-    setError(null);
-    try {
-      const response = await fetch('/api/reports/classify', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({ content }),
-      });
-
-      if (!response.ok) {
-        throw new Error('AI-analyse mislukt');
-      }
-
-      const result: ClassificationResult = await response.json();
-      setClassification(result);
-      setSelectedType(result.type);
-    } catch (err) {
-      setClassification(null);
-      setSelectedType('vrije_notitie');
-      const message = err instanceof Error ? err.message : 'AI-analyse mislukt';
-      setError(message);
-      toast({
-        variant: 'destructive',
-        title: 'AI-analyse mislukt',
-        description: message,
-      });
-    } finally {
-      setIsAnalyzing(false);
-    }
-  };
-
-  const handleSave = async () => {
-    setIsSaving(true);
-    setError(null);
-    try {
-      await createReport(patientId, {
-        type: selectedType,
-        content,
-        ai_confidence: classification?.confidence,
-        ai_reasoning: classification?.reasoning,
-      });
-      toast({
-        title: 'Rapportage opgeslagen',
-        description: `${patientName} heeft nu een nieuwe notitie in de tijdlijn.`,
-      });
-      router.refresh();
-      onClose();
-    } catch (err) {
-      const message = err instanceof Error ? err.message : 'Opslaan mislukt';
-      setError(message);
-      toast({
-        variant: 'destructive',
-        title: 'Opslaan mislukt',
-        description: message,
-      });
-    } finally {
-      setIsSaving(false);
-    }
-  };
-
-  const characterCount = content.length;
-  const contentInvalid = characterCount < 20 || characterCount > 5000;
-
-  return (
-    <Dialog
-      open={isOpen}
-      onOpenChange={(open) => {
-        if (!open) {
-          onClose();
-        }
-      }}
-    >
-      <DialogContent className="max-w-2xl">
-        <DialogHeader>
-          <DialogTitle>Nieuwe rapportage</DialogTitle>
-          <DialogDescription>
-            Leg een rapportage vast voor {patientName}
-          </DialogDescription>
-        </DialogHeader>
-
-        <div className="space-y-4">
-          <div>
-            <textarea
-              value={content}
-              onChange={(e) => setContent(e.target.value)}
-              placeholder="Beschrijf wat je wilt vastleggen..."
-              className="w-full min-h-[160px] rounded-md border border-slate-200 p-3"
-            />
-            <div className="flex justify-between text-xs text-slate-500">
-              <span>{characterCount} / 5000 karakters</span>
-              {contentInvalid && <span>Min. 20 karakters</span>}
-            </div>
-          </div>
-
-          <SpeechRecorder
-            disabled={isSaving || isAnalyzing}
-            onTranscript={(text) =>
-              setContent((prev) => `${prev}${prev ? '\n' : ''}${text}`)
-            }
-          />
-
-          <div className="rounded-lg border border-slate-200 p-3 text-sm">
-            <div className="flex items-center justify-between">
-              <div>
-                <p className="font-medium text-slate-900">Rapportagetype</p>
-                <p className="text-xs text-slate-500">
-                  Kies handmatig of gebruik het AI-voorstel.
-                </p>
-              </div>
-              <span className="text-xs text-slate-500">
-                {classification
-                  ? `AI: ${classification.type} (${Math.round(classification.confidence * 100)}%)`
-                  : 'Nog geen AI-analyse'}
-              </span>
-            </div>
-            {classification?.reasoning && (
-              <p className="mt-2 text-xs text-slate-500">{classification.reasoning}</p>
-            )}
-            <select
-              value={selectedType}
-              onChange={(e) => setSelectedType(e.target.value as 'behandeladvies' | 'vrije_notitie')}
-              className="mt-3 w-full rounded-md border border-slate-200 bg-white p-2 text-sm"
-            >
-              <option value="behandeladvies">Behandeladvies</option>
-              <option value="vrije_notitie">Vrije notitie</option>
-            </select>
-          </div>
-
-          {error && <p className="text-sm text-red-600">{error}</p>}
-
-          <div className="flex gap-2 justify-end">
-            <Button variant="outline" onClick={onClose} disabled={isSaving}>
-              Annuleren
-            </Button>
-            <Button
-              type="button"
-              onClick={handleAnalyze}
-              disabled={contentInvalid || isAnalyzing || isSaving}
-            >
-              {isAnalyzing ? 'Analyseren…' : 'Analyseer met AI'}
-            </Button>
-            <Button
-              type="button"
-              onClick={handleSave}
-              disabled={contentInvalid || isSaving}
-            >
-              {isSaving ? 'Opslaan…' : 'Opslaan'}
-            </Button>
-          </div>
-        </div>
-      </DialogContent>
-    </Dialog>
-  );
-}