{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "vendor-supplier-portal", "title": "Vendor Supplier Portal", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/vendor-supplier-portal/vendor-supplier-portal.component.ts", "content": "import { Component, Input, signal, ChangeDetectionStrategy } from '@angular/core'\nimport { Download, FileSpreadsheet, LucideAngularModule, ShieldCheck } from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent, type BadgeVariant } 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 {\n UiTableBodyComponent,\n UiTableCellComponent,\n UiTableComponent,\n UiTableHeadComponent,\n UiTableHeaderComponent,\n UiTableRowComponent,\n} from '@/ui/table/table.component'\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 type VendorPortalTab = 'orders' | 'catalog'\n\n/**\n * Angular port of the React VendorSupplierPortal block: a supplier SLA scorecard with an\n * active purchase order console (acknowledge pending POs) and a contracted catalog price list.\n */\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-vendor-supplier-portal, [ui-vendor-supplier-portal]',\n standalone: true,\n host: {\n '[attr.data-slot]': '\"vendor-supplier-portal\"',\n '[class]': 'hostClass',\n },\n imports: [\n LucideAngularModule,\n UiBadgeComponent,\n UiButtonComponent,\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardFooterComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n UiTableBodyComponent,\n UiTableCellComponent,\n UiTableComponent,\n UiTableHeadComponent,\n UiTableHeaderComponent,\n UiTableRowComponent,\n ],\n template: `\n \n
\n
\n
\n
\n {{ vendorId }}\n {{ tier }}\n \n \n ISO 9001:2015 Certified\n \n
\n

{{ vendorName }}

\n

Supplier SLA Performance Scorecard & Active Purchase Order Console

\n
\n\n
\n \n \n
\n
\n\n
\n \n
\n
ON-TIME DELIVERY (OTD)
\n
\n
98.6%
\n Target: 95.0%\n
\n
\n\n \n
\n
QA ACCEPTANCE RATE
\n
\n
99.8%
\n < 0.2% NCR\n
\n
\n\n \n
\n
AVG FULFILLMENT LEAD TIME
\n
5.4 Days
\n
\n\n \n
\n
ACTIVE PURCHASE VOLUME
\n
$150,100 USD
\n
\n
\n
\n\n \n
\n
\n
\n \n Active Purchase Orders ({{ orders().length }})\n \n \n Contracted Catalog Prices ({{ catalog.length }})\n \n
\n\n
\n Payment Terms: Net-45 Direct ACH Wire\n
\n
\n\n
\n \n @if (activeTab() === 'orders') {\n
\n \n \n PO Reference\n Issue Date\n Delivery Deadline\n Line Items\n Total Order Value\n Fulfillment Status\n Action\n \n \n \n @for (order of orders(); track order.id) {\n \n \n
{{ order.poNumber }}
\n \n\n {{ order.issueDate }}\n\n \n {{ order.deliveryDeadline }}\n \n\n {{ order.linesCount }} SKUs\n\n \n \\${{ formatAmount(order.totalAmount) }} USD\n \n\n \n \n {{ statusLabel(order.status) }}\n \n \n\n \n @if (order.status === 'pending_ack') {\n \n Acknowledge PO\n \n } @else {\n Processed\n }\n \n \n }\n \n
\n } @else {\n
\n \n \n Product / Description\n SKU Reference\n Min Order Qty (MOQ)\n Contracted Unit Price\n Standard Lead Time\n Contract Validity\n \n \n \n @for (item of catalog; track item.id) {\n \n \n
{{ item.name }}
\n \n\n \n {{ item.sku }}\n \n\n {{ item.moq }} units\n\n \n \\${{ item.contractedPrice.toFixed(2) }}\n \n\n \n {{ item.leadTimeDays }} Days\n \n\n \n Valid to {{ item.validUntil }}\n \n \n }\n \n
\n }\n
\n\n \n
Supplier contract SLA terms audited quarterly per ISO 9001 compliance standards.
\n
\n Vendor Status: Active & In Good Standing\n
\n
\n \n `,\n})\nexport class UiVendorSupplierPortalComponent {\n @Input() vendorName = 'Apex Precision Engineering Ltd'\n @Input() vendorId = 'VND-2026-9901'\n @Input() tier = 'Strategic Tier-1 Supplier'\n @Input('class') className?: string\n\n protected readonly Download = Download\n protected readonly FileSpreadsheet = FileSpreadsheet\n protected readonly ShieldCheck = ShieldCheck\n\n readonly activeTab = signal('orders')\n\n readonly orders = signal([\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 readonly catalog: 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 get hostClass(): string {\n return cn('block w-full space-y-6', this.className)\n }\n\n acknowledgePO(id: string): void {\n this.orders.update((prev) =>\n prev.map((order) => (order.id === id ? { ...order, status: 'acknowledged' as const } : order)),\n )\n }\n\n statusVariant(status: VendorPO['status']): BadgeVariant {\n return status === 'shipped' ? 'default' : status === 'in_production' ? 'secondary' : 'outline'\n }\n\n statusLabel(status: VendorPO['status']): string {\n return status.replace('_', ' ')\n }\n\n formatAmount(amount: number): string {\n return amount.toLocaleString()\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/vendor-supplier-portal/vendor-supplier-portal.component.ts" }, { "path": "packages/registry-angular/blocks/vendor-supplier-portal/index.ts", "content": "export {\n UiVendorSupplierPortalComponent,\n type VendorPO,\n type ContractedCatalogItem,\n type VendorPortalProps,\n type VendorPortalTab,\n} from './vendor-supplier-portal.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/vendor-supplier-portal/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/badge.json", "https://uipkge.dev/r/angular/table.json" ], "description": "Supplier and vendor relationship workbench with SLA scorecard metrics, purchase order status, and contracted pricing catalog.", "categories": [ "dashboard", "data-display" ] }