diff --git a/src/components/Activities/Attendance.jsx b/src/components/Activities/Attendance.jsx
index 48b63387..46f84632 100644
--- a/src/components/Activities/Attendance.jsx
+++ b/src/components/Activities/Attendance.jsx
@@ -10,6 +10,7 @@ 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 : [];
@@ -42,6 +43,13 @@ 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
@@ -127,9 +135,8 @@ 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"
@@ -141,9 +148,8 @@ 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 "
@@ -154,9 +160,8 @@ const Attendance = ({ attendance, getRole, handleModalData }) => {
                     </li>
                   ))}
                   <li
-                    className={`page-item ${
-                      currentPage === totalPages ? "disabled" : ""
-                    }`}
+                    className={`page-item ${currentPage === totalPages ? "disabled" : ""
+                      }`}
                   >
                     <button
                       className="page-link "
diff --git a/src/components/Activities/AttendcesLogs.jsx b/src/components/Activities/AttendcesLogs.jsx
index b173581f..b57a9c75 100644
--- a/src/components/Activities/AttendcesLogs.jsx
+++ b/src/components/Activities/AttendcesLogs.jsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useMemo, useCallback } from "react";
 import moment from "moment";
 import Avatar from "../common/Avatar";
 import { convertShortTime } from "../../utils/dateUtils";
