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