UIPackage
Menu

Framework

VueReactAngularSvelteWeb Components

Change language

GitHub repo

Insurance Eligibility Checker

blockhealthcare
Boilerplate repo

Real-time health insurance eligibility and benefits verification dashboard: patient member demographics, active payer status, individual deductible and out-of-pocket maximum progress trackers, primary care and specialist copay benefit cards, category-level coverage breakdown table with in/out-of-network rates, and Medicare secondary coordination of benefits.

Installation

$npx shadcn@latest add https://uipkge.dev/r/react/insurance-eligibility-checker.json
Named registry:npx shadcn@latest add @uipkge-react/insurance-eligibility-checkerInstalls to:components/blocks/

Variants

Loading interactive previews…

npm dependencies

lucide-react

Files installed (1)

  • components/blocks/InsuranceEligibilityChecker.tsx28.3 kB
    'use client'

import * as React from 'react'
import {
  Activity,
  AlertCircle,
  Building2,
  CheckCircle2,
  CreditCard,
  FileCheck,
  FileText,
  Hospital,
  Info,
  Pill,
  RefreshCw,
  ShieldCheck,
  Stethoscope,
  User,
} 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 { Progress } from '@/components/ui/progress'
import { Separator } from '@/components/ui/separator'
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'

export function InsuranceEligibilityChecker({ className }: { className?: string }) {
  const [isVerifying, setIsVerifying] = React.useState(false)
  const [lastVerifiedText, setLastVerifiedText] = React.useState('Active Coverage · Verified Today at 09:15 AM')

  const handleReverify = () => {
    if (isVerifying) return
    setIsVerifying(true)
    setTimeout(() => {
      setIsVerifying(false)
      const now = new Intl.DateTimeFormat('en-US', {
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit',
        hour12: true,
      }).format(new Date())
      setLastVerifiedText(`Active Coverage · Verified Real-time at ${now}`)
    }, 750)
  }

  return (
    <div
      data-slot="insurance-eligibility-checker"
      className={cn('bg-background text-foreground w-full space-y-6', className)}
    >
      {/* Header: Patient Demographics & Real-time Eligibility Status */}
      <header className="bg-card border-border rounded-xl border p-5 shadow-xs sm:p-6">
        <div className="flex flex-col gap-6">
          {/* Top Row: Title & Real-time Action */}
          <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
            <div className="space-y-1">
              <div className="flex items-center gap-2">
                <div className="bg-primary/10 text-primary border-primary/20 flex size-8 shrink-0 items-center justify-center rounded-lg border">
                  <ShieldCheck className="size-4" />
                </div>
                <h1 className="text-foreground text-xl font-bold tracking-tight sm:text-2xl">
                  Insurance Eligibility & Benefits Verifier
                </h1>
              </div>
              <p className="text-muted-foreground text-xs sm:text-sm">
                Real-time EDI 270/271 electronic benefit eligibility inquiry, deductible accumulators, and coverage
                limits.
              </p>
            </div>

            <div className="flex flex-wrap items-center gap-2">
              <Button
                variant="outline"
                size="sm"
                disabled={isVerifying}
                className="gap-1.5 text-xs font-medium"
                onClick={handleReverify}
              >
                <RefreshCw className={cn('size-3.5', isVerifying && 'text-primary animate-spin')} />
                <span>{isVerifying ? 'Verifying EDI 270...' : 'Re-verify Real-time'}</span>
              </Button>
            </div>
          </div>

          <Separator />

          {/* Patient & Primary Payer Profile Details */}
          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
            {/* Patient Demographics */}
            <div className="space-y-1">
              <div className="text-muted-foreground flex items-center gap-1.5 text-xs font-medium">
                <User className="size-3.5" />
                <span>Patient Name & DOB</span>
              </div>
              <p className="text-foreground text-sm font-semibold">David Chen</p>
              <p className="text-muted-foreground text-xs tabular-nums">DOB: 1978-10-14 (48 yrs · Male)</p>
            </div>

            {/* Primary Payer / Plan */}
            <div className="space-y-1">
              <div className="text-muted-foreground flex items-center gap-1.5 text-xs font-medium">
                <Building2 className="size-3.5" />
                <span>Insurance Payer & Plan</span>
              </div>
              <p className="text-foreground text-sm font-semibold">BlueCross BlueShield</p>
              <p className="text-muted-foreground text-xs">PPO - Choice Plus Network</p>
            </div>

            {/* Member & Group ID */}
            <div className="space-y-1">
              <div className="text-muted-foreground flex items-center gap-1.5 text-xs font-medium">
                <CreditCard className="size-3.5" />
                <span>Member & Policy ID</span>
              </div>
              <p className="text-foreground font-mono text-sm font-semibold tabular-nums">#BCBS-98421094</p>
              <p className="text-muted-foreground text-xs tabular-nums">Group: GRP-88204-01 · Plan #902</p>
            </div>

            {/* Verification Status Badge */}
            <div className="space-y-1.5">
              <div className="text-muted-foreground flex items-center gap-1.5 text-xs font-medium">
                <Activity className="size-3.5" />
                <span>Verification Status</span>
              </div>
              <div>
                <Badge
                  wrap
                  variant="outline"
                  className="border-success/30 bg-success/10 text-success gap-1.5 text-xs font-medium"
                >
                  <span className="bg-success size-1.5 animate-pulse rounded-full" />
                  <span>{lastVerifiedText}</span>
                </Badge>
              </div>
              <p className="text-muted-foreground text-xs tabular-nums">
                Trace: EDI-271-99842 · Effective: Jan 01, 2026 – Dec 31, 2026
              </p>
            </div>
          </div>
        </div>
      </header>

      {/* 4 Primary Benefit Cards */}
      <section className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
        {/* Card 1: Individual Deductible */}
        <Card className="relative overflow-hidden">
          <CardHeader className="pb-2">
            <div className="flex items-center justify-between">
              <CardTitle className="text-muted-foreground text-xs font-medium tracking-wider uppercase">
                Individual Deductible
              </CardTitle>
              <Badge wrap variant="secondary" className="text-xs font-normal">
                In-Network
              </Badge>
            </div>
            <div className="mt-2 space-y-1">
              <div className="flex items-baseline gap-1.5">
                <span className="text-foreground text-2xl font-bold tracking-tight tabular-nums">$1,200.00</span>
                <span className="text-muted-foreground text-xs font-normal tabular-nums">/ $2,500.00 met</span>
              </div>
              <CardDescription className="text-xs">
                <strong className="text-foreground font-medium tabular-nums">$1,300.00</strong> remaining in plan year
              </CardDescription>
            </div>
          </CardHeader>
          <CardContent className="pt-0">
            <div className="space-y-1.5">
              <div className="flex items-center justify-between text-xs">
                <span className="text-muted-foreground">Accumulator Met</span>
                <span className="text-foreground font-semibold tabular-nums">48%</span>
              </div>
              <Progress value={48} className="h-2" />
              <p className="text-muted-foreground pt-1 text-xs tabular-nums">
                Family Deductible: $2,400.00 / $5,000.00 met (48%)
              </p>
            </div>
          </CardContent>
        </Card>

        {/* Card 2: Out-of-Pocket Maximum */}
        <Card className="relative overflow-hidden">
          <CardHeader className="pb-2">
            <div className="flex items-center justify-between">
              <CardTitle className="text-muted-foreground text-xs font-medium tracking-wider uppercase">
                Out-of-Pocket Maximum
              </CardTitle>
              <Badge wrap variant="secondary" className="text-xs font-normal">
                Annual Max
              </Badge>
            </div>
            <div className="mt-2 space-y-1">
              <div className="flex items-baseline gap-1.5">
                <span className="text-foreground text-2xl font-bold tracking-tight tabular-nums">$2,800.00</span>
                <span className="text-muted-foreground text-xs font-normal tabular-nums">/ $6,000.00 met</span>
              </div>
              <CardDescription className="text-xs">
                <strong className="text-foreground font-medium tabular-nums">$3,200.00</strong> until 100% plan
                liability
              </CardDescription>
            </div>
          </CardHeader>
          <CardContent className="pt-0">
            <div className="space-y-1.5">
              <div className="flex items-center justify-between text-xs">
                <span className="text-muted-foreground">Accumulator Met</span>
                <span className="text-foreground font-semibold tabular-nums">46%</span>
              </div>
              <Progress value={46} className="h-2" />
              <p className="text-muted-foreground pt-1 text-xs tabular-nums">
                Includes deductibles, copays & Rx coinsurance
              </p>
            </div>
          </CardContent>
        </Card>

        {/* Card 3: Primary Care Copay */}
        <Card className="relative overflow-hidden">
          <CardHeader className="pb-2">
            <div className="flex items-center justify-between">
              <CardTitle className="text-muted-foreground text-xs font-medium tracking-wider uppercase">
                Primary Care Copay
              </CardTitle>
              <Badge
                wrap
                variant="outline"
                className="border-success/30 bg-success/10 text-success text-xs font-medium"
              >
                No Deductible
              </Badge>
            </div>
            <div className="mt-2 space-y-1">
              <div className="flex items-baseline gap-1.5">
                <span className="text-foreground text-2xl font-bold tracking-tight tabular-nums">$25.00</span>
                <span className="text-muted-foreground text-xs font-normal">copay</span>
              </div>
              <CardDescription className="text-xs">No deductible required prior to copay benefit</CardDescription>
            </div>
          </CardHeader>
          <CardContent className="pt-0">
            <div className="border-border/60 bg-muted/30 rounded-lg border p-2.5 text-xs">
              <div className="flex items-center gap-1.5">
                <Stethoscope className="text-primary size-3.5 shrink-0" />
                <span className="text-foreground font-medium">Designated PCP In-Network</span>
              </div>
              <p className="text-muted-foreground mt-1 text-xs">$0.00 copay for annual preventive wellness checkups</p>
            </div>
          </CardContent>
        </Card>

        {/* Card 4: Specialist Copay */}
        <Card className="relative overflow-hidden">
          <CardHeader className="pb-2">
            <div className="flex items-center justify-between">
              <CardTitle className="text-muted-foreground text-xs font-medium tracking-wider uppercase">
                Specialist Copay
              </CardTitle>
              <Badge
                wrap
                variant="outline"
                className="border-warning/30 bg-warning/10 text-warning text-xs font-medium"
              >
                PA Required
              </Badge>
            </div>
            <div className="mt-2 space-y-1">
              <div className="flex items-baseline gap-1.5">
                <span className="text-foreground text-2xl font-bold tracking-tight tabular-nums">$50.00</span>
                <span className="text-muted-foreground text-xs font-normal">copay</span>
              </div>
              <CardDescription className="text-xs">Prior authorization required for select procedures</CardDescription>
            </div>
          </CardHeader>
          <CardContent className="pt-0">
            <div className="border-border/60 bg-muted/30 rounded-lg border p-2.5 text-xs">
              <div className="flex items-center gap-1.5">
                <Hospital className="text-primary size-3.5 shrink-0" />
                <span className="text-foreground font-medium">Direct Specialist Access</span>
              </div>
              <p className="text-muted-foreground mt-1 text-xs">No primary care physician (PCP) referral required</p>
            </div>
          </CardContent>
        </Card>
      </section>

      {/* Detailed Coverage Category Breakdown Table */}
      <Card>
        <CardHeader>
          <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
            <div className="space-y-1">
              <div className="flex items-center gap-2">
                <FileCheck className="text-primary size-4" />
                <CardTitle className="text-base sm:text-lg">Detailed Coverage Category Breakdown</CardTitle>
              </div>
              <CardDescription className="text-xs sm:text-sm">
                Schedule of in-network vs out-of-network patient cost-sharing, authorization rules, and annual benefit
                limits.
              </CardDescription>
            </div>
            <Badge wrap variant="outline" className="text-muted-foreground w-fit text-xs font-normal">
              Updated via ANSI 835/271
            </Badge>
          </div>
        </CardHeader>
        <CardContent className="p-0">
          <div className="overflow-x-auto">
            <Table>
              <TableHeader>
                <TableRow className="bg-muted/40">
                  <TableHead className="min-w-[220px] font-semibold">Service Category</TableHead>
                  <TableHead className="min-w-[170px] font-semibold">In-Network Coverage</TableHead>
                  <TableHead className="min-w-[170px] font-semibold">Out-of-Network Coverage</TableHead>
                  <TableHead className="min-w-[190px] font-semibold">Prior Authorization (PA)</TableHead>
                  <TableHead className="min-w-[200px] text-right font-semibold">Annual Limits & Copay</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {/* Row 1: Preventive Care */}
                <TableRow>
                  <TableCell className="align-top font-medium">
                    <div className="flex items-start gap-2.5">
                      <div className="border-success/20 bg-success/10 text-success mt-0.5 flex size-7 shrink-0 items-center justify-center rounded-md border">
                        <ShieldCheck className="size-4" />
                      </div>
                      <div className="space-y-0.5">
                        <p className="text-foreground text-sm font-semibold">Preventive Care</p>
                        <p className="text-muted-foreground text-xs leading-relaxed">
                          Annual wellness exams, biometric screenings, routine adult & pediatric immunizations,
                          mammograms.
                        </p>
                      </div>
                    </div>
                  </TableCell>
                  <TableCell className="align-top">
                    <div className="space-y-1">
                      <span className="text-foreground text-sm font-bold tabular-nums">100% covered</span>
                      <Badge
                        wrap
                        variant="outline"
                        className="border-success/30 bg-success/10 text-success block w-fit text-xs font-normal"
                      >
                        $0 Deductible & Copay
                      </Badge>
                    </div>
                  </TableCell>
                  <TableCell className="align-top">
                    <div className="space-y-0.5">
                      <span className="text-foreground text-sm font-medium tabular-nums">60% of UCR</span>
                      <p className="text-muted-foreground text-xs">Subject to out-of-network deductible</p>
                    </div>
                  </TableCell>
                  <TableCell className="align-top">
                    <div className="text-success flex items-center gap-1.5 text-xs">
                      <CheckCircle2 className="size-3.5 shrink-0" />
                      <span className="font-medium">Not Required</span>
                    </div>
                    <p className="text-muted-foreground mt-0.5 text-xs">Direct access without pre-certification</p>
                  </TableCell>
                  <TableCell className="text-right align-top">
                    <div className="space-y-0.5">
                      <p className="text-foreground text-sm font-bold tabular-nums">$0.00 copay</p>
                      <p className="text-muted-foreground text-xs tabular-nums">Unlimited annual wellness visits</p>
                    </div>
                  </TableCell>
                </TableRow>

                {/* Row 2: Specialist Visits */}
                <TableRow>
                  <TableCell className="align-top font-medium">
                    <div className="flex items-start gap-2.5">
                      <div className="bg-primary/10 text-primary border-primary/20 mt-0.5 flex size-7 shrink-0 items-center justify-center rounded-md border">
                        <Stethoscope className="size-4" />
                      </div>
                      <div className="space-y-0.5">
                        <p className="text-foreground text-sm font-semibold">Specialist Visits</p>
                        <p className="text-muted-foreground text-xs leading-relaxed">
                          Cardiology, neurology, physical & occupational therapy, diagnostic imaging, and outpatient
                          consultations.
                        </p>
                      </div>
                    </div>
                  </TableCell>
                  <TableCell className="align-top">
                    <div className="space-y-1">
                      <span className="text-foreground text-sm font-bold tabular-nums">80% after deductible</span>
                      <p className="text-muted-foreground text-xs tabular-nums">$50.00 office visit copay</p>
                    </div>
                  </TableCell>
                  <TableCell className="align-top">
                    <div className="space-y-0.5">
                      <span className="text-foreground text-sm font-medium tabular-nums">60% of UCR</span>
                      <p className="text-muted-foreground text-xs">Balance billing applies above UCR</p>
                    </div>
                  </TableCell>
                  <TableCell className="align-top">
                    <div className="text-warning flex items-center gap-1.5 text-xs">
                      <AlertCircle className="size-3.5 shrink-0" />
                      <span className="font-medium">Required for Procedures</span>
                    </div>
                    <p className="text-muted-foreground mt-0.5 text-xs">PA required for MRI, CT scans & surgery</p>
                  </TableCell>
                  <TableCell className="text-right align-top">
                    <div className="space-y-0.5">
                      <p className="text-foreground text-sm font-bold tabular-nums">$50.00 copay</p>
                      <p className="text-muted-foreground text-xs tabular-nums">Max 30 PT visits / calendar year</p>
                    </div>
                  </TableCell>
                </TableRow>

                {/* Row 3: Urgent Care & ER */}
                <TableRow>
                  <TableCell className="align-top font-medium">
                    <div className="border-destructive/20 bg-destructive/10 text-destructive mt-0.5 flex size-7 shrink-0 items-center justify-center rounded-md border">
                      <Hospital className="size-4" />
                    </div>
                    <div className="space-y-0.5">
                      <p className="text-foreground text-sm font-semibold">Urgent Care & ER</p>
                      <p className="text-muted-foreground text-xs leading-relaxed">
                        Emergency department trauma evaluation, hospital triage, advanced imaging, and walk-in urgent
                        clinics.
                      </p>
                    </div>
                  </TableCell>
                  <TableCell className="align-top">
                    <div className="space-y-1">
                      <span className="text-foreground text-sm font-bold tabular-nums">100% after copay</span>
                      <p className="text-muted-foreground text-xs tabular-nums">$100 Urgent / $350 ER + 20%</p>
                    </div>
                  </TableCell>
                  <TableCell className="align-top">
                    <div className="space-y-0.5">
                      <span className="text-foreground text-sm font-medium tabular-nums">
                        Emergency: In-Network Rate
                      </span>
                      <p className="text-muted-foreground text-xs">Prudent Layperson Standard (ACA)</p>
                    </div>
                  </TableCell>
                  <TableCell className="align-top">
                    <div className="text-success flex items-center gap-1.5 text-xs">
                      <CheckCircle2 className="size-3.5 shrink-0" />
                      <span className="font-medium">Exempt for Emergency</span>
                    </div>
                    <p className="text-muted-foreground mt-0.5 text-xs">Notification requested within 48h</p>
                  </TableCell>
                  <TableCell className="text-right align-top">
                    <div className="space-y-0.5">
                      <p className="text-foreground text-sm font-bold tabular-nums">$100.00 / $350.00</p>
                      <p className="text-muted-foreground text-xs tabular-nums">ER copay waived if admitted</p>
                    </div>
                  </TableCell>
                </TableRow>

                {/* Row 4: Prescription Drug Tiers */}
                <TableRow>
                  <TableCell className="align-top font-medium">
                    <div className="flex items-start gap-2.5">
                      <div className="border-chart-1/20 bg-chart-1/10 text-chart-1 mt-0.5 flex size-7 shrink-0 items-center justify-center rounded-md border">
                        <Pill className="size-4" />
                      </div>
                      <div className="space-y-0.5">
                        <p className="text-foreground text-sm font-semibold">Prescription Drug Tiers</p>
                        <p className="text-muted-foreground text-xs leading-relaxed">
                          Tier 1 Generic, Tier 2 Preferred Brand, Tier 3 Non-Preferred Brand, Tier 4 Specialty
                          Biologics.
                        </p>
                      </div>
                    </div>
                  </TableCell>
                  <TableCell className="align-top">
                    <div className="space-y-1">
                      <span className="text-foreground text-sm font-bold tabular-nums">Tier 1–3 Copay / T4 20%</span>
                      <p className="text-muted-foreground text-xs tabular-nums">T1: $10 · T2: $35 · T3: $70</p>
                    </div>
                  </TableCell>
                  <TableCell className="align-top">
                    <div className="space-y-0.5">
                      <span className="text-muted-foreground text-sm font-medium">Not Covered</span>
                      <p className="text-muted-foreground text-xs">Participating retail & mail order only</p>
                    </div>
                  </TableCell>
                  <TableCell className="align-top">
                    <div className="text-warning flex items-center gap-1.5 text-xs">
                      <AlertCircle className="size-3.5 shrink-0" />
                      <span className="font-medium">Step Therapy / PA</span>
                    </div>
                    <p className="text-muted-foreground mt-0.5 text-xs">Mandatory PA for Tier 4 Specialty</p>
                  </TableCell>
                  <TableCell className="text-right align-top">
                    <div className="space-y-0.5">
                      <p className="text-foreground text-sm font-bold tabular-nums">$10.00 – $70.00</p>
                      <p className="text-muted-foreground text-xs tabular-nums">$3,500.00 Rx Annual OOP Max</p>
                    </div>
                  </TableCell>
                </TableRow>
              </TableBody>
            </Table>
          </div>
        </CardContent>
      </Card>

      {/* Secondary Insurance / Coordination of Benefits (COB) Card */}
      <Card>
        <CardHeader>
          <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
            <div className="space-y-1">
              <div className="flex items-center gap-2">
                <FileText className="text-primary size-4" />
                <CardTitle className="text-base sm:text-lg">
                  Secondary Insurance & Coordination of Benefits (COB)
                </CardTitle>
              </div>
              <CardDescription className="text-xs sm:text-sm">
                Medicare secondary payor rules and automated electronic crossover claims coordination.
              </CardDescription>
            </div>
            <Badge
              wrap
              variant="outline"
              className="border-success/30 bg-success/10 text-success w-fit text-xs font-medium"
            >
              Automatic Crossover Active
            </Badge>
          </div>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
            {/* Secondary Payer */}
            <div className="border-border/70 bg-muted/30 space-y-1 rounded-lg border p-3.5">
              <p className="text-muted-foreground text-xs font-medium">Secondary Payer</p>
              <p className="text-foreground text-sm font-semibold">Medicare Part B (CMS)</p>
              <p className="text-muted-foreground text-xs">Medical Insurance</p>
            </div>

            {/* Policy & HICN Number */}
            <div className="border-border/70 bg-muted/30 space-y-1 rounded-lg border p-3.5">
              <p className="text-muted-foreground text-xs font-medium">Secondary Policy / MBI</p>
              <p className="text-foreground font-mono text-sm font-semibold tabular-nums">#MED-9023411-B</p>
              <p className="text-muted-foreground text-xs">Coordination: Secondary Payor</p>
            </div>

            {/* Part B Deductible */}
            <div className="border-border/70 bg-muted/30 space-y-1 rounded-lg border p-3.5">
              <p className="text-muted-foreground text-xs font-medium">Medicare Part B Deductible</p>
              <p className="text-foreground text-sm font-semibold tabular-nums">$240.00 / $240.00 met</p>
              <p className="text-success text-xs font-medium">100% Deductible Satisfied</p>
            </div>

            {/* Secondary Benefit Coverage */}
            <div className="border-border/70 bg-muted/30 space-y-1 rounded-lg border p-3.5">
              <p className="text-muted-foreground text-xs font-medium">Secondary Cost Sharing</p>
              <p className="text-foreground text-sm font-semibold">20% Coinsurance Balance</p>
              <p className="text-muted-foreground text-xs">Covers patient gap liability</p>
            </div>
          </div>

          {/* Coordination of Benefits EDI Advice Banner */}
          <div className="border-border/80 bg-muted/40 flex items-start gap-3 rounded-lg border p-3.5">
            <Info className="text-primary mt-0.5 size-4 shrink-0" />
            <div className="space-y-0.5 text-xs leading-relaxed">
              <p className="text-foreground font-semibold">Automated 837P / EDI-271 Crossover Agreement (COBA)</p>
              <p className="text-muted-foreground">
                Primary claims processed by BlueCross BlueShield automatically transmit to Medicare for secondary
                adjudication. No manual paper secondary submission is required for eligible in-network clinical
                encounters.
              </p>
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}

export default InsuranceEligibilityChecker

Raw manifest:https://uipkge.dev/r/react/insurance-eligibility-checker.json