{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "onboarding-equipment-provisioning", "title": "Onboarding Equipment Provisioning", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/onboarding-equipment-provisioning/onboarding-equipment-provisioning.component.ts", "content": "// Enterprise IT hardware, peripherals, and software license provisioning portal for\n// new hires: workstation selection, display/peripheral bundles, security keys, SaaS\n// seats, courier tracking, and a custom hardware order dialog. Port of the Vue/React\n// block 1:1.\nimport { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, computed, signal } from '@angular/core'\nimport {\n Boxes,\n Calendar,\n Check,\n CheckCircle2,\n Circle,\n Copy,\n DollarSign,\n Download,\n Laptop,\n Layers,\n Lock,\n LucideAngularModule,\n Monitor,\n Plus,\n Send,\n ShieldCheck,\n Truck,\n X,\n} from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent } 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 { UiCheckboxComponent } from '@/ui/checkbox/checkbox.component'\nimport { UiRadioGroupComponent, UiRadioGroupItemComponent } from '@/ui/radio-group/radio-group.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\n\nexport type WorkstationChoice = 'macbook' | 'thinkpad'\n\nconst WORKSTATION_PRICES: Record = {\n macbook: 3499,\n thinkpad: 2850,\n}\n\nexport const 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\nexport const trackingSteps = [\n { title: 'Order Approved', date: 'Aug 24, 2026', time: '09:00 AM', completed: true, current: false },\n { title: 'IT Staged & Imaged', date: 'Aug 25, 2026', time: '02:30 PM', completed: true, current: false },\n { title: 'Shipped via FedEx', date: 'Aug 26, 2026', time: '06:15 PM', completed: true, current: true },\n { title: 'Out for Delivery', date: 'Aug 28, 2026', time: 'Est. 08:00 AM', completed: false, current: false },\n { title: 'Delivered to Home', date: 'Aug 28, 2026', time: 'Est. 10:30 AM', completed: false, current: false },\n]\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-onboarding-equipment-provisioning, [ui-onboarding-equipment-provisioning]',\n standalone: true,\n // The block renders its own root
(and the dialog portals visually): keep the host out of layout.\n host: { '[attr.class]': '\"contents\"' },\n imports: [\n LucideAngularModule,\n UiBadgeComponent,\n UiButtonComponent,\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardFooterComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n UiCheckboxComponent,\n UiRadioGroupComponent,\n UiRadioGroupItemComponent,\n UiSeparatorComponent,\n ],\n template: `\n
\n \n
\n
\n \n
\n
\n \n \n IT Asset Provisioning\n \n \n \n \n \n \n Hardware Assigned · Shipped via FedEx\n
\n
\n\n

\n New Hire Hardware & IT Provisioning\n

\n\n \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 @if (copiedEmpId()) {\n \n } @else {\n \n }\n \n
\n
\n\n \n
\n \n \n Export Manifest\n \n\n \n
\n
\n\n \n \n
\n
\n
\n \n Total IT Investment\n
\n

\n ${{ formatTotal(totalInvestment()) }}\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 \n
\n \n
\n
\n
\n
\n
\n \n
\n
\n

1. Primary Workstation

\n

Select standard issue macOS or Linux developer laptop

\n
\n
\n Pillar 01\n
\n
\n\n
\n \n \n \n\n \n \n \n
\n\n \n Workstation Subtotal:\n ${{ workstationCost().toFixed(2) }}\n
\n
\n\n \n
\n
\n
\n
\n
\n \n
\n
\n

2. Display & Peripherals

\n

High-resolution retina display and ergonomic peripherals

\n
\n
\n Pillar 02\n
\n
\n\n
\n
\n
\n \n
\n \n

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

\n
\n Thunderbolt 3 Host Pass-Through\n
\n
\n
\n $1,499.00\n
\n\n
\n
\n \n
\n \n

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

\n
\n USB-C Braided Woven Cable\n
\n
\n
\n $249.00\n
\n\n
\n
\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 \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 Pillar 03\n
\n
\n\n
\n
\n
\n \n
\n
\n \n FIDO2 / WebAuthn\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
\n
\n \n
\n
\n \n FIPS 140-3 Level 3\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 \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 \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 Pillar 04\n
\n
\n\n
\n
\n @for (license of licenses; track license.name) {\n
\n
\n
\n {{ license.name }}\n \n \n {{ license.status }}\n
\n
\n

{{ license.tier }}

\n
\n\n
\n {{ license.seatId }}\n {{ license.sso }}\n
\n
\n }\n
\n
\n\n \n Software Licensing Cost:\n Enterprise Corp Pool ($0.00 Direct)\n \n \n \n\n \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 Carrier: FedEx Priority\n \n #TRK-8492019\n @if (copiedTracking()) {\n \n } @else {\n \n }\n \n
\n
\n
\n\n
\n \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 \n
\n \n Logistics Timeline Status\n \n
\n @for (step of steps; track step.title; let idx = $index) {\n
\n
\n 0{{ idx + 1 }}\n @if (step.completed && !step.current) {\n \n } @else if (step.current) {\n \n \n \n \n } @else {\n \n }\n
\n\n
\n

{{ step.title }}

\n

{{ step.date }}

\n

{{ step.time }}

\n
\n
\n }\n
\n
\n
\n
\n\n \n @if (showCustomOrderModal()) {\n \n \n
\n
\n
\n \n
\n
\n

Order Custom Hardware

\n

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

\n
\n
\n \n \n \n
\n\n \n\n @if (!customRequestSubmitted()) {\n
\n
\n \n \n
\n\n
\n \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 } @else {\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 class UiOnboardingEquipmentProvisioningComponent {\n protected readonly Boxes = Boxes\n protected readonly Calendar = Calendar\n protected readonly Check = Check\n protected readonly CheckCircle2 = CheckCircle2\n protected readonly Circle = Circle\n protected readonly Copy = Copy\n protected readonly DollarSign = DollarSign\n protected readonly Download = Download\n protected readonly Laptop = Laptop\n protected readonly Layers = Layers\n protected readonly Lock = Lock\n protected readonly Monitor = Monitor\n protected readonly Plus = Plus\n protected readonly Send = Send\n protected readonly ShieldCheck = ShieldCheck\n protected readonly Truck = Truck\n protected readonly X = X\n\n protected readonly licenses = softwareLicenses\n protected readonly steps = trackingSteps\n\n @Input() set initialWorkstation(v: WorkstationChoice) {\n this.selectedWorkstation.set(v ?? 'macbook')\n }\n @Input('class') className?: string\n /** Fired when the custom-hardware dialog opens (React `onOrderCustom`, Vue `order-custom`). */\n @Output() readonly orderCustom = new EventEmitter()\n /** Fired when Export Manifest is clicked (React `onExportManifest`, Vue `export-manifest`). */\n @Output() readonly exportManifest = new EventEmitter()\n\n readonly selectedWorkstation = signal('macbook')\n readonly includeDisplay = signal(true)\n readonly includeInputBundle = signal(true)\n readonly includeDeskMat = signal(true)\n readonly includeYubikey = signal(true)\n readonly includeHardwareToken = signal(true)\n\n readonly copiedTracking = signal(false)\n readonly copiedEmpId = signal(false)\n readonly showCustomOrderModal = signal(false)\n readonly customRequestSubmitted = signal(false)\n readonly customItemName = signal('')\n readonly customItemJustification = signal('')\n\n readonly workstationCost = computed(() => WORKSTATION_PRICES[this.selectedWorkstation()])\n readonly displayCost = computed(() => (this.includeDisplay() ? 1499 : 0))\n readonly inputBundleCost = computed(() => (this.includeInputBundle() ? 249 : 0))\n readonly deskMatCost = computed(() => (this.includeDeskMat() ? 49 : 0))\n readonly yubikeyCost = computed(() => (this.includeYubikey() ? 75 : 0))\n readonly hardwareTokenCost = computed(() => (this.includeHardwareToken() ? 49 : 0))\n\n readonly peripheralsTotal = computed(() => this.displayCost() + this.inputBundleCost() + this.deskMatCost())\n readonly securityTotal = computed(() => this.yubikeyCost() + this.hardwareTokenCost())\n readonly totalInvestment = computed(() => this.workstationCost() + this.peripheralsTotal() + this.securityTotal())\n\n get rootClass(): string {\n return cn('w-full space-y-6', this.className)\n }\n\n workstationLabelClass(choice: WorkstationChoice): string {\n return cn(\n 'relative flex cursor-pointer flex-col justify-between rounded-lg border p-4 transition-colors',\n this.selectedWorkstation() === choice\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 peripheralRowClass(included: boolean): string {\n return cn(\n 'border-border flex flex-wrap items-start justify-between gap-3 rounded-lg border p-3.5 transition-colors',\n included ? 'bg-card' : 'bg-muted/30 opacity-70',\n )\n }\n\n stepCardClass(step: { completed: boolean; current: boolean }): string {\n return 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 stepTitleClass(step: { completed: boolean; current: boolean }): string {\n return cn(\n 'text-xs font-bold',\n step.current ? 'text-success font-bold' : step.completed ? 'text-foreground' : 'text-muted-foreground',\n )\n }\n\n formatTotal(val: number): string {\n return val.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })\n }\n\n copyTrackingNumber(): void {\n const nav = typeof navigator !== 'undefined' ? navigator : undefined\n if (nav?.clipboard) {\n void nav.clipboard.writeText('TRK-8492019')\n this.copiedTracking.set(true)\n setTimeout(() => this.copiedTracking.set(false), 2000)\n }\n }\n\n copyEmployeeId(): void {\n const nav = typeof navigator !== 'undefined' ? navigator : undefined\n if (nav?.clipboard) {\n void nav.clipboard.writeText('EMP-88291')\n this.copiedEmpId.set(true)\n setTimeout(() => this.copiedEmpId.set(false), 2000)\n }\n }\n\n handleExportManifest(): void {\n this.exportManifest.emit()\n }\n\n handleOpenCustomOrder(): void {\n this.showCustomOrderModal.set(true)\n this.orderCustom.emit()\n }\n\n handleCloseCustomOrder(): void {\n this.showCustomOrderModal.set(false)\n this.customRequestSubmitted.set(false)\n this.customItemName.set('')\n this.customItemJustification.set('')\n }\n\n submitCustomRequest(): void {\n if (this.customItemName().trim()) {\n this.customRequestSubmitted.set(true)\n setTimeout(() => this.handleCloseCustomOrder(), 2000)\n }\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/onboarding-equipment-provisioning/onboarding-equipment-provisioning.component.ts" }, { "path": "packages/registry-angular/blocks/onboarding-equipment-provisioning/index.ts", "content": "export {\n UiOnboardingEquipmentProvisioningComponent,\n type WorkstationChoice,\n softwareLicenses,\n trackingSteps,\n} from './onboarding-equipment-provisioning.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/onboarding-equipment-provisioning/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/badge.json", "https://uipkge.dev/r/angular/button.json", "https://uipkge.dev/r/angular/card.json", "https://uipkge.dev/r/angular/checkbox.json", "https://uipkge.dev/r/angular/radio-group.json", "https://uipkge.dev/r/angular/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" ] }