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

feat: migrate clients module to patients + add docs

Browse Source
This commit is contained in:
colinislit
2025-11-23 10:13:00 +01:00
parent 8e3925ea09
commit 6fcb9a0e7b
277 changed files with 9131 additions and 458 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,53 +2,47 @@
import React, { useState, useEffect } from 'react';
import { Search, ChevronDown } from 'lucide-react';
import { usePathname } from 'next/navigation';
import { getClient } from '../clients/actions';
import { getPatient } from '../patients/actions';
import type { FHIRPatient } from '@/lib/fhir';
interface EPDHeaderProps {
className?: string;
}
interface ClientData {
id: string;
first_name: string;
last_name: string;
birth_date: string;
}
export function EPDHeader({ className = "" }: EPDHeaderProps) {
const pathname = usePathname();
const [selectedClient, setSelectedClient] = useState<ClientData | null>(null);
const [selectedPatient, setSelectedPatient] = useState<FHIRPatient | null>(null);
const [isLoading, setIsLoading] = useState(false);
// Context detection: Level 2 if URL contains /clients/[id]
const isClientContext = pathname.match(/\/epd\/clients\/[^\/]+/);
const clientId = isClientContext ? pathname.split('/')[3] : null;
// Context detection: Level 2 if URL contains /patients/[id]
const isPatientContext = pathname.match(/\/epd\/patients\/[^\/]+/);
const patientId = isPatientContext ? pathname.split('/')[3] : null;
useEffect(() => {
async function fetchClient() {
if (!clientId) {
setSelectedClient(null);
async function fetchPatient() {
if (!patientId) {
setSelectedPatient(null);
return;
}
// Don't re-fetch if we already have the correct client
if (selectedClient?.id === clientId) return;
// Don't re-fetch if we already have the correct patient
if (selectedPatient?.id === patientId) return;
setIsLoading(true);
try {
const client = await getClient(clientId);
if (client) {
setSelectedClient(client);
const patient = await getPatient(patientId);
if (patient) {
setSelectedPatient(patient);
}
} catch (error) {
console.error('Failed to fetch client for header:', error);
console.error('Failed to fetch patient for header:', error);
} finally {
setIsLoading(false);
}
}
fetchClient();
}, [clientId, selectedClient?.id]);
fetchPatient();
}, [patientId, selectedPatient?.id]);
return (
<header className={`h-[60px] bg-white border-b border-slate-200 flex items-center px-6 ${className}`}>
@@ -57,22 +51,22 @@ export function EPDHeader({ className = "" }: EPDHeaderProps) {
<span className="text-base font-medium text-slate-800">Mini-ECD</span>
</div>
{/* Center: Client Selector (only in Level 2) */}
{/* Center: Patient Selector (only in Level 2) */}
<div className="flex-1 flex justify-center">
{(selectedClient || isLoading) && clientId && (
{(selectedPatient || isLoading) && patientId && (
<button className="flex flex-col items-center px-4 py-1 hover:bg-slate-50 rounded-md transition-colors group">
{isLoading ? (
<div className="h-8 w-32 bg-slate-100 animate-pulse rounded" />
) : selectedClient ? (
) : selectedPatient ? (
<>
<div className="flex items-center gap-1.5">
<span className="text-sm font-medium text-slate-900">
{selectedClient.first_name} {selectedClient.last_name}
{selectedPatient.name?.[0]?.given?.join(' ') || ''} {selectedPatient.name?.[0]?.family || ''}
</span>
<ChevronDown className="h-4 w-4 text-slate-400 group-hover:text-slate-600 transition-colors" />
</div>
<span className="text-xs text-slate-500">
ID: {selectedClient.id.substring(0, 8)}... | Geb: {new Date(selectedClient.birth_date).toLocaleDateString('nl-NL')}
ID: {selectedPatient.id?.substring(0, 8) || ''}... | Geb: {selectedPatient.birthDate ? new Date(selectedPatient.birthDate).toLocaleDateString('nl-NL') : ''}
</span>
</>
) : null}
@@ -86,7 +80,7 @@ export function EPDHeader({ className = "" }: EPDHeaderProps) {
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-slate-400" />
<input
type="text"
placeholder="Zoek clië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"
/>
</div>

41
app/epd/components/epd-sidebar.tsx
View File

@@ -12,7 +12,12 @@ import {
ChevronRight,
FileText,
HelpCircle,
LayoutDashboard
LayoutDashboard,
User,
ClipboardList,
Stethoscope,
Calendar,
FileBarChart
} from 'lucide-react';
interface NavigationItem {
@@ -32,18 +37,20 @@ interface EPDSidebarProps {
// LEVEL 1: Behandelaar Context Navigation
const level1NavigationItems: NavigationItem[] = [
{ id: "dashboard", name: "Dashboard", icon: LayoutDashboard, href: "/epd/dashboard" },
{ id: "clients", name: "Cliënten", icon: Users, href: "/epd/clients" },
{ id: "clients", name: "Cliënten", icon: Users, href: "/epd/patients" },
{ id: "agenda", name: "Agenda", icon: FileText, href: "/epd/agenda" },
{ id: "reports", name: "Rapportage", icon: Settings, href: "/epd/reports" },
];
// LEVEL 2: Client Dossier Context Navigation (clientId gets injected)
const level2NavigationItems: NavigationItem[] = [
{ id: "dashboard", name: "Dashboard", icon: LayoutDashboard, href: "/dashboard" },
{ id: "intake", name: "Intake", icon: FileText, href: "/intake" },
{ id: "diagnose", name: "Diagnose", icon: Settings, href: "/diagnose" },
{ id: "plan", name: "Behandelplan", icon: HelpCircle, href: "/plan" },
{ id: "reports", name: "Rapportage", icon: Settings, href: "/reports" },
{ id: "dashboard", name: "Dashboard", icon: LayoutDashboard, href: "" },
{ id: "basisgegevens", name: "Basisgegevens", icon: User, href: "/basisgegevens" },
{ id: "screening", name: "Screening", icon: ClipboardList, href: "/screening" },
{ id: "intake", name: "Intake", icon: FileText, href: "/intakes" },
{ id: "diagnose", name: "Diagnose", icon: Stethoscope, href: "/diagnose" },
{ id: "behandelplan", name: "Behandelplan", icon: Calendar, href: "/behandelplan" },
{ id: "rapportage", name: "Rapportage", icon: FileBarChart, href: "/rapportage" },
];
export function EPDSidebar({ className = "", userEmail, userName }: EPDSidebarProps) {
@@ -51,15 +58,15 @@ export function EPDSidebar({ className = "", userEmail, userName }: EPDSidebarPr
const [isOpen, setIsOpen] = useState(false);
const [isCollapsed, setIsCollapsed] = useState(false);
// Context detection: Level 2 if URL contains /clients/[id]
const isClientContext = pathname.match(/\/epd\/clients\/[^\/]+/);
const clientId = isClientContext ? pathname.split('/')[3] : null;
// Context detection: Level 2 if URL contains /patients/[id]
const isPatientContext = pathname.match(/\/epd\/patients\/[^\/]+/);
const patientId = isPatientContext ? pathname.split('/')[3] : null;
// Determine which navigation items to show
const navigationItems = isClientContext
const navigationItems = isPatientContext
? level2NavigationItems.map(item => ({
...item,
href: `/epd/clients/${clientId}${item.href}`
href: `/epd/patients/${patientId}${item.href}`
}))
: level1NavigationItems;
@@ -161,10 +168,10 @@ export function EPDSidebar({ className = "", userEmail, userName }: EPDSidebarPr
{/* Navigation */}
<nav className="flex-1 px-3 py-4 overflow-y-auto">
{/* Back to Cliënten button (Level 2 only) */}
{isClientContext && (
{isPatientContext && (
<>
<Link
href="/epd/clients"
href="/epd/patients"
className="flex items-center gap-2 px-3 py-2.5 mb-2 text-sm font-medium text-slate-600 hover:text-slate-900 hover:bg-slate-50 rounded-md transition-colors"
>
<ChevronLeft className="h-4 w-4" />
@@ -177,7 +184,11 @@ export function EPDSidebar({ className = "", userEmail, userName }: EPDSidebarPr
<ul className="space-y-1">
{navigationItems.map((item) => {
const Icon = item.icon;
const isActive = pathname === item.href || pathname.startsWith(item.href + '/');
// For Dashboard (empty suffix), only match exact path
// For others, match exact or any sub-route
const isActive = item.id === 'dashboard'
? pathname === item.href
: pathname === item.href || (item.href && pathname.startsWith(item.href + '/'));
return (
<li key={item.id}>