Todays date is not visible in Daily Progress Report.

src/components/Activities/Attendance.jsx

@@ -42,13 +42,13 @@ const Attendance = ({ attendance, getRole, handleModalData }) => {
           <>
             <table className="table ">
               <thead>
-                <tr className="border-top-0" style={{ textAlign: 'left' }}>
+                <tr className="border-none" style={{ textAlign: 'left' }}>
-                  <td >
+                  <td style={{ borderBottom: 'none' }}>
                     <strong>Date : {todayDate.toLocaleDateString('en-GB')}</strong>
                   </td>
-                  <td style={{ paddingLeft: '20px' }}>
+                  <td style={{ paddingLeft: '20px', borderBottom: 'none' }}></td>
-                  </td>
                 </tr>
+
                 <tr>
                   <th className="border-top-0" colSpan={2}>
                     Name

src/components/Activities/AttendcesLogs.jsx

@@ -122,109 +122,112 @@ const AttendanceLog = ({ handleModalData, projectId, showOnlyCheckout }) => {
 
   return (
     <>
-      <div
+      
-        className="dataTables_length text-start py-2 d-flex justify-content-between"
+        <div
-        id="DataTables_Table_0_length"
+          className="dataTables_length text-start py-2 d-flex justify-content-between"
-      >
+          id="DataTables_Table_0_length"
-        <div className="col-md-3 my-0 ">
+        >
-          <DateRangePicker onRangeChange={setDateRange} defaultStartDate={yesterday}  />
+          <div className="col-md-3 my-0 ">
+            <DateRangePicker onRangeChange={setDateRange} defaultStartDate={yesterday} />
+          </div>
+          <div className="col-md-2 m-0 text-end">
+            <i
+              className={`bx bx-refresh cursor-pointer fs-4 ${loading || isRefreshing ? "spin" : ""
+                }`}
+              title="Refresh"
+              onClick={() => setIsRefreshing(true)}
+            />
+          </div>
         </div>
-        <div className="col-md-2 m-0 text-end">
+        <div className="table-responsive text-nowrap" style={{ minHeight: "250px" }}>
-          <i
+          {data && data.length > 0 && (
-            className={`bx bx-refresh cursor-pointer fs-4 ${loading || isRefreshing ? "spin" : ""
+            <table className="table mb-0">
-              }`}
+              <thead>
-            title="Refresh"
-            onClick={() => setIsRefreshing(true)}
-          />
-        </div>
-      </div>
-      <div className="table-responsive text-nowrap">
-        {data && data.length > 0 && (
-          <table className="table mb-0">
-            <thead>
-              <tr>
-                <th className="border-top-1" colSpan={2}>
-                  Name
-                </th>
-                <th className="border-top-1">Date</th>
-                <th>
-                  <i className="bx bxs-down-arrow-alt text-success"></i> Check-In
-                </th>
-                <th>
-                  <i className="bx bxs-up-arrow-alt text-danger"></i> Check-Out
-                </th>
-                <th>Action</th>
-              </tr>
-            </thead>
-            <tbody>
-              {(loading || isRefreshing) && (
                 <tr>
-                  <td colSpan={6}>Loading...</td>
+                  <th className="border-top-1" colSpan={2}>
+                    Name
+                  </th>
+                  <th className="border-top-1">Date</th>
+                  <th>
+                    <i className="bx bxs-down-arrow-alt text-success"></i> Check-In
+                  </th>
+                  <th>
+                    <i className="bx bxs-up-arrow-alt text-danger"></i> Check-Out
+                  </th>
+                  <th>Action</th>
                 </tr>
-              )}
+              </thead>
-              {!loading && !isRefreshing && paginatedAttendances.reduce((acc, attendance, index, arr) => {
+              <tbody>
-                const currentDate = moment(attendance.checkInTime || attendance.checkOutTime).format("YYYY-MM-DD");
+                {(loading || isRefreshing) && (
-                const previousAttendance = arr[index - 1];
+                  <tr>
-                const previousDate = previousAttendance ? moment(previousAttendance.checkInTime || previousAttendance.checkOutTime).format("YYYY-MM-DD") : null;
+                    <td colSpan={6}>Loading...</td>
+                  </tr>
+                )}
+                {!loading && !isRefreshing && paginatedAttendances.reduce((acc, attendance, index, arr) => {
+                  const currentDate = moment(attendance.checkInTime || attendance.checkOutTime).format("YYYY-MM-DD");
+                  const previousAttendance = arr[index - 1];
+                  const previousDate = previousAttendance ? moment(previousAttendance.checkInTime || previousAttendance.checkOutTime).format("YYYY-MM-DD") : null;
 
-                if (!previousDate || currentDate !== previousDate) {
+                  if (!previousDate || currentDate !== previousDate) {
+                    acc.push(
+                      <tr key={`header-${currentDate}`} className="table-row-header">
+                        <td colSpan={6} className="text-start">
+                          <strong>{moment(currentDate).format("DD-MM-YYYY")}</strong>
+                        </td>
+                      </tr>
+                    );
+                  }
                   acc.push(
-                    <tr key={`header-${currentDate}`} className="table-row-header">
+                    <tr key={index}>
-                      <td colSpan={6} className="text-start">
+                      <td colSpan={2}>
-                        <strong>{moment(currentDate).format("DD-MM-YYYY")}</strong>
+                        <div className="d-flex justify-content-start align-items-center">
+                          <Avatar
+                            firstName={attendance.firstName}
+                            lastName={attendance.lastName}
+                          />
+                          <div className="d-flex flex-column">
+                            <a
+                              href="#"
+                              className="text-heading text-truncate"
+                            >
+                              <span className="fw-normal">
+                                {attendance.firstName} {attendance.lastName}
+                              </span>
+                            </a>
+                          </div>
+                        </div>
+                      </td>
+                      <td>
+                        {moment(attendance.checkInTime || attendance.checkOutTime).format("DD-MMM-YYYY")}
+                      </td>
+                      <td>{convertShortTime(attendance.checkInTime)}</td>
+                      <td>
+                        {attendance.checkOutTime ? convertShortTime(attendance.checkOutTime) : "--"}
+                      </td>
+                      <td className="text-center">
+                        <RenderAttendanceStatus
+                          attendanceData={attendance}
+                          handleModalData={handleModalData}
+                          Tab={2}
+                          currentDate={today.toLocaleDateString("en-CA")}
+                        />
                       </td>
                     </tr>
                   );
-                }
+                  return acc;
-                acc.push(
+                }, [])}
-                  <tr key={index}>
+              </tbody>
-                    <td colSpan={2}>
+            </table>
-                      <div className="d-flex justify-content-start align-items-center">
+
-                        <Avatar
+
-                          firstName={attendance.firstName}
+          )}
-                          lastName={attendance.lastName}
+          {!loading && !isRefreshing && data.length === 0 && <span>No employee logs</span>}
-                        />
+          {error && !loading && !isRefreshing && (
-                        <div className="d-flex flex-column">
+            <tr>
-                          <a
+              <td colSpan={6}>{error}</td>
-                            href="#"
+            </tr>
-                            className="text-heading text-truncate"
+          )}
-                          >
+        </div>
-                            <span className="fw-normal">
-                              {attendance.firstName} {attendance.lastName}
-                            </span>
-                          </a>
-                        </div>
-                      </div>
-                    </td>
-                    <td>
-                      {moment(attendance.checkInTime || attendance.checkOutTime).format("DD-MMM-YYYY")}
-                    </td>
-                    <td>{convertShortTime(attendance.checkInTime)}</td>
-                    <td>
-                      {attendance.checkOutTime ? convertShortTime(attendance.checkOutTime) : "--"}
-                    </td>
-                    <td className="text-center">
-                      <RenderAttendanceStatus
-                        attendanceData={attendance}
-                        handleModalData={handleModalData}
-                        Tab={2}
-                        currentDate={today.toLocaleDateString("en-CA")}
-                      />
-                    </td>
-                  </tr>
-                );
-                return acc;
-              }, [])}
-            </tbody>
-          </table>
-        )}
-        {!loading && !isRefreshing && data.length === 0 && <span>No employee logs</span>}
-        {error && !loading && !isRefreshing && (
-          <tr>
-            <td colSpan={6}>{error}</td>
-          </tr>
-        )}
-      </div>
       {!loading && !isRefreshing && processedData.length > 10 && (
         <nav aria-label="Page ">
           <ul className="pagination pagination-sm justify-content-end py-1">

src/components/Activities/Regularization.jsx

@@ -31,7 +31,7 @@ const Regularization = ({ handleRequest }) => {
   );
 
   return (
-    <div className="table-responsive text-nowrap">
+    <div className="table-responsive text-nowrap" style={{minHeight:"300px"}}>
       <table className="table mb-0">
         <thead>
           <tr>
@@ -47,7 +47,7 @@ const Regularization = ({ handleRequest }) => {
           </tr>
         </thead>
         <tbody>
-          {loading && <td colSpan={5}>Loading...</td>}
+          {loading && <td colSpan={6} className="text-center py-5">Loading...</td>}
 
           {!loading &&
             (regularizes?.length > 0 ? (
@@ -55,7 +55,7 @@ const Regularization = ({ handleRequest }) => {
                 <tr key={index}>
                   <td colSpan={2}>
                     <div className="d-flex justify-content-start align-items-center">
-                      <Avatar
+                      <Avatar 
                         firstName={att.firstName}
                         lastName={att.lastName}
                       ></Avatar>
@@ -88,12 +88,17 @@ const Regularization = ({ handleRequest }) => {
               ))
             ) : (
               <tr>
-                <td colSpan={5}>No Record Found</td>
+                <td colSpan={6}
+                  className="text-center" style={{
+                    height: "200px",
+                    verticalAlign: "middle",
+                    borderBottom: "none",
+                  }}>No Record Found</td>
               </tr>
             ))}
         </tbody>
       </table>
-      {!loading && (
+      {!loading >10 && (
         <nav aria-label="Page ">
           <ul className="pagination pagination-sm justify-content-end py-1">
             <li className={`page-item  ${currentPage === 1 ? "disabled" : ""}`}>
@@ -107,9 +112,8 @@ const Regularization = ({ handleRequest }) => {
             {[...Array(totalPages)].map((_, index) => (
               <li
                 key={index}
-                className={`page-item ${
+                className={`page-item ${currentPage === index + 1 ? "active" : ""
-                  currentPage === index + 1 ? "active" : ""
+                  }`}
-                }`}
               >
                 <button
                   className="page-link "
@@ -120,9 +124,8 @@ const Regularization = ({ handleRequest }) => {
               </li>
             ))}
             <li
-              className={`page-item ${
+              className={`page-item ${currentPage === totalPages ? "disabled" : ""
-                currentPage === totalPages ? "disabled" : ""
+                }`}
-              }`}
             >
               <button
                 className="page-link "

src/components/common/DateRangePicker.jsx

@@ -1,21 +1,27 @@
 import React, { useEffect, useRef } from "react";
 
-const DateRangePicker = ({ onRangeChange, DateDifference = 7, defaultStartDate = new Date() - 1 }) => {
+const DateRangePicker = ({
+  onRangeChange,
+  DateDifference = 7,
+  endDateMode = "yesterday", // "today" or "yesterday"
+}) => {
   const inputRef = useRef(null);
 
   useEffect(() => {
-    const today = new Date();;
+    const endDate = new Date();
-    today.setDate(today.getDate() - 1);
+    if (endDateMode === "yesterday") {
-    const fifteenDaysAgo = new Date();
+      endDate.setDate(endDate.getDate() - 1);
-   
+    }
-    fifteenDaysAgo.setDate(today.getDate() - DateDifference);
+
+    const startDate = new Date();
+    startDate.setDate(endDate.getDate() - DateDifference);
 
     const fp = flatpickr(inputRef.current, {
       mode: "range",
-      dateFormat: "Y-m-d",           // Format for backend (actual input value)
+      dateFormat: "Y-m-d",
-      altInput: true,                // Enables a visually different field
+      altInput: true,
       altFormat: "d-m-Y",
-      defaultDate: [fifteenDaysAgo, today],
+      defaultDate: [startDate, endDate],
       static: true,
       clickOpens: true,
       onChange: (selectedDates, dateStr) => {
@@ -25,16 +31,14 @@ const DateRangePicker = ({ onRangeChange, DateDifference = 7, defaultStartDate =
     });
 
     onRangeChange?.({
-      // startDate: fifteenDaysAgo.toISOString().split("T")[0],
+      startDate: startDate.toLocaleDateString("en-CA"),
-      // endDate: today.toISOString().split("T")[0],
+      endDate: endDate.toLocaleDateString("en-CA"),
-      startDate: fifteenDaysAgo.toLocaleDateString("en-CA"),
-      endDate: today.toLocaleDateString("en-CA"),
     });
 
     return () => {
       fp.destroy();
     };
-  }, [onRangeChange]);
+  }, [onRangeChange, DateDifference, endDateMode]);
 
   return (
     <input
@@ -47,4 +51,4 @@ const DateRangePicker = ({ onRangeChange, DateDifference = 7, defaultStartDate =
   );
 };
 
-export default DateRangePicker;
+export default DateRangePicker;

src/pages/Activities/DailyTask.jsx

@@ -141,6 +141,7 @@ const DailyTask = () => {
               <div className="col-6 text-start">
                 <DateRangePicker
                   onRangeChange={setDateRange}
+                  endDateMode="today"
                   DateDifference="6"
                   dateFormat="DD-MM-YYYY"
                 />

src/pages/employee/AttendancesEmployeeRecords.jsx

@@ -141,7 +141,7 @@ const AttendancesEmployeeRecords = ({ employee }) => {
           id="DataTables_Table_0_length"
         >
           <div className="col-md-3 my-0 ">
-            <DateRangePicker onRangeChange={setDateRange} />
+            <DateRangePicker onRangeChange={setDateRange} endDateMode="yesterday"/>
           </div>
           <div className="col-md-2 m-0 text-end">
             <i