fix(cortex): update date handling in API and UI components

- Adjusted date handling in the agenda API to ensure optional parameters for start, end, and label are correctly processed.
- Enhanced chat input and action parser to support optional date labels for relative dates.
- Updated agenda components to handle date ranges and loading states more effectively.
- Improved error handling and loading indicators in the agenda block for better user experience.

This commit ensures consistency in date handling across the application, aligning with the new requirements for relative date inputs.

components/cortex/artifacts/blocks/agenda-block.tsx

@@ -1,16 +1,18 @@
 'use client';
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { 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';
+import { AgendaErrorState } from './agenda-error-state';
 import { motion, AnimatePresence } from 'framer-motion';
+import { Loader2 } from 'lucide-react';
 
 export interface AgendaBlockProps {
     mode: 'list' | 'create' | 'cancel' | 'reschedule';
     appointments?: CalendarEvent[];
-    dateRange?: { start: Date; end: Date; label: string };
+    dateRange?: { start?: Date; end?: Date; label: string };
     prefillData?: {
         patient?: { id: string; name: string };
         datetime?: { date: Date; time: string };
@@ -26,15 +28,92 @@ export interface AgendaBlockProps {
 
 export function AgendaBlock({
     mode,
-    appointments,
-    dateRange,
+    appointments: initialAppointments,
+    dateRange: initialDateRange,
     prefillData,
     disambiguationOptions,
     onClose,
 }: AgendaBlockProps) {
+    // State for fetched appointments (only used in list mode)
+    const [appointments, setAppointments] = useState<CalendarEvent[] | undefined>(initialAppointments);
+    const [dateRange, setDateRange] = useState<{ start: Date; end: Date; label: string } | undefined>(initialDateRange);
+    const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+    const [refetchKey, setRefetchKey] = useState(0);
+
+    // Fetch appointments when in list mode and no appointments are provided
+    // Server-side bepaalt de datum (consistent met EPD agenda)
+    useEffect(() => {
+        if (mode !== 'list') return;
+        if (initialAppointments && initialAppointments.length > 0) return;
+
+        const fetchAppointments = async () => {
+            setIsLoading(true);
+            setError(null);
+
+            try {
+                // Build query params - server bepaalt de datum
+                const params = new URLSearchParams();
+
+                // Stuur alleen label naar server, server berekent de datums
+                if (initialDateRange?.label) {
+                    params.set('label', initialDateRange.label);
+                }
+                // Als geen label en geen expliciete datums, server defaults naar vandaag
+
+                const response = await fetch(`/api/cortex/agenda?${params}`);
+
+                if (!response.ok) {
+                    const errorData = await response.json();
+                    throw new Error(errorData.error || 'Kon afspraken niet laden');
+                }
+
+                const data = await response.json();
+                setAppointments(data.appointments || []);
+
+                // Update dateRange met server-side berekende waarden
+                if (data.dateRange) {
+                    setDateRange({
+                        start: new Date(data.dateRange.start),
+                        end: new Date(data.dateRange.end),
+                        label: data.dateRange.label,
+                    });
+                }
+            } catch (err) {
+                console.error('Error fetching appointments:', err);
+                setError(err instanceof Error ? err.message : 'Er ging iets mis');
+            } finally {
+                setIsLoading(false);
+            }
+        };
+
+        fetchAppointments();
+    }, [mode, initialAppointments, initialDateRange, refetchKey]);
+
     const renderContent = () => {
         switch (mode) {
             case 'list':
+                if (isLoading) {
+                    return (
+                        <div key="loading" className="flex flex-col items-center justify-center h-full text-slate-500">
+                            <Loader2 className="h-8 w-8 animate-spin text-teal-600 mb-4" />
+                            <p className="text-sm">Afspraken laden...</p>
+                        </div>
+                    );
+                }
+                if (error) {
+                    return (
+                        <AgendaErrorState 
+                            key="error"
+                            error={error}
+                            context="query"
+                            onRetry={() => {
+                                setError(null);
+                                setRefetchKey((k) => k + 1); // Trigger refetch
+                            }}
+                        />
+                    );
+                }
                 return (
                     <AgendaListView
                         key="list"