Merge pull request 'Implemented date-wise grouping of the Attendance Log based on the selected date range.' (#71) from Ashutosh_Bug#180_Display_Attendance_Log_BasedOnDate into Issue_May_2W

Reviewed-on: #71

src/components/Activities/AttendcesLogs.jsx

@@ -16,39 +16,54 @@ const AttendanceLog = ({ handleModalData, projectId }) => {
   const dispatch = useDispatch();
   const { data, loading, error } = useSelector((store) => store.attendanceLogs);
   const [isRefreshing, setIsRefreshing] = useState(true);
+  const [dates, setDates] = useState([]);
 
   const today = new Date();
   today.setHours(0, 0, 0, 0); // Strip time to compare dates only
-  
+
   const isSameDay = (dateStr) => {
     if (!dateStr) return false;
     const d = new Date(dateStr);
     d.setHours(0, 0, 0, 0);
     return d.getTime() === today.getTime();
   };
-  
+
   const isBeforeToday = (dateStr) => {
     if (!dateStr) return false;
     const d = new Date(dateStr);
     d.setHours(0, 0, 0, 0);
     return d.getTime() < today.getTime();
   };
-  
+
   const sortByName = (a, b) => {
     const nameA = a.firstName.toLowerCase() + a.lastName.toLowerCase();
     const nameB = b.firstName.toLowerCase() + b.lastName.toLowerCase();
     return nameA.localeCompare(nameB);
   };
-  
-  const group1 = data.filter(d => d.activity === 1 && isSameDay(d.checkInTime)).sort(sortByName);
-  const group2 = data.filter(d => d.activity === 4 && isSameDay(d.checkOutTime)).sort(sortByName);
-  const group3 = data.filter(d => d.activity === 1 && isBeforeToday(d.checkInTime)).sort(sortByName);
-  const group4 = data.filter(d => d.activity === 4 && isBeforeToday(d.checkOutTime)).sort(sortByName);
-  const group5 = data.filter(d => d.activity === 5).sort(sortByName);
-  
-  const sortedFinalList = [...group1, ...group2, ...group3, ...group4, ...group5];
 
-  const currentDate = new Date().toLocaleDateString( "en-CA" );
+  const group1 = data
+    .filter((d) => d.activity === 1 && isSameDay(d.checkInTime))
+    .sort(sortByName);
+  const group2 = data
+    .filter((d) => d.activity === 4 && isSameDay(d.checkOutTime))
+    .sort(sortByName);
+  const group3 = data
+    .filter((d) => d.activity === 1 && isBeforeToday(d.checkInTime))
+    .sort(sortByName);
+  const group4 = data
+    .filter((d) => d.activity === 4 && isBeforeToday(d.checkOutTime))
+    .sort(sortByName);
+  const group5 = data.filter((d) => d.activity === 5).sort(sortByName);
+
+  const sortedFinalList = [
+    ...group1,
+    ...group2,
+    ...group3,
+    ...group4,
+    ...group5,
+  ];
+
+  const currentDate = new Date().toLocaleDateString("en-CA");
   const { currentPage, totalPages, currentItems, paginate } = usePagination(
     sortedFinalList,
     5
@@ -65,9 +80,17 @@ const AttendanceLog = ({ handleModalData, projectId }) => {
         })
       );
     }
