Merge branch 'Issue_Jun_1W' of https://git.marcoaiot.com/admin/marco.pms.web into pramod_Bug-#215

public/assets/css/default.css

@@ -189,3 +189,7 @@
   text-align: left;
   padding-left: 50px;
 } */
+
+.small-text{
+  font-size: 12px;
+}

public/assets/vendor/css/core.css

@@ -29002,7 +29002,6 @@ li:not(:first-child) .dropdown-item,
 /* Only for menu example */
 .menu-collapsed:not(:hover) {
   inline-size: var(--bs-menu-collapsed-width);
-  /* Custom for sneat only */
 }
 .menu-collapsed:not(:hover) .menu-inner > .menu-item {
   inline-size: var(--bs-menu-collapsed-width);
@@ -29682,7 +29681,6 @@ li:not(:first-child) .dropdown-item,
     )
     .layout-menu.menu-vertical {
     inline-size: var(--bs-menu-collapsed-width);
-    /* Custom for sneat only */
   }
   .layout-menu-collapsed:not(
       .layout-menu-hover,

public/scss/_components/_menu.scss

@@ -186,7 +186,6 @@
 
     > .menu-item {
       margin: $menu-item-spacer 0;
-      // Sneat menu-link spacing
       .menu-link {
         margin: $menu-vertical-link-margin-y $menu-vertical-link-margin-x;
       }
@@ -197,7 +196,6 @@
   .menu-block {
     padding: $menu-vertical-link-padding-y $menu-vertical-link-padding-x;
   }
-  // Sneat menu-header spacing
   .menu-header {
     margin: $menu-vertical-header-margin-y 0 $menu-vertical-header-margin-y * 0.5 0;
     padding: $menu-vertical-link-padding-y $menu-vertical-link-padding-x * 2 $menu-vertical-link-padding-y
@@ -276,7 +274,7 @@
 
 // Vertical Menu Collapsed
 // *******************************************************************************
-// ! Updated menu collapsed styles for sneat in this mixin
+// ! Updated menu collapsed styles for  in this mixin
 @mixin layout-menu-collapsed() {
   width: $menu-collapsed-width;
 
@@ -312,7 +310,6 @@
       top: 1.1875rem;
     }
   }
-  // Custom for sneat only
   .menu-block {
     &::before {
       bottom: 0.75rem;

src/components/Activities/Attendance.jsx

@@ -9,6 +9,7 @@ import { useNavigate } from "react-router-dom";
 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 : [];
@@ -41,6 +42,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
@@ -126,9 +134,8 @@ const Attendance = ({ attendance, getRole, handleModalData }) => {
               <nav aria-label="Page ">
                 <ul className="pagination pagination-sm justify-content-end py-1">
                   <li
-                    className={`page-item  ${
+                    className={`page-item  ${currentPage === 1 ? "disabled" : ""
-                      currentPage === 1 ? "disabled" : ""
+                      }`}
-                    }`}
                   >
                     <button
                       className="page-link btn-xs"
@@ -140,9 +147,8 @@ const Attendance = ({ attendance, getRole, handleModalData }) => {
                   {[...Array(totalPages)].map((_, index) => (
                     <li
                       key={index}
-                      className={`page-item ${
+                      className={`page-item ${currentPage === index + 1 ? "active" : ""
-                        currentPage === index + 1 ? "active" : ""
+                        }`}
-                      }`}
                     >
                       <button
                         className="page-link "
@@ -153,9 +159,8 @@ const Attendance = ({ attendance, getRole, handleModalData }) => {
                     </li>
                   ))}
                   <li
-                    className={`page-item ${
+                    className={`page-item ${currentPage === totalPages ? "disabled" : ""
-                      currentPage === totalPages ? "disabled" : ""
+                      }`}
-                    }`}
                   >
                     <button
                       className="page-link "

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,19 +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";
 
-const AttendanceLog = ({ handleModalData, projectId }) => {
+const usePagination = (data, itemsPerPage) => {
-  const [attendances, setAttendnaces] = useState([]);
+  const [currentPage, setCurrentPage] = useState(1);
-  const [selectedDate, setSelectedDate] = useState("");
+  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 [isRefreshing, setIsRefreshing] = useState(false);
-  const [dates, setDates] = useState([]);
+  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;
@@ -41,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,
-    10
-  );
-
   useEffect(() => {
     const { startDate, endDate } = dateRange;
-    if (startDate && endDate) {
+    dispatch(
-      dispatch(
+      fetchAttendanceData({
-        fetchAttendanceData({
+        projectId,
-          projectId,
+        fromDate: startDate,
-          fromDate: startDate,
+        toDate: endDate,
-          toDate: endDate,
+      })
-        })
+    );
-      );
+    setIsRefreshing(false);
-    }
+  }, [dateRange, projectId, dispatch, isRefreshing]);
-  }, [dateRange, projectId, isRefreshing]);
 
   useEffect(() => {
-    const attendanceDate = [
+    const filteredData = showOnlyCheckout
-      ...new Set(sortedFinalList.map((item) => item.checkInTime.split("T")[0])),
+      ? data.filter((item) => item.checkOutTime === null)
-    ].sort((a, b) => new Date(b) - new Date(a));
+      : data;
-    if (attendanceDate != dates) {
+
-      setDates(attendanceDate);
+    const group1 = filteredData
-    }
+      .filter((d) => d.activity === 1 && isSameDay(d.checkInTime))
-  }, [data]);
+      .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,
+    20
+  );
+
+  // Reset to the first page whenever processedData changes (due to switch on/off)
+  useEffect(() => {
+    resetPage();
+  }, [processedData, resetPage]);
 
   return (
     <>
@@ -102,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 ${
+            className={`bx bx-refresh cursor-pointer fs-4 ${loading || isRefreshing ? "spin" : ""
-              loading ? "spin" : ""
+              }`}
-            }`}
             title="Refresh"
-            onClick={() => setIsRefreshing(!isRefreshing)}
+            onClick={() => setIsRefreshing(true)}
           />
         </div>
       </div>
@@ -124,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>{" "}
+                  <i className="bx bxs-down-arrow-alt text-success"></i> Check-In
-                  Check-In
                 </th>
                 <th>
                   <i className="bx bxs-up-arrow-alt text-danger"></i> Check-Out
@@ -134,107 +157,96 @@ const AttendanceLog = ({ handleModalData, projectId }) => {
               </tr>
             </thead>
             <tbody>
-              {loading && <td colSpan={5}>Loading...</td>}
+              {(loading || isRefreshing) && (
-              {dates.map((date, i) => {
+                <tr>
-                return (
+                  <td colSpan={6}>Loading...</td>
-                  <React.Fragment key={i}>
+                </tr>
-                    {currentItems.some(
+              )}
-                      (item) => item.checkInTime.split("T")[0] === date
+              {!loading && !isRefreshing && paginatedAttendances.reduce((acc, attendance, index, arr) => {
-                    ) && (
+                const currentDate = moment(attendance.checkInTime || attendance.checkOutTime).format("YYYY-MM-DD");
-                      <tr className="table-row-header">
+                const previousAttendance = arr[index - 1];
-                        <td colSpan={7} className="text-start">
+                const previousDate = previousAttendance ? moment(previousAttendance.checkInTime || previousAttendance.checkOutTime).format("YYYY-MM-DD") : null;
-                          <strong>{date}</strong>
+
-                        </td>
+                if (!previousDate || currentDate !== previousDate) {
-                      </tr>
+                  acc.push(
-                    )}
+                    <tr key={`header-${currentDate}`} className="table-row-header">
-                    {currentItems
+                      <td colSpan={6} className="text-start">
-                      ?.filter((item) => item.checkInTime.includes(date))
+                        <strong>{moment(currentDate).format("DD-MM-YYYY")}</strong>
-                      .map((attendance, index) => (
+                      </td>
-                        <tr key={index}>
+                    </tr>
-                          <td colSpan={2}>
+                  );
-                            <div className="d-flex justify-content-start align-items-center">
+                }
-                              <Avatar
+                acc.push(
-                                firstName={attendance.firstName}
+                  <tr key={index}>
-                                lastName={attendance.lastName}
+                    <td colSpan={2}>
-                              />
+                      <div className="d-flex justify-content-start align-items-center">
-                              <div className="d-flex flex-column">
+                        <Avatar
-                                <a
+                          firstName={attendance.firstName}
-                                  href="#"
+                          lastName={attendance.lastName}
-                                  className="text-heading text-truncate"
+                        />
-                                >
+                        <div className="d-flex flex-column">
-                                  <span className="fw-normal">
+                          <a
-                                    {attendance.firstName} {attendance.lastName}
+                            href="#"
-                                  </span>
+                            className="text-heading text-truncate"
-                                </a>
+                          >
-                              </div>
+                            <span className="fw-normal">
-                            </div>
+                              {attendance.firstName} {attendance.lastName}
-                          </td>
+                            </span>
-                          <td>
+                          </a>
-                            {" "}
+                        </div>
-                            {moment(attendance.checkInTime).format(
+                      </div>
-                              "DD-MMM-YYYY"
+                    </td>
-                            )}
+                    <td>
-                          </td>
+                      {moment(attendance.checkInTime || attendance.checkOutTime).format("DD-MMM-YYYY")}
-                          <td>{convertShortTime(attendance.checkInTime)}</td>
+                    </td>
-                          <td>
+                    <td>{convertShortTime(attendance.checkInTime)}</td>
-                            {attendance.checkOutTime
+                    <td>
-                              ? convertShortTime(attendance.checkOutTime)
+                      {attendance.checkOutTime ? convertShortTime(attendance.checkOutTime) : "--"}
-                              : "--"}
+                    </td>
-                          </td>
+                    <td className="text-center">
-                          <td className="text-center">
+                      <RenderAttendanceStatus
-                            <RenderAttendanceStatus
+                        attendanceData={attendance}
-                              attendanceData={attendance}
+                        handleModalData={handleModalData}
-                              handleModalData={handleModalData}
+                        Tab={2}
-                              Tab={2}
+                        currentDate={today.toLocaleDateString("en-CA")}
-                              currentDate={currentDate}
+                      />
-                            />
+                    </td>
-                          </td>
+                  </tr>
-                        </tr>
-                      ))}
-                  </React.Fragment>
                 );
-              })}
+                return acc;
+              }, [])}
             </tbody>
           </table>
         )}
-        {!loading && data.length === 0 && <span>No employee logs</span>}
+        {!loading && !isRefreshing && data.length === 0 && <span>No employee logs</span>}
-        {error && <td colSpan={5}>{error}</td>}
+        {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" : ""}`}>
+            <li className={`page-item ${currentPage === 1 ? "disabled" : ""}`}>
-              <button
+              <button className="page-link btn-xs" onClick={() => paginate(currentPage - 1)}>
-                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}
+                key={pageNumber}
-                className={`page-item ${
+                className={`page-item ${currentPage === pageNumber ? "active" : ""}`}
-                  currentPage === index + 1 ? "active" : ""
-                }`}
               >
-                <button
+                <button className="page-link" onClick={() => paginate(pageNumber)}>
-                  className="page-link "
+                  {pageNumber}
-                  onClick={() => paginate(index + 1)}
-                >
-                  {index + 1}
                 </button>
               </li>
             ))}
             <li
-              className={`page-item ${
+              className={`page-item ${currentPage === totalPages ? "disabled" : ""}`}
-                currentPage === totalPages ? "disabled" : ""
-              }`}
             >
-              <button
+              <button className="page-link" onClick={() => paginate(currentPage + 1)}>
-                className="page-link "
-                onClick={() => paginate(currentPage + 1)}
-              >
                 &raquo;
               </button>
             </li>

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"}), 
+  markTime: z.string().nonempty({ message: "Time is required" }),
-  description:z.string().max(200,"description should less than 200 chracters").optional()
+  description: z.string().max(200, "description should less than 200 chracters").optional()
 });
 
