diff --git a/app/epd/components/epd-header.tsx b/app/epd/components/epd-header.tsx index 0a64048..2e195cb 100644 --- a/app/epd/components/epd-header.tsx +++ b/app/epd/components/epd-header.tsx @@ -1,24 +1,173 @@ "use client"; import React from 'react'; -import { Search } from 'lucide-react'; +import { Search, MoreVertical, Mic } from 'lucide-react'; +import { useRouter, usePathname } from 'next/navigation'; +import { usePatientContext } from './patient-context'; +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuTrigger, +} from '@/components/ui/dropdown-menu'; +import { Button } from '@/components/ui/button'; interface EPDHeaderProps { className?: string; } +// Status badge component (compact version) +function StatusBadge({ status }: { status?: string }) { + const badges = { + planned: { label: 'Screening', className: 'bg-amber-100 text-amber-800 border-amber-200' }, + active: { label: 'Actief', className: 'bg-emerald-100 text-emerald-800 border-emerald-200' }, + finished: { label: 'Afgerond', className: 'bg-slate-100 text-slate-800 border-slate-200' }, + cancelled: { label: 'Afgemeld', className: 'bg-red-100 text-red-800 border-red-200' }, + }; + + const badge = status && status in badges ? badges[status as keyof typeof badges] : null; + + if (!badge) return null; + + return ( + + {badge.label} + + ); +} + export function EPDHeader({ className = "" }: EPDHeaderProps) { + const { patient } = usePatientContext(); + const router = useRouter(); + const pathname = usePathname(); + + const handleNewReportClick = () => { + if (!patient?.id) return; + const rapportagePath = `/epd/patients/${patient.id}/rapportage`; + const onRapportagePage = pathname?.startsWith(rapportagePath); + + if (onRapportagePage) { + // Scroll to composer if already on rapportage page + const element = document.getElementById('rapportage-composer'); + if (element) { + element.scrollIntoView({ behavior: 'smooth', block: 'start' }); + (element as HTMLElement).focus?.(); + } + return; + } + + router.push(`${rapportagePath}#rapportage-composer`); + }; + + // Extract patient data + const name = patient?.name?.[0]; + const fullName = name + ? [ + ...(name.prefix || []), + ...(name.given || []), + name.family, + ] + .filter(Boolean) + .join(' ') + : ''; + + // Extract status from extension + const statusExtension = (patient as any)?.extension?.find( + (ext: any) => ext.url === 'http://mini-epd.local/fhir/StructureDefinition/episode-status' + ); + const status = statusExtension?.valueCode; + + // Extract birth date + const birthDate = patient?.birthDate + ? new Date(patient.birthDate).toLocaleDateString('nl-NL', { + day: '2-digit', + month: '2-digit', + year: 'numeric', + }) + : null; + + // Extract BSN from identifiers + const bsnIdentifier = patient?.identifier?.find( + (id: any) => id.system === 'http://fhir.nl/fhir/NamingSystem/bsn' || + id.system?.includes('bsn') || + id.type?.coding?.[0]?.code === 'BSN' + ); + const bsn = bsnIdentifier?.value; + + // Extract last modified + const lastModified = patient?.meta?.lastUpdated + ? new Date(patient.meta.lastUpdated).toLocaleString('nl-NL', { + day: '2-digit', + month: '2-digit', + year: 'numeric', + hour: '2-digit', + minute: '2-digit', + }) + : null; + + // Check if John Doe + const isJohnDoe = (patient as any)?.extension?.find( + (ext: any) => ext.url === 'http://mini-epd.local/fhir/StructureDefinition/john-doe' + )?.valueBoolean; + return (
- {/* Left: Logo */} -
- Mini-ECD -
+ {/* Left: Patient Info (only when patient exists) */} + {patient ? ( +
+ {/* Patient Name and Status */} +
+
+ {fullName} + {isJohnDoe && ( + + John Doe + + )} +
+ +
- {/* Center: Empty space (patient info is shown in ClientHeader below) */} -
+ {/* Patient Details */} +
+ {birthDate && Geb: {birthDate}} + {bsn && BSN: {bsn}} + ID: {patient.id} +
+
+ ) : ( +
+ )} - {/* Right: Search */} -
+ {/* Right: Timestamp + Actions + Search */} +
+ {/* Last modified timestamp */} + {patient && lastModified && ( +
+ Gewijzigd: {lastModified} +
+ )} + + {/* Actions dropdown (only when patient exists) */} + {patient && ( + + + + + + + + Nieuwe rapportage + + + + )} + + {/* Search */}
+
+ {/* Header - Fixed 60px height */} + + + {/* Page Content - Scrollable */} +
+ {children} +
+
+ + ); +} diff --git a/app/epd/components/patient-context.tsx b/app/epd/components/patient-context.tsx new file mode 100644 index 0000000..6b5a29d --- /dev/null +++ b/app/epd/components/patient-context.tsx @@ -0,0 +1,38 @@ +'use client'; + +import { createContext, useContext, useState, useEffect } from 'react'; +import type { FHIRPatient } from '@/lib/fhir'; + +interface PatientContextValue { + patient: FHIRPatient | null; + setPatient: (patient: FHIRPatient | null) => void; +} + +const PatientContext = createContext({ + patient: null, + setPatient: () => {}, +}); + +export function usePatientContext() { + return useContext(PatientContext); +} + +export function PatientProvider({ children }: { children: React.ReactNode }) { + const [patient, setPatient] = useState(null); + + return ( + + {children} + + ); +} + +// Hook to inject patient data into context from nested layouts +export function useSetPatient(patient: FHIRPatient | null) { + const { setPatient } = usePatientContext(); + + useEffect(() => { + setPatient(patient); + return () => setPatient(null); // Cleanup when unmounting + }, [patient, setPatient]); +} diff --git a/app/epd/layout.tsx b/app/epd/layout.tsx index db46eb3..0faacc9 100644 --- a/app/epd/layout.tsx +++ b/app/epd/layout.tsx @@ -7,7 +7,7 @@ import type { ReactNode } from 'react'; import { EPDSidebar } from './components/epd-sidebar'; -import { EPDHeader } from './components/epd-header'; +import { EPDLayoutClient } from './components/epd-layout-client'; import { getUser } from '@/lib/auth/server'; interface EPDLayoutProps { @@ -26,16 +26,10 @@ export default async function EPDLayout({ children }: EPDLayoutProps) { userName={user?.user_metadata?.full_name} /> - {/* Main Content Area */} -
- {/* Header - Fixed 60px height */} - - - {/* Page Content - Scrollable */} -
- {children} -
-
+ {/* Main Content Area with PatientProvider */} + + {children} +
); } diff --git a/app/epd/patients/[id]/components/client-header.tsx b/app/epd/patients/[id]/components/client-header.tsx deleted file mode 100644 index a85ee70..0000000 --- a/app/epd/patients/[id]/components/client-header.tsx +++ /dev/null @@ -1,140 +0,0 @@ -'use client'; - -/** - * Client Header Component - * E2.S3: Context-aware header showing client name, status, last modified en acties - */ - -import { Mic } from 'lucide-react'; -import { useRouter, usePathname } from 'next/navigation'; -import type { FHIRPatient } from '@/lib/fhir'; -import { Button } from '@/components/ui/button'; - -interface ClientHeaderProps { - patient: FHIRPatient; - focusElementId?: string; -} - -// Status badge component -function StatusBadge({ status }: { status?: string }) { - const badges = { - planned: { label: 'Screening', className: 'bg-amber-100 text-amber-800 border-amber-200' }, - active: { label: 'Actief', className: 'bg-emerald-100 text-emerald-800 border-emerald-200' }, - finished: { label: 'Afgerond', className: 'bg-slate-100 text-slate-800 border-slate-200' }, - cancelled: { label: 'Afgemeld', className: 'bg-red-100 text-red-800 border-red-200' }, - }; - - const badge = status && status in badges ? badges[status as keyof typeof badges] : null; - - if (!badge) { - return -; - } - - return ( - - {badge.label} - - ); -} - -export function ClientHeader({ patient, focusElementId = 'rapportage-composer' }: ClientHeaderProps) { - const router = useRouter(); - const pathname = usePathname(); - - const handleNewReportClick = (patientId?: string) => { - if (!patientId) return; - const rapportagePath = `/epd/patients/${patientId}/rapportage`; - const onRapportagePage = pathname?.startsWith(rapportagePath); - - if (onRapportagePage) { - handleScrollToComposer(focusElementId); - return; - } - - const hash = focusElementId ? `#${focusElementId}` : ''; - router.push(`${rapportagePath}${hash}`); - }; - // Extract name - const name = patient.name?.[0]; - const fullName = [ - ...(name?.prefix || []), - ...(name?.given || []), - name?.family, - ] - .filter(Boolean) - .join(' '); - - // Extract status from extension - const statusExtension = (patient as any).extension?.find( - (ext: any) => ext.url === 'http://mini-epd.local/fhir/StructureDefinition/episode-status' - ); - const status = statusExtension?.valueCode; - - // Extract last modified - const lastModified = patient.meta?.lastUpdated - ? new Date(patient.meta.lastUpdated).toLocaleString('nl-NL', { - day: '2-digit', - month: '2-digit', - year: 'numeric', - hour: '2-digit', - minute: '2-digit', - }) - : null; - - // Check if John Doe - const isJohnDoe = (patient as any).extension?.find( - (ext: any) => ext.url === 'http://mini-epd.local/fhir/StructureDefinition/john-doe' - )?.valueBoolean; - - return ( -
-
-
- {/* Name and John Doe indicator */} -
-

