feat(intake): implement epic 4 intake core (overview, new flow, layout)
This commit is contained in:
colinislit
107
app/epd/patients/[id]/components/client-header.tsx
Normal file
107
app/epd/patients/[id]/components/client-header.tsx
Normal file
@@ -0,0 +1,107 @@
|
||||
'use client';
|
||||
|
||||
/**
|
||||
* Client Header Component
|
||||
* E2.S3: Context-aware header showing client name, status, and last modified
|
||||
*/
|
||||
|
||||
import type { FHIRPatient } from '@/lib/fhir';
|
||||
|
||||
interface ClientHeaderProps {
|
||||
patient: FHIRPatient;
|
||||
}
|
||||
|
||||
// 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 <span className="text-sm text-slate-400">-</span>;
|
||||
}
|
||||
|
||||
return (
|
||||
<span
|
||||
className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium border ${badge.className}`}
|
||||
>
|
||||
{badge.label}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
export function ClientHeader({ patient }: ClientHeaderProps) {
|
||||
// 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 (
|
||||
<div className="bg-white border-b border-slate-200 px-6 py-4">
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex-1">
|
||||
{/* Name and John Doe indicator */}
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<h1 className="text-2xl font-bold text-slate-900">{fullName}</h1>
|
||||
{isJohnDoe && (
|
||||
<span className="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-orange-100 text-orange-800 border border-orange-200">
|
||||
John Doe
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Status and Last Modified */}
|
||||
<div className="flex items-center gap-4 text-sm">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-slate-500">Status:</span>
|
||||
<StatusBadge status={status} />
|
||||
</div>
|
||||
{lastModified && (
|
||||
<div className="flex items-center gap-2 text-slate-500">
|
||||
<span>Laatst gewijzigd:</span>
|
||||
<span className="font-medium text-slate-700">{lastModified}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Patient ID (subtle) */}
|
||||
<div className="text-xs text-slate-400">
|
||||
ID: {patient.id}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
113
app/epd/patients/[id]/components/client-sidebar.tsx
Normal file
113
app/epd/patients/[id]/components/client-sidebar.tsx
Normal file
@@ -0,0 +1,113 @@
|
||||
'use client';
|
||||
|
||||
/**
|
||||
* Client Sidebar Navigation Component
|
||||
* E2.S3: Context-aware sidebar with tabs for client dossier
|
||||
*/
|
||||
|
||||
import Link from 'next/link';
|
||||
import { usePathname } from 'next/navigation';
|
||||
import {
|
||||
ChevronLeft,
|
||||
LayoutDashboard,
|
||||
User,
|
||||
ClipboardList,
|
||||
FileText,
|
||||
Stethoscope,
|
||||
Calendar,
|
||||
FileBarChart,
|
||||
} from 'lucide-react';
|
||||
|
||||
interface ClientSidebarProps {
|
||||
patientId: string;
|
||||
}
|
||||
|
||||
interface NavItem {
|
||||
label: string;
|
||||
href: string;
|
||||
icon: React.ElementType;
|
||||
}
|
||||
|
||||
export function ClientSidebar({ patientId }: ClientSidebarProps) {
|
||||
const pathname = usePathname();
|
||||
|
||||
// Navigation items
|
||||
const navItems: NavItem[] = [
|
||||
{
|
||||
label: 'Dashboard',
|
||||
href: `/epd/patients/${patientId}`,
|
||||
icon: LayoutDashboard,
|
||||
},
|
||||
{
|
||||
label: 'Basisgegevens',
|
||||
href: `/epd/patients/${patientId}/basisgegevens`,
|
||||
icon: User,
|
||||
},
|
||||
{
|
||||
label: 'Screening',
|
||||
href: `/epd/patients/${patientId}/screening`,
|
||||
icon: ClipboardList,
|
||||
},
|
||||
{
|
||||
label: 'Intake',
|
||||
href: `/epd/patients/${patientId}/intake`,
|
||||
icon: FileText,
|
||||
},
|
||||
{
|
||||
label: 'Diagnose',
|
||||
href: `/epd/patients/${patientId}/diagnose`,
|
||||
icon: Stethoscope,
|
||||
},
|
||||
{
|
||||
label: 'Behandelplan',
|
||||
href: `/epd/patients/${patientId}/behandelplan`,
|
||||
icon: Calendar,
|
||||
},
|
||||
{
|
||||
label: 'Rapportage',
|
||||
href: `/epd/patients/${patientId}/rapportage`,
|
||||
icon: FileBarChart,
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<aside className="w-64 bg-white border-r border-slate-200 flex flex-col">
|
||||
{/* Back to Patients */}
|
||||
<div className="p-4 border-b border-slate-200">
|
||||
<Link
|
||||
href="/epd/patients"
|
||||
className="inline-flex items-center gap-2 text-sm text-slate-600 hover:text-slate-900 transition-colors group"
|
||||
>
|
||||
<ChevronLeft className="h-4 w-4 group-hover:-translate-x-1 transition-transform" />
|
||||
<span className="font-medium">Cliënten</span>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Navigation Items */}
|
||||
<nav className="flex-1 p-4 space-y-1">
|
||||
{navItems.map((item) => {
|
||||
const Icon = item.icon;
|
||||
const isActive = pathname === item.href;
|
||||
|
||||
return (
|
||||
<Link
|
||||
key={item.href}
|
||||
href={item.href}
|
||||
className={`
|
||||
flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-colors
|
||||
${
|
||||
isActive
|
||||
? 'bg-teal-50 text-teal-700 border border-teal-200'
|
||||
: 'text-slate-700 hover:bg-slate-50 hover:text-slate-900'
|
||||
}
|
||||
`}
|
||||
>
|
||||
<Icon className="h-4 w-4" />
|
||||
<span>{item.label}</span>
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
</aside>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user