-const CheckCheckOutmodel = ({modeldata,closeModal,handleSubmitForm,}) => {
+const CheckCheckOutmodel = ({ modeldata, closeModal, handleSubmitForm, }) => {
 
-  const projectId = useSelector((store)=>store.localVariables.projectId)
+  const projectId = useSelector((store) => store.localVariables.projectId)
   const [isLoading, setIsLoading] = useState(false);
   const coords = usePositionTracker();
   const dispatch = useDispatch()
+  const today = new Date().toISOString().split('T')[0];
+
+    const formatDate = (dateString) => {
+    if (!dateString) {
+      return '';
+    }
+    const [year, month, day] = dateString.split('-');
+    return `${day}-${month}-${year}`;
+  };
 
   const {
     register,
@@ -29,39 +38,35 @@ const CheckCheckOutmodel = ({modeldata,closeModal,handleSubmitForm,}) => {
     reset,
     setValue,
   } = useForm({
-    resolver: zodResolver( schema ),
+    resolver: zodResolver(schema),
-    mode:"onChange"
+    mode: "onChange"
   });
 
-  const onSubmit = ( data ) =>
+  const onSubmit = (data) => {
-  {
+    let record = { ...data, date: new Date().toLocaleDateString(), latitude: coords.latitude, longitude: coords.longitude, employeeId: modeldata.employeeId, action: modeldata.action, id: modeldata?.id || null }
-    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) {
-   if(modeldata.forWhichTab === 1){
+      handleSubmitForm(record)
-    handleSubmitForm(record)
+    } else {
-   } else
-   {
 
-    //  if ( modeldata?.currentDate && checkIfCurrentDate( modeldata?.currentDate ) )
+      //  if ( modeldata?.currentDate && checkIfCurrentDate( modeldata?.currentDate ) )
-    //  {
+      //  {
-       dispatch(markAttendance(record))
+      dispatch(markAttendance(record))
-       .unwrap()
+        .unwrap()
-         .then( ( data ) =>
+        .then((data) => {
-         {
 
-         showToast("Attendance Marked Successfully", "success");
+          showToast("Attendance Marked Successfully", "success");
-       })
+        })
-         .catch( ( error ) =>
+        .catch((error) => {
-         {
 
-          showToast(error, "error" );
+          showToast(error, "error");
 
-       });
+        });
 
-    //  } else
+      //  } 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}
+      //   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()
   };
@@ -72,16 +77,38 @@ const CheckCheckOutmodel = ({modeldata,closeModal,handleSubmitForm,}) => {
     <form className="row g-2" onSubmit={handleSubmit(onSubmit)}>
 
       <div className="col-12 col-md-12">
-        <TimePicker 
+        <label className="fs-5 text-dark text-center d-flex align-items-center flex-wrap">
-        label="Choose a time" 
+          {modeldata?.checkInTime && !modeldata?.checkOutTime ? 'Check-out :' : 'Check-in :'}
-        onChange={(e) => setValue("markTime", e)}  
+        </label>
-        interval={10}  
-        checkOutTime={modeldata?.checkOutTime}
-          checkInTime={modeldata?.checkInTime}
-      />
-        {errors. markTime && <p className="text-danger">{errors.markTime.message}</p>}
       </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">
@@ -91,7 +118,7 @@ const CheckCheckOutmodel = ({modeldata,closeModal,handleSubmitForm,}) => {
           rows="3"
           name="description"
           className="form-control"
-          {...register( "description" )}
+          {...register("description")}
           maxLength={200}
         />
         {errors.description && (
@@ -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,12 +151,12 @@ 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();
 
@@ -147,10 +174,9 @@ export const Regularization = ({modeldata,closeModal,handleSubmitForm})=>{
   };
 
 
-  const onSubmit = ( data ) =>
+  const onSubmit = (data) => {
-  {
 
-    let record = {...data, date: new Date().toLocaleDateString(),latitude:coords.latitude,longitude:coords.longitude, }
+    let record = { ...data, date: new Date().toLocaleDateString(), latitude: coords.latitude, longitude: coords.longitude, }
     handleSubmitForm(record)
     closeModal()
   };
@@ -161,7 +187,7 @@ export const Regularization = ({modeldata,closeModal,handleSubmitForm})=>{
     <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>
@@ -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>

src/components/Activities/InfraPlanning.jsx

@@ -13,7 +13,7 @@ import {useHasUserPermission} from "../../hooks/useHasUserPermission";
 import {MANAGE_PROJECT_INFRA} from "../../utils/constants";
 import {useDispatch, useSelector} from "react-redux";
 import {useProfile} from "../../hooks/useProfile";
-import {setProjectId} from "../../slices/localVariablesSlice";
+import {refreshData, setProjectId} from "../../slices/localVariablesSlice";
 import InfraTable from "../Project/Infrastructure/InfraTable";
 
 
@@ -25,11 +25,23 @@ const InfraPlanning = () =>
 
   const selectedProject = useSelector((store)=>store.localVariables.projectId)
   const ManageInfra = useHasUserPermission( MANAGE_PROJECT_INFRA )
-  const {projects_Details, loading: project_deatilsLoader, error: project_error} = useProjectDetails(selectedProject)
+  const {projects_Details, loading: project_deatilsLoader, error: project_error,refetch} = useProjectDetails( selectedProject )
+  const reloadedData = useSelector( ( store ) => store.localVariables.reload )
+ 
   useEffect( () =>
   {
     dispatch(setProjectId(projects[0]?.id))
-  },[projects])
+  }, [ projects ] )
+  
+   useEffect( () =>
+   {
+     if (reloadedData)
+     {
+       refetch()
+       dispatch( refreshData( false ) )
+     }
+
+   },[reloadedData])
 
   return (
     <div className="col-md-12 col-lg-12 col-xl-12 order-0 mb-4">

src/components/Activities/ReportTask.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState,useEffect } from "react";
 import { formatDate } from "../../utils/dateUtils";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -13,15 +13,23 @@ export const ReportTask = ({ report, closeModal, refetch }) => {
     report?.workItem?.plannedWork - report?.workItem?.completedWork;
 
   const schema = z.object({
-    completedTask: z
+  completedTask: z
-      .number()
+    .preprocess(
-      .min(0, "Completed Work must be greater than 0")
+      (val) => (val === "" || val === null || Number.isNaN(val) ? undefined : Number(val)),
-      .max(maxPending, {
+      z
-        message: `Completed task cannot exceed total pending tasks:  ${maxPending}`,
+        .number({
-      })
+          required_error: "Completed Work must be a number",
-      .optional(),
+          invalid_type_error: "Completed Work must be a number",
-    comment: z.string().min(1, "Comment cannot be empty"),
+        })
-  });
+        .min(1, "Completed Work must be greater than 0")
+        .max(maxPending, {
+          message: `Completed task cannot exceed total pending tasks: ${maxPending}`,
+        })
+    ),
+  comment: z.string().min(1, "Comment cannot be empty"),
+});
+
+  
   const {
     register,
     handleSubmit,
@@ -32,6 +40,14 @@ export const ReportTask = ({ report, closeModal, refetch }) => {
     defaultValues: { completedTask: 0, comment: "" },
   });
 
+
+useEffect(() => {
+  if (report) {
+    reset({ completedTask: 0, comment: "" }); // optional: customize default if needed
+  }
+}, [report, reset]);
+
+
   const onSubmit = async (data) => {
     try {
       setloading(true);
@@ -56,6 +72,7 @@ export const ReportTask = ({ report, closeModal, refetch }) => {
   };
   const handleClose = () => {
     closeModal();
+    reset();
   };
 
   return (

src/components/Activities/ReportTaskComments.jsx

@@ -13,27 +13,50 @@ const schema = z.object({
   comment: z.string().min(1, "Comment cannot be empty"),
 });
 
+/**
+ * ReportTaskComments component for displaying and adding comments to a task.
+ * It also shows a summary of the activity and task details.
+ *
+ * @param {object} props - The component props.
+ * @param {object} props.commentsData - Data related to the task and its comments, including the description.
+ * @param {function} props.closeModal - Callback function to close the modal.
+ */
+
 const ReportTaskComments = ({ commentsData, closeModal }) => {
   const [loading, setloading] = useState(false);
   const [comments, setComment] = useState([]);
-  const [bgClass, setBgClass] = useState("");
   const {
     register,
     handleSubmit,
     formState: { errors },
-    reset,
+    reset, // Destructure reset from useForm
   } = useForm({
     resolver: zodResolver(schema),
   });
 
   const containerRef = useRef(null);
+  const firstRender = useRef(true);
+
   useEffect(() => {
-    setComment(commentsData?.comments);
+    const taskList = getCachedData("taskList");
+    if (taskList && taskList.data && commentsData?.id) {
+      const currentTask = taskList.data.find(task => task.id === commentsData.id);
+      if (currentTask && currentTask.comments) {
+        setComment(currentTask.comments);
+      } else {
+        setComment(commentsData?.comments || []);
+      }
+    } else {
+      setComment(commentsData?.comments || []);
+    }
+    firstRender.current = true;
   }, [commentsData]);
 
   useEffect(() => {
-    if (containerRef.current) {
+    if (!firstRender.current && containerRef.current) {
       containerRef.current.scrollTop = containerRef.current.scrollHeight;
+    } else {
+      firstRender.current = false; 
     }
   }, [comments]); 
 
@@ -46,33 +69,40 @@ const ReportTaskComments = ({ commentsData, closeModal }) => {
     try {
       setloading(true);
       const resp = await TasksRepository.taskComments(sendComment);
+    
       setComment((prevItems) => [...prevItems, resp.data]);
+
       const taskList = getCachedData("taskList");
-      const updatedTaskList = taskList.data.map((task) => {
+      
-        if (task.id === resp.data.taskAllocationId) {
+      if (taskList && taskList.data) {
-          const existingComments = Array.isArray(task.comments)
+        const updatedTaskList = taskList.data.map((task) => {
-            ? task.comments
+          if (task.id === resp.data.taskAllocationId) {
-            : [];
+            const existingComments = Array.isArray(task.comments)
-          return {
+              ? task.comments
-            ...task,
+              : [];
-            comments: [...existingComments, resp.data],
+            return {
-          };
+              ...task,
-        }
+              comments: [...existingComments, resp.data],
-        return task;
+            };
-      });
+          }
-      cacheData("taskList", {
+          return task;
-        data: updatedTaskList,
+        });
-        projectId: taskList.projectId,
+       
-      });
+        cacheData("taskList", {
+          data: updatedTaskList,
+          projectId: taskList.projectId, 
+        });
+      }
+
       reset(); 
       setloading(false);
       showToast("Successfully Sent", "success");
-      // closeModal();
     } catch (error) {
       setloading(false);
-      showToast(error.response.data?.message || "Something wrong", "error");
+      showToast(error.response.data?.message || "Something went wrong", "error");
     }
   };
+
   return (
     <div
       className="modal-dialog modal-lg modal-simple report-task-comments-modal mx-sm-auto mx-1"
@@ -86,66 +116,64 @@ const ReportTaskComments = ({ commentsData, closeModal }) => {
             onClick={closeModal}
             aria-label="Close"
           ></button>
-          <p className="fs-6 text-dark text-start">
+          <h5 className=" text-center mb-2">
-            {`${commentsData?.workItem?.workArea?.floor?.building?.name}`}{" "}
+            Activity Summary
-            <i className="bx bx-chevron-right"></i>{" "}
+          </h5>
-            {`${commentsData?.workItem?.workArea?.floor?.floorName} `}{" "}
+
-            <i className="bx bx-chevron-right"></i>
+          <p className="small-text text-start my-2">
-            {`${commentsData?.workItem?.workArea?.areaName}`}
+            {commentsData?.workItem?.workArea?.floor?.building?.description}
-            <i className="bx bx-chevron-right"></i>
-            {` ${commentsData?.workItem?.activityMaster?.activityName}`}
           </p>
 
-          <ul
+          <p className="fw-bold my-2 text-start">
-            className="list-grouph px-0 mx-0 overflow-auto"
+            Assigned By :
-            ref={containerRef}
+            <span className=" ms-2">
-            style={{ maxHeight: "400px" }}
+              {commentsData?.assignedBy?.firstName +
-          >
+                " " +
-            {comments &&
+                commentsData?.assignedBy?.lastName}
-              comments?.map((data) => {
+            </span>{" "}
-                const fullName = `${data?.employee?.firstName} ${data?.employee?.lastName}`;
+          </p>
-                const bgClass = getBgClassFromHash(fullName);
-                return (
-                  <li
-                    className={`list-group-item list-group-item-action  my-2 p-1`}
-                  >
-                    <div
-                      className={`li-wrapper d-flex justify-content-start align-items-start my-0 `}
-                    >
-                      <div className="avatar avatar-xs me-1">
-                        <span
-                          className={`avatar-initial rounded-circle bg-label-primary}`}
-                        >
-                          {`${data?.employee?.firstName?.slice(
-                            0,
-                            1
-                          )} ${data?.employee?.lastName?.slice(0, 1)}`}
-                        </span>
-                      </div>
 
-                      <div className={` text-start  py-0  `}>
+          <p className="fw-bold my-2 text-start">
-                        <p className={`mb-0 text-${bgClass}`}>{fullName}</p>
+            Loaction :
-                        <p
+            <span className="fw-normal ms-2 text-start">
-                          className=" text-muted m-0 "
+              {`${commentsData?.workItem?.workArea?.floor?.building?.name}`}{" "}
-                          style={{ fontSize: "10px" }}
+              <i className="bx bx-chevron-right"></i>{" "}
-                        >
+              {`${commentsData?.workItem?.workArea?.floor?.floorName} `}{" "}
-                          {moment.utc(data?.commentDate).local().fromNow()}
+              <i className="bx bx-chevron-right"></i>
-                        </p>
+              {`${commentsData?.workItem?.workArea?.areaName}`}
-                      </div>
+              <i className="bx bx-chevron-right"></i>
-                    </div>
+              {` ${commentsData?.workItem?.activityMaster?.activityName}`}
-                    <p className={`ms-6 text-start mb-0 text-body`}>
+            </span>
-                      {data?.comment}
+          </p>
-                    </p>
+          <p className="fw-bold my-2 text-start">
-                  </li>
+            Planned Work: {commentsData?.plannedTask}
-                );
+          </p>
-              })}
+          <p className="fw-bold my-2 text-start">
-          </ul>
+            {" "}
-          <form onSubmit={handleSubmit(onSubmit)}>
+            Completed Work : {commentsData?.completedTask}
+          </p>
+          <div className="d-flex align-items-center flex-wrap">
+            <p className="fw-bold text-start m-0 me-1">Team :</p>
+            <div className="d-flex flex-wrap align-items-center gap-2">
+              {commentsData?.teamMembers?.map((member, idx) => (
+                <span key={idx} className="d-flex align-items-center">
+                  <Avatar
+                    firstName={member?.firstName}
+                    lastName={member?.lastName}
+                    size="xs"
+                  />
+                  {member?.firstName + " " + member?.lastName}
+                </span>
+              ))}
+            </div>
+          </div>
+
+          <form onSubmit={handleSubmit(onSubmit)} className="text-start">
+            <label className="fw-bold text-start my-1">Add comment :</label>
             <textarea
               {...register("comment")}
               className="form-control"
               id="exampleFormControlTextarea1"
-              rows="1"
               placeholder="Enter comment"
             />
             {errors.comment && (
@@ -160,11 +188,50 @@ const ReportTaskComments = ({ commentsData, closeModal }) => {
               >
                 Close
               </button>
-              <button type="submit" className="btn btn-sm btn-primary ms-2">
+              <button type="submit" className="btn btn-sm btn-primary ms-2" disabled={loading}>
                 {loading ? "Sending..." : "Comment"}
               </button>
             </div>
           </form>
+
+          <ul
+            className="list-group px-0 mx-0 overflow-auto border-0"
+            ref={containerRef} 
+          >
+            {comments &&
+              comments
+                ?.slice()
+                .reverse() 
+                .map((data, idx) => {
+                  const fullName = `${data?.employee?.firstName} ${data?.employee?.lastName}`;
+                  return (
+                    <li
+                      className={`list-group-item list-group-item-action border-none my-1 p-1`}
+                      key={idx}
+                    >
+                      <div
+                        className={`li-wrapper d-flex justify-content-start align-items-center my-0`}
+                      >
+                        <div className="avatar avatar-xs me-1">
+                          <span
+                            className={`avatar-initial rounded-circle bg-label-primary`}
+                          >
+                            {`${data?.employee?.firstName?.slice(0, 1)} ${data?.employee?.lastName?.slice(0, 1)}`}
+                          </span>
+                        </div>
+
+                        <div className={`d-flex align-items-center justify-content-start`}>
+                          <p className={`mb-0 text-muted me-2`}>{fullName}</p>
+                          <p className={`text-secondary m-0`} style={{ fontSize: "10px" }}>
+                            {moment.utc(data?.commentDate).local().fromNow()}
+                          </p>
+                        </div>
+                      </div>
+                      <p className={`ms-6 text-start mb-0 text-body`}>{data?.comment}</p>
+                    </li>
+                  );
+                })}
+          </ul>
         </div>
       </div>
     </div>

src/components/Charts/Circle.jsx

@@ -0,0 +1,80 @@
+import React from "react";
+import ReactApexChart from "react-apexcharts";
+
+const ApexChart = ({ completed = 0, planned = 1 }) => {
+const percentage = planned > 0 ? Math.round((completed / planned) * 100) : 0;
+
+const options = {
+chart: {
+height: 200,
+type: "radialBar",
+toolbar: { show: false },
+},
+plotOptions: {
+radialBar: {
+startAngle: -135,
+endAngle: 225,
+hollow: {
+margin: 0,
+size: "60%",
+background: "#fff",
+dropShadow: {
+enabled: true,
+top: 2,
+left: 0,
+blur: 3,
+opacity: 0.45,
+},
+},
+track: {
+background: "#f5f5f5",
+strokeWidth: "67%",
+dropShadow: { enabled: false },
+},
+dataLabels: {
+show: true,
+name: {
+offsetY: -10,
+color: "#888",
+fontSize: "14px",
+},
+value: {
+formatter: (val) => `${val}%`,
+color: "#111",
+fontSize: "24px",
+show: true,
+},
+},
+},
+},
+fill: {
+type: "gradient",
+gradient: {
+shade: "dark",
+type: "horizontal",
+shadeIntensity: 0.5,
+gradientToColors: ["#ABE5A1"],
+opacityFrom: 1,
+opacityTo: 1,
+stops: [0, 100],
+},
+},
+stroke: {
+lineCap: "round",
+},
+labels: ["Progress"],
+};
+
+return (
+<div id="chart">
+<ReactApexChart
+options={options}
+series={[percentage]}
+type="radialBar"
+height={200}
+/>
+</div>
+);
+};
+
+export default ApexChart;

src/components/Charts/Circlechart.jsx

@@ -0,0 +1,85 @@
+import React from "react";
+import ReactApexChart from "react-apexcharts";
+
+const ApexChart = () => {
+    const [state] = React.useState({
+        series: [75], // Replace this with dynamic value if needed
+        options: {
+            chart: {
+                height: 200, // Smaller height
+                type: "radialBar",
+                toolbar: {
+                    show: false, // Hide toolbar
+                },
+            },
+            plotOptions: {
+                radialBar: {
+                    startAngle: -135,
+                    endAngle: 225,
+                    hollow: {
+                        margin: 0,
+                        size: "60%", // Smaller inner circle
+                        background: "#fff",
+                        dropShadow: {
+                            enabled: true,
+                            top: 2,
+                            left: 0,
+                            blur: 3,
+                            opacity: 0.45,
+                        },
+                    },
+                    track: {
+                        background: "#f5f5f5",
+                        strokeWidth: "67%",
+                        dropShadow: {
+                            enabled: false,
+                        },
+                    },
+                    dataLabels: {
+                        show: true,
+                        name: {
+                            offsetY: -10,
+                            color: "#888",
+                            fontSize: "14px",
+                        },
+                        value: {
+                            formatter: (val) => parseInt(val),
+                            color: "#111",
+                            fontSize: "24px", // Smaller number
+                            show: true,
+                        },
+                    },
+                },
+            },
+            fill: {
+                type: "gradient",
+                gradient: {
+                    shade: "dark",
+                    type: "horizontal",
+                    shadeIntensity: 0.5,
+                    gradientToColors: ["#ABE5A1"],
+                    opacityFrom: 1,
+                    opacityTo: 1,
+                    stops: [0, 100],
+                },
+            },
+            stroke: {
+                lineCap: "round",
+            },
+            labels: ["Percent"],
+        },
+    });
+
+    return (
+        <div id="chart">
+            <ReactApexChart
+                options={state.options}
+                series={state.series}
+                type="radialBar"
+                height={200} // Also apply to component
+            />
+        </div>
+    );
+};
+
+export default ApexChart;

src/components/Dashboard/Activity.jsx

@@ -0,0 +1,194 @@
+import React, { useState, useEffect } from "react";
+import LineChart from "../Charts/LineChart";
+import { useProjects } from "../../hooks/useProjects";
+import { useDashboard_ActivityData } from "../../hooks/useDashboard_Data";
+import ApexChart from "../Charts/Circlechart";
+
+const LOCAL_STORAGE_PROJECT_KEY = "selectedActivityProjectId";
+
+const Activity = () => {
+    const { projects } = useProjects();
+    const today = new Date().toISOString().split("T")[0]; // Format: YYYY-MM-DD
+    const [selectedDate, setSelectedDate] = useState(today);
+    const storedProjectId = localStorage.getItem(LOCAL_STORAGE_PROJECT_KEY);
+    const initialProjectId = storedProjectId || "all";
+    const [selectedProjectId, setSelectedProjectId] = useState(initialProjectId);
+    const [displayedProjectName, setDisplayedProjectName] = useState("Select Project");
+    const [activeTab, setActiveTab] = useState("all");
+
+    const { dashboard_Activitydata: ActivityData, isLoading, error: isError } =
+        useDashboard_ActivityData(selectedDate, selectedProjectId);
+
+    useEffect(() => {
+        if (selectedProjectId === "all") {
+            setDisplayedProjectName("All Projects");
+        } else if (projects) {
+            const foundProject = projects.find((p) => p.id === selectedProjectId);
+            setDisplayedProjectName(foundProject ? foundProject.name : "Select Project");
+        } else {
+            setDisplayedProjectName("Select Project");
+        }
+
+        localStorage.setItem(LOCAL_STORAGE_PROJECT_KEY, selectedProjectId);
+    }, [selectedProjectId, projects]);
+
+    const handleProjectSelect = (projectId) => {
+        setSelectedProjectId(projectId);
+    };
+
+    const handleDateChange = (e) => {
+        setSelectedDate(e.target.value);
+    };
+
+    return (
+        <div className="card h-100">
+            <div className="card-header">
+                <div className="d-flex flex-wrap justify-content-between align-items-center mb-0">
+                    <div className="card-title mb-0 text-start">
+                        <h5 className="mb-1">Activity</h5>
+                        <p className="card-subtitle">Activity Progress Chart</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"
+                        >
+                            {displayedProjectName}
+                        </button>
+                        <ul className="dropdown-menu">
+                            <li>
+                                <button className="dropdown-item" onClick={() => handleProjectSelect("all")}>
+                                    All Projects
+                                </button>
+                            </li>
+                            {projects?.map((project) => (
+                                <li key={project.id}>
+                                    <button
+                                        className="dropdown-item"
+                                        onClick={() => handleProjectSelect(project.id)}
+                                    >
+                                        {project.name}
+                                    </button>
+                                </li>
+                            ))}
+                        </ul>
+                    </div>
+                </div>
+            </div>
+
+            {/* ✅ Date Picker Aligned Left with Padding */}
+            <div className="d-flex justify-content-start ps-3 mb-3">
+                <div style={{ width: "150px" }}>
+                    <input
+                        type="date"
+                        className="form-control"
+                        value={selectedDate}
+                        onChange={handleDateChange}
+                    />
+                </div>
+            </div>
+
+            {/* Tabs */}
+            <ul className="nav nav-tabs " role="tablist">
+                <li className="nav-item">
+                    <button
+                        type="button"
+                        className={`nav-link ${activeTab === "all" ? "active" : ""}`}
+                        onClick={() => setActiveTab("all")}
+                        data-bs-toggle="tab"
+                    >
+                        Summary
+                    </button>
+                </li>
+                <li className="nav-item">
+                    <button
+                        type="button"
+                        className={`nav-link ${activeTab === "logs" ? "active" : ""}`}
+                        onClick={() => setActiveTab("logs")}
+                        data-bs-toggle="tab"
+                    >
+                        Details
+                    </button>
+                </li>
+            </ul>
+
+            <div className="card-body">
+                {activeTab === "all" && (
+                    <div className="row justify-content-between">
+                        <div className="col-md-6 d-flex flex-column align-items-center text-center mb-4">
+                            {isLoading ? (
+                                <p>Loading activity data...</p>
+                            ) : isError ? (
+                                <p>No data available.</p>
+                            ) : (
+                                ActivityData && (
+                                    <>
+                                        <h5 className="fw-bold mb-0 text-start w-80">
+                                            <i className="bx bx-task text-info"></i> Allocated Task
+                                        </h5>
+                                        <h4 className="mb-0 fw-bold">
+                                            {ActivityData.totalCompletedWork?.toLocaleString()}/
+                                            {ActivityData.totalPlannedWork?.toLocaleString()}
+                                        </h4>
+                                        <small className="text-muted">Completed / Assigned</small>
+                                        <div style={{ maxWidth: "180px" }}>
+                                            <ApexChart />
+                                        </div>
+                                    </>
+                                )
+                            )}
+                        </div>
+
+                        <div className="col-md-6 d-flex flex-column align-items-center text-center mb-4">
+                            {!isLoading && !isError && ActivityData && (
+                                <>
+                                    <h5 className="fw-bold mb-0 text-start w-110">
+                                        <i className="bx bx-task text-info"></i> Activities
+                                    </h5>
+                                    <h4 className="mb-0 fw-bold">
+                                        {ActivityData.totalCompletedWork?.toLocaleString()}/
+                                        {ActivityData.totalPlannedWork?.toLocaleString()}
+                                    </h4>
+                                    <small className="text-muted ">Pending / Assigned</small>
+                                    <div style={{ maxWidth: "180px" }}>
+                                        <ApexChart />
+                                    </div>
+                                </>
+                            )}
+                        </div>
+                    </div>
+                )}
+
+                {activeTab === "logs" && (
+                    <div className="table-responsive">
+                        <table className="table table-bordered table-hover">
+                            <thead>
+                                <tr>
+                                    <th>Activity / Location</th>
+                                    <th>Assigned / Completed</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {[{
+                                    activity: "Code Review / Remote",
+                                    assignedToday: 3,
+                                    completed: 2
+                                }].map((log, index) => (
+                                    <tr key={index}>
+                                        <td>{log.activity}</td>
+                                        <td>{log.assignedToday} / {log.completed}</td>
+                                    </tr>
+                                ))}
+                            </tbody>
+                        </table>
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+};
+
+export default Activity;

src/components/Dashboard/Attendance.jsx

@@ -0,0 +1,218 @@
+import React, { useState, useEffect } from "react";
+import LineChart from "../Charts/LineChart";
+import { useProjects } from "../../hooks/useProjects";
+import { useDashboard_AttendanceData } from "../../hooks/useDashboard_Data";
+import ApexChart from "../Charts/Circle";
+
+const LOCAL_STORAGE_PROJECT_KEY = "selectedAttendanceProjectId";
+
+const Attendance = () => {
+  const { projects } = useProjects();
+  const today = new Date().toISOString().split("T")[0]; // Format: YYYY-MM-DD
+  const [selectedDate, setSelectedDate] = useState(today);
+  const storedProjectId = localStorage.getItem(LOCAL_STORAGE_PROJECT_KEY);
+  const initialProjectId = storedProjectId || "all";
+  const [selectedProjectId, setSelectedProjectId] = useState(initialProjectId);
+  const [displayedProjectName, setDisplayedProjectName] =
+    useState("Select Project");
+  const [activeTab, setActiveTab] = useState("Summary");
+
+  const {
+    dashboard_Attendancedata: AttendanceData,
+    isLoading,
+    error: isError,
+  } = useDashboard_AttendanceData(selectedDate, selectedProjectId);
+
+  useEffect(() => {
+    if (selectedProjectId === "all") {
+      setDisplayedProjectName("All Projects");
+    } else if (projects) {
+      const foundProject = projects.find((p) => p.id === selectedProjectId);
+      setDisplayedProjectName(
+        foundProject ? foundProject.name : "Select Project"
+      );
+    } else {
+      setDisplayedProjectName("Select Project");
+    }
+
+    localStorage.setItem(LOCAL_STORAGE_PROJECT_KEY, selectedProjectId);
+  }, [selectedProjectId, projects]);
+
+  const handleProjectSelect = (projectId) => {
+    setSelectedProjectId(projectId);
+  };
+
+  const handleDateChange = (e) => {
+    setSelectedDate(e.target.value);
+  };
+
+  return (
+    <div className="card h-100">
+      <div className="card-header  mb-1 pb-0 ">
+        <div className="d-flex flex-wrap justify-content-between align-items-center mb-0 pb-0 ">
+          <div className="card-title mb-0 text-start">
+            <h5 className="mb-1">Attendance</h5>
+            <p className="card-subtitle">Daily Attendance Data</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"
+            >
+              {displayedProjectName}
+            </button>
+            <ul className="dropdown-menu">
+              <li>
+                <button
+                  className="dropdown-item"
+                  onClick={() => handleProjectSelect("all")}
+                >
+                  All Projects
+                </button>
+              </li>
+              {projects?.map((project) => (
+                <li key={project.id}>
+                  <button
+                    className="dropdown-item"
+                    onClick={() => handleProjectSelect(project.id)}
+                  >
+                    {project.name}
+                  </button>
+                </li>
+              ))}
+            </ul>
+          </div>
+        </div>
+      </div>
+
+      <div className="d-flex flex-wrap justify-content-between align-items-center mb-0 mt-0 me-5 ms-5">
+        {/* Tabs */}
+        <div>
+          <ul className="nav nav-tabs " role="tablist">
+            <li className="nav-item">
+              <button
+                type="button"
+                className={`nav-link ${
+                  activeTab === "Summary" ? "active" : ""
+                }`}
+                onClick={() => setActiveTab("Summary")}
+                data-bs-toggle="tab"
+              >
+                Summary
+              </button>
+            </li>
+            <li className="nav-item">
+              <button
+                type="button"
+                className={`nav-link ${
+                  activeTab === "Details" ? "active" : ""
+                }`}
+                onClick={() => setActiveTab("Details")}
+                data-bs-toggle="tab"
+              >
+                Details
+              </button>
+            </li>
+          </ul>
+        </div>
+        {/* ✅ Date Picker Aligned Left with Padding */}
+        <div className="ps-6 mb-3 mt-0">
+          <div style={{ width: "120px" }}>
+            <input
+              type="date"
+              className="form-control p-1"
+              // style={{ fontSize: "1rem" }}
+              value={selectedDate}
+              onChange={handleDateChange}
+            />
+          </div>
+        </div>
+      </div>
+
+      <div className="card-body">
+        {activeTab === "Summary" && (
+          <div className="row justify-content-center">
+            <div className="col-12 col-md-6 d-flex flex-column align-items-center text-center mb-4">
+              {isLoading ? (
+                <p>Loading Attendance data...</p>
+              ) : isError ? (
+                <p>No data available.</p>
+              ) : (
+                AttendanceData && (
+                  <>
+                    <h5 className="fw-bold mb-0 text-center w-100">
+                      <i className="bx bx-task text-info"></i> Attendance
+                    </h5>
+                    <h4 className="mb-0 fw-bold">
+                      {AttendanceData.checkedInEmployee?.toLocaleString()}/
+                      {AttendanceData.assignedEmployee?.toLocaleString()}
+                    </h4>
+                    <small className="text-muted">Checked-In / Assigned</small>
+                    <div style={{ maxWidth: "180px" }}>
+                      <ApexChart
+                        completed={AttendanceData.checkedInEmployee}
+                        planned={AttendanceData.assignedEmployee}
+                      />
+                    </div>
+                  </>
+                )
+              )}
+            </div>
+          </div>
+        )}
+
+        {activeTab === "Details" && (
+          <div
+            className="table-responsive"
+            style={{ maxHeight: "300px", overflowY: "auto" }}
+          >
+            <table className="table table-hover mb-0 text-start">
+              <thead>
+                <tr>
+                  <th>Name</th>
+                  <th>Checkin</th>
+                  <th>Checkout</th>
+                </tr>
+              </thead>
+              <tbody>
+                {AttendanceData?.attendanceTable &&
+                AttendanceData.attendanceTable.length > 0 ? (
+                  AttendanceData.attendanceTable.map((record, index) => (
+                    <tr key={index}>
+                      <td>
+                        {record.firstName} {record.lastName}
+                      </td>
+                      <td>
+                        {new Date(record.inTime).toLocaleTimeString([], {
+                          hour: "2-digit",
+                          minute: "2-digit",
+                        })}
+                      </td>
+                      <td>
+                        {new Date(record.outTime).toLocaleTimeString([], {
+                          hour: "2-digit",
+                          minute: "2-digit",
+                        })}
+                      </td>
+                    </tr>
+                  ))
+                ) : (
+                  <tr>
+                    <td colSpan="3" className="text-center">
+                      No attendance data available
+                    </td>
+                  </tr>
+                )}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default Attendance;

src/components/Dashboard/Dashboard.jsx

@@ -1,268 +1,52 @@
-import React, { useState } from "react";
+import React from "react";
-import HorizontalBarChart from "../Charts/HorizontalBarChart";
-import LineChart from "../Charts/LineChart";
-import { useProjects } from "../../hooks/useProjects";
 import {
-  useDashboard_Data,
   useDashboardProjectsCardData,
   useDashboardTeamsCardData,
   useDashboardTasksCardData,
 } from "../../hooks/useDashboard_Data";
+import Projects from "./Projects";
+import Teams from "./Teams";
+import TasksCard from "./Tasks";
+import ProjectCompletionChart from "./ProjectCompletionChart";
+import ProjectProgressChart from "./ProjectProgressChart";
+// import Attendance from "./Attendance";
 
 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">
+          <Projects projectsCardData={projectsCardData} />
-            <div className="d-flex justify-content-start align-items-center mb-3">
-              <h5 className="fw-bold mb-0 ms-2">
-                <i className="rounded-circle bx bx-building-house text-primary"></i>{" "}
-                Projects
-              </h5>
-            </div>
-            <div className="d-flex justify-content-around align-items-start mt-n2">
-              <div>
-                <h4 className="mb-0 fw-bold">
-                  {projectsCardData.totalProjects?.toLocaleString()}
-                </h4>
-                <small className="text-muted">Total</small>
-              </div>
-              <div>
-                <h4 className="mb-0 fw-bold">
-                  {projectsCardData.ongoingProjects?.toLocaleString()}
-                </h4>
-                <small className="text-muted">Ongoing</small>
-              </div>
-            </div>
-          </div>
         </div>
 
         {/* Teams Card */}
         <div className="col-sm-6 col-lg-4">
-          <div className="card p-3 h-100 text-center d-flex justify-content-between">
+          <Teams teamsCardData={teamsCardData} />
-            <div className="d-flex justify-content-start align-items-center mb-3">
-              <h5 className="fw-bold mb-0 ms-2">
-                <i className="bx bx-group text-warning"></i> Teams
-              </h5>
-            </div>
-            <div className="d-flex justify-content-around align-items-start mt-n2">
-              <div>
-                <h4 className="mb-0 fw-bold">
-                  {teamsCardData.totalEmployees?.toLocaleString()}
-                </h4>
-                <small className="text-muted">Total Employees</small>
-              </div>
-              <div>
-                <h4 className="mb-0 fw-bold">
-                  {teamsCardData.inToday?.toLocaleString()}
-                </h4>
-                <small className="text-muted">In Today</small>
-              </div>
-            </div>
-          </div>
         </div>
 
         {/* Tasks Card */}
         <div className="col-sm-6 col-lg-4">
-          <div className="card p-3 h-100 text-center d-flex justify-content-between">
+          <TasksCard tasksCardData={tasksCardData} />
-            <div className="d-flex justify-content-start align-items-center mb-3">
-              <h5 className="fw-bold mb-0 ms-2">
-                <i className="bx bx-task text-success"></i> Tasks
-              </h5>
-            </div>
-            <div className="d-flex justify-content-around align-items-start mt-n2">
-              <div>
-                <h4 className="mb-0 fw-bold">
-                  {tasksCardData.totalTasks?.toLocaleString()}
-                </h4>
-                <small className="text-muted">Total</small>
-              </div>
-              <div>
-                <h4 className="mb-0 fw-bold">
-                  {tasksCardData.completedTasks?.toLocaleString()}
-                </h4>
-                <small className="text-muted">Completed</small>
-              </div>
-            </div>
-          </div>
         </div>
 
-        {/* Bar Chart */}
+        {/* Bar Chart (Project Completion) */}
         <div className="col-xxl-6 col-lg-6">
-          <div className="card h-100">
+          <ProjectCompletionChart />
-            <div className="card-header d-flex align-items-start justify-content-between">
-              <div className="card-title mb-0 text-start">
-                <h5 className="mb-1">Projects</h5>
-                <p className="card-subtitle">Projects Completion Status</p>
-              </div>
-            </div>
-            <div className="card-body">
-              <HorizontalBarChart
-                categories={projectNames}
-                seriesData={projectProgress}
-                loading={loading}
-              />
-            </div>
-          </div>
         </div>
 
-        {/* Line Chart */}
+        {/* Line Chart (Project Progress) */}
         <div className="col-xxl-6 col-lg-6">
-          <div className="card h-100">
+          <ProjectProgressChart />
-            <div className="card-header">
-              {/* Row 1: Title + Project Selector */}
-              <div className="d-flex flex-wrap justify-content-between align-items-center mb-2">
-                <div className="card-title mb-0 text-start">
-                  <h5 className="mb-1">Project Progress</h5>
-                  <p className="card-subtitle">Progress Overview by Project</p>
-                </div>
-
-                <div className="btn-group">
-                  <button
-                    className="btn btn-outline-primary btn-sm dropdown-toggle"
-                    type="button"
-                    data-bs-toggle="dropdown"
-                    aria-expanded="false"
-                  >
-                    {selectedProjectId === "all"
-                      ? "All Projects"
-                      : projects?.find((p) => p.id === selectedProjectId)
-                          ?.name || "Select Project"}
-                  </button>
-
-                  <ul className="dropdown-menu">
-                    <li>
-                      <button
-                        className="dropdown-item"
-                        onClick={() => setSelectedProjectId("all")}
-                      >
-                        All Projects
-                      </button>
-                    </li>
-                    {projects?.map((project) => (
-                      <li key={project.id}>
-                        <button
-                          className="dropdown-item"
-                          onClick={() => setSelectedProjectId(project.id)}
-                        >
-                          {project.name}
-                        </button>
-                      </li>
-                    ))}
-                  </ul>
-                </div>
-              </div>
-
-              {/* Row 2: Time Range Buttons */}
-              <div className="d-flex flex-wrap  mt-2">
-                {["1D", "1W", "15D", "1M", "3M", "1Y", "5Y"].map((key) => (
-                  <button
-                    key={key}
-                    className={`border-0 bg-transparent px-2 py-1 text-sm rounded ${
-                      range === key
-                        ? " border-bottom border-primary text-primary"
-                        : "text-muted"
-                    }`}
-                    style={{ cursor: "pointer", transition: "all 0.2s ease" }}
-                    onClick={() => setRange(key)}
-                  >
-                    {key}
-                  </button>
-                ))}
-              </div>
-            </div>
-            <div className="card-body ">
-              <LineChart
-                seriesData={lineChartSeries}
-                categories={lineChartCategories}
-                loading={isLineChartLoading}
-                lineChartCategoriesDates={lineChartCategoriesDates}
-              />
-            </div>
-          </div>
         </div>
+
+        {/* <div className="col-xxl-6 col-lg-6">
+          <Attendance />
+        </div> */}
       </div>
     </div>
   );

src/components/Dashboard/PendingAttendance.jsx

@@ -0,0 +1,32 @@
+import React from "react";
+import { useDashboardPendingAttendenceData } from "../../hooks/useDashboard_Data";
+
+const PendingAttendance = () => {
+  const { PendingAttendenceData } = useDashboardPendingAttendenceData();
+
+  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> Pending Attendence
+        </h5>
+      </div>
+      <div className="d-flex justify-content-around align-items-start mt-n2">
+        <div>
+          <h4 className="mb-0 fw-bold">
+            {PendingAttendenceData.pendingCheckOut?.toLocaleString()}
+          </h4>
+          <small className="text-muted">Checkout</small>
+        </div>
+        <div>
+          <h4 className="mb-0 fw-bold">
+            {PendingAttendenceData.pendingRegularization?.toLocaleString()}
+          </h4>
+          <small className="text-muted">Regularization</small>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default PendingAttendance;

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;

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;

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;

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;

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;

src/components/Employee/ManageEmployee.jsx

@@ -10,7 +10,7 @@ import { changeMaster } from "../../slices/localVariablesSlice";
 import { Link, useNavigate, useParams } from "react-router-dom";
 import { formatDate } from "../../utils/dateUtils";
 import { useEmployeeProfile } from "../../hooks/useEmployees";
-import { clearCacheKey, getCachedData } from "../../slices/apiDataManager";
+import { cacheData, clearCacheKey, getCachedData } from "../../slices/apiDataManager";
 import { clearApiCacheKey } from "../../slices/apiCacheSlice";
 
 const mobileNumberRegex = /^[0-9]\d{9}$/;
@@ -33,7 +33,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
   const { data: job_role, loading } = useMaster();
   const [isloading, setLoading] = useState(false);
   const navigation = useNavigate();
-  const [currentEmployee, setCurrentEmployee] = useState();
+  const [currentEmployee, setCurrentEmployee] = useState(null);
   const [currentAddressLength, setCurrentAddressLength] = useState(0);
   const [permanentAddressLength, setPermanentAddressLength] = useState(0);
 
@@ -157,22 +157,32 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
     mode: "onChange",
   });
 
-  const AadharNumberValue = watch("AadharNumber") || "";
+  const AadharNumberValue = watch("aadharNumber") || "";
 
   const onSubmit = (data) => {
     setLoading(true);
-
+    if (data.email == "") {
-  console.log(data);
+      data.email = null;
+    }
     EmployeeRepository.manageEmployee(data)
       .then((response) => {
-        showToast("Employee details updated successfully.", "success");
+        cacheData("employeeProfileInfo", data);
+        showToast(
+          `Employee details ${
+            data.id == null ? "created" : "updated"
+          } successfully.`,
+          "success"
+        );
         clearCacheKey("employeeListByProject");
         clearCacheKey("allEmployeeList");
+        clearCacheKey("allInactiveEmployeeList");
         clearCacheKey("employeeProfile");
         
+
         setLoading(false);
         reset();
-        navigation("/employees");
+        // navigation("/employees");
+        onClosed();
       })
       .catch((error) => {
         const message =
@@ -232,7 +242,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
                 className="cursor-pointer fs-6"
                 onClick={() => onClosed()}
               >
-                <i className='bx bx-x'></i>
+                <i className="bx bx-x"></i>
               </span>
             </div>
             <div className="card-body">
@@ -250,15 +260,15 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
                       name="FirstName"
                       {...register("firstName")}
                       className="form-control form-control-sm"
-                      id="FirstName"
+                      id="firstName"
                       placeholder="First Name"
                     />
-                    {errors.FirstName && (
+                    {errors.firstName && (
                       <div
                         className="danger-text text-start"
                         style={{ fontSize: "12px" }}
                       >
-                        {errors.FirstName.message}
+                        {errors.firstName.message}
                       </div>
                     )}
                   </div>{" "}
@@ -269,15 +279,15 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
                       type="text"
                       {...register("middleName")}
                       className="form-control form-control-sm"
-                      id="MiddleName"
+                      id="middleName"
                       placeholder="Middle Name"
                     />
-                    {errors.MiddleName && (
+                    {errors.middleName && (
                       <div
                         className="danger-text text-start "
                         style={{ fontSize: "12px" }}
                       >
-                        {errors.MiddleName.message}
+                        {errors.middleName.message}
                       </div>
                     )}
                   </div>
@@ -287,15 +297,15 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
                       type="text"
                       {...register("lastName")}
                       className="form-control form-control-sm"
-                      id="LastName"
+                      id="lastName"
                       placeholder="Last Name"
                     />
-                    {errors.LastName && (
+                    {errors.lastName && (
                       <div
                         className="danger-text text-start"
                         style={{ fontSize: "12px" }}
                       >
-                        {errors.LastName.message}
+                        {errors.lastName.message}
                       </div>
                     )}
                   </div>
@@ -305,7 +315,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
                     <div className="form-text text-start">Email</div>
                     <input
                       type="email"
-                      id="Email"
+                      id="email"
                       {...register("email")}
                       className="form-control form-control-sm"
                       placeholder="example@domain.com"
@@ -313,12 +323,12 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
                       aria-describedby="Email"
                       disabled={!!currentEmployee?.email}
                     />
-                    {errors.Email && (
+                    {errors.email && (
                       <div
                         className="danger-text text-start"
                         style={{ fontSize: "12px" }}
                       >
-                        {errors.Email.message}
+                        {errors.email.message}
                       </div>
                     )}
                   </div>
@@ -327,19 +337,19 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
                     <input
                       type="text"
                       keyboardType="numeric"
-                      id="PhoneNumber"
+                      id="phoneNumber"
                       {...register("phoneNumber")}
                       className="form-control form-control-sm"
                       placeholder="Phone Number"
                       inputMode="numeric"
                       maxLength={10}
                     />
-                    {errors.PhoneNumber && (
+                    {errors.phoneNumber && (
                       <div
                         className="danger-text text-start"
                         style={{ fontSize: "12px" }}
                       >
-                        {errors.PhoneNumber.message}
+                        {errors.phoneNumber.message}
                       </div>
                     )}
                   </div>
@@ -353,7 +363,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
                       <select
                         className="form-select form-select-sm "
                         {...register("gender")}
-                        id="Gender"
+                        id="gender"
                         aria-label=""
                       >
                         <option disabled value="">
@@ -364,12 +374,12 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
                         <option value="Other">Other</option>
                       </select>
                     </div>
-                    {errors.Gender && (
+                    {errors.gender && (
                       <div
                         className="danger-text text-start"
                         style={{ fontSize: "12px" }}
                       >
-                        {errors.Gender.message}
+                        {errors.gender.message}
                       </div>
                     )}
                   </div>
@@ -381,15 +391,15 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
                         className="form-control form-control-sm"
                         type="date"
                         {...register("birthDate")}
-                        id="BirthDate"
+                        id="birthDate"
                       />
                     </div>
-                    {errors.BirthDate && (
+                    {errors.birthDate && (
                       <div
                         className="danger-text text-start"
                         style={{ fontSize: "12px" }}
                       >
-                        {errors.BirthDate.message}
+                        {errors.birthDate.message}
                       </div>
                     )}
                   </div>
@@ -401,15 +411,15 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
                         className="form-control form-control-sm"
                         type="date"
                         {...register("joiningDate")}
-                        id="JoiningDate"
+                        id="joiningDate"
                       />
                     </div>
-                    {errors.JoiningDate && (
+                    {errors.joiningDate && (
                       <div
                         className="danger-text text-start"
                         style={{ fontSize: "12px" }}
                       >
-                        {errors.JoiningDate.message}
+                        {errors.joiningDate.message}
                       </div>
                     )}
                   </div>
@@ -419,7 +429,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
                     <div className="form-text text-start">Current Address</div>
 
                     <textarea
-                      id="CurrentAddress"
+                      id="currentAddress"
                       className="form-control form-control-sm"
                       placeholder="Current Address"
                       aria-label="Current Address"
@@ -429,7 +439,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
                       onChange={(e) => {
                         setCurrentAddressLength(e.target.value.length);
                         // let react-hook-form still handle it
-                        register("CurrentAddress").onChange(e);
+                        register("currentAddress").onChange(e);
                       }}
                     ></textarea>
                     <div className="text-end muted">
@@ -438,12 +448,12 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
                         {500 - currentAddressLength} characters left
                       </small>
                     </div>
-                    {errors.CurrentAddress && (
+                    {errors.currentAddress && (
                       <div
                         className="danger-text text-start"
                         style={{ fontSize: "12px" }}
                       >
-                        {errors.CurrentAddress.message}
+                        {errors.currentAddress.message}
                       </div>
                     )}
                   </div>
@@ -453,7 +463,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
                     </div>
 
                     <textarea
-                      id="PermanentAddress"
+                      id="permanentAddress"
                       className="form-control form-control-sm"
                       placeholder="Permanent Address"
                       aria-label="Permanent Address"
@@ -462,7 +472,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
                       maxLength={500}
                       onChange={(e) => {
                         setPermanentAddressLength(e.target.value.length);
-                        register("PermanentAddress").onChange(e);
+                        register("permanentAddress").onChange(e);
                       }}
                     ></textarea>
                     <div className="text-end muted">
@@ -470,12 +480,12 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
                         {500 - permanentAddressLength} characters left
                       </small>
                     </div>
-                    {errors.PermanentAddress && (
+                    {errors.permanentAddress && (
                       <div
                         className="danger-text text-start"
                         style={{ fontSize: "12px" }}
                       >
-                        {errors.PermanentAddress.message}
+                        {errors.permanentAddress.message}
                       </div>
                     )}
                   </div>
@@ -493,7 +503,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
                       <select
                         className="form-select form-select-sm"
                         {...register("jobRoleId")}
-                        id="JobRoleId"
+                        id="jobRoleId"
                         aria-label=""
                       >
                         <option disabled value="">
@@ -506,12 +516,12 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
                         ))}
                       </select>
                     </div>
-                    {errors.JobRoleId && (
+                    {errors.jobRoleId && (
                       <div
                         className="danger-text text-start"
                         style={{ fontSize: "12px" }}
                       >
-                        {errors.JobRoleId.message}
+                        {errors.jobRoleId.message}
                       </div>
                     )}
                   </div>
@@ -523,16 +533,16 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
                       type="text"
                       {...register("emergencyContactPerson")}
                       className="form-control form-control-sm"
-                      id="EmergencyContactPerson"
+                      id="emergencyContactPerson"
                       maxLength={50}
                       placeholder="Contact Person"
                     />
-                    {errors.EmergencyContactPerson && (
+                    {errors.emergencyContactPerson && (
                       <div
                         className="danger-text text-start"
                         style={{ fontSize: "12px" }}
                       >
-                        {errors.EmergencyContactPerson.message}
+                        {errors.emergencyContactPerson.message}
                       </div>
                     )}
                   </div>
@@ -544,17 +554,17 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
                       type="text"
                       {...register("emergencyPhoneNumber")}
                       className="form-control form-control-sm phone-mask"
-                      id="EmergencyPhoneNumber"
+                      id="emergencyPhoneNumber"
                       placeholder="Phone Number"
                       inputMode="numeric"
                       maxLength={10}
                     />
-                    {errors.EmergencyPhoneNumber && (
+                    {errors.emergencyPhoneNumber && (
                       <div
                         className="danger-text text-start"
                         style={{ fontSize: "12px" }}
                       >
-                        {errors.EmergencyPhoneNumber.message}
+                        {errors.emergencyPhoneNumber.message}
                       </div>
                     )}
                   </div>
@@ -567,14 +577,14 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
                       type="text"
                       {...register("aadharNumber")}
                       className="form-control form-control-sm"
-                      id="AadharNumber"
+                      id="aadharNumber"
                       placeholder="AADHAR Number"
                       maxLength={12}
                       inputMode="numeric"
                     />
-                    {errors.AadharNumber && (
+                    {errors.aadharNumber && (
                       <div className="danger-text text-start">
-                        {errors.AadharNumber.message}
+                        {errors.aadharNumber.message}
                       </div>
                     )}
                   </div>
@@ -585,16 +595,16 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
                       type="text"
                       {...register("panNumber")}
                       className="form-control form-control-sm"
-                      id="PanNumber"
+                      id="panNumber"
                       placeholder="PAN Number"
                       maxLength={10}
                     />
-                    {errors.PanNumber && (
+                    {errors.panNumber && (
                       <div
                         className="danger-text text-start"
                         style={{ fontSize: "12px" }}
                       >
-                        {errors.PanNumber.message}
+                        {errors.panNumber.message}
                       </div>
                     )}
                   </div>

src/components/Layout/LayoutMenu.tsx

@@ -58,7 +58,7 @@ const LayoutMenu = () => {
             </g>
           </svg>
         </span>
-        <span className="app-brand-text demo menu-text fw-bolder ms-2">Sneat</span>
+        <span className="app-brand-text demo menu-text fw-bolder ms-2">Marco</span>
       </a>
 
       <a href="javascript:void(0);" className="layout-menu-toggle menu-link text-large ms-auto d-block d-xl-none">

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">
+              <li className="d-flex flex-column align-items-start mb-4">
-                <i className="bx bx-flag"></i>
+                <div className="d-flex align-items-center">
-                <span className="fw-medium mx-2">Address:</span>{" "}
+                  <i className="bx bx-flag"></i>
-              </li>
+                  <span className="fw-medium mx-2">Address:</span>
-            </ul>
+                  {data.projectAddress?.length <= 20 && (
-            {/* <small className="card-text text-uppercase text-muted small">
+                    <span>{data.projectAddress}</span>
-              Contacts
+                  )}
-            </small> */}
+                </div>
-            <ul className="list-unstyled my-3 py-1">
+                {data.projectAddress?.length > 20 && (
-             
+                  <div className="ms-4 text-start">{data.projectAddress}</div>
-              {/* <li className="d-flex align-items-center mb-4">
+                )}
-                <i className="bx bx-phone"></i>
-                <span className="fw-medium mx-2">Contact Number:</span>{" "}
-                <span>NA</span>
-              </li> */}
-              {/* <li className="d-flex align-items-center mb-4">
-                <i className="bx bx-envelope"></i>
-                <span className="fw-medium mx-2">Email:</span> <span>NA</span>
-              </li> */}          
-              <li className="d-flex align-items-start test-start mb-4">
-                <span>{data.projectAddress}</span>
               </li>
             </ul>
           </div>

src/components/Project/AssignRole.jsx

@@ -1,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()
+        .int() // Ensure it's an integer
-        .positive({ message: "Planned task must be a positive number" })
+        .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) => {
+  // Handler for employee checkbox changes
-    reset();
+  const handleCheckboxChange = (event, user) => {
-    // setSelectedEmployees([]);
+    const isChecked = event.target.checked;
-    setSelectedRole(event.target.value);
+    let updatedSelectedEmployees = watch("selectedEmployees") || []; // Get current selected employees from form state
-  };
 
-  const filteredEmployees =
+    if (isChecked) {
-    selectedRole === "all"
+      // Add employee if checked and not already in the list
-      ? employees
+      if (!updatedSelectedEmployees.includes(user.id)) {
-      : employees.filter((emp) => String(emp.jobRoleId || "") === selectedRole);
+        updatedSelectedEmployees = [...updatedSelectedEmployees, user.id];
-
-  const handleEmployeeSelection = (employeeId, field) => {
-    setSelectedEmployees((prevSelected) => {
-      let updatedSelection;
-      if (!prevSelected.includes(employeeId)) {
-        updatedSelection = [...prevSelected, employeeId];
-      } else {
-        updatedSelection = prevSelected.filter((id) => id !== employeeId);
       }
-      field.onChange(updatedSelection);
+    } else {
-      return updatedSelection;
+      // Remove employee if unchecked
-    });
+      updatedSelectedEmployees = updatedSelectedEmployees.filter(
-  };
+        (id) => id !== user.id
-
+      );
-  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");
     }
+    // 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,353 @@ const AssignRoleModel = ({ assignData, onClose }) => {
             onClick={onClose}
             aria-label="Close"
           ></button>
-          <div className="container my-1">
+          <div className="fs-5 text-dark text-center d-flex align-items-center justify-content-center flex-wrap">
-            <div className="mb-">
+            <p className="align-items-center flex-wrap m-0 ">Assign Task</p>
-              <p className="fs-sm-5 fs-6 text-dark text-start d-flex align-items-center flex-wrap">
+            <div className="container my-3">
-                {[
+              <div className="mb-1">
-                  assignData?.building?.name,
+                <p className="mb-0">
-                  assignData?.floor?.floorName,
+                  <span className="text-dark text-start d-flex align-items-center flex-wrap form-text">
-                  assignData?.workArea?.areaName,
+                    <p className="me-2 m-0 font-bold">Work Location :</p>
-                  assignData?.workItem?.workItem?.activityMaster?.activityName,
+                    {[
-                ]
+                      assignData?.building?.name,
-                  .filter(Boolean)
+                      assignData?.floor?.floorName,
-                  .map((item, index, array) => (
+                      assignData?.workArea?.areaName,
-                    <span key={index} className="d-flex align-items-center">
+                      assignData?.workItem?.workItem?.activityMaster
-                      {item}
+                        ?.activityName,
-                      {index < array.length - 1 && (
+                    ]
-                        <i className="bx bx-chevron-right mx-2"></i>
+                      .filter(Boolean) // Filter out any undefined/null values
-                      )}
+                      .map((item, index, array) => (
-                    </span>
+                        <span key={index} className="d-flex align-items-center">
-                  ))}
+                          {item}
-              </p>
+                          {index < array.length - 1 && (
+                            <i className="bx bx-chevron-right mx-2"></i>
+                          )}
+                        </span>
+                      ))}
+                  </span>
+                </p>
 
-              <form onSubmit={handleSubmit(onSubmit)}>
+                <form onSubmit={handleSubmit(onSubmit)}>
-                <div className="row mb-1">
+                  <div className="form-label text-start">
-                  <div className="col-sm-4">
+                    <div className="row mb-1">
-                    <div className="form-text text-start">Select Role</div>
+                      <div className="col-12">
-                    <div className="input-group input-group-merge">
+                        <div className="form-text text-start">
-                      <select
+                          <div className="d-flex align-items-center form-text fs-7">
-                        className="form-select form-select-sm"
+                            <span className="text-dark">Select Team</span>
-                        id="Role"
+                            <div className="me-2">{displayedSelection}</div>
-                        value={selectedRole}
+                            <a
-                        onChange={handleRoleChange}
+                              className="dropdown-toggle hide-arrow cursor-pointer"
-                        aria-label=""
+                              data-bs-toggle="dropdown"
-                      >
+                              aria-expanded="false"
-                        {loading && data ? (
+                            >
-                          "Loading..."
+                              <i className="bx bx-filter bx-lg text-primary"></i>
-                        ) : (
+                            </a>
-                          <>
-                            <option value="all">All</option>
-                            {jobRoleData?.map((item) => (
-                              <option key={item.id} value={item.id}>
-                                {item.name}
-                              </option>
-                            ))}
-                          </>
-                        )}
-                      </select>
-                    </div>
-                  </div>
-                </div>
-                <div className="divider text-start">
-                  <div className="divider-text">Employee</div>
-                </div>
-                {employeeLoading && <div>Loading...</div>}
-                {!employeeLoading && filteredEmployees?.length === 0 && employees && (
-                  <div>No employees found</div>
-                )}
 
-                <div className="row">
+                            <ul className="dropdown-menu p-2 text-capitalize">
-                  <div className="col-12 col-md-8 h-sm-25 overflow-auto">
+                              <li key="all">
-                    {selectedRole !== "" && (
+                                <button
-                      <div className="row mb-2">
+                                  type="button"
-                        <div className="col-sm-12">
+                                  className="dropdown-item py-1"
-                          <div className="row">
+                                  onClick={() =>
-                            {filteredEmployees?.map((emp) => {
+                                    handleRoleChange({
-                              const jobRole = jobRoleData?.find(
+                                      target: { value: "all" },
-                                (role) => role?.id === emp?.jobRoleId
+                                    })
-                              );
+                                  }
-
-                              return (
-                                <div
-                                  key={emp.id}
-                                  className="col-6 col-sm-6 col-md-4 col-lg-4 mb-1"
                                 >
-                                  <div className="form-check text-start p-0">
+                                  All Roles
-                                    <div className="li-wrapper d-flex justify-content-start align-items-start">
+                                </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>
+
+                    <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(
+                                            checked={field.value?.includes(emp.id)}
-                                              emp.id
+                                            onChange={(e) => {
-                                            )}
+                                              handleCheckboxChange(e, emp);
-                                            onChange={() => {
-                                              handleEmployeeSelection(
-                                                emp.id,
-                                                field
-                                              );
                                             }}
                                           />
                                         )}
                                       />
-                                      <div className="list-content">
+                                      <div className="flex-grow-1">
-                                        <p
+                                        <p className="mb-0" style={{ fontSize: "13px" }}>
-                                          className=" mb-0"
-                                          style={{
-                                            fontSize: "12px",
-                                            fontWeight: "bolder",
-                                          }}
-                                        >
                                           {emp.firstName} {emp.lastName}
                                         </p>
                                         <small
-                                          className="lead"
+                                          className="text-muted"
-                                          style={{ fontSize: "10px" }}
+                                          style={{ fontSize: "11px" }}
                                         >
-                                          {loading && (
+                                          {loading ? (
-                                            <p
+                                            <span className="placeholder-glow">
-                                              className="skeleton para"
+                                              <span className="placeholder col-6"></span>
-                                              style={{ height: "7px" }}
+                                            </span>
-                                            ></p>
+                                          ) : (
+                                            jobRole?.name || "Unknown Role"
                                           )}
-                                          {data &&
-                                            !loading &&
-                                            (jobRole
-                                              ? jobRole.name
-                                              : "Unknown Role")}
                                         </small>
                                       </div>
                                     </div>
                                   </div>
-                                </div>
+                                );
+                              })
+                            ) : (
+                              <div className="col-12">
+                                <p className="text-center">No employees found for the selected role.</p>
+                              </div>
+                            )}
+                          </div>
+                        )}
+                      </div>
+                    </div>
+
+                    <div
+                      className="col-12 h-25 overflow-auto"
+                      style={{ maxHeight: "200px" }}
+                    >
+                      {watch("selectedEmployees")?.length > 0 && (
+                        <div className="mt-1">
+                          <div className="text-start px-2">
+                            {watch("selectedEmployees")?.map((empId) => {
+                              const emp = employees.find(
+                                (emp) => emp.id === empId
+                              );
+                              return (
+                                emp && (
+                                  <span
+                                    key={empId}
+                                    className="badge rounded-pill bg-label-primary d-inline-flex align-items-center me-1 mb-1"
+                                  >
+                                    {emp.firstName} {emp.lastName}
+                                    <p
+                                      type="button"
+                                      className=" btn-close-white p-0 m-0"
+                                      aria-label="Close"
+                                      onClick={() => {
+                                        const updatedSelected = watch(
+                                          "selectedEmployees"
+                                        ).filter((id) => id !== empId);
+                                        setValue(
+                                          "selectedEmployees",
+                                          updatedSelected
+                                        );
+                                        trigger("selectedEmployees"); // <--- IMPORTANT: Trigger validation on removing badge
+                                      }}
+                                    >
+                                      <i className="icon-base bx bx-x icon-md "></i>
+                                    </p>
+                                  </span>
+                                )
                               );
                             })}
                           </div>
                         </div>
-                      </div>
+                      )}
-                    )}
+                    </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 className="col-md text-start mx-0 px-0">
+                    {!loading && errors.selectedEmployees && (
-                  <div className="form-check form-check-inline mt-4 px-1">
+                      <div className="danger-text mt-1">
-                    <label className="form-text fs-6" for="inlineCheckbox1">
+                        <p>{errors.selectedEmployees.message}</p> {/* Use message from Zod schema */}
-                      Pending Work
+                      </div>
-                    </label>
+                    )}
+
+                    {/* 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"
+                      className="form-text fs-7 m-1 text-lg text-dark"
-                      for="inlineCheckbox1"
+                      htmlFor="descriptionTextarea" // Changed htmlFor for better accessibility
                     >
-                      {assignData?.workItem?.workItem?.plannedWork -
+                      Description
-                        assignData?.workItem?.workItem?.completedWork}
-                    </label>
-                  </div>
-                  <div className="form-check form-check-inline col-sm-2 col">
-                    <label for="defaultFormControlInput" className="form-label">
-                      Target
                     </label>
                     <Controller
-                      name="plannedTask"
+                      name="description"
                       control={control}
                       render={({ field }) => (
-                        <input
+                        <textarea
-                          type="text"
-                          className="form-control form-control-xs"
                           {...field}
-                          id="defaultFormControlInput"
+                          className="form-control"
-                          aria-describedby="defaultFormControlHelp"
+                          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">
+                  {/* Submit and Cancel buttons */}
-                  Description
+                  <div className="col-12 d-flex justify-content-center align-items-center gap-sm-6 gap-8 text-center mt-1">
-                </label>
+                    <button type="submit" className="btn btn-sm btn-primary ">
-                <Controller
+                      Submit
-                  name="description"
+                    </button>
-                  control={control}
+                    <button
-                  render={({ field }) => (
+                      type="reset"
-                    <textarea
+                      className="btn btn-sm btn-label-secondary"
-                      {...field}
+                      data-bs-dismiss="modal"
-                      className="form-control"
+                      aria-label="Close"
-                      id="exampleFormControlTextarea1"
+                      onClick={closedModel}
-                      rows="2"
+                    >
-                    />
+                      Cancel
-                  )}
+                    </button>
-                />
-                {errors.description && (
-                  <div className="danger-text">
-                    {errors.description.message}
                   </div>
-                )}
+                </form>
-
+              </div>
-                <div className="col-12 d-flex justify-content-center align-items-center gap-sm-6 gap-8 text-center mt-1">
-                  <button type="submit" className="btn btn-sm btn-primary ">
-                    Submit
-                  </button>
-                  <button
-                    type="reset"
-                    className="btn btn-sm btn-label-secondary"
-                    data-bs-dismiss="modal"
-                    aria-label="Close"
-                    onClick={closedModel}
-                  >
-                    Cancel
-                  </button>
-                </div>
-              </form>
             </div>
           </div>
         </div>
@@ -398,4 +553,5 @@ const AssignRoleModel = ({ assignData, onClose }) => {
     </div>
   );
 };
+
 export default AssignRoleModel;

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;
+
+

src/components/Project/Infrastructure/EditActivityModal.jsx

@@ -3,7 +3,7 @@ import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 
-import { useActivitiesMaster } from "../../../hooks/masterHook/useMaster";
+import { useActivitiesMaster, useWorkCategoriesMaster } from "../../../hooks/masterHook/useMaster";
 import { useProjectDetails } from "../../../hooks/useProjects";
 import { useDispatch, useSelector } from "react-redux";
 import ProjectRepository from "../../../repositories/ProjectRepository";
@@ -18,6 +18,7 @@ import showToast from "../../../services/toastService";
 const taskSchema = z
   .object({
     activityID: z.string().min(1, "Activity is required"),
+    workCategoryId: z.string().min(1, "Work Category is required"),
     plannedWork: z.number().min(1, "Planned Work must be greater than 0"),
     completedWork: z.number().min(0, "Completed Work must be greater than 0"),
   })
@@ -43,17 +44,21 @@ const EditActivityModal = ({
   );
   const defaultModel = {
     activityID: 0,
+    workCategoryId: 0,
     plannedWork: 0,
     completedWork: 0,
   };
 
-  const {projects_Details, refetch} = useProjectDetails( selectedProject );
+  const { projects_Details, refetch } = useProjectDetails(selectedProject);
-  const [ActivityUnit,setActivityUnit]= useState("")
+  const [ActivityUnit, setActivityUnit] = useState("");
   const { activities, loading, error } = useActivitiesMaster();
+  const { categories, categoryLoading, categoryError } =
+    useWorkCategoriesMaster();
   const [formData, setFormData] = useState(defaultModel);
   const [selectedActivity, setSelectedActivity] = useState(null);
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [activityData, setActivityData] = useState([]);
+  const [categoryData, setCategoryData] = useState([]);
   const dispatch = useDispatch();
 
   const {
@@ -70,13 +75,22 @@ const EditActivityModal = ({
   });
 
   const handleActivityChange = (e) => {
-    const selectedId = Number(e.target.value);
+    const selectedId = String(e.target.value);
     const selected = activityData.find((a) => a.id === selectedId);
     setSelectedActivity(selected || null);
     setValue("activityID", selectedId);
   };
 
-  const onSubmitForm = async (data) => {
+  const handleCategoryChange = (e) => {
+    const selectedId = String(e.target.value);
+    const category = categoryData.find((b) => b.id === selectedId);
+    setSelectedCategory(category || null);
+    setValue("workCategoryId", selectedId);
+  };
+
+  const onSubmitForm = async ( data ) =>
+  {
+    setIsSubmitting(true)
     const updatedProject = { ...projects_Details };
     const finalData = {
       ...data,
@@ -142,13 +156,17 @@ const EditActivityModal = ({
           });
           resetForm();
           dispatch( refreshData( true ) );
+          setIsSubmitting(false)
           showToast("Activity Updated Successfully","success")
-
           onClose();
         }
       })
-      .catch((error) => {
+      .catch( ( error ) =>
-        showToast(error.message, "error");
+      {
+        setIsSubmitting(false)
+        const message = error.response.data.message || error.message || "Error Occured During Api Call"
+        showToast( message, "error" );
+        
       });
   };
 
@@ -161,6 +179,8 @@ const EditActivityModal = ({
   useEffect(() => {
     reset({
       activityID: workItem?.workItem?.activityId || workItem?.activityId || 0,
+      workCategoryId:
+        workItem?.workItem?.workCategoryId || workItem?.workCategoryId || 0,
       plannedWork:
         workItem?.workItem?.plannedWork || workItem?.plannedWork || 0,
       completedWork:
@@ -171,13 +191,12 @@ const EditActivityModal = ({
 
   const ISselectedActivity = watch("activityID");
   useEffect(() => {
-    if( ISselectedActivity ){
+    if (ISselectedActivity) {
       const selected = activities.find((a) => a.id === ISselectedActivity);
-      setSelectedActivity( selected || null );
+      setSelectedActivity(selected || null);
-      setActivityUnit(selected?.unitOfMeasurement)
+      setActivityUnit(selected?.unitOfMeasurement);
-  }
+    }
-  }, [ ISselectedActivity,activities] );
+  }, [ISselectedActivity, activities]);
-  
 
   return (
     <div className="modal-dialog modal-lg modal-simple modal-edit-user">
@@ -273,6 +292,45 @@ const EditActivityModal = ({
                 )}
               </div>
 
+              {/* Select Category */}
+              <div className="col-12 col-md-12">
+                <label className="form-label" htmlFor="activityID">
+                  Select Work Category
+                </label>
+                <select
+                  id="workCategoryId"
+                  className="form-select form-select-sm"
+                  {...register("workCategoryId")}
+                >
+                  {loading ? (
+                    <option value="">Loading...</option>
+                  ) : (
+                    <option disabled>Select Category</option>
+                  )}
+                  {categories &&
+                    categories.length > 0 &&
+                    categories
+                      .slice()
+                      .sort((a, b) =>
+                        (a.name || "").localeCompare(
+                          b.name || ""
+                        )
+                      )
+                      .map((category) => (
+                        <option key={category.id} value={category.id}>
+                          {category.name}
+                        </option>
+                      ))}
+                  {!loading && categories.length === 0 && (
+                    <option disabled>No categories available</option>
+                  )}
+                </select>
+
+                {errors.workCategoryId && (
+                  <p className="danger-text">{errors.workCategoryId.message}</p>
+                )}
+              </div>
+
               {/* Planned Work */}
               {/* {ISselectedActivity && ( */}
               <div className="col-5 col-md-5">
@@ -327,7 +385,7 @@ const EditActivityModal = ({
               {/* )} */}
 
               <div className="col-12 text-center">
-                <button type="submit" className="btn btn-sm btn-primary me-3" disabled={activities.length === 0}>
+                <button type="submit" className="btn btn-sm btn-primary me-3" disabled={activities.length === 0 || isSubmitting}>
                   {isSubmitting ? "Please Wait.." : "Edit Task"}
                 </button>
                 <button

src/components/Project/Infrastructure/Floor.jsx

@@ -13,10 +13,17 @@ const Floor = ({ floor, workAreas, forBuilding }) => {
           />
         ))
       ) : (
-        <tr>
+       <tr>
           <td colSpan="4" className="text-start table-cell">
-            <div className="row ps-2">
+               <div className="row ps-2">
-              <div className="col-6">
+                {/*         <div className="col-1 col-md-1 d-flex justify-content-between align-items-center " >
+                    <button
+              className="btn me-2"
+            >
+            </button>
+          
+          </div> */}
+              <div className="col-12  ps-8">
                 <div className="row">
                   <div className="col">
                     {" "}

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"),
+  buildingId: z
-  id: z.string().min(1, "Floor is required").optional(),
+    .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("buildingId", building.id, { shouldValidate: true }); // ✅ trigger validation
-      setValue("id", "0"); // Reset floorId when changing building
+      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({
+    reset({ floorName: "" });
-      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) => {
+                      .sort((a, b) =>
-                        const nameA = a.name || "";
+                        (a.name || "").localeCompare(b.name || "")
-                        const nameB = b.name || "";
+                      )
-                        return nameA?.localeCompare(nameB);
-                      })
                       .map((building) => (
                         <option key={building.id} value={building.id}>
                           {building.name}
                         </option>
                       ))}
-
                   {buildings?.length === 0 && (
                     <option disabled>No buildings found</option>
                   )}
@@ -162,63 +157,57 @@ const FloorModel = ({
               </div>
 
               {formData.buildingId !== "0" && (
-                <div className="col-12 col-md-12">
+                <>
-                  <label className="form-label">Select Floor</label>
+                  <div className="col-12 col-md-12">
-                  <select
+                    <label className="form-label">Select Floor</label>
-                    id="id"
+                    <select
-                    className="select2 form-select form-select-sm"
+                      id="id"
-                    aria-label="Select Floor"
+                      className="select2 form-select form-select-sm"
-                    {...register("id")}
+                      aria-label="Select Floor"
-                    onChange={handleFloorChange}
+                      {...register("id")}
-                  >
+                      onChange={handleFloorChange}
-                    <option value="0">Add New Floor</option>
+                    >
-                    {/* {selectedBuilding?.floors?.map((floor) => (
+                      <option value="0">Add New Floor</option>
-                      <option key={floor.id} value={floor.id}>
+                      {selectedBuilding?.floors?.length > 0 &&
-                        {floor.floorName}
+                        [...selectedBuilding.floors]
-                      </option>
+                          .filter((floor) => floor?.floorName)
-                    ) )} */}
+                          .sort((a, b) =>
-
+                            (a.floorName || "").localeCompare(
-                    {selectedBuilding &&
+                              b.floorName || ""
-                      selectedBuilding.floors?.length > 0 &&
+                            )
-                      [...selectedBuilding.floors]
+                          )
-                        .filter((floor) => floor?.floorName) 
+                          .map((floor) => (
-                        .sort((a, b) => {
+                            <option key={floor.id} value={floor.id}>
-                          const nameA = a.floorName || ""; 
+                              {floor.floorName}
-                          const nameB = b.floorName || "";
+                            </option>
-                          return nameA?.localeCompare(nameB);
+                          ))}
-                        })
+                      {selectedBuilding?.floors?.length === 0 && (
-                        .map((floor) => (
+                        <option disabled>No floors found</option>
-                          <option key={floor.id} value={floor.id}>
+                      )}
-                            {floor.floorName}
+                    </select>
-                          </option>
+                    {errors.id && (
-                        ))}
+                      <p className="text-danger">{errors.id.message}</p>
-
-                    {selectedBuilding?.floors?.length === 0 && (
-                      <option disabled>No floors found</option>
                     )}
-                  </select>
+                  </div>
-                  {errors.id && (
-                    <p className="text-danger">{errors.id.message}</p>
-                  )}
-                </div>
-              )}
 
-              {formData.buildingId !== "0" && (
+                  <div className="col-12 col-md-12">
-                <div className="col-12 col-md-12">
+                    <label className="form-label">
-                  <label className="form-label" >
+                      {formData.id !== "0" ? "Modify " : "Enter "} Floor Name
-                    {formData.id !== "0" ? "Modify " : "Enter "} Floor Name
+                    </label>
-                  </label>
+                    <input
-                  <input
+                      type="text"
-                    type="text"
+                      id="floorName"
-                    id="floorName"
+                      className="form-control form-control-sm me-2"
-                    className="form-control form-control-sm me-2"
+                      placeholder="Floor Name"
-                    placeholder="Floor Name"
+                      {...register("floorName")}
-                    {...register("floorName")}
+                    />
-                  />
+                    {errors.floorName && (
-                  {errors.floorName && (
+                      <p className="text-danger">
-                    <p className="text-danger">{errors.floorName.message}</p>
+                        {errors.floorName.message}
-                  )}
+                      </p>
-                </div>
+                    )}
+                  </div>
+                </>
               )}
 
               <div className="col-12 text-center">

src/components/Project/Infrastructure/InfraTable.jsx

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

src/components/Project/Infrastructure/TaskModel.jsx

@@ -2,23 +2,28 @@ import React, { useState, useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
-import  {useActivitiesMaster} from "../../../hooks/masterHook/useMaster";
+import {
+  useActivitiesMaster,
+  useWorkCategoriesMaster,
+} from "../../../hooks/masterHook/useMaster";
 
 const taskSchema = z.object({
   buildingID: z.string().min(1, "Building is required"),
   floorId: z.string().min(1, "Floor is required"),
   workAreaId: z.string().min(1, "Work Area is required"),
   activityID: z.string().min(1, "Activity is required"),
+  workCategoryId: z.string().min(1, "Work Category is required"),
   plannedWork: z.number().min(1, "Planned Work must be greater than 0"),
   completedWork: z.number().min(0, "Completed Work must be greater than 0"),
 });
 
 const defaultModel = {
   id: null,
-  buildingID:"0",
+  buildingID: "0",
   floorId: "0",
   workAreaId: "0",
   activityID: null,
+  workCategoryId: "",
   plannedWork: 0,
   completedWork: 0,
 };
@@ -30,15 +35,18 @@ const TaskModel = ({
   onClearComplete,
   onClose,
 }) => {
-
   const [formData, setFormData] = useState(defaultModel);
   const [selectedBuilding, setSelectedBuilding] = useState(null);
   const [selectedFloor, setSelectedFloor] = useState(null);
   const [selectedWorkArea, setSelectedWorkArea] = useState(null);
   const [selectedActivity, setSelectedActivity] = useState(null);
+  const [selectedCategory, setSelectedCategory] = useState(null);
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [activityData, setActivityData] = useState([]);
-  const {activities, loading, error} = useActivitiesMaster();
+  const [categoryData, setCategoryData] = useState([]);
+  const { activities, loading, error } = useActivitiesMaster();
+  const { categories, categoryLoading, categoryError } =
+    useWorkCategoriesMaster();
 
   const {
     register,
@@ -79,6 +87,7 @@ const TaskModel = ({
       floorId: value,
       workAreaId: 0,
       activityID: 0,
+      workCategoryId: categoryData?.[0]?.id?.toString() ?? "",
     }));
   };
 
@@ -104,13 +113,24 @@ const TaskModel = ({
     }));
   };
 
-  const onSubmitForm = async ( data ) =>
+  const handleCategoryChange = (e) => {
-  {
+    const { value } = e.target;
+    const category = categoryData.find((b) => b.id === String(value));
+    setSelectedCategory(category);
+    reset((prev) => ({
+      ...prev,
+      workCategoryId: String(value),
+    }));
+  };
+
+  const onSubmitForm = async (data) => {
+    console.log(data);
     setIsSubmitting(true);
     await onSubmit(data);
     setValue("plannedWork", 0);
-    setValue( "completedWork", 0 );
+    setValue("completedWork", 0);
-    setValue("activityID",0)
+    setValue("activityID", 0);
+    setValue("workCategoryId", categoryData?.[0]?.id?.toString() ?? "");
     setIsSubmitting(false);
   };
 
@@ -120,15 +140,32 @@ const TaskModel = ({
     setSelectedFloor(null);
     setSelectedWorkArea(null);
     setSelectedActivity(null);
+    setSelectedCategory(categoryData?.[0]?.id?.toString() ?? "");
     reset(defaultModel);
   };
 
   useEffect(() => {
     if (!loading && Array.isArray(activities) && activities.length > 0) {
-     
       setActivityData(activities);
     }
   }, [activities, loading]);
+
+  useEffect(() => {
+    if (
+      !categoryLoading &&
+      Array.isArray(categories) &&
+      categories.length > 0
+    ) {
+      const newCategories = categories?.slice()?.sort((a, b) => {
+        const nameA = a?.name || "";
+        const nameB = b?.name || "";
+        return nameA.localeCompare(nameB);
+      });
+      setCategoryData(newCategories);
+      setSelectedCategory(newCategories[0])
+    }
+  }, [categories, categoryLoading]);
+
   return (
     <div className="modal-dialog modal-lg modal-simple modal-edit-user">
       <div className="modal-content">
@@ -247,9 +284,7 @@ const TaskModel = ({
 
               {selectedWorkArea && (
                 <div className="col-12 col-md-12">
-                  <label className="form-label" >
+                  <label className="form-label">Select Activity</label>
-                    Select Activity
-                  </label>
                   <select
                     id="activityID"
                     className="form-select form-select-sm"
@@ -257,28 +292,25 @@ const TaskModel = ({
                     onChange={handleActivityChange}
                   >
                     <option value="0">Select Activity</option>
-                    {activityData && activityData.length > 0 &&  (
+                    {activityData &&
+                      activityData.length > 0 &&
                       activityData
                         ?.slice()
-                        ?.sort( ( a, b ) =>
+                        ?.sort((a, b) => {
-                        {
                           const nameA = a?.activityName || "";
                           const nameB = b?.activityName || "";
-                          return nameA.localeCompare( nameB );
+                          return nameA.localeCompare(nameB);
-                        } )
+                        })
-                        ?.map( ( activity ) => (
+                        ?.map((activity) => (
                           <option key={activity.id} value={activity.id}>
-                            {
+                            {activity.activityName ||
-                              activity.activityName ||
+                              `Unnamed (id: ${activity.id})`}
-                             
-                              `Unnamed (id: ${ activity.id })`}
                           </option>
-                        ) )
+                        ))}
-                    ) }
+                    {!loading && activities.length === 0 && (
-                    {(!loading && activities.length === 0 )&& (
                       <option disabled>No activities available</option>
                     )}
-                    {loading && ( <option disabled>Loading...</option>)}
+                    {loading && <option disabled>Loading...</option>}
                   </select>
 
                   {errors.activityID && (
@@ -287,7 +319,38 @@ const TaskModel = ({
                 </div>
               )}
 
-              {selectedActivity && (
+              {selectedWorkArea && (
+                <div className="col-12 col-md-12">
+                  <label className="form-label">Select Work Category</label>
+                  <select
+                    id="workCategoryId"
+                    className="form-select form-select-sm"
+                    {...register("workCategoryId")}
+                    onChange={handleCategoryChange}
+                  >
+                    {categoryData &&
+                      categoryData.length > 0 &&
+                      categoryData
+                        ?.map((category) => (
+                          <option key={category.id} value={category.id}>
+                            {category.name || `Unnamed (id: ${category.id})`}
+                          </option>
+                        ))}
+                    {!categoryLoading && categories.length === 0 && (
+                      <option disabled>No activities available</option>
+                    )}
+                    {categoryLoading && <option disabled>Loading...</option>}
+                  </select>
+
+                  {errors.workCategoryId && (
+                    <p className="danger-text">
+                      {errors.workCategoryId.message}
+                    </p>
+                  )}
+                </div>
+              )}
+
+              {selectedActivity && selectedCategory && (
                 <div className="col-5 col-md-5">
                   <label className="form-label" htmlFor="plannedWork">
                     {formData.id !== "0" ? "Modify " : "Enter "} Planned Work
@@ -304,7 +367,7 @@ const TaskModel = ({
                 </div>
               )}
 
-              {selectedActivity && (
+              {selectedActivity && selectedCategory && (
                 <div className="col-5 col-md-5">
                   <label className="form-label" htmlFor="completedWork">
                     {formData.id !== "0" ? "Modify " : "Enter "} Completed Work
@@ -324,7 +387,7 @@ const TaskModel = ({
               )}
 
               {/* Unit */}
-              {selectedActivity && (
+              {selectedActivity && selectedCategory && (
                 <div className="col-2 col-md-2">
                   <label className="form-label" htmlFor="unit">
                     Unit
@@ -340,9 +403,7 @@ const TaskModel = ({
 
               <div className="col-12 text-center">
                 <button type="submit" className="btn btn-sm btn-primary me-3">
-                  {isSubmitting
+                  {isSubmitting ? "Please Wait.." : "Add Task"}
-                    ? "Please Wait.."
-                    : "Add Task"}
                 </button>
                 <button
                   type="button"

src/components/Project/Infrastructure/WorkArea.jsx

@@ -2,34 +2,40 @@ import React, { useEffect, useState } from "react";
 import WorkItem from "./WorkItem";
 import { useProjectDetails } from "../../../hooks/useProjects";
 import { cacheData, getCachedData } from "../../../slices/apiDataManager";
-import {useDispatch} from "react-redux";
+import { useDispatch } from "react-redux";
-import {refreshData} from "../../../slices/localVariablesSlice";
+import { refreshData } from "../../../slices/localVariablesSlice";
 import ProjectRepository from "../../../repositories/ProjectRepository";
 import showToast from "../../../services/toastService";
+import {useHasUserPermission} from "../../../hooks/useHasUserPermission";
+import {ASSIGN_REPORT_TASK, MANAGE_PROJECT_INFRA, MANAGE_TASK} from "../../../utils/constants";
+import {useParams} from "react-router-dom";
 
 const WorkArea = ({ workArea, floor, forBuilding }) => {
-  const [ workItems, setWorkItems ] = useState( [] );
+  const [workItems, setWorkItems] = useState([]);
-  const dispatch = useDispatch()
+  const dispatch = useDispatch();
-  const [Project,setProject] = useState()
+  const [ Project, setProject ] = useState();
+  const {projectId} = useParams();
+ 
+    const ManageTasks = useHasUserPermission(MANAGE_TASK);
+    const ManageInfra = useHasUserPermission(MANAGE_PROJECT_INFRA);
+  const ManageAndAssignTak = useHasUserPermission( ASSIGN_REPORT_TASK );
   
 
   useEffect(() => {
-    const project = getCachedData( "projectInfo" );
+    const project = getCachedData("projectInfo");
-    setProject(project)
+    setProject(project);
 
     if (!project || !forBuilding?.id || !floor?.id || !workArea?.id) return;
     const building = project.buildings?.find((b) => b.id === forBuilding.id);
     const floors = building?.floors?.find((f) => f.id === floor.id);
     const workAreas = floor?.workAreas?.find((wa) => wa.id === workArea.id);
     setWorkItems(workAreas?.workItems || []);
-  }, [ workArea, floor, floor ] );
+  }, [workArea, floor, floor]);
 
-    const HanldeDeleteActivity = async (workItemId) => {
+  const HanldeDeleteActivity = async (workItemId) => {
-
+    try {
-    try
-    {
       const updatedProject = { ...Project.data };
-      const response = await ProjectRepository.deleteProjectTask( workItemId);
+      const response = await ProjectRepository.deleteProjectTask(workItemId);
       const newProject = {
         ...updatedProject,
         buildings: updatedProject?.buildings.map((building) =>
@@ -63,103 +69,162 @@ const WorkArea = ({ workArea, floor, forBuilding }) => {
       cacheData("projectInfo", {
         projectId: newProject.id,
         data: newProject,
-      } );
+      });
 
       dispatch(refreshData(true));
 
-   
       showToast("Activity Deleted Successfully", "success");
     } catch (error) {
       const message =
         error.response?.data?.message ||
         error.message ||
         "An unexpected error occurred";
-           showToast(message, "error");
+      showToast(message, "error");
     }
   };
 
+  useEffect(() => {
+    const toggleButtons = document.querySelectorAll(".accordion-button");
+
+    toggleButtons.forEach((btn) => {
+      const icon = btn.querySelector(".toggle-icon");
+
+      btn.addEventListener("click", () => {
+        setTimeout(() => {
+          if (btn.classList.contains("collapsed")) {
+            icon.classList.remove("bx-minus-circle");
+            icon.classList.add("bx-plus-circle");
+          } else {
+            icon.classList.remove("bx-plus-circle");
+            icon.classList.add("bx-minus-circle");
+          }
+        }, 300); // allow Bootstrap collapse to complete
+      });
+    });
+
+    return () => {
+      toggleButtons.forEach((btn) => {
+        btn.removeEventListener("click", () => {});
+      });
+    };
+  }, []);
+
   return (
     <React.Fragment key={workArea.id}>
       <tr>
-        <td colSpan="4" className="text-start table-cell">
+        <td colSpan="4" className="p-0">
-          <div className="row ps-2">
+          <div
-            <div className="col-6">
+            className="accordion border-none"
-              <div className="row">
+            id={`accordion-${workArea.id}`}
-                <div className="col">
+          >
-                  {" "}
+            <div className="accordion-item background border-0">
-                  <span className="fw-semibold text-primary">
+              {/* Accordion Header */}
-                    Floor:&nbsp;
+              <p
-                  </span>{" "}
+                className="accordion-header mb-0"
-                  <span className="fw-normal text-darkgreen">
+                id={`heading-${workArea.id}`}
-                    {floor.floorName}
+              >
-                  </span>
+                <button
+                  className={`accordion-button text-start px-2 py-2 custom-accordion-btn ${
+                    workItems && workItems.length > 0 ? "collapsed" : "disabled"
+                  }`}
+                  type="button"
+                  data-bs-toggle={
+                    workItems && workItems.length > 0 ? "collapse" : ""
+                  }
+                  data-bs-target={
+                    workItems && workItems.length > 0
+                      ? `#collapse-${workArea.id}`
+                      : undefined
+                  }
+                  aria-expanded="false"
+                  aria-controls={`collapse-${workArea.id}`}
+                  disabled={!(workItems && workItems.length > 0)}
+                >
+                  <i
+                    className={`bx me-2 toggle-icon ${
+                      workItems && workItems.length > 0
+                        ? "bx-plus-circle"
+                        : "bx-block"
+                    }`}
+                    style={{
+                      fontSize: "1.2rem",
+                      color:
+                        workItems && workItems.length > 0 ? "" : "transparent",
+                    }}
+                  ></i>
+
+                  <div className="d-flex justify-content-start gap-12">
+                    <div className="d-flex">
+                      <span className="fw-semibold small">Floor:&nbsp;</span>
+                      <span className="fw-normal text-darkgreen small">
+                        {floor.floorName}
+                      </span>
+                    </div>
+                    <div className="text-start ">
+                      <span className="fw-semibold text-primary small">
+                        Work Area:&nbsp;
+                      </span>
+                      <span className="fw-normal text-darkgreen small">
+                        {workArea.areaName}
+                      </span>
+                    </div>
+                  </div>
+                </button>
+              </p>
+
+              {/* Accordion Body */}
+              {workItems && workItems.length > 0 && (
+                <div
+                  id={`collapse-${workArea.id}`}
+                  className="accordion-collapse collapse"
+                  aria-labelledby={`heading-${workArea.id}`}
+                >
+                  <div className="accordion-body px-1">
+                    <table className="table table-sm mx-1">
+                      <thead>
+                        <tr>
+                          <th className="infra-activity-table-header-first">
+                            Activity
+                          </th>
+                          <th className="infra-activity-table-header d-sm-table-cell d-md-none">
+                            Status
+                          </th>
+                          <th className="infra-activity-table-header d-none d-md-table-cell">
+                            Category
+                          </th>
+                          <th className="infra-activity-table-header d-none d-md-table-cell">
+                            Completed/Planned
+                          </th>
+                          <th className="infra-activity-table-header">
+                            Progress
+                          </th>
+                          {( ManageInfra || ( !projectId && ManageAndAssignTak  ) ) && (
+                            <th className="infra-activity-table-header text-end">
+                              <span className="px-2">Actions</span>
+                            </th>
+                          )}
+                        </tr>
+                      </thead>
+                      <tbody className="table-border-bottom-0">
+                        {workArea.workItems.map((workItem) => (
+                          <WorkItem
+                            key={workItem.workItemId}
+                            workItem={workItem}
+                            forBuilding={forBuilding}
+                            forFloor={floor}
+                            forWorkArea={workArea}
+                            deleteHandleTask={HanldeDeleteActivity}
+                          />
+                        ))}
+                      </tbody>
+                    </table>
+                  </div>
                 </div>
-                <div className="col">
+              )}
-                  <span className="ms-10 fw-semibold text-primary">
-                    Work Area:&nbsp;
-                  </span>{" "}
-                  <span className=" fw-normal text-darkgreen">
-                    {workArea.areaName}
-                  </span>
-                </div>
-              </div>
             </div>
           </div>
         </td>
       </tr>
-
-      {workItems && workItems.length > 0 && (
-        <tr className="overflow-auto">
-          <td colSpan={4}>
-            <table className="table mx-1">
-              <thead>
-                <tr>
-                  <th className="infra-activity-table-header-first">
-                    Activity
-                  </th>
-                  {/* for mobile view */}
-                  <th className="infra-activity-table-header d-sm-none d-sm-table-cell">
-                    Status
-                  </th>
-                  {/* for greather than mobile view ************* */}
-                  <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
-                  </th>
-                  {/* ************************** */}
-                  <th className="infra-activity-table-header">Progress</th>
-                  <th className="infra-activity-table-header text-end ">
-                       <span className="px-3">Actions</span>
-                  </th>
-                </tr>
-              </thead>
-              <tbody className="table-border-bottom-0">
-                {workArea?.workItems && workArea.workItems.length > 0 ? (
-                  workArea.workItems.map((workItem) => (
-                    <WorkItem
-                      key={workItem.workItemId}
-                      workItem={workItem}
-                      forBuilding={forBuilding}
-                      forFloor={floor}
-                      forWorkArea={workArea}
-                      deleteHandleTask={HanldeDeleteActivity}
-                    />
-                  ))
-                ) : (
-                  <tr>
-                    <td colSpan="4" className="text-center">
-                      No Data
-                    </td>
-                  </tr>
-                )}
-              </tbody>
-            </table>
-          </td>
-        </tr>
-      )}
-      {!workItems && <p>No item</p>}
     </React.Fragment>
   );
 };

src/components/Project/Infrastructure/WorkItem.jsx

@@ -3,8 +3,11 @@ import AssignRoleModel from "../AssignRole";
 import { useParams } from "react-router-dom";
 import EditActivityModal from "./EditActivityModal";
 import { useHasUserPermission } from "../../../hooks/useHasUserPermission";
-import { MANAGE_PROJECT_INFRA, MANAGE_TASK } from "../../../utils/constants";
+import {
-
+  ASSIGN_REPORT_TASK,
+  MANAGE_PROJECT_INFRA,
+  MANAGE_TASK,
+} from "../../../utils/constants";
 import ConfirmModal from "../../common/ConfirmModal";
 import ProjectRepository from "../../../repositories/ProjectRepository";
 import { useProjectDetails } from "../../../hooks/useProjects";
@@ -17,7 +20,7 @@ import {
 import { useDispatch } from "react-redux";
 import { refreshData } from "../../../slices/localVariablesSlice";
 
-const WorkItem = ( {
+const WorkItem = ({
   key,
   workItem,
   forBuilding,
@@ -33,6 +36,7 @@ const WorkItem = ( {
   const [showModal2, setShowModal2] = useState(false);
   const ManageTasks = useHasUserPermission(MANAGE_TASK);
   const ManageInfra = useHasUserPermission(MANAGE_PROJECT_INFRA);
+  const ManageAndAssignTak = useHasUserPermission(ASSIGN_REPORT_TASK);
   const [loadingDelete, setLoadingDelete] = useState(false);
   const project = getCachedData("projectInfo");
   const dispatch = useDispatch();
@@ -74,10 +78,9 @@ const WorkItem = ( {
   const handleSubmit = async () => {
     setLoadingDelete(true);
     let WorkItemId = workItem.workItemId || workItem.id;
-    deleteHandleTask( WorkItemId );
+    deleteHandleTask(WorkItemId);
     setLoadingDelete(false);
     closeModalDelete();
-  
   };
 
   const PlannedWork =
@@ -139,6 +142,7 @@ const WorkItem = ( {
       )}
 
       <tr key={key}>
+        {/* Activity Name - always visible */}
         <td className="text-start table-cell-small">
           <i className="bx bx-right-arrow-alt"></i>
           <span className="fw-light">
@@ -148,8 +152,9 @@ const WorkItem = ( {
               : "NA"}
           </span>
         </td>
-        {/* for mobile view */}
+
-        <td className="text-center d-sm-none d-sm-table-cell">
+        {/* Status - visible only on small screens */}
+        <td className="text-center d-sm-table-cell d-md-none">
           {hasWorkItem
             ? NewWorkItem?.workItem?.completedWork ??
               workItem?.completedWork ??
@@ -160,22 +165,34 @@ const WorkItem = ( {
             ? NewWorkItem?.workItem?.plannedWork || workItem?.plannedWork
             : "NA"}
         </td>
-        {/* for greather than mobile view ************* */}
+
+        {/* Category - visible on medium and above */}
+        <td className="text-center table-cell-small d-none d-md-table-cell">
+          <span className="fw-light">
+            {hasWorkItem
+              ? NewWorkItem?.workItem?.workCategoryMaster?.name ||
+                workItem.workCategoryMaster?.name ||
+                "NA"
+              : "NA"}
+          </span>
+        </td>
+
         <td className="text-center d-none d-md-table-cell">
           {hasWorkItem
-            ? NewWorkItem?.workItem?.plannedWork ??
+            ? `${
-              workItem?.plannedWork ??
+                NewWorkItem?.workItem?.completedWork ??
-              "NA"
+                workItem?.completedWork ??
+                "0"
+              }/${
+                NewWorkItem?.workItem?.plannedWork ??
+                workItem?.plannedWork ??
+                "0"
+              }`
             : "NA"}
         </td>
-        <td className="text-center d-none d-md-table-cell">
+
-          {hasWorkItem
+        {/* Progress Bar - always visible */}
-            ? NewWorkItem?.workItem?.completedWork ??
+        <td className="text-center " style={{ width: "15%" }}>
-              workItem?.completedWork ??
-              "NA"
-            : "NA"}
-        </td>
-        <td className="text-center" style={{ width: "15%" }}>
           <div className="progress p-0">
             <div
               className="progress-bar"
@@ -188,7 +205,9 @@ const WorkItem = ( {
                 ),
                 height: "5px",
               }}
-              aria-valuenow={NewWorkItem?.workItem?.completedWor}
+              aria-valuenow={
+                NewWorkItem?.workItem?.completedWork ?? workItem?.completedWork
+              }
               aria-valuemin="0"
               aria-valuemax={
                 hasWorkItem
@@ -198,66 +217,92 @@ const WorkItem = ( {
             ></div>
           </div>
         </td>
-        <td className="text-end align-middle">
+
-          <div className="dropdown w-auto d-inline-flex align-items-center gap-1">
+        {/* Actions - always visible */}
-            {/* Reserve space for Assign button */}
+        {(ManageInfra ||
-            <div style={{ width: "auto", minWidth: "60px" }}>
+          (!projectId &&
-              {!projectId && ManageTasks && PlannedWork !== CompletedWork ? (
+            ManageAndAssignTak &&
-                <button
+            PlannedWork !== CompletedWork)) && (
-                  aria-label="Modify"
+          <td className="text-end align-items-middle border-top">
-                  type="button"
+            {/* Desktop (md and up): inline icons */}
-                  className="btn p-0"
+            <div className="d-none d-md-flex justify-content-end gap-1 px-2">
-                  data-bs-toggle="modal"
+              {!projectId &&
-                  data-bs-target="#project-modal"
+                ManageAndAssignTak &&
-                  onClick={openModal}
+                PlannedWork !== CompletedWork && (
-                >
+                  <i
-                  <span className="badge badge-md bg-label-primary me-1">
+                    className="bx bx-user-plus text-primary cursor-pointer"
-                    Assign
+                    title="Assign"
-                  </span>
+                    onClick={openModal}
-                </button>
+                    role="button"
-              ) : (
+                  ></i>
-                // Hidden placeholder to preserve layout
+                )}
-                <span className="invisible">
+
-                  <span className="badge badge-md bg-label-primary me-1">
+              {ManageInfra && (
-                    Assign
+                <>
-                  </span>
+                  <i
-                </span>
+                    className="bx bxs-edit text-secondary cursor-pointer"
+                    title="Edit"
+                    onClick={showModal1}
+                    role="button"
+                  ></i>
+                  <i
+                    className="bx bx-trash text-danger cursor-pointer"
+                    title="Delete"
+                    onClick={showModalDelete}
+                    role="button"
+                  ></i>
+                </>
               )}
             </div>
 
-            {/* Edit and Delete buttons */}
+            {/* Mobile (sm only): dropdown with icons */}
-            {ManageInfra && (
+            <div className="dropdown d-md-none text-center">
-              <>
+              <i
-                <button
+                className="bx bx-dots-vertical-rounded"
-                  aria-label="Modify"
+                role="button"
-                  type="button"
+                data-bs-toggle="dropdown"
-                  className="btn p-0"
+                aria-expanded="false"
-                  onClick={showModal1}
+                title="Actions"
-                >
+              ></i>
-                  <i
+
-                    className="bx bxs-edit me-2 text-primary"
+              <ul className="dropdown-menu dropdown-menu-start">
-                    data-bs-toggle="tooltip"
+                {!projectId &&
-                    data-bs-placement="top"
+                  ManageAndAssignTak &&
-                    title="Edit Activity"
+                  PlannedWork !== CompletedWork && (
-                  ></i>
+                    <li>
-                </button>
+                      <a
-                <button
+                        className="dropdown-item d-flex align-items-center"
-                  aria-label="Delete"
+                        onClick={openModal}
-                  type="button"
+                      >
-                  className="btn p-0"
+                        <i className="bx bx-user-plus text-primary me-2"></i>{" "}
-                  onClick={showModalDelete}
+                        Assign
-                >
+                      </a>
-                  <i
+                    </li>
-                    className="bx bx-trash me-1 text-danger"
+                  )}
-                    data-bs-toggle="tooltip"
+                {ManageInfra && (
-                    data-bs-placement="top"
+                  <>
-                    title="Delete Activity"
+                    <li>
-                  ></i>
+                      <a
-                </button>
+                        className="dropdown-item d-flex align-items-center"
-              </>
+                        onClick={showModal1}
-            )}
+                      >
-          </div>
+                        <i className="bx bxs-edit text-secondary me-2"></i> Edit
-        </td>
+                      </a>
+                    </li>
+                    <li>
+                      <a
+                        className="dropdown-item d-flex align-items-center"
+                        onClick={showModalDelete}
+                      >
+                        <i className="bx bx-trash text-danger me-2"></i> Delete
+                      </a>
+                    </li>
+                  </>
+                )}
+              </ul>
+            </div>
+          </td>
+        )}
       </tr>
     </>
   );

src/components/Project/ManageProjectInfo.jsx

@@ -102,12 +102,20 @@ const ManageProjectInfo = ({ project, handleSubmitForm, onClose }) => {
   const onSubmitForm = (updatedProject) => {
     setLoading(true);
     handleSubmitForm( updatedProject, setLoading,reset );
-   
-
-
   }; 	
 
-
+  const handleCancel = () => {
+    reset({
+      id: project?.id || "",
+      name: project?.name || "",
+      contactPerson: project?.contactPerson || "",
+      projectAddress: project?.projectAddress || "",
+      startDate: formatDate(project?.startDate) || currentDate,
+      endDate: formatDate(project?.endDate) || currentDate,
+      projectStatusId: String(project?.projectStatusId || "00000000-0000-0000-0000-000000000000"),
+    });
+    onClose();
+  };
 
   return (
     <div
@@ -119,7 +127,7 @@ const ManageProjectInfo = ({ project, handleSubmitForm, onClose }) => {
           <button
             type="button"
             className="btn-close"
-            onClick={onClose}
+            onClick={handleCancel}
             aria-label="Close"
           ></button>
           <div className="text-center mb-2">
@@ -280,7 +288,7 @@ const ManageProjectInfo = ({ project, handleSubmitForm, onClose }) => {
               <button
                 type="button"
                 className="btn btn-sm btn-label-secondary"
-                onClick={onClose}
+                onClick={handleCancel}
                 aria-label="Close"
               >
                 Cancel

src/components/Project/MapUsers.jsx

@@ -14,9 +14,13 @@ const MapUsers = ({
   assignedLoading,
   setAssignedLoading,
 }) => {
-  const { employeesList, loading: employeeLoading, error } = useAllEmployees(false);
+  const {
+    employeesList,
+    loading: employeeLoading,
+    error,
+  } = useAllEmployees(false);
   const [selectedEmployees, setSelectedEmployees] = useState([]);
-  const [ searchText, setSearchText ] = useState( "" );
+  const [searchText, setSearchText] = useState("");
 
   const handleAllocationData = Array.isArray(allocation) ? allocation : [];
 
@@ -96,9 +100,8 @@ const MapUsers = ({
     });
   };
 
-  const handleSubmit = () =>
+  const handleSubmit = () => {
-  {
+    setAssignedLoading(true);
-    setAssignedLoading(true)
     const selected = selectedEmployees
       .filter((emp) => emp.isSelected)
       .map((emp) => ({ empID: emp.id, jobRoleId: emp.jobRoleId }));
@@ -108,27 +111,33 @@ const MapUsers = ({
     } else {
       showToast("Please select Employee", "error");
     }
-
   };
   return (
     <>
       <div className="modal-dialog modal-dialog-scrollable mx-sm-auto mx-1 modal-lg modal-simple modal-edit-user">
         <div className="modal-content">
-          <div className="modal-header">
+          <div className="modal-header text-center">
-            <div className="md-2 mb-1">
+            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
-              {(filteredData.length > 0 ||
+          </button>
-                  allocationEmployeesData.length > 0)&& (
-                  <div className="input-group">
-                    <input
-                      type="search"
-                      className="form-control form-control-sm"
-                      placeholder="Search employees..."
-                      onChange={(e) => setSearchQuery(e.target.value)}
-                    />
-                  </div>
-                )}
-            </div>
           </div>
+          <p className="m-0 fw-semibold fs-5">Assign Employee</p>
+
+          <div className="px-4 mt-4 col-md-4 text-start">
+            {(filteredData.length > 0 ||
+              allocationEmployeesData.length > 0) && (
+              <div className="input-group input-group-sm mb-2">
+                <input
+                  type="search"
+                  className="form-control"
+                  placeholder="Search employees..."
+                  onChange={(e) => setSearchQuery(e.target.value)}
+                />
+              </div>
+            )}
+
+            <p className="mb-0 small text-muted fw-semibold">Select Employee</p>
+          </div>
+
           <div className="modal-body p-sm-4 p-0">
             <table
               className="datatables-users table border-top dataTable no-footer dtr-column "
@@ -136,21 +145,28 @@ const MapUsers = ({
               aria-describedby="DataTables_Table_0_info"
               style={{ width: "100%" }}
             >
-              <thead></thead>
               <tbody>
                 {employeeLoading && allocationEmployeesData.length === 0 && (
-                  <p>Loading...</p>
+                  <tr>
+                    <td>Loading..</td>
+                  </tr>
                 )}
 
                 {!employeeLoading &&
                   allocationEmployeesData.length === 0 &&
                   filteredData.length === 0 && (
-                    <p>All employee assigned to Project.</p>
+                    <tr>
+                      <td>All employee assigned to Project.</td>
+                    </tr>
                   )}
 
-                {!employeeLoading && allocationEmployeesData.length > 0 && filteredData.length === 0 && (
+                {!employeeLoading &&
-                  <p>No matching employees found.</p>
+                  allocationEmployeesData.length > 0 &&
-                )}
+                  filteredData.length === 0 && (
+                    <tr>
+                      <td>No matching employees found.</td>
+                    </tr>
+                  )}
 
                 {(filteredData.length > 0 ||
                   allocationEmployeesData.length > 0) &&
@@ -169,14 +185,11 @@ const MapUsers = ({
           </div>
           <div className="modal-footer">
             {(filteredData.length > 0 ||
-                  allocationEmployeesData.length > 0) && (
+              allocationEmployeesData.length > 0) && (
-                <button
+              <button className="btn btn-sm btn-success" onClick={handleSubmit}>
-                  className="btn btn-sm btn-success"
+                {assignedLoading ? "Please Wait..." : "Assign to Project"}
-                  onClick={handleSubmit}
+              </button>
-                >
+            )}
-                  {assignedLoading ? "Please Wait...":"Assign to Project"}
-                </button>
-              )}
 
             <button
               type="button"

src/components/Project/Teams.jsx

@@ -16,7 +16,7 @@ import ConfirmModal from "../common/ConfirmModal";
 
 const Teams = ({ project }) => {
   const dispatch = useDispatch();
-  dispatch(changeMaster("Job Role"));
+
   const { data, loading } = useMaster();
   const [isModalOpen, setIsModelOpen] = useState(false);
   const [error, setError] = useState("");
@@ -43,11 +43,9 @@ const Teams = ({ project }) => {
         .then((response) => {
           setEmployees(response.data);
           setFilteredEmployees( response.data.filter( ( emp ) => emp.isActive ) );
-          console.log(response)
           setEmployeeLoading(false);
         })
         .catch((error) => {
-          console.error(error);
           setError("Failed to fetch data.");
           setEmployeeLoading(false);
         });
@@ -133,6 +131,11 @@ const Teams = ({ project }) => {
     document.body.style.overflow = "auto";
   };
 
+  useEffect(() => {
+  dispatch(changeMaster("Job Role"));
+}, [dispatch]);
+
+
   useEffect(() => {
     fetchEmployees();
   }, []);

src/components/common/DatePicker.jsx

@@ -23,9 +23,9 @@ const DatePicker = ({ onDateChange }) => {
   return (
     <div className="container mt-3">
       <div className="mb-3">
-        <label htmlFor="flatpickr-single" className="form-label">
+        {/* <label htmlFor="flatpickr-single" className="form-label">
           Select Date
-        </label>
+        </label> */}
         <input
           type="text"
           id="flatpickr-single"

src/components/common/DateRangePicker.jsx

@@ -1,16 +1,20 @@
 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, {
       mode: "range",
-      dateFormat: "Y-m-d",
+      dateFormat: "Y-m-d",           // Format for backend (actual input value)
+      altInput: true,                // Enables a visually different field
+      altFormat: "d-m-Y",
       defaultDate: [fifteenDaysAgo, today],
       static: true,
       clickOpens: true,

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" 

src/components/master/CreateRole.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useRef } from "react";
 import { useFeatures } from "../../hooks/useMasterRole";
 
 import { useForm } from 'react-hook-form';
@@ -16,7 +16,7 @@ import showToast from "../../services/toastService";
 const schema = z.object({
   role: z.string().min(1, { message: "Role is required" }),
   description: z.string().min(1, { message: "Description is required" })
-  .max(255, { message: "Description cannot exceed 255 characters" }),
+    .max(255, { message: "Description cannot exceed 255 characters" }),
 
   selectedPermissions: z
     .array(z.string())
@@ -24,78 +24,94 @@ const schema = z.object({
 });
 
 
-const CreateRole = ({modalType,onClose}) => {
 
- const[isLoading,setIsLoading] = useState(false)
 
- const {masterFeatures} = useFeatures()
+const CreateRole = ({ modalType, onClose }) => {
 
- const {
+  const [isLoading, setIsLoading] = useState(false)
-  register,
-  handleSubmit,
-  formState: { errors },
 
-} = useForm({
+  const popoverRefs = useRef([]);
-  resolver: zodResolver(schema),
+  const { masterFeatures } = useFeatures()
-  defaultValues: {
+
-    role: "",
+  const {
-    description: "",
+    register,
-    selectedPermissions: [],
+    handleSubmit,
-  },
+    formState: { errors },
-});
+
+  } = useForm({
+    resolver: zodResolver(schema),
+    defaultValues: {
+      role: "",
+      description: "",
+      selectedPermissions: [],
+    },
+  });
+
+  const onSubmit = (values) => {
+    setIsLoading(true)
+    const result = {
+
+      role: values.role,
+      description: values.description,
+      featuresPermission: values.selectedPermissions.map((id) => ({
+        id,
+        isEnabled: true,
+      })),
+    };
+
+    MasterRespository.createRole(result).then((resp) => {
+      setIsLoading(false)
+      const cachedData = getCachedData("Application Role");
+      const updatedData = [...cachedData, resp.data];
+      cacheData("Application Role", updatedData);
+      showToast("Application Role Added successfully.", "success");
+      onClose()
+    }).catch((err) => {
+
+      showToast(err?.response?.data?.message, "error");
+      setIsLoading(false)
+      onClose()
+    })
 
-const onSubmit = (values) => {
-  setIsLoading(true)
-  const result = {
 
-    role: values.role,
-    description: values.description,
-    featuresPermission: values.selectedPermissions.map((id) => ({
-      id,
-      isEnabled: true,
-    })),
   };
-
+  const [descriptionLength, setDescriptionLength] = useState(0);
-  MasterRespository.createRole(result).then((resp)=>{
+  const maxDescriptionLength = 255;
-    setIsLoading(false)
+  useEffect(() => {
-    const cachedData = getCachedData( "Application Role" ); 
+    setDescriptionLength(0);
-    const updatedData = [...cachedData, resp.data]; 
+  }, []);
-    cacheData("Application Role", updatedData); 
+  useEffect(() => {
-    showToast( "Application Role Added successfully.", "success" );  
+    popoverRefs.current.forEach((el) => {
-    onClose()
+      if (el) {
-  } ).catch( ( err ) =>
+        new bootstrap.Popover(el, {
-  {
+          trigger: "focus",
-   
+          placement: "right",
-    showToast(err?.response?.data?.message, "error");
+          html: true,
-    setIsLoading( false )
+          content: el.getAttribute("data-bs-content"), // use inline content from attribute
-    onClose()
+        });
-  })
+      }
- 
+    });
- 
+  }, [masterFeatures]);
-};
-const [descriptionLength, setDescriptionLength] = useState(0);
-const maxDescriptionLength = 255;
-useEffect(() => {
-  setDescriptionLength(0);  
-}, []);
-
 
   return (
 
-    <form  className="row g-2" onSubmit={handleSubmit(onSubmit)}>
+    <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 className="col-12 col-md-12">
+      </div>
-          <label className="form-label">Role</label>
+      <div className="col-12 col-md-12">
-          <input type="text" 
+        <label className="form-label">Role</label>
-           {...register("role")} 
+        <input type="text"
-             className={`form-control ${errors.role ? 'is-invalids' : ''}`}
+          {...register("role")}
-          />
+          className={`form-control ${errors.role ? 'is-invalids' : ''}`}
-          {errors.role && <p className="text-danger">{errors.role.message}</p>}
+        />
-        </div>
+        {errors.role && <p className="text-danger">{errors.role.message}</p>}
+      </div>
 
 
-        <div className="col-12 col-md-12">
+      <div className="col-12 col-md-12">
-          <label className="form-label" htmlFor="description">Description</label>
+        <label className="form-label" htmlFor="description">Description</label>
         <textarea
           rows="3"
           {...register("description")}
@@ -110,74 +126,105 @@ useEffect(() => {
           {maxDescriptionLength - descriptionLength} characters left
         </div>
 
-          {errors.description && (
+        {errors.description && (
-            <p className="text-danger">{errors.description.message}</p>
+          <p className="text-danger">{errors.description.message}</p>
-          )}
+        )}
-        </div>
-
-       
-        <div className="col-12 col-md-12  border">
-
-          
-  {masterFeatures.map((feature) => (
-    <React.Fragment key={feature.id}>
-    <div className="row my-1" key={feature.id} style={{ marginLeft: "0px" }}>
-      
-     
-      <div className="col-12 col-md-3 d-flex text-start align-items-start" style={{ wordWrap: 'break-word' }}>
-        <span className="fs">{feature.name}</span>
       </div>
 
-      <div className="col-12 col-md-1"></div>
+
+      <div className="col-12 col-md-12  border">
 
 
-      <div className="col-12 col-md-8 d-flex justify-content-start align-items-center flex-wrap">
+        {masterFeatures.map((feature, featureIndex) => (
-        {feature.featurePermissions.map((perm) => (
+
-          <div className="d-flex me-3 mb-2" key={perm.id}>
+          <React.Fragment key={feature.id}>
-            <label className="form-check-label" htmlFor={perm.id}>
+            <div className="row my-1" key={feature.id} style={{ marginLeft: "0px" }}>
-              <input
+
-                type="checkbox"
+
-                className="form-check-input mx-2"
+              <div className="col-12 col-md-3 d-flex text-start align-items-start" style={{ wordWrap: 'break-word' }}>
-                id={perm.id}
+                <span className="fs">{feature.name}</span>
-                value={perm.id}
+              </div>
-                {...register("selectedPermissions")}
+
-              />
+              <div className="col-12 col-md-1"></div>
-              {perm.name}
+
-            </label>
+
-          </div>
+              <div className="col-12 col-md-8 d-flex justify-content-start align-items-center flex-wrap">
+                {feature.featurePermissions.map((perm, permIndex) => {
+                  const refIndex = (featureIndex * 10) + permIndex;
+                  return (
+                    <div className="d-flex me-3 mb-2" key={perm.id}>
+                      <label className="form-check-label" htmlFor={perm.id}>
+                        <input
+                          type="checkbox"
+                          className="form-check-input mx-2"
+                          id={perm.id}
+                          value={perm.id}
+                          {...register("selectedPermissions")}
+                        />
+                        {perm.name}
+                      </label>
+                      <div style={{ display: 'flex', alignItems: 'center' }}>
+                        <div
+                          key={refIndex}
+                          ref={(el) =>
+                            (popoverRefs.current[refIndex] = el)
+                          }
+                          tabIndex="0"
+                          className="d-flex align-items-center avatar-group justify-content-center"
+                          data-bs-toggle="popover" refIndex
+                          data-bs-trigger="focus"
+                          data-bs-placement="right"
+                          data-bs-html="true"
+                          data-bs-content={`
+                                      <div class="border border-secondary rounded custom-popover p-2 px-3">
+                                        ${perm.description}
+                                      </div>
+                                    `}
+                        >
+                          &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>
+
+            </div>
+            <hr className="hr my-1 py-1" />
+          </React.Fragment>
+
         ))}
+        {errors.selectedPermissions && (
+          <p className="text-danger">{errors.selectedPermissions.message}</p>
+        )}
+        {!masterFeatures && <p>Loading...</p>}
       </div>
 
-    </div>
-    <hr className="hr my-1 py-1" />
-    </React.Fragment>
 
-  ))}
+      {
-  {errors.selectedPermissions && (
+        masterFeatures && (
-    <p className="text-danger">{errors.selectedPermissions.message}</p>
-  )}
-   {!masterFeatures && <p>Loading...</p>}
-</div>
 
-
+          <div className="col-12 text-center">
-   {
+            <button type="submit" className="btn btn-sm btn-primary me-3">
-      masterFeatures && (
+              {isLoading ? "Please Wait..." : "Submit"}
-
+            </button>
-        <div className="col-12 text-center">
+            <button
-        <button type="submit" className="btn btn-sm btn-primary me-3">           
+              type="reset"
-         {isLoading? "Please Wait...":"Submit"}       
+              className="btn btn-sm btn-label-secondary"
-        </button>
+              data-bs-dismiss="modal"
-        <button
+              aria-label="Close"
-          type="reset"
+            >
-          className="btn btn-sm btn-label-secondary"
+              Cancel
-          data-bs-dismiss="modal"
+            </button>
-          aria-label="Close"
+          </div>
-        >
+        )
-          Cancel
+      }
-        </button>
-      </div>
-      )
-   }
 
     </form>
   );

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>

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" 

src/components/master/EditRole.jsx

@@ -1,9 +1,9 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useRef } from "react";
-import { useForm ,Controller} from 'react-hook-form';
+import { useForm, Controller } from 'react-hook-form';
 import { z } from 'zod';
 import { zodResolver } from '@hookform/resolvers/zod';
 
-import {  useFeatures} from "../../hooks/useMasterRole";
+import { useFeatures } from "../../hooks/useMasterRole";
 import { MasterRespository } from "../../repositories/MastersRepository";
 import { cacheData, getCachedData } from "../../slices/apiDataManager";
 import showToast from "../../services/toastService";
@@ -18,7 +18,7 @@ import showToast from "../../services/toastService";
 const updateSchema = z.object({
   role: z.string().min(1, { message: "Role is required" }),
   description: z.string().min(1, { message: "Description is required" })
-  .max(255, { message: "Description cannot exceed 255 characters" }),
+    .max(255, { message: "Description cannot exceed 255 characters" }),
   permissions: z.record(z.boolean()).refine((permission) => Object.values(permission).includes(true), {
     message: "At least one permission must be selected",
   }),
@@ -26,9 +26,10 @@ const updateSchema = z.object({
 
 
 
-const  EditMaster=({master,onClose})=> {
+const EditMaster = ({ master, onClose }) => {
-  const [isLoading,setIsLoading] = useState(false)
+  const [isLoading, setIsLoading] = useState(false)
-  const {masterFeatures} = useFeatures()
+  const { masterFeatures } = useFeatures()
+  const popoverRefs = useRef([]);
 
   const buildDefaultPermissions = () => {
     const defaults = {};
@@ -46,15 +47,11 @@ const  EditMaster=({master,onClose})=> {
 
 
   const initialPermissions = buildDefaultPermissions();
- 
-  
-
-  
   const {
     register,
     handleSubmit,
     formState: { errors, dirtyFields },
-    setError,reset
+    setError, reset
   } = useForm({
     resolver: zodResolver(updateSchema),
     defaultValues: {
@@ -65,7 +62,7 @@ const  EditMaster=({master,onClose})=> {
   });
 
   const onSubmit = (data) => {
-     setIsLoading(true)
+    setIsLoading(true)
     const existingIds = new Set(
       master?.item?.featurePermission?.map((p) => p.id)
     );
@@ -92,30 +89,30 @@ const  EditMaster=({master,onClose})=> {
     }
 
     const updatedRole = {
-      id:master?.item?.id,
+      id: master?.item?.id,
       role: data.role,
       description: data.description,
       featuresPermission: updatedPermissions,
     };
-    MasterRespository.updateRoles(master?.item?.id, updatedRole).then((resp)=>{ 
+    MasterRespository.updateRoles(master?.item?.id, updatedRole).then((resp) => {
-      setIsLoading( false )
+      setIsLoading(false)
 
 
       const cachedData = getCachedData("Application Role");
 
-        if (cachedData) {
+      if (cachedData) {
 
-          const updatedData = cachedData.map((role) =>
+        const updatedData = cachedData.map((role) =>
-            role.id === resp.data?.id ? { ...role, ...resp.data } : role
+          role.id === resp.data?.id ? { ...role, ...resp.data } : role
-            );
+        );
 
-            cacheData("Application Role", updatedData);
+        cacheData("Application Role", updatedData);
-        }
+      }
-      showToast( "Application Role Updated successfully.", "success" );
+      showToast("Application Role Updated successfully.", "success");
       setIsLoading(false)
       onClose()
-    }).catch((Err)=>{
+    }).catch((Err) => {
-      showToast( Err.message, "error" );
+      showToast(Err.message, "error");
       setIsLoading(false)
     })
 
@@ -133,22 +130,36 @@ const  EditMaster=({master,onClose})=> {
   const [descriptionLength, setDescriptionLength] = useState(master?.item?.description?.length || 0);
   const maxDescriptionLength = 255;
 
+  useEffect(() => {
+    popoverRefs.current.forEach((el) => {
+      if (el) {
+        new bootstrap.Popover(el, {
+          trigger: "focus",
+          placement: "right",
+          html: true,
+          content: el.getAttribute("data-bs-content"), // use inline content from attribute
+        });
+      }
+    });
+  }, [masterFeatures]);
 
   return (
 
-      <form  className="row g-2 " onSubmit={handleSubmit(onSubmit)}>
+    <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"
+          {...register("role")}
+          className={`form-control ${errors.role ? 'is-invalid' : ''}`}
+        />
+        {errors.role && <p className="text-danger">{errors.role.message}</p>}
+      </div>
 
-        <div className="col-12 col-md-12">
+      <div className="col-12 col-md-12">
-          <label className="form-label">Role</label>
+        <label className="form-label" htmlFor="description">Description</label>
-          <input type="text" 
-           {...register("role")} 
-             className={`form-control ${errors.role ? 'is-invalid' : ''}`}
-          />
-          {errors.role && <p className="text-danger">{errors.role.message}</p>}
-        </div>
-        
-        <div className="col-12 col-md-12">
-          <label className="form-label" htmlFor="description">Description</label>
         <textarea
           rows="3"
           {...register("description")}
@@ -164,47 +175,81 @@ const  EditMaster=({master,onClose})=> {
         {errors.description && (
           <p className="text-danger">{errors.description.message}</p>
         )}
-        </div>  
+      </div>
 
-        <div className="col-12 col-md-12 mx-2s " >
+      <div className="col-12 col-md-12 mx-2s " >
 
-          {masterFeatures.map((feature) => (
+        {masterFeatures.map((feature, featureIndex) => (
-             <div className="row my-3" key={feature.id} style={{marginLeft:"0px"}}>
+          <div className="row my-3" key={feature.id} style={{ marginLeft: "0px" }}>
 
             <div className="col-12 col-md-3 d-flex text-start align-items-center" style={{ wordWrap: 'break-word' }}>
-           <span className="fs">{feature.name}</span>
+              <span className="fs">{feature.name}</span>
-         </div>
+            </div>
-                    <div className="col-12 col-md-1">
+            <div className="col-12 col-md-1">
+
+            </div>
+            <div className="col-12 col-md-8 d-flex justify-content-start align-items-center flex-wrap">
+              {feature.featurePermissions.map((perm, permIndex) => {
+                const refIndex = (featureIndex * 10) + permIndex;
+                return (
 
-                     </div>
-              <div className="col-12 col-md-8 d-flex justify-content-start align-items-center flex-wrap">
-                {feature.featurePermissions.map((perm) => (
                   <div className="d-flex me-3 mb-2" key={perm.id}>
-                     <label className="form-check-label" htmlFor={perm.id}>
+
-                    <input
+                    <label className="form-check-label" htmlFor={perm.id}>
-                      type="checkbox"
+                      <input
-                      className="form-check-input mx-2"
+                        type="checkbox"
-                      id={perm.id}
+                        className="form-check-input mx-2"
-                      {...register(`permissions.${perm.id}`, { 
+                        id={perm.id}
-                        value: initialPermissions[perm.id] || false 
+                        {...register(`permissions.${perm.id}`, {
-                      })}
+                          value: initialPermissions[perm.id] || false
-                    />
+                        })}
+                      />
 
                       {perm.name}
                     </label>
-                  </div>
-                ))}
-              </div>
-            </div>
-          ))}
-          {errors.permissions && (
-            <p className="text-danger">{errors.permissions.message}</p>
-          )}
-        </div>
 
-        <div className="col-12 text-center">
+
+                    <div style={{ display: 'flex', alignItems: 'center' }}>
+                      <div
+                        key={refIndex}
+                        ref={(el) =>
+                          (popoverRefs.current[refIndex] = el)
+                        }
+                        tabIndex="0"
+                        className="d-flex align-items-center avatar-group justify-content-center"
+                        data-bs-toggle="popover" refIndex
+                        data-bs-trigger="focus"
+                        data-bs-placement="right"
+                        data-bs-html="true"
+                        data-bs-content={`
+                                      <div class="border border-secondary rounded custom-popover p-2 px-3">
+                                        ${perm.description}
+                                      </div>
+                                    `}
+                      >
+                        &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>
+          </div>
+        ))}
+        {errors.permissions && (
+          <p className="text-danger">{errors.permissions.message}</p>
+        )}
+      </div>
+
+      <div className="col-12 text-center">
         <button type="submit" className="btn btn-sm btn-primary me-3"> {isLoading ? "Please Wait..." : "Submit"}</button>
-       <button
+        <button
           type="reset"
           className="btn btn-sm btn-label-secondary"
           data-bs-dismiss="modal"
@@ -214,7 +259,7 @@ const  EditMaster=({master,onClose})=> {
         </button>
       </div>
 
-      </form>
+    </form>
 
   );
 }

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" 

src/data/menuData.json

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

src/hooks/masterHook/useMaster.js

@@ -117,3 +117,36 @@ export const useActivitiesMaster = () =>
     
     return {activities,loading,error}
   }
+
+  export const useWorkCategoriesMaster = () =>
+    {
+      const [ categories, setCategories ] = useState( [] )
+      const [ categoryLoading, setloading ] = useState( false );
+      const [ categoryError, setError ] = useState( "" )
+    
+        const fetchCategories =async () =>  {
+          const cacheddata = getCachedData("Work Category");
+    
+          if (!cacheddata) {
+            setloading(true);
+            try {
+              const response = await MasterRespository.getWorkCategory();
+              setCategories(response.data);
+              cacheData("Work Category", response.data);
+            } catch (err) {
+              setError(err);
+              console.log(err);
+            } finally {
+              setloading(false);
+            }
+          } else {
+            setCategories(cacheddata);
+          }
+         }
+      useEffect( () =>
+      {
+        fetchCategories()
+      }, [] )
+      
+      return {categories,categoryLoading,categoryError}
+    }

src/hooks/useAttendanceStatus.js

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

src/hooks/useDashboard_Data.jsx

@@ -37,6 +37,37 @@ export const useDashboard_Data = ({ days, FromDate, projectId }) => {
   return { dashboard_data, loading: isLineChartLoading, error };
 };
 
+
+export const useDashboard_AttendanceData = (date, projectId) => {
+    const [dashboard_Attendancedata, setDashboard_AttendanceData] = useState([]);
+    const [isLineChartLoading, setLoading] = useState(false);
+    const [error, setError] = useState("");
+
+    useEffect(() => {
+        const fetchData = async () => {
+            setLoading(true);
+            setError("");
+
+            try {
+                const response = await GlobalRepository.getDashboardAttendanceData(date,projectId); // date in 2nd param
+                setDashboard_AttendanceData(response.data);
+            } catch (err) {
+                setError("Failed to fetch dashboard data.");
+                console.error(err);
+            } finally {
+                setLoading(false);
+            }
+        };
+
+        if (date && projectId !== null) {
+            fetchData();
+        }
+    }, [date, projectId]);
+
+    return { dashboard_Attendancedata, isLineChartLoading: isLineChartLoading, error };
+};
+
+
 // 🔹 Dashboard Projects Card Data Hook
 export const useDashboardProjectsCardData = () => {
   const [projectsCardData, setProjectsData] = useState([]);

src/hooks/useEmployees.js

@@ -209,9 +209,15 @@ export const useEmployeesAllOrByProjectId = (projectId, showInactive) => {
 export const useEmployeeProfile = (employeeId) => {
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState();
-  const [employee, setEmployees] = useState();
+  const [employee, setEmployees] = useState(null);
 
   const fetchData = async () => {
+    if (!employeeId) {
+        // Reset the state if no employeeId (e.g., opening for 'add' mode)
+        setEmployees(null);
+        setLoading(false);
+        return;
+      }
     const Employee_cache = getCachedData("employeeProfile");
     if (!Employee_cache || Employee_cache.employeeId !== employeeId) {
       EmployeeRepository.getEmployeeProfile(employeeId)
@@ -231,9 +237,7 @@ export const useEmployeeProfile = (employeeId) => {
   };
 
   useEffect(() => {
-    if (employeeId) {
+      fetchData();
-      fetchData(employeeId);
-    }
   }, [employeeId]);
 
   return { employee, loading, error };

src/hooks/useProfile.js

@@ -3,46 +3,40 @@ import AuthRepository from "../repositories/AuthRepository";
 import {cacheProfileData, getCachedProfileData} from "../slices/apiDataManager";
 import {useSelector} from "react-redux";
 
-export const useProfile = () =>
+let hasFetched = false;
-{
-  const loggedUser = useSelector((store)=>store.globalVariables.loginUser)
 
-    const [profile, setProfile] = useState(null);
+export const useProfile = () => {
-    const [loading, setLoading] = useState(false);
+  const loggedUser = useSelector( ( store ) => store.globalVariables.loginUser );
-    const [error, setError] = useState("");
+  const [profile, setProfile] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
 
-   
+  const fetchData = async () => {
-  const fetchData = async () =>
+    try {
-  {
+      setLoading(true);
-    try
-    {
-      setLoading( true )
       let response = await AuthRepository.profile();
-      setProfile( response.data )
+      setProfile(response.data);
-      cacheProfileData( response.data )
+      cacheProfileData(response.data);
-      setLoading( false );
+    } catch (error) {
+      setError("Failed to fetch data.");
+    } finally {
+      setLoading(false);
+    }
+  };
 
-    } catch ( error )
+  useEffect(() => {
-    {
+    if (!hasFetched) {
-      setLoading( false )
+      hasFetched = true;
-      console.error( error );
+      if (!loggedUser) {
-      setError( "Failed to fetch data." );
+        fetchData();
-    };
+      } else {
-  }
+        setProfile(loggedUser);
-  
+      }
-  
-  useEffect( () => {
-   
-    if (!loggedUser )
-    {
-    fetchData() 
-    } else
-    {
-      setProfile(loggedUser)
     }
   
-     },[])
+      setProfile(loggedUser);
   
-    return  { profile,loading,error}
+  }, [loggedUser]);
 
-  }
+  return { profile, loading, error };
+};

src/hooks/useProjects.js

@@ -2,17 +2,18 @@ import { useEffect, useState } from "react";
 import { cacheData, getCachedData } from "../slices/apiDataManager";
 import ProjectRepository from "../repositories/ProjectRepository";
 import { useProfile } from "./useProfile";
-import { useDispatch } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import { setProjectId } from "../slices/localVariablesSlice";
 
 export const useProjects = () => {
-  const { profile } = useProfile();
+
+  const loggedUser = useSelector( ( store ) => store.globalVariables.loginUser )
   const [projects, setProjects] = useState([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState("");
 
   const fetchData = async () => {
-    const projectIds = profile?.projects || [];
+    const projectIds = loggedUser?.projects || [];
 
     const filterProjects = (projectsList) => {
       return projectsList
@@ -43,12 +44,11 @@ export const useProjects = () => {
       }
     }
   };
-
   useEffect(() => {
-    if (profile) {
+    if (loggedUser) {
       fetchData();
     }
-  }, [profile]);
+  }, [loggedUser]);
 
   return { projects, loading, error, refetch: fetchData };
 };

src/index.css

@@ -138,3 +138,30 @@ button:focus-visible {
   overflow: auto;
   
 }
+.small-text{
+  font-size: 12px;
+}
+
+.custom-accordion-btn {
+padding: 1px !important;
+  transition: background-color 0.3s ease;
+}
+
+.accordion-button::after {
+  display: none;
+  padding: 0px;
+}
+
+
+.accordion-header {
+  position: relative;
+  border-bottom: none;
+}
+
+.accordion-button.collapsed .toggle-icon {
+  content: "\f10b"; /* plus-circle */
+}
+
+.accordion-button:not(.collapsed) .toggle-icon {
+  content: "\f146"; /* minus-circle */
+}

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>
             )}

src/pages/Activities/DailyTask.jsx

@@ -6,7 +6,7 @@ import { useTaskList } from "../../hooks/useTasks";
 import { useProjects } from "../../hooks/useProjects";
 import { setProjectId } from "../../slices/localVariablesSlice";
 import { useProfile } from "../../hooks/useProfile";
-import { formatDate } from "../../utils/dateUtils";
+// import { formatDate } from "../../utils/dateUtils"; // Removed this import
 import GlobalModel from "../../components/common/GlobalModel";
 import AssignRoleModel from "../../components/Project/AssignRole";
 import { ReportTask } from "../../components/Activities/ReportTask";
@@ -14,6 +14,7 @@ import ReportTaskComments from "../../components/Activities/ReportTaskComments";
 import DateRangePicker from "../../components/common/DateRangePicker";
 import DatePicker from "../../components/common/DatePicker";
 import { useSearchParams } from "react-router-dom";
+import moment from "moment";
 
 const DailyTask = () => {
   const [searchParams] = useSearchParams();
@@ -141,6 +142,7 @@ const DailyTask = () => {
                 <DateRangePicker
                   onRangeChange={setDateRange}
                   DateDifference="6"
+                  dateFormat="DD-MM-YYYY"
                 />
               </div>
               <div className="col-sm-3 col-6 text-end mb-1">
@@ -187,12 +189,19 @@ 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}>
                         <tr className="table-row-header">
                           <td colSpan={7} className="text-start">
-                            <strong>{date}</strong>
+                            <strong>{moment(date).format("DD-MM-YYYY")}</strong>
                           </td>
                         </tr>
                         {TaskLists.filter((task) =>
@@ -239,7 +248,7 @@ const DailyTask = () => {
                                     task.workItem.completedWork}
                                 </td>
                                 <td>{task.completedTask}</td>
-                                <td>{formatDate(task.assignmentDate)}</td>
+                                <td>{moment(task.assignmentDate).format("DD-MM-YYYY")}</td>
                                 <td className="text-center">
                                   <div
                                     key={refIndex}
@@ -257,23 +266,23 @@ const DailyTask = () => {
                                         ${task.teamMembers
                                           .map(
                                             (member) => `
-                                            <div class="d-flex align-items-center gap-2 mb-2">
+                                              <div class="d-flex align-items-center gap-2 mb-2">
-                                              <div class="avatar avatar-xs">
+                                                <div class="avatar avatar-xs">
-                                                <span class="avatar-initial rounded-circle bg-label-primary">
+                                                  <span class="avatar-initial rounded-circle bg-label-primary">
-                                                  ${
+                                                    ${
-                                                    member?.firstName?.charAt(
+                                                      member?.firstName?.charAt(
-                                                      0
+                                                        0
-                                                    ) || ""
+                                                      ) || ""
-                                                  }${
+                                                    }${
                                               member?.lastName?.charAt(0) || ""
                                             }
-                                                </span>
+                                                  </span>
-                                              </div>
+                                                </div>
-                                              <span>${member.firstName} ${
+                                                <span>${member.firstName} ${
                                               member.lastName
                                             }</span>
-                                            </div>
+                                              </div>
-                                          `
+                                            `
                                           )
                                           .join("")}
                                       </div>

src/pages/authentication/AuthWrapper.jsx

@@ -15,11 +15,8 @@ export const AuthWrapper = ({ children }) => {
                   className="app-brand-link gap-2"
                 >
                   <span className="app-brand-logo demo">
-                    <img src="/img/brand/marco.png" alt="sneat-logo" />
+                    <img src="/img/brand/marco.png" alt="marco-logo" />
                   </span>
-                  {/* <span className="app-brand-text demo text-body fw-bold">
-                    Sneat
-                  </span> */}
                 </Link>
               </div>
               {children}

src/pages/employee/EmployeeList.jsx

@@ -43,7 +43,7 @@ const EmployeeList = () => {
   const [searchText, setSearchText] = useState("");
   const [filteredData, setFilteredData] = useState([]);
   const [showModal, setShowModal] = useState(false);
-  const [selectedEmployeeId, setSelecedEmployeeId] = useState();
+  const [selectedEmployeeId, setSelecedEmployeeId] = useState(null);
   const [IsDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
   const [selectedEmpFordelete, setSelectedEmpFordelete] = useState(null);
   const [employeeLodaing, setemployeeLodaing] = useState(false);
@@ -111,6 +111,8 @@ const EmployeeList = () => {
       document.querySelector(".modal-backdrop").remove();
     }
     setShowModal(false);
+    clearCacheKey("employeeProfile");
+    recallEmployeeData(showInactive);
   };
   const handleShow = () => setShowModal(true);
   const handleClose = () => setShowModal(false);
@@ -193,7 +195,7 @@ const EmployeeList = () => {
       {isCreateModalOpen && (
         <ManageEmp employeeId={modelConfig} onClosed={closeModal} />
       )}
-      <div
+      {showModal && (<div
         className={`modal fade ${showModal ? "show" : ""} `}
         tabIndex="-1"
         role="dialog"
@@ -211,7 +213,7 @@ const EmployeeList = () => {
             />
           </div>
         </div>
-      </div>
+      </div>)}
 
       {IsDeleteModalOpen && (
         <div

src/pages/employee/EmployeeProfile.jsx

@@ -16,6 +16,7 @@ import { ComingSoonPage } from "../Misc/ComingSoonPage";
 import { useNavigate } from "react-router-dom";
 import Avatar from "../../components/common/Avatar";
 import AttendancesEmployeeRecords from "./AttendancesEmployeeRecords";
+import ManageEmployee from "../../components/Employee/ManageEmployee";
 const EmployeeProfile = () => {
   const projectID = useSelector((store) => store.localVariables.projectId);
   const { employeeId } = useParams();
@@ -26,11 +27,18 @@ const EmployeeProfile = () => {
   const tab = SearchParams.get("for");
   const [activePill, setActivePill] = useState(tab);
   const [currentEmployee, setCurrentEmployee] = useState();
+    const [showModal, setShowModal] = useState(false);
 
   const handlePillClick = (pillKey) => {
     setActivePill(pillKey);
   };
 
+   const closeModal = () => {
+      setShowModal(false);
+      fetchEmployeeProfile(employeeId);
+    };
+    const handleShow = () => setShowModal(true);
+
   const fetchEmployeeProfile = async (employeeID) => {
     try {
       const resp = await EmployeeRepository.getEmployeeProfile(employeeID);
@@ -89,6 +97,26 @@ const EmployeeProfile = () => {
   }
 
   return (
+    <>    {showModal && (<div
+        className={`modal fade ${showModal ? "show" : ""} `}
+        tabIndex="-1"
+        role="dialog"
+        style={{ display: showModal ? "block" : "none" }}
+        aria-hidden={!showModal}
+      >
+        <div className="modal-dialog modal-xl modal-dialog-centered ">
+          <div
+            className="modal-content overflow-y-auto overflow-x-hidden"
+            style={{ maxHeight: "90vh" }}
+          >
+            <ManageEmployee
+              employeeId={employeeId}
+              onClosed={closeModal}
+            />
+          </div>
+        </div>
+      </div>)}
+
     <div className="container-xxl flex-grow-1 container-p-y">
       <Breadcrumb
         data={[
@@ -212,7 +240,7 @@ const EmployeeProfile = () => {
                       <button
                         className="btn btn-primary btn-block"
                         onClick={() =>
-                          navigate(`/employee/manage/${currentEmployee?.id}`)
+                          handleShow()
                         }
                       >
                         Edit Profile
@@ -238,6 +266,8 @@ const EmployeeProfile = () => {
         </div>
       </div>
     </div>
+    </>
+
   );
 };
 

src/repositories/GlobalRepository.jsx

@@ -18,6 +18,11 @@ const GlobalRepository = {
 
     return api.get(`/api/Dashboard/Progression?${params.toString()}`);
   },
+
+  getDashboardAttendanceData: ( date,projectId ) => {  
+
+  return api.get(`/api/Dashboard/project-attendance/${projectId}?date=${date}`);
+},
   getDashboardProjectsCardData: () => {
     return api.get(`/api/Dashboard/projects`);
   },

src/router/AppRoutes.jsx

@@ -51,7 +51,7 @@ const router = createBrowserRouter(
     },
     {
       element: <ProtectedRoute />,
-      errorElement:<ErrorPage/>,
+      errorElement: <ErrorPage />,
       children: [
         {
           element: <HomeLayout />,
@@ -90,6 +90,10 @@ const router = createBrowserRouter(
     future: {
       v7_relativeSplatPath: true,
       v7_startTransition: true,
+      v7_fetcherPersist: true,
+      v7_normalizeFormMethod: true,
+      v7_partialHydration: true,
+      v7_skipActionErrorRevalidation: true,
     },
   }
 );

src/utils/constants.jsx

@@ -16,9 +16,12 @@ export const VIEW_PROJECT_INFRA = "c7b68e33-72f0-474f-bd96-77636427ecc8"
 export const REGULARIZE_ATTENDANCE ="57802c4a-00aa-4a1f-a048-fd2f70dd44b6"
 
 
-export const ASSIGN_TO_PROJECT = "fbd213e0-0250-46f1-9f5f-4b2a1e6e76a3";
+export const ASSIGN_TO_PROJECT = "b94802ce-0689-4643-9e1d-11c86950c35b";
 
 export const INFRASTRUCTURE = "9666de86-d7c7-4d3d-acaa-fcd6d6b81f3c";
 
 export const MANAGE_TASK = "08752f33-3b29-4816-b76b-ea8a968ed3c5"
 
+export const VIEW_TASK = "9fcc5f87-25e3-4846-90ac-67a71ab92e3c"
+
+export const ASSIGN_REPORT_TASK = "6a32379b-8b3f-49a6-8c48-4b7ac1b55dc2"