updated project files
This commit is contained in:
parent
482f8a9bcb
commit
198e31290c
@ -118,7 +118,7 @@ const Documents = ({ Document_Entity, Entity }) => {
|
|||||||
return (
|
return (
|
||||||
<DocumentContext.Provider value={contextValues}>
|
<DocumentContext.Provider value={contextValues}>
|
||||||
<div className="mt-5">
|
<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">
|
<div className="row align-items-center">
|
||||||
{/* Search */}
|
{/* Search */}
|
||||||
<div className="d-flex col-8 col-md-8 col-lg-4 mb-md-0 align-items-center">
|
<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 React, { useEffect, useState } from "react";
|
||||||
|
import { projectSchema, projectDefault } from "./ProjectSchema";
|
||||||
import { useForm, Controller } from "react-hook-form";
|
import { useForm, Controller } from "react-hook-form";
|
||||||
import { zodResolver } from "@hookform/resolvers/zod";
|
import { zodResolver } from "@hookform/resolvers/zod";
|
||||||
import { z } from "zod";
|
|
||||||
import Label from "../common/Label";
|
import Label from "../common/Label";
|
||||||
import DatePicker from "../common/DatePicker";
|
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) => {
|
const formatDate = (date) => {
|
||||||
if (!date) {
|
if (!date) {
|
||||||
return currentDate;
|
return currentDate;
|
||||||
@ -14,56 +27,23 @@ const formatDate = (date) => {
|
|||||||
if (isNaN(d.getTime())) {
|
if (isNaN(d.getTime())) {
|
||||||
return currentDate;
|
return currentDate;
|
||||||
}
|
}
|
||||||
return d.toLocaleDateString('en-CA');
|
return d.toLocaleDateString("en-CA");
|
||||||
};
|
};
|
||||||
const ManageProjectInfo = ({ project, handleSubmitForm, onClose, isPending }) => {
|
const ManageProjectInfo = ({ project, onClose }) => {
|
||||||
const [CurrentProject, setCurrentProject] = useState();
|
|
||||||
const [addressLength, setAddressLength] = useState(0);
|
const [addressLength, setAddressLength] = useState(0);
|
||||||
const maxAddressLength = 500;
|
const maxAddressLength = 500;
|
||||||
|
const { onOpen, startStep, flowType } = useOrganizationModal();
|
||||||
|
|
||||||
const ACTIVE_STATUS_ID = "b74da4c2-d07e-46f2-9919-e75e49b12731";
|
const ACTIVE_STATUS_ID = "b74da4c2-d07e-46f2-9919-e75e49b12731";
|
||||||
const DEFAULT_EMPTY_STATUS_ID = "00000000-0000-0000-0000-000000000000";
|
|
||||||
|
|
||||||
const projectSchema = z
|
const { projects_Details, loading } = useProjectDetails(project);
|
||||||
.object({
|
const { data, isLoading, isError, error } = useOrganizationsList(
|
||||||
...(project?.id ? { id: z.string().optional() } : {}),
|
ITEMS_PER_PAGE,
|
||||||
name: z.string().min(1, { message: "Project Name is required" }),
|
1,
|
||||||
shortName: z.string().optional(),
|
true
|
||||||
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 { mutate: UpdateProject, isPending } = useUpdateProject(() => {onClose?.()});
|
||||||
|
const {mutate:CeateProject,isPending:isCreating}= useCreateProject(()=>onClose?.())
|
||||||
|
|
||||||
const {
|
const {
|
||||||
register,
|
register,
|
||||||
@ -74,81 +54,67 @@ const ManageProjectInfo = ({ project, handleSubmitForm, onClose, isPending }) =>
|
|||||||
getValues,
|
getValues,
|
||||||
} = useForm({
|
} = useForm({
|
||||||
resolver: zodResolver(projectSchema),
|
resolver: zodResolver(projectSchema),
|
||||||
defaultValues: {
|
defaultValues: projectDefault,
|
||||||
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
|
|
||||||
},
|
|
||||||
mode: "onChange",
|
mode: "onChange",
|
||||||
});
|
});
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setCurrentProject(project);
|
if (project && projects_Details)
|
||||||
reset(
|
reset({
|
||||||
project
|
name: projects_Details?.name || "",
|
||||||
? {
|
shortName: projects_Details?.shortName || "",
|
||||||
id: project?.id || "",
|
contactPerson: projects_Details?.contactPerson || "",
|
||||||
name: project?.name || "",
|
projectAddress: projects_Details?.projectAddress || "",
|
||||||
shortName: project?.shortName || "",
|
startDate: formatDate(projects_Details?.startDate) || "",
|
||||||
contactPerson: project?.contactPerson || "",
|
endDate: formatDate(projects_Details?.endDate) || "",
|
||||||
projectAddress: project?.projectAddress || "",
|
projectStatusId:
|
||||||
startDate: formatDate(project?.startDate) || "",
|
String(projects_Details?.projectStatus?.id) ||
|
||||||
endDate: formatDate(project?.endDate) || "",
|
DEFAULT_EMPTY_STATUS_IDF,
|
||||||
projectStatusId: String(project?.projectStatus?.id) || "00000000-0000-0000-0000-000000000000",
|
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 = () => {
|
const handleCancel = () => {
|
||||||
reset({
|
reset(projectDefault);
|
||||||
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"),
|
|
||||||
});
|
|
||||||
onClose();
|
onClose();
|
||||||
};
|
};
|
||||||
|
const handleOrganizaioFinder = () => {
|
||||||
|
onClose();
|
||||||
|
onOpen({ startStep: 2, flowType: "default" });
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
||||||
<div className="p-sm-2 p-2">
|
<div className="p-sm-2 p-2">
|
||||||
|
|
||||||
<div className="text-center mb-2">
|
<div className="text-center mb-2">
|
||||||
<h5 className="mb-2">
|
<h5 className="mb-2">{project ? "Edit Project" : "Create Project"}</h5>
|
||||||
{project?.id ? "Edit Project" : "Create Project"}
|
|
||||||
</h5>
|
|
||||||
</div>
|
</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">
|
<div className="col-12 col-md-12">
|
||||||
<Label htmlFor="name" required>
|
<Label htmlFor="name" required>
|
||||||
Project Name
|
Project Name
|
||||||
@ -228,7 +194,10 @@ const ManageProjectInfo = ({ project, handleSubmitForm, onClose, isPending }) =>
|
|||||||
/>
|
/>
|
||||||
|
|
||||||
{errors.startDate && (
|
{errors.startDate && (
|
||||||
<div className="danger-text text-start" style={{ fontSize: "12px" }}>
|
<div
|
||||||
|
className="danger-text text-start"
|
||||||
|
style={{ fontSize: "12px" }}
|
||||||
|
>
|
||||||
{errors.startDate.message}
|
{errors.startDate.message}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
@ -248,13 +217,16 @@ const ManageProjectInfo = ({ project, handleSubmitForm, onClose, isPending }) =>
|
|||||||
/>
|
/>
|
||||||
|
|
||||||
{errors.endDate && (
|
{errors.endDate && (
|
||||||
<div className="danger-text text-start" style={{ fontSize: "12px" }}>
|
<div
|
||||||
|
className="danger-text text-start"
|
||||||
|
style={{ fontSize: "12px" }}
|
||||||
|
>
|
||||||
{errors.endDate.message}
|
{errors.endDate.message}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="col-12 col-md-6">
|
<div className="col-12 ">
|
||||||
<label className="form-label" htmlFor="modalEditUserStatus">
|
<label className="form-label" htmlFor="modalEditUserStatus">
|
||||||
Status
|
Status
|
||||||
</label>
|
</label>
|
||||||
@ -268,15 +240,11 @@ const ManageProjectInfo = ({ project, handleSubmitForm, onClose, isPending }) =>
|
|||||||
valueAsNumber: false,
|
valueAsNumber: false,
|
||||||
})}
|
})}
|
||||||
>
|
>
|
||||||
{/* <option disabled>Status</option>
|
{PROJECT_STATUS.map((status) => (
|
||||||
<option value="b74da4c2-d07e-46f2-9919-e75e49b12731">Active</option> */}
|
<option key={status.id} value={status.id}>
|
||||||
<option value={ACTIVE_STATUS_ID}>Active</option>
|
{status.label}
|
||||||
<option value="603e994b-a27f-4e5d-a251-f3d69b0498ba">On Hold</option>
|
</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>
|
|
||||||
</select>
|
</select>
|
||||||
{errors.projectStatusId && (
|
{errors.projectStatusId && (
|
||||||
<div
|
<div
|
||||||
@ -287,6 +255,83 @@ const ManageProjectInfo = ({ project, handleSubmitForm, onClose, isPending }) =>
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</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">
|
<div className="col-12 col-md-12">
|
||||||
<Label htmlFor="projectAddress" required>
|
<Label htmlFor="projectAddress" required>
|
||||||
@ -304,6 +349,7 @@ const ManageProjectInfo = ({ project, handleSubmitForm, onClose, isPending }) =>
|
|||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="text-end" style={{ fontSize: "12px" }}>
|
<div className="text-end" style={{ fontSize: "12px" }}>
|
||||||
{maxAddressLength - addressLength} characters left
|
{maxAddressLength - addressLength} characters left
|
||||||
</div>
|
</div>
|
||||||
@ -322,19 +368,18 @@ const ManageProjectInfo = ({ project, handleSubmitForm, onClose, isPending }) =>
|
|||||||
className="btn btn-label-secondary btn-sm me-2"
|
className="btn btn-label-secondary btn-sm me-2"
|
||||||
onClick={handleCancel}
|
onClick={handleCancel}
|
||||||
aria-label="Close"
|
aria-label="Close"
|
||||||
disabled={isPending}
|
disabled={isPending || isCreating}
|
||||||
>
|
>
|
||||||
Cancel
|
Cancel
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
type="submit"
|
type="submit"
|
||||||
className="btn btn-primary btn-sm"
|
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>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</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 GlobalModel from "../common/GlobalModel";
|
||||||
import { useDispatch } from "react-redux";
|
import { useDispatch } from "react-redux";
|
||||||
import { setProjectId } from "../../slices/localVariablesSlice";
|
import { setProjectId } from "../../slices/localVariablesSlice";
|
||||||
|
import { useProjectContext } from "../../pages/project/ProjectPage";
|
||||||
|
|
||||||
const ProjectCard = ({ projectData, recall }) => {
|
const ProjectCard = ({ project }) => {
|
||||||
const [projectInfo, setProjectInfo] = useState(projectData);
|
const dispatch = useDispatch();
|
||||||
const { projects_Details, loading, error, refetch } = useProjectDetails(
|
|
||||||
projectInfo?.id, false
|
|
||||||
);
|
|
||||||
const [showModal, setShowModal] = useState(false);
|
|
||||||
const dispatch = useDispatch()
|
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
const ManageProject = useHasUserPermission(MANAGE_PROJECT);
|
const ManageProject = useHasUserPermission(MANAGE_PROJECT);
|
||||||
const {
|
const { setMangeProject } = useProjectContext();
|
||||||
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 getProgress = (planned, completed) => {
|
const getProgress = (planned, completed) => {
|
||||||
return (completed * 100) / planned + "%";
|
return (completed * 100) / planned + "%";
|
||||||
@ -60,39 +34,18 @@ const ProjectCard = ({ projectData, recall }) => {
|
|||||||
const handleClose = () => setShowModal(false);
|
const handleClose = () => setShowModal(false);
|
||||||
|
|
||||||
const handleViewProject = () => {
|
const handleViewProject = () => {
|
||||||
dispatch(setProjectId(projectInfo.id))
|
dispatch(setProjectId(project.id));
|
||||||
navigate(`/projects/details`);
|
navigate(`/projects/details`);
|
||||||
};
|
};
|
||||||
const handleViewActivities = () => {
|
const handleViewActivities = () => {
|
||||||
dispatch(setProjectId(projectInfo.id))
|
dispatch(setProjectId(project.id));
|
||||||
navigate(`/activities/records?project=${projectInfo.id}`);
|
navigate(`/activities/records?project=${project.id}`);
|
||||||
};
|
|
||||||
|
|
||||||
const handleFormSubmit = (updatedProject) => {
|
|
||||||
if (projectInfo?.id) {
|
|
||||||
updateProject({
|
|
||||||
projectId: projectInfo.id,
|
|
||||||
updatedData: updatedProject,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
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="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="card-header pb-4">
|
||||||
<div className="d-flex align-items-start">
|
<div className="d-flex align-items-start">
|
||||||
<div className="d-flex align-items-center">
|
<div className="d-flex align-items-center">
|
||||||
@ -107,12 +60,10 @@ const ProjectCard = ({ projectData, recall }) => {
|
|||||||
className="mb-0 stretched-link text-heading text-start"
|
className="mb-0 stretched-link text-heading text-start"
|
||||||
onClick={handleViewProject}
|
onClick={handleViewProject}
|
||||||
>
|
>
|
||||||
{projectInfo.shortName
|
{project?.shortName ? project?.shortName : project?.name}
|
||||||
? projectInfo.shortName
|
|
||||||
: projectInfo.name}
|
|
||||||
</h5>
|
</h5>
|
||||||
<div className="client-info text-body">
|
<div className="client-info text-body">
|
||||||
<span>{projectInfo.shortName ? projectInfo.name : ""}</span>
|
<span>{project.shortName ? project.name : ""}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -124,14 +75,6 @@ const ProjectCard = ({ projectData, recall }) => {
|
|||||||
data-bs-toggle="dropdown"
|
data-bs-toggle="dropdown"
|
||||||
aria-expanded="false"
|
aria-expanded="false"
|
||||||
>
|
>
|
||||||
{loading ? (
|
|
||||||
<div
|
|
||||||
className="spinner-border spinner-border-sm text-secondary"
|
|
||||||
role="status"
|
|
||||||
>
|
|
||||||
<span className="visually-hidden">Loading...</span>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<i
|
<i
|
||||||
className="bx bx-dots-vertical-rounded bx-sm text-muted"
|
className="bx bx-dots-vertical-rounded bx-sm text-muted"
|
||||||
data-bs-toggle="tooltip"
|
data-bs-toggle="tooltip"
|
||||||
@ -140,7 +83,6 @@ const ProjectCard = ({ projectData, recall }) => {
|
|||||||
data-bs-custom-class="tooltip-dark"
|
data-bs-custom-class="tooltip-dark"
|
||||||
title="More Action"
|
title="More Action"
|
||||||
></i>
|
></i>
|
||||||
)}
|
|
||||||
</button>
|
</button>
|
||||||
<ul className="dropdown-menu dropdown-menu-end">
|
<ul className="dropdown-menu dropdown-menu-end">
|
||||||
<li>
|
<li>
|
||||||
@ -154,15 +96,18 @@ const ProjectCard = ({ projectData, recall }) => {
|
|||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<li onClick={handleShow}>
|
<li>
|
||||||
<a className="dropdown-item">
|
<a className="dropdown-item" onClick={() =>
|
||||||
|
setMangeProject({
|
||||||
|
isOpen: true,
|
||||||
|
Project: project.id,
|
||||||
|
})
|
||||||
|
}>
|
||||||
<i className="bx bx-pencil me-2"></i>
|
<i className="bx bx-pencil me-2"></i>
|
||||||
<span className="align-left">Modify</span>
|
<span className="align-left">Modify</span>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li
|
<li onClick={handleViewActivities}>
|
||||||
onClick={handleViewActivities}
|
|
||||||
>
|
|
||||||
<a className="dropdown-item">
|
<a className="dropdown-item">
|
||||||
<i className="bx bx-task me-2"></i>
|
<i className="bx bx-task me-2"></i>
|
||||||
<span className="align-left">Activities</span>
|
<span className="align-left">Activities</span>
|
||||||
@ -180,22 +125,22 @@ const ProjectCard = ({ projectData, recall }) => {
|
|||||||
<span className="text-heading fw-medium">
|
<span className="text-heading fw-medium">
|
||||||
Contact Person:{" "}
|
Contact Person:{" "}
|
||||||
</span>
|
</span>
|
||||||
{projectInfo.contactPerson ? projectInfo.contactPerson : "NA"}
|
{project.contactPerson ? project.contactPerson : "NA"}
|
||||||
</p>
|
</p>
|
||||||
<p className="mb-1">
|
<p className="mb-1">
|
||||||
<span className="text-heading fw-medium">Start Date: </span>
|
<span className="text-heading fw-medium">Start Date: </span>
|
||||||
{projectInfo.startDate
|
{project.startDate
|
||||||
? moment(projectInfo.startDate).format("DD-MMM-YYYY")
|
? moment(project.startDate).format("DD-MMM-YYYY")
|
||||||
: "NA"}
|
: "NA"}
|
||||||
</p>
|
</p>
|
||||||
<p className="mb-1">
|
<p className="mb-1">
|
||||||
<span className="text-heading fw-medium">Deadline: </span>
|
<span className="text-heading fw-medium">Deadline: </span>
|
||||||
|
|
||||||
{projectInfo.endDate
|
{project.endDate
|
||||||
? moment(projectInfo.endDate).format("DD-MMM-YYYY")
|
? moment(project.endDate).format("DD-MMM-YYYY")
|
||||||
: "NA"}
|
: "NA"}
|
||||||
</p>
|
</p>
|
||||||
<p className="mb-0">{projectInfo.projectAddress}</p>
|
<p className="mb-0">{project.projectAddress}</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -205,36 +150,37 @@ const ProjectCard = ({ projectData, recall }) => {
|
|||||||
<span
|
<span
|
||||||
className={
|
className={
|
||||||
`badge rounded-pill ` +
|
`badge rounded-pill ` +
|
||||||
getProjectStatusColor(projectInfo.projectStatusId)
|
getProjectStatusColor(project.projectStatusId)
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
{getProjectStatusName(projectInfo.projectStatusId)}
|
{getProjectStatusName(project.projectStatusId)}
|
||||||
</span>
|
</span>
|
||||||
</p>{" "}
|
</p>{" "}
|
||||||
{getDateDifferenceInDays(projectInfo.endDate, Date()) >= 0 && (
|
{getDateDifferenceInDays(project.endDate, Date()) >= 0 && (
|
||||||
<span className="badge bg-label-success ms-auto">
|
<span className="badge bg-label-success ms-auto">
|
||||||
{projectInfo.endDate &&
|
{project.endDate &&
|
||||||
getDateDifferenceInDays(projectInfo.endDate, Date())}{" "}
|
getDateDifferenceInDays(project.endDate, Date())}{" "}
|
||||||
Days left
|
Days left
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
{getDateDifferenceInDays(projectInfo.endDate, Date()) < 0 && (
|
{getDateDifferenceInDays(project.endDate, Date()) < 0 && (
|
||||||
<span className="badge bg-label-danger ms-auto">
|
<span className="badge bg-label-danger ms-auto">
|
||||||
{projectInfo.endDate &&
|
{project.endDate &&
|
||||||
getDateDifferenceInDays(projectInfo.endDate, Date())}{" "}
|
getDateDifferenceInDays(project.endDate, Date())}{" "}
|
||||||
Days overdue
|
Days overdue
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<div className="d-flex justify-content-between align-items-center mb-2">
|
<div className="d-flex justify-content-between align-items-center mb-2">
|
||||||
<small className="text-body">
|
<small className="text-body">
|
||||||
Task: {formatNumber(projectInfo.completedWork)} / {formatNumber(projectInfo.plannedWork)}
|
Task: {formatNumber(project.completedWork)} /{" "}
|
||||||
|
{formatNumber(project.plannedWork)}
|
||||||
</small>
|
</small>
|
||||||
<small className="text-body">
|
<small className="text-body">
|
||||||
{Math.floor(
|
{Math.floor(
|
||||||
getProgressInNumber(
|
getProgressInNumber(
|
||||||
projectInfo.plannedWork,
|
project.plannedWork,
|
||||||
projectInfo.completedWork
|
project.completedWork
|
||||||
)
|
)
|
||||||
) || 0}{" "}
|
) || 0}{" "}
|
||||||
% Completed
|
% Completed
|
||||||
@ -246,22 +192,20 @@ const ProjectCard = ({ projectData, recall }) => {
|
|||||||
role="progressbar"
|
role="progressbar"
|
||||||
style={{
|
style={{
|
||||||
width: getProgress(
|
width: getProgress(
|
||||||
projectInfo.plannedWork,
|
project.plannedWork,
|
||||||
projectInfo.completedWork
|
project.completedWork
|
||||||
),
|
),
|
||||||
}}
|
}}
|
||||||
aria-valuenow={projectInfo.completedWork}
|
aria-valuenow={project.completedWork}
|
||||||
aria-valuemin="0"
|
aria-valuemin="0"
|
||||||
aria-valuemax={projectInfo.plannedWork}
|
aria-valuemax={project.plannedWork}
|
||||||
></div>
|
></div>
|
||||||
</div>
|
</div>
|
||||||
<div className="d-flex align-items-center justify-content-between">
|
<div className="d-flex align-items-center justify-content-between">
|
||||||
{/* <div className="d-flex align-items-center ">
|
|
||||||
</div> */}
|
|
||||||
<div>
|
<div>
|
||||||
<a className="text-muted d-flex " alt="Active team size">
|
<a className="text-muted d-flex " alt="Active team size">
|
||||||
<i className="bx bx-group bx-sm me-1_5"></i>
|
<i className="bx bx-group bx-sm me-1_5"></i>
|
||||||
{projectInfo?.teamSize} Members
|
{project?.teamSize} Members
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<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 React from "react";
|
||||||
import AssignRole from './AssignTask'
|
import AssignRole from "./AssignTask";
|
||||||
|
|
||||||
const ProjectModal = ({modalConfig,closeModal}) => {
|
|
||||||
|
|
||||||
|
const ProjectModal = ({ modalConfig, closeModal }) => {
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className="modal fade"
|
className="modal fade"
|
||||||
@ -23,14 +22,14 @@ const ProjectModal = ({modalConfig,closeModal}) => {
|
|||||||
></button>
|
></button>
|
||||||
<div className="text-center mb-2"></div>
|
<div className="text-center mb-2"></div>
|
||||||
|
|
||||||
|
{modalConfig?.type === "assignRole" && (
|
||||||
{modalConfig?.type === "assignRole" && <AssignRole assignData={modalConfig?.data} onClose={closeModal} />}
|
<AssignRole assignData={modalConfig?.data} onClose={closeModal} />
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
);
|
||||||
}
|
};
|
||||||
|
|
||||||
export default ProjectModal
|
export default ProjectModal;
|
||||||
|
|||||||
@ -67,7 +67,7 @@ const ProjectAssignedOrgs = () => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<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">
|
<table className="table dataTable text-nowrap">
|
||||||
<thead>
|
<thead>
|
||||||
<tr className="table_header_border">
|
<tr className="table_header_border">
|
||||||
|
|||||||
@ -10,9 +10,9 @@ import ReactApexChart from "react-apexcharts";
|
|||||||
import Chart from "react-apexcharts";
|
import Chart from "react-apexcharts";
|
||||||
|
|
||||||
const ProjectOverview = ({ project }) => {
|
const ProjectOverview = ({ project }) => {
|
||||||
const { projects } = useProjects();
|
const { data } = useProjects();
|
||||||
const [current_project, setCurrentProject] = useState(
|
const [current_project, setCurrentProject] = useState(
|
||||||
projects.find((pro) => pro.id == project)
|
data?.find((pro) => pro.id == project)
|
||||||
);
|
);
|
||||||
|
|
||||||
const selectedProject = useSelector(
|
const selectedProject = useSelector(
|
||||||
@ -154,7 +154,7 @@ const ProjectOverview = ({ project }) => {
|
|||||||
}, [current_project]);
|
}, [current_project]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setCurrentProject(projects.find((pro) => pro.id == selectedProject));
|
setCurrentProject(data?.find((pro) => pro.id == selectedProject));
|
||||||
if (current_project) {
|
if (current_project) {
|
||||||
let val = getProgressInPercentage(
|
let val = getProgressInPercentage(
|
||||||
current_project.plannedWork,
|
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 React, { useState, useEffect, useCallback, useMemo } from "react";
|
||||||
import MapUsers from "../MapUsers";
|
|
||||||
import { Link, NavLink, useNavigate, useParams } from "react-router-dom";
|
import { Link, NavLink, useNavigate, useParams } from "react-router-dom";
|
||||||
|
|
||||||
import showToast from "../../../services/toastService";
|
import showToast from "../../../services/toastService";
|
||||||
|
|||||||
@ -14,27 +14,15 @@ import {
|
|||||||
} from "@tanstack/react-query";
|
} from "@tanstack/react-query";
|
||||||
import showToast from "../services/toastService";
|
import showToast from "../services/toastService";
|
||||||
|
|
||||||
|
export const useCurrentService = () => {
|
||||||
|
return useSelector((store) => store.globalVariables.selectedServiceId);
|
||||||
export const useCurrentService = ()=>{
|
};
|
||||||
return useSelector((store)=>store.globalVariables.selectedServiceId)
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// ------------------------------Query-------------------
|
// ------------------------------Query-------------------
|
||||||
|
|
||||||
export const useProjects = () => {
|
export const useProjects = () => {
|
||||||
const loggedUser = useSelector((store) => store.globalVariables.loginUser);
|
const loggedUser = useSelector((store) => store.globalVariables.loginUser);
|
||||||
|
return useQuery({
|
||||||
const {
|
|
||||||
data: projects = [],
|
|
||||||
isLoading: loading,
|
|
||||||
error,
|
|
||||||
refetch,
|
|
||||||
} = useQuery({
|
|
||||||
queryKey: ["ProjectsList"],
|
queryKey: ["ProjectsList"],
|
||||||
queryFn: async () => {
|
queryFn: async () => {
|
||||||
const response = await ProjectRepository.getProjectList();
|
const response = await ProjectRepository.getProjectList();
|
||||||
@ -42,19 +30,13 @@ export const useProjects = () => {
|
|||||||
},
|
},
|
||||||
enabled: !!loggedUser,
|
enabled: !!loggedUser,
|
||||||
});
|
});
|
||||||
|
|
||||||
return {
|
|
||||||
projects,
|
|
||||||
loading,
|
|
||||||
error,
|
|
||||||
refetch,
|
|
||||||
};
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export const useEmployeesByProjectAllocated = (
|
export const useEmployeesByProjectAllocated = (
|
||||||
projectId,
|
projectId,
|
||||||
serviceId,
|
serviceId,
|
||||||
organizationId,emloyeeeStatus
|
organizationId,
|
||||||
|
emloyeeeStatus
|
||||||
) => {
|
) => {
|
||||||
const {
|
const {
|
||||||
data = [],
|
data = [],
|
||||||
@ -62,10 +44,17 @@ export const useEmployeesByProjectAllocated = (
|
|||||||
refetch,
|
refetch,
|
||||||
error,
|
error,
|
||||||
} = useQuery({
|
} = useQuery({
|
||||||
queryKey: ["empListByProjectAllocated", projectId, serviceId,organizationId,emloyeeeStatus],
|
queryKey: [
|
||||||
|
"empListByProjectAllocated",
|
||||||
|
projectId,
|
||||||
|
serviceId,
|
||||||
|
organizationId,
|
||||||
|
emloyeeeStatus,
|
||||||
|
],
|
||||||
queryFn: async () => {
|
queryFn: async () => {
|
||||||
const res = await ProjectRepository.getProjectAllocation(
|
const res = await ProjectRepository.getProjectAllocation(
|
||||||
projectId, serviceId,
|
projectId,
|
||||||
|
serviceId,
|
||||||
organizationId,
|
organizationId,
|
||||||
emloyeeeStatus
|
emloyeeeStatus
|
||||||
);
|
);
|
||||||
@ -190,17 +179,20 @@ export const useProjectName = () => {
|
|||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
export const useProjectInfra = (projectId,serviceId) => {
|
export const useProjectInfra = (projectId, serviceId) => {
|
||||||
const {
|
const {
|
||||||
data: projectInfra,
|
data: projectInfra,
|
||||||
isLoading,
|
isLoading,
|
||||||
error,
|
error,
|
||||||
isFetched,
|
isFetched,
|
||||||
} = useQuery({
|
} = useQuery({
|
||||||
queryKey: ["ProjectInfra", projectId,serviceId],
|
queryKey: ["ProjectInfra", projectId, serviceId],
|
||||||
queryFn: async () => {
|
queryFn: async () => {
|
||||||
if (!projectId) return null;
|
if (!projectId) return null;
|
||||||
const res = await ProjectRepository.getProjectInfraByproject(projectId,serviceId);
|
const res = await ProjectRepository.getProjectInfraByproject(
|
||||||
|
projectId,
|
||||||
|
serviceId
|
||||||
|
);
|
||||||
return res.data;
|
return res.data;
|
||||||
},
|
},
|
||||||
enabled: !!projectId,
|
enabled: !!projectId,
|
||||||
@ -212,11 +204,18 @@ export const useProjectInfra = (projectId,serviceId) => {
|
|||||||
return { projectInfra, isLoading, error, isFetched };
|
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({
|
const { data, isLoading, error } = useQuery({
|
||||||
queryKey: ["WorkItems", workAreaId, serviceId],
|
queryKey: ["WorkItems", workAreaId, serviceId],
|
||||||
queryFn: async () => {
|
queryFn: async () => {
|
||||||
const res = await ProjectRepository.getProjectTasksByWorkArea(workAreaId, serviceId);
|
const res = await ProjectRepository.getProjectTasksByWorkArea(
|
||||||
|
workAreaId,
|
||||||
|
serviceId
|
||||||
|
);
|
||||||
return res.data; // return actual task list
|
return res.data; // return actual task list
|
||||||
},
|
},
|
||||||
enabled: !!workAreaId && isExpandedArea, // only fetch if workAreaId exists and area is expanded
|
enabled: !!workAreaId && isExpandedArea, // only fetch if workAreaId exists and area is expanded
|
||||||
@ -308,13 +307,21 @@ export const useProjectAssignedServices = (projectId) => {
|
|||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export const useEmployeeForTaskAssign = (
|
||||||
export const useEmployeeForTaskAssign = (projectId,serviceId,organizationId)=>{
|
projectId,
|
||||||
|
serviceId,
|
||||||
|
organizationId
|
||||||
|
) => {
|
||||||
return useQuery({
|
return useQuery({
|
||||||
queryKey:["EmployeeForTaskAssign",projectId,serviceId,organizationId],
|
queryKey: ["EmployeeForTaskAssign", projectId, serviceId, organizationId],
|
||||||
queryFn:async()=> await ProjectRepository.getEmployeeForTaskAssign(projectId,serviceId,organizationId)
|
queryFn: async () =>
|
||||||
})
|
await ProjectRepository.getEmployeeForTaskAssign(
|
||||||
}
|
projectId,
|
||||||
|
serviceId,
|
||||||
|
organizationId
|
||||||
|
),
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
// -- -------------Mutation-------------------------------
|
// -- -------------Mutation-------------------------------
|
||||||
|
|
||||||
@ -322,8 +329,8 @@ export const useCreateProject = ({ onSuccessCallback }) => {
|
|||||||
const queryClient = useQueryClient();
|
const queryClient = useQueryClient();
|
||||||
|
|
||||||
return useMutation({
|
return useMutation({
|
||||||
mutationFn: async (newProject) => {
|
mutationFn: async (payload) => {
|
||||||
const res = await ProjectRepository.manageProject(newProject);
|
const res = await ProjectRepository.manageProject(payload);
|
||||||
return res.data;
|
return res.data;
|
||||||
},
|
},
|
||||||
onSuccess: (data) => {
|
onSuccess: (data) => {
|
||||||
@ -349,11 +356,11 @@ export const useCreateProject = ({ onSuccessCallback }) => {
|
|||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
export const useUpdateProject = ({ onSuccessCallback }) => {
|
export const useUpdateProject = ( onSuccessCallback ) => {
|
||||||
const queryClient = useQueryClient();
|
const queryClient = useQueryClient();
|
||||||
const { mutate, isPending, isSuccess, isError } = useMutation({
|
const { mutate, isPending, isSuccess, isError } = useMutation({
|
||||||
mutationFn: async ({ projectId, updatedData }) => {
|
mutationFn: async ({ projectId, payload }) => {
|
||||||
return await ProjectRepository.updateProject(projectId, updatedData);
|
return await ProjectRepository.updateProject(projectId, payload);
|
||||||
},
|
},
|
||||||
|
|
||||||
onSuccess: (data, variables) => {
|
onSuccess: (data, variables) => {
|
||||||
@ -413,7 +420,7 @@ export const useManageProjectAllocation = ({
|
|||||||
const queryClient = useQueryClient();
|
const queryClient = useQueryClient();
|
||||||
|
|
||||||
const { mutate, isPending, isSuccess, isError } = useMutation({
|
const { mutate, isPending, isSuccess, isError } = useMutation({
|
||||||
mutationFn: async ({payload}) => {
|
mutationFn: async ({ payload }) => {
|
||||||
const response = await ProjectRepository.manageProjectAllocation(payload);
|
const response = await ProjectRepository.manageProjectAllocation(payload);
|
||||||
return response.data;
|
return response.data;
|
||||||
},
|
},
|
||||||
|
|||||||
@ -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
|
// Home & Protected Pages
|
||||||
import Dashboard from "../components/Dashboard/Dashboard";
|
import Dashboard from "../components/Dashboard/Dashboard";
|
||||||
import ProjectList from "../pages/project/ProjectList";
|
|
||||||
import ProjectDetails from "../pages/project/ProjectDetails";
|
import ProjectDetails from "../pages/project/ProjectDetails";
|
||||||
import ManageProject from "../components/Project/ManageProject";
|
import ManageProject from "../components/Project/ManageProject";
|
||||||
import EmployeeList from "../pages/employee/EmployeeList";
|
import EmployeeList from "../pages/employee/EmployeeList";
|
||||||
@ -52,6 +51,7 @@ import OrganizationPage from "../pages/Organization/OrganizationPage";
|
|||||||
import LandingPage from "../pages/Home/LandingPage";
|
import LandingPage from "../pages/Home/LandingPage";
|
||||||
import TenantSelectionPage from "../pages/authentication/TenantSelectionPage";
|
import TenantSelectionPage from "../pages/authentication/TenantSelectionPage";
|
||||||
import DailyProgrssReport from "../pages/DailyProgressReport/DailyProgrssReport";
|
import DailyProgrssReport from "../pages/DailyProgressReport/DailyProgrssReport";
|
||||||
|
import ProjectPage from "../pages/project/ProjectPage";
|
||||||
const router = createBrowserRouter(
|
const router = createBrowserRouter(
|
||||||
[
|
[
|
||||||
{
|
{
|
||||||
@ -79,7 +79,7 @@ const router = createBrowserRouter(
|
|||||||
element: <HomeLayout />,
|
element: <HomeLayout />,
|
||||||
children: [
|
children: [
|
||||||
{ path: "/dashboard", element: <Dashboard /> },
|
{ path: "/dashboard", element: <Dashboard /> },
|
||||||
{ path: "/projects", element: <ProjectList /> },
|
{ path: "/projects", element: <ProjectPage /> },
|
||||||
{ path: "/projects/details", element: <ProjectDetails /> },
|
{ path: "/projects/details", element: <ProjectDetails /> },
|
||||||
{ path: "/project/manage/:projectId", element: <ManageProject /> },
|
{ path: "/project/manage/:projectId", element: <ManageProject /> },
|
||||||
{ path: "/employees", element: <EmployeeList /> },
|
{ path: "/employees", element: <EmployeeList /> },
|
||||||
|
|||||||
@ -118,7 +118,7 @@ export const orgSize = [
|
|||||||
{ val: "500+", name: "500+" },
|
{ val: "500+", name: "500+" },
|
||||||
];
|
];
|
||||||
|
|
||||||
export const PROJECt_STATUS = [
|
export const PROJECT_STATUS = [
|
||||||
{
|
{
|
||||||
id: "b74da4c2-d07e-46f2-9919-e75e49b12731",
|
id: "b74da4c2-d07e-46f2-9919-e75e49b12731",
|
||||||
label: "Active",
|
label: "Active",
|
||||||
@ -140,6 +140,7 @@ export const PROJECt_STATUS = [
|
|||||||
label: "Completed",
|
label: "Completed",
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
export const DEFAULT_EMPTY_STATUS_ID = "00000000-0000-0000-0000-000000000000";
|
||||||
|
|
||||||
export const BASE_URL = process.env.VITE_BASE_URL;
|
export const BASE_URL = process.env.VITE_BASE_URL;
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user