{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "benefits-enrollment-portal", "title": "Benefits Enrollment Portal", "type": "registry:page", "files": [ { "path": "packages/registry-react/blocks/benefits-enrollment-portal/BenefitsEnrollmentPortal.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport {\n AlertCircle,\n Check,\n CheckCircle2,\n Clock,\n Download,\n Eye,\n FileCheck,\n FileSignature,\n HeartPulse,\n PiggyBank,\n RefreshCw,\n ShieldCheck,\n Percent,\n User,\n Users,\n} from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'\nimport { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'\nimport { Separator } from '@/components/ui/separator'\nimport { Slider } from '@/components/ui/slider'\n\nexport interface BenefitsEnrollmentPortalProps {\n employeeName?: string\n employeeId?: string\n coverageTier?: string\n department?: string\n deadlineDate?: string\n daysRemaining?: number\n annualSalary?: number\n payPeriodsPerYear?: number\n initialMedicalPlan?: string\n initialDentalPlan?: string\n initialVisionPlan?: string\n initial401kRate?: number\n className?: string\n}\n\nexport interface MedicalPlan {\n id: string\n name: string\n carrier: string\n badge?: string\n badgeVariant?: 'default' | 'secondary' | 'outline'\n employeeCostPerPaycheck: number\n employerCostPerMonth: number\n deductible: string\n outOfPocketMax: string\n copayOrCoinsurance: string\n hsaSeed: number\n description: string\n highlights: string[]\n}\n\nconst MEDICAL_PLANS: MedicalPlan[] = [\n {\n id: 'medical-ppo-hsa',\n name: 'BlueCross PPO High Deductible + HSA',\n carrier: 'BlueCross BlueShield',\n badge: 'Popular · HSA Eligible',\n badgeVariant: 'secondary',\n employeeCostPerPaycheck: 85,\n employerCostPerMonth: 450,\n deductible: '$1,600 ind / $3,200 fam',\n outOfPocketMax: '$4,000 ind / $8,000 fam',\n copayOrCoinsurance: '10% after deductible',\n hsaSeed: 500,\n description: 'Triple tax-advantaged health savings account with an employer-funded annual HSA contribution.',\n highlights: [\n '$500 annual employer HSA contribution funded on Jan 1',\n '100% preventive care covered in-network with $0 deductible',\n 'Flexible nationwide PPO specialist access without referrals',\n ],\n },\n {\n id: 'medical-gold-ppo',\n name: 'BlueCross Gold Premier PPO',\n carrier: 'BlueCross BlueShield',\n badge: 'Low $250 Deductible',\n badgeVariant: 'outline',\n employeeCostPerPaycheck: 180,\n employerCostPerMonth: 520,\n deductible: '$250 ind / $500 fam',\n outOfPocketMax: '$2,500 ind / $5,000 fam',\n copayOrCoinsurance: '$20 Primary / $40 Specialist',\n hsaSeed: 0,\n description: 'Predictable low-copay coverage designed for frequent medical care, prescriptions, and peace of mind.',\n highlights: [\n 'Ultra-low $250 individual deductible for comprehensive care',\n '$20 primary care & $40 specialist fixed office visit copays',\n 'Tier 1 generic prescriptions covered at $10 copay',\n ],\n },\n {\n id: 'medical-kaiser-hmo',\n name: 'Kaiser Permanente HMO',\n carrier: 'Kaiser Permanente',\n badge: '$0 Deductible',\n badgeVariant: 'outline',\n employeeCostPerPaycheck: 40,\n employerCostPerMonth: 420,\n deductible: '$0 ind / $0 fam',\n outOfPocketMax: '$1,500 ind / $3,000 fam',\n copayOrCoinsurance: '$15 Primary / $25 Specialist',\n hsaSeed: 0,\n description: 'Integrated in-network HMO coverage with zero deductible and lowest payroll deduction.',\n highlights: [\n '$0 deductible with everything under one roof at Kaiser centers',\n '$15 copay for routine medical and virtual telehealth visits',\n 'Lowest bi-weekly payroll deduction across all medical tiers',\n ],\n },\n]\n\nexport interface DentalPlan {\n id: string\n name: string\n carrier: string\n badge?: string\n badgeVariant?: 'default' | 'secondary' | 'outline'\n employeeCostPerPaycheck: number\n employerCostPerMonth: number\n annualMax: string\n preventive: string\n basic: string\n majorOrOrtho: string\n description: string\n}\n\nconst DENTAL_PLANS: DentalPlan[] = [\n {\n id: 'dental-comprehensive',\n name: 'Delta Dental Premier Comprehensive',\n carrier: 'Delta Dental',\n badge: 'Comprehensive · Ortho Included',\n badgeVariant: 'secondary',\n employeeCostPerPaycheck: 14,\n employerCostPerMonth: 35,\n annualMax: '$2,000 / member / yr',\n preventive: '100% (2 cleanings & exams / yr)',\n basic: '80% coverage (fillings & endodontics)',\n majorOrOrtho: '50% coverage ($1,500 lifetime ortho)',\n description: 'Complete coverage for preventative cleanings, major restorative procedures, and orthodontic care.',\n },\n {\n id: 'dental-basic',\n name: 'Delta Dental Basic',\n carrier: 'Delta Dental',\n badge: 'Basic Preventive',\n badgeVariant: 'outline',\n employeeCostPerPaycheck: 5,\n employerCostPerMonth: 20,\n annualMax: '$1,000 / member / yr',\n preventive: '100% (2 cleanings / yr)',\n basic: '50% coverage',\n majorOrOrtho: 'Not covered',\n description: 'Essential preventive dental care for routine bi-annual cleanings, exams, and basic cavity fillings.',\n },\n {\n id: 'dental-waive',\n name: 'Waive Dental Coverage',\n carrier: 'Decline',\n employeeCostPerPaycheck: 0,\n employerCostPerMonth: 0,\n annualMax: '$0',\n preventive: 'None',\n basic: 'None',\n majorOrOrtho: 'None',\n description: 'Decline dental insurance coverage for the 2026-2027 plan year.',\n },\n]\n\nexport interface VisionPlan {\n id: string\n name: string\n carrier: string\n badge?: string\n badgeVariant?: 'default' | 'secondary' | 'outline'\n employeeCostPerPaycheck: number\n employerCostPerMonth: number\n examCopay: string\n frameAllowance: string\n lenses: string\n description: string\n}\n\nconst VISION_PLANS: VisionPlan[] = [\n {\n id: 'vision-choice-plus',\n name: 'VSP Vision Choice Plus',\n carrier: 'VSP Vision Care',\n badge: '$200 Frame Allowance',\n badgeVariant: 'secondary',\n employeeCostPerPaycheck: 8,\n employerCostPerMonth: 12,\n examCopay: '$10 copay (every 12 mo)',\n frameAllowance: '$200 allowance + 20% off overage',\n lenses: 'Progressives & anti-glare covered in full',\n description: 'Premium vision coverage with generous designer frame allowances and full progressive lens coverage.',\n },\n {\n id: 'vision-standard',\n name: 'VSP Standard Vision',\n carrier: 'VSP Vision Care',\n badge: 'Standard',\n badgeVariant: 'outline',\n employeeCostPerPaycheck: 3,\n employerCostPerMonth: 8,\n examCopay: '$15 copay (every 12 mo)',\n frameAllowance: '$120 frame allowance',\n lenses: 'Standard single-vision lenses covered',\n description: 'Core vision benefit for annual eye exams and standard prescription glasses.',\n },\n {\n id: 'vision-waive',\n name: 'Waive Vision Coverage',\n carrier: 'Decline',\n employeeCostPerPaycheck: 0,\n employerCostPerMonth: 0,\n examCopay: '$0',\n frameAllowance: '$0',\n lenses: 'None',\n description: 'Decline vision insurance coverage for the 2026-2027 plan year.',\n },\n]\n\nconst SLIDER_MARKS = {\n 1: '1%',\n 4: '4%',\n 6: '6% (Max Match)',\n 10: '10%',\n 15: '15%',\n 20: '20%',\n}\n\nexport function BenefitsEnrollmentPortal({\n employeeName = 'Elena Rostova',\n employeeId = 'EMP-48201',\n coverageTier = 'Employee + Spouse',\n department = 'Engineering · Senior Staff',\n deadlineDate = 'Sep 15',\n daysRemaining = 14,\n annualSalary = 120000,\n payPeriodsPerYear = 24,\n initialMedicalPlan = 'medical-ppo-hsa',\n initialDentalPlan = 'dental-comprehensive',\n initialVisionPlan = 'vision-choice-plus',\n initial401kRate = 6,\n className,\n}: BenefitsEnrollmentPortalProps) {\n const [selectedMedical, setSelectedMedical] = React.useState(initialMedicalPlan)\n const [selectedDental, setSelectedDental] = React.useState(initialDentalPlan)\n const [selectedVision, setSelectedVision] = React.useState(initialVisionPlan)\n const [k401Rate, setK401Rate] = React.useState(initial401kRate)\n const [isSubmitted, setIsSubmitted] = React.useState(false)\n const [signatureAcknowledged, setSignatureAcknowledged] = React.useState(false)\n const [showSignModal, setShowSignModal] = React.useState(false)\n\n const currentMedical = React.useMemo(\n () => MEDICAL_PLANS.find((p) => p.id === selectedMedical) ?? MEDICAL_PLANS[0],\n [selectedMedical],\n )\n const currentDental = React.useMemo(\n () => DENTAL_PLANS.find((p) => p.id === selectedDental) ?? DENTAL_PLANS[0],\n [selectedDental],\n )\n const currentVision = React.useMemo(\n () => VISION_PLANS.find((p) => p.id === selectedVision) ?? VISION_PLANS[0],\n [selectedVision],\n )\n\n const paycheckGross = annualSalary / payPeriodsPerYear\n\n // 401(k) Calculations\n const k401EmployeePerPaycheck = (paycheckGross * k401Rate) / 100\n const k401EmployeeAnnual = k401EmployeePerPaycheck * payPeriodsPerYear\n\n const employerMatchRate = React.useMemo(() => {\n if (k401Rate <= 0) return 0\n if (k401Rate <= 4) return k401Rate\n if (k401Rate === 5) return 4.5\n return 5.0\n }, [k401Rate])\n\n const k401EmployerPerPaycheck = (paycheckGross * employerMatchRate) / 100\n const k401EmployerAnnual = k401EmployerPerPaycheck * payPeriodsPerYear\n const maxMatchUnlocked = k401Rate >= 6\n const missedMatchAnnual = Math.max(0, (annualSalary * 5.0) / 100 - k401EmployerAnnual)\n\n // Health costs per paycheck\n const healthCostPerPaycheck =\n currentMedical.employeeCostPerPaycheck +\n currentDental.employeeCostPerPaycheck +\n currentVision.employeeCostPerPaycheck\n\n const totalEmployeePerPaycheck = healthCostPerPaycheck + k401EmployeePerPaycheck\n const estimatedTaxSavingsPerPaycheck = Math.round(totalEmployeePerPaycheck * 0.25 * 100) / 100\n const netTakeHomeImpact = totalEmployeePerPaycheck - estimatedTaxSavingsPerPaycheck\n\n // Employer total annual value\n const employerMedicalAnnual = currentMedical.employerCostPerMonth * 12\n const employerDentalAnnual = currentDental.employerCostPerMonth * 12\n const employerVisionAnnual = currentVision.employerCostPerMonth * 12\n const hsaSeedAnnual = currentMedical.hsaSeed\n const employerLifeDisabilityAnnual = 2386\n\n const totalEmployerAnnualValue =\n employerMedicalAnnual +\n employerDentalAnnual +\n employerVisionAnnual +\n hsaSeedAnnual +\n k401EmployerAnnual +\n employerLifeDisabilityAnnual\n\n const handleSignAndSubmit = () => {\n if (!signatureAcknowledged) return\n setIsSubmitted(true)\n setShowSignModal(false)\n }\n\n const handleResetEnrollment = () => {\n setIsSubmitted(false)\n setSignatureAcknowledged(false)\n }\n\n return (\n \n {/* Header Banner */}\n
\n
\n
\n
\n \n \n Open Enrollment Period Ends {deadlineDate} · {daysRemaining} Days Left\n \n {isSubmitted && (\n \n \n Elections Submitted & Signed\n \n )}\n
\n\n
\n

\n Annual Benefits Open Enrollment\n

\n

\n Select your health coverage, retirement matching, and ancillary wellness plans for the 2026-2027 plan\n year.\n

\n
\n\n {/* Employee metadata strip */}\n
\n
\n \n {employeeName}\n
\n
\n \n \n Tier: {coverageTier}\n \n
\n
\n \n ID: {employeeId}\n \n
\n
\n \n Base:{' '}\n \n ${annualSalary.toLocaleString('en-US')}/yr\n \n \n
\n
\n
\n\n
\n {!isSubmitted ? (\n \n ) : (\n \n \n Modify My Elections\n \n )}\n\n

\n Changes take effect October 1, 2026\n

\n
\n
\n
\n\n {/* Submitted Banner (If Confirmed) */}\n {isSubmitted && (\n
\n
\n
\n \n
\n
\n

\n Enrollment Signed & Confirmed for Plan Year 2026-2027\n

\n

\n Confirmation Reference: #BEN-2026-89241 ·\n Signed by {employeeName} on August 21, 2026.\n

\n
\n
\n \n
\n )}\n\n {/* Main 2-Column Grid: Plan Options (Col 8) + Sticky Paycheck Impact (Col 4) */}\n
\n {/* Plan Selection Flow */}\n
\n {/* Category 1: Medical Health Plan */}\n \n \n
\n
\n
\n \n
\n
\n 1. Medical Health Plan\n \n Comprehensive inpatient, outpatient, prescription, and preventive medical coverage.\n \n
\n
\n \n 3 Plans Available\n \n
\n \n\n \n setSelectedMedical(val)} className=\"gap-3.5\">\n {MEDICAL_PLANS.map((plan) => {\n const isSelected = selectedMedical === plan.id\n return (\n setSelectedMedical(plan.id)}\n onKeyDown={(e) => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault()\n setSelectedMedical(plan.id)\n }\n }}\n >\n
\n
\n \n
\n
\n \n {plan.name}\n \n {plan.badge && (\n \n {plan.badge}\n \n )}\n
\n

\n {plan.carrier} · {plan.description}\n

\n
\n
\n\n
\n
\n \n ${plan.employeeCostPerPaycheck}\n \n / paycheck\n
\n

\n Employer pays{' '}\n \n ${plan.employerCostPerMonth}/mo\n \n

\n
\n
\n\n {/* Plan Benefit Matrix Details */}\n
\n
\n Annual Deductible\n {plan.deductible}\n
\n
\n Out-of-Pocket Max\n {plan.outOfPocketMax}\n
\n
\n Primary / Specialist\n {plan.copayOrCoinsurance}\n
\n
\n HSA Company Seed\n 0\n ? 'text-success font-semibold tabular-nums'\n : 'text-muted-foreground font-medium'\n }\n >\n {plan.hsaSeed > 0 ? `$${plan.hsaSeed} / yr` : 'Not eligible'}\n \n
\n
\n\n {/* Plan Bullet Highlights */}\n
    \n {plan.highlights.map((highlight, i) => (\n
  • \n \n {highlight}\n
    • \n ))}\n
\n
\n )\n })}\n \n \n \n\n {/* Category 2: Dental Plan */}\n \n \n
\n
\n
\n \n
\n
\n 2. Dental Plan\n \n Preventive exams, cleanings, restorative treatments, and orthodontic benefits.\n \n
\n
\n \n 2 Plans + Waive\n \n
\n \n\n \n setSelectedDental(val)} className=\"gap-3.5\">\n {DENTAL_PLANS.map((plan) => {\n const isSelected = selectedDental === plan.id\n return (\n setSelectedDental(plan.id)}\n onKeyDown={(e) => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault()\n setSelectedDental(plan.id)\n }\n }}\n >\n
\n
\n \n
\n
\n \n {plan.name}\n \n {plan.badge && (\n \n {plan.badge}\n \n )}\n
\n

