resolved taking incorrect date range

public/assets/vendor/css/core.css

@@ -20475,7 +20475,7 @@ li:not(:first-child) .dropdown-item,
 }
 /* text-size */
 .text-tiny{
-  font-size: 13px;
+  font-size: 10px;
 }
 /* rtl:end:remove */
 .text-primary {

src/components/Expenses/ExpenseStatusLogs.jsx

@@ -1,14 +1,19 @@
-import { useState } from "react";
+import { useState,useMemo } from "react";
 import Avatar from "../common/Avatar";
 import { formatUTCToLocalTime } from "../../utils/dateUtils";
 
+
 const ExpenseStatusLogs = ({ data }) => {
   const [visibleCount, setVisibleCount] = useState(4);
 
-  const logsToShow = [...(data?.expenseLogs || [])]
+  const sortedLogs = useMemo(() => {
-  .sort((a, b) => new Date(b.updateAt) - new Date(a.updateAt))
+    if (!data?.expenseLogs) return [];
-  .slice(0, visibleCount);
+    return [...data.expenseLogs].sort(
+      (a, b) => new Date(b.updateAt) - new Date(a.updateAt)
+    );
+  }, [data?.expenseLogs]);
 
+  const logsToShow = sortedLogs.slice(0, visibleCount);
 
   const handleShowMore = () => {
     setVisibleCount((prev) => prev + 4);
@@ -17,11 +22,8 @@ const ExpenseStatusLogs = ({ data }) => {
   return (
     <>
       <div className="row g-2">
-        {logsToShow.map((log, index) => (
+        {logsToShow.map((log) => (
-          <div
+          <div key={log.id} className="col-12 d-flex align-items-start mb-1">
-            key={log.id}
-            className="col-12 d-flex align-items-start mb-1"
-          >
             <Avatar
               size="xs"
               firstName={log.updatedBy.firstName}
@@ -29,20 +31,18 @@ const ExpenseStatusLogs = ({ data }) => {
             />
 
             <div className="flex-grow-1">
-              <div className="d-flex justify-content-start">
+              <div className="text-start">
-                <div className="text-start">
+                <div className="flex">
-                  <div >
+                  <span>{`${log.updatedBy.firstName} ${log.updatedBy.lastName}`}</span>
-                    <div className="flex">
+                  <small className="text-secondary text-tiny ms-2">
-                      <span>{`${log.updatedBy.firstName} ${log.updatedBy.lastName}`}</span>
+                    <em>{log.action}</em>
-                      <small className="text-secondary text-tiny ms-2">
+                  </small>
-                        <em>{log.action}</em>
+                  <span className="text-tiny text-secondary d-block" >
-                      </small>
+                    {formatUTCToLocalTime(log.updateAt,true)}
-                      <span className="text-tiny text-secondary d-block small">{formatUTCToLocalTime(log?.updateAt)}</span>
+                  </span>
-                    </div>
+                </div>
-                  </div>
+                <div className="d-flex align-items-center text-muted small mt-1">
-                  <div className="d-flex align-items-center text-muted small mt-1">
+                  <span>{log.comment}</span>
-                    <span className="small">{log.comment}</span>
-                  </div>
                 </div>
               </div>
             </div>
@@ -50,7 +50,7 @@ const ExpenseStatusLogs = ({ data }) => {
         ))}
       </div>
 
-      {data?.expenseLogs?.length > visibleCount && (
+      {sortedLogs.length > visibleCount && (
         <div className="text-center my-1">
           <button
             className="btn btn-xs btn-outline-primary"
@@ -64,4 +64,5 @@ const ExpenseStatusLogs = ({ data }) => {
   );
 };
 
+
 export default ExpenseStatusLogs;

src/components/Expenses/ManageExpense.jsx

@@ -548,7 +548,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
           </div>
         </div>
 
-        <div className="d-flex justify-content-center gap-2">
+        <div className="d-flex justify-content-center gap-3">
           {" "}
           <button
             type="submit"

src/components/Expenses/ViewExpense.jsx

@@ -177,20 +177,19 @@ const ViewExpense = ({ ExpenseId }) => {
             <div className="text-muted">{data?.paymentMode?.name}</div>
           </div>
         </div>
-        <div className="col-md-6 mb-3">
+        {data?.gstNumber && (
-          <div className="d-flex">
+          <div className="col-md-6 mb-3">
-            <label
+            <div className="d-flex">
-              className="form-label me-2 mb-0 fw-semibold text-start"
+              <label
-              style={{ minWidth: "130px" }}
+                className="form-label me-2 mb-0 fw-semibold text-start"
-            >
+                style={{ minWidth: "130px" }}
-              GST Number :
+              >
-            </label>
+                GST Number :
-            <div className="text-muted">
+              </label>
-              {data?.gstNumber}
+              <div className="text-muted">{data?.gstNumber}</div>
             </div>
           </div>
-        </div>
+        )}
-       
 
         {/* Row 4 */}
         <div className="col-md-6 mb-3">
@@ -257,7 +256,7 @@ const ViewExpense = ({ ExpenseId }) => {
               >
                 Created By :
               </label>
-              <div className="d-flex align-items-center gap-1">
+              <div className="d-flex align-items-center">
                 <Avatar
                   size="xs"
                   classAvatar="m-0"
@@ -273,16 +272,26 @@ const ViewExpense = ({ ExpenseId }) => {
             </div>
           </div>
         )}
-         <div className="col-md-6 mb-3">
+        <div className="col-md-6 text-start">
-          <div className="d-flex">
+          <div className="d-flex align-items-center">
             <label
-              className="form-label me-2 mb-0 fw-semibold text-start"
+              className="form-label me-2 mb-0 fw-semibold"
               style={{ minWidth: "130px" }}
             >
-              Paid By :
+              Paid By:
             </label>
-            <div className="text-muted">
+            <div className="d-flex align-items-center ">
-              {data?.paidBy?.firstName} {data?.paidBy?.lastName}
+              <Avatar
+                size="xs"
+                classAvatar="m-0"
+                firstName={data.paidBy?.firstName}
+                lastName={data.paidBy?.lastName}
+              />
+              <span className="text-muted">
+                {`${data.paidBy?.firstName ?? ""} ${
+                  data.paidBy?.lastName ?? ""
+                }`.trim() || "N/A"}
+              </span>
             </div>
           </div>
         </div>
@@ -363,7 +372,7 @@ const ViewExpense = ({ ExpenseId }) => {
           )}
         </div>
       )}
-     <hr className="divider my-1 border-2 divider-primary my-2"/>
+      <hr className="divider my-1 border-2 divider-primary my-2" />
 
       {Array.isArray(data?.nextStatus) && data.nextStatus.length > 0 && (
         <>

src/components/common/DatePicker.jsx

@@ -22,22 +22,23 @@ const DatePicker = ({
   });
 
   useEffect(() => {
-    if (inputRef.current) {
+  if (inputRef.current) {
-      flatpickr(inputRef.current, {
+    const parsedMinDate = minDate ? new Date(minDate.split("T")[0]) : undefined;
-        dateFormat: "d-m-Y",
+
-        allowInput: allowText, 
+    flatpickr(inputRef.current, {
-        defaultDate: value
+      dateFormat: "d-m-Y",
-          ? flatpickr.parseDate(value, "Y-m-d")
+      allowInput: allowText,
-          : null,
+      defaultDate: value ? flatpickr.parseDate(value, "Y-m-d") : null,
-        maxDate:maxDate,
+      maxDate: maxDate,
-        minDate:new Date(minDate?.split("T")[0]) ?? undefined,
+      minDate: parsedMinDate,
-        onChange: function (selectedDates, dateStr) {
+      onChange: function (selectedDates, dateStr) {
-          onChange(dateStr); 
+        onChange(dateStr);
-        },
+      },
-        ...rest
+      ...rest
-      });
+    });
-    }
+  }
-  }, [inputRef]);
+}, [inputRef, minDate, maxDate]);
+
 
   return (
     <div className={` position-relative ${className}`}>

src/hooks/usePositionTracker.js

@@ -1,20 +1,27 @@
 import { useState, useEffect } from 'react';
 import showToast from '../services/toastService';
 
-export const usePositionTracker = () => {
+let hasShownLocationErrorToast = false; // global flag
-    const [coords, setCoords] = useState({ latitude: 0, longitude: 0 });
 
-    useEffect(() => {
+export const usePositionTracker = () => {
-      const locationID = navigator.geolocation.watchPosition(
+  const [coords, setCoords] = useState({ latitude: 0, longitude: 0 });
-        ({ coords }) => {
+
-          setCoords(coords);
+  useEffect(() => {
-        },
+    const locationID = navigator.geolocation.watchPosition(
-        (error) => {
+      ({ coords }) => {
-          showToast("Please Allow Location","warn");
+        setCoords(coords);
-        },
+      },
-        { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 }
+      (error) => {
-      );
+        if (!hasShownLocationErrorToast) {
-      return () => navigator.geolocation.clearWatch(locationID);
+          showToast("Please Allow Location", "warn");
-    }, []);
+          hasShownLocationErrorToast = true;
-    return coords;
+        }
-  };
+      },
+      { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 }
+    );
+
+    return () => navigator.geolocation.clearWatch(locationID);
+  }, []);
+
+  return coords;
+};