updated project files
This commit is contained in:
parent
482f8a9bcb
commit
198e31290c
@ -118,7 +118,7 @@ const Documents = ({ Document_Entity, Entity }) => {
|
||||
return (
|
||||
<DocumentContext.Provider value={contextValues}>
|
||||
<div className="mt-5">
|
||||
<div className="card d-flex p-2">
|
||||
<div className="card page-min-h d-flex p-2">
|
||||
<div className="row align-items-center">
|
||||
{/* Search */}
|
||||
<div className="d-flex col-8 col-md-8 col-lg-4 mb-md-0 align-items-center">
|
||||
|
||||
@ -1,11 +1,24 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { projectSchema, projectDefault } from "./ProjectSchema";
|
||||
import { useForm, Controller } from "react-hook-form";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { z } from "zod";
|
||||
|
||||
import Label from "../common/Label";
|
||||
import DatePicker from "../common/DatePicker";
|
||||
import { useCreateProject, useProjectDetails, useUpdateProject } from "../../hooks/useProjects";
|
||||
|
||||
const currentDate = new Date().toLocaleDateString('en-CA');
|
||||
import {
|
||||
DEFAULT_EMPTY_STATUS_ID,
|
||||
ITEMS_PER_PAGE,
|
||||
PROJECT_STATUS,
|
||||
} from "../../utils/constants";
|
||||
import {
|
||||
useOrganizationModal,
|
||||
useOrganizationsList,
|
||||
} from "../../hooks/useOrganization";
|
||||
import { localToUtc } from "../../utils/appUtils";
|
||||
|
||||
const currentDate = new Date().toLocaleDateString("en-CA");
|
||||
const formatDate = (date) => {
|
||||
if (!date) {
|
||||
return currentDate;
|
||||
@ -14,56 +27,23 @@ const formatDate = (date) => {
|
||||
if (isNaN(d.getTime())) {
|
||||
return currentDate;
|
||||
}
|
||||
return d.toLocaleDateString('en-CA');
|
||||
return d.toLocaleDateString("en-CA");
|
||||
};
|
||||
const ManageProjectInfo = ({ project, handleSubmitForm, onClose, isPending }) => {
|
||||
const [CurrentProject, setCurrentProject] = useState();
|
||||
const ManageProjectInfo = ({ project, onClose }) => {
|
||||
const [addressLength, setAddressLength] = useState(0);
|
||||
const maxAddressLength = 500;
|
||||
const { onOpen, startStep, flowType } = useOrganizationModal();
|
||||
|
||||
const ACTIVE_STATUS_ID = "b74da4c2-d07e-46f2-9919-e75e49b12731";
|
||||
const DEFAULT_EMPTY_STATUS_ID = "00000000-0000-0000-0000-000000000000";
|
||||
|
||||
const projectSchema = z
|
||||
.object({
|
||||
...(project?.id ? { id: z.string().optional() } : {}),
|
||||
name: z.string().min(1, { message: "Project Name is required" }),
|
||||
shortName: z.string().optional(),
|
||||
contactPerson: z
|
||||
.string()
|
||||
.min(1, { message: "Contact Person Name is required" })
|
||||
.regex(/^[A-Za-z\s]+$/, {
|
||||
message: "Contact Person must contain only letters",
|
||||
}),
|
||||
projectAddress: z
|
||||
.string()
|
||||
.min(1, { message: "Address is required" })
|
||||
.max(500, "Address must not exceed 150 characters"),
|
||||
startDate: z
|
||||
.string()
|
||||
.min(1, { message: "Start Date is required" })
|
||||
.default(currentDate),
|
||||
endDate: z
|
||||
.string()
|
||||
.min(1, { message: "End Date is required" })
|
||||
.default(currentDate),
|
||||
projectStatusId: z
|
||||
.string()
|
||||
.min(1, { message: "Status is required" }),
|
||||
promoterId:z.string().min(1,{message:"Promoter is required"}),
|
||||
pmcId:z.string().min(1,{message:"PMC is required"})
|
||||
})
|
||||
.refine(
|
||||
(data) => {
|
||||
const start = new Date(data.startDate);
|
||||
const end = new Date(data.endDate);
|
||||
return end >= start;
|
||||
},
|
||||
{
|
||||
path: ["endDate"], // attaches the error to the endDate field
|
||||
message: "End Date must be greater than Start Date",
|
||||
}
|
||||
const { projects_Details, loading } = useProjectDetails(project);
|
||||
const { data, isLoading, isError, error } = useOrganizationsList(
|
||||
ITEMS_PER_PAGE,
|
||||
1,
|
||||
true
|
||||
);
|
||||
const { mutate: UpdateProject, isPending } = useUpdateProject(() => {onClose?.()});
|
||||
const {mutate:CeateProject,isPending:isCreating}= useCreateProject(()=>onClose?.())
|
||||
|
||||
const {
|
||||
register,
|
||||
@ -74,81 +54,67 @@ const ManageProjectInfo = ({ project, handleSubmitForm, onClose, isPending }) =>
|
||||
getValues,
|
||||
} = useForm({
|
||||
resolver: zodResolver(projectSchema),
|
||||
defaultValues: {
|
||||
id: project?.id || "",
|
||||
name: project?.name || "",
|
||||
shortName: project?.shortName || "",
|
||||
contactPerson: project?.contactPerson || "",
|
||||
projectAddress: project?.projectAddress || "",
|
||||
startDate: formatDate(project?.startDate) || currentDate,
|
||||
endDate: formatDate(project?.endDate) || currentDate,
|
||||
projectStatusId: project?.projectStatusId && project.projectStatusId !== DEFAULT_EMPTY_STATUS_ID
|
||||
|
||||
? String(project.projectStatusId)
|
||||
|
||||
: ACTIVE_STATUS_ID,
|
||||
promoterId:project.promoterId,
|
||||
pmcId:project.pmcId
|
||||
},
|
||||
defaultValues: projectDefault,
|
||||
mode: "onChange",
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
setCurrentProject(project);
|
||||
reset(
|
||||
project
|
||||
? {
|
||||
id: project?.id || "",
|
||||
name: project?.name || "",
|
||||
shortName: project?.shortName || "",
|
||||
contactPerson: project?.contactPerson || "",
|
||||
projectAddress: project?.projectAddress || "",
|
||||
startDate: formatDate(project?.startDate) || "",
|
||||
endDate: formatDate(project?.endDate) || "",
|
||||
projectStatusId: String(project?.projectStatus?.id) || "00000000-0000-0000-0000-000000000000",
|
||||
if (project && projects_Details)
|
||||
reset({
|
||||
name: projects_Details?.name || "",
|
||||
shortName: projects_Details?.shortName || "",
|
||||
contactPerson: projects_Details?.contactPerson || "",
|
||||
projectAddress: projects_Details?.projectAddress || "",
|
||||
startDate: formatDate(projects_Details?.startDate) || "",
|
||||
endDate: formatDate(projects_Details?.endDate) || "",
|
||||
projectStatusId:
|
||||
String(projects_Details?.projectStatus?.id) ||
|
||||
DEFAULT_EMPTY_STATUS_IDF,
|
||||
promoterId: projects_Details.promoter.id || "",
|
||||
pmcId: projects_Details.pmc.id || "",
|
||||
});
|
||||
setAddressLength(projects_Details?.projectAddress?.length || 0);
|
||||
}, [project, projects_Details, reset]);
|
||||
|
||||
const onSubmitForm = (formData) => {
|
||||
if (project) {
|
||||
let payload = {
|
||||
...formData,
|
||||
startDate: localToUtc(formData.startDate),
|
||||
endDate: localToUtc(formData.endDate),
|
||||
id: project,
|
||||
};
|
||||
console.log(payload);
|
||||
UpdateProject({ projectId: project, payload: payload });
|
||||
}else{
|
||||
let payload = {
|
||||
...formData,
|
||||
startDate: localToUtc(formData.startDate),
|
||||
endDate: localToUtc(formData.endDate),
|
||||
};
|
||||
CeateProject(payload)
|
||||
}
|
||||
: {}
|
||||
);
|
||||
setAddressLength(project?.projectAddress?.length || 0);
|
||||
}, [project, reset]);
|
||||
|
||||
/**
|
||||
|
||||
* Handles the form submission.
|
||||
|
||||
* @param {object} updatedProject - The project data from the form.
|
||||
|
||||
*/
|
||||
|
||||
const onSubmitForm = (updatedProject) => {
|
||||
|
||||
handleSubmitForm(updatedProject);
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
reset({
|
||||
id: project?.id || "",
|
||||
name: project?.name || "",
|
||||
shortName: project?.shortName || "",
|
||||
contactPerson: project?.contactPerson || "",
|
||||
projectAddress: project?.projectAddress || "",
|
||||
startDate: formatDate(project?.startDate) || currentDate,
|
||||
endDate: formatDate(project?.endDate) || currentDate,
|
||||
projectStatusId: String(project?.projectStatus?.id || "00000000-0000-0000-0000-000000000000"),
|
||||
});
|
||||
reset(projectDefault);
|
||||
onClose();
|
||||
};
|
||||
const handleOrganizaioFinder = () => {
|
||||
onClose();
|
||||
onOpen({ startStep: 2, flowType: "default" });
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
|
||||
<div className="p-sm-2 p-2">
|
||||
|
||||
<div className="text-center mb-2">
|
||||
<h5 className="mb-2">
|
||||
{project?.id ? "Edit Project" : "Create Project"}
|
||||
</h5>
|
||||
<h5 className="mb-2">{project ? "Edit Project" : "Create Project"}</h5>
|
||||
</div>
|
||||
<form className="row g-2 text-start" onSubmit={handleSubmit(onSubmitForm)}>
|
||||
<form
|
||||
className="row g-2 text-start"
|
||||
onSubmit={handleSubmit(onSubmitForm)}
|
||||
>
|
||||
<div className="col-12 col-md-12">
|
||||
<Label htmlFor="name" required>
|
||||
Project Name
|
||||
@ -228,7 +194,10 @@ const ManageProjectInfo = ({ project, handleSubmitForm, onClose, isPending }) =>
|
||||
/>
|
||||
|
||||
{errors.startDate && (
|
||||
<div className="danger-text text-start" style={{ fontSize: "12px" }}>
|
||||
<div
|
||||
className="danger-text text-start"
|
||||
style={{ fontSize: "12px" }}
|
||||
>
|
||||
{errors.startDate.message}
|
||||
</div>
|
||||
)}
|
||||
@ -248,13 +217,16 @@ const ManageProjectInfo = ({ project, handleSubmitForm, onClose, isPending }) =>
|
||||
/>
|
||||
|
||||
{errors.endDate && (
|
||||
<div className="danger-text text-start" style={{ fontSize: "12px" }}>
|
||||
<div
|
||||
className="danger-text text-start"
|
||||
style={{ fontSize: "12px" }}
|
||||
>
|
||||
{errors.endDate.message}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="col-12 col-md-6">
|
||||
<div className="col-12 ">
|
||||
<label className="form-label" htmlFor="modalEditUserStatus">
|
||||
Status
|
||||
</label>
|
||||
@ -268,15 +240,11 @@ const ManageProjectInfo = ({ project, handleSubmitForm, onClose, isPending }) =>
|
||||
valueAsNumber: false,
|
||||
})}
|
||||
>
|
||||
{/* <option disabled>Status</option>
|
||||
<option value="b74da4c2-d07e-46f2-9919-e75e49b12731">Active</option> */}
|
||||
<option value={ACTIVE_STATUS_ID}>Active</option>
|
||||
<option value="603e994b-a27f-4e5d-a251-f3d69b0498ba">On Hold</option>
|
||||
|
||||
<option value="cdad86aa-8a56-4ff4-b633-9c629057dfef">In Progress</option>
|
||||
<option value="ef1c356e-0fe0-42df-a5d3-8daee355492d">Inactive</option>
|
||||
|
||||
<option value="33deaef9-9af1-4f2a-b443-681ea0d04f81">Completed</option>
|
||||
{PROJECT_STATUS.map((status) => (
|
||||
<option key={status.id} value={status.id}>
|
||||
{status.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
{errors.projectStatusId && (
|
||||
<div
|
||||
@ -287,6 +255,83 @@ const ManageProjectInfo = ({ project, handleSubmitForm, onClose, isPending }) =>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="col-12 ">
|
||||
<label className="form-label" htmlFor="modalEditUserStatus">
|
||||
Promoter
|
||||
</label>
|
||||
<select
|
||||
className="select2 form-select form-select-sm"
|
||||
aria-label="Default select example"
|
||||
{...register("promoterId", {
|
||||
required: "Promoter is required",
|
||||
valueAsNumber: false,
|
||||
})}
|
||||
>
|
||||
{isLoading ? (
|
||||
<option>Loading...</option>
|
||||
) : (
|
||||
<>
|
||||
<option value="">Select Promoter</option>
|
||||
{data?.data?.map((org) => (
|
||||
<option key={org.id} value={org.id}>
|
||||
{org.name}
|
||||
</option>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
</select>
|
||||
{errors.promoterId && (
|
||||
<div
|
||||
className="danger-text text-start"
|
||||
style={{ fontSize: "12px" }}
|
||||
>
|
||||
{errors.promoterId.message}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="col-12 ">
|
||||
<label className="form-label" htmlFor="modalEditUserStatus">
|
||||
PMC
|
||||
</label>
|
||||
<select
|
||||
className="select2 form-select form-select-sm"
|
||||
aria-label="Default select example"
|
||||
{...register("pmcId", {
|
||||
required: "Promoter is required",
|
||||
valueAsNumber: false,
|
||||
})}
|
||||
>
|
||||
{isLoading ? (
|
||||
<option>Loading...</option>
|
||||
) : (
|
||||
<>
|
||||
<option value="">Select PMC</option>
|
||||
{data?.data?.map((org) => (
|
||||
<option key={org.id} value={org.id}>
|
||||
{org.name}
|
||||
</option>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
</select>
|
||||
{errors.pmcId && (
|
||||
<div
|
||||
className="danger-text text-start"
|
||||
style={{ fontSize: "12px" }}
|
||||
>
|
||||
{errors.pmcId.message}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="d-flex justify-content-between text-secondary text-tiny text-wrap">
|
||||
<span>
|
||||
<i className="bx bx-sm bx-info-circle"></i> Not found PMC and
|
||||
Pomoter, find through SPRID or create new
|
||||
</span>
|
||||
<small className="cursor-pointer" onClick={handleOrganizaioFinder}>
|
||||
<i className="bx bx-plus-circle text-primary"></i>
|
||||
</small>
|
||||
</div>
|
||||
|
||||
<div className="col-12 col-md-12">
|
||||
<Label htmlFor="projectAddress" required>
|
||||
@ -304,6 +349,7 @@ const ManageProjectInfo = ({ project, handleSubmitForm, onClose, isPending }) =>
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="text-end" style={{ fontSize: "12px" }}>
|
||||
{maxAddressLength - addressLength} characters left
|
||||
</div>
|
||||
@ -322,19 +368,18 @@ const ManageProjectInfo = ({ project, handleSubmitForm, onClose, isPending }) =>
|
||||
className="btn btn-label-secondary btn-sm me-2"
|
||||
onClick={handleCancel}
|
||||
aria-label="Close"
|
||||
disabled={isPending}
|
||||
disabled={isPending || isCreating}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
className="btn btn-primary btn-sm"
|
||||
disabled={isPending}
|
||||
disabled={isPending || isCreating}
|
||||
>
|
||||
{isPending ? "Please Wait..." : project?.id ? "Update" : "Submit"}
|
||||
{isPending||isCreating ? "Please Wait..." : project ? "Update" : "Submit"}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -1,211 +0,0 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import EmployeeRepository from "../../repositories/EmployeeRepository";
|
||||
import { useAllEmployees } from "../../hooks/useEmployees";
|
||||
import useSearch from "../../hooks/useSearch";
|
||||
import AssignEmployeeTable from "./AssignEmployeeTable";
|
||||
import showToast from "../../services/toastService";
|
||||
import "./MapUser.css";
|
||||
|
||||
const MapUsers = ({
|
||||
projectId,
|
||||
onClose,
|
||||
empJobRoles,
|
||||
onSubmit,
|
||||
allocation,
|
||||
assignedLoading,
|
||||
setAssignedLoading,
|
||||
}) => {
|
||||
const {
|
||||
employeesList,
|
||||
loading: employeeLoading,
|
||||
error,
|
||||
} = useAllEmployees(false);
|
||||
const [selectedEmployees, setSelectedEmployees] = useState([]);
|
||||
const [searchText, setSearchText] = useState("");
|
||||
|
||||
const handleAllocationData = Array.isArray(allocation) ? allocation : [];
|
||||
|
||||
const allocationEmployees = employeesList.map((employee) => {
|
||||
const allocationItem = handleAllocationData.find(
|
||||
(alloc) => alloc.employeeId === employee.id
|
||||
);
|
||||
return {
|
||||
...employee,
|
||||
isActive: allocationItem ? allocationItem.isActive : false,
|
||||
jobRoleId: allocationItem ? allocationItem.jobRoleId : employee.jobRoleId,
|
||||
};
|
||||
});
|
||||
|
||||
function parseDate(dateStr) {
|
||||
return new Date(dateStr.split(".")[0]);
|
||||
}
|
||||
|
||||
const latestAllocations = handleAllocationData.reduce((acc, alloc) => {
|
||||
const existingAlloc = acc[alloc.employeeId];
|
||||
|
||||
if (!existingAlloc) {
|
||||
acc[alloc.employeeId] = alloc;
|
||||
} else {
|
||||
const existingDate = parseDate(
|
||||
existingAlloc.reAllocationDate || existingAlloc.allocationDate
|
||||
);
|
||||
const newDate = parseDate(alloc.reAllocationDate || alloc.allocationDate);
|
||||
|
||||
if (newDate > existingDate) {
|
||||
acc[alloc.employeeId] = alloc;
|
||||
}
|
||||
}
|
||||
return acc;
|
||||
}, {});
|
||||
|
||||
const allocationEmployeesData = employeesList
|
||||
.map((employee) => {
|
||||
const allocationItem = latestAllocations[employee.id];
|
||||
return {
|
||||
...employee,
|
||||
isActive: allocationItem ? allocationItem.isActive : false,
|
||||
};
|
||||
})
|
||||
.filter((employee) => employee.isActive === false);
|
||||
|
||||
const { filteredData, setSearchQuery } = useSearch(
|
||||
allocationEmployeesData,
|
||||
searchText
|
||||
);
|
||||
|
||||
const handleRoleChange = (employeeId, newRoleId) => {
|
||||
setSelectedEmployees((prevSelectedEmployees) =>
|
||||
prevSelectedEmployees.map((emp) =>
|
||||
emp.id === employeeId ? { ...emp, jobRoleId: newRoleId } : emp
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
const handleCheckboxChange = (employeeId) => {
|
||||
setSelectedEmployees((prevSelectedEmployees) => {
|
||||
const updatedEmployees = [...prevSelectedEmployees];
|
||||
const employeeIndex = updatedEmployees.findIndex(
|
||||
(emp) => emp.id === employeeId
|
||||
);
|
||||
|
||||
if (employeeIndex !== -1) {
|
||||
const isSelected = !updatedEmployees[employeeIndex].isSelected;
|
||||
updatedEmployees[employeeIndex].isSelected = isSelected;
|
||||
} else {
|
||||
updatedEmployees.push({
|
||||
id: employeeId,
|
||||
isSelected: true,
|
||||
});
|
||||
}
|
||||
return updatedEmployees;
|
||||
});
|
||||
};
|
||||
|
||||
const handleSubmit = () => {
|
||||
setAssignedLoading(true);
|
||||
const selected = selectedEmployees
|
||||
.filter((emp) => emp.isSelected)
|
||||
.map((emp) => ({ empID: emp.id, jobRoleId: emp.jobRoleId }));
|
||||
if (selected.length > 0) {
|
||||
onSubmit(selected);
|
||||
setSelectedEmployees([]);
|
||||
} 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 text-center">
|
||||
<button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close">
|
||||
</button>
|
||||
</div>
|
||||
<p className="m-0 fw-semibold fs-5">Add Employee To Project</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 "
|
||||
id="DataTables_Table_0"
|
||||
aria-describedby="DataTables_Table_0_info"
|
||||
style={{ width: "100%" }}
|
||||
>
|
||||
<tbody>
|
||||
{employeeLoading && allocationEmployeesData.length === 0 && (
|
||||
<tr>
|
||||
<td>Loading..</td>
|
||||
</tr>
|
||||
)}
|
||||
|
||||
{!employeeLoading &&
|
||||
allocationEmployeesData.length === 0 &&
|
||||
filteredData.length === 0 && (
|
||||
<tr>
|
||||
<td>All employee assigned to Project.</td>
|
||||
</tr>
|
||||
)}
|
||||
|
||||
{!employeeLoading &&
|
||||
allocationEmployeesData.length > 0 &&
|
||||
filteredData.length === 0 && (
|
||||
<tr>
|
||||
<td>No matching employees found.</td>
|
||||
</tr>
|
||||
)}
|
||||
|
||||
{(filteredData.length > 0 ||
|
||||
allocationEmployeesData.length > 0) &&
|
||||
filteredData.map((emp) => (
|
||||
<AssignEmployeeTable
|
||||
key={emp.id}
|
||||
employee={emp}
|
||||
jobRoles={empJobRoles}
|
||||
isChecked={emp.isSelected}
|
||||
onRoleChange={handleRoleChange}
|
||||
onCheckboxChange={handleCheckboxChange}
|
||||
/>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div className="modal-footer mt-5 d-flex justify-content-end gap-0">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-sm btn-label-secondary"
|
||||
data-dismiss="modal"
|
||||
aria-label="Close"
|
||||
onClick={onClose}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
|
||||
{(filteredData.length > 0 || allocationEmployeesData.length > 0) && (
|
||||
<button className="btn btn-sm btn-primary" onClick={handleSubmit}>
|
||||
{assignedLoading ? "Please Wait..." : "Assign to Project"}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default MapUsers;
|
||||
@ -16,39 +16,13 @@ import {
|
||||
import GlobalModel from "../common/GlobalModel";
|
||||
import { useDispatch } from "react-redux";
|
||||
import { setProjectId } from "../../slices/localVariablesSlice";
|
||||
import { useProjectContext } from "../../pages/project/ProjectPage";
|
||||
|
||||
const ProjectCard = ({ projectData, recall }) => {
|
||||
const [projectInfo, setProjectInfo] = useState(projectData);
|
||||
const { projects_Details, loading, error, refetch } = useProjectDetails(
|
||||
projectInfo?.id, false
|
||||
);
|
||||
const [showModal, setShowModal] = useState(false);
|
||||
const dispatch = useDispatch()
|
||||
const ProjectCard = ({ project }) => {
|
||||
const dispatch = useDispatch();
|
||||
const navigate = useNavigate();
|
||||
const ManageProject = useHasUserPermission(MANAGE_PROJECT);
|
||||
const {
|
||||
mutate: updateProject,
|
||||
isPending,
|
||||
isSuccess,
|
||||
isError,
|
||||
} = useUpdateProject({
|
||||
onSuccessCallback: () => {
|
||||
setShowModal(false);
|
||||
},
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
setProjectInfo(projectData);
|
||||
}, [projectData])
|
||||
|
||||
const handleShow = async () => {
|
||||
try {
|
||||
const { data } = await refetch();
|
||||
setShowModal(true);
|
||||
} catch (err) {
|
||||
showToast("Failed to load project details", "error");
|
||||
}
|
||||
};
|
||||
const { setMangeProject } = useProjectContext();
|
||||
|
||||
const getProgress = (planned, completed) => {
|
||||
return (completed * 100) / planned + "%";
|
||||
@ -60,39 +34,18 @@ const ProjectCard = ({ projectData, recall }) => {
|
||||
const handleClose = () => setShowModal(false);
|
||||
|
||||
const handleViewProject = () => {
|
||||
dispatch(setProjectId(projectInfo.id))
|
||||
dispatch(setProjectId(project.id));
|
||||
navigate(`/projects/details`);
|
||||
};
|
||||
const handleViewActivities = () => {
|
||||
dispatch(setProjectId(projectInfo.id))
|
||||
navigate(`/activities/records?project=${projectInfo.id}`);
|
||||
};
|
||||
|
||||
const handleFormSubmit = (updatedProject) => {
|
||||
if (projectInfo?.id) {
|
||||
updateProject({
|
||||
projectId: projectInfo.id,
|
||||
updatedData: updatedProject,
|
||||
});
|
||||
}
|
||||
dispatch(setProjectId(project.id));
|
||||
navigate(`/activities/records?project=${project.id}`);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
|
||||
{showModal && projects_Details && (
|
||||
<GlobalModel isOpen={showModal} closeModal={handleClose}>
|
||||
<ManageProjectInfo
|
||||
project={projects_Details}
|
||||
handleSubmitForm={handleFormSubmit}
|
||||
onClose={handleClose}
|
||||
isPending={isPending}
|
||||
/>
|
||||
</GlobalModel>
|
||||
)}
|
||||
|
||||
<div className="col-md-6 col-lg-4 col-xl-4 order-0 mb-4">
|
||||
<div className={`card cursor-pointer ${isPending ? "bg-light opacity-50 pointer-events-none" : ""}`}>
|
||||
<div className={`card cursor-pointer`}>
|
||||
<div className="card-header pb-4">
|
||||
<div className="d-flex align-items-start">
|
||||
<div className="d-flex align-items-center">
|
||||
@ -107,12 +60,10 @@ const ProjectCard = ({ projectData, recall }) => {
|
||||
className="mb-0 stretched-link text-heading text-start"
|
||||
onClick={handleViewProject}
|
||||
>
|
||||
{projectInfo.shortName
|
||||
? projectInfo.shortName
|
||||
: projectInfo.name}
|
||||
{project?.shortName ? project?.shortName : project?.name}
|
||||
</h5>
|
||||
<div className="client-info text-body">
|
||||
<span>{projectInfo.shortName ? projectInfo.name : ""}</span>
|
||||
<span>{project.shortName ? project.name : ""}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -124,14 +75,6 @@ const ProjectCard = ({ projectData, recall }) => {
|
||||
data-bs-toggle="dropdown"
|
||||
aria-expanded="false"
|
||||
>
|
||||
{loading ? (
|
||||
<div
|
||||
className="spinner-border spinner-border-sm text-secondary"
|
||||
role="status"
|
||||
>
|
||||
<span className="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
) : (
|
||||
<i
|
||||
className="bx bx-dots-vertical-rounded bx-sm text-muted"
|
||||
data-bs-toggle="tooltip"
|
||||
@ -140,7 +83,6 @@ const ProjectCard = ({ projectData, recall }) => {
|
||||
data-bs-custom-class="tooltip-dark"
|
||||
title="More Action"
|
||||
></i>
|
||||
)}
|
||||
</button>
|
||||
<ul className="dropdown-menu dropdown-menu-end">
|
||||
<li>
|
||||
@ -154,15 +96,18 @@ const ProjectCard = ({ projectData, recall }) => {
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li onClick={handleShow}>
|
||||
<a className="dropdown-item">
|
||||
<li>
|
||||
<a className="dropdown-item" onClick={() =>
|
||||
setMangeProject({
|
||||
isOpen: true,
|
||||
Project: project.id,
|
||||
})
|
||||
}>
|
||||
<i className="bx bx-pencil me-2"></i>
|
||||
<span className="align-left">Modify</span>
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
onClick={handleViewActivities}
|
||||
>
|
||||
<li onClick={handleViewActivities}>
|
||||
<a className="dropdown-item">
|
||||
<i className="bx bx-task me-2"></i>
|
||||
<span className="align-left">Activities</span>
|
||||
@ -180,22 +125,22 @@ const ProjectCard = ({ projectData, recall }) => {
|
||||
<span className="text-heading fw-medium">
|
||||
Contact Person:{" "}
|
||||
</span>
|
||||
{projectInfo.contactPerson ? projectInfo.contactPerson : "NA"}
|
||||
{project.contactPerson ? project.contactPerson : "NA"}
|
||||
</p>
|
||||
<p className="mb-1">
|
||||
<span className="text-heading fw-medium">Start Date: </span>
|
||||
{projectInfo.startDate
|
||||
? moment(projectInfo.startDate).format("DD-MMM-YYYY")
|
||||
{project.startDate
|
||||
? moment(project.startDate).format("DD-MMM-YYYY")
|
||||
: "NA"}
|
||||
</p>
|
||||
<p className="mb-1">
|
||||
<span className="text-heading fw-medium">Deadline: </span>
|
||||
|
||||
{projectInfo.endDate
|
||||
? moment(projectInfo.endDate).format("DD-MMM-YYYY")
|
||||
{project.endDate
|
||||
? moment(project.endDate).format("DD-MMM-YYYY")
|
||||
: "NA"}
|
||||
</p>
|
||||
<p className="mb-0">{projectInfo.projectAddress}</p>
|
||||
<p className="mb-0">{project.projectAddress}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -205,36 +150,37 @@ const ProjectCard = ({ projectData, recall }) => {
|
||||
<span
|
||||
className={
|
||||
`badge rounded-pill ` +
|
||||
getProjectStatusColor(projectInfo.projectStatusId)
|
||||
getProjectStatusColor(project.projectStatusId)
|
||||
}
|
||||
>
|
||||
{getProjectStatusName(projectInfo.projectStatusId)}
|
||||
{getProjectStatusName(project.projectStatusId)}
|
||||
</span>
|
||||
</p>{" "}
|
||||
{getDateDifferenceInDays(projectInfo.endDate, Date()) >= 0 && (
|
||||
{getDateDifferenceInDays(project.endDate, Date()) >= 0 && (
|
||||
<span className="badge bg-label-success ms-auto">
|
||||
{projectInfo.endDate &&
|
||||
getDateDifferenceInDays(projectInfo.endDate, Date())}{" "}
|
||||
{project.endDate &&
|
||||
getDateDifferenceInDays(project.endDate, Date())}{" "}
|
||||
Days left
|
||||
</span>
|
||||
)}
|
||||
{getDateDifferenceInDays(projectInfo.endDate, Date()) < 0 && (
|
||||
{getDateDifferenceInDays(project.endDate, Date()) < 0 && (
|
||||
<span className="badge bg-label-danger ms-auto">
|
||||
{projectInfo.endDate &&
|
||||
getDateDifferenceInDays(projectInfo.endDate, Date())}{" "}
|
||||
{project.endDate &&
|
||||
getDateDifferenceInDays(project.endDate, Date())}{" "}
|
||||
Days overdue
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="d-flex justify-content-between align-items-center mb-2">
|
||||
<small className="text-body">
|
||||
Task: {formatNumber(projectInfo.completedWork)} / {formatNumber(projectInfo.plannedWork)}
|
||||
Task: {formatNumber(project.completedWork)} /{" "}
|
||||
{formatNumber(project.plannedWork)}
|
||||
</small>
|
||||
<small className="text-body">
|
||||
{Math.floor(
|
||||
getProgressInNumber(
|
||||
projectInfo.plannedWork,
|
||||
projectInfo.completedWork
|
||||
project.plannedWork,
|
||||
project.completedWork
|
||||
)
|
||||
) || 0}{" "}
|
||||
% Completed
|
||||
@ -246,22 +192,20 @@ const ProjectCard = ({ projectData, recall }) => {
|
||||
role="progressbar"
|
||||
style={{
|
||||
width: getProgress(
|
||||
projectInfo.plannedWork,
|
||||
projectInfo.completedWork
|
||||
project.plannedWork,
|
||||
project.completedWork
|
||||
),
|
||||
}}
|
||||
aria-valuenow={projectInfo.completedWork}
|
||||
aria-valuenow={project.completedWork}
|
||||
aria-valuemin="0"
|
||||
aria-valuemax={projectInfo.plannedWork}
|
||||
aria-valuemax={project.plannedWork}
|
||||
></div>
|
||||
</div>
|
||||
<div className="d-flex align-items-center justify-content-between">
|
||||
{/* <div className="d-flex align-items-center ">
|
||||
</div> */}
|
||||
<div>
|
||||
<a className="text-muted d-flex " alt="Active team size">
|
||||
<i className="bx bx-group bx-sm me-1_5"></i>
|
||||
{projectInfo?.teamSize} Members
|
||||
{project?.teamSize} Members
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
|
||||
70
src/components/Project/ProjectCardView.jsx
Normal file
70
src/components/Project/ProjectCardView.jsx
Normal file
@ -0,0 +1,70 @@
|
||||
import React from 'react'
|
||||
import { useProjects } from '../../hooks/useProjects'
|
||||
import Loader from '../common/Loader'
|
||||
import ProjectCard from './ProjectCard'
|
||||
|
||||
const ProjectCardView = ({currentItems,setCurrentPage,totalPages }) => {
|
||||
|
||||
|
||||
return (
|
||||
|
||||
<div className="row page-min-h">
|
||||
|
||||
{ currentItems.length === 0 && (
|
||||
<p className="text-center text-muted">No projects found.</p>
|
||||
)}
|
||||
|
||||
{currentItems.map((project) => (
|
||||
<ProjectCard
|
||||
key={project.id}
|
||||
project={project}
|
||||
/>
|
||||
))}
|
||||
|
||||
|
||||
{ totalPages > 1 && (
|
||||
<nav>
|
||||
<ul className="pagination pagination-sm justify-content-end py-2">
|
||||
<li className={`page-item ${currentPage === 1 && "disabled"}`}>
|
||||
<button
|
||||
className="page-link"
|
||||
onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
|
||||
>
|
||||
«
|
||||
</button>
|
||||
</li>
|
||||
{[...Array(totalPages)].map((_, i) => (
|
||||
<li
|
||||
key={i}
|
||||
className={`page-item ${currentPage === i + 1 && "active"}`}
|
||||
>
|
||||
<button
|
||||
className="page-link"
|
||||
onClick={() => setCurrentPage(i + 1)}
|
||||
>
|
||||
{i + 1}
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
<li
|
||||
className={`page-item ${currentPage === totalPages && "disabled"
|
||||
}`}
|
||||
>
|
||||
<button
|
||||
className="page-link"
|
||||
onClick={() =>
|
||||
setCurrentPage((p) => Math.min(totalPages, p + 1))
|
||||
}
|
||||
>
|
||||
»
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
)}
|
||||
</div>
|
||||
|
||||
)
|
||||
}
|
||||
|
||||
export default ProjectCardView
|
||||
280
src/components/Project/ProjectListView.jsx
Normal file
280
src/components/Project/ProjectListView.jsx
Normal file
@ -0,0 +1,280 @@
|
||||
import React, { useState } from "react";
|
||||
import { MANAGE_PROJECT, PROJECT_STATUS } from "../../utils/constants";
|
||||
import { useProjects } from "../../hooks/useProjects";
|
||||
import { formatNumber, formatUTCToLocalTime } from "../../utils/dateUtils";
|
||||
import ProgressBar from "../common/ProgressBar";
|
||||
import {
|
||||
getProjectStatusColor,
|
||||
getProjectStatusName,
|
||||
} from "../../utils/projectStatus";
|
||||
import { useDispatch } from "react-redux";
|
||||
import { setProjectId } from "../../slices/localVariablesSlice";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
|
||||
import { useProjectContext } from "../../pages/project/ProjectPage";
|
||||
import usePagination from "../../hooks/usePagination";
|
||||
|
||||
const ProjectListView = ({
|
||||
currentItems,
|
||||
selectedStatuses,
|
||||
handleStatusChange,
|
||||
setCurrentPage,
|
||||
totalPages,
|
||||
isLoading,
|
||||
}) => {
|
||||
const dispatch = useDispatch();
|
||||
const navigate = useNavigate();
|
||||
const { setMangeProject } = useProjectContext();
|
||||
// const { data, isLoading, isError, error } = useProjects();
|
||||
|
||||
// check Permissions
|
||||
const canManageProject = useHasUserPermission(MANAGE_PROJECT);
|
||||
|
||||
const projectColumns = [
|
||||
{
|
||||
key: "projectName",
|
||||
label: "Project Name",
|
||||
className: "text-start py-3",
|
||||
getValue: (p) => (
|
||||
<div
|
||||
className="text-primary cursor-pointer fw-bold py-3"
|
||||
onClick={() => {
|
||||
dispatch(setProjectId(p.id));
|
||||
navigate(`/projects/details`);
|
||||
}}
|
||||
>
|
||||
{p.shortName ? `${p.name} (${p.shortName})` : p.name}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "contactPerson",
|
||||
label: "Contact Person",
|
||||
className: "text-start small",
|
||||
getValue: (p) => `${p?.contactPerson ?? ""}`.trim() || "N/A",
|
||||
},
|
||||
{
|
||||
key: "startDate",
|
||||
label: "Start Date",
|
||||
className: "text-center small",
|
||||
getValue: (p) => formatUTCToLocalTime(p?.startDate) || "N/A",
|
||||
},
|
||||
{
|
||||
key: "deadline",
|
||||
label: "Deadline",
|
||||
className: "text-center small",
|
||||
getValue: (p) => formatUTCToLocalTime(p?.endDate) || "N/A",
|
||||
},
|
||||
{
|
||||
key: "task",
|
||||
label: "Task",
|
||||
colSpan: 2,
|
||||
className: "text-center small",
|
||||
getValue: (p) => formatNumber(p?.plannedWork) || "0",
|
||||
},
|
||||
{
|
||||
key: "progress",
|
||||
label: "Progress",
|
||||
className: "text-start small",
|
||||
|
||||
getValue: (p) => (
|
||||
<ProgressBar
|
||||
plannedWork={p.plannedWork}
|
||||
completedWork={p.completedWork}
|
||||
className="mb-0"
|
||||
height="6px"
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "status",
|
||||
label: "Status",
|
||||
className: "text-center small",
|
||||
isFilter: true,
|
||||
customRender: (_, selectedStatuses, handleStatusChange) => (
|
||||
<div className="dropdown">
|
||||
<a
|
||||
className="dropdown-toggle hide-arrow cursor-pointer"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-expanded="false"
|
||||
>
|
||||
Status <i className="bx bx-filter bx-sm"></i>
|
||||
</a>
|
||||
<ul className="dropdown-menu p-2 text-capitalize">
|
||||
{PROJECT_STATUS.map(({ id, label }) => (
|
||||
<li key={id}>
|
||||
<div className="form-check">
|
||||
<input
|
||||
className="form-check-input"
|
||||
type="checkbox"
|
||||
checked={selectedStatuses.includes(id)}
|
||||
onChange={() => handleStatusChange(id)}
|
||||
/>
|
||||
<label className="form-check-label">{label}</label>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
),
|
||||
getValue: (p) => (
|
||||
<span className={`badge ${getProjectStatusColor(p.projectStatusId)}`}>
|
||||
{getProjectStatusName(p.projectStatusId)}
|
||||
</span>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
const handleViewActivities = (project) => {
|
||||
dispatch(setProjectId(project));
|
||||
navigate(`/activities/records?project=${project}`);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="card page-min-h py-4 px-6 shadow-sm">
|
||||
<table className="table table-hover align-middle m-0">
|
||||
<thead className="border-bottom">
|
||||
<tr>
|
||||
{projectColumns.map((col) => (
|
||||
<th key={col.key} colSpan={col.colSpan} className={col.className}>
|
||||
{col.label}
|
||||
</th>
|
||||
))}
|
||||
<th className="text-center py-3">Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{currentItems?.map((project) => (
|
||||
<tr key={project.id}>
|
||||
{projectColumns.map((col) => (
|
||||
<td
|
||||
key={col.key}
|
||||
colSpan={col.colSpan}
|
||||
className={`${col.className} py-5`}
|
||||
style={{ paddingTop: "20px", paddingBottom: "20px" }}
|
||||
>
|
||||
{col.getValue
|
||||
? col.getValue(project)
|
||||
: project[col.key] || "N/A"}
|
||||
</td>
|
||||
))}
|
||||
<td
|
||||
className={`mx-2 ${
|
||||
canManageProject ? "d-sm-table-cell" : "d-none"
|
||||
}`}
|
||||
>
|
||||
<div className="dropdown z-2">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow p-0"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-expanded="false"
|
||||
>
|
||||
<i
|
||||
className="bx bx-dots-vertical-rounded bx-sm text-muted"
|
||||
data-bs-toggle="tooltip"
|
||||
data-bs-offset="0,8"
|
||||
data-bs-placement="top"
|
||||
data-bs-custom-class="tooltip-dark"
|
||||
title="More Action"
|
||||
></i>
|
||||
</button>
|
||||
<ul className="dropdown-menu dropdown-menu-end">
|
||||
<li>
|
||||
<a
|
||||
aria-label="click to View details"
|
||||
className="dropdown-item cursor-pointer"
|
||||
>
|
||||
<i className="bx bx-detail me-2"></i>
|
||||
<span className="align-left">View details</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a
|
||||
className="dropdown-item cursor-pointer"
|
||||
onClick={() =>
|
||||
setMangeProject({
|
||||
isOpen: true,
|
||||
Project: project.id,
|
||||
})
|
||||
}
|
||||
>
|
||||
<i className="bx bx-pencil me-2"></i>
|
||||
<span className="align-left">Modify</span>
|
||||
</a>
|
||||
</li>
|
||||
<li onClick={() => handleViewActivities(project.id)}>
|
||||
<a className="dropdown-item cursor-pointer">
|
||||
<i className="bx bx-task me-2"></i>
|
||||
<span className="align-left">Activities</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{isLoading && (
|
||||
<div className="py-4">
|
||||
{" "}
|
||||
{isLoading && <p className="text-center">Loading...</p>}
|
||||
{!isLoading && filteredProjects.length === 0 && (
|
||||
<p className="text-center text-muted">No projects found.</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{!isLoading && currentItems.length === 0 && (
|
||||
<div className="py-6">
|
||||
<p className="text-center text-muted">No projects found.</p>
|
||||
</div>
|
||||
)}
|
||||
{!isLoading && totalPages > 1 && (
|
||||
<nav>
|
||||
<ul className="pagination pagination-sm justify-content-end py-2">
|
||||
<li className={`page-item ${currentPage === 1 && "disabled"}`}>
|
||||
<button
|
||||
className="page-link"
|
||||
onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
|
||||
>
|
||||
«
|
||||
</button>
|
||||
</li>
|
||||
{[...Array(totalPages)].map((_, i) => (
|
||||
<li
|
||||
key={i}
|
||||
className={`page-item ${currentPage === i + 1 && "active"}`}
|
||||
>
|
||||
<button
|
||||
className="page-link"
|
||||
onClick={() => setCurrentPage(i + 1)}
|
||||
>
|
||||
{i + 1}
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
<li
|
||||
className={`page-item ${
|
||||
currentPage === totalPages && "disabled"
|
||||
}`}
|
||||
>
|
||||
<button
|
||||
className="page-link"
|
||||
onClick={() =>
|
||||
setCurrentPage((p) => Math.min(totalPages, p + 1))
|
||||
}
|
||||
>
|
||||
»
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProjectListView;
|
||||
@ -1,8 +1,7 @@
|
||||
import React from 'react'
|
||||
import AssignRole from './AssignTask'
|
||||
import React from "react";
|
||||
import AssignRole from "./AssignTask";
|
||||
|
||||
const ProjectModal = ({ modalConfig, closeModal }) => {
|
||||
|
||||
return (
|
||||
<div
|
||||
className="modal fade"
|
||||
@ -23,14 +22,14 @@ const ProjectModal = ({modalConfig,closeModal}) => {
|
||||
></button>
|
||||
<div className="text-center mb-2"></div>
|
||||
|
||||
{modalConfig?.type === "assignRole" && (
|
||||
<AssignRole assignData={modalConfig?.data} onClose={closeModal} />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
{modalConfig?.type === "assignRole" && <AssignRole assignData={modalConfig?.data} onClose={closeModal} />}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ProjectModal
|
||||
export default ProjectModal;
|
||||
|
||||
@ -67,7 +67,7 @@ const ProjectAssignedOrgs = () => {
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="dataTables_wrapper no-footer mx-5 pb-2">
|
||||
<div className="dataTables_wrapper no-footer mx-5 pb-2 page">
|
||||
<table className="table dataTable text-nowrap">
|
||||
<thead>
|
||||
<tr className="table_header_border">
|
||||
|
||||
@ -10,9 +10,9 @@ import ReactApexChart from "react-apexcharts";
|
||||
import Chart from "react-apexcharts";
|
||||
|
||||
const ProjectOverview = ({ project }) => {
|
||||
const { projects } = useProjects();
|
||||
const { data } = useProjects();
|
||||
const [current_project, setCurrentProject] = useState(
|
||||
projects.find((pro) => pro.id == project)
|
||||
data?.find((pro) => pro.id == project)
|
||||
);
|
||||
|
||||
const selectedProject = useSelector(
|
||||
@ -154,7 +154,7 @@ const ProjectOverview = ({ project }) => {
|
||||
}, [current_project]);
|
||||
|
||||
useEffect(() => {
|
||||
setCurrentProject(projects.find((pro) => pro.id == selectedProject));
|
||||
setCurrentProject(data?.find((pro) => pro.id == selectedProject));
|
||||
if (current_project) {
|
||||
let val = getProgressInPercentage(
|
||||
current_project.plannedWork,
|
||||
|
||||
59
src/components/Project/ProjectSchema.jsx
Normal file
59
src/components/Project/ProjectSchema.jsx
Normal file
@ -0,0 +1,59 @@
|
||||
import { z } from "zod";
|
||||
import { DEFAULT_EMPTY_STATUS_ID } from "../../utils/constants";
|
||||
const currentDate = new Date()
|
||||
|
||||
|
||||
export const projectDefault = {
|
||||
name: "",
|
||||
shortName: "",
|
||||
contactPerson: "",
|
||||
projectAddress: "",
|
||||
startDate: currentDate.toISOString().split("T")[0],
|
||||
endDate: currentDate.toISOString().split("T")[0],
|
||||
projectStatusId: DEFAULT_EMPTY_STATUS_ID,
|
||||
promoterId: "",
|
||||
pmcId: "",
|
||||
};
|
||||
|
||||
|
||||
export const projectSchema = z
|
||||
.object({
|
||||
name: z.string().min(1, { message: "Project Name is required" }),
|
||||
shortName: z.string().optional(),
|
||||
contactPerson: z
|
||||
.string()
|
||||
.min(1, { message: "Contact Person Name is required" })
|
||||
.regex(/^[A-Za-z\s]+$/, {
|
||||
message: "Contact Person must contain only letters",
|
||||
}),
|
||||
projectAddress: z
|
||||
.string()
|
||||
.min(1, { message: "Address is required" })
|
||||
.max(500, "Address must not exceed 150 characters"),
|
||||
startDate: z
|
||||
.string()
|
||||
.min(1, { message: "Start Date is required" })
|
||||
.default(projectDefault),
|
||||
endDate: z
|
||||
.string()
|
||||
.min(1, { message: "End Date is required" })
|
||||
.default(projectDefault),
|
||||
projectStatusId: z.string().min(1, { message: "Status is required" }),
|
||||
promoterId: z.string().min(1, { message: "Promoter is required" }),
|
||||
pmcId: z.string().min(1, { message: "PMC is required" }),
|
||||
})
|
||||
.refine(
|
||||
(data) => {
|
||||
const start = new Date(data.startDate);
|
||||
const end = new Date(data.endDate);
|
||||
return end >= start;
|
||||
},
|
||||
{
|
||||
path: ["endDate"],
|
||||
message: "End Date must be greater than Start Date",
|
||||
}
|
||||
);
|
||||
|
||||
|
||||
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import React, { useState, useEffect, useCallback, useMemo } from "react";
|
||||
import MapUsers from "../MapUsers";
|
||||
import { Link, NavLink, useNavigate, useParams } from "react-router-dom";
|
||||
|
||||
import showToast from "../../../services/toastService";
|
||||
|
||||
@ -14,27 +14,15 @@ import {
|
||||
} from "@tanstack/react-query";
|
||||
import showToast from "../services/toastService";
|
||||
|
||||
|
||||
|
||||
export const useCurrentService = () => {
|
||||
return useSelector((store)=>store.globalVariables.selectedServiceId)
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
return useSelector((store) => store.globalVariables.selectedServiceId);
|
||||
};
|
||||
|
||||
// ------------------------------Query-------------------
|
||||
|
||||
export const useProjects = () => {
|
||||
const loggedUser = useSelector((store) => store.globalVariables.loginUser);
|
||||
|
||||
const {
|
||||
data: projects = [],
|
||||
isLoading: loading,
|
||||
error,
|
||||
refetch,
|
||||
} = useQuery({
|
||||
return useQuery({
|
||||
queryKey: ["ProjectsList"],
|
||||
queryFn: async () => {
|
||||
const response = await ProjectRepository.getProjectList();
|
||||
@ -42,19 +30,13 @@ export const useProjects = () => {
|
||||
},
|
||||
enabled: !!loggedUser,
|
||||
});
|
||||
|
||||
return {
|
||||
projects,
|
||||
loading,
|
||||
error,
|
||||
refetch,
|
||||
};
|
||||
};
|
||||
|
||||
export const useEmployeesByProjectAllocated = (
|
||||
projectId,
|
||||
serviceId,
|
||||
organizationId,emloyeeeStatus
|
||||
organizationId,
|
||||
emloyeeeStatus
|
||||
) => {
|
||||
const {
|
||||
data = [],
|
||||
@ -62,10 +44,17 @@ export const useEmployeesByProjectAllocated = (
|
||||
refetch,
|
||||
error,
|
||||
} = useQuery({
|
||||
queryKey: ["empListByProjectAllocated", projectId, serviceId,organizationId,emloyeeeStatus],
|
||||
queryKey: [
|
||||
"empListByProjectAllocated",
|
||||
projectId,
|
||||
serviceId,
|
||||
organizationId,
|
||||
emloyeeeStatus,
|
||||
],
|
||||
queryFn: async () => {
|
||||
const res = await ProjectRepository.getProjectAllocation(
|
||||
projectId, serviceId,
|
||||
projectId,
|
||||
serviceId,
|
||||
organizationId,
|
||||
emloyeeeStatus
|
||||
);
|
||||
@ -200,7 +189,10 @@ export const useProjectInfra = (projectId,serviceId) => {
|
||||
queryKey: ["ProjectInfra", projectId, serviceId],
|
||||
queryFn: async () => {
|
||||
if (!projectId) return null;
|
||||
const res = await ProjectRepository.getProjectInfraByproject(projectId,serviceId);
|
||||
const res = await ProjectRepository.getProjectInfraByproject(
|
||||
projectId,
|
||||
serviceId
|
||||
);
|
||||
return res.data;
|
||||
},
|
||||
enabled: !!projectId,
|
||||
@ -212,11 +204,18 @@ export const useProjectInfra = (projectId,serviceId) => {
|
||||
return { projectInfra, isLoading, error, isFetched };
|
||||
};
|
||||
|
||||
export const useProjectTasks = (workAreaId, serviceId = null, isExpandedArea = false) => {
|
||||
export const useProjectTasks = (
|
||||
workAreaId,
|
||||
serviceId = null,
|
||||
isExpandedArea = false
|
||||
) => {
|
||||
const { data, isLoading, error } = useQuery({
|
||||
queryKey: ["WorkItems", workAreaId, serviceId],
|
||||
queryFn: async () => {
|
||||
const res = await ProjectRepository.getProjectTasksByWorkArea(workAreaId, serviceId);
|
||||
const res = await ProjectRepository.getProjectTasksByWorkArea(
|
||||
workAreaId,
|
||||
serviceId
|
||||
);
|
||||
return res.data; // return actual task list
|
||||
},
|
||||
enabled: !!workAreaId && isExpandedArea, // only fetch if workAreaId exists and area is expanded
|
||||
@ -308,13 +307,21 @@ export const useProjectAssignedServices = (projectId) => {
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
export const useEmployeeForTaskAssign = (projectId,serviceId,organizationId)=>{
|
||||
export const useEmployeeForTaskAssign = (
|
||||
projectId,
|
||||
serviceId,
|
||||
organizationId
|
||||
) => {
|
||||
return useQuery({
|
||||
queryKey: ["EmployeeForTaskAssign", projectId, serviceId, organizationId],
|
||||
queryFn:async()=> await ProjectRepository.getEmployeeForTaskAssign(projectId,serviceId,organizationId)
|
||||
})
|
||||
}
|
||||
queryFn: async () =>
|
||||
await ProjectRepository.getEmployeeForTaskAssign(
|
||||
projectId,
|
||||
serviceId,
|
||||
organizationId
|
||||
),
|
||||
});
|
||||
};
|
||||
|
||||
// -- -------------Mutation-------------------------------
|
||||
|
||||
@ -322,8 +329,8 @@ export const useCreateProject = ({ onSuccessCallback }) => {
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
return useMutation({
|
||||
mutationFn: async (newProject) => {
|
||||
const res = await ProjectRepository.manageProject(newProject);
|
||||
mutationFn: async (payload) => {
|
||||
const res = await ProjectRepository.manageProject(payload);
|
||||
return res.data;
|
||||
},
|
||||
onSuccess: (data) => {
|
||||
@ -349,11 +356,11 @@ export const useCreateProject = ({ onSuccessCallback }) => {
|
||||
});
|
||||
};
|
||||
|
||||
export const useUpdateProject = ({ onSuccessCallback }) => {
|
||||
export const useUpdateProject = ( onSuccessCallback ) => {
|
||||
const queryClient = useQueryClient();
|
||||
const { mutate, isPending, isSuccess, isError } = useMutation({
|
||||
mutationFn: async ({ projectId, updatedData }) => {
|
||||
return await ProjectRepository.updateProject(projectId, updatedData);
|
||||
mutationFn: async ({ projectId, payload }) => {
|
||||
return await ProjectRepository.updateProject(projectId, payload);
|
||||
},
|
||||
|
||||
onSuccess: (data, variables) => {
|
||||
|
||||
@ -1,419 +0,0 @@
|
||||
import React, { useState, useEffect, useCallback } from "react";
|
||||
import ProjectCard from "../../components/Project/ProjectCard";
|
||||
import ManageProjectInfo from "../../components/Project/ManageProjectInfo";
|
||||
import Breadcrumb from "../../components/common/Breadcrumb";
|
||||
import ProjectRepository from "../../repositories/ProjectRepository";
|
||||
import { useProjects, useCreateProject } from "../../hooks/useProjects";
|
||||
import showToast from "../../services/toastService";
|
||||
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
|
||||
import { useProfile } from "../../hooks/useProfile";
|
||||
import { ITEMS_PER_PAGE, MANAGE_PROJECT } from "../../utils/constants";
|
||||
import ProjectListView from "./ProjectListView";
|
||||
import eventBus from "../../services/eventBus";
|
||||
import { clearApiCacheKey } from "../../slices/apiCacheSlice";
|
||||
import { defaultCheckBoxAppearanceProvider } from "pdf-lib";
|
||||
import { useMutation } from "@tanstack/react-query";
|
||||
import usePagination from "../../hooks/usePagination";
|
||||
import GlobalModel from "../../components/common/GlobalModel";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { setProjectId } from "../../slices/localVariablesSlice";
|
||||
|
||||
const ProjectList = () => {
|
||||
const { profile: loginUser } = useProfile();
|
||||
const [listView, setListView] = useState(false);
|
||||
const [showModal, setShowModal] = useState(false);
|
||||
const selectedProject = useSelector(
|
||||
(store) => store.localVariables.projectId
|
||||
);
|
||||
const dispatch = useDispatch();
|
||||
|
||||
const { projects, loading, error, refetch } = useProjects();
|
||||
const [projectList, setProjectList] = useState([]);
|
||||
|
||||
const HasManageProjectPermission = useHasUserPermission(MANAGE_PROJECT);
|
||||
const [HasManageProject, setHasManageProject] = useState(
|
||||
HasManageProjectPermission
|
||||
);
|
||||
|
||||
const { mutate: createProject, isPending } = useCreateProject({
|
||||
onSuccessCallback: () => {
|
||||
setShowModal(false);
|
||||
},
|
||||
});
|
||||
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
const [selectedStatuses, setSelectedStatuses] = useState([
|
||||
"b74da4c2-d07e-46f2-9919-e75e49b12731",
|
||||
"603e994b-a27f-4e5d-a251-f3d69b0498ba",
|
||||
"ef1c356e-0fe0-42df-a5d3-8daee355492d",
|
||||
"cdad86aa-8a56-4ff4-b633-9c629057dfef",
|
||||
"33deaef9-9af1-4f2a-b443-681ea0d04f81",
|
||||
]);
|
||||
|
||||
const handleShow = () => setShowModal(true);
|
||||
const handleClose = () => setShowModal(false);
|
||||
useEffect(() => {
|
||||
dispatch(setProjectId(null));
|
||||
}, []);
|
||||
const sortingProject = (projects) => {
|
||||
if (!loading && Array.isArray(projects)) {
|
||||
const grouped = {};
|
||||
projects.forEach((project) => {
|
||||
const statusId = project.projectStatusId;
|
||||
if (!grouped[statusId]) grouped[statusId] = [];
|
||||
grouped[statusId].push(project);
|
||||
});
|
||||
|
||||
const sortedGrouped = selectedStatuses
|
||||
.filter((statusId) => grouped[statusId])
|
||||
.flatMap((statusId) =>
|
||||
grouped[statusId].sort((a, b) =>
|
||||
a.name.toLowerCase().localeCompare(b.name.toLowerCase())
|
||||
)
|
||||
);
|
||||
|
||||
setProjectList((prev) => {
|
||||
const isSame = JSON.stringify(prev) === JSON.stringify(sortedGrouped);
|
||||
return isSame ? prev : sortedGrouped;
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (!loading && projects) {
|
||||
sortingProject(projects);
|
||||
}
|
||||
}, [projects, loading, selectedStatuses]);
|
||||
|
||||
useEffect(() => {
|
||||
setHasManageProject(loginUser ? HasManageProjectPermission : false);
|
||||
}, [loginUser, HasManageProjectPermission]);
|
||||
|
||||
const handleSubmitForm = (newProject) => {
|
||||
createProject(newProject);
|
||||
};
|
||||
|
||||
const handleStatusChange = (statusId) => {
|
||||
setCurrentPage(1);
|
||||
setSelectedStatuses((prev) =>
|
||||
prev.includes(statusId)
|
||||
? prev.filter((id) => id !== statusId)
|
||||
: [...prev, statusId]
|
||||
);
|
||||
};
|
||||
|
||||
const handleStatusFilterFromChild = (statusesFromChild) => {
|
||||
setSelectedStatuses(statusesFromChild);
|
||||
};
|
||||
|
||||
const filteredProjects = projectList.filter((project) => {
|
||||
const matchesStatus = selectedStatuses.includes(project.projectStatusId);
|
||||
const matchesSearch = project.name
|
||||
.toLowerCase()
|
||||
.includes(searchTerm.toLowerCase());
|
||||
return matchesStatus && matchesSearch;
|
||||
});
|
||||
|
||||
const totalPages = Math.ceil(filteredProjects.length / ITEMS_PER_PAGE);
|
||||
|
||||
const { currentItems, currentPage, paginate, setCurrentPage } = usePagination(
|
||||
filteredProjects,
|
||||
ITEMS_PER_PAGE
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
const tooltipTriggerList = Array.from(
|
||||
document.querySelectorAll('[data-bs-toggle="tooltip"]')
|
||||
);
|
||||
tooltipTriggerList.forEach((el) => new bootstrap.Tooltip(el));
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
{showModal && (
|
||||
<GlobalModel isOpen={showModal} closeModal={handleClose}>
|
||||
<ManageProjectInfo
|
||||
project={null}
|
||||
handleSubmitForm={handleSubmitForm}
|
||||
onClose={handleClose}
|
||||
isPending={isPending}
|
||||
/>
|
||||
</GlobalModel>
|
||||
)}
|
||||
|
||||
<div className="container-fluid">
|
||||
<Breadcrumb
|
||||
data={[
|
||||
{ label: "Home", link: "/dashboard" },
|
||||
{ label: "Projects", link: null },
|
||||
]}
|
||||
/>
|
||||
<div className="card cursor-pointer mb-5">
|
||||
<div className="card-body p-2 pb-1">
|
||||
<div className="d-flex flex-wrap justify-content-between align-items-start">
|
||||
<div className="d-flex flex-wrap align-items-start">
|
||||
<div className="flex-grow-1 me-2 mb-2">
|
||||
<input
|
||||
type="search"
|
||||
className="form-control form-control-sm"
|
||||
placeholder="Search projects..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => {
|
||||
setSearchTerm(e.target.value);
|
||||
setCurrentPage(1);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="d-flex gap-2 mb-2">
|
||||
<button
|
||||
type="button"
|
||||
className={`btn btn-sm p-1 ${!listView ? "btn-primary" : "btn-outline-primary"
|
||||
}`}
|
||||
onClick={() => setListView(false)}
|
||||
data-bs-toggle="tooltip"
|
||||
data-bs-custom-class="tooltip"
|
||||
title="Card View"
|
||||
>
|
||||
<i className="bx bx-grid-alt fs-5"></i>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={`btn btn-sm p-1 ${listView ? "btn-primary" : "btn-outline-primary"
|
||||
}`}
|
||||
onClick={() => setListView(true)}
|
||||
data-bs-toggle="tooltip"
|
||||
data-bs-custom-class="tooltip"
|
||||
title="List View"
|
||||
>
|
||||
<i className="bx bx-list-ul fs-5"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="dropdown mt-1">
|
||||
<a
|
||||
className="dropdown-toggle hide-arrow cursor-pointer p-1 mt-3 "
|
||||
data-bs-toggle="dropdown"
|
||||
aria-expanded="false"
|
||||
data-bs-custom-class="tooltip"
|
||||
title="Filter"
|
||||
>
|
||||
<i className="bx bx-slider-alt ms-1"></i>
|
||||
</a>
|
||||
<ul className="dropdown-menu p-2 text-capitalize">
|
||||
{[
|
||||
{
|
||||
id: "b74da4c2-d07e-46f2-9919-e75e49b12731",
|
||||
label: "Active",
|
||||
},
|
||||
{
|
||||
id: "cdad86aa-8a56-4ff4-b633-9c629057dfef",
|
||||
label: "In Progress",
|
||||
},
|
||||
{
|
||||
id: "603e994b-a27f-4e5d-a251-f3d69b0498ba",
|
||||
label: "On Hold",
|
||||
},
|
||||
{
|
||||
id: "ef1c356e-0fe0-42df-a5d3-8daee355492d",
|
||||
label: "Inactive",
|
||||
},
|
||||
{
|
||||
id: "33deaef9-9af1-4f2a-b443-681ea0d04f81",
|
||||
label: "Completed",
|
||||
},
|
||||
].map(({ id, label }) => (
|
||||
<li key={id}>
|
||||
<div className="form-check">
|
||||
<input
|
||||
className="form-check-input "
|
||||
type="checkbox"
|
||||
checked={selectedStatuses.includes(id)}
|
||||
onChange={() => handleStatusChange(id)}
|
||||
/>
|
||||
<label className="form-check-label">{label}</label>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button
|
||||
className="btn btn-sm btn-primary"
|
||||
type="button"
|
||||
onClick={handleShow}
|
||||
>
|
||||
<i className="bx bx-plus-circle me-2"></i>
|
||||
<span className="d-none d-md-inline-block">
|
||||
Add New Project
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{loading && <p className="text-center">Loading...</p>}
|
||||
{!loading && filteredProjects.length === 0 && !listView && (
|
||||
<p className="text-center text-muted">No projects found.</p>
|
||||
)}
|
||||
|
||||
{listView ? (
|
||||
<div className="card cursor-pointer">
|
||||
<div className="card-body p-2">
|
||||
<div
|
||||
className="table-responsive text-nowrap py-2 mx-2"
|
||||
style={{ minHeight: "200px" }}
|
||||
>
|
||||
<table className="table m-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="text-start" colSpan={5}>
|
||||
Project Name
|
||||
</th>
|
||||
<th className="mx-2 text-start">Contact Person</th>
|
||||
<th className="mx-2">START DATE</th>
|
||||
<th className="mx-2">DEADLINE</th>
|
||||
<th className="mx-2">Task</th>
|
||||
<th className="mx-2">Progress</th>
|
||||
<th className="mx-2">
|
||||
<div className="dropdown">
|
||||
<a
|
||||
className="dropdown-toggle hide-arrow cursor-pointer"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-expanded="false"
|
||||
>
|
||||
Status <i className="bx bx-filter bx-sm"></i>
|
||||
</a>
|
||||
<ul className="dropdown-menu p-2 text-capitalize">
|
||||
{[
|
||||
{
|
||||
id: "b74da4c2-d07e-46f2-9919-e75e49b12731",
|
||||
label: "Active",
|
||||
},
|
||||
{
|
||||
id: "cdad86aa-8a56-4ff4-b633-9c629057dfef",
|
||||
label: "In Progress",
|
||||
},
|
||||
{
|
||||
id: "603e994b-a27f-4e5d-a251-f3d69b0498ba",
|
||||
label: "On Hold",
|
||||
},
|
||||
{
|
||||
id: "ef1c356e-0fe0-42df-a5d3-8daee355492d",
|
||||
label: "Inactive",
|
||||
},
|
||||
{
|
||||
id: "33deaef9-9af1-4f2a-b443-681ea0d04f81",
|
||||
label: "Completed",
|
||||
},
|
||||
].map(({ id, label }) => (
|
||||
<li key={id}>
|
||||
<div className="form-check">
|
||||
<input
|
||||
className="form-check-input "
|
||||
type="checkbox"
|
||||
checked={selectedStatuses.includes(id)}
|
||||
onChange={() => handleStatusChange(id)}
|
||||
/>
|
||||
<label className="form-check-label">
|
||||
{label}
|
||||
</label>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</th>
|
||||
<th
|
||||
className={`mx-2 ${HasManageProject ? "d-sm-table-cell" : "d-none"
|
||||
}`}
|
||||
>
|
||||
Action
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="table-border-bottom-0 overflow-auto ">
|
||||
{currentItems.length === 0 ? (
|
||||
<tr className="text-center">
|
||||
<td
|
||||
colSpan="12"
|
||||
rowSpan="12"
|
||||
style={{ height: "200px" }}
|
||||
>
|
||||
No projects found
|
||||
</td>
|
||||
</tr>
|
||||
) : (
|
||||
currentItems.map((project) => (
|
||||
<ProjectListView
|
||||
key={project.id}
|
||||
projectData={project}
|
||||
recall={sortingProject}
|
||||
/>
|
||||
))
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>{" "}
|
||||
</div>{" "}
|
||||
</div>
|
||||
) : (
|
||||
<div className="row">
|
||||
{currentItems.map((project) => (
|
||||
<ProjectCard
|
||||
key={project.id}
|
||||
projectData={project}
|
||||
recall={sortingProject}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!loading && totalPages > 1 && (
|
||||
<nav>
|
||||
<ul className="pagination pagination-sm justify-content-end py-2">
|
||||
<li className={`page-item ${currentPage === 1 && "disabled"}`}>
|
||||
<button
|
||||
className="page-link"
|
||||
onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
|
||||
>
|
||||
«
|
||||
</button>
|
||||
</li>
|
||||
{[...Array(totalPages)].map((_, i) => (
|
||||
<li
|
||||
key={i}
|
||||
className={`page-item ${currentPage === i + 1 && "active"}`}
|
||||
>
|
||||
<button
|
||||
className="page-link"
|
||||
onClick={() => setCurrentPage(i + 1)}
|
||||
>
|
||||
{i + 1}
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
<li
|
||||
className={`page-item ${currentPage === totalPages && "disabled"
|
||||
}`}
|
||||
>
|
||||
<button
|
||||
className="page-link"
|
||||
onClick={() =>
|
||||
setCurrentPage((p) => Math.min(totalPages, p + 1))
|
||||
}
|
||||
>
|
||||
»
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProjectList;
|
||||
@ -1,206 +0,0 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import moment from "moment";
|
||||
import {
|
||||
useProjectDetails,
|
||||
useProjects,
|
||||
useUpdateProject,
|
||||
} from "../../hooks/useProjects";
|
||||
import {
|
||||
getProjectStatusName,
|
||||
getProjectStatusColor,
|
||||
} from "../../utils/projectStatus";
|
||||
import ProgressBar from "../../components/common/ProgressBar";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import ManageProject from "../../components/Project/ManageProject";
|
||||
import ProjectRepository from "../../repositories/ProjectRepository";
|
||||
import { MANAGE_PROJECT } from "../../utils/constants";
|
||||
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
|
||||
import ManageProjectInfo from "../../components/Project/ManageProjectInfo";
|
||||
import showToast from "../../services/toastService";
|
||||
import { getCachedData, cacheData } from "../../slices/apiDataManager";
|
||||
import GlobalModel from "../../components/common/GlobalModel";
|
||||
import { formatNumber } from "../../utils/dateUtils";
|
||||
import { setProjectId } from "../../slices/localVariablesSlice";
|
||||
import { useDispatch } from "react-redux";
|
||||
|
||||
const ProjectListView = ({ projectData, recall }) => {
|
||||
const [projectInfo, setProjectInfo] = useState(projectData);
|
||||
const dispatch = useDispatch()
|
||||
const { projects_Details, loading, error, refetch } = useProjectDetails(
|
||||
projectInfo?.id, false
|
||||
);
|
||||
const [showModal, setShowModal] = useState(false);
|
||||
const navigate = useNavigate();
|
||||
const ManageProject = useHasUserPermission(MANAGE_PROJECT);
|
||||
useEffect(() => {
|
||||
setProjectInfo(projectData);
|
||||
}, [projectData]);
|
||||
const {
|
||||
mutate: updateProject,
|
||||
isPending,
|
||||
isSuccess,
|
||||
isError,
|
||||
} = useUpdateProject({
|
||||
onSuccessCallback: () => {
|
||||
setShowModal(false);
|
||||
},
|
||||
})
|
||||
|
||||
const handleShow = async () => {
|
||||
try {
|
||||
const { data } = await refetch();
|
||||
setShowModal(true);
|
||||
} catch (err) {
|
||||
showToast("Failed to load project details", "error");
|
||||
}
|
||||
};
|
||||
|
||||
const getProgress = (planned, completed) => {
|
||||
return (completed * 100) / planned + "%";
|
||||
};
|
||||
const getProgressInNumber = (planned, completed) => {
|
||||
return (completed * 100) / planned;
|
||||
};
|
||||
|
||||
const handleClose = () => setShowModal(false);
|
||||
|
||||
const handleViewProject = () => {
|
||||
dispatch(setProjectId(projectInfo.id))
|
||||
navigate(`/projects/details`);
|
||||
};
|
||||
|
||||
const handleViewActivities = () => {
|
||||
dispatch(setProjectId(projectInfo.id))
|
||||
navigate(`/activities/records?project=${projectInfo.id}`);
|
||||
};
|
||||
|
||||
const handleFormSubmit = (updatedProject) => {
|
||||
if (projectInfo?.id) {
|
||||
updateProject({
|
||||
projectId: projectInfo.id,
|
||||
updatedData: updatedProject,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{showModal && projects_Details && (
|
||||
<GlobalModel isOpen={showModal} closeModal={handleClose}> <ManageProjectInfo
|
||||
project={projects_Details}
|
||||
handleSubmitForm={handleFormSubmit}
|
||||
onClose={handleClose}
|
||||
isPending={isPending}
|
||||
/></GlobalModel>
|
||||
)}
|
||||
|
||||
<tr className={`py-8 ${isPending ? "bg-light opacity-50 pointer-events-none" : ""} `}>
|
||||
<td className="text-start" colSpan={5}>
|
||||
<span
|
||||
className="text-primary cursor-pointer"
|
||||
onClick={() => {
|
||||
dispatch(setProjectId(projectInfo.id))
|
||||
navigate(`/projects/details`)
|
||||
}}
|
||||
>
|
||||
{projectInfo.shortName
|
||||
? `${projectInfo.name} (${projectInfo.shortName})`
|
||||
: projectInfo.name}
|
||||
</span>
|
||||
</td>
|
||||
<td className="text-start small">{projectInfo.contactPerson}</td>
|
||||
<td className="small text-center">
|
||||
<small>
|
||||
{projectInfo.startDate
|
||||
? moment(projectInfo.startDate).format("DD-MMM-YYYY")
|
||||
: "NA"}
|
||||
</small>
|
||||
</td>
|
||||
<td className="mx-2 text-center small">
|
||||
{projectInfo.endDate
|
||||
? moment(projectInfo.endDate).format("DD-MMM-YYYY")
|
||||
: "NA"}
|
||||
</td>
|
||||
<td className="mx-2 text-center small">{formatNumber(projectInfo.plannedWork)}</td>
|
||||
<td className="py-6 mx-2 text-start small align-items-center">
|
||||
<ProgressBar
|
||||
plannedWork={projectInfo.plannedWork}
|
||||
completedWork={projectInfo.completedWork}
|
||||
className="mb-0"
|
||||
height="4px"
|
||||
/>
|
||||
</td>
|
||||
|
||||
<td className="mx-3">
|
||||
<p className="mb-0">
|
||||
<span
|
||||
className={`badge ${getProjectStatusColor(
|
||||
projectInfo.projectStatusId
|
||||
)}`}
|
||||
>
|
||||
{getProjectStatusName(projectInfo.projectStatusId)}
|
||||
</span>
|
||||
</p>
|
||||
</td>
|
||||
|
||||
<td className={`mx-2 ${ManageProject ? "d-sm-table-cell" : "d-none"}`}>
|
||||
<div className="dropdown z-2">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow p-0"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-expanded="false"
|
||||
>
|
||||
{loading ? (
|
||||
<div
|
||||
className="spinner-border spinner-border-sm text-secondary"
|
||||
role="status"
|
||||
>
|
||||
<span className="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
) : (
|
||||
<i
|
||||
className="bx bx-dots-vertical-rounded bx-sm text-muted"
|
||||
data-bs-toggle="tooltip"
|
||||
data-bs-offset="0,8"
|
||||
data-bs-placement="top"
|
||||
data-bs-custom-class="tooltip-dark"
|
||||
title="More Action"
|
||||
></i>
|
||||
)}
|
||||
</button>
|
||||
<ul className="dropdown-menu dropdown-menu-end">
|
||||
<li>
|
||||
<a
|
||||
aria-label="click to View details"
|
||||
className="dropdown-item"
|
||||
onClick={handleViewProject}
|
||||
>
|
||||
<i className="bx bx-detail me-2"></i>
|
||||
<span className="align-left">View details</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li onClick={handleShow}>
|
||||
<a className="dropdown-item">
|
||||
<i className="bx bx-pencil me-2"></i>
|
||||
<span className="align-left">Modify</span>
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
onClick={handleViewActivities}
|
||||
>
|
||||
<a className="dropdown-item">
|
||||
<i className="bx bx-task me-2"></i>
|
||||
<span className="align-left">Activities</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProjectListView;
|
||||
235
src/pages/project/ProjectPage.jsx
Normal file
235
src/pages/project/ProjectPage.jsx
Normal file
@ -0,0 +1,235 @@
|
||||
import React, { createContext, useContext, useEffect, useState } from "react";
|
||||
import Breadcrumb from "../../components/common/Breadcrumb";
|
||||
import { ITEMS_PER_PAGE, MANAGE_PROJECT, PROJECT_STATUS } from "../../utils/constants";
|
||||
import ProjectListView from "../../components/Project/ProjectListView";
|
||||
import GlobalModel from "../../components/common/GlobalModel";
|
||||
import ManageProjectInfo from "../../components/Project/ManageProjectInfo";
|
||||
import ProjectCardView from "../../components/Project/ProjectCardView";
|
||||
import usePagination from "../../hooks/usePagination";
|
||||
import { useProjects } from "../../hooks/useProjects";
|
||||
import Loader from "../../components/common/Loader";
|
||||
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
|
||||
|
||||
const ProjectContext = createContext();
|
||||
export const useProjectContext = () => {
|
||||
const context = useContext(ProjectContext);
|
||||
if (!context) {
|
||||
throw new Error("useProjectContext must be used within an ProjectProvider");
|
||||
}
|
||||
return context;
|
||||
};
|
||||
|
||||
const ProjectPage = () => {
|
||||
const [manageProject, setMangeProject] = useState({
|
||||
isOpen: false,
|
||||
Project: null,
|
||||
});
|
||||
|
||||
const [projectList, setProjectList] = useState([]);
|
||||
const [listView, setListView] = useState(false);
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
const HasManageProject = useHasUserPermission(MANAGE_PROJECT);
|
||||
|
||||
const [selectedStatuses, setSelectedStatuses] = useState(
|
||||
PROJECT_STATUS.map((s) => s.id)
|
||||
);
|
||||
|
||||
const { data, isLoading, isError, error } = useProjects();
|
||||
|
||||
const contextDispatcher = {
|
||||
setMangeProject,
|
||||
};
|
||||
|
||||
const filteredProjects = projectList.filter((project) => {
|
||||
const matchesStatus = selectedStatuses.includes(project.projectStatusId);
|
||||
const matchesSearch = project.name
|
||||
.toLowerCase()
|
||||
.includes(searchTerm.toLowerCase());
|
||||
return matchesStatus && matchesSearch;
|
||||
});
|
||||
|
||||
const totalPages = Math.ceil(filteredProjects.length / ITEMS_PER_PAGE);
|
||||
|
||||
const { currentItems, currentPage, paginate, setCurrentPage } = usePagination(
|
||||
filteredProjects,
|
||||
ITEMS_PER_PAGE
|
||||
);
|
||||
|
||||
const handleStatusChange = (statusId) => {
|
||||
setCurrentPage(1);
|
||||
setSelectedStatuses((prev) =>
|
||||
prev.includes(statusId)
|
||||
? prev.filter((id) => id !== statusId)
|
||||
: [...prev, statusId]
|
||||
);
|
||||
};
|
||||
|
||||
const sortingProject = (projects) => {
|
||||
if (!isLoading && Array.isArray(projects)) {
|
||||
const grouped = {};
|
||||
|
||||
projects.forEach((project) => {
|
||||
const statusId = project.projectStatusId;
|
||||
if (!grouped[statusId]) grouped[statusId] = [];
|
||||
grouped[statusId].push(project);
|
||||
});
|
||||
|
||||
const sortedGrouped = selectedStatuses
|
||||
.filter((statusId) => grouped[statusId])
|
||||
.flatMap((statusId) =>
|
||||
grouped[statusId].sort((a, b) =>
|
||||
a.name.toLowerCase().localeCompare(b.name.toLowerCase())
|
||||
)
|
||||
);
|
||||
|
||||
setProjectList((prev) => {
|
||||
const isSame = JSON.stringify(prev) === JSON.stringify(sortedGrouped);
|
||||
return isSame ? prev : sortedGrouped;
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (!isLoading && data) {
|
||||
sortingProject(data);
|
||||
}
|
||||
}, [data, isLoading, selectedStatuses]);
|
||||
|
||||
|
||||
if(isLoading) return <div className="page-min-h"><Loader/></div>
|
||||
if(isError) return <div className="page-min-h d-flex justify-content-center align-items-center"><p>{error.message}</p></div>
|
||||
return (
|
||||
<ProjectContext.Provider value={contextDispatcher}>
|
||||
<div className="container-fluid">
|
||||
<Breadcrumb
|
||||
data={[
|
||||
{ label: "Home", link: "/dashboard" },
|
||||
{ label: "Projects", link: null },
|
||||
]}
|
||||
/>
|
||||
|
||||
<div className="card cursor-pointer mb-5">
|
||||
<div className="card-body p-2 pb-1">
|
||||
<div className="d-flex flex-wrap justify-content-between align-items-start">
|
||||
<div className="d-flex flex-wrap align-items-start">
|
||||
<div className="flex-grow-1 me-2 mb-2">
|
||||
<input
|
||||
type="search"
|
||||
className="form-control form-control-sm"
|
||||
placeholder="Search projects..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => {
|
||||
setSearchTerm(e.target.value);
|
||||
setCurrentPage(1);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="d-flex gap-2 mb-2">
|
||||
<button
|
||||
type="button"
|
||||
className={`btn btn-sm p-1 ${
|
||||
!listView ? "btn-primary" : "btn-outline-primary"
|
||||
}`}
|
||||
onClick={() => setListView(false)}
|
||||
data-bs-toggle="tooltip"
|
||||
data-bs-custom-class="tooltip"
|
||||
title="Card View"
|
||||
>
|
||||
<i className="bx bx-grid-alt fs-5"></i>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={`btn btn-sm p-1 ${
|
||||
listView ? "btn-primary" : "btn-outline-primary"
|
||||
}`}
|
||||
onClick={() => setListView(true)}
|
||||
data-bs-toggle="tooltip"
|
||||
data-bs-custom-class="tooltip"
|
||||
title="List View"
|
||||
>
|
||||
<i className="bx bx-list-ul fs-5"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="dropdown mt-1">
|
||||
<a
|
||||
className="dropdown-toggle hide-arrow cursor-pointer p-1 mt-3 "
|
||||
data-bs-toggle="dropdown"
|
||||
aria-expanded="false"
|
||||
data-bs-custom-class="tooltip"
|
||||
title="Filter"
|
||||
>
|
||||
<i className="bx bx-slider-alt ms-1"></i>
|
||||
</a>
|
||||
<ul className="dropdown-menu p-2 text-capitalize">
|
||||
{PROJECT_STATUS.map(({ id, label }) => (
|
||||
<li key={id}>
|
||||
<div className="form-check">
|
||||
<input
|
||||
className="form-check-input "
|
||||
type="checkbox"
|
||||
checked={selectedStatuses.includes(id)}
|
||||
onChange={() => handleStatusChange(id)}
|
||||
/>
|
||||
<label className="form-check-label">{label}</label>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
{HasManageProject && ( <button
|
||||
className="btn btn-sm btn-primary"
|
||||
type="button"
|
||||
onClick={() =>
|
||||
setMangeProject({ isOpen: true, Project: null })
|
||||
}
|
||||
>
|
||||
<i className="bx bx-plus-circle me-2"></i>
|
||||
<span className="d-none d-md-inline-block">
|
||||
Add New Project
|
||||
</span>
|
||||
</button>)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Project Render here */}
|
||||
{listView ? (
|
||||
<ProjectListView
|
||||
currentItems={currentItems}
|
||||
selectedStatuses={selectedStatuses}
|
||||
handleStatusChange={handleStatusChange}
|
||||
setCurrentPage={setCurrentPage}
|
||||
totalPages={totalPages}
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
) : (
|
||||
<ProjectCardView currentItems={currentItems} setCurrentPage={setCurrentPage} totalPages={totalPages} />
|
||||
)}
|
||||
|
||||
{/* ------------------ */}
|
||||
|
||||
{/* Project Manage UPdate or create */}
|
||||
|
||||
{manageProject.isOpen && (
|
||||
<GlobalModel
|
||||
isOpen={manageProject.isOpen}
|
||||
closeModal={() => setMangeProject({ isOpen: false, Project: null })}
|
||||
>
|
||||
<ManageProjectInfo
|
||||
project={manageProject.Project}
|
||||
onClose={() => setMangeProject({ isOpen: false, Project: null })}
|
||||
/>
|
||||
</GlobalModel>
|
||||
)}
|
||||
</div>
|
||||
</ProjectContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProjectPage;
|
||||
@ -1,105 +0,0 @@
|
||||
import React from "react";
|
||||
import Breadcrumb from "../../components/common/Breadcrumb";
|
||||
import { PROJECt_STATUS } from "../../utils/constants";
|
||||
|
||||
const ProjectsPage = () => {
|
||||
return (
|
||||
<div className="container-fluid">
|
||||
|
||||
<Breadcrumb
|
||||
data={[
|
||||
{ label: "Home", link: "/dashboard" },
|
||||
{ label: "Projects", link: null },
|
||||
]}
|
||||
/>
|
||||
|
||||
<div className="card cursor-pointer mb-5">
|
||||
<div className="card-body p-2 pb-1">
|
||||
<div className="d-flex flex-wrap justify-content-between align-items-start">
|
||||
<div className="d-flex flex-wrap align-items-start">
|
||||
<div className="flex-grow-1 me-2 mb-2">
|
||||
<input
|
||||
type="search"
|
||||
className="form-control form-control-sm"
|
||||
placeholder="Search projects..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => {
|
||||
setSearchTerm(e.target.value);
|
||||
setCurrentPage(1);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="d-flex gap-2 mb-2">
|
||||
<button
|
||||
type="button"
|
||||
className={`btn btn-sm p-1 ${!listView ? "btn-primary" : "btn-outline-primary"
|
||||
}`}
|
||||
onClick={() => setListView(false)}
|
||||
data-bs-toggle="tooltip"
|
||||
data-bs-custom-class="tooltip"
|
||||
title="Card View"
|
||||
>
|
||||
<i className="bx bx-grid-alt fs-5"></i>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={`btn btn-sm p-1 ${listView ? "btn-primary" : "btn-outline-primary"
|
||||
}`}
|
||||
onClick={() => setListView(true)}
|
||||
data-bs-toggle="tooltip"
|
||||
data-bs-custom-class="tooltip"
|
||||
title="List View"
|
||||
>
|
||||
<i className="bx bx-list-ul fs-5"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="dropdown mt-1">
|
||||
<a
|
||||
className="dropdown-toggle hide-arrow cursor-pointer p-1 mt-3 "
|
||||
data-bs-toggle="dropdown"
|
||||
aria-expanded="false"
|
||||
data-bs-custom-class="tooltip"
|
||||
title="Filter"
|
||||
>
|
||||
<i className="bx bx-slider-alt ms-1"></i>
|
||||
</a>
|
||||
<ul className="dropdown-menu p-2 text-capitalize">
|
||||
{PROJECt_STATUS.map(({ id, label }) => (
|
||||
<li key={id}>
|
||||
<div className="form-check">
|
||||
<input
|
||||
className="form-check-input "
|
||||
type="checkbox"
|
||||
checked={selectedStatuses.includes(id)}
|
||||
onChange={() => handleStatusChange(id)}
|
||||
/>
|
||||
<label className="form-check-label">{label}</label>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button
|
||||
className="btn btn-sm btn-primary"
|
||||
type="button"
|
||||
onClick={handleShow}
|
||||
>
|
||||
<i className="bx bx-plus-circle me-2"></i>
|
||||
<span className="d-none d-md-inline-block">
|
||||
Add New Project
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProjectsPage;
|
||||
@ -13,7 +13,6 @@ import ChangePasswordPage from "../pages/authentication/ChangePassword";
|
||||
|
||||
// Home & Protected Pages
|
||||
import Dashboard from "../components/Dashboard/Dashboard";
|
||||
import ProjectList from "../pages/project/ProjectList";
|
||||
import ProjectDetails from "../pages/project/ProjectDetails";
|
||||
import ManageProject from "../components/Project/ManageProject";
|
||||
import EmployeeList from "../pages/employee/EmployeeList";
|
||||
@ -52,6 +51,7 @@ import OrganizationPage from "../pages/Organization/OrganizationPage";
|
||||
import LandingPage from "../pages/Home/LandingPage";
|
||||
import TenantSelectionPage from "../pages/authentication/TenantSelectionPage";
|
||||
import DailyProgrssReport from "../pages/DailyProgressReport/DailyProgrssReport";
|
||||
import ProjectPage from "../pages/project/ProjectPage";
|
||||
const router = createBrowserRouter(
|
||||
[
|
||||
{
|
||||
@ -79,7 +79,7 @@ const router = createBrowserRouter(
|
||||
element: <HomeLayout />,
|
||||
children: [
|
||||
{ path: "/dashboard", element: <Dashboard /> },
|
||||
{ path: "/projects", element: <ProjectList /> },
|
||||
{ path: "/projects", element: <ProjectPage /> },
|
||||
{ path: "/projects/details", element: <ProjectDetails /> },
|
||||
{ path: "/project/manage/:projectId", element: <ManageProject /> },
|
||||
{ path: "/employees", element: <EmployeeList /> },
|
||||
|
||||
@ -118,7 +118,7 @@ export const orgSize = [
|
||||
{ val: "500+", name: "500+" },
|
||||
];
|
||||
|
||||
export const PROJECt_STATUS = [
|
||||
export const PROJECT_STATUS = [
|
||||
{
|
||||
id: "b74da4c2-d07e-46f2-9919-e75e49b12731",
|
||||
label: "Active",
|
||||
@ -140,6 +140,7 @@ export const PROJECt_STATUS = [
|
||||
label: "Completed",
|
||||
},
|
||||
];
|
||||
export const DEFAULT_EMPTY_STATUS_ID = "00000000-0000-0000-0000-000000000000";
|
||||
|
||||
export const BASE_URL = process.env.VITE_BASE_URL;
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user