{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "onboarding-equipment-provisioning", "title": "Onboarding Equipment Provisioning", "type": "registry:block", "files": [ { "path": "packages/registry-react/blocks/onboarding-equipment-provisioning/OnboardingEquipmentProvisioning.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport {\n Boxes,\n Check,\n CheckCircle2,\n Circle,\n Clock,\n Copy,\n DollarSign,\n Download,\n Laptop,\n Layers,\n Lock,\n Monitor,\n Plus,\n Send,\n ShieldCheck,\n Truck,\n X,\n} from 'lucide-react'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Checkbox } from '@/components/ui/checkbox'\nimport { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'\nimport { Separator } from '@/components/ui/separator'\nimport { cn } from '@/lib/utils'\n\nexport type WorkstationChoice = 'macbook' | 'thinkpad'\n\nexport interface OnboardingEquipmentProvisioningProps {\n className?: string\n initialWorkstation?: WorkstationChoice\n onOrderCustom?: () => void\n onExportManifest?: () => void\n}\n\nconst WORKSTATION_PRICES: Record = {\n macbook: 3499,\n thinkpad: 2850,\n}\n\nconst softwareLicenses = [\n {\n name: 'GitHub Enterprise',\n tier: 'Copilot Enterprise + CodeQL',\n seatId: 'GH-ENG-8402',\n category: 'Engineering',\n status: 'Provisioned',\n sso: 'Okta SCIM',\n },\n {\n name: 'Figma Professional',\n tier: 'Design System Editor + Dev Mode',\n seatId: 'FG-DS-1940',\n category: 'Design & UI',\n status: 'Provisioned',\n sso: 'Okta SCIM',\n },\n {\n name: '1Password Business',\n tier: 'Enterprise Vault + Infra Keys',\n seatId: '1P-CORP-9921',\n category: 'Security',\n status: 'Provisioned',\n sso: 'MDM Enrolled',\n },\n {\n name: 'Slack Pro',\n tier: 'Enterprise Grid (acme-eng)',\n seatId: 'SLK-88301',\n category: 'Comms',\n status: 'Provisioned',\n sso: 'SAML 2.0',\n },\n {\n name: 'Datadog APM',\n tier: 'Staff Observability & Traces',\n seatId: 'DD-APM-4109',\n category: 'DevOps',\n status: 'Provisioned',\n sso: 'Okta SCIM',\n },\n {\n name: 'JetBrains All Products',\n tier: 'Ultimate Suite (IntelliJ/CLion/GoLand)',\n seatId: 'JB-ALL-7740',\n category: 'Engineering',\n status: 'Provisioned',\n sso: 'Corp Pool',\n },\n]\n\nconst trackingSteps = [\n {\n title: 'Order Approved',\n date: 'Aug 24, 2026',\n time: '09:00 AM',\n completed: true,\n current: false,\n },\n {\n title: 'IT Staged & Imaged',\n date: 'Aug 25, 2026',\n time: '02:30 PM',\n completed: true,\n current: false,\n },\n {\n title: 'Shipped via FedEx',\n date: 'Aug 26, 2026',\n time: '06:15 PM',\n completed: true,\n current: true,\n },\n {\n title: 'Out for Delivery',\n date: 'Aug 28, 2026',\n time: 'Est. 08:00 AM',\n completed: false,\n current: false,\n },\n {\n title: 'Delivered to Home',\n date: 'Aug 28, 2026',\n time: 'Est. 10:30 AM',\n completed: false,\n current: false,\n },\n]\n\nexport function OnboardingEquipmentProvisioning({\n className,\n initialWorkstation = 'macbook',\n onOrderCustom,\n onExportManifest,\n}: OnboardingEquipmentProvisioningProps) {\n // State\n const [selectedWorkstation, setSelectedWorkstation] = React.useState(initialWorkstation)\n const [includeDisplay, setIncludeDisplay] = React.useState(true)\n const [includeInputBundle, setIncludeInputBundle] = React.useState(true)\n const [includeDeskMat, setIncludeDeskMat] = React.useState(true)\n const [includeYubikey, setIncludeYubikey] = React.useState(true)\n const [includeHardwareToken, setIncludeHardwareToken] = React.useState(true)\n\n const [copiedTracking, setCopiedTracking] = React.useState(false)\n const [copiedEmpId, setCopiedEmpId] = React.useState(false)\n const [showCustomOrderModal, setShowCustomOrderModal] = React.useState(false)\n const [customRequestSubmitted, setCustomRequestSubmitted] = React.useState(false)\n const [customItemName, setCustomItemName] = React.useState('')\n const [customItemJustification, setCustomItemJustification] = React.useState('')\n\n // Costs\n const workstationCost = WORKSTATION_PRICES[selectedWorkstation]\n const displayCost = includeDisplay ? 1499 : 0\n const inputBundleCost = includeInputBundle ? 249 : 0\n const deskMatCost = includeDeskMat ? 49 : 0\n const yubikeyCost = includeYubikey ? 75 : 0\n const hardwareTokenCost = includeHardwareToken ? 49 : 0\n\n const peripheralsTotal = displayCost + inputBundleCost + deskMatCost\n const securityTotal = yubikeyCost + hardwareTokenCost\n const totalInvestment = workstationCost + peripheralsTotal + securityTotal\n\n const copyTrackingNumber = React.useCallback(() => {\n if (typeof navigator !== 'undefined' && navigator.clipboard) {\n navigator.clipboard.writeText('TRK-8492019')\n setCopiedTracking(true)\n setTimeout(() => {\n setCopiedTracking(false)\n }, 2000)\n }\n }, [])\n\n const copyEmployeeId = React.useCallback(() => {\n if (typeof navigator !== 'undefined' && navigator.clipboard) {\n navigator.clipboard.writeText('EMP-88291')\n setCopiedEmpId(true)\n setTimeout(() => {\n setCopiedEmpId(false)\n }, 2000)\n }\n }, [])\n\n const handleOpenCustomOrder = React.useCallback(() => {\n setShowCustomOrderModal(true)\n onOrderCustom?.()\n }, [onOrderCustom])\n\n const handleCloseCustomOrder = React.useCallback(() => {\n setShowCustomOrderModal(false)\n setCustomRequestSubmitted(false)\n setCustomItemName('')\n setCustomItemJustification('')\n }, [])\n\n const submitCustomRequest = React.useCallback(() => {\n if (customItemName.trim()) {\n setCustomRequestSubmitted(true)\n setTimeout(() => {\n handleCloseCustomOrder()\n }, 2000)\n }\n }, [customItemName, handleCloseCustomOrder])\n\n return (\n
\n {/* Header Section */}\n
\n
\n {/* Title & Hire Info */}\n
\n
\n \n \n IT Asset Provisioning\n \n {/* Emerald Status Badge */}\n
\n \n \n \n \n Hardware Assigned · Shipped via FedEx\n
\n
\n\n

\n New Hire Hardware & IT Provisioning\n

\n\n {/* New Hire Metadata Line */}\n
\n Elena Rostova\n \n Senior Staff Engineer\n \n \n \n Start Date: Sep 01, 2026\n \n \n \n EMP-88291\n {copiedEmpId ? (\n \n ) : (\n \n )}\n \n
\n
\n\n {/* Action Buttons */}\n
\n \n \n Export Manifest\n \n\n \n
\n
\n\n {/* Financial & Overview Summary Band */}\n \n
\n
\n
\n \n Total IT Investment\n
\n

\n ${totalInvestment.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}\n

\n

Total Assigned Value

\n
\n\n
\n
\n \n Primary Workstation\n
\n

\n {selectedWorkstation === 'macbook' ? 'MacBook Pro 16\" M3 Max' : 'ThinkPad P1 Gen 6 i9'}\n

\n

${workstationCost.toFixed(2)}

\n
\n\n
\n
\n \n Cloud SaaS Seats\n
\n

6 Enterprise Licenses

\n

All Provisioned

\n
\n\n
\n
\n \n FedEx Priority\n
\n

Est. Aug 28, 2026

\n

#TRK-8492019

\n
\n
\n
\n\n {/* 4 IT Provisioning Pillar Cards Grid */}\n
\n {/* Pillar 1: Primary Workstation Selection */}\n \n \n
\n
\n
\n \n
\n
\n 1. Primary Workstation\n Select standard issue macOS or Linux developer laptop\n
\n
\n \n Pillar 01\n \n
\n \n\n \n setSelectedWorkstation(val as WorkstationChoice)}\n className=\"grid grid-cols-1 gap-3\"\n >\n {/* Choice A: MacBook Pro 16\" */}\n \n
\n
\n \n
\n
\n \n MacBook Pro 16\" (M3 Max · 64GB RAM · 1TB SSD)\n \n \n Selected Spec\n \n
\n

\n Apple M3 Max (16-core CPU, 40-core GPU) • 64GB Unified Memory • 1TB Fast NVMe •\n Liquid Retina XDR (Space Black)\n

\n
\n \n \n AppleCare+ Enterprise (3-Year Full Accidental Damage)\n \n
\n
\n
\n
\n $3,499.00\n
\n
\n \n\n {/* Choice B: ThinkPad P1 Gen 6 */}\n \n
\n
\n \n
\n
\n \n ThinkPad P1 Gen 6 (Intel i9 · 64GB RAM · Ubuntu Linux)\n \n \n Linux Spec\n \n
\n

\n Intel Core i9-13900H • NVIDIA RTX 4080 (12GB) • 64GB DDR5 • 1TB NVMe • 16\"\n WQXGA OLED • Ubuntu 24.04 LTS\n

\n
\n \n \n Lenovo Premier Support (3-Year Next-Day Onsite)\n \n
\n
\n
\n
\n $2,850.00\n
\n
\n \n \n \n\n \n Workstation Subtotal:\n ${workstationCost.toFixed(2)}\n \n \n\n {/* Pillar 2: Display & Peripherals */}\n \n \n
\n
\n
\n \n
\n
\n 2. Display & Peripherals\n High-resolution retina display and ergonomic peripherals\n
\n
\n \n Pillar 02\n \n
\n \n\n \n {/* Item 1: Studio Display */}\n \n
\n setIncludeDisplay(Boolean(c))}\n className=\"mt-0.5\"\n />\n
\n \n Studio Display 27\" 5K Retina\n \n

\n 5120×2880 Retina • 600 nits • 12MP Center Stage Camera • Studio Mics •\n Tilt-adjustable Stand\n

\n
\n \n Thunderbolt 3 Host Pass-Through\n \n
\n
\n
\n $1,499.00\n
\n\n {/* Item 2: Magic Keyboard & Trackpad */}\n \n
\n setIncludeInputBundle(Boolean(c))}\n className=\"mt-0.5\"\n />\n
\n \n

