{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "tax-summary-report",
  "title": "Tax Summary Report",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/tax-summary-report/TaxSummaryReport.vue",
      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { ref } from 'vue'\nimport {\n  Calendar,\n  CheckCircle2,\n  Clock,\n  CreditCard,\n  Download,\n  FileCheck,\n  Receipt,\n  Scale,\n  ShieldCheck,\n  TrendingUp,\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, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Progress } from '@/components/ui/progress'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'\nimport { Table, TableBody, TableCell, TableFooter, TableHead, TableHeader, TableRow } from '@/components/ui/table'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n\nconst selectedYear = ref('2026')\n\nconst metrics = [\n  {\n    title: 'Estimated Q3 Tax Liability',\n    value: '$14,280.00',\n    subtitle: 'Due Sep 15, 2026 · Payment pending',\n    badge: 'Due in 24 days',\n    badgeVariant: 'warning' as const,\n    icon: Receipt,\n  },\n  {\n    title: 'Gross Taxable Income',\n    value: '$128,450.00',\n    subtitle: 'YTD revenue across 4 client contracts',\n    badge: '+18.4% YoY',\n    badgeVariant: 'success' as const,\n    icon: TrendingUp,\n  },\n  {\n    title: 'Total Deductible Expenses',\n    value: '$34,820.00',\n    subtitle: 'YTD deductions across 5 categories',\n    badge: '27.1% ratio',\n    badgeVariant: 'info' as const,\n    icon: FileCheck,\n  },\n  {\n    title: 'Effective Tax Rate',\n    value: '21.4%',\n    subtitle: 'Federal (15.2%) + CA State (6.2%)',\n    badge: 'Blended rate',\n    badgeVariant: 'secondary' as const,\n    icon: Scale,\n  },\n]\n\nconst jurisdictions = [\n  {\n    id: 'federal',\n    name: 'Federal Income Tax',\n    authority: 'Internal Revenue Service (IRS)',\n    amount: '$8,420.00',\n    percentage: 59,\n    rateDescription: 'Estimated at 24% marginal individual / corporate bracket',\n    accentColor: 'bg-primary',\n  },\n  {\n    id: 'state',\n    name: 'State & Local Tax',\n    authority: 'California Franchise Tax Board (FTB)',\n    amount: '$3,860.00',\n    percentage: 27,\n    rateDescription: 'California Schedule CA (540) estimated at 9.3% bracket',\n    accentColor: 'bg-warning bg-warning',\n  },\n  {\n    id: 'fica',\n    name: 'Self-Employment / FICA',\n    authority: 'Social Security & Medicare (Schedule SE)',\n    amount: '$2,000.00',\n    percentage: 14,\n    rateDescription: '15.3% self-employment contribution on 92.35% net earnings',\n    accentColor: 'bg-success bg-success',\n  },\n]\n\nconst deductionCategories = [\n  {\n    id: 'software',\n    name: 'Software & Subscriptions',\n    description: 'Cloud hosting, SaaS tooling, API subscriptions, and dev licenses',\n    spent: '$12,450.00',\n    rate: '100%',\n    rateBadgeVariant: 'default' as const,\n    savings: '$2,664.30',\n  },\n  {\n    id: 'contractors',\n    name: 'Contractor Payments',\n    description: '1099-NEC engineering contractors, QA specialists, and design partners',\n    spent: '$11,200.00',\n    rate: '100%',\n    rateBadgeVariant: 'default' as const,\n    savings: '$2,396.80',\n  },\n  {\n    id: 'office',\n    name: 'Office & Equipment',\n    description: 'Workstations, displays, ergonomic chairs, and home office deduction',\n    spent: '$5,670.00',\n    rate: '100%',\n    rateBadgeVariant: 'default' as const,\n    savings: '$1,213.38',\n  },\n  {\n    id: 'travel',\n    name: 'Travel & Meals',\n    description: 'Client on-sites, tech conferences, and 50% eligible business dining',\n    spent: '$3,100.00',\n    rate: '50% for meals',\n    rateBadgeVariant: 'secondary' as const,\n    savings: '$331.70',\n  },\n  {\n    id: 'professional',\n    name: 'Professional Services',\n    description: 'Corporate legal counsel, CPA tax advisory, and payroll processing',\n    spent: '$2,400.00',\n    rate: '100%',\n    rateBadgeVariant: 'default' as const,\n    savings: '$513.60',\n  },\n]\n\nconst quarterlySchedule = [\n  {\n    quarter: 'Q1 2026',\n    period: 'Jan 1 – Mar 31',\n    dueDate: 'April 15, 2026',\n    status: 'Paid',\n    amount: '$11,850.00',\n    note: 'EFTPS Conf #98214 · Paid Apr 12',\n    isCurrent: false,\n  },\n  {\n    quarter: 'Q2 2026',\n    period: 'Apr 1 – May 31',\n    dueDate: 'June 15, 2026',\n    status: 'Paid',\n    amount: '$12,400.00',\n    note: 'EFTPS Conf #45091 · Paid Jun 14',\n    isCurrent: false,\n  },\n  {\n    quarter: 'Q3 2026',\n    period: 'Jun 1 – Aug 31',\n    dueDate: 'September 15, 2026',\n    status: 'Upcoming',\n    amount: '$14,280.00',\n    note: 'Auto-debit scheduled for Sep 15',\n    isCurrent: true,\n  },\n  {\n    quarter: 'Q4 2026',\n    period: 'Sep 1 – Dec 31',\n    dueDate: 'January 15, 2027',\n    status: 'Future',\n    amount: '$13,500.00',\n    note: 'Projected year-end estimate',\n    isCurrent: false,\n  },\n]\n</script>\n\n<template>\n  <div data-slot=\"tax-summary-report\" :class=\"cn('w-full space-y-6', props.class)\">\n    <!-- Header Section -->\n    <div class=\"flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between\">\n      <div>\n        <div class=\"flex flex-wrap items-center gap-3\">\n          <h2 class=\"text-foreground text-2xl font-bold tracking-tight\">Tax Summary & Estimated Liability</h2>\n          <Badge wrap variant=\"warning\" class=\"gap-1.5 px-2.5 py-1 text-xs font-medium\">\n            <Clock class=\"size-3.5\" aria-hidden=\"true\" />\n            Q3 Estimated Taxes Due Sep 15\n          </Badge>\n        </div>\n        <p class=\"text-muted-foreground mt-1 text-sm\">\n          Quarterly estimated tax obligations, IRS Schedule C deductible expenses, and jurisdictional liabilities.\n        </p>\n      </div>\n\n      <div class=\"flex flex-wrap items-center gap-2.5\">\n        <Select v-model=\"selectedYear\">\n          <SelectTrigger size=\"sm\" class=\"w-36 text-xs font-medium\" aria-label=\"Select Tax Year\">\n            <SelectValue placeholder=\"Tax Year\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectItem value=\"2026\">2026 Tax Year</SelectItem>\n            <SelectItem value=\"2025\">2025 Tax Year</SelectItem>\n            <SelectItem value=\"2024\">2024 Tax Year</SelectItem>\n          </SelectContent>\n        </Select>\n\n        <Button aria-label=\"Download attachment\" variant=\"outline\" size=\"sm\" class=\"gap-1.5 text-xs\">\n          <Download class=\"size-4\" aria-hidden=\"true\" />\n          Export Tax Package\n        </Button>\n\n        <Button size=\"sm\" class=\"gap-1.5 text-xs\">\n          <CreditCard class=\"size-4\" aria-hidden=\"true\" />\n          Pay Estimated Tax\n        </Button>\n      </div>\n    </div>\n\n    <!-- 4 Key Tax Metrics Cards -->\n    <div class=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      <Card v-for=\"metric in metrics\" :key=\"metric.title\" class=\"shadow-xs\">\n        <CardContent class=\"p-5\">\n          <div class=\"flex items-center justify-between gap-2\">\n            <p class=\"text-muted-foreground text-xs font-medium\">{{ metric.title }}</p>\n            <div\n              class=\"bg-muted text-muted-foreground border-border/60 flex size-8 shrink-0 items-center justify-center rounded-md border shadow-2xs\"\n              aria-hidden=\"true\"\n            >\n              <component :is=\"metric.icon\" class=\"size-4\" />\n            </div>\n          </div>\n          <div class=\"mt-3\">\n            <p class=\"text-foreground text-2xl font-bold tracking-tight tabular-nums\">{{ metric.value }}</p>\n            <div class=\"mt-2 flex items-center gap-2\">\n              <Badge wrap :variant=\"metric.badgeVariant\" class=\"px-1.5 py-0 text-xs font-medium\">\n                {{ metric.badge }}\n              </Badge>\n              <span class=\"text-muted-foreground truncate text-xs\">{{ metric.subtitle }}</span>\n            </div>\n          </div>\n        </CardContent>\n      </Card>\n    </div>\n\n    <!-- Tax Liability Breakdown by Jurisdiction -->\n    <Card class=\"shadow-xs\">\n      <CardHeader>\n        <div class=\"flex flex-wrap items-center justify-between gap-2\">\n          <div>\n            <CardTitle class=\"text-base font-semibold\">Tax Liability Breakdown by Jurisdiction</CardTitle>\n            <CardDescription class=\"text-xs sm:text-sm\">\n              Estimated Q3 distribution across federal, state, and payroll authorities ($14,280.00 total).\n            </CardDescription>\n          </div>\n          <Badge wrap variant=\"outline\" class=\"text-xs tabular-nums\">3 Jurisdictions Active</Badge>\n        </div>\n      </CardHeader>\n      <CardContent class=\"space-y-6\">\n        <!-- Visual Multi-segment bar -->\n        <div class=\"space-y-1.5\">\n          <div class=\"bg-muted/60 ring-border/50 flex h-3 w-full overflow-hidden rounded-full p-0.5 ring-1\">\n            <div\n              class=\"bg-primary h-full rounded-l-full transition-[width] duration-300\"\n              style=\"width: 59%\"\n              title=\"Federal Income Tax: 59%\"\n            />\n            <div\n              class=\"bg-warning bg-warning h-full transition-[width] duration-300\"\n              style=\"width: 27%\"\n              title=\"State & Local Tax: 27%\"\n            />\n            <div\n              class=\"bg-success bg-success h-full rounded-r-full transition-[width] duration-300\"\n              style=\"width: 14%\"\n              title=\"Self-Employment / FICA: 14%\"\n            />\n          </div>\n          <div class=\"text-muted-foreground flex items-center justify-between text-xs\">\n            <span>Federal (59%)</span>\n            <span>State (27%)</span>\n            <span>Self-Employment (14%)</span>\n          </div>\n        </div>\n\n        <!-- Jurisdiction Cards Grid -->\n        <div class=\"grid grid-cols-1 gap-4 md:grid-cols-3\">\n          <div\n            v-for=\"j in jurisdictions\"\n            :key=\"j.id\"\n            class=\"bg-muted/30 border-border/80 flex flex-col justify-between rounded-lg border p-4 shadow-2xs\"\n          >\n            <div>\n              <div class=\"flex flex-wrap items-start justify-between gap-2\">\n                <div>\n                  <div class=\"flex items-center gap-2\">\n                    <span :class=\"cn('size-2.5 shrink-0 self-start rounded-full', j.accentColor)\" aria-hidden=\"true\" />\n                    <h4 class=\"text-foreground min-w-0 text-sm font-semibold\">{{ j.name }}</h4>\n                  </div>\n                  <p class=\"text-muted-foreground mt-0.5 text-xs\">{{ j.authority }}</p>\n                </div>\n                <Badge wrap variant=\"secondary\" class=\"text-xs font-semibold tabular-nums\">{{ j.percentage }}%</Badge>\n              </div>\n\n              <div class=\"my-4\">\n                <p class=\"text-foreground text-2xl font-bold tracking-tight tabular-nums\">{{ j.amount }}</p>\n                <p class=\"text-muted-foreground mt-1 text-xs\">{{ j.rateDescription }}</p>\n              </div>\n            </div>\n\n            <Progress :model-value=\"j.percentage\" class=\"h-1.5\" />\n          </div>\n        </div>\n      </CardContent>\n    </Card>\n\n    <!-- Deductible Expense Categories Table -->\n    <Card class=\"shadow-xs\">\n      <CardHeader>\n        <div class=\"flex flex-wrap items-center justify-between gap-2\">\n          <div>\n            <CardTitle class=\"text-base font-semibold\">Deductible Expense Categories</CardTitle>\n            <CardDescription class=\"text-xs sm:text-sm\">\n              IRS Schedule C business deductions applied YTD to reduce gross taxable revenue ($34,820.00 total spent).\n            </CardDescription>\n          </div>\n          <Badge wrap variant=\"outline\" class=\"text-xs font-medium tabular-nums\">YTD Tax Savings: $7,119.78</Badge>\n        </div>\n      </CardHeader>\n      <CardContent class=\"p-0\">\n        <Table>\n          <TableHeader>\n            <TableRow>\n              <TableHead class=\"w-[45%]\">Category & Description</TableHead>\n              <TableHead class=\"text-right\">Total Spent YTD</TableHead>\n              <TableHead class=\"text-center\">Deductible Rate</TableHead>\n              <TableHead class=\"text-right\">Total Tax Savings</TableHead>\n            </TableRow>\n          </TableHeader>\n          <TableBody>\n            <TableRow v-for=\"category in deductionCategories\" :key=\"category.id\">\n              <TableCell>\n                <div class=\"text-foreground text-sm font-medium\">{{ category.name }}</div>\n                <div class=\"text-muted-foreground text-xs\">{{ category.description }}</div>\n              </TableCell>\n              <TableCell class=\"text-foreground text-right font-medium tabular-nums\">{{ category.spent }}</TableCell>\n              <TableCell class=\"text-center\">\n                <Badge wrap :variant=\"category.rateBadgeVariant\" class=\"text-xs font-medium\">\n                  {{ category.rate }}\n                </Badge>\n              </TableCell>\n              <TableCell class=\"text-success text-success text-right font-medium tabular-nums\">\n                {{ category.savings }}\n              </TableCell>\n            </TableRow>\n          </TableBody>\n          <TableFooter>\n            <TableRow class=\"font-medium\">\n              <TableCell>Total Business Deductions (5 categories)</TableCell>\n              <TableCell class=\"text-foreground text-right font-bold tabular-nums\">$34,820.00</TableCell>\n              <TableCell class=\"text-center\">\n                <Badge wrap variant=\"outline\" class=\"text-xs font-medium\">95.5% blended</Badge>\n              </TableCell>\n              <TableCell class=\"text-success text-success text-right font-bold tabular-nums\"> $7,119.78 </TableCell>\n            </TableRow>\n          </TableFooter>\n        </Table>\n      </CardContent>\n    </Card>\n\n    <!-- Quarterly Tax Filing Schedule Timeline -->\n    <Card class=\"shadow-xs\">\n      <CardHeader>\n        <div class=\"flex flex-wrap items-center justify-between gap-2\">\n          <div>\n            <CardTitle class=\"text-base font-semibold\">Quarterly Estimated Tax Schedule</CardTitle>\n            <CardDescription class=\"text-xs sm:text-sm\">\n              2026 fiscal tax year remittance timeline, due dates, and IRS EFTPS confirmations.\n            </CardDescription>\n          </div>\n          <div class=\"text-muted-foreground flex items-center gap-1.5 text-xs\">\n            <ShieldCheck class=\"text-success size-4\" aria-hidden=\"true\" />\n            <span>IRS EFTPS Integrated</span>\n          </div>\n        </div>\n      </CardHeader>\n      <CardContent>\n        <div class=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n          <div\n            v-for=\"q in quarterlySchedule\"\n            :key=\"q.quarter\"\n            :class=\"\n              cn(\n                'relative flex flex-col justify-between rounded-lg border p-4 transition-colors',\n                q.isCurrent ? 'border-primary/60 bg-primary/[0.03] shadow-xs' : 'border-border bg-card shadow-2xs',\n              )\n            \"\n          >\n            <div>\n              <div class=\"flex items-center justify-between gap-2\">\n                <span class=\"text-foreground text-sm font-semibold\">{{ q.quarter }}</span>\n                <Badge\n                  :variant=\"q.status === 'Paid' ? 'success' : q.status === 'Upcoming' ? 'warning' : 'secondary'\"\n                  class=\"text-xs font-medium whitespace-normal\"\n                >\n                  {{ q.status }}\n                </Badge>\n              </div>\n\n              <div class=\"mt-2 space-y-1\">\n                <div class=\"text-muted-foreground flex items-center gap-1.5 text-xs\">\n                  <Calendar class=\"size-3.5\" aria-hidden=\"true\" />\n                  <span>Due: {{ q.dueDate }}</span>\n                </div>\n                <p class=\"text-muted-foreground text-xs\">Period: {{ q.period }}</p>\n              </div>\n            </div>\n\n            <div class=\"border-border/60 mt-4 border-t pt-3\">\n              <div class=\"flex flex-wrap items-baseline justify-between gap-x-2 gap-y-0.5\">\n                <span class=\"text-muted-foreground text-xs\">Amount</span>\n                <span :class=\"cn('text-lg font-bold tabular-nums', q.isCurrent ? 'text-primary' : 'text-foreground')\">\n                  {{ q.amount }}\n                </span>\n              </div>\n              <div\n                :class=\"\n                  cn(\n                    'mt-1 flex items-center gap-1.5 text-xs',\n                    q.status === 'Paid'\n                      ? 'text-success'\n                      : q.status === 'Upcoming'\n                        ? 'text-warning'\n                        : 'text-muted-foreground',\n                  )\n                \"\n              >\n                <CheckCircle2 v-if=\"q.status === 'Paid'\" class=\"size-3.5 shrink-0\" aria-hidden=\"true\" />\n                <Clock v-else-if=\"q.status === 'Upcoming'\" class=\"size-3.5 shrink-0\" aria-hidden=\"true\" />\n                <Calendar v-else class=\"size-3.5 shrink-0\" aria-hidden=\"true\" />\n                <span class=\"truncate\">{{ q.note }}</span>\n              </div>\n            </div>\n          </div>\n        </div>\n      </CardContent>\n    </Card>\n  </div>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/TaxSummaryReport.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/progress.json",
    "https://uipkge.dev/r/vue/select.json",
    "https://uipkge.dev/r/vue/table.json"
  ],
  "description": "QuickBooks and Stripe Tax style quarterly estimated tax calculator and liability report: four KPI summary cards, jurisdictional liability breakdown (federal, state, FICA), IRS Schedule C deductible expenses table with tax savings, and a quarterly filing timeline.",
  "categories": [
    "finance",
    "app",
    "billing",
    "dashboard"
  ]
}