From ca5610c7202dd741cada056ca5b93c4d5d091e5c Mon Sep 17 00:00:00 2001
From: pramod mahajan <pramod.mahajan@marcoaiot.com>
Date: Fri, 1 Aug 2025 18:39:03 +0530
Subject: [PATCH] user can not select reimburseDate before transaction date

---
 src/components/Expenses/ManageExpense.jsx     |   2 +-
 src/components/Expenses/ViewExpense.jsx       | 188 ++++++++++--------
 src/components/common/DatePicker.jsx          |   2 +
 src/components/common/EmployeeSearchInput.jsx |   2 +-
 4 files changed, 107 insertions(+), 87 deletions(-)

diff --git a/src/components/Expenses/ManageExpense.jsx b/src/components/Expenses/ManageExpense.jsx
index 80ba23a5..37bc50b5 100644
--- a/src/components/Expenses/ManageExpense.jsx
+++ b/src/components/Expenses/ManageExpense.jsx
@@ -57,7 +57,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
     (store) => store.localVariables.projectId
   );
   const { projectNames, loading: projectLoading, error } = useProjectName();
-
+debugger
   const {
     PaymentModes,
     loading: PaymentModeLoading,
diff --git a/src/components/Expenses/ViewExpense.jsx b/src/components/Expenses/ViewExpense.jsx
index e46b005d..3ff0d32d 100644
--- a/src/components/Expenses/ViewExpense.jsx
+++ b/src/components/Expenses/ViewExpense.jsx
@@ -12,7 +12,11 @@ import { useExpenseContext } from "../../pages/Expense/ExpensePage";
 import { getColorNameFromHex } from "../../utils/appUtils";
 import { ExpenseDetailsSkeleton } from "./ExpenseSkeleton";
 import { useHasUserPermission } from "../../hooks/useHasUserPermission";
-import { EXPENSE_REJECTEDBY, PROCESS_EXPENSE, REVIEW_EXPENSE } from "../../utils/constants";
+import {
+  EXPENSE_REJECTEDBY,
+  PROCESS_EXPENSE,
+  REVIEW_EXPENSE,
+} from "../../utils/constants";
 import { useProfile } from "../../hooks/useProfile";
 import { useSelector } from "react-redux";
 import { useNavigate } from "react-router-dom";
@@ -69,22 +73,25 @@ const ViewExpense = ({ ExpenseId }) => {
     });
   }, [data, userPermissions]);
 
-  const IsRejectedExpense = useMemo(()=>{
-    return EXPENSE_REJECTEDBY.includes(data?.status?.id)
-  },[data])
+  const IsRejectedExpense = useMemo(() => {
+    return EXPENSE_REJECTEDBY.includes(data?.status?.id);
+  }, [data]);
 
   const isCreatedBy = useMemo(() => {
-  return data?.createdBy.id === CurrentUser?.id;
-}, [data, CurrentUser]);
+    return data?.createdBy.id === CurrentUser?.id;
+  }, [data, CurrentUser]);
 
-  const { mutate: MakeAction,isPending } = useActionOnExpense(() => {
+  const { mutate: MakeAction, isPending } = useActionOnExpense(() => {
     setClickedStatusId(null);
-    reset()});
+    reset();
+  });
 
   const onSubmit = (formData) => {
     const Payload = {
       ...formData,
-      reimburseDate:moment.utc(formData.reimburseDate, "DD-MM-YYYY").toISOString(),
+      reimburseDate: moment
+        .utc(formData.reimburseDate, "DD-MM-YYYY")
+        .toISOString(),
       expenseId: ExpenseId,
       comment: formData.comment,
     };
@@ -340,42 +347,51 @@ const ViewExpense = ({ ExpenseId }) => {
           </div>
         )}
       </div>
