feat(ui): use grid calendar picker for modern ui look

src/app/(modules)/ticket/[ticketId]/components/actions/AssignTicketAction.tsx

@@ -1,9 +1,9 @@
 'use client';
 
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 import { Users, Mail, Phone, Send, ShieldCheck } from 'lucide-react';
 
-import { DatePicker } from '@/components/form/DatePicker';
+import { DatePickerSimple } from '@/components/form/DatePickerSimple';
 import { Button } from '@/components/ui/button';
 import { Label } from '@/components/ui/label';
 import { Textarea } from '@/components/ui/textarea';
@@ -21,6 +21,15 @@ export function AssignTicketAction({ ticket }: { ticket: TicketDetail }) {
   const [assignNote, setAssignNote] = useState('');
 
   const assignMutation = useAssignTicketMutation(ticket.id);
+  const today = useMemo(() => {
+    const date = new Date();
+    date.setHours(0, 0, 0, 0);
+    return date;
+  }, []);
+  const maxDueMonth = useMemo(
+    () => new Date(today.getFullYear() + 5, 11),
+    [today],
+  );
 
   return (
     <TicketActionCard icon={Users} title="Assign to Contractor">
@@ -56,13 +65,20 @@ export function AssignTicketAction({ ticket }: { ticket: TicketDetail }) {
           </div>
         ) : null}
         <div className="space-y-2">
-          <Label>Due Date *</Label>
-          <DatePicker
+          <Label htmlFor="assign-due-date">
+            Due Date <span className="text-destructive">*</span>
+          </Label>
+          <DatePickerSimple
+            id="assign-due-date"
             value={dueDate}
             onChange={setDueDate}
-            showTimeZone={false}
+            showLabel={false}
+            placeholder="Select due date"
             disabled={assignMutation.isPending}
             className="w-full"
+            startMonth={today}
+            endMonth={maxDueMonth}
+            disabledDates={{ before: today }}
           />
         </div>
         <div className="space-y-2">