\n {plan.carrier} · {plan.description}\n

\n
\n
\n\n
\n
\n \n ${plan.employeeCostPerPaycheck}\n \n / paycheck\n
\n {plan.employerCostPerMonth > 0 ? (\n

\n Employer pays{' '}\n \n ${plan.employerCostPerMonth}/mo\n \n

\n ) : (\n

No payroll deduction

\n )}\n
\n
\n\n {plan.employeeCostPerPaycheck > 0 && (\n
\n
\n Annual Maximum\n {plan.annualMax}\n
\n
\n Preventive Cleanings\n {plan.preventive}\n
\n
\n Basic Services\n {plan.basic}\n
\n
\n Major & Orthodontics\n {plan.majorOrOrtho}\n
\n
\n )}\n
\n )\n })}\n \n \n \n\n {/* Category 3: Vision Plan */}\n \n \n
\n
\n
\n \n
\n
\n 3. Vision Plan\n \n Routine eye exams, designer frame allowances, contact lenses, and progressive lens discounts.\n \n
\n
\n \n 2 Plans + Waive\n \n
\n \n\n \n setSelectedVision(val)} className=\"gap-3.5\">\n {VISION_PLANS.map((plan) => {\n const isSelected = selectedVision === plan.id\n return (\n setSelectedVision(plan.id)}\n onKeyDown={(e) => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault()\n setSelectedVision(plan.id)\n }\n }}\n >\n
\n
\n \n
\n
\n \n {plan.name}\n \n {plan.badge && (\n \n {plan.badge}\n \n )}\n
\n

