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 || [])]
-  .sort((a, b) => new Date(b.updateAt) - new Date(a.updateAt))
-  .slice(0, visibleCount);
+  const sortedLogs = useMemo(() => {
+    if (!data?.expenseLogs) return [];
+    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) => (
-          <div
-            key={log.id}
-            className="col-12 d-flex align-items-start mb-1"
-          >
+        {logsToShow.map((log) => (
+          <div 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 >
                 <div className="flex">
                   <span>{`${log.updatedBy.firstName} ${log.updatedBy.lastName}`}</span>
                   <small className="text-secondary text-tiny ms-2">
                     <em>{log.action}</em>
                   </small>
-                      <span className="text-tiny text-secondary d-block small">{formatUTCToLocalTime(log?.updateAt)}</span>
-                    </div>
+                  <span className="text-tiny text-secondary d-block" >
+                    {formatUTCToLocalTime(log.updateAt,true)}
+                  </span>
                 </div>
                 <div className="d-flex align-items-center text-muted small mt-1">
-                    <span className="small">{log.comment}</span>
-                  </div>
+                  <span>{log.comment}</span>
                 </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,6 +177,7 @@ const ViewExpense = ({ ExpenseId }) => {
             <div className="text-muted">{data?.paymentMode?.name}</div>
           </div>
         </div>
+        {data?.gstNumber && (
           <div className="col-md-6 mb-3">
             <div className="d-flex">
               <label
@@ -185,12 +186,10 @@ const ViewExpense = ({ ExpenseId }) => {
               >
                 GST Number :
               </label>
-            <div className="text-muted">
-              {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="d-flex">
+        <div className="col-md-6 text-start">
+          <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">
-              {data?.paidBy?.firstName} {data?.paidBy?.lastName}
+            <div className="d-flex align-items-center ">
+              <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

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

src/hooks/usePositionTracker.js

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