src/components/Activities/Attendance.jsx

@@ -10,7 +10,6 @@ import {ITEMS_PER_PAGE} from "../../utils/constants";
 const Attendance = ({ attendance, getRole, handleModalData }) => {
   const [loading, setLoading] = useState(false);
   const navigate = useNavigate();
-  const [todayDate, setTodayDate] = useState(new Date());
 
   // Ensure attendance is an array
   const attendanceList = Array.isArray(attendance) ? attendance : [];
@@ -43,13 +42,6 @@ const Attendance = ({ attendance, getRole, handleModalData }) => {
           <>
             <table className="table ">
               <thead>
-                <tr className="border-top-0" style={{ textAlign: 'left' }}>
-                  <td >
-                    <strong>Date : {todayDate.toLocaleDateString('en-GB')}</strong>
-                  </td>
-                  <td style={{ paddingLeft: '20px' }}>
-                  </td>
-                </tr>
                 <tr>
                   <th className="border-top-0" colSpan={2}>
                     Name
@@ -135,8 +127,9 @@ const Attendance = ({ attendance, getRole, handleModalData }) => {
               <nav aria-label="Page ">
                 <ul className="pagination pagination-sm justify-content-end py-1">
                   <li
-                    className={`page-item  ${currentPage === 1 ? "disabled" : ""
+                    className={`page-item  ${
-                      }`}
+                      currentPage === 1 ? "disabled" : ""
+                    }`}
                   >
                     <button
                       className="page-link btn-xs"
@@ -148,8 +141,9 @@ const Attendance = ({ attendance, getRole, handleModalData }) => {
                   {[...Array(totalPages)].map((_, index) => (
                     <li
                       key={index}
-                      className={`page-item ${currentPage === index + 1 ? "active" : ""
+                      className={`page-item ${
-                        }`}
+                        currentPage === index + 1 ? "active" : ""
+                      }`}
                     >
                       <button
                         className="page-link "
@@ -160,8 +154,9 @@ const Attendance = ({ attendance, getRole, handleModalData }) => {
                     </li>
                   ))}
                   <li
-                    className={`page-item ${currentPage === totalPages ? "disabled" : ""
+                    className={`page-item ${
-                      }`}
+                      currentPage === totalPages ? "disabled" : ""
+                    }`}
                   >
                     <button
                       className="page-link "

src/components/Activities/AttendcesLogs.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useMemo, useCallback } from "react";
+import React, { useEffect, useState } from "react";
 import moment from "moment";
 import Avatar from "../common/Avatar";
 import { convertShortTime } from "../../utils/dateUtils";
@@ -7,35 +7,20 @@ import { useSelector, useDispatch } from "react-redux";
 import { fetchAttendanceData } from "../../slices/apiSlice/attedanceLogsSlice";
 import DateRangePicker from "../common/DateRangePicker";
 import { getCachedData } from "../../slices/apiDataManager";
+import usePagination from "../../hooks/usePagination";
+import {ITEMS_PER_PAGE} from "../../utils/constants";
 
-const usePagination = (data, itemsPerPage) => {
+const AttendanceLog = ({ handleModalData, projectId }) => {
-  const [currentPage, setCurrentPage] = useState(1);
+  const [attendances, setAttendnaces] = useState([]);
-  const maxPage = Math.ceil(data.length / itemsPerPage);
+  const [selectedDate, setSelectedDate] = useState("");
-
-  const currentItems = useMemo(() => {
-    const startIndex = (currentPage - 1) * itemsPerPage;
-    const endIndex = startIndex + itemsPerPage;
-    return data.slice(startIndex, endIndex);
-  }, [data, currentPage, itemsPerPage]);
-
-  const paginate = useCallback((pageNumber) => setCurrentPage(pageNumber), []);
-  const resetPage = useCallback(() => setCurrentPage(1), []);
-
-  return { currentPage, totalPages: maxPage, currentItems, paginate, resetPage };
-};
-
-const AttendanceLog = ({ handleModalData, projectId, showOnlyCheckout }) => {
   const [dateRange, setDateRange] = useState({ startDate: "", endDate: "" });
   const dispatch = useDispatch();
   const { data, loading, error } = useSelector((store) => store.attendanceLogs);
-  const [isRefreshing, setIsRefreshing] = useState(false);
+  const [isRefreshing, setIsRefreshing] = useState(true);
-  const [processedData, setProcessedData] = useState([]);
+  const [dates, setDates] = useState([]);
 
   const today = new Date();
-  today.setHours(0, 0, 0, 0);
+  today.setHours(0, 0, 0, 0); // Strip time to compare dates only
-
-  const yesterday = new Date();
-  yesterday.setDate(yesterday.getDate() - 1);
 
   const isSameDay = (dateStr) => {
     if (!dateStr) return false;
@@ -57,68 +42,59 @@ const AttendanceLog = ({ handleModalData, projectId, showOnlyCheckout }) => {
     return nameA.localeCompare(nameB);
   };
 
-  useEffect(() => {
+  const group1 = data
-    const { startDate, endDate } = dateRange;
+    .filter((d) => d.activity === 1 && isSameDay(d.checkInTime))
-    dispatch(
+    .sort(sortByName);
-      fetchAttendanceData({
+  const group2 = data
-        projectId,
+    .filter((d) => d.activity === 4 && isSameDay(d.checkOutTime))
-        fromDate: startDate,
+    .sort(sortByName);
-        toDate: endDate,
+  const group3 = data
-      })
+    .filter((d) => d.activity === 1 && isBeforeToday(d.checkInTime))
-    );
+    .sort(sortByName);
-    setIsRefreshing(false);
+  const group4 = data
-  }, [dateRange, projectId, dispatch, isRefreshing]);
+    .filter( ( d ) => d.activity === 4 && isBeforeToday( d.checkOutTime ) )
+    
+    const group5 = data
+    .filter((d) => d.activity === 2 && isBeforeToday(d.checkOutTime))
+    .sort(sortByName);
+  const group6 = data.filter((d) => d.activity === 5).sort(sortByName);
 
-  useEffect(() => {
+  const sortedFinalList = [
-    const filteredData = showOnlyCheckout
+    ...group1,
-      ? data.filter((item) => item.checkOutTime === null)
+    ...group2,
-      : data;
+    ...group3,
+    ...group4,
+    ...group5,
+     ...group6,
+  ];
 
-    const group1 = filteredData
+  const currentDate = new Date().toLocaleDateString("en-CA");
-      .filter((d) => d.activity === 1 && isSameDay(d.checkInTime))
+  const { currentPage, totalPages, currentItems, paginate } = usePagination(
-      .sort(sortByName);
+    sortedFinalList,
-    const group2 = filteredData
+    ITEMS_PER_PAGE
-      .filter((d) => d.activity === 4 && isSameDay(d.checkOutTime))
-      .sort(sortByName);
-    const group3 = filteredData
-      .filter((d) => d.activity === 1 && isBeforeToday(d.checkInTime))
-      .sort(sortByName);
-    const group4 = filteredData
-      .filter((d) => d.activity === 4 && isBeforeToday(d.checkOutTime));
-    const group5 = filteredData
-      .filter((d) => d.activity === 2 && isBeforeToday(d.checkOutTime))
-      .sort(sortByName);
-    const group6 = filteredData.filter((d) => d.activity === 5).sort(sortByName);
-
-    const sortedList = [...group1, ...group2, ...group3, ...group4, ...group5, ...group6];
-
-    // Group by date
-    const groupedByDate = sortedList.reduce((acc, item) => {
-      const date = (item.checkInTime || item.checkOutTime)?.split("T")[0];
-      if (date) {
-        acc[date] = acc[date] || [];
-        acc[date].push(item);
-      }
-      return acc;
-    }, {});
-
-    // Sort dates in descending order
-    const sortedDates = Object.keys(groupedByDate).sort((a, b) => new Date(b) - new Date(a));
-
-    // Create the final sorted array
-    const finalData = sortedDates.flatMap((date) => groupedByDate[date]);
-    setProcessedData(finalData);
-  }, [data, showOnlyCheckout]);
-
-  const { currentPage, totalPages, currentItems: paginatedAttendances, paginate, resetPage } = usePagination(
-    processedData,
-    10
   );
 
-  // Reset to the first page whenever processedData changes (due to switch on/off)
   useEffect(() => {
-    resetPage();
+    const { startDate, endDate } = dateRange;
-  }, [processedData, resetPage]);
+    if (startDate && endDate) {
+      dispatch(
+        fetchAttendanceData({
+          projectId,
+          fromDate: startDate,
+          toDate: endDate,
+        })
+      );
+    }
+  }, [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 (
     <>
@@ -127,14 +103,15 @@ const AttendanceLog = ({ handleModalData, projectId, showOnlyCheckout }) => {
         id="DataTables_Table_0_length"
       >
         <div className="col-md-3 my-0 ">
-          <DateRangePicker onRangeChange={setDateRange} defaultStartDate={yesterday} />
+          <DateRangePicker onRangeChange={setDateRange} />
         </div>
         <div className="col-md-2 m-0 text-end">
           <i
-            className={`bx bx-refresh cursor-pointer fs-4 ${loading || isRefreshing ? "spin" : ""
+            className={`bx bx-refresh cursor-pointer fs-4 ${
-              }`}
+              loading ? "spin" : ""
+            }`}
             title="Refresh"
-            onClick={() => setIsRefreshing(true)}
+            onClick={() => setIsRefreshing(!isRefreshing)}
           />
         </div>
       </div>
@@ -148,7 +125,8 @@ const AttendanceLog = ({ handleModalData, projectId, showOnlyCheckout }) => {
                 </th>
                 <th className="border-top-1">Date</th>
                 <th>
-                  <i className="bx bxs-down-arrow-alt text-success"></i> Check-In
+                  <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
@@ -157,96 +135,107 @@ const AttendanceLog = ({ handleModalData, projectId, showOnlyCheckout }) => {
               </tr>
             </thead>
             <tbody>
-              {(loading || isRefreshing) && (
+              {loading && <td colSpan={5}>Loading...</td>}
-                <tr>
+              {dates.map((date, i) => {
-                  <td colSpan={6}>Loading...</td>
+                return (
-                </tr>
+                  <React.Fragment key={i}>
-              )}
+                    {currentItems.some(
-              {!loading && !isRefreshing && paginatedAttendances.reduce((acc, attendance, index, arr) => {
+                      (item) => item.checkInTime.split("T")[0] === date
-                const currentDate = moment(attendance.checkInTime || attendance.checkOutTime).format("YYYY-MM-DD");
+                    ) && (
-                const previousAttendance = arr[index - 1];
+                      <tr className="table-row-header">
-                const previousDate = previousAttendance ? moment(previousAttendance.checkInTime || previousAttendance.checkOutTime).format("YYYY-MM-DD") : null;
+                        <td colSpan={7} className="text-start">
-
+                          <strong>{date}</strong>
-                if (!previousDate || currentDate !== previousDate) {
+                        </td>
-                  acc.push(
+                      </tr>
-                    <tr key={`header-${currentDate}`} className="table-row-header">
+                    )}
-                      <td colSpan={6} className="text-start">
+                    {currentItems
-                        <strong>{moment(currentDate).format("YYYY-MM-DD")}</strong>
+                      ?.filter((item) => item.checkInTime.includes(date))
-                      </td>
+                      .map((attendance, index) => (
-                    </tr>
+                        <tr key={index}>
-                  );
+                          <td colSpan={2}>
-                }
+                            <div className="d-flex justify-content-start align-items-center">
-                acc.push(
+                              <Avatar
-                  <tr key={index}>
+                                firstName={attendance.firstName}
-                    <td colSpan={2}>
+                                lastName={attendance.lastName}
-                      <div className="d-flex justify-content-start align-items-center">
+                              />
-                        <Avatar
+                              <div className="d-flex flex-column">
-                          firstName={attendance.firstName}
+                                <a
-                          lastName={attendance.lastName}
+                                  href="#"
-                        />
+                                  className="text-heading text-truncate"
-                        <div className="d-flex flex-column">
+                                >
-                          <a
+                                  <span className="fw-normal">
-                            href="#"
+                                    {attendance.firstName} {attendance.lastName}
-                            className="text-heading text-truncate"
+                                  </span>
-                          >
+                                </a>
-                            <span className="fw-normal">
+                              </div>
-                              {attendance.firstName} {attendance.lastName}
+                            </div>
-                            </span>
+                          </td>
-                          </a>
+                          <td>
-                        </div>
+                            {" "}
-                      </div>
+                            {moment(attendance.checkInTime).format(
-                    </td>
+                              "DD-MMM-YYYY"
-                    <td>
+                            )}
-                      {moment(attendance.checkInTime || attendance.checkOutTime).format("DD-MMM-YYYY")}
+                          </td>
-                    </td>
+                          <td>{convertShortTime(attendance.checkInTime)}</td>
-                    <td>{convertShortTime(attendance.checkInTime)}</td>
+                          <td>
-                    <td>
+                            {attendance.checkOutTime
-                      {attendance.checkOutTime ? convertShortTime(attendance.checkOutTime) : "--"}
+                              ? convertShortTime(attendance.checkOutTime)
-                    </td>
+                              : "--"}
-                    <td className="text-center">
+                          </td>
-                      <RenderAttendanceStatus
+                          <td className="text-center">
-                        attendanceData={attendance}
+                            <RenderAttendanceStatus
-                        handleModalData={handleModalData}
+                              attendanceData={attendance}
-                        Tab={2}
+                              handleModalData={handleModalData}
-                        currentDate={today.toLocaleDateString("en-CA")}
+                              Tab={2}
-                      />
+                              currentDate={currentDate}
-                    </td>
+                            />
-                  </tr>
+                          </td>
+                        </tr>
+                      ))}
+                  </React.Fragment>
                 );
-                return acc;
+              })}
-              }, [])}
             </tbody>
           </table>
         )}
-        {!loading && !isRefreshing && data.length === 0 && <span>No employee logs</span>}
+        {!loading && data.length === 0 && <span>No employee logs</span>}
-        {error && !loading && !isRefreshing && (
+        {error && <td colSpan={5}>{error}</td>}
-          <tr>
-            <td colSpan={6}>{error}</td>
-          </tr>
-        )}
       </div>
-      {!loading && !isRefreshing && processedData.length > 10 && (
+      {!loading && (
         <nav aria-label="Page ">
           <ul className="pagination pagination-sm justify-content-end py-1">
-            <li className={`page-item ${currentPage === 1 ? "disabled" : ""}`}>
+            <li className={`page-item  ${currentPage === 1 ? "disabled" : ""}`}>
-              <button className="page-link btn-xs" onClick={() => paginate(currentPage - 1)}>
+              <button
+                className="page-link btn-xs"
+                onClick={() => paginate(currentPage - 1)}
+              >
                 &laquo;
               </button>
             </li>
-            {Array.from({ length: totalPages }, (_, i) => i + 1).map((pageNumber) => (
+            {[...Array(totalPages)].map((_, index) => (
               <li
-                key={pageNumber}
+                key={index}
-                className={`page-item ${currentPage === pageNumber ? "active" : ""}`}
+                className={`page-item ${
+                  currentPage === index + 1 ? "active" : ""
+                }`}
               >
-                <button className="page-link" onClick={() => paginate(pageNumber)}>
+                <button
-                  {pageNumber}
+                  className="page-link "
+                  onClick={() => paginate(index + 1)}
+                >
+                  {index + 1}
                 </button>
               </li>
             ))}
             <li
-              className={`page-item ${currentPage === totalPages ? "disabled" : ""}`}
+              className={`page-item ${
+                currentPage === totalPages ? "disabled" : ""
+              }`}
             >
-              <button className="page-link" onClick={() => paginate(currentPage + 1)}>
+              <button
+                className="page-link "
+                onClick={() => paginate(currentPage + 1)}
+              >
                 &raquo;
               </button>
             </li>
@@ -257,4 +246,4 @@ const AttendanceLog = ({ handleModalData, projectId, showOnlyCheckout }) => {
   );
 };
 
-export default AttendanceLog;
+export default AttendanceLog;

src/components/Activities/CheckCheckOutForm.jsx

@@ -7,29 +7,20 @@ import { usePositionTracker } from "../../hooks/usePositionTracker";
 import { useDispatch, useSelector } from "react-redux";
 import { markAttendance } from "../../slices/apiSlice/attedanceLogsSlice";
 import showToast from "../../services/toastService";
-import { checkIfCurrentDate } from "../../utils/dateUtils";
+import {checkIfCurrentDate} from "../../utils/dateUtils";
 
 
 const schema = z.object({
-  markTime: z.string().nonempty({ message: "Time is required" }),
+  markTime: z.string().nonempty({message:"Time is required"}), 
-  description: z.string().max(200, "description should less than 200 chracters").optional()
+  description:z.string().max(200,"description should less than 200 chracters").optional()
 });
 
-const CheckCheckOutmodel = ({ modeldata, closeModal, handleSubmitForm, }) => {
+const CheckCheckOutmodel = ({modeldata,closeModal,handleSubmitForm,}) => {
 
-  const projectId = useSelector((store) => store.localVariables.projectId)
+  const projectId = useSelector((store)=>store.localVariables.projectId)
   const [isLoading, setIsLoading] = useState(false);
   const coords = usePositionTracker();
   const dispatch = useDispatch()
-  const today = new Date().toISOString().split('T')[0];
-
-    const formatDate = (dateString) => {
-    if (!dateString) {
-      return '';
-    }
-    const [year, month, day] = dateString.split('-');
-    return `${day}-${month}-${year}`;
-  };
 
   const {
     register,
@@ -38,78 +29,60 @@ const CheckCheckOutmodel = ({ modeldata, closeModal, handleSubmitForm, }) => {
     reset,
     setValue,
   } = useForm({
-    resolver: zodResolver(schema),
+    resolver: zodResolver( schema ),
-    mode: "onChange"
+    mode:"onChange"
   });
 
-  const onSubmit = (data) => {
+  const onSubmit = ( data ) =>
-    let record = { ...data, date: new Date().toLocaleDateString(), latitude: coords.latitude, longitude: coords.longitude, employeeId: modeldata.employeeId, action: modeldata.action, id: modeldata?.id || null }
+  {
-    if (modeldata.forWhichTab === 1) {
+    let record = {...data, date: new Date().toLocaleDateString(),latitude:coords.latitude,longitude:coords.longitude,employeeId:modeldata.employeeId,action:modeldata.action,id:modeldata?.id || null}
-      handleSubmitForm(record)
+   if(modeldata.forWhichTab === 1){
-    } else {
+    handleSubmitForm(record)
+   } else
+   {
 
-      //  if ( modeldata?.currentDate && checkIfCurrentDate( modeldata?.currentDate ) )
+    //  if ( modeldata?.currentDate && checkIfCurrentDate( modeldata?.currentDate ) )
-      //  {
+    //  {
-      dispatch(markAttendance(record))
+       dispatch(markAttendance(record))
-        .unwrap()
+       .unwrap()
-        .then((data) => {
+         .then( ( data ) =>
+         {
+          
+         showToast("Attendance Marked Successfully", "success");
+       })
+         .catch( ( error ) =>
+         {
 
-          showToast("Attendance Marked Successfully", "success");
+          showToast(error, "error" );
-        })
-        .catch((error) => {
-
-          showToast(error, "error");
-
-        });
-
-      //  } else
-      //  {
-      //   let formData = {...data, date: new Date().toLocaleDateString(),latitude:coords.latitude,longitude:coords.longitude,employeeId:modeldata.employeeId,projectId:projectId,action:modeldata.action,id:modeldata?.id || null}
-      //  }
-    }
 
+       });
+       
+    //  } else
+    //  {
+    //   let formData = {...data, date: new Date().toLocaleDateString(),latitude:coords.latitude,longitude:coords.longitude,employeeId:modeldata.employeeId,projectId:projectId,action:modeldata.action,id:modeldata?.id || null}
+    //  }
+     }
+    
     closeModal()
   };
 
   return (
-
+ 
-
+   
     <form className="row g-2" onSubmit={handleSubmit(onSubmit)}>
-
+    
       <div className="col-12 col-md-12">
-        <label className="fs-5 text-dark text-center d-flex align-items-center flex-wrap">
+        <TimePicker 
-          {modeldata?.checkInTime && !modeldata?.checkOutTime ? 'Check-out :' : 'Check-in :'}
+        label="Choose a time" 
-        </label>
+        onChange={(e) => setValue("markTime", e)}  
-      </div>
+        interval={10}  
-
+        checkOutTime={modeldata?.checkOutTime}
-      <div className="col-6 col-md-6 ">
-        <label className="form-label" htmlFor="checkInDate">
-          {modeldata?.checkInTime && !modeldata?.checkOutTime ? 'Check-out Date' : 'Check-in Date'}
-        </label>
-        <input
-          type="text"
-          id="checkInDate"
-          className="form-control"
-          value={
-            modeldata?.checkInTime && !modeldata?.checkOutTime
-              ? formatDate(modeldata?.checkInTime?.split('T')[0]) || ''
-              : formatDate(today)
-          }
-          disabled
-        />
-      </div>
-
-      <div className="col-6 col-md-6">
-        <TimePicker
-          label="Choose a time"
-          onChange={(e) => setValue("markTime", e)}
-          interval={10}
-          checkOutTime={modeldata?.checkOutTime}
           checkInTime={modeldata?.checkInTime}
-        />
+      />
-        {errors.markTime && <p className="text-danger">{errors.markTime.message}</p>}
+        {errors. markTime && <p className="text-danger">{errors.markTime.message}</p>}
       </div>
 
+    
       <div className="col-12 col-md-12">
         <label className="form-label" htmlFor="description">
           Description
@@ -118,7 +91,7 @@ const CheckCheckOutmodel = ({ modeldata, closeModal, handleSubmitForm, }) => {
           rows="3"
           name="description"
           className="form-control"
-          {...register("description")}
+          {...register( "description" )}
           maxLength={200}
         />
         {errors.description && (
@@ -126,7 +99,7 @@ const CheckCheckOutmodel = ({ modeldata, closeModal, handleSubmitForm, }) => {
         )}
       </div>
 
-
+     
       <div className="col-12 text-center">
         <button type="submit" className="btn btn-sm btn-primary me-3">
           {isLoading ? "Please Wait..." : "Submit"}
@@ -136,7 +109,7 @@ const CheckCheckOutmodel = ({ modeldata, closeModal, handleSubmitForm, }) => {
           className="btn btn-sm btn-label-secondary"
           data-bs-dismiss="modal"
           aria-label="Close"
-          onClick={() => closeModal()}
+          onClick={()=>closeModal()}
         >
           Cancel
         </button>
@@ -151,15 +124,15 @@ export default CheckCheckOutmodel;
 
 
 const schemaReg = z.object({
-  description: z.string().min(1, { message: "please give reason!" })
+  description:z.string().min(1,{message:"please give reason!"})
-});
+} );
 
 
 
-export const Regularization = ({ modeldata, closeModal, handleSubmitForm }) => {
+export const Regularization = ({modeldata,closeModal,handleSubmitForm})=>{
   const [isLoading, setIsLoading] = useState(false);
   const coords = usePositionTracker();
-
+  
   const {
     register,
     handleSubmit,
@@ -173,21 +146,22 @@ export const Regularization = ({ modeldata, closeModal, handleSubmitForm }) => {
     return today.toLocaleDateString('en-CA');
   };
 
+  
+  const onSubmit = ( data ) =>
+  {
 
-  const onSubmit = (data) => {
+    let record = {...data, date: new Date().toLocaleDateString(),latitude:coords.latitude,longitude:coords.longitude, }
-
-    let record = { ...data, date: new Date().toLocaleDateString(), latitude: coords.latitude, longitude: coords.longitude, }
     handleSubmitForm(record)
     closeModal()
   };
 
   return (
-
+ 
-
+   
     <form className="row g-2" onSubmit={handleSubmit(onSubmit)}>
-
+      
       <div className="col-12 col-md-12">
-        <p>Regularize Attendance</p>
+      <p>Regularize Attendance</p>
         <label className="form-label" htmlFor="description">
           Description
         </label>
@@ -202,7 +176,7 @@ export const Regularization = ({ modeldata, closeModal, handleSubmitForm }) => {
         )}
       </div>
 
-
+     
       <div className="col-12 text-center">
         <button type="submit" className="btn btn-sm btn-primary me-3">
           {isLoading ? "Please Wait..." : "Submit"}
@@ -212,7 +186,7 @@ export const Regularization = ({ modeldata, closeModal, handleSubmitForm }) => {
           className="btn btn-sm btn-label-secondary"
           data-bs-dismiss="modal"
           aria-label="Close"
-          onClick={() => closeModal()}
+          onClick={()=>closeModal()}
         >
           Cancel
         </button>

src/components/Dashboard/Dashboard.jsx

@@ -1,50 +1,271 @@
-import React from "react";
+import React, { useState } from "react";
+import HorizontalBarChart from "../Charts/HorizontalBarChart";
+import LineChart from "../Charts/LineChart";
+import { useProjects } from "../../hooks/useProjects";
 import {
+  useDashboard_Data,
   useDashboardProjectsCardData,
   useDashboardTeamsCardData,
   useDashboardTasksCardData,
 } from "../../hooks/useDashboard_Data";
-import Projects from "./Projects";
-import Teams from "./Teams";
-import TasksCard from "./Tasks";
-import ProjectCompletionChart from "./ProjectCompletionChart";
-import ProjectProgressChart from "./ProjectProgressChart";
 
 const Dashboard = () => {
+  const { projects, loading } = useProjects();
+  const [selectedProjectId, setSelectedProjectId] = useState("all");
+  const [range, setRange] = useState("1W");
+
+  const getDaysFromRange = (range) => {
+    switch (range) {
+      case "1D":
+        return 1;
+      case "1W":
+        return 7;
+      case "15D":
+        return 15;
+      case "1M":
+        return 30;
+      case "3M":
+        return 90;
+      case "1Y":
+        return 365;
+      case "5Y":
+        return 1825;
+      default:
+        return 7;
+    }
+  };
+
+  const days = getDaysFromRange(range);
+  const today = new Date();
+  // const FromDate = today.toISOString().split("T")[0];
+  const FromDate = today.toLocaleDateString('en-CA'); // Always today
+
   const { projectsCardData } = useDashboardProjectsCardData();
   const { teamsCardData } = useDashboardTeamsCardData();
   const { tasksCardData } = useDashboardTasksCardData();
 
+  const { dashboard_data, loading: isLineChartLoading } = useDashboard_Data({
+    days,
+    FromDate,
+    projectId: selectedProjectId === "all" ? null : selectedProjectId,
+  });
+
+  // Sort dashboard_data by date ascending
+  const sortedDashboardData = [...dashboard_data].sort(
+    (a, b) => new Date(a.date) - new Date(b.date)
+  );
+
+  // Bar chart logic
+  const projectNames = projects?.map((p) => p.name) || [];
+  const projectProgress =
+    projects?.map((p) => {
+      const completed = p.completedWork || 0;
+      const planned = p.plannedWork || 1;
+      const percent = (completed / planned) * 100;
+      return Math.min(Math.round(percent), 100);
+    }) || [];
+
+  // Line chart data
+  const lineChartSeries = [
+    {
+      name: "Planned Work",
+      data: sortedDashboardData.map((d) => d.plannedTask || 0),
+    },
+    {
+      name: "Completed Work",
+      data: sortedDashboardData.map((d) => d.completedTask || 0),
+    },
+  ];
+
+  const lineChartCategories = sortedDashboardData.map((d) =>
+    new Date(d.date).toLocaleDateString("en-US", {
+      month: "short",
+      day: "numeric",
+    })
+  );
+  const lineChartCategoriesDates = sortedDashboardData.map((d) =>
+    new Date(d.date).toLocaleDateString("en-US", {
+      month: "short",
+      day: "numeric",
+      year: "numeric",
+    })
+  );
   return (
     <div className="container-xxl flex-grow-1 container-p-y">
       <div className="row gy-4">
         {/* Projects Card */}
         <div className="col-sm-6 col-lg-4">
-          <Projects projectsCardData={projectsCardData} />
+          <div className="card p-3 h-100 text-center d-flex justify-content-between">
+            <div className="d-flex justify-content-start align-items-center mb-3">
+              <h5 className="fw-bold mb-0 ms-2">
+                <i className="rounded-circle bx bx-building-house text-primary"></i>{" "}
+                Projects
+              </h5>
+            </div>
+            <div className="d-flex justify-content-around align-items-start mt-n2">
+              <div>
+                <h4 className="mb-0 fw-bold">
+                  {projectsCardData.totalProjects?.toLocaleString()}
+                </h4>
+                <small className="text-muted">Total</small>
+              </div>
+              <div>
+                <h4 className="mb-0 fw-bold">
+                  {projectsCardData.ongoingProjects?.toLocaleString()}
+                </h4>
+                <small className="text-muted">Ongoing</small>
+              </div>
+            </div>
+          </div>
         </div>
 
         {/* Teams Card */}
         <div className="col-sm-6 col-lg-4">
-          <Teams teamsCardData={teamsCardData} />
+          <div className="card p-3 h-100 text-center d-flex justify-content-between">
+            <div className="d-flex justify-content-start align-items-center mb-3">
+              <h5 className="fw-bold mb-0 ms-2">
+                <i className="bx bx-group text-warning"></i> Teams
+              </h5>
+            </div>
+            <div className="d-flex justify-content-around align-items-start mt-n2">
+              <div>
+                <h4 className="mb-0 fw-bold">
+                  {teamsCardData.totalEmployees?.toLocaleString()}
+                </h4>
+                <small className="text-muted">Total Employees</small>
+              </div>
+              <div>
+                <h4 className="mb-0 fw-bold">
+                  {teamsCardData.inToday?.toLocaleString()}
+                </h4>
+                <small className="text-muted">In Today</small>
+              </div>
+            </div>
+          </div>
         </div>
 
         {/* Tasks Card */}
         <div className="col-sm-6 col-lg-4">
-          <TasksCard tasksCardData={tasksCardData} />
+          <div className="card p-3 h-100 text-center d-flex justify-content-between">
+            <div className="d-flex justify-content-start align-items-center mb-3">
+              <h5 className="fw-bold mb-0 ms-2">
+                <i className="bx bx-task text-success"></i> Tasks
+              </h5>
+            </div>
+            <div className="d-flex justify-content-around align-items-start mt-n2">
+              <div>
+                <h4 className="mb-0 fw-bold">
+                  {tasksCardData.totalTasks?.toLocaleString()}
+                </h4>
+                <small className="text-muted">Total</small>
+              </div>
+              <div>
+                <h4 className="mb-0 fw-bold">
+                  {tasksCardData.completedTasks?.toLocaleString()}
+                </h4>
+                <small className="text-muted">Completed</small>
+              </div>
+            </div>
+          </div>
         </div>
 
-        {/* Bar Chart (Project Completion) */}
+        {/* Bar Chart */}
         <div className="col-xxl-6 col-lg-6">
-          <ProjectCompletionChart />
+          <div className="card h-100">
+            <div className="card-header d-flex align-items-start justify-content-between">
+              <div className="card-title mb-0 text-start">
+                <h5 className="mb-1">Projects</h5>
+                <p className="card-subtitle">Projects Completion Status</p>
+              </div>
+            </div>
+            <div className="card-body">
+              <HorizontalBarChart
+                categories={projectNames}
+                seriesData={projectProgress}
+                loading={loading}
+              />
+            </div>
+          </div>
         </div>
 
-        {/* Line Chart (Project Progress) */}
+        {/* Line Chart */}
         <div className="col-xxl-6 col-lg-6">
-          <ProjectProgressChart />
+          <div className="card h-100">
+            <div className="card-header">
+              {/* Row 1: Title + Project Selector */}
+              <div className="d-flex flex-wrap justify-content-between align-items-center mb-2">
+                <div className="card-title mb-0 text-start">
+                  <h5 className="mb-1">Project Progress</h5>
+                  <p className="card-subtitle">Progress Overview by Project</p>
+                </div>
+
+                <div className="btn-group">
+                  <button
+                    className="btn btn-outline-primary btn-sm dropdown-toggle"
+                    type="button"
+                    data-bs-toggle="dropdown"
+                    aria-expanded="false"
+                  >
+                    {selectedProjectId === "all"
+                      ? "All Projects"
+                      : projects?.find((p) => p.id === selectedProjectId)
+                          ?.name || "Select Project"}
+                  </button>
+
+                  <ul className="dropdown-menu">
+                    <li>
+                      <button
+                        className="dropdown-item"
+                        onClick={() => setSelectedProjectId("all")}
+                      >
+                        All Projects
+                      </button>
+                    </li>
+                    {projects?.map((project) => (
+                      <li key={project.id}>
+                        <button
+                          className="dropdown-item"
+                          onClick={() => setSelectedProjectId(project.id)}
+                        >
+                          {project.name}
+                        </button>
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              </div>
+
+              {/* Row 2: Time Range Buttons */}
+              <div className="d-flex flex-wrap  mt-2">
+                {["1D", "1W", "15D", "1M", "3M", "1Y", "5Y"].map((key) => (
+                  <button
+                    key={key}
+                    className={`border-0 bg-transparent px-2 py-1 text-sm rounded ${
+                      range === key
+                        ? " border-bottom border-primary text-primary"
+                        : "text-muted"
+                    }`}
+                    style={{ cursor: "pointer", transition: "all 0.2s ease" }}
+                    onClick={() => setRange(key)}
+                  >
+                    {key}
+                  </button>
+                ))}
+              </div>
+            </div>
+            <div className="card-body ">
+              <LineChart
+                seriesData={lineChartSeries}
+                categories={lineChartCategories}
+                loading={isLineChartLoading}
+                lineChartCategoriesDates={lineChartCategoriesDates}
+              />
+            </div>
+          </div>
         </div>
       </div>
     </div>
   );
 };
 
-export default Dashboard;
+export default Dashboard;

src/components/Dashboard/ProjectCompletionChart.jsx

@@ -1,37 +0,0 @@
-import React from "react";
-import HorizontalBarChart from "../Charts/HorizontalBarChart";
-import { useProjects } from "../../hooks/useProjects";
-
-const ProjectCompletionChart = () => {
-  const { projects, loading } = useProjects();
-
-  // Bar chart logic
-  const projectNames = projects?.map((p) => p.name) || [];
-  const projectProgress =
-    projects?.map((p) => {
-      const completed = p.completedWork || 0;
-      const planned = p.plannedWork || 1;
-      const percent = (completed / planned) * 100;
-      return Math.min(Math.round(percent), 100);
-    }) || [];
-
-  return (
-    <div className="card h-100">
-      <div className="card-header d-flex align-items-start justify-content-between">
-        <div className="card-title mb-0 text-start">
-          <h5 className="mb-1">Projects</h5>
-          <p className="card-subtitle">Projects Completion Status</p>
-        </div>
-      </div>
-      <div className="card-body">
-        <HorizontalBarChart
-          categories={projectNames}
-          seriesData={projectProgress}
-          loading={loading}
-        />
-      </div>
-    </div>
-  );
-};
-
-export default ProjectCompletionChart;

src/components/Dashboard/ProjectProgressChart.jsx

@@ -1,126 +0,0 @@
-import React, { useState } from "react";
-import LineChart from "../Charts/LineChart";
-import { useProjects } from "../../hooks/useProjects";
-import { useDashboard_Data } from "../../hooks/useDashboard_Data";
-
-const ProjectProgressChart = () => {
-  const { projects } = useProjects();
-  const [selectedProjectId, setSelectedProjectId] = useState("all");
-  const [range, setRange] = useState("1W");
-
-  const getDaysFromRange = (range) => {
-    switch (range) {
-      case "1D": return 1;
-      case "1W": return 7;
-      case "15D": return 15;
-      case "1M": return 30;
-      case "3M": return 90;
-      case "1Y": return 365;
-      case "5Y": return 1825;
-      default: return 7;
-    }
-  };
-
-  const days = getDaysFromRange(range);
-  const today = new Date();
-  const FromDate = today.toLocaleDateString('en-CA');
-
-  const { dashboard_data, loading: isLineChartLoading } = useDashboard_Data({
-    days,
-    FromDate,
-    projectId: selectedProjectId === "all" ? null : selectedProjectId,
-  });
-
-  const sortedDashboardData = [...dashboard_data].sort(
-    (a, b) => new Date(a.date) - new Date(b.date)
-  );
-
-  const lineChartSeries = [
-    {
-      name: "Planned Work",
-      data: sortedDashboardData.map((d) => d.plannedTask || 0),
-    },
-    {
-      name: "Completed Work",
-      data: sortedDashboardData.map((d) => d.completedTask || 0),
-    },
-  ];
-
-  const lineChartCategories = sortedDashboardData.map((d) =>
-    new Date(d.date).toLocaleDateString("en-US", { month: "short", day: "numeric" })
-  );
-  const lineChartCategoriesDates = sortedDashboardData.map((d) =>
-    new Date(d.date).toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" })
-  );
-
-  return (
-    <div className="card h-100">
-      <div className="card-header">
-        {/* Row 1: Title + Project Selector */}
-        <div className="d-flex flex-wrap justify-content-between align-items-center mb-2">
-          <div className="card-title mb-0 text-start">
-            <h5 className="mb-1">Project Progress</h5>
-            <p className="card-subtitle">Progress Overview by Project</p>
-          </div>
-
-          <div className="btn-group">
-            <button
-              className="btn btn-outline-primary btn-sm dropdown-toggle"
-              type="button"
-              data-bs-toggle="dropdown"
-              aria-expanded="false"
-            >
-              {selectedProjectId === "all"
-                ? "All Projects"
-                : projects?.find((p) => p.id === selectedProjectId)?.name || "Select Project"}
-            </button>
-
-            <ul className="dropdown-menu">
-              <li>
-                <button className="dropdown-item" onClick={() => setSelectedProjectId("all")}>
-                  All Projects
-                </button>
-              </li>
-              {projects?.map((project) => (
-                <li key={project.id}>
-                  <button
-                    className="dropdown-item"
-                    onClick={() => setSelectedProjectId(project.id)}
-                  >
-                    {project.name}
-                  </button>
-                </li>
-              ))}
-            </ul>
-          </div>
-        </div>
-
-        {/* Row 2: Time Range Buttons */}
-        <div className="d-flex flex-wrap  mt-2">
-          {["1D", "1W", "15D", "1M", "3M", "1Y", "5Y"].map((key) => (
-            <button
-              key={key}
-              className={`border-0 bg-transparent px-2 py-1 text-sm rounded ${
-                range === key ? " border-bottom border-primary text-primary" : "text-muted"
-              }`}
-              style={{ cursor: "pointer", transition: "all 0.2s ease" }}
-              onClick={() => setRange(key)}
-            >
-              {key}
-            </button>
-          ))}
-        </div>
-      </div>
-      <div className="card-body ">
-        <LineChart
-          seriesData={lineChartSeries}
-          categories={lineChartCategories}
-          loading={isLineChartLoading}
-          lineChartCategoriesDates={lineChartCategoriesDates}
-        />
-      </div>
-    </div>
-  );
-};
-
-export default ProjectProgressChart;

src/components/Dashboard/Projects.jsx

@@ -1,33 +0,0 @@
-import React from "react";
-import { useDashboardProjectsCardData } from "../../hooks/useDashboard_Data";
-
-const Projects = () => {
-  const { projectsCardData } = useDashboardProjectsCardData();
-
-  return (
-    <div className="card p-3 h-100 text-center d-flex justify-content-between">
-      <div className="d-flex justify-content-start align-items-center mb-3">
-        <h5 className="fw-bold mb-0 ms-2">
-          <i className="rounded-circle bx bx-building-house text-primary"></i>{" "}
-          Projects
-        </h5>
-      </div>
-      <div className="d-flex justify-content-around align-items-start mt-n2">
-        <div>
-          <h4 className="mb-0 fw-bold">
-            {projectsCardData.totalProjects?.toLocaleString()}
-          </h4>
-          <small className="text-muted">Total</small>
-        </div>
-        <div>
-          <h4 className="mb-0 fw-bold">
-            {projectsCardData.ongoingProjects?.toLocaleString()}
-          </h4>
-          <small className="text-muted">Ongoing</small>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default Projects;

src/components/Dashboard/Tasks.jsx

@@ -1,32 +0,0 @@
-import React from "react";
-import { useDashboardTasksCardData } from "../../hooks/useDashboard_Data";
-
-const TasksCard = () => {
-  const { tasksCardData } = useDashboardTasksCardData();
-
-  return (
-    <div className="card p-3 h-100 text-center d-flex justify-content-between">
-      <div className="d-flex justify-content-start align-items-center mb-3">
-        <h5 className="fw-bold mb-0 ms-2">
-          <i className="bx bx-task text-success"></i> Tasks
-        </h5>
-      </div>
-      <div className="d-flex justify-content-around align-items-start mt-n2">
-        <div>
-          <h4 className="mb-0 fw-bold">
-            {tasksCardData.totalTasks?.toLocaleString()}
-          </h4>
-          <small className="text-muted">Total</small>
-        </div>
-        <div>
-          <h4 className="mb-0 fw-bold">
-            {tasksCardData.completedTasks?.toLocaleString()}
-          </h4>
-          <small className="text-muted">Completed</small>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default TasksCard;

src/components/Dashboard/Teams.jsx

@@ -1,32 +0,0 @@
-import React from "react";
-import { useDashboardTeamsCardData } from "../../hooks/useDashboard_Data";
-
-const Teams = () => {
-  const { teamsCardData } = useDashboardTeamsCardData();
-
-  return (
-    <div className="card p-3 h-100 text-center d-flex justify-content-between">
-      <div className="d-flex justify-content-start align-items-center mb-3">
-        <h5 className="fw-bold mb-0 ms-2">
-          <i className="bx bx-group text-warning"></i> Teams
-        </h5>
-      </div>
-      <div className="d-flex justify-content-around align-items-start mt-n2">
-        <div>
-          <h4 className="mb-0 fw-bold">
-            {teamsCardData.totalEmployees?.toLocaleString()}
-          </h4>
-          <small className="text-muted">Total Employees</small>
-        </div>
-        <div>
-          <h4 className="mb-0 fw-bold">
-            {teamsCardData.inToday?.toLocaleString()}
-          </h4>
-          <small className="text-muted">In Today</small>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default Teams;

src/components/Project/AboutProject.jsx

@@ -12,7 +12,7 @@ const AboutProject = ({ data }) => {
             <small className="card-text text-uppercase text-muted small">
               Profile
             </small>
-            <ul className="list-unstyled my-3">
+            <ul className="list-unstyled my-3 py-1">
               <li className="d-flex align-items-center mb-4">
                 <i className="bx bx-check"></i>
                 <span className="fw-medium mx-2">Start Date:</span>{" "}
@@ -41,17 +41,27 @@ const AboutProject = ({ data }) => {
                 <span className="fw-medium mx-2">Contact:</span>{" "}
                 <span>{data.contactPerson}</span>
               </li>
-              <li className="d-flex flex-column align-items-start mb-4">
+              <li className="d-flex align-items-center mb-4">
-                <div className="d-flex align-items-center">
+                <i className="bx bx-flag"></i>
-                  <i className="bx bx-flag"></i>
+                <span className="fw-medium mx-2">Address:</span>{" "}
-                  <span className="fw-medium mx-2">Address:</span>
+              </li>
-                  {data.projectAddress?.length <= 20 && (
+            </ul>
-                    <span>{data.projectAddress}</span>
+            {/* <small className="card-text text-uppercase text-muted small">
-                  )}
+              Contacts
-                </div>
+            </small> */}
-                {data.projectAddress?.length > 20 && (
+            <ul className="list-unstyled my-3 py-1">
-                  <div className="ms-4 text-start">{data.projectAddress}</div>
+             
-                )}
+              {/* <li className="d-flex align-items-center mb-4">
+                <i className="bx bx-phone"></i>
+                <span className="fw-medium mx-2">Contact Number:</span>{" "}
+                <span>NA</span>
+              </li> */}
+              {/* <li className="d-flex align-items-center mb-4">
+                <i className="bx bx-envelope"></i>
+                <span className="fw-medium mx-2">Email:</span> <span>NA</span>
+              </li> */}          
+              <li className="d-flex align-items-start test-start mb-4">
+                <span>{data.projectAddress}</span>
               </li>
             </ul>
           </div>

src/components/Project/AssignRole.jsx

@@ -1,95 +1,54 @@
-import React, { useState, useEffect, useRef } from "react";
+import React, { useState, useEffect } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { changeMaster } from "../../slices/localVariablesSlice";
 import useMaster from "../../hooks/masterHook/useMaster";
+import { employee } from "../../data/masters";
 import { useForm, Controller } from "react-hook-form";
 import { z } from "zod";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { getCachedData } from "../../slices/apiDataManager";
+import { useProjects } from "../../hooks/useProjects";
 import { useEmployeesAllOrByProjectId } from "../../hooks/useEmployees";
 import { TasksRepository } from "../../repositories/ProjectRepository";
 import showToast from "../../services/toastService";
 
 const AssignRoleModel = ({ assignData, onClose }) => {
-  // Calculate maxPlanned based on assignData
   const maxPlanned =
     assignData?.workItem?.workItem?.plannedWork -
     assignData?.workItem?.workItem?.completedWork;
 
-  // Zod schema for form validation
   const schema = z.object({
     selectedEmployees: z
       .array(z.string())
-      .min(1, { message: "At least one employee must be selected" }), // Added custom message here for consistency
+      .min(1, { message: "At least one employee must be selected" }),
     description: z.string().min(1, { message: "Description is required" }),
     plannedTask: z.preprocess(
-      (val) => parseInt(val, 10), // Preprocess value to integer
+      (val) => parseInt(val, 10),
       z
         .number({
           required_error: "Planned task is required",
-          invalid_type_error: "Target for Today must be a number",
+          invalid_type_error: "Planned task must be a number",
         })
-        .int() // Ensure it's an integer
+        .int()
-        .positive({ message: "Planned task must be a positive number" }) // Must be positive
+        .positive({ message: "Planned task must be a positive number" })
         .max(maxPlanned, {
-          // Max value validation
           message: `Planned task cannot exceed ${maxPlanned}`,
         })
     ),
   });
-
+  const [plannedTask, setPlannedTask] = useState();
-  // State for help popovers (though not fully implemented in provided snippets)
-  const [isHelpVisibleTarget, setIsHelpVisibleTarget] = useState(false);
-  const helpPopupRefTarget = useRef(null);
-  const [isHelpVisible, setIsHelpVisible] = useState(false);
-
-  // Refs for Bootstrap Popovers
-  const infoRef = useRef(null);
-  const infoRef1 = useRef(null);
-
-  // Initialize Bootstrap Popovers on component mount
-  useEffect(() => {
-    // Check if Bootstrap is available globally
-    if (typeof bootstrap !== 'undefined') {
-      if (infoRef.current) {
-        new bootstrap.Popover(infoRef.current, {
-          trigger: 'focus',
-          placement: 'right',
-          html: true,
-          content: `<div>Total Pending tasks of the Activity</div>`,
-        });
-      }
-
-      if (infoRef1.current) {
-        new bootstrap.Popover(infoRef1.current, {
-          trigger: 'focus',
-          placement: 'right',
-          html: true,
-          content: `<div>Target task for today</div>`,
-        });
-      }
-    } else {
-      console.warn("Bootstrap is not available. Popovers might not function.");
-    }
-  }, []); // Empty dependency array ensures this runs once on mount
-
-  // Redux state and hooks
   const selectedProject = useSelector(
     (store) => store.localVariables.projectId
   );
-  const { employees, loading: employeeLoading } = useEmployeesAllOrByProjectId(
+  const { employees,loading:employeeLoading } = useEmployeesAllOrByProjectId(selectedProject,false);
-    selectedProject,
+
-    false
-  );
   const dispatch = useDispatch();
-  const { loading } = useMaster(); // Assuming this is for jobRoleData loading
+  const { data, loading } = useMaster();
   const jobRoleData = getCachedData("Job Role");
 
-  // Local component states
   const [selectedRole, setSelectedRole] = useState("all");
-  const [displayedSelection, setDisplayedSelection] = useState(""); // This state is not updated in the provided code, consider if it's still needed or how it should be updated
+  const [selectedEmployees, setSelectedEmployees] = useState([]);
 
-  // React Hook Form setup
   const {
     handleSubmit,
     control,
@@ -97,95 +56,74 @@ const AssignRoleModel = ({ assignData, onClose }) => {
     watch,
     formState: { errors },
     reset,
-    trigger, // <--- IMPORTANT: Destructure 'trigger' here
   } = useForm({
     defaultValues: {
       selectedEmployees: [],
       description: "",
       plannedTask: "",
     },
-    resolver: zodResolver(schema), // Integrate Zod schema with react-hook-form
+    resolver: zodResolver(schema),
   });
 
-  // Handler for employee checkbox changes
-  const handleCheckboxChange = (event, user) => {
-    const isChecked = event.target.checked;
-    let updatedSelectedEmployees = watch("selectedEmployees") || []; // Get current selected employees from form state
-
-    if (isChecked) {
-      // Add employee if checked and not already in the list
-      if (!updatedSelectedEmployees.includes(user.id)) {
-        updatedSelectedEmployees = [...updatedSelectedEmployees, user.id];
-      }
-    } else {
-      // Remove employee if unchecked
-      updatedSelectedEmployees = updatedSelectedEmployees.filter(
-        (id) => id !== user.id
-      );
-    }
-    // Update the form state with the new list of selected employees
-    setValue("selectedEmployees", updatedSelectedEmployees);
-    trigger("selectedEmployees"); // <--- IMPORTANT: Trigger validation here
-  };
-
-  // Effect to dispatch action for Job Role master data
-  useEffect(() => {
-    dispatch(changeMaster("Job Role"));
-    // Cleanup function to reset selected role when component unmounts or dispatch changes
-    return () => setSelectedRole("all");
-  }, [dispatch]);
-
-  // Handler for role filter change
   const handleRoleChange = (event) => {
+    reset();
+    // setSelectedEmployees([]);
     setSelectedRole(event.target.value);
   };
 
-  // Filter employees based on selected role
   const filteredEmployees =
     selectedRole === "all"
       ? employees
-      : employees?.filter(
+      : employees.filter((emp) => String(emp.jobRoleId || "") === selectedRole);
-          (emp) => String(emp.jobRoleId || "") === selectedRole
-        );
 
-  // Form submission handler
+  const handleEmployeeSelection = (employeeId, field) => {
-  const onSubmit = async (data) => {
+    setSelectedEmployees((prevSelected) => {
-    const selectedEmployeeIds = data.selectedEmployees;
+      let updatedSelection;
-
+      if (!prevSelected.includes(employeeId)) {
-    // Prepare taskTeam data (only IDs are needed for the backend based on previous context)
+        updatedSelection = [...prevSelected, employeeId];
-    const taskTeamWithDetails = selectedEmployeeIds
+      } else {
-      .map((empId) => {
+        updatedSelection = prevSelected.filter((id) => id !== employeeId);
-        return empId; // Return just the ID as per previous discussions
+      }
-      })
+      field.onChange(updatedSelection);
-      .filter(Boolean); // Ensure no nulls if employee not found (though unlikely with current logic)
+      return updatedSelection;
-
+    });
-    // Format data for API call
-    const formattedData = {
-      taskTeam: taskTeamWithDetails,
-      plannedTask: data.plannedTask,
-      description: data.description,
-      assignmentDate: new Date().toISOString(), // Current date/time
-      workItemId: assignData?.workItem?.workItem.id,
-    };
-
-    try {
-      // Call API to assign task
-      await TasksRepository.assignTask(formattedData);
-      showToast("Task Successfully Assigned", "success"); // Show success toast
-      reset(); // Reset form fields
-      onClose(); // Close the modal
-    } catch (error) {
-      console.error("Error assigning task:", error); // Log the full error for debugging
-      showToast("Something went wrong. Please try again.", "error"); // Show generic error toast
-    }
   };
 
-  // Handler to close the modal and reset form
+  const removeEmployee = (employeeId) => {
+    setSelectedEmployees((prevSelected) => {
+      const updatedSelection = prevSelected.filter((id) => id !== employeeId);
+      setValue("selectedEmployees", updatedSelection); // Ensure form state is updated
+      return updatedSelection;
+    });
+  };
+
+  const onSubmit = async (data) => {
+    const formattedData = {
+      taskTeam: data.selectedEmployees,
+      plannedTask: data.plannedTask,
+      description: data.description,
+      assignmentDate: new Date().toISOString(),
+      workItemId: assignData?.workItem?.workItem.id,
+    };
+    try {
+      let response = await TasksRepository.assignTask(formattedData);
+      showToast("Task Successfully Assigend", "success");
+      setSelectedEmployees([]);
+      reset();
+      onClose();
+    } catch (error) {
+      showToast("something wrong", "error");
+    }
+  };
+  useEffect(() => {
+    dispatch(changeMaster("Job Role"));
+    return () => setSelectedRole("all");
+  }, [dispatch]);
+
   const closedModel = () => {
     reset();
     onClose();
   };
-
   return (
     <div
       className="modal-dialog modal-lg modal-simple mx-sm-auto mx-1 edit-project-modal"
@@ -199,360 +137,260 @@ const AssignRoleModel = ({ assignData, onClose }) => {
             onClick={onClose}
             aria-label="Close"
           ></button>
-          <div className="fs-5 text-dark text-center d-flex align-items-center justify-content-center flex-wrap">
+          <div className="container my-1">
-            <p className="align-items-center flex-wrap m-0 ">Assign Task</p>
+            <div className="mb-">
-            <div className="container my-3">
+              <p className="fs-sm-5 fs-6 text-dark text-start d-flex align-items-center flex-wrap">
-              <div className="mb-1">
+                {[
-                <p className="mb-0">
+                  assignData?.building?.name,
-                  <span className="text-dark text-start d-flex align-items-center flex-wrap form-text">
+                  assignData?.floor?.floorName,
-                    <p className="me-2 m-0 font-bold">Work Location :</p>
+                  assignData?.workArea?.areaName,
-                    {[
+                  assignData?.workItem?.workItem?.activityMaster?.activityName,
-                      assignData?.building?.name,
+                ]
-                      assignData?.floor?.floorName,
+                  .filter(Boolean)
-                      assignData?.workArea?.areaName,
+                  .map((item, index, array) => (
-                      assignData?.workItem?.workItem?.activityMaster
+                    <span key={index} className="d-flex align-items-center">
-                        ?.activityName,
+                      {item}
-                    ]
+                      {index < array.length - 1 && (
-                      .filter(Boolean) // Filter out any undefined/null values
+                        <i className="bx bx-chevron-right mx-2"></i>
-                      .map((item, index, array) => (
-                        <span key={index} className="d-flex align-items-center">
-                          {item}
-                          {index < array.length - 1 && (
-                            <i className="bx bx-chevron-right mx-2"></i>
-                          )}
-                        </span>
-                      ))}
-                  </span>
-                </p>
-
-                <form onSubmit={handleSubmit(onSubmit)}>
-                  <div className="form-label text-start">
-                    <div className="row mb-1">
-                      <div className="col-12">
-                        <div className="form-text text-start">
-                          <div className="d-flex align-items-center form-text fs-7">
-                            <span className="text-dark">Select Team</span>
-                            <div className="me-2">{displayedSelection}</div>
-                            <a
-                              className="dropdown-toggle hide-arrow cursor-pointer"
-                              data-bs-toggle="dropdown"
-                              aria-expanded="false"
-                            >
-                              <i className="bx bx-filter bx-lg text-primary"></i>
-                            </a>
-
-                            <ul className="dropdown-menu p-2 text-capitalize">
-                              <li key="all">
-                                <button
-                                  type="button"
-                                  className="dropdown-item py-1"
-                                  onClick={() =>
-                                    handleRoleChange({
-                                      target: { value: "all" },
-                                    })
-                                  }
-                                >
-                                  All Roles
-                                </button>
-                              </li>
-                              {jobRoleData?.map((user) => (
-                                <li key={user.id}>
-                                  <button
-                                    type="button"
-                                    className="dropdown-item py-1"
-                                    value={user.id}
-                                    onClick={handleRoleChange}
-                                  >
-                                    {user.name}
-                                  </button>
-                                </li>
-                              ))}
-                            </ul>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-
-                    {employeeLoading && <div>Loading employees...</div>}
-                    {!employeeLoading &&
-                      filteredEmployees?.length === 0 &&
-                      employees && (
-                        <div>No employees found for the selected role.</div>
                       )}
+                    </span>
+                  ))}
+              </p>
 
-                    <div className="row">
+              <form onSubmit={handleSubmit(onSubmit)}>
-                      <div className="col-12 h-sm-25 overflow-auto mt-2">
+                <div className="row mb-1">
-                        {selectedRole !== "" && (
+                  <div className="col-sm-4">
+                    <div className="form-text text-start">Select Role</div>
+                    <div className="input-group input-group-merge">
+                      <select
+                        className="form-select form-select-sm"
+                        id="Role"
+                        value={selectedRole}
+                        onChange={handleRoleChange}
+                        aria-label=""
+                      >
+                        {loading && data ? (
+                          "Loading..."
+                        ) : (
+                          <>
+                            <option value="all">All</option>
+                            {jobRoleData?.map((item) => (
+                              <option key={item.id} value={item.id}>
+                                {item.name}
+                              </option>
+                            ))}
+                          </>
+                        )}
+                      </select>
+                    </div>
+                  </div>
+                </div>
+                <div className="divider text-start">
+                  <div className="divider-text">Employee</div>
+                </div>
+                {employeeLoading && <div>Loading...</div>}
+                {!employeeLoading && filteredEmployees?.length === 0 && employees && (
+                  <div>No employees found</div>
+                )}
+
+                <div className="row">
+                  <div className="col-12 col-md-8 h-sm-25 overflow-auto">
+                    {selectedRole !== "" && (
+                      <div className="row mb-2">
+                        <div className="col-sm-12">
                           <div className="row">
-                            {loading ? ( // Assuming 'loading' here refers to master data loading
+                            {filteredEmployees?.map((emp) => {
-                              <div className="col-12">
+                              const jobRole = jobRoleData?.find(
-                                <p className="text-center">Loading roles...</p>
+                                (role) => role?.id === emp?.jobRoleId
-                              </div>
+                              );
-                            ) : filteredEmployees?.length > 0 ? (
-                              filteredEmployees?.map((emp) => {
-                                const jobRole = jobRoleData?.find(
-                                  (role) => role?.id === emp?.jobRoleId
-                                );
 
-                                return (
+                              return (
-                                  <div
+                                <div
-                                    key={emp.id}
+                                  key={emp.id}
-                                    className="col-6 col-md-4 col-lg-3 mb-3"
+                                  className="col-6 col-sm-6 col-md-4 col-lg-4 mb-1"
-                                  >
+                                >
-                                    <div className="form-check d-flex align-items-start">
+                                  <div className="form-check text-start p-0">
+                                    <div className="li-wrapper d-flex justify-content-start align-items-start">
                                       <Controller
                                         name="selectedEmployees"
                                         control={control}
                                         render={({ field }) => (
                                           <input
                                             {...field}
-                                            className="form-check-input me-1 mt-1"
+                                            className="form-check-input mx-2"
                                             type="checkbox"
                                             id={`employee-${emp?.id}`}
                                             value={emp.id}
-                                            checked={field.value?.includes(emp.id)}
+                                            checked={field.value.includes(
-                                            onChange={(e) => {
+                                              emp.id
-                                              handleCheckboxChange(e, emp);
+                                            )}
+                                            onChange={() => {
+                                              handleEmployeeSelection(
+                                                emp.id,
+                                                field
+                                              );
                                             }}
                                           />
                                         )}
                                       />
-                                      <div className="flex-grow-1">
+                                      <div className="list-content">
-                                        <p className="mb-0" style={{ fontSize: "13px" }}>
+                                        <p
+                                          className=" mb-0"
+                                          style={{
+                                            fontSize: "12px",
+                                            fontWeight: "bolder",
+                                          }}
+                                        >
                                           {emp.firstName} {emp.lastName}
                                         </p>
                                         <small
-                                          className="text-muted"
+                                          className="lead"
-                                          style={{ fontSize: "11px" }}
+                                          style={{ fontSize: "10px" }}
                                         >
-                                          {loading ? (
+                                          {loading && (
-                                            <span className="placeholder-glow">
+                                            <p
-                                              <span className="placeholder col-6"></span>
+                                              className="skeleton para"
-                                            </span>
+                                              style={{ height: "7px" }}
-                                          ) : (
+                                            ></p>
-                                            jobRole?.name || "Unknown Role"
                                           )}
+                                          {data &&
+                                            !loading &&
+                                            (jobRole
+                                              ? jobRole.name
+                                              : "Unknown Role")}
                                         </small>
                                       </div>
                                     </div>
                                   </div>
-                                );
+                                </div>
-                              })
-                            ) : (
-                              <div className="col-12">
-                                <p className="text-center">No employees found for the selected role.</p>
-                              </div>
-                            )}
-                          </div>
-                        )}
-                      </div>
-                    </div>
-
-                    <div
-                      className="col-12 h-25 overflow-auto"
-                      style={{ maxHeight: "200px" }}
-                    >
-                      {watch("selectedEmployees")?.length > 0 && (
-                        <div className="mt-1">
-                          <div className="text-start px-2">
-                            {watch("selectedEmployees")?.map((empId) => {
-                              const emp = employees.find(
-                                (emp) => emp.id === empId
-                              );
-                              return (
-                                emp && (
-                                  <span
-                                    key={empId}
-                                    className="badge rounded-pill bg-label-primary d-inline-flex align-items-center me-1 mb-1"
-                                  >
-                                    {emp.firstName} {emp.lastName}
-                                    <p
-                                      type="button"
-                                      className=" btn-close-white p-0 m-0"
-                                      aria-label="Close"
-                                      onClick={() => {
-                                        const updatedSelected = watch(
-                                          "selectedEmployees"
-                                        ).filter((id) => id !== empId);
-                                        setValue(
-                                          "selectedEmployees",
-                                          updatedSelected
-                                        );
-                                        trigger("selectedEmployees"); // <--- IMPORTANT: Trigger validation on removing badge
-                                      }}
-                                    >
-                                      <i className="icon-base bx bx-x icon-md "></i>
-                                    </p>
-                                  </span>
-                                )
                               );
                             })}
                           </div>
                         </div>
-                      )}
-                    </div>
-
-                    {!loading && errors.selectedEmployees && (
-                      <div className="danger-text mt-1">
-                        <p>{errors.selectedEmployees.message}</p> {/* Use message from Zod schema */}
                       </div>
                     )}
-
+                  </div>
-                    {/* Pending Task of Activity section */}
+                  <div
-                    <div className="col-md text-start mx-0 px-0">
+                    className="col-12 col-md-4 h-25 overflow-auto"
-                      <div className="form-check form-check-inline mt-3 px-1">
+                    style={{ maxHeight: "200px" }}
-                        <label className="form-text text-dark align-items-center d-flex" htmlFor="inlineCheckbox1">
+                  >
-                          Pending Task of Activity :
+                    {selectedEmployees.length > 0 && (
-                          <label className="form-check-label fs-7 ms-4" htmlFor="inlineCheckbox1">
+                      <div className="mt-1">
-                            <strong>
+                        <div className="text-start px-2">
-                              {assignData?.workItem?.workItem?.plannedWork - assignData?.workItem?.workItem?.completedWork}
+                          {selectedEmployees.map((empId) => {
-                            </strong>{" "}
+                            const emp = employees.find(
-                            <u>{assignData?.workItem?.workItem?.activityMaster?.unitOfMeasurement}</u>
+                              (emp) => emp.id === empId
-                          </label>
+                            );
-
+                            return (
-                          <div style={{ display: "flex", alignItems: "center" }}>
+                              <span
-                            <div
+                                key={empId}
-                              ref={infoRef}
+                                className="badge bg-label-primary d-inline-flex align-items-center gap-2 me-1 p-1 mb-2"
-                              tabIndex="0"
-                              className="d-flex align-items-center avatar-group justify-content-center ms-2"
-                              data-bs-toggle="popover"
-                              data-bs-trigger="focus"
-                              data-bs-placement="right"
-                              data-bs-html="true"
-                              style={{ cursor: "pointer" }}
-                            >
-                              &nbsp;
-                              <svg
-                                xmlns="http://www.w3.org/2000/svg"
-                                width="13"
-                                height="13"
-                                fill="currentColor"
-                                className="bi bi-info-circle"
-                                viewBox="0 0 16 16"
                               >
-                                <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
+                                {emp.firstName} {emp.lastName}
-                                <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.547 1.11l1.91-2.011c.241-.256.384-.592.287-.984-.172-.439-.58-.827-1.13-.967a.664.664 0 0 1-.58-.309l-.15-.241-.002-.002zM8 4c-.535 0-.943.372-.943.836 0 .464.408.836.943.836.535 0 .943-.372.943-.836 0-.464-.408-.836-.943-.836z" />
+                                <p
-                              </svg>
+                                  type="button"
-                            </div>
+                                  className=" btn-close-white p-0 m-0"
-                          </div>
+                                  aria-label="Close"
-                        </label>
+                                  onClick={() => {
-                      </div>
+                                    removeEmployee(empId);
-                    </div>
+                                    setValue(
-
+                                      "selectedEmployees",
-                    {/* Target for Today input and validation */}
+                                      selectedEmployees.filter(
-                    <div className="col-md text-start mx-0 px-0">
+                                        (id) => id !== empId
-                      <div className="form-check form-check-inline mt-2 px-1 mb-2 text-start">
+                                      )
-                        <label
+                                    );
-                          className="text-dark text-start d-flex align-items-center flex-wrap form-text"
+                                  }}
-                          htmlFor="inlineCheckbox1"
-                        >
-                          <span>Target for Today</span>&nbsp;<span style={{ marginLeft: '46px' }}>:</span>
-                        </label>
-                      </div>
-                      <div className="form-check form-check-inline col-sm-3 mt-2" style={{ marginLeft: '-28px' }}>
-                        <Controller
-                          name="plannedTask"
-                          control={control}
-                          render={({ field }) => (
-                            <div className="d-flex align-items-center gap-1 ">
-                              <input
-                                type="text"
-                                className="form-control form-control-sm"
-                                {...field}
-                                id="defaultFormControlInput"
-                                aria-describedby="defaultFormControlHelp"
-                              />
-                              <span style={{ paddingLeft: '6px' }}>
-                                {assignData?.workItem?.workItem?.activityMaster?.unitOfMeasurement}
-                              </span>
-                              <div style={{ display: "flex", alignItems: "center" }}>
-                                <div
-                                  ref={infoRef1}
-                                  tabIndex="0"
-                                  className="d-flex align-items-center avatar-group justify-content-center ms-2"
-                                  data-bs-toggle="popover"
-                                  data-bs-trigger="focus"
-                                  data-bs-placement="right"
-                                  data-bs-html="true"
-                                  style={{ cursor: "pointer" }}
                                 >
-                                  &nbsp;
+                                  <i className="icon-base bx bx-x icon-md "></i>
-                                  <svg
+                                </p>
-                                    xmlns="http://www.w3.org/2000/svg"
+                              </span>
-                                    width="13"
+                            );
-                                    height="13"
+                          })}
-                                    fill="currentColor"
-                                    className="bi bi-info-circle"
-                                    viewBox="0 0 16 16"
-                                  >
-                                    <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
-                                    <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.547 1.11l1.91-2.011c.241-.256.384-.592.287-.984-.172-.439-.58-.827-1.13-.967a.664.664 0 0 1-.58-.309l-.15-.241-.002-.002zM8 4c-.535 0-.943.372-.943.836 0 .464.408.836.943.836.535 0 .943-.372.943-.836 0-.464-.408-.836-.943-.836z" />
-                                  </svg>
-                                </div>
-                              </div>
-                            </div>
-                          )}
-                        />
-                      </div>
-
-                      {errors.plannedTask && (
-                        <div className="danger-text mt-1">{errors.plannedTask.message}</div>
-                      )}
-
-                      {isHelpVisible && (
-                        <div
-                          className="position-absolute bg-white border p-2 rounded shadow"
-                          style={{ zIndex: 10, marginLeft: '10px' }}
-                        >
-                          {/* Add your help content here */}
-                          <p className="mb-0">Enter the target value for today's task.</p>
                         </div>
-                      )}
+                      </div>
-                    </div>
+                    )}
+                  </div>
+                </div>
 
-                    {/* Description field */}
+                <div className="col-md text-start mx-0 px-0">
+                  <div className="form-check form-check-inline mt-4 px-1">
+                    <label className="form-text fs-6" for="inlineCheckbox1">
+                      Pending Work
+                    </label>
                     <label
-                      className="form-text fs-7 m-1 text-lg text-dark"
+                      className="form-check-label ms-2"
-                      htmlFor="descriptionTextarea" // Changed htmlFor for better accessibility
+                      for="inlineCheckbox1"
                     >
-                      Description
+                      {assignData?.workItem?.workItem?.plannedWork -
+                        assignData?.workItem?.workItem?.completedWork}
+                    </label>
+                  </div>
+                  <div className="form-check form-check-inline col-sm-2 col">
+                    <label for="defaultFormControlInput" className="form-label">
+                      Target
                     </label>
                     <Controller
-                      name="description"
+                      name="plannedTask"
                       control={control}
                       render={({ field }) => (
-                        <textarea
+                        <input
+                          type="text"
+                          className="form-control form-control-xs"
                           {...field}
-                          className="form-control"
+                          id="defaultFormControlInput"
-                          id="descriptionTextarea" // Changed id for better accessibility
+                          aria-describedby="defaultFormControlHelp"
-                          rows="2"
                         />
                       )}
                     />
-                    {errors.description && (
-                      <div className="danger-text">
-                        {errors.description.message}
-                      </div>
-                    )}
                   </div>
+                  {errors.plannedTask && (
+                    <div className="danger-text mt-1">
+                      {errors.plannedTask.message}
+                    </div>
+                  )}
+                </div>
+                {errors.selectedEmployees && (
+                  <div className="danger-text mt-1">
+                    <p>{errors.selectedEmployees.message}</p>
+                  </div>
+                )}
 
-                  {/* Submit and Cancel buttons */}
+                <label for="exampleFormControlTextarea1" className="form-label">
-                  <div className="col-12 d-flex justify-content-center align-items-center gap-sm-6 gap-8 text-center mt-1">
+                  Description
-                    <button type="submit" className="btn btn-sm btn-primary ">
+                </label>
-                      Submit
+                <Controller
-                    </button>
+                  name="description"
-                    <button
+                  control={control}
-                      type="reset"
+                  render={({ field }) => (
-                      className="btn btn-sm btn-label-secondary"
+                    <textarea
-                      data-bs-dismiss="modal"
+                      {...field}
-                      aria-label="Close"
+                      className="form-control"
-                      onClick={closedModel}
+                      id="exampleFormControlTextarea1"
-                    >
+                      rows="2"
-                      Cancel
+                    />
-                    </button>
+                  )}
+                />
+                {errors.description && (
+                  <div className="danger-text">
+                    {errors.description.message}
                   </div>
-                </form>
+                )}
-              </div>
+
+                <div className="col-12 d-flex justify-content-center align-items-center gap-sm-6 gap-8 text-center mt-1">
+                  <button type="submit" className="btn btn-sm btn-primary ">
+                    Submit
+                  </button>
+                  <button
+                    type="reset"
+                    className="btn btn-sm btn-label-secondary"
+                    data-bs-dismiss="modal"
+                    aria-label="Close"
+                    onClick={closedModel}
+                  >
+                    Cancel
+                  </button>
+                </div>
+              </form>
             </div>
           </div>
         </div>
@@ -560,5 +398,4 @@ const AssignRoleModel = ({ assignData, onClose }) => {
     </div>
   );
 };
-
 export default AssignRoleModel;

src/components/Project/Infrastructure/BuildingModel.jsx

@@ -47,7 +47,7 @@ const BuildingModel = ({
     }
 
     return () => {
-      setValue("name", "");
+      setValue("name", null);
     };
   }, [clearTrigger, onClearComplete, editingBuilding, project?.id]);
 
@@ -107,10 +107,7 @@ const BuildingModel = ({
             className="btn-close"
             data-bs-dismiss="modal"
             aria-label="Close"
-            onClick={() => {
+            onClick={onClose}
-              onClose();
-              reset(); // Call reset here
-            }}
           ></button>
           <h5 className="text-center mb-2">
             Manage Buildings - {project?.name}
@@ -189,10 +186,7 @@ const BuildingModel = ({
                 className="btn btn-sm btn-label-secondary"
                 data-bs-dismiss="modal"
                 aria-label="Close"
-                onClick={() => {
+                onClick={onClose}
-                  onClose();
-                  reset(); // Call reset here
-                }}
               >
                 Cancel
               </button>
@@ -205,5 +199,3 @@ const BuildingModel = ({
 };
 
 export default BuildingModel;
-
-

src/components/Project/Infrastructure/FloorModel.jsx

@@ -2,18 +2,17 @@ import React, { useState, useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { getCachedData } from "../../../slices/apiDataManager";
 import showToast from "../../../services/toastService";
 
+// Zod validation schema
 const floorSchema = z.object({
-  buildingId: z
+  buildingId: z.string().min(1, "Building is required"),
-    .string()
+  id: z.string().min(1, "Floor is required").optional(),
-    .refine((val) => val !== "0", {
-      message: "Building is required",
-    }),
-  id: z.string().optional(),
   floorName: z.string().min(1, "Floor Name is required"),
 });
 
+// Default model
 const defaultModel = {
   id: "0",
   floorName: "",
@@ -31,10 +30,12 @@ const FloorModel = ({
   const [selectedBuilding, setSelectedBuilding] = useState({});
   const [buildings, setBuildings] = useState(project?.buildings || []);
 
+  // Initialize the form with React Hook Form
   const {
     register,
     handleSubmit,
     setValue,
+    getValues,
     reset,
     formState: { errors },
   } = useForm({
@@ -49,10 +50,10 @@ const FloorModel = ({
     }
   }, [clearTrigger, onClearComplete, reset]);
 
+  // Handle building selection change
   const handleBuildigChange = (e) => {
     const buildingId = e.target.value;
     const building = buildings.find((b) => b.id === String(buildingId));
-
     if (building) {
       setSelectedBuilding(building);
       setFormData({
@@ -60,8 +61,8 @@ const FloorModel = ({
         floorName: "",
         buildingId: building.id,
       });
-      setValue("buildingId", building.id, { shouldValidate: true }); // ✅ trigger validation
+      setValue("buildingId", building.id); // Set value for validation
-      setValue("id", "0");
+      setValue("id", "0"); // Reset floorId when changing building
     } else {
       setSelectedBuilding({});
       setFormData({
@@ -69,14 +70,14 @@ const FloorModel = ({
         floorName: "",
         buildingId: "0",
       });
-      setValue("buildingId", "0", { shouldValidate: true }); // ✅ trigger validation
+      setValue("buildingId", "0");
     }
   };
 
+  // Handle floor selection change
   const handleFloorChange = (e) => {
     const id = e.target.value;
-    const floor = selectedBuilding.floors?.find((b) => b.id === String(id));
+    const floor = selectedBuilding.floors.find((b) => b.id === String(id));
-
     if (floor) {
       setFormData({
         id: floor.id,
@@ -94,14 +95,15 @@ const FloorModel = ({
     }
   };
 
+  // Handle form submission
   const onFormSubmit = (data) => {
-    if (data.id === "0") {
+    if(data.id == "0"){
       data.id = null;
     }
-
     onSubmit(data);
-    reset({ floorName: "" });
+    reset({
-
+      floorName: "",
+    });
     if (data.id !== null) {
       showToast("Floor updated successfully.", "success");
     } else {
@@ -139,14 +141,17 @@ const FloorModel = ({
                   {buildings?.length > 0 &&
                     buildings
                       .filter((building) => building?.name)
-                      .sort((a, b) =>
+                      .sort((a, b) => {
-                        (a.name || "").localeCompare(b.name || "")
+                        const nameA = a.name || "";
-                      )
+                        const nameB = b.name || "";
+                        return nameA?.localeCompare(nameB);
+                      })
                       .map((building) => (
                         <option key={building.id} value={building.id}>
                           {building.name}
                         </option>
                       ))}
+
                   {buildings?.length === 0 && (
                     <option disabled>No buildings found</option>
                   )}
@@ -157,57 +162,63 @@ const FloorModel = ({
               </div>
 
               {formData.buildingId !== "0" && (
-                <>
+                <div className="col-12 col-md-12">
-                  <div className="col-12 col-md-12">
+                  <label className="form-label">Select Floor</label>
-                    <label className="form-label">Select Floor</label>
+                  <select
-                    <select
+                    id="id"
-                      id="id"
+                    className="select2 form-select form-select-sm"
-                      className="select2 form-select form-select-sm"
+                    aria-label="Select Floor"
-                      aria-label="Select Floor"
+                    {...register("id")}
-                      {...register("id")}
+                    onChange={handleFloorChange}
-                      onChange={handleFloorChange}
+                  >
-                    >
+                    <option value="0">Add New Floor</option>
-                      <option value="0">Add New Floor</option>
+                    {/* {selectedBuilding?.floors?.map((floor) => (
-                      {selectedBuilding?.floors?.length > 0 &&
+                      <option key={floor.id} value={floor.id}>
-                        [...selectedBuilding.floors]
+                        {floor.floorName}
-                          .filter((floor) => floor?.floorName)
+                      </option>
-                          .sort((a, b) =>
+                    ) )} */}
-                            (a.floorName || "").localeCompare(
-                              b.floorName || ""
-                            )
-                          )
-                          .map((floor) => (
-                            <option key={floor.id} value={floor.id}>
-                              {floor.floorName}
-                            </option>
-                          ))}
-                      {selectedBuilding?.floors?.length === 0 && (
-                        <option disabled>No floors found</option>
-                      )}
-                    </select>
-                    {errors.id && (
-                      <p className="text-danger">{errors.id.message}</p>
-                    )}
-                  </div>
 
-                  <div className="col-12 col-md-12">
+                    {selectedBuilding &&
-                    <label className="form-label">
+                      selectedBuilding.floors?.length > 0 &&
-                      {formData.id !== "0" ? "Modify " : "Enter "} Floor Name
+                      [...selectedBuilding.floors]
-                    </label>
+                        .filter((floor) => floor?.floorName) 
-                    <input
+                        .sort((a, b) => {
-                      type="text"
+                          const nameA = a.floorName || ""; 
-                      id="floorName"
+                          const nameB = b.floorName || "";
-                      className="form-control form-control-sm me-2"
+                          return nameA?.localeCompare(nameB);
-                      placeholder="Floor Name"
+                        })
-                      {...register("floorName")}
+                        .map((floor) => (
-                    />
+                          <option key={floor.id} value={floor.id}>
-                    {errors.floorName && (
+                            {floor.floorName}
-                      <p className="text-danger">
+                          </option>
-                        {errors.floorName.message}
+                        ))}
-                      </p>
+
+                    {selectedBuilding?.floors?.length === 0 && (
+                      <option disabled>No floors found</option>
                     )}
-                  </div>
+                  </select>
-                </>
+                  {errors.id && (
+                    <p className="text-danger">{errors.id.message}</p>
+                  )}
+                </div>
+              )}
+
+              {formData.buildingId !== "0" && (
+                <div className="col-12 col-md-12">
+                  <label className="form-label" >
+                    {formData.id !== "0" ? "Modify " : "Enter "} Floor Name
+                  </label>
+                  <input
+                    type="text"
+                    id="floorName"
+                    className="form-control form-control-sm me-2"
+                    placeholder="Floor Name"
+                    {...register("floorName")}
+                  />
+                  {errors.floorName && (
+                    <p className="text-danger">{errors.floorName.message}</p>
+                  )}
+                </div>
               )}
 
               <div className="col-12 text-center">

src/components/Project/Infrastructure/InfraTable.jsx

@@ -31,7 +31,7 @@ const InfraTable = ({ buildings }) => {
         {
           building: null,
           floor: {
-            id: data.id || null,
+            id: data.id || "0",
             floorName: data.floorName,
             buildingId: data.buildingId,
           },

src/components/Project/Infrastructure/WorkArea.jsx

@@ -184,7 +184,10 @@ const WorkArea = ({ workArea, floor, forBuilding }) => {
                             Category
                           </th>
                           <th className="infra-activity-table-header d-none d-md-table-cell">
-                            Completed/Planned
+                            Planned
+                          </th>
+                          <th className="infra-activity-table-header d-none d-md-table-cell">
+                            Completed
                           </th>
                           <th className="infra-activity-table-header">
                             Progress

src/components/Project/Infrastructure/WorkItem.jsx

@@ -148,7 +148,7 @@ const WorkItem = ({
           <span className="fw-light">
             {hasWorkItem
               ? NewWorkItem?.workItem?.activityMaster?.activityName ||
-              workItem.activityMaster?.activityName
+                workItem.activityMaster?.activityName
               : "NA"}
           </span>
         </td>
@@ -157,8 +157,8 @@ const WorkItem = ({
         <td className="text-center d-sm-table-cell d-md-none">
           {hasWorkItem
             ? NewWorkItem?.workItem?.completedWork ??
-            workItem?.completedWork ??
+              workItem?.completedWork ??
-            "NA"
+              "NA"
             : "NA"}
           /{" "}
           {hasWorkItem
@@ -171,22 +171,28 @@ const WorkItem = ({
           <span className="fw-light">
             {hasWorkItem
               ? NewWorkItem?.workItem?.workCategoryMaster?.name ||
-              workItem.workCategoryMaster?.name ||
+                workItem.workCategoryMaster?.name ||
-              "NA"
+                "NA"
               : "NA"}
           </span>
         </td>
 
+        {/* Planned - visible on medium and above */}
         <td className="text-center d-none d-md-table-cell">
-          {hasWorkItem ? (
+          {hasWorkItem
-            `${NewWorkItem?.workItem?.completedWork ??
+            ? NewWorkItem?.workItem?.plannedWork ??
-            workItem?.completedWork ??
+              workItem?.plannedWork ??
-            "0"}/${NewWorkItem?.workItem?.plannedWork ??
+              "NA"
-            workItem?.plannedWork ??
+            : "NA"}
-            "0"}`
+        </td>
-          ) : (
+
-            "NA"
+        {/* Completed - visible on medium and above */}
-          )}
+        <td className="text-center d-none d-md-table-cell">
+          {hasWorkItem
+            ? NewWorkItem?.workItem?.completedWork ??
+              workItem?.completedWork ??
+              "NA"
+            : "NA"}
         </td>
 
         {/* Progress Bar - always visible */}
@@ -199,7 +205,7 @@ const WorkItem = ({
                 width: getProgress(
                   NewWorkItem?.workItem?.plannedWork || workItem?.plannedWork,
                   NewWorkItem?.workItem?.completedWork ||
-                  workItem?.completedWork
+                    workItem?.completedWork
                 ),
                 height: "5px",
               }}
@@ -260,7 +266,7 @@ const WorkItem = ({
             ></i>
 
             <ul className="dropdown-menu dropdown-menu-start">
-              {!projectId && ManageAndAssignTak && PlannedWork !== CompletedWork && (
+              {!projectId && ManageTasks && PlannedWork !== CompletedWork && (
                 <li>
                   <a
                     className="dropdown-item d-flex align-items-center"

src/components/Project/MapUsers.jsx

@@ -114,8 +114,8 @@ const MapUsers = ({
     <>
       <div className="modal-dialog modal-dialog-scrollable mx-sm-auto mx-1 modal-lg modal-simple modal-edit-user">
         <div className="modal-content">
-          <div className="modal-header ">
+          <div className="modal-header">
-            <div className="md-2 mb-n5">
+            <div className="md-2 mb-1">
               {(filteredData.length > 0 ||
                   allocationEmployeesData.length > 0)&& (
                   <div className="input-group">
@@ -129,11 +129,6 @@ const MapUsers = ({
                 )}
             </div>
           </div>
-          <div className="d-flex justify-content-start align-items-center px-4 mt-6">
-          <h5 className="mb-0 mt-1">
-            <i className=" text-warning me-3"></i> Select Employee
-          </h5>
-        </div>
           <div className="modal-body p-sm-4 p-0">
             <table
               className="datatables-users table border-top dataTable no-footer dtr-column "
@@ -141,7 +136,7 @@ const MapUsers = ({
               aria-describedby="DataTables_Table_0_info"
               style={{ width: "100%" }}
             >
-              
+              <thead></thead>
               <tbody>
                 {employeeLoading && allocationEmployeesData.length === 0 && (
                   <p>Loading...</p>

src/components/common/DateRangePicker.jsx

@@ -1,13 +1,11 @@
 import React, { useEffect, useRef } from "react";
 
-const DateRangePicker = ({ onRangeChange, DateDifference = 7, defaultStartDate = new Date() - 1 }) => {
+const DateRangePicker = ({ onRangeChange, DateDifference = 15 }) => {
   const inputRef = useRef(null);
 
   useEffect(() => {
-    const today = new Date();;
+    const today = new Date();
-    today.setDate(today.getDate() - 1);
     const fifteenDaysAgo = new Date();
-   
     fifteenDaysAgo.setDate(today.getDate() - DateDifference);
 
     const fp = flatpickr(inputRef.current, {

src/components/master/CreateJobRole.jsx

@@ -70,9 +70,7 @@ const CreateJobRole = ({onClose}) => {
     const maxDescriptionLength = 255;    
   return (<>
     <form  className="row g-2" onSubmit={handleSubmit(onSubmit)}>
-      <div className="col-12 col-md-12">
+      
-        <label className="fs-5 text-dark text-center d-flex align-items-center justify-content-center flex-wrap">Create Job Role</label>
-      </div>
         <div className="col-12 col-md-12">
           <label className="form-label">Role</label>
           <input type="text" 

src/components/master/CreateRole.jsx

@@ -96,10 +96,7 @@ const CreateRole = ({ modalType, onClose }) => {
   return (
 
     <form className="row g-2" onSubmit={handleSubmit(onSubmit)}>
-      <div className="col-12 col-md-12">
-        <label className="fs-5 text-dark text-center d-flex align-items-center justify-content-center flex-wrap">Create Application Role</label>
 
-      </div>
       <div className="col-12 col-md-12">
         <label className="form-label">Role</label>
         <input type="text"

src/components/master/CreateWorkCategory.jsx

@@ -70,9 +70,6 @@ const CreateWorkCategory = ({onClose}) => {
     const maxDescriptionLength = 255;    
   return (<>
     <form  className="row g-2" onSubmit={handleSubmit(onSubmit)}>
-      <div className="col-12 col-md-12">
-        <label className="fs-5 text-dark text-center d-flex align-items-center justify-content-center flex-wrap">Create Work Category</label>        
-      </div>
       
         <div className="col-12 col-md-12">
           <label className="form-label">Category Name</label>

src/components/master/EditJobRole.jsx

@@ -77,9 +77,6 @@ const EditJobRole = ({data,onClose}) => {
      
   return (<>
     <form  className="row g-2" onSubmit={handleSubmit(onSubmit)}>
-      <div className="col-12 col-md-12">
-        <label className="fs-5 text-dark text-center d-flex align-items-center justify-content-center flex-wrap">Edit Job Role</label>        
-      </div>
         <div className="col-12 col-md-12">
           <label className="form-label">Role</label>
           <input type="text" 

src/components/master/EditRole.jsx

@@ -146,9 +146,7 @@ const EditMaster = ({ master, onClose }) => {
   return (
 
     <form className="row g-2 " onSubmit={handleSubmit(onSubmit)}>
-      <div className="col-12 col-md-12">
+
-        <label className="fs-5 text-dark text-center d-flex align-items-center justify-content-center flex-wrap">Edit Application Role</label>
-      </div>
       <div className="col-12 col-md-12">
         <label className="form-label">Role</label>
         <input type="text"

src/components/master/EditWorkCategory.jsx

@@ -77,10 +77,6 @@ const EditWorkCategory = ({data,onClose}) => {
      
   return (<>
     <form  className="row g-2" onSubmit={handleSubmit(onSubmit)}>
-      <div className="col-12 col-md-12">
-        <label className="fs-5 text-dark text-center d-flex align-items-center justify-content-center flex-wrap">Edit Work Category</label>        
-      </div>
-      
         <div className="col-12 col-md-12">
           <label className="form-label">Category Name</label>
           <input type="text" 

src/data/menuData.json

@@ -48,7 +48,7 @@
                         "link": "/activities/task"
                     },
                     {
-                        "text": "Daily Progress Report",
+                        "text": "Daily Task",
                         "available": true,
                         "link": "/activities/records"
                     },

src/hooks/useAttendanceStatus.js

@@ -1,7 +1,8 @@
-import { useEffect, useState } from "react";
+import { useEffect, useState } from 'react';
-import { timeElapsed } from "../utils/dateUtils";
+import { timeElapsed } from '../utils/dateUtils';
-import { useSelector } from "react-redux";
+import { useSelector } from 'react-redux';
-import { THRESH_HOLD } from "../utils/constants";
+import {THRESH_HOLD} from '../utils/constants';
+
 
 export const ACTIONS = {
   CHECK_IN: 0,
@@ -9,143 +10,124 @@ export const ACTIONS = {
   REGULARIZATION: 2,
   REQUESTED: 3,
   APPROVED: 4,
-  REJECTED: 5,
+  REJECTED: 5
 };
-const now = new Date();
+
 
 const useAttendanceStatus = (attendanceData) => {
+  
   const [status, setStatus] = useState({
     status: "Unknown",
     action: null,
     disabled: true,
     text: "Unknown",
-    color: "btn-secondary",
+    color: 'btn-secondary',
   });
 
+ 
   useEffect(() => {
+  
     const { checkInTime, checkOutTime, activity } = attendanceData;
 
-    if (activity === 0 && checkInTime === null && checkOutTime === null) {
+     
-      setStatus({
+      if(activity === 0 && checkInTime === null && checkOutTime === null){
-        status: "Check-In",
-        action: ACTIONS.CHECK_IN,
-        disabled: false,
-        text: "Check In",
-        color: "btn-primary",
-      });
-    } else if (activity === 4 && new Date(checkOutTime) < now) {
-      setStatus({
-        status: "Approved",
-        action: ACTIONS.APPROVED,
-        disabled: true,
-        text: "Approved",
-        color: "btn-success",
-      });
-    } else if (
-      activity === 0 &&
-      checkInTime === null &&
-      checkOutTime === null &&
-      !timeElapsed(checkInTime, THRESH_HOLD)
-    ) {
-      setStatus({
-        status: "Check-In",
-        action: ACTIONS.CHECK_IN,
-        disabled: false,
-        text: "Check In",
-        color: "btn-primary",
-      });
-    } else if (
-      activity === 0 &&
-      checkInTime !== null &&
-      checkOutTime === null &&
-      timeElapsed(checkInTime, THRESH_HOLD)
-    ) {
-      setStatus({
-        status: "Request Regularize",
-        action: ACTIONS.REGULARIZATION,
-        disabled: false,
-        text: "Regularizes",
-        color: "btn-warning",
-      });
-    } else if (
-      activity === 1 &&
-      checkInTime !== null &&
-      checkOutTime === null &&
-      !timeElapsed(checkInTime, THRESH_HOLD)
-    ) {
-      setStatus({
-        status: "Check-Out",
-        action: ACTIONS.CHECK_OUT,
-        disabled: false,
-        text: "Check Out",
-        color: "btn-primary",
-      });
-    } else if (
-      activity === 1 &&
-      checkInTime !== null &&
-      checkOutTime === null &&
-      timeElapsed(checkInTime, THRESH_HOLD)
-    ) {
-      setStatus({
-        status: "Request Regularize",
-        action: ACTIONS.REGULARIZATION,
-        disabled: false,
-        text: "Regularize",
-        color: "btn-warning",
-      });
-    } else if (
-      activity === 4 &&
-      checkInTime !== null &&
-      checkOutTime !== null &&
-      !timeElapsed(checkInTime, THRESH_HOLD)
-    ) {
-      if (
-        activity === 4 &&
-        checkInTime !== null &&
-        checkOutTime !== null &&
-        new Date(checkOutTime).toDateString() !== new Date().toDateString()
-      ) {
-        setStatus({
-          status: "Approved",
-          action: ACTIONS.APPROVED,
-          disabled: true,
-          text: "Approved",
-          color: "btn-success",
-        });
-      } else {
         setStatus({
           status: "Check-In",
           action: ACTIONS.CHECK_IN,
           disabled: false,
           text: "Check In",
-          color: "btn-primary",
+          color: 'btn-primary',
+        })
+      }else if(activity === 0&& checkInTime === null && checkOutTime === null && !timeElapsed(checkInTime,THRESH_HOLD)){
+        setStatus({
+          status: "Check-In",
+          action: ACTIONS.CHECK_IN,
+          disabled: false,
+          text: "Check In",
+          color: 'btn-primary',
+        })
+
+      } else if(activity === 0&& checkInTime !== null && checkOutTime === null && timeElapsed(checkInTime,THRESH_HOLD)){
+        setStatus({
+          status: "Request Regularize",
+          action: ACTIONS.REGULARIZATION,
+          disabled: false,
+          text: "Regularizes",
+          color: 'btn-warning',
+        });
+
+      } 
+      
+      else if(activity === 1 && checkInTime !== null && checkOutTime === null && !timeElapsed(checkInTime,THRESH_HOLD)){
+        setStatus({
+          status: "Check-Out",
+          action: ACTIONS.CHECK_OUT,
+          disabled: false,
+          text: "Check Out",
+          color: 'btn-primary',
+        });
+      }else if(activity === 1 && checkInTime !== null && checkOutTime === null && timeElapsed(checkInTime,THRESH_HOLD)){
+        setStatus({
+          status: "Request Regularize",
+          action: ACTIONS.REGULARIZATION,
+          disabled: false,
+          text: "Regularize",
+          color: 'btn-warning',
+        });
+      } else if ( activity === 4 && checkInTime !== null && checkOutTime !== null && !timeElapsed( checkInTime, THRESH_HOLD ) )
+        {
+          
+          if ( activity === 4 && checkInTime !== null && checkOutTime !== null && new Date(checkOutTime).toDateString() !== new Date().toDateString())
+          {
+            setStatus( {
+              status: "Approved",
+              action: ACTIONS.APPROVED,
+              disabled: true,
+              text: "Approved",
+              color: 'btn-success',
+            } );
+          } else
+          {
+            setStatus( {
+              status: "Check-In",
+              action: ACTIONS.CHECK_IN,
+              disabled: false,
+              text: "Check In",
+              color: 'btn-primary',
+            } )
+          }
+        } 
+        else if ( activity === 2 && checkInTime !== null )
+        {
+        setStatus({
+          status: "Requested",
+          action: ACTIONS.REQUESTED,
+          disabled: true,
+          text: "Requested",
+          color: 'btn-info',
+        });
+      }else if(activity === 5 && checkInTime !== null  ){
+
+
+        setStatus({
+          status: "Rejected",
+          action: ACTIONS.REJECTED,
+          disabled: true,
+          text: "Rejected",
+          color: 'btn-danger',
+        });
+       
+      }else {
+        setStatus({
+          status: "Approved",
+          action: ACTIONS.APPROVED,
+          disabled: true,
+          text: "Approved",
+          color: 'btn-success',
         });
       }
-    } else if (activity === 2 && checkInTime !== null) {
+
-      setStatus({
+   
-        status: "Requested",
-        action: ACTIONS.REQUESTED,
-        disabled: true,
-        text: "Requested",
-        color: "btn-info",
-      });
-    } else if (activity === 5 && checkInTime !== null) {
-      setStatus({
-        status: "Rejected",
-        action: ACTIONS.REJECTED,
-        disabled: true,
-        text: "Rejected",
-        color: "btn-danger",
-      });
-    } else {
-      setStatus({
-        status: "Approved",
-        action: ACTIONS.APPROVED,
-        disabled: true,
-        text: "Approved",
-        color: "btn-success",
-      });
-    }
   }, [attendanceData]);
 
   return status;

src/pages/Activities/AttendancePage.jsx

@@ -21,7 +21,7 @@ import { REGULARIZE_ATTENDANCE } from "../../utils/constants";
 
 const AttendancePage = () => {
   const [activeTab, setActiveTab] = useState("all");
-  const [showOnlyCheckout, setShowOnlyCheckout] = useState(false);
+
   const loginUser = getCachedProfileData();
   var selectedProject = useSelector((store) => store.localVariables.projectId);
   const { projects, loading: projectLoading } = useProjects();
@@ -86,10 +86,6 @@ const AttendancePage = () => {
       });
   };
 
-  const handleToggle = (event) => {
-    setShowOnlyCheckout(event.target.checked);
-  };
-
   useEffect(() => {
     if (modelConfig !== null) {
       openModel();
@@ -104,17 +100,6 @@ const AttendancePage = () => {
       dispatch(setProjectId(loginUser?.projects[0]));
     }
   }, [selectedProject, loginUser?.projects]);
-
-  // Filter attendance data based on the toggle
-  // const filteredAttendance = showOnlyCheckout
-  //   ? attendances?.filter(
-  //     (att) => att?.checkOutTime !== null && att?.checkInTime !== null
-  //   )
-  //   : attendances;
-  const filteredAttendance = showOnlyCheckout
-    ? attendances?.filter((att) => att?.checkOutTime === null)
-    : attendances;
-
   return (
     <>
       {isCreateModalOpen && modelConfig && (
@@ -176,7 +161,6 @@ const AttendancePage = () => {
               )}
             </div>
           </ul>
-
           <ul className="nav nav-tabs" role="tablist">
             <li className="nav-item">
               <button
@@ -186,7 +170,7 @@ const AttendancePage = () => {
                 data-bs-toggle="tab"
                 data-bs-target="#navs-top-home"
               >
-                Today's
+                All
               </button>
             </li>
             <li className="nav-item">
@@ -213,26 +197,6 @@ const AttendancePage = () => {
                 Regularization
               </button>
             </li>
-
-            <li
-              className={`nav-item ms-auto ${
-                activeTab === "regularization" ? "d-none" : ""
-              }`}
-            >
-              <label className="switch switch-primary">
-                <input
-                  type="checkbox"
-                  className="switch-input"
-                  checked={showOnlyCheckout}
-                  onChange={handleToggle}
-                />
-                <span className="switch-toggle-slider">
-                  <span className="switch-on"></span>
-                  <span className="switch-off"></span>
-                </span>
-                <span className="switch-label m-2">Pending Actions</span>
-              </label>
-            </li>
           </ul>
           <div className="tab-content attedanceTabs py-2">
             {projectLoading && <span>Loading..</span>}
@@ -240,12 +204,12 @@ const AttendancePage = () => {
 
             {activeTab === "all" && (
               <>
-                {!projectLoading && filteredAttendance?.length === 0 && (
+                {!projectLoading && attendances.length === 0 && (
                   <p>No Employee assigned yet.</p>
                 )}
                 <div className="tab-pane fade show active py-0">
                   <Attendance
-                    attendance={filteredAttendance}
+                    attendance={attendances}
                     handleModalData={handleModalData}
                     getRole={getRole}
                   />
@@ -258,7 +222,6 @@ const AttendancePage = () => {
                 <AttendanceLog
                   handleModalData={handleModalData}
                   projectId={selectedProject}
-                  showOnlyCheckout={showOnlyCheckout}
                 />
               </div>
             )}

src/pages/Activities/DailyTask.jsx

@@ -187,13 +187,6 @@ const DailyTask = () => {
                       </td>
                     </tr>
                   )}
-                  {!task_loading && TaskList.length === 0 && (
-                     <tr>
-                      <td colSpan={7} className="text-center">
-                        <p>No Reports Found</p>
-                      </td>
-                    </tr>
-                  )}
                   {dates.map((date, i) => {
                     return (
                       <React.Fragment key={i}>