{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "commute-reimbursement-claims", "title": "Commute Reimbursement Claims", "type": "registry:block", "files": [ { "path": "packages/registry-react/blocks/commute-reimbursement-claims/CommuteReimbursementClaims.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport {\n Building2,\n Calendar,\n Car,\n Check,\n CheckCircle2,\n Clock,\n DollarSign,\n Download,\n Eye,\n FileCheck,\n FileText,\n Paperclip,\n Plus,\n Receipt,\n RotateCcw,\n Search,\n Send,\n ShieldCheck,\n Train,\n TrendingUp,\n Upload,\n Wallet,\n X,\n Zap,\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 {\n Dialog,\n DialogContent,\n DialogDescription,\n DialogFooter,\n DialogHeader,\n DialogTitle,\n} from '@/components/ui/dialog'\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from '@/components/ui/dropdown-menu'\nimport { Input } from '@/components/ui/input'\nimport { Progress } from '@/components/ui/progress'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'\nimport { Separator } from '@/components/ui/separator'\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'\n\nexport type CommuteCategory = 'transit' | 'parking' | 'mileage' | 'ev_charging'\nexport type ClaimStatus = 'reimbursed' | 'pending'\n\nexport interface ExpenseClaim {\n id: string\n date: string\n category: CommuteCategory\n categoryLabel: string\n description: string\n provider: string\n amount: number\n status: ClaimStatus\n statusLabel: string\n receiptFileName: string\n receiptFileSize: string\n receiptDate: string\n notes: string\n}\n\nexport interface CommuteReimbursementClaimsProps {\n title?: string\n policyText?: string\n claimPeriod?: string\n className?: string\n}\n\nconst categoryMeta: Record<\n CommuteCategory,\n {\n label: string\n shortLabel: string\n badgeClass: string\n icon: React.ComponentType<{ className?: string }>\n irsLimitInfo: string\n }\n> = {\n transit: {\n label: 'Public Transit Pass: BART/Metro',\n shortLabel: 'Public Transit',\n badgeClass: 'bg-info/10 text-info border-info/20',\n icon: Train,\n irsLimitInfo: 'BART, Caltrain, Metro, Subway & Commuter Bus passes (IRC § 132(f))',\n },\n parking: {\n label: 'Parking (Station & Garage)',\n shortLabel: 'Parking',\n badgeClass: 'bg-chart-1/10 text-chart-1 border-chart-1/20',\n icon: Building2,\n irsLimitInfo: 'Park-and-ride commuter lots and near-office parking facilities',\n },\n mileage: {\n label: 'Mileage (IRS $0.67/mi)',\n shortLabel: 'Mileage',\n badgeClass: 'bg-warning/10 text-warning border-warning/20',\n icon: Car,\n irsLimitInfo: '2026 IRS standard rate: $0.67 per business/commuter detour mile',\n },\n ev_charging: {\n label: 'EV Public Charging',\n shortLabel: 'EV Charging',\n badgeClass: 'bg-chart-2/10 text-chart-2 border-chart-2/20',\n icon: Zap,\n irsLimitInfo: 'Level 2 & DC fast charging at public networks & workplace chargers',\n },\n}\n\nconst statusStyles: Record = {\n reimbursed: 'bg-success/10 text-success border-success/20',\n pending: 'bg-warning/10 text-warning border-warning/20',\n}\n\nconst statusDots: Record = {\n reimbursed: 'bg-success',\n pending: 'bg-warning',\n}\n\nconst initialClaimsData: ExpenseClaim[] = [\n {\n id: 'CLM-8041',\n date: 'Aug 18, 2026',\n category: 'transit',\n categoryLabel: 'Public Transit',\n description: 'Monthly BART Clipper Card Pass',\n provider: 'Bay Area Rapid Transit (BART)',\n amount: 120.0,\n status: 'reimbursed',\n statusLabel: 'Reimbursed on Payroll',\n receiptFileName: 'bart-clipper-pass-aug2026.pdf',\n receiptFileSize: '340 KB',\n receiptDate: 'Aug 18, 2026 · 08:14 AM',\n notes: 'Monthly pass reload for Embarcadero ↔ Millbrae commuter route.',\n },\n {\n id: 'CLM-7982',\n date: 'Aug 12, 2026',\n category: 'transit',\n categoryLabel: 'Public Transit',\n description: 'San Francisco Caltrain Monthly Pass',\n provider: 'Caltrain Peninsula Corridor',\n amount: 60.5,\n status: 'reimbursed',\n statusLabel: 'Reimbursed on Payroll',\n receiptFileName: 'caltrain-zone1-3-pass.pdf',\n receiptFileSize: '412 KB',\n receiptDate: 'Aug 12, 2026 · 07:45 AM',\n notes: 'Zone 1 to Zone 3 Caltrain commuter pass for headquarters travel.',\n },\n {\n id: 'CLM-8104',\n date: 'Aug 08, 2026',\n category: 'parking',\n categoryLabel: 'Parking',\n description: 'Downtown Parking Garage',\n provider: 'SOMA Park Management Corp.',\n amount: 65.0,\n status: 'pending',\n statusLabel: 'Pending Approval',\n receiptFileName: 'soma-garage-monthly-receipt.pdf',\n receiptFileSize: '185 KB',\n receiptDate: 'Aug 08, 2026 · 09:30 AM',\n notes: 'Commuter parking space #204 during quarterly planning week.',\n },\n {\n id: 'CLM-7729',\n date: 'Aug 03, 2026',\n category: 'ev_charging',\n categoryLabel: 'EV Charging',\n description: 'EV Supercharger Network',\n provider: 'EVgo / ChargePoint Public Hub',\n amount: 42.0,\n status: 'reimbursed',\n statusLabel: 'Reimbursed on Payroll',\n receiptFileName: 'evgo-charge-sessions-aug.pdf',\n receiptFileSize: '520 KB',\n receiptDate: 'Aug 03, 2026 · 06:20 PM',\n notes: '4x workplace Level-2 charge sessions during sprint week.',\n },\n]\n\nexport function CommuteReimbursementClaims({\n title = 'Commute & Transit Expense Claims',\n policyText = 'Monthly Commuter Benefit Program · Up to $315.00/mo IRS pre-tax limit',\n claimPeriod = 'August 2026',\n className,\n}: CommuteReimbursementClaimsProps) {\n const [claims, setClaims] = React.useState(initialClaimsData)\n\n // Form State\n const [formCategory, setFormCategory] = React.useState('transit')\n const [formDate, setFormDate] = React.useState('2026-08-20')\n const [formProvider, setFormProvider] = React.useState('BART Clipper Card')\n const [formDescription, setFormDescription] = React.useState('Monthly BART Clipper Card Pass')\n const [formAmount, setFormAmount] = React.useState('120.00')\n const [formMiles, setFormMiles] = React.useState('45')\n const [formAttachedReceipt, setFormAttachedReceipt] = React.useState<{ name: string; size: string } | null>({\n name: 'clipper-reload-receipt.pdf',\n size: '240 KB',\n })\n const [formSubmittedNotice, setFormSubmittedNotice] = React.useState(false)\n const [recentlySubmittedClaimId, setRecentlySubmittedClaimId] = React.useState('')\n\n // Filter State\n const [searchQuery, setSearchQuery] = React.useState('')\n const [categoryFilter, setCategoryFilter] = React.useState('all')\n const [statusFilter, setStatusFilter] = React.useState('all')\n\n // Receipt Modal State\n const [isReceiptModalOpen, setIsReceiptModalOpen] = React.useState(false)\n const [selectedClaim, setSelectedClaim] = React.useState(initialClaimsData[0])\n\n const openReceipt = (claim: ExpenseClaim) => {\n setSelectedClaim(claim)\n setIsReceiptModalOpen(true)\n }\n\n const handleCategoryChange = (val: CommuteCategory) => {\n setFormCategory(val)\n if (val === 'transit') {\n setFormProvider('BART Clipper Card')\n setFormDescription('Monthly BART Clipper Card Pass')\n setFormAmount('120.00')\n } else if (val === 'parking') {\n setFormProvider('Downtown Station Garage')\n setFormDescription('Monthly Station Parking Permit')\n setFormAmount('65.00')\n } else if (val === 'mileage') {\n setFormProvider('Personal Vehicle (IRS Standard Rate)')\n setFormDescription('Commute detour travel to client site')\n const miles = parseFloat(formMiles) || 0\n setFormAmount((miles * 0.67).toFixed(2))\n } else if (val === 'ev_charging') {\n setFormProvider('EVgo Fast Charging')\n setFormDescription('Workplace EV public charging sessions')\n setFormAmount('42.00')\n }\n }\n\n const handleMilesChange = (val: string) => {\n setFormMiles(val)\n const miles = parseFloat(val) || 0\n setFormAmount((miles * 0.67).toFixed(2))\n }\n\n const handleAttachSampleReceipt = () => {\n setFormAttachedReceipt({\n name: `receipt-${formCategory}-${Date.now().toString().slice(-4)}.pdf`,\n size: '318 KB',\n })\n }\n\n const handleRemoveReceipt = () => {\n setFormAttachedReceipt(null)\n }\n\n const handleSubmitClaim = () => {\n const parsedAmt = parseFloat(formAmount) || 0\n if (parsedAmt <= 0) return\n\n const meta = categoryMeta[formCategory]\n const newId = `CLM-${Math.floor(8200 + Math.random() * 700)}`\n const newClaim: ExpenseClaim = {\n id: newId,\n date: 'Aug 21, 2026',\n category: formCategory,\n categoryLabel: meta.shortLabel,\n description: formDescription || meta.label,\n provider: formProvider || 'Transit Provider',\n amount: parsedAmt,\n status: 'pending',\n statusLabel: 'Pending Approval',\n receiptFileName: formAttachedReceipt?.name || 'commute-claim-receipt.pdf',\n receiptFileSize: formAttachedReceipt?.size || '290 KB',\n receiptDate: 'Aug 21, 2026 · Just now',\n notes: `Submitted via Commuter Benefit Portal for ${claimPeriod}.`,\n }\n\n setClaims((prev) => [newClaim, ...prev])\n setRecentlySubmittedClaimId(newId)\n setFormSubmittedNotice(true)\n\n setTimeout(() => {\n setFormSubmittedNotice(false)\n }, 6000)\n }\n\n const handleResetForm = () => {\n setFormCategory('transit')\n setFormDate('2026-08-20')\n setFormProvider('BART Clipper Card')\n setFormDescription('Monthly BART Clipper Card Pass')\n setFormAmount('120.00')\n setFormMiles('45')\n setFormAttachedReceipt({\n name: 'clipper-reload-receipt.pdf',\n size: '240 KB',\n })\n setFormSubmittedNotice(false)\n }\n\n const isFiltered = searchQuery.trim() !== '' || categoryFilter !== 'all' || statusFilter !== 'all'\n\n const filteredClaims = React.useMemo(() => {\n const q = searchQuery.trim().toLowerCase()\n return claims.filter((claim) => {\n const matchCat = categoryFilter === 'all' || claim.category === categoryFilter\n const matchStatus = statusFilter === 'all' || claim.status === statusFilter\n const matchQuery =\n !q ||\n claim.id.toLowerCase().includes(q) ||\n claim.description.toLowerCase().includes(q) ||\n claim.provider.toLowerCase().includes(q) ||\n claim.categoryLabel.toLowerCase().includes(q)\n return matchCat && matchStatus && matchQuery\n })\n }, [claims, searchQuery, categoryFilter, statusFilter])\n\n const resetFilters = () => {\n setSearchQuery('')\n setCategoryFilter('all')\n setStatusFilter('all')\n }\n\n const scrollToSubmitForm = () => {\n const el = document.getElementById('commute-submit-form')\n if (el) {\n el.scrollIntoView({ behavior: 'smooth', block: 'start' })\n }\n }\n\n const selectedCategoryMeta = categoryMeta[selectedClaim.category]\n const SelectedCategoryIcon = selectedCategoryMeta?.icon || Train\n\n return (\n
\n {/* Header */}\n
\n
\n
\n

{title}

\n \n \n {claimPeriod}\n \n
\n

{policyText}

\n
\n\n
\n \n \n
\n
\n\n {/* 4 Monthly Benefit Metric Cards */}\n
\n {/* 1. Monthly Allowance Available */}\n \n \n
\n

Monthly Allowance

\n
\n \n
\n
\n

$315.00 / mo

\n
\n IRS Pre-tax limit\n $69.50 left\n
\n \n \n\n {/* 2. Claimed This Month */}\n \n \n
\n

Claimed This Month

\n
\n \n
\n
\n

$245.50

\n
\n \n

$245.50 / $315.00 · 78% utilized

\n
\n \n \n\n {/* 3. Reimbursed YTD */}\n \n \n
\n

Reimbursed YTD

\n
\n \n
\n
\n

$1,890.00

\n
\n \n \n 100% Settled\n \n · 6 claims in 2026\n
\n \n \n\n {/* 4. Pending Review */}\n \n \n
\n

Pending Review

\n
\n \n
\n
\n

\n 1 Claim · $65.00\n

\n

Est. payout on Sep 1st payroll

\n \n \n
\n\n {/* Main 2-Column Portal Section */}\n
\n {/* Left Column: Submit Claim Interactive Card & Policy Card */}\n
\n {/* Submit Claim Card */}\n \n \n
\n
\n Submit Commute Claim\n \n File transit pass, parking, mileage, or EV charging for monthly reimbursement.\n \n
\n \n {claimPeriod}\n \n
\n \n\n \n {/* Submission Alert Notice */}\n {formSubmittedNotice && (\n
\n \n
\n

Claim {recentlySubmittedClaimId} submitted successfully!

\n

\n Itemized receipt received. Your claim has been added to pending payroll review.\n

\n
\n
\n )}\n\n {/* Category Selector */}\n
\n \n \n

{categoryMeta[formCategory].irsLimitInfo}

\n
\n\n {/* Date & Provider */}\n
\n
\n \n setFormDate(e.target.value)}\n type=\"date\"\n className=\"h-9 text-xs\"\n />\n
\n\n
\n \n setFormProvider(e.target.value)}\n placeholder=\"e.g. BART, Caltrain, EVgo\"\n className=\"h-9 text-xs\"\n />\n
\n
\n\n {/* Description */}\n
\n \n setFormDescription(e.target.value)}\n placeholder=\"e.g. Monthly Clipper Pass · Embarcadero to Millbrae\"\n className=\"h-9 text-xs\"\n />\n
\n\n {/* Mileage Calculation helper if mileage selected */}\n {formCategory === 'mileage' && (\n
\n
\n IRS Standard Mileage Rate\n \n $0.67 / mile\n \n
\n
\n
\n \n handleMilesChange(e.target.value)}\n type=\"number\"\n min=\"1\"\n step=\"1\"\n className=\"mt-1 h-8 text-xs tabular-nums\"\n />\n
\n
\n Calculated Total\n

${formAmount}

\n
\n
\n
\n )}\n\n {/* Claim Amount Input */}\n
\n \n
\n \n setFormAmount(e.target.value)}\n type=\"text\"\n placeholder=\"0.00\"\n className=\"h-9 pl-8 text-xs font-semibold tabular-nums\"\n />\n
\n
\n Maximum pre-tax monthly cap: $315.00\n Direct Payroll Payout\n
\n
\n\n {/* Receipt Dropzone Placeholder */}\n
\n \n\n {/* Attached file view */}\n {formAttachedReceipt ? (\n
\n
\n
\n \n
\n
\n

{formAttachedReceipt.name}

\n

\n {formAttachedReceipt.size} · Itemized proof attached\n

\n
\n
\n
\n \n \n Valid\n \n \n \n Remove receipt\n \n
\n
\n ) : (\n /* Dropzone container */\n \n
\n \n
\n

Click to upload or drag receipt file

\n

\n PDF, PNG, or JPG up to 10MB (Itemized proof required)\n

\n \n )}\n
\n \n\n \n \n \n \n Submit Claim\n \n \n \n\n {/* Compliance & IRS Rules Notice Card */}\n \n \n
\n \n Commuter Benefit Program Policy\n
\n \n \n

