feat: migrate clients module to patients + add docs

app/epd/patients/components/delete-patient-button.tsx

@@ -0,0 +1,129 @@
+'use client';
+
+/**
+ * Delete Patient Button Component
+ * E3.S3: Delete patient with confirmation dialog
+ */
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { Trash2, AlertTriangle, Loader2 } from 'lucide-react';
+import { deletePatient } from '../actions';
+
+interface DeletePatientButtonProps {
+  patientId: string;
+  patientName: string;
+}
+
+export function DeletePatientButton({ patientId, patientName }: DeletePatientButtonProps) {
+  const router = useRouter();
+  const [showConfirm, setShowConfirm] = useState(false);
+  const [isDeleting, setIsDeleting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleDelete = async () => {
+    setIsDeleting(true);
+    setError(null);
+
+    try {
+      await deletePatient(patientId);
+      router.push('/epd/patients');
+      router.refresh();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Fout bij verwijderen van patiënt');
+      setIsDeleting(false);
+    }
+  };
+
+  if (!showConfirm) {
+    return (
+      <div className="mt-8 pt-6 border-t border-slate-200">
+        <div className="bg-red-50 border border-red-200 rounded-lg p-4">
+          <div className="flex items-start gap-3">
+            <AlertTriangle className="h-5 w-5 text-red-600 flex-shrink-0 mt-0.5" />
+            <div className="flex-1">
+              <h3 className="text-sm font-semibold text-red-900 mb-1">
+                Gevaarlijke zone
+              </h3>
+              <p className="text-xs text-red-700 mb-3">
+                Het verwijderen van een patiënt kan niet ongedaan worden gemaakt. Alle gekoppelde
+                gegevens (intake, diagnoses, behandelplannen) worden ook verwijderd.
+              </p>
+              <button
+                onClick={() => setShowConfirm(true)}
+                className="inline-flex items-center gap-2 px-3 py-1.5 bg-red-600 hover:bg-red-700 text-white text-sm font-medium rounded-lg transition-colors"
+              >
+                <Trash2 className="h-4 w-4" />
+                <span>Patiënt verwijderen</span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="mt-8 pt-6 border-t border-slate-200">
+      <div className="bg-red-50 border-2 border-red-300 rounded-lg p-6">
+        {error && (
+          <div className="bg-red-100 border border-red-300 rounded-lg p-3 mb-4">
+            <p className="text-sm text-red-800">{error}</p>
+          </div>
+        )}
+
+        <div className="flex items-start gap-3 mb-4">
+          <AlertTriangle className="h-6 w-6 text-red-600 flex-shrink-0" />
+          <div className="flex-1">
+            <h3 className="text-lg font-semibold text-red-900 mb-2">
+              Weet u zeker dat u deze patiënt wilt verwijderen?
+            </h3>
+            <p className="text-sm text-red-800 mb-2">
+              U staat op het punt om <strong>{patientName}</strong> permanent te verwijderen.
+            </p>
+            <p className="text-sm text-red-700">
+              Dit verwijdert:
+            </p>
+            <ul className="text-sm text-red-700 list-disc list-inside ml-2 mt-1">
+              <li>Alle persoonlijke gegevens</li>
+              <li>Alle screening en intake informatie</li>
+              <li>Alle diagnoses en observaties</li>
+              <li>Alle behandelplannen en doelen</li>
+              <li>Alle documenten en rapportages</li>
+            </ul>
+            <p className="text-sm font-semibold text-red-900 mt-3">
+              Deze actie kan niet ongedaan worden gemaakt!
+            </p>
+          </div>
+        </div>
+
+        <div className="flex items-center gap-3">
+          <button
+            onClick={handleDelete}
+            disabled={isDeleting}
+            className="inline-flex items-center gap-2 px-4 py-2 bg-red-600 hover:bg-red-700 text-white font-medium rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            {isDeleting ? (
+              <>
+                <Loader2 className="h-4 w-4 animate-spin" />
+                <span>Verwijderen...</span>
+              </>
+            ) : (
+              <>
+                <Trash2 className="h-4 w-4" />
+                <span>Ja, verwijder permanent</span>
+              </>
+            )}
+          </button>
+          <button
+            onClick={() => setShowConfirm(false)}
+            disabled={isDeleting}
+            className="px-4 py-2 text-slate-700 hover:text-slate-900 font-medium transition-colors disabled:opacity-50"
+          >
+            Annuleren
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

app/epd/patients/components/patient-form.tsx

@@ -64,6 +64,27 @@ export function PatientForm({ patient }: PatientFormProps) {
     }
   }
 
+  // Extract GP (huisarts) data from extension
+  const gpExtension = patient?.extension?.find(
+    (ext) => ext.url === 'http://mini-epd.local/fhir/StructureDefinition/general-practitioner'
+  );
+  let existingGP: { name?: string; agb?: string } = {};
+  if (gpExtension?.valueString) {
+    try {
+      existingGP = JSON.parse(gpExtension.valueString);
+    } catch (e) {
+      console.error('Failed to parse GP extension:', e);
+    }
+  }
+
+  // Extract emergency contact data from contact field
+  const emergencyContact = patient?.contact?.find(
+    (c) => c.relationship?.some(r => r.coding?.some(code => code.code === 'C'))
+  );
+  const emergencyName = emergencyContact?.name?.text || '';
+  const emergencyRelationship = emergencyContact?.relationship?.[0]?.text || '';
+  const emergencyPhone = emergencyContact?.telecom?.find(t => t.system === 'phone')?.value || '';
+
   async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
     e.preventDefault();
     setIsSubmitting(true);
@@ -159,7 +180,49 @@ export function PatientForm({ patient }: PatientFormProps) {
                 }),
               }
             : undefined,
