{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "packing-slip-generator", "title": "Packing Slip Generator", "type": "registry:block", "files": [ { "path": "packages/registry-react/blocks/packing-slip-generator/PackingSlipGenerator.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport {\n Box,\n Building2,\n Check,\n CheckCheck,\n CheckCircle2,\n Clock,\n Copy,\n FileDown,\n MapPin,\n Printer,\n QrCode,\n RotateCcw,\n Scan,\n ShieldCheck,\n Tag,\n Truck,\n User,\n Warehouse,\n Zap,\n} from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Checkbox } from '@/components/ui/checkbox'\nimport { Separator } from '@/components/ui/separator'\nimport { Table, TableBody, TableCell, TableFooter, TableHead, TableHeader, TableRow } from '@/components/ui/table'\n\nexport interface PackingSlipItem {\n id: string\n sku: string\n barcode: string\n name: string\n variant: string\n location: string\n qtyOrdered: number\n qtyPacked: number\n weightLbs: number\n notes?: string\n initialPacked?: boolean\n}\n\nexport interface PackingSlipProps {\n className?: string\n packingSlipNo?: string\n orderNo?: string\n carrier?: string\n carrierService?: string\n trackingNo?: string\n orderDate?: string\n shipDate?: string\n warehouseName?: string\n warehouseFacility?: string\n warehouseAddress?: string\n warehousePhone?: string\n warehouseEmail?: string\n customerName?: string\n customerCompany?: string\n customerAddress?: string\n customerPhone?: string\n customerEmail?: string\n deliveryNotes?: string\n pickerName?: string\n pickerId?: string\n packStation?: string\n shift?: string\n boxSize?: string\n dunnageType?: string\n qcInspector?: string\n qcStamp?: string\n qcTimestamp?: string\n items?: PackingSlipItem[]\n showActions?: boolean\n initialPackedAll?: boolean\n}\n\nconst defaultItems: PackingSlipItem[] = [\n {\n id: 'item-1',\n sku: '#SKU-84920',\n barcode: '849201928410',\n name: 'Aero Minimalist Runner',\n variant: 'Size 10.5 · Matte Black',\n location: 'Aisle 04 · Rack B · Shelf 02',\n qtyOrdered: 1,\n qtyPacked: 1,\n weightLbs: 1.8,\n notes: 'Eco-Knit Upper / EVA Cushioning Sole',\n initialPacked: true,\n },\n {\n id: 'item-2',\n sku: '#SKU-77219',\n barcode: '772198421093',\n name: 'HydroShield Waterproof Shell Jacket',\n variant: \"Men's M · Alpine Green\",\n location: 'Aisle 02 · Rack D · Shelf 01',\n qtyOrdered: 1,\n qtyPacked: 1,\n weightLbs: 1.6,\n notes: '3-Layer DWR Membrane / Sealed Seams',\n initialPacked: true,\n },\n {\n id: 'item-3',\n sku: '#SKU-31904',\n barcode: '319045812903',\n name: 'Ergonomic Trail Crew Socks (3-Pack)',\n variant: 'Charcoal / Grey · L',\n location: 'Aisle 08 · Rack A · Shelf 04',\n qtyOrdered: 1,\n qtyPacked: 1,\n weightLbs: 1.4,\n notes: 'Merino Wool Blend / Seamless Toe',\n initialPacked: false,\n },\n]\n\nexport function PackingSlipGenerator({\n className,\n packingSlipNo = '#PS-849201',\n orderNo = '#ORD-92841',\n carrier = 'FedEx',\n carrierService = 'FedEx 2-Day Air',\n trackingNo = '7849 2018 9284 1029',\n orderDate = 'Aug 21, 2026',\n shipDate = 'Aug 21, 2026',\n warehouseName = 'Apex Retail Warehouse #04',\n warehouseFacility = 'West Coast Omnichannel Hub',\n warehouseAddress = '1040 North Industry Pkwy, Reno, NV 89502',\n warehousePhone = '+1 (800) 555-0199',\n warehouseEmail = 'fulfillment-reno4@apexretail.io',\n customerName = 'Eleanor Vance',\n customerCompany = 'Vance Design Studios · Suite 400',\n customerAddress = '742 Evergreen Terrace, Springfield, OR 97477',\n customerPhone = '+1 (555) 839-2019',\n customerEmail = 'eleanor.vance@vancestudios.design',\n deliveryNotes = 'Gate Code: #4829. Leave at covered front porch if unavailable. Do not bend.',\n pickerName = 'Marcus Vance',\n pickerId = '#EMP-4821',\n packStation = 'Pack Station #4',\n shift = 'Morning Shift · Bay Alpha',\n boxSize = 'Box #3 · 14\" × 10\" × 6\"',\n dunnageType = 'Recycled Kraft Void Fill (1.2 oz)',\n qcInspector = 'Elena Rostova (#QC-89)',\n qcStamp = 'QC Passed · Station #4',\n qcTimestamp = '2026-08-21 09:42 PST',\n items = defaultItems,\n showActions = true,\n initialPackedAll = false,\n}: PackingSlipProps) {\n const effectiveItems = items && items.length > 0 ? items : defaultItems\n\n const [packedState, setPackedState] = React.useState>(() => {\n const map: Record = {}\n for (const item of effectiveItems) {\n map[item.id] = initialPackedAll ? true : (item.initialPacked ?? false)\n }\n return map\n })\n\n const [copiedTracking, setCopiedTracking] = React.useState(false)\n const [isDownloading, setIsDownloading] = React.useState(false)\n\n const totalOrderedUnits = effectiveItems.reduce((sum, item) => sum + item.qtyOrdered, 0)\n const totalPackedUnits = effectiveItems.reduce((sum, item) => {\n return sum + (packedState[item.id] ? item.qtyPacked : 0)\n }, 0)\n const totalWeight = effectiveItems.reduce((sum, item) => sum + item.weightLbs, 0)\n\n const verifiedItemsCount = effectiveItems.filter((item) => packedState[item.id]).length\n const isAllPacked = effectiveItems.every((item) => packedState[item.id])\n const progressPercentage =\n effectiveItems.length === 0 ? 0 : Math.round((verifiedItemsCount / effectiveItems.length) * 100)\n\n const toggleItemPacked = (id: string) => {\n setPackedState((prev) => ({\n ...prev,\n [id]: !prev[id],\n }))\n }\n\n const setItemPacked = (id: string, checked: boolean | 'indeterminate') => {\n setPackedState((prev) => ({\n ...prev,\n [id]: checked === true,\n }))\n }\n\n const markAllPacked = () => {\n const next: Record = {}\n for (const item of effectiveItems) {\n next[item.id] = true\n }\n setPackedState(next)\n }\n\n const resetPackingChecklist = () => {\n const next: Record = {}\n for (const item of effectiveItems) {\n next[item.id] = false\n }\n setPackedState(next)\n }\n\n const copyTrackingNumber = async () => {\n if (typeof navigator !== 'undefined' && navigator.clipboard) {\n await navigator.clipboard.writeText(trackingNo)\n setCopiedTracking(true)\n setTimeout(() => {\n setCopiedTracking(false)\n }, 2000)\n }\n }\n\n const handlePrint = () => {\n if (typeof window !== 'undefined') {\n window.print()\n }\n }\n\n const handleDownloadPdf = () => {\n setIsDownloading(true)\n setTimeout(() => {\n setIsDownloading(false)\n }, 1500)\n }\n\n return (\n
\n {/* Top Action & Fulfillment Toolbar (Screen Only) */}\n {showActions && (\n
\n
\n
\n {packingSlipNo}\n \n \n {orderNo}\n \n
\n\n \n\n
\n \n {carrierService}\n
\n\n \n {isAllPacked ? (\n \n ) : (\n \n )}\n {isAllPacked\n ? 'All Items Verified'\n : `${verifiedItemsCount}/${effectiveItems.length} Packed (${progressPercentage}%)`}\n \n
\n\n
\n \n {isAllPacked ? (\n \n ) : (\n \n )}\n {isAllPacked ? 'Reset Checklist' : 'Verify All'}\n \n\n \n \n {isDownloading ? 'Generating PDF...' : 'Download PDF'}\n \n\n \n
\n
\n )}\n\n {/* Printable Packing Slip Paper Container */}\n
\n {/* Section 1: Warehouse & Slip Header */}\n
\n
\n
\n
\n \n
\n
\n

{warehouseName}

\n

{warehouseFacility}

\n
\n
\n
\n

{warehouseAddress}

\n

\n {warehousePhone} · {warehouseEmail}\n

\n
\n
\n\n {/* Slip Meta & Barcode Header */}\n
\n
\n COMMERCIAL PACKING SLIP\n
\n
\n
\n Packing Slip Ref:\n {packingSlipNo}\n
\n
\n Order Reference:\n {orderNo}\n
\n
\n Order Date:\n {orderDate}\n
\n
\n Ship Date:\n {shipDate}\n
\n
\n
\n
\n\n \n\n {/* Section 2: Routing Grid (Ship-To, Origin, Carrier) */}\n
\n {/* Ship-To Customer Details */}\n
\n
\n \n Ship-To Recipient\n
\n
\n

{customerName}

\n

{customerCompany}

\n

{customerAddress}

\n

{customerPhone}

\n {deliveryNotes && (\n
\n

Delivery Note:

\n

{deliveryNotes}

\n
\n )}\n
\n
\n\n {/* Ship-From Origin Hub */}\n
\n
\n \n Fulfillment Origin\n
\n
\n

{warehouseName}

\n

Outbound Logistics Dock #12

\n

{warehouseAddress}

\n

Support: {warehousePhone}

\n
\n \n Direct EDI Dispatch Cleared\n
\n
\n
\n\n {/* Carrier & Logistics Routing */}\n
\n
\n \n Carrier & Service\n
\n
\n
\n

{carrierService}

\n

Standard Air Parcel · Guaranteed

\n
\n
\n Tracking Number:\n
\n {trackingNo}\n \n {copiedTracking ? (\n \n ) : (\n \n )}\n \n
\n
\n
\n Billing: Prepaid\n Declared: $349.00\n
\n
\n
\n
\n\n {/* Section 3: Picker & Pack Station Barcode Verification Ribbon */}\n
\n
\n
\n
\n \n Picker & Station\n
\n

\n {pickerName} ({pickerId})\n

\n

\n {packStation} · {shift}\n

\n
\n\n \n\n
\n
\n \n Packing Progress\n
\n
\n
\n \n
\n \n {verifiedItemsCount}/{effectiveItems.length} Verified\n \n
\n
\n
\n\n {/* Authentic Code 128 Simulated Barcode Scan Tag */}\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n

\n *{orderNo.replace('#', '')}*\n

\n
\n
\n\n {/* Section 4: Itemized Pick List Table */}\n
\n
\n
\n

Itemized Pick & Pack Checklist

\n \n {effectiveItems.length} Line Items\n \n
\n Check items upon bin scan and physical carton packing\n
\n\n
\n
\n \n \n \n Packed\n Bin / Location\n SKU & Barcode\n Item Name & Variant Details\n Qty Pick/Ord\n Weight\n \n \n \n {effectiveItems.map((item) => (\n toggleItemPacked(item.id)}\n >\n {/* Interactive Packed Checkbox */}\n e.stopPropagation()}>\n
\n setItemPacked(item.id, val)}\n />\n
\n \n\n {/* Warehouse Bin / Location Tag */}\n \n
\n \n {item.location}\n
\n \n\n {/* SKU & Barcode */}\n \n
\n

{item.sku}

\n

UPC: {item.barcode}

\n
\n \n\n {/* Item Description & Variant Notes */}\n \n
\n \n {item.name}\n

\n

{item.variant}

\n {item.notes &&

{item.notes}

}\n
\n \n\n {/* Quantity Ordered vs Packed */}\n \n
\n \n {packedState[item.id] ? item.qtyPacked : 0}\n \n /\n {item.qtyOrdered}\n
\n \n\n {/* Item Unit Weight */}\n \n \n {item.weightLbs.toFixed(1)} lbs\n \n \n \n ))}\n \n \n \n \n Order Package Totals ({effectiveItems.length} Distinct SKUs)\n \n \n {totalPackedUnits} / {totalOrderedUnits} Units\n \n \n {totalWeight.toFixed(1)} lbs\n \n \n \n
\n
\n
\n
\n\n {/* Section 5: Package Summary & Quality Control Certification */}\n
\n {/* Package Carton Specs */}\n
\n
\n \n Carton Specifications\n
\n
\n
\n Packing Box:\n {boxSize}\n
\n
\n Total Units:\n {totalOrderedUnits} items\n
\n
\n Gross Weight:\n {totalWeight.toFixed(1)} lbs\n
\n
\n Void Fill / Dunnage:\n {dunnageType}\n
\n
\n
\n\n {/* Customer Returns & Exchange Notice */}\n
\n
\n \n Hassle-Free Returns\n
\n
\n

