{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "invoice-creator-wizard", "title": "Invoice Creator Wizard", "type": "registry:block", "files": [ { "path": "packages/registry-react/blocks/invoice-creator-wizard/InvoiceCreatorWizard.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport {\n Building2,\n CheckCircle2,\n CreditCard,\n Eye,\n FileText,\n Percent,\n Plus,\n Receipt,\n Save,\n Send,\n Trash2,\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 { Input } from '@/components/ui/input'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'\nimport { Separator } from '@/components/ui/separator'\nimport { Textarea } from '@/components/ui/textarea'\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\nexport interface InvoiceCreatorWizardProps {\n className?: string\n initialInvoiceNumber?: string\n initialIssuerName?: string\n initialIssuerEmail?: string\n initialIssuerAddress?: string\n initialIssuerTaxId?: string\n initialClientName?: string\n initialClientCompany?: string\n initialClientEmail?: string\n initialClientAddress?: string\n initialInvoiceDate?: string\n initialDueDate?: string\n initialPaymentTerms?: string\n initialCurrency?: string\n initialItems?: InvoiceLineItem[]\n initialTaxRate?: number\n initialDiscountType?: 'fixed' | 'percent'\n initialDiscountValue?: number\n initialNotes?: string\n onSaveDraft?: (payload: Record) => void\n onSendInvoice?: (payload: Record) => void\n onPreviewPdf?: () => void\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 {\n id: 'item-1',\n description: 'Design System Architecture & Component Registry',\n quantity: 1,\n unitPrice: 3200,\n },\n {\n id: 'item-2',\n description: 'Frontend Implementation (Vue 3 + React Mirror)',\n quantity: 35,\n unitPrice: 120,\n },\n {\n id: 'item-3',\n description: 'Accessibility & WCAG AA Compliance Audit',\n quantity: 1,\n unitPrice: 850,\n },\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\nexport function InvoiceCreatorWizard({\n className,\n initialInvoiceNumber = 'INV-2026-0042',\n initialIssuerName = 'Acme Design & Engineering Studio',\n initialIssuerEmail = 'billing@acmestudio.io',\n initialIssuerAddress = '100 Montgomery St, Suite 1400, San Francisco, CA 94104',\n initialIssuerTaxId = 'US-EIN-94-2819034',\n initialClientName = 'Sarah Jenkins',\n initialClientCompany = 'Apex Digital Inc.',\n initialClientEmail = 'sarah.jenkins@apexdigital.com',\n initialClientAddress = '742 Evergreen Terrace, Springfield, OR 97477',\n initialInvoiceDate = '2026-08-21',\n initialDueDate = '2026-09-20',\n initialPaymentTerms = 'net30',\n initialCurrency = 'USD',\n initialItems,\n initialTaxRate = 8.5,\n initialDiscountType = 'fixed',\n initialDiscountValue = 150,\n initialNotes = '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 onSaveDraft,\n onSendInvoice,\n onPreviewPdf,\n}: InvoiceCreatorWizardProps) {\n // Form State\n const [invoiceNumber] = React.useState(initialInvoiceNumber)\n const [issuerName, setIssuerName] = React.useState(initialIssuerName)\n const [issuerEmail, setIssuerEmail] = React.useState(initialIssuerEmail)\n const [issuerAddress, setIssuerAddress] = React.useState(initialIssuerAddress)\n const [issuerTaxId, setIssuerTaxId] = React.useState(initialIssuerTaxId)\n\n const [selectedPreset, setSelectedPreset] = React.useState('c1')\n const [clientName, setClientName] = React.useState(initialClientName)\n const [clientCompany, setClientCompany] = React.useState(initialClientCompany)\n const [clientEmail, setClientEmail] = React.useState(initialClientEmail)\n const [clientAddress, setClientAddress] = React.useState(initialClientAddress)\n\n const [invoiceDate, setInvoiceDate] = React.useState(initialInvoiceDate)\n const [dueDate, setDueDate] = React.useState(initialDueDate)\n const [paymentTerms, setPaymentTerms] = React.useState(initialPaymentTerms)\n const [currency, setCurrency] = React.useState(initialCurrency)\n\n const [items, setItems] = React.useState(\n initialItems && initialItems.length > 0\n ? initialItems.map((i) => ({ ...i }))\n : DEFAULT_LINE_ITEMS.map((i) => ({ ...i })),\n )\n\n const [taxRate, setTaxRate] = React.useState(initialTaxRate)\n const [discountType, setDiscountType] = React.useState<'fixed' | 'percent'>(initialDiscountType)\n const [discountValue, setDiscountValue] = React.useState(initialDiscountValue)\n const [notes, setNotes] = React.useState(initialNotes)\n\n // Notification toast state\n const [notification, setNotification] = React.useState<{ type: 'success' | 'info'; message: string } | null>(null)\n const timeoutRef = React.useRef | null>(null)\n\n const showNotification = React.useCallback((message: string, type: 'success' | 'info' = 'success') => {\n if (timeoutRef.current) clearTimeout(timeoutRef.current)\n setNotification({ message, type })\n timeoutRef.current = setTimeout(() => {\n setNotification(null)\n }, 4000)\n }, [])\n\n const handlePresetChange = (presetId: string) => {\n setSelectedPreset(presetId)\n if (presetId === 'custom') return\n\n const preset = CLIENT_PRESETS.find((c) => c.id === presetId)\n if (preset) {\n setClientName(preset.name)\n setClientCompany(preset.company)\n setClientEmail(preset.email)\n setClientAddress(preset.address)\n }\n }\n\n const addLineItem = () => {\n const newId = `item-${Date.now()}`\n setItems((prev) => [\n ...prev,\n {\n id: newId,\n description: '',\n quantity: 1,\n unitPrice: 0,\n },\n ])\n }\n\n const removeLineItem = (id: string) => {\n if (items.length > 1) {\n setItems((prev) => prev.filter((i) => i.id !== id))\n }\n }\n\n const updateLineItem = (id: string, field: keyof InvoiceLineItem, value: any) => {\n setItems((prev) => prev.map((item) => (item.id === id ? { ...item, [field]: value } : item)))\n }\n\n // Calculations\n const subtotal = React.useMemo(() => {\n return 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 }, [items])\n\n const discountAmount = React.useMemo(() => {\n const val = Number(discountValue) || 0\n if (discountType === 'percent') {\n return subtotal * (val / 100)\n }\n return val\n }, [discountValue, discountType, subtotal])\n\n const effectiveDiscount = React.useMemo(() => {\n return Math.min(subtotal, Math.max(0, discountAmount))\n }, [subtotal, discountAmount])\n\n const taxableAmount = React.useMemo(() => {\n return Math.max(0, subtotal - effectiveDiscount)\n }, [subtotal, effectiveDiscount])\n\n const taxAmount = React.useMemo(() => {\n const rate = Number(taxRate) || 0\n return taxableAmount * (rate / 100)\n }, [taxableAmount, taxRate])\n\n const totalDue = React.useMemo(() => {\n return taxableAmount + taxAmount\n }, [taxableAmount, taxAmount])\n\n const formatCurrency = React.useCallback(\n (amount: number, curr: string = currency) => {\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 [currency],\n )\n\n const formatDate = React.useCallback((dateStr: 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 const getPayload = React.useCallback(() => {\n return {\n invoiceNumber,\n issuer: {\n name: issuerName,\n email: issuerEmail,\n address: issuerAddress,\n taxId: issuerTaxId,\n },\n client: {\n name: clientName,\n company: clientCompany,\n email: clientEmail,\n address: clientAddress,\n },\n dates: {\n issued: invoiceDate,\n due: dueDate,\n terms: paymentTerms,\n },\n currency,\n items,\n calculations: {\n subtotal,\n discount: effectiveDiscount,\n tax: taxAmount,\n total: totalDue,\n },\n notes,\n }\n }, [\n invoiceNumber,\n issuerName,\n issuerEmail,\n issuerAddress,\n issuerTaxId,\n clientName,\n clientCompany,\n clientEmail,\n clientAddress,\n invoiceDate,\n dueDate,\n paymentTerms,\n currency,\n items,\n subtotal,\n effectiveDiscount,\n taxAmount,\n totalDue,\n notes,\n ])\n\n const handleSaveDraft = () => {\n const payload = getPayload()\n onSaveDraft?.(payload)\n showNotification(`Draft invoice ${invoiceNumber} saved successfully.`, 'info')\n }\n\n const handleSendInvoice = () => {\n const payload = getPayload()\n onSendInvoice?.(payload)\n showNotification(`Invoice ${invoiceNumber} sent to ${clientEmail || 'client'}.`, 'success')\n }\n\n const handlePreviewPdf = () => {\n onPreviewPdf?.()\n showNotification(`Generating printable PDF preview for ${invoiceNumber}...`, 'info')\n }\n\n return (\n
\n {/* Top Action Header */}\n
\n
\n
\n

Create New Invoice

\n \n {invoiceNumber}\n \n \n Draft\n \n
\n

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

\n
\n\n {/* Action Buttons */}\n
\n \n \n \n
\n
\n\n {/* Notification Toast / Alert Banner */}\n {notification && (\n \n
\n \n {notification.message}\n
\n setNotification(null)}\n >\n Dismiss\n \n
\n )}\n\n {/* 2-Column Invoice Builder Layout */}\n
\n {/* Left Column: Form Builder */}\n
\n {/* Section 1: Business & Client Details */}\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 {/* Issuer Details */}\n
\n
\n \n From (Issuer)\n \n ID: {invoiceNumber}\n
\n
\n
\n \n setIssuerName(e.target.value)}\n placeholder=\"Business name\"\n size=\"small\"\n />\n
\n
\n \n setIssuerEmail(e.target.value)}\n placeholder=\"billing@company.com\"\n size=\"small\"\n />\n
\n
\n \n setIssuerTaxId(e.target.value)}\n placeholder=\"Tax ID / EIN\"\n size=\"small\"\n />\n
\n
\n \n setIssuerAddress(e.target.value)}\n placeholder=\"Street, City, State, ZIP\"\n size=\"small\"\n />\n
\n
\n
\n\n \n\n {/* Client Details */}\n
\n
\n \n Bill To (Client)\n \n
\n Quick Preset:\n
\n \n
\n
\n
\n\n
\n
\n \n setClientName(e.target.value)}\n placeholder=\"Client contact name\"\n size=\"small\"\n />\n
\n
\n \n setClientCompany(e.target.value)}\n placeholder=\"Client company name\"\n size=\"small\"\n />\n
\n
\n \n setClientEmail(e.target.value)}\n placeholder=\"client@company.com\"\n size=\"small\"\n />\n
\n
\n \n setClientAddress(e.target.value)}\n placeholder=\"Street, City, Postal Code\"\n size=\"small\"\n />\n
\n
\n
\n\n \n\n {/* Invoice Timing & Currency */}\n
\n
\n \n setInvoiceDate(e.target.value)}\n size=\"small\"\n />\n
\n
\n \n setDueDate(e.target.value)}\n size=\"small\"\n />\n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n\n {/* Section 2: Interactive Line Items */}\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 {items.map((item) => (\n \n \n \n \n \n \n \n ))}\n \n
DescriptionQtyUnit PriceLine Total
\n updateLineItem(item.id, 'description', e.target.value)}\n placeholder=\"Service or product description...\"\n size=\"small\"\n className=\"w-full\"\n />\n \n updateLineItem(item.id, 'quantity', Number(e.target.value))}\n size=\"small\"\n className=\"w-20 text-right tabular-nums\"\n />\n \n updateLineItem(item.id, 'unitPrice', Number(e.target.value))}\n size=\"small\"\n className=\"w-28 text-right tabular-nums\"\n />\n \n {formatCurrency((Number(item.quantity) || 0) * (Number(item.unitPrice) || 0))}\n \n removeLineItem(item.id)}\n >\n \n \n
\n
\n\n
\n \n
\n Subtotal:{' '}\n {formatCurrency(subtotal)}\n
\n
\n \n \n\n {/* Section 3: Adjustments & Payment Terms */}\n \n \n
\n \n Adjustments & Notes\n
\n \n Itemize tax rates, discount subtractions, and client payment instructions.\n \n \n \n
\n {/* Tax percentage */}\n
\n
\n \n +{formatCurrency(taxAmount)}\n
\n setTaxRate(Number(e.target.value))}\n placeholder=\"8.5\"\n size=\"small\"\n />\n
\n\n {/* Discount */}\n
\n
\n \n
\n setDiscountType('fixed')}\n >\n Fixed ($)\n \n setDiscountType('percent')}\n >\n Percent (%)\n \n
\n
\n
\n setDiscountValue(Number(e.target.value))}\n placeholder=\"0\"\n size=\"small\"\n className=\"w-full\"\n />\n \n -{formatCurrency(effectiveDiscount)}\n \n
\n
\n
\n\n {/* Notes / Terms */}\n
\n \n \n
\n \n \n
\n\n {/* Right Column: Live Paper Document Preview */}\n
\n
\n
\n \n \n \n \n \n \n Live Document Preview\n \n
\n Printable A4\n
\n\n {/* Paper Invoice Card */}\n
\n {/* Document Header */}\n
\n
\n
\n
\n AS\n
\n
\n {issuerName || 'Business Name'}\n
\n
\n

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

