colin/triqura-ecd
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): mobile responsiveness audit + type fixes

Browse Source 
Mobile Responsiveness:
- Viewport meta tags toegevoegd in layout.tsx
- EPD header: patient details verborgen op mobiel, zoekbalk responsive
- Agenda: auto-switch naar dagview op mobiel, mini-kalender verborgen
- Agenda toolbar: verticale stacking, Week/Werkweek knoppen verborgen
- Patiëntenlijst: compact icoon-only button op mobiel
- Verpleegrapportage: verticale flow i.p.v. twee-koloms layout
- Cortex: artifact overlay met slide-in animatie op mobiel
- Cortex: "Terug" knop toegevoegd aan artifact panels
- Toast feedback bij succesvolle afspraak creatie

Code Quality Fixes (KISS/DRY):
- Resize listener vervangen door bestaande useMediaQuery hook
- Dubbele flex class opgeschoond in epd-header.tsx
- userScalable: false verwijderd (accessibility)

Type Fixes:
- actions.ts: status literal type met 'as const'
- agenda-block.tsx: dateRange start/end optioneel
- chat-empty-state.tsx: framer-motion ease type
- cortex-store.ts: ChatEntities.dateRange consistent met Zod schema

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
colinislit
2026-01-03 10:28:04 +01:00
parent 52e07aaf80
commit 7b9de4ada2
13 changed files with 206 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/epd/agenda/actions.ts
View File

@@ -124,7 +124,7 @@ export async function createEncounter(params: CreateEncounterParams) {
class_code: params.classCode, class_code: params.classCode,
class_display: params.classDisplay, class_display: params.classDisplay,
notes: params.notes, notes: params.notes,
status: 'planned', status: 'planned' as const,
}; };
console.log('[createEncounter] Insert data:', insertData); console.log('[createEncounter] Insert data:', insertData);

18
app/epd/agenda/components/agenda-toolbar.tsx
View File