-      {data.expensesReimburse && (<div className="row text-start">
-  <div className="col-md-6 mb-3">
-    <strong>Transaction ID :</strong> {data.expensesReimburse.reimburseTransactionId || "N/A"}
-  </div>
-  <div className="col-md-6 mb-3">
-    <strong>Reimburse Date :</strong>{" "}
-    { moment(data.expensesReimburse.reimburseDate).format("DD-MM-YYYY") }
-  </div>
+      {data.expensesReimburse && (
+        <div className="row text-start">
+          <div className="col-md-6 mb-3">
+            <label className="form-label me-2 mb-0 fw-semibold">
+              Transaction ID :
+            </label>
+            {data.expensesReimburse.reimburseTransactionId || "N/A"}
+          </div>
+          <div className="col-md-6 mb-3">
+            <label className="form-label me-2 mb-0 fw-semibold">
+              Reimburse Date :
+            </label>
+            {formatUTCToLocalTime(data.expensesReimburse.reimburseDate)}
+          </div>
 
-  {data.expensesReimburse && (
-    <>
-      <div className="col-md-6 mb-3 d-flex align-items-center">
-        <strong className="me-2">Reimburse By :</strong>
-        <Avatar
-          size="xs"
-          classAvatar="m-0 me-1"
-          firstName={data?.expensesReimburse?.reimburseBy?.firstName}
-          lastName={data?.expensesReimburse?.reimburseBy?.lastName}
-        />
-        <span className="text-muted">
-          {`${data?.expensesReimburse?.reimburseBy?.firstName} ${data?.expensesReimburse?.reimburseBy?.lastName}`.trim()}
-        </span>
-      </div>
-    </>
-  )}
+          {data.expensesReimburse && (
+            <>
+              <div className="col-md-6 mb-3 d-flex align-items-center">
+                <label className="form-label me-2 mb-0 fw-semibold">
+                  Reimburse By :
+                </label>
+                <Avatar
+                  size="xs"
+                  classAvatar="m-0 me-1"
+                  firstName={data?.expensesReimburse?.reimburseBy?.firstName}
+                  lastName={data?.expensesReimburse?.reimburseBy?.lastName}
+                />
+                <span className="text-muted">
+                  {`${data?.expensesReimburse?.reimburseBy?.firstName} ${data?.expensesReimburse?.reimburseBy?.lastName}`.trim()}
+                </span>
+              </div>
+            </>
+          )}
 
-    <div className="col-md-6 mb-3">
-      <strong>Note :</strong> {data.expensesReimburse.reimburseNote}
-    </div>
-
-</div>)}
-
-      
+          <div className="col-md-6 mb-3">
+            <label className="form-label me-2 mb-0 fw-semibold"> Note :</label>{" "}
+            {data.expensesReimburse.reimburseNote}
+          </div>
+        </div>
+      )}
 
       <div className="text-start">
-        <label className="form-label me-2 mb-0 fw-semibold">Description :</label>
+        <label className="form-label me-2 mb-0 fw-semibold">
+          Description :
+        </label>
         <div className="text-muted">{data?.description}</div>
       </div>
       <div className="col-12 my-2 text-start">
