{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "personal-finance-budget", "title": "Personal Finance Budget", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/personal-finance-budget/personal-finance-budget.component.ts", "content": "import { ChangeDetectionStrategy, Component, Input } from '@angular/core'\nimport {\n Calendar,\n CheckCircle2,\n Clock,\n CreditCard,\n Film,\n FolderPlus,\n HeartPulse,\n Home,\n Laptop,\n LucideAngularModule,\n PiggyBank,\n Plane,\n Plus,\n ShieldCheck,\n ShoppingCart,\n TrendingUp,\n UtensilsCrossed,\n Wallet,\n Zap,\n} from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport {\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n} from '@/ui/card/card.component'\nimport { UiProgressComponent } from '@/ui/progress/progress.component'\nimport {\n UiTableBodyComponent,\n UiTableCellComponent,\n UiTableComponent,\n UiTableHeadComponent,\n UiTableHeaderComponent,\n UiTableRowComponent,\n} from '@/ui/table/table.component'\n\ntype EnvelopeStatus = 'healthy' | 'warning' | 'completed' | 'on-track'\n\ninterface EnvelopeCategory {\n id: string\n name: string\n icon: unknown\n budgeted: number\n spent: number\n note: string\n status: EnvelopeStatus\n statusLabel: string\n isSavings?: boolean\n}\n\ninterface EnvelopeSection {\n id: string\n title: string\n description: string\n icon: unknown\n totalBudgeted: number\n totalSpent: number\n categories: EnvelopeCategory[]\n}\n\nconst sections: EnvelopeSection[] = [\n {\n id: 'immediate-obligations',\n title: 'Immediate Obligations',\n description: 'Non-negotiable fixed living expenses and essential monthly bills.',\n icon: Home,\n totalBudgeted: 3750,\n totalSpent: 3550,\n categories: [\n {\n id: 'cat-housing',\n name: 'Housing & Rent',\n icon: Home,\n budgeted: 2400,\n spent: 2400,\n note: 'Mortgage, HOA fee & insurance · Auto-paid Aug 1',\n status: 'completed',\n statusLabel: 'Paid in Full',\n },\n {\n id: 'cat-utilities',\n name: 'Utilities & Internet',\n icon: Zap,\n budgeted: 350,\n spent: 320,\n note: 'Electric ($185), Water ($75), Fiber ($60)',\n status: 'healthy',\n statusLabel: 'Healthy',\n },\n {\n id: 'cat-groceries',\n name: 'Groceries & Household',\n icon: ShoppingCart,\n budgeted: 800,\n spent: 650,\n note: 'Trader Joe’s & weekly produce · $15.00/day left',\n status: 'healthy',\n statusLabel: 'Healthy',\n },\n {\n id: 'cat-health',\n name: 'Health & Medical',\n icon: HeartPulse,\n budgeted: 200,\n spent: 180,\n note: 'Prescription copays & health membership',\n status: 'healthy',\n statusLabel: 'Healthy',\n },\n ],\n },\n {\n id: 'lifestyle-discretionary',\n title: 'Lifestyle & Discretionary',\n description: 'Variable lifestyle choices, dining, entertainment, and digital subscriptions.',\n icon: UtensilsCrossed,\n totalBudgeted: 700,\n totalSpent: 625,\n categories: [\n {\n id: 'cat-dining',\n name: 'Dining Out & Cafes',\n icon: UtensilsCrossed,\n budgeted: 400,\n spent: 380,\n note: 'Restaurants, coffee & takeout · $20.00 left for 10 days',\n status: 'warning',\n statusLabel: 'Near Limit',\n },\n {\n id: 'cat-entertainment',\n name: 'Entertainment & Leisure',\n icon: Film,\n budgeted: 200,\n spent: 150,\n note: 'Cinema tickets, gaming pass & weekend outings',\n status: 'healthy',\n statusLabel: 'Healthy',\n },\n {\n id: 'cat-tech',\n name: 'Tech & Subscriptions',\n icon: Laptop,\n budgeted: 100,\n spent: 95,\n note: 'iCloud, Spotify, GitHub Pro, ChatGPT Plus',\n status: 'warning',\n statusLabel: 'Near Limit',\n },\n ],\n },\n {\n id: 'savings-investments',\n title: 'Savings Goals & Investments',\n description: 'Dedicated wealth accumulation, emergency reserve, and planned sinking funds.',\n icon: PiggyBank,\n totalBudgeted: 1583,\n totalSpent: 1483,\n categories: [\n {\n id: 'cat-emergency',\n name: 'Emergency Fund',\n icon: ShieldCheck,\n budgeted: 500,\n spent: 500,\n note: 'High-yield cash reserve · Total balance: $18,500.00',\n status: 'completed',\n statusLabel: 'Goal Met',\n isSavings: true,\n },\n {\n id: 'cat-roth',\n name: 'Roth IRA Contribution',\n icon: TrendingUp,\n budgeted: 583,\n spent: 583,\n note: 'Broad-market index ETF · 2026 cap pacing ($7,000/yr)',\n status: 'completed',\n statusLabel: 'Maxed Monthly',\n isSavings: true,\n },\n {\n id: 'cat-vacation',\n name: 'Vacation & Travel Fund',\n icon: Plane,\n budgeted: 500,\n spent: 400,\n note: 'Tokyo autumn trip 2027 · $3,400.00 of $5,000.00 goal',\n status: 'on-track',\n statusLabel: '80% Funded',\n isSavings: true,\n },\n ],\n },\n]\n\nfunction formatCurrency(amount: number): string {\n return `$${amount.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`\n}\n\n/**\n * PersonalFinanceBudget -- the React block, 1:1: zero-based monthly budget header with\n * assignment pill, four overview cards (income, budgeted/spent, savings, month pace),\n * envelope category tables grouped by section with progress and health badges, and a\n * zero-based allocation philosophy footer.\n */\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-personal-finance-budget, [ui-personal-finance-budget]',\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 UiTableComponent,\n UiTableBodyComponent,\n UiTableCellComponent,\n UiTableHeadComponent,\n UiTableHeaderComponent,\n UiTableRowComponent,\n ],\n template: `\n
\n
\n
\n
\n

Monthly Zero-Based Budget

\n \n \n August 2026\n
\n
\n
\n \n \n To be Budgeted: $0.00 · Every dollar assigned!\n
\n \n
\n
\n
\n \n \n
\n
\n\n
\n
\n
\n
\n
\n \n \n
\n

Total Monthly Income

\n
\n 100% Assigned\n
\n
\n
\n
\n
$8,500.00
\n

2 Inflow streams (Salary & Freelance)

\n
\n
\n Unassigned Pool\n $0.00\n
\n
\n
\n\n
\n
\n
\n
\n \n \n
\n

Budgeted & Spent

\n
\n 80.5% Spent\n
\n
\n
\n
\n
\n $6,840.00\n / $8,500.00\n
\n
\n \n
\n
\n
\n Remaining in Envelopes\n $1,660.00\n
\n
\n \n\n
\n
\n
\n
\n \n \n
\n

Savings Allocated

\n
\n 19.5% Rate\n
\n
\n
\n
\n
$1,660.00
\n
\n \n
\n
\n
\n Funded to Date\n $1,483.00 (89.3%)\n
\n
\n \n\n
\n
\n
\n
\n \n \n
\n

Month Pace

\n
\n Day 21 of 31\n
\n
\n
\n
\n
10 Days left
\n
\n \n
\n
\n
\n Cycle Elapsed\n 67.7% of month\n
\n
\n \n \n\n
\n @for (section of sections; track section.id) {\n
\n
\n
\n
\n
\n \n

{{ section.title }}

\n
\n

{{ section.description }}

\n
\n
\n \n Subtotal:\n {{ format(section.totalSpent) }}\n /\n {{\n format(section.totalBudgeted)\n }}\n
\n
\n
\n
\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n @for (cat of section.categories; track cat.id) {\n \n \n \n \n \n \n \n \n }\n \n
Envelope Category\n {{ section.id === 'savings-investments' ? 'Monthly Target' : 'Budgeted' }}\n \n {{ section.id === 'savings-investments' ? 'Funded to Date' : 'Spent to Date' }}\n \n {{ section.id === 'savings-investments' ? 'Remaining to Goal' : 'Available Balance' }}\n Progress & PaceStatus
\n
\n \n \n
\n
\n

{{ cat.name }}

\n

{{ cat.note }}

\n
\n \n 		\n {{ format(cat.budgeted) }}\n \n {{ format(cat.spent) }}\n \n {{ format(cat.budgeted - cat.spent) }}\n \n
\n
\n \n {{ percent(cat) }}% {{ cat.isSavings ? 'funded' : 'used' }}\n \n {{ format(cat.spent) }}\n
\n \n
\n 		\n {{ cat.statusLabel }}\n
\n
\n
\n
\n }\n \n\n
\n
\n
\n \n \n
\n
\n

Zero-Based Allocation Completed

\n

\n Every dollar of your $8,500.00 income is accounted for: $4,450.00 living expenses + $1,583.00 savings\n goals + $2,467.00 scheduled buffer = $0.00 unassigned.\n

\n
\n
\n
\n Next Payday: Sep 1, 2026\n
\n
\n \n \n `,\n})\nexport class UiPersonalFinanceBudgetComponent {\n protected readonly Calendar = Calendar\n protected readonly CheckCircle2 = CheckCircle2\n protected readonly Clock = Clock\n protected readonly CreditCard = CreditCard\n protected readonly FolderPlus = FolderPlus\n protected readonly PiggyBank = PiggyBank\n protected readonly Plus = Plus\n protected readonly Wallet = Wallet\n\n @Input('class') className?: string\n\n protected readonly sections = sections\n\n get rootClass(): string {\n return cn('mx-auto w-full max-w-6xl space-y-6', this.className)\n }\n\n format(amount: number): string {\n return formatCurrency(amount)\n }\n\n percent(cat: EnvelopeCategory): number {\n return Math.min(100, Math.round((cat.spent / cat.budgeted) * 100))\n }\n\n asIcon(icon: unknown): never {\n return icon as never\n }\n\n remainingClass(cat: EnvelopeCategory): string {\n const remaining = cat.budgeted - cat.spent\n return cn(\n 'font-bold tabular-nums',\n remaining === 0 ? 'text-muted-foreground' : cat.status === 'warning' ? 'text-warning' : 'text-success',\n )\n }\n\n progressClass(cat: EnvelopeCategory): string {\n return cn('h-1.5', this.progressColor(cat.status))\n }\n\n progressColor(status: EnvelopeStatus): string {\n if (status === 'warning') return '[&_[data-slot=progress-indicator]]:bg-warning'\n return '[&_[data-slot=progress-indicator]]:bg-success'\n }\n\n badgeVariant(cat: EnvelopeCategory): 'warning' | 'success' | 'outline' {\n if (cat.status === 'warning') return 'warning'\n if (cat.status === 'completed' || cat.status === 'healthy' || cat.status === 'on-track') return 'success'\n return 'outline'\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/personal-finance-budget/personal-finance-budget.component.ts" }, { "path": "packages/registry-angular/blocks/personal-finance-budget/index.ts", "content": "export { UiPersonalFinanceBudgetComponent } from './personal-finance-budget.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/personal-finance-budget/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/table.json" ], "description": "YNAB and Copilot-style zero-based monthly budget planner: envelope category budgeting, monthly pacing metrics, real-time spending progress by envelope, color-coded health indicators, and savings goal trackers.", "categories": [ "finance", "dashboard", "app" ] }