From 5269b29aacfc9e8910412643016fb0190a479d06 Mon Sep 17 00:00:00 2001
From: "santasri.pachhal" <santasri.pachhal@sentientgeeks.com>
Date: Fri, 10 Jul 2026 12:24:44 +0530
Subject: [PATCH] feat(ticket): use grid picker for extension due date

---
 .../actions/RequestExtensionForm.tsx          | 30 +++++++++++++++----
 1 file changed, 24 insertions(+), 6 deletions(-)

diff --git a/src/app/(modules)/ticket/[ticketId]/components/actions/RequestExtensionForm.tsx b/src/app/(modules)/ticket/[ticketId]/components/actions/RequestExtensionForm.tsx
index 4aa01cb..83390f6 100644
--- a/src/app/(modules)/ticket/[ticketId]/components/actions/RequestExtensionForm.tsx
+++ b/src/app/(modules)/ticket/[ticketId]/components/actions/RequestExtensionForm.tsx
@@ -1,9 +1,10 @@
 'use client';
 
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 import { Clock3, Loader2, Send } 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';
@@ -22,9 +23,21 @@ export function RequestExtensionForm({
   ticket,
   onCancel,
 }: RequestExtensionFormProps) {
-  const currentDueDate = ticket.worker?.due_at
-    ? new Date(ticket.worker.due_at)
-    : undefined;
+  const currentDueAt = ticket.worker?.due_at;
+  const currentDueDate = useMemo(
+    () => (currentDueAt ? new Date(currentDueAt) : undefined),
+    [currentDueAt],
+  );
+  const earliestRequestedDate = useMemo(() => {
+    const date = currentDueDate ? new Date(currentDueDate) : new Date();
+    date.setHours(0, 0, 0, 0);
+    if (currentDueDate) date.setDate(date.getDate() + 1);
+    return date;
+  }, [currentDueDate]);
+  const latestRequestedMonth = useMemo(
+    () => new Date(earliestRequestedDate.getFullYear() + 5, 11),
+    [earliestRequestedDate],
+  );
   const [requestedDueDate, setRequestedDueDate] = useState<Date>();
   const [reason, setReason] = useState('');
   const assignmentId = ticket.worker?.assignment_id;
@@ -81,12 +94,17 @@ export function RequestExtensionForm({
         <Label>
           Requested Due Date <span className="text-destructive">*</span>
         </Label>
-        <DatePicker
+        <DatePickerSimple
+          id="requested-due-date"
           value={requestedDueDate}
           onChange={setRequestedDueDate}
-          showTimeZone={false}
+          showLabel={false}
+          placeholder="Select requested due date"
           disabled={isPending}
           className="w-full"
+          startMonth={earliestRequestedDate}
+          endMonth={latestRequestedMonth}
+          disabledDates={{ before: earliestRequestedDate }}
         />
         {requestedDueDate && !isRequestedDateValid ? (
           <p className="text-xs text-destructive">