+          // GP (huisarts) extension
+          formData.get('gpName')
+            ? {
+                url: 'http://mini-epd.local/fhir/StructureDefinition/general-practitioner',
+                valueString: JSON.stringify({
+                  name: formData.get('gpName'),
+                  agb: formData.get('gpAgb'),
+                }),
+              }
+            : undefined,
         ].filter((ext): ext is NonNullable<typeof ext> => ext !== undefined),
+
+        // Emergency contact (FHIR contact field)
+        contact: formData.get('emergencyName')
+          ? [
+              {
+                relationship: [
+                  {
+                    coding: [
+                      {
+                        system: 'http://terminology.hl7.org/CodeSystem/v2-0131',
+                        code: 'C',
+                        display: 'Emergency Contact',
+                      },
+                    ],
+                    text: formData.get('emergencyRelationship') as string || 'Noodcontact',
+                  },
+                ],
+                name: {
+                  text: formData.get('emergencyName') as string,
+                },
+                telecom: formData.get('emergencyPhone')
+                  ? [
+                      {
+                        system: 'phone' as const,
+                        value: formData.get('emergencyPhone') as string,
+                        use: 'home' as const,
+                      },
+                    ]
+                  : undefined,
+              },
+            ]
+          : undefined,
       };
 
       let createdPatient: FHIRPatient;
