Submit a New Ticket

Describe your ICT issue and we'll get it resolved as soon as possible.

{/* Category Selection */} What type of issue? Select the category that best describes your problem

{Object.entries(categories).map(([key, label]) => ( ))}

{/* Ticket Details */} Ticket Details

Subject * setData('title', e.target.value)} placeholder="Brief summary of your issue" className="text-sm" />

Description *

setData('description', e.target.value)}
                                    placeholder="Please describe the issue in detail. Include any error messages, when the problem started, and what you've already tried."
                                    rows={5}
                                    className="text-sm"
                                />
                                <InputError message={errors.description} />
                            </div>

<div className="grid gap-4 sm:grid-cols-2">
                                <div className="space-y-2">
                                    <Label htmlFor="priority">Priority *</Label>
                                    <Select
                                        value={data.priority}
                                        onValueChange={(v) => setData('priority', v)}
                                    >
                                        <SelectTrigger>
                                            <SelectValue placeholder="Select priority" />
                                        </SelectTrigger>
                                        <SelectContent>
                                            {Object.entries(priorities).map(([key, label]) => (
                                                <SelectItem key={key} value={key}>
                                                    {label}
                                                </SelectItem>
                                            ))}
                                        </SelectContent>
                                    </Select>
                                    <InputError message={errors.priority} />
                                </div>

<div className="space-y-2">
                                    <Label htmlFor="location">Location</Label>
                                    <Input
                                        id="location"
                                        value={data.location}
                                        onChange={(e) => setData('location', e.target.value)}
                                        placeholder="e.g., Room 201, Admin Building"
                                        className="text-sm"
                                    />
                                    <InputError message={errors.location} />
                                </div>
                            </div>

{showEquipment && (
                                <div className="space-y-2">
                                    <Label htmlFor="equipment_type">Equipment Type</Label>
                                    <Input
                                        id="equipment_type"
                                        value={data.equipment_type}
                                        onChange={(e) => setData('equipment_type', e.target.value)}
                                        placeholder="e.g., Dell OptiPlex 7090, Canon imageRUNNER 2530"
                                        className="text-sm"
                                    />
                                    <InputError message={errors.equipment_type} />
                                </div>
                            )}
                        </CardContent>
                    </Card>

<div className="flex justify-end gap-3">
                        <Button type="button" variant="outline" onClick={() => window.history.back()}>
                            Cancel
                        </Button>
                        <Button type="submit" disabled={processing} className="min-w-[120px]">
                            {processing ? 'Submitting...' : 'Submit Ticket'}
                        </Button>
                    </div>
                </form>
            </div>
        </AppLayout>
    );
}