{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "invoice-creator-wizard", "title": "Invoice Creator Wizard", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/invoice-creator-wizard/invoice-creator-wizard.component.ts", "content": "import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output, computed, signal } from '@angular/core'\nimport {\n Building2,\n CheckCircle2,\n CreditCard,\n Eye,\n FileText,\n LucideAngularModule,\n Percent,\n Plus,\n Receipt,\n Save,\n Send,\n Trash2,\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 { UiInputComponent } from '@/ui/input/input.component'\nimport {\n UiSelectComponent,\n UiSelectContentComponent,\n UiSelectItemComponent,\n UiSelectTriggerComponent,\n UiSelectValueComponent,\n} from '@/ui/select/select.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\nimport { UiTextareaComponent } from '@/ui/textarea/textarea.component'\n\nexport interface InvoiceLineItem {\n id: string\n description: string\n quantity: number\n unitPrice: number\n}\n\nexport interface ClientPreset {\n id: string\n name: string\n company: string\n email: string\n address: string\n}\n\nconst CLIENT_PRESETS: ClientPreset[] = [\n {\n id: 'c1',\n name: 'Sarah Jenkins',\n company: 'Apex Digital Inc.',\n email: 'sarah.jenkins@apexdigital.com',\n address: '742 Evergreen Terrace, Springfield, OR 97477',\n },\n {\n id: 'c2',\n name: 'Marcus Vance',\n company: 'Northwind Global Corp.',\n email: 'marcus.vance@northwind.io',\n address: '452 Broadway, 8th Floor, New York, NY 10013',\n },\n {\n id: 'c3',\n name: 'Elena Rostova',\n company: 'Hyperion Robotics',\n email: 'elena@hyperion-robotics.ai',\n address: '10 Tech Parkway, Suite 300, Boston, MA 02115',\n },\n]\n\nconst DEFAULT_LINE_ITEMS: InvoiceLineItem[] = [\n { id: 'item-1', description: 'Design System Architecture & Component Registry', quantity: 1, unitPrice: 3200 },\n { id: 'item-2', description: 'Frontend Implementation (Vue 3 + React Mirror)', quantity: 35, unitPrice: 120 },\n { id: 'item-3', description: 'Accessibility & WCAG AA Compliance Audit', quantity: 1, unitPrice: 850 },\n]\n\nconst PAYMENT_TERMS_MAP: Record = {\n receipt: 'Due on Receipt',\n net15: 'Net 15 (Due in 15 days)',\n net30: 'Net 30 (Due in 30 days)',\n net60: 'Net 60 (Due in 60 days)',\n}\n\n/**\n * InvoiceCreatorWizard -- the React block, 1:1: a Square/Stripe-style interactive invoice\n * builder with a business/client details card, client presets, invoice timing + currency\n * selects, a dynamic line-items table, tax/discount adjustments, notes, a live paper\n * document preview, and Preview PDF / Save Draft / Send Invoice actions with a banner.\n */\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-invoice-creator-wizard, [ui-invoice-creator-wizard]',\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 UiInputComponent,\n UiSelectComponent,\n UiSelectContentComponent,\n UiSelectItemComponent,\n UiSelectTriggerComponent,\n UiSelectValueComponent,\n UiSeparatorComponent,\n UiTextareaComponent,\n ],\n template: `\n
\n \n
\n
\n
\n

Create New Invoice

\n \n {{ invoiceNumber() }}\n \n Draft\n
\n

\n Build itemized invoices with live calculation, instant document preview, and client presets.\n

\n
\n\n \n
\n \n \n \n
\n
\n\n \n @if (notification(); as note) {\n \n
\n \n {{ note.message }}\n
\n \n Dismiss\n \n
\n }\n\n \n
\n \n
\n \n
\n
\n
\n \n

Business & Client Details

\n
\n

\n Configure your issuing entity information and bill-to client contact.\n

\n
\n
\n \n
\n
\n From (Issuer)\n ID: {{ invoiceNumber() }}\n
\n
\n
\n \n \n
\n
\n \n \n
\n
\n
\n
\n \n \n
\n
\n
\n\n
\n\n \n
\n
\n Bill To (Client)\n
\n Quick Preset:\n
\n \n \n \n @for (preset of clientPresets; track preset.id) {\n {{ preset.company }}\n }\n Custom Client\n \n \n
\n
\n
\n\n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n
\n\n
\n\n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n \n \n Due on Receipt\n Net 15\n Net 30\n Net 60\n \n \n
\n
\n \n \n \n \n USD ($)\n EUR (€)\n GBP (£)\n CAD ($)\n AUD ($)\n \n \n
\n
\n
\n
\n\n \n
\n
\n
\n
\n \n

Line Items

\n
\n \n {{ items().length }} {{ items().length === 1 ? 'item' : 'items' }}\n \n
\n

\n Itemize deliverables, billable hours, software licenses, or custom services.\n

\n
\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n @for (item of items(); track item.id) {\n \n \n \n \n \n \n \n }\n \n
DescriptionQtyUnit PriceLine Total
\n \n \n \n \n \n \n {{ formatCurrency((toNum(item.quantity) || 0) * (toNum(item.unitPrice) || 0)) }}\n \n \n \n \n
\n
\n\n
\n \n \n Add Line Item\n \n
\n Subtotal:\n {{ formatCurrency(subtotal()) }}\n
\n
\n
\n
\n\n \n
\n
\n
\n \n

Adjustments & Notes

\n
\n

\n Itemize tax rates, discount subtractions, and client payment instructions.\n

\n
\n
\n
\n \n
\n
\n \n +{{ formatCurrency(taxAmount()) }}\n
\n \n
\n\n \n
\n
\n \n
\n \n Fixed ($)\n \n \n Percent (%)\n \n
\n
\n
\n \n \n -{{ formatCurrency(effectiveDiscount()) }}\n \n
\n
\n
\n\n \n
\n \n \n
\n
\n
\n
\n\n \n
\n
\n
\n \n \n \n \n \n \n Live Document Preview\n \n
\n Printable A4\n
\n\n \n \n \n
\n
\n
\n \n AS\n
\n
\n {{ issuerName() || 'Business Name' }}\n
\n
\n

\n {{ issuerAddress() || 'Address not set' }}\n

\n

\n {{ issuerEmail() || 'billing@domain.com' }}\n

\n @if (issuerTaxId()) {\n

Tax: {{ issuerTaxId() }}

\n }\n
\n\n
\n Invoice\n
{{ invoiceNumber() }}
\n \n Ready to Send\n \n
\n
\n\n
\n\n \n
\n
\n Billed To\n

{{ clientName() || 'Client Name' }}

\n @if (clientCompany()) {\n

{{ clientCompany() }}

\n }\n

{{ clientAddress() || 'No address provided' }}

\n

{{ clientEmail() || 'client@email.com' }}

\n
\n\n
\n Invoice Details\n
\n
\n Issued:\n {{ formatDate(invoiceDate()) }}\n
\n
\n Due:\n {{ formatDate(dueDate()) }}\n
\n
\n Terms:\n {{ termsLabel() }}\n
\n
\n
\n
\n\n
\n\n \n
\n
\n \n \n \n \n \n \n \n \n \n \n @for (item of items(); track item.id) {\n \n \n \n \n \n \n }\n \n
Item & DescriptionQtyRateAmount
\n

{{ item.description || 'Custom Deliverable' }}

\n 		{{ item.quantity }}\n {{ formatCurrency(toNum(item.unitPrice) || 0) }}\n \n {{ formatCurrency((toNum(item.quantity) || 0) * (toNum(item.unitPrice) || 0)) }}\n
\n
\n
\n\n
\n\n \n
\n
\n Subtotal\n {{ formatCurrency(subtotal()) }}\n
\n\n @if (effectiveDiscount() > 0) {\n
\n \n Discount\n @if (discountType() === 'percent') {\n ({{ discountValue() }}%)\n }\n \n -{{ formatCurrency(effectiveDiscount()) }}\n
\n }\n\n @if (taxRate() > 0) {\n
\n Tax ({{ taxRate() }}%)\n +{{ formatCurrency(taxAmount()) }}\n
\n }\n\n
\n\n
\n Total Due\n {{ formatCurrency(totalDue()) }}\n
\n
\n\n \n
\n
\n \n Payment Instructions\n
\n @if (notes()) {\n

{{ notes() }}

\n }\n \n ACH / Wire: **** 9104\n Routing: **** 4892\n
\n
\n
\n \n \n \n `,\n})\nexport class UiInvoiceCreatorWizardComponent implements OnInit {\n protected readonly Building2 = Building2\n protected readonly CheckCircle2 = CheckCircle2\n protected readonly CreditCard = CreditCard\n protected readonly Eye = Eye\n protected readonly FileText = FileText\n protected readonly Percent = Percent\n protected readonly Plus = Plus\n protected readonly Receipt = Receipt\n protected readonly Save = Save\n protected readonly Send = Send\n protected readonly Trash2 = Trash2\n\n protected readonly clientPresets = CLIENT_PRESETS\n protected readonly cn = cn\n\n @Input() initialInvoiceNumber = 'INV-2026-0042'\n @Input() initialIssuerName = 'Acme Design & Engineering Studio'\n @Input() initialIssuerEmail = 'billing@acmestudio.io'\n @Input() initialIssuerAddress = '100 Montgomery St, Suite 1400, San Francisco, CA 94104'\n @Input() initialIssuerTaxId = 'US-EIN-94-2819034'\n @Input() initialClientName = 'Sarah Jenkins'\n @Input() initialClientCompany = 'Apex Digital Inc.'\n @Input() initialClientEmail = 'sarah.jenkins@apexdigital.com'\n @Input() initialClientAddress = '742 Evergreen Terrace, Springfield, OR 97477'\n @Input() initialInvoiceDate = '2026-08-21'\n @Input() initialDueDate = '2026-09-20'\n @Input() initialPaymentTerms = 'net30'\n @Input() initialCurrency = 'USD'\n @Input() initialItems?: InvoiceLineItem[]\n @Input() initialTaxRate = 8.5\n @Input() initialDiscountType: 'fixed' | 'percent' = 'fixed'\n @Input() initialDiscountValue = 150\n @Input() initialNotes =\n 'Thank you for your partnership! Please remit payment via wire transfer or online payment link within 30 days. Contact billing@acmestudio.io for any questions.'\n @Input('class') className?: string\n\n @Output() readonly saveDraft = new EventEmitter>()\n @Output() readonly sendInvoice = new EventEmitter>()\n @Output() readonly previewPdf = new EventEmitter()\n\n readonly invoiceNumber = signal('INV-2026-0042')\n readonly issuerName = signal('Acme Design & Engineering Studio')\n readonly issuerEmail = signal('billing@acmestudio.io')\n readonly issuerAddress = signal('100 Montgomery St, Suite 1400, San Francisco, CA 94104')\n readonly issuerTaxId = signal('US-EIN-94-2819034')\n\n readonly selectedPreset = signal('c1')\n readonly clientName = signal('Sarah Jenkins')\n readonly clientCompany = signal('Apex Digital Inc.')\n readonly clientEmail = signal('sarah.jenkins@apexdigital.com')\n readonly clientAddress = signal('742 Evergreen Terrace, Springfield, OR 97477')\n\n readonly invoiceDate = signal('2026-08-21')\n readonly dueDate = signal('2026-09-20')\n readonly paymentTerms = signal('net30')\n readonly currency = signal('USD')\n\n readonly items = signal(DEFAULT_LINE_ITEMS.map((i) => ({ ...i })))\n\n readonly taxRate = signal(8.5)\n readonly discountType = signal<'fixed' | 'percent'>('fixed')\n readonly discountValue = signal(150)\n readonly notes = signal(\n 'Thank you for your partnership! Please remit payment via wire transfer or online payment link within 30 days. Contact billing@acmestudio.io for any questions.',\n )\n\n readonly notification = signal<{ type: 'success' | 'info'; message: string } | null>(null)\n private notifTimeout: ReturnType | null = null\n\n ngOnInit(): void {\n this.invoiceNumber.set(this.initialInvoiceNumber)\n this.issuerName.set(this.initialIssuerName)\n this.issuerEmail.set(this.initialIssuerEmail)\n this.issuerAddress.set(this.initialIssuerAddress)\n this.issuerTaxId.set(this.initialIssuerTaxId)\n this.clientName.set(this.initialClientName)\n this.clientCompany.set(this.initialClientCompany)\n this.clientEmail.set(this.initialClientEmail)\n this.clientAddress.set(this.initialClientAddress)\n this.invoiceDate.set(this.initialInvoiceDate)\n this.dueDate.set(this.initialDueDate)\n this.paymentTerms.set(this.initialPaymentTerms)\n this.currency.set(this.initialCurrency)\n this.items.set(\n this.initialItems && this.initialItems.length > 0\n ? this.initialItems.map((i) => ({ ...i }))\n : DEFAULT_LINE_ITEMS.map((i) => ({ ...i })),\n )\n this.taxRate.set(this.initialTaxRate)\n this.discountType.set(this.initialDiscountType)\n this.discountValue.set(this.initialDiscountValue)\n this.notes.set(this.initialNotes)\n }\n\n readonly subtotal = computed(() => {\n return this.items().reduce((acc, item) => {\n const qty = Number(item.quantity) || 0\n const price = Number(item.unitPrice) || 0\n return acc + qty * price\n }, 0)\n })\n\n readonly discountAmount = computed(() => {\n const val = Number(this.discountValue()) || 0\n if (this.discountType() === 'percent') return this.subtotal() * (val / 100)\n return val\n })\n\n readonly effectiveDiscount = computed(() => {\n return Math.min(this.subtotal(), Math.max(0, this.discountAmount()))\n })\n\n readonly taxableAmount = computed(() => Math.max(0, this.subtotal() - this.effectiveDiscount()))\n\n readonly taxAmount = computed(() => {\n const rate = Number(this.taxRate()) || 0\n return this.taxableAmount() * (rate / 100)\n })\n\n readonly totalDue = computed(() => this.taxableAmount() + this.taxAmount())\n\n get rootClass(): string {\n return cn('mx-auto w-full max-w-7xl space-y-6', this.className)\n }\n\n toNumber(raw: string): number {\n return Number(raw) || 0\n }\n\n toNum(value: number | string): number {\n return Number(value) || 0\n }\n\n termsLabel(): string {\n return PAYMENT_TERMS_MAP[this.paymentTerms()] ?? this.paymentTerms()\n }\n\n formatCurrency(amount: number, curr: string = this.currency()): string {\n try {\n return new Intl.NumberFormat('en-US', {\n style: 'currency',\n currency: curr,\n minimumFractionDigits: 2,\n maximumFractionDigits: 2,\n }).format(amount)\n } catch {\n const symbols: Record = { USD: '$', EUR: '€', GBP: '£', CAD: 'CA$', AUD: 'AU$' }\n const s = symbols[curr] || '$'\n return `${s}${amount.toFixed(2)}`\n }\n }\n\n formatDate(dateStr: string): string {\n if (!dateStr) return '—'\n try {\n const [y, m, d] = dateStr.split('-').map(Number)\n if (!y || !m || !d) return dateStr\n const date = new Date(y, m - 1, d)\n return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })\n } catch {\n return dateStr\n }\n }\n\n private showNotification(message: string, type: 'success' | 'info' = 'success'): void {\n if (this.notifTimeout) clearTimeout(this.notifTimeout)\n this.notification.set({ message, type })\n this.notifTimeout = setTimeout(() => this.notification.set(null), 4000)\n }\n\n handlePresetChange(presetId: string): void {\n const id = String(presetId)\n this.selectedPreset.set(id)\n if (id === 'custom') return\n const preset = CLIENT_PRESETS.find((c) => c.id === id)\n if (preset) {\n this.clientName.set(preset.name)\n this.clientCompany.set(preset.company)\n this.clientEmail.set(preset.email)\n this.clientAddress.set(preset.address)\n }\n }\n\n addLineItem(): void {\n const newId = `item-${Date.now()}`\n this.items.update((prev) => [...prev, { id: newId, description: '', quantity: 1, unitPrice: 0 }])\n }\n\n removeLineItem(id: string): void {\n if (this.items().length > 1) this.items.update((prev) => prev.filter((i) => i.id !== id))\n }\n\n updateItem(id: string, patch: Partial): void {\n this.items.update((prev) => prev.map((i) => (i.id === id ? { ...i, ...patch } : i)))\n }\n\n getPayload(): Record {\n return {\n invoiceNumber: this.invoiceNumber(),\n issuer: {\n name: this.issuerName(),\n email: this.issuerEmail(),\n address: this.issuerAddress(),\n taxId: this.issuerTaxId(),\n },\n client: {\n name: this.clientName(),\n company: this.clientCompany(),\n email: this.clientEmail(),\n address: this.clientAddress(),\n },\n dates: {\n issued: this.invoiceDate(),\n due: this.dueDate(),\n terms: this.paymentTerms(),\n },\n currency: this.currency(),\n items: this.items(),\n calculations: {\n subtotal: this.subtotal(),\n discount: this.effectiveDiscount(),\n tax: this.taxAmount(),\n total: this.totalDue(),\n },\n notes: this.notes(),\n }\n }\n\n handleSaveDraft(): void {\n this.saveDraft.emit(this.getPayload())\n this.showNotification(`Draft invoice ${this.invoiceNumber()} saved successfully.`, 'info')\n }\n\n handleSendInvoice(): void {\n this.sendInvoice.emit(this.getPayload())\n this.showNotification(`Invoice ${this.invoiceNumber()} sent to ${this.clientEmail() || 'client'}.`, 'success')\n }\n\n handlePreviewPdf(): void {\n this.previewPdf.emit()\n this.showNotification(`Generating printable PDF preview for ${this.invoiceNumber()}...`, 'info')\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/invoice-creator-wizard/invoice-creator-wizard.component.ts" }, { "path": "packages/registry-angular/blocks/invoice-creator-wizard/index.ts", "content": "export {\n UiInvoiceCreatorWizardComponent,\n type ClientPreset,\n type InvoiceLineItem,\n} from './invoice-creator-wizard.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/invoice-creator-wizard/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/input.json", "https://uipkge.dev/r/angular/select.json", "https://uipkge.dev/r/angular/separator.json", "https://uipkge.dev/r/angular/textarea.json" ], "description": "Square/Stripe-style interactive invoice builder with itemized tax, discount calculation, dynamic line items, client presets, and a real-time paper document preview.", "categories": [ "finance", "app", "billing", "form" ] }