{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "commercial-invoice-generator", "title": "Commercial Invoice Generator", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/commercial-invoice-generator/commercial-invoice-generator.component.ts", "content": "import { Component, Input, computed, signal, ChangeDetectionStrategy } from '@angular/core'\nimport { Download, LucideAngularModule, Plus, Printer, ShieldCheck, Trash2 } 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 UiCardFooterComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n} from '@/ui/card/card.component'\nimport { UiInputComponent } from '@/ui/input/input.component'\nimport {\n UiTableBodyComponent,\n UiTableCellComponent,\n UiTableComponent,\n UiTableHeadComponent,\n UiTableHeaderComponent,\n UiTableRowComponent,\n} from '@/ui/table/table.component'\n\nexport interface InvoiceItem {\n id: string\n description: string\n htsCode: string\n countryOfOrigin: string\n qty: number\n unitPrice: number\n weightKg: number\n}\n\nexport interface CommercialInvoiceProps {\n invoiceNumber?: string\n incoterms?: string\n currency?: string\n className?: string\n}\n\n/**\n * CommercialInvoiceGenerator -- the React block, 1:1: an HTS customs invoice with\n * exporter / importer parties, editable line items (description, tariff code, origin,\n * weight, qty, unit price) and FOB + freight + insurance = CIF totals. Signing the\n * declaration locks every row into read-only text; \"Unlock Edit\" reopens it.\n */\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-commercial-invoice-generator, [ui-commercial-invoice-generator]',\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 UiCardHeaderComponent,\n UiCardTitleComponent,\n UiCardDescriptionComponent,\n UiCardContentComponent,\n UiCardFooterComponent,\n UiInputComponent,\n UiTableComponent,\n UiTableHeaderComponent,\n UiTableBodyComponent,\n UiTableRowComponent,\n UiTableHeadComponent,\n UiTableCellComponent,\n ],\n template: `\n
\n \n
\n
\n
\n
\n {{ invoiceNumber }}\n {{ incoterms }}\n \n {{ isSigned() ? 'Customs Declared & Sealed' : 'Draft Declaration' }}\n \n
\n

International Commercial Customs Invoice

\n

\n Harmonized Tariff Schedule (HTS) compliance declaration for international customs clearance.\n

\n
\n\n
\n \n \n @if (!isSigned()) {\n \n } @else {\n \n }\n
\n
\n\n
\n \n
\n
EXPORTER / SHIPPER (CONSIGNOR)
\n
Global Aerospace Components Inc.
\n
9400 Aeronautics Way, Dock 4
\n
Seattle, WA 98108, United States
\n
EORI / Tax ID: US-EIN-98441029
\n
\n\n \n
\n
IMPORTER / BUYER (CONSIGNEE)
\n
Nordic Robotics Systems AB
\n
Industrigatan 18, Byggnad B
\n
SE-417 56 Göteborg, Sweden
\n
VAT / EORI: SE556012345601
\n
\n
\n
\n\n \n
\n
\n
\n

Customs Line Item Breakdown

\n

\n Total Gross Net Weight: {{ totalWeightKg().toFixed(1) }} kg · Currency:\n {{ currency }}\n

\n
\n\n @if (!isSigned()) {\n \n }\n
\n\n
\n
\n \n \n Goods Description\n HTS / Tariff Code\n Origin (COO)\n Net Wt (kg)\n Qty\n Unit Price\n Customs Total\n @if (!isSigned()) {\n \n }\n \n \n \n @for (item of items(); track item.id) {\n \n \n \n @if (!isSigned()) {\n \n } @else {\n {{ item.description }}\n }\n \n\n \n \n @if (!isSigned()) {\n \n } @else {\n {{ item.htsCode }}\n }\n \n\n \n \n @if (!isSigned()) {\n \n } @else {\n {{\n item.countryOfOrigin\n }}\n }\n \n\n \n \n @if (!isSigned()) {\n \n } @else {\n {{ item.weightKg.toFixed(1) }}\n }\n \n\n \n \n @if (!isSigned()) {\n \n } @else {\n {{ item.qty }}\n }\n \n\n \n \n @if (!isSigned()) {\n \n } @else {\n {{ money(item.unitPrice) }}\n }\n \n\n \n \n {{ money(item.qty * item.unitPrice) }}\n \n\n \n @if (!isSigned()) {\n \n \n \n \n \n }\n \n }\n \n
\n
\n\n \n \n
\n

