Insurance Eligibility Checker

blockhealthcare
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

$pnpm dlx uipkge-ng@latest add insurance-eligibility-checker
$npx uipkge-ng@latest add insurance-eligibility-checker
$yarn dlx uipkge-ng@latest add insurance-eligibility-checker
$bunx uipkge-ng@latest add insurance-eligibility-checker
Manifest:https://uipkge.dev/r/angular/insurance-eligibility-checker.jsonInstalls to:src/app/components/blocks/insurance-eligibility-checker/
Variants

Loading interactive previews…
npm dependencies

lucide-angular
Includes

badge button card progress separator table
Files installed (2)

src/app/components/blocks/insurance-eligibility-checker/insurance-eligibility-checker.component.ts30.5 kB
// 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.
// Port of the React block 1:1.
import { ChangeDetectionStrategy, Component, DestroyRef, Input, inject, signal } from '@angular/core'
import {
  Activity,
  AlertCircle,
  Building2,
  CheckCircle2,
  CreditCard,
  FileCheck,
  FileText,
  Hospital,
  Info,
  LucideAngularModule,
  Pill,
  RefreshCw,
  ShieldCheck,
  Stethoscope,
  User,
} from 'lucide-angular'
import { cn } from '@/lib/utils'
import { UiBadgeComponent } from '@/ui/badge/badge.component'
import { UiButtonComponent } from '@/ui/button/button.component'
import {
  UiCardComponent,
  UiCardContentComponent,
  UiCardDescriptionComponent,
  UiCardHeaderComponent,
  UiCardTitleComponent,
} from '@/ui/card/card.component'
import { UiProgressComponent } from '@/ui/progress/progress.component'
import { UiSeparatorComponent } from '@/ui/separator/separator.component'
import {
  UiTableBodyComponent,
  UiTableCellComponent,
  UiTableComponent,
  UiTableHeadComponent,
  UiTableHeaderComponent,
  UiTableRowComponent,
} from '@/ui/table/table.component'