@@ -21,10 +21,10 @@ interface AgendaToolbarProps {
onNewAppointment: () => void; onNewAppointment: () => void;
} }
const VIEW_OPTIONS: { value: CalendarView; label: string }[] = [ const VIEW_OPTIONS: { value: CalendarView; label: string; className?: string }[] = [
{ value: 'timeGridDay', label: 'Dag' }, { value: 'timeGridDay', label: 'Dag' },
{ value: 'timeGridWeek', label: 'Week' }, { value: 'timeGridWeek', label: 'Week', className: 'hidden md:block' },
{ value: 'timeGridWorkWeek', label: 'Werkweek' }, { value: 'timeGridWorkWeek', label: 'Werkweek', className: 'hidden md:block' },
]; ];
export function AgendaToolbar({ export function AgendaToolbar({
@@ -60,7 +60,7 @@ export function AgendaToolbar({
}; };
return ( return (
<div className="flex items-center justify-between gap-4 mb-4"> <div className="flex flex-col md:flex-row items-start md:items-center justify-between gap-4 mb-4">
{/* Left: Title and Date */} {/* Left: Title and Date */}
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
<h1 className="text-2xl font-bold text-slate-900">Agenda</h1> <h1 className="text-2xl font-bold text-slate-900">Agenda</h1>
@@ -104,11 +104,10 @@ export function AgendaToolbar({
<button <button
key={option.value} key={option.value}
onClick={() => onViewChange(option.value)} onClick={() => onViewChange(option.value)}
className={`px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${ className={`px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${currentView === option.value
currentView === option.value
? 'bg-white text-slate-900 shadow-sm' ? 'bg-white text-slate-900 shadow-sm'
: 'text-slate-600 hover:text-slate-900' : 'text-slate-600 hover:text-slate-900'
}`} } ${option.className || ''}`}
> >
{option.label} {option.label}
</button> </button>
@@ -116,9 +115,10 @@ export function AgendaToolbar({
</div> </div>
{/* New Appointment Button */} {/* New Appointment Button */}
<Button onClick={onNewAppointment} className="gap-2"> <Button onClick={onNewAppointment} className="gap-2 w-full md:w-auto">
<Plus className="h-4 w-4" /> <Plus className="h-4 w-4" />
Nieuwe Afspraak <span className="hidden md:inline">Nieuwe Afspraak</span>
<span className="md:hidden">Nieuw</span>
</Button> </Button>
</div> </div>
</div> </div>

11
app/epd/agenda/components/agenda-view.tsx
View File

@@ -10,6 +10,7 @@ import React, { useState, useCallback, useRef, useTransition, useEffect } from '
import dynamic from 'next/dynamic'; import dynamic from 'next/dynamic';
import { startOfWeek, endOfWeek, addDays, format } from 'date-fns'; import { startOfWeek, endOfWeek, addDays, format } from 'date-fns';
import { toast } from '@/hooks/use-toast'; import { toast } from '@/hooks/use-toast';
import { useMediaQuery } from '@/hooks/use-media-query';
// Lazy load FullCalendar component (~150KB+ savings) // Lazy load FullCalendar component (~150KB+ savings)
const AgendaCalendar = dynamic( const AgendaCalendar = dynamic(
@@ -62,6 +63,14 @@ export function AgendaView({ initialEvents, initialDate, highlightEncounterId }:
const [pendingReschedule, setPendingReschedule] = useState<PendingReschedule | null>(null); const [pendingReschedule, setPendingReschedule] = useState<PendingReschedule | null>(null);
const [isRescheduling, setIsRescheduling] = useState(false); const [isRescheduling, setIsRescheduling] = useState(false);
// Auto-switch to day view on mobile
const isMobile = useMediaQuery('(max-width: 767px)');
useEffect(() => {
if (isMobile) {
setCurrentView('timeGridDay');
}
}, [isMobile]);
const calendarRef = useRef<{ getApi: () => { prev: () => void; next: () => void; today: () => void; changeView: (view: string) => void; getDate: () => Date } } | null>(null); const calendarRef = useRef<{ getApi: () => { prev: () => void; next: () => void; today: () => void; changeView: (view: string) => void; getDate: () => Date } } | null>(null);
// Auto-open appointment modal when navigating from a report // Auto-open appointment modal when navigating from a report
@@ -246,7 +255,7 @@ export function AgendaView({ initialEvents, initialDate, highlightEncounterId }:
<div className="flex flex-1 gap-4 min-h-0"> <div className="flex flex-1 gap-4 min-h-0">
{/* Mini calendar sidebar */} {/* Mini calendar sidebar */}
<div className="w-64 flex-shrink-0"> <div className="w-64 flex-shrink-0 hidden md:block">
<MiniCalendar <MiniCalendar
selectedDate={currentDate} selectedDate={currentDate}
onDateSelect={handleMiniCalendarDateSelect} onDateSelect={handleMiniCalendarDateSelect}

40
app/epd/components/epd-header.tsx
View File

@@ -50,12 +50,12 @@ export const EPDHeader = memo(function EPDHeader({ className = "" }: EPDHeaderPr
const name = patient.name?.[0]; const name = patient.name?.[0];
const fullName = name const fullName = name
? [ ? [
...(name.prefix || []), ...(name.prefix || []),
...(name.given || []), ...(name.given || []),
name.family, name.family,
] ]
.filter(Boolean) .filter(Boolean)
.join(' ') .join(' ')
: ''; : '';
// Extract status from extension // Extract status from extension
@@ -67,29 +67,29 @@ export const EPDHeader = memo(function EPDHeader({ className = "" }: EPDHeaderPr
// Extract birth date // Extract birth date
const birthDate = patient.birthDate const birthDate = patient.birthDate
? new Date(patient.birthDate).toLocaleDateString('nl-NL', { ? new Date(patient.birthDate).toLocaleDateString('nl-NL', {
day: '2-digit', day: '2-digit',
month: '2-digit', month: '2-digit',
year: 'numeric', year: 'numeric',
}) })
: null; : null;
// Extract BSN from identifiers // Extract BSN from identifiers
const bsnIdentifier = patient.identifier?.find( const bsnIdentifier = patient.identifier?.find(
(id: any) => id.system === 'http://fhir.nl/fhir/NamingSystem/bsn' || (id: any) => id.system === 'http://fhir.nl/fhir/NamingSystem/bsn' ||
id.system?.includes('bsn') || id.system?.includes('bsn') ||
id.type?.coding?.[0]?.code === 'BSN' id.type?.coding?.[0]?.code === 'BSN'
); );
const bsn = bsnIdentifier?.value; const bsn = bsnIdentifier?.value;
// Extract last modified // Extract last modified
const lastModified = patient.meta?.lastUpdated const lastModified = patient.meta?.lastUpdated
? new Date(patient.meta.lastUpdated).toLocaleString('nl-NL', { ? new Date(patient.meta.lastUpdated).toLocaleString('nl-NL', {
day: '2-digit', day: '2-digit',
month: '2-digit', month: '2-digit',
year: 'numeric', year: 'numeric',
hour: '2-digit', hour: '2-digit',
minute: '2-digit', minute: '2-digit',
}) })
: null; : null;
// Check if John Doe // Check if John Doe
@@ -141,7 +141,7 @@ export const EPDHeader = memo(function EPDHeader({ className = "" }: EPDHeaderPr
</div> </div>
{/* Patient Details */} {/* Patient Details */}
<div className="flex items-center gap-3 text-xs text-slate-500"> <div className="hidden md:flex items-center gap-3 text-xs text-slate-500">
{birthDate && <span>Geb: {birthDate}</span>} {birthDate && <span>Geb: {birthDate}</span>}
{bsn && <span>BSN: {bsn}</span>} {bsn && <span>BSN: {bsn}</span>}
<span>ID: {patient.id}</span> <span>ID: {patient.id}</span>
@@ -184,7 +184,7 @@ export const EPDHeader = memo(function EPDHeader({ className = "" }: EPDHeaderPr
<input <input
type="text" type="text"
placeholder="Zoek patiënt..." placeholder="Zoek patiënt..."
className="w-64 pl-9 pr-4 py-2 bg-slate-50 border border-slate-200 rounded-md text-sm placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-transparent transition-all duration-200" className="w-full md:w-64 pl-9 pr-4 py-2 bg-slate-50 border border-slate-200 rounded-md text-sm placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-transparent transition-all duration-200"
/> />
</div> </div>
</div> </div>

4
app/epd/patients/page.tsx
View File

@@ -32,10 +32,10 @@ export default async function PatientsPage({
</div> </div>
<Link <Link
href="/epd/patients/new" href="/epd/patients/new"
className="inline-flex items-center gap-2 px-4 py-2 bg-gradient-to-r from-teal-600 to-teal-700 hover:from-teal-700 hover:to-teal-800 text-white font-medium rounded-lg shadow-sm hover:shadow-md transition-all" className="inline-flex items-center gap-2 px-3 md:px-4 py-2 bg-gradient-to-r from-teal-600 to-teal-700 hover:from-teal-700 hover:to-teal-800 text-white font-medium rounded-lg shadow-sm hover:shadow-md transition-all"
> >
<Plus className="h-4 w-4" /> <Plus className="h-4 w-4" />
<span>Nieuwe patiënt</span> <span className="hidden md:inline">Nieuwe patiënt</span>
</Link> </Link>
</div> </div>
</div> </div>

189
app/epd/verpleegrapportage/rapportage/components/rapportage-workspace.tsx
View File

@@ -172,9 +172,9 @@ export function RapportageWorkspace({ patients }: RapportageWorkspaceProps) {
const groupedLogs = groupLogsByDayAndPart(logs); const groupedLogs = groupLogsByDayAndPart(logs);
return ( return (
<div className="h-full flex bg-slate-50"> <div className="h-full flex flex-col md:flex-row bg-slate-50">
{/* Sidebar - Patiënten */} {/* Sidebar - Patiënten */}
<aside className="w-80 border-r border-slate-200 bg-white flex-shrink-0 overflow-hidden flex flex-col"> <aside className="w-full md:w-80 border-b md:border-b-0 md:border-r border-slate-200 bg-white flex-shrink-0 overflow-hidden flex flex-col h-48 md:h-auto">
<div className="p-4 border-b border-slate-200"> <div className="p-4 border-b border-slate-200">
<h2 className="font-semibold text-slate-900">Ronde overzicht</h2> <h2 className="font-semibold text-slate-900">Ronde overzicht</h2>
</div> </div>
@@ -190,11 +190,10 @@ export function RapportageWorkspace({ patients }: RapportageWorkspaceProps) {
<button <button
key={patient.id} key={patient.id}
onClick={() => setSelectedPatientId(patient.id)} onClick={() => setSelectedPatientId(patient.id)}
className={`w-full px-4 py-3 text-left transition-colors ${ className={`w-full px-4 py-3 text-left transition-colors ${isSelected
isSelected
? 'bg-teal-50' ? 'bg-teal-50'
: 'hover:bg-slate-50' : 'hover:bg-slate-50'
}`} }`}
> >
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<span className={`font-medium truncate ${isSelected ? 'text-teal-900' : 'text-slate-900'}`}> <span className={`font-medium truncate ${isSelected ? 'text-teal-900' : 'text-slate-900'}`}>
@@ -229,92 +228,92 @@ export function RapportageWorkspace({ patients }: RapportageWorkspaceProps) {
{/* Main content */} {/* Main content */}
<main className="flex-1 overflow-y-auto p-6 space-y-4"> <main className="flex-1 overflow-y-auto p-6 space-y-4">
{/* Risico alerts */} {/* Risico alerts */}
{selectedPatient && selectedPatient.alerts.high_risk_count > 0 && ( {selectedPatient && selectedPatient.alerts.high_risk_count > 0 && (
<div className="bg-red-50 border border-red-200 rounded-lg p-3 flex items-center gap-3"> <div className="bg-red-50 border border-red-200 rounded-lg p-3 flex items-center gap-3">
<AlertTriangle className="h-5 w-5 text-red-600 flex-shrink-0" /> <AlertTriangle className="h-5 w-5 text-red-600 flex-shrink-0" />
<div> <div>
<span className="font-medium text-red-900"> <span className="font-medium text-red-900">
{selectedPatient.alerts.high_risk_count} hoog risico {selectedPatient.alerts.high_risk_count} hoog risico
</span> </span>
<span className="text-red-700 text-sm ml-2"> <span className="text-red-700 text-sm ml-2">
Let op verhoogde aandachtspunten voor deze cliënt Let op verhoogde aandachtspunten voor deze cliënt
</span>
</div>
</div>
)}
{/* Invoerformulier */}
{selectedPatientId && (
<QuickEntryForm
patientId={selectedPatientId}
onSuccess={handleRefresh}
/>
)}
{/* Stats row - alleen tonen als er data is */}
{logs.length > 0 && (
<div className="flex items-center gap-4 text-sm">
<span className="text-slate-600">
<span className="font-semibold text-slate-900">{logs.length}</span> notities
</span> </span>
{markedForHandover > 0 && (
<span className="flex items-center gap-1 text-teal-700">
<CheckCircle2 className="h-4 w-4" />
<span className="font-semibold">{markedForHandover}</span> overdracht
</span>
)}
</div> </div>
)} </div>
)}
{/* Timeline */} {/* Invoerformulier */}
{isLoading ? ( {selectedPatientId && (
<div className="bg-white rounded-lg border border-slate-200 p-8 text-center"> <QuickEntryForm
<Loader2 className="h-8 w-8 text-slate-400 animate-spin mx-auto" /> patientId={selectedPatientId}
<p className="text-sm text-slate-500 mt-2">Laden...</p> onSuccess={handleRefresh}
</div> />
) : logs.length === 0 ? ( )}
<div className="bg-white rounded-lg border border-slate-200 p-8 text-center">
<FileText className="h-10 w-10 text-slate-300 mx-auto mb-2" />
<p className="text-slate-600">Nog geen notities</p>
<p className="text-sm text-slate-500">Voeg een notitie toe via het formulier hierboven</p>
</div>
) : (
<div className="space-y-4">
{groupedLogs.map(dayGroup => (
<div key={dayGroup.date} className="bg-white rounded-lg border border-slate-200 overflow-hidden">
<div className="px-4 py-2 bg-slate-50 border-b border-slate-100">
<span className="font-medium text-slate-700 capitalize text-sm">{dayGroup.dateLabel}</span>
</div>
{dayGroup.dayParts.map(partGroup => { {/* Stats row - alleen tonen als er data is */}
const PartIcon = DAY_PART_CONFIG[partGroup.part].icon; {logs.length > 0 && (
return ( <div className="flex items-center gap-4 text-sm">
<div key={partGroup.part}> <span className="text-slate-600">
<div className="flex items-center gap-2 px-4 py-1.5 bg-slate-50/50 border-b border-slate-50"> <span className="font-semibold text-slate-900">{logs.length}</span> notities
<PartIcon className={`h-3.5 w-3.5 ${DAY_PART_CONFIG[partGroup.part].color}`} /> </span>
<span className="text-xs font-medium text-slate-500">{DAY_PART_CONFIG[partGroup.part].label}</span> {markedForHandover > 0 && (
</div> <span className="flex items-center gap-1 text-teal-700">
<CheckCircle2 className="h-4 w-4" />
<span className="font-semibold">{markedForHandover}</span> overdracht
</span>
)}
</div>
)}
<div className="relative pl-8"> {/* Timeline */}
<div className="absolute left-5 top-0 bottom-0 w-0.5 bg-slate-100" /> {isLoading ? (
<div className="bg-white rounded-lg border border-slate-200 p-8 text-center">
{partGroup.logs.map((log, idx) => ( <Loader2 className="h-8 w-8 text-slate-400 animate-spin mx-auto" />
<TimelineItem <p className="text-sm text-slate-500 mt-2">Laden...</p>
key={log.id} </div>
log={log} ) : logs.length === 0 ? (
onRefresh={handleRefresh} <div className="bg-white rounded-lg border border-slate-200 p-8 text-center">
isLast={idx === partGroup.logs.length - 1} <FileText className="h-10 w-10 text-slate-300 mx-auto mb-2" />
/> <p className="text-slate-600">Nog geen notities</p>
))} <p className="text-sm text-slate-500">Voeg een notitie toe via het formulier hierboven</p>
</div> </div>
</div> ) : (
); <div className="space-y-4">
})} {groupedLogs.map(dayGroup => (
<div key={dayGroup.date} className="bg-white rounded-lg border border-slate-200 overflow-hidden">
<div className="px-4 py-2 bg-slate-50 border-b border-slate-100">
<span className="font-medium text-slate-700 capitalize text-sm">{dayGroup.dateLabel}</span>
</div> </div>
))}
</div> {dayGroup.dayParts.map(partGroup => {
)} const PartIcon = DAY_PART_CONFIG[partGroup.part].icon;
return (
<div key={partGroup.part}>
<div className="flex items-center gap-2 px-4 py-1.5 bg-slate-50/50 border-b border-slate-50">
<PartIcon className={`h-3.5 w-3.5 ${DAY_PART_CONFIG[partGroup.part].color}`} />
<span className="text-xs font-medium text-slate-500">{DAY_PART_CONFIG[partGroup.part].label}</span>
</div>
<div className="relative pl-8">
<div className="absolute left-5 top-0 bottom-0 w-0.5 bg-slate-100" />
{partGroup.logs.map((log, idx) => (
<TimelineItem
key={log.id}
log={log}
onRefresh={handleRefresh}
isLast={idx === partGroup.logs.length - 1}
/>
))}
</div>
</div>
);
})}
</div>
))}
</div>
)}
</main> </main>
</div> </div>
); );
@@ -389,11 +388,10 @@ function QuickEntryForm({ patientId, onSuccess }: { patientId: string; onSuccess
key={cat} key={cat}
type="button" type="button"
onClick={() => setCategory(cat)} onClick={() => setCategory(cat)}
className={`inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium transition-colors whitespace-nowrap ${ className={`inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium transition-colors whitespace-nowrap ${isSelected
isSelected
? `${config.bgColor} ${config.textColor}` ? `${config.bgColor} ${config.textColor}`
: 'bg-slate-100 text-slate-600 hover:bg-slate-200' : 'bg-slate-100 text-slate-600 hover:bg-slate-200'
}`} }`}
> >
<Icon className="h-3 w-3" /> <Icon className="h-3 w-3" />
{config.label} {config.label}
@@ -426,11 +424,10 @@ function QuickEntryForm({ patientId, onSuccess }: { patientId: string; onSuccess
<button <button
type="button" type="button"
onClick={() => setIncludeInHandover(!includeInHandover)} onClick={() => setIncludeInHandover(!includeInHandover)}
className={`inline-flex items-center gap-1.5 px-2 py-1 rounded text-xs font-medium transition-colors ${ className={`inline-flex items-center gap-1.5 px-2 py-1 rounded text-xs font-medium transition-colors ${includeInHandover
includeInHandover
? 'bg-teal-100 text-teal-800' ? 'bg-teal-100 text-teal-800'
: 'bg-slate-100 text-slate-600 hover:bg-teal-50 hover:text-teal-700' : 'bg-slate-100 text-slate-600 hover:bg-teal-50 hover:text-teal-700'
}`} }`}
> >
<CheckCircle2 className="h-3.5 w-3.5" /> <CheckCircle2 className="h-3.5 w-3.5" />
Overdracht Overdracht
@@ -533,9 +530,8 @@ function TimelineItem({ log, onRefresh, isLast }: { log: Report; onRefresh: () =
key={cat} key={cat}
type="button" type="button"
onClick={() => setEditCategory(cat)} onClick={() => setEditCategory(cat)}
className={`text-xs px-2 py-0.5 rounded-full ${ className={`text-xs px-2 py-0.5 rounded-full ${editCategory === cat ? `${catConfig.bgColor} ${catConfig.textColor}` : 'bg-slate-100 text-slate-600'
editCategory === cat ? `${catConfig.bgColor} ${catConfig.textColor}` : 'bg-slate-100 text-slate-600' }`}
}`}
> >
{catConfig.label} {catConfig.label}
</button> </button>
@@ -585,11 +581,10 @@ function TimelineItem({ log, onRefresh, isLast }: { log: Report; onRefresh: () =
<button <button
onClick={toggleHandover} onClick={toggleHandover}
disabled={isPending} disabled={isPending}
className={`text-xs px-1.5 py-0.5 rounded transition-colors ${ className={`text-xs px-1.5 py-0.5 rounded transition-colors ${log.include_in_handover
log.include_in_handover
? 'bg-teal-100 text-teal-700' ? 'bg-teal-100 text-teal-700'
: 'bg-slate-100 text-slate-400 hover:bg-teal-50 hover:text-teal-600' : 'bg-slate-100 text-slate-400 hover:bg-teal-50 hover:text-teal-600'
}`} }`}
> >
<CheckCircle2 className={`h-3 w-3 inline ${isPending ? 'animate-pulse' : ''}`} /> <CheckCircle2 className={`h-3 w-3 inline ${isPending ? 'animate-pulse' : ''}`} />
</button> </button>

7
app/layout.tsx
View File

@@ -1,4 +1,4 @@
import type { Metadata } from "next"; import type { Metadata, Viewport } from "next";
import localFont from "next/font/local"; import localFont from "next/font/local";
import "./globals.css"; import "./globals.css";
import { Toaster } from '@/components/ui/toaster'; import { Toaster } from '@/components/ui/toaster';
@@ -125,6 +125,11 @@ export const metadata: Metadata = {
}, },
}; };
export const viewport: Viewport = {
width: 'device-width',
initialScale: 1,
};
const siteUrl = process.env.NEXT_PUBLIC_APP_URL || 'https://aispeedrun.vercel.app' const siteUrl = process.env.NEXT_PUBLIC_APP_URL || 'https://aispeedrun.vercel.app'
const jsonLd = { const jsonLd = {

40
components/cortex/artifacts/artifact-container.tsx
View File

@@ -11,6 +11,7 @@
*/ */
import { ArtifactTab } from './artifact-tab'; import { ArtifactTab } from './artifact-tab';
import { ChevronLeft } from 'lucide-react';
import { AgendaBlock, type AgendaBlockProps } from './blocks/agenda-block'; import { AgendaBlock, type AgendaBlockProps } from './blocks/agenda-block';
import { DagnotatieBlock } from '../blocks/dagnotitie-block'; import { DagnotatieBlock } from '../blocks/dagnotitie-block';
import { ZoekenBlock } from '../blocks/zoeken-block'; import { ZoekenBlock } from '../blocks/zoeken-block';
@@ -101,9 +102,9 @@ function buildAgendaPrefill(prefill: Record<string, any> | undefined): AgendaBlo
prefill.patient || prefill.patient ||
(prefill.patientName || prefill.patientId (prefill.patientName || prefill.patientId
? { ? {
id: prefill.patientId || '', id: prefill.patientId || '',
name: prefill.patientName || '', name: prefill.patientName || '',
} }
: undefined); : undefined);
// Try to resolve date from label first (more reliable than AI-generated dates) // Try to resolve date from label first (more reliable than AI-generated dates)
@@ -117,9 +118,9 @@ function buildAgendaPrefill(prefill: Record<string, any> | undefined): AgendaBlo
const datetime = datetimeDate const datetime = datetimeDate
? { ? {
date: datetimeDate, date: datetimeDate,
time: typeof prefill?.datetime?.time === 'string' ? prefill.datetime.time : '', time: typeof prefill?.datetime?.time === 'string' ? prefill.datetime.time : '',
} }
: undefined; : undefined;
const appointmentType = resolveAppointmentType(prefill?.appointmentType || prefill?.type); const appointmentType = resolveAppointmentType(prefill?.appointmentType || prefill?.type);
@@ -135,9 +136,9 @@ function buildAgendaPrefill(prefill: Record<string, any> | undefined): AgendaBlo
(prefill?.newDatetime?.time ? new Date() : undefined); (prefill?.newDatetime?.time ? new Date() : undefined);
const newDatetime = newDatetimeDate const newDatetime = newDatetimeDate
? { ? {
date: newDatetimeDate, date: newDatetimeDate,
time: typeof prefill?.newDatetime?.time === 'string' ? prefill.newDatetime.time : '', time: typeof prefill?.newDatetime?.time === 'string' ? prefill.newDatetime.time : '',
} }
: undefined; : undefined;
return { return {
@@ -264,9 +265,26 @@ export function ArtifactContainer({
return ( return (
<div className="h-full flex flex-col bg-slate-50"> <div className="h-full flex flex-col bg-slate-50">
{/* Tabs - alleen tonen bij >1 artifact */} {/* Tabs - alleen tonen bij >1 artifact */
/* Echter op mobile: ALTIJD een header tonen met back knop als er een artifact open is */
}
{/* Mobile Header: Back button + Title */}
<div className="lg:hidden flex items-center p-3 border-b border-slate-200 bg-white sticky top-0 z-10">
<button
onClick={() => activeArtifact && onCloseArtifact(activeArtifact.id)}
className="flex items-center text-slate-600 hover:text-slate-900 mr-3"
>
<ChevronLeft className="w-5 h-5" />
<span className="font-medium">Terug</span>
</button>
<span className="font-semibold text-slate-800 truncate flex-1">
{activeArtifact ? activeArtifact.title : 'Details'}
</span>
</div>
{artifacts.length > 1 && ( {artifacts.length > 1 && (
<div className="flex bg-white border-b border-slate-200"> <div className="hidden lg:flex bg-white border-b border-slate-200">
{artifacts.map((artifact) => ( {artifacts.map((artifact) => (
<ArtifactTab <ArtifactTab
key={artifact.id} key={artifact.id}

2
components/cortex/artifacts/blocks/agenda-block.tsx
View File

@@ -36,7 +36,7 @@ export function AgendaBlock({
}: AgendaBlockProps) { }: AgendaBlockProps) {
// State for fetched appointments (only used in list mode) // State for fetched appointments (only used in list mode)
const [appointments, setAppointments] = useState<CalendarEvent[] | undefined>(initialAppointments); const [appointments, setAppointments] = useState<CalendarEvent[] | undefined>(initialAppointments);
const [dateRange, setDateRange] = useState<{ start: Date; end: Date; label: string } | undefined>(initialDateRange); const [dateRange, setDateRange] = useState<{ start?: Date; end?: Date; label: string } | undefined>(initialDateRange);
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState<string | null>(null); const [error, setError] = useState<string | null>(null);
const [refetchKey, setRefetchKey] = useState(0); const [refetchKey, setRefetchKey] = useState(0);

19
components/cortex/artifacts/blocks/agenda-create-form.tsx
View File

@@ -17,6 +17,8 @@ import {
SelectValue, SelectValue,
} from '@/components/ui/select'; } from '@/components/ui/select';
import { Badge } from '@/components/ui/badge'; import { Badge } from '@/components/ui/badge';
import { toast } from '@/hooks/use-toast';
import { ToastAction } from '@/components/ui/toast';
import { createEncounter } from '@/app/epd/agenda/actions'; import { createEncounter } from '@/app/epd/agenda/actions';
import { import {
APPOINTMENT_TYPES, APPOINTMENT_TYPES,
@@ -153,7 +155,22 @@ export function AgendaCreateForm({ prefillData, onClose }: AgendaCreateFormProps
}); });
if (result.success) { if (result.success) {
onClose?.(); // Close on success const formattedDate = format(startDate, "EEEE d MMMM 'om' HH:mm", { locale: nl });
toast({
title: '✓ Afspraak ingepland',
description: `${patientName} — ${formattedDate}`,
action: (
<ToastAction
altText="Bekijk afspraak"
onClick={() => window.location.href = `/epd/agenda?highlight=${result.data?.id}&date=${date}`}
>
Bekijken
</ToastAction>
),
});
onClose?.();
} else { } else {
setError(result.error || 'Er is een fout opgetreden.'); setError(result.error || 'Er is een fout opgetreden.');
} }

2
components/cortex/chat/chat-empty-state.tsx
View File

@@ -74,7 +74,7 @@ const cardVariants = {
y: 0, y: 0,
transition: { transition: {
duration: 0.3, duration: 0.3,
ease: 'easeOut', ease: 'easeOut' as const,
}, },
}, },
}; };

15
components/cortex/command-center/command-center.tsx
View File

@@ -19,6 +19,7 @@
import { useEffect, useCallback, useRef } from 'react'; import { useEffect, useCallback, useRef } from 'react';
import { AnimatePresence } from 'framer-motion'; import { AnimatePresence } from 'framer-motion';
import { useCortexStore } from '@/stores/cortex-store'; import { useCortexStore } from '@/stores/cortex-store';
import { cn } from '@/lib/utils';
import { ContextBar } from './context-bar'; import { ContextBar } from './context-bar';
import { OfflineBanner } from './offline-banner'; import { OfflineBanner } from './offline-banner';
import { NudgeToast } from './nudge-toast'; import { NudgeToast } from './nudge-toast';
@@ -120,14 +121,20 @@ export function CommandCenter() {
<ContextBar /> <ContextBar />
{/* Split-screen container - flex-1 */} {/* Split-screen container - flex-1 */}
<div className="flex-1 flex overflow-hidden"> <div className="flex-1 flex overflow-hidden relative">
{/* Chat Panel - 40% (desktop), 100% (mobile) */} {/* Chat Panel - 40% (desktop), 100% (mobile) */}
<div className="w-full lg:w-[40%] border-r border-slate-200 flex flex-col"> <div className="w-full lg:w-[40%] border-r border-slate-200 flex flex-col h-full">
<ChatPanel /> <ChatPanel />
</div> </div>
{/* Artifact Area - 60% (desktop), hidden on mobile */} {/* Artifact Area - 60% (desktop), overlay on mobile */}
<div className="hidden lg:flex lg:w-[60%] flex-col"> <div
className={cn(
"lg:flex lg:w-[60%] flex-col bg-white transition-transform duration-300 ease-in-out lg:transform-none lg:static absolute inset-0 z-20",
// On mobile: hidden by default, visible (slide in) when openArtifacts > 0
openArtifacts.length > 0 ? "translate-x-0" : "translate-x-full lg:translate-x-0"
)}
>
<ArtifactArea /> <ArtifactArea />
</div> </div>
</div> </div>

4
stores/cortex-store.ts
View File

@@ -36,8 +36,8 @@ export interface ChatEntities {
date?: string; date?: string;
time?: string; time?: string;
dateRange?: { dateRange?: {
start: string; start?: string;
end: string; end?: string;
label: string; label: string;
}; };
datetime?: { datetime?: {