\n Touch ID Wireless Keyboard • Force Touch Multi-Touch Glass Trackpad • Space Black finish\n

\n
\n \n USB-C Braided Woven Cable\n \n
\n
\n
\n $249.00\n
\n\n {/* Item 3: Ergonomic Desk Mat */}\n \n
\n setIncludeDeskMat(Boolean(c))}\n className=\"mt-0.5\"\n />\n
\n \n

\n 24\" × 36\" Anti-fatigue high-density polyurethane core • Contoured active standing terrain\n

\n
\n
\n $49.00\n \n \n\n \n Peripherals Subtotal:\n ${peripheralsTotal.toFixed(2)}\n \n \n\n {/* Pillar 3: Security & Authentication Hardware */}\n \n \n
\n
\n
\n \n
\n
\n 3. Security & Authentication Hardware\n Zero-trust physical tokens and cryptographic hardware keys\n
\n
\n \n Pillar 03\n \n
\n \n\n \n {/* Item 1: YubiKey 5C NFC */}\n \n
\n setIncludeYubikey(Boolean(c))}\n className=\"mt-0.5\"\n />\n
\n
\n \n \n FIDO2 / WebAuthn\n \n
\n

\n Dual-key pair for primary keychain and secure home backup • USB-C • Contactless NFC •\n IP68 water resistant\n