@Component({
  changeDetection: ChangeDetectionStrategy.Eager,
  selector: 'ui-insurance-eligibility-checker, [ui-insurance-eligibility-checker]',
  standalone: true,
  // React renders the root <div> itself: the host stays out of layout and `class` goes to the root.
  host: { '[attr.class]': '"contents"' },
  imports: [
    LucideAngularModule,
    UiBadgeComponent,
    UiButtonComponent,
    UiCardComponent,
    UiCardContentComponent,
    UiCardDescriptionComponent,
    UiCardHeaderComponent,
    UiCardTitleComponent,
    UiProgressComponent,
    UiSeparatorComponent,
    UiTableBodyComponent,
    UiTableCellComponent,
    UiTableComponent,
    UiTableHeadComponent,
    UiTableHeaderComponent,
    UiTableRowComponent,
  ],
  template: `
    <div data-slot="insurance-eligibility-checker" [class]="rootClass">
      <!-- Header: Patient Demographics & Real-time Eligibility Status -->
      <header class="bg-card border-border rounded-xl border p-5 shadow-xs sm:p-6">
        <div class="flex flex-col gap-6">
          <!-- Top Row: Title & Real-time Action -->
          <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
            <div class="space-y-1">
              <div class="flex items-center gap-2">
                <div
                  class="bg-primary/10 text-primary border-primary/20 flex size-8 shrink-0 items-center justify-center rounded-lg border"
                >
                  <lucide-icon [img]="ShieldCheck" class="size-4" />
                </div>
                <h1 class="text-foreground text-xl font-bold tracking-tight sm:text-2xl">
                  Insurance Eligibility & Benefits Verifier
                </h1>
              </div>
              <p class="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 class="flex flex-wrap items-center gap-2">
              <button
                ui-button
                variant="outline"
                size="sm"
                [disabled]="isVerifying()"
                class="gap-1.5 text-xs font-medium"
                (click)="handleReverify()"
              >
                <lucide-icon
                  [img]="RefreshCw"
                  [class]="isVerifying() ? 'text-primary size-3.5 animate-spin' : 'size-3.5'"
                />
                <span>{{ isVerifying() ? 'Verifying EDI 270...' : 'Re-verify Real-time' }}</span>
              </button>
            </div>
          </div>

          <ui-separator />

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

            <!-- Primary Payer / Plan -->
            <div class="space-y-1">
              <div class="text-muted-foreground flex items-center gap-1.5 text-xs font-medium">
                <lucide-icon [img]="Building2" class="size-3.5" />
                <span>Insurance Payer & Plan</span>
              </div>
              <p class="text-foreground text-sm font-semibold">BlueCross BlueShield</p>
              <p class="text-muted-foreground text-xs">PPO - Choice Plus Network</p>
            </div>

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

            <!-- Verification Status Badge -->
            <div class="space-y-1.5">
              <div class="text-muted-foreground flex items-center gap-1.5 text-xs font-medium">
                <lucide-icon [img]="Activity" class="size-3.5" />
                <span>Verification Status</span>
              </div>
              <div>
                <span
                  ui-badge
                  wrap
                  variant="outline"
                  class="border-success/30 bg-success/10 text-success gap-1.5 text-xs font-medium"
                >
                  <span class="bg-success size-1.5 animate-pulse rounded-full"></span>
                  <span>{{ lastVerifiedText() }}</span>
                </span>
              </div>
              <p class="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 class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
        <!-- Card 1: Individual Deductible -->
        <div ui-card class="relative overflow-hidden">
          <div ui-card-header class="pb-2">
            <div class="flex items-center justify-between">
              <h3 ui-card-title class="text-muted-foreground text-xs font-medium tracking-wider uppercase">
                Individual Deductible
              </h3>
              <span ui-badge wrap variant="secondary" class="text-xs font-normal">In-Network</span>
            </div>
            <div class="mt-2 space-y-1">
              <div class="flex items-baseline gap-1.5">
                <span class="text-foreground text-2xl font-bold tracking-tight tabular-nums">$1,200.00</span>
                <span class="text-muted-foreground text-xs font-normal tabular-nums">/ $2,500.00 met</span>
              </div>
              <p ui-card-description class="text-xs">
                <strong class="text-foreground font-medium tabular-nums">$1,300.00</strong> remaining in plan year
              </p>
            </div>
          </div>
          <div ui-card-content class="pt-0">
            <div class="space-y-1.5">
              <div class="flex items-center justify-between text-xs">
                <span class="text-muted-foreground">Accumulator Met</span>
                <span class="text-foreground font-semibold tabular-nums">48%</span>
              </div>
              <ui-progress [value]="48" class="h-2" />
              <p class="text-muted-foreground pt-1 text-xs tabular-nums">
                Family Deductible: $2,400.00 / $5,000.00 met (48%)
              </p>
            </div>
          </div>
        </div>

        <!-- Card 2: Out-of-Pocket Maximum -->
        <div ui-card class="relative overflow-hidden">
          <div ui-card-header class="pb-2">
            <div class="flex items-center justify-between">
              <h3 ui-card-title class="text-muted-foreground text-xs font-medium tracking-wider uppercase">
                Out-of-Pocket Maximum
              </h3>
              <span ui-badge wrap variant="secondary" class="text-xs font-normal">Annual Max</span>
            </div>
            <div class="mt-2 space-y-1">
              <div class="flex items-baseline gap-1.5">
                <span class="text-foreground text-2xl font-bold tracking-tight tabular-nums">$2,800.00</span>
                <span class="text-muted-foreground text-xs font-normal tabular-nums">/ $6,000.00 met</span>
              </div>
              <p ui-card-description class="text-xs">
                <strong class="text-foreground font-medium tabular-nums">$3,200.00</strong> until 100% plan liability
              </p>
            </div>
          </div>
          <div ui-card-content class="pt-0">
            <div class="space-y-1.5">
              <div class="flex items-center justify-between text-xs">
                <span class="text-muted-foreground">Accumulator Met</span>
                <span class="text-foreground font-semibold tabular-nums">46%</span>
              </div>
              <ui-progress [value]="46" class="h-2" />
              <p class="text-muted-foreground pt-1 text-xs tabular-nums">
                Includes deductibles, copays & Rx coinsurance
              </p>
            </div>
          </div>
        </div>

        <!-- Card 3: Primary Care Copay -->
        <div ui-card class="relative overflow-hidden">
          <div ui-card-header class="pb-2">
            <div class="flex items-center justify-between">
              <h3 ui-card-title class="text-muted-foreground text-xs font-medium tracking-wider uppercase">
                Primary Care Copay
              </h3>
              <span
                ui-badge
                wrap
                variant="outline"
                class="border-success/30 bg-success/10 text-success text-xs font-medium"
              >
                No Deductible
              </span>
            </div>
            <div class="mt-2 space-y-1">
              <div class="flex items-baseline gap-1.5">
                <span class="text-foreground text-2xl font-bold tracking-tight tabular-nums">$25.00</span>
                <span class="text-muted-foreground text-xs font-normal">copay</span>
              </div>
              <p ui-card-description class="text-xs">No deductible required prior to copay benefit</p>
            </div>
          </div>
          <div ui-card-content class="pt-0">
            <div class="border-border/60 bg-muted/30 rounded-lg border p-2.5 text-xs">
              <div class="flex items-center gap-1.5">
                <lucide-icon [img]="Stethoscope" class="text-primary size-3.5 shrink-0" />
                <span class="text-foreground font-medium">Designated PCP In-Network</span>
              </div>
              <p class="text-muted-foreground mt-1 text-xs">$0.00 copay for annual preventive wellness checkups</p>
            </div>
          </div>
        </div>

        <!-- Card 4: Specialist Copay -->
        <div ui-card class="relative overflow-hidden">
          <div ui-card-header class="pb-2">
            <div class="flex items-center justify-between">
              <h3 ui-card-title class="text-muted-foreground text-xs font-medium tracking-wider uppercase">
                Specialist Copay
              </h3>
              <span
                ui-badge
                wrap
                variant="outline"
                class="border-warning/30 bg-warning/10 text-warning text-xs font-medium"
              >
                PA Required
              </span>
            </div>
            <div class="mt-2 space-y-1">
              <div class="flex items-baseline gap-1.5">
                <span class="text-foreground text-2xl font-bold tracking-tight tabular-nums">$50.00</span>
                <span class="text-muted-foreground text-xs font-normal">copay</span>
              </div>
              <p ui-card-description class="text-xs">Prior authorization required for select procedures</p>
            </div>
          </div>
          <div ui-card-content class="pt-0">
            <div class="border-border/60 bg-muted/30 rounded-lg border p-2.5 text-xs">
              <div class="flex items-center gap-1.5">
                <lucide-icon [img]="Hospital" class="text-primary size-3.5 shrink-0" />
                <span class="text-foreground font-medium">Direct Specialist Access</span>
              </div>
              <p class="text-muted-foreground mt-1 text-xs">No primary care physician (PCP) referral required</p>
            </div>
          </div>
        </div>
      </section>

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

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

                <!-- Row 3: Urgent Care & ER. Deliberate divergence: React drops the
                     Hospital icon here and both React/Vue omit the flex wrapper that rows
                     1/2/4 use — this keeps the row visually consistent with its siblings. -->
                <tr ui-table-row>
                  <td ui-table-cell class="align-top font-medium">
                    <div class="flex items-start gap-2.5">
                      <div
                        class="border-destructive/20 bg-destructive/10 text-destructive mt-0.5 flex size-7 shrink-0 items-center justify-center rounded-md border"
                      >
                        <lucide-icon [img]="Hospital" class="size-4" />
                      </div>
                      <div class="space-y-0.5">
                        <p class="text-foreground text-sm font-semibold">Urgent Care & ER</p>
                        <p class="text-muted-foreground text-xs leading-relaxed">
                          Emergency department trauma evaluation, hospital triage, advanced imaging, and walk-in urgent
                          clinics.
                        </p>
                      </div>
                    </div>
                  </td>
                  <td ui-table-cell class="align-top">
                    <div class="space-y-1">
                      <span class="text-foreground text-sm font-bold tabular-nums">100% after copay</span>
                      <p class="text-muted-foreground text-xs tabular-nums">$100 Urgent / $350 ER + 20%</p>
                    </div>
                  </td>
                  <td ui-table-cell class="align-top">
                    <div class="space-y-0.5">
                      <span class="text-foreground text-sm font-medium tabular-nums">Emergency: In-Network Rate</span>
                      <p class="text-muted-foreground text-xs">Prudent Layperson Standard (ACA)</p>
                    </div>
                  </td>
                  <td ui-table-cell class="align-top">
                    <div class="text-success flex items-center gap-1.5 text-xs">
                      <lucide-icon [img]="CheckCircle2" class="size-3.5 shrink-0" />
                      <span class="font-medium">Exempt for Emergency</span>
                    </div>
                    <p class="text-muted-foreground mt-0.5 text-xs">Notification requested within 48h</p>
                  </td>
                  <td ui-table-cell class="text-right align-top">
                    <div class="space-y-0.5">
                      <p class="text-foreground text-sm font-bold tabular-nums">$100.00 / $350.00</p>
                      <p class="text-muted-foreground text-xs tabular-nums">ER copay waived if admitted</p>
                    </div>
                  </td>
                </tr>

                <!-- Row 4: Prescription Drug Tiers -->
                <tr ui-table-row>
                  <td ui-table-cell class="align-top font-medium">
                    <div class="flex items-start gap-2.5">
                      <div
                        class="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"
                      >
                        <lucide-icon [img]="Pill" class="size-4" />
                      </div>
                      <div class="space-y-0.5">
                        <p class="text-foreground text-sm font-semibold">Prescription Drug Tiers</p>
                        <p class="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>
                  </td>
                  <td ui-table-cell class="align-top">
                    <div class="space-y-1">
                      <span class="text-foreground text-sm font-bold tabular-nums">Tier 1–3 Copay / T4 20%</span>
                      <p class="text-muted-foreground text-xs tabular-nums">T1: $10 · T2: $35 · T3: $70</p>
                    </div>
                  </td>
                  <td ui-table-cell class="align-top">
                    <div class="space-y-0.5">
                      <span class="text-muted-foreground text-sm font-medium">Not Covered</span>
                      <p class="text-muted-foreground text-xs">Participating retail & mail order only</p>
                    </div>
                  </td>
                  <td ui-table-cell class="align-top">
                    <div class="text-warning flex items-center gap-1.5 text-xs">
                      <lucide-icon [img]="AlertCircle" class="size-3.5 shrink-0" />
                      <span class="font-medium">Step Therapy / PA</span>
                    </div>
                    <p class="text-muted-foreground mt-0.5 text-xs">Mandatory PA for Tier 4 Specialty</p>
                  </td>
                  <td ui-table-cell class="text-right align-top">
                    <div class="space-y-0.5">
                      <p class="text-foreground text-sm font-bold tabular-nums">$10.00 – $70.00</p>
                      <p class="text-muted-foreground text-xs tabular-nums">$3,500.00 Rx Annual OOP Max</p>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>

      <!-- Secondary Insurance / Coordination of Benefits (COB) Card -->
      <div ui-card>
        <div ui-card-header>
          <div class="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
            <div class="space-y-1">
              <div class="flex items-center gap-2">
                <lucide-icon [img]="FileText" class="text-primary size-4" />
                <h3 ui-card-title class="text-base sm:text-lg">Secondary Insurance & Coordination of Benefits (COB)</h3>
              </div>
              <p ui-card-description class="text-xs sm:text-sm">
                Medicare secondary payor rules and automated electronic crossover claims coordination.
              </p>
            </div>
            <span
              ui-badge
              wrap
              variant="outline"
              class="border-success/30 bg-success/10 text-success w-fit text-xs font-medium"
            >
              Automatic Crossover Active
            </span>
          </div>
        </div>
        <div ui-card-content class="space-y-4">
          <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
            <!-- Secondary Payer -->
            <div class="border-border/70 bg-muted/30 space-y-1 rounded-lg border p-3.5">
              <p class="text-muted-foreground text-xs font-medium">Secondary Payer</p>
              <p class="text-foreground text-sm font-semibold">Medicare Part B (CMS)</p>
              <p class="text-muted-foreground text-xs">Medical Insurance</p>
            </div>

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

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

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

          <!-- Coordination of Benefits EDI Advice Banner -->
          <div class="border-border/80 bg-muted/40 flex items-start gap-3 rounded-lg border p-3.5">
            <lucide-icon [img]="Info" class="text-primary mt-0.5 size-4 shrink-0" />
            <div class="space-y-0.5 text-xs leading-relaxed">
              <p class="text-foreground font-semibold">Automated 837P / EDI-271 Crossover Agreement (COBA)</p>
              <p class="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>
        </div>
      </div>
    </div>
  `,
})
export class UiInsuranceEligibilityCheckerComponent {
  protected readonly Activity = Activity
  protected readonly AlertCircle = AlertCircle
  protected readonly Building2 = Building2
  protected readonly CheckCircle2 = CheckCircle2
  protected readonly CreditCard = CreditCard
  protected readonly FileCheck = FileCheck
  protected readonly FileText = FileText
  protected readonly Hospital = Hospital
  protected readonly Info = Info
  protected readonly Pill = Pill
  protected readonly RefreshCw = RefreshCw
  protected readonly ShieldCheck = ShieldCheck
  protected readonly Stethoscope = Stethoscope
  protected readonly User = User

  @Input('class') className?: string

  readonly isVerifying = signal(false)
  readonly lastVerifiedText = signal('Active Coverage · Verified Today at 09:15 AM')
  private verifyTimer: ReturnType<typeof setTimeout> | undefined

  constructor() {
    inject(DestroyRef).onDestroy(() => clearTimeout(this.verifyTimer))
  }

  get rootClass(): string {
    return cn('bg-background text-foreground w-full space-y-6', this.className)
  }

  handleReverify(): void {
    if (this.isVerifying()) return
    this.isVerifying.set(true)
    this.verifyTimer = setTimeout(() => {
      this.isVerifying.set(false)
      const now = new Intl.DateTimeFormat('en-US', {
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit',
        hour12: true,
      }).format(new Date())
      this.lastVerifiedText.set(`Active Coverage · Verified Real-time at ${now}`)
    }, 750)
  }
}
src/app/components/blocks/insurance-eligibility-checker/index.ts0.1 kB
Raw manifest:https://uipkge.dev/r/angular/insurance-eligibility-checker.json
Change language