\n {plan.carrier} · {plan.description}\n

\n
\n
\n\n
\n
\n \n ${plan.employeeCostPerPaycheck}\n \n / paycheck\n
\n {plan.employerCostPerMonth > 0 ? (\n

\n Employer pays{' '}\n \n ${plan.employerCostPerMonth}/mo\n \n

\n ) : (\n

No payroll deduction

\n )}\n
\n
\n\n {plan.employeeCostPerPaycheck > 0 && (\n
\n
\n Annual Exam Copay\n {plan.examCopay}\n
\n
\n Frame Allowance\n {plan.frameAllowance}\n
\n
\n Prescription Lenses\n {plan.lenses}\n
\n
\n )}\n \n )\n })}\n \n \n \n\n {/* Category 4: 401(k) Retirement & Employer Match */}\n \n \n
\n
\n
\n \n
\n
\n 4. 401(k) Retirement & Employer Match\n \n Pre-tax salary deferrals with tiered 100% + 50% company matching formula.\n \n
\n
\n \n {maxMatchUnlocked ? 'Max Match Active' : 'Match Available'}\n \n
\n \n\n \n {/* Employer Match Callout Box */}\n
\n
\n \n
\n Company Match Formula\n

\n 100% match up to 4% + 50% match on next 2% ·{' '}\n Maximum $6,000 employer match unlocked!\n

