62:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 63:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 64:T7a5b,'use client' import * as React from 'react' import { Box, Building2, Check, CheckCheck, CheckCircle2, Clock, Copy, FileDown, MapPin, Printer, QrCode, RotateCcw, Scan, ShieldCheck, Tag, Truck, User, Warehouse, Zap, } from 'lucide-react' import { cn } from '@/lib/utils' import { Badge } from '@/components/ui/badge' import { Button } from '@/components/ui/button' import { Checkbox } from '@/components/ui/checkbox' import { Separator } from '@/components/ui/separator' import { Table, TableBody, TableCell, TableFooter, TableHead, TableHeader, TableRow } from '@/components/ui/table' export interface PackingSlipItem { id: string sku: string barcode: string name: string variant: string location: string qtyOrdered: number qtyPacked: number weightLbs: number notes?: string initialPacked?: boolean } export interface PackingSlipProps { className?: string packingSlipNo?: string orderNo?: string carrier?: string carrierService?: string trackingNo?: string orderDate?: string shipDate?: string warehouseName?: string warehouseFacility?: string warehouseAddress?: string warehousePhone?: string warehouseEmail?: string customerName?: string customerCompany?: string customerAddress?: string customerPhone?: string customerEmail?: string deliveryNotes?: string pickerName?: string pickerId?: string packStation?: string shift?: string boxSize?: string dunnageType?: string qcInspector?: string qcStamp?: string qcTimestamp?: string items?: PackingSlipItem[] showActions?: boolean initialPackedAll?: boolean } const defaultItems: PackingSlipItem[] = [ { id: 'item-1', sku: '#SKU-84920', barcode: '849201928410', name: 'Aero Minimalist Runner', variant: 'Size 10.5 · Matte Black', location: 'Aisle 04 · Rack B · Shelf 02', qtyOrdered: 1, qtyPacked: 1, weightLbs: 1.8, notes: 'Eco-Knit Upper / EVA Cushioning Sole', initialPacked: true, }, { id: 'item-2', sku: '#SKU-77219', barcode: '772198421093', name: 'HydroShield Waterproof Shell Jacket', variant: "Men's M · Alpine Green", location: 'Aisle 02 · Rack D · Shelf 01', qtyOrdered: 1, qtyPacked: 1, weightLbs: 1.6, notes: '3-Layer DWR Membrane / Sealed Seams', initialPacked: true, }, { id: 'item-3', sku: '#SKU-31904', barcode: '319045812903', name: 'Ergonomic Trail Crew Socks (3-Pack)', variant: 'Charcoal / Grey · L', location: 'Aisle 08 · Rack A · Shelf 04', qtyOrdered: 1, qtyPacked: 1, weightLbs: 1.4, notes: 'Merino Wool Blend / Seamless Toe', initialPacked: false, }, ] export function PackingSlipGenerator({ className, packingSlipNo = '#PS-849201', orderNo = '#ORD-92841', carrier = 'FedEx', carrierService = 'FedEx 2-Day Air', trackingNo = '7849 2018 9284 1029', orderDate = 'Aug 21, 2026', shipDate = 'Aug 21, 2026', warehouseName = 'Apex Retail Warehouse #04', warehouseFacility = 'West Coast Omnichannel Hub', warehouseAddress = '1040 North Industry Pkwy, Reno, NV 89502', warehousePhone = '+1 (800) 555-0199', warehouseEmail = 'fulfillment-reno4@apexretail.io', customerName = 'Eleanor Vance', customerCompany = 'Vance Design Studios · Suite 400', customerAddress = '742 Evergreen Terrace, Springfield, OR 97477', customerPhone = '+1 (555) 839-2019', customerEmail = 'eleanor.vance@vancestudios.design', deliveryNotes = 'Gate Code: #4829. Leave at covered front porch if unavailable. Do not bend.', pickerName = 'Marcus Vance', pickerId = '#EMP-4821', packStation = 'Pack Station #4', shift = 'Morning Shift · Bay Alpha', boxSize = 'Box #3 · 14" × 10" × 6"', dunnageType = 'Recycled Kraft Void Fill (1.2 oz)', qcInspector = 'Elena Rostova (#QC-89)', qcStamp = 'QC Passed · Station #4', qcTimestamp = '2026-08-21 09:42 PST', items = defaultItems, showActions = true, initialPackedAll = false, }: PackingSlipProps) { const effectiveItems = items && items.length > 0 ? items : defaultItems const [packedState, setPackedState] = React.useState>(() => { const map: Record = {} for (const item of effectiveItems) { map[item.id] = initialPackedAll ? true : (item.initialPacked ?? false) } return map }) const [copiedTracking, setCopiedTracking] = React.useState(false) const [isDownloading, setIsDownloading] = React.useState(false) const totalOrderedUnits = effectiveItems.reduce((sum, item) => sum + item.qtyOrdered, 0) const totalPackedUnits = effectiveItems.reduce((sum, item) => { return sum + (packedState[item.id] ? item.qtyPacked : 0) }, 0) const totalWeight = effectiveItems.reduce((sum, item) => sum + item.weightLbs, 0) const verifiedItemsCount = effectiveItems.filter((item) => packedState[item.id]).length const isAllPacked = effectiveItems.every((item) => packedState[item.id]) const progressPercentage = effectiveItems.length === 0 ? 0 : Math.round((verifiedItemsCount / effectiveItems.length) * 100) const toggleItemPacked = (id: string) => { setPackedState((prev) => ({ ...prev, [id]: !prev[id], })) } const setItemPacked = (id: string, checked: boolean | 'indeterminate') => { setPackedState((prev) => ({ ...prev, [id]: checked === true, })) } const markAllPacked = () => { const next: Record = {} for (const item of effectiveItems) { next[item.id] = true } setPackedState(next) } const resetPackingChecklist = () => { const next: Record = {} for (const item of effectiveItems) { next[item.id] = false } setPackedState(next) } const copyTrackingNumber = async () => { if (typeof navigator !== 'undefined' && navigator.clipboard) { await navigator.clipboard.writeText(trackingNo) setCopiedTracking(true) setTimeout(() => { setCopiedTracking(false) }, 2000) } } const handlePrint = () => { if (typeof window !== 'undefined') { window.print() } } const handleDownloadPdf = () => { setIsDownloading(true) setTimeout(() => { setIsDownloading(false) }, 1500) } return (

{/* Top Action & Fulfillment Toolbar (Screen Only) */} {showActions && (

{packingSlipNo}

{isAllPacked ? (

)} {/* Printable Packing Slip Paper Container */}

{/* Section 1: Warehouse & Slip Header */}

{warehouseName}

{warehouseFacility}

{warehouseAddress}

{warehousePhone} · {warehouseEmail}

{/* Slip Meta & Barcode Header */}

COMMERCIAL PACKING SLIP

Packing Slip Ref: {packingSlipNo}

Order Reference: {orderNo}

Order Date: {orderDate}

Ship Date: {shipDate}

{/* Section 2: Routing Grid (Ship-To, Origin, Carrier) */}

{/* Ship-To Customer Details */}

{customerName}

{customerCompany}

{customerAddress}

{customerPhone}

{deliveryNotes && (

Delivery Note:

{deliveryNotes}

)}

{/* Ship-From Origin Hub */}

{warehouseName}

Outbound Logistics Dock #12

{warehouseAddress}

Support: {warehousePhone}

{/* Carrier & Logistics Routing */}

{carrierService}

Standard Air Parcel · Guaranteed

Tracking Number:

{trackingNo}

Billing: Prepaid Declared: $349.00

{/* Section 3: Picker & Pack Station Barcode Verification Ribbon */}

{pickerName} ({pickerId})

{packStation} · {shift}

{verifiedItemsCount}/{effectiveItems.length} Verified

{/* Authentic Code 128 Simulated Barcode Scan Tag */}

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

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

Itemized Pick & Pack Checklist

{effectiveItems.length} Line Items

Check items upon bin scan and physical carton packing

Packed Bin / Location SKU & Barcode Item Name & Variant Details Qty Pick/Ord Weight {effectiveItems.map((item) => ( toggleItemPacked(item.id)} > {/* Interactive Packed Checkbox */} e.stopPropagation()}>

setItemPacked(item.id, val)} />

{/* Warehouse Bin / Location Tag */}

{/* SKU & Barcode */}

{item.sku}

UPC: {item.barcode}

{/* Item Description & Variant Notes */}

{item.name}

{item.variant}

{item.notes &&

{item.notes}

}

{/* Quantity Ordered vs Packed */}

{packedState[item.id] ? item.qtyPacked : 0} / {item.qtyOrdered}

{/* Item Unit Weight */} {item.weightLbs.toFixed(1)} lbs ))} Order Package Totals ({effectiveItems.length} Distinct SKUs) {totalPackedUnits} / {totalOrderedUnits} Units {totalWeight.toFixed(1)} lbs

{/* Section 5: Package Summary & Quality Control Certification */}

{/* Package Carton Specs */}

Packing Box: {boxSize}

Total Units: {totalOrderedUnits} items

Gross Weight: {totalWeight.toFixed(1)} lbs

Void Fill / Dunnage: {dunnageType}

{/* Customer Returns & Exchange Notice */}

Need to make an exchange or return?

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

Please include this packing slip with items in original condition.

{/* Quality Control Stamp Container */}

AUDITED & SEALED

Inspector: {qcInspector}

{qcTimestamp}

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

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

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

) } export default PackingSlipGenerator 61:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L62",null,{"namespace":"@registrydirectory","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"]}]]}],null]}],["$","$L63",null,{"files":[{"path":"packages/registry-react/blocks/packing-slip-generator/PackingSlipGenerator.tsx","content":"$64","type":"registry:block","target":"~/components/blocks/PackingSlipGenerator.tsx"}],"className":"h-[70svh] min-h-80"}]]}]