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>

app/api/fhir/Patient/route.ts

@@ -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;
 

app/epd/patients/actions.ts

@@ -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',
     });

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

@@ -1,13 +1,13 @@
 'use client';
 
 /**
- * Patient Form Component (FHIR-based)
+ * Patient Form Component
- * Form for creating/editing patients using FHIR format
+ * 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: [
+        identifier: bsnValue
-          {
+          ? [
-            system: 'http://fhir.nl/fhir/NamingSystem/bsn',
+              {
-            value: formData.get('bsn') as string,
+                system: 'http://fhir.nl/fhir/NamingSystem/bsn',
-            use: 'official' as const,
+                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 */}
+      {/* Address Fields */}
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+      <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">
+          <label htmlFor="addressLine" className="block text-sm font-medium text-slate-700 mb-1">
-            Telefoonnummer
+            Adres
           </label>
           <input
-            type="tel"
+            type="text"
-            id="phone"
+            id="addressLine"
-            name="phone"
+            name="addressLine"
-            defaultValue={existingPhone || ''}
+            defaultValue={existingAddress?.line?.[0] || ''}
-            placeholder="+31612345678"
+            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>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-          <label htmlFor="email" className="block text-sm font-medium text-slate-700 mb-1">
+          <div>
-            E-mail
+            <label htmlFor="postalCode" className="block text-sm font-medium text-slate-700 mb-1">
-          </label>
+              Postcode
-          <input
+            </label>
-            type="email"
+            <input
-            id="email"
+              type="text"
-            name="email"
+              id="postalCode"
-            defaultValue={existingEmail || ''}
+              name="postalCode"
-            placeholder="patient@example.com"
+              defaultValue={existingAddress?.postalCode || ''}
-            className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-transparent"
+              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>
 

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

@@ -1,141 +1,252 @@
 'use client';
 
 /**
- * Patient List Component (FHIR-based)
+ * Patient List Component
- * Displays patients from FHIR API
+ * 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">
+      <div>
-        <User className="mx-auto h-12 w-12 text-slate-400" />
+        {/* Search and Filter Bar */}
-        <h3 className="mt-4 text-lg font-medium text-slate-900">Geen patiënten gevonden</h3>
+        <div className="mb-6 flex flex-col sm:flex-row gap-4">
-        <p className="mt-2 text-sm text-slate-600">
+          {/* Search Bar */}
-          Begin met het toevoegen van een nieuwe patiënt.
+          <form onSubmit={handleSearch} className="flex-1">
-        </p>
+            <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>
-      <div className="overflow-x-auto">
+      {/* Search and Filter Bar */}
-        <table className="min-w-full divide-y divide-slate-200">
+      <div className="mb-6 flex flex-col sm:flex-row gap-4">
-          <thead className="bg-slate-50">
+        {/* Search Bar */}
-            <tr>
+        <form onSubmit={handleSearch} className="flex-1">
-              <th className="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">
+          <div className="relative">
-                Patiënt
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-slate-400" />
-              </th>
+            <input
-              <th className="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">
+              type="text"
-                BSN
+              placeholder="Zoek op naam of BSN..."
-              </th>
+              value={searchTerm}
-              <th className="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">
+              onChange={(e) => setSearchTerm(e.target.value)}
-                Geboortedatum
+              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"
-              </th>
+            />
-              <th className="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">
+          </div>
-                Contact
+        </form>
-              </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(' ');
 
-              const bsn = patient.identifier?.find(
+        {/* Status Filter */}
-                (id) => id.system === 'http://fhir.nl/fhir/NamingSystem/bsn'
+        <div className="relative">
-              )?.value;
+          <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;
+      {/* Patient Table */}
-              const email = patient.telecom?.find((t) => t.system === 'email')?.value;
+      <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 (
+                const bsn = patient.identifier?.find(
-                <tr
+                  (id) => id.system === 'http://fhir.nl/fhir/NamingSystem/bsn'
-                  key={patient.id}
+                )?.value;
-                  className="hover:bg-slate-50 transition-colors cursor-pointer"
+
-                >
+                // Get status from extension (we'll add this to the FHIR mapping)
-                  <td className="px-6 py-4 whitespace-nowrap">
+                const statusExtension = patient.extension?.find(
-                    <Link
+                  (ext) => ext.url === 'http://mini-epd.local/fhir/StructureDefinition/episode-status'
-                      href={`/epd/patients/${patient.id}`}
+                );
-                      className="flex items-center group"
+                const status = statusExtension?.valueCode;
-                    >
+
-                      <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">
+                // Format updated_at date
-                        <span className="text-white font-semibold text-sm">
+                const updatedAt = patient.meta?.lastUpdated
-                          {name?.given?.[0]?.[0]}
+                  ? new Date(patient.meta.lastUpdated).toLocaleDateString('nl-NL', {
-                          {name?.family?.[0]}
+                      day: '2-digit',
-                        </span>
+                      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">
+                    </td>
-                        <div className="text-sm font-medium text-slate-900 group-hover:text-teal-600 transition-colors">
+                    <td className="px-6 py-4 whitespace-nowrap">
-                          {fullName}
+                      <div className="text-sm text-slate-900">{bsn || '-'}</div>
-                        </div>
+                    </td>
-                        <div className="text-sm text-slate-500">ID: {patient.id}</div>
+                    <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>
+                    <td className="px-6 py-4 whitespace-nowrap">
-                  <td className="px-6 py-4 whitespace-nowrap">
+                      <StatusBadge status={status} />
-                    <div className="text-sm text-slate-900">{bsn || '-'}</div>
+                    </td>
-                  </td>
+                    <td className="px-6 py-4 whitespace-nowrap">
-                  <td className="px-6 py-4 whitespace-nowrap">
+                      <div className="text-sm text-slate-500">{updatedAt}</div>
-                    <div className="flex items-center text-sm text-slate-900">
+                    </td>
-                      <Calendar className="h-4 w-4 text-slate-400 mr-2" />
+                  </tr>
-                      {patient.birthDate || '-'}
+                );
-                    </div>
+              })}
-                  </td>
+            </tbody>
-                  <td className="px-6 py-4 whitespace-nowrap">
+          </table>
-                    <div className="space-y-1">
+        </div>
-                      {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>
       </div>
     </div>
   );

