{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "lab-results-viewer", "title": "Lab Results Viewer", "type": "registry:block", "files": [ { "path": "packages/registry-react/blocks/lab-results-viewer/LabResultsViewer.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport {\n AlertTriangle,\n CheckCircle2,\n FileCheck2,\n FileDown,\n FlaskConical,\n MapPin,\n Printer,\n Search,\n Share2,\n ShieldCheck,\n Stethoscope,\n TrendingDown,\n TrendingUp,\n} from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Separator } from '@/components/ui/separator'\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'\nimport { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs'\n\nexport interface LabResultsViewerProps {\n className?: string\n}\n\nexport type TestStatus = 'Normal' | 'High' | 'Low'\n\nexport interface LabTest {\n id: string\n name: string\n panel: 'lipid' | 'metabolic' | 'renal'\n panelLabel: string\n loinc: string\n value: number\n unit: string\n referenceRangeText: string\n status: TestStatus\n scaleMin: number\n scaleMax: number\n normalMin: number\n normalMax: number\n markerPercent: number\n rangeZoneLeft: number\n rangeZoneWidth: number\n trendDelta: string\n trendDirection: 'up' | 'down' | 'flat'\n trendStatus: 'warning' | 'success' | 'neutral'\n priorValue: string\n clinicalNote: string\n}\n\nconst patientInfo = {\n name: 'Sarah Jenkins',\n mrn: 'MRN-9482104',\n dob: 'Apr 12, 1984 (Age 42)',\n sex: 'Female',\n fasting: 'Fasting (12 hours)',\n accession: 'Q-94827104',\n orderedBy: 'Dr. Marcus Thorne, MD, FACP',\n facility: 'Quest Diagnostics Central Lab #842',\n facilityAddress: '100 Clifton Blvd, Clifton, NJ 07012 (CLIA: 31D0691234)',\n collectedDate: 'Aug 18, 2026 · 08:30 AM EDT',\n reportedDate: 'Aug 18, 2026 · 02:45 PM EDT',\n specimen: 'Serum & Plasma (Gold SST / Lavender EDTA)',\n}\n\nconst labTests: LabTest[] = [\n {\n id: 'chol-total',\n name: 'Total Cholesterol',\n panel: 'lipid',\n panelLabel: 'Lipid Panel (Cardiovascular Risk)',\n loinc: '2093-3',\n value: 215,\n unit: 'mg/dL',\n referenceRangeText: '< 200 mg/dL',\n status: 'High',\n scaleMin: 100,\n scaleMax: 300,\n normalMin: 100,\n normalMax: 200,\n markerPercent: 57.5,\n rangeZoneLeft: 0,\n rangeZoneWidth: 50,\n trendDelta: '+12 mg/dL vs 6 mos ago',\n trendDirection: 'up',\n trendStatus: 'warning',\n priorValue: '203 mg/dL (Feb 2026)',\n clinicalNote: 'Mild elevation. Suggests elevated total circulating atherogenic lipoprotein particles.',\n },\n {\n id: 'chol-ldl',\n name: 'LDL Cholesterol (Calculated)',\n panel: 'lipid',\n panelLabel: 'Lipid Panel (Cardiovascular Risk)',\n loinc: '13457-7',\n value: 138,\n unit: 'mg/dL',\n referenceRangeText: '< 100 mg/dL',\n status: 'High',\n scaleMin: 50,\n scaleMax: 200,\n normalMin: 50,\n normalMax: 100,\n markerPercent: 58.7,\n rangeZoneLeft: 0,\n rangeZoneWidth: 33.3,\n trendDelta: '+18 mg/dL vs 6 mos ago',\n trendDirection: 'up',\n trendStatus: 'warning',\n priorValue: '120 mg/dL (Feb 2026)',\n clinicalNote: 'Above primary prevention target (< 100 mg/dL). Lifestyle modifications indicated.',\n },\n {\n id: 'chol-hdl',\n name: 'HDL Cholesterol',\n panel: 'lipid',\n panelLabel: 'Lipid Panel (Cardiovascular Risk)',\n loinc: '2085-9',\n value: 58,\n unit: 'mg/dL',\n referenceRangeText: '≥ 50 mg/dL',\n status: 'Normal',\n scaleMin: 20,\n scaleMax: 100,\n normalMin: 50,\n normalMax: 100,\n markerPercent: 47.5,\n rangeZoneLeft: 37.5,\n rangeZoneWidth: 62.5,\n trendDelta: '+2 mg/dL vs 6 mos ago',\n trendDirection: 'up',\n trendStatus: 'success',\n priorValue: '56 mg/dL (Feb 2026)',\n clinicalNote: 'Desirable cardio-protective level for adult female population.',\n },\n {\n id: 'triglycerides',\n name: 'Triglycerides',\n panel: 'lipid',\n panelLabel: 'Lipid Panel (Cardiovascular Risk)',\n loinc: '2571-8',\n value: 142,\n unit: 'mg/dL',\n referenceRangeText: '< 150 mg/dL',\n status: 'Normal',\n scaleMin: 50,\n scaleMax: 250,\n normalMin: 50,\n normalMax: 150,\n markerPercent: 46.0,\n rangeZoneLeft: 0,\n rangeZoneWidth: 50,\n trendDelta: '-15 mg/dL vs 6 mos ago',\n trendDirection: 'down',\n trendStatus: 'success',\n priorValue: '157 mg/dL (Feb 2026)',\n clinicalNote: 'Improved from borderline threshold into normal reference zone.',\n },\n {\n id: 'glucose-fasting',\n name: 'Fasting Glucose',\n panel: 'metabolic',\n panelLabel: 'Glucose Metabolism & Glycemic Control',\n loinc: '1558-6',\n value: 92,\n unit: 'mg/dL',\n referenceRangeText: '70 – 99 mg/dL',\n status: 'Normal',\n scaleMin: 50,\n scaleMax: 150,\n normalMin: 70,\n normalMax: 99,\n markerPercent: 42.0,\n rangeZoneLeft: 20,\n rangeZoneWidth: 29,\n trendDelta: '-3 mg/dL vs 6 mos ago',\n trendDirection: 'down',\n trendStatus: 'success',\n priorValue: '95 mg/dL (Feb 2026)',\n clinicalNote: 'Normal euglycemic fasting state. No prediabetes indicators.',\n },\n {\n id: 'egfr-renal',\n name: 'eGFR (Kidney Function)',\n panel: 'renal',\n panelLabel: 'Renal Function & Filtration',\n loinc: '33914-3',\n value: 104,\n unit: 'mL/min/1.73m²',\n referenceRangeText: '≥ 60 mL/min/1.73m²',\n status: 'Normal',\n scaleMin: 30,\n scaleMax: 130,\n normalMin: 60,\n normalMax: 130,\n markerPercent: 74.0,\n rangeZoneLeft: 30,\n rangeZoneWidth: 70,\n trendDelta: '+1 mL/min vs 6 mos ago',\n trendDirection: 'up',\n trendStatus: 'success',\n priorValue: '103 mL/min (Feb 2026)',\n clinicalNote: 'Calculated using CKD-EPI 2021 equation. Robust renal clearance performance.',\n },\n]\n\nexport function LabResultsViewer({ className }: LabResultsViewerProps) {\n const [activeTab, setActiveTab] = React.useState('all')\n const [searchQuery, setSearchQuery] = React.useState('')\n const [isCopiedShare, setIsCopiedShare] = React.useState(false)\n const [isDownloadingPdf, setIsDownloadingPdf] = React.useState(false)\n\n const filteredTests = React.useMemo(() => {\n return labTests.filter((test) => {\n // Tab filter\n if (activeTab === 'out-of-range' && test.status === 'Normal') return false\n if (activeTab === 'lipid' && test.panel !== 'lipid') return false\n if (activeTab === 'metabolic-renal' && test.panel !== 'metabolic' && test.panel !== 'renal') return false\n\n // Search query filter\n if (searchQuery.trim()) {\n const q = searchQuery.toLowerCase().trim()\n return (\n test.name.toLowerCase().includes(q) ||\n test.loinc.toLowerCase().includes(q) ||\n test.panelLabel.toLowerCase().includes(q)\n )\n }\n\n return true\n })\n }, [activeTab, searchQuery])\n\n const totalNormalCount = labTests.filter((t) => t.status === 'Normal').length\n const totalOutOfRangeCount = labTests.filter((t) => t.status !== 'Normal').length\n\n const handleShare = React.useCallback(() => {\n if (typeof navigator !== 'undefined' && navigator.clipboard) {\n navigator.clipboard.writeText(\n `Lab Results for ${patientInfo.name} (${patientInfo.accession}) - ${patientInfo.collectedDate}`,\n )\n setIsCopiedShare(true)\n setTimeout(() => {\n setIsCopiedShare(false)\n }, 2000)\n }\n }, [])\n\n const handleDownloadPdf = React.useCallback(() => {\n setIsDownloadingPdf(true)\n setTimeout(() => {\n setIsDownloadingPdf(false)\n }, 1500)\n }, [])\n\n const handlePrint = React.useCallback(() => {\n if (typeof window !== 'undefined') {\n window.print()\n }\n }, [])\n\n return (\n
\n {/* Header: Diagnostic Pathology Report */}\n \n \n
\n
\n
\n \n \n {patientInfo.accession}\n \n \n \n Final Diagnostic Report\n \n
\n \n Comprehensive Metabolic Panel & Lipid Panel\n \n \n Clinical chemistry and lipid risk profiling conducted by {patientInfo.facility}\n \n
\n\n {/* Quick Action Buttons */}\n
\n \n \n {isDownloadingPdf ? 'Generating PDF...' : 'Download Official PDF'}\n \n \n
\n
\n \n\n \n \n\n {/* Patient & Order Metadata Grid */}\n
\n
\n
Patient Details
\n
{patientInfo.name}
\n

\n {patientInfo.sex} · {patientInfo.dob}\n

\n
\n\n
\n
Ordering Physician
\n
{patientInfo.orderedBy}
\n

Internal Medicine & Cardiology

\n
\n\n
\n
Collection & Fasting
\n
\n {patientInfo.collectedDate}\n
\n

{patientInfo.fasting}

\n
\n\n
\n
Testing Facility
\n
{patientInfo.facility}
\n

CLIA ID: 31D0691234 · CAP Accredited

\n
\n
\n \n \n\n {/* Overall Summary Banner */}\n
\n
\n
\n \n
\n
\n
\n

\n 14 tests normal · 2 tests out of reference range\n

\n \n Clinical Review Advised\n \n
\n

\n Total Cholesterol and LDL Cholesterol exceed recommended reference thresholds. Fasting glucose metabolism\n and renal function (eGFR) remain optimal.\n

\n
\n
\n\n {/* Quick Statistical Count Badges */}\n
\n
\n \n In Range:\n 14\n
\n
\n \n Out of Range:\n 2\n
\n
\n
\n\n {/* Interactive Filtering & Search Header */}\n
\n \n \n \n All ({labTests.length})\n \n \n Out of Range ({totalOutOfRangeCount})\n \n \n Lipid (4)\n \n \n Metabolic & Renal (2)\n \n \n \n\n {/* Test Search Filter Input */}\n
\n \n setSearchQuery(e.target.value)}\n type=\"text\"\n placeholder=\"Filter tests or LOINC...\"\n className=\"border-border bg-background text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 h-8.5 w-full rounded-lg border pr-3 pl-9 text-xs transition-colors focus-visible:ring-[3px] focus-visible:outline-none\"\n />\n
\n
\n\n {/* Diagnostic Panels & Test Results Table */}\n \n \n
\n
\n Laboratory Test Panels\n \n Quantitative measurements, standard LOINC reference intervals, and 6-month historical trend comparison.\n \n
\n \n
\n \n\n \n
\n \n \n \n Test Name & Code\n Measured Value\n Flag\n Reference Range\n Visual Scale\n \n Historical 6-Mo Delta\n \n \n \n \n {filteredTests.map((test) => (\n \n {/* Test Name & LOINC */}\n \n
\n

{test.name}

\n
\n LOINC: {test.loinc}\n {test.panelLabel}\n
\n
\n \n\n {/* Measured Result */}\n \n
\n \n {test.value}\n \n {test.unit}\n
\n \n\n {/* Status Flag Badge */}\n \n \n {test.status}\n \n \n\n {/* Reference Range */}\n \n \n {test.referenceRangeText}\n \n \n\n {/* Visual Reference Range Bar with Patient Needle Marker */}\n \n
\n
\n {/* Normal Safe Zone (Green Region) */}\n \n\n {/* Patient Value Marker Pin */}\n \n \n
\n
\n\n {/* Min, Target, and Max Scale Labels */}\n
\n {test.scaleMin}\n Normal\n {test.scaleMax}\n
\n \n \n\n {/* Historical 6-Mo Trend Delta */}\n \n
\n
\n {test.trendDirection === 'up' ? (\n \n ) : (\n \n )}\n \n {test.trendDelta}\n \n
\n Prior: {test.priorValue} \n
\n \n \n ))}\n\n {filteredTests.length === 0 && (\n \n \n

\n No laboratory test records matched your filter criteria.\n

\n \n \n )}\n \n
\n
\n \n \n\n {/* Doctor's Clinical Impression Card */}\n \n \n
\n
\n
\n \n
\n
\n Doctor's Clinical Impression & Action Plan\n \n Physician interpretation provided by {patientInfo.orderedBy}\n \n
\n
\n\n \n \n Verified Electronic Signature\n \n
\n \n\n \n {/* Physician Qualitative Commentary */}\n
\n

\n “Lipid panel shows mild elevation in LDL Cholesterol (138 mg/dL) and Total Cholesterol (215 mg/dL).\n Fasting blood glucose (92 mg/dL) and renal filtration markers (eGFR 104 mL/min/1.73m²) demonstrate\n outstanding stability. Recommend continuing Mediterranean dietary pattern with emphasis on soluble fiber\n and healthy monounsaturated fats, 150 minutes of moderate aerobic exercise weekly, and repeat lipid panel\n in 3 months. Statin therapy is not warranted at the patient's current 10-year ASCVD risk threshold.”\n

\n
\n\n {/* Clinical Action Checklist */}\n
\n \n Recommended Clinical Action Items\n \n
\n
\n \n
\n

Repeat Lipid Panel

\n

Schedule re-test in 90 days (Nov 2026)

\n
\n
\n\n
\n \n
\n

Mediterranean Diet

\n

Maintain high fiber and plant sterols intake

\n
\n
\n\n
\n \n
\n

Cardiovascular Wellness

\n

150 mins weekly moderate aerobic activity

\n
\n
\n
\n
\n\n {/* Physician Signature Footer Strip */}\n \n
\n
\n
\n MT\n
\n
\n

{patientInfo.orderedBy}

\n

NPI #1849204812 · Medical License #20MD084721

\n
\n
\n\n

\n Digitally signed on Aug 18, 2026 · 15:45 EDT\n

\n
\n \n \n\n {/* Lab Facility Certification Footer */}\n
\n
\n \n {patientInfo.facilityAddress}\n
\n
\n Specimen: {patientInfo.specimen}\n ·\n CLIA Certified\n
\n
\n
\n )\n}\n", "type": "registry:block", "target": "~/components/blocks/LabResultsViewer.tsx" } ], "dependencies": [ "lucide-react" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/react/badge.json", "https://uipkge.dev/r/react/button.json", "https://uipkge.dev/r/react/card.json", "https://uipkge.dev/r/react/separator.json", "https://uipkge.dev/r/react/table.json", "https://uipkge.dev/r/react/tabs.json" ], "description": "Quest and Labcorp style diagnostic lab results report viewer: patient metadata header, clinical attention banner, grouped test panels (Lipid, Glucose, Renal) with LOINC codes, reference range linear scale bars, historical 6-month trend deltas, and doctor clinical impression card with electronic verification.", "categories": [ "healthcare", "app" ] }