{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tax-summary-report",
  "title": "Tax Summary Report",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/tax-summary-report/TaxSummaryReport.tsx",
      "content": "'use client'\n\nimport * as React from 'react'\nimport {\n  Calendar,\n  CheckCircle2,\n  Clock,\n  CreditCard,\n  Download,\n  FileCheck,\n  Receipt,\n  Scale,\n  ShieldCheck,\n  TrendingUp,\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, 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\nexport interface TaxSummaryReportProps {\n  className?: string\n}\n\ninterface MetricItem {\n  title: string\n  value: string\n  subtitle: string\n  badge: string\n  badgeVariant: 'default' | 'secondary' | 'destructive' | 'outline' | 'success' | 'warning' | 'info'\n  icon: React.ElementType\n}\n\ninterface JurisdictionItem {\n  id: string\n  name: string\n  authority: string\n  amount: string\n  percentage: number\n  rateDescription: string\n  accentColor: string\n}\n\ninterface DeductionCategoryItem {\n  id: string\n  name: string\n  description: string\n  spent: string\n  rate: string\n  rateBadgeVariant: 'default' | 'secondary' | 'destructive' | 'outline' | 'success' | 'warning' | 'info'\n  savings: string\n}\n\ninterface QuarterlyScheduleItem {\n  quarter: string\n  period: string\n  dueDate: string\n  status: 'Paid' | 'Upcoming' | 'Future'\n  amount: string\n  note: string\n  isCurrent: boolean\n}\n\nconst metrics: MetricItem[] = [\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',\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',\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',\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',\n    icon: Scale,\n  },\n]\n\nconst jurisdictions: JurisdictionItem[] = [\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: DeductionCategoryItem[] = [\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',\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',\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',\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',\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',\n    savings: '$513.60',\n  },\n]\n\nconst quarterlySchedule: QuarterlyScheduleItem[] = [\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\nexport function TaxSummaryReport({ className }: TaxSummaryReportProps) {\n  const [selectedYear, setSelectedYear] = React.useState('2026')\n\n  return (\n    <div data-slot=\"tax-summary-report\" className={cn('w-full space-y-6', className)}>\n      {/* Header Section */}\n      <div className=\"flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between\">\n        <div>\n          <div className=\"flex flex-wrap items-center gap-3\">\n            <h2 className=\"text-foreground text-2xl font-bold tracking-tight\">Tax Summary & Estimated Liability</h2>\n            <Badge wrap variant=\"warning\" className=\"gap-1.5 px-2.5 py-1 text-xs font-medium\">\n              <Clock className=\"size-3.5\" aria-hidden=\"true\" />\n              Q3 Estimated Taxes Due Sep 15\n            </Badge>\n          </div>\n          <p className=\"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 className=\"flex flex-wrap items-center gap-2.5\">\n          <Select value={selectedYear} onValueChange={setSelectedYear}>\n            <SelectTrigger size=\"sm\" className=\"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\" className=\"gap-1.5 text-xs\">\n            <Download className=\"size-4\" aria-hidden=\"true\" />\n            Export Tax Package\n          </Button>\n\n          <Button size=\"sm\" className=\"gap-1.5 text-xs\">\n            <CreditCard className=\"size-4\" aria-hidden=\"true\" />\n            Pay Estimated Tax\n          </Button>\n        </div>\n      </div>\n\n      {/* 4 Key Tax Metrics Cards */}\n      <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n        {metrics.map((metric) => {\n          const Icon = metric.icon\n          return (\n            <Card key={metric.title} className=\"shadow-xs\">\n              <CardContent className=\"p-5\">\n                <div className=\"flex items-center justify-between gap-2\">\n                  <p className=\"text-muted-foreground text-xs font-medium\">{metric.title}</p>\n                  <div\n                    aria-hidden=\"true\"\n                    className=\"bg-muted text-muted-foreground border-border/60 flex size-8 shrink-0 items-center justify-center rounded-md border shadow-2xs\"\n                  >\n                    <Icon className=\"size-4\" />\n                  </div>\n                </div>\n                <div className=\"mt-3\">\n                  <p className=\"text-foreground text-2xl font-bold tracking-tight tabular-nums\">{metric.value}</p>\n                  <div className=\"mt-2 flex items-center gap-2\">\n                    <Badge wrap variant={metric.badgeVariant} className=\"px-1.5 py-0 text-xs font-medium\">\n                      {\n                        {\n                          default: metric.badge,\n                          secondary: metric.badge,\n                          destructive: metric.badge,\n                          outline: metric.badge,\n                          success: metric.badge,\n                          warning: metric.badge,\n                          info: metric.badge,\n                        }[metric.badgeVariant]\n                      }\n                    </Badge>\n                    <span className=\"text-muted-foreground truncate text-xs\">{metric.subtitle}</span>\n                  </div>\n                </div>\n              </CardContent>\n            </Card>\n          )\n        })}\n      </div>\n\n      {/* Tax Liability Breakdown by Jurisdiction */}\n      <Card className=\"shadow-xs\">\n        <CardHeader>\n          <div className=\"flex flex-wrap items-center justify-between gap-2\">\n            <div>\n              <CardTitle className=\"text-base font-semibold\">Tax Liability Breakdown by Jurisdiction</CardTitle>\n              <CardDescription className=\"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\" className=\"text-xs tabular-nums\">\n              3 Jurisdictions Active\n            </Badge>\n          </div>\n        </CardHeader>\n        <CardContent className=\"space-y-6\">\n          {/* Visual Multi-segment bar */}\n          <div className=\"space-y-1.5\">\n            <div className=\"bg-muted/60 ring-border/50 flex h-3 w-full overflow-hidden rounded-full p-0.5 ring-1\">\n              <div\n                className=\"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                className=\"bg-warning bg-warning h-full transition-[width] duration-300\"\n                style={{ width: '27%' }}\n                title=\"State & Local Tax: 27%\"\n              />\n              <div\n                className=\"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 className=\"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 className=\"grid grid-cols-1 gap-4 md:grid-cols-3\">\n            {jurisdictions.map((j) => (\n              <div\n                key={j.id}\n                className=\"bg-muted/30 border-border/80 flex flex-col justify-between rounded-lg border p-4 shadow-2xs\"\n              >\n                <div>\n                  <div className=\"flex flex-wrap items-start justify-between gap-2\">\n                    <div>\n                      <div className=\"flex items-center gap-2\">\n                        <span\n                          className={cn('size-2.5 shrink-0 self-start rounded-full', j.accentColor)}\n                          aria-hidden=\"true\"\n                        />\n                        <h4 className=\"text-foreground min-w-0 text-sm font-semibold\">{j.name}</h4>\n                      </div>\n                      <p className=\"text-muted-foreground mt-0.5 text-xs\">{j.authority}</p>\n                    </div>\n                    <Badge wrap variant=\"secondary\" className=\"text-xs font-semibold tabular-nums\">\n                      {j.percentage}%\n                    </Badge>\n                  </div>\n\n                  <div className=\"my-4\">\n                    <p className=\"text-foreground text-2xl font-bold tracking-tight tabular-nums\">{j.amount}</p>\n                    <p className=\"text-muted-foreground mt-1 text-xs\">{j.rateDescription}</p>\n                  </div>\n                </div>\n\n                <Progress value={j.percentage} className=\"h-1.5\" />\n              </div>\n            ))}\n          </div>\n        </CardContent>\n      </Card>\n\n      {/* Deductible Expense Categories Table */}\n      <Card className=\"shadow-xs\">\n        <CardHeader>\n          <div className=\"flex flex-wrap items-center justify-between gap-2\">\n            <div>\n              <CardTitle className=\"text-base font-semibold\">Deductible Expense Categories</CardTitle>\n              <CardDescription className=\"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\" className=\"text-xs font-medium tabular-nums\">\n              YTD Tax Savings: $7,119.78\n            </Badge>\n          </div>\n        </CardHeader>\n        <CardContent className=\"p-0\">\n          <Table>\n            <TableHeader>\n              <TableRow>\n                <TableHead className=\"w-[45%]\">Category & Description</TableHead>\n                <TableHead className=\"text-right\">Total Spent YTD</TableHead>\n                <TableHead className=\"text-center\">Deductible Rate</TableHead>\n                <TableHead className=\"text-right\">Total Tax Savings</TableHead>\n              </TableRow>\n            </TableHeader>\n            <TableBody>\n              {deductionCategories.map((category) => (\n                <TableRow key={category.id}>\n                  <TableCell>\n                    <div className=\"text-foreground text-sm font-medium\">{category.name}</div>\n                    <div className=\"text-muted-foreground text-xs\">{category.description}</div>\n                  </TableCell>\n                  <TableCell className=\"text-foreground text-right font-medium tabular-nums\">\n                    {category.spent}\n                  </TableCell>\n                  <TableCell className=\"text-center\">\n                    <Badge wrap variant={category.rateBadgeVariant} className=\"text-xs font-medium\">\n                      {category.rate}\n                    </Badge>\n                  </TableCell>\n                  <TableCell className=\"text-success text-success text-right font-medium tabular-nums\">\n                    {category.savings}\n                  </TableCell>\n                </TableRow>\n              ))}\n            </TableBody>\n            <TableFooter>\n              <TableRow className=\"font-medium\">\n                <TableCell>Total Business Deductions (5 categories)</TableCell>\n                <TableCell className=\"text-foreground text-right font-bold tabular-nums\">$34,820.00</TableCell>\n                <TableCell className=\"text-center\">\n                  <Badge wrap variant=\"outline\" className=\"text-xs font-medium\">\n                    95.5% blended\n                  </Badge>\n                </TableCell>\n                <TableCell className=\"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 className=\"shadow-xs\">\n        <CardHeader>\n          <div className=\"flex flex-wrap items-center justify-between gap-2\">\n            <div>\n              <CardTitle className=\"text-base font-semibold\">Quarterly Estimated Tax Schedule</CardTitle>\n              <CardDescription className=\"text-xs sm:text-sm\">\n                2026 fiscal tax year remittance timeline, due dates, and IRS EFTPS confirmations.\n              </CardDescription>\n            </div>\n            <div className=\"text-muted-foreground flex items-center gap-1.5 text-xs\">\n              <ShieldCheck className=\"text-success size-4\" aria-hidden=\"true\" />\n              <span>IRS EFTPS Integrated</span>\n            </div>\n          </div>\n        </CardHeader>\n        <CardContent>\n          <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n            {quarterlySchedule.map((q) => (\n              <div\n                key={q.quarter}\n                className={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                <div>\n                  <div className=\"flex items-center justify-between gap-2\">\n                    <span className=\"text-foreground text-sm font-semibold\">{q.quarter}</span>\n                    <Badge\n                      wrap\n                      variant={q.status === 'Paid' ? 'success' : q.status === 'Upcoming' ? 'warning' : 'secondary'}\n                      className=\"text-xs font-medium\"\n                    >\n                      {q.status}\n                    </Badge>\n                  </div>\n\n                  <div className=\"mt-2 space-y-1\">\n                    <div className=\"text-muted-foreground flex items-center gap-1.5 text-xs\">\n                      <Calendar className=\"size-3.5\" aria-hidden=\"true\" />\n                      <span>Due: {q.dueDate}</span>\n                    </div>\n                    <p className=\"text-muted-foreground text-xs\">Period: {q.period}</p>\n                  </div>\n                </div>\n\n                <div className=\"border-border/60 mt-4 border-t pt-3\">\n                  <div className=\"flex flex-wrap items-baseline justify-between gap-x-2 gap-y-0.5\">\n                    <span className=\"text-muted-foreground text-xs\">Amount</span>\n                    <span\n                      className={cn('text-lg font-bold tabular-nums', q.isCurrent ? 'text-primary' : 'text-foreground')}\n                    >\n                      {q.amount}\n                    </span>\n                  </div>\n                  <div\n                    className={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                    {q.status === 'Paid' ? (\n                      <CheckCircle2 className=\"size-3.5 shrink-0\" aria-hidden=\"true\" />\n                    ) : q.status === 'Upcoming' ? (\n                      <Clock className=\"size-3.5 shrink-0\" aria-hidden=\"true\" />\n                    ) : (\n                      <Calendar className=\"size-3.5 shrink-0\" aria-hidden=\"true\" />\n                    )}\n                    <span className=\"truncate\">{q.note}</span>\n                  </div>\n                </div>\n              </div>\n            ))}\n          </div>\n        </CardContent>\n      </Card>\n    </div>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/TaxSummaryReport.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/progress.json",
    "https://uipkge.dev/r/react/select.json",
    "https://uipkge.dev/r/react/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"
  ]
}