Immunization History

Installation

Variants

Props

Schema

Type aliases exported from this item's source. Use these to shape the data you pass in.

interface VaccineRecord {
  id: string
  vaccineName: string
  formulation: string
  cvxCode: string
  ndcCode?: string
  doseSequence: string
  doseBadgeVariant: 'default' | 'secondary' | 'outline'
  administeredDate: string
  manufacturer: string
  lotNumber: string
  facility: string
  provider: string
  nextDueDate: string
  statusType: 'valid' | 'permanent' | 'booster-due'
  statusLabel: string
}

interface ProtectionSummary {
  disease: string
  status: string
  doseLabel: string
  lastAdministered: string
  badgeVariant: 'success' | 'secondary' | 'outline'
  badgeText: string
}

Files installed (1)

• components/blocks/ImmunizationHistory.tsx27 kB

  Copy

  'use client'
  
  import type { HTMLAttributes } from 'react'
  import {
    AlertCircle,
    Building2,
    Calendar,
    Check,
    CheckCircle2,
    Download,
    ExternalLink,
    FileCheck,
    Globe,
    Lock,
    Plane,
    QrCode,
    ShieldCheck,
    Syringe,
  } from 'lucide-react'
  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 { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
  
  export interface ImmunizationHistoryProps extends HTMLAttributes<HTMLDivElement> {}
  
  interface VaccineRecord {
    id: string
    vaccineName: string
    formulation: string
    cvxCode: string
    ndcCode?: string
    doseSequence: string
    doseBadgeVariant: 'default' | 'secondary' | 'outline'
    administeredDate: string
    manufacturer: string
    lotNumber: string
    facility: string
    provider: string
    nextDueDate: string
    statusType: 'valid' | 'permanent' | 'booster-due'
    statusLabel: string
  }
  
  interface ProtectionSummary {
    disease: string
    status: string
    doseLabel: string
    lastAdministered: string
    badgeVariant: 'success' | 'secondary' | 'outline'
    badgeText: string
  }
  
  const patientProfile = {
    name: 'Elena Rostova',
    dob: '1994-06-12',
    age: 32,
    gender: 'Female',
    mrn: 'IMM-9406-821',
    jurisdiction: 'State of California (CAIR2 Registry)',
    complianceStatus: 'Fully Immunized · Meets School & Travel Mandates',
    shcIssuer: 'California Department of Public Health (CDPH)',
    shcKeyId: 'CDPH-SMART-2025-V3',
    shcSignature: 'ECDSA P-256 (SHA-256)',
    jwsFragment: 'shc:/5676290952432060346029243740436037704054664037593670346029243740436037704054664037593670',
  }
  
  const protectionSummaries: ProtectionSummary[] = [
    {
      disease: 'COVID-19',
      status: 'Active Protection',
      doseLabel: 'Updated Booster (2025/2026)',
      lastAdministered: 'Oct 12, 2025',
      badgeVariant: 'success',
      badgeText: 'Verified Active',
    },
    {
      disease: 'Influenza',
      status: 'Seasonal Protection',
      doseLabel: 'Quadrivalent (2025/2026)',
      lastAdministered: 'Sep 28, 2025',
      badgeVariant: 'success',
      badgeText: 'Valid thru Sep 2026',
    },
    {
      disease: 'Tdap',
      status: 'Active (10-Yr Cycle)',
      doseLabel: 'Tetanus, Diphtheria, Pertussis',
      lastAdministered: 'Jun 14, 2022',
      badgeVariant: 'secondary',
      badgeText: 'Valid thru 2032',
    },
    {
      disease: 'MMR',
      status: 'Immune Protection',
      doseLabel: 'Complete 2-Dose Series',
      lastAdministered: 'Aug 22, 2010',
      badgeVariant: 'success',
      badgeText: 'Lifelong Immunity',
    },
  ]
  
  const vaccineRecords: VaccineRecord[] = [
    {
      id: 'rec-1',
      vaccineName: 'COVID-19 mRNA (Pfizer-BioNTech Bivalent)',
      formulation: 'Spikevike mRNA bivalent lineage booster',
      cvxCode: 'CVX 229',
      ndcCode: 'NDC 59267-1000-02',
      doseSequence: 'Dose 3 of 3',
      doseBadgeVariant: 'outline',
      administeredDate: 'Oct 12, 2025',
      manufacturer: 'Pfizer-BioNTech',
      lotNumber: '#EW0182',
      facility: 'UCLA Health Urgent Care',
      provider: 'Nurse J. Adams, RN',
      nextDueDate: 'October 2026',
      statusType: 'valid',
      statusLabel: 'Annual Booster Due 2026',
    },
    {
      id: 'rec-2',
      vaccineName: 'Influenza Quadrivalent',
      formulation: 'Inactivated influenza split virion',
      cvxCode: 'CVX 158',
      ndcCode: 'NDC 49281-0422-50',
      doseSequence: 'Annual Booster',
      doseBadgeVariant: 'outline',
      administeredDate: 'Sep 28, 2025',
      manufacturer: 'Sanofi Pasteur',
      lotNumber: '#FL8842',
      facility: 'CVS MinuteClinic #4921',
      provider: 'Pharmacist R. Patel, PharmD',
      nextDueDate: 'September 2026',
      statusType: 'valid',
      statusLabel: 'Valid 2025/2026 Season',
    },
    {
      id: 'rec-3',
      vaccineName: 'Tdap (Tetanus, Diphtheria, Pertussis)',
      formulation: 'Adsorbed acellular toxoid formulation',
      cvxCode: 'CVX 115',
      ndcCode: 'NDC 58160-0842-11',
      doseSequence: 'Booster (10-Yr)',
      doseBadgeVariant: 'outline',
      administeredDate: 'Jun 14, 2022',
      manufacturer: 'GlaxoSmithKline',
      lotNumber: '#TD9021',
      facility: 'Cedars-Sinai Primary Care',
      provider: 'Dr. S. Miller, MD',
      nextDueDate: 'June 2032',
      statusType: 'valid',
      statusLabel: 'Valid thru 2032',
    },
    {
      id: 'rec-4',
      vaccineName: 'Hepatitis B (Recombinant)',
      formulation: 'Recombinant HBsAg protein subunit',
      cvxCode: 'CVX 43',
      ndcCode: 'NDC 00006-4995-00',
      doseSequence: 'Dose 3 of 3',
      doseBadgeVariant: 'outline',
      administeredDate: 'Jan 18, 2018',
      manufacturer: 'Merck & Co.',
      lotNumber: '#HB4419',
      facility: 'Kaiser Permanente Sunset',
      provider: 'Nurse K. Chen, RN',
      nextDueDate: 'Lifelong Immunity',
      statusType: 'permanent',
      statusLabel: 'Lifelong Immunity',
    },
    {
      id: 'rec-5',
      vaccineName: 'MMR (Measles, Mumps, Rubella)',
      formulation: 'Live attenuated viral vaccine',
      cvxCode: 'CVX 03',
      ndcCode: 'NDC 00006-4681-00',
      doseSequence: 'Dose 2 of 2',
      doseBadgeVariant: 'outline',
      administeredDate: 'Aug 22, 2010',
      manufacturer: 'Merck & Co.',
      lotNumber: '#MR1083',
      facility: "Stanford Children's Health",
      provider: 'Dr. L. Gomez, MD',
      nextDueDate: 'Lifelong Immunity',
      statusType: 'permanent',
      statusLabel: 'Lifelong Immunity',
    },
  ]
  
  export function ImmunizationHistory({ className, ...props }: ImmunizationHistoryProps) {
    return (
      <div data-slot="immunization-history" className={cn('w-full space-y-6', className)} {...props}>
        {/* Header Section */}
        <header className="bg-card border-border rounded-xl border p-5 shadow-xs sm:p-6">
          <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
            <div className="space-y-1.5">
              <div className="flex flex-wrap items-center gap-2.5">
                <h1 className="text-foreground text-xl font-bold tracking-tight sm:text-2xl">
                  Immunization Record & Vaccine Passport
                </h1>
                <Badge wrap variant="success" className="gap-1.5 px-2.5 py-1 text-xs font-semibold">
                  <span className="bg-success size-1.5 rounded-full" aria-hidden="true" />
                  {patientProfile.complianceStatus}
                </Badge>
              </div>
  
              <div className="text-muted-foreground flex flex-wrap items-center gap-x-3 gap-y-1 text-xs sm:text-sm">
                <span className="text-foreground font-semibold">{patientProfile.name}</span>
                <span>
                  DOB: <strong className="text-foreground font-medium tabular-nums">{patientProfile.dob}</strong> (
                  {patientProfile.age} yrs · {patientProfile.gender})
                </span>
                <span className="font-mono text-xs">MRN: {patientProfile.mrn}</span>
                <span className="text-muted-foreground text-xs">{patientProfile.jurisdiction}</span>
              </div>
            </div>
  
            {/* Action Buttons */}
            <div className="flex flex-wrap items-center gap-2.5">
              <Button variant="outline" size="sm" className="gap-1.5 text-xs font-medium">
                <QrCode className="size-3.5 shrink-0" aria-hidden="true" />
                Share QR Pass
              </Button>
              <Button aria-label="Download attachment" size="sm" className="gap-1.5 text-xs font-medium">
                <Download className="size-3.5 shrink-0" aria-hidden="true" />
                Download Official Record PDF
              </Button>
            </div>
          </div>
        </header>
  
        {/* Digital Health Pass Card: Verifiable SMART® Health Card */}
        <Card className="border-border/90 relative overflow-hidden shadow-xs">
          {/* Security Watermark Background Motif */}
          <div
            className="pointer-events-none absolute -top-10 -right-10 size-72 opacity-[0.03] select-none dark:opacity-[0.05]"
            aria-hidden="true"
          >
            <ShieldCheck className="text-foreground size-full" />
          </div>
  
          <CardHeader className="border-border/60 bg-muted/20 border-b pb-4">
            <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
              <div className="flex items-center gap-3">
                <div className="border-success/30 bg-success/10 text-success text-success flex size-9 shrink-0 items-center justify-center rounded-lg border shadow-2xs">
                  <ShieldCheck className="size-5" aria-hidden="true" />
                </div>
                <div>
                  <div className="flex min-w-0 items-center gap-2">
                    <CardTitle className="text-base font-semibold">SMART® Health Card Verified</CardTitle>
                    <Badge wrap variant="outline" className="font-mono text-xs">
                      W3C Credential
                    </Badge>
                  </div>
                  <CardDescription className="text-xs">
                    Issuer: {patientProfile.shcIssuer} · Signed via {patientProfile.shcKeyId}
                  </CardDescription>
                </div>
              </div>
  
              <div className="flex min-w-0 flex-wrap items-center gap-2">
                <Badge wrap variant="outline" className="gap-1 px-2 py-0.5 font-mono text-xs">
                  <Lock className="text-success size-3" aria-hidden="true" />
                  <span>{patientProfile.shcSignature}</span>
                </Badge>
                <Badge wrap variant="success" className="gap-1 text-xs">
                  <Check className="size-3" aria-hidden="true" />
                  Cryptographically Signed
                </Badge>
              </div>
            </div>
          </CardHeader>
  
          <CardContent className="p-5 sm:p-6">
            <div className="grid grid-cols-1 gap-6 lg:grid-cols-12 lg:items-center">
              {/* QR Code & Digital Signature Verification Container */}
              <div className="bg-muted/40 border-border/70 min-w-0 rounded-xl border p-4 sm:p-5 lg:col-span-5">
                <div className="flex flex-col items-center gap-4 sm:flex-row">
                  {/* Crisp SVG QR Code Placeholder */}
                  <div className="bg-background ring-border/80 relative flex size-36 shrink-0 items-center justify-center rounded-lg p-2.5 shadow-2xs ring-1">
                    <svg
                      viewBox="0 0 120 120"
                      className="text-foreground size-full"
                      fill="currentColor"
                      shapeRendering="crispEdges"
                      aria-label="SMART Health Card Digital QR Pass"
                      role="img"
                    >
                      {/* Finder Pattern: Top-Left */}
                      <rect x="6" y="6" width="30" height="30" rx="3" />
                      <rect x="11" y="11" width="20" height="20" rx="2" className="fill-background" />
                      <rect x="15" y="15" width="12" height="12" rx="1.5" />
  
                      {/* Finder Pattern: Top-Right */}
                      <rect x="84" y="6" width="30" height="30" rx="3" />
                      <rect x="89" y="11" width="20" height="20" rx="2" className="fill-background" />
                      <rect x="93" y="15" width="12" height="12" rx="1.5" />
  
                      {/* Finder Pattern: Bottom-Left */}
                      <rect x="6" y="84" width="30" height="30" rx="3" />
                      <rect x="11" y="89" width="20" height="20" rx="2" className="fill-background" />
                      <rect x="15" y="93" width="12" height="12" rx="1.5" />
  
                      {/* Timing Patterns */}
                      <rect x="42" y="18" width="5" height="5" />
                      <rect x="52" y="18" width="5" height="5" />
                      <rect x="62" y="18" width="5" height="5" />
                      <rect x="72" y="18" width="5" height="5" />
                      <rect x="18" y="42" width="5" height="5" />
                      <rect x="18" y="52" width="5" height="5" />
                      <rect x="18" y="62" width="5" height="5" />
                      <rect x="18" y="72" width="5" height="5" />
  
                      {/* Alignment Pattern: Bottom-Right */}
                      <rect x="86" y="86" width="20" height="20" rx="2" />
                      <rect x="90" y="90" width="12" height="12" rx="1" className="fill-background" />
                      <rect x="93" y="93" width="6" height="6" />
  
                      {/* Data Modules Matrix Grid */}
                      <rect x="42" y="32" width="5" height="5" />
                      <rect x="50" y="32" width="5" height="5" />
                      <rect x="68" y="32" width="5" height="5" />
                      <rect x="76" y="32" width="5" height="5" />
                      <rect x="42" y="42" width="5" height="5" />
                      <rect x="58" y="42" width="5" height="5" />
                      <rect x="68" y="42" width="5" height="5" />
                      <rect x="92" y="42" width="5" height="5" />
                      <rect x="100" y="42" width="5" height="5" />
                      <rect x="32" y="52" width="5" height="5" />
                      <rect x="48" y="52" width="5" height="5" />
                      <rect x="58" y="52" width="5" height="5" />
                      <rect x="78" y="52" width="5" height="5" />
                      <rect x="88" y="52" width="5" height="5" />
                      <rect x="32" y="62" width="5" height="5" />
                      <rect x="42" y="62" width="5" height="5" />
                      <rect x="62" y="62" width="5" height="5" />
                      <rect x="72" y="62" width="5" height="5" />
                      <rect x="102" y="62" width="5" height="5" />
                      <rect x="48" y="72" width="5" height="5" />
                      <rect x="58" y="72" width="5" height="5" />
                      <rect x="82" y="72" width="5" height="5" />
                      <rect x="42" y="82" width="5" height="5" />
                      <rect x="52" y="82" width="5" height="5" />
                      <rect x="62" y="82" width="5" height="5" />
                      <rect x="72" y="82" width="5" height="5" />
                      <rect x="52" y="92" width="5" height="5" />
                      <rect x="68" y="92" width="5" height="5" />
                      <rect x="42" y="102" width="5" height="5" />
                      <rect x="60" y="102" width="5" height="5" />
                      <rect x="74" y="102" width="5" height="5" />
                    </svg>
                  </div>
  
                  {/* Pass Metadata */}
                  <div className="w-full min-w-0 space-y-2 text-center sm:text-left">
                    <div>
                      <h2 className="text-foreground text-sm font-semibold">Offline Verifiable Pass</h2>
                      <p className="text-muted-foreground text-xs">
                        Compatible with Apple Health, Google Wallet, and international border checkpoint verifiers.
                      </p>
                    </div>
                    <div className="border-border/60 bg-background/80 rounded border p-2">
                      <span className="text-muted-foreground block text-xs font-medium">JWS Payload Digest</span>
                      <code className="text-muted-foreground block truncate font-mono text-xs">
                        {patientProfile.jwsFragment}
                      </code>
                    </div>
                    <div className="text-muted-foreground flex items-center justify-center gap-1 text-xs sm:justify-start">
                      <CheckCircle2 className="text-success size-3.5" aria-hidden="true" />
                      <span>Public Key Confirmed Active</span>
                    </div>
                  </div>
                </div>
              </div>
  
              {/* Vaccine Summary Protection Chips */}
              <div className="space-y-3 lg:col-span-7">
                <div className="flex items-center justify-between">
                  <h2 className="text-foreground text-sm font-semibold">Active Health Protections & Key Immunizations</h2>
                  <span className="text-muted-foreground text-xs font-medium">4 Core Mandates Met</span>
                </div>
  
                <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
                  {protectionSummaries.map((chip) => (
                    <div
                      key={chip.disease}
                      className="bg-card border-border/80 hover:border-border flex flex-col justify-between rounded-lg border p-3.5 shadow-2xs transition-colors"
                    >
                      <div className="flex items-start justify-between gap-2">
                        <div className="flex min-w-0 items-center gap-2">
                          <div className="border-success/20 bg-success/10 text-success flex size-7 shrink-0 items-center justify-center rounded-md border">
                            <Syringe className="size-3.5" aria-hidden="true" />
                          </div>
                          <div>
                            <span className="text-foreground text-sm font-semibold">{chip.disease}</span>
                            <p className="text-muted-foreground truncate text-xs">{chip.doseLabel}</p>
                          </div>
                        </div>
                        <Badge wrap variant={chip.badgeVariant} className="text-xs font-medium">
                          {chip.badgeText}
                        </Badge>
                      </div>
  
                      <div className="border-border/60 text-muted-foreground mt-3 flex items-center justify-between border-t pt-2 text-xs">
                        <span>
                          Last:{' '}
                          <strong className="text-foreground font-medium tabular-nums">{chip.lastAdministered}</strong>
                        </span>
                        <span className="text-success font-medium">{chip.status}</span>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </CardContent>
        </Card>
  
        {/* Immunization Records Table */}
        <Card className="shadow-xs">
          <CardHeader>
            <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
              <div>
                <CardTitle className="text-base font-semibold">Administered Immunization History</CardTitle>
                <CardDescription className="text-xs sm:text-sm">
                  Complete chronological registry of vaccine administrations, CDC CVX codes, lot verification, and
                  clinical facilities.
                </CardDescription>
              </div>
              <div className="flex min-w-0 items-center gap-2">
                <Badge wrap variant="outline" className="gap-1 text-xs tabular-nums">
                  <FileCheck className="text-primary size-3.5" aria-hidden="true" />
                  <span>5 Records Verified</span>
                </Badge>
              </div>
            </div>
          </CardHeader>
  
          <CardContent className="p-0">
            <div className="overflow-x-auto">
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead className="w-[28%] min-w-[220px]">Vaccine & CVX Code</TableHead>
                    <TableHead className="min-w-[130px]">Dose Sequence</TableHead>
                    <TableHead className="min-w-[120px]">Administered Date</TableHead>
                    <TableHead className="min-w-[160px]">Manufacturer & Lot #</TableHead>
                    <TableHead className="min-w-[220px]">Administering Facility & Provider</TableHead>
                    <TableHead className="min-w-[140px] text-right">Status / Next Due</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {vaccineRecords.map((record) => (
                    <TableRow key={record.id}>
                      <TableCell>
                        <div className="text-foreground text-sm font-semibold">{record.vaccineName}</div>
                        <div className="text-muted-foreground flex flex-wrap items-center gap-1.5 text-xs">
                          <span className="font-mono">{record.cvxCode}</span>
                          {record.ndcCode && <span className="text-muted-foreground/60">·</span>}
                          {record.ndcCode && <span className="font-mono text-xs">{record.ndcCode}</span>}
                        </div>
                      </TableCell>
                      <TableCell>
                        <Badge wrap variant={record.doseBadgeVariant} className="text-xs font-medium">
                          {record.doseSequence}
                        </Badge>
                      </TableCell>
                      <TableCell>
                        <div className="flex items-center gap-1.5">
                          <Calendar className="text-muted-foreground size-3.5 shrink-0" aria-hidden="true" />
                          <span className="text-foreground text-sm font-medium tabular-nums">
                            {record.administeredDate}
                          </span>
                        </div>
                      </TableCell>
                      <TableCell>
                        <div className="text-foreground text-sm font-medium">{record.manufacturer}</div>
                        <div className="text-muted-foreground font-mono text-xs">{record.lotNumber}</div>
                      </TableCell>
                      <TableCell>
                        <div className="text-foreground flex items-center gap-1.5 text-sm font-medium">
                          <Building2 className="text-muted-foreground size-3.5 shrink-0" aria-hidden="true" />
                          <span>{record.facility}</span>
                        </div>
                        <div className="text-muted-foreground text-xs">{record.provider}</div>
                      </TableCell>
                      <TableCell className="text-right">
                        <Badge
                          wrap
                          variant={record.statusType === 'permanent' ? 'success' : 'secondary'}
                          className="text-xs font-medium"
                        >
                          {record.nextDueDate}
                        </Badge>
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </div>
          </CardContent>
        </Card>
  
        {/* Upcoming Due Vaccines & Travel Advisory Alert Card */}
        <Card className="border-warning/30 bg-warning/[0.04] bg-warning/[0.07] shadow-xs">
          <CardContent className="p-5 sm:p-6">
            <div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
              <div className="flex items-start gap-3.5">
                <div className="border-warning/30 bg-warning/10 text-warning text-warning flex size-9 shrink-0 items-center justify-center rounded-lg border shadow-2xs">
                  <Globe className="size-5" aria-hidden="true" />
                </div>
                <div className="space-y-3">
                  <div>
                    <div className="flex flex-wrap items-center gap-2">
                      <h2 className="text-foreground text-base font-semibold">
                        Upcoming Recommendations & Travel Health Advisory
                      </h2>
                      <Badge wrap variant="warning" className="gap-1 text-xs font-medium">
                        <AlertCircle className="size-3" aria-hidden="true" />
                        CDC Notice · Level 2
                      </Badge>
                    </div>
                    <p className="text-muted-foreground mt-1 text-xs sm:text-sm">
                      Clinical recommendations based on patient age cohort, seasonal guidelines, and destination health
                      advisories.
                    </p>
                  </div>
  
                  <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
                    {/* Travel Alert Item 1: Yellow Fever */}
                    <div className="bg-card/90 border-border/80 rounded-lg border p-3.5 shadow-2xs">
                      <div className="flex flex-wrap items-center justify-between gap-2">
                        <div className="flex items-center gap-1.5">
                          <Plane className="text-warning size-3.5" aria-hidden="true" />
                          <span className="text-foreground text-xs font-semibold">Yellow Fever Vaccine (Live 17D)</span>
                        </div>
                        <Badge wrap variant="outline" className="border-warning/30 text-warning text-xs">
                          Travel Advisory
                        </Badge>
                      </div>
                      <p className="text-muted-foreground mt-1.5 text-xs">
                        Recommended for upcoming travel to endemic regions in South America (Brazil, Peru, Colombia).
                        Single dose provides lifelong immunity; administer ≥10 days prior to departure.
                      </p>
                      <div className="border-border/60 text-muted-foreground mt-2.5 flex items-center justify-between border-t pt-2 text-xs">
                        <span>
                          Priority: <strong className="text-foreground font-medium">High for South America</strong>
                        </span>
                        <span className="text-warning font-medium">Pending Rx</span>
                      </div>
                    </div>
  
                    {/* Advisory Item 2: Meningococcal MenACWY */}
                    <div className="bg-card/90 border-border/80 rounded-lg border p-3.5 shadow-2xs">
                      <div className="flex flex-wrap items-center justify-between gap-2">
                        <div className="flex items-center gap-1.5">
                          <Syringe className="text-primary size-3.5" aria-hidden="true" />
                          <span className="text-foreground text-xs font-semibold">Meningococcal Conjugate (MenACWY)</span>
                        </div>
                        <Badge wrap variant="outline" className="text-xs">
                          Routine Booster
                        </Badge>
                      </div>
                      <p className="text-muted-foreground mt-1.5 text-xs">
                        Recommended 5-year booster for international academic programs, dormitory residency, and
                        congregate international travel settings.
                      </p>
                      <div className="border-border/60 text-muted-foreground mt-2.5 flex items-center justify-between border-t pt-2 text-xs">
                        <span>
                          Next Window:{' '}
                          <strong className="text-foreground font-medium tabular-nums">Jan – Mar 2027</strong>
                        </span>
                        <span className="text-muted-foreground font-medium">Due in 11 mos</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
  
              {/* Advisory Action Buttons */}
              <div className="flex shrink-0 flex-wrap items-center gap-2 lg:flex-col lg:items-end">
                <Button size="sm" className="gap-1.5 text-xs font-medium">
                  <Calendar className="size-3.5" aria-hidden="true" />
                  Schedule Travel Clinic Visit
                </Button>
                <Button variant="outline" size="sm" className="gap-1.5 text-xs font-medium">
                  <ExternalLink className="size-3.5" aria-hidden="true" />
                  View CDC Destination Guidelines
                </Button>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>
    )
  }
  

Raw manifest:https://uipkge.dev/r/react/immunization-history.json