From 176535f53f822b95211dc878fc9718327b4fc188 Mon Sep 17 00:00:00 2001
From: "ashutosh.nehete" <ashutosh.nehete@marcoaiot.com>
Date: Tue, 3 Jun 2025 15:55:18 +0530
Subject: [PATCH] Added Column Today's Planned to Project Infrastructure

---
 src/components/Project/AssignRole.jsx         | 93 +++++++++++++------
 .../Project/Infrastructure/WorkArea.jsx       |  3 +
 .../Project/Infrastructure/WorkItem.jsx       | 24 ++++-
 3 files changed, 90 insertions(+), 30 deletions(-)

diff --git a/src/components/Project/AssignRole.jsx b/src/components/Project/AssignRole.jsx
index 65badfb7..38258bb2 100644
--- a/src/components/Project/AssignRole.jsx
+++ b/src/components/Project/AssignRole.jsx
@@ -5,12 +5,13 @@ import useMaster from "../../hooks/masterHook/useMaster";
 import { useForm, Controller } from "react-hook-form";
 import { z } from "zod";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { getCachedData } from "../../slices/apiDataManager";
+import { clearCacheKey, getCachedData } from "../../slices/apiDataManager";
 import { useEmployeesAllOrByProjectId } from "../../hooks/useEmployees";
 import { TasksRepository } from "../../repositories/ProjectRepository";
 import showToast from "../../services/toastService";
+import { useProjectDetails } from "../../hooks/useProjects";
 
