jason/polaris-task-force
1
0
Fork 0
Code Issues Wiki Activity

feat(helpdesk): enhance create ticket dialog with critical alert for priority tickets

Browse source
This commit is contained in:
Jason Fraley 2026-08-16 18:26:01 -04:00
parent 56b79e142e
commit dad652b1d4
1 changed files with 50 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

65
src/components/frontend/helpdesk/CreateTicketDialog.tsx
View file

@ -16,7 +16,13 @@ import {
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import { Textarea } from "@/components/ui/textarea";
import { createTicket } from "@/app/(frontend)/helpdesk/actions";
import {
@ -26,7 +32,7 @@ import {
type TicketPriority,
} from "@/lib/tickets/ticketMeta";
import { cn } from "@/lib/utils";
import { Alert } from "@/components/ui/alert";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
function isTicketCategory(value: string): value is TicketCategory {
return TICKET_CATEGORIES.some((option) => option.value === value);
@ -113,7 +119,7 @@ export function CreateTicketDialog() {
default:
return "text-muted-foreground";
}
}
};
return (
<Dialog
@ -164,12 +170,19 @@ export function CreateTicketDialog() {
}}
disabled={pending}
>
<SelectTrigger id="ticket-category" className={cn("w-full", getColorForCategoryLabel(category))}>
<SelectTrigger
id="ticket-category"
className={cn("w-full", getColorForCategoryLabel(category))}
>
<SelectValue />
</SelectTrigger>
<SelectContent>
{TICKET_CATEGORIES.map((option) => (
<SelectItem key={option.value} value={option.value} className={getColorForCategoryLabel(option.value)}>
<SelectItem
key={option.value}
value={option.value}
className={getColorForCategoryLabel(option.value)}
>
{option.label}
</SelectItem>
))}
@ -186,12 +199,19 @@ export function CreateTicketDialog() {
}}
disabled={pending}
>
<SelectTrigger id="ticket-priority" className={cn("w-full", getColorForPriorityLabel(priority))}>
<SelectTrigger
id="ticket-priority"
className={cn("w-full", getColorForPriorityLabel(priority))}
>
<SelectValue />
</SelectTrigger>
<SelectContent>
{TICKET_PRIORITIES.map((option) => (
<SelectItem key={option.value} value={option.value} className={getColorForPriorityLabel(option.value)}>
<SelectItem
key={option.value}
value={option.value}
className={getColorForPriorityLabel(option.value)}
>
{option.label}
</SelectItem>
))}
@ -200,13 +220,23 @@ export function CreateTicketDialog() {
</div>
</div>
<div className="flex flex-col gap-1.5">
<Alert variant="info" className="text-sm">
<p>
Need to share files or screenshots? You can upload them to a file sharing service and include the link in your description.
</p>
</Alert>
</div>
{priority === "critical" && (
<div className="flex flex-col gap-1.5">
<Alert variant="destructive" className="text-sm">
<AlertTitle className="text-lg">Important!</AlertTitle>
<AlertDescription>
<p>
Marking this ticket as critical means it <strong>requires immediate attention</strong> and may
impact the stability or functionality of the system.
</p>
<p>
Please ensure that the description clearly outlines the issue and any potential
impact it may have so that I can address it promptly.
</p>
</AlertDescription>
</Alert>
</div>
)}
<div className="flex flex-col gap-1.5">
<Label htmlFor="ticket-description">Description</Label>
@ -227,7 +257,12 @@ export function CreateTicketDialog() {
)}
<DialogFooter>
<Button type="button" variant="outline" onClick={() => setOpen(false)} disabled={pending}>
<Button
type="button"
variant="outline"
onClick={() => setOpen(false)}
disabled={pending}
>
Cancel
</Button>
<Button type="submit" disabled={pending}>