\n
\n
\n\n
\n \n {maxMatchUnlocked ? (\n <>\n \n 100% Max Match Achieved ($6,000/yr)\n \n ) : (\n <>\n \n Leaving ${missedMatchAnnual.toLocaleString('en-US')}/yr on table\n \n )}\n \n
\n
\n\n {/* Interactive Slider Section */}\n
\n
\n
\n Your Pre-Tax Contribution Rate\n

\n Calculated from gross salary ($\n {paycheckGross.toLocaleString('en-US', {\n minimumFractionDigits: 2,\n maximumFractionDigits: 2,\n })}{' '}\n / semi-monthly paycheck)\n

\n
\n\n
\n
\n {k401Rate}%\n Contribution\n
\n \n ${k401EmployeePerPaycheck.toFixed(2)} / paycheck (${k401EmployeeAnnual.toLocaleString('en-US')}\n /yr)\n \n
\n
\n\n
\n \n `${val}% (${((annualSalary * val) / 100).toLocaleString('en-US', {\n style: 'currency',\n currency: 'USD',\n maximumFractionDigits: 0,\n })}/yr)`\n }\n onValueChange={(val) => setK401Rate(val[0])}\n />\n
\n
\n\n {/* 401(k) Financial Impact Breakdown */}\n
\n
\n Your Paycheck Deferral\n \n ${k401EmployeePerPaycheck.toFixed(2)}\n \n \n ${k401EmployeeAnnual.toLocaleString('en-US')} / year\n \n
\n\n
\n Employer Match Added\n \n +${k401EmployerPerPaycheck.toFixed(2)}\n \n \n ${k401EmployerAnnual.toLocaleString('en-US')} / year (Free Match)\n \n
\n\n
\n Total 401(k) Annual Savings\n \n ${(k401EmployeeAnnual + k401EmployerAnnual).toLocaleString('en-US')}\n \n 2026 IRS Cap: $23,500\n
\n
\n \n \n \n\n {/* Sticky Paycheck Impact Summary Box (Col 4) */}\n
\n \n \n
\n \n Paycheck Impact Summary\n \n \n Semi-Monthly\n \n
\n\n {/* Primary Highlight Metric 1: Total Employee Cost per Paycheck */}\n
\n Total Employee Benefit Cost\n
\n \n ${healthCostPerPaycheck.toFixed(2)}\n \n / pay period\n
\n

