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,6 +16,7 @@ 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
@@ -40,15 +41,29 @@ const AttendanceLog = ({ handleModalData, projectId }) => {
     return nameA.localeCompare(nameB);
   };
 
-  const group1 = data.filter(d => d.activity === 1 && isSameDay(d.checkInTime)).sort(sortByName);
+  const group1 = data
-  const group2 = data.filter(d => d.activity === 4 && isSameDay(d.checkOutTime)).sort(sortByName);
+    .filter((d) => d.activity === 1 && isSameDay(d.checkInTime))
-  const group3 = data.filter(d => d.activity === 1 && isBeforeToday(d.checkInTime)).sort(sortByName);
+    .sort(sortByName);
-  const group4 = data.filter(d => d.activity === 4 && isBeforeToday(d.checkOutTime)).sort(sortByName);
+  const group2 = data
-  const group5 = data.filter(d => d.activity === 5).sort(sortByName);
+    .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 sortedFinalList = [
+    ...group1,
+    ...group2,
+    ...group3,
+    ...group4,
+    ...group5,
+  ];
 
-  const currentDate = new Date().toLocaleDateString( "en-CA" );
+  const currentDate = new Date().toLocaleDateString("en-CA");
   const { currentPage, totalPages, currentItems, paginate } = usePagination(
     sortedFinalList,
     5
@@ -65,8 +80,16 @@ 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 (
     <>
@@ -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,7 +131,17 @@ const AttendanceLog = ({ handleModalData, projectId }) => {
             </thead>
             <tbody>
               {loading && <td colSpan={5}>Loading...</td>}
-              {currentItems?.map( ( attendance, index ) => (
+              {dates.map((date, i) => {
+                return (
+                  <React.Fragment key={i}>
+                    {currentItems.some(item => item.checkInTime.split("T")[0] === date) && <tr className="table-row-header">
+                      <td colSpan={7} className="text-start">
+                        <strong>{date}</strong>
+                      </td>
+                    </tr>}
+                    {currentItems
+                      ?.filter((item) => item.checkInTime.includes(date))
+                      .map((attendance, index) => (
                         <tr key={index}>
                           <td colSpan={2}>
                             <div className="d-flex justify-content-start align-items-center">
@@ -118,7 +150,10 @@ const AttendanceLog = ({ handleModalData, projectId }) => {
                                 lastName={attendance.lastName}
                               />
                               <div className="d-flex flex-column">
-                        <a href="#" className="text-heading text-truncate">
+                                <a
+                                  href="#"
+                                  className="text-heading text-truncate"
+                                >
                                   <span className="fw-normal">
                                     {attendance.firstName} {attendance.lastName}
                                   </span>
@@ -128,12 +163,14 @@ const AttendanceLog = ({ handleModalData, projectId }) => {
                           </td>
                           <td>
                             {" "}
-                    {moment( attendance.checkInTime ).format( "DD-MMM-YYYY" )}
+                            {moment(attendance.checkInTime).format(
+                              "DD-MMM-YYYY"
+                            )}
                           </td>
-                  <td>{convertShortTime( attendance.checkInTime )}</td>
+                          <td>{convertShortTime(attendance.checkInTime)}</td>
                           <td>
                             {attendance.checkOutTime
-                      ? convertShortTime( attendance.checkOutTime )
+                              ? convertShortTime(attendance.checkOutTime)
                               : "--"}
                           </td>
                           <td className="text-center">
@@ -145,23 +182,20 @@ const AttendanceLog = ({ handleModalData, projectId }) => {
                             />
                           </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>}
       </div>
       {!loading && (
         <nav aria-label="Page ">
           <ul className="pagination pagination-sm justify-content-end py-1">
-                  <li
+            <li className={`page-item  ${currentPage === 1 ? "disabled" : ""}`}>
-                    className={`page-item  ${
-                      currentPage === 1 ? "disabled" : ""
-                    }`}
-                  >
               <button
                 className="page-link btn-xs"
                 onClick={() => paginate(currentPage - 1)}

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",