{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "maintenance-request-ticket", "title": "Maintenance Request Ticket", "type": "registry:block", "files": [ { "path": "packages/registry-react/blocks/maintenance-request-ticket/MaintenanceRequestTicket.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport { useState } from 'react'\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 PhoneCall,\n Plus,\n RefreshCw,\n ShieldAlert,\n ShieldCheck,\n Trash2,\n UploadCloud,\n UserCheck,\n Wrench,\n Zap,\n} from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'\nimport { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'\nimport {\n Select,\n SelectContent,\n SelectGroup,\n SelectItem,\n SelectLabel,\n SelectTrigger,\n SelectValue,\n} from '@/components/ui/select'\nimport { Separator } from '@/components/ui/separator'\nimport { Textarea } from '@/components/ui/textarea'\n\nexport interface AttachedFile {\n id: string\n name: string\n size: string\n type: 'image' | 'video'\n uploadedAt: string\n}\n\nexport interface MaintenanceRequestTicketProps {\n className?: string\n initialCategory?: string\n initialUrgency?: 'routine' | 'standard' | 'emergency'\n initialLocation?: string\n initialDescription?: string\n initialPermission?: 'granted' | 'call_first'\n initialFiles?: AttachedFile[]\n}\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 categories = [\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\nconst urgencyOptions = [\n {\n value: 'routine',\n label: 'Low / Routine',\n badge: '3–5 Business Days',\n badgeVariant: 'outline' as const,\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' as const,\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' as const,\n description: 'Immediate hazard to property or habitability. Triggers 24/7 on-call dispatch.',\n },\n]\n\nconst locationOptions = [\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 = [\n 'Motor humming but not spinning',\n 'Water leaking under sink',\n 'Reset button tripped',\n 'Slow draining',\n]\n\nconst maxChars = 500\n\nexport function MaintenanceRequestTicket({\n className,\n initialCategory = 'appliances',\n initialUrgency = 'standard',\n initialLocation = 'kitchen',\n initialDescription = 'Kitchen sink garbage disposal is jammed and leaking slightly under the cabinet when water runs. Motor makes a low humming sound.',\n initialPermission = 'granted',\n initialFiles = defaultFiles,\n}: MaintenanceRequestTicketProps) {\n const [category, setCategory] = useState(initialCategory)\n const [urgency, setUrgency] = useState<'routine' | 'standard' | 'emergency'>(initialUrgency)\n const [location, setLocation] = useState(initialLocation)\n const [description, setDescription] = useState(initialDescription)\n const [permission, setPermission] = useState<'granted' | 'call_first'>(initialPermission)\n const [attachedFiles, setAttachedFiles] = useState([...initialFiles])\n const [isDragging, setIsDragging] = useState(false)\n const [showOpenRequests, setShowOpenRequests] = useState(false)\n const [isSubmitting, setIsSubmitting] = useState(false)\n const [isSubmitted, setIsSubmitted] = useState(false)\n const [draftSaved, setDraftSaved] = useState(false)\n const [generatedTicketId, setGeneratedTicketId] = useState('MNT-9042')\n\n const descriptionLength = description.length\n\n const appendSnippet = (snippet: string) => {\n if (!description) {\n setDescription(snippet)\n } else if (!description.includes(snippet)) {\n setDescription(`${description.trim()} ${snippet}.`)\n }\n }\n\n const removeFile = (id: string) => {\n setAttachedFiles((prev) => prev.filter((f) => f.id !== id))\n }\n\n const handleDrop = (e: React.DragEvent) => {\n e.preventDefault()\n setIsDragging(false)\n if (e.dataTransfer?.files && e.dataTransfer.files.length > 0) {\n const newFiles: AttachedFile[] = []\n for (let i = 0; i < e.dataTransfer.files.length; i++) {\n const file = e.dataTransfer.files[i]\n newFiles.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 setAttachedFiles((prev) => [...prev, ...newFiles])\n }\n }\n\n const simulateAddFile = () => {\n const sampleNames = ['cabinet-water-mark.jpg', 'under-sink-plumbing.jpg', 'noise-recording.mp4']\n const randomName = sampleNames[attachedFiles.length % sampleNames.length]\n setAttachedFiles((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 const handleSaveDraft = () => {\n setDraftSaved(true)\n setTimeout(() => {\n setDraftSaved(false)\n }, 3000)\n }\n\n const handleSubmit = () => {\n setIsSubmitting(true)\n setTimeout(() => {\n setIsSubmitting(false)\n setIsSubmitted(true)\n setGeneratedTicketId(`MNT-${Math.floor(1000 + Math.random() * 9000)}`)\n }, 700)\n }\n\n const handleReset = () => {\n setIsSubmitted(false)\n setCategory('appliances')\n setUrgency('standard')\n setLocation('kitchen')\n setDescription(\n 'Kitchen sink garbage disposal is jammed and leaking slightly under the cabinet when water runs. Motor makes a low humming sound.',\n )\n setPermission('granted')\n setAttachedFiles([\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 }\n\n return (\n
\n {/* Header Banner */}\n \n \n
\n
\n
\n

\n Submit Maintenance Request\n

\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 setShowOpenRequests(!showOpenRequests)}\n >\n {showOpenRequests ? 'Hide Open Requests' : 'View Open Requests'}\n \n \n
\n
\n\n {/* Collapsible Active Work Orders Panel */}\n {showOpenRequests && (\n
\n
\n
\n \n \n Currently Active Work Orders (1)\n \n
\n \n Technician Assigned\n \n
\n
\n
\n
\n \n #MNT-8821 · HVAC Filter & Thermostat Inspection\n \n \n Living Room\n \n
\n

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

\n
\n
\n \n In Progress\n \n
\n
\n
\n )}\n \n \n\n {/* Main 2-Column Layout */}\n
\n {/* Left Column: Work Order Form (8 cols) */}\n
\n {/* Submission Success State */}\n {isSubmitted ? (\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 ) : (\n \n \n Work Order Details\n Complete the fields below to schedule a maintenance technician visit.\n \n\n \n {/* 1. Category Selection Grid */}\n
\n
\n \n Select one primary discipline\n
\n\n
\n {categories.map((cat) => {\n const Icon = cat.icon\n const isSelected = category === cat.id\n return (\n setCategory(cat.id)}\n >\n
\n
\n \n
\n \n {isSelected && }\n
\n
\n
\n

{cat.label}

\n

{cat.description}

\n
\n \n )\n })}\n
\n
\n\n \n\n {/* 2. Urgency Level Radios */}\n
\n
\n \n Determines facility response window\n
\n\n {/* Emergency Banner Alert if High Selected */}\n {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 (415) 555-0192.\n

\n
\n
\n )}\n\n setUrgency(val as 'routine' | 'standard' | 'emergency')}\n className=\"grid gap-3 sm:grid-cols-3\"\n >\n {urgencyOptions.map((opt) => (\n setUrgency(opt.value as any)}\n >\n
\n
\n \n \n {opt.label}\n \n
\n
\n
\n \n {opt.badge}\n \n

{opt.description}

\n
\n
\n ))}\n \n
\n\n \n\n {/* 3. Location in Unit */}\n
\n
\n \n Specific area or room\n
\n\n \n
\n\n \n\n {/* 4. Issue Description */}\n
\n
\n \n maxChars ? 'text-destructive font-medium' : 'text-muted-foreground',\n )}\n >\n {descriptionLength} / {maxChars}\n \n
\n\n \n\n {/* Quick Snippet Helper Chips */}\n
\n

