daily task planning filtering according to service
This commit is contained in:
parent
57edd92dce
commit
92b1531b75
@ -1,6 +1,6 @@
|
||||
import React from "react";
|
||||
import WorkArea from "./WorkArea";
|
||||
const Floor = ({ floor, workAreas, forBuilding,serviceId }) => {
|
||||
const Floor = ({ floor, workAreas, forBuilding }) => {
|
||||
return (
|
||||
<React.Fragment key={floor.id}>
|
||||
{workAreas && workAreas.length > 0 ? (
|
||||
@ -10,7 +10,6 @@ const Floor = ({ floor, workAreas, forBuilding,serviceId }) => {
|
||||
key={workArea.id}
|
||||
workArea={workArea}
|
||||
floor={floor}
|
||||
serviceId={serviceId}
|
||||
/>
|
||||
))
|
||||
) : (
|
||||
|
||||
@ -11,7 +11,7 @@ import {
|
||||
getCachedData,
|
||||
} from "../../../slices/apiDataManager";
|
||||
|
||||
const InfraTable = ({ buildings, projectId, serviceId }) => {
|
||||
const InfraTable = ({ buildings, projectId }) => {
|
||||
const [projectBuilding, setProjectBuilding] = useState([]);
|
||||
const [expandedBuildings, setExpandedBuildings] = useState([]);
|
||||
const [showFloorModal, setShowFloorModal] = useState(false);
|
||||
@ -90,7 +90,6 @@ const InfraTable = ({ buildings, projectId, serviceId }) => {
|
||||
forBuilding={building}
|
||||
floor={floor}
|
||||
workAreas={floor.workAreas}
|
||||
serviceId={serviceId}
|
||||
/>
|
||||
))
|
||||
) : (
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import WorkItem from "./WorkItem";
|
||||
import { useProjectDetails, useProjectTasks } from "../../../hooks/useProjects";
|
||||
import { cacheData } from "../../../slices/apiDataManager";
|
||||
import { useCurrentService, useProjectDetails, useProjectTasks } from "../../../hooks/useProjects";
|
||||
import { cacheData, useSelectedProject } from "../../../slices/apiDataManager";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { refreshData } from "../../../slices/localVariablesSlice";
|
||||
import ProjectRepository from "../../../repositories/ProjectRepository";
|
||||
@ -15,9 +15,11 @@ import {
|
||||
import { useParams } from "react-router-dom";
|
||||
import ProgressBar from "../../common/ProgressBar";
|
||||
import {formatNumber} from "../../../utils/dateUtils";
|
||||
import { useServices } from "../../../hooks/masterHook/useMaster";
|
||||
|
||||
const WorkArea = ({ workArea, floor, forBuilding,serviceId = null }) => {
|
||||
const selectedProject = useSelector((store) => store.localVariables.projectId);
|
||||
const WorkArea = ({ workArea, floor, forBuilding }) => {
|
||||
const selectedProject = useSelectedProject()
|
||||
const selectedService = useCurrentService()
|
||||
const { projects_Details, loading } = useProjectDetails(selectedProject);
|
||||
const [IsExpandedArea, setIsExpandedArea] = useState(false);
|
||||
const dispatch = useDispatch();
|
||||
@ -25,8 +27,7 @@ const WorkArea = ({ workArea, floor, forBuilding,serviceId = null }) => {
|
||||
|
||||
const ManageInfra = useHasUserPermission(MANAGE_PROJECT_INFRA);
|
||||
const ManageAndAssignTak = useHasUserPermission(ASSIGN_REPORT_TASK);
|
||||
|
||||
const { ProjectTaskList, isLoading } = useProjectTasks(workArea.id,serviceId, IsExpandedArea);
|
||||
const { ProjectTaskList, isLoading } = useProjectTasks(workArea.id,selectedService, IsExpandedArea);
|
||||
|
||||
const [workAreaStatus, setWorkAreaStatus] = useState({
|
||||
completed: 0,
|
||||
|
||||
@ -17,33 +17,37 @@ import {
|
||||
getCachedData,
|
||||
useSelectedProject,
|
||||
} from "../../slices/apiDataManager";
|
||||
import { useProjectAssignedServices, useProjectDetails, useProjectInfra } from "../../hooks/useProjects";
|
||||
import {
|
||||
useCurrentService,
|
||||
useProjectAssignedServices,
|
||||
useProjectDetails,
|
||||
useProjectInfra,
|
||||
} from "../../hooks/useProjects";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { refreshData } from "../../slices/localVariablesSlice";
|
||||
import eventBus from "../../services/eventBus";
|
||||
import { useParams } from "react-router-dom";
|
||||
import GlobalModel from "../common/GlobalModel";
|
||||
import { setService } from "../../slices/globalVariablesSlice";
|
||||
|
||||
const ProjectInfra = ({ data, onDataChange, eachSiteEngineer }) => {
|
||||
const projectId = useSelectedProject();
|
||||
const selectedService = useCurrentService();
|
||||
const reloadedData = useSelector((store) => store.localVariables.reload);
|
||||
const [expandedBuildings, setExpandedBuildings] = useState([]);
|
||||
const { projectInfra, isLoading, error } = useProjectInfra(projectId)
|
||||
const { projectInfra, isLoading, error } = useProjectInfra(projectId);
|
||||
const { projects_Details, refetch, loading } = useProjectDetails(data?.id);
|
||||
const [project, setProject] = useState(projects_Details);
|
||||
const ManageInfra = useHasUserPermission(MANAGE_PROJECT_INFRA);
|
||||
const ManageTask = useHasUserPermission(MANAGE_TASK)
|
||||
const ManageTask = useHasUserPermission(MANAGE_TASK);
|
||||
const [showModalFloor, setshowModalFloor] = useState(false);
|
||||
const [showModalWorkArea, setshowModalWorkArea] = useState(false);
|
||||
const [showModalTask, setshowModalTask] = useState(false);
|
||||
const [showModalBuilding, setshowModalBuilding] = useState(false);
|
||||
const dispatch = useDispatch();
|
||||
const { data: assignedServices, isLoading: servicesLoading } = useProjectAssignedServices(projectId);
|
||||
const { data: assignedServices, isLoading: servicesLoading } =
|
||||
useProjectAssignedServices(projectId);
|
||||
|
||||
const [selectedService, setSelectedService] = useState("");
|
||||
const handleServiceChange = (e) => {
|
||||
setSelectedService(e.target.value);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
setProject(projectInfra);
|
||||
@ -51,34 +55,58 @@ const ProjectInfra = ({ data, onDataChange, eachSiteEngineer }) => {
|
||||
|
||||
const signalRHandler = (response) => {
|
||||
setProject(response);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{showModalBuilding && <GlobalModel isOpen={showModalBuilding} size="md" closeModal={() => setshowModalBuilding(false)}>
|
||||
{showModalBuilding && (
|
||||
<GlobalModel
|
||||
isOpen={showModalBuilding}
|
||||
size="md"
|
||||
closeModal={() => setshowModalBuilding(false)}
|
||||
>
|
||||
<BuildingModel
|
||||
project={projectInfra}
|
||||
onClose={() => setshowModalBuilding(false)}
|
||||
/>
|
||||
</GlobalModel>}
|
||||
{showModalFloor && <GlobalModel isOpen={showModalFloor} size="md" closeModal={() => setshowModalFloor(false)}>
|
||||
</GlobalModel>
|
||||
)}
|
||||
{showModalFloor && (
|
||||
<GlobalModel
|
||||
isOpen={showModalFloor}
|
||||
size="md"
|
||||
closeModal={() => setshowModalFloor(false)}
|
||||
>
|
||||
<FloorModel
|
||||
project={projectInfra}
|
||||
onClose={() => setshowModalFloor(false)}
|
||||
/>
|
||||
</GlobalModel>}
|
||||
{showModalWorkArea && <GlobalModel isOpen={showModalWorkArea} size="lg" closeModal={() => setshowModalWorkArea(false)} >
|
||||
</GlobalModel>
|
||||
)}
|
||||
{showModalWorkArea && (
|
||||
<GlobalModel
|
||||
isOpen={showModalWorkArea}
|
||||
size="lg"
|
||||
closeModal={() => setshowModalWorkArea(false)}
|
||||
>
|
||||
<WorkAreaModel
|
||||
project={projectInfra}
|
||||
onClose={() => setshowModalWorkArea(false)}
|
||||
/>
|
||||
</GlobalModel>}
|
||||
{showModalTask && (<GlobalModel isOpen={showModalTask} size="lg" closeModal={() => setshowModalTask(false)}>
|
||||
</GlobalModel>
|
||||
)}
|
||||
{showModalTask && (
|
||||
<GlobalModel
|
||||
isOpen={showModalTask}
|
||||
size="lg"
|
||||
closeModal={() => setshowModalTask(false)}
|
||||
>
|
||||
<TaskModel
|
||||
project={projectInfra}
|
||||
onClose={() => setshowModalTask(false)}
|
||||
/>
|
||||
</GlobalModel>)}
|
||||
</GlobalModel>
|
||||
)}
|
||||
<div className="col-md-12 col-lg-12 col-xl-12 order-0 mb-4">
|
||||
<div className="card">
|
||||
<div className="card-body" style={{ padding: "0.5rem" }}>
|
||||
@ -88,8 +116,9 @@ const ProjectInfra = ({ data, onDataChange, eachSiteEngineer }) => {
|
||||
className="dataTables_length text-start py-2 px-6 col-md-4 col-12"
|
||||
id="DataTables_Table_0_length"
|
||||
>
|
||||
{!servicesLoading && assignedServices?.length > 0 && (
|
||||
assignedServices.length > 1 ? (
|
||||
{!servicesLoading &&
|
||||
assignedServices?.length > 0 &&
|
||||
(assignedServices.length > 1 ? (
|
||||
<label>
|
||||
<select
|
||||
name="DataTables_Table_0_length"
|
||||
@ -97,7 +126,7 @@ const ProjectInfra = ({ data, onDataChange, eachSiteEngineer }) => {
|
||||
className="form-select form-select-sm"
|
||||
aria-label="Select Service"
|
||||
value={selectedService}
|
||||
onChange={handleServiceChange}
|
||||
onChange={(e) => dispatch(setService(e.target.value))}
|
||||
>
|
||||
<option value="">All Services</option>
|
||||
{assignedServices.map((service) => (
|
||||
@ -109,8 +138,7 @@ const ProjectInfra = ({ data, onDataChange, eachSiteEngineer }) => {
|
||||
</label>
|
||||
) : (
|
||||
<h5>{assignedServices[0].name}</h5>
|
||||
)
|
||||
)}
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Buttons Section (aligned to right) */}
|
||||
@ -140,16 +168,20 @@ const ProjectInfra = ({ data, onDataChange, eachSiteEngineer }) => {
|
||||
>
|
||||
<i className="bx bx-plus-circle me-2"></i>
|
||||
Manage Work Areas
|
||||
</button></>)}
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
|
||||
{(ManageTask || ManageInfra) && (<button
|
||||
{(ManageTask || ManageInfra) && (
|
||||
<button
|
||||
type="button"
|
||||
className="link-button btn btn-xs rounded-md m-1 btn-primary"
|
||||
onClick={() => setshowModalTask(true)}
|
||||
>
|
||||
<i className="bx bx-plus-circle me-2"></i>
|
||||
Create Tasks
|
||||
</button>)}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="row ">
|
||||
@ -161,7 +193,11 @@ const ProjectInfra = ({ data, onDataChange, eachSiteEngineer }) => {
|
||||
serviceId={selectedService}
|
||||
/>
|
||||
)}
|
||||
{!isLoading && projectInfra?.length == 0 && <div className="mt-5"><p>No Infra Avaiable</p></div>}
|
||||
{!isLoading && projectInfra?.length == 0 && (
|
||||
<div className="mt-5">
|
||||
<p>No Infra Avaiable</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -14,6 +14,16 @@ import {
|
||||
} from "@tanstack/react-query";
|
||||
import showToast from "../services/toastService";
|
||||
|
||||
|
||||
|
||||
export const useCurrentService = ()=>{
|
||||
return useSelector((store)=>store.globalVariables.selectedServiceId)
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// ------------------------------Query-------------------
|
||||
|
||||
export const useProjects = () => {
|
||||
|
||||
@ -1,289 +0,0 @@
|
||||
import React, { useEffect, useMemo, useState } from "react";
|
||||
import { useDispatch } from "react-redux";
|
||||
import { useTaskList } from "../../hooks/useTasks";
|
||||
import { useProjectAssignedServices, useProjectName } from "../../hooks/useProjects";
|
||||
import { setProjectId } from "../../slices/localVariablesSlice";
|
||||
import Breadcrumb from "../../components/common/Breadcrumb";
|
||||
import DateRangePicker from "../../components/common/DateRangePicker";
|
||||
import FilterIcon from "../../components/common/FilterIcon";
|
||||
import GlobalModel from "../../components/common/GlobalModel";
|
||||
import ReportTask from "../../components/Activities/ReportTask";
|
||||
import ReportTaskComments from "../../components/Activities/ReportTaskComments";
|
||||
import SubTask from "../../components/Activities/SubTask";
|
||||
import { formatNumber, formatUTCToLocalTime } from "../../utils/dateUtils";
|
||||
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
|
||||
import { APPROVE_TASK, ASSIGN_REPORT_TASK } from "../../utils/constants";
|
||||
import { useSelectedProject } from "../../slices/apiDataManager";
|
||||
import moment from "moment";
|
||||
import Loader from "../../components/common/Loader";
|
||||
|
||||
const DailyTask = () => {
|
||||
const dispatch = useDispatch();
|
||||
const selectedProject = useSelectedProject();
|
||||
const { projectNames } = useProjectName();
|
||||
const ApprovedTaskRights = useHasUserPermission(APPROVE_TASK);
|
||||
const ReportTaskRights = useHasUserPermission(ASSIGN_REPORT_TASK);
|
||||
|
||||
const { data: assignedServices, isLoading: servicesLoading } = useProjectAssignedServices(selectedProject);
|
||||
|
||||
const [selectedService, setSelectedService] = useState("");
|
||||
|
||||
const handleServiceChange = (e) => {
|
||||
setSelectedService(e.target.value);
|
||||
};
|
||||
|
||||
const [filters, setFilters] = useState({
|
||||
selectedBuilding: "",
|
||||
selectedFloors: [],
|
||||
selectedActivities: [],
|
||||
});
|
||||
|
||||
const [dateRange, setDateRange] = useState({ startDate: "", endDate: "" });
|
||||
|
||||
const { TaskList, loading: taskLoading } = useTaskList(
|
||||
selectedProject || null,
|
||||
dateRange?.startDate || null,
|
||||
dateRange?.endDate || null
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (!selectedProject && projectNames.length > 0) {
|
||||
debugger
|
||||
dispatch(setProjectId(projectNames[0].id));
|
||||
}
|
||||
}, [selectedProject, projectNames, dispatch]);
|
||||
|
||||
useEffect(() => {
|
||||
setFilters({
|
||||
selectedBuilding: "",
|
||||
selectedFloors: [],
|
||||
selectedActivities: [],
|
||||
});
|
||||
}, [selectedProject]);
|
||||
|
||||
const filteredTasks = useMemo(() => {
|
||||
if (!TaskList) return [];
|
||||
return TaskList.filter((task) => {
|
||||
const { selectedBuilding, selectedFloors, selectedActivities } = filters;
|
||||
|
||||
if (selectedBuilding && task?.workItem?.workArea?.floor?.building?.name !== selectedBuilding) return false;
|
||||
if (selectedFloors.length > 0 && !selectedFloors.includes(task?.workItem?.workArea?.floor?.floorName)) return false;
|
||||
if (selectedActivities.length > 0 && !selectedActivities.includes(task?.workItem?.activityMaster?.activityName)) return false;
|
||||
|
||||
return true;
|
||||
});
|
||||
}, [TaskList, filters]);
|
||||
|
||||
const groupedTasks = useMemo(() => {
|
||||
const groups = {};
|
||||
filteredTasks.forEach((task) => {
|
||||
const date = task.assignmentDate.split("T")[0];
|
||||
if (!groups[date]) groups[date] = [];
|
||||
groups[date].push(task);
|
||||
});
|
||||
return Object.keys(groups)
|
||||
.sort((a, b) => new Date(b) - new Date(a))
|
||||
.map((date) => ({ date, tasks: groups[date] }));
|
||||
}, [filteredTasks]);
|
||||
|
||||
const [modal, setModal] = useState({ type: null, data: null });
|
||||
|
||||
const openModal = (type, data = null) => setModal({ type, data });
|
||||
const closeModal = () => setModal({ type: null, data: null });
|
||||
|
||||
const renderTeamMembers = (task, refIndex) => (
|
||||
<div
|
||||
key={refIndex}
|
||||
tabIndex="0"
|
||||
className="d-flex align-items-center avatar-group justify-content-center"
|
||||
data-bs-toggle="popover"
|
||||
data-bs-trigger="focus"
|
||||
data-bs-placement="left"
|
||||
data-bs-html="true"
|
||||
data-bs-content={`
|
||||
<div class="border border-secondary rounded custom-popover p-2 px-3">
|
||||
${task.teamMembers
|
||||
.map(
|
||||
(m) => `
|
||||
<div class="d-flex align-items-center gap-2 mb-2">
|
||||
<div class="avatar avatar-xs">
|
||||
<span class="avatar-initial rounded-circle bg-label-primary">
|
||||
${m?.firstName?.charAt(0) || ""}${m?.lastName?.charAt(0) || ""}
|
||||
</span>
|
||||
</div>
|
||||
<span>${m.firstName} ${m.lastName}</span>
|
||||
</div>`
|
||||
)
|
||||
.join("")}
|
||||
</div>
|
||||
`}
|
||||
>
|
||||
{task.teamMembers.slice(0, 3).map((m) => (
|
||||
<div key={m.id} className="avatar avatar-xs" title={`${m.firstName} ${m.lastName}`}>
|
||||
<span className="avatar-initial rounded-circle bg-label-primary">
|
||||
{m?.firstName.slice(0, 1)}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
{task.teamMembers.length > 3 && (
|
||||
<div className="avatar avatar-xs" title={`${task.teamMembers.length - 3} more`}>
|
||||
<span className="avatar-initial rounded-circle bg-label-secondary">+{task.teamMembers.length - 3}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
{modal.type === "report" && (
|
||||
<GlobalModel isOpen size="md" closeModal={closeModal}>
|
||||
<ReportTask report={modal.data} closeModal={closeModal} />
|
||||
</GlobalModel>
|
||||
)}
|
||||
{modal.type === "comments" && (
|
||||
<GlobalModel isOpen size="lg" closeModal={closeModal}>
|
||||
<ReportTaskComments
|
||||
commentsData={modal.data.task}
|
||||
actionAllow={modal.data.isActionAllow}
|
||||
handleCloseAction={(isSubTask) => {
|
||||
if (isSubTask) openModal("subtask", modal.data.task);
|
||||
else closeModal();
|
||||
}}
|
||||
closeModal={closeModal}
|
||||
/>
|
||||
</GlobalModel>
|
||||
)}
|
||||
{modal.type === "subtask" && (
|
||||
<GlobalModel isOpen size="lg" closeModal={closeModal}>
|
||||
<SubTask activity={modal.data} onClose={closeModal} />
|
||||
</GlobalModel>
|
||||
)}
|
||||
|
||||
<div className="container-fluid">
|
||||
<Breadcrumb data={[{ label: "Home", link: "/dashboard" }, { label: "Daily Progress Report" }]} />
|
||||
|
||||
<div className="card card-action mb-6 p-5">
|
||||
<div className="card-body p-1 p-sm-2">
|
||||
{!selectedProject && (<div className="text-center text-muted">Please Select Project</div>)}
|
||||
|
||||
<div className="d-flex align-items-center justify-content-between mb-2">
|
||||
{/* --- Left: Service Dropdown + Filter Icon --- */}
|
||||
<div className="d-flex align-items-center gap-6">
|
||||
<div className="me-3">
|
||||
{!servicesLoading && assignedServices?.length > 0 && (
|
||||
assignedServices.length > 1 ? (
|
||||
<label>
|
||||
<select
|
||||
name="DataTables_Table_0_length"
|
||||
aria-controls="DataTables_Table_0"
|
||||
className="form-select form-select-sm"
|
||||
aria-label="Select Service"
|
||||
value={selectedService}
|
||||
onChange={handleServiceChange}
|
||||
style={{ fontSize: "0.875rem", height: "35px", width: "190px" }}
|
||||
>
|
||||
<option value="">All Services</option>
|
||||
{assignedServices.map((service) => (
|
||||
<option key={service.id} value={service.id}>
|
||||
{service.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
) : (
|
||||
<h5>{assignedServices[0].name}</h5>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* --- Right: DateRangePicker --- */}
|
||||
<div className="d-flex justify-content-end align-items-center gap-3 me-3">
|
||||
<FilterIcon
|
||||
taskListData={TaskList}
|
||||
onApplyFilters={setFilters}
|
||||
currentSelectedBuilding={filters.selectedBuilding}
|
||||
currentSelectedFloors={filters.selectedFloors}
|
||||
currentSelectedActivities={filters.selectedActivities}
|
||||
selectedProject={selectedProject}
|
||||
/>
|
||||
<DateRangePicker
|
||||
onRangeChange={setDateRange}
|
||||
endDateMode="today"
|
||||
DateDifference="6"
|
||||
dateFormat="DD-MM-YYYY"
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
{/* --- Table --- */}
|
||||
<div className="table-responsive text-nowrap mt-3" style={{ minHeight: "200px" }}>
|
||||
<table className="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Activity</th>
|
||||
<th>Assigned</th>
|
||||
<th>Completed</th>
|
||||
<th>Assign On</th>
|
||||
<th>Team</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{taskLoading && (
|
||||
<tr>
|
||||
<td colSpan={6} className="text-center align-middle" style={{ height: "200px" }}>
|
||||
<Loader />
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
{!taskLoading && groupedTasks.length === 0 && (
|
||||
<tr>
|
||||
<td colSpan={6} className="text-center align-middle" style={{ height: "200px" }}>
|
||||
No reports available for the selected date range.
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
{!taskLoading &&
|
||||
groupedTasks.map(({ date, tasks }) => (
|
||||
<React.Fragment key={date}>
|
||||
<tr className="table-row-header text-start">
|
||||
<td colSpan={6}><strong>{formatUTCToLocalTime(date)}</strong></td>
|
||||
</tr>
|
||||
{tasks.map((task, idx) => (
|
||||
<tr key={task.id || idx}>
|
||||
<td className="flex-wrap text-start">
|
||||
<div>{task.workItem.activityMaster?.activityName || "No Activity Name"}</div>
|
||||
<div className="text-sm">
|
||||
{task.workItem.workArea?.floor?.building?.name} › {task.workItem.workArea?.floor?.floorName} › {task.workItem.workArea?.areaName}
|
||||
</div>
|
||||
</td>
|
||||
<td>{formatNumber(task.plannedTask)} / {formatNumber(task.workItem.plannedWork - task.workItem.completedWork)}</td>
|
||||
<td>{task.completedTask}</td>
|
||||
<td>{formatUTCToLocalTime(task.assignmentDate)}</td>
|
||||
<td className="text-center">{renderTeamMembers(task, idx)}</td>
|
||||
<td className="text-center">
|
||||
<div className="d-flex justify-content-end gap-2">
|
||||
{ReportTaskRights && !task.reportedDate && (
|
||||
<button className="btn btn-xs btn-primary" onClick={() => openModal("report", task)}>Report</button>
|
||||
)}
|
||||
{ApprovedTaskRights && task.reportedDate && !task.approvedBy && (
|
||||
<button className="btn btn-xs btn-warning" onClick={() => openModal("comments", { task, isActionAllow: true })}>QC</button>
|
||||
)}
|
||||
<button className="btn btn-xs btn-primary" onClick={() => openModal("comments", { task, isActionAllow: false })}>Comment</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
export default DailyTask;
|
||||
@ -1,32 +1,34 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import Breadcrumb from "../../components/common/Breadcrumb";
|
||||
import InfraPlanning from "../../components/Activities/InfraPlanning";
|
||||
import { useProjectName } from "../../hooks/useProjects";
|
||||
import { useCurrentService, useProjectName } from "../../hooks/useProjects";
|
||||
import { useDispatch } from "react-redux";
|
||||
import { setProjectId } from "../../slices/localVariablesSlice";
|
||||
import { useSelectedProject } from "../../slices/apiDataManager";
|
||||
import { useProjectAssignedServices } from "../../hooks/useProjects";
|
||||
import { setService } from "../../slices/globalVariablesSlice";
|
||||
|
||||
const TaskPlannng = () => {
|
||||
const TaskPlanning = () => {
|
||||
const selectedProject = useSelectedProject();
|
||||
const selectedService = useCurrentService();
|
||||
const dispatch = useDispatch();
|
||||
|
||||
const { projectNames = [], loading: projectLoading } = useProjectName();
|
||||
|
||||
// Service dropdown state
|
||||
const { data: assignedServices, isLoading: servicesLoading } =
|
||||
const { data, isLoading: servicesLoading } =
|
||||
useProjectAssignedServices(selectedProject);
|
||||
const [selectedService, setSelectedService] = useState("");
|
||||
|
||||
// Set default project if none selected
|
||||
useEffect(() => {
|
||||
if (!selectedProject && projectNames?.length > 0) {
|
||||
if (!selectedProject && projectNames.length > 0) {
|
||||
dispatch(setProjectId(projectNames[0]?.id));
|
||||
}
|
||||
}, [projectNames, selectedProject, dispatch]);
|
||||
|
||||
const handleServiceChange = (e) => {
|
||||
setSelectedService(e.target.value);
|
||||
};
|
||||
|
||||
// Loading state
|
||||
if (projectLoading) {
|
||||
return <div className="text-center py-5">Loading...</div>;
|
||||
}
|
||||
return (
|
||||
<div className="container-fluid">
|
||||
<Breadcrumb
|
||||
@ -36,51 +38,39 @@ const TaskPlannng = () => {
|
||||
]}
|
||||
/>
|
||||
|
||||
<div className="card">
|
||||
<div className="card-body">
|
||||
{/* Service Dropdown */}
|
||||
|
||||
<div
|
||||
className="dataTables_length text-start py-2 px-5 col-md-4 col-12"
|
||||
id="DataTables_Table_0_length"
|
||||
>
|
||||
{!servicesLoading && assignedServices?.length > 0 && (
|
||||
assignedServices.length > 1 ? (
|
||||
<label>
|
||||
<div className="card py-2 ">
|
||||
<div className="col-sm-4 col-md-3 col-12 px-4 py-2 text-start">
|
||||
{data?.length === 0 ? (
|
||||
<p className="badge bg-label-secondary m-0">Service not assigned</p>
|
||||
) : (
|
||||
<select
|
||||
name="DataTables_Table_0_length"
|
||||
aria-controls="DataTables_Table_0"
|
||||
className="form-select form-select-sm"
|
||||
aria-label="Select Service"
|
||||
value={selectedService}
|
||||
onChange={handleServiceChange}
|
||||
style={{ fontSize: "0.875rem", height: "35px", width: "190px" }}
|
||||
value={selectedService ?? ""}
|
||||
onChange={(e) => dispatch(setService(e.target.value))}
|
||||
>
|
||||
<option value="">All Services</option>
|
||||
{assignedServices.map((service) => (
|
||||
{!servicesLoading &&
|
||||
data?.map((service) => (
|
||||
<option key={service.id} value={service.id}>
|
||||
{service.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
) : (
|
||||
<h5>{assignedServices[0].name}</h5>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
|
||||
|
||||
{/* Infra Planning Component */}
|
||||
{/* Planning Component */}
|
||||
{selectedProject ? (
|
||||
<InfraPlanning selectedService={selectedService} />
|
||||
) : (
|
||||
<div className="text-center">Please Select Project</div>
|
||||
<div className="text-center py-3">Please select a project</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default TaskPlannng;
|
||||
export default TaskPlanning;
|
||||
|
||||
@ -83,7 +83,7 @@ const DailyProgrssReport = () => {
|
||||
<div className="col-sm-4 col-md-3 col-12">
|
||||
<select
|
||||
className="form-select form-select-sm"
|
||||
value={service}
|
||||
value={service ?? ""}
|
||||
onChange={(e) => setService(e.target.value)}
|
||||
>
|
||||
{isLoading ? (
|
||||
@ -91,7 +91,7 @@ const DailyProgrssReport = () => {
|
||||
) : (
|
||||
<>
|
||||
<option value="" selected>
|
||||
Select service
|
||||
All Services
|
||||
</option>
|
||||
{data?.data?.map((service) => (
|
||||
<option key={service.id} value={service.id}>
|
||||
|
||||
@ -21,7 +21,6 @@ import EmployeeList from "../pages/employee/EmployeeList";
|
||||
import EmployeeProfile from "../pages/employee/EmployeeProfile";
|
||||
import Inventory from "../pages/project/Inventory";
|
||||
import AttendancePage from "../pages/Activities/AttendancePage";
|
||||
import DailyTask from "../pages/Activities/DailyTask";
|
||||
import TaskPlannng from "../pages/Activities/TaskPlannng";
|
||||
import Reports from "../pages/reports/Reports";
|
||||
import ImageGallary from "../pages/Gallary/ImageGallary";
|
||||
|
||||
@ -5,6 +5,7 @@ const globalVariablesSlice = createSlice({
|
||||
initialState: {
|
||||
loginUser: null,
|
||||
currentTenant: null,
|
||||
selectedServiceId : null
|
||||
},
|
||||
reducers: {
|
||||
setGlobalVariable: (state, action) => {
|
||||
@ -17,9 +18,12 @@ const globalVariablesSlice = createSlice({
|
||||
setCurrentTenant: (state, action) => {
|
||||
state.currentTenant = action.payload;
|
||||
},
|
||||
setService: (state, action) => {
|
||||
state.selectedServiceId = action.payload;
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const { setGlobalVariable, setLoginUserPermmisions, setCurrentTenant } =
|
||||
export const { setGlobalVariable, setLoginUserPermmisions, setCurrentTenant, setService} =
|
||||
globalVariablesSlice.actions;
|
||||
export default globalVariablesSlice.reducer;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user