{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "purchase-order-receiving", "title": "Purchase Order Receiving", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/purchase-order-receiving/purchase-order-receiving.component.ts", "content": "import { Component, Input, computed, signal, ChangeDetectionStrategy } from '@angular/core'\nimport {\n AlertTriangle,\n Clock,\n LucideAngularModule,\n PackageCheck,\n Printer,\n ShieldCheck,\n Warehouse,\n} 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 { UiInputComponent } from '@/ui/input/input.component'\nimport {\n UiSelectComponent,\n UiSelectContentComponent,\n UiSelectItemComponent,\n UiSelectTriggerComponent,\n UiSelectValueComponent,\n} from '@/ui/select/select.component'\nimport {\n UiTableBodyComponent,\n UiTableCellComponent,\n UiTableComponent,\n UiTableHeadComponent,\n UiTableHeaderComponent,\n UiTableRowComponent,\n} from '@/ui/table/table.component'\n\nexport interface POLineItem {\n id: string\n sku: string\n title: string\n orderedQty: number\n receivedQty: number\n rejectedQty: number\n rejectionReason: 'none' | 'damaged_packaging' | 'expired_lot' | 'wrong_specification' | 'temperature_excursion'\n lotNumber: string\n expiryDate: string\n stagingLocation: string\n}\n\nexport interface PurchaseOrderReceivingProps {\n poNumber?: string\n vendorName?: string\n deliveryDocket?: string\n className?: string\n}\n\nexport type InspectionStatus = 'pending' | 'passed' | 'discrepancy'\n\n/**\n * Angular port of the React PurchaseOrderReceiving block: an inbound dock workbench with the\n * PO header (docket, receipt status, print / Generate GRN actions), a receiving bay picker,\n * the accepted-vs-ordered summary and QA disposition, and a line table where each PO line's\n * received / rejected quantities, rejection reason and lot number are logged. Generating the\n * GRN locks the lines and marks the receipt passed or discrepancy. Edit the sample lines below.\n */\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-purchase-order-receiving, [ui-purchase-order-receiving]',\n standalone: true,\n host: {\n '[attr.data-slot]': '\"purchase-order-receiving\"',\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 UiInputComponent,\n UiSelectComponent,\n UiSelectContentComponent,\n UiSelectItemComponent,\n UiSelectTriggerComponent,\n UiSelectValueComponent,\n UiTableBodyComponent,\n UiTableCellComponent,\n UiTableComponent,\n UiTableHeadComponent,\n UiTableHeaderComponent,\n UiTableRowComponent,\n ],\n template: `\n \n
\n
\n
\n
\n {{ poNumber }}\n {{ deliveryDocket }}\n {{\n isCompleted() ? 'GRN ' + inspectionStatus() : 'Receiving in Progress'\n }}\n
\n

Inbound Goods Receipt & QA Inspection

\n

\n Supplier: {{ vendorName }} · Inbound Dock Verification\n

\n
\n\n
\n \n @if (!isCompleted()) {\n \n } @else {\n \n }\n
\n
\n\n
\n \n
\n
\n \n RECEIVING BAY\n
\n \n \n \n Inbound Dock Bay 01 (Heavy Freight)\n Inbound Dock Bay 02 (Cross-Dock)\n Inbound Dock Bay 03 (Standard Freight)\n Inbound Cold Storage Quarantine Bay\n \n \n
\n\n \n
\n
RECEIPT SUMMARY
\n
\n
{{ totalAccepted() }} / {{ totalOrdered() }}
\n @if (totalRejected() > 0) {\n {{ totalRejected() }} Rejected\n } @else {\n 100% Match\n }\n
\n
\n\n \n
\n
QA AUDIT DISPOSITION
\n
\n @if (inspectionStatus() === 'passed') {\n \n }\n @if (inspectionStatus() === 'discrepancy') {\n \n }\n @if (inspectionStatus() === 'pending') {\n \n }\n {{ dispositionLabel() }}\n
\n
\n
\n
\n\n \n
\n
\n

Purchase Order Line Verification

\n

\n Verify quantities received against vendor packing list and assign warehouse staging zones.\n

\n
\n\n
\n
\n \n \n Item / Description\n Ordered\n Received\n Rejected\n Rejection Reason\n Lot Number\n Staging Target\n \n \n \n @for (line of lines(); track line.id) {\n \n \n \n
{{ line.title }}
\n
{{ line.sku }}
\n \n\n \n \n {{ line.orderedQty }}\n \n\n \n \n \n \n\n \n \n \n \n\n \n \n \n \n \n None (Accepted)\n Damaged Packaging\n Short Shelf Life\n Incorrect Spec\n Temp Excursion\n \n \n \n\n \n \n \n \n\n \n \n {{\n line.stagingLocation\n }}\n \n \n }\n \n
\n
\n\n \n
Official GRN generates supplier debit note automatically for any non-zero rejection.
\n
\n Accepted: {{ totalAccepted() }} units · Rejected:\n {{ totalRejected() }} units\n
\n
\n \n `,\n})\nexport class UiPurchaseOrderReceivingComponent {\n @Input() poNumber = 'PO-2026-4409'\n @Input() vendorName = 'Apex Precision Engineering Ltd'\n @Input() deliveryDocket = 'BOL-APX-98214'\n @Input('class') className?: string\n\n protected readonly AlertTriangle = AlertTriangle\n protected readonly Clock = Clock\n protected readonly PackageCheck = PackageCheck\n protected readonly Printer = Printer\n protected readonly ShieldCheck = ShieldCheck\n protected readonly Warehouse = Warehouse\n\n readonly isCompleted = signal(false)\n readonly receivingDock = signal('dock-03')\n readonly inspectionStatus = signal('pending')\n\n readonly lines = signal([\n {\n id: 'po-1',\n sku: 'SKU-VALVE-99',\n title: 'High-Pressure Hydraulic Valve 3/8\"',\n orderedQty: 100,\n receivedQty: 100,\n rejectedQty: 0,\n rejectionReason: 'none',\n lotNumber: 'LOT-HYD-998',\n expiryDate: '2029-12-31',\n stagingLocation: 'ZONE-A-RACK-04',\n },\n {\n id: 'po-2',\n sku: 'SKU-SEAL-04',\n title: 'Fluorocarbon O-Ring Flange Kit (Pack of 50)',\n orderedQty: 250,\n receivedQty: 245,\n rejectedQty: 5,\n rejectionReason: 'damaged_packaging',\n lotNumber: 'LOT-O-7712',\n expiryDate: '2028-06-30',\n stagingLocation: 'ZONE-A-RACK-01',\n },\n {\n id: 'po-3',\n sku: 'SKU-GAUGE-12',\n title: 'Digital Calibration Pressure Gauge 0-600 PSI',\n orderedQty: 40,\n receivedQty: 40,\n rejectedQty: 0,\n rejectionReason: 'none',\n lotNumber: 'LOT-CAL-002',\n expiryDate: '2031-01-15',\n stagingLocation: 'ZONE-B-RACK-09',\n },\n ])\n\n readonly totalOrdered = computed(() => this.lines().reduce((acc, item) => acc + item.orderedQty, 0))\n readonly totalAccepted = computed(() => this.lines().reduce((acc, item) => acc + item.receivedQty, 0))\n readonly totalRejected = computed(() => this.lines().reduce((acc, item) => acc + item.rejectedQty, 0))\n\n readonly statusVariant = computed(() => {\n const status = this.inspectionStatus()\n return status === 'passed' ? 'default' : status === 'discrepancy' ? 'destructive' : 'secondary'\n })\n\n readonly dispositionLabel = computed(() => {\n const status = this.inspectionStatus()\n return status === 'passed'\n ? 'All lines cleared for putaway'\n : status === 'discrepancy'\n ? 'Discrepancy logged for vendor credit'\n : 'Awaiting line verification'\n })\n\n get hostClass(): string {\n return cn('block w-full space-y-6', this.className)\n }\n\n updateLine(id: string, updates: Partial): void {\n this.lines.update((prev) => prev.map((line) => (line.id === id ? { ...line, ...updates } : line)))\n }\n\n setRejectionReason(id: string, value: string): void {\n this.updateLine(id, { rejectionReason: value as POLineItem['rejectionReason'] })\n }\n\n protected toNumber(value: string): number {\n return Number(value)\n }\n\n finalizeReceipt(): void {\n if (this.totalRejected() > 0 || this.totalAccepted() < this.totalOrdered()) {\n this.inspectionStatus.set('discrepancy')\n } else {\n this.inspectionStatus.set('passed')\n }\n this.isCompleted.set(true)\n }\n\n resetReceipt(): void {\n this.isCompleted.set(false)\n this.inspectionStatus.set('pending')\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/purchase-order-receiving/purchase-order-receiving.component.ts" }, { "path": "packages/registry-angular/blocks/purchase-order-receiving/index.ts", "content": "export { UiPurchaseOrderReceivingComponent } from './purchase-order-receiving.component'\nexport type { InspectionStatus, POLineItem, PurchaseOrderReceivingProps } from './purchase-order-receiving.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/purchase-order-receiving/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/input.json", "https://uipkge.dev/r/angular/badge.json", "https://uipkge.dev/r/angular/select.json", "https://uipkge.dev/r/angular/table.json" ], "description": "Inbound dock receiving workbench with PO matching, QA discrepancy logging, lot registration, and GRN generation.", "categories": [ "dashboard", "data-display" ] }