Need to make an exchange or return?

\n

\n Scan the QR code or visit apexretail.com/returns{' '}\n within 30 days.\n

\n

\n Please include this packing slip with items in original condition.\n

\n
\n
\n\n {/* Quality Control Stamp Container */}\n
\n
\n
\n \n {qcStamp}\n
\n

AUDITED & SEALED

\n

Inspector: {qcInspector}

\n

{qcTimestamp}

\n
\n
\n
\n\n {/* Section 6: Document Footer Note */}\n
\n

Generated by Apex Logistics WMS v4.8.2 · Station ID: {packStation}

\n

DOC ID: PS-2026-849201-US-04 · Barcode Validated

\n
\n
\n\n \n
\n )\n}\n\nexport default PackingSlipGenerator\n", "type": "registry:block", "target": "~/components/blocks/PackingSlipGenerator.tsx" } ], "dependencies": [ "lucide-react" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/react/badge.json", "https://uipkge.dev/r/react/button.json", "https://uipkge.dev/r/react/checkbox.json", "https://uipkge.dev/r/react/separator.json", "https://uipkge.dev/r/react/table.json" ], "description": "Shopify and ShipStation style warehouse order packing slip and picker verification checklist with warehouse header, customer ship-to routing, picker pack station barcode scan identifier, itemized pick list table with interactive packed checkboxes, bin location tags, SKU barcodes, weight calculations, and quality control inspector stamp.", "categories": [ "logistics", "app", "ecommerce", "documents" ] }