{fullName}

- {isJohnDoe && ( - - John Doe - - )} -
- - {/* Status and Last Modified */} -
-
- Status: - -
- {lastModified && ( -
- Laatst gewijzigd: - {lastModified} -
- )} -
-
- -
-
- ID: {patient.id} -
- -
-
-
- ); -} - -function handleScrollToComposer(targetId?: string) { - if (!targetId) return; - const element = document.getElementById(targetId); - if (element) { - element.scrollIntoView({ behavior: 'smooth', block: 'start' }); - (element as HTMLElement).focus?.(); - } -} diff --git a/app/epd/patients/[id]/components/patient-layout-client.tsx b/app/epd/patients/[id]/components/patient-layout-client.tsx index 417bf8d..f9cc2db 100644 --- a/app/epd/patients/[id]/components/patient-layout-client.tsx +++ b/app/epd/patients/[id]/components/patient-layout-client.tsx @@ -1,9 +1,8 @@ 'use client'; -import { useMemo } from 'react'; import type { ReactNode } from 'react'; import type { FHIRPatient } from '@/lib/fhir'; -import { ClientHeader } from './client-header'; +import { useSetPatient } from '@/app/epd/components/patient-context'; interface PatientLayoutClientProps { patient: FHIRPatient; @@ -11,22 +10,12 @@ interface PatientLayoutClientProps { children: ReactNode; } -export function PatientLayoutClient({ patient, patientId, children }: PatientLayoutClientProps) { - const patientName = useMemo(() => { - const name = patient.name?.[0]; - if (!name) return 'deze patiënt'; - return [ - ...(name.prefix || []), - ...(name.given || []), - name.family, - ] - .filter(Boolean) - .join(' '); - }, [patient]); +export function PatientLayoutClient({ patient, children }: PatientLayoutClientProps) { + // Inject patient data into the context (provided by parent EPDLayoutClient) + useSetPatient(patient); return (
-
{children}
); diff --git a/docs/reports/ops-log.md b/docs/reports/ops-log.md new file mode 100644 index 0000000..7a86513 --- /dev/null +++ b/docs/reports/ops-log.md @@ -0,0 +1,62 @@ +## 2025-11-24 — Patient info naar top header + React Context refactor (Colin) +- **Feature**: Patient info verplaatst van ClientHeader naar EPDHeader (top header, 60px compact design) +- **Architecture**: React Context pattern geïmplementeerd voor patient data sharing met state management +- Created `PatientContext` met `useState` + `setPatient` functie voor dynamic updates +- Created `useSetPatient` hook voor patient data injection vanuit nested layouts +- Created `EPDLayoutClient` wrapper component die PatientProvider bevat en EPDHeader wraps +- Context hierarchy: EPDLayout → EPDLayoutClient (PatientProvider) → EPDHeader (consumer) ✓ +- Patient data flow: PatientDetailLayout (fetch) → PatientLayoutClient (useSetPatient) → Context → EPDHeader +- **UI Design**: Logo verwijderd, patient info links-aligned, geboortedatum + BSN toegevoegd +- EPDHeader layout: Patient naam + status badge | Geb | BSN | ID (links) | Gewijzigd timestamp | Actions ⋮ | Search (rechts) +- BSN extraction: Automatisch uit FHIR identifiers (system: `http://fhir.nl/fhir/NamingSystem/bsn`) +- Geboortedatum: Nederlandse datum formatting (dd-mm-yyyy) +- Actions dropdown toegevoegd met MoreVertical icon (bevat "Nieuwe rapportage" actie, uitbreidbaar) +- PatientLayoutClient vereenvoudigd: alleen useSetPatient hook, geen eigen UI meer +- Removed: ClientHeader component (141 regels), was volledig duplicate na migratie +- Resultaat: Single source of truth, schone context-based architecture, -141 regels code + +## 2025-11-23 — Clients → Patients datafix + seeds (Colin) +- Clients die na de hoofdrelease nog in `clients` stonden opgespoord met `clients LEFT JOIN patients` sanity check (Supabase SQL editor) +- Idempotente blok uit `20241121_migrate_legacy_to_fhir.sql` opnieuw gedraaid zodat alle ontbrekende clients nu als patients bestaan +- Verification DO-block uitgevoerd zodat de teller op 0 missing clients staat en de migratie gelogd +- Default organisatie opnieuw gezaaid met `pnpm tsx scripts/seed-organization.ts` (env geladen via `.env.local`) + +## 2026-02-XX — Screening Intake Fase 1 & 2 (Colin) +- TipTap placeholder hints toegevoegd + styled zodat behandeladvies-sectie guidance toont +- Metadata-sectie, afrondingsworkflow en behandelaarselecties bouwden de behandeladvies-tab af +- Intake-tabs (contact, kindcheck, risico, anamnese, onderzoeken/ROM, diagnose, behandeladvies) compleet met Supabase CRUD +- Status dropdowns gecorrigeerd (bezig/afgerond) en dokument flows afgerond +- Supabase migratiestappen wachten nog op einde maintenance (fase 0 runbook ligt klaar) + +## 2025-11-23 — Universele Rapportage backend + modal (Colin) +- API: `/api/reports` (GET/POST) + `/api/reports/[reportId]` (GET/PATCH/DELETE) + `/api/reports/classify` staan, met Zod-validatie en soft delete +- Supabase: `reports` tabel + migratie + RLS policies uitgerold, types toegevoegd in `lib/supabase/database.types.ts` +- Server actions: `app/epd/patients/[id]/rapportage/actions.ts` + gedeelde `lib/server/api-client.ts` houden fetch logic DRY +- UI: shadcn-dialog gebaseerd Rapportage Modal met textarea, speech recorder, AI-analyse en save flow (E2.S1) + +## 2025-11-23 — ClientSidebar duplicate cleanup (Colin) +- **Bug fix**: Dubbele sidebar (EPDSidebar + ClientSidebar) in patient detail routes verwijderd +- ClientSidebar (`app/epd/patients/[id]/components/client-sidebar.tsx`) blijkt 100% duplicate van EPDSidebar Level 2 navigatie +- EPDSidebar is al context-aware: detecteert patient routes en switcht automatisch tussen Level 1 (behandelaar) en Level 2 (patient) navigatie +- Verwijderd: ClientSidebar component (117 regels) + EPDLayoutClient wrapper (conditionele sidebar hiding) +- Vereenvoudigd: patient detail layout gebruikt nu alleen PatientLayoutClient zonder eigen sidebar rendering +- Resultaat: Eén sidebar component die automatisch switcht, -117 regels duplicate code, DRY principle hersteld + +## 2025-11-23 — EPDHeader patient selector cleanup (Colin) +- **Bug fix**: Dubbele patient naam in UI (EPDHeader top bar + ClientHeader) verwijderd +- Design conflict ontstaan tijdens parallel development: EPDHeader (Epic 1) en ClientHeader (Epic 2) toonden beide patient naam +- EPDHeader's patient selector (center section met naam, ID, geboortedatum) was redundant na toevoegen ClientHeader +- Verwijderd: Patient fetch logic (useState, useEffect), patient selector UI, onnodige imports uit EPDHeader +- Component ownership verduidelijkt: EPDHeader = algemene navigatie (logo, search), ClientHeader = patient context (naam, status, acties) +- Resultaat: EPDHeader vereenvoudigd van 91 naar 34 regels (-57 regels), duidelijke separation of concerns + +## 2025-11-23 — Reports created_by foreign key fix (Colin) +- **Bug fix**: Foreign key constraint violation bij opslaan rapportages +- Probleem: `reports.created_by` had FK constraint naar `practitioners.id`, maar code sloeg `auth.uid()` op +- Root cause: Practitioners tabel heeft `user_id` kolom, maar alle demo records hebben `user_id: null` (geen link naar auth users) +- Error: `insert or update on table "reports" violates foreign key constraint "reports_created_by_fkey"` +- Oplossing (prototype): Foreign key constraints verwijderd voor `created_by` en `updated_by` kolommen +- Migratie: `20251123_fix_reports_created_by_constraint.sql` toegepast via Supabase MCP +- Resultaat: Rapportages kunnen nu opgeslagen worden met auth user ID zonder FK constraint +- **Note voor productie**: In productie zou je practitioners.user_id vullen en FK constraints herstellen voor data integriteit +