Files
triqura-ecd/app/epd/patients/page.tsx
colinislit 7b9de4ada2 feat(ui): mobile responsiveness audit + type fixes
Mobile Responsiveness:
- Viewport meta tags toegevoegd in layout.tsx
- EPD header: patient details verborgen op mobiel, zoekbalk responsive
- Agenda: auto-switch naar dagview op mobiel, mini-kalender verborgen
- Agenda toolbar: verticale stacking, Week/Werkweek knoppen verborgen
- Patiëntenlijst: compact icoon-only button op mobiel
- Verpleegrapportage: verticale flow i.p.v. twee-koloms layout
- Cortex: artifact overlay met slide-in animatie op mobiel
- Cortex: "Terug" knop toegevoegd aan artifact panels
- Toast feedback bij succesvolle afspraak creatie

Code Quality Fixes (KISS/DRY):
- Resize listener vervangen door bestaande useMediaQuery hook
- Dubbele flex class opgeschoond in epd-header.tsx
- userScalable: false verwijderd (accessibility)

Type Fixes:
- actions.ts: status literal type met 'as const'
- agenda-block.tsx: dateRange start/end optioneel
- chat-empty-state.tsx: framer-motion ease type
- cortex-store.ts: ChatEntities.dateRange consistent met Zod schema

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-03 10:28:04 +01:00

65 lines
1.9 KiB
TypeScript

import { Suspense } from 'react';
import { Plus } from 'lucide-react';
import { getPatients } from './actions';
import { PatientList } from './components/patient-list';
import Link from 'next/link';
interface SearchParams {
search?: string;
status?: string;
gender?: string;
page?: string;
sortBy?: string;
sortOrder?: 'asc' | 'desc';
}
export default async function PatientsPage({
searchParams,
}: {
searchParams: Promise<SearchParams>;
}) {
const params = await searchParams;
return (
<div className="px-4 sm:px-6 lg:px-8 py-8">
{/* Page Header */}
<div className="mb-8">
<div className="flex items-center justify-between">
<div>
<h1 className="text-2xl font-bold text-slate-900">Patiënten</h1>
<p className="text-sm text-slate-600 mt-1">
Overzicht van alle patiënten met screening en intake status
</p>
</div>
<Link
href="/epd/patients/new"
className="inline-flex items-center gap-2 px-3 md:px-4 py-2 bg-gradient-to-r from-teal-600 to-teal-700 hover:from-teal-700 hover:to-teal-800 text-white font-medium rounded-lg shadow-sm hover:shadow-md transition-all"
>
<Plus className="h-4 w-4" />
<span className="hidden md:inline">Nieuwe patiënt</span>
</Link>
</div>
</div>
{/* Patient List */}
<Suspense fallback={<div>Loading patients...</div>}>
<PatientListWrapper searchParams={params} />
</Suspense>
</div>
);
}
async function PatientListWrapper({ searchParams }: { searchParams: SearchParams }) {
const page = searchParams.page ? parseInt(searchParams.page, 10) : 1;
const result = await getPatients({
search: searchParams.search,
status: searchParams.status,
gender: searchParams.gender,
page,
sortBy: searchParams.sortBy,
sortOrder: searchParams.sortOrder,
});
return <PatientList {...result} />;
}