feat(swift): implement agenda planning module (Epic 4 UI)
- Add AgendaBlock core component with list, create, cancel, reschedule modes - Implement AgendaListView with patient/type/location details and actions - Implement AgendaCreateForm with fuzzy patient search and validation - Implement AgendaCancelView with disambiguation support - Implement AgendaRescheduleForm with date/time picker - Integrate with server actions (create, cancel, reschedule) - Add radio-group UI component - Update documentation and status
This commit is contained in:
colinislit
66
components/swift/artifacts/blocks/agenda-block.tsx
Normal file
66
components/swift/artifacts/blocks/agenda-block.tsx
Normal file
@@ -0,0 +1,66 @@
|
||||
'use client';
|
||||
import React from 'react';
|
||||
import { Encounter, AppointmentTypeCode, LocationClassCode, CalendarEvent } from '@/app/epd/agenda/types';
|
||||
import { AgendaListView } from './agenda-list-view';
|
||||
import { AgendaCreateForm } from './agenda-create-form';
|
||||
import { AgendaCancelView } from './agenda-cancel-view';
|
||||
import { AgendaRescheduleForm } from './agenda-reschedule-form';
|
||||
|
||||
export interface AgendaBlockProps {
|
||||
mode: 'list' | 'create' | 'cancel' | 'reschedule';
|
||||
appointments?: CalendarEvent[];
|
||||
dateRange?: { start: Date; end: Date; label: string };
|
||||
prefillData?: {
|
||||
patient?: { id: string; name: string };
|
||||
datetime?: { date: Date; time: string };
|
||||
type?: AppointmentTypeCode;
|
||||
location?: LocationClassCode;
|
||||
notes?: string;
|
||||
};
|
||||
disambiguationOptions?: CalendarEvent[];
|
||||
onClose?: () => void;
|
||||
}
|
||||
|
||||
export function AgendaBlock({
|
||||
mode,
|
||||
appointments,
|
||||
dateRange,
|
||||
prefillData,
|
||||
disambiguationOptions,
|
||||
onClose,
|
||||
}: AgendaBlockProps) {
|
||||
const renderContent = () => {
|
||||
switch (mode) {
|
||||
case 'list':
|
||||
return (
|
||||
<AgendaListView
|
||||
appointments={appointments}
|
||||
dateRange={dateRange}
|
||||
onClose={onClose}
|
||||
onCancelAppointment={(evt) => console.log('Cancel requested', evt)}
|
||||
onViewDetails={(evt) => window.location.href = `/epd/agenda?focus=${evt.id}`}
|
||||
/>
|
||||
);
|
||||
case 'create':
|
||||
return <AgendaCreateForm prefillData={prefillData} onClose={onClose} />;
|
||||
case 'cancel':
|
||||
return (
|
||||
<AgendaCancelView
|
||||
disambiguationOptions={disambiguationOptions}
|
||||
prefillData={prefillData}
|
||||
onClose={onClose}
|
||||
/>
|
||||
);
|
||||
case 'reschedule':
|
||||
return <AgendaRescheduleForm prefillData={prefillData} onClose={onClose} />;
|
||||
default:
|
||||
return <div className="p-4 text-red-500">Unknown mode: {mode}</div>;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="w-full max-w-[600px] max-h-[80vh] overflow-y-auto bg-white border rounded shadow-sm">
|
||||
{renderContent()}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
210
components/swift/artifacts/blocks/agenda-cancel-view.tsx
Normal file
210
components/swift/artifacts/blocks/agenda-cancel-view.tsx
Normal file
@@ -0,0 +1,210 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import { format } from 'date-fns';
|
||||
import { nl } from 'date-fns/locale';
|
||||
import { AlertTriangle, Calendar, Clock, X, CheckCircle2 } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { cancelEncounter } from '@/app/epd/agenda/actions';
|
||||
import { CalendarEvent, APPOINTMENT_TYPES, AppointmentTypeCode } from '@/app/epd/agenda/types';
|
||||
|
||||
interface AgendaCancelViewProps {
|
||||
disambiguationOptions?: CalendarEvent[];
|
||||
prefillData?: {
|
||||
identifier?: { encounterId?: string };
|
||||
};
|
||||
onClose?: () => void;
|
||||
}
|
||||
|
||||
export function AgendaCancelView({ disambiguationOptions, prefillData, onClose }: AgendaCancelViewProps) {
|
||||
const [selectedEncounterId, setSelectedEncounterId] = useState<string | undefined>(
|
||||
prefillData?.identifier?.encounterId
|
||||
);
|
||||
|
||||
// If we have disambiguation options and no selection yet, default to first?
|
||||
// Better to let user choose.
|
||||
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [isSuccess, setIsSuccess] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
// If there's only one option provided via disambiguationOptions (and no prefill), select it automatically?
|
||||
// Logic: if prefill encounterId is set, use that.
|
||||
// If not, and disambiguationOptions has 1 item, use that.
|
||||
// If not, wait for user selection.
|
||||
|
||||
const effectiveEncounter = disambiguationOptions?.find(e => e.id === selectedEncounterId) ||
|
||||
(disambiguationOptions?.length === 1 ? disambiguationOptions[0] : undefined);
|
||||
|
||||
const handleCancel = async () => {
|
||||
const idToCancel = selectedEncounterId || effectiveEncounter?.id;
|
||||
|
||||
if (!idToCancel) {
|
||||
setError('Selecteer eerst een afspraak om te annuleren.');
|
||||
return;
|
||||
}
|
||||
|
||||
setIsSubmitting(true);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
const result = await cancelEncounter(idToCancel);
|
||||
if (result.success) {
|
||||
setIsSuccess(true);
|
||||
// Wait a moment before closing or let user close
|
||||
setTimeout(() => onClose?.(), 2000);
|
||||
} else {
|
||||
setError(result.error || 'Kon de afspraak niet annuleren.');
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Cancel error:', err);
|
||||
setError('Er is een onverwachte fout opgetreden.');
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (isSuccess) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center p-8 text-center h-full">
|
||||
<div className="bg-green-50 p-3 rounded-full mb-4">
|
||||
<CheckCircle2 className="h-8 w-8 text-green-600" />
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold text-gray-900">Afspraak geannuleerd</h3>
|
||||
<p className="text-sm text-gray-500 mt-1 mb-6">De afspraak is succesvol verwijderd uit de agenda.</p>
|
||||
<Button onClick={onClose} variant="outline">Sluiten</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Disambiguation Mode
|
||||
if (!effectiveEncounter && disambiguationOptions && disambiguationOptions.length > 1) {
|
||||
return (
|
||||
<div className="flex flex-col h-full bg-white">
|
||||
<div className="flex items-center justify-between p-4 border-b">
|
||||
<h3 className="font-semibold text-lg text-red-700">Afspraak annuleren</h3>
|
||||
<Button variant="ghost" size="icon" onClick={onClose} className="h-8 w-8 hover:bg-gray-100 rounded-full">
|
||||
<X className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 p-4 overflow-y-auto">
|
||||
<p className="text-sm text-gray-600 mb-4">
|
||||
Er zijn meerdere afspraken gevonden. Welke wil je annuleren?
|
||||
</p>
|
||||
|
||||
<RadioGroup value={selectedEncounterId} onValueChange={setSelectedEncounterId} className="space-y-3">
|
||||
{disambiguationOptions.map((evt) => {
|
||||
const encounter = evt.extendedProps.encounter;
|
||||
const typeCode = encounter.type_code as AppointmentTypeCode;
|
||||
const dateStr = format(new Date(evt.start), 'd MMM yyyy', { locale: nl });
|
||||
const timeStr = format(new Date(evt.start), 'HH:mm');
|
||||
|
||||
return (
|
||||
<div key={evt.id} className="flex items-center space-x-2 border rounded-lg p-3 hover:bg-gray-50 cursor-pointer">
|
||||
<RadioGroupItem value={evt.id} id={evt.id} />
|
||||
<Label htmlFor={evt.id} className="flex-1 cursor-pointer">
|
||||
<div className="font-medium text-gray-900">{evt.title}</div>
|
||||
<div className="text-sm text-gray-500">
|
||||
{dateStr} om {timeStr} • {encounter.type_display || APPOINTMENT_TYPES[typeCode]}
|
||||
</div>
|
||||
</Label>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</RadioGroup>
|
||||
</div>
|
||||
|
||||
<div className="p-4 bg-gray-50 border-t flex justify-between gap-3">
|
||||
<Button variant="outline" onClick={onClose} className="flex-1">Annuleren</Button>
|
||||
<Button
|
||||
onClick={() => { /* State updates automatically via RadioGroup */ }}
|
||||
disabled={!selectedEncounterId}
|
||||
className="flex-1 bg-red-600 hover:bg-red-700 text-white"
|
||||
>
|
||||
Volgende
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Confirmation Mode (Single Match)
|
||||
if (effectiveEncounter) {
|
||||
const encounter = effectiveEncounter.extendedProps.encounter;
|
||||
const typeCode = encounter.type_code as AppointmentTypeCode;
|
||||
const dateStr = format(new Date(effectiveEncounter.start), 'EEEE d MMMM yyyy', { locale: nl });
|
||||
const timeStr = format(new Date(effectiveEncounter.start), 'HH:mm');
|
||||
const endTimeStr = effectiveEncounter.end ? format(new Date(effectiveEncounter.end), 'HH:mm') : '';
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full bg-white">
|
||||
<div className="flex items-center justify-between p-4 border-b">
|
||||
<h3 className="font-semibold text-lg text-red-700">Weet je het zeker?</h3>
|
||||
<Button variant="ghost" size="icon" onClick={onClose} className="h-8 w-8 hover:bg-gray-100 rounded-full">
|
||||
<X className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 p-4">
|
||||
<div className="bg-red-50 border border-red-100 rounded-lg p-4 mb-6">
|
||||
<div className="flex items-start gap-3">
|
||||
<AlertTriangle className="h-5 w-5 text-red-600 mt-0.5" />
|
||||
<div className="text-sm text-red-800">
|
||||
<p className="font-medium">Deze actie kan niet ongedaan worden gemaakt.</p>
|
||||
<p className="mt-1 opacity-90">De afspraak wordt permanent uit de agenda verwijderd.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="border rounded-lg p-4 bg-white shadow-sm">
|
||||
<h4 className="font-medium text-gray-900 mb-2">{effectiveEncounter.title}</h4>
|
||||
<div className="space-y-2 text-sm text-gray-600">
|
||||
<div className="flex items-center gap-2">
|
||||
<Calendar className="h-4 w-4 text-gray-400" />
|
||||
<span className="capitalize">{dateStr}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Clock className="h-4 w-4 text-gray-400" />
|
||||
<span>{timeStr} {endTimeStr && `- ${endTimeStr}`}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="inline-block w-20 text-gray-400">Type:</span>
|
||||
<span className="font-medium">{encounter.type_display || APPOINTMENT_TYPES[typeCode]}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="mt-4 p-3 bg-red-100 text-red-700 text-sm rounded-md">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="p-4 bg-gray-50 border-t flex justify-between gap-3">
|
||||
<Button variant="outline" onClick={onClose} disabled={isSubmitting} className="flex-1">
|
||||
Terug
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleCancel}
|
||||
disabled={isSubmitting}
|
||||
className="flex-1 bg-red-600 hover:bg-red-700 text-white"
|
||||
>
|
||||
{isSubmitting ? 'Annuleren...' : 'Ja, annuleer afspraak'}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Fallback / Loading
|
||||
return (
|
||||
<div className="p-4">
|
||||
<p>Geen afspraak geselecteerd.</p>
|
||||
<Button onClick={onClose} variant="link">Sluiten</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
363
components/swift/artifacts/blocks/agenda-create-form.tsx
Normal file
363
components/swift/artifacts/blocks/agenda-create-form.tsx
Normal file
@@ -0,0 +1,363 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import { format, addHours, parseISO } from 'date-fns';
|
||||
import { nl } from 'date-fns/locale';
|
||||
import { Calendar, Clock, MapPin, User, Check, X, AlertCircle } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { createEncounter } from '@/app/epd/agenda/actions';
|
||||
import {
|
||||
APPOINTMENT_TYPES,
|
||||
LOCATION_CLASSES,
|
||||
AppointmentTypeCode,
|
||||
LocationClassCode,
|
||||
APPOINTMENT_TYPE_COLORS
|
||||
} from '@/app/epd/agenda/types';
|
||||
|
||||
interface AgendaCreateFormProps {
|
||||
prefillData?: {
|
||||
patient?: { id: string; name: string };
|
||||
datetime?: { date: Date; time: string };
|
||||
type?: AppointmentTypeCode;
|
||||
location?: LocationClassCode;
|
||||
notes?: string;
|
||||
};
|
||||
onClose?: () => void;
|
||||
}
|
||||
|
||||
interface PatientResult {
|
||||
id: string;
|
||||
name: string;
|
||||
bsn?: string;
|
||||
birthDate?: string;
|
||||
}
|
||||
|
||||
export function AgendaCreateForm({ prefillData, onClose }: AgendaCreateFormProps) {
|
||||
// Form State
|
||||
const [patientId, setPatientId] = useState<string>(prefillData?.patient?.id || '');
|
||||
const [patientName, setPatientName] = useState<string>(prefillData?.patient?.name || '');
|
||||
const [date, setDate] = useState<string>(
|
||||
prefillData?.datetime?.date ? format(prefillData.datetime.date, 'yyyy-MM-dd') : format(new Date(), 'yyyy-MM-dd')
|
||||
);
|
||||
const [time, setTime] = useState<string>(prefillData?.datetime?.time || '09:00');
|
||||
const [type, setType] = useState<AppointmentTypeCode>(prefillData?.type || 'behandeling');
|
||||
const [location, setLocation] = useState<LocationClassCode>(prefillData?.location || 'AMB');
|
||||
const [notes, setNotes] = useState<string>(prefillData?.notes || '');
|
||||
|
||||
// UI State
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
// Patient Search State
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [searchResults, setSearchResults] = useState<PatientResult[]>([]);
|
||||
const [isSearching, setIsSearching] = useState(false);
|
||||
const [showResults, setShowResults] = useState(false);
|
||||
const searchRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
// Initialize search query if patient is prefilled but we want to allow editing
|
||||
useEffect(() => {
|
||||
if (prefillData?.patient?.name) {
|
||||
setSearchQuery(prefillData.patient.name);
|
||||
}
|
||||
}, [prefillData]);
|
||||
|
||||
// Handle outside click to close search results
|
||||
useEffect(() => {
|
||||
function handleClickOutside(event: MouseEvent) {
|
||||
if (searchRef.current && !searchRef.current.contains(event.target as Node)) {
|
||||
setShowResults(false);
|
||||
}
|
||||
}
|
||||
document.addEventListener('mousedown', handleClickOutside);
|
||||
return () => document.removeEventListener('mousedown', handleClickOutside);
|
||||
}, []);
|
||||
|
||||
// Debounced search
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(async () => {
|
||||
if (searchQuery.length < 2 || patientId) return; // Don't search if too short or if patient already selected
|
||||
|
||||
setIsSearching(true);
|
||||
try {
|
||||
const res = await fetch(`/api/swift/patients/search?q=${encodeURIComponent(searchQuery)}`);
|
||||
if (res.ok) {
|
||||
const data = await res.json();
|
||||
setSearchResults(data.patients || []);
|
||||
setShowResults(true);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Failed to search patients', err);
|
||||
} finally {
|
||||
setIsSearching(false);
|
||||
}
|
||||
}, 300);
|
||||
|
||||
return () => clearTimeout(timer);
|
||||
}, [searchQuery, patientId]);
|
||||
|
||||
const handlePatientSelect = (patient: PatientResult) => {
|
||||
setPatientId(patient.id);
|
||||
setPatientName(patient.name);
|
||||
setSearchQuery(patient.name);
|
||||
setShowResults(false);
|
||||
};
|
||||
|
||||
const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setSearchQuery(e.target.value);
|
||||
setPatientId(''); // Clear selection on edit
|
||||
setPatientName('');
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!patientId) {
|
||||
setError('Selecteer a.u.b. een patiënt.');
|
||||
return;
|
||||
}
|
||||
|
||||
setIsSubmitting(true);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
// Construct Date objects
|
||||
const startDate = new Date(`${date}T${time}`);
|
||||
const endDate = addHours(startDate, 1); // Default duration 1 hour
|
||||
|
||||
// Map codes to displays
|
||||
const typeDisplay = APPOINTMENT_TYPES[type];
|
||||
const locationDisplay = LOCATION_CLASSES[location];
|
||||
|
||||
const result = await createEncounter({
|
||||
patientId,
|
||||
periodStart: startDate.toISOString(),
|
||||
periodEnd: endDate.toISOString(),
|
||||
typeCode: type,
|
||||
typeDisplay,
|
||||
classCode: location,
|
||||
classDisplay: locationDisplay,
|
||||
notes: notes || undefined,
|
||||
});
|
||||
|
||||
if (result.success) {
|
||||
onClose?.(); // Close on success
|
||||
} else {
|
||||
setError(result.error || 'Er is een fout opgetreden.');
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Submit error:', err);
|
||||
setError('Er is een onverwachte fout opgetreden.');
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full bg-white">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between p-4 border-b">
|
||||
<h3 className="font-semibold text-lg text-teal-700">Nieuwe afspraak inplannen</h3>
|
||||
<Button variant="ghost" size="icon" onClick={onClose} className="h-8 w-8 hover:bg-gray-100 rounded-full">
|
||||
<X className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Form Body */}
|
||||
<form onSubmit={handleSubmit} className="flex-1 overflow-y-auto p-4 space-y-5">
|
||||
|
||||
{error && (
|
||||
<div className="p-3 bg-red-50 border border-red-200 rounded-md flex items-center gap-2 text-sm text-red-700">
|
||||
<AlertCircle className="h-4 w-4" />
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Patient Selection */}
|
||||
<div className="space-y-1.5" ref={searchRef}>
|
||||
<Label htmlFor="patient" className="text-sm font-medium text-gray-700">Patiënt <span className="text-red-500">*</span></Label>
|
||||
<div className="relative">
|
||||
<div className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400">
|
||||
<User className="h-4 w-4" />
|
||||
</div>
|
||||
<Input
|
||||
id="patient"
|
||||
value={searchQuery}
|
||||
onChange={handleSearchChange}
|
||||
placeholder="Zoek op naam..."
|
||||
className="pl-9"
|
||||
autoComplete="off"
|
||||
/>
|
||||
{isSearching && (
|
||||
<div className="absolute right-3 top-1/2 -translate-y-1/2">
|
||||
<div className="animate-spin h-3 w-3 border-2 border-teal-500 border-t-transparent rounded-full"></div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{showResults && searchResults.length > 0 && (
|
||||
<div className="absolute z-10 w-full mt-1 bg-white border rounded-md shadow-lg max-h-48 overflow-y-auto">
|
||||
{searchResults.map((p) => (
|
||||
<button
|
||||
key={p.id}
|
||||
type="button"
|
||||
onClick={() => handlePatientSelect(p)}
|
||||
className="w-full text-left px-3 py-2 hover:bg-teal-50 text-sm flex flex-col border-b last:border-0"
|
||||
>
|
||||
<span className="font-medium text-gray-900">{p.name}</span>
|
||||
<span className="text-xs text-gray-500">
|
||||
{p.birthDate && format(new Date(p.birthDate), 'dd-MM-yyyy')}
|
||||
{p.bsn && ` • BSN: ${p.bsn}`}
|
||||
</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Date & Time */}
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="date" className="text-sm font-medium text-gray-700">Datum <span className="text-red-500">*</span></Label>
|
||||
<div className="relative">
|
||||
<div className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400">
|
||||
<Calendar className="h-4 w-4" />
|
||||
</div>
|
||||
<Input
|
||||
id="date"
|
||||
type="date"
|
||||
value={date}
|
||||
onChange={(e) => setDate(e.target.value)}
|
||||
className="pl-9"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="time" className="text-sm font-medium text-gray-700">Tijd <span className="text-red-500">*</span></Label>
|
||||
<div className="relative">
|
||||
<div className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400">
|
||||
<Clock className="h-4 w-4" />
|
||||
</div>
|
||||
<Input
|
||||
id="time"
|
||||
type="time"
|
||||
value={time}
|
||||
onChange={(e) => setTime(e.target.value)}
|
||||
className="pl-9"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Type Selection */}
|
||||
<div className="space-y-1.5">
|
||||
<Label className="text-sm font-medium text-gray-700">Type afspraak <span className="text-red-500">*</span></Label>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
{(Object.keys(APPOINTMENT_TYPES) as AppointmentTypeCode[]).map((t) => {
|
||||
const bg = APPOINTMENT_TYPE_COLORS[t].bg;
|
||||
const text = APPOINTMENT_TYPE_COLORS[t].text;
|
||||
const border = APPOINTMENT_TYPE_COLORS[t].border;
|
||||
const isActive = type === t;
|
||||
|
||||
return (
|
||||
<button
|
||||
key={t}
|
||||
type="button"
|
||||
onClick={() => setType(t)}
|
||||
className={`
|
||||
px-3 py-2 text-xs font-medium rounded-md border text-left transition-all
|
||||
${isActive ? 'ring-2 ring-offset-1 ring-teal-500' : 'hover:bg-gray-50'}
|
||||
`}
|
||||
style={{
|
||||
backgroundColor: isActive ? bg : 'white',
|
||||
color: isActive ? text : '#374151',
|
||||
borderColor: isActive ? border : '#e5e7eb'
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<span>{APPOINTMENT_TYPES[t]}</span>
|
||||
{isActive && <Check className="h-3 w-3" />}
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Location Selection */}
|
||||
<div className="space-y-1.5">
|
||||
<Label className="text-sm font-medium text-gray-700">Locatie <span className="text-red-500">*</span></Label>
|
||||
<div className="flex gap-2">
|
||||
{(Object.keys(LOCATION_CLASSES) as LocationClassCode[]).map((l) => (
|
||||
<button
|
||||
key={l}
|
||||
type="button"
|
||||
onClick={() => setLocation(l)}
|
||||
className={`
|
||||
flex-1 py-2 px-3 text-xs font-medium rounded-md border flex items-center justify-center gap-1.5 transition-all
|
||||
${location === l
|
||||
? 'bg-teal-50 border-teal-200 text-teal-800 ring-2 ring-teal-500 ring-opacity-20'
|
||||
: 'bg-white border-gray-200 text-gray-600 hover:bg-gray-50'}
|
||||
`}
|
||||
>
|
||||
{l === 'AMB' && <MapPin className="h-3 w-3" />}
|
||||
{l === 'VR' && <div className="h-3 w-3 border rounded-full" />}
|
||||
{l === 'HH' && <div className="h-3 w-3 bg-current rounded-sm" />}
|
||||
{LOCATION_CLASSES[l]}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Notes */}
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="notes" className="text-sm font-medium text-gray-700">Notities (optioneel)</Label>
|
||||
<Textarea
|
||||
id="notes"
|
||||
value={notes}
|
||||
onChange={(e) => setNotes(e.target.value)}
|
||||
placeholder="Bijv. bijzonderheden, reden van komst..."
|
||||
className="h-20 text-sm resize-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="pt-2"></div>
|
||||
</form>
|
||||
|
||||
{/* Footer / Actions */}
|
||||
<div className="p-4 bg-gray-50 border-t flex justify-between gap-3">
|
||||
<Button variant="outline" type="button" onClick={onClose} disabled={isSubmitting} className="flex-1">
|
||||
Annuleren
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
onClick={handleSubmit}
|
||||
disabled={isSubmitting}
|
||||
className="flex-1 bg-teal-600 hover:bg-teal-700 text-white"
|
||||
>
|
||||
{isSubmitting ? (
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="h-3 w-3 border-2 border-white/50 border-t-white rounded-full animate-spin" />
|
||||
<span>Bezig...</span>
|
||||
</div>
|
||||
) : (
|
||||
'Afspraak inplannen'
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
172
components/swift/artifacts/blocks/agenda-list-view.tsx
Normal file
172
components/swift/artifacts/blocks/agenda-list-view.tsx
Normal file
@@ -0,0 +1,172 @@
|
||||
'use client';
|
||||
import React from 'react';
|
||||
import { format } from 'date-fns';
|
||||
import { nl } from 'date-fns/locale';
|
||||
import { Calendar, MapPin, Globe, Home, Clock, X, Info, ChevronRight, Ban } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import {
|
||||
CalendarEvent,
|
||||
APPOINTMENT_TYPE_COLORS,
|
||||
APPOINTMENT_TYPES,
|
||||
LOCATION_CLASSES,
|
||||
LocationClassCode,
|
||||
AppointmentTypeCode
|
||||
} from '@/app/epd/agenda/types';
|
||||
|
||||
interface AgendaListViewProps {
|
||||
appointments?: CalendarEvent[];
|
||||
dateRange?: { start: Date; end: Date; label: string };
|
||||
onClose?: () => void;
|
||||
onCancelAppointment?: (encounter: CalendarEvent) => void;
|
||||
onViewDetails?: (encounter: CalendarEvent) => void;
|
||||
}
|
||||
|
||||
export function AgendaListView({
|
||||
appointments = [],
|
||||
dateRange,
|
||||
onClose,
|
||||
onCancelAppointment,
|
||||
onViewDetails
|
||||
}: AgendaListViewProps) {
|
||||
|
||||
const formatDateLabel = () => {
|
||||
if (dateRange?.label) {
|
||||
if (dateRange.label === 'vandaag' || dateRange.label === 'morgen') {
|
||||
const dateStr = format(dateRange.start, 'd MMMM', { locale: nl });
|
||||
return `Afspraken ${dateRange.label} - ${dateStr}`;
|
||||
}
|
||||
return `Afspraken ${dateRange.label}`;
|
||||
}
|
||||
// Fallback if no specific label
|
||||
if (appointments.length > 0) {
|
||||
return `Afspraken ${format(new Date(appointments[0].start), 'd MMMM', { locale: nl })}`;
|
||||
}
|
||||
return 'Afspraken';
|
||||
};
|
||||
|
||||
const getLocationIcon = (classCode: string) => {
|
||||
switch (classCode as LocationClassCode) {
|
||||
case 'AMB': return <MapPin className="h-3 w-3" />;
|
||||
case 'VR': return <Globe className="h-3 w-3" />;
|
||||
case 'HH': return <Home className="h-3 w-3" />;
|
||||
default: return <MapPin className="h-3 w-3" />;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full bg-white">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between p-4 border-b">
|
||||
<div className="flex items-center gap-2 text-teal-700">
|
||||
<Calendar className="h-5 w-5" />
|
||||
<h3 className="font-semibold text-lg capitalize">{formatDateLabel()}</h3>
|
||||
</div>
|
||||
<Button variant="ghost" size="icon" onClick={onClose} className="h-8 w-8 hover:bg-gray-100 rounded-full">
|
||||
<X className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Body */}
|
||||
<div className="flex-1 overflow-y-auto p-4 space-y-3">
|
||||
{appointments.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-10 text-center text-gray-500">
|
||||
<div className="bg-gray-50 p-4 rounded-full mb-3">
|
||||
<Calendar className="h-8 w-8 text-gray-400" />
|
||||
</div>
|
||||
<p className="font-medium">Geen afspraken gevonden</p>
|
||||
<p className="text-sm text-gray-400 mt-1">
|
||||
Er staan geen afspraken gepland voor deze periode.
|
||||
</p>
|
||||
<Button variant="outline" className="mt-4 gap-2 text-teal-600 border-teal-200 hover:bg-teal-50">
|
||||
<span className="text-lg leading-none">+</span> Maak nieuwe afspraak
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
appointments.map((evt) => {
|
||||
const encounter = evt.extendedProps.encounter;
|
||||
const patient = evt.extendedProps.patient;
|
||||
const typeCode = encounter.type_code as AppointmentTypeCode;
|
||||
const typeColor = APPOINTMENT_TYPE_COLORS[typeCode] || APPOINTMENT_TYPE_COLORS.overig;
|
||||
const classCode = encounter.class_code as LocationClassCode;
|
||||
|
||||
const startTime = format(new Date(evt.start), 'HH:mm');
|
||||
const endTime = evt.end ? format(new Date(evt.end), 'HH:mm') : '';
|
||||
|
||||
return (
|
||||
<div
|
||||
key={evt.id}
|
||||
className="group border rounded-lg p-3 hover:border-teal-200 hover:shadow-sm transition-all bg-white"
|
||||
>
|
||||
<div className="flex justify-between items-start mb-2">
|
||||
<div className="flex flex-col">
|
||||
<div className="flex items-center gap-2 text-sm font-medium text-gray-900">
|
||||
<Clock className="h-3.5 w-3.5 text-gray-400" />
|
||||
<span>{startTime} {endTime && `- ${endTime}`}</span>
|
||||
</div>
|
||||
<button
|
||||
className="text-left font-semibold text-teal-700 hover:underline mt-0.5"
|
||||
onClick={() => console.log('Open patient context', patient?.id)}
|
||||
>
|
||||
{evt.title}
|
||||
</button>
|
||||
</div>
|
||||
<Badge
|
||||
variant="outline"
|
||||
style={{
|
||||
backgroundColor: typeColor.bg,
|
||||
color: typeColor.text,
|
||||
borderColor: typeColor.border
|
||||
}}
|
||||
className="whitespace-nowrap shadow-none"
|
||||
>
|
||||
{encounter.type_display || APPOINTMENT_TYPES[typeCode] || typeCode}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4 text-xs text-gray-500 mt-2">
|
||||
<div className="flex items-center gap-1.5" title={LOCATION_CLASSES[classCode]}>
|
||||
{getLocationIcon(classCode)}
|
||||
<span>{encounter.class_display || LOCATION_CLASSES[classCode] || classCode}</span>
|
||||
</div>
|
||||
{encounter.status === 'cancelled' && (
|
||||
<Badge variant="destructive" className="h-5 px-1.5">Geannuleerd</Badge>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-end gap-2 mt-3 pt-2 border-t border-gray-50 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-7 text-xs text-gray-500 hover:text-red-600 hover:bg-red-50"
|
||||
onClick={() => onCancelAppointment?.(evt)}
|
||||
>
|
||||
Annuleren
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-7 text-xs text-teal-600 hover:bg-teal-50"
|
||||
onClick={() => onViewDetails?.(evt)}
|
||||
>
|
||||
Details <ChevronRight className="ml-1 h-3 w-3" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="p-3 bg-gray-50 border-t text-center">
|
||||
<a
|
||||
href="/epd/agenda"
|
||||
className="text-xs font-medium text-teal-600 hover:text-teal-700 hover:underline inline-flex items-center gap-1"
|
||||
>
|
||||
Open volledige agenda <ChevronRight className="h-3 w-3" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
210
components/swift/artifacts/blocks/agenda-reschedule-form.tsx
Normal file
210
components/swift/artifacts/blocks/agenda-reschedule-form.tsx
Normal file
@@ -0,0 +1,210 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { format, addHours } from 'date-fns';
|
||||
import { nl } from 'date-fns/locale';
|
||||
import { Calendar, Clock, X, ArrowRight, AlertCircle, CheckCircle2 } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { rescheduleEncounter } from '@/app/epd/agenda/actions';
|
||||
import { CalendarEvent } from '@/app/epd/agenda/types';
|
||||
|
||||
interface AgendaRescheduleFormProps {
|
||||
prefillData?: {
|
||||
identifier?: { encounterId?: string; encounter?: CalendarEvent };
|
||||
newDatetime?: { date: Date; time: string };
|
||||
};
|
||||
onClose?: () => void;
|
||||
}
|
||||
|
||||
export function AgendaRescheduleForm({ prefillData, onClose }: AgendaRescheduleFormProps) {
|
||||
// Use encounter from prefill if provided directly (we might need to pass it in prefillData from parent)
|
||||
const encounter = prefillData?.identifier?.encounter;
|
||||
const encounterId = prefillData?.identifier?.encounterId;
|
||||
|
||||
// State for new date/time
|
||||
const [date, setDate] = useState<string>(
|
||||
prefillData?.newDatetime?.date
|
||||
? format(prefillData.newDatetime.date, 'yyyy-MM-dd')
|
||||
: encounter ? format(new Date(encounter.start), 'yyyy-MM-dd') : format(new Date(), 'yyyy-MM-dd')
|
||||
);
|
||||
|
||||
const [time, setTime] = useState<string>(
|
||||
prefillData?.newDatetime?.time
|
||||
? prefillData.newDatetime.time
|
||||
: encounter ? format(new Date(encounter.start), 'HH:mm') : '09:00'
|
||||
);
|
||||
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [isSuccess, setIsSuccess] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!encounterId) {
|
||||
setError('Geen afspraak ID gevonden.');
|
||||
return;
|
||||
}
|
||||
|
||||
setIsSubmitting(true);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
const startDate = new Date(`${date}T${time}`);
|
||||
// Keep same duration? For simplicty default to 1 hour or original duration if we knew it.
|
||||
// API rescheduleEncounter takes start/end.
|
||||
|
||||
let endDate = addHours(startDate, 1);
|
||||
if (encounter && encounter.end) {
|
||||
const originalDuration = new Date(encounter.end).getTime() - new Date(encounter.start).getTime();
|
||||
endDate = new Date(startDate.getTime() + originalDuration);
|
||||
}
|
||||
|
||||
// Check if not in past
|
||||
if (startDate < new Date()) {
|
||||
setError('Kan niet verplaatsen naar een datum in het verleden.');
|
||||
setIsSubmitting(false);
|
||||
return;
|
||||
}
|
||||
|
||||
const result = await rescheduleEncounter(
|
||||
encounterId,
|
||||
startDate.toISOString(),
|
||||
endDate.toISOString()
|
||||
);
|
||||
|
||||
if (result.success) {
|
||||
setIsSuccess(true);
|
||||
setTimeout(() => onClose?.(), 2000);
|
||||
} else {
|
||||
setError(result.error || 'Kon de afspraak niet verzetten.');
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Reschedule error:', err);
|
||||
setError('Er is een onverwachte fout opgetreden.');
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (isSuccess) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center p-8 text-center h-full">
|
||||
<div className="bg-green-50 p-3 rounded-full mb-4">
|
||||
<CheckCircle2 className="h-8 w-8 text-green-600" />
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold text-gray-900">Afspraak verzet</h3>
|
||||
<p className="text-sm text-gray-500 mt-1 mb-6">
|
||||
De afspraak is verplaatst naar {format(new Date(`${date}T${time}`), 'd MMMM HH:mm', { locale: nl })}.
|
||||
</p>
|
||||
<Button onClick={onClose} variant="outline">Sluiten</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!encounter && !encounterId) {
|
||||
return (
|
||||
<div className="p-4 text-center">
|
||||
<p className="text-red-500">Geen afspraak gevonden om te verzetten.</p>
|
||||
<Button onClick={onClose} variant="link">Sluiten</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Calculate current date/time for display
|
||||
const currentStart = encounter ? new Date(encounter.start) : null;
|
||||
const currentStr = currentStart ? format(currentStart, 'd MMMM yyyy HH:mm', { locale: nl }) : 'Onbekend';
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full bg-white">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between p-4 border-b">
|
||||
<h3 className="font-semibold text-lg text-teal-700">Afspraak verzetten</h3>
|
||||
<Button variant="ghost" size="icon" onClick={onClose} className="h-8 w-8 hover:bg-gray-100 rounded-full">
|
||||
<X className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Form */}
|
||||
<form onSubmit={handleSubmit} className="flex-1 p-4 overflow-y-auto space-y-6">
|
||||
|
||||
{/* Info Card */}
|
||||
<div className="bg-blue-50 border border-blue-100 rounded-lg p-4">
|
||||
{encounter && <h4 className="font-medium text-blue-900 mb-2">{encounter.title}</h4>}
|
||||
<div className="flex items-center gap-2 text-sm text-blue-700 opacity-80 decoration-slate-400">
|
||||
<Calendar className="h-4 w-4" />
|
||||
<span className="line-through decoration-blue-900/40">{currentStr}</span>
|
||||
</div>
|
||||
<div className="flex justify-center my-1">
|
||||
<ArrowRight className="h-4 w-4 text-blue-400 rotate-90 sm:rotate-0" />
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-sm font-semibold text-blue-800">
|
||||
<Calendar className="h-4 w-4" />
|
||||
<span>
|
||||
{date && time ? format(new Date(`${date}T${time}`), 'd MMMM yyyy HH:mm', { locale: nl }) : '...'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="p-3 bg-red-50 border border-red-200 rounded-md flex items-center gap-2 text-sm text-red-700">
|
||||
<AlertCircle className="h-4 w-4" />
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="date" className="text-sm font-medium text-gray-700">Nieuwe datum</Label>
|
||||
<div className="relative">
|
||||
<div className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400">
|
||||
<Calendar className="h-4 w-4" />
|
||||
</div>
|
||||
<Input
|
||||
id="date"
|
||||
type="date"
|
||||
value={date}
|
||||
onChange={(e) => setDate(e.target.value)}
|
||||
className="pl-9"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="time" className="text-sm font-medium text-gray-700">Nieuwe tijd</Label>
|
||||
<div className="relative">
|
||||
<div className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400">
|
||||
<Clock className="h-4 w-4" />
|
||||
</div>
|
||||
<Input
|
||||
id="time"
|
||||
type="time"
|
||||
value={time}
|
||||
onChange={(e) => setTime(e.target.value)}
|
||||
className="pl-9"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="p-4 bg-gray-50 border-t flex justify-between gap-3">
|
||||
<Button variant="outline" type="button" onClick={onClose} disabled={isSubmitting} className="flex-1">
|
||||
Annuleren
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
onClick={handleSubmit}
|
||||
disabled={isSubmitting}
|
||||
className="flex-1 bg-teal-600 hover:bg-teal-700 text-white"
|
||||
>
|
||||
{isSubmitting ? 'Verplaatsen...' : 'Bevestig wijziging'}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user