-  }, [ dateRange, projectId, isRefreshing ] );
+  }, [dateRange, projectId, isRefreshing]);
-  
+
-  
+  useEffect(() => {
+    const attendanceDate = [
+      ...new Set(sortedFinalList.map((item) => item.checkInTime.split("T")[0])),
+    ].sort((a, b) => new Date(b) - new Date(a));
+    if(attendanceDate != dates){
+    setDates(attendanceDate);
+    }
+  }, [data]);
+
   return (
     <>
       <div
@@ -80,16 +103,15 @@ const AttendanceLog = ({ handleModalData, projectId }) => {
         <div className="col-md-2 m-0 text-end">
           <i
             className={`bx bx-refresh cursor-pointer fs-4 ${
-              loading ? "spin":"" 
+              loading ? "spin" : ""
             }`}
             title="Refresh"
-            onClick={() => setIsRefreshing( !isRefreshing )}
+            onClick={() => setIsRefreshing(!isRefreshing)}
-            
           />
         </div>
       </div>
       <div className="table-responsive text-nowrap">
-        {(data && data.length > 0 ) && (
+        {data && data.length > 0 && (
           <table className="table mb-0">
             <thead>
               <tr>
@@ -109,95 +131,107 @@ const AttendanceLog = ({ handleModalData, projectId }) => {
             </thead>
             <tbody>
               {loading && <td colSpan={5}>Loading...</td>}
-              {currentItems?.map( ( attendance, index ) => (
+              {dates.map((date, i) => {
-                <tr key={index}>
+                return (
-                  <td colSpan={2}>
+                  <React.Fragment key={i}>
-                    <div className="d-flex justify-content-start align-items-center">
+                    {currentItems.some(item => item.checkInTime.split("T")[0] === date) && <tr className="table-row-header">
-                      <Avatar
+                      <td colSpan={7} className="text-start">
-                        firstName={attendance.firstName}
+                        <strong>{date}</strong>
-                        lastName={attendance.lastName}
+                      </td>
-                      />
+                    </tr>}
-                      <div className="d-flex flex-column">
+                    {currentItems
-                        <a href="#" className="text-heading text-truncate">
+                      ?.filter((item) => item.checkInTime.includes(date))
-                          <span className="fw-normal">
+                      .map((attendance, index) => (
-                            {attendance.firstName} {attendance.lastName}
+                        <tr key={index}>
-                          </span>
+                          <td colSpan={2}>
-                        </a>
+                            <div className="d-flex justify-content-start align-items-center">
-                      </div>
+                              <Avatar
-                    </div>
+                                firstName={attendance.firstName}
-                  </td>
+                                lastName={attendance.lastName}
-                  <td>
+                              />
-                    {" "}
+                              <div className="d-flex flex-column">
-                    {moment( attendance.checkInTime ).format( "DD-MMM-YYYY" )}
+                                <a
-                  </td>
+                                  href="#"
-                  <td>{convertShortTime( attendance.checkInTime )}</td>
+                                  className="text-heading text-truncate"
-                  <td>
+                                >
-                    {attendance.checkOutTime
+                                  <span className="fw-normal">
-                      ? convertShortTime( attendance.checkOutTime )
+                                    {attendance.firstName} {attendance.lastName}
-                      : "--"}
+                                  </span>
-                  </td>
+                                </a>
-                  <td className="text-center">
+                              </div>
-                    <RenderAttendanceStatus
+                            </div>
-                      attendanceData={attendance}
+                          </td>
-                      handleModalData={handleModalData}
+                          <td>
-                      Tab={2}
+                            {" "}
-                      currentDate={currentDate}
+                            {moment(attendance.checkInTime).format(
-                    />
+                              "DD-MMM-YYYY"
-                  </td>
+                            )}
-                </tr>
+                          </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={currentDate}
+                            />
+                          </td>
+                        </tr>
+                      ))}
+                  </React.Fragment>
+                );
+              })}
             </tbody>
           </table>
-        ) }
+        )}
-        {(!loading && data.length === 0) &&
+        {!loading && data.length === 0 && <span>No employee logs</span>}
-          <span>No employee logs</span>
+        {error && <td colSpan={5}>{error}</td>}
-        }
-       {error && <td colSpan={5}>{error}</td>}           
       </div>
       {!loading && (
-              <nav aria-label="Page ">
+        <nav aria-label="Page ">
-                <ul className="pagination pagination-sm justify-content-end py-1">
+          <ul className="pagination pagination-sm justify-content-end py-1">
-                  <li
+            <li className={`page-item  ${currentPage === 1 ? "disabled" : ""}`}>
-                    className={`page-item  ${
+              <button
-                      currentPage === 1 ? "disabled" : ""
+                className="page-link btn-xs"
-                    }`}
+                onClick={() => paginate(currentPage - 1)}
-                  >
+              >
-                    <button
+                &laquo;
-                      className="page-link btn-xs"
+              </button>
-                      onClick={() => paginate(currentPage - 1)}
+            </li>
-                    >
+            {[...Array(totalPages)].map((_, index) => (
-                      &laquo;
+              <li
-                    </button>
+                key={index}
-                  </li>
+                className={`page-item ${
-                  {[...Array(totalPages)].map((_, index) => (
+                  currentPage === index + 1 ? "active" : ""
-                    <li
+                }`}
-                      key={index}
+              >
-                      className={`page-item ${
+                <button
-                        currentPage === index + 1 ? "active" : ""
+                  className="page-link "
-                      }`}
+                  onClick={() => paginate(index + 1)}
-                    >
+                >
-                      <button
+                  {index + 1}
-                        className="page-link "
+                </button>
-                        onClick={() => paginate(index + 1)}
+              </li>
-                      >
+            ))}
-                        {index + 1}
+            <li
-                      </button>
+              className={`page-item ${
-                    </li>
+                currentPage === totalPages ? "disabled" : ""
-                  ))}
+              }`}
-                  <li
+            >
-                    className={`page-item ${
+              <button
-                      currentPage === totalPages ? "disabled" : ""
+                className="page-link "
-                    }`}
+                onClick={() => paginate(currentPage + 1)}
-                  >
+              >
-                    <button
+                &raquo;
-                      className="page-link "
+              </button>
-                      onClick={() => paginate(currentPage + 1)}
+            </li>
-                    >
+          </ul>
-                      &raquo;
+        </nav>
-                    </button>
-                  </li>
-                </ul>
-              </nav>
       )}
     </>
   );

src/pages/Activities/DailyTask.jsx

@@ -87,7 +87,6 @@ const DailyTask = () => {
 
   useEffect(() => {
     popoverRefs.current.forEach((el) => {
-      console.log(el);
       if (el) {
         new bootstrap.Popover(el, {
           trigger: "focus",