{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "maintenance-request-ticket", "title": "Maintenance Request Ticket", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/maintenance-request-ticket/maintenance-request-ticket.component.ts", "content": "// Resident maintenance request ticket: category grid, urgency radios with an\n// emergency SLA banner, unit location select, description with quick snippets,\n// entry-permission radios, photo/video dropzone, draft + submit flow, and an\n// emergency-hotline / SLA / building-operations sidebar. Port of the Vue block 1:1.\nimport { ChangeDetectionStrategy, Component, DestroyRef, Input, computed, inject, signal } from '@angular/core'\nimport {\n AlertCircle,\n Bug,\n Building2,\n Check,\n CheckCircle2,\n ChevronDown,\n Clock,\n Droplets,\n FileImage,\n FileVideo,\n Flame,\n KeyRound,\n LucideAngularModule,\n PhoneCall,\n Plus,\n RefreshCw,\n ShieldAlert,\n ShieldCheck,\n Trash2,\n UploadCloud,\n UserCheck,\n Wrench,\n Zap,\n type LucideIconData,\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 { UiRadioGroupComponent, UiRadioGroupItemComponent } from '@/ui/radio-group/radio-group.component'\nimport {\n UiSelectComponent,\n UiSelectContentComponent,\n UiSelectGroupComponent,\n UiSelectItemComponent,\n UiSelectLabelComponent,\n UiSelectTriggerComponent,\n UiSelectValueComponent,\n} from '@/ui/select/select.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\nimport { UiTextareaComponent } from '@/ui/textarea/textarea.component'\n\nexport interface AttachedFile {\n id: string\n name: string\n size: string\n type: 'image' | 'video'\n uploadedAt: string\n}\n\nexport type MaintenanceUrgency = 'routine' | 'standard' | 'emergency'\nexport type EntryPermission = 'granted' | 'call_first'\n\ninterface IssueCategory {\n id: string\n label: string\n description: string\n icon: LucideIconData\n badgeColor: string\n}\n\nconst categories: IssueCategory[] = [\n {\n id: 'plumbing',\n label: 'Plumbing & Leaks',\n description: 'Faucets, pipes, toilets, drains',\n icon: Droplets,\n badgeColor: 'text-info bg-info/10 text-info',\n },\n {\n id: 'electrical',\n label: 'Electrical & Lighting',\n description: 'Outlets, switches, fixtures, breakers',\n icon: Zap,\n badgeColor: 'text-warning bg-warning/10 text-warning',\n },\n {\n id: 'hvac',\n label: 'HVAC & AC Heating',\n description: 'AC, thermostat, heater, airflow',\n icon: Flame,\n badgeColor: 'text-chart-2 bg-chart-2/10',\n },\n {\n id: 'appliances',\n label: 'Appliances',\n description: 'Dishwasher, oven, disposal, fridge',\n icon: Wrench,\n badgeColor: 'text-chart-1 bg-chart-1/10',\n },\n {\n id: 'locks',\n label: 'Doors & Locks',\n description: 'Keys, latches, deadbolts, windows',\n icon: KeyRound,\n badgeColor: 'text-success bg-success/10 text-success',\n },\n {\n id: 'pest',\n label: 'Pest Control',\n description: 'Insects, rodents, preventative traps',\n icon: Bug,\n badgeColor: 'text-destructive bg-destructive/10 text-destructive',\n },\n]\n\ninterface UrgencyOption {\n value: MaintenanceUrgency\n label: string\n badge: string\n badgeVariant: 'outline' | 'secondary' | 'destructive'\n description: string\n}\n\nconst urgencyOptions: UrgencyOption[] = [\n {\n value: 'routine',\n label: 'Low / Routine',\n badge: '3–5 Business Days',\n badgeVariant: 'outline',\n description: 'Non-urgent preventative maintenance or routine hardware adjustments.',\n },\n {\n value: 'standard',\n label: 'Medium / Standard 48h',\n badge: '24–48h SLA',\n badgeVariant: 'secondary',\n description: 'Standard repair with moderate impact on daily convenience or appliance usage.',\n },\n {\n value: 'emergency',\n label: 'High / Emergency 2h SLA',\n badge: 'Emergency < 2h',\n badgeVariant: 'destructive',\n description: 'Immediate hazard to property or habitability. Triggers 24/7 on-call dispatch.',\n },\n]\n\nconst locationOptions: { value: string; label: string }[] = [\n { value: 'kitchen', label: 'Kitchen' },\n { value: 'master_bathroom', label: 'Master Bathroom' },\n { value: 'guest_bathroom', label: 'Guest Bathroom' },\n { value: 'living_room', label: 'Living Room' },\n { value: 'balcony', label: 'Balcony / Patio' },\n { value: 'master_bedroom', label: 'Master Bedroom' },\n { value: 'guest_bedroom', label: 'Guest Bedroom' },\n { value: 'hallway', label: 'Hallway / Entryway' },\n { value: 'laundry', label: 'Laundry & Utility Closet' },\n]\n\nconst quickSnippets: string[] = [\n 'Motor humming but not spinning',\n 'Water leaking under sink',\n 'Reset button tripped',\n 'Slow draining',\n]\n\nconst defaultDescription =\n 'Kitchen sink garbage disposal is jammed and leaking slightly under the cabinet when water runs. Motor makes a low humming sound.'\n\nconst defaultFiles: AttachedFile[] = [\n {\n id: 'f-1',\n name: 'kitchen-sink-leak-pipe.jpg',\n size: '2.4 MB',\n type: 'image',\n uploadedAt: 'Today, 10:14 AM',\n },\n {\n id: 'f-2',\n name: 'disposal-motor-hum.mp4',\n size: '8.1 MB',\n type: 'video',\n uploadedAt: 'Today, 10:16 AM',\n },\n]\n\nconst maxChars = 500\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-maintenance-request-ticket, [ui-maintenance-request-ticket]',\n standalone: true,\n // The block renders its own root
: 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 UiRadioGroupComponent,\n UiRadioGroupItemComponent,\n UiSelectComponent,\n UiSelectContentComponent,\n UiSelectGroupComponent,\n UiSelectItemComponent,\n UiSelectLabelComponent,\n UiSelectTriggerComponent,\n UiSelectValueComponent,\n UiSeparatorComponent,\n UiTextareaComponent,\n ],\n template: `\n
\n \n
\n
\n
\n
\n
\n

Submit Maintenance Request

\n \n \n Unit 4B · Pacific Heights\n \n
\n

\n Resident: Elena Rostova · Facility maintenance &\n repair portal\n

\n
\n\n
\n \n \n \n \n \n 1 In Progress\n \n
\n \n {{ showOpenRequests() ? 'Hide Open Requests' : 'View Open Requests' }}\n \n \n
\n
\n\n \n @if (showOpenRequests()) {\n
\n
\n
\n \n \n Currently Active Work Orders (1)\n \n
\n Technician Assigned\n
\n \n
\n
\n #MNT-8821 · HVAC Filter & Thermostat Inspection\n Living Room\n
\n

\n Assigned to: Dave Miller (Lead HVAC Specialist) ·\n Scheduled window: Today 2:00 PM – 4:00 PM\n

\n
\n
\n In Progress\n
\n
\n
\n }\n
\n
\n\n \n
\n \n
\n @if (isSubmitted()) {\n \n
\n
\n
\n \n
\n
\n

Maintenance Request Submitted!

\n

\n Your request #{{ generatedTicketId() }}\n has been logged and dispatched to the Pacific Heights Facility Operations team.\n

\n
\n
\n
\n Ticket ID:\n #{{ generatedTicketId() }}\n
\n
\n Unit:\n Unit 4B (Pacific Heights)\n
\n
\n Category:\n {{ category() }}\n
\n
\n Urgency Tier:\n {{ urgency() }} SLA\n
\n
\n Entry Authorization:\n \n {{ permission() === 'granted' ? 'Permission Granted (Master Key)' : 'Call Resident First' }}\n \n
\n
\n
\n \n
\n
\n
\n } @else {\n \n
\n
\n

Work Order Details

\n

Complete the fields below to schedule a maintenance technician visit.

\n
\n\n
\n \n
\n
\n \n Select one primary discipline\n
\n\n
\n @for (cat of allCategories; track cat.id) {\n \n
\n
\n \n
\n
\n @if (category() === cat.id) {\n \n }\n
\n
\n
\n

{{ cat.label }}

\n

{{ cat.description }}

\n
\n \n }\n
\n
\n\n \n\n \n
\n
\n \n Determines facility response window\n
\n\n \n @if (urgency() === 'emergency') {\n \n \n
\n

High / Emergency SLA Activated

\n

\n Emergency requests notify on-call building engineers immediately. For active gas leaks or\n major structural flooding, call the 24/7 hotline directly at\n (415) 555-0192.\n

\n
\n
\n }\n\n \n @for (opt of urgencyOpts; track opt.value) {\n
\n
\n
\n \n \n {{ opt.label }}\n \n
\n
\n
\n \n {{ opt.badge }}\n \n

\n {{ opt.description }}\n

\n
\n
\n }\n \n
\n\n \n\n \n
\n
\n \n Specific area or room\n
\n\n \n \n \n \n Unit 4B Interior Areas\n @for (loc of locationOpts; track loc.value) {\n {{ loc.label }}\n }\n \n \n \n
\n\n \n\n \n
\n
\n \n {{ descriptionLength() }} / {{ charLimit }} \n
\n\n \n\n \n
\n

Quick details:

\n
\n @for (chip of snippets; track chip) {\n \n \n {{ chip }}\n \n }\n
\n
\n
\n\n \n\n \n
\n
\n \n Access protocol\n
\n\n \n
\n
\n \n
\n \n Permission Granted to Enter\n \n

\n Authorized staff may enter with master key if resident is not home. Work order sign-off\n notice will be left in unit.\n

\n
\n
\n
\n \n Faster dispatch window\n
\n
\n\n
\n
\n \n
\n \n Call Resident Before Entering\n \n

\n Technician must call (415) 890-4412 30 mins\n prior to arrival. Adult must be present.\n

\n
\n
\n
\n \n Requires resident appointment\n
\n
\n \n
\n\n \n\n \n
\n
\n \n {{ attachedFiles().length }} Attached\n
\n\n \n \n \n \n
\n
\n

\n Click to upload or drag and drop\n media files\n

\n

\n PNG, JPG, HEIC, MP4 up to 25MB (helps technician arrive with correct parts)\n

\n
\n
\n\n \n @if (attachedFiles().length > 0) {\n
\n @for (f of attachedFiles(); track f.id) {\n \n
\n \n @if (f.type === 'video') {\n \n } @else {\n \n }\n
\n
\n

{{ f.name }}

\n

{{ f.size }} · {{ f.uploadedAt }}

\n
\n
\n
\n \n Attached\n \n \n \n Remove file\n \n
\n
\n }\n
\n }\n \n \n\n \n
\n \n {{ draftSaved() ? 'Draft Saved!' : 'Save as Draft' }}\n \n @if (draftSaved()) {\n \n \n Saved locally\n \n }\n
\n\n \n @if (!isSubmitting()) {\n \n } @else {\n \n }\n {{ isSubmitting() ? 'Dispatching Work Order...' : 'Submit Maintenance Request' }}\n \n \n \n }\n \n\n \n
\n \n
\n
\n
\n \n

24/7 Emergency Hotline

\n
\n

\n For urgent situations threatening life safety, gas leaks, or active flooding.\n

\n
\n
\n
\n

Immediate Dispatch Phone

\n

(415) 555-0192

\n

Facility Operations On-Call Desk

\n
\n\n
\n

What qualifies as an emergency:

\n
    \n
  • \n •\n Active uncontrolled water leaks or burst pipes\n
    • \n
  • \n •\n Smell of natural gas or carbon monoxide alert\n
    • \n
  • \n •\n Complete electrical power loss in unit\n
    • \n
  • \n •\n Inoperable exterior lock or door security issue\n
    • \n
  • \n •\n Total loss of heating when temp is below 55°F\n
    • \n
\n
\n\n \n \n Call Emergency Dispatch\n \n
\n
\n\n \n
\n
\n
\n \n

Service Level Agreement (SLA)

\n
\n

Response benchmarks for Pacific Heights property maintenance.

\n
\n
\n
\n
\n
\n \n Emergency Priority\n
\n < 2 Hours\n
\n

\n 24/7/365 immediate dispatch with on-call technician response.\n

\n
\n\n
\n
\n
\n \n Standard Priority\n
\n 24–48 Hours\n
\n

\n Standard repairs scheduled Mon–Fri during normal operational hours.\n

\n
\n\n
\n
\n
\n \n Routine / Preventative\n
\n 3–5 Days\n
\n

\n Filter changes, caulking touch-ups, and scheduled inspections.\n

\n
\n\n
\n \n

\n Status notifications are automatically sent via SMS and resident email as work orders progress.\n

\n
\n
\n
\n\n \n
\n
\n
\n \n

Building Operations

\n
\n
\n
\n
\n Building Super:\n Marcus Vance (Office #102)\n
\n
\n Service Window:\n Mon – Sat · 8:00 AM – 6:00 PM\n
\n
\n Quiet Hours:\n 10:00 PM – 8:00 AM\n
\n
\n Resident Portal ID:\n PH-RES-4B\n
\n
\n
\n
\n \n \n `,\n})\nexport class UiMaintenanceRequestTicketComponent {\n protected readonly AlertCircle = AlertCircle\n protected readonly Check = Check\n protected readonly CheckCircle2 = CheckCircle2\n protected readonly ChevronDown = ChevronDown\n protected readonly Clock = Clock\n protected readonly FileImage = FileImage\n protected readonly FileVideo = FileVideo\n protected readonly PhoneCall = PhoneCall\n protected readonly Plus = Plus\n protected readonly RefreshCw = RefreshCw\n protected readonly ShieldAlert = ShieldAlert\n protected readonly ShieldCheck = ShieldCheck\n protected readonly Building2 = Building2\n protected readonly Trash2 = Trash2\n protected readonly UploadCloud = UploadCloud\n protected readonly UserCheck = UserCheck\n protected readonly Wrench = Wrench\n\n protected readonly allCategories = categories\n protected readonly urgencyOpts = urgencyOptions\n protected readonly locationOpts = locationOptions\n protected readonly snippets = quickSnippets\n protected readonly charLimit = maxChars\n\n @Input() set initialCategory(v: string) {\n if (v) this.category.set(v)\n }\n @Input() set initialUrgency(v: MaintenanceUrgency) {\n if (v) this.urgency.set(v)\n }\n @Input() set initialLocation(v: string) {\n if (v) this.location.set(v)\n }\n @Input() set initialDescription(v: string) {\n if (v !== undefined && v !== null) this.description.set(v)\n }\n @Input() set initialPermission(v: EntryPermission) {\n if (v) this.permission.set(v)\n }\n @Input() set initialFiles(v: AttachedFile[] | undefined) {\n this.attachedFiles.set((v ?? defaultFiles).map((f) => ({ ...f })))\n }\n @Input('class') className?: string\n\n readonly category = signal('appliances')\n readonly urgency = signal('standard')\n readonly location = signal('kitchen')\n readonly description = signal(defaultDescription)\n readonly permission = signal('granted')\n readonly attachedFiles = signal(defaultFiles.map((f) => ({ ...f })))\n readonly isDragging = signal(false)\n readonly showOpenRequests = signal(false)\n readonly isSubmitting = signal(false)\n readonly isSubmitted = signal(false)\n readonly draftSaved = signal(false)\n readonly generatedTicketId = signal('MNT-9042')\n\n private draftTimer: ReturnType | undefined\n private submitTimer: ReturnType | undefined\n\n constructor() {\n inject(DestroyRef).onDestroy(() => {\n clearTimeout(this.draftTimer)\n clearTimeout(this.submitTimer)\n })\n }\n\n readonly descriptionLength = computed(() => this.description().length)\n\n get rootClass(): string {\n return cn('w-full space-y-6', this.className)\n }\n\n get openRequestsChevronClass(): string {\n return cn('size-3.5 transition-transform duration-200', this.showOpenRequests() && 'rotate-180')\n }\n\n get descriptionCountClass(): string {\n return cn('text-xs', this.descriptionLength() > maxChars ? 'text-destructive font-medium' : 'text-muted-foreground')\n }\n\n get dropzoneClass(): string {\n return cn(\n 'cursor-pointer rounded-lg border-2 border-dashed p-6 text-center transition-colors',\n this.isDragging()\n ? 'border-primary bg-primary/10'\n : 'border-border bg-muted/20 hover:border-muted-foreground/40 hover:bg-muted/40',\n )\n }\n\n categoryButtonClass(id: string): string {\n return cn(\n 'group focus-visible:ring-ring relative flex cursor-pointer flex-col items-start gap-2.5 rounded-lg border p-3.5 text-left transition-colors outline-none select-none focus-visible:ring-2',\n this.category() === id\n ? 'border-primary bg-primary/5 ring-primary/30 shadow-xs ring-1'\n : 'border-border bg-card hover:bg-muted/40 hover:border-muted-foreground/30',\n )\n }\n\n categoryIconClass(cat: IssueCategory): string {\n return cn('flex size-8 items-center justify-center rounded-md', cat.badgeColor)\n }\n\n categoryCheckClass(id: string): string {\n return cn(\n 'flex size-4 items-center justify-center rounded-full border transition-colors',\n this.category() === id\n ? 'border-primary bg-primary text-primary-foreground'\n : 'border-muted-foreground/30 opacity-0 group-hover:opacity-60',\n )\n }\n\n urgencyCardClass(value: MaintenanceUrgency): string {\n return cn(\n 'border-border relative flex cursor-pointer flex-col justify-between gap-3 rounded-lg border p-3.5 transition-colors',\n this.urgency() === value\n ? 'border-primary bg-primary/5 ring-primary/30 shadow-xs ring-1'\n : 'bg-card hover:bg-muted/40 hover:border-muted-foreground/30',\n )\n }\n\n permissionCardClass(value: EntryPermission): string {\n return cn(\n 'border-border relative flex cursor-pointer flex-col justify-between gap-2.5 rounded-lg border p-4 transition-colors',\n this.permission() === value\n ? 'border-primary bg-primary/5 ring-primary/30 shadow-xs ring-1'\n : 'bg-card hover:bg-muted/40 hover:border-muted-foreground/30',\n )\n }\n\n selectCategory(id: string): void {\n this.category.set(id)\n }\n\n setUrgency(value: string): void {\n this.urgency.set(value as MaintenanceUrgency)\n }\n\n setPermission(value: string): void {\n this.permission.set(value as EntryPermission)\n }\n\n appendSnippet(snippet: string): void {\n const current = this.description()\n if (!current) {\n this.description.set(snippet)\n } else if (!current.includes(snippet)) {\n this.description.set(`${current.trim()} ${snippet}.`)\n }\n }\n\n removeFile(id: string): void {\n this.attachedFiles.update((prev) => prev.filter((f) => f.id !== id))\n }\n\n onDragOver(event: DragEvent): void {\n event.preventDefault()\n this.isDragging.set(true)\n }\n\n onDragLeave(event: DragEvent): void {\n event.preventDefault()\n this.isDragging.set(false)\n }\n\n handleDrop(event: DragEvent): void {\n event.preventDefault()\n this.isDragging.set(false)\n const files = event.dataTransfer?.files\n if (files && files.length > 0) {\n const additions: AttachedFile[] = []\n for (let i = 0; i < files.length; i++) {\n const file = files[i]\n additions.push({\n id: `f-${Date.now()}-${i}`,\n name: file.name,\n size: `${(file.size / (1024 * 1024)).toFixed(1)} MB`,\n type: file.type.startsWith('video') ? 'video' : 'image',\n uploadedAt: 'Just now',\n })\n }\n this.attachedFiles.update((prev) => [...prev, ...additions])\n }\n }\n\n simulateAddFile(): void {\n const sampleNames = ['cabinet-water-mark.jpg', 'under-sink-plumbing.jpg', 'noise-recording.mp4']\n const files = this.attachedFiles()\n const randomName = sampleNames[files.length % sampleNames.length]\n this.attachedFiles.update((prev) => [\n ...prev,\n {\n id: `f-${Date.now()}`,\n name: randomName,\n size: '3.1 MB',\n type: randomName.endsWith('.mp4') ? 'video' : 'image',\n uploadedAt: 'Just now',\n },\n ])\n }\n\n handleSaveDraft(): void {\n this.draftSaved.set(true)\n clearTimeout(this.draftTimer)\n this.draftTimer = setTimeout(() => this.draftSaved.set(false), 3000)\n }\n\n handleSubmit(): void {\n this.isSubmitting.set(true)\n clearTimeout(this.submitTimer)\n this.submitTimer = setTimeout(() => {\n this.isSubmitting.set(false)\n this.isSubmitted.set(true)\n this.generatedTicketId.set(`MNT-${Math.floor(1000 + Math.random() * 9000)}`)\n }, 700)\n }\n\n handleReset(): void {\n clearTimeout(this.submitTimer)\n this.isSubmitted.set(false)\n this.category.set('appliances')\n this.urgency.set('standard')\n this.location.set('kitchen')\n this.description.set(defaultDescription)\n this.permission.set('granted')\n this.attachedFiles.set(defaultFiles.map((f) => ({ ...f })))\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/maintenance-request-ticket/maintenance-request-ticket.component.ts" }, { "path": "packages/registry-angular/blocks/maintenance-request-ticket/index.ts", "content": "export {\n UiMaintenanceRequestTicketComponent,\n type AttachedFile,\n type EntryPermission,\n type MaintenanceUrgency,\n} from './maintenance-request-ticket.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/maintenance-request-ticket/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/radio-group.json", "https://uipkge.dev/r/angular/select.json", "https://uipkge.dev/r/angular/separator.json", "https://uipkge.dev/r/angular/textarea.json" ], "description": "Resident repair and facility work order submission portal with urgency priority and photo dropzone.", "categories": [ "real-estate", "hospitality", "app", "forms" ] }