Issue Report Form

1'use client'
2 
3import { Button } from '@/components/ui/button'
4import { Input } from '@/components/ui/input'
5import { Label } from '@/components/ui/label'
6import {
7  Select,
8  SelectContent,
9  SelectItem,
10  SelectTrigger,
11  SelectValue
12} from '@/components/ui/select'
13import { cn } from '@/lib/utils'
14import { demoIssueReportFormData } from './demo/form'
15import { ChevronDown, ChevronUp, Paperclip, Send, X } from 'lucide-react'
16import { useRef, useState } from 'react'
17 
18 
19/**
20 * ═══════════════════════════════════════════════════════════════════════════
21 * IssueReportFormProps
22 * ═══════════════════════════════════════════════════════════════════════════
23 *
24 * Props for the IssueReportForm component for IT support, help desk, or
25 * internal ticketing systems.
26 */
27export interface IssueReportFormProps {
28  data?: {
29    /** Form title displayed at the top. */
30    title?: string
31    /** List of team options for the dropdown. */
32    teams?: string[]
33    /** List of location options. */
34    locations?: string[]
35    /** Category to subcategory mapping. */
36    categories?: Record<string, string[]>
37    /** Impact level options. */
38    impacts?: { value: string; label: string }[]
39    /** Urgency level options. */
40    urgencies?: { value: string; label: string }[]
41    /** Frequency options. */
42    frequencies?: { value: string; label: string }[]
43    /** Pre-defined actions user may have tried. */
44    attemptedActions?: string[]
45  }
46  actions?: {
47    /** Called when the form is submitted. */
48    onSubmit?: (formData: IssueFormData) => void
49  }
50  appearance?: {
51    /**
52     * Whether to display the title.
53     * @default true
54     */
55    showTitle?: boolean
56    /**
57     * Use compact layout.
58     * @default true
59     */
60    compactMode?: boolean
61  }
62}
63 
64/**
65 * Data structure representing an issue report submission.
66 * @interface IssueFormData
67 * @property {string} declarantName - Name of the person reporting the issue
68 * @property {string} email - Contact email for follow-up
69 * @property {string} team - Department or team affected
70 * @property {string} location - Office location
71 * @property {string} office - Specific office or area identifier
72// … truncated