Quick details:

\n
\n {quickSnippets.map((chip) => (\n appendSnippet(chip)}\n >\n \n {chip}\n \n ))}\n
\n
\n
\n\n \n\n {/* 5. Permission to Enter Unit */}\n
\n
\n \n Access protocol\n
\n\n setPermission(val as 'granted' | 'call_first')}\n className=\"grid gap-3 sm:grid-cols-2\"\n >\n setPermission('granted')}\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 setPermission('call_first')}\n >\n
\n \n
\n \n Call Resident Before Entering\n \n

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

\n
\n
\n
\n \n Requires resident appointment\n
\n
\n \n \n\n \n\n {/* 6. Photo & Video Dropzone */}\n
\n
\n \n {attachedFiles.length} Attached\n
\n\n {/* Interactive Drop Area */}\n {\n e.preventDefault()\n setIsDragging(true)\n }}\n onDragLeave={(e) => {\n e.preventDefault()\n setIsDragging(false)\n }}\n onDrop={handleDrop}\n onClick={simulateAddFile}\n >\n
\n \n
\n
\n

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

\n

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

\n
\n
\n\n {/* Attached Files Previews */}\n {attachedFiles.length > 0 && (\n
\n {attachedFiles.map((f) => (\n \n
\n
\n {f.type === 'video' ? : }\n
\n
\n

{f.name}

\n

\n {f.size} · {f.uploadedAt}\n

\n
\n
\n
\n \n Attached\n \n removeFile(f.id)}\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 {draftSaved && (\n \n \n Saved locally\n \n )}\n
\n\n \n {!isSubmitting ? : }\n {isSubmitting ? 'Dispatching Work Order...' : 'Submit Maintenance Request'}\n \n \n \n )}\n \n\n {/* Right Column: Emergency & SLA Sidebar (4 cols) */}\n
\n {/* 24/7 Emergency Maintenance Hotline Card */}\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 \n\n {/* Service Level Agreement (SLA) Card */}\n \n \n
\n \n Service Level Agreement (SLA)\n
\n \n Response benchmarks for Pacific Heights property maintenance.\n \n \n \n
\n
\n
\n \n Emergency Priority\n
\n \n < 2 Hours\n \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 \n 24–48 Hours\n \n
\n

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

\n
\n\n
\n
\n
\n \n Routine / Preventative\n
\n \n 3–5 Days\n \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 {/* Building Operations Info Card */}\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}\n\nexport default MaintenanceRequestTicket\n", "type": "registry:block", "target": "~/components/blocks/MaintenanceRequestTicket.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/radio-group.json", "https://uipkge.dev/r/react/select.json", "https://uipkge.dev/r/react/separator.json", "https://uipkge.dev/r/react/textarea.json" ], "description": "Resident repair and facility work order submission portal with urgency priority and photo dropzone.", "categories": [ "real-estate", "hospitality", "app", "forms" ] }