@@ -444,7 +460,7 @@ const ViewExpense = ({ ExpenseId }) => {
 
       {Array.isArray(data?.nextStatus) && data.nextStatus.length > 0 && (
         <>
-          {(IsPaymentProcess && nextStatusWithPermission?.length > 0) && (
+          {IsPaymentProcess && nextStatusWithPermission?.length > 0 && (
             <div className="row">
               <div className="col-12 col-md-6 text-start">
                 <label className="form-label">Transaction Id </label>
@@ -461,7 +477,11 @@ const ViewExpense = ({ ExpenseId }) => {
               </div>
               <div className="col-12 col-md-6 text-start">
                 <label className="form-label">Transaction Date </label>
-                <DatePicker name="reimburseDate" control={control} />
+                <DatePicker
+                  name="reimburseDate"
+                  control={control}
+                  minDate={data?.transactionDate}
+                />
                 {errors.reimburseDate && (
                   <small className="danger-text">
                     {errors.reimburseDate.message}
@@ -478,49 +498,47 @@ const ViewExpense = ({ ExpenseId }) => {
               </div>
             </div>
           )}
-        <div className="col-12 mb-3 text-start">
-  {(
-    (nextStatusWithPermission.length > 0 && !IsRejectedExpense) || 
-    (IsRejectedExpense && isCreatedBy)
-  ) && (
-    <>
-      <label className="form-label me-2 mb-0">Comment:</label>
-      <textarea
-        className="form-control form-control-sm"
-        {...register("comment")}
-        rows="2"
-      />
-      {errors.comment && (
-        <small className="danger-text">
-          {errors.comment.message}
-        </small>
-      )}
-    </>
-  )}
-
-  {(nextStatusWithPermission?.length > 0 && (!IsRejectedExpense || isCreatedBy)) && (
-    <div className="text-center flex-wrap gap-2 my-2">
-      {nextStatusWithPermission.map((status, index) => (
-        <button
-          key={status.id || index}
-          type="button"
-          onClick={() => {
-            setClickedStatusId(status.id);
-            setValue("statusId", status.id);
-            handleSubmit(onSubmit)();
-          }}
-          disabled={isPending}
-          className="btn btn-primary btn-sm cursor-pointer mx-2 border-0"
-        >
-          {isPending && clickedStatusId === status.id
-            ? "Please Wait..."
-            : status.displayName || status.name}
-        </button>
-      ))}
-    </div>
-  )}
-</div>
+          <div className="col-12 mb-3 text-start">
+            {((nextStatusWithPermission.length > 0 && !IsRejectedExpense) ||
+              (IsRejectedExpense && isCreatedBy)) && (
+              <>
+                <label className="form-label me-2 mb-0">Comment:</label>
+                <textarea
+                  className="form-control form-control-sm"
+                  {...register("comment")}
+                  rows="2"
+                />
+                {errors.comment && (
+                  <small className="danger-text">
+                    {errors.comment.message}
+                  </small>
+                )}
+              </>
+            )}
 
+            {nextStatusWithPermission?.length > 0 &&
+              (!IsRejectedExpense || isCreatedBy) && (
+                <div className="text-center flex-wrap gap-2 my-2">
+                  {nextStatusWithPermission.map((status, index) => (
+                    <button
+                      key={status.id || index}
+                      type="button"
+                      onClick={() => {
+                        setClickedStatusId(status.id);
+                        setValue("statusId", status.id);
+                        handleSubmit(onSubmit)();
+                      }}
+                      disabled={isPending}
+                      className="btn btn-primary btn-sm cursor-pointer mx-2 border-0"
+                    >
+                      {isPending && clickedStatusId === status.id
+                        ? "Please Wait..."
+                        : status.displayName || status.name}
+                    </button>
+                  ))}
+                </div>
+              )}
+          </div>
         </>
       )}
     </form>
diff --git a/src/components/common/DatePicker.jsx b/src/components/common/DatePicker.jsx
index 7777f769..9645fddb 100644
--- a/src/components/common/DatePicker.jsx
+++ b/src/components/common/DatePicker.jsx
@@ -9,6 +9,7 @@ const DatePicker = ({
   className = "",
   allowText = false,
   maxDate=new Date(),
+  minDate,
   ...rest
 }) => {
   const inputRef = useRef(null);
@@ -29,6 +30,7 @@ const DatePicker = ({
           ? flatpickr.parseDate(value, "Y-m-d")
           : null,
         maxDate:maxDate,
+        minDate:new Date(minDate?.split("T")[0]) ?? undefined,
         onChange: function (selectedDates, dateStr) {
           onChange(dateStr); 
         },
diff --git a/src/components/common/EmployeeSearchInput.jsx b/src/components/common/EmployeeSearchInput.jsx
index 2fb37afd..c3b9295a 100644
--- a/src/components/common/EmployeeSearchInput.jsx
+++ b/src/components/common/EmployeeSearchInput.jsx
@@ -45,7 +45,7 @@ const EmployeeSearchInput = ({ control, name, projectId }) => {
         onChange={(e) => {
           setSearch(e.target.value);
           setShowDropdown(true);
-          onChange(""); // Clear previous selection
+          onChange(""); 
         }}
         onFocus={() => {
           if (search) setShowDropdown(true);