{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "onboarding-equipment-provisioning",
  "title": "Onboarding Equipment Provisioning",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/onboarding-equipment-provisioning/OnboardingEquipmentProvisioning.vue",
      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { computed, ref } from 'vue'\nimport {\n  Boxes,\n  Calendar,\n  Check,\n  CheckCircle2,\n  Circle,\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-vue-next'\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\ninterface Props {\n  class?: HTMLAttributes['class']\n  initialWorkstation?: WorkstationChoice\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  initialWorkstation: 'macbook',\n})\n\nconst emit = defineEmits<{\n  (e: 'order-custom'): void\n  (e: 'export-manifest'): void\n}>()\n\n// State\nconst selectedWorkstation = ref<WorkstationChoice>(props.initialWorkstation)\nconst includeDisplay = ref(true)\nconst includeInputBundle = ref(true)\nconst includeDeskMat = ref(true)\nconst includeYubikey = ref(true)\nconst includeHardwareToken = ref(true)\n\nconst copiedTracking = ref(false)\nconst copiedEmpId = ref(false)\nconst showCustomOrderModal = ref(false)\nconst customRequestSubmitted = ref(false)\nconst customItemName = ref('')\nconst customItemJustification = ref('')\n\n// Costs (Choice A MacBook $3,499 + Studio Display $1,499 + Input Bundle $249 + Desk Mat $49 + YubiKey $75 + Token $49 = $5,420.00)\nconst WORKSTATION_PRICES: Record<WorkstationChoice, number> = {\n  macbook: 3499,\n  thinkpad: 2850,\n}\n\nconst workstationCost = computed(() => WORKSTATION_PRICES[selectedWorkstation.value])\nconst displayCost = computed(() => (includeDisplay.value ? 1499 : 0))\nconst inputBundleCost = computed(() => (includeInputBundle.value ? 249 : 0))\nconst deskMatCost = computed(() => (includeDeskMat.value ? 49 : 0))\nconst yubikeyCost = computed(() => (includeYubikey.value ? 75 : 0))\nconst hardwareTokenCost = computed(() => (includeHardwareToken.value ? 49 : 0))\n\nconst peripheralsTotal = computed(() => displayCost.value + inputBundleCost.value + deskMatCost.value)\nconst securityTotal = computed(() => yubikeyCost.value + hardwareTokenCost.value)\n\nconst totalInvestment = computed(() => {\n  return workstationCost.value + peripheralsTotal.value + securityTotal.value\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\nfunction copyTrackingNumber() {\n  if (typeof navigator !== 'undefined' && navigator.clipboard) {\n    navigator.clipboard.writeText('TRK-8492019')\n    copiedTracking.value = true\n    setTimeout(() => {\n      copiedTracking.value = false\n    }, 2000)\n  }\n}\n\nfunction copyEmployeeId() {\n  if (typeof navigator !== 'undefined' && navigator.clipboard) {\n    navigator.clipboard.writeText('EMP-88291')\n    copiedEmpId.value = true\n    setTimeout(() => {\n      copiedEmpId.value = false\n    }, 2000)\n  }\n}\n\nfunction handleExportManifest() {\n  emit('export-manifest')\n}\n\nfunction handleOpenCustomOrder() {\n  showCustomOrderModal.value = true\n  emit('order-custom')\n}\n\nfunction handleCloseCustomOrder() {\n  showCustomOrderModal.value = false\n  customRequestSubmitted.value = false\n  customItemName.value = ''\n  customItemJustification.value = ''\n}\n\nfunction submitCustomRequest() {\n  if (customItemName.value.trim()) {\n    customRequestSubmitted.value = true\n    setTimeout(() => {\n      handleCloseCustomOrder()\n    }, 2000)\n  }\n}\n</script>\n\n<template>\n  <div data-slot=\"onboarding-equipment-provisioning\" :class=\"cn('w-full space-y-6', props.class)\">\n    <!-- Header Section -->\n    <div class=\"border-border bg-card flex flex-col gap-4 rounded-xl border p-5 shadow-xs sm:p-6\">\n      <div class=\"flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between\">\n        <!-- Title & Hire Info -->\n        <div class=\"space-y-1.5\">\n          <div class=\"flex flex-wrap items-center gap-2\">\n            <Badge variant=\"outline\" class=\"gap-1.5 font-mono text-xs\">\n              <Boxes class=\"text-primary size-3.5\" aria-hidden=\"true\" />\n              IT Asset Provisioning\n            </Badge>\n            <!-- Emerald Status Badge -->\n            <div\n              class=\"border-success/20 bg-success/10 text-success inline-flex items-center gap-1.5 rounded-full border px-2.5 py-0.5 text-xs font-medium\"\n            >\n              <span class=\"relative flex size-1.5\">\n                <span class=\"bg-success absolute inline-flex h-full w-full rounded-full opacity-75\" />\n                <span class=\"bg-success relative inline-flex size-1.5 rounded-full\" />\n              </span>\n              Hardware Assigned · Shipped via FedEx\n            </div>\n          </div>\n\n          <h1 class=\"text-foreground text-xl font-bold tracking-tight sm:text-2xl\">\n            New Hire Hardware &amp; IT Provisioning\n          </h1>\n\n          <!-- New Hire Metadata Line -->\n          <div class=\"flex flex-wrap items-center gap-x-3 gap-y-1 text-xs sm:text-sm\">\n            <span class=\"text-foreground font-semibold\">Elena Rostova</span>\n            <span class=\"text-muted-foreground hidden sm:inline\">&bull;</span>\n            <span class=\"text-muted-foreground\">Senior Staff Engineer</span>\n            <span class=\"text-muted-foreground hidden sm:inline\">&bull;</span>\n            <span class=\"text-muted-foreground flex items-center gap-1\">\n              <Calendar class=\"size-3.5\" aria-hidden=\"true\" />\n              Start Date: <strong class=\"text-foreground font-medium\">Sep 01, 2026</strong>\n            </span>\n            <span class=\"text-muted-foreground hidden sm:inline\">&bull;</span>\n            <button\n              type=\"button\"\n              class=\"hover:bg-muted focus-visible:ring-ring border-border bg-muted/40 text-foreground inline-flex min-h-6 items-center gap-1 rounded border px-1.5 py-0.5 font-mono text-xs font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n              title=\"Click to copy employee ID\"\n              @click=\"copyEmployeeId\"\n            >\n              EMP-88291\n              <Check v-if=\"copiedEmpId\" class=\"text-success size-3\" aria-hidden=\"true\" />\n              <Copy v-else class=\"text-muted-foreground size-3\" aria-hidden=\"true\" />\n            </button>\n          </div>\n        </div>\n\n        <!-- Action Buttons -->\n        <div class=\"flex flex-wrap items-center gap-2 pt-1 lg:pt-0\">\n          <Button\n            aria-label=\"Download attachment\"\n            variant=\"outline\"\n            size=\"sm\"\n            class=\"gap-1.5 text-xs shadow-xs\"\n            @click=\"handleExportManifest\"\n          >\n            <Download class=\"size-3.5\" aria-hidden=\"true\" />\n            <span>Export Manifest</span>\n          </Button>\n\n          <Button size=\"sm\" class=\"gap-1.5 text-xs shadow-xs\" @click=\"handleOpenCustomOrder\">\n            <Plus class=\"size-3.5\" aria-hidden=\"true\" />\n            <span>Order Custom Hardware</span>\n          </Button>\n        </div>\n      </div>\n\n      <!-- Financial & Overview Summary Band -->\n      <Separator />\n      <div class=\"grid grid-cols-2 gap-4 pt-1 sm:grid-cols-4\">\n        <div class=\"border-border/60 bg-muted/20 rounded-lg border p-3\">\n          <div class=\"text-muted-foreground flex items-center gap-1.5 text-xs\">\n            <DollarSign class=\"text-primary size-3.5\" aria-hidden=\"true\" />\n            <span>Total IT Investment</span>\n          </div>\n          <p class=\"text-foreground mt-1 font-mono text-lg font-bold tabular-nums sm:text-xl\">\n            ${{ totalInvestment.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) }}\n          </p>\n          <p class=\"text-muted-foreground text-xs\">Total Assigned Value</p>\n        </div>\n\n        <div class=\"border-border/60 bg-muted/20 rounded-lg border p-3\">\n          <div class=\"text-muted-foreground flex items-center gap-1.5 text-xs\">\n            <Laptop class=\"text-primary size-3.5\" aria-hidden=\"true\" />\n            <span>Primary Workstation</span>\n          </div>\n          <p class=\"text-foreground mt-1 truncate text-xs font-semibold sm:text-sm\">\n            {{ selectedWorkstation === 'macbook' ? 'MacBook Pro 16\" M3 Max' : 'ThinkPad P1 Gen 6 i9' }}\n          </p>\n          <p class=\"text-muted-foreground font-mono text-xs tabular-nums\">${{ workstationCost.toFixed(2) }}</p>\n        </div>\n\n        <div class=\"border-border/60 bg-muted/20 rounded-lg border p-3\">\n          <div class=\"text-muted-foreground flex items-center gap-1.5 text-xs\">\n            <Layers class=\"text-primary size-3.5\" aria-hidden=\"true\" />\n            <span>Cloud SaaS Seats</span>\n          </div>\n          <p class=\"text-foreground mt-1 text-xs font-semibold sm:text-sm\">6 Enterprise Licenses</p>\n          <p class=\"text-success text-xs font-medium\">All Provisioned</p>\n        </div>\n\n        <div class=\"border-border/60 bg-muted/20 rounded-lg border p-3\">\n          <div class=\"text-muted-foreground flex items-center gap-1.5 text-xs\">\n            <Truck class=\"text-primary size-3.5\" aria-hidden=\"true\" />\n            <span>FedEx Priority</span>\n          </div>\n          <p class=\"text-foreground mt-1 text-xs font-semibold sm:text-sm\">Est. Aug 28, 2026</p>\n          <p class=\"text-muted-foreground font-mono text-xs\">#TRK-8492019</p>\n        </div>\n      </div>\n    </div>\n\n    <!-- 4 IT Provisioning Pillar Cards Grid -->\n    <div class=\"grid grid-cols-1 gap-6 lg:grid-cols-2\">\n      <!-- Pillar 1: Primary Workstation Selection -->\n      <Card class=\"border shadow-xs\">\n        <CardHeader class=\"pb-3\">\n          <div class=\"flex items-center justify-between\">\n            <div class=\"flex items-center gap-2\">\n              <div class=\"bg-primary/10 text-primary rounded-lg p-2\">\n                <Laptop class=\"size-4\" aria-hidden=\"true\" />\n              </div>\n              <div>\n                <CardTitle class=\"text-base font-semibold\">1. Primary Workstation</CardTitle>\n                <CardDescription>Select standard issue macOS or Linux developer laptop</CardDescription>\n              </div>\n            </div>\n            <Badge variant=\"outline\" class=\"font-mono text-xs\">Pillar 01</Badge>\n          </div>\n        </CardHeader>\n\n        <CardContent class=\"space-y-3\">\n          <RadioGroup v-model=\"selectedWorkstation\" class=\"grid grid-cols-1 gap-3\">\n            <!-- Choice A: MacBook Pro 16\" -->\n            <label\n              :class=\"\n                cn(\n                  'relative flex cursor-pointer flex-col justify-between rounded-lg border p-4 transition-colors',\n                  selectedWorkstation === 'macbook'\n                    ? 'border-primary bg-primary/5 ring-primary shadow-xs ring-1'\n                    : 'border-border bg-card hover:bg-muted/40',\n                )\n              \"\n            >\n              <div class=\"flex flex-wrap items-start justify-between gap-3\">\n                <div class=\"flex min-w-0 items-start gap-3\">\n                  <RadioGroupItem id=\"ws-macbook\" value=\"macbook\" class=\"mt-1\" />\n                  <div class=\"min-w-0 space-y-1\">\n                    <div class=\"flex flex-wrap items-center gap-2\">\n                      <span class=\"text-foreground text-sm font-bold\">\n                        MacBook Pro 16\" (M3 Max · 64GB RAM · 1TB SSD)\n                      </span>\n                      <Badge variant=\"default\" class=\"text-xs\">Selected Spec</Badge>\n                    </div>\n                    <p class=\"text-muted-foreground text-xs leading-relaxed\">\n                      Apple M3 Max (16-core CPU, 40-core GPU) &bull; 64GB Unified Memory &bull; 1TB Fast NVMe &bull;\n                      Liquid Retina XDR (Space Black)\n                    </p>\n                    <div class=\"flex flex-wrap items-center gap-2 pt-1\">\n                      <Badge wrap variant=\"secondary\" class=\"font-mono text-xs\">\n                        <ShieldCheck class=\"text-success mr-1 size-3\" aria-hidden=\"true\" />\n                        AppleCare+ Enterprise (3-Year Full Accidental Damage)\n                      </Badge>\n                    </div>\n                  </div>\n                </div>\n                <div class=\"text-right\">\n                  <span class=\"text-foreground font-mono text-sm font-bold tabular-nums\">$3,499.00</span>\n                </div>\n              </div>\n            </label>\n\n            <!-- Choice B: ThinkPad P1 Gen 6 -->\n            <label\n              :class=\"\n                cn(\n                  'relative flex cursor-pointer flex-col justify-between rounded-lg border p-4 transition-colors',\n                  selectedWorkstation === 'thinkpad'\n                    ? 'border-primary bg-primary/5 ring-primary shadow-xs ring-1'\n                    : 'border-border bg-card hover:bg-muted/40',\n                )\n              \"\n            >\n              <div class=\"flex flex-wrap items-start justify-between gap-3\">\n                <div class=\"flex min-w-0 items-start gap-3\">\n                  <RadioGroupItem id=\"ws-thinkpad\" value=\"thinkpad\" class=\"mt-1\" />\n                  <div class=\"min-w-0 space-y-1\">\n                    <div class=\"flex flex-wrap items-center gap-2\">\n                      <span class=\"text-foreground text-sm font-bold\">\n                        ThinkPad P1 Gen 6 (Intel i9 · 64GB RAM · Ubuntu Linux)\n                      </span>\n                      <Badge variant=\"outline\" class=\"text-xs\">Linux Spec</Badge>\n                    </div>\n                    <p class=\"text-muted-foreground text-xs leading-relaxed\">\n                      Intel Core i9-13900H &bull; NVIDIA RTX 4080 (12GB) &bull; 64GB DDR5 &bull; 1TB NVMe &bull; 16\"\n                      WQXGA OLED &bull; Ubuntu 24.04 LTS\n                    </p>\n                    <div class=\"flex flex-wrap items-center gap-2 pt-1\">\n                      <Badge wrap variant=\"secondary\" class=\"font-mono text-xs\">\n                        <ShieldCheck class=\"text-success mr-1 size-3\" aria-hidden=\"true\" />\n                        Lenovo Premier Support (3-Year Next-Day Onsite)\n                      </Badge>\n                    </div>\n                  </div>\n                </div>\n                <div class=\"text-right\">\n                  <span class=\"text-foreground font-mono text-sm font-bold tabular-nums\">$2,850.00</span>\n                </div>\n              </div>\n            </label>\n          </RadioGroup>\n        </CardContent>\n\n        <CardFooter class=\"border-border/60 bg-muted/20 flex items-center justify-between border-t py-2.5 text-xs\">\n          <span class=\"text-muted-foreground\">Workstation Subtotal:</span>\n          <span class=\"text-foreground font-mono font-bold tabular-nums\">${{ workstationCost.toFixed(2) }}</span>\n        </CardFooter>\n      </Card>\n\n      <!-- Pillar 2: Display & Peripherals -->\n      <Card class=\"border shadow-xs\">\n        <CardHeader class=\"pb-3\">\n          <div class=\"flex items-center justify-between\">\n            <div class=\"flex items-center gap-2\">\n              <div class=\"bg-primary/10 text-primary rounded-lg p-2\">\n                <Monitor class=\"size-4\" aria-hidden=\"true\" />\n              </div>\n              <div>\n                <CardTitle class=\"text-base font-semibold\">2. Display &amp; Peripherals</CardTitle>\n                <CardDescription>High-resolution retina display and ergonomic peripherals</CardDescription>\n              </div>\n            </div>\n            <Badge variant=\"outline\" class=\"font-mono text-xs\">Pillar 02</Badge>\n          </div>\n        </CardHeader>\n\n        <CardContent class=\"space-y-3\">\n          <!-- Item 1: Studio Display -->\n          <div\n            :class=\"\n              cn(\n                'border-border flex flex-wrap items-start justify-between gap-3 rounded-lg border p-3.5 transition-colors',\n                includeDisplay ? 'bg-card' : 'bg-muted/30 opacity-70',\n              )\n            \"\n          >\n            <div class=\"flex items-start gap-3\">\n              <Checkbox id=\"periph-display\" v-model=\"includeDisplay\" class=\"mt-0.5\" />\n              <div class=\"space-y-0.5\">\n                <label for=\"periph-display\" class=\"text-foreground cursor-pointer text-sm font-semibold\">\n                  Studio Display 27\" 5K Retina\n                </label>\n                <p class=\"text-muted-foreground text-xs\">\n                  5120×2880 Retina &bull; 600 nits &bull; 12MP Center Stage Camera &bull; Studio Mics &bull;\n                  Tilt-adjustable Stand\n                </p>\n                <div class=\"pt-1\">\n                  <Badge variant=\"secondary\" class=\"text-xs\">Thunderbolt 3 Host Pass-Through</Badge>\n                </div>\n              </div>\n            </div>\n            <span class=\"text-foreground font-mono text-sm font-bold tabular-nums\">$1,499.00</span>\n          </div>\n\n          <!-- Item 2: Magic Keyboard & Trackpad -->\n          <div\n            :class=\"\n              cn(\n                'border-border flex flex-wrap items-start justify-between gap-3 rounded-lg border p-3.5 transition-colors',\n                includeInputBundle ? 'bg-card' : 'bg-muted/30 opacity-70',\n              )\n            \"\n          >\n            <div class=\"flex items-start gap-3\">\n              <Checkbox id=\"periph-inputs\" v-model=\"includeInputBundle\" class=\"mt-0.5\" />\n              <div class=\"space-y-0.5\">\n                <label for=\"periph-inputs\" class=\"text-foreground cursor-pointer text-sm font-semibold\">\n                  Magic Keyboard &amp; Trackpad Bundle\n                </label>\n                <p class=\"text-muted-foreground text-xs\">\n                  Touch ID Wireless Keyboard &bull; Force Touch Multi-Touch Glass Trackpad &bull; Space Black finish\n                </p>\n                <div class=\"pt-1\">\n                  <Badge variant=\"secondary\" class=\"text-xs\">USB-C Braided Woven Cable</Badge>\n                </div>\n              </div>\n            </div>\n            <span class=\"text-foreground font-mono text-sm font-bold tabular-nums\">$249.00</span>\n          </div>\n\n          <!-- Item 3: Ergonomic Desk Mat -->\n          <div\n            :class=\"\n              cn(\n                'border-border flex flex-wrap items-start justify-between gap-3 rounded-lg border p-3.5 transition-colors',\n                includeDeskMat ? 'bg-card' : 'bg-muted/30 opacity-70',\n              )\n            \"\n          >\n            <div class=\"flex items-start gap-3\">\n              <Checkbox id=\"periph-mat\" v-model=\"includeDeskMat\" class=\"mt-0.5\" />\n              <div class=\"space-y-0.5\">\n                <label for=\"periph-mat\" class=\"text-foreground cursor-pointer text-sm font-semibold\">\n                  Ergonomic Standing Desk Mat\n                </label>\n                <p class=\"text-muted-foreground text-xs\">\n                  24\" × 36\" Anti-fatigue high-density polyurethane core &bull; Contoured active standing terrain\n                </p>\n              </div>\n            </div>\n            <span class=\"text-foreground font-mono text-sm font-bold tabular-nums\">$49.00</span>\n          </div>\n        </CardContent>\n\n        <CardFooter class=\"border-border/60 bg-muted/20 flex items-center justify-between border-t py-2.5 text-xs\">\n          <span class=\"text-muted-foreground\">Peripherals Subtotal:</span>\n          <span class=\"text-foreground font-mono font-bold tabular-nums\">${{ peripheralsTotal.toFixed(2) }}</span>\n        </CardFooter>\n      </Card>\n\n      <!-- Pillar 3: Security & Authentication Hardware -->\n      <Card class=\"border shadow-xs\">\n        <CardHeader class=\"pb-3\">\n          <div class=\"flex items-center justify-between\">\n            <div class=\"flex items-center gap-2\">\n              <div class=\"bg-primary/10 text-primary rounded-lg p-2\">\n                <ShieldCheck class=\"size-4\" aria-hidden=\"true\" />\n              </div>\n              <div>\n                <CardTitle class=\"text-base font-semibold\">3. Security &amp; Authentication Hardware</CardTitle>\n                <CardDescription>Zero-trust physical tokens and cryptographic hardware keys</CardDescription>\n              </div>\n            </div>\n            <Badge variant=\"outline\" class=\"font-mono text-xs\">Pillar 03</Badge>\n          </div>\n        </CardHeader>\n\n        <CardContent class=\"space-y-3\">\n          <!-- Item 1: YubiKey 5C NFC -->\n          <div\n            :class=\"\n              cn(\n                'border-border flex flex-wrap items-start justify-between gap-3 rounded-lg border p-3.5 transition-colors',\n                includeYubikey ? 'bg-card' : 'bg-muted/30 opacity-70',\n              )\n            \"\n          >\n            <div class=\"flex items-start gap-3\">\n              <Checkbox id=\"sec-yubikey\" v-model=\"includeYubikey\" class=\"mt-0.5\" />\n              <div class=\"space-y-0.5\">\n                <div class=\"flex flex-wrap items-center gap-2\">\n                  <label for=\"sec-yubikey\" class=\"text-foreground cursor-pointer text-sm font-semibold\">\n                    YubiKey 5C NFC (2-Pack · Primary &amp; Backup)\n                  </label>\n                  <Badge variant=\"outline\" class=\"font-mono text-xs\">FIDO2 / WebAuthn</Badge>\n                </div>\n                <p class=\"text-muted-foreground text-xs\">\n                  Dual-key pair for primary keychain and secure home backup &bull; USB-C &bull; Contactless NFC &bull;\n                  IP68 water resistant\n                </p>\n                <p class=\"text-muted-foreground pt-0.5 font-mono text-xs\">\n                  Pre-enrolled Serials: <span class=\"text-foreground font-medium\">#YB-90281-A / #YB-90281-B</span>\n                </p>\n              </div>\n            </div>\n            <span class=\"text-foreground font-mono text-sm font-bold tabular-nums\">$75.00</span>\n          </div>\n\n          <!-- Item 2: Encrypted Hardware Token -->\n          <div\n            :class=\"\n              cn(\n                'border-border flex flex-wrap items-start justify-between gap-3 rounded-lg border p-3.5 transition-colors',\n                includeHardwareToken ? 'bg-card' : 'bg-muted/30 opacity-70',\n              )\n            \"\n          >\n            <div class=\"flex items-start gap-3\">\n              <Checkbox id=\"sec-token\" v-model=\"includeHardwareToken\" class=\"mt-0.5\" />\n              <div class=\"space-y-0.5\">\n                <div class=\"flex flex-wrap items-center gap-2\">\n                  <label for=\"sec-token\" class=\"text-foreground cursor-pointer text-sm font-semibold\">\n                    Encrypted Hardware Token\n                  </label>\n                  <Badge variant=\"outline\" class=\"font-mono text-xs\">FIPS 140-3 Level 3</Badge>\n                </div>\n                <p class=\"text-muted-foreground text-xs\">\n                  AES-256 hardware cryptographic security token with PIN pad &bull; Corporate Root CA Certificate\n                  pre-loaded\n                </p>\n                <p class=\"text-muted-foreground pt-0.5 font-mono text-xs\">\n                  Device Serial: <span class=\"text-foreground font-medium\">#ET-78392-X</span>\n                </p>\n              </div>\n            </div>\n            <span class=\"text-foreground font-mono text-sm font-bold tabular-nums\">$49.00</span>\n          </div>\n\n          <!-- Compliance Strip -->\n          <div\n            class=\"border-border/60 bg-muted/20 flex items-center justify-between rounded-lg border px-3 py-2 text-xs\"\n          >\n            <div class=\"text-muted-foreground flex items-center gap-1.5\">\n              <Lock class=\"text-success size-3.5\" aria-hidden=\"true\" />\n              <span>SOC 2 Type II &amp; FedRAMP High compliant hardware assignment</span>\n            </div>\n            <span class=\"text-success font-medium\">Enforced</span>\n          </div>\n        </CardContent>\n\n        <CardFooter class=\"border-border/60 bg-muted/20 flex items-center justify-between border-t py-2.5 text-xs\">\n          <span class=\"text-muted-foreground\">Security Hardware Subtotal:</span>\n          <span class=\"text-foreground font-mono font-bold tabular-nums\">${{ securityTotal.toFixed(2) }}</span>\n        </CardFooter>\n      </Card>\n\n      <!-- Pillar 4: Cloud Software & License Seats -->\n      <Card class=\"border shadow-xs\">\n        <CardHeader class=\"pb-3\">\n          <div class=\"flex items-center justify-between\">\n            <div class=\"flex items-center gap-2\">\n              <div class=\"bg-primary/10 text-primary rounded-lg p-2\">\n                <Layers class=\"size-4\" aria-hidden=\"true\" />\n              </div>\n              <div>\n                <CardTitle class=\"text-base font-semibold\">4. Cloud Software &amp; License Seats</CardTitle>\n                <CardDescription>6 assigned SaaS enterprise licenses auto-synced via Okta</CardDescription>\n              </div>\n            </div>\n            <Badge variant=\"outline\" class=\"font-mono text-xs\">Pillar 04</Badge>\n          </div>\n        </CardHeader>\n\n        <CardContent>\n          <div class=\"grid grid-cols-1 gap-2.5 sm:grid-cols-2\">\n            <div\n              v-for=\"license in softwareLicenses\"\n              :key=\"license.name\"\n              class=\"border-border bg-card flex flex-col justify-between rounded-lg border p-3 shadow-xs\"\n            >\n              <div class=\"space-y-1\">\n                <div class=\"flex items-start justify-between gap-1.5\">\n                  <span class=\"text-foreground text-xs font-bold\">{{ license.name }}</span>\n                  <div\n                    class=\"border-success/20 bg-success/10 text-success inline-flex items-center gap-1 rounded-full border px-1.5 py-0.5 text-xs font-medium\"\n                  >\n                    <Check class=\"size-3\" aria-hidden=\"true\" />\n                    <span>{{ license.status }}</span>\n                  </div>\n                </div>\n                <p class=\"text-muted-foreground text-xs leading-tight\">{{ license.tier }}</p>\n              </div>\n\n              <div class=\"border-border/60 mt-2 flex items-center justify-between border-t pt-1.5 text-xs\">\n                <span class=\"text-muted-foreground font-mono text-xs\">{{ license.seatId }}</span>\n                <Badge variant=\"secondary\" class=\"font-mono text-xs\">{{ license.sso }}</Badge>\n              </div>\n            </div>\n          </div>\n        </CardContent>\n\n        <CardFooter class=\"border-border/60 bg-muted/20 flex items-center justify-between border-t py-2.5 text-xs\">\n          <span class=\"text-muted-foreground\">Software Licensing Cost:</span>\n          <span class=\"text-foreground font-mono font-bold tabular-nums\">Enterprise Corp Pool ($0.00 Direct)</span>\n        </CardFooter>\n      </Card>\n    </div>\n\n    <!-- Shipping & Delivery Tracking Card -->\n    <Card class=\"border shadow-xs\">\n      <CardHeader class=\"pb-3\">\n        <div class=\"flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between\">\n          <div class=\"flex items-center gap-2\">\n            <div class=\"bg-primary/10 text-primary rounded-lg p-2\">\n              <Truck class=\"size-4\" aria-hidden=\"true\" />\n            </div>\n            <div>\n              <CardTitle class=\"text-base font-semibold\">Shipping &amp; Delivery Tracking</CardTitle>\n              <CardDescription>Direct-to-home courier transit with signature required on delivery</CardDescription>\n            </div>\n          </div>\n          <div class=\"flex items-center gap-2\">\n            <Badge variant=\"outline\" class=\"font-mono text-xs\">Carrier: FedEx Priority</Badge>\n            <button\n              type=\"button\"\n              class=\"hover:bg-muted focus-visible:ring-ring border-border bg-muted/40 text-foreground inline-flex min-h-6 items-center gap-1.5 rounded border px-2 py-1 font-mono text-xs font-semibold transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n              title=\"Click to copy tracking number\"\n              @click=\"copyTrackingNumber\"\n            >\n              #TRK-8492019\n              <Check v-if=\"copiedTracking\" class=\"text-success size-3\" aria-hidden=\"true\" />\n              <Copy v-else class=\"text-muted-foreground size-3\" aria-hidden=\"true\" />\n            </button>\n          </div>\n        </div>\n      </CardHeader>\n\n      <CardContent class=\"space-y-6\">\n        <!-- Address & Courier Info Banner -->\n        <div class=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n          <div class=\"border-border bg-muted/20 space-y-1 rounded-lg border p-3.5\">\n            <span class=\"text-muted-foreground font-mono text-xs font-semibold tracking-wider uppercase\">\n              Shipment Recipient\n            </span>\n            <p class=\"text-foreground text-sm font-bold\">Elena Rostova</p>\n            <p class=\"text-muted-foreground text-xs\">Senior Staff Engineer &bull; Distributed Systems</p>\n            <p class=\"text-muted-foreground text-xs\">elena.rostova@acme.corp</p>\n          </div>\n\n          <div class=\"border-border bg-muted/20 space-y-1 rounded-lg border p-3.5\">\n            <span class=\"text-muted-foreground font-mono text-xs font-semibold tracking-wider uppercase\">\n              Destination Address\n            </span>\n            <p class=\"text-foreground text-sm font-bold\">4820 Grand Avenue, Apt 14B</p>\n            <p class=\"text-muted-foreground text-xs\">Seattle, WA 98101-2294</p>\n            <p class=\"text-muted-foreground text-xs\">Direct In-Person Signature Required</p>\n          </div>\n\n          <div class=\"border-border bg-muted/20 space-y-1 rounded-lg border p-3.5 sm:col-span-2 lg:col-span-1\">\n            <span class=\"text-muted-foreground font-mono text-xs font-semibold tracking-wider uppercase\">\n              Estimated Delivery\n            </span>\n            <p class=\"text-foreground text-sm font-bold\">Thursday, Aug 28, 2026</p>\n            <p class=\"text-success text-xs font-medium\">Estimated by 10:30 AM (Morning Delivery)</p>\n            <p class=\"text-muted-foreground text-xs\">FedEx Express Priority Overnight</p>\n          </div>\n        </div>\n\n        <!-- 5-Step Progress Stepper -->\n        <div class=\"space-y-2 pt-2\">\n          <span class=\"text-muted-foreground font-mono text-xs font-semibold tracking-wider uppercase\">\n            Logistics Timeline Status\n          </span>\n          <div class=\"grid grid-cols-1 gap-3 sm:grid-cols-5\">\n            <div\n              v-for=\"(step, idx) in trackingSteps\"\n              :key=\"step.title\"\n              :class=\"\n                cn(\n                  'border-border flex flex-col justify-between rounded-lg border p-3 transition-colors',\n                  step.current\n                    ? 'border-success/40 bg-success/10 ring-success/30 ring-1'\n                    : step.completed\n                      ? 'bg-card'\n                      : 'bg-muted/20 opacity-60',\n                )\n              \"\n            >\n              <div class=\"flex items-center justify-between gap-2\">\n                <span class=\"text-muted-foreground font-mono text-xs\">0{{ idx + 1 }}</span>\n                <CheckCircle2 v-if=\"step.completed && !step.current\" class=\"text-success size-4\" aria-hidden=\"true\" />\n                <span v-else-if=\"step.current\" class=\"relative flex size-2\">\n                  <span class=\"bg-success absolute inline-flex h-full w-full rounded-full opacity-75\" />\n                  <span class=\"bg-success relative inline-flex size-2 rounded-full\" />\n                </span>\n                <Circle v-else class=\"text-muted-foreground/50 size-3.5\" aria-hidden=\"true\" />\n              </div>\n\n              <div class=\"mt-2 space-y-0.5\">\n                <p\n                  :class=\"\n                    cn(\n                      'text-xs font-bold',\n                      step.current\n                        ? 'text-success font-bold'\n                        : step.completed\n                          ? 'text-foreground'\n                          : 'text-muted-foreground',\n                    )\n                  \"\n                >\n                  {{ step.title }}\n                </p>\n                <p class=\"text-muted-foreground font-mono text-xs\">{{ step.date }}</p>\n                <p class=\"text-muted-foreground text-xs\">{{ step.time }}</p>\n              </div>\n            </div>\n          </div>\n        </div>\n      </CardContent>\n    </Card>\n\n    <!-- Custom Hardware Order Modal Dialog -->\n    <div\n      v-if=\"showCustomOrderModal\"\n      class=\"fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4 backdrop-blur-xs\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-labelledby=\"custom-hardware-title\"\n    >\n      <div\n        class=\"border-border bg-card animate-in fade-in zoom-in-95 w-full max-w-lg space-y-4 rounded-xl border p-6 shadow-xl\"\n      >\n        <div class=\"flex items-center justify-between\">\n          <div class=\"flex items-center gap-2\">\n            <div class=\"bg-primary/10 text-primary rounded-lg p-2\">\n              <Laptop class=\"size-4\" aria-hidden=\"true\" />\n            </div>\n            <div>\n              <h2 id=\"custom-hardware-title\" class=\"text-foreground text-base font-bold\">Order Custom Hardware</h2>\n              <p class=\"text-muted-foreground text-xs\">Request specialized hardware or accessories for Elena Rostova</p>\n            </div>\n          </div>\n          <Button variant=\"ghost\" size=\"icon\" class=\"size-8\" aria-label=\"Close dialog\" @click=\"handleCloseCustomOrder\">\n            <X class=\"size-4\" aria-hidden=\"true\" />\n          </Button>\n        </div>\n\n        <Separator />\n\n        <div v-if=\"!customRequestSubmitted\" class=\"space-y-4\">\n          <div class=\"space-y-1.5\">\n            <label class=\"text-foreground text-xs font-semibold\">Equipment / Item Name</label>\n            <input\n              v-model=\"customItemName\"\n              type=\"text\"\n              placeholder=\"e.g. Ergonomic Split Mechanical Keyboard, 4K Webcam, eGPU\"\n              class=\"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          </div>\n\n          <div class=\"space-y-1.5\">\n            <label class=\"text-foreground text-xs font-semibold\">Business Justification</label>\n            <textarea\n              v-model=\"customItemJustification\"\n              rows=\"3\"\n              placeholder=\"Provide engineering justification or project requirements...\"\n              class=\"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          </div>\n\n          <div class=\"border-border bg-muted/20 text-muted-foreground rounded-lg border p-3 text-xs\">\n            <p>\n              Custom requests are automatically routed to Engineering Management &amp; IT Procurement for budget\n              sign-off.\n            </p>\n          </div>\n\n          <div class=\"flex items-center justify-end gap-2 pt-2\">\n            <Button\n              aria-label=\"Close dialog\"\n              variant=\"outline\"\n              size=\"sm\"\n              class=\"text-xs\"\n              @click=\"handleCloseCustomOrder\"\n              >Cancel</Button\n            >\n            <Button size=\"sm\" class=\"gap-1.5 text-xs\" :disabled=\"!customItemName.trim()\" @click=\"submitCustomRequest\">\n              <Send class=\"size-3.5\" aria-hidden=\"true\" />\n              <span>Submit Request</span>\n            </Button>\n          </div>\n        </div>\n\n        <div v-else class=\"space-y-3 py-4 text-center\">\n          <div class=\"bg-success/10 text-success mx-auto flex size-12 items-center justify-center rounded-full\">\n            <CheckCircle2 class=\"size-6\" aria-hidden=\"true\" />\n          </div>\n          <h3 class=\"text-foreground text-sm font-bold\">Custom Hardware Request Submitted</h3>\n          <p class=\"text-muted-foreground text-xs\">\n            Request for <strong class=\"text-foreground\">{{ customItemName }}</strong> has been forwarded to IT\n            Procurement.\n          </p>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/OnboardingEquipmentProvisioning.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/badge.json",
    "https://uipkge.dev/r/vue/button.json",
    "https://uipkge.dev/r/vue/card.json",
    "https://uipkge.dev/r/vue/checkbox.json",
    "https://uipkge.dev/r/vue/radio-group.json",
    "https://uipkge.dev/r/vue/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"
  ]
}