Exporter Declaration & Legal Certification:

\n

\n I hereby certify that the information on this invoice is true and correct and that the contents of this\n shipment are as stated above.\n

\n
\n\n
\n
\n FOB Line Subtotal:\n {{ money(subtotal()) }}\n
\n
\n International Freight (Air):\n {{ money(freightCharges()) }}\n
\n
\n Cargo Marine Insurance:\n {{ money(insuranceCharges()) }}\n
\n
\n Declared CIF Value:\n {{ money(grandTotal()) }} USD\n
\n
\n
\n
\n
\n `,\n})\nexport class UiCommercialInvoiceGeneratorComponent {\n @Input() invoiceNumber = 'INV-EXP-2026-9042'\n @Input() incoterms = 'DAP (Delivered at Place)'\n @Input() currency = 'USD'\n @Input('class') className?: string\n\n protected readonly Printer = Printer\n protected readonly Download = Download\n protected readonly ShieldCheck = ShieldCheck\n protected readonly Plus = Plus\n protected readonly Trash2 = Trash2\n\n readonly isSigned = signal(false)\n readonly freightCharges = signal(450.0)\n readonly insuranceCharges = signal(85.0)\n\n readonly items = signal([\n {\n id: 'inv-1',\n description: 'Precision CNC Machined Aluminum Actuator Housing',\n htsCode: '8479.90.94',\n countryOfOrigin: 'US',\n qty: 50,\n unitPrice: 185.0,\n weightKg: 24.5,\n },\n {\n id: 'inv-2',\n description: 'Brushless DC High-Torque Servo Motor 48V',\n htsCode: '8501.31.20',\n countryOfOrigin: 'DE',\n qty: 25,\n unitPrice: 320.0,\n weightKg: 31.0,\n },\n {\n id: 'inv-3',\n description: 'Industrial Polyurethane Seal Gasket Kit',\n htsCode: '3926.90.99',\n countryOfOrigin: 'JP',\n qty: 100,\n unitPrice: 14.5,\n weightKg: 4.2,\n },\n ])\n\n readonly subtotal = computed(() => this.items().reduce((sum, item) => sum + item.qty * item.unitPrice, 0))\n readonly totalWeightKg = computed(() => this.items().reduce((sum, item) => sum + item.weightKg, 0))\n readonly grandTotal = computed(() => this.subtotal() + this.freightCharges() + this.insuranceCharges())\n\n get rootClass(): string {\n return cn('w-full space-y-6', this.className)\n }\n\n addItem(): void {\n this.items.update((prev) => [\n ...prev,\n {\n id: `inv-${Date.now()}`,\n description: 'General Industrial Hardware / Fasteners',\n htsCode: '7318.15.20',\n countryOfOrigin: 'US',\n qty: 10,\n unitPrice: 25.0,\n weightKg: 2.0,\n },\n ])\n }\n\n removeItem(id: string): void {\n this.items.update((prev) => prev.filter((i) => i.id !== id))\n }\n\n updateItem(id: string, updates: Partial): void {\n this.items.update((prev) => prev.map((item) => (item.id === id ? { ...item, ...updates } : item)))\n }\n\n /** React's `Number(e.target.value)` for the numeric cells. */\n toNumber(value: string): number {\n return Number(value)\n }\n\n /** React's `$${n.toFixed(2)}`. */\n money(value: number): string {\n return `$${value.toFixed(2)}`\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/commercial-invoice-generator/commercial-invoice-generator.component.ts" }, { "path": "packages/registry-angular/blocks/commercial-invoice-generator/index.ts", "content": "export {\n UiCommercialInvoiceGeneratorComponent,\n type InvoiceItem,\n type CommercialInvoiceProps,\n} from './commercial-invoice-generator.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/commercial-invoice-generator/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/card.json", "https://uipkge.dev/r/angular/button.json", "https://uipkge.dev/r/angular/input.json", "https://uipkge.dev/r/angular/badge.json", "https://uipkge.dev/r/angular/table.json" ], "description": "B2B cross-border commercial invoice generator with HTS tariff codes, EORI tax identifiers, and CIF valuation totals.", "categories": [ "dashboard", "data-display" ] }