app/epd/patients/page.tsx

@@ -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} />;

docs/specs/screening-intake/bouwplan-screening-intake-v1.0.md

@@ -42,7 +42,7 @@
 | Epic ID | Titel | Doel | Status | Stories |
 |---------|-------|------|--------|---------|
 | E1 | Database & Types | Datamodel implementeren in Supabase | ✅ Done | 3 |
-| E2 | Cliëntenbeheer | Lijstweergave en aanmaken cliënten | ⏳ To Do | 3 |
+| E2 | Cliëntenbeheer | Lijstweergave en aanmaken cliënten | 🔨 In Progress | 3 |
 | E3 | Screening Module | Screening tab en functionaliteit | ⏳ To Do | 4 |
 | E4 | Intake Core | Intake overzicht en navigatie | ⏳ To Do | 3 |
 | E5 | Intake Details | Specifieke tabbladen (Contact, Risico, etc.) | ⏳ To Do | 5 |
@@ -52,23 +52,25 @@
 
 ## 4. Epics & Stories (Uitwerking)
 
-### Epic 1 — Database & Types
+### Epic 1 — Database & Types ✅
 **Doel:** Een solide datamodel in Supabase dat voldoet aan de eisen uit het FO.
+**Status:** Done - Alle stories voltooid op 22-11-2025
 
-| Story ID | Beschrijving | Acceptatiecriteria |
+| Story ID | Status | Beschrijving | Acceptatiecriteria |
-|----------|--------------|---------------------|
+|----------|--------|--------------|---------------------|
-| E1.S1 | Tabellen aanmaken | ✅ Migration `20251122_screening_intake_schema.sql` aangemaakt met:<br>- Patient status kolom (`episode_status` enum)<br>- Screening module (3 tabellen: `screenings`, `screening_activities`, `screening_documents`)<br>- Intake module (4 tabellen: `intakes`, `anamneses`, `examinations`, `risk_assessments`)<br>- `encounters` tabel uitgebreid met `intake_id` kolom<br>- `care_plans` uitgebreid met intake referenties |
+| E1.S1 | ✅ Done | Tabellen aanmaken | Migration `20251122_screening_intake_schema.sql` aangemaakt met:<br>- Patient status kolom (`episode_status` enum)<br>- Screening module (3 tabellen: `screenings`, `screening_activities`, `screening_documents`)<br>- Intake module (4 tabellen: `intakes`, `anamneses`, `examinations`, `risk_assessments`)<br>- `encounters` tabel uitgebreid met `intake_id` kolom<br>- `care_plans` uitgebreid met intake referenties |
-| E1.S2 | Migration toepassen | Migration succesvol toegepast op Supabase database met:<br>- Foreign keys en constraints<br>- RLS policies voor alle nieuwe tabellen<br>- Indexes voor performance<br>- Triggers voor `updated_at` timestamps |
+| E1.S2 | ✅ Done | Migration toepassen | Migration succesvol toegepast op Supabase database met:<br>- Foreign keys en constraints<br>- RLS policies voor alle nieuwe tabellen<br>- Indexes voor performance<br>- Triggers voor `updated_at` timestamps |
-| E1.S3 | TypeScript Types genereren | Types gegenereerd met `supabase gen types` en geëxporteerd naar `lib/supabase/database.types.ts` |
+| E1.S3 | ✅ Done | TypeScript Types genereren | Types gegenereerd met `supabase gen types` en geëxporteerd naar `lib/supabase/database.types.ts`<br>- 2148+ regels TypeScript types<br>- Alle nieuwe tabellen en enums geëxporteerd |
 
-### Epic 2 — Cliëntenbeheer (Level 1)
+### Epic 2 — Cliëntenbeheer (Level 1) 🔨
 **Doel:** Behandelaars kunnen cliënten vinden en nieuwe cliënten aanmaken.
