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.
Also available for React ->$pnpm dlx shadcn-vue@latest add https://uipkge.dev/r/vue/lab-results-viewer.json$npx shadcn-vue@latest add https://uipkge.dev/r/vue/lab-results-viewer.json$yarn dlx shadcn-vue@latest add https://uipkge.dev/r/vue/lab-results-viewer.json$bunx shadcn-vue@latest add https://uipkge.dev/r/vue/lab-results-viewer.jsonnpx shadcn-vue@latest add @uipkge/lab-results-viewerInstalls to:app/components/blocks/| Name | Type / Values | Default | Required |
|---|---|---|---|
class | HTMLAttributes['class'] | — | optional |
Type aliases exported from this item's source. Use these to shape the data you pass in.
LabTestinterface LabTest {
id: string
name: string
panel: 'lipid' | 'metabolic' | 'renal'
panelLabel: string
loinc: string
value: number
unit: string
referenceRangeText: string
status: TestStatus
scaleMin: number
scaleMax: number
normalMin: number
normalMax: number
markerPercent: number
rangeZoneLeft: number
rangeZoneWidth: number
trendDelta: string
trendDirection: 'up' | 'down' | 'flat'
trendStatus: 'warning' | 'success' | 'neutral'
priorValue: string
clinicalNote: string
}<script setup lang="ts">
import { computed, ref } from 'vue'
import type { HTMLAttributes } from 'vue'
import {
AlertTriangle,
CheckCircle2,
FileCheck2,
FileDown,
FlaskConical,
MapPin,
Printer,
Search,
Share2,
ShieldCheck,
Stethoscope,
TrendingDown,
TrendingUp,
} from 'lucide-vue-next'
import { cn } from '@/lib/utils'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Separator } from '@/components/ui/separator'
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs'
interface Props {
class?: HTMLAttributes['class']
}
const props = defineProps<Props>()
export type TestStatus = 'Normal' | 'High' | 'Low'
export interface LabTest {
id: string
name: string
panel: 'lipid' | 'metabolic' | 'renal'
panelLabel: string
loinc: string
value: number
unit: string
referenceRangeText: string
status: TestStatus
scaleMin: number
scaleMax: number
normalMin: number
normalMax: number
markerPercent: number
rangeZoneLeft: number
rangeZoneWidth: number
trendDelta: string
trendDirection: 'up' | 'down' | 'flat'
trendStatus: 'warning' | 'success' | 'neutral'
priorValue: string
clinicalNote: string
}
const patientInfo = {
name: 'Sarah Jenkins',
mrn: 'MRN-9482104',
dob: 'Apr 12, 1984 (Age 42)',
sex: 'Female',
fasting: 'Fasting (12 hours)',
accession: 'Q-94827104',
orderedBy: 'Dr. Marcus Thorne, MD, FACP',
facility: 'Quest Diagnostics Central Lab #842',
facilityAddress: '100 Clifton Blvd, Clifton, NJ 07012 (CLIA: 31D0691234)',
collectedDate: 'Aug 18, 2026 · 08:30 AM EDT',
reportedDate: 'Aug 18, 2026 · 02:45 PM EDT',
specimen: 'Serum & Plasma (Gold SST / Lavender EDTA)',
}
const labTests: LabTest[] = [
{
id: 'chol-total',
name: 'Total Cholesterol',
panel: 'lipid',
panelLabel: 'Lipid Panel (Cardiovascular Risk)',
loinc: '2093-3',
value: 215,
unit: 'mg/dL',
referenceRangeText: '< 200 mg/dL',
status: 'High',
scaleMin: 100,
scaleMax: 300,
normalMin: 100,
normalMax: 200,
markerPercent: 57.5,
rangeZoneLeft: 0,
rangeZoneWidth: 50,
trendDelta: '+12 mg/dL vs 6 mos ago',
trendDirection: 'up',
trendStatus: 'warning',
priorValue: '203 mg/dL (Feb 2026)',
clinicalNote: 'Mild elevation. Suggests elevated total circulating atherogenic lipoprotein particles.',
},
{
id: 'chol-ldl',
name: 'LDL Cholesterol (Calculated)',
panel: 'lipid',
panelLabel: 'Lipid Panel (Cardiovascular Risk)',
loinc: '13457-7',
value: 138,
unit: 'mg/dL',
referenceRangeText: '< 100 mg/dL',
status: 'High',
scaleMin: 50,
scaleMax: 200,
normalMin: 50,
normalMax: 100,
markerPercent: 58.7,
rangeZoneLeft: 0,
rangeZoneWidth: 33.3,
trendDelta: '+18 mg/dL vs 6 mos ago',
trendDirection: 'up',
trendStatus: 'warning',
priorValue: '120 mg/dL (Feb 2026)',
clinicalNote: 'Above primary prevention target (< 100 mg/dL). Lifestyle modifications indicated.',
},
{
id: 'chol-hdl',
name: 'HDL Cholesterol',
panel: 'lipid',
panelLabel: 'Lipid Panel (Cardiovascular Risk)',
loinc: '2085-9',
value: 58,
unit: 'mg/dL',
referenceRangeText: '≥ 50 mg/dL',
status: 'Normal',
scaleMin: 20,
scaleMax: 100,
normalMin: 50,
normalMax: 100,
markerPercent: 47.5,
rangeZoneLeft: 37.5,
rangeZoneWidth: 62.5,
trendDelta: '+2 mg/dL vs 6 mos ago',
trendDirection: 'up',
trendStatus: 'success',
priorValue: '56 mg/dL (Feb 2026)',
clinicalNote: 'Desirable cardio-protective level for adult female population.',
},
{
id: 'triglycerides',
name: 'Triglycerides',
panel: 'lipid',
panelLabel: 'Lipid Panel (Cardiovascular Risk)',
loinc: '2571-8',
value: 142,
unit: 'mg/dL',
referenceRangeText: '< 150 mg/dL',
status: 'Normal',
scaleMin: 50,
scaleMax: 250,
normalMin: 50,
normalMax: 150,
markerPercent: 46.0,
rangeZoneLeft: 0,
rangeZoneWidth: 50,
trendDelta: '-15 mg/dL vs 6 mos ago',
trendDirection: 'down',
trendStatus: 'success',
priorValue: '157 mg/dL (Feb 2026)',
clinicalNote: 'Improved from borderline threshold into normal reference zone.',
},
{
id: 'glucose-fasting',
name: 'Fasting Glucose',
panel: 'metabolic',
panelLabel: 'Glucose Metabolism & Glycemic Control',
loinc: '1558-6',
value: 92,
unit: 'mg/dL',
referenceRangeText: '70 – 99 mg/dL',
status: 'Normal',
scaleMin: 50,
scaleMax: 150,
normalMin: 70,
normalMax: 99,
markerPercent: 42.0,
rangeZoneLeft: 20,
rangeZoneWidth: 29,
trendDelta: '-3 mg/dL vs 6 mos ago',
trendDirection: 'down',
trendStatus: 'success',
priorValue: '95 mg/dL (Feb 2026)',
clinicalNote: 'Normal euglycemic fasting state. No prediabetes indicators.',
},
{
id: 'egfr-renal',
name: 'eGFR (Kidney Function)',
panel: 'renal',
panelLabel: 'Renal Function & Filtration',
loinc: '33914-3',
value: 104,
unit: 'mL/min/1.73m²',
referenceRangeText: '≥ 60 mL/min/1.73m²',
status: 'Normal',
scaleMin: 30,
scaleMax: 130,
normalMin: 60,
normalMax: 130,
markerPercent: 74.0,
rangeZoneLeft: 30,
rangeZoneWidth: 70,
trendDelta: '+1 mL/min vs 6 mos ago',
trendDirection: 'up',
trendStatus: 'success',
priorValue: '103 mL/min (Feb 2026)',
clinicalNote: 'Calculated using CKD-EPI 2021 equation. Robust renal clearance performance.',
},
]
const activeTab = ref<string>('all')
const searchQuery = ref<string>('')
const isCopiedShare = ref(false)
const isDownloadingPdf = ref(false)
const filteredTests = computed(() => {
return labTests.filter((test) => {
// Tab filter
if (activeTab.value === 'out-of-range' && test.status === 'Normal') return false
if (activeTab.value === 'lipid' && test.panel !== 'lipid') return false
if (activeTab.value === 'metabolic-renal' && test.panel !== 'metabolic' && test.panel !== 'renal') return false
// Search query filter
if (searchQuery.value.trim()) {
const q = searchQuery.value.toLowerCase().trim()
return (
test.name.toLowerCase().includes(q) ||
test.loinc.toLowerCase().includes(q) ||
test.panelLabel.toLowerCase().includes(q)
)
}
return true
})
})
const totalNormalCount = labTests.filter((t) => t.status === 'Normal').length
const totalOutOfRangeCount = labTests.filter((t) => t.status !== 'Normal').length
function handleShare() {
if (typeof navigator !== 'undefined' && navigator.clipboard) {
navigator.clipboard.writeText(
`Lab Results for ${patientInfo.name} (${patientInfo.accession}) - ${patientInfo.collectedDate}`,
)
isCopiedShare.value = true
setTimeout(() => {
isCopiedShare.value = false
}, 2000)
}
}
function handleDownloadPdf() {
isDownloadingPdf.value = true
setTimeout(() => {
isDownloadingPdf.value = false
}, 1500)
}
function handlePrint() {
if (typeof window !== 'undefined') {
window.print()
}
}
</script>
<template>
<div data-slot="lab-results-viewer" :class="cn('text-foreground w-full space-y-6', props.class)">
<!-- Header: Diagnostic Pathology Report -->
<Card class="border-border bg-card shadow-xs">
<CardHeader class="p-5 pb-4 sm:p-6 sm:pb-4">
<div class="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
<div class="space-y-1.5">
<div class="flex flex-wrap items-center gap-2">
<Badge variant="outline" class="gap-1.5 font-mono text-xs">
<FlaskConical class="text-primary size-3.5" />
{{ patientInfo.accession }}
</Badge>
<Badge variant="success" class="gap-1 text-xs">
<FileCheck2 class="size-3" />
Final Diagnostic Report
</Badge>
</div>
<CardTitle class="text-foreground text-xl font-semibold tracking-tight sm:text-2xl">
Comprehensive Metabolic Panel & Lipid Panel
</CardTitle>
<CardDescription class="text-muted-foreground text-xs sm:text-sm">
Clinical chemistry and lipid risk profiling conducted by {{ patientInfo.facility }}
</CardDescription>
</div>
<!-- Quick Action Buttons -->
<div class="flex flex-wrap items-center gap-2 pt-1 lg:pt-0">
<Button
aria-label="Download attachment"
variant="outline"
size="sm"
class="gap-1.5 text-xs shadow-xs"
:disabled="isDownloadingPdf"
@click="handleDownloadPdf"
>
<FileDown class="size-4" />
{{ isDownloadingPdf ? 'Generating PDF...' : 'Download Official PDF' }}
</Button>
<Button variant="outline" size="sm" class="gap-1.5 text-xs shadow-xs" @click="handleShare">
<Share2 class="size-4" />
{{ isCopiedShare ? 'Link Copied!' : 'Share with Doctor' }}
</Button>
<Button
variant="ghost"
size="sm"
class="text-muted-foreground hover:text-foreground hidden sm:inline-flex"
@click="handlePrint"
>
<Printer class="size-4" />
<span class="sr-only">Print Report</span>
</Button>
</div>
</div>
</CardHeader>
<CardContent class="p-5 pt-0 sm:p-6 sm:pt-0">
<Separator class="mb-4" />
<!-- Patient & Order Metadata Grid -->
<dl class="grid grid-cols-1 gap-x-6 gap-y-3 sm:grid-cols-2 lg:grid-cols-4">
<div class="space-y-0.5">
<dt class="text-muted-foreground text-xs font-medium">Patient Details</dt>
<dd class="text-foreground text-xs font-semibold sm:text-sm">{{ patientInfo.name }}</dd>
<p class="text-muted-foreground text-xs">{{ patientInfo.sex }} · {{ patientInfo.dob }}</p>
</div>
<div class="space-y-0.5">
<dt class="text-muted-foreground text-xs font-medium">Ordering Physician</dt>
<dd class="text-foreground text-xs font-semibold sm:text-sm">{{ patientInfo.orderedBy }}</dd>
<p class="text-muted-foreground text-xs">Internal Medicine & Cardiology</p>
</div>
<div class="space-y-0.5">
<dt class="text-muted-foreground text-xs font-medium">Collection & Fasting</dt>
<dd class="text-foreground text-xs font-semibold tabular-nums sm:text-sm">
{{ patientInfo.collectedDate }}
</dd>
<p class="text-muted-foreground text-xs">{{ patientInfo.fasting }}</p>
</div>
<div class="space-y-0.5">
<dt class="text-muted-foreground text-xs font-medium">Testing Facility</dt>
<dd class="text-foreground text-xs font-semibold sm:text-sm">{{ patientInfo.facility }}</dd>
<p class="text-muted-foreground text-xs">CLIA ID: 31D0691234 · CAP Accredited</p>
</div>
</dl>
</CardContent>
</Card>
<!-- Overall Summary Banner -->
<div
class="border-warning/30 bg-warning/10 text-foreground flex flex-col gap-4 rounded-xl border p-4 sm:flex-row sm:items-center sm:justify-between sm:p-5"
>
<div class="flex items-start gap-3.5">
<div
class="border-warning/30 bg-warning/20 text-warning mt-0.5 flex size-9 shrink-0 items-center justify-center rounded-lg border"
>
<AlertTriangle class="size-5" />
</div>
<div class="space-y-1">
<div class="flex flex-wrap items-center gap-2">
<h3 class="text-foreground text-sm font-semibold sm:text-base">
14 tests normal · 2 tests out of reference range
</h3>
<Badge variant="warning" class="text-xs font-medium">Clinical Review Advised</Badge>
</div>
<p class="text-muted-foreground text-xs leading-relaxed sm:text-sm">
Total Cholesterol and LDL Cholesterol exceed recommended reference thresholds. Fasting glucose metabolism
and renal function (eGFR) remain optimal.
</p>
</div>
</div>
<!-- Quick Statistical Count Badges -->
<div class="flex shrink-0 flex-wrap items-center gap-2 sm:self-center">
<div class="border-border bg-card/90 flex items-center gap-2 rounded-lg border px-3 py-1.5 text-xs shadow-2xs">
<span class="bg-success size-2 rounded-full" />
<span class="text-muted-foreground font-medium">In Range:</span>
<span class="text-foreground font-semibold tabular-nums">14</span>
</div>
<div class="border-border bg-card/90 flex items-center gap-2 rounded-lg border px-3 py-1.5 text-xs shadow-2xs">
<span class="bg-warning size-2 rounded-full" />
<span class="text-muted-foreground font-medium">Out of Range:</span>
<span class="text-warning font-semibold tabular-nums">2</span>
</div>
</div>
</div>
<!-- Interactive Filtering & Search Header -->
<div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
<Tabs v-model="activeTab" class="w-full sm:w-auto">
<TabsList class="grid grid-cols-4 sm:inline-flex">
<TabsTrigger value="all" class="text-xs font-medium"> All ({{ labTests.length }}) </TabsTrigger>
<TabsTrigger value="out-of-range" class="text-xs font-medium">
Out of Range ({{ totalOutOfRangeCount }})
</TabsTrigger>
<TabsTrigger value="lipid" class="text-xs font-medium"> Lipid (4) </TabsTrigger>
<TabsTrigger value="metabolic-renal" class="text-xs font-medium"> Metabolic & Renal (2) </TabsTrigger>
</TabsList>
</Tabs>
<!-- Test Search Filter Input -->
<div class="relative w-full sm:w-64">
<Search class="text-muted-foreground absolute top-1/2 left-3 size-3.5 -translate-y-1/2" />
<input
v-model="searchQuery"
type="text"
placeholder="Filter tests or LOINC..."
class="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"
/>
</div>
</div>
<!-- Diagnostic Panels & Test Results Table -->
<Card class="border-border bg-card shadow-xs">
<CardHeader class="border-border border-b p-4 sm:px-6">
<div class="flex items-center justify-between">
<div>
<CardTitle class="text-base font-semibold">Laboratory Test Panels</CardTitle>
<CardDescription class="text-xs">
Quantitative measurements, standard LOINC reference intervals, and 6-month historical trend comparison.
</CardDescription>
</div>
<span class="text-muted-foreground hidden font-mono text-xs tabular-nums sm:inline-block">
Showing {{ filteredTests.length }} of {{ labTests.length }} tests
</span>
</div>
</CardHeader>
<CardContent class="p-0">
<div class="overflow-x-auto">
<Table>
<TableHeader class="bg-muted/40">
<TableRow>
<TableHead class="min-w-[180px] text-xs font-semibold">Test Name & Code</TableHead>
<TableHead class="min-w-[120px] text-xs font-semibold">Measured Value</TableHead>
<TableHead class="w-24 text-xs font-semibold">Flag</TableHead>
<TableHead class="min-w-[120px] text-xs font-semibold">Reference Range</TableHead>
<TableHead class="min-w-[210px] text-xs font-semibold">Visual Scale</TableHead>
<TableHead class="min-w-[170px] text-right text-xs font-semibold">Historical 6-Mo Delta</TableHead>
</TableRow>
</TableHeader>
<TableBody>
<TableRow
v-for="test in filteredTests"
:key="test.id"
:class="cn('transition-colors', test.status === 'High' && 'bg-warning/5 hover:bg-warning/10')"
>
<!-- Test Name & LOINC -->
<TableCell class="py-3.5">
<div class="space-y-0.5">
<p class="text-foreground text-xs font-semibold sm:text-sm">{{ test.name }}</p>
<div class="flex items-center gap-1.5">
<span class="text-muted-foreground font-mono text-xs">LOINC: {{ test.loinc }}</span>
<span class="text-muted-foreground text-xs">{{ test.panelLabel }}</span>
</div>
</div>
</TableCell>
<!-- Measured Result -->
<TableCell class="py-3.5">
<div class="flex items-baseline gap-1">
<span
:class="
cn(
'text-base font-semibold tabular-nums sm:text-lg',
test.status === 'High' && 'text-warning font-semibold',
test.status === 'Normal' && 'text-foreground',
)
"
>
{{ test.value }}
</span>
<span class="text-muted-foreground text-xs font-medium">{{ test.unit }}</span>
</div>
</TableCell>
<!-- Status Flag Badge -->
<TableCell class="py-3.5">
<Badge
:variant="test.status === 'High' ? 'warning' : 'success'"
class="px-2 py-0.5 text-xs font-semibold"
>
{{ test.status }}
</Badge>
</TableCell>
<!-- Reference Range -->
<TableCell class="py-3.5">
<span class="text-foreground font-mono text-xs font-medium tabular-nums">
{{ test.referenceRangeText }}
</span>
</TableCell>
<!-- Visual Reference Range Bar with Patient Needle Marker -->
<TableCell class="py-3.5">
<div class="w-full max-w-[210px] space-y-1">
<div class="bg-muted/80 relative flex h-2.5 w-full items-center overflow-visible rounded-full">
<!-- Normal Safe Zone (Green Region) -->
<div
class="border-success/40 bg-success/25 absolute h-full rounded-full border-x"
:style="{
left: `${test.rangeZoneLeft}%`,
width: `${test.rangeZoneWidth}%`,
}"
/>
<!-- Patient Value Marker Pin -->
<div
class="absolute flex -translate-x-1/2 flex-col items-center"
:style="{ left: `${test.markerPercent}%` }"
>
<span
:class="
cn(
'border-background size-3.5 rounded-full border-2 shadow-xs transition-transform hover:scale-125',
test.status === 'High' && 'bg-warning ring-warning/30 ring-2',
test.status === 'Normal' && 'bg-success ring-success/30 ring-2',
test.status === 'Low' && 'bg-info ring-info/30 ring-2',
)
"
/>
</div>
</div>
<!-- Min, Target, and Max Scale Labels -->
<div class="text-muted-foreground flex items-center justify-between font-mono text-xs tabular-nums">
<span>{{ test.scaleMin }}</span>
<span class="text-success text-xs font-medium">Normal</span>
<span>{{ test.scaleMax }}</span>
</div>
</div>
</TableCell>
<!-- Historical 6-Mo Trend Delta -->
<TableCell class="py-3.5 text-right">
<div class="flex flex-col items-end gap-0.5">
<div class="flex items-center gap-1">
<component
:is="test.trendDirection === 'up' ? TrendingUp : TrendingDown"
:class="
cn(
'size-3.5',
test.trendStatus === 'warning' && 'text-warning',
test.trendStatus === 'success' && 'text-success',
)
"
/>
<span
:class="
cn(
'text-xs font-semibold tabular-nums',
test.trendStatus === 'warning' && 'text-warning',
test.trendStatus === 'success' && 'text-foreground',
)
"
>
{{ test.trendDelta }}
</span>
</div>
<span class="text-muted-foreground text-xs tabular-nums"> Prior: {{ test.priorValue }} </span>
</div>
</TableCell>
</TableRow>
<TableRow v-if="filteredTests.length === 0">
<TableCell colspan="6" class="py-8 text-center">
<p class="text-muted-foreground text-xs">No laboratory test records matched your filter criteria.</p>
</TableCell>
</TableRow>
</TableBody>
</Table>
</div>
</CardContent>
</Card>
<!-- Doctor's Clinical Impression Card -->
<Card class="border-border bg-card shadow-xs">
<CardHeader class="p-5 pb-3 sm:p-6 sm:pb-4">
<div class="flex flex-wrap items-center justify-between gap-3">
<div class="flex items-center gap-2.5">
<div class="bg-primary/10 text-primary flex size-8 items-center justify-center rounded-lg">
<Stethoscope class="size-4" />
</div>
<div>
<CardTitle class="text-base font-semibold">Doctor's Clinical Impression & Action Plan</CardTitle>
<CardDescription class="text-xs">
Physician interpretation provided by {{ patientInfo.orderedBy }}
</CardDescription>
</div>
</div>
<Badge variant="outline" class="gap-1.5 text-xs font-normal">
<ShieldCheck class="text-success size-3.5" />
Verified Electronic Signature
</Badge>
</div>
</CardHeader>
<CardContent class="space-y-4 p-5 pt-0 sm:p-6 sm:pt-0">
<!-- Physician Qualitative Commentary -->
<div class="border-border/70 bg-muted/30 rounded-lg border p-4">
<p class="text-foreground text-xs leading-relaxed sm:text-sm">
“Lipid panel shows mild elevation in LDL Cholesterol (138 mg/dL) and Total Cholesterol (215 mg/dL). Fasting
blood glucose (92 mg/dL) and renal filtration markers (eGFR 104 mL/min/1.73m²) demonstrate outstanding
stability. Recommend continuing Mediterranean dietary pattern with emphasis on soluble fiber and healthy
monounsaturated fats, 150 minutes of moderate aerobic exercise weekly, and repeat lipid panel in 3 months.
Statin therapy is not warranted at the patient's current 10-year ASCVD risk threshold.”
</p>
</div>
<!-- Clinical Action Checklist -->
<div class="space-y-2">
<span class="text-muted-foreground text-xs font-medium tracking-wide uppercase">
Recommended Clinical Action Items
</span>
<div class="grid grid-cols-1 gap-2.5 sm:grid-cols-3">
<div class="border-border bg-card flex items-start gap-2.5 rounded-lg border p-3">
<CheckCircle2 class="text-primary mt-0.5 size-4 shrink-0" />
<div class="space-y-0.5">
<p class="text-foreground text-xs font-medium">Repeat Lipid Panel</p>
<p class="text-muted-foreground text-xs">Schedule re-test in 90 days (Nov 2026)</p>
</div>
</div>
<div class="border-border bg-card flex items-start gap-2.5 rounded-lg border p-3">
<CheckCircle2 class="text-primary mt-0.5 size-4 shrink-0" />
<div class="space-y-0.5">
<p class="text-foreground text-xs font-medium">Mediterranean Diet</p>
<p class="text-muted-foreground text-xs">Maintain high fiber and plant sterols intake</p>
</div>
</div>
<div class="border-border bg-card flex items-start gap-2.5 rounded-lg border p-3">
<CheckCircle2 class="text-primary mt-0.5 size-4 shrink-0" />
<div class="space-y-0.5">
<p class="text-foreground text-xs font-medium">Cardiovascular Wellness</p>
<p class="text-muted-foreground text-xs">150 mins weekly moderate aerobic activity</p>
</div>
</div>
</div>
</div>
<!-- Physician Signature Footer Strip -->
<Separator />
<div class="flex flex-col gap-2 pt-1 sm:flex-row sm:items-center sm:justify-between">
<div class="flex items-center gap-2">
<div
class="border-border bg-muted flex size-7 shrink-0 items-center justify-center rounded-full border text-xs font-semibold"
>
MT
</div>
<div>
<p class="text-foreground text-xs font-semibold">{{ patientInfo.orderedBy }}</p>
<p class="text-muted-foreground text-xs">NPI #1849204812 · Medical License #20MD084721</p>
</div>
</div>
<p class="text-muted-foreground font-mono text-xs tabular-nums">
Digitally signed on Aug 18, 2026 · 15:45 EDT
</p>
</div>
</CardContent>
</Card>
<!-- Lab Facility Certification Footer -->
<div
class="border-border/60 text-muted-foreground flex flex-col gap-2 rounded-lg border border-dashed px-4 py-3 text-xs sm:flex-row sm:items-center sm:justify-between"
>
<div class="flex items-center gap-1.5">
<MapPin class="size-3.5 shrink-0" />
<span>{{ patientInfo.facilityAddress }}</span>
</div>
<div class="flex items-center gap-2 font-mono text-xs">
<span>Specimen: {{ patientInfo.specimen }}</span>
<span>·</span>
<span>CLIA Certified</span>
</div>
</div>
</div>
</template>
Raw manifest:https://uipkge.dev/r/vue/lab-results-viewer.json
