fixed date formating inside attenace logs and expense list

src/components/Activities/AttendcesLogs.jsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState, useMemo, useCallback } from "react";
 import moment from "moment";
 import Avatar from "../common/Avatar";
-import { convertShortTime } from "../../utils/dateUtils";
+import { convertShortTime, formatUTCToLocalTime } from "../../utils/dateUtils";
 import RenderAttendanceStatus from "./RenderAttendanceStatus";
 import { useSelector, useDispatch } from "react-redux";
 import DateRangePicker from "../common/DateRangePicker";
@@ -228,23 +228,12 @@ const AttendanceLog = ({ handleModalData, searchTerm, organizationId }) => {
         className="dataTables_length text-start py-2 d-flex justify-content-between"
         id="DataTables_Table_0_length"
       >
-          <div className="d-flex align-items-center my-0 ms-sm-8 ">
+          <div className=" col-12">
           <DateRangePicker
             onRangeChange={setDateRange}
             defaultStartDate={yesterday}
           />
-          <div className="form-check form-switch text-start ms-1 ms-md-5 align-items-center mb-0">
+      
-            <input
-              type="checkbox"
-              className="form-check-input"
-              role="switch"
-              disabled={isFetching}
-              id="inactiveEmployeesCheckbox"
-              checked={showPending}
-              onChange={(e) => setShowPending(e.target.checked)}
-            />
-            <label className="form-check-label ms-0">Show Pending</label>
-          </div>
         </div>
 
       </div>
@@ -292,8 +281,8 @@ const AttendanceLog = ({ handleModalData, searchTerm, organizationId }) => {
                       className="table-row-header"
                     >
                       <td colSpan={8} className="text-start">
-                        <strong>
+                        <strong className="mx-2">
-                          {moment(currentDate).format("DD-MM-YYYY")}
+                         {formatUTCToLocalTime(currentDate)}
                         </strong>
                       </td>
                     </tr>

src/components/Dashboard/Attendance.jsx

@@ -6,10 +6,9 @@ import { useSelectedProject } from "../../hooks/useSelectedProject";
 
 const Attendance = () => {
   const { projects } = useProjects();
-  const today = new Date().toISOString().split("T")[0]; // YYYY-MM-DD
+  const today = new Date().toISOString().split("T")[0]; 
   const [selectedDate, setSelectedDate] = useState(today);
 
-  //  central project selection hook
 const selectedProjectId = useSelectedProject()
 
   const {
@@ -136,7 +135,6 @@ const selectedProjectId = useSelectedProject()
           </div>
         )}
 
-        {/* Details */}
         {AttendanceData?.activeTab === "Details" && (
           <div className="table-responsive" style={{ maxHeight: "300px" }}>
             <table className="table table-hover mb-0 text-start">

src/components/Expenses/ExpenseList.jsx

@@ -124,7 +124,7 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
     },
     {
       key: "expensesType",
-      label: "Expense Type",
+      label: "Expense Category",
       getValue: (e) => e.expensesType?.name || "N/A",
       align: "text-start",
     },
@@ -250,10 +250,10 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
                       (col.isAlwaysVisible || groupBy !== col.key) && (
                         <th
                           key={col.key}
-                          className={`sorting d-table-cell`}
+                          className={`sorting d-table-cell `}
                           aria-sort="descending"
                         >
-                          <div className={`${col.align}`}>{col.label}</div>
+                          <div className={`${col.align} p`}>{col.label}</div>
                         </th>
                       )
                   )}
@@ -267,8 +267,8 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
                   Object.values(grouped).map(({ key, displayField, items }) => (
                     <React.Fragment key={key}>
                       <tr className="tr-group text-dark">
-                        <td colSpan={8} className="text-start">
+                        <td colSpan={8} className="text-start ">
-                          <div className="d-flex align-items-center">
+                          <div className="d-flex align-items-center px-2">
                             {" "}
                             <small className="fs-6 py-1">
                               {displayField} :{" "}
@@ -288,7 +288,7 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
                               (col.isAlwaysVisible || groupBy !== col.key) && (
                                 <td
                                   key={col.key}
-                                  className={`d-table-cell ${col.align ?? ""}`}
+                                  className={`d-table-cell  ${col.align ?? ""}`}
                                 >
                                   {col.customRender
                                     ? col.customRender(expense)

src/components/common/DateRangePicker.jsx

@@ -63,30 +63,27 @@ const DateRangePicker = ({
   };
 
   return (
-    <div className={`position-relative  justify-content-center w-max `}>
+    <div className={`position-relative w-max   `}>
       <input
         type="text"
-        className="form-control form-control-sm w-100 pe-2 fw-medium"
+        className="form-control form-control-sm ps-2 pe-3 me-2 cursor-pointer fw-medium"
         placeholder="From to End"
         id="flatpickr-range"
         ref={inputRef}
       />
 
-      <i
+      <span
-        className="bx bx-calendar calendar-icon cursor-pointer position-absolute top-50 end-0 translate-middle-y me-2 "
+        className="position-absolute top-50 end-0 pe-1 translate-middle-y cursor-pointer"
         onClick={handleIconClick}
-      />
+      >
+        <i className="bx bx-calendar bx-sm fs-5 text-muted"></i>
+      </span>
     </div>
   );
 };
 
 export default DateRangePicker;
 
-
-
-
-
-
 export const DateRangePicker1 = ({
   startField = "startDate",
   endField = "endDate",
@@ -173,13 +170,12 @@ export const DateRangePicker1 = ({
     }
   }, [resetSignal, defaultRange, setValue, startField, endField]);
 
-
   const start = getValues(startField);
   const end = getValues(endField);
   const formattedValue = start && end ? `${start} To ${end}` : "";
 
   return (
-    <div className={`position-relative ${className} w-max   `} >
+    <div className={`position-relative ${className} w-max   `}>
       <input
         type="text"
         className="form-control form-control-sm ps-2 pe-3 me-2 cursor-pointer fw-medium"
@@ -201,4 +197,3 @@ export const DateRangePicker1 = ({
     </div>
   );
 };
-