-const AssignRoleModel = ({ assignData, onClose }) => {
+const AssignRoleModel = ({ assignData, onClose, setAssigned }) => {
   // Calculate maxPlanned based on assignData
   const maxPlanned =
     assignData?.workItem?.workItem?.plannedWork -
@@ -50,11 +51,11 @@ const AssignRoleModel = ({ assignData, onClose }) => {
   // Initialize Bootstrap Popovers on component mount
   useEffect(() => {
     // Check if Bootstrap is available globally
-    if (typeof bootstrap !== 'undefined') {
+    if (typeof bootstrap !== "undefined") {
       if (infoRef.current) {
         new bootstrap.Popover(infoRef.current, {
-          trigger: 'focus',
-          placement: 'right',
+          trigger: "focus",
+          placement: "right",
           html: true,
           content: `<div>Total Pending tasks of the Activity</div>`,
         });
@@ -62,8 +63,8 @@ const AssignRoleModel = ({ assignData, onClose }) => {
 
       if (infoRef1.current) {
         new bootstrap.Popover(infoRef1.current, {
-          trigger: 'focus',
-          placement: 'right',
+          trigger: "focus",
+          placement: "right",
           html: true,
           content: `<div>Target task for today</div>`,
         });
@@ -72,7 +73,6 @@ const AssignRoleModel = ({ assignData, onClose }) => {
       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
@@ -173,6 +173,8 @@ const AssignRoleModel = ({ assignData, onClose }) => {
       await TasksRepository.assignTask(formattedData);
       showToast("Task Successfully Assigned", "success"); // Show success toast
       reset(); // Reset form fields
+      clearCacheKey("projectInfo");
+      setAssigned(formattedData.plannedTask)
       onClose(); // Close the modal
     } catch (error) {
       console.error("Error assigning task:", error); // Log the full error for debugging
@@ -205,7 +207,7 @@ const AssignRoleModel = ({ assignData, onClose }) => {
               <div className="mb-1">
                 <p className="mb-0">
                   <span className="text-dark text-start d-flex align-items-center flex-wrap form-text">
-                    <p className="me-2 m-0 font-bold">Work Location :</p>
+                    <span className="me-2 m-0 font-bold">Work Location :</span>
                     {[
                       assignData?.building?.name,
                       assignData?.floor?.floorName,
@@ -303,7 +305,9 @@ const AssignRoleModel = ({ assignData, onClose }) => {
                                             type="checkbox"
                                             id={`employee-${emp?.id}`}
                                             value={emp.id}
-                                            checked={field.value?.includes(emp.id)}
+                                            checked={field.value?.includes(
+                                              emp.id
+                                            )}
                                             onChange={(e) => {
                                               handleCheckboxChange(e, emp);
                                             }}
@@ -311,7 +315,10 @@ const AssignRoleModel = ({ assignData, onClose }) => {
                                         )}
                                       />
                                       <div className="flex-grow-1">
-                                        <p className="mb-0" style={{ fontSize: "13px" }}>
+                                        <p
+                                          className="mb-0"
+                                          style={{ fontSize: "13px" }}
+                                        >
                                           {emp.firstName} {emp.lastName}
                                         </p>
                                         <small
@@ -333,7 +340,9 @@ const AssignRoleModel = ({ assignData, onClose }) => {
                               })
                             ) : (
                               <div className="col-12">
-                                <p className="text-center">No employees found for the selected role.</p>
+                                <p className="text-center">
+                                  No employees found for the selected role.
+                                </p>
                               </div>
                             )}
                           </div>
@@ -387,23 +396,37 @@ const AssignRoleModel = ({ assignData, onClose }) => {
 
                     {!loading && errors.selectedEmployees && (
                       <div className="danger-text mt-1">
-                        <p>{errors.selectedEmployees.message}</p> {/* Use message from Zod schema */}
+                        <p>{errors.selectedEmployees.message}</p>{" "}
+                        {/* Use message from Zod schema */}
                       </div>
                     )}
 
                     {/* Pending Task of Activity section */}
                     <div className="col-md text-start mx-0 px-0">
                       <div className="form-check form-check-inline mt-3 px-1">
-                        <label className="form-text text-dark align-items-center d-flex" htmlFor="inlineCheckbox1">
+                        <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">
+                          <label
+                            className="form-check-label fs-7 ms-4"
+                            htmlFor="inlineCheckbox1"
+                          >
                             <strong>
-                              {assignData?.workItem?.workItem?.plannedWork - assignData?.workItem?.workItem?.completedWork}
+                              {assignData?.workItem?.workItem?.plannedWork -
+                                assignData?.workItem?.workItem?.completedWork}
                             </strong>{" "}
-                            <u>{assignData?.workItem?.workItem?.activityMaster?.unitOfMeasurement}</u>
+                            <u>
+                              {
+                                assignData?.workItem?.workItem?.activityMaster
+                                  ?.unitOfMeasurement
+                              }
+                            </u>
                           </label>
-
-                          <div style={{ display: "flex", alignItems: "center" }}>
+                          <div
+                            style={{ display: "flex", alignItems: "center" }}
+                          >
                             <div
                               ref={infoRef}
                               tabIndex="0"
@@ -439,10 +462,14 @@ const AssignRoleModel = ({ assignData, onClose }) => {
                           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>
+                          <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' }}>
+                      <div
+                        className="form-check form-check-inline col-sm-3 mt-2"
+                        style={{ marginLeft: "-28px" }}
+                      >
                         <Controller
                           name="plannedTask"
                           control={control}
@@ -455,10 +482,18 @@ const AssignRoleModel = ({ assignData, onClose }) => {
                                 id="defaultFormControlInput"
                                 aria-describedby="defaultFormControlHelp"
                               />
-                              <span style={{ paddingLeft: '6px' }}>
-                                {assignData?.workItem?.workItem?.activityMaster?.unitOfMeasurement}
+                              <span style={{ paddingLeft: "6px" }}>
+                                {
+                                  assignData?.workItem?.workItem?.activityMaster
+                                    ?.unitOfMeasurement
+                                }
                               </span>
-                              <div style={{ display: "flex", alignItems: "center" }}>
+                              <div
+                                style={{
+                                  display: "flex",
+                                  alignItems: "center",
+                                }}
+                              >
                                 <div
                                   ref={infoRef1}
                                   tabIndex="0"
@@ -489,16 +524,20 @@ const AssignRoleModel = ({ assignData, onClose }) => {
                       </div>
 
                       {errors.plannedTask && (
-                        <div className="danger-text mt-1">{errors.plannedTask.message}</div>
+                        <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' }}
+                          style={{ zIndex: 10, marginLeft: "10px" }}
                         >
                           {/* Add your help content here */}
-                          <p className="mb-0">Enter the target value for today's task.</p>
+                          <p className="mb-0">
+                            Enter the target value for today's task.
+                          </p>
                         </div>
                       )}
                     </div>
diff --git a/src/components/Project/Infrastructure/WorkArea.jsx b/src/components/Project/Infrastructure/WorkArea.jsx
index d9fc3580..66c88548 100644
--- a/src/components/Project/Infrastructure/WorkArea.jsx
+++ b/src/components/Project/Infrastructure/WorkArea.jsx
@@ -232,6 +232,9 @@ const WorkArea = ({ workArea, floor, forBuilding }) => {
                           <th className="infra-activity-table-header d-none d-md-table-cell">
                             Completed/Planned
                           </th>
+                          <th className="infra-activity-table-header d-none d-md-table-cell">
+                            Today's Planned
+                          </th>
                           <th className="infra-activity-table-header">
                             Progress
                           </th>
diff --git a/src/components/Project/Infrastructure/WorkItem.jsx b/src/components/Project/Infrastructure/WorkItem.jsx
index 06303908..d9ed65e9 100644
--- a/src/components/Project/Infrastructure/WorkItem.jsx
+++ b/src/components/Project/Infrastructure/WorkItem.jsx
@@ -21,7 +21,6 @@ import { useDispatch } from "react-redux";
 import { refreshData } from "../../../slices/localVariablesSlice";
 
 const WorkItem = ({
-  key,
   workItem,
   forBuilding,
   forFloor,
@@ -55,6 +54,15 @@ const WorkItem = ({
     setNewWorkItem(workItem);
   }, [workItem]);
 
+  const refreshWorkItem = (plannedTask) =>{
+    if (workItem) {
+    const updated = {
+      ...workItem,
+      todaysAssigned: (workItem.todaysAssigned || 0) + plannedTask,
+    };
+    setNewWorkItem(updated);
+  }
+  }
   let assigndata = {
     building: forBuilding,
     floor: forFloor,
@@ -97,7 +105,7 @@ const WorkItem = ({
           style={{ display: isModalOpen ? "block" : "none" }}
           aria-hidden={!isModalOpen}
         >
-          <AssignRoleModel assignData={assigndata} onClose={closeModal} />
+          <AssignRoleModel assignData={assigndata} onClose={closeModal} setAssigned={refreshWorkItem} />
         </div>
       )}
 
@@ -141,7 +149,7 @@ const WorkItem = ({
         </div>
       )}
 
-      <tr key={key}>
+      <tr key={NewWorkItem?.workItemId}>
         {/* Activity Name - always visible */}
         <td className="text-start table-cell-small">
           <i className="bx bx-right-arrow-alt"></i>
@@ -191,6 +199,16 @@ const WorkItem = ({
             : "NA"}
         </td>
 
+        <td className="text-center d-none d-md-table-cell">
+          {hasWorkItem
+            ? `${
+                NewWorkItem?.todaysAssigned ??
+                workItem?.todaysAssigned ??
+                "0"
+              }`
+            : "NA"}
+        </td>
+
         {/* Progress Bar - always visible */}
         <td className="text-center " style={{ width: "15%" }}>
           <div className="progress p-0">