marco.pms.web/src/pages/Activities/TaskPlannng.jsx

77 lines
2.5 KiB
JavaScript

import React, { useEffect, useState } from "react";
import Breadcrumb from "../../components/common/Breadcrumb";
import InfraPlanning from "../../components/Activities/InfraPlanning";
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 TaskPlanning = () => {
const selectedProject = useSelectedProject();
const selectedService = useCurrentService();
const dispatch = useDispatch();
const { projectNames = [], loading: projectLoading } = useProjectName();
const { data, isLoading: servicesLoading } =
useProjectAssignedServices(selectedProject);
// Set default project if none selected
useEffect(() => {
if (!selectedProject && projectNames.length > 0) {
dispatch(setProjectId(projectNames[0]?.id));
}
}, [projectNames, selectedProject, dispatch]);
// Loading state
if (projectLoading) {
return <div className="text-center py-5">Loading...</div>;
}
return (
<div className="container-fluid">
<Breadcrumb
data={[
{ label: "Home", link: "/dashboard" },
{ label: "Daily Task Planning" },
]}
/>
<div className="card py-2 page-min-h">
<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={(e) => dispatch(setService(e.target.value))}
>
<option value="">All Services</option>
{!servicesLoading &&
data?.map((service) => (
<option key={service.id} value={service.id}>
{service.name}
</option>
))}
</select>
)}
</div>
{/* Planning Component */}
{selectedProject ? (
<InfraPlanning />
) : (
<div className="text-center py-3">Please select a project</div>
)}
</div>
</div>
);
};
export default TaskPlanning;