Pre-tax health, dental, and vision deductions

\n
\n\n {/* Primary Highlight Metric 2: Total Annual Employer Benefit Value */}\n
\n Total Annual Employer Value\n
\n \n $\n {totalEmployerAnnualValue.toLocaleString('en-US', {\n minimumFractionDigits: 2,\n maximumFractionDigits: 2,\n })}\n \n / year\n
\n

\n Includes company medical, dental, vision subsidies, HSA seed, match & insurance.\n

\n
\n \n\n \n \n\n {/* Itemized Paycheck Deductions */}\n
\n \n Employee Payroll Deductions\n \n\n
\n \n Medical ({currentMedical.name.split(' ')[0]} {currentMedical.name.split(' ')[1]})\n \n \n ${currentMedical.employeeCostPerPaycheck.toFixed(2)}\n \n
\n\n
\n \n Dental ({currentDental.name.split(' ')[0]} {currentDental.name.split(' ')[1]})\n \n \n ${currentDental.employeeCostPerPaycheck.toFixed(2)}\n \n
\n\n
\n \n Vision ({currentVision.name.split(' ')[0]} {currentVision.name.split(' ')[1]})\n \n \n ${currentVision.employeeCostPerPaycheck.toFixed(2)}\n \n
\n\n
\n Pre-Tax Health Total\n ${healthCostPerPaycheck.toFixed(2)}\n
\n\n
\n 401(k) Contribution ({k401Rate}%)\n \n ${k401EmployeePerPaycheck.toFixed(2)}\n \n
\n\n
\n Total Pre-Tax per Paycheck\n ${totalEmployeePerPaycheck.toFixed(2)}\n
\n\n
\n Est. Pre-Tax Tax Savings (~25%)\n \n -${estimatedTaxSavingsPerPaycheck.toFixed(2)}\n \n
\n\n
\n Est. Net Take-Home Impact\n -${netTakeHomeImpact.toFixed(2)}\n
\n
\n\n \n\n {/* Itemized Employer Annual Contributions */}\n
\n \n Employer Benefits Breakdown\n \n\n
\n Medical Subsidy\n \n ${(currentMedical.employerCostPerMonth * 12).toLocaleString('en-US')}/yr\n \n
\n\n
\n Dental Subsidy\n \n ${(currentDental.employerCostPerMonth * 12).toLocaleString('en-US')}/yr\n \n
\n\n
\n Vision Subsidy\n \n ${(currentVision.employerCostPerMonth * 12).toLocaleString('en-US')}/yr\n \n
\n\n {currentMedical.hsaSeed > 0 && (\n
\n HSA Annual Contribution\n \n ${currentMedical.hsaSeed.toLocaleString('en-US')}/yr\n \n
\n )}\n\n
\n 401(k) Employer Match\n \n ${k401EmployerAnnual.toLocaleString('en-US')}/yr\n \n
\n\n
\n Life, AD&D & Disability\n \n ${employerLifeDisabilityAnnual.toLocaleString('en-US')}/yr\n \n
\n
\n \n\n \n {!isSubmitted ? (\n setShowSignModal(true)}\n >\n \n Save Selections & Sign\n \n ) : (\n \n \n Elections Signed (Edit)\n \n )}\n\n

