feat: implement patient list and new patient form (E2.S1 & E2.S2)
Epic 2 - Cliëntenbeheer: Complete implementation of patient list with search/filter functionality and comprehensive new patient form with John Doe crisis admission support. E2.S1 - Cliëntenlijst: - Add client-side search bar with form submission - Implement status filter dropdown (all/screening/active/finished/cancelled) - Create StatusBadge component with color-coded status indicators - Update table columns: Status, Name, BSN, Last Updated - Add status filtering support to FHIR Patient API route - Update FHIR patient transform to include episode-status extension - Sort patients by updated_at descending (newest first) E2.S2 - Nieuwe Cliënt Flow: - Complete rewrite of patient form with all FO-required fields - Implement John Doe checkbox with conditional BSN requirement - Add BSN validation with Dutch Modulo-11 check algorithm - Add comprehensive form fields: * Name fields: prefix, given name, family name * BSN with 9-digit pattern validation * Birth date with max date validation * Gender selection * Address: street, postal code, city * Contact: phone, email * Insurance: company, policy number - Add warning messages for John Doe crisis admissions - Set default episode status to 'planned' for all new patients - Redirect to patient detail page after successful creation - Update FHIR transform bidirectional insurance extension support: * dbPatientToFHIR: serialize insurance to JSON extension * fhirPatientToDB: parse insurance from JSON extension - Pre-populate form fields when editing existing patients Technical changes: - app/api/fhir/Patient/route.ts: Add status query param and sorting - app/epd/patients/actions.ts: Add status filter parameter - app/epd/patients/page.tsx: Pass status searchParam - app/epd/patients/components/patient-list.tsx: Complete UI rewrite - app/epd/patients/components/patient-form.tsx: Complete form rewrite - lib/fhir/transforms/patient.ts: Add insurance extension handling - docs/specs/screening-intake/bouwplan-screening-intake-v1.0.md: Update status 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
colinislit
@@ -46,6 +46,15 @@ export async function GET(request: NextRequest) {
|
||||
query = query.eq('birth_date', birthdate);
|
||||
}
|
||||
|
||||
// Filter by status
|
||||
const status = searchParams.get('status');
|
||||
if (status && status !== 'all') {
|
||||
query = query.eq('status', status);
|
||||
}
|
||||
|
||||
// Order by updated_at descending (newest first)
|
||||
query = query.order('updated_at', { ascending: false });
|
||||
|
||||
// Execute query
|
||||
const { data: patients, error } = await query;
|
||||
|
||||
|
||||
@@ -16,6 +16,7 @@ const API_BASE_URL = process.env.NEXT_PUBLIC_APP_URL || 'http://localhost:3000';
|
||||
*/
|
||||
export async function getPatients(filters?: {
|
||||
search?: string;
|
||||
status?: string;
|
||||
}) {
|
||||
try {
|
||||
const url = new URL(`${API_BASE_URL}/api/fhir/Patient`);
|
||||
@@ -24,6 +25,10 @@ export async function getPatients(filters?: {
|
||||
url.searchParams.set('name', filters.search);
|
||||
}
|
||||
|
||||
if (filters?.status) {
|
||||
url.searchParams.set('status', filters.status);
|
||||
}
|
||||
|
||||
const response = await fetch(url.toString(), {
|
||||
cache: 'no-store',
|
||||
});
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
'use client';
|
||||
|
||||
/**
|
||||
* Patient Form Component (FHIR-based)
|
||||
* Form for creating/editing patients using FHIR format
|
||||
* Patient Form Component
|
||||
* E2.S2: Nieuwe Cliënt Flow met John Doe logica
|
||||
*/
|
||||
|
||||
import { useState } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { Save, Loader2 } from 'lucide-react';
|
||||
import { Save, Loader2, AlertCircle } from 'lucide-react';
|
||||
import { createPatient, updatePatient } from '../actions';
|
||||
import type { FHIRPatient } from '@/lib/fhir';
|
||||
|
||||
@@ -15,10 +15,33 @@ interface PatientFormProps {
|
||||
patient?: FHIRPatient;
|
||||
}
|
||||
|
||||
// BSN validation (Modulo-11 check)
|
||||
function validateBSN(bsn: string): boolean {
|
||||
if (!bsn || bsn.length !== 9) return false;
|
||||
|
||||
const digits = bsn.split('').map(Number);
|
||||
if (digits.some(isNaN)) return false;
|
||||
|
||||
// Modulo-11 check
|
||||
const sum = digits.reduce((acc, digit, index) => {
|
||||
if (index < 8) {
|
||||
return acc + digit * (9 - index);
|
||||
}
|
||||
return acc - digit;
|
||||
}, 0);
|
||||
|
||||
return sum % 11 === 0;
|
||||
}
|
||||
|
||||
export function PatientForm({ patient }: PatientFormProps) {
|
||||
const router = useRouter();
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [isJohnDoe, setIsJohnDoe] = useState(
|
||||
patient?.extension?.find(
|
||||
(ext) => ext.url === 'http://mini-epd.local/fhir/StructureDefinition/john-doe'
|
||||
)?.valueBoolean || false
|
||||
);
|
||||
|
||||
const existingName = patient?.name?.[0];
|
||||
const existingBsn = patient?.identifier?.find(
|
||||
@@ -26,6 +49,20 @@ export function PatientForm({ patient }: PatientFormProps) {
|
||||
)?.value;
|
||||
const existingPhone = patient?.telecom?.find((t) => t.system === 'phone')?.value;
|
||||
const existingEmail = patient?.telecom?.find((t) => t.system === 'email')?.value;
|
||||
const existingAddress = patient?.address?.[0];
|
||||
|
||||
// Extract insurance data from extension
|
||||
const insuranceExtension = patient?.extension?.find(
|
||||
(ext) => ext.url === 'http://mini-epd.local/fhir/StructureDefinition/insurance'
|
||||
);
|
||||
let existingInsurance: { company?: string; number?: string } = {};
|
||||
if (insuranceExtension?.valueString) {
|
||||
try {
|
||||
existingInsurance = JSON.parse(insuranceExtension.valueString);
|
||||
} catch (e) {
|
||||
console.error('Failed to parse insurance extension:', e);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
|
||||
e.preventDefault();
|
||||
@@ -34,17 +71,27 @@ export function PatientForm({ patient }: PatientFormProps) {
|
||||
|
||||
try {
|
||||
const formData = new FormData(e.currentTarget);
|
||||
const bsnValue = formData.get('bsn') as string;
|
||||
|
||||
// Validate BSN if not John Doe
|
||||
if (!isJohnDoe && bsnValue) {
|
||||
if (!validateBSN(bsnValue)) {
|
||||
throw new Error('Ongeldig BSN nummer. Controleer het nummer en probeer opnieuw.');
|
||||
}
|
||||
}
|
||||
|
||||
// Build FHIR Patient resource
|
||||
const fhirPatient: FHIRPatient = {
|
||||
resourceType: 'Patient',
|
||||
identifier: [
|
||||
{
|
||||
system: 'http://fhir.nl/fhir/NamingSystem/bsn',
|
||||
value: formData.get('bsn') as string,
|
||||
use: 'official' as const,
|
||||
},
|
||||
],
|
||||
identifier: bsnValue
|
||||
? [
|
||||
{
|
||||
system: 'http://fhir.nl/fhir/NamingSystem/bsn',
|
||||
value: bsnValue,
|
||||
use: 'official' as const,
|
||||
},
|
||||
]
|
||||
: [],
|
||||
name: [
|
||||
{
|
||||
use: 'official' as const,
|
||||
@@ -57,6 +104,21 @@ export function PatientForm({ patient }: PatientFormProps) {
|
||||
],
|
||||
gender: formData.get('gender') as 'male' | 'female' | 'other' | 'unknown',
|
||||
birthDate: formData.get('birthDate') as string,
|
||||
|
||||
// Address
|
||||
address: formData.get('addressLine') || formData.get('city') || formData.get('postalCode')
|
||||
? [
|
||||
{
|
||||
use: 'home',
|
||||
line: formData.get('addressLine') ? [formData.get('addressLine') as string] : undefined,
|
||||
city: formData.get('city') as string || undefined,
|
||||
postalCode: formData.get('postalCode') as string || undefined,
|
||||
country: 'NL',
|
||||
},
|
||||
]
|
||||
: undefined,
|
||||
|
||||
// Contact
|
||||
telecom: [
|
||||
formData.get('phone')
|
||||
? {
|
||||
@@ -72,18 +134,50 @@ export function PatientForm({ patient }: PatientFormProps) {
|
||||
}
|
||||
: undefined,
|
||||
].filter((t): t is NonNullable<typeof t> => t !== undefined),
|
||||
|
||||
active: true,
|
||||
|
||||
// Extensions for status and john_doe
|
||||
extension: [
|
||||
{
|
||||
url: 'http://mini-epd.local/fhir/StructureDefinition/episode-status',
|
||||
valueCode: 'planned', // Always set to planned for new patients
|
||||
},
|
||||
isJohnDoe
|
||||
? {
|
||||
url: 'http://mini-epd.local/fhir/StructureDefinition/john-doe',
|
||||
valueBoolean: true,
|
||||
}
|
||||
: undefined,
|
||||
// Insurance extension (custom)
|
||||
formData.get('insuranceCompany')
|
||||
? {
|
||||
url: 'http://mini-epd.local/fhir/StructureDefinition/insurance',
|
||||
valueString: JSON.stringify({
|
||||
company: formData.get('insuranceCompany'),
|
||||
number: formData.get('insuranceNumber'),
|
||||
}),
|
||||
}
|
||||
: undefined,
|
||||
].filter((ext): ext is NonNullable<typeof ext> => ext !== undefined),
|
||||
};
|
||||
|
||||
let createdPatient: FHIRPatient;
|
||||
|
||||
if (patient?.id) {
|
||||
// Update existing patient
|
||||
await updatePatient(patient.id, fhirPatient);
|
||||
createdPatient = await updatePatient(patient.id, fhirPatient);
|
||||
} else {
|
||||
// Create new patient
|
||||
await createPatient(fhirPatient);
|
||||
createdPatient = await createPatient(fhirPatient);
|
||||
}
|
||||
|
||||
router.push('/epd/patients');
|
||||
// Redirect to patient detail page
|
||||
if (createdPatient.id) {
|
||||
router.push(`/epd/patients/${createdPatient.id}`);
|
||||
} else {
|
||||
router.push('/epd/patients');
|
||||
}
|
||||
router.refresh();
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Er is een fout opgetreden');
|
||||
@@ -99,6 +193,39 @@ export function PatientForm({ patient }: PatientFormProps) {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* John Doe Checkbox */}
|
||||
<div className="bg-amber-50 border border-amber-200 rounded-lg p-4">
|
||||
<label className="flex items-start gap-3 cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={isJohnDoe}
|
||||
onChange={(e) => setIsJohnDoe(e.target.checked)}
|
||||
className="mt-1 h-4 w-4 text-teal-600 focus:ring-teal-500 border-slate-300 rounded"
|
||||
/>
|
||||
<div className="flex-1">
|
||||
<span className="text-sm font-medium text-slate-900">
|
||||
Dit is een John Doe (crisis opname)
|
||||
</span>
|
||||
<p className="text-xs text-slate-600 mt-1">
|
||||
Voor crisis situaties kunnen gegevens later worden aangevuld. BSN is dan optioneel.
|
||||
</p>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{/* John Doe Warning */}
|
||||
{isJohnDoe && (
|
||||
<div className="bg-blue-50 border border-blue-200 rounded-lg p-4 flex items-start gap-3">
|
||||
<AlertCircle className="h-5 w-5 text-blue-600 flex-shrink-0 mt-0.5" />
|
||||
<div>
|
||||
<p className="text-sm font-medium text-blue-900">John Doe registratie</p>
|
||||
<p className="text-xs text-blue-700 mt-1">
|
||||
Gegevens kunnen later worden aangevuld. Vul BSN aan zodra deze beschikbaar is.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Name Fields */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div>
|
||||
@@ -146,17 +273,20 @@ export function PatientForm({ patient }: PatientFormProps) {
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label htmlFor="bsn" className="block text-sm font-medium text-slate-700 mb-1">
|
||||
BSN *
|
||||
BSN {!isJohnDoe && '*'}
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="bsn"
|
||||
name="bsn"
|
||||
defaultValue={existingBsn || ''}
|
||||
required
|
||||
required={!isJohnDoe}
|
||||
placeholder="123456789"
|
||||
maxLength={9}
|
||||
pattern="[0-9]{9}"
|
||||
className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-transparent"
|
||||
/>
|
||||
<p className="text-xs text-slate-500 mt-1">9 cijfers, inclusief modulo-11 check</p>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="birthDate" className="block text-sm font-medium text-slate-700 mb-1">
|
||||
@@ -168,6 +298,7 @@ export function PatientForm({ patient }: PatientFormProps) {
|
||||
name="birthDate"
|
||||
defaultValue={patient?.birthDate || ''}
|
||||
required
|
||||
max={new Date().toISOString().split('T')[0]}
|
||||
className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-transparent"
|
||||
/>
|
||||
</div>
|
||||
@@ -192,33 +323,115 @@ export function PatientForm({ patient }: PatientFormProps) {
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Contact Information */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{/* Address Fields */}
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-sm font-semibold text-slate-900 border-b pb-2">Adresgegevens</h3>
|
||||
<div>
|
||||
<label htmlFor="phone" className="block text-sm font-medium text-slate-700 mb-1">
|
||||
Telefoonnummer
|
||||
<label htmlFor="addressLine" className="block text-sm font-medium text-slate-700 mb-1">
|
||||
Adres
|
||||
</label>
|
||||
<input
|
||||
type="tel"
|
||||
id="phone"
|
||||
name="phone"
|
||||
defaultValue={existingPhone || ''}
|
||||
placeholder="+31612345678"
|
||||
type="text"
|
||||
id="addressLine"
|
||||
name="addressLine"
|
||||
defaultValue={existingAddress?.line?.[0] || ''}
|
||||
placeholder="Straatnaam 123"
|
||||
className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-transparent"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="email" className="block text-sm font-medium text-slate-700 mb-1">
|
||||
E-mail
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
name="email"
|
||||
defaultValue={existingEmail || ''}
|
||||
placeholder="patient@example.com"
|
||||
className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-transparent"
|
||||
/>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label htmlFor="postalCode" className="block text-sm font-medium text-slate-700 mb-1">
|
||||
Postcode
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="postalCode"
|
||||
name="postalCode"
|
||||
defaultValue={existingAddress?.postalCode || ''}
|
||||
placeholder="1234 AB"
|
||||
className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-transparent"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="city" className="block text-sm font-medium text-slate-700 mb-1">
|
||||
Woonplaats
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="city"
|
||||
name="city"
|
||||
defaultValue={existingAddress?.city || ''}
|
||||
placeholder="Amsterdam"
|
||||
className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-transparent"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Contact Information */}
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-sm font-semibold text-slate-900 border-b pb-2">Contactgegevens</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label htmlFor="phone" className="block text-sm font-medium text-slate-700 mb-1">
|
||||
Telefoonnummer
|
||||
</label>
|
||||
<input
|
||||
type="tel"
|
||||
id="phone"
|
||||
name="phone"
|
||||
defaultValue={existingPhone || ''}
|
||||
placeholder="+31612345678"
|
||||
className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-transparent"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="email" className="block text-sm font-medium text-slate-700 mb-1">
|
||||
E-mail
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
name="email"
|
||||
defaultValue={existingEmail || ''}
|
||||
placeholder="patient@example.com"
|
||||
className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-transparent"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Insurance Information */}
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-sm font-semibold text-slate-900 border-b pb-2">Verzekering</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label htmlFor="insuranceCompany" className="block text-sm font-medium text-slate-700 mb-1">
|
||||
Verzekeraar
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="insuranceCompany"
|
||||
name="insuranceCompany"
|
||||
defaultValue={existingInsurance.company || ''}
|
||||
placeholder="Zilveren Kruis"
|
||||
className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-transparent"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="insuranceNumber" className="block text-sm font-medium text-slate-700 mb-1">
|
||||
Polisnummer
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="insuranceNumber"
|
||||
name="insuranceNumber"
|
||||
defaultValue={existingInsurance.number || ''}
|
||||
placeholder="123456789"
|
||||
className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-transparent"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,141 +1,252 @@
|
||||
'use client';
|
||||
|
||||
/**
|
||||
* Patient List Component (FHIR-based)
|
||||
* Displays patients from FHIR API
|
||||
* Patient List Component
|
||||
* E2.S1: Cliëntenlijst met zoekfunctie, filters en status badges
|
||||
*/
|
||||
|
||||
import { useState } from 'react';
|
||||
import Link from 'next/link';
|
||||
import { User, Calendar, Phone, Mail } from 'lucide-react';
|
||||
import { useRouter, useSearchParams } from 'next/navigation';
|
||||
import { User, Search, Filter } from 'lucide-react';
|
||||
import type { FHIRPatient } from '@/lib/fhir';
|
||||
|
||||
interface PatientListProps {
|
||||
initialPatients: 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 PatientList({ initialPatients }: PatientListProps) {
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
const [searchTerm, setSearchTerm] = useState(searchParams.get('search') || '');
|
||||
const [statusFilter, setStatusFilter] = useState(searchParams.get('status') || 'all');
|
||||
const [patients] = useState<FHIRPatient[]>(initialPatients);
|
||||
|
||||
// Handle search
|
||||
const handleSearch = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
const params = new URLSearchParams();
|
||||
if (searchTerm) params.set('search', searchTerm);
|
||||
if (statusFilter !== 'all') params.set('status', statusFilter);
|
||||
router.push(`/epd/patients?${params.toString()}`);
|
||||
};
|
||||
|
||||
// Handle status filter change
|
||||
const handleStatusFilterChange = (newStatus: string) => {
|
||||
setStatusFilter(newStatus);
|
||||
const params = new URLSearchParams();
|
||||
if (searchTerm) params.set('search', searchTerm);
|
||||
if (newStatus !== 'all') params.set('status', newStatus);
|
||||
router.push(`/epd/patients?${params.toString()}`);
|
||||
};
|
||||
|
||||
if (patients.length === 0) {
|
||||
return (
|
||||
<div className="text-center py-12 bg-white rounded-lg border border-slate-200">
|
||||
<User className="mx-auto h-12 w-12 text-slate-400" />
|
||||
<h3 className="mt-4 text-lg font-medium text-slate-900">Geen patiënten gevonden</h3>
|
||||
<p className="mt-2 text-sm text-slate-600">
|
||||
Begin met het toevoegen van een nieuwe patiënt.
|
||||
</p>
|
||||
<div>
|
||||
{/* Search and Filter Bar */}
|
||||
<div className="mb-6 flex flex-col sm:flex-row gap-4">
|
||||
{/* Search Bar */}
|
||||
<form onSubmit={handleSearch} className="flex-1">
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-slate-400" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Zoek op naam of BSN..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className="w-full pl-10 pr-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-transparent"
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
{/* Status Filter */}
|
||||
<div className="relative">
|
||||
<Filter className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-slate-400" />
|
||||
<select
|
||||
value={statusFilter}
|
||||
onChange={(e) => handleStatusFilterChange(e.target.value)}
|
||||
className="pl-10 pr-10 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-transparent appearance-none bg-white cursor-pointer min-w-[180px]"
|
||||
>
|
||||
<option value="all">Alle statussen</option>
|
||||
<option value="planned">Screening</option>
|
||||
<option value="active">Actief</option>
|
||||
<option value="finished">Afgerond</option>
|
||||
<option value="cancelled">Afgemeld</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Empty State */}
|
||||
<div className="text-center py-12 bg-white rounded-lg border border-slate-200">
|
||||
<User className="mx-auto h-12 w-12 text-slate-400" />
|
||||
<h3 className="mt-4 text-lg font-medium text-slate-900">Geen patiënten gevonden</h3>
|
||||
<p className="mt-2 text-sm text-slate-600">
|
||||
{searchTerm || statusFilter !== 'all'
|
||||
? 'Probeer een andere zoekopdracht of filter.'
|
||||
: 'Begin met het toevoegen van een nieuwe patiënt.'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="bg-white rounded-lg border border-slate-200 overflow-hidden">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="min-w-full divide-y divide-slate-200">
|
||||
<thead className="bg-slate-50">
|
||||
<tr>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">
|
||||
Patiënt
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">
|
||||
BSN
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">
|
||||
Geboortedatum
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">
|
||||
Contact
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">
|
||||
Geslacht
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="bg-white divide-y divide-slate-200">
|
||||
{patients.map((patient) => {
|
||||
const name = patient.name?.[0];
|
||||
const fullName = [
|
||||
...(name?.prefix || []),
|
||||
...(name?.given || []),
|
||||
name?.family,
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(' ');
|
||||
<div>
|
||||
{/* Search and Filter Bar */}
|
||||
<div className="mb-6 flex flex-col sm:flex-row gap-4">
|
||||
{/* Search Bar */}
|
||||
<form onSubmit={handleSearch} className="flex-1">
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-slate-400" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Zoek op naam of BSN..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className="w-full pl-10 pr-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-transparent"
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
const bsn = patient.identifier?.find(
|
||||
(id) => id.system === 'http://fhir.nl/fhir/NamingSystem/bsn'
|
||||
)?.value;
|
||||
{/* Status Filter */}
|
||||
<div className="relative">
|
||||
<Filter className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-slate-400" />
|
||||
<select
|
||||
value={statusFilter}
|
||||
onChange={(e) => handleStatusFilterChange(e.target.value)}
|
||||
className="pl-10 pr-10 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-transparent appearance-none bg-white cursor-pointer min-w-[180px]"
|
||||
>
|
||||
<option value="all">Alle statussen</option>
|
||||
<option value="planned">Screening</option>
|
||||
<option value="active">Actief</option>
|
||||
<option value="finished">Afgerond</option>
|
||||
<option value="cancelled">Afgemeld</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
const phone = patient.telecom?.find((t) => t.system === 'phone')?.value;
|
||||
const email = patient.telecom?.find((t) => t.system === 'email')?.value;
|
||||
{/* Patient Table */}
|
||||
<div className="bg-white rounded-lg border border-slate-200 overflow-hidden">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="min-w-full divide-y divide-slate-200">
|
||||
<thead className="bg-slate-50">
|
||||
<tr>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">
|
||||
Naam
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">
|
||||
BSN
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">
|
||||
Geboortedatum
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">
|
||||
Status
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">
|
||||
Laatst gewijzigd
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="bg-white divide-y divide-slate-200">
|
||||
{patients.map((patient) => {
|
||||
const name = patient.name?.[0];
|
||||
const fullName = [
|
||||
...(name?.prefix || []),
|
||||
...(name?.given || []),
|
||||
name?.family,
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(' ');
|
||||
|
||||
return (
|
||||
<tr
|
||||
key={patient.id}
|
||||
className="hover:bg-slate-50 transition-colors cursor-pointer"
|
||||
>
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
<Link
|
||||
href={`/epd/patients/${patient.id}`}
|
||||
className="flex items-center group"
|
||||
>
|
||||
<div className="flex-shrink-0 h-10 w-10 bg-gradient-to-br from-teal-400 to-teal-600 rounded-full flex items-center justify-center">
|
||||
<span className="text-white font-semibold text-sm">
|
||||
{name?.given?.[0]?.[0]}
|
||||
{name?.family?.[0]}
|
||||
</span>
|
||||
const bsn = patient.identifier?.find(
|
||||
(id) => id.system === 'http://fhir.nl/fhir/NamingSystem/bsn'
|
||||
)?.value;
|
||||
|
||||
// Get status from extension (we'll add this to the FHIR mapping)
|
||||
const statusExtension = patient.extension?.find(
|
||||
(ext) => ext.url === 'http://mini-epd.local/fhir/StructureDefinition/episode-status'
|
||||
);
|
||||
const status = statusExtension?.valueCode;
|
||||
|
||||
// Format updated_at date
|
||||
const updatedAt = patient.meta?.lastUpdated
|
||||
? new Date(patient.meta.lastUpdated).toLocaleDateString('nl-NL', {
|
||||
day: '2-digit',
|
||||
month: '2-digit',
|
||||
year: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
})
|
||||
: '-';
|
||||
|
||||
return (
|
||||
<tr
|
||||
key={patient.id}
|
||||
className="hover:bg-slate-50 transition-colors cursor-pointer"
|
||||
onClick={() => router.push(`/epd/patients/${patient.id}`)}
|
||||
>
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
<div className="flex items-center">
|
||||
<div className="flex-shrink-0 h-10 w-10 bg-gradient-to-br from-teal-400 to-teal-600 rounded-full flex items-center justify-center">
|
||||
<span className="text-white font-semibold text-sm">
|
||||
{name?.given?.[0]?.[0]}
|
||||
{name?.family?.[0]}
|
||||
</span>
|
||||
</div>
|
||||
<div className="ml-4">
|
||||
<div className="text-sm font-medium text-slate-900">
|
||||
{fullName}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="ml-4">
|
||||
<div className="text-sm font-medium text-slate-900 group-hover:text-teal-600 transition-colors">
|
||||
{fullName}
|
||||
</div>
|
||||
<div className="text-sm text-slate-500">ID: {patient.id}</div>
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
<div className="text-sm text-slate-900">{bsn || '-'}</div>
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
<div className="text-sm text-slate-900">
|
||||
{patient.birthDate
|
||||
? new Date(patient.birthDate).toLocaleDateString('nl-NL')
|
||||
: '-'}
|
||||
</div>
|
||||
</Link>
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
<div className="text-sm text-slate-900">{bsn || '-'}</div>
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
<div className="flex items-center text-sm text-slate-900">
|
||||
<Calendar className="h-4 w-4 text-slate-400 mr-2" />
|
||||
{patient.birthDate || '-'}
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
<div className="space-y-1">
|
||||
{phone && (
|
||||
<div className="flex items-center text-sm text-slate-900">
|
||||
<Phone className="h-4 w-4 text-slate-400 mr-2" />
|
||||
{phone}
|
||||
</div>
|
||||
)}
|
||||
{email && (
|
||||
<div className="flex items-center text-sm text-slate-900">
|
||||
<Mail className="h-4 w-4 text-slate-400 mr-2" />
|
||||
{email}
|
||||
</div>
|
||||
)}
|
||||
{!phone && !email && (
|
||||
<span className="text-sm text-slate-400">-</span>
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
<span className="text-sm text-slate-900 capitalize">
|
||||
{patient.gender === 'male' && 'Man'}
|
||||
{patient.gender === 'female' && 'Vrouw'}
|
||||
{patient.gender === 'other' && 'Anders'}
|
||||
{patient.gender === 'unknown' && 'Onbekend'}
|
||||
{!patient.gender && '-'}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
<StatusBadge status={status} />
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
<div className="text-sm text-slate-500">{updatedAt}</div>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -6,6 +6,7 @@ import Link from 'next/link';
|
||||
|
||||
interface SearchParams {
|
||||
search?: string;
|
||||
status?: string;
|
||||
}
|
||||
|
||||
export default async function PatientsPage({
|
||||
@@ -20,9 +21,9 @@ export default async function PatientsPage({
|
||||
<div className="mb-8">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-slate-900">Patiënten (FHIR)</h1>
|
||||
<h1 className="text-2xl font-bold text-slate-900">Patiënten</h1>
|
||||
<p className="text-sm text-slate-600 mt-1">
|
||||
FHIR-compliant patiëntenbeheer
|
||||
Overzicht van alle patiënten met screening en intake status
|
||||
</p>
|
||||
</div>
|
||||
<Link
|
||||
@@ -46,6 +47,7 @@ export default async function PatientsPage({
|
||||
async function PatientListWrapper({ searchParams }: { searchParams: SearchParams }) {
|
||||
const patients = await getPatients({
|
||||
search: searchParams.search,
|
||||
status: searchParams.status,
|
||||
});
|
||||
|
||||
return <PatientList initialPatients={patients} />;
|
||||
|
||||
Reference in New Issue
Block a user