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

src/components/frontend/helpdesk/CreateTicketDialog.tsx

@@ -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>
 
+          {priority === "critical" && (
             <div className="flex flex-col gap-1.5">
-            <Alert variant="info" className="text-sm">
+              <Alert variant="destructive" className="text-sm">
+                <AlertTitle className="text-lg">Important!</AlertTitle>
+                <AlertDescription>
                   <p>
-                Need to share files or screenshots? You can upload them to a file sharing service and include the link in your description.
+                    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}>