\n Expenses are reimbursed under Section 132(f) Qualified Transportation Fringe Benefits. Reimbursements\n are disbursed directly into employee payroll on the 1st of every month.\n

\n
\n
\n \n Monthly maximum pre-tax election: $315.00\n
\n
\n \n Receipts must reflect date, transit authority, and paid amount\n
\n
\n \n Deadline for current month submissions: 25th of month\n
\n
\n \n \n
\n\n {/* Right Column: Expense Claims History Table */}\n
\n \n \n
\n
\n Expense Claims History\n \n Itemized ledger of submitted commuter, transit, and EV expenses.\n \n
\n \n {claims.length} Total Claims\n \n
\n \n\n \n {/* Filter & Search Toolbar */}\n
\n
\n \n setSearchQuery(e.target.value)}\n type=\"search\"\n placeholder=\"Search claims, ID, route...\"\n className=\"h-8 pl-8 text-xs\"\n />\n
\n\n
\n {/* Category Filter */}\n \n\n {/* Status Filter */}\n \n\n {isFiltered && (\n \n )}\n
\n
\n\n {/* Table */}\n
\n
\n \n \n \n Claim ID\n Date\n Category\n Description & Provider\n Amount\n Status\n Receipt\n \n Actions\n \n \n \n \n {filteredClaims.map((claim) => {\n const catMeta = categoryMeta[claim.category]\n const CatIcon = catMeta?.icon || Train\n return (\n \n {/* Claim ID */}\n {claim.id}\n\n {/* Date */}\n \n {claim.date}\n \n\n {/* Category Badge */}\n \n \n \n {claim.categoryLabel}\n \n \n\n {/* Description & Provider */}\n \n
\n

{claim.description}

\n

{claim.provider}

\n
\n \n\n {/* Amount */}\n \n ${claim.amount.toFixed(2)}\n \n\n {/* Status Badge */}\n \n \n \n {claim.statusLabel}\n \n \n\n {/* Receipt Button */}\n \n openReceipt(claim)}\n >\n \n View\n \n \n\n {/* Actions Dropdown */}\n \n \n \n \n \n Actions for {claim.id}\n \n \n \n openReceipt(claim)}\n >\n \n Inspect Receipt\n \n \n \n Policy Audit Log\n \n \n \n \n Download Voucher\n \n \n \n \n \n )\n })}\n\n {/* Empty state */}\n {filteredClaims.length === 0 && (\n \n \n
\n \n

No commute claims found

\n

\n Try resetting your category or status filter\n

\n \n
\n \n \n )}\n \n
\n
\n\n {/* Table Summary Footer */}\n
\n