@@ -435,6 +498,88 @@ export function PatientForm({ patient }: PatientFormProps) {
         </div>
       </div>
 
+      {/* General Practitioner (Huisarts) */}
+      <div className="space-y-4">
+        <h3 className="text-sm font-semibold text-slate-900 border-b pb-2">Huisarts</h3>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div>
+            <label htmlFor="gpName" className="block text-sm font-medium text-slate-700 mb-1">
+              Naam huisarts
+            </label>
+            <input
+              type="text"
+              id="gpName"
+              name="gpName"
+              defaultValue={existingGP.name || ''}
+              placeholder="Dr. J. de Vries"
+              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="gpAgb" className="block text-sm font-medium text-slate-700 mb-1">
+              AGB-code huisarts
+            </label>
+            <input
+              type="text"
+              id="gpAgb"
+              name="gpAgb"
+              defaultValue={existingGP.agb || ''}
+              placeholder="12345678"
+              maxLength={8}
+              pattern="[0-9]{8}"
+              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">8 cijfers</p>
+          </div>
+        </div>
+      </div>
+
+      {/* Emergency Contact */}
+      <div className="space-y-4">
+        <h3 className="text-sm font-semibold text-slate-900 border-b pb-2">Noodcontact</h3>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          <div>
+            <label htmlFor="emergencyName" className="block text-sm font-medium text-slate-700 mb-1">
+              Naam contactpersoon
+            </label>
+            <input
+              type="text"
+              id="emergencyName"
+              name="emergencyName"
+              defaultValue={emergencyName}
+              placeholder="M. Jansen"
+              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="emergencyRelationship" className="block text-sm font-medium text-slate-700 mb-1">
+              Relatie
+            </label>
+            <input
+              type="text"
+              id="emergencyRelationship"
+              name="emergencyRelationship"
+              defaultValue={emergencyRelationship}
+              placeholder="Partner / Ouder / Kind"
+              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="emergencyPhone" className="block text-sm font-medium text-slate-700 mb-1">
+              Telefoonnummer
+            </label>
+            <input
+              type="tel"
+              id="emergencyPhone"
+              name="emergencyPhone"
+              defaultValue={emergencyPhone}
+              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>
+      </div>
+
       {/* Action Buttons */}
       <div className="flex items-center gap-4 pt-4 border-t border-slate-200">
         <button

app/epd/patients/components/patient-list.tsx

@@ -2,17 +2,20 @@
 
 /**
  * Patient List Component
- * E2.S1: Cliëntenlijst met zoekfunctie, filters en status badges
+ * 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 } from 'lucide-react';
+import { User, Search, Filter, ChevronLeft, ChevronRight, ArrowUpDown, ArrowUp, ArrowDown } from 'lucide-react';
 import type { FHIRPatient } from '@/lib/fhir';
 
 interface PatientListProps {
-  initialPatients: FHIRPatient[];
+  patients: FHIRPatient[];
+  total: number;
+  page: number;
+  pageSize: number;
 }
 
 // Status badge component
@@ -39,36 +42,90 @@ function StatusBadge({ status }: { status?: string }) {
   );
 }
 
-export function PatientList({ initialPatients }: PatientListProps) {
+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 [patients] = useState<FHIRPatient[]>(initialPatients);
+  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();
-    const params = new URLSearchParams();
-    if (searchTerm) params.set('search', searchTerm);
-    if (statusFilter !== 'all') params.set('status', statusFilter);
-    router.push(`/epd/patients?${params.toString()}`);
+    router.push(`/epd/patients?${buildUrlParams({ page: 1 })}`);
   };
 
   // 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()}`);
+    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 sm:flex-row gap-4">
+        <div className="mb-6 flex flex-col lg:flex-row gap-4">
           {/* Search Bar */}
           <form onSubmit={handleSearch} className="flex-1">
             <div className="relative">
@@ -89,7 +146,7 @@ export function PatientList({ initialPatients }: PatientListProps) {
             <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]"
+              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>
@@ -98,6 +155,22 @@ export function PatientList({ initialPatients }: PatientListProps) {
               <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 */}
@@ -105,7 +178,7 @@ export function PatientList({ initialPatients }: PatientListProps) {
           <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'
+            {searchTerm || statusFilter !== 'all' || genderFilter !== 'all'
               ? 'Probeer een andere zoekopdracht of filter.'
               : 'Begin met het toevoegen van een nieuwe patiënt.'}
           </p>
@@ -117,7 +190,7 @@ export function PatientList({ initialPatients }: PatientListProps) {
   return (
     <div>
       {/* Search and Filter Bar */}
-      <div className="mb-6 flex flex-col sm:flex-row gap-4">
+      <div className="mb-6 flex flex-col lg:flex-row gap-4">
         {/* Search Bar */}
         <form onSubmit={handleSearch} className="flex-1">
           <div className="relative">
@@ -138,7 +211,7 @@ export function PatientList({ initialPatients }: PatientListProps) {
           <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]"
+            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>
@@ -147,6 +220,22 @@ export function PatientList({ initialPatients }: PatientListProps) {
             <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 */}
@@ -155,20 +244,44 @@ export function PatientList({ initialPatients }: PatientListProps) {
           <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 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 text-xs font-medium text-slate-500 uppercase tracking-wider">
-                  Geboortedatum
+                <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 text-xs font-medium text-slate-500 uppercase tracking-wider">
-                  Status
+                <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 text-xs font-medium text-slate-500 uppercase tracking-wider">
-                  Laatst gewijzigd
+                <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>
@@ -247,6 +360,69 @@ export function PatientList({ initialPatients }: PatientListProps) {
             </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>
   );