\n

\n Pre-enrolled Serials: #YB-90281-A / #YB-90281-B\n

\n
\n
\n $75.00\n \n\n {/* Item 2: Encrypted Hardware Token */}\n \n
\n setIncludeHardwareToken(Boolean(c))}\n className=\"mt-0.5\"\n />\n
\n
\n \n \n FIPS 140-3 Level 3\n \n
\n

\n AES-256 hardware cryptographic security token with PIN pad • Corporate Root CA Certificate\n pre-loaded\n

\n

\n Device Serial: #ET-78392-X\n

\n
\n
\n $49.00\n \n\n {/* Compliance Strip */}\n
\n
\n \n SOC 2 Type II & FedRAMP High compliant hardware assignment\n
\n Enforced\n
\n \n\n \n Security Hardware Subtotal:\n ${securityTotal.toFixed(2)}\n \n \n\n {/* Pillar 4: Cloud Software & License Seats */}\n \n \n
\n
\n
\n \n
\n
\n 4. Cloud Software & License Seats\n 6 assigned SaaS enterprise licenses auto-synced via Okta\n
\n
\n \n Pillar 04\n \n
\n \n\n \n
\n {softwareLicenses.map((license) => (\n \n
\n
\n {license.name}\n
\n \n {license.status}\n
\n
\n

{license.tier}

\n
\n\n
\n {license.seatId}\n \n {license.sso}\n \n
\n
\n ))}\n \n \n\n \n Software Licensing Cost:\n \n Enterprise Corp Pool ($0.00 Direct)\n \n \n \n \n\n {/* Shipping & Delivery Tracking Card */}\n \n \n
\n
\n
\n \n
\n
\n Shipping & Delivery Tracking\n Direct-to-home courier transit with signature required on delivery\n
\n
\n
\n \n Carrier: FedEx Priority\n \n \n #TRK-8492019\n {copiedTracking ? (\n \n ) : (\n \n )}\n \n
\n
\n \n\n \n {/* Address & Courier Info Banner */}\n
\n
\n \n Shipment Recipient\n \n

