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/behandelplan-list.tsx

@@ -0,0 +1,125 @@
+'use client';
+
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Plus, FileText, CheckCircle2 } from 'lucide-react';
+import { FHIR_STATUS_LABELS, type FhirCarePlanStatus } from '@/lib/types/behandelplan';
+
+interface CarePlanSummary {
+  id: string;
+  title: string;
+  status: string;
+  version: number | null;
+  created_at: string | null;
+  published_at: string | null;
+}
+
+interface BehandelplanListProps {
+  plans: CarePlanSummary[];
+  selectedPlanId: string | null;
+  onSelectPlan: (planId: string) => void;
+  onCreateNew: () => void;
+  isCreating?: boolean;
+}
+
+export function BehandelplanList({
+  plans,
+  selectedPlanId,
+  onSelectPlan,
+  onCreateNew,
+  isCreating = false,
+}: BehandelplanListProps) {
+  return (
+    <Card>
+      <CardHeader className="pb-3">
+        <div className="flex items-center justify-between">
+          <CardTitle className="text-base flex items-center gap-2">
+            <FileText className="h-4 w-4" />
+            Behandelplannen ({plans.length})
+          </CardTitle>
+          <Button
+            onClick={onCreateNew}
+            disabled={isCreating}
+            size="sm"
+            className="bg-indigo-600 hover:bg-indigo-700"
+          >
+            <Plus className="h-4 w-4 mr-1" />
+            Nieuw
+          </Button>
+        </div>
+      </CardHeader>
+      <CardContent>
+        {plans.length === 0 ? (
+          <p className="text-sm text-slate-500 text-center py-4">
+            Nog geen behandelplannen aangemaakt
+          </p>
+        ) : (
+          <div className="space-y-2">
+            {plans.map((plan) => {
+              const isSelected = plan.id === selectedPlanId;
+              const statusInfo = FHIR_STATUS_LABELS[plan.status as FhirCarePlanStatus] || {
+                label: plan.status,
+                color: '#6b7280',
+              };
+              const isActive = plan.status === 'active';
+
+              return (
+                <button
+                  key={plan.id}
+                  onClick={() => onSelectPlan(plan.id)}
+                  className={`w-full text-left p-3 rounded-lg border transition-all ${
+                    isSelected
+                      ? 'border-indigo-500 bg-indigo-50 ring-1 ring-indigo-500'
+                      : 'border-slate-200 hover:border-slate-300 hover:bg-slate-50'
+                  }`}
+                >
+                  <div className="flex items-center justify-between">
+                    <div className="flex items-center gap-2">
+                      {isActive && (
+                        <CheckCircle2 className="h-4 w-4 text-green-500" />
+                      )}
+                      <span className={`font-medium text-sm ${isSelected ? 'text-indigo-900' : 'text-slate-900'}`}>
+                        {plan.title}
+                      </span>
+                    </div>
+                    <Badge
+                      style={{
+                        backgroundColor: statusInfo.color,
+                        color: 'white',
+                      }}
+                      className="text-xs"
+                    >
+                      {statusInfo.label}
+                    </Badge>
+                  </div>
+                  <div className="flex items-center gap-2 mt-1 text-xs text-slate-500">
+                    {plan.version && <span>v{plan.version}</span>}
+                    {plan.created_at && (
+                      <>
+                        <span>•</span>
+                        <span>
+                          {new Date(plan.created_at).toLocaleDateString('nl-NL', {
+                            day: 'numeric',
+                            month: 'short',
+                            year: 'numeric',
+                          })}
+                        </span>
+                      </>
+                    )}
+                    {plan.published_at && (
+                      <>
+                        <span>•</span>
+                        <span className="text-green-600">Gepubliceerd</span>
+                      </>
+                    )}
+                  </div>
+                </button>
+              );
+            })}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

components/behandelplan/editable-section.tsx

@@ -0,0 +1,162 @@
+'use client';
+
+import { useState, ReactNode } from 'react';
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Pencil, X, Check, Loader2 } from 'lucide-react';
+
+interface EditableSectionProps {
+  title: string;
+  description?: string;
+  icon?: ReactNode;
+  children: ReactNode;
+  editForm?: ReactNode;
+  onSave?: () => Promise<void>;
+  onCancel?: () => void;
+  isEditing?: boolean;
+  onEditChange?: (isEditing: boolean) => void;
+  canEdit?: boolean;
+  className?: string;
+}
+
+export function EditableSection({
+  title,
+  description,
+  icon,
+  children,
+  editForm,
+  onSave,
+  onCancel,
+  isEditing: externalIsEditing,
+  onEditChange,
+  canEdit = true,
+  className = '',
+}: EditableSectionProps) {
+  const [internalIsEditing, setInternalIsEditing] = useState(false);
+  const [isSaving, setIsSaving] = useState(false);
+
+  // Use external or internal state
+  const isEditing = externalIsEditing ?? internalIsEditing;
+  const setIsEditing = onEditChange ?? setInternalIsEditing;
+
+  const handleSave = async () => {
+    if (!onSave) return;
+    setIsSaving(true);
+    try {
+      await onSave();
+      setIsEditing(false);
+    } catch (error) {
+      console.error('Error saving:', error);
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const handleCancel = () => {
+    onCancel?.();
+    setIsEditing(false);
+  };
+
+  return (
+    <Card className={className}>
+      <CardHeader className="pb-3">
+        <div className="flex items-center justify-between">
+          <div>
+            <CardTitle className="text-base flex items-center gap-2">
+              {icon}
+              {title}
+            </CardTitle>
+            {description && <CardDescription>{description}</CardDescription>}
+          </div>
+          {canEdit && !isEditing && (
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-8 w-8 p-0"
+              onClick={() => setIsEditing(true)}
+            >
+              <Pencil className="h-4 w-4" />
+            </Button>
+          )}
+        </div>
+      </CardHeader>
+      <CardContent>
+        {isEditing && editForm ? (
+          <div className="space-y-4">
+            {editForm}
+            <div className="flex justify-end gap-2 pt-2 border-t">
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={handleCancel}
+                disabled={isSaving}
+              >
+                <X className="h-4 w-4 mr-1" />
+                Annuleren
+              </Button>
+              <Button
+                size="sm"
+                onClick={handleSave}
+                disabled={isSaving}
+              >
+                {isSaving ? (
+                  <Loader2 className="h-4 w-4 mr-1 animate-spin" />
+                ) : (
+                  <Check className="h-4 w-4 mr-1" />
+                )}
+                Opslaan
+              </Button>
+            </div>
+          </div>
+        ) : (
+          children
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+
+// Simple inline edit buttons for list items
+interface ItemActionsProps {
+  onEdit?: () => void;
+  onDelete?: () => void;
+  isDeleting?: boolean;
+}
+
+export function ItemActions({ onEdit, onDelete, isDeleting }: ItemActionsProps) {
+  return (
+    <div className="flex items-center gap-1">
+      {onEdit && (
+        <Button
+          variant="ghost"
+          size="sm"
+          className="h-7 w-7 p-0"
+          onClick={(e) => {
+            e.stopPropagation();
+            onEdit();
+          }}
+        >
+          <Pencil className="h-3.5 w-3.5" />
+        </Button>
+      )}
+      {onDelete && (
+        <Button
+          variant="ghost"
+          size="sm"
+          className="h-7 w-7 p-0 text-red-500 hover:text-red-700 hover:bg-red-50"
+          onClick={(e) => {
+            e.stopPropagation();
+            onDelete();
+          }}
+          disabled={isDeleting}
+        >
+          {isDeleting ? (
+            <Loader2 className="h-3.5 w-3.5 animate-spin" />
+          ) : (
+            <X className="h-3.5 w-3.5" />
+          )}
+        </Button>
+      )}
+    </div>
+  );
+}

components/behandelplan/index.ts

@@ -12,3 +12,15 @@ export {
   LeefgebiedenScoreBar,
 } from './leefgebieden-scores';
 export { LeefgebiedenForm, LeefgebiedenQuickForm } from './leefgebieden-form';
+
+// Behandelplan Views
+export { BehandelplanView } from './behandelplan-view';
+export { BehandelplanList } from './behandelplan-list';
+
+// Editable Components
+export { EditableSection, ItemActions } from './editable-section';
+
+// Section Forms
+export { BehandelstructuurForm } from './sections/behandelstructuur-form';
+export { GoalForm } from './sections/goal-form';
+export { InterventionForm } from './sections/intervention-form';

components/behandelplan/sections/behandelstructuur-form.tsx

@@ -0,0 +1,97 @@
+'use client';
+
+import { useState } from 'react';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import type { Behandelstructuur } from '@/lib/types/behandelplan';
+
+interface BehandelstructuurFormProps {
+  initialData?: Behandelstructuur | null;
+  onChange: (data: Behandelstructuur) => void;
+}
+
+const DUUR_OPTIONS = ['4 weken', '6 weken', '8 weken', '10 weken', '12 weken', '16 weken', '24 weken'];
+const FREQUENTIE_OPTIONS = ['Wekelijks', 'Tweewekelijks', 'Maandelijks', '2x per week'];
+const VORM_OPTIONS = ['Individueel', 'Groep', 'Gezin', 'Paar', 'Online', 'Hybride'];
+
+export function BehandelstructuurForm({ initialData, onChange }: BehandelstructuurFormProps) {
+  const [data, setData] = useState<Behandelstructuur>(
+    initialData || {
+      duur: '8 weken',
+      frequentie: 'Wekelijks',
+      aantalSessies: 8,
+      vorm: 'Individueel',
+    }
+  );
+
+  const handleChange = (field: keyof Behandelstructuur, value: string | number) => {
+    const updated = { ...data, [field]: value };
+    setData(updated);
+    onChange(updated);
+  };
+
+  return (
+    <div className="grid grid-cols-2 gap-4">
+      <div className="space-y-2">
+        <Label htmlFor="duur">Duur</Label>
+        <Select value={data.duur} onValueChange={(v) => handleChange('duur', v)}>
+          <SelectTrigger>
+            <SelectValue placeholder="Selecteer duur" />
+          </SelectTrigger>
+          <SelectContent>
+            {DUUR_OPTIONS.map((option) => (
+              <SelectItem key={option} value={option}>
+                {option}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+
+      <div className="space-y-2">
+        <Label htmlFor="frequentie">Frequentie</Label>
+        <Select value={data.frequentie} onValueChange={(v) => handleChange('frequentie', v)}>
+          <SelectTrigger>
+            <SelectValue placeholder="Selecteer frequentie" />
+          </SelectTrigger>
+          <SelectContent>
+            {FREQUENTIE_OPTIONS.map((option) => (
+              <SelectItem key={option} value={option}>
+                {option}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+
+      <div className="space-y-2">
+        <Label htmlFor="sessies">Aantal sessies</Label>
+        <Input
+          id="sessies"
+          type="number"
+          min={1}
+          max={52}
+          value={data.aantalSessies}
+          onChange={(e) => handleChange('aantalSessies', parseInt(e.target.value) || 1)}
+        />
+      </div>
+
+      <div className="space-y-2">
+        <Label htmlFor="vorm">Vorm</Label>
+        <Select value={data.vorm} onValueChange={(v) => handleChange('vorm', v)}>
+          <SelectTrigger>
+            <SelectValue placeholder="Selecteer vorm" />
+          </SelectTrigger>
+          <SelectContent>
+            {VORM_OPTIONS.map((option) => (
+              <SelectItem key={option} value={option}>
+                {option}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+    </div>
+  );
+}

components/behandelplan/sections/goal-form.tsx

@@ -0,0 +1,183 @@
+'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 { Slider } from '@/components/ui/slider';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import type { SmartGoal, GoalStatus } from '@/lib/types/behandelplan';
+import { LIFE_DOMAINS, LIFE_DOMAIN_META, type LifeDomain } from '@/lib/types/leefgebieden';
+
+interface GoalFormProps {
+  initialData?: SmartGoal | null;
+  onChange: (data: SmartGoal) => void;
+}
+
+const PRIORITY_OPTIONS = [
+  { value: 'hoog', label: 'Hoog' },
+  { value: 'middel', label: 'Middel' },
+  { value: 'laag', label: 'Laag' },
+];
+
+const STATUS_OPTIONS: { value: GoalStatus; label: string }[] = [
+  { value: 'niet_gestart', label: 'Niet gestart' },
+  { value: 'bezig', label: 'Bezig' },
+  { value: 'gehaald', label: 'Gehaald' },
+  { value: 'bijgesteld', label: 'Bijgesteld' },
+];
+
+export function GoalForm({ initialData, onChange }: GoalFormProps) {
+  const [data, setData] = useState<SmartGoal>(
+    initialData || {
+      id: crypto.randomUUID(),
+      title: '',
+      description: '',
+      clientVersion: '',
+      lifeDomain: 'dlv',
+      priority: 'middel',
+      measurability: '',
+      timelineWeeks: 8,
+      status: 'niet_gestart',
+      progress: 0,
+    }
+  );
+
+  const handleChange = <K extends keyof SmartGoal>(field: K, value: SmartGoal[K]) => {
+    const updated = { ...data, [field]: value };
+    setData(updated);
+    onChange(updated);
+  };
+
+  return (
+    <div className="space-y-4">
+      <div className="grid grid-cols-2 gap-4">
+        <div className="space-y-2">
+          <Label htmlFor="title">Titel</Label>
+          <Input
+            id="title"
+            value={data.title}
+            onChange={(e) => handleChange('title', e.target.value)}
+            placeholder="Korte beschrijving van het doel"
+          />
+        </div>
+
+        <div className="space-y-2">
+          <Label htmlFor="lifeDomain">Leefgebied</Label>
+          <Select
+            value={data.lifeDomain}
+            onValueChange={(v) => handleChange('lifeDomain', v as LifeDomain)}
+          >
+            <SelectTrigger>
+              <SelectValue placeholder="Selecteer leefgebied" />
+            </SelectTrigger>
+            <SelectContent>
+              {LIFE_DOMAINS.map((domain) => (
+                <SelectItem key={domain} value={domain}>
+                  {LIFE_DOMAIN_META[domain].emoji} {LIFE_DOMAIN_META[domain].label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+      </div>
+
+      <div className="space-y-2">
+        <Label htmlFor="description">SMART Beschrijving</Label>
+        <Textarea
+          id="description"
+          value={data.description}
+          onChange={(e) => handleChange('description', e.target.value)}
+          placeholder="Specifiek, Meetbaar, Acceptabel, Realistisch, Tijdgebonden"
+          rows={2}
+        />
+      </div>
+
+      <div className="space-y-2">
+        <Label htmlFor="clientVersion">Cliënt versie (B1-taal)</Label>
+        <Textarea
+          id="clientVersion"
+          value={data.clientVersion}
+          onChange={(e) => handleChange('clientVersion', e.target.value)}
+          placeholder="Eenvoudige uitleg voor de cliënt"
+          rows={2}
+        />
+      </div>
+
+      <div className="grid grid-cols-3 gap-4">
+        <div className="space-y-2">
+          <Label htmlFor="priority">Prioriteit</Label>
+          <Select
+            value={data.priority}
+            onValueChange={(v) => handleChange('priority', v as 'hoog' | 'middel' | 'laag')}
+          >
+            <SelectTrigger>
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {PRIORITY_OPTIONS.map((opt) => (
+                <SelectItem key={opt.value} value={opt.value}>
+                  {opt.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+
+        <div className="space-y-2">
+          <Label htmlFor="status">Status</Label>
+          <Select
+            value={data.status}
+            onValueChange={(v) => handleChange('status', v as GoalStatus)}
+          >
+            <SelectTrigger>
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {STATUS_OPTIONS.map((opt) => (
+                <SelectItem key={opt.value} value={opt.value}>
+                  {opt.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+
+        <div className="space-y-2">
+          <Label htmlFor="timelineWeeks">Tijdlijn (weken)</Label>
+          <Input
+            id="timelineWeeks"
+            type="number"
+            min={1}
+            max={52}
+            value={data.timelineWeeks}
+            onChange={(e) => handleChange('timelineWeeks', parseInt(e.target.value) || 1)}
+          />
+        </div>
+      </div>
+
+      <div className="space-y-2">
+        <Label htmlFor="measurability">Meetbaarheid</Label>
+        <Input
+          id="measurability"
+          value={data.measurability}
+          onChange={(e) => handleChange('measurability', e.target.value)}
+          placeholder="Hoe meten we vooruitgang?"
+        />
+      </div>
+
+      <div className="space-y-2">
+        <div className="flex justify-between">
+          <Label>Voortgang</Label>
+          <span className="text-sm text-slate-500">{data.progress}%</span>
+        </div>
+        <Slider
+          value={[data.progress]}
+          onValueChange={(v) => handleChange('progress', v[0])}
+          max={100}
+          step={5}
+        />
+      </div>
+    </div>
+  );
+}

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>
+  );
+}