{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "commute-reimbursement-claims",
  "title": "Commute Reimbursement Claims",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/commute-reimbursement-claims/CommuteReimbursementClaims.vue",
      "content": "<script setup lang=\"ts\">\nimport type { Component, HTMLAttributes } from 'vue'\nimport { computed, ref } from 'vue'\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-vue-next'\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\ninterface Props {\n  title?: string\n  policyText?: string\n  claimPeriod?: string\n  class?: HTMLAttributes['class']\n}\n\nconst props = withDefaults(defineProps<Props>(), {\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})\n\nconst categoryMeta: Record<\n  CommuteCategory,\n  { label: string; shortLabel: string; badgeClass: string; icon: Component; irsLimitInfo: string }\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<ClaimStatus, string> = {\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<ClaimStatus, string> = {\n  reimbursed: 'bg-success',\n  pending: 'bg-warning',\n}\n\nconst claims = ref<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// Form Reactive State\nconst formCategory = ref<CommuteCategory>('transit')\nconst formDate = ref('2026-08-20')\nconst formProvider = ref('BART Clipper Card')\nconst formDescription = ref('Monthly BART Clipper Card Pass')\nconst formAmount = ref('120.00')\nconst formMiles = ref('45')\nconst formAttachedReceipt = ref<{ name: string; size: string } | null>({\n  name: 'clipper-reload-receipt.pdf',\n  size: '240 KB',\n})\nconst formSubmittedNotice = ref(false)\nconst recentlySubmittedClaimId = ref('')\n\n// Filter State\nconst searchQuery = ref('')\nconst categoryFilter = ref('all')\nconst statusFilter = ref('all')\n\n// Receipt Modal State\nconst isReceiptModalOpen = ref(false)\nconst selectedClaim = ref<ExpenseClaim>(claims.value[0])\n\nfunction openReceipt(claim: ExpenseClaim) {\n  selectedClaim.value = claim\n  isReceiptModalOpen.value = true\n}\n\nfunction handleCategoryChange(val: CommuteCategory) {\n  formCategory.value = val\n  if (val === 'transit') {\n    formProvider.value = 'BART Clipper Card'\n    formDescription.value = 'Monthly BART Clipper Card Pass'\n    formAmount.value = '120.00'\n  } else if (val === 'parking') {\n    formProvider.value = 'Downtown Station Garage'\n    formDescription.value = 'Monthly Station Parking Permit'\n    formAmount.value = '65.00'\n  } else if (val === 'mileage') {\n    formProvider.value = 'Personal Vehicle (IRS Standard Rate)'\n    formDescription.value = 'Commute detour travel to client site'\n    updateMileageAmount()\n  } else if (val === 'ev_charging') {\n    formProvider.value = 'EVgo Fast Charging'\n    formDescription.value = 'Workplace EV public charging sessions'\n    formAmount.value = '42.00'\n  }\n}\n\nfunction updateMileageAmount() {\n  const miles = parseFloat(formMiles.value) || 0\n  const calculated = (miles * 0.67).toFixed(2)\n  formAmount.value = calculated\n}\n\nfunction handleAttachSampleReceipt() {\n  formAttachedReceipt.value = {\n    name: `receipt-${formCategory.value}-${Date.now().toString().slice(-4)}.pdf`,\n    size: '318 KB',\n  }\n}\n\nfunction handleRemoveReceipt() {\n  formAttachedReceipt.value = null\n}\n\nfunction handleSubmitClaim() {\n  const parsedAmt = parseFloat(formAmount.value) || 0\n  if (parsedAmt <= 0) return\n\n  const meta = categoryMeta[formCategory.value]\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.value,\n    categoryLabel: meta.shortLabel,\n    description: formDescription.value || meta.label,\n    provider: formProvider.value || 'Transit Provider',\n    amount: parsedAmt,\n    status: 'pending',\n    statusLabel: 'Pending Approval',\n    receiptFileName: formAttachedReceipt.value?.name || 'commute-claim-receipt.pdf',\n    receiptFileSize: formAttachedReceipt.value?.size || '290 KB',\n    receiptDate: 'Aug 21, 2026 · Just now',\n    notes: `Submitted via Commuter Benefit Portal for ${props.claimPeriod}.`,\n  }\n\n  claims.value.unshift(newClaim)\n  recentlySubmittedClaimId.value = newId\n  formSubmittedNotice.value = true\n\n  // Scroll or highlight\n  setTimeout(() => {\n    formSubmittedNotice.value = false\n  }, 6000)\n}\n\nfunction handleResetForm() {\n  formCategory.value = 'transit'\n  formDate.value = '2026-08-20'\n  formProvider.value = 'BART Clipper Card'\n  formDescription.value = 'Monthly BART Clipper Card Pass'\n  formAmount.value = '120.00'\n  formMiles.value = '45'\n  formAttachedReceipt.value = {\n    name: 'clipper-reload-receipt.pdf',\n    size: '240 KB',\n  }\n  formSubmittedNotice.value = false\n}\n\nconst isFiltered = computed(() => {\n  return searchQuery.value.trim() !== '' || categoryFilter.value !== 'all' || statusFilter.value !== 'all'\n})\n\nconst filteredClaims = computed(() => {\n  const q = searchQuery.value.trim().toLowerCase()\n  return claims.value.filter((claim) => {\n    const matchCat = categoryFilter.value === 'all' || claim.category === categoryFilter.value\n    const matchStatus = statusFilter.value === 'all' || claim.status === statusFilter.value\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\nfunction resetFilters() {\n  searchQuery.value = ''\n  categoryFilter.value = 'all'\n  statusFilter.value = 'all'\n}\n\nfunction scrollToSubmitForm() {\n  const el = document.getElementById('commute-submit-form')\n  if (el) {\n    el.scrollIntoView({ behavior: 'smooth', block: 'start' })\n  }\n}\n</script>\n\n<template>\n  <div data-slot=\"commute-reimbursement-claims\" :class=\"cn('w-full space-y-6', props.class)\">\n    <!-- Header -->\n    <div class=\"flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between\">\n      <div class=\"space-y-1\">\n        <div class=\"flex flex-wrap items-center gap-2.5\">\n          <h2 class=\"text-foreground text-2xl font-bold tracking-tight sm:text-3xl\">{{ props.title }}</h2>\n          <Badge wrap variant=\"outline\" class=\"border-info/30 bg-info/10 text-info text-xs font-medium\">\n            <Calendar class=\"mr-1 size-3\" aria-hidden=\"true\" />\n            {{ props.claimPeriod }}\n          </Badge>\n        </div>\n        <p class=\"text-muted-foreground text-sm\">\n          {{ props.policyText }}\n        </p>\n      </div>\n\n      <div class=\"flex flex-wrap items-center gap-2.5\">\n        <Button aria-label=\"Download attachment\" variant=\"outline\" size=\"sm\" class=\"shadow-xs\">\n          <Download class=\"size-4\" aria-hidden=\"true\" />\n          Export Statement\n        </Button>\n        <Button size=\"sm\" class=\"shadow-xs\" @click=\"scrollToSubmitForm\">\n          <Plus class=\"size-4\" aria-hidden=\"true\" />\n          Submit New Claim\n        </Button>\n      </div>\n    </div>\n\n    <!-- 4 Monthly Benefit Metric Cards -->\n    <div class=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      <!-- 1. Monthly Allowance Available -->\n      <Card class=\"border-border shadow-xs\">\n        <CardContent class=\"space-y-2 p-5\">\n          <div class=\"flex items-center justify-between\">\n            <p class=\"text-muted-foreground text-sm font-medium\">Monthly Allowance</p>\n            <div class=\"bg-primary/10 text-primary flex size-8 items-center justify-center rounded-lg\">\n              <Wallet class=\"size-4\" aria-hidden=\"true\" />\n            </div>\n          </div>\n          <p class=\"text-foreground text-2xl font-bold tracking-tight tabular-nums\">$315.00 / mo</p>\n          <div class=\"text-muted-foreground flex items-center justify-between text-xs\">\n            <span>IRS Pre-tax limit</span>\n            <span class=\"text-foreground font-medium tabular-nums\">$69.50 left</span>\n          </div>\n        </CardContent>\n      </Card>\n\n      <!-- 2. Claimed This Month -->\n      <Card class=\"border-border shadow-xs\">\n        <CardContent class=\"space-y-2 p-5\">\n          <div class=\"flex items-center justify-between\">\n            <p class=\"text-muted-foreground text-sm font-medium\">Claimed This Month</p>\n            <div class=\"bg-info/10 text-info flex size-8 items-center justify-center rounded-lg\">\n              <TrendingUp class=\"size-4\" aria-hidden=\"true\" />\n            </div>\n          </div>\n          <p class=\"text-foreground text-2xl font-bold tracking-tight tabular-nums\">$245.50</p>\n          <div class=\"space-y-1.5 pt-0.5\">\n            <Progress :model-value=\"78\" class=\"h-1.5\" />\n            <p class=\"text-muted-foreground text-xs tabular-nums\">$245.50 / $315.00 · 78% utilized</p>\n          </div>\n        </CardContent>\n      </Card>\n\n      <!-- 3. Reimbursed YTD -->\n      <Card class=\"border-border shadow-xs\">\n        <CardContent class=\"space-y-2 p-5\">\n          <div class=\"flex items-center justify-between\">\n            <p class=\"text-muted-foreground text-sm font-medium\">Reimbursed YTD</p>\n            <div class=\"bg-success/10 text-success flex size-8 items-center justify-center rounded-lg\">\n              <CheckCircle2 class=\"size-4\" aria-hidden=\"true\" />\n            </div>\n          </div>\n          <p class=\"text-foreground text-2xl font-bold tracking-tight tabular-nums\">$1,890.00</p>\n          <div class=\"text-muted-foreground flex items-center gap-1.5 text-xs\">\n            <span class=\"text-success inline-flex items-center font-medium\">\n              <ShieldCheck class=\"mr-1 size-3.5\" aria-hidden=\"true\" />\n              100% Settled\n            </span>\n            <span>· 6 claims in 2026</span>\n          </div>\n        </CardContent>\n      </Card>\n\n      <!-- 4. Pending Review -->\n      <Card class=\"border-border shadow-xs\">\n        <CardContent class=\"space-y-2 p-5\">\n          <div class=\"flex items-center justify-between\">\n            <p class=\"text-muted-foreground text-sm font-medium\">Pending Review</p>\n            <div class=\"bg-warning/10 text-warning flex size-8 items-center justify-center rounded-lg\">\n              <Clock class=\"size-4\" aria-hidden=\"true\" />\n            </div>\n          </div>\n          <p class=\"text-foreground text-warning text-warning text-2xl font-bold tracking-tight tabular-nums\">\n            1 Claim · $65.00\n          </p>\n          <p class=\"text-muted-foreground text-xs\">Est. payout on Sep 1st payroll</p>\n        </CardContent>\n      </Card>\n    </div>\n\n    <!-- Main 2-Column Portal Section -->\n    <div class=\"grid grid-cols-1 gap-6 lg:grid-cols-12\">\n      <!-- Left Column: Submit Claim Interactive Card & Policy Card -->\n      <div class=\"space-y-6 lg:col-span-5\">\n        <!-- Submit Claim Card -->\n        <Card id=\"commute-submit-form\" class=\"border-border shadow-xs\">\n          <CardHeader class=\"pb-3\">\n            <div class=\"flex items-center justify-between\">\n              <div>\n                <CardTitle class=\"text-base font-semibold\">Submit Commute Claim</CardTitle>\n                <CardDescription class=\"text-xs\">\n                  File transit pass, parking, mileage, or EV charging for monthly reimbursement.\n                </CardDescription>\n              </div>\n              <Badge wrap variant=\"secondary\" class=\"text-xs font-medium\">\n                {{ props.claimPeriod }}\n              </Badge>\n            </div>\n          </CardHeader>\n\n          <CardContent class=\"space-y-4\">\n            <!-- Submission Alert Notice -->\n            <div\n              v-if=\"formSubmittedNotice\"\n              class=\"border-success/30 bg-success/10 text-success dark:text-foreground flex items-start gap-2.5 rounded-lg border p-3\"\n            >\n              <CheckCircle2 class=\"text-success mt-0.5 size-4 shrink-0\" />\n              <div class=\"text-xs\">\n                <p class=\"font-semibold\">Claim {{ recentlySubmittedClaimId }} submitted successfully!</p>\n                <p class=\"text-success/90 mt-0.5\">\n                  Itemized receipt received. Your claim has been added to pending payroll review.\n                </p>\n              </div>\n            </div>\n\n            <!-- Category Selector -->\n            <div class=\"space-y-1.5\">\n              <label for=\"commute-category-select\" class=\"text-foreground text-xs font-medium\">\n                Expense Category <span class=\"text-destructive\">*</span>\n              </label>\n              <Select\n                :model-value=\"formCategory\"\n                @update:model-value=\"(v) => handleCategoryChange(v as CommuteCategory)\"\n              >\n                <SelectTrigger id=\"commute-category-select\" class=\"w-full text-xs\">\n                  <SelectValue placeholder=\"Select commute category\" />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectItem value=\"transit\">\n                    <span class=\"flex items-center gap-2\">\n                      <Train class=\"text-info size-3.5\" />\n                      <span>Public Transit Pass: BART/Metro</span>\n                    </span>\n                  </SelectItem>\n                  <SelectItem value=\"parking\">\n                    <span class=\"flex items-center gap-2\">\n                      <Building2 class=\"text-chart-1 size-3.5\" />\n                      <span>Parking (Station & Garage)</span>\n                    </span>\n                  </SelectItem>\n                  <SelectItem value=\"mileage\">\n                    <span class=\"flex items-center gap-2\">\n                      <Car class=\"text-warning size-3.5\" />\n                      <span>Mileage (IRS $0.67/mi)</span>\n                    </span>\n                  </SelectItem>\n                  <SelectItem value=\"ev_charging\">\n                    <span class=\"flex items-center gap-2\">\n                      <Zap class=\"text-success size-3.5\" />\n                      <span>EV Public Charging</span>\n                    </span>\n                  </SelectItem>\n                </SelectContent>\n              </Select>\n              <p class=\"text-muted-foreground text-xs\">\n                {{ categoryMeta[formCategory].irsLimitInfo }}\n              </p>\n            </div>\n\n            <!-- Date & Provider -->\n            <div class=\"grid grid-cols-1 gap-3 sm:grid-cols-2\">\n              <div class=\"space-y-1.5\">\n                <label for=\"commute-date-input\" class=\"text-foreground text-xs font-medium\">\n                  Date of Commute <span class=\"text-destructive\">*</span>\n                </label>\n                <Input id=\"commute-date-input\" v-model=\"formDate\" type=\"date\" class=\"h-9 text-xs\" />\n              </div>\n\n              <div class=\"space-y-1.5\">\n                <label for=\"commute-provider-input\" class=\"text-foreground text-xs font-medium\">\n                  Provider / Authority <span class=\"text-destructive\">*</span>\n                </label>\n                <Input\n                  id=\"commute-provider-input\"\n                  v-model=\"formProvider\"\n                  placeholder=\"e.g. BART, Caltrain, EVgo\"\n                  class=\"h-9 text-xs\"\n                />\n              </div>\n            </div>\n\n            <!-- Description -->\n            <div class=\"space-y-1.5\">\n              <label for=\"commute-desc-input\" class=\"text-foreground text-xs font-medium\">\n                Claim Description & Route <span class=\"text-destructive\">*</span>\n              </label>\n              <Input\n                id=\"commute-desc-input\"\n                v-model=\"formDescription\"\n                placeholder=\"e.g. Monthly Clipper Pass · Embarcadero to Millbrae\"\n                class=\"h-9 text-xs\"\n              />\n            </div>\n\n            <!-- Mileage Calculation helper if mileage selected -->\n            <div v-if=\"formCategory === 'mileage'\" class=\"border-border bg-muted/30 space-y-2 rounded-lg border p-3\">\n              <div class=\"flex items-center justify-between text-xs\">\n                <span class=\"text-muted-foreground font-medium\">IRS Standard Mileage Rate</span>\n                <Badge wrap variant=\"outline\" class=\"text-xs font-normal\">$0.67 / mile</Badge>\n              </div>\n              <div class=\"flex items-center gap-3\">\n                <div class=\"flex-1\">\n                  <label for=\"commute-miles-input\" class=\"text-muted-foreground text-xs\">Total Miles Driven</label>\n                  <Input\n                    id=\"commute-miles-input\"\n                    v-model=\"formMiles\"\n                    type=\"number\"\n                    min=\"1\"\n                    step=\"1\"\n                    class=\"mt-1 h-8 text-xs tabular-nums\"\n                    @input=\"updateMileageAmount\"\n                  />\n                </div>\n                <div class=\"flex-1 text-right\">\n                  <span class=\"text-muted-foreground text-xs\">Calculated Total</span>\n                  <p class=\"text-foreground text-base font-bold tabular-nums\">${{ formAmount }}</p>\n                </div>\n              </div>\n            </div>\n\n            <!-- Claim Amount Input -->\n            <div class=\"space-y-1.5\">\n              <label for=\"commute-amount-input\" class=\"text-foreground text-xs font-medium\">\n                Claim Amount (USD) <span class=\"text-destructive\">*</span>\n              </label>\n              <div class=\"relative\">\n                <DollarSign\n                  class=\"text-muted-foreground pointer-events-none absolute top-1/2 left-3 size-3.5 -translate-y-1/2\"\n                />\n                <Input\n                  id=\"commute-amount-input\"\n                  v-model=\"formAmount\"\n                  type=\"text\"\n                  placeholder=\"0.00\"\n                  class=\"h-9 pl-8 text-xs font-semibold tabular-nums\"\n                />\n              </div>\n              <div class=\"text-muted-foreground flex items-center justify-between text-xs\">\n                <span>Maximum pre-tax monthly cap: $315.00</span>\n                <span class=\"font-medium\">Direct Payroll Payout</span>\n              </div>\n            </div>\n\n            <!-- Receipt Dropzone Placeholder -->\n            <div class=\"space-y-1.5\">\n              <label class=\"text-foreground text-xs font-medium\">\n                Itemized Receipt Attachment <span class=\"text-destructive\">*</span>\n              </label>\n\n              <!-- Attached file view -->\n              <div\n                v-if=\"formAttachedReceipt\"\n                class=\"border-border bg-muted/40 flex items-center justify-between gap-3 rounded-lg border p-3 text-xs\"\n              >\n                <div class=\"flex min-w-0 items-center gap-2.5\">\n                  <div class=\"bg-primary/10 text-primary flex size-8 shrink-0 items-center justify-center rounded-md\">\n                    <FileText class=\"size-4\" />\n                  </div>\n                  <div class=\"min-w-0\">\n                    <p class=\"text-foreground truncate font-medium\">{{ formAttachedReceipt.name }}</p>\n                    <p class=\"text-muted-foreground truncate\">\n                      {{ formAttachedReceipt.size }} · Itemized proof attached\n                    </p>\n                  </div>\n                </div>\n                <div class=\"flex items-center gap-1.5\">\n                  <Badge wrap variant=\"outline\" class=\"border-success/30 bg-success/10 text-success text-xs\">\n                    <Check class=\"mr-1 size-3\" />\n                    Valid\n                  </Badge>\n                  <Button\n                    type=\"button\"\n                    variant=\"ghost\"\n                    size=\"icon-sm\"\n                    class=\"text-muted-foreground hover:text-foreground size-7\"\n                    @click=\"handleRemoveReceipt\"\n                  >\n                    <X class=\"size-3.5\" />\n                    <span class=\"sr-only\">Remove receipt</span>\n                  </Button>\n                </div>\n              </div>\n\n              <!-- Dropzone container -->\n              <button\n                v-else\n                type=\"button\"\n                class=\"border-border hover:bg-muted/40 hover:border-primary/50 focus-visible:ring-ring flex w-full flex-col items-center justify-center gap-1.5 rounded-lg border border-dashed p-4 text-center transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n                @click=\"handleAttachSampleReceipt\"\n              >\n                <div class=\"bg-muted text-muted-foreground flex size-8 items-center justify-center rounded-full\">\n                  <Upload class=\"size-4\" />\n                </div>\n                <p class=\"text-foreground text-xs font-medium\">Click to upload or drag receipt file</p>\n                <p class=\"text-muted-foreground text-xs\">PDF, PNG, or JPG up to 10MB (Itemized proof required)</p>\n              </button>\n            </div>\n          </CardContent>\n\n          <CardFooter class=\"border-border flex items-center justify-between border-t pt-4\">\n            <Button type=\"button\" variant=\"ghost\" size=\"sm\" class=\"text-xs\" @click=\"handleResetForm\">\n              <RotateCcw class=\"mr-1.5 size-3.5\" />\n              Reset Form\n            </Button>\n            <Button\n              type=\"button\"\n              size=\"sm\"\n              class=\"gap-1.5 text-xs shadow-xs\"\n              :disabled=\"!formAmount || parseFloat(formAmount) <= 0\"\n              @click=\"handleSubmitClaim\"\n            >\n              <Send class=\"size-3.5\" />\n              Submit Claim\n            </Button>\n          </CardFooter>\n        </Card>\n\n        <!-- Compliance & IRS Rules Notice Card -->\n        <Card class=\"border-border shadow-xs\">\n          <CardHeader class=\"pb-2\">\n            <div class=\"flex items-center gap-2\">\n              <ShieldCheck class=\"text-primary size-4\" />\n              <CardTitle class=\"text-sm font-semibold\">Commuter Benefit Program Policy</CardTitle>\n            </div>\n          </CardHeader>\n          <CardContent class=\"space-y-2.5 text-xs\">\n            <p class=\"text-muted-foreground leading-relaxed\">\n              Expenses are reimbursed under Section 132(f) Qualified Transportation Fringe Benefits. Reimbursements are\n              disbursed directly into employee payroll on the 1st of every month.\n            </p>\n            <div class=\"border-border/60 text-muted-foreground space-y-1.5 border-t pt-2\">\n              <div class=\"flex items-center gap-2\">\n                <Check class=\"text-success size-3\" />\n                <span>Monthly maximum pre-tax election: $315.00</span>\n              </div>\n              <div class=\"flex items-center gap-2\">\n                <Check class=\"text-success size-3\" />\n                <span>Receipts must reflect date, transit authority, and paid amount</span>\n              </div>\n              <div class=\"flex items-center gap-2\">\n                <Check class=\"text-success size-3\" />\n                <span>Deadline for current month submissions: 25th of month</span>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      </div>\n\n      <!-- Right Column: Expense Claims History Table -->\n      <div class=\"space-y-4 lg:col-span-7\">\n        <Card class=\"border-border shadow-xs\">\n          <CardHeader class=\"pb-3\">\n            <div class=\"flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between\">\n              <div>\n                <CardTitle class=\"text-base font-semibold\">Expense Claims History</CardTitle>\n                <CardDescription class=\"text-xs\">\n                  Itemized ledger of submitted commuter, transit, and EV expenses.\n                </CardDescription>\n              </div>\n              <Badge wrap variant=\"outline\" class=\"text-xs tabular-nums\"> {{ claims.length }} Total Claims </Badge>\n            </div>\n          </CardHeader>\n\n          <CardContent class=\"space-y-4\">\n            <!-- Filter & Search Toolbar -->\n            <div\n              class=\"border-border bg-muted/20 flex flex-col gap-2.5 rounded-lg border p-2.5 sm:flex-row sm:items-center sm:justify-between\"\n            >\n              <div class=\"relative flex-1 sm:max-w-xs\">\n                <Search\n                  class=\"text-muted-foreground pointer-events-none absolute top-1/2 left-2.5 size-3.5 -translate-y-1/2\"\n                />\n                <Input\n                  v-model=\"searchQuery\"\n                  type=\"search\"\n                  placeholder=\"Search claims, ID, route...\"\n                  class=\"h-8 pl-8 text-xs\"\n                />\n              </div>\n\n              <div class=\"flex flex-wrap items-center gap-2\">\n                <!-- Category Filter -->\n                <Select v-model=\"categoryFilter\">\n                  <SelectTrigger class=\"h-8 w-36 text-xs\">\n                    <SelectValue placeholder=\"All Categories\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectItem value=\"all\">All Categories</SelectItem>\n                    <SelectItem value=\"transit\">Public Transit</SelectItem>\n                    <SelectItem value=\"parking\">Parking</SelectItem>\n                    <SelectItem value=\"mileage\">Mileage</SelectItem>\n                    <SelectItem value=\"ev_charging\">EV Charging</SelectItem>\n                  </SelectContent>\n                </Select>\n\n                <!-- Status Filter -->\n                <Select v-model=\"statusFilter\">\n                  <SelectTrigger class=\"h-8 w-36 text-xs\">\n                    <SelectValue placeholder=\"All Statuses\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectItem value=\"all\">All Statuses</SelectItem>\n                    <SelectItem value=\"reimbursed\">Reimbursed</SelectItem>\n                    <SelectItem value=\"pending\">Pending</SelectItem>\n                  </SelectContent>\n                </Select>\n\n                <Button v-if=\"isFiltered\" variant=\"ghost\" size=\"sm\" class=\"h-8 px-2 text-xs\" @click=\"resetFilters\">\n                  <RotateCcw class=\"mr-1 size-3\" />\n                  Reset\n                </Button>\n              </div>\n            </div>\n\n            <!-- Table -->\n            <div class=\"border-border overflow-hidden rounded-lg border\">\n              <div class=\"overflow-x-auto\">\n                <Table>\n                  <TableHeader class=\"bg-muted/40\">\n                    <TableRow>\n                      <TableHead class=\"min-w-[95px] text-xs\">Claim ID</TableHead>\n                      <TableHead class=\"min-w-[90px] text-xs\">Date</TableHead>\n                      <TableHead class=\"min-w-[110px] text-xs\">Category</TableHead>\n                      <TableHead class=\"min-w-[190px] text-xs\">Description & Provider</TableHead>\n                      <TableHead class=\"min-w-[90px] text-right text-xs\">Amount</TableHead>\n                      <TableHead class=\"min-w-[130px] text-xs\">Status</TableHead>\n                      <TableHead class=\"min-w-[80px] text-center text-xs\">Receipt</TableHead>\n                      <TableHead class=\"w-10 text-right text-xs\">\n                        <span class=\"sr-only\">Actions</span>\n                      </TableHead>\n                    </TableRow>\n                  </TableHeader>\n                  <TableBody>\n                    <TableRow\n                      v-for=\"claim in filteredClaims\"\n                      :key=\"claim.id\"\n                      class=\"hover:bg-muted/50 transition-colors\"\n                    >\n                      <!-- Claim ID -->\n                      <TableCell class=\"font-mono text-xs font-medium\">\n                        {{ claim.id }}\n                      </TableCell>\n\n                      <!-- Date -->\n                      <TableCell class=\"text-muted-foreground text-xs whitespace-nowrap tabular-nums\">\n                        {{ claim.date }}\n                      </TableCell>\n\n                      <!-- Category Badge -->\n                      <TableCell>\n                        <Badge\n                          wrap\n                          variant=\"outline\"\n                          :class=\"cn('text-xs font-normal', categoryMeta[claim.category]?.badgeClass)\"\n                        >\n                          <component :is=\"categoryMeta[claim.category]?.icon\" class=\"mr-1 size-3\" />\n                          {{ claim.categoryLabel }}\n                        </Badge>\n                      </TableCell>\n\n                      <!-- Description & Provider -->\n                      <TableCell>\n                        <div class=\"min-w-0\">\n                          <p class=\"text-foreground truncate text-xs font-medium\">{{ claim.description }}</p>\n                          <p class=\"text-muted-foreground truncate text-xs\">{{ claim.provider }}</p>\n                        </div>\n                      </TableCell>\n\n                      <!-- Amount -->\n                      <TableCell\n                        class=\"text-foreground text-right text-xs font-semibold whitespace-nowrap tabular-nums\"\n                      >\n                        ${{ claim.amount.toFixed(2) }}\n                      </TableCell>\n\n                      <!-- Status Badge -->\n                      <TableCell>\n                        <Badge wrap variant=\"outline\" :class=\"cn('text-xs font-medium', statusStyles[claim.status])\">\n                          <span\n                            class=\"mr-1.5 size-1.5 rounded-full\"\n                            :class=\"statusDots[claim.status]\"\n                            aria-hidden=\"true\"\n                          />\n                          {{ claim.statusLabel }}\n                        </Badge>\n                      </TableCell>\n\n                      <!-- Receipt Button -->\n                      <TableCell class=\"text-center\">\n                        <Button\n                          aria-label=\"Attach file\"\n                          variant=\"ghost\"\n                          size=\"sm\"\n                          class=\"h-7 px-2 text-xs\"\n                          @click=\"openReceipt(claim)\"\n                        >\n                          <Paperclip class=\"text-muted-foreground mr-1 size-3\" />\n                          <span>View</span>\n                        </Button>\n                      </TableCell>\n\n                      <!-- Actions Dropdown -->\n                      <TableCell class=\"text-right\">\n                        <DropdownMenu>\n                          <DropdownMenuTrigger as-child>\n                            <Button\n                              variant=\"ghost\"\n                              size=\"icon-sm\"\n                              class=\"text-muted-foreground hover:text-foreground size-7\"\n                            >\n                              <Eye class=\"size-3.5\" />\n                              <span class=\"sr-only\">Actions for {{ claim.id }}</span>\n                            </Button>\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"end\" class=\"w-44\">\n                            <DropdownMenuItem class=\"cursor-pointer text-xs\" @click=\"openReceipt(claim)\">\n                              <Receipt class=\"mr-2 size-3.5\" />\n                              Inspect Receipt\n                            </DropdownMenuItem>\n                            <DropdownMenuItem class=\"cursor-pointer text-xs\">\n                              <FileCheck class=\"mr-2 size-3.5\" />\n                              Policy Audit Log\n                            </DropdownMenuItem>\n                            <DropdownMenuSeparator />\n                            <DropdownMenuItem class=\"cursor-pointer text-xs\">\n                              <Download class=\"mr-2 size-3.5\" />\n                              Download Voucher\n                            </DropdownMenuItem>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      </TableCell>\n                    </TableRow>\n\n                    <!-- Empty state -->\n                    <TableRow v-if=\"filteredClaims.length === 0\">\n                      <TableCell :colspan=\"8\" class=\"h-32 text-center\">\n                        <div class=\"flex flex-col items-center justify-center gap-1.5\">\n                          <Search class=\"text-muted-foreground/50 size-5\" />\n                          <p class=\"text-foreground text-xs font-medium\">No commute claims found</p>\n                          <p class=\"text-muted-foreground text-xs\">Try resetting your category or status filter</p>\n                          <Button variant=\"outline\" size=\"sm\" class=\"mt-1 h-7 text-xs\" @click=\"resetFilters\">\n                            Reset filters\n                          </Button>\n                        </div>\n                      </TableCell>\n                    </TableRow>\n                  </TableBody>\n                </Table>\n              </div>\n\n              <!-- Table Summary Footer -->\n              <div\n                class=\"border-border bg-muted/20 text-muted-foreground flex flex-col items-center justify-between gap-2 border-t px-3 py-2 text-xs sm:flex-row\"\n              >\n                <p class=\"tabular-nums\">\n                  Showing <span class=\"text-foreground font-medium\">{{ filteredClaims.length }}</span> of\n                  <span class=\"text-foreground font-medium\">{{ claims.length }}</span> claims\n                </p>\n                <div class=\"flex items-center gap-3\">\n                  <span class=\"tabular-nums\">\n                    Filtered Total:\n                    <span class=\"text-foreground font-semibold\">\n                      ${{ filteredClaims.reduce((acc, c) => acc + c.amount, 0).toFixed(2) }}\n                    </span>\n                  </span>\n                </div>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      </div>\n    </div>\n\n    <!-- Receipt Details Modal Dialog -->\n    <Dialog v-model:open=\"isReceiptModalOpen\">\n      <DialogContent class=\"sm:max-w-md\">\n        <DialogHeader>\n          <div class=\"flex items-center justify-between pr-4\">\n            <div class=\"space-y-0.5\">\n              <DialogTitle class=\"text-base font-bold\">Commute Receipt Voucher</DialogTitle>\n              <DialogDescription class=\"text-xs\">\n                IRS-compliant proof of transit and commuter benefit claim.\n              </DialogDescription>\n            </div>\n            <Badge wrap variant=\"outline\" class=\"font-mono text-xs\">\n              {{ selectedClaim.id }}\n            </Badge>\n          </div>\n        </DialogHeader>\n\n        <div class=\"space-y-4 py-2 text-xs\">\n          <!-- Itemized Receipt Box -->\n          <div class=\"border-border bg-muted/30 space-y-3 rounded-lg border p-3.5\">\n            <div class=\"flex items-center justify-between border-b pb-2\">\n              <div class=\"flex items-center gap-2\">\n                <component :is=\"categoryMeta[selectedClaim.category]?.icon\" class=\"text-primary size-4\" />\n                <span class=\"text-foreground font-semibold\">{{ selectedClaim.provider }}</span>\n              </div>\n              <Badge wrap :class=\"cn('text-xs font-normal', statusStyles[selectedClaim.status])\">\n                {{ selectedClaim.statusLabel }}\n              </Badge>\n            </div>\n\n            <div class=\"grid grid-cols-1 gap-2 text-xs sm:grid-cols-2\">\n              <div>\n                <span class=\"text-muted-foreground block\">Transaction Date</span>\n                <span class=\"text-foreground font-medium\">{{ selectedClaim.receiptDate }}</span>\n              </div>\n              <div>\n                <span class=\"text-muted-foreground block\">Benefit Category</span>\n                <span class=\"text-foreground font-medium\">{{ selectedClaim.categoryLabel }}</span>\n              </div>\n              <div class=\"sm:col-span-2\">\n                <span class=\"text-muted-foreground block\">Line Item Description</span>\n                <span class=\"text-foreground font-medium\">{{ selectedClaim.description }}</span>\n              </div>\n              <div class=\"sm:col-span-2\">\n                <span class=\"text-muted-foreground block\">Employee Commute Note</span>\n                <span class=\"text-muted-foreground italic\">\"{{ selectedClaim.notes }}\"</span>\n              </div>\n            </div>\n\n            <Separator />\n\n            <!-- Amount Breakdown -->\n            <div class=\"space-y-1.5 text-xs\">\n              <div class=\"text-muted-foreground flex justify-between\">\n                <span>Base Fare / Charge</span>\n                <span class=\"font-mono tabular-nums\">${{ selectedClaim.amount.toFixed(2) }}</span>\n              </div>\n              <div class=\"text-muted-foreground flex justify-between\">\n                <span>Pre-Tax IRS Exemption (IRC § 132f)</span>\n                <span class=\"text-success text-success font-mono tabular-nums\">-$0.00 (Tax Free)</span>\n              </div>\n              <div class=\"border-border flex justify-between border-t pt-1.5 text-sm font-bold\">\n                <span class=\"text-foreground\">Total Reimbursable Amount</span>\n                <span class=\"text-foreground font-mono tabular-nums\">${{ selectedClaim.amount.toFixed(2) }}</span>\n              </div>\n            </div>\n\n            <!-- Attached File Strip -->\n            <div class=\"border-border bg-background flex items-center justify-between rounded-md border p-2 text-xs\">\n              <div class=\"flex items-center gap-2\">\n                <FileText class=\"text-primary size-3.5\" />\n                <span class=\"font-mono text-xs\">{{ selectedClaim.receiptFileName }}</span>\n                <span class=\"text-muted-foreground\">({{ selectedClaim.receiptFileSize }})</span>\n              </div>\n              <Badge wrap variant=\"outline\" class=\"border-success/30 bg-success/10 text-success text-xs\">\n                <ShieldCheck class=\"mr-1 size-3\" />\n                Verified\n              </Badge>\n            </div>\n          </div>\n        </div>\n\n        <DialogFooter class=\"flex sm:justify-between\">\n          <Button variant=\"outline\" size=\"sm\" class=\"text-xs\" @click=\"isReceiptModalOpen = false\"> Close </Button>\n          <Button\n            aria-label=\"Download attachment\"\n            size=\"sm\"\n            class=\"gap-1.5 text-xs\"\n            @click=\"isReceiptModalOpen = false\"\n          >\n            <Download class=\"size-3.5\" />\n            Download Receipt PDF\n          </Button>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  </div>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/CommuteReimbursementClaims.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/badge.json",
    "https://uipkge.dev/r/vue/button.json",
    "https://uipkge.dev/r/vue/card.json",
    "https://uipkge.dev/r/vue/dialog.json",
    "https://uipkge.dev/r/vue/dropdown-menu.json",
    "https://uipkge.dev/r/vue/input.json",
    "https://uipkge.dev/r/vue/progress.json",
    "https://uipkge.dev/r/vue/select.json",
    "https://uipkge.dev/r/vue/separator.json",
    "https://uipkge.dev/r/vue/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"
  ]
}