feat(behandelplan): E3 UI componenten en documentatie updates

Behandelplan UI (E3):
- page-client.tsx: Client-side behandelplan pagina
- actions.ts: Server actions voor CRUD operaties
- behandelplan-view.tsx: Volledige behandelplan weergave
- behandelplan-list.tsx: Lijst van behandelplannen
- editable-section.tsx: Herbruikbare edit sectie component
- sections/: Goal, intervention en behandelstructuur forms

UI Componenten:
- components/ui/checkbox.tsx (shadcn)
- components/ui/input.tsx (shadcn)
- components/ui/select.tsx (shadcn)

Documentatie:
- agenda-systeem.mdx toegevoegd
- _index.json en metadata.json bijgewerkt

Dependencies:
- @radix-ui/react-checkbox toegevoegd

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

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

components/behandelplan/sections/intervention-form.tsx

@@ -0,0 +1,115 @@
+'use client';
+
+import { useState } from 'react';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+import type { Intervention, SmartGoal } from '@/lib/types/behandelplan';
+import { Checkbox } from '@/components/ui/checkbox';
+
+interface InterventionFormProps {
+  initialData?: Intervention | null;
+  goals?: SmartGoal[];
+  onChange: (data: Intervention) => void;
+}
+
+const COMMON_INTERVENTIONS = [
+  'CGT (Cognitieve Gedragstherapie)',
+  'EMDR',
+  'ACT (Acceptance and Commitment Therapy)',
+  'Schematherapie',
+  'Psycho-educatie',
+  'Mindfulness',
+  'Exposure therapie',
+  'Systeemtherapie',
+];
+
+export function InterventionForm({ initialData, goals = [], onChange }: InterventionFormProps) {
+  const [data, setData] = useState<Intervention>(
+    initialData || {
+      id: crypto.randomUUID(),
+      name: '',
+      description: '',
+      rationale: '',
+      linkedGoalIds: [],
+    }
+  );
+
+  const handleChange = <K extends keyof Intervention>(field: K, value: Intervention[K]) => {
+    const updated = { ...data, [field]: value };
+    setData(updated);
+    onChange(updated);
+  };
+
+  const toggleGoalLink = (goalId: string) => {
+    const linkedGoalIds = data.linkedGoalIds.includes(goalId)
+      ? data.linkedGoalIds.filter((id) => id !== goalId)
+      : [...data.linkedGoalIds, goalId];
+    handleChange('linkedGoalIds', linkedGoalIds);
+  };
+
+  return (
+    <div className="space-y-4">
+      <div className="space-y-2">
+        <Label htmlFor="name">Naam interventie</Label>
+        <Input
+          id="name"
+          value={data.name}
+          onChange={(e) => handleChange('name', e.target.value)}
+          placeholder="bijv. CGT, EMDR, ACT"
+          list="interventions"
+        />
+        <datalist id="interventions">
+          {COMMON_INTERVENTIONS.map((name) => (
+            <option key={name} value={name} />
+          ))}
+        </datalist>
+      </div>
+
+      <div className="space-y-2">
+        <Label htmlFor="description">Beschrijving</Label>
+        <Textarea
+          id="description"
+          value={data.description}
+          onChange={(e) => handleChange('description', e.target.value)}
+          placeholder="Uitleg van de interventie"
+          rows={2}
+        />
+      </div>
+
+      <div className="space-y-2">
+        <Label htmlFor="rationale">Rationale</Label>
+        <Textarea
+          id="rationale"
+          value={data.rationale}
+          onChange={(e) => handleChange('rationale', e.target.value)}
+          placeholder="Waarom past deze interventie bij deze cliënt?"
+          rows={2}
+        />
+      </div>
+
+      {goals.length > 0 && (
+        <div className="space-y-2">
+          <Label>Gekoppelde doelen</Label>
+          <div className="space-y-2 p-3 bg-slate-50 rounded-lg">
+            {goals.map((goal) => (
+              <div key={goal.id} className="flex items-center space-x-2">
+                <Checkbox
+                  id={`goal-${goal.id}`}
+                  checked={data.linkedGoalIds.includes(goal.id)}
+                  onCheckedChange={() => toggleGoalLink(goal.id)}
+                />
+                <label
+                  htmlFor={`goal-${goal.id}`}
+                  className="text-sm cursor-pointer"
+                >
+                  {goal.title || 'Doel zonder titel'}
+                </label>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}