Labpath — Diagnostic Lab & Patient Portal (Concept Template)

Labpath is a concept commercial web template and design system engineered for diagnostic laboratories, preventive biomarker clinics, concierge medicine practices, and digital health platforms. Built with Next.js 16 App Router, React 19, TypeScript 5, and Tailwind CSS 4, it connects public diagnostic discovery and specimen scheduling directly to an interactive, stateful Patient Portal across 19 complete routes.

Healthcare interfaces often struggle between sterile hospital tables and overly casual consumer apps. Labpath introduces a Clinical Monochrome + Surgical Blue visual language paired with a custom Calibrated Reference-Range Rail (RangeRail) motif. Every screen is verified against WCAG 2.2 AA contrast standards across both desktop and mobile viewports.

Faceted Test Catalog & Wellness Packages (/tests, /packages) Searchable catalog of 22 diagnostic assays across 7 clinical categories with URL-synced filters (category, fasting requirement, sample type, home collection eligibility, and sort order), plus 6 curated checkup packages with a sticky cross-package biomarker comparison matrix.

5-Step Requisition Booking Wizard (/book) Supports deep-linking a single assay (?test=lipid-panel), a bundled checkup package (?package=complete-wellness), or rescheduling an existing appointment. Includes draw center vs. home phlebotomy collection logic, time-slot selection, Zod-validated patient intake, and .ics calendar export.

Patient Dossier & 2-Pane Assay Workbench (/portal) A clinical patient dossier header with an animated Optimal Reference Index paired with a 2-pane interactive report workbench. Patients can filter biomarkers by clinical panel and inspect calibrated reference-range rails, plain-English clinical notes, and 3-visit longitudinal draw trajectories.

Interactive Lab Report & Longitudinal Health Metrics (/portal/results/[id], /portal/metrics) Full clinical lab report with an 8-category panel filter bar, expandable analyte rows, specimen chain-of-custody progress tracker, print-ready requisition stylesheet (@media print), and interactive self-reported health metrics logging.

Framework: Next.js 16.4 (App Router, static export compatible), React 19.3, TypeScript 5.9 (strict: true)

Styling & Tokens: Tailwind CSS 4.2 with semantic clinical tokens (tokens.json)

State & Validation: Zustand 5 persisted client store (localStorage) + React Hook Form 7 + Zod 4

UI & Motion: Radix UI primitives, Lucide Icons, Motion for React, and custom accessible data visualizations

Testing & QA: 27 Vitest unit tests + 36 Playwright E2E and automated @axe-core/playwright WCAG 2.2 AA accessibility checks