\n Showing {filteredClaims.length} of{' '}\n {claims.length} claims\n

\n
\n \n Filtered Total:{' '}\n \n ${filteredClaims.reduce((acc, c) => acc + c.amount, 0).toFixed(2)}\n \n \n
\n
\n
\n \n \n
\n
\n\n {/* Receipt Details Modal Dialog */}\n \n \n \n
\n
\n Commute Receipt Voucher\n \n IRS-compliant proof of transit and commuter benefit claim.\n \n
\n \n {selectedClaim.id}\n \n
\n \n\n
\n {/* Itemized Receipt Box */}\n
\n
\n
\n \n {selectedClaim.provider}\n
\n \n {selectedClaim.statusLabel}\n \n
\n\n
\n
\n Transaction Date\n {selectedClaim.receiptDate}\n
\n
\n Benefit Category\n {selectedClaim.categoryLabel}\n
\n
\n Line Item Description\n {selectedClaim.description}\n
\n
\n Employee Commute Note\n \"{selectedClaim.notes}\"\n
\n
\n\n \n\n {/* Amount Breakdown */}\n
\n
\n Base Fare / Charge\n ${selectedClaim.amount.toFixed(2)}\n
\n
\n Pre-Tax IRS Exemption (IRC § 132f)\n -$0.00 (Tax Free)\n
\n
\n Total Reimbursable Amount\n ${selectedClaim.amount.toFixed(2)}\n
\n
\n\n {/* Attached File Strip */}\n
\n
\n \n {selectedClaim.receiptFileName}\n ({selectedClaim.receiptFileSize})\n
\n \n \n Verified\n \n
\n
\n
\n\n \n \n setIsReceiptModalOpen(false)}\n >\n \n Download Receipt PDF\n \n \n \n \n
\n )\n}\n", "type": "registry:block", "target": "~/components/blocks/CommuteReimbursementClaims.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/dialog.json", "https://uipkge.dev/r/react/dropdown-menu.json", "https://uipkge.dev/r/react/input.json", "https://uipkge.dev/r/react/progress.json", "https://uipkge.dev/r/react/select.json", "https://uipkge.dev/r/react/separator.json", "https://uipkge.dev/r/react/table.json" ], "description": "Monthly commuter transit pass, mileage, and EV charging expense claim reimbursement portal with IRS pre-tax allowance metrics, claim submission form with receipt dropzone, and claims history ledger.", "categories": [ "hr", "app", "finance" ] }