The problem
Clinic administrators do not browse software. They live in it — the same screens, the same tables, the same filters, for an entire shift. At that level of use, small frictions stop being cosmetic. A table that reloads the world on every sort, a filter that resets when you navigate back, a form that loses your work: each one costs real minutes, many times a day.
The brief was an admin surface that stays fast and predictable under continuous professional use, with strict role separation between staff types.
What we built
Server-side data tables. Built on TanStack Table with pagination, sorting and filtering handled server-side, so performance stays flat as record counts grow rather than degrading with them. CSV export and row selection are built in, because administrators inevitably need data out of the system.
Role-based access control. A dedicated RBAC utility layer with a RoleGate
component, so permissions are enforced declaratively at the component boundary
instead of being scattered through conditional rendering.
Keyboard-first navigation. Global search on Cmd/Ctrl-K, full keyboard
navigation, ARIA labelling and visible focus rings throughout. For daily-driver
software, keyboard access is a productivity feature, not just a compliance checkbox.
Validated forms. React Hook Form paired with Zod schemas, so validation rules are defined once and shared between client and types — invalid state becomes unrepresentable rather than merely caught.
Honest UI states. Every data surface handles loading, empty and error states explicitly. Software that only looks good on the happy path is unfinished software.
Tested. Unit tests with Vitest and Testing Library covering component behaviour, not just render success.
The engineering approach
257 components sounds like a lot until you see the structure: a reusable DataTable
and FilterBar do the heavy lifting across the application, with feature components
composing them rather than reimplementing them. Build the generic primitive once,
build features fast forever after.
The architecture separates cleanly — src/app for routes and API surface,
src/components for UI and features, src/lib for types, RBAC and utilities. A new
engineer can find things.
The outcome
A responsive, accessible, production-ready clinic administration surface with strict role separation and data tables that stay fast as the practice grows.