{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "commute-reimbursement-claims", "title": "Commute Reimbursement Claims", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/commute-reimbursement-claims/commute-reimbursement-claims.component.ts", "content": "// Monthly commuter transit pass, mileage, and EV charging expense claim reimbursement\n// portal with IRS pre-tax allowance metrics, claim submission form with receipt dropzone,\n// and claims history ledger. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input, computed, signal } from '@angular/core'\nimport {\n Building2,\n Calendar,\n Car,\n Check,\n CheckCircle2,\n Clock,\n DollarSign,\n Download,\n Eye,\n FileCheck,\n FileText,\n LucideAngularModule,\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-angular'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport {\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardFooterComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n} from '@/ui/card/card.component'\nimport {\n UiDialogComponent,\n UiDialogContentComponent,\n UiDialogDescriptionComponent,\n UiDialogFooterComponent,\n UiDialogHeaderComponent,\n UiDialogTitleComponent,\n} from '@/ui/dialog/dialog.component'\nimport {\n UiDropdownMenuComponent,\n UiDropdownMenuContentComponent,\n UiDropdownMenuItemComponent,\n UiDropdownMenuSeparatorComponent,\n UiDropdownMenuTriggerComponent,\n} from '@/ui/dropdown-menu/dropdown-menu.component'\nimport { UiInputComponent } from '@/ui/input/input.component'\nimport { UiProgressComponent } from '@/ui/progress/progress.component'\nimport {\n UiSelectComponent,\n UiSelectContentComponent,\n UiSelectItemComponent,\n UiSelectTriggerComponent,\n UiSelectValueComponent,\n} from '@/ui/select/select.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\nimport {\n UiTableBodyComponent,\n UiTableCellComponent,\n UiTableComponent,\n UiTableHeadComponent,\n UiTableHeaderComponent,\n UiTableRowComponent,\n} from '@/ui/table/table.component'\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\nconst categoryBadge: Record = {\n transit: 'bg-info/10 text-info border-info/20',\n parking: 'bg-chart-1/10 text-chart-1 border-chart-1/20',\n mileage: 'bg-warning/10 text-warning border-warning/20',\n ev_charging: 'bg-chart-2/10 text-chart-2 border-chart-2/20',\n}\n\nconst categoryIrsInfo: Record = {\n transit: 'BART, Caltrain, Metro, Subway & Commuter Bus passes (IRC § 132(f))',\n parking: 'Park-and-ride commuter lots and near-office parking facilities',\n mileage: '2026 IRS standard rate: $0.67 per business/commuter detour mile',\n ev_charging: 'Level 2 & DC fast charging at public networks & workplace chargers',\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 defaultClaims: 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\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-commute-reimbursement-claims, [ui-commute-reimbursement-claims]',\n standalone: true,\n // React renders the root
itself: the host stays out of layout and `class` goes to the root.\n host: { '[attr.class]': '\"contents\"' },\n imports: [\n LucideAngularModule,\n UiBadgeComponent,\n UiButtonComponent,\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardFooterComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n UiDialogComponent,\n UiDialogContentComponent,\n UiDialogDescriptionComponent,\n UiDialogFooterComponent,\n UiDialogHeaderComponent,\n UiDialogTitleComponent,\n UiDropdownMenuComponent,\n UiDropdownMenuContentComponent,\n UiDropdownMenuItemComponent,\n UiDropdownMenuSeparatorComponent,\n UiDropdownMenuTriggerComponent,\n UiInputComponent,\n UiProgressComponent,\n UiSelectComponent,\n UiSelectContentComponent,\n UiSelectItemComponent,\n UiSelectTriggerComponent,\n UiSelectValueComponent,\n UiSeparatorComponent,\n UiTableBodyComponent,\n UiTableCellComponent,\n UiTableComponent,\n UiTableHeadComponent,\n UiTableHeaderComponent,\n UiTableRowComponent,\n ],\n template: `\n
\n \n
\n
\n
\n

{{ title }}

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

{{ policyText }}

\n
\n\n
\n \n \n
\n
\n\n \n
\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
\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
\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
\n
\n
\n

Pending Review

\n
\n \n
\n
\n

1 Claim · $65.00

\n

Est. payout on Sep 1st payroll

\n
\n
\n
\n\n \n
\n \n
\n
\n
\n
\n
\n

Submit Commute Claim

\n

\n File transit pass, parking, mileage, or EV charging for monthly reimbursement.\n

\n
\n {{ claimPeriod }}\n
\n
\n\n
\n @if (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
\n \n \n \n \n \n \n \n Public Transit Pass: BART/Metro\n \n \n \n \n \n Parking (Station & Garage)\n \n \n \n \n \n Mileage (IRS $0.67/mi)\n \n \n \n \n \n EV Public Charging\n \n \n \n \n

{{ categoryIrsInfo(formCategory()) }}

\n
\n\n
\n
\n \n \n
\n
\n \n \n
\n
\n\n
\n \n \n
\n\n @if (formCategory() === 'mileage') {\n
\n
\n IRS Standard Mileage Rate\n $0.67 / mile\n
\n
\n
\n \n \n
\n
\n Calculated Total\n

\\${{ formAmount() }}

\n
\n
\n
\n }\n\n
\n \n
\n \n \n
\n
\n Maximum pre-tax monthly cap: $315.00\n Direct Payroll Payout\n
\n
\n\n
\n \n @if (formAttachedReceipt(); as receipt) {\n \n
\n \n \n
\n
\n

{{ receipt.name }}

\n

{{ receipt.size }} · Itemized proof attached

\n
\n
\n
\n \n \n Valid\n \n \n \n Remove receipt\n \n
\n
\n } @else {\n \n
\n \n
\n

Click to upload or drag receipt file

\n

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

\n \n }\n
\n
\n\n
\n \n \n \n Submit Claim\n \n
\n
\n\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 \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 \n
\n \n \n
\n\n
\n \n \n \n All Categories\n Public Transit\n Parking\n Mileage\n EV Charging\n \n \n\n \n \n \n All Statuses\n Reimbursed\n Pending\n \n \n\n @if (isFiltered()) {\n \n }\n
\n
\n\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n @for (claim of filteredClaims(); track claim.id) {\n \n \n \n \n \n \n \\${{ claim.amount.toFixed(2) }}\n \n \n \n \n \n }\n @if (filteredClaims().length === 0) {\n \n \n \n }\n \n
Claim IDDateCategoryDescription & ProviderAmountStatusReceipt\n Actions\n
{{ claim.id }}\n {{ claim.date }}\n \n \n @switch (claim.category) {\n @case ('transit') {\n \n }\n @case ('parking') {\n \n }\n @case ('mileage') {\n \n }\n @default {\n \n }\n }\n {{ claim.categoryLabel }}\n \n \n
\n

{{ claim.description }}

\n

{{ claim.provider }}

\n
\n 		\n \n \n {{ claim.statusLabel }}\n \n \n \n \n View\n \n \n \n \n \n Actions for {{ claim.id }}\n \n \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

No commute claims found

\n

Try resetting your category or status filter

\n \n Reset filters\n \n
\n
\n
\n\n \n

\n Showing {{ filteredClaims().length }} of\n {{ claims().length }} claims\n

\n
\n \n Filtered Total:\n \\${{ filteredTotal().toFixed(2) }}\n \n
\n
\n
\n
\n \n \n \n\n \n \n \n
\n
\n
\n

Commute Receipt Voucher

\n

IRS-compliant proof of transit and commuter benefit claim.

\n
\n {{ selectedClaim().id }}\n
\n
\n\n
\n
\n
\n
\n @switch (selectedClaim().category) {\n @case ('transit') {\n \n }\n @case ('parking') {\n \n }\n @case ('mileage') {\n \n }\n @default {\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
\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
\n
\n \n {{ selectedClaim().receiptFileName }}\n ({{ selectedClaim().receiptFileSize }})\n
\n \n \n Verified\n \n
\n
\n
\n\n
\n \n \n \n Download Receipt PDF\n \n
\n \n \n \n `,\n})\nexport class UiCommuteReimbursementClaimsComponent {\n protected readonly Building2 = Building2\n protected readonly Calendar = Calendar\n protected readonly Car = Car\n protected readonly Check = Check\n protected readonly CheckCircle2 = CheckCircle2\n protected readonly Clock = Clock\n protected readonly DollarSign = DollarSign\n protected readonly Download = Download\n protected readonly Eye = Eye\n protected readonly FileCheck = FileCheck\n protected readonly FileText = FileText\n protected readonly Paperclip = Paperclip\n protected readonly Plus = Plus\n protected readonly Receipt = Receipt\n protected readonly RotateCcw = RotateCcw\n protected readonly Search = Search\n protected readonly Send = Send\n protected readonly ShieldCheck = ShieldCheck\n protected readonly Train = Train\n protected readonly TrendingUp = TrendingUp\n protected readonly Upload = Upload\n protected readonly Wallet = Wallet\n protected readonly X = X\n protected readonly Zap = Zap\n\n @Input() title = 'Commute & Transit Expense Claims'\n @Input() policyText = 'Monthly Commuter Benefit Program · Up to $315.00/mo IRS pre-tax limit'\n @Input() claimPeriod = 'August 2026'\n @Input() set initialClaims(v: ExpenseClaim[] | undefined) {\n if (v) {\n this.claims.set(v.map((c) => ({ ...c })))\n if (v.length > 0) this.selectedClaim.set({ ...v[0] })\n }\n }\n @Input('class') className?: string\n\n readonly claims = signal(defaultClaims.map((c) => ({ ...c })))\n\n readonly formCategory = signal('transit')\n readonly formDate = signal('2026-08-20')\n readonly formProvider = signal('BART Clipper Card')\n readonly formDescription = signal('Monthly BART Clipper Card Pass')\n readonly formAmount = signal('120.00')\n readonly formMiles = signal('45')\n readonly formAttachedReceipt = signal<{ name: string; size: string } | null>({\n name: 'clipper-reload-receipt.pdf',\n size: '240 KB',\n })\n readonly formSubmittedNotice = signal(false)\n readonly recentlySubmittedClaimId = signal('')\n\n readonly searchQuery = signal('')\n readonly categoryFilter = signal('all')\n readonly statusFilter = signal('all')\n\n readonly isReceiptModalOpen = signal(false)\n readonly selectedClaim = signal({ ...defaultClaims[0] })\n\n readonly isFiltered = computed(() => {\n return this.searchQuery().trim() !== '' || this.categoryFilter() !== 'all' || this.statusFilter() !== 'all'\n })\n\n readonly filteredClaims = computed(() => {\n const q = this.searchQuery().trim().toLowerCase()\n return this.claims().filter((claim) => {\n const matchCat = this.categoryFilter() === 'all' || claim.category === this.categoryFilter()\n const matchStatus = this.statusFilter() === 'all' || claim.status === this.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 })\n\n readonly filteredTotal = computed(() => this.filteredClaims().reduce((acc, c) => acc + c.amount, 0))\n\n get rootClass(): string {\n return cn('w-full space-y-6', this.className)\n }\n\n categoryBadgeClass(cat: CommuteCategory): string {\n return categoryBadge[cat]\n }\n\n categoryIrsInfo(cat: CommuteCategory): string {\n return categoryIrsInfo[cat]\n }\n\n statusClass(status: ClaimStatus): string {\n return statusStyles[status]\n }\n\n statusDot(status: ClaimStatus): string {\n return cn('mr-1.5 size-1.5 rounded-full', statusDots[status])\n }\n\n parseAmount(): number {\n return parseFloat(this.formAmount()) || 0\n }\n\n openReceipt(claim: ExpenseClaim): void {\n this.selectedClaim.set(claim)\n this.isReceiptModalOpen.set(true)\n }\n\n handleCategoryChange(val: string): void {\n const next = val as CommuteCategory\n this.formCategory.set(next)\n if (next === 'transit') {\n this.formProvider.set('BART Clipper Card')\n this.formDescription.set('Monthly BART Clipper Card Pass')\n this.formAmount.set('120.00')\n } else if (next === 'parking') {\n this.formProvider.set('Downtown Station Garage')\n this.formDescription.set('Monthly Station Parking Permit')\n this.formAmount.set('65.00')\n } else if (next === 'mileage') {\n this.formProvider.set('Personal Vehicle (IRS Standard Rate)')\n this.formDescription.set('Commute detour travel to client site')\n this.updateMileageAmount()\n } else if (next === 'ev_charging') {\n this.formProvider.set('EVgo Fast Charging')\n this.formDescription.set('Workplace EV public charging sessions')\n this.formAmount.set('42.00')\n }\n }\n\n handleMilesInput(val: string): void {\n this.formMiles.set(val)\n this.updateMileageAmount()\n }\n\n updateMileageAmount(): void {\n const miles = parseFloat(this.formMiles()) || 0\n this.formAmount.set((miles * 0.67).toFixed(2))\n }\n\n handleAttachSampleReceipt(): void {\n this.formAttachedReceipt.set({\n name: `receipt-${this.formCategory()}-${Date.now().toString().slice(-4)}.pdf`,\n size: '318 KB',\n })\n }\n\n handleRemoveReceipt(): void {\n this.formAttachedReceipt.set(null)\n }\n\n handleSubmitClaim(): void {\n const parsedAmt = parseFloat(this.formAmount()) || 0\n if (parsedAmt <= 0) return\n const meta: Record = {\n transit: 'Public Transit',\n parking: 'Parking',\n mileage: 'Mileage',\n ev_charging: 'EV Charging',\n }\n const fallbackLabel: Record = {\n transit: 'Public Transit Pass: BART/Metro',\n parking: 'Parking (Station & Garage)',\n mileage: 'Mileage (IRS $0.67/mi)',\n ev_charging: 'EV Public Charging',\n }\n const cat = this.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: cat,\n categoryLabel: meta[cat],\n description: this.formDescription() || fallbackLabel[cat],\n provider: this.formProvider() || 'Transit Provider',\n amount: parsedAmt,\n status: 'pending',\n statusLabel: 'Pending Approval',\n receiptFileName: this.formAttachedReceipt()?.name || 'commute-claim-receipt.pdf',\n receiptFileSize: this.formAttachedReceipt()?.size || '290 KB',\n receiptDate: 'Aug 21, 2026 · Just now',\n notes: `Submitted via Commuter Benefit Portal for ${this.claimPeriod}.`,\n }\n this.claims.update((prev) => [newClaim, ...prev])\n this.recentlySubmittedClaimId.set(newId)\n this.formSubmittedNotice.set(true)\n setTimeout(() => this.formSubmittedNotice.set(false), 6000)\n }\n\n handleResetForm(): void {\n this.formCategory.set('transit')\n this.formDate.set('2026-08-20')\n this.formProvider.set('BART Clipper Card')\n this.formDescription.set('Monthly BART Clipper Card Pass')\n this.formAmount.set('120.00')\n this.formMiles.set('45')\n this.formAttachedReceipt.set({ name: 'clipper-reload-receipt.pdf', size: '240 KB' })\n this.formSubmittedNotice.set(false)\n }\n\n resetFilters(): void {\n this.searchQuery.set('')\n this.categoryFilter.set('all')\n this.statusFilter.set('all')\n }\n\n scrollToSubmitForm(): void {\n const el = document.getElementById('commute-submit-form')\n if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' })\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/commute-reimbursement-claims/commute-reimbursement-claims.component.ts" }, { "path": "packages/registry-angular/blocks/commute-reimbursement-claims/index.ts", "content": "export {\n UiCommuteReimbursementClaimsComponent,\n type CommuteCategory,\n type ClaimStatus,\n type ExpenseClaim,\n} from './commute-reimbursement-claims.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/commute-reimbursement-claims/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/badge.json", "https://uipkge.dev/r/angular/button.json", "https://uipkge.dev/r/angular/card.json", "https://uipkge.dev/r/angular/dialog.json", "https://uipkge.dev/r/angular/dropdown-menu.json", "https://uipkge.dev/r/angular/input.json", "https://uipkge.dev/r/angular/progress.json", "https://uipkge.dev/r/angular/select.json", "https://uipkge.dev/r/angular/separator.json", "https://uipkge.dev/r/angular/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" ] }