Elena Rostova

\n

Senior Staff Engineer • Distributed Systems

\n

elena.rostova@acme.corp

\n
\n\n
\n \n Destination Address\n \n

4820 Grand Avenue, Apt 14B

\n

Seattle, WA 98101-2294

\n

Direct In-Person Signature Required

\n
\n\n
\n \n Estimated Delivery\n \n

Thursday, Aug 28, 2026

\n

Estimated by 10:30 AM (Morning Delivery)

\n

FedEx Express Priority Overnight

\n
\n
\n\n {/* 5-Step Progress Stepper */}\n
\n \n Logistics Timeline Status\n \n
\n {trackingSteps.map((step, idx) => (\n \n
\n 0{idx + 1}\n {step.completed && !step.current ? (\n \n ) : step.current ? (\n \n \n \n \n ) : (\n \n )}\n
\n\n
\n \n {{ ...step }.title}\n

\n

{step.date}

\n

{step.time}

\n
\n
\n ))}\n
\n \n \n \n\n {/* Custom Hardware Order Modal Dialog */}\n {showCustomOrderModal && (\n \n
\n
\n
\n
\n \n
\n
\n

\n Order Custom Hardware\n

\n

\n Request specialized hardware or accessories for Elena Rostova\n

\n
\n
\n \n \n \n
\n\n \n\n {!customRequestSubmitted ? (\n
\n
\n \n setCustomItemName(e.target.value)}\n placeholder=\"e.g. Ergonomic Split Mechanical Keyboard, 4K Webcam, eGPU\"\n className=\"border-input bg-background text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 w-full rounded-md border px-3 py-2 text-xs shadow-xs outline-none focus-visible:ring-[3px]\"\n />\n
\n\n
\n \n setCustomItemJustification(e.target.value)}\n rows={3}\n placeholder=\"Provide engineering justification or project requirements...\"\n className=\"border-input bg-background text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 w-full resize-none rounded-md border px-3 py-2 text-xs shadow-xs outline-none focus-visible:ring-[3px]\"\n />\n
\n\n
\n

\n Custom requests are automatically routed to Engineering Management & IT Procurement for budget\n sign-off.\n

\n
\n\n
\n \n Cancel\n \n \n \n Submit Request\n \n
\n
\n ) : (\n
\n
\n \n
\n

Custom Hardware Request Submitted

\n

\n Request for {customItemName} has been forwarded to IT\n Procurement.\n

\n
\n )}\n
\n \n )}\n \n )\n}\nexport default OnboardingEquipmentProvisioning\n", "type": "registry:block", "target": "~/components/blocks/OnboardingEquipmentProvisioning.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/card.json", "https://uipkge.dev/r/react/checkbox.json", "https://uipkge.dev/r/react/radio-group.json", "https://uipkge.dev/r/react/separator.json" ], "description": "Enterprise IT hardware, peripherals, and software license provisioning portal for new hires with primary workstation selection, display and peripheral bundles, security keys, cloud SaaS seats, and courier tracking.", "categories": [ "hr", "app" ] }