430 lines
17 KiB
TypeScript
430 lines
17 KiB
TypeScript
'use client';
|
|
|
|
/**
|
|
* Patient List Component
|
|
* E3.S2: Patiëntenlijst met zoekfunctie, filters, paginatie en sortering
|
|
*/
|
|
|
|
import { useState } from 'react';
|
|
import Link from 'next/link';
|
|
import { useRouter, useSearchParams } from 'next/navigation';
|
|
import { User, Search, Filter, ChevronLeft, ChevronRight, ArrowUpDown, ArrowUp, ArrowDown } from 'lucide-react';
|
|
import type { FHIRPatient } from '@/lib/fhir';
|
|
|
|
interface PatientListProps {
|
|
patients: FHIRPatient[];
|
|
total: number;
|
|
page: number;
|
|
pageSize: number;
|
|
}
|
|
|
|
// 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({ patients, total, page, pageSize }: PatientListProps) {
|
|
const router = useRouter();
|
|
const searchParams = useSearchParams();
|
|
const [searchTerm, setSearchTerm] = useState(searchParams.get('search') || '');
|
|
const [statusFilter, setStatusFilter] = useState(searchParams.get('status') || 'all');
|
|
const [genderFilter, setGenderFilter] = useState(searchParams.get('gender') || 'all');
|
|
const [sortBy, setSortBy] = useState(searchParams.get('sortBy') || '');
|
|
const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>((searchParams.get('sortOrder') as 'asc' | 'desc') || 'asc');
|
|
|
|
// Calculate pagination info
|
|
const totalPages = Math.ceil(total / pageSize);
|
|
const startIndex = (page - 1) * pageSize + 1;
|
|
const endIndex = Math.min(page * pageSize, total);
|
|
|
|
// Build URL params helper
|
|
const buildUrlParams = (updates: Record<string, string | number | undefined>) => {
|
|
const params = new URLSearchParams();
|
|
const allParams = {
|
|
search: searchTerm,
|
|
status: statusFilter,
|
|
gender: genderFilter,
|
|
sortBy: sortBy,
|
|
sortOrder: sortOrder,
|
|
page: page.toString(),
|
|
...updates,
|
|
};
|
|
|
|
Object.entries(allParams).forEach(([key, value]) => {
|
|
if (value && value !== 'all' && value !== '1') {
|
|
params.set(key, value.toString());
|
|
}
|
|
});
|
|
|
|
return params.toString();
|
|
};
|
|
|
|
// Handle search
|
|
const handleSearch = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
router.push(`/epd/patients?${buildUrlParams({ page: 1 })}`);
|
|
};
|
|
|
|
// Handle status filter change
|
|
const handleStatusFilterChange = (newStatus: string) => {
|
|
setStatusFilter(newStatus);
|
|
router.push(`/epd/patients?${buildUrlParams({ status: newStatus, page: 1 })}`);
|
|
};
|
|
|
|
// Handle gender filter change
|
|
const handleGenderFilterChange = (newGender: string) => {
|
|
setGenderFilter(newGender);
|
|
router.push(`/epd/patients?${buildUrlParams({ gender: newGender, page: 1 })}`);
|
|
};
|
|
|
|
// Handle pagination
|
|
const handlePageChange = (newPage: number) => {
|
|
router.push(`/epd/patients?${buildUrlParams({ page: newPage })}`);
|
|
};
|
|
|
|
// Handle sorting
|
|
const handleSort = (column: string) => {
|
|
const newSortOrder = sortBy === column && sortOrder === 'asc' ? 'desc' : 'asc';
|
|
setSortBy(column);
|
|
setSortOrder(newSortOrder);
|
|
router.push(`/epd/patients?${buildUrlParams({ sortBy: column, sortOrder: newSortOrder, page: 1 })}`);
|
|
};
|
|
|
|
// Render sort icon
|
|
const renderSortIcon = (column: string) => {
|
|
if (sortBy !== column) {
|
|
return <ArrowUpDown className="h-4 w-4 text-slate-400" />;
|
|
}
|
|
return sortOrder === 'asc' ? (
|
|
<ArrowUp className="h-4 w-4 text-teal-600" />
|
|
) : (
|
|
<ArrowDown className="h-4 w-4 text-teal-600" />
|
|
);
|
|
};
|
|
|
|
if (patients.length === 0) {
|
|
return (
|
|
<div>
|
|
{/* Search and Filter Bar */}
|
|
<div className="mb-6 flex flex-col lg: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-[160px]"
|
|
>
|
|
<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>
|
|
|
|
{/* Gender 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={genderFilter}
|
|
onChange={(e) => handleGenderFilterChange(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-[160px]"
|
|
>
|
|
<option value="all">Alle geslachten</option>
|
|
<option value="male">Man</option>
|
|
<option value="female">Vrouw</option>
|
|
<option value="other">Anders</option>
|
|
<option value="unknown">Onbekend</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' || genderFilter !== 'all'
|
|
? 'Probeer een andere zoekopdracht of filter.'
|
|
: 'Begin met het toevoegen van een nieuwe patiënt.'}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
{/* Search and Filter Bar */}
|
|
<div className="mb-6 flex flex-col lg: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-[160px]"
|
|
>
|
|
<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>
|
|
|
|
{/* Gender 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={genderFilter}
|
|
onChange={(e) => handleGenderFilterChange(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-[160px]"
|
|
>
|
|
<option value="all">Alle geslachten</option>
|
|
<option value="male">Man</option>
|
|
<option value="female">Vrouw</option>
|
|
<option value="other">Anders</option>
|
|
<option value="unknown">Onbekend</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 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">
|
|
<button
|
|
onClick={() => handleSort('name')}
|
|
className="flex items-center gap-2 text-xs font-medium text-slate-500 uppercase tracking-wider hover:text-slate-700 transition-colors"
|
|
>
|
|
Naam
|
|
{renderSortIcon('name')}
|
|
</button>
|
|
</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">
|
|
<button
|
|
onClick={() => handleSort('birthDate')}
|
|
className="flex items-center gap-2 text-xs font-medium text-slate-500 uppercase tracking-wider hover:text-slate-700 transition-colors"
|
|
>
|
|
Geboortedatum
|
|
{renderSortIcon('birthDate')}
|
|
</button>
|
|
</th>
|
|
<th className="px-6 py-3 text-left">
|
|
<button
|
|
onClick={() => handleSort('status')}
|
|
className="flex items-center gap-2 text-xs font-medium text-slate-500 uppercase tracking-wider hover:text-slate-700 transition-colors"
|
|
>
|
|
Status
|
|
{renderSortIcon('status')}
|
|
</button>
|
|
</th>
|
|
<th className="px-6 py-3 text-left">
|
|
<button
|
|
onClick={() => handleSort('_lastUpdated')}
|
|
className="flex items-center gap-2 text-xs font-medium text-slate-500 uppercase tracking-wider hover:text-slate-700 transition-colors"
|
|
>
|
|
Laatst gewijzigd
|
|
{renderSortIcon('_lastUpdated')}
|
|
</button>
|
|
</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(' ');
|
|
|
|
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>
|
|
</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>
|
|
</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>
|
|
|
|
{/* Pagination Controls */}
|
|
{totalPages > 1 && (
|
|
<div className="px-6 py-4 border-t border-slate-200 flex items-center justify-between">
|
|
{/* Results info */}
|
|
<div className="text-sm text-slate-600">
|
|
Resultaten {startIndex}-{endIndex} van {total}
|
|
</div>
|
|
|
|
{/* Pagination buttons */}
|
|
<div className="flex items-center gap-2">
|
|
<button
|
|
onClick={() => handlePageChange(page - 1)}
|
|
disabled={page === 1}
|
|
className="p-2 rounded-lg border border-slate-300 hover:bg-slate-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
|
title="Vorige pagina"
|
|
>
|
|
<ChevronLeft className="h-4 w-4" />
|
|
</button>
|
|
|
|
{/* Page numbers */}
|
|
<div className="flex items-center gap-1">
|
|
{Array.from({ length: Math.min(totalPages, 7) }, (_, i) => {
|
|
let pageNum;
|
|
if (totalPages <= 7) {
|
|
pageNum = i + 1;
|
|
} else if (page <= 4) {
|
|
pageNum = i + 1;
|
|
} else if (page >= totalPages - 3) {
|
|
pageNum = totalPages - 6 + i;
|
|
} else {
|
|
pageNum = page - 3 + i;
|
|
}
|
|
|
|
if (pageNum < 1 || pageNum > totalPages) return null;
|
|
|
|
return (
|
|
<button
|
|
key={pageNum}
|
|
onClick={() => handlePageChange(pageNum)}
|
|
className={`min-w-[2.5rem] px-3 py-2 rounded-lg border text-sm font-medium transition-colors ${
|
|
page === pageNum
|
|
? 'bg-teal-600 text-white border-teal-600'
|
|
: 'border-slate-300 hover:bg-slate-50'
|
|
}`}
|
|
>
|
|
{pageNum}
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
<button
|
|
onClick={() => handlePageChange(page + 1)}
|
|
disabled={page === totalPages}
|
|
className="p-2 rounded-lg border border-slate-300 hover:bg-slate-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
|
title="Volgende pagina"
|
|
>
|
|
<ChevronRight className="h-4 w-4" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|