{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "commercial-invoice-generator",
  "title": "Commercial Invoice Generator",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/commercial-invoice-generator/CommercialInvoiceGenerator.tsx",
      "content": "'use client'\n\nimport * as React from 'react'\nimport { Download, Plus, Printer, ShieldCheck, Trash2 } from 'lucide-react'\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Button } from '@/components/ui/button'\nimport { Input } from '@/components/ui/input'\nimport { Badge } from '@/components/ui/badge'\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'\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\nexport function CommercialInvoiceGenerator({\n  invoiceNumber = 'INV-EXP-2026-9042',\n  incoterms = 'DAP (Delivered at Place)',\n  currency = 'USD',\n  className,\n}: CommercialInvoiceProps) {\n  const [isSigned, setIsSigned] = React.useState(false)\n  const [freightCharges, setFreightCharges] = React.useState(450.0)\n  const [insuranceCharges, setInsuranceCharges] = React.useState(85.0)\n\n  const [items, setItems] = React.useState<InvoiceItem[]>([\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  const subtotal = items.reduce((sum, item) => sum + item.qty * item.unitPrice, 0)\n  const totalWeightKg = items.reduce((sum, item) => sum + item.weightKg, 0)\n  const grandTotal = subtotal + freightCharges + insuranceCharges\n\n  function addItem() {\n    setItems((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  function removeItem(id: string) {\n    setItems((prev) => prev.filter((i) => i.id !== id))\n  }\n\n  function updateItem(id: string, updates: Partial<InvoiceItem>) {\n    setItems((prev) => prev.map((item) => (item.id === id ? { ...item, ...updates } : item)))\n  }\n\n  return (\n    <div data-slot=\"commercial-invoice-generator\" className={`w-full space-y-6 ${className ?? ''}`}>\n      {/* Top Action Card */}\n      <Card>\n        <CardHeader className=\"flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between\">\n          <div className=\"space-y-1\">\n            <div className=\"flex items-center gap-2\">\n              <span className=\"text-foreground font-mono text-sm font-semibold\">{invoiceNumber}</span>\n              <Badge variant=\"outline\">{incoterms}</Badge>\n              <Badge variant={isSigned ? 'default' : 'secondary'}>\n                {isSigned ? 'Customs Declared & Sealed' : 'Draft Declaration'}\n              </Badge>\n            </div>\n            <CardTitle className=\"text-xl\">International Commercial Customs Invoice</CardTitle>\n            <CardDescription>\n              Harmonized Tariff Schedule (HTS) compliance declaration for international customs clearance.\n            </CardDescription>\n          </div>\n\n          <div className=\"flex items-center gap-2\">\n            <Button variant=\"outline\" size=\"sm\" className=\"gap-1.5\">\n              <Printer className=\"size-3.5\" />\n              Print Form\n            </Button>\n            <Button variant=\"outline\" size=\"sm\" className=\"gap-1.5\">\n              <Download className=\"size-3.5\" />\n              Export EDI / PDF\n            </Button>\n            {!isSigned ? (\n              <Button variant=\"default\" size=\"sm\" className=\"gap-1.5\" onClick={() => setIsSigned(true)}>\n                <ShieldCheck className=\"size-3.5\" />\n                Sign Customs Declaration\n              </Button>\n            ) : (\n              <Button variant=\"secondary\" size=\"sm\" className=\"gap-1.5\" onClick={() => setIsSigned(false)}>\n                Unlock Edit\n              </Button>\n            )}\n          </div>\n        </CardHeader>\n\n        <CardContent className=\"border-border grid grid-cols-1 gap-6 border-t pt-4 sm:grid-cols-2\">\n          {/* Exporter / Shipper */}\n          <div className=\"border-border space-y-1 rounded-lg border p-3\">\n            <div className=\"text-muted-foreground text-xs font-semibold\">EXPORTER / SHIPPER (CONSIGNOR)</div>\n            <div className=\"text-foreground text-sm font-medium\">Global Aerospace Components Inc.</div>\n            <div className=\"text-muted-foreground text-xs\">9400 Aeronautics Way, Dock 4</div>\n            <div className=\"text-muted-foreground text-xs\">Seattle, WA 98108, United States</div>\n            <div className=\"text-muted-foreground pt-1 font-mono text-xs\">EORI / Tax ID: US-EIN-98441029</div>\n          </div>\n\n          {/* Importer / Consignee */}\n          <div className=\"border-border space-y-1 rounded-lg border p-3\">\n            <div className=\"text-muted-foreground text-xs font-semibold\">IMPORTER / BUYER (CONSIGNEE)</div>\n            <div className=\"text-foreground text-sm font-medium\">Nordic Robotics Systems AB</div>\n            <div className=\"text-muted-foreground text-xs\">Industrigatan 18, Byggnad B</div>\n            <div className=\"text-muted-foreground text-xs\">SE-417 56 Göteborg, Sweden</div>\n            <div className=\"text-muted-foreground pt-1 font-mono text-xs\">VAT / EORI: SE556012345601</div>\n          </div>\n        </CardContent>\n      </Card>\n\n      {/* Line Items Table */}\n      <Card>\n        <CardHeader className=\"flex flex-col gap-3 pb-3 sm:flex-row sm:items-center sm:justify-between\">\n          <div>\n            <CardTitle className=\"text-base font-semibold\">Customs Line Item Breakdown</CardTitle>\n            <CardDescription>\n              Total Gross Net Weight: <span className=\"font-mono\">{totalWeightKg.toFixed(1)} kg</span> · Currency:{' '}\n              {currency}\n            </CardDescription>\n          </div>\n\n          {!isSigned && (\n            <Button variant=\"outline\" size=\"sm\" className=\"gap-1.5\" onClick={addItem}>\n              <Plus className=\"size-3.5\" />\n              Add Line Item\n            </Button>\n          )}\n        </CardHeader>\n\n        <CardContent className=\"p-0\">\n          <Table>\n            <TableHeader>\n              <TableRow>\n                <TableHead className=\"w-[300px]\">Goods Description</TableHead>\n                <TableHead>HTS / Tariff Code</TableHead>\n                <TableHead>Origin (COO)</TableHead>\n                <TableHead className=\"text-right\">Net Wt (kg)</TableHead>\n                <TableHead className=\"w-[90px] text-right\">Qty</TableHead>\n                <TableHead className=\"w-[120px] text-right\">Unit Price</TableHead>\n                <TableHead className=\"text-right\">Customs Total</TableHead>\n                {!isSigned && <TableHead className=\"w-[40px]\"></TableHead>}\n              </TableRow>\n            </TableHeader>\n            <TableBody>\n              {items.map((item) => (\n                <TableRow key={item.id}>\n                  {/* Description */}\n                  <TableCell>\n                    {!isSigned ? (\n                      <Input\n                        value={item.description}\n                        onChange={(e) => updateItem(item.id, { description: e.target.value })}\n                        className=\"h-8 text-xs\"\n                      />\n                    ) : (\n                      <span className=\"text-foreground font-medium\">{item.description}</span>\n                    )}\n                  </TableCell>\n\n                  {/* HTS Code */}\n                  <TableCell>\n                    {!isSigned ? (\n                      <Input\n                        value={item.htsCode}\n                        onChange={(e) => updateItem(item.id, { htsCode: e.target.value })}\n                        className=\"h-8 w-28 font-mono text-xs\"\n                      />\n                    ) : (\n                      <span className=\"font-mono text-xs font-semibold\">{item.htsCode}</span>\n                    )}\n                  </TableCell>\n\n                  {/* Country of Origin */}\n                  <TableCell>\n                    {!isSigned ? (\n                      <Input\n                        value={item.countryOfOrigin}\n                        onChange={(e) => updateItem(item.id, { countryOfOrigin: e.target.value })}\n                        className=\"h-8 w-16 text-center font-mono text-xs uppercase\"\n                      />\n                    ) : (\n                      <span className=\"bg-muted rounded px-1.5 py-0.5 font-mono text-xs font-medium\">\n                        {item.countryOfOrigin}\n                      </span>\n                    )}\n                  </TableCell>\n\n                  {/* Net Weight */}\n                  <TableCell className=\"text-right\">\n                    {!isSigned ? (\n                      <Input\n                        type=\"number\"\n                        step=\"0.1\"\n                        value={item.weightKg}\n                        onChange={(e) => updateItem(item.id, { weightKg: Number(e.target.value) })}\n                        className=\"h-8 text-right font-mono text-xs\"\n                      />\n                    ) : (\n                      <span className=\"text-muted-foreground font-mono text-xs\">{item.weightKg.toFixed(1)}</span>\n                    )}\n                  </TableCell>\n\n                  {/* Qty */}\n                  <TableCell className=\"text-right\">\n                    {!isSigned ? (\n                      <Input\n                        type=\"number\"\n                        min=\"1\"\n                        value={item.qty}\n                        onChange={(e) => updateItem(item.id, { qty: Number(e.target.value) })}\n                        className=\"h-8 text-right font-mono text-xs\"\n                      />\n                    ) : (\n                      <span className=\"font-mono text-sm\">{item.qty}</span>\n                    )}\n                  </TableCell>\n\n                  {/* Unit Price */}\n                  <TableCell className=\"text-right\">\n                    {!isSigned ? (\n                      <Input\n                        type=\"number\"\n                        step=\"0.01\"\n                        value={item.unitPrice}\n                        onChange={(e) => updateItem(item.id, { unitPrice: Number(e.target.value) })}\n                        className=\"h-8 text-right font-mono text-xs\"\n                      />\n                    ) : (\n                      <span className=\"font-mono text-sm\">${item.unitPrice.toFixed(2)}</span>\n                    )}\n                  </TableCell>\n\n                  {/* Line Total */}\n                  <TableCell className=\"text-foreground text-right font-mono text-sm font-semibold\">\n                    ${(item.qty * item.unitPrice).toFixed(2)}\n                  </TableCell>\n\n                  {/* Delete */}\n                  {!isSigned && (\n                    <TableCell>\n                      <Button\n                        variant=\"ghost\"\n                        size=\"icon\"\n                        className=\"text-muted-foreground hover:text-destructive size-8\"\n                        onClick={() => removeItem(item.id)}\n                      >\n                        <Trash2 className=\"size-3.5\" />\n                      </Button>\n                    </TableCell>\n                  )}\n                </TableRow>\n              ))}\n            </TableBody>\n          </Table>\n        </CardContent>\n\n        {/* Totals & Tariff Summary Footer */}\n        <CardFooter className=\"border-border flex flex-col gap-4 border-t pt-4 sm:flex-row sm:items-start sm:justify-between\">\n          <div className=\"text-muted-foreground space-y-1 text-xs sm:max-w-md\">\n            <p className=\"text-foreground font-medium\">Exporter Declaration & Legal Certification:</p>\n            <p>\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            </p>\n          </div>\n\n          <div className=\"w-full space-y-1.5 sm:w-72\">\n            <div className=\"text-muted-foreground flex justify-between text-xs\">\n              <span>FOB Line Subtotal:</span>\n              <span className=\"text-foreground font-mono font-medium\">${subtotal.toFixed(2)}</span>\n            </div>\n            <div className=\"text-muted-foreground flex justify-between text-xs\">\n              <span>International Freight (Air):</span>\n              <span className=\"text-foreground font-mono font-medium\">${freightCharges.toFixed(2)}</span>\n            </div>\n            <div className=\"text-muted-foreground flex justify-between text-xs\">\n              <span>Cargo Marine Insurance:</span>\n              <span className=\"text-foreground font-mono font-medium\">${insuranceCharges.toFixed(2)}</span>\n            </div>\n            <div className=\"border-border text-foreground flex justify-between border-t pt-2 text-sm font-semibold\">\n              <span>Declared CIF Value:</span>\n              <span className=\"font-mono text-base font-bold\">${grandTotal.toFixed(2)} USD</span>\n            </div>\n          </div>\n        </CardFooter>\n      </Card>\n    </div>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/commercial-invoice-generator/CommercialInvoiceGenerator.tsx"
    },
    {
      "path": "packages/registry-react/blocks/commercial-invoice-generator/index.ts",
      "content": "export { CommercialInvoiceGenerator } from './CommercialInvoiceGenerator'\nexport type { InvoiceItem, CommercialInvoiceProps } from './CommercialInvoiceGenerator'\n",
      "type": "registry:block",
      "target": "~/components/blocks/commercial-invoice-generator/index.ts"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/card.json",
    "https://uipkge.dev/r/react/button.json",
    "https://uipkge.dev/r/react/input.json",
    "https://uipkge.dev/r/react/badge.json",
    "https://uipkge.dev/r/react/table.json"
  ],
  "description": "B2B cross-border commercial invoice generator with HTS tariff codes, EORI tax identifiers, and CIF valuation totals.",
  "categories": [
    "dashboard",
    "data-display"
  ]
}