\n

{issuerEmail || 'billing@domain.com'}

\n {issuerTaxId &&

Tax: {issuerTaxId}

}\n
\n\n
\n Invoice\n
{invoiceNumber}
\n \n Ready to Send\n \n
\n
\n\n \n\n {/* Invoice Details: Bill To & Dates */}\n
\n
\n Billed To\n

{clientName || 'Client Name'}

\n {clientCompany &&

{clientCompany}

}\n

{clientAddress || 'No address provided'}

\n

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

\n
\n\n
\n \n Invoice Details\n \n
\n
\n Issued:\n {formatDate(invoiceDate)}\n
\n
\n Due:\n {formatDate(dueDate)}\n
\n
\n Terms:\n \n {PAYMENT_TERMS_MAP[paymentTerms] || paymentTerms}\n \n
\n
\n
\n
\n\n \n\n {/* Line Items Table */}\n
\n
\n \n \n \n \n \n \n \n \n \n \n {items.map((item) => (\n \n \n \n \n \n \n ))}\n \n
Item & DescriptionQtyRateAmount
\n

{item.description || 'Custom Deliverable'}

\n 		{item.quantity}\n {formatCurrency(Number(item.unitPrice) || 0)}\n \n {formatCurrency((Number(item.quantity) || 0) * (Number(item.unitPrice) || 0))}\n
\n
\n
\n\n \n\n {/* Calculations Summary */}\n
\n
\n Subtotal\n {formatCurrency(subtotal)}\n
\n\n {effectiveDiscount > 0 && (\n
\n Discount {discountType === 'percent' ? `(${discountValue}%)` : ''}\n -{formatCurrency(effectiveDiscount)}\n
\n )}\n\n {taxRate > 0 && (\n
\n Tax ({taxRate}%)\n +{formatCurrency(taxAmount)}\n
\n )}\n\n \n\n
\n Total Due\n \n {formatCurrency(totalDue)}\n \n
\n
\n\n {/* Notes / Payment Info Callout */}\n
\n
\n \n Payment Instructions\n
\n {notes &&

{notes}

}\n
\n ACH / Wire: **** 9104\n Routing: **** 4892\n
\n
\n
\n
\n
\n \n )\n}\n", "type": "registry:block", "target": "~/components/blocks/InvoiceCreatorWizard.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/input.json", "https://uipkge.dev/r/react/select.json", "https://uipkge.dev/r/react/separator.json", "https://uipkge.dev/r/react/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" ] }