From f56fd23cbfda41cec6a0310e57d2822304f65427 Mon Sep 17 00:00:00 2001
From: Kartik Sharma <kartik.sharma@marcoaiot.com>
Date: Fri, 5 Sep 2025 11:12:31 +0530
Subject: [PATCH] In Create Project popup change the noraml date selection to
 DatePicker.

---
 src/components/Project/ManageProjectInfo.jsx | 37 ++++++++++----------
 src/components/common/DatePicker.jsx         | 29 ++++++++++-----
 2 files changed, 39 insertions(+), 27 deletions(-)

diff --git a/src/components/Project/ManageProjectInfo.jsx b/src/components/Project/ManageProjectInfo.jsx
index 0380130f..5d56c171 100644
--- a/src/components/Project/ManageProjectInfo.jsx
+++ b/src/components/Project/ManageProjectInfo.jsx
@@ -3,6 +3,7 @@ import { useForm, Controller } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 import Label from "../common/Label";
+import DatePicker from "../common/DatePicker";
 
 const currentDate = new Date().toLocaleDateString('en-CA');
 const formatDate = (date) => {
@@ -214,42 +215,42 @@ const ManageProjectInfo = ({ project, handleSubmitForm, onClose, isPending }) =>
           <label className="form-label" htmlFor="startDate">
             Start Date
           </label>
-          <input
-            className="form-control form-control-sm"
-            type="date"
+
+          <DatePicker
             name="startDate"
-            {...register("startDate")}
-            id="startDate"
+            control={control}
+            placeholder="DD-MM-YYYY"
+            maxDate={new Date()} // optional: restrict future dates
+            className="w-100"
           />
+
           {errors.startDate && (
-            <div
-              className="danger-text text-start"
-              style={{ fontSize: "12px" }}
-            >
+            <div className="danger-text text-start" style={{ fontSize: "12px" }}>
               {errors.startDate.message}
             </div>
           )}
         </div>
+
         <div className="col-12 col-md-6">
           <label className="form-label" htmlFor="endDate">
             End Date
           </label>
-          <input
-            className="form-control form-control-sm"
-            type="date"
+
+          <DatePicker
             name="endDate"
-            {...register("endDate")}
-            id="endDate"
+            control={control}
+            placeholder="DD-MM-YYYY"
+           minDate={getValues("startDate")} // optional: restrict future dates
+            className="w-100"
           />
+
           {errors.endDate && (
-            <div
-              className="danger-text text-start"
-              style={{ fontSize: "12px" }}
-            >
+            <div className="danger-text text-start" style={{ fontSize: "12px" }}>
               {errors.endDate.message}
             </div>
           )}
         </div>
+
         <div className="col-12 col-md-6">
           <label className="form-label" htmlFor="modalEditUserStatus">
             Status
diff --git a/src/components/common/DatePicker.jsx b/src/components/common/DatePicker.jsx
index 9645fddb..acb9007f 100644
--- a/src/components/common/DatePicker.jsx
+++ b/src/components/common/DatePicker.jsx
@@ -8,7 +8,7 @@ const DatePicker = ({
   placeholder = "DD-MM-YYYY",
   className = "",
   allowText = false,
-  maxDate=new Date(),
+  maxDate,   // removed default new Date()
   minDate,
   ...rest
 }) => {
@@ -25,19 +25,25 @@ const DatePicker = ({
     if (inputRef.current) {
       flatpickr(inputRef.current, {
         dateFormat: "d-m-Y",
-        allowInput: allowText, 
+        allowInput: allowText,
         defaultDate: value
           ? flatpickr.parseDate(value, "Y-m-d")
           : null,
-        maxDate:maxDate,
-        minDate:new Date(minDate?.split("T")[0]) ?? undefined,
-        onChange: function (selectedDates, dateStr) {
-          onChange(dateStr); 
+        maxDate: maxDate ?? undefined, // only applied if passed
+        minDate: minDate ? new Date(minDate.split("T")[0]) : undefined,
+        onChange: function (selectedDates) {
+          if (selectedDates.length > 0) {
+            // store in YYYY-MM-DD
+            const formatted = flatpickr.formatDate(selectedDates[0], "Y-m-d");
+            onChange(formatted);
+          } else {
+            onChange("");
+          }
         },
         ...rest
       });
     }
-  }, [inputRef]);
+  }, [inputRef, value, allowText, maxDate, minDate, rest, onChange]);
 
   return (
     <div className={` position-relative ${className}`}>
@@ -45,8 +51,13 @@ const DatePicker = ({
         type="text"
         className="form-control form-control-sm " 
         placeholder={placeholder}
-          defaultValue={
-          value ? flatpickr.formatDate(flatpickr.parseDate(value, "Y-m-d"), "d-m-Y") : ""
+        defaultValue={
+          value
+            ? flatpickr.formatDate(
+                flatpickr.parseDate(value, "Y-m-d"),
+                "d-m-Y"
+              )
+            : ""
         }
         ref={(el) => {
           inputRef.current = el;