{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "vendor-supplier-portal",
  "title": "Vendor Supplier Portal",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/vendor-supplier-portal/VendorSupplierPortal.tsx",
      "content": "'use client'\n\nimport * as React from 'react'\nimport { Download, FileSpreadsheet, ShieldCheck } from 'lucide-react'\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  className?: string\n}\n\nexport function VendorSupplierPortal({\n  vendorName = 'Apex Precision Engineering Ltd',\n  vendorId = 'VND-2026-9901',\n  tier = 'Strategic Tier-1 Supplier',\n  className,\n}: VendorPortalProps) {\n  const [activeTab, setActiveTab] = React.useState<'orders' | 'catalog'>('orders')\n\n  const [orders, setOrders] = React.useState<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\n  const [catalog] = React.useState<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\n  function acknowledgePO(id: string) {\n    setOrders((prev) => prev.map((order) => (order.id === id ? { ...order, status: 'acknowledged' as const } : order)))\n  }\n\n  return (\n    <div data-slot=\"vendor-supplier-portal\" className={`w-full space-y-6 ${className ?? ''}`}>\n      {/* Header / Supplier SLA Scorecard */}\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\">{vendorId}</span>\n              <Badge variant=\"outline\">{tier}</Badge>\n              <Badge variant=\"secondary\" className=\"gap-1\">\n                <ShieldCheck className=\"text-foreground size-3\" />\n                ISO 9001:2015 Certified\n              </Badge>\n            </div>\n            <CardTitle className=\"text-xl\">{vendorName}</CardTitle>\n            <CardDescription>Supplier SLA Performance Scorecard & Active Purchase Order Console</CardDescription>\n          </div>\n\n          <div className=\"flex items-center gap-2\">\n            <Button variant=\"outline\" size=\"sm\" className=\"gap-1.5\">\n              <FileSpreadsheet className=\"size-3.5\" />\n              Export Statement\n            </Button>\n            <Button variant=\"default\" size=\"sm\" className=\"gap-1.5\">\n              <Download className=\"size-3.5\" />\n              Download MSA Contract\n            </Button>\n          </div>\n        </CardHeader>\n\n        <CardContent className=\"border-border grid grid-cols-1 gap-4 border-t pt-4 sm:grid-cols-4\">\n          {/* On Time Delivery */}\n          <div className=\"border-border space-y-1 rounded-lg border p-3\">\n            <div className=\"text-muted-foreground text-xs font-medium\">ON-TIME DELIVERY (OTD)</div>\n            <div className=\"flex items-baseline justify-between pt-1\">\n              <div className=\"font-mono text-xl font-semibold\">98.6%</div>\n              <span className=\"text-muted-foreground font-mono text-xs\">Target: 95.0%</span>\n            </div>\n          </div>\n\n          {/* QA Acceptance */}\n          <div className=\"border-border space-y-1 rounded-lg border p-3\">\n            <div className=\"text-muted-foreground text-xs font-medium\">QA ACCEPTANCE RATE</div>\n            <div className=\"flex items-baseline justify-between pt-1\">\n              <div className=\"font-mono text-xl font-semibold\">99.8%</div>\n              <span className=\"text-muted-foreground font-mono text-xs\">&lt; 0.2% NCR</span>\n            </div>\n          </div>\n\n          {/* Avg Lead Time */}\n          <div className=\"border-border space-y-1 rounded-lg border p-3\">\n            <div className=\"text-muted-foreground text-xs font-medium\">AVG FULFILLMENT LEAD TIME</div>\n            <div className=\"pt-1 font-mono text-xl font-semibold\">5.4 Days</div>\n          </div>\n\n          {/* Total YTD Volume */}\n          <div className=\"border-border space-y-1 rounded-lg border p-3\">\n            <div className=\"text-muted-foreground text-xs font-medium\">ACTIVE PURCHASE VOLUME</div>\n            <div className=\"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 className=\"flex flex-col gap-3 pb-3 sm:flex-row sm:items-center sm:justify-between\">\n          <div className=\"flex items-center gap-2\">\n            <Button\n              variant={activeTab === 'orders' ? 'default' : 'outline'}\n              size=\"sm\"\n              onClick={() => setActiveTab('orders')}\n            >\n              Active Purchase Orders ({orders.length})\n            </Button>\n            <Button\n              variant={activeTab === 'catalog' ? 'default' : 'outline'}\n              size=\"sm\"\n              onClick={() => setActiveTab('catalog')}\n            >\n              Contracted Catalog Prices ({catalog.length})\n            </Button>\n          </div>\n\n          <div className=\"text-muted-foreground text-xs\">\n            Payment Terms: <span className=\"text-foreground font-medium\">Net-45 Direct ACH Wire</span>\n          </div>\n        </CardHeader>\n\n        <CardContent className=\"p-0\">\n          {/* Table for Orders */}\n          {activeTab === 'orders' ? (\n            <Table>\n              <TableHeader>\n                <TableRow>\n                  <TableHead className=\"w-[180px]\">PO Reference</TableHead>\n                  <TableHead>Issue Date</TableHead>\n                  <TableHead>Delivery Deadline</TableHead>\n                  <TableHead className=\"text-right\">Line Items</TableHead>\n                  <TableHead className=\"text-right\">Total Order Value</TableHead>\n                  <TableHead>Fulfillment Status</TableHead>\n                  <TableHead className=\"w-[140px] text-right\">Action</TableHead>\n                </TableRow>\n              </TableHeader>\n              <TableBody>\n                {orders.map((order) => (\n                  <TableRow key={order.id}>\n                    <TableCell>\n                      <div className=\"text-foreground font-mono font-semibold\">{order.poNumber}</div>\n                    </TableCell>\n\n                    <TableCell className=\"text-muted-foreground font-mono text-xs\">{order.issueDate}</TableCell>\n\n                    <TableCell className=\"text-foreground font-mono text-xs font-medium\">\n                      {order.deliveryDeadline}\n                    </TableCell>\n\n                    <TableCell className=\"text-right font-mono text-sm\">{order.linesCount} SKUs</TableCell>\n\n                    <TableCell className=\"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                              : 'outline'\n                        }\n                        className=\"capitalize\"\n                      >\n                        {order.status.replace('_', ' ')}\n                      </Badge>\n                    </TableCell>\n\n                    <TableCell className=\"text-right\">\n                      {order.status === 'pending_ack' ? (\n                        <Button\n                          size=\"sm\"\n                          variant=\"default\"\n                          className=\"h-7 text-xs\"\n                          onClick={() => acknowledgePO(order.id)}\n                        >\n                          Acknowledge PO\n                        </Button>\n                      ) : (\n                        <span className=\"text-muted-foreground text-xs\">Processed</span>\n                      )}\n                    </TableCell>\n                  </TableRow>\n                ))}\n              </TableBody>\n            </Table>\n          ) : (\n            <Table>\n              <TableHeader>\n                <TableRow>\n                  <TableHead className=\"w-[280px]\">Product / Description</TableHead>\n                  <TableHead>SKU Reference</TableHead>\n                  <TableHead className=\"text-right\">Min Order Qty (MOQ)</TableHead>\n                  <TableHead className=\"text-right\">Contracted Unit Price</TableHead>\n                  <TableHead className=\"text-right\">Standard Lead Time</TableHead>\n                  <TableHead>Contract Validity</TableHead>\n                </TableRow>\n              </TableHeader>\n              <TableBody>\n                {catalog.map((item) => (\n                  <TableRow key={item.id}>\n                    <TableCell>\n                      <div className=\"text-foreground font-medium\">{item.name}</div>\n                    </TableCell>\n\n                    <TableCell>\n                      <span className=\"font-mono text-xs font-semibold\">{item.sku}</span>\n                    </TableCell>\n\n                    <TableCell className=\"text-right font-mono text-sm\">{item.moq} units</TableCell>\n\n                    <TableCell className=\"text-foreground text-right font-mono text-sm font-semibold\">\n                      ${item.contractedPrice.toFixed(2)}\n                    </TableCell>\n\n                    <TableCell className=\"text-muted-foreground text-right font-mono text-sm\">\n                      {item.leadTimeDays} Days\n                    </TableCell>\n\n                    <TableCell>\n                      <span className=\"text-muted-foreground font-mono text-xs\">Valid to {item.validUntil}</span>\n                    </TableCell>\n                  </TableRow>\n                ))}\n              </TableBody>\n            </Table>\n          )}\n        </CardContent>\n\n        <CardFooter className=\"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 className=\"text-foreground font-medium\">\n            Vendor Status: <span className=\"text-foreground\">Active & In Good Standing</span>\n          </div>\n        </CardFooter>\n      </Card>\n    </div>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/vendor-supplier-portal/VendorSupplierPortal.tsx"
    },
    {
      "path": "packages/registry-react/blocks/vendor-supplier-portal/index.ts",
      "content": "export { VendorSupplierPortal } from './VendorSupplierPortal'\nexport type { VendorPO, ContractedCatalogItem, VendorPortalProps } from './VendorSupplierPortal'\n",
      "type": "registry:block",
      "target": "~/components/blocks/vendor-supplier-portal/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/badge.json",
    "https://uipkge.dev/r/react/table.json"
  ],
  "description": "Supplier and vendor relationship workbench with SLA scorecard metrics, purchase order status, and contracted pricing catalog.",
  "categories": [
    "dashboard",
    "data-display"
  ]
}