{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "tax-summary-report", "title": "Tax Summary Report", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/tax-summary-report/tax-summary-report.component.ts", "content": "// QuickBooks and Stripe Tax style quarterly estimated tax calculator and liability report:\n// four KPI summary cards, jurisdictional liability breakdown (federal, state, FICA), IRS\n// Schedule C deductible expenses table with tax savings, and a quarterly filing timeline.\n// Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input, signal } from '@angular/core'\nimport {\n Calendar,\n CheckCircle2,\n Clock,\n CreditCard,\n Download,\n FileCheck,\n LucideAngularModule,\n Receipt,\n Scale,\n ShieldCheck,\n TrendingUp,\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 UiCardHeaderComponent,\n UiCardTitleComponent,\n} from '@/ui/card/card.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 {\n UiTableBodyComponent,\n UiTableCellComponent,\n UiTableComponent,\n UiTableFooterComponent,\n UiTableHeadComponent,\n UiTableHeaderComponent,\n UiTableRowComponent,\n} from '@/ui/table/table.component'\n\ntype BadgeVariant = 'default' | 'secondary' | 'destructive' | 'outline' | 'success' | 'warning' | 'info'\n\nconst metrics: {\n title: string\n value: string\n subtitle: string\n badge: string\n badgeVariant: BadgeVariant\n icon: unknown\n}[] = [\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 = [\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 id: string\n name: string\n description: string\n spent: string\n rate: string\n rateBadgeVariant: BadgeVariant\n savings: string\n}[] = [\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 = [\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\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-tax-summary-report, [ui-tax-summary-report]',\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 UiCardHeaderComponent,\n UiCardTitleComponent,\n UiProgressComponent,\n UiSelectComponent,\n UiSelectContentComponent,\n UiSelectItemComponent,\n UiSelectTriggerComponent,\n UiSelectValueComponent,\n UiTableComponent,\n UiTableBodyComponent,\n UiTableCellComponent,\n UiTableFooterComponent,\n UiTableHeadComponent,\n UiTableHeaderComponent,\n UiTableRowComponent,\n ],\n template: `\n
\n \n
\n
\n
\n

Tax Summary & Estimated Liability

\n \n \n Q3 Estimated Taxes Due Sep 15\n \n
\n

\n Quarterly estimated tax obligations, IRS Schedule C deductible expenses, and jurisdictional liabilities.\n

\n
\n\n
\n \n \n \n 2026 Tax Year\n 2025 Tax Year\n 2024 Tax Year\n \n \n\n \n\n \n
\n
\n\n \n
\n @for (metric of metrics; track metric.title) {\n
\n
\n
\n

{{ metric.title }}

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

{{ metric.value }}

\n
\n \n {{ metric.badge }}\n \n {{ metric.subtitle }}\n
\n
\n
\n
\n }\n
\n\n \n
\n
\n
\n
\n

Tax Liability Breakdown by Jurisdiction

\n

\n Estimated Q3 distribution across federal, state, and payroll authorities ($14,280.00 total).\n

\n
\n 3 Jurisdictions Active\n
\n
\n
\n \n
\n
\n
\n
\n
\n
\n
\n Federal (59%)\n State (27%)\n Self-Employment (14%)\n
\n
\n\n \n
\n @for (j of jurisdictions; track j.id) {\n
\n
\n
\n
\n
\n \n

{{ j.name }}

\n
\n

{{ j.authority }}

\n
\n {{ j.percentage }}%\n
\n\n
\n

{{ j.amount }}

\n

{{ j.rateDescription }}

\n
\n
\n\n \n
\n }\n
\n \n \n\n \n
\n
\n
\n
\n

Deductible Expense Categories

\n

\n IRS Schedule C business deductions applied YTD to reduce gross taxable revenue ($34,820.00 total spent).\n

\n
\n YTD Tax Savings: $7,119.78\n
\n
\n
\n \n \n \n \n \n \n \n \n \n \n @for (category of deductionCategories; track category.id) {\n \n \n \n \n \n \n }\n \n \n \n \n \n \n \n \n \n
Category & DescriptionTotal Spent YTDDeductible RateTotal Tax Savings
\n
{{ category.name }}
\n
{{ category.description }}
\n 		\n {{ category.spent }}\n \n \n {{ category.rate }}\n \n \n {{ category.savings }}\n
Total Business Deductions (5 categories)$34,820.00\n 95.5% blended\n $7,119.78
\n
\n
\n\n \n
\n
\n
\n
\n

Quarterly Estimated Tax Schedule

\n

\n 2026 fiscal tax year remittance timeline, due dates, and IRS EFTPS confirmations.\n

\n
\n
\n \n IRS EFTPS Integrated\n
\n
\n
\n
\n
\n @for (q of quarterlySchedule; track q.quarter) {\n
\n
\n
\n {{ q.quarter }}\n \n {{ q.status }}\n \n
\n\n
\n
\n \n Due: {{ q.dueDate }}\n
\n

Period: {{ q.period }}

\n
\n
\n\n
\n
\n Amount\n {{ q.amount }}\n
\n
\n \n {{ q.note }}\n
\n
\n
\n }\n
\n
\n
\n \n `,\n})\nexport class UiTaxSummaryReportComponent {\n protected readonly Calendar = Calendar\n protected readonly CheckCircle2 = CheckCircle2\n protected readonly Clock = Clock\n protected readonly CreditCard = CreditCard\n protected readonly Download = Download\n protected readonly ShieldCheck = ShieldCheck\n\n protected readonly metrics = metrics\n protected readonly jurisdictions = jurisdictions\n protected readonly deductionCategories = deductionCategories\n protected readonly quarterlySchedule = quarterlySchedule\n\n @Input('class') className?: string\n\n readonly selectedYear = signal('2026')\n\n get rootClass(): string {\n return cn('w-full space-y-6', this.className)\n }\n\n jurisdictionDotClass(accentColor: string): string {\n return cn('size-2.5 shrink-0 self-start rounded-full', accentColor)\n }\n\n quarterCardClass(isCurrent: boolean): string {\n return cn(\n 'relative flex flex-col justify-between rounded-lg border p-4 transition-colors',\n isCurrent ? 'border-primary/60 bg-primary/[0.03] shadow-xs' : 'border-border bg-card shadow-2xs',\n )\n }\n\n quarterAmountClass(isCurrent: boolean): string {\n return cn('text-lg font-bold tabular-nums', isCurrent ? 'text-primary' : 'text-foreground')\n }\n\n quarterStatusVariant(status: string): BadgeVariant {\n if (status === 'Paid') return 'success'\n if (status === 'Upcoming') return 'warning'\n return 'secondary'\n }\n\n quarterNoteClass(status: string): string {\n return cn(\n 'mt-1 flex items-center gap-1.5 text-xs',\n status === 'Paid' ? 'text-success' : status === 'Upcoming' ? 'text-warning' : 'text-muted-foreground',\n )\n }\n\n quarterNoteIcon(status: string): unknown {\n if (status === 'Paid') return CheckCircle2\n if (status === 'Upcoming') return Clock\n return Calendar\n }\n\n metricIcon(icon: unknown): unknown {\n return icon\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/tax-summary-report/tax-summary-report.component.ts" }, { "path": "packages/registry-angular/blocks/tax-summary-report/index.ts", "content": "export { UiTaxSummaryReportComponent } from './tax-summary-report.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/tax-summary-report/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/progress.json", "https://uipkge.dev/r/angular/select.json", "https://uipkge.dev/r/angular/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" ] }