Added Column Today's Planned to Project Infrastructure

This commit is contained in:
ashutosh.nehete 2025-06-03 15:55:18 +05:30 committed by Vikas Nale
parent cfd5486fe2
commit 176535f53f
3 changed files with 90 additions and 30 deletions

View File

@ -5,12 +5,13 @@ import useMaster from "../../hooks/masterHook/useMaster";
import { useForm, Controller } from "react-hook-form"; import { useForm, Controller } from "react-hook-form";
import { z } from "zod"; import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod"; import { zodResolver } from "@hookform/resolvers/zod";
import { getCachedData } from "../../slices/apiDataManager"; import { clearCacheKey, getCachedData } from "../../slices/apiDataManager";
import { useEmployeesAllOrByProjectId } from "../../hooks/useEmployees"; import { useEmployeesAllOrByProjectId } from "../../hooks/useEmployees";
import { TasksRepository } from "../../repositories/ProjectRepository"; import { TasksRepository } from "../../repositories/ProjectRepository";
import showToast from "../../services/toastService"; import showToast from "../../services/toastService";
import { useProjectDetails } from "../../hooks/useProjects";
const AssignRoleModel = ({ assignData, onClose }) => { const AssignRoleModel = ({ assignData, onClose, setAssigned }) => {
// Calculate maxPlanned based on assignData // Calculate maxPlanned based on assignData
const maxPlanned = const maxPlanned =
assignData?.workItem?.workItem?.plannedWork - assignData?.workItem?.workItem?.plannedWork -
@ -50,11 +51,11 @@ const AssignRoleModel = ({ assignData, onClose }) => {
// Initialize Bootstrap Popovers on component mount // Initialize Bootstrap Popovers on component mount
useEffect(() => { useEffect(() => {
// Check if Bootstrap is available globally // Check if Bootstrap is available globally
if (typeof bootstrap !== 'undefined') { if (typeof bootstrap !== "undefined") {
if (infoRef.current) { if (infoRef.current) {
new bootstrap.Popover(infoRef.current, { new bootstrap.Popover(infoRef.current, {
trigger: 'focus', trigger: "focus",
placement: 'right', placement: "right",
html: true, html: true,
content: `<div>Total Pending tasks of the Activity</div>`, content: `<div>Total Pending tasks of the Activity</div>`,
}); });
@ -62,8 +63,8 @@ const AssignRoleModel = ({ assignData, onClose }) => {
if (infoRef1.current) { if (infoRef1.current) {
new bootstrap.Popover(infoRef1.current, { new bootstrap.Popover(infoRef1.current, {
trigger: 'focus', trigger: "focus",
placement: 'right', placement: "right",
html: true, html: true,
content: `<div>Target task for today</div>`, 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."); console.warn("Bootstrap is not available. Popovers might not function.");
} }
}, []); // Empty dependency array ensures this runs once on mount }, []); // Empty dependency array ensures this runs once on mount
// Redux state and hooks // Redux state and hooks
const selectedProject = useSelector( const selectedProject = useSelector(
(store) => store.localVariables.projectId (store) => store.localVariables.projectId
@ -173,6 +173,8 @@ const AssignRoleModel = ({ assignData, onClose }) => {
await TasksRepository.assignTask(formattedData); await TasksRepository.assignTask(formattedData);
showToast("Task Successfully Assigned", "success"); // Show success toast showToast("Task Successfully Assigned", "success"); // Show success toast
reset(); // Reset form fields reset(); // Reset form fields
clearCacheKey("projectInfo");
setAssigned(formattedData.plannedTask)
onClose(); // Close the modal onClose(); // Close the modal
} catch (error) { } catch (error) {
console.error("Error assigning task:", error); // Log the full error for debugging console.error("Error assigning task:", error); // Log the full error for debugging
@ -205,7 +207,7 @@ const AssignRoleModel = ({ assignData, onClose }) => {
<div className="mb-1"> <div className="mb-1">
<p className="mb-0"> <p className="mb-0">
<span className="text-dark text-start d-flex align-items-center flex-wrap form-text"> <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?.building?.name,
assignData?.floor?.floorName, assignData?.floor?.floorName,
@ -303,7 +305,9 @@ const AssignRoleModel = ({ assignData, onClose }) => {
type="checkbox" type="checkbox"
id={`employee-${emp?.id}`} id={`employee-${emp?.id}`}
value={emp.id} value={emp.id}
checked={field.value?.includes(emp.id)} checked={field.value?.includes(
emp.id
)}
onChange={(e) => { onChange={(e) => {
handleCheckboxChange(e, emp); handleCheckboxChange(e, emp);
}} }}
@ -311,7 +315,10 @@ const AssignRoleModel = ({ assignData, onClose }) => {
)} )}
/> />
<div className="flex-grow-1"> <div className="flex-grow-1">
<p className="mb-0" style={{ fontSize: "13px" }}> <p
className="mb-0"
style={{ fontSize: "13px" }}
>
{emp.firstName} {emp.lastName} {emp.firstName} {emp.lastName}
</p> </p>
<small <small
@ -333,7 +340,9 @@ const AssignRoleModel = ({ assignData, onClose }) => {
}) })
) : ( ) : (
<div className="col-12"> <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>
)} )}
</div> </div>
@ -387,23 +396,37 @@ const AssignRoleModel = ({ assignData, onClose }) => {
{!loading && errors.selectedEmployees && ( {!loading && errors.selectedEmployees && (
<div className="danger-text mt-1"> <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> </div>
)} )}
{/* Pending Task of Activity section */} {/* Pending Task of Activity section */}
<div className="col-md text-start mx-0 px-0"> <div className="col-md text-start mx-0 px-0">
<div className="form-check form-check-inline mt-3 px-1"> <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 : 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> <strong>
{assignData?.workItem?.workItem?.plannedWork - assignData?.workItem?.workItem?.completedWork} {assignData?.workItem?.workItem?.plannedWork -
assignData?.workItem?.workItem?.completedWork}
</strong>{" "} </strong>{" "}
<u>{assignData?.workItem?.workItem?.activityMaster?.unitOfMeasurement}</u> <u>
{
assignData?.workItem?.workItem?.activityMaster
?.unitOfMeasurement
}
</u>
</label> </label>
<div
<div style={{ display: "flex", alignItems: "center" }}> style={{ display: "flex", alignItems: "center" }}
>
<div <div
ref={infoRef} ref={infoRef}
tabIndex="0" tabIndex="0"
@ -439,10 +462,14 @@ const AssignRoleModel = ({ assignData, onClose }) => {
className="text-dark text-start d-flex align-items-center flex-wrap form-text" className="text-dark text-start d-flex align-items-center flex-wrap form-text"
htmlFor="inlineCheckbox1" 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> </label>
</div> </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 <Controller
name="plannedTask" name="plannedTask"
control={control} control={control}
@ -455,10 +482,18 @@ const AssignRoleModel = ({ assignData, onClose }) => {
id="defaultFormControlInput" id="defaultFormControlInput"
aria-describedby="defaultFormControlHelp" aria-describedby="defaultFormControlHelp"
/> />
<span style={{ paddingLeft: '6px' }}> <span style={{ paddingLeft: "6px" }}>
{assignData?.workItem?.workItem?.activityMaster?.unitOfMeasurement} {
assignData?.workItem?.workItem?.activityMaster
?.unitOfMeasurement
}
</span> </span>
<div style={{ display: "flex", alignItems: "center" }}> <div
style={{
display: "flex",
alignItems: "center",
}}
>
<div <div
ref={infoRef1} ref={infoRef1}
tabIndex="0" tabIndex="0"
@ -489,16 +524,20 @@ const AssignRoleModel = ({ assignData, onClose }) => {
</div> </div>
{errors.plannedTask && ( {errors.plannedTask && (
<div className="danger-text mt-1">{errors.plannedTask.message}</div> <div className="danger-text mt-1">
{errors.plannedTask.message}
</div>
)} )}
{isHelpVisible && ( {isHelpVisible && (
<div <div
className="position-absolute bg-white border p-2 rounded shadow" 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 */} {/* 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>
)} )}
</div> </div>

View File

@ -232,6 +232,9 @@ const WorkArea = ({ workArea, floor, forBuilding }) => {
<th className="infra-activity-table-header d-none d-md-table-cell"> <th className="infra-activity-table-header d-none d-md-table-cell">
Completed/Planned Completed/Planned
</th> </th>
<th className="infra-activity-table-header d-none d-md-table-cell">
Today's Planned
</th>
<th className="infra-activity-table-header"> <th className="infra-activity-table-header">
Progress Progress
</th> </th>

View File

@ -21,7 +21,6 @@ import { useDispatch } from "react-redux";
import { refreshData } from "../../../slices/localVariablesSlice"; import { refreshData } from "../../../slices/localVariablesSlice";
const WorkItem = ({ const WorkItem = ({
key,
workItem, workItem,
forBuilding, forBuilding,
forFloor, forFloor,
@ -55,6 +54,15 @@ const WorkItem = ({
setNewWorkItem(workItem); setNewWorkItem(workItem);
}, [workItem]); }, [workItem]);
const refreshWorkItem = (plannedTask) =>{
if (workItem) {
const updated = {
...workItem,
todaysAssigned: (workItem.todaysAssigned || 0) + plannedTask,
};
setNewWorkItem(updated);
}
}
let assigndata = { let assigndata = {
building: forBuilding, building: forBuilding,
floor: forFloor, floor: forFloor,
@ -97,7 +105,7 @@ const WorkItem = ({
style={{ display: isModalOpen ? "block" : "none" }} style={{ display: isModalOpen ? "block" : "none" }}
aria-hidden={!isModalOpen} aria-hidden={!isModalOpen}
> >
<AssignRoleModel assignData={assigndata} onClose={closeModal} /> <AssignRoleModel assignData={assigndata} onClose={closeModal} setAssigned={refreshWorkItem} />
</div> </div>
)} )}
@ -141,7 +149,7 @@ const WorkItem = ({
</div> </div>
)} )}
<tr key={key}> <tr key={NewWorkItem?.workItemId}>
{/* Activity Name - always visible */} {/* Activity Name - always visible */}
<td className="text-start table-cell-small"> <td className="text-start table-cell-small">
<i className="bx bx-right-arrow-alt"></i> <i className="bx bx-right-arrow-alt"></i>
@ -191,6 +199,16 @@ const WorkItem = ({
: "NA"} : "NA"}
</td> </td>
<td className="text-center d-none d-md-table-cell">
{hasWorkItem
? `${
NewWorkItem?.todaysAssigned ??
workItem?.todaysAssigned ??
"0"
}`
: "NA"}
</td>
{/* Progress Bar - always visible */} {/* Progress Bar - always visible */}
<td className="text-center " style={{ width: "15%" }}> <td className="text-center " style={{ width: "15%" }}>
<div className="progress p-0"> <div className="progress p-0">