\n Annual elections lock on {deadlineDate}, 11:59 PM EST\n

\n \n \n
\n \n\n {/* Electronic Signature Confirmation Modal Dialog */}\n {showSignModal && (\n
\n
\n
\n
\n \n

Review & Sign Elective Enrollment

\n
\n

\n Please verify your selections below before electronically signing for the 2026-2027 plan year.\n

\n
\n\n
\n
\n Employee:\n \n {employeeName} ({coverageTier})\n \n
\n
\n Medical Plan:\n {currentMedical.name}\n
\n
\n Dental Plan:\n {currentDental.name}\n
\n
\n Vision Plan:\n {currentVision.name}\n
\n
\n 401(k) Contribution:\n \n {k401Rate}% (${k401EmployeePerPaycheck.toFixed(2)} / paycheck)\n \n
\n
\n Total Deduction per Paycheck:\n ${totalEmployeePerPaycheck.toFixed(2)}\n
\n
\n\n
\n \n
\n\n
\n \n \n \n Confirm & Submit Signature\n \n
\n
\n
\n )}\n \n )\n}\n", "type": "registry:page", "target": "~/components/blocks/BenefitsEnrollmentPortal.tsx" } ], "dependencies": [ "lucide-react" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/react/badge.json", "https://uipkge.dev/r/react/button.json", "https://uipkge.dev/r/react/card.json", "https://uipkge.dev/r/react/radio-group.json", "https://uipkge.dev/r/react/separator.json", "https://uipkge.dev/r/react/slider.json" ], "description": "Employee benefits open enrollment portal with interactive medical, dental, and vision plan comparisons, customizable 401(k) contribution slider with real-time employer match calculation, and a sticky paycheck impact summary.", "categories": [ "hr", "app", "form" ] }