@@ -7,20 +7,35 @@ 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 AttendanceLog = ({ handleModalData, projectId }) => {
-  const [attendances, setAttendnaces] = useState([]);
-  const [selectedDate, setSelectedDate] = useState("");
+const usePagination = (data, itemsPerPage) => {
+  const [currentPage, setCurrentPage] = useState(1);
+  const maxPage = Math.ceil(data.length / itemsPerPage);
+
+  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(true);
-  const [dates, setDates] = useState([]);
+  const [isRefreshing, setIsRefreshing] = useState(false);
+  const [processedData, setProcessedData] = useState([]);
 
   const today = new Date();
-  today.setHours(0, 0, 0, 0); // Strip time to compare dates only
+  today.setHours(0, 0, 0, 0);
+
+  const yesterday = new Date();
+  yesterday.setDate(yesterday.getDate() - 1);
 
   const isSameDay = (dateStr) => {
     if (!dateStr) return false;
@@ -42,59 +57,68 @@ const AttendanceLog = ({ handleModalData, projectId }) => {
     return nameA.localeCompare(nameB);
   };
 
-  const group1 = data
-    .filter((d) => d.activity === 1 && isSameDay(d.checkInTime))
-    .sort(sortByName);
-  const group2 = data
-    .filter((d) => d.activity === 4 && isSameDay(d.checkOutTime))
-    .sort(sortByName);
-  const group3 = data
-    .filter((d) => d.activity === 1 && isBeforeToday(d.checkInTime))
-    .sort(sortByName);
-  const group4 = data
-    .filter( ( d ) => d.activity === 4 && isBeforeToday( d.checkOutTime ) )
-    
-    const group5 = data
-    .filter((d) => d.activity === 2 && isBeforeToday(d.checkOutTime))
-    .sort(sortByName);
-  const group6 = data.filter((d) => d.activity === 5).sort(sortByName);
-
-  const sortedFinalList = [
-    ...group1,
-    ...group2,
-    ...group3,
-    ...group4,
-    ...group5,
-     ...group6,
-  ];
-
-  const currentDate = new Date().toLocaleDateString("en-CA");
-  const { currentPage, totalPages, currentItems, paginate } = usePagination(
-    sortedFinalList,
-    ITEMS_PER_PAGE
-  );
-
   useEffect(() => {
     const { startDate, endDate } = dateRange;
-    if (startDate && endDate) {
-      dispatch(
-        fetchAttendanceData({
-          projectId,
-          fromDate: startDate,
-          toDate: endDate,
-        })
-      );
-    }
-  }, [dateRange, projectId, isRefreshing]);
+    dispatch(
+      fetchAttendanceData({
+        projectId,
+        fromDate: startDate,
+        toDate: endDate,
+      })
+    );
+    setIsRefreshing(false);
+  }, [dateRange, projectId, dispatch, 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]);
+    const filteredData = showOnlyCheckout
+      ? data.filter((item) => item.checkOutTime === null)
+      : data;
+
+    const group1 = filteredData
+      .filter((d) => d.activity === 1 && isSameDay(d.checkInTime))
+      .sort(sortByName);
+    const group2 = filteredData
+      .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();
+  }, [processedData, resetPage]);
 
   return (
     <>
@@ -103,15 +127,14 @@ const AttendanceLog = ({ handleModalData, projectId }) => {
         id="DataTables_Table_0_length"
       >
         <div className="col-md-3 my-0 ">
-          <DateRangePicker onRangeChange={setDateRange} />
+          <DateRangePicker onRangeChange={setDateRange} defaultStartDate={yesterday} />
         </div>
         <div className="col-md-2 m-0 text-end">
           <i
-            className={`bx bx-refresh cursor-pointer fs-4 ${
-              loading ? "spin" : ""
-            }`}
+            className={`bx bx-refresh cursor-pointer fs-4 ${loading || isRefreshing ? "spin" : ""
+              }`}
             title="Refresh"
-            onClick={() => setIsRefreshing(!isRefreshing)}
+            onClick={() => setIsRefreshing(true)}
           />
         </div>
       </div>
@@ -125,8 +148,7 @@ const AttendanceLog = ({ handleModalData, projectId }) => {
                 </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
@@ -135,107 +157,96 @@ const AttendanceLog = ({ handleModalData, projectId }) => {
               </tr>
             </thead>
             <tbody>
-              {loading && <td colSpan={5}>Loading...</td>}
-              {dates.map((date, i) => {
-                return (
-                  <React.Fragment key={i}>
-                    {currentItems.some(
-                      (item) => item.checkInTime.split("T")[0] === date
-                    ) && (
-                      <tr className="table-row-header">
-                        <td colSpan={7} className="text-start">
-                          <strong>{date}</strong>
-                        </td>
-                      </tr>
-                    )}
-                    {currentItems
-                      ?.filter((item) => item.checkInTime.includes(date))
-                      .map((attendance, index) => (
-                        <tr key={index}>
-                          <td colSpan={2}>
-                            <div className="d-flex justify-content-start align-items-center">
-                              <Avatar
-                                firstName={attendance.firstName}
-                                lastName={attendance.lastName}
-                              />
-                              <div className="d-flex flex-column">
-                                <a
-                                  href="#"
-                                  className="text-heading text-truncate"
-                                >
-                                  <span className="fw-normal">
-                                    {attendance.firstName} {attendance.lastName}
-                                  </span>
-                                </a>
-                              </div>
-                            </div>
-                          </td>
-                          <td>
-                            {" "}
-                            {moment(attendance.checkInTime).format(
-                              "DD-MMM-YYYY"
-                            )}
-                          </td>
-                          <td>{convertShortTime(attendance.checkInTime)}</td>
-                          <td>
-                            {attendance.checkOutTime
-                              ? convertShortTime(attendance.checkOutTime)
-                              : "--"}
-                          </td>
-                          <td className="text-center">
-                            <RenderAttendanceStatus
-                              attendanceData={attendance}
-                              handleModalData={handleModalData}
-                              Tab={2}
-                              currentDate={currentDate}
-                            />
-                          </td>
-                        </tr>
-                      ))}
-                  </React.Fragment>
+              {(loading || isRefreshing) && (
+                <tr>
+                  <td colSpan={6}>Loading...</td>
+                </tr>
+              )}
+              {!loading && !isRefreshing && paginatedAttendances.reduce((acc, attendance, index, arr) => {
+                const currentDate = moment(attendance.checkInTime || attendance.checkOutTime).format("YYYY-MM-DD");
+                const previousAttendance = arr[index - 1];
+                const previousDate = previousAttendance ? moment(previousAttendance.checkInTime || previousAttendance.checkOutTime).format("YYYY-MM-DD") : null;
+
+                if (!previousDate || currentDate !== previousDate) {
+                  acc.push(
+                    <tr key={`header-${currentDate}`} className="table-row-header">
+                      <td colSpan={6} className="text-start">
+                        <strong>{moment(currentDate).format("YYYY-MM-DD")}</strong>
+                      </td>
+                    </tr>
+                  );
+                }
+                acc.push(
+                  <tr key={index}>
+                    <td colSpan={2}>
+                      <div className="d-flex justify-content-start align-items-center">
+                        <Avatar
+                          firstName={attendance.firstName}
+                          lastName={attendance.lastName}
+                        />
+                        <div className="d-flex flex-column">
+                          <a
+                            href="#"
+                            className="text-heading text-truncate"
+                          >
+                            <span className="fw-normal">
+                              {attendance.firstName} {attendance.lastName}
+                            </span>
+                          </a>
+                        </div>
+                      </div>
+                    </td>
+                    <td>
+                      {moment(attendance.checkInTime || attendance.checkOutTime).format("DD-MMM-YYYY")}
+                    </td>
+                    <td>{convertShortTime(attendance.checkInTime)}</td>
+                    <td>
+                      {attendance.checkOutTime ? convertShortTime(attendance.checkOutTime) : "--"}
+                    </td>
+                    <td className="text-center">
+                      <RenderAttendanceStatus
+                        attendanceData={attendance}
+                        handleModalData={handleModalData}
+                        Tab={2}
+                        currentDate={today.toLocaleDateString("en-CA")}
+                      />
+                    </td>
+                  </tr>
                 );
-              })}
+                return acc;
+              }, [])}
             </tbody>
           </table>
         )}
-        {!loading && data.length === 0 && <span>No employee logs</span>}
-        {error && <td colSpan={5}>{error}</td>}
+        {!loading && !isRefreshing && data.length === 0 && <span>No employee logs</span>}
+        {error && !loading && !isRefreshing && (
+          <tr>
+            <td colSpan={6}>{error}</td>
+          </tr>
+        )}
       </div>
-      {!loading && (
+      {!loading && !isRefreshing && processedData.length > 10 && (
         <nav aria-label="Page ">
           <ul className="pagination pagination-sm justify-content-end py-1">
-            <li className={`page-item  ${currentPage === 1 ? "disabled" : ""}`}>
-              <button
-                className="page-link btn-xs"
-                onClick={() => paginate(currentPage - 1)}
-              >
+            <li className={`page-item ${currentPage === 1 ? "disabled" : ""}`}>
+              <button className="page-link btn-xs" onClick={() => paginate(currentPage - 1)}>
                 &laquo;
               </button>
             </li>
-            {[...Array(totalPages)].map((_, index) => (
+            {Array.from({ length: totalPages }, (_, i) => i + 1).map((pageNumber) => (
               <li
-                key={index}
-                className={`page-item ${
-                  currentPage === index + 1 ? "active" : ""
-                }`}
+                key={pageNumber}
+                className={`page-item ${currentPage === pageNumber ? "active" : ""}`}
               >
-                <button
-                  className="page-link "
-                  onClick={() => paginate(index + 1)}
-                >
-                  {index + 1}
+                <button className="page-link" onClick={() => paginate(pageNumber)}>
+                  {pageNumber}
                 </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>
@@ -246,4 +257,4 @@ const AttendanceLog = ({ handleModalData, projectId }) => {
   );
 };
 
-export default AttendanceLog;
+export default AttendanceLog;
\ No newline at end of file
diff --git a/src/components/Activities/CheckCheckOutForm.jsx b/src/components/Activities/CheckCheckOutForm.jsx
index b820233d..fe12730b 100644
--- a/src/components/Activities/CheckCheckOutForm.jsx
+++ b/src/components/Activities/CheckCheckOutForm.jsx
@@ -7,20 +7,29 @@ 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"}), 
-  description:z.string().max(200,"description should less than 200 chracters").optional()
+  markTime: z.string().nonempty({ message: "Time is required" }),
+  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,
@@ -29,60 +38,78 @@ const CheckCheckOutmodel = ({modeldata,closeModal,handleSubmitForm,}) => {
     reset,
     setValue,
   } = useForm({
-    resolver: zodResolver( schema ),
-    mode:"onChange"
+    resolver: zodResolver(schema),
+    mode: "onChange"
   });
 
-  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){
-    handleSubmitForm(record)
-   } else
-   {
+  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) {
+      handleSubmitForm(record)
+    } else {
 
-    //  if ( modeldata?.currentDate && checkIfCurrentDate( modeldata?.currentDate ) )
-    //  {
-       dispatch(markAttendance(record))
-       .unwrap()
-         .then( ( data ) =>
-         {
-          
-         showToast("Attendance Marked Successfully", "success");
-       })
-         .catch( ( error ) =>
-         {
+      //  if ( modeldata?.currentDate && checkIfCurrentDate( modeldata?.currentDate ) )
+      //  {
+      dispatch(markAttendance(record))
+        .unwrap()
+        .then((data) => {
 
-          showToast(error, "error" );
+          showToast("Attendance Marked Successfully", "success");
+        })
+        .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">
-        <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>}
+        <label className="fs-5 text-dark text-center d-flex align-items-center flex-wrap">
+          {modeldata?.checkInTime && !modeldata?.checkOutTime ? 'Check-out :' : 'Check-in :'}
+        </label>
+      </div>
+
+      <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>}
       </div>
 
-    
       <div className="col-12 col-md-12">
         <label className="form-label" htmlFor="description">
           Description
@@ -91,7 +118,7 @@ const CheckCheckOutmodel = ({modeldata,closeModal,handleSubmitForm,}) => {
           rows="3"
           name="description"
           className="form-control"
-          {...register( "description" )}
+          {...register("description")}
           maxLength={200}
         />
         {errors.description && (
@@ -99,7 +126,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"}
@@ -109,7 +136,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>
@@ -124,15 +151,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,
@@ -146,22 +173,21 @@ export const Regularization = ({modeldata,closeModal,handleSubmitForm})=>{
     return today.toLocaleDateString('en-CA');
   };
 
-  
-  const onSubmit = ( data ) =>
-  {
 
-    let record = {...data, date: new Date().toLocaleDateString(),latitude:coords.latitude,longitude:coords.longitude, }
+  const onSubmit = (data) => {
+
+    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>
@@ -176,7 +202,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"}
@@ -186,7 +212,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>
diff --git a/src/components/Dashboard/Dashboard.jsx b/src/components/Dashboard/Dashboard.jsx
index a352f5a5..1e4cceaf 100644
--- a/src/components/Dashboard/Dashboard.jsx
+++ b/src/components/Dashboard/Dashboard.jsx
@@ -1,271 +1,50 @@
-import React, { useState } from "react";
-import HorizontalBarChart from "../Charts/HorizontalBarChart";
-import LineChart from "../Charts/LineChart";
-import { useProjects } from "../../hooks/useProjects";
+import React from "react";
 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">
-          <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>
+          <Projects projectsCardData={projectsCardData} />
         </div>
 
         {/* Teams Card */}
         <div className="col-sm-6 col-lg-4">
-          <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>
+          <Teams teamsCardData={teamsCardData} />
         </div>
 
         {/* Tasks Card */}
         <div className="col-sm-6 col-lg-4">
-          <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>
+          <TasksCard tasksCardData={tasksCardData} />
         </div>
 
-        {/* Bar Chart */}
+        {/* Bar Chart (Project Completion) */}
         <div className="col-xxl-6 col-lg-6">
-          <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>
+          <ProjectCompletionChart />
         </div>
 
-        {/* Line Chart */}
+        {/* Line Chart (Project Progress) */}
         <div className="col-xxl-6 col-lg-6">
-          <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>
+          <ProjectProgressChart />
         </div>
       </div>
     </div>
   );
 };
 
-export default Dashboard;
+export default Dashboard;
\ No newline at end of file
diff --git a/src/components/Dashboard/ProjectCompletionChart.jsx b/src/components/Dashboard/ProjectCompletionChart.jsx
new file mode 100644
index 00000000..f0c85179
--- /dev/null
+++ b/src/components/Dashboard/ProjectCompletionChart.jsx
@@ -0,0 +1,37 @@
+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;
diff --git a/src/components/Dashboard/ProjectProgressChart.jsx b/src/components/Dashboard/ProjectProgressChart.jsx
new file mode 100644
index 00000000..e96b8a48
--- /dev/null
+++ b/src/components/Dashboard/ProjectProgressChart.jsx
@@ -0,0 +1,126 @@
+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;
diff --git a/src/components/Dashboard/Projects.jsx b/src/components/Dashboard/Projects.jsx
new file mode 100644
index 00000000..5d1679f6
--- /dev/null
+++ b/src/components/Dashboard/Projects.jsx
@@ -0,0 +1,33 @@
+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;
\ No newline at end of file
diff --git a/src/components/Dashboard/Tasks.jsx b/src/components/Dashboard/Tasks.jsx
new file mode 100644
index 00000000..fa924036
--- /dev/null
+++ b/src/components/Dashboard/Tasks.jsx
@@ -0,0 +1,32 @@
+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;
\ No newline at end of file
diff --git a/src/components/Dashboard/Teams.jsx b/src/components/Dashboard/Teams.jsx
new file mode 100644
index 00000000..52a62e61
--- /dev/null
+++ b/src/components/Dashboard/Teams.jsx
@@ -0,0 +1,32 @@
+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;
\ No newline at end of file
diff --git a/src/components/Project/AboutProject.jsx b/src/components/Project/AboutProject.jsx
index 438de6be..b358e8c8 100644
--- a/src/components/Project/AboutProject.jsx
+++ b/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 py-1">
+            <ul className="list-unstyled my-3">
               <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,27 +41,17 @@ const AboutProject = ({ data }) => {
                 <span className="fw-medium mx-2">Contact:</span>{" "}
                 <span>{data.contactPerson}</span>
               </li>
-              <li className="d-flex align-items-center mb-4">
-                <i className="bx bx-flag"></i>
-                <span className="fw-medium mx-2">Address:</span>{" "}
-              </li>
-            </ul>
-            {/* <small className="card-text text-uppercase text-muted small">
-              Contacts
-            </small> */}
-            <ul className="list-unstyled my-3 py-1">
-             
-              {/* <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 className="d-flex flex-column align-items-start mb-4">
+                <div className="d-flex align-items-center">
+                  <i className="bx bx-flag"></i>
+                  <span className="fw-medium mx-2">Address:</span>
+                  {data.projectAddress?.length <= 20 && (
+                    <span>{data.projectAddress}</span>
+                  )}
+                </div>
+                {data.projectAddress?.length > 20 && (
+                  <div className="ms-4 text-start">{data.projectAddress}</div>
+                )}
               </li>
             </ul>
           </div>
diff --git a/src/components/Project/AssignRole.jsx b/src/components/Project/AssignRole.jsx
index e5a567e9..a639abc8 100644
--- a/src/components/Project/AssignRole.jsx
+++ b/src/components/Project/AssignRole.jsx
@@ -1,54 +1,95 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useRef } 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" }),
+      .min(1, { message: "At least one employee must be selected" }), // Added custom message here for consistency
     description: z.string().min(1, { message: "Description is required" }),
     plannedTask: z.preprocess(
-      (val) => parseInt(val, 10),
+      (val) => parseInt(val, 10), // Preprocess value to integer
       z
         .number({
           required_error: "Planned task is required",
-          invalid_type_error: "Planned task must be a number",
+          invalid_type_error: "Target for Today must be a number",
         })
-        .int()
-        .positive({ message: "Planned task must be a positive number" })
+        .int() // Ensure it's an integer
+        .positive({ message: "Planned task must be a positive number" }) // Must be positive
         .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(selectedProject,false);
-
+  const { employees, loading: employeeLoading } = useEmployeesAllOrByProjectId(
+    selectedProject,
+    false
+  );
   const dispatch = useDispatch();
-  const { data, loading } = useMaster();
+  const { loading } = useMaster(); // Assuming this is for jobRoleData loading
   const jobRoleData = getCachedData("Job Role");
 
+  // Local component states
   const [selectedRole, setSelectedRole] = useState("all");
-  const [selectedEmployees, setSelectedEmployees] = useState([]);
+  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
 
+  // React Hook Form setup
   const {
     handleSubmit,
     control,
@@ -56,74 +97,95 @@ const AssignRoleModel = ({ assignData, onClose }) => {
     watch,
     formState: { errors },
     reset,
+    trigger, // <--- IMPORTANT: Destructure 'trigger' here
   } = useForm({
     defaultValues: {
       selectedEmployees: [],
       description: "",
       plannedTask: "",
     },
-    resolver: zodResolver(schema),
+    resolver: zodResolver(schema), // Integrate Zod schema with react-hook-form
   });
 
-  const handleRoleChange = (event) => {
-    reset();
-    // setSelectedEmployees([]);
-    setSelectedRole(event.target.value);
-  };
+  // 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
 
-  const filteredEmployees =
-    selectedRole === "all"
-      ? employees
-      : employees.filter((emp) => String(emp.jobRoleId || "") === selectedRole);
-
-  const handleEmployeeSelection = (employeeId, field) => {
-    setSelectedEmployees((prevSelected) => {
-      let updatedSelection;
-      if (!prevSelected.includes(employeeId)) {
-        updatedSelection = [...prevSelected, employeeId];
-      } else {
-        updatedSelection = prevSelected.filter((id) => id !== employeeId);
+    if (isChecked) {
+      // Add employee if checked and not already in the list
+      if (!updatedSelectedEmployees.includes(user.id)) {
+        updatedSelectedEmployees = [...updatedSelectedEmployees, user.id];
       }
-      field.onChange(updatedSelection);
-      return updatedSelection;
-    });
-  };
-
-  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");
+    } 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) => {
+    setSelectedRole(event.target.value);
+  };
+
+  // Filter employees based on selected role
+  const filteredEmployees =
+    selectedRole === "all"
+      ? employees
+      : employees?.filter(
+          (emp) => String(emp.jobRoleId || "") === selectedRole
+        );
+
+  // Form submission handler
+  const onSubmit = async (data) => {
+    const selectedEmployeeIds = data.selectedEmployees;
+
+    // Prepare taskTeam data (only IDs are needed for the backend based on previous context)
+    const taskTeamWithDetails = selectedEmployeeIds
+      .map((empId) => {
+        return empId; // Return just the ID as per previous discussions
+      })
+      .filter(Boolean); // Ensure no nulls if employee not found (though unlikely with current logic)
+
+    // 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 closedModel = () => {
     reset();
     onClose();
   };
+
   return (
     <div
       className="modal-dialog modal-lg modal-simple mx-sm-auto mx-1 edit-project-modal"
@@ -137,260 +199,360 @@ const AssignRoleModel = ({ assignData, onClose }) => {
             onClick={onClose}
             aria-label="Close"
           ></button>
-          <div className="container my-1">
-            <div className="mb-">
-              <p className="fs-sm-5 fs-6 text-dark text-start d-flex align-items-center flex-wrap">
-                {[
-                  assignData?.building?.name,
-                  assignData?.floor?.floorName,
-                  assignData?.workArea?.areaName,
-                  assignData?.workItem?.workItem?.activityMaster?.activityName,
-                ]
-                  .filter(Boolean)
-                  .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>
-                  ))}
-              </p>
+          <div className="fs-5 text-dark text-center d-flex align-items-center justify-content-center flex-wrap">
+            <p className="align-items-center flex-wrap m-0 ">Assign Task</p>
+            <div className="container my-3">
+              <div className="mb-1">
+                <p className="mb-0">
+                  <span className="text-dark text-start d-flex align-items-center flex-wrap form-text">
+                    <p className="me-2 m-0 font-bold">Work Location :</p>
+                    {[
+                      assignData?.building?.name,
+                      assignData?.floor?.floorName,
+                      assignData?.workArea?.areaName,
+                      assignData?.workItem?.workItem?.activityMaster
+                        ?.activityName,
+                    ]
+                      .filter(Boolean) // Filter out any undefined/null values
+                      .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="row mb-1">
-                  <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>
-                )}
+                <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>
 
-                <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">
-                            {filteredEmployees?.map((emp) => {
-                              const jobRole = jobRoleData?.find(
-                                (role) => role?.id === emp?.jobRoleId
-                              );
-
-                              return (
-                                <div
-                                  key={emp.id}
-                                  className="col-6 col-sm-6 col-md-4 col-lg-4 mb-1"
+                            <ul className="dropdown-menu p-2 text-capitalize">
+                              <li key="all">
+                                <button
+                                  type="button"
+                                  className="dropdown-item py-1"
+                                  onClick={() =>
+                                    handleRoleChange({
+                                      target: { value: "all" },
+                                    })
+                                  }
                                 >
-                                  <div className="form-check text-start p-0">
-                                    <div className="li-wrapper d-flex justify-content-start align-items-start">
+                                  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>
+                      )}
+
+                    <div className="row">
+                      <div className="col-12 h-sm-25 overflow-auto mt-2">
+                        {selectedRole !== "" && (
+                          <div className="row">
+                            {loading ? ( // Assuming 'loading' here refers to master data loading
+                              <div className="col-12">
+                                <p className="text-center">Loading roles...</p>
+                              </div>
+                            ) : filteredEmployees?.length > 0 ? (
+                              filteredEmployees?.map((emp) => {
+                                const jobRole = jobRoleData?.find(
+                                  (role) => role?.id === emp?.jobRoleId
+                                );
+
+                                return (
+                                  <div
+                                    key={emp.id}
+                                    className="col-6 col-md-4 col-lg-3 mb-3"
+                                  >
+                                    <div className="form-check d-flex align-items-start">
                                       <Controller
                                         name="selectedEmployees"
                                         control={control}
                                         render={({ field }) => (
                                           <input
                                             {...field}
-                                            className="form-check-input mx-2"
+                                            className="form-check-input me-1 mt-1"
                                             type="checkbox"
                                             id={`employee-${emp?.id}`}
                                             value={emp.id}
-                                            checked={field.value.includes(
-                                              emp.id
-                                            )}
-                                            onChange={() => {
-                                              handleEmployeeSelection(
-                                                emp.id,
-                                                field
-                                              );
+                                            checked={field.value?.includes(emp.id)}
+                                            onChange={(e) => {
+                                              handleCheckboxChange(e, emp);
                                             }}
                                           />
                                         )}
                                       />
-                                      <div className="list-content">
-                                        <p
-                                          className=" mb-0"
-                                          style={{
-                                            fontSize: "12px",
-                                            fontWeight: "bolder",
-                                          }}
-                                        >
+                                      <div className="flex-grow-1">
+                                        <p className="mb-0" style={{ fontSize: "13px" }}>
                                           {emp.firstName} {emp.lastName}
                                         </p>
                                         <small
-                                          className="lead"
-                                          style={{ fontSize: "10px" }}
+                                          className="text-muted"
+                                          style={{ fontSize: "11px" }}
                                         >
-                                          {loading && (
-                                            <p
-                                              className="skeleton para"
-                                              style={{ height: "7px" }}
-                                            ></p>
+                                          {loading ? (
+                                            <span className="placeholder-glow">
+                                              <span className="placeholder col-6"></span>
+                                            </span>
+                                          ) : (
+                                            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>
-                    )}
-                  </div>
-                  <div
-                    className="col-12 col-md-4 h-25 overflow-auto"
-                    style={{ maxHeight: "200px" }}
-                  >
-                    {selectedEmployees.length > 0 && (
-                      <div className="mt-1">
-                        <div className="text-start px-2">
-                          {selectedEmployees.map((empId) => {
-                            const emp = employees.find(
-                              (emp) => emp.id === empId
-                            );
-                            return (
-                              <span
-                                key={empId}
-                                className="badge bg-label-primary d-inline-flex align-items-center gap-2 me-1 p-1 mb-2"
-                              >
-                                {emp.firstName} {emp.lastName}
-                                <p
-                                  type="button"
-                                  className=" btn-close-white p-0 m-0"
-                                  aria-label="Close"
-                                  onClick={() => {
-                                    removeEmployee(empId);
-                                    setValue(
-                                      "selectedEmployees",
-                                      selectedEmployees.filter(
-                                        (id) => id !== empId
-                                      )
-                                    );
-                                  }}
-                                >
-                                  <i className="icon-base bx bx-x icon-md "></i>
-                                </p>
-                              </span>
-                            );
-                          })}
-                        </div>
-                      </div>
-                    )}
-                  </div>
-                </div>
+                      )}
+                    </div>
 
-                <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>
+                    {!loading && errors.selectedEmployees && (
+                      <div className="danger-text mt-1">
+                        <p>{errors.selectedEmployees.message}</p> {/* Use message from Zod schema */}
+                      </div>
+                    )}
+
+                    {/* Pending Task of Activity section */}
+                    <div className="col-md text-start mx-0 px-0">
+                      <div className="form-check form-check-inline mt-3 px-1">
+                        <label className="form-text text-dark align-items-center d-flex" htmlFor="inlineCheckbox1">
+                          Pending Task of Activity :
+                          <label className="form-check-label fs-7 ms-4" htmlFor="inlineCheckbox1">
+                            <strong>
+                              {assignData?.workItem?.workItem?.plannedWork - assignData?.workItem?.workItem?.completedWork}
+                            </strong>{" "}
+                            <u>{assignData?.workItem?.workItem?.activityMaster?.unitOfMeasurement}</u>
+                          </label>
+
+                          <div style={{ display: "flex", alignItems: "center" }}>
+                            <div
+                              ref={infoRef}
+                              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" />
+                                <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>
+                        </label>
+                      </div>
+                    </div>
+
+                    {/* Target for Today input and validation */}
+                    <div className="col-md text-start mx-0 px-0">
+                      <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;
+                                  <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" />
+                                    <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>
+
+                    {/* Description field */}
                     <label
-                      className="form-check-label ms-2"
-                      for="inlineCheckbox1"
+                      className="form-text fs-7 m-1 text-lg text-dark"
+                      htmlFor="descriptionTextarea" // Changed htmlFor for better accessibility
                     >
-                      {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
+                      Description
                     </label>
                     <Controller
-                      name="plannedTask"
+                      name="description"
                       control={control}
                       render={({ field }) => (
-                        <input
-                          type="text"
-                          className="form-control form-control-xs"
+                        <textarea
                           {...field}
-                          id="defaultFormControlInput"
-                          aria-describedby="defaultFormControlHelp"
+                          className="form-control"
+                          id="descriptionTextarea" // Changed id for better accessibility
+                          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>
-                )}
 
-                <label for="exampleFormControlTextarea1" className="form-label">
-                  Description
-                </label>
-                <Controller
-                  name="description"
-                  control={control}
-                  render={({ field }) => (
-                    <textarea
-                      {...field}
-                      className="form-control"
-                      id="exampleFormControlTextarea1"
-                      rows="2"
-                    />
-                  )}
-                />
-                {errors.description && (
-                  <div className="danger-text">
-                    {errors.description.message}
+                  {/* Submit and Cancel buttons */}
+                  <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>
-                )}
-
-                <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>
+                </form>
+              </div>
             </div>
           </div>
         </div>
@@ -398,4 +560,5 @@ const AssignRoleModel = ({ assignData, onClose }) => {
     </div>
   );
 };
+
 export default AssignRoleModel;
diff --git a/src/components/Project/Infrastructure/BuildingModel.jsx b/src/components/Project/Infrastructure/BuildingModel.jsx
index bc72c682..b630b213 100644
--- a/src/components/Project/Infrastructure/BuildingModel.jsx
+++ b/src/components/Project/Infrastructure/BuildingModel.jsx
@@ -47,7 +47,7 @@ const BuildingModel = ({
     }
 
     return () => {
-      setValue("name", null);
+      setValue("name", "");
     };
   }, [clearTrigger, onClearComplete, editingBuilding, project?.id]);
 
@@ -107,7 +107,10 @@ const BuildingModel = ({
             className="btn-close"
             data-bs-dismiss="modal"
             aria-label="Close"
-            onClick={onClose}
+            onClick={() => {
+              onClose();
+              reset(); // Call reset here
+            }}
           ></button>
           <h5 className="text-center mb-2">
             Manage Buildings - {project?.name}
@@ -186,7 +189,10 @@ const BuildingModel = ({
                 className="btn btn-sm btn-label-secondary"
                 data-bs-dismiss="modal"
                 aria-label="Close"
-                onClick={onClose}
+                onClick={() => {
+                  onClose();
+                  reset(); // Call reset here
+                }}
               >
                 Cancel
               </button>
@@ -199,3 +205,5 @@ const BuildingModel = ({
 };
 
 export default BuildingModel;
+
+
diff --git a/src/components/Project/Infrastructure/FloorModel.jsx b/src/components/Project/Infrastructure/FloorModel.jsx
index f41cbbe8..830a4f9c 100644
--- a/src/components/Project/Infrastructure/FloorModel.jsx
+++ b/src/components/Project/Infrastructure/FloorModel.jsx
@@ -2,17 +2,18 @@ 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.string().min(1, "Building is required"),
-  id: z.string().min(1, "Floor is required").optional(),
+  buildingId: z
+    .string()
+    .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: "",
@@ -30,12 +31,10 @@ 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({
@@ -50,10 +49,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({
@@ -61,8 +60,8 @@ const FloorModel = ({
         floorName: "",
         buildingId: building.id,
       });
-      setValue("buildingId", building.id); // Set value for validation
-      setValue("id", "0"); // Reset floorId when changing building
+      setValue("buildingId", building.id, { shouldValidate: true }); // ✅ trigger validation
+      setValue("id", "0");
     } else {
       setSelectedBuilding({});
       setFormData({
@@ -70,14 +69,14 @@ const FloorModel = ({
         floorName: "",
         buildingId: "0",
       });
-      setValue("buildingId", "0");
+      setValue("buildingId", "0", { shouldValidate: true }); // ✅ trigger validation
     }
   };
 
-  // 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,
@@ -95,15 +94,14 @@ 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 {
@@ -141,17 +139,14 @@ const FloorModel = ({
                   {buildings?.length > 0 &&
                     buildings
                       .filter((building) => building?.name)
-                      .sort((a, b) => {
-                        const nameA = a.name || "";
-                        const nameB = b.name || "";
-                        return nameA?.localeCompare(nameB);
-                      })
+                      .sort((a, b) =>
+                        (a.name || "").localeCompare(b.name || "")
+                      )
                       .map((building) => (
                         <option key={building.id} value={building.id}>
                           {building.name}
                         </option>
                       ))}
-
                   {buildings?.length === 0 && (
                     <option disabled>No buildings found</option>
                   )}
@@ -162,63 +157,57 @@ const FloorModel = ({
               </div>
 
               {formData.buildingId !== "0" && (
-                <div className="col-12 col-md-12">
-                  <label className="form-label">Select Floor</label>
-                  <select
-                    id="id"
-                    className="select2 form-select form-select-sm"
-                    aria-label="Select Floor"
-                    {...register("id")}
-                    onChange={handleFloorChange}
-                  >
-                    <option value="0">Add New Floor</option>
-                    {/* {selectedBuilding?.floors?.map((floor) => (
-                      <option key={floor.id} value={floor.id}>
-                        {floor.floorName}
-                      </option>
-                    ) )} */}
-
-                    {selectedBuilding &&
-                      selectedBuilding.floors?.length > 0 &&
-                      [...selectedBuilding.floors]
-                        .filter((floor) => floor?.floorName) 
-                        .sort((a, b) => {
-                          const nameA = a.floorName || ""; 
-                          const nameB = b.floorName || "";
-                          return nameA?.localeCompare(nameB);
-                        })
-                        .map((floor) => (
-                          <option key={floor.id} value={floor.id}>
-                            {floor.floorName}
-                          </option>
-                        ))}
-
-                    {selectedBuilding?.floors?.length === 0 && (
-                      <option disabled>No floors found</option>
+                <>
+                  <div className="col-12 col-md-12">
+                    <label className="form-label">Select Floor</label>
+                    <select
+                      id="id"
+                      className="select2 form-select form-select-sm"
+                      aria-label="Select Floor"
+                      {...register("id")}
+                      onChange={handleFloorChange}
+                    >
+                      <option value="0">Add New Floor</option>
+                      {selectedBuilding?.floors?.length > 0 &&
+                        [...selectedBuilding.floors]
+                          .filter((floor) => floor?.floorName)
+                          .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>
                     )}
-                  </select>
-                  {errors.id && (
-                    <p className="text-danger">{errors.id.message}</p>
-                  )}
-                </div>
-              )}
+                  </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 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">
diff --git a/src/components/Project/Infrastructure/InfraTable.jsx b/src/components/Project/Infrastructure/InfraTable.jsx
index 91250657..30410c6c 100644
--- a/src/components/Project/Infrastructure/InfraTable.jsx
+++ b/src/components/Project/Infrastructure/InfraTable.jsx
@@ -31,7 +31,7 @@ const InfraTable = ({ buildings }) => {
         {
           building: null,
           floor: {
-            id: data.id || "0",
+            id: data.id || null,
             floorName: data.floorName,
             buildingId: data.buildingId,
           },
diff --git a/src/components/Project/Infrastructure/WorkArea.jsx b/src/components/Project/Infrastructure/WorkArea.jsx
index dfebe350..cbe34dc5 100644
--- a/src/components/Project/Infrastructure/WorkArea.jsx
+++ b/src/components/Project/Infrastructure/WorkArea.jsx
@@ -184,10 +184,7 @@ const WorkArea = ({ workArea, floor, forBuilding }) => {
                             Category
                           </th>
                           <th className="infra-activity-table-header d-none d-md-table-cell">
-                            Planned
-                          </th>
-                          <th className="infra-activity-table-header d-none d-md-table-cell">
-                            Completed
+                            Completed/Planned
                           </th>
                           <th className="infra-activity-table-header">
                             Progress
diff --git a/src/components/Project/Infrastructure/WorkItem.jsx b/src/components/Project/Infrastructure/WorkItem.jsx
index b24cafa2..9a694729 100644
--- a/src/components/Project/Infrastructure/WorkItem.jsx
+++ b/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 ??
-              "NA"
+            workItem?.completedWork ??
+            "NA"
             : "NA"}
           /{" "}
           {hasWorkItem
@@ -171,28 +171,22 @@ const WorkItem = ({
           <span className="fw-light">
             {hasWorkItem
               ? NewWorkItem?.workItem?.workCategoryMaster?.name ||
-                workItem.workCategoryMaster?.name ||
-                "NA"
+              workItem.workCategoryMaster?.name ||
+              "NA"
               : "NA"}
           </span>
         </td>
 
-        {/* Planned - visible on medium and above */}
         <td className="text-center d-none d-md-table-cell">
-          {hasWorkItem
-            ? NewWorkItem?.workItem?.plannedWork ??
-              workItem?.plannedWork ??
-              "NA"
-            : "NA"}
-        </td>
-
-        {/* Completed - visible on medium and above */}
-        <td className="text-center d-none d-md-table-cell">
-          {hasWorkItem
-            ? NewWorkItem?.workItem?.completedWork ??
-              workItem?.completedWork ??
-              "NA"
-            : "NA"}
+          {hasWorkItem ? (
+            `${NewWorkItem?.workItem?.completedWork ??
+            workItem?.completedWork ??
+            "0"}/${NewWorkItem?.workItem?.plannedWork ??
+            workItem?.plannedWork ??
+            "0"}`
+          ) : (
+            "NA"
+          )}
         </td>
 
         {/* Progress Bar - always visible */}
@@ -205,7 +199,7 @@ const WorkItem = ({
                 width: getProgress(
                   NewWorkItem?.workItem?.plannedWork || workItem?.plannedWork,
                   NewWorkItem?.workItem?.completedWork ||
-                    workItem?.completedWork
+                  workItem?.completedWork
                 ),
                 height: "5px",
               }}
@@ -266,7 +260,7 @@ const WorkItem = ({
             ></i>
 
             <ul className="dropdown-menu dropdown-menu-start">
-              {!projectId && ManageTasks && PlannedWork !== CompletedWork && (
+              {!projectId && ManageAndAssignTak && PlannedWork !== CompletedWork && (
                 <li>
                   <a
                     className="dropdown-item d-flex align-items-center"
diff --git a/src/components/Project/MapUsers.jsx b/src/components/Project/MapUsers.jsx
index 0a0fde44..bb429789 100644
--- a/src/components/Project/MapUsers.jsx
+++ b/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="md-2 mb-1">
+          <div className="modal-header ">
+            <div className="md-2 mb-n5">
               {(filteredData.length > 0 ||
                   allocationEmployeesData.length > 0)&& (
                   <div className="input-group">
@@ -129,6 +129,11 @@ 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 "
@@ -136,7 +141,7 @@ const MapUsers = ({
               aria-describedby="DataTables_Table_0_info"
               style={{ width: "100%" }}
             >
-              <thead></thead>
+              
               <tbody>
                 {employeeLoading && allocationEmployeesData.length === 0 && (
                   <p>Loading...</p>
diff --git a/src/components/common/DateRangePicker.jsx b/src/components/common/DateRangePicker.jsx
index 33352ba5..07c36e11 100644
--- a/src/components/common/DateRangePicker.jsx
+++ b/src/components/common/DateRangePicker.jsx
@@ -1,11 +1,13 @@
 import React, { useEffect, useRef } from "react";
 
-const DateRangePicker = ({ onRangeChange, DateDifference = 15 }) => {
+const DateRangePicker = ({ onRangeChange, DateDifference = 7, defaultStartDate = new Date() - 1 }) => {
   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, {
diff --git a/src/components/master/CreateJobRole.jsx b/src/components/master/CreateJobRole.jsx
index 6b52b10b..739e7e2f 100644
--- a/src/components/master/CreateJobRole.jsx
+++ b/src/components/master/CreateJobRole.jsx
@@ -70,7 +70,9 @@ 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" 
diff --git a/src/components/master/CreateRole.jsx b/src/components/master/CreateRole.jsx
index 0648cac1..67e8eedf 100644
--- a/src/components/master/CreateRole.jsx
+++ b/src/components/master/CreateRole.jsx
@@ -96,7 +96,10 @@ 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"
diff --git a/src/components/master/CreateWorkCategory.jsx b/src/components/master/CreateWorkCategory.jsx
index 06d08041..0a7bc31b 100644
--- a/src/components/master/CreateWorkCategory.jsx
+++ b/src/components/master/CreateWorkCategory.jsx
@@ -70,6 +70,9 @@ 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>
diff --git a/src/components/master/EditJobRole.jsx b/src/components/master/EditJobRole.jsx
index c13fc0d0..965f209a 100644
--- a/src/components/master/EditJobRole.jsx
+++ b/src/components/master/EditJobRole.jsx
@@ -77,6 +77,9 @@ 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" 
diff --git a/src/components/master/EditRole.jsx b/src/components/master/EditRole.jsx
index 4cf31418..3765684f 100644
--- a/src/components/master/EditRole.jsx
+++ b/src/components/master/EditRole.jsx
@@ -146,7 +146,9 @@ 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"
diff --git a/src/components/master/EditWorkCategory.jsx b/src/components/master/EditWorkCategory.jsx
index 124f2d65..3810745c 100644
--- a/src/components/master/EditWorkCategory.jsx
+++ b/src/components/master/EditWorkCategory.jsx
@@ -77,6 +77,10 @@ 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" 
diff --git a/src/data/menuData.json b/src/data/menuData.json
index 994ee3ff..0870d187 100644
--- a/src/data/menuData.json
+++ b/src/data/menuData.json
@@ -48,7 +48,7 @@
                         "link": "/activities/task"
                     },
                     {
-                        "text": "Daily Task",
+                        "text": "Daily Progress Report",
                         "available": true,
                         "link": "/activities/records"
                     },
diff --git a/src/hooks/useAttendanceStatus.js b/src/hooks/useAttendanceStatus.js
index e0dd8e6c..b1b6180b 100644
--- a/src/hooks/useAttendanceStatus.js
+++ b/src/hooks/useAttendanceStatus.js
@@ -1,8 +1,7 @@
-import { useEffect, useState } from 'react';
-import { timeElapsed } from '../utils/dateUtils';
-import { useSelector } from 'react-redux';
-import {THRESH_HOLD} from '../utils/constants';
-
+import { useEffect, useState } from "react";
+import { timeElapsed } from "../utils/dateUtils";
+import { useSelector } from "react-redux";
+import { THRESH_HOLD } from "../utils/constants";
 
 export const ACTIONS = {
   CHECK_IN: 0,
@@ -10,124 +9,143 @@ 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({
-          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: "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 {
+    if (activity === 0 && checkInTime === null && checkOutTime === null) {
+      setStatus({
+        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',
+          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",
+      });
+    }
   }, [attendanceData]);
 
   return status;
diff --git a/src/pages/Activities/AttendancePage.jsx b/src/pages/Activities/AttendancePage.jsx
index d8ac6830..3b81a381 100644
--- a/src/pages/Activities/AttendancePage.jsx
+++ b/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,6 +86,10 @@ const AttendancePage = () => {
       });
   };
 
+  const handleToggle = (event) => {
+    setShowOnlyCheckout(event.target.checked);
+  };
+
   useEffect(() => {
     if (modelConfig !== null) {
       openModel();
@@ -100,6 +104,17 @@ 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 && (
@@ -161,6 +176,7 @@ const AttendancePage = () => {
               )}
             </div>
           </ul>
+
           <ul className="nav nav-tabs" role="tablist">
             <li className="nav-item">
               <button
@@ -170,7 +186,7 @@ const AttendancePage = () => {
                 data-bs-toggle="tab"
                 data-bs-target="#navs-top-home"
               >
-                All
+                Today's
               </button>
             </li>
             <li className="nav-item">
@@ -197,6 +213,26 @@ 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>}
@@ -204,12 +240,12 @@ const AttendancePage = () => {
 
             {activeTab === "all" && (
               <>
-                {!projectLoading && attendances.length === 0 && (
+                {!projectLoading && filteredAttendance?.length === 0 && (
                   <p>No Employee assigned yet.</p>
                 )}
                 <div className="tab-pane fade show active py-0">
                   <Attendance
-                    attendance={attendances}
+                    attendance={filteredAttendance}
                     handleModalData={handleModalData}
                     getRole={getRole}
                   />
@@ -222,6 +258,7 @@ const AttendancePage = () => {
                 <AttendanceLog
                   handleModalData={handleModalData}
                   projectId={selectedProject}
+                  showOnlyCheckout={showOnlyCheckout}
                 />
               </div>
             )}
diff --git a/src/pages/Activities/DailyTask.jsx b/src/pages/Activities/DailyTask.jsx
index 0c98dd26..5b69c596 100644
--- a/src/pages/Activities/DailyTask.jsx
+++ b/src/pages/Activities/DailyTask.jsx
@@ -187,6 +187,13 @@ 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}>