{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "vendor-supplier-portal",
  "title": "Vendor Supplier Portal",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/vendor-supplier-portal/VendorSupplierPortal.vue",
      "content": "<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { Download, FileSpreadsheet, ShieldCheck } from 'lucide-vue-next'\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Button } from '@/components/ui/button'\nimport { Badge } from '@/components/ui/badge'\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'\n\nexport interface VendorPO {\n  id: string\n  poNumber: string\n  issueDate: string\n  deliveryDeadline: string\n  linesCount: number\n  totalAmount: number\n  status: 'acknowledged' | 'in_production' | 'shipped' | 'pending_ack'\n}\n\nexport interface ContractedCatalogItem {\n  id: string\n  sku: string\n  name: string\n  moq: number\n  contractedPrice: number\n  leadTimeDays: number\n  validUntil: string\n}\n\nexport interface VendorPortalProps {\n  vendorName?: string\n  vendorId?: string\n  tier?: string\n}\n\nconst props = withDefaults(defineProps<VendorPortalProps>(), {\n  vendorName: 'Apex Precision Engineering Ltd',\n  vendorId: 'VND-2026-9901',\n  tier: 'Strategic Tier-1 Supplier',\n})\n\nconst activeTab = ref<'orders' | 'catalog'>('orders')\n\nconst orders = ref<VendorPO[]>([\n  {\n    id: 'po-1',\n    poNumber: 'PO-2026-8840',\n    issueDate: '2026-08-18',\n    deliveryDeadline: '2026-08-28',\n    linesCount: 4,\n    totalAmount: 48500,\n    status: 'in_production',\n  },\n  {\n    id: 'po-2',\n    poNumber: 'PO-2026-8855',\n    issueDate: '2026-08-22',\n    deliveryDeadline: '2026-09-02',\n    linesCount: 2,\n    totalAmount: 19200,\n    status: 'pending_ack',\n  },\n  {\n    id: 'po-3',\n    poNumber: 'PO-2026-8812',\n    issueDate: '2026-08-10',\n    deliveryDeadline: '2026-08-21',\n    linesCount: 6,\n    totalAmount: 82400,\n    status: 'shipped',\n  },\n])\n\nconst catalog = ref<ContractedCatalogItem[]>([\n  {\n    id: 'cat-1',\n    sku: 'SKU-VALVE-99',\n    name: 'High-Pressure Hydraulic Valve 3/8\"',\n    moq: 50,\n    contractedPrice: 185.0,\n    leadTimeDays: 7,\n    validUntil: '2027-06-30',\n  },\n  {\n    id: 'cat-2',\n    sku: 'SKU-SEAL-04',\n    name: 'Fluorocarbon O-Ring Flange Kit (Pack of 50)',\n    moq: 100,\n    contractedPrice: 24.5,\n    leadTimeDays: 3,\n    validUntil: '2027-06-30',\n  },\n  {\n    id: 'cat-3',\n    sku: 'SKU-GAUGE-12',\n    name: 'Digital Calibration Pressure Gauge 0-600 PSI',\n    moq: 20,\n    contractedPrice: 420.0,\n    leadTimeDays: 14,\n    validUntil: '2027-06-30',\n  },\n])\n\nfunction acknowledgePO(id: string) {\n  const target = orders.value.find((o) => o.id === id)\n  if (target) {\n    target.status = 'acknowledged'\n  }\n}\n</script>\n\n<template>\n  <div data-slot=\"vendor-supplier-portal\" class=\"w-full space-y-6\">\n    <!-- Header / Supplier SLA Scorecard -->\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\">{{ vendorId }}</span>\n            <Badge variant=\"outline\">{{ tier }}</Badge>\n            <Badge variant=\"secondary\" class=\"gap-1\">\n              <ShieldCheck class=\"text-foreground size-3\" />\n              ISO 9001:2015 Certified\n            </Badge>\n          </div>\n          <CardTitle class=\"text-xl\">{{ vendorName }}</CardTitle>\n          <CardDescription> Supplier SLA Performance Scorecard & Active Purchase Order Console </CardDescription>\n        </div>\n\n        <div class=\"flex items-center gap-2\">\n          <Button variant=\"outline\" size=\"sm\" class=\"gap-1.5\">\n            <FileSpreadsheet class=\"size-3.5\" />\n            Export Statement\n          </Button>\n          <Button variant=\"default\" size=\"sm\" class=\"gap-1.5\">\n            <Download class=\"size-3.5\" />\n            Download MSA Contract\n          </Button>\n        </div>\n      </CardHeader>\n\n      <CardContent class=\"border-border grid grid-cols-1 gap-4 border-t pt-4 sm:grid-cols-4\">\n        <!-- On Time Delivery -->\n        <div class=\"border-border space-y-1 rounded-lg border p-3\">\n          <div class=\"text-muted-foreground text-xs font-medium\">ON-TIME DELIVERY (OTD)</div>\n          <div class=\"flex items-baseline justify-between pt-1\">\n            <div class=\"font-mono text-xl font-semibold\">98.6%</div>\n            <span class=\"text-muted-foreground font-mono text-xs\">Target: 95.0%</span>\n          </div>\n        </div>\n\n        <!-- QA Acceptance -->\n        <div class=\"border-border space-y-1 rounded-lg border p-3\">\n          <div class=\"text-muted-foreground text-xs font-medium\">QA ACCEPTANCE RATE</div>\n          <div class=\"flex items-baseline justify-between pt-1\">\n            <div class=\"font-mono text-xl font-semibold\">99.8%</div>\n            <span class=\"text-muted-foreground font-mono text-xs\">&lt; 0.2% NCR</span>\n          </div>\n        </div>\n\n        <!-- Avg Lead Time -->\n        <div class=\"border-border space-y-1 rounded-lg border p-3\">\n          <div class=\"text-muted-foreground text-xs font-medium\">AVG FULFILLMENT LEAD TIME</div>\n          <div class=\"pt-1 font-mono text-xl font-semibold\">5.4 Days</div>\n        </div>\n\n        <!-- Total YTD Volume -->\n        <div class=\"border-border space-y-1 rounded-lg border p-3\">\n          <div class=\"text-muted-foreground text-xs font-medium\">ACTIVE PURCHASE VOLUME</div>\n          <div class=\"pt-1 font-mono text-xl font-semibold\">$150,100 USD</div>\n        </div>\n      </CardContent>\n    </Card>\n\n    <!-- Navigation Tabs & Content Card -->\n    <Card>\n      <CardHeader class=\"flex flex-col gap-3 pb-3 sm:flex-row sm:items-center sm:justify-between\">\n        <div class=\"flex items-center gap-2\">\n          <Button :variant=\"activeTab === 'orders' ? 'default' : 'outline'\" size=\"sm\" @click=\"activeTab = 'orders'\">\n            Active Purchase Orders ({{ orders.length }})\n          </Button>\n          <Button :variant=\"activeTab === 'catalog' ? 'default' : 'outline'\" size=\"sm\" @click=\"activeTab = 'catalog'\">\n            Contracted Catalog Prices ({{ catalog.length }})\n          </Button>\n        </div>\n\n        <div class=\"text-muted-foreground text-xs\">\n          Payment Terms: <span class=\"text-foreground font-medium\">Net-45 Direct ACH Wire</span>\n        </div>\n      </CardHeader>\n\n      <CardContent class=\"p-0\">\n        <!-- Table for Orders -->\n        <Table v-if=\"activeTab === 'orders'\">\n          <TableHeader>\n            <TableRow>\n              <TableHead class=\"w-[180px]\">PO Reference</TableHead>\n              <TableHead>Issue Date</TableHead>\n              <TableHead>Delivery Deadline</TableHead>\n              <TableHead class=\"text-right\">Line Items</TableHead>\n              <TableHead class=\"text-right\">Total Order Value</TableHead>\n              <TableHead>Fulfillment Status</TableHead>\n              <TableHead class=\"w-[140px] text-right\">Action</TableHead>\n            </TableRow>\n          </TableHeader>\n          <TableBody>\n            <TableRow v-for=\"order in orders\" :key=\"order.id\">\n              <TableCell>\n                <div class=\"text-foreground font-mono font-semibold\">{{ order.poNumber }}</div>\n              </TableCell>\n\n              <TableCell class=\"text-muted-foreground font-mono text-xs\">\n                {{ order.issueDate }}\n              </TableCell>\n\n              <TableCell class=\"text-foreground font-mono text-xs font-medium\">\n                {{ order.deliveryDeadline }}\n              </TableCell>\n\n              <TableCell class=\"text-right font-mono text-sm\"> {{ order.linesCount }} SKUs </TableCell>\n\n              <TableCell class=\"text-foreground text-right font-mono text-sm font-semibold\">\n                ${{ order.totalAmount.toLocaleString() }} USD\n              </TableCell>\n\n              <TableCell>\n                <Badge\n                  :variant=\"\n                    order.status === 'shipped'\n                      ? 'default'\n                      : order.status === 'in_production'\n                        ? 'secondary'\n                        : order.status === 'acknowledged'\n                          ? 'outline'\n                          : 'outline'\n                  \"\n                  class=\"capitalize\"\n                >\n                  {{ order.status.replace('_', ' ') }}\n                </Badge>\n              </TableCell>\n\n              <TableCell class=\"text-right\">\n                <Button\n                  v-if=\"order.status === 'pending_ack'\"\n                  size=\"sm\"\n                  variant=\"default\"\n                  class=\"h-7 text-xs\"\n                  @click=\"acknowledgePO(order.id)\"\n                >\n                  Acknowledge PO\n                </Button>\n                <span v-else class=\"text-muted-foreground text-xs\"> Processed </span>\n              </TableCell>\n            </TableRow>\n          </TableBody>\n        </Table>\n\n        <!-- Table for Catalog Items -->\n        <Table v-else>\n          <TableHeader>\n            <TableRow>\n              <TableHead class=\"w-[280px]\">Product / Description</TableHead>\n              <TableHead>SKU Reference</TableHead>\n              <TableHead class=\"text-right\">Min Order Qty (MOQ)</TableHead>\n              <TableHead class=\"text-right\">Contracted Unit Price</TableHead>\n              <TableHead class=\"text-right\">Standard Lead Time</TableHead>\n              <TableHead>Contract Validity</TableHead>\n            </TableRow>\n          </TableHeader>\n          <TableBody>\n            <TableRow v-for=\"item in catalog\" :key=\"item.id\">\n              <TableCell>\n                <div class=\"text-foreground font-medium\">{{ item.name }}</div>\n              </TableCell>\n\n              <TableCell>\n                <span class=\"font-mono text-xs font-semibold\">{{ item.sku }}</span>\n              </TableCell>\n\n              <TableCell class=\"text-right font-mono text-sm\"> {{ item.moq }} units </TableCell>\n\n              <TableCell class=\"text-foreground text-right font-mono text-sm font-semibold\">\n                ${{ item.contractedPrice.toFixed(2) }}\n              </TableCell>\n\n              <TableCell class=\"text-muted-foreground text-right font-mono text-sm\">\n                {{ item.leadTimeDays }} Days\n              </TableCell>\n\n              <TableCell>\n                <span class=\"text-muted-foreground font-mono text-xs\">Valid to {{ item.validUntil }}</span>\n              </TableCell>\n            </TableRow>\n          </TableBody>\n        </Table>\n      </CardContent>\n\n      <CardFooter class=\"border-border text-muted-foreground flex items-center justify-between border-t py-3 text-xs\">\n        <div>Supplier contract SLA terms audited quarterly per ISO 9001 compliance standards.</div>\n        <div class=\"text-foreground font-medium\">\n          Vendor Status: <span class=\"text-foreground\">Active & In Good Standing</span>\n        </div>\n      </CardFooter>\n    </Card>\n  </div>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/vendor-supplier-portal/VendorSupplierPortal.vue"
    },
    {
      "path": "packages/registry-vue/blocks/vendor-supplier-portal/index.ts",
      "content": "export { default as VendorSupplierPortal } from './VendorSupplierPortal.vue'\nexport type { VendorPO, ContractedCatalogItem, VendorPortalProps } from './VendorSupplierPortal.vue'\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/vendor-supplier-portal/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/badge.json",
    "https://uipkge.dev/r/vue/table.json"
  ],
  "description": "Supplier and vendor relationship workbench with SLA scorecard metrics, purchase order status, and contracted pricing catalog.",
  "categories": [
    "dashboard",
    "data-display"
  ]
}