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>
This commit is contained in:
colinislit
125
components/behandelplan/behandelplan-list.tsx
Normal file
125
components/behandelplan/behandelplan-list.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
1023
components/behandelplan/behandelplan-view.tsx
Normal file
1023
components/behandelplan/behandelplan-view.tsx
Normal file
File diff suppressed because it is too large
Load Diff
162
components/behandelplan/editable-section.tsx
Normal file
162
components/behandelplan/editable-section.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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';
|
||||
|
||||
97
components/behandelplan/sections/behandelstructuur-form.tsx
Normal file
97
components/behandelplan/sections/behandelstructuur-form.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
183
components/behandelplan/sections/goal-form.tsx
Normal file
183
components/behandelplan/sections/goal-form.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
115
components/behandelplan/sections/intervention-form.tsx
Normal file
115
components/behandelplan/sections/intervention-form.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
30
components/ui/checkbox.tsx
Normal file
30
components/ui/checkbox.tsx
Normal file
@@ -0,0 +1,30 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
|
||||
import { Check } from "lucide-react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const Checkbox = React.forwardRef<
|
||||
React.ElementRef<typeof CheckboxPrimitive.Root>,
|
||||
React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<CheckboxPrimitive.Root
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"grid place-content-center peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<CheckboxPrimitive.Indicator
|
||||
className={cn("grid place-content-center text-current")}
|
||||
>
|
||||
<Check className="h-4 w-4" />
|
||||
</CheckboxPrimitive.Indicator>
|
||||
</CheckboxPrimitive.Root>
|
||||
))
|
||||
Checkbox.displayName = CheckboxPrimitive.Root.displayName
|
||||
|
||||
export { Checkbox }
|
||||
22
components/ui/input.tsx
Normal file
22
components/ui/input.tsx
Normal file
@@ -0,0 +1,22 @@
|
||||
import * as React from "react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
|
||||
({ className, type, ...props }, ref) => {
|
||||
return (
|
||||
<input
|
||||
type={type}
|
||||
className={cn(
|
||||
"flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
|
||||
className
|
||||
)}
|
||||
ref={ref}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
)
|
||||
Input.displayName = "Input"
|
||||
|
||||
export { Input }
|
||||
159
components/ui/select.tsx
Normal file
159
components/ui/select.tsx
Normal file
@@ -0,0 +1,159 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import * as SelectPrimitive from "@radix-ui/react-select"
|
||||
import { Check, ChevronDown, ChevronUp } from "lucide-react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const Select = SelectPrimitive.Root
|
||||
|
||||
const SelectGroup = SelectPrimitive.Group
|
||||
|
||||
const SelectValue = SelectPrimitive.Value
|
||||
|
||||
const SelectTrigger = React.forwardRef<
|
||||
React.ElementRef<typeof SelectPrimitive.Trigger>,
|
||||
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
|
||||
>(({ className, children, ...props }, ref) => (
|
||||
<SelectPrimitive.Trigger
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<SelectPrimitive.Icon asChild>
|
||||
<ChevronDown className="h-4 w-4 opacity-50" />
|
||||
</SelectPrimitive.Icon>
|
||||
</SelectPrimitive.Trigger>
|
||||
))
|
||||
SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
|
||||
|
||||
const SelectScrollUpButton = React.forwardRef<
|
||||
React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
|
||||
React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<SelectPrimitive.ScrollUpButton
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"flex cursor-default items-center justify-center py-1",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<ChevronUp className="h-4 w-4" />
|
||||
</SelectPrimitive.ScrollUpButton>
|
||||
))
|
||||
SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
|
||||
|
||||
const SelectScrollDownButton = React.forwardRef<
|
||||
React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
|
||||
React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<SelectPrimitive.ScrollDownButton
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"flex cursor-default items-center justify-center py-1",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<ChevronDown className="h-4 w-4" />
|
||||
</SelectPrimitive.ScrollDownButton>
|
||||
))
|
||||
SelectScrollDownButton.displayName =
|
||||
SelectPrimitive.ScrollDownButton.displayName
|
||||
|
||||
const SelectContent = React.forwardRef<
|
||||
React.ElementRef<typeof SelectPrimitive.Content>,
|
||||
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
|
||||
>(({ className, children, position = "popper", ...props }, ref) => (
|
||||
<SelectPrimitive.Portal>
|
||||
<SelectPrimitive.Content
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-select-content-transform-origin]",
|
||||
position === "popper" &&
|
||||
"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
|
||||
className
|
||||
)}
|
||||
position={position}
|
||||
{...props}
|
||||
>
|
||||
<SelectScrollUpButton />
|
||||
<SelectPrimitive.Viewport
|
||||
className={cn(
|
||||
"p-1",
|
||||
position === "popper" &&
|
||||
"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
</SelectPrimitive.Viewport>
|
||||
<SelectScrollDownButton />
|
||||
</SelectPrimitive.Content>
|
||||
</SelectPrimitive.Portal>
|
||||
))
|
||||
SelectContent.displayName = SelectPrimitive.Content.displayName
|
||||
|
||||
const SelectLabel = React.forwardRef<
|
||||
React.ElementRef<typeof SelectPrimitive.Label>,
|
||||
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<SelectPrimitive.Label
|
||||
ref={ref}
|
||||
className={cn("px-2 py-1.5 text-sm font-semibold", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
SelectLabel.displayName = SelectPrimitive.Label.displayName
|
||||
|
||||
const SelectItem = React.forwardRef<
|
||||
React.ElementRef<typeof SelectPrimitive.Item>,
|
||||
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
|
||||
>(({ className, children, ...props }, ref) => (
|
||||
<SelectPrimitive.Item
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
|
||||
<SelectPrimitive.ItemIndicator>
|
||||
<Check className="h-4 w-4" />
|
||||
</SelectPrimitive.ItemIndicator>
|
||||
</span>
|
||||
<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
|
||||
</SelectPrimitive.Item>
|
||||
))
|
||||
SelectItem.displayName = SelectPrimitive.Item.displayName
|
||||
|
||||
const SelectSeparator = React.forwardRef<
|
||||
React.ElementRef<typeof SelectPrimitive.Separator>,
|
||||
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<SelectPrimitive.Separator
|
||||
ref={ref}
|
||||
className={cn("-mx-1 my-1 h-px bg-muted", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
SelectSeparator.displayName = SelectPrimitive.Separator.displayName
|
||||
|
||||
export {
|
||||
Select,
|
||||
SelectGroup,
|
||||
SelectValue,
|
||||
SelectTrigger,
|
||||
SelectContent,
|
||||
SelectLabel,
|
||||
SelectItem,
|
||||
SelectSeparator,
|
||||
SelectScrollUpButton,
|
||||
SelectScrollDownButton,
|
||||
}
|
||||
Reference in New Issue
Block a user