+**Status:** In Progress - 2 van 3 stories voltooid op 22-11-2025
 
-| Story ID | Beschrijving | Acceptatiecriteria |
+| Story ID | Status | Beschrijving | Acceptatiecriteria |
-|----------|--------------|---------------------|
+|----------|--------|--------------|---------------------|
-| E2.S1 | Cliëntenlijst | Tabel met zoekfunctie, filters en status badges. |
+| E2.S1 | ✅ Done | Cliëntenlijst | Tabel met zoekfunctie, filters en status badges:<br>- `patient-list.tsx` geüpdatet met client-side search bar<br>- Status filter dropdown (alle/screening/actief/afgerond/afgemeld)<br>- StatusBadge component met color-coded badges<br>- Tabel kolommen: Status, Naam, BSN, Laatst gewijzigd<br>- API route `/api/fhir/Patient` ondersteunt status filtering<br>- FHIR transform aangepast voor status extension |
-| E2.S2 | Nieuwe Cliënt Flow | Formulier voor aanmaken cliënt (incl. John Doe logica). |
+| E2.S2 | ✅ Done | Nieuwe Cliënt Flow | Formulier voor aanmaken cliënt met John Doe logica:<br>- `patient-form.tsx` compleet herschreven met alle FO velden<br>- John Doe checkbox met conditional BSN requirement<br>- BSN validatie met Modulo-11 check<br>- Alle velden: naam, BSN, geboortedatum, geslacht, adres (straat, postcode, plaats), contact (telefoon, email), verzekering (verzekeraar, polisnummer)<br>- Warning messages voor John Doe patiënten<br>- Status altijd 'planned' voor nieuwe patiënten<br>- Redirect naar patient detail page na aanmaken<br>- FHIR transform ondersteunt insurance extension (bidirectioneel) |
-| E2.S3 | Cliënt Header & Nav | Context-aware header en sidebar navigatie (Level 2). |
+| E2.S3 | ⏳ To Do | Cliënt Header & Nav | Context-aware header en sidebar navigatie (Level 2). |
 
 ### Epic 3 — Screening Module (Level 2)
 **Doel:** Faciliteren van het screeningsproces.

lib/fhir/transforms/patient.ts

@@ -131,6 +131,31 @@ export function dbPatientToFHIR(row: PatientRow): FHIRPatient {
     meta: {
       lastUpdated: row.updated_at || undefined,
     },
+
+    // Extension for episode status (non-standard FHIR, but needed for our workflow)
+    extension: [
+      row.status
+        ? {
+            url: 'http://mini-epd.local/fhir/StructureDefinition/episode-status',
+            valueCode: row.status,
+          }
+        : undefined,
+      row.is_john_doe
+        ? {
+            url: 'http://mini-epd.local/fhir/StructureDefinition/john-doe',
+            valueBoolean: true,
+          }
+        : undefined,
+      row.insurance_company
+        ? {
+            url: 'http://mini-epd.local/fhir/StructureDefinition/insurance',
+            valueString: JSON.stringify({
+              company: row.insurance_company,
+              number: row.insurance_number,
+            }),
+          }
+        : undefined,
+    ].filter((x): x is NonNullable<typeof x> => x !== undefined),
   };
 }
 
@@ -172,6 +197,30 @@ export function fhirPatientToDB(fhir: FHIRPatient): PatientInsert {
   const gpName = gp?.display;
   const gpAgb = gp?.identifier?.value;
 
+  // Extract status and john_doe from extensions
+  const statusExtension = fhir.extension?.find(
+    (ext) => ext.url === 'http://mini-epd.local/fhir/StructureDefinition/episode-status'
+  );
+  const johnDoeExtension = fhir.extension?.find(
+    (ext) => ext.url === 'http://mini-epd.local/fhir/StructureDefinition/john-doe'
+  );
+  const insuranceExtension = fhir.extension?.find(
+    (ext) => ext.url === 'http://mini-epd.local/fhir/StructureDefinition/insurance'
+  );
+
+  // Parse insurance data from extension
+  let insuranceCompany: string | undefined;
+  let insuranceNumber: string | undefined;
+  if (insuranceExtension?.valueString) {
+    try {
+      const insuranceData = JSON.parse(insuranceExtension.valueString);
+      insuranceCompany = insuranceData.company;
+      insuranceNumber = insuranceData.number;
+    } catch (e) {
+      console.error('Failed to parse insurance extension:', e);
+    }
+  }
+
   return {
     id: fhir.id,
     identifier_bsn: bsn || '999999990', // Default placeholder
@@ -194,5 +243,9 @@ export function fhirPatientToDB(fhir: FHIRPatient): PatientInsert {
     general_practitioner_name: gpName || undefined,
     general_practitioner_agb: gpAgb || undefined,
     active: fhir.active ?? true,
+    status: (statusExtension?.valueCode as any) || 'planned',
+    is_john_doe: johnDoeExtension?.valueBoolean || false,
+    insurance_company: insuranceCompany || undefined,
+    insurance_number: insuranceNumber || undefined,
   };
 }