Merge branch 'Service_Project_Managment' of https://git.marcoaiot.com/admin/marco.pms.web into Advance_Payment_List
This commit is contained in:
commit
54d89e1429
@ -54,6 +54,7 @@ const TaskReportFilterPanel = ({ handleFilter }) => {
|
||||
<div className="mb-3 w-100">
|
||||
<label className="fw-semibold">Choose Date Range:</label>
|
||||
<DateRangePicker1
|
||||
className="w-100"
|
||||
placeholder="DD-MM-YYYY To DD-MM-YYYY"
|
||||
startField="dateFrom"
|
||||
endField="dateTo"
|
||||
|
||||
@ -202,6 +202,7 @@ const TaskReportList = () => {
|
||||
<span>
|
||||
Total Pending{" "}
|
||||
<HoverPopup
|
||||
id="total_pending_task"
|
||||
title="Total Pending Task"
|
||||
content={<p>This shows the total pending tasks for each activity on that date.</p>}
|
||||
>
|
||||
@ -213,6 +214,7 @@ const TaskReportList = () => {
|
||||
<span>
|
||||
Reported/Planned{" "}
|
||||
<HoverPopup
|
||||
id="reportes_and_planned_task"
|
||||
title="Reported and Planned Task"
|
||||
content={<p>This shows the reported versus planned tasks for each activity on that date.</p>}
|
||||
>
|
||||
|
||||
@ -241,6 +241,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
|
||||
</Label>
|
||||
<HoverPopup
|
||||
title="Payment Type"
|
||||
id="payment_type"
|
||||
content={
|
||||
<p>
|
||||
Choose whether the payment amount varies or remains fixed each cycle.
|
||||
@ -387,6 +388,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
|
||||
</Label>
|
||||
<HoverPopup
|
||||
title="Frequency"
|
||||
id="frequency"
|
||||
content={
|
||||
<p>
|
||||
Defines how often payments or billing occur, such as monthly, quarterly, or annually.
|
||||
@ -450,6 +452,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
|
||||
</Label>
|
||||
<HoverPopup
|
||||
title="Payment Buffer Days"
|
||||
id="payment_buffer_days"
|
||||
content={
|
||||
<p>
|
||||
Number of extra days allowed after the due date before payment is considered late.
|
||||
@ -485,6 +488,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
|
||||
</Label>
|
||||
<HoverPopup
|
||||
title="End Date"
|
||||
id="end_date"
|
||||
content={
|
||||
<p>
|
||||
The date when the last payment in the recurrence occurs.
|
||||
|
||||
@ -22,7 +22,7 @@ const JobComments = ({ data }) => {
|
||||
formState: { errors },
|
||||
} = useAppForm({
|
||||
resolver: zodResolver(JobCommentSchema),
|
||||
defaultValues: { comment: "", attachments: [] }
|
||||
defaultValues: { comment: "", attachments: [] },
|
||||
});
|
||||
|
||||
const {
|
||||
@ -118,50 +118,41 @@ const JobComments = ({ data }) => {
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="d-flex flex-column flex-md-row justify-content-between align-items-start">
|
||||
{/* LEFT SIDE → Uploaded Files */}
|
||||
<div className="flex-grow-1 ms-10 mt-2">
|
||||
{files?.length > 0 && (
|
||||
<Filelist files={files} removeFile={removeFile} />
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* RIGHT SIDE → Add Attachment + Submit */}
|
||||
<div className="d-flex gap-3 align-items-center text-end mt-3 ms-10 ms-md-0">
|
||||
<div
|
||||
onClick={() => document.getElementById("attachments").click()}
|
||||
className="cursor-pointer"
|
||||
style={{ whiteSpace: 'nowrap' }}
|
||||
>
|
||||
<input
|
||||
type="file"
|
||||
accept=".pdf,.jpg,.jpeg,.png"
|
||||
id="attachments"
|
||||
multiple
|
||||
className="d-none"
|
||||
{...register("attachments")}
|
||||
onChange={(e) => {
|
||||
onFileChange(e);
|
||||
e.target.value = "";
|
||||
}}
|
||||
/>
|
||||
<i className="bx bx-sm bx-paperclip mb-1 me-1"></i>
|
||||
Add Attachment
|
||||
</div>
|
||||
|
||||
<button
|
||||
className="btn btn-primary btn-sm px-1 py-1" // smaller padding + slightly smaller font
|
||||
type="submit"
|
||||
disabled={!watch("comment")?.trim() || isPending}
|
||||
>
|
||||
<i className="bx bx-xs bx-send me-1"></i>
|
||||
Submit
|
||||
</button>
|
||||
|
||||
</div>
|
||||
<div className="flex-grow-1 ms-10 mt-2">
|
||||
{files?.length > 0 && (
|
||||
<Filelist files={files} removeFile={removeFile} />
|
||||
)}
|
||||
</div>
|
||||
<div className="d-flex justify-content-end gap-2 align-items-center text-end mt-3 ms-10 ms-md-0">
|
||||
<div
|
||||
onClick={() => document.getElementById("attachments").click()}
|
||||
className="cursor-pointer"
|
||||
style={{ whiteSpace: "nowrap" }}
|
||||
>
|
||||
<input
|
||||
type="file"
|
||||
accept=".pdf,.jpg,.jpeg,.png"
|
||||
id="attachments"
|
||||
multiple
|
||||
className="d-none"
|
||||
{...register("attachments")}
|
||||
onChange={(e) => {
|
||||
onFileChange(e);
|
||||
e.target.value = "";
|
||||
}}
|
||||
/>
|
||||
<i className="bx bx-sm bx-paperclip mb-1 me-1"></i>
|
||||
Add Attachment
|
||||
</div>
|
||||
|
||||
<button
|
||||
className="btn btn-primary btn-sm px-1 py-1" // smaller padding + slightly smaller font
|
||||
type="submit"
|
||||
disabled={!watch("comment")?.trim() || isPending}
|
||||
>
|
||||
Submit
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div className="card-body p-0">
|
||||
|
||||
@ -1,5 +1,9 @@
|
||||
import React, { useState } from "react";
|
||||
import { daysLeft, getNextBadgeColor } from "../../utils/appUtils";
|
||||
import {
|
||||
daysLeft,
|
||||
getJobStatusBadge,
|
||||
getNextBadgeColor,
|
||||
} from "../../utils/appUtils";
|
||||
import { useServiceProjectJobs } from "../../hooks/useServiceProject";
|
||||
import { ITEMS_PER_PAGE } from "../../utils/constants";
|
||||
import EmployeeAvatarGroup from "../common/EmployeeAvatarGroup";
|
||||
@ -23,7 +27,7 @@ const JobList = () => {
|
||||
{
|
||||
key: "jobTicketUId",
|
||||
label: "Job Id",
|
||||
getValue: (e) => e?.jobTicketUId || "N/A",
|
||||
getValue: (e) => <span>{e?.jobTicketUId || "N/A"}</span>,
|
||||
align: "text-start",
|
||||
},
|
||||
{
|
||||
@ -56,22 +60,9 @@ const JobList = () => {
|
||||
key: "status",
|
||||
label: "Status",
|
||||
getValue: (e) => {
|
||||
const statusName = e?.status?.displayName || "N/A";
|
||||
const statusColorMap = {
|
||||
Assigned: "label-primary",
|
||||
Pending: "label-warning",
|
||||
Completed: "label-success",
|
||||
Cancelled: "label-danger",
|
||||
};
|
||||
|
||||
const badgeColor = statusColorMap[statusName] || "label-secondary";
|
||||
|
||||
return (
|
||||
<span
|
||||
className={`badge bg-${badgeColor}`}
|
||||
style={{ fontSize: "12px" }}
|
||||
>
|
||||
{statusName}
|
||||
<span className={`badge ${getJobStatusBadge(e?.status?.id)}`}>
|
||||
{e?.status?.displayName}
|
||||
</span>
|
||||
);
|
||||
},
|
||||
@ -85,7 +76,7 @@ const JobList = () => {
|
||||
const { days, color } = daysLeft(e.startDate, e.dueDate);
|
||||
|
||||
return (
|
||||
<span className={`badge bg-${color}`} style={{ fontSize: "12px" }}>
|
||||
<span className={`badge bg-${color}`}>
|
||||
{days !== null ? `${days} days` : "N/A"}
|
||||
</span>
|
||||
);
|
||||
@ -96,7 +87,7 @@ const JobList = () => {
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="dataTables_wrapper dt-bootstrap5 no-footer ">
|
||||
<div className="dataTables_wrapper dt-bootstrap5 no-footer table-responsive">
|
||||
<table
|
||||
className="datatables-users table border-top dataTable no-footer dtr-column text-nowrap table-responsive"
|
||||
aria-describedby="DataTables_Table_0_info"
|
||||
@ -123,15 +114,15 @@ const JobList = () => {
|
||||
<tbody>
|
||||
{Array.isArray(data?.data) && data.data.length > 0 ? (
|
||||
data.data.map((row, i) => (
|
||||
<tr
|
||||
key={i}
|
||||
className="text-start"
|
||||
|
||||
>
|
||||
<tr key={i} className="text-start">
|
||||
{jobGrid.map((col) => (
|
||||
<td key={col.key} className={col.className} onClick={() =>
|
||||
setSelectedJob({ showCanvas: true, job: row?.id })
|
||||
}>
|
||||
<td
|
||||
key={col.key}
|
||||
className={col.className}
|
||||
onClick={() =>
|
||||
setSelectedJob({ showCanvas: true, job: row?.id })
|
||||
}
|
||||
>
|
||||
{col.getValue(row)}
|
||||
</td>
|
||||
))}
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import React from "react";
|
||||
import Avatar from "../common/Avatar";
|
||||
import { formatUTCToLocalTime } from "../../utils/dateUtils";
|
||||
|
||||
const JobStatusLog = ({ data }) => {
|
||||
return (
|
||||
@ -20,9 +21,9 @@ const JobStatusLog = ({ data }) => {
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* <span className="badge bg-primary">
|
||||
Level {item.nextStatus?.level ?? item.status?.level}
|
||||
</span> */}
|
||||
<span className="text-secondary">
|
||||
{formatUTCToLocalTime(item?.updatedAt,true)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="d-flex align-items-start mt-2 mx-0 px-0">
|
||||
<Avatar
|
||||
|
||||
@ -119,6 +119,11 @@ const ManageJob = ({ Job }) => {
|
||||
path: "/assignees",
|
||||
value: updatedEmployees,
|
||||
},
|
||||
{
|
||||
op: "replace",
|
||||
path: "/statusId",
|
||||
value: formData.statusId,
|
||||
},
|
||||
];
|
||||
UpdateJob({ id: Job, payload });
|
||||
} else {
|
||||
@ -159,7 +164,6 @@ const ManageJob = ({ Job }) => {
|
||||
statusId: JobData.status.id,
|
||||
});
|
||||
}, [JobData, Job, projectId]);
|
||||
|
||||
return (
|
||||
<div className="container">
|
||||
<AppFormProvider {...methods}>
|
||||
@ -202,30 +206,32 @@ const ManageJob = ({ Job }) => {
|
||||
placeholder="Select employee"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-12 col-md-6 mb-2 mb-md-4">
|
||||
<AppFormController
|
||||
name="statusId"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<SelectField
|
||||
label="Select Status"
|
||||
options={data ?? []}
|
||||
placeholder="Choose a Status"
|
||||
required
|
||||
labelKeyKey="name"
|
||||
valueKeyKey="id"
|
||||
value={field.value}
|
||||
onChange={field.onChange}
|
||||
isLoading={isLoading}
|
||||
className="m-0"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
{Job && (
|
||||
<div className="col-12 col-md-6 mb-2 mb-md-4">
|
||||
<AppFormController
|
||||
name="statusId"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<SelectField
|
||||
label="Select Status"
|
||||
options={data ?? []}
|
||||
placeholder="Choose a Status"
|
||||
required
|
||||
labelKeyKey="name"
|
||||
valueKeyKey="id"
|
||||
value={field.value}
|
||||
onChange={field.onChange}
|
||||
isLoading={isLoading}
|
||||
className="m-0"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
||||
{errors.statusId && (
|
||||
<small className="danger-text">{errors.statusId.message}</small>
|
||||
)}
|
||||
</div>
|
||||
{errors.statusId && (
|
||||
<small className="danger-text">{errors.statusId.message}</small>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<div className="col-12 col-md-6 mb-2 mb-md-4">
|
||||
<TagInput
|
||||
options={JobTags?.data}
|
||||
|
||||
@ -7,10 +7,12 @@ import Avatar from "../common/Avatar";
|
||||
import EmployeeAvatarGroup from "../common/EmployeeAvatarGroup";
|
||||
import JobStatusLog from "./JobStatusLog";
|
||||
import JobComments from "./JobComments";
|
||||
import { daysLeft } from "../../utils/appUtils";
|
||||
import { daysLeft, getJobStatusBadge } from "../../utils/appUtils";
|
||||
import HoverPopup from "../common/HoverPopup";
|
||||
import ChangeStatus from "./ChangeStatus";
|
||||
import { useParams } from "react-router-dom";
|
||||
import { STATUS_JOB_DONE } from "../../utils/constants";
|
||||
import Tooltip from "../common/Tooltip";
|
||||
|
||||
const ManageJobTicket = ({ Job }) => {
|
||||
const { projectId } = useParams();
|
||||
@ -45,54 +47,45 @@ const ManageJobTicket = ({ Job }) => {
|
||||
return (
|
||||
<div className="row text-start">
|
||||
<div className="col-12">
|
||||
<h6 className="fs-5 fw-semibold">{data?.title}</h6>
|
||||
<div className="d-flex justify-content-between align-items-end flex-wrap mb-2">
|
||||
<h6 className="fs-5 fw-semibold">{data?.title}</h6>
|
||||
<div className="d-flex justify-content-between align-items-start flex-wrap mb-2">
|
||||
<p className="mb-0">
|
||||
<span className="fw-medium me-1">Job Id :</span>
|
||||
{data?.jobTicketUId || "N/A"}
|
||||
</p>
|
||||
<div className="d-flex flex-column align-items-end gap-3 mb-3">
|
||||
{data?.dueDate &&
|
||||
(() => {
|
||||
const { days, color } = daysLeft(
|
||||
data?.startDate,
|
||||
data?.dueDate
|
||||
);
|
||||
return (
|
||||
<span>
|
||||
<span className="fw-medium me-1">Days Left:</span>
|
||||
<span className={`badge bg-${color}`}>
|
||||
{days !== null ? `${days} days` : "N/A"}
|
||||
</span>
|
||||
</span>
|
||||
);
|
||||
})()}
|
||||
<div className="d-flex flex-row gap-2">
|
||||
<span className="badge bg-label-primary">
|
||||
{data?.status?.name}
|
||||
<span className={`badge ${getJobStatusBadge(data?.status?.id)}`}>
|
||||
{data?.status?.displayName}
|
||||
</span>
|
||||
<HoverPopup
|
||||
id="STATUS_CHANEG"
|
||||
title="Change Status"
|
||||
Mode="click"
|
||||
className=""
|
||||
content={
|
||||
<ChangeStatus
|
||||
statusId={data?.status?.id}
|
||||
projectId={projectId}
|
||||
jobId={Job?.job}
|
||||
popUpId="STATUS_CHANEG"
|
||||
{STATUS_JOB_DONE !== data?.status?.id && (
|
||||
<HoverPopup
|
||||
id="STATUS_CHANEG"
|
||||
title="Change Status"
|
||||
Mode="click"
|
||||
className=""
|
||||
content={
|
||||
<ChangeStatus
|
||||
statusId={data?.status?.id}
|
||||
projectId={projectId}
|
||||
jobId={Job?.job}
|
||||
popUpId="STATUS_CHANEG"
|
||||
/>
|
||||
}
|
||||
>
|
||||
<Tooltip
|
||||
text={"Change Status"}
|
||||
placement="left"
|
||||
children={
|
||||
<i className="bx bx-edit bx-sm cursor-pointer"></i>
|
||||
}
|
||||
/>
|
||||
}
|
||||
>
|
||||
<i className="bx bx-edit bx-sm cursor-pointer"></i>
|
||||
</HoverPopup>
|
||||
</HoverPopup>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div className="d-flex flex-wrap">
|
||||
<p>{data?.description || "N/A"}</p>
|
||||
</div>
|
||||
@ -106,7 +99,7 @@ const ManageJobTicket = ({ Job }) => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="d-flex justify-content-md-between ">
|
||||
<div className="d-flex flex-row gap-5">
|
||||
<span className="fw-medium">
|
||||
<i className="bx bx-calendar"></i> Start Date :{" "}
|
||||
@ -118,47 +111,74 @@ const ManageJobTicket = ({ Job }) => {
|
||||
{formatUTCToLocalTime(data?.startDate)}
|
||||
</span>
|
||||
</div>
|
||||
{data?.dueDate &&
|
||||
(() => {
|
||||
const { days, color } = daysLeft(data?.startDate, data?.dueDate);
|
||||
return (
|
||||
<span>
|
||||
<span className="fw-medium me-1">Days Left:</span>
|
||||
<span className={`badge bg-${color}`}>
|
||||
{days !== null ? `${days} days` : "N/A"}
|
||||
</span>
|
||||
</span>
|
||||
);
|
||||
})()}
|
||||
</div>
|
||||
<div className="d-block mt-4 mb-3">
|
||||
<div className="d-flex align-items-center mb-2">
|
||||
<span className="fs-6 fw-medium me-5">Created By</span>{" "}
|
||||
<Avatar
|
||||
size="xs"
|
||||
firstName={data?.createdBy?.firstName}
|
||||
lastName={data?.createdBy?.lastName}
|
||||
/>{" "}
|
||||
<div className="d-flex flex-row align-items-center">
|
||||
<p className="m-0">{`${data?.createdBy?.firstName} ${data?.createdBy?.lastName}`}</p>
|
||||
<small className="text-secondary ms-1">
|
||||
({data?.createdBy?.jobRoleName})
|
||||
</small>
|
||||
<div className="row align-items-start align-items-md-start gap-2 mb-1">
|
||||
<div className="col-12 col-md-auto">
|
||||
<small className="fs-6 fw-medium">Created By</small>
|
||||
</div>
|
||||
<div className="col d-flex flex-row align-items-center ">
|
||||
<Avatar
|
||||
size="xs"
|
||||
firstName={data?.createdBy?.firstName}
|
||||
lastName={data?.createdBy?.lastName}
|
||||
/>{" "}
|
||||
<div className="d-flex flex-row align-items-center">
|
||||
<p className="m-0">{`${data?.createdBy?.firstName} ${data?.createdBy?.lastName}`}</p>
|
||||
<small className="text-secondary ms-1">
|
||||
({data?.createdBy?.jobRoleName})
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="d-flex flex-wrap align-items-start align-items-md-center">
|
||||
<small className="fs-6 fw-medium me-3">Assigned By</small>
|
||||
<div className="row g-3 mt-md-1">
|
||||
{data?.assignees?.map((emp) => (
|
||||
<div key={emp.id} className="col-6 col-sm-6 col-md-4 col-lg-4">
|
||||
<div className="d-flex align-items-center gap-2">
|
||||
<Avatar
|
||||
size="xs"
|
||||
firstName={emp.firstName}
|
||||
lastName={emp.lastName}
|
||||
/>
|
||||
|
||||
<div className="d-flex flex-column">
|
||||
<span className="fw-semibold">
|
||||
{emp.firstName} {emp.lastName}
|
||||
</span>
|
||||
<small className="text-secondary">
|
||||
{emp.jobRoleName}
|
||||
</small>
|
||||
{data?.assignees?.length > 0 && (
|
||||
<div className="row align-items-start align-items-md-start gap-2">
|
||||
<div className="col-12 col-md-auto">
|
||||
<small className="fs-6 fw-medium">Assigned To</small>
|
||||
</div>
|
||||
|
||||
<div className="col">
|
||||
<div className="row gap-4">
|
||||
{data?.assignees?.map((emp) => (
|
||||
<div
|
||||
key={emp.id}
|
||||
className="col-6 col-sm-6 col-md-4 col-lg-4"
|
||||
>
|
||||
<div className="d-flex align-items-center gap-2">
|
||||
<Avatar
|
||||
size="xs"
|
||||
firstName={emp.firstName}
|
||||
lastName={emp.lastName}
|
||||
/>
|
||||
|
||||
<div className="d-flex flex-column">
|
||||
<span className=" text-truncate">
|
||||
{emp.firstName} {emp.lastName}
|
||||
</span>
|
||||
<small className="text-secondary text-truncate">
|
||||
{emp.jobRoleName}
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@ -1,96 +1,123 @@
|
||||
import React from "react";
|
||||
import React, { useState } from "react";
|
||||
import { useParams } from "react-router-dom";
|
||||
import { useServiceProject } from "../../hooks/useServiceProject";
|
||||
import { formatUTCToLocalTime } from "../../utils/dateUtils";
|
||||
import ManageServiceProject from "./ManageServiceProject";
|
||||
import GlobalModel from "../common/GlobalModel";
|
||||
|
||||
const ServiceProjectProfile = () => {
|
||||
const { projectId } = useParams();
|
||||
const [IsOpenModal, setIsOpenModal] = useState(false);
|
||||
const { data, isLoading, isError, error } = useServiceProject(projectId);
|
||||
if (isLoading) {
|
||||
return <div className="">Loadng.</div>;
|
||||
}
|
||||
return (
|
||||
<div className="row py-2">
|
||||
<>
|
||||
{IsOpenModal && (
|
||||
<GlobalModel isOpen={IsOpenModal} closeModal={() => setIsOpenModal(false)}>
|
||||
<ManageServiceProject
|
||||
serviceProjectId={projectId}
|
||||
onClose={() => setIsOpenModal(false)}
|
||||
/>
|
||||
</GlobalModel>
|
||||
)}
|
||||
|
||||
<div className="row py-2">
|
||||
<div className="col-md-6 col-lg-4 order-2 mb-6">
|
||||
<div className="card mb-4">
|
||||
<div className="card-header text-start">
|
||||
<h5 className="card-action-title mb-0 ps-1">
|
||||
{" "}
|
||||
<i className="fa fa-building rounded-circle text-primary"></i>
|
||||
<span className="ms-2 fw-bold">Project Profile</span>
|
||||
</h5>
|
||||
</div>
|
||||
<div className="card-body">
|
||||
<ul className="list-unstyled my-3 ps-0 text-start">
|
||||
|
||||
<li className="d-flex mb-3">
|
||||
<div className="d-flex align-items-start" style={{ minWidth: "150px" }}>
|
||||
<i className="bx bx-cog"></i>
|
||||
<span className="fw-medium mx-2 text-nowrap">Name:</span>
|
||||
</div>
|
||||
|
||||
{/* Content section that wraps nicely */}
|
||||
<div className="flex-grow-1 text-start text-wrap">
|
||||
{data.name}
|
||||
</div>
|
||||
</li>
|
||||
<li className="d-flex mb-3">
|
||||
<div className="d-flex align-items-center" style={{ width: '150px' }}>
|
||||
<i className="bx bx-fingerprint"></i>
|
||||
<span className="fw-medium mx-2">Nick Name:</span>
|
||||
</div>
|
||||
<span>{data.shortName}</span>
|
||||
</li>
|
||||
<li className="d-flex mb-3">
|
||||
<div className="d-flex align-items-center" style={{ width: '150px' }}>
|
||||
<i className="bx bx-check"></i>
|
||||
<span className="fw-medium mx-2">Assign Date:</span>
|
||||
</div>
|
||||
<span>
|
||||
{data.assignedDate ? formatUTCToLocalTime(data.assignedDate) : "NA"}
|
||||
</span>
|
||||
</li>
|
||||
|
||||
<li className="d-flex mb-3">
|
||||
<div className="d-flex align-items-center" style={{ width: '150px' }}>
|
||||
<i className="bx bx-trophy"></i>
|
||||
<span className="fw-medium mx-2">Status:</span>
|
||||
</div>
|
||||
<span>{data?.status.status}</span>
|
||||
</li>
|
||||
<li className="d-flex mb-3">
|
||||
<div className="d-flex align-items-center" style={{ width: '150px' }}>
|
||||
<i className="bx bx-user"></i>
|
||||
<span className="fw-medium mx-2">Contact:</span>
|
||||
</div>
|
||||
<span>{data.contactName}</span>
|
||||
</li>
|
||||
<li className="d-flex mb-3">
|
||||
{/* Label section with icon */}
|
||||
<div className="d-flex align-items-start" style={{ minWidth: "150px" }}>
|
||||
<i className="bx bx-flag mt-1"></i>
|
||||
<span className="fw-medium mx-2 text-nowrap">Address:</span>
|
||||
</div>
|
||||
|
||||
{/* Content section that wraps nicely */}
|
||||
<div className="flex-grow-1 text-start text-wrap">
|
||||
{data.address}
|
||||
</div>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li className="d-flex justify-content-center mt-4"> {/* Added mt-4 for some top margin */}
|
||||
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div className="card mb-4">
|
||||
<div className="card-header text-start">
|
||||
<h5 className="card-action-title mb-0 ps-1">
|
||||
{" "}
|
||||
<i className="fa fa-building rounded-circle text-primary"></i>
|
||||
<span className="ms-2 fw-bold">Project Profile</span>
|
||||
</h5>
|
||||
</div>
|
||||
<div className="card-body">
|
||||
<ul className="list-unstyled my-3 ps-0 text-start">
|
||||
|
||||
<li className="d-flex mb-3">
|
||||
<div className="d-flex align-items-start" style={{ minWidth: "150px" }}>
|
||||
<i className="bx bx-cog"></i>
|
||||
<span className="fw-medium mx-2 text-nowrap">Name:</span>
|
||||
</div>
|
||||
|
||||
{/* Content section that wraps nicely */}
|
||||
<div className="flex-grow-1 text-start text-wrap">
|
||||
{data.name}
|
||||
</div>
|
||||
</li>
|
||||
<li className="d-flex mb-3">
|
||||
<div className="d-flex align-items-center" style={{ width: '150px' }}>
|
||||
<i className="bx bx-fingerprint"></i>
|
||||
<span className="fw-medium mx-2">Nick Name:</span>
|
||||
</div>
|
||||
<span>{data.shortName}</span>
|
||||
</li>
|
||||
<li className="d-flex mb-3">
|
||||
<div className="d-flex align-items-center" style={{ width: '150px' }}>
|
||||
<i className="bx bx-check"></i>
|
||||
<span className="fw-medium mx-2">Assign Date:</span>
|
||||
</div>
|
||||
<span>
|
||||
{data.assignedDate ? formatUTCToLocalTime(data.assignedDate) : "NA"}
|
||||
</span>
|
||||
</li>
|
||||
|
||||
<li className="d-flex mb-3">
|
||||
<div className="d-flex align-items-center" style={{ width: '150px' }}>
|
||||
<i className="bx bx-trophy"></i>
|
||||
<span className="fw-medium mx-2">Status:</span>
|
||||
</div>
|
||||
<span>{data?.status.status}</span>
|
||||
</li>
|
||||
<li className="d-flex mb-3">
|
||||
<div className="d-flex align-items-center" style={{ width: '150px' }}>
|
||||
<i className="bx bx-user"></i>
|
||||
<span className="fw-medium mx-2">Contact:</span>
|
||||
</div>
|
||||
<span>{data.contactName}</span>
|
||||
</li>
|
||||
<li className="d-flex mb-3">
|
||||
{/* Label section with icon */}
|
||||
<div className="d-flex align-items-start" style={{ minWidth: "150px" }}>
|
||||
<i className="bx bx-flag mt-1"></i>
|
||||
<span className="fw-medium mx-2 text-nowrap">Address:</span>
|
||||
</div>
|
||||
|
||||
{/* Content section that wraps nicely */}
|
||||
<div className="flex-grow-1 text-start text-wrap">
|
||||
{data.address}
|
||||
</div>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li className="d-flex justify-content-center mt-4"> {/* Added mt-4 for some top margin */}
|
||||
|
||||
<li className="d-flex justify-content-center mt-4"> {/* Added mt-4 for some top margin */}
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-sm btn-primary"
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#edit-project-modal"
|
||||
onClick={() => setIsOpenModal(true)}
|
||||
>
|
||||
Modify Details
|
||||
</button>
|
||||
|
||||
</li>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -62,14 +62,14 @@ export const jobSchema = z.object({
|
||||
description: z.string().min(1, "Description is required"),
|
||||
projectId: z.string().min(1, "Project is required"),
|
||||
|
||||
assignees: z.array(z.string()).nonempty("At least one assignee is required"),
|
||||
assignees: z.array(z.string()).optional(),
|
||||
|
||||
startDate: z.string(),
|
||||
dueDate: z.string(),
|
||||
|
||||
tags: z.array(TagSchema).optional().default([]),
|
||||
|
||||
statusId: z.string().optional(),
|
||||
statusId: z.string().optional().nullable(),
|
||||
});
|
||||
|
||||
const MAX_FILE_SIZE = 5 * 1024 * 1024; // 5MB
|
||||
|
||||
@ -0,0 +1,246 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import moment from "moment";
|
||||
import { formatNumber, formatUTCToLocalTime, getDateDifferenceInDays } from "../../../utils/dateUtils";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import ManageProjectInfo from "../../Project/ManageProjectInfo";
|
||||
import ProjectRepository from "../../../repositories/ProjectRepository";
|
||||
import { cacheData, getCachedData } from "../../../slices/apiDataManager";
|
||||
import showToast from "../../../services/toastService";
|
||||
import { useHasUserPermission } from "../../../hooks/useHasUserPermission";
|
||||
import { MANAGE_PROJECT } from "../../../utils/constants";
|
||||
import GlobalModel from "../../common/GlobalModel";
|
||||
import { useDispatch } from "react-redux";
|
||||
import { setProjectId } from "../../../slices/localVariablesSlice";
|
||||
import { useProjectContext } from "../../../pages/project/ProjectPage";
|
||||
import { useActiveInActiveServiceProject } from "../../../hooks/useServiceProject";
|
||||
import ConfirmModal from "../../common/ConfirmModal";
|
||||
import { getProjectStatusColor, getProjectStatusName } from "../../../utils/projectStatus";
|
||||
|
||||
const ServiceProjectCard = ({ project, isCore = true }) => {
|
||||
const [deleteProject, setDeleteProject] = useState({
|
||||
project: null,
|
||||
isOpen: false,
|
||||
});
|
||||
const dispatch = useDispatch();
|
||||
const navigate = useNavigate();
|
||||
const ManageProject = useHasUserPermission(MANAGE_PROJECT);
|
||||
const { setMangeProject, setManageServiceProject } = useProjectContext();
|
||||
|
||||
const getProgress = (planned, completed) => {
|
||||
return (completed * 100) / planned + "%";
|
||||
};
|
||||
const getProgressInNumber = (planned, completed) => {
|
||||
return (completed * 100) / planned;
|
||||
};
|
||||
|
||||
const handleClose = () => setShowModal(false);
|
||||
|
||||
const handleViewProject = () => {
|
||||
if (isCore) {
|
||||
dispatch(setProjectId(project.id));
|
||||
navigate(`/projects/details`);
|
||||
} else {
|
||||
navigate(`/service-projects/${project.id}`);
|
||||
}
|
||||
};
|
||||
const handleViewActivities = () => {
|
||||
dispatch(setProjectId(project.id));
|
||||
navigate(`/activities/records?project=${project.id}`);
|
||||
};
|
||||
const handleManage = () => {
|
||||
if (isCore) {
|
||||
setMangeProject({
|
||||
isOpen: true,
|
||||
Project: project.id,
|
||||
});
|
||||
} else {
|
||||
setManageServiceProject({
|
||||
isOpen: true,
|
||||
project: project.id,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const { mutate: DeleteProject, isPending } = useActiveInActiveServiceProject(
|
||||
() => setDeleteProject({ project: null, isOpen: false })
|
||||
);
|
||||
const handleActiveInactive = (projectId) => {
|
||||
DeleteProject(projectId, false);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<ConfirmModal
|
||||
type="delete"
|
||||
header="Delete Project"
|
||||
message="Are you sure you want delete?"
|
||||
onSubmit={handleActiveInactive}
|
||||
onClose={() => setDeleteProject({ project: null, isOpen: false })}
|
||||
loading={isPending}
|
||||
paramData={project.id}
|
||||
isOpen={deleteProject.isOpen}
|
||||
/>
|
||||
<div className="col-md-6 col-lg-4 col-xl-4 order-0 mb-4">
|
||||
<div className={`card cursor-pointer`}>
|
||||
<div className="card-header pb-4">
|
||||
<div className="d-flex align-items-start">
|
||||
<div className="d-flex align-items-center">
|
||||
<div className="avatar me-4">
|
||||
<i
|
||||
className="rounded-circle bx bx-building-house"
|
||||
style={{ fontSize: "xx-large" }}
|
||||
></i>
|
||||
</div>
|
||||
<div className="me-2">
|
||||
<h5
|
||||
className="mb-0 stretched-link text-heading text-start"
|
||||
onClick={handleViewProject}
|
||||
>
|
||||
{project?.shortName ? project?.shortName : project?.name}
|
||||
</h5>
|
||||
<div className="client-info text-body">
|
||||
<span>{project?.shortName ? project?.name : ""}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={`ms-auto ${!ManageProject && "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"
|
||||
onClick={handleViewProject}
|
||||
>
|
||||
<i className="bx bx-detail me-2"></i>
|
||||
<span className="align-left">View details</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a className="dropdown-item" onClick={handleManage}>
|
||||
<i className="bx bx-pencil me-2"></i>
|
||||
<span className="align-left">Modify</span>
|
||||
</a>
|
||||
</li>
|
||||
{isCore && (
|
||||
<li onClick={handleViewActivities}>
|
||||
<a className="dropdown-item">
|
||||
<i className="bx bx-task me-2"></i>
|
||||
<span className="align-left">Activities</span>
|
||||
</a>
|
||||
</li>
|
||||
)}
|
||||
{!isCore && (
|
||||
<li
|
||||
onClick={() =>
|
||||
setDeleteProject({ project: project, isOpen: true })
|
||||
}
|
||||
>
|
||||
<a className="dropdown-item">
|
||||
<i className="bx bx-trash me-2"></i>
|
||||
<span className="align-left">Delete</span>
|
||||
</a>
|
||||
</li>
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Card View */}
|
||||
|
||||
<div className="card-body pb-1">
|
||||
<div className="d-flex align-items-center flex-wrap">
|
||||
<div className="text-start mb-4 ms-2">
|
||||
<div className="ms-11 mb-3">
|
||||
<p className="mb-0">
|
||||
<span
|
||||
className={
|
||||
"badge rounded-pill " +
|
||||
getProjectStatusColor(project?.status?.id)
|
||||
}
|
||||
>
|
||||
{getProjectStatusName(project?.status?.id)}
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p className="mb-1">
|
||||
<span className="text-heading fw-medium">Contact Person: </span>
|
||||
{project?.contactName}
|
||||
</p>
|
||||
|
||||
<p className="mb-1">
|
||||
<span className="text-heading fw-medium">Assigned Date: </span>
|
||||
{formatUTCToLocalTime(project?.assignedDate)}
|
||||
</p>
|
||||
|
||||
<p className="mb-0">
|
||||
<span className="text-heading fw-medium">Address: </span>
|
||||
{project?.address}
|
||||
</p>
|
||||
|
||||
|
||||
<p className="mb-0">{project?.projectAddress}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="card-body border-top text-start ms-2">
|
||||
<div className="mt-n3">
|
||||
<p className="mb-0">
|
||||
<i className="bx bx-group bx-sm me-1_5"></i>
|
||||
{project?.teamMemberCount} Employees
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Heading */}
|
||||
<div className="mt-3">
|
||||
<h5 className="mb-3 text-heading fw-semibold">Jobs</h5>
|
||||
|
||||
{/* Job details */}
|
||||
<div className="d-flex flex-column">
|
||||
<p className="mb-2">
|
||||
<i className="bx bx-briefcase bx-sm me-1"></i>
|
||||
{project?.assignedJobsCount} Assigned Jobs
|
||||
</p>
|
||||
|
||||
<p className="mb-2">
|
||||
<i className="bx bx-task bx-sm me-1"></i>
|
||||
{project?.activeJobsCount} Active Jobs
|
||||
</p>
|
||||
|
||||
<p className="mb-2">
|
||||
<i className="bx bx-time-five bx-sm me-1"></i>
|
||||
{project?.jobsPassedDueDateCount} Job Passes Due Date
|
||||
</p>
|
||||
<p className="mb-2">
|
||||
<i className="bx bx-pause-circle bx-sm me-1"></i>
|
||||
{project?.onHoldJobsCount} On Hold Jobs
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default ServiceProjectCard;
|
||||
@ -123,12 +123,14 @@ const ServiceProjectTeamAllocation = () => {
|
||||
<div className=" text-start">
|
||||
<div className="row">
|
||||
<div className="d-flex justify-content-end">
|
||||
{!isAddEmployee && <button
|
||||
className="btn btn-sm btn-primary"
|
||||
onClick={() => setIsAddEmployee(!isAddEmployee)}
|
||||
>
|
||||
<i className="bx bx-plus-circle me-2"></i>Add Employee
|
||||
</button>}
|
||||
{!isAddEmployee && (
|
||||
<button
|
||||
className="btn btn-sm btn-primary"
|
||||
onClick={() => setIsAddEmployee(!isAddEmployee)}
|
||||
>
|
||||
<i className="bx bx-plus-circle me-2"></i>Add Employee
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{isAddEmployee && (
|
||||
@ -166,18 +168,18 @@ const ServiceProjectTeamAllocation = () => {
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
{ isAddEmployee && (
|
||||
<div className="d-flex justify-content-end">
|
||||
{isAddEmployee && (
|
||||
<div className="d-flex justify-content-end my-2">
|
||||
{" "}
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-label-secondary btn-sm me-2"
|
||||
onClick={()=>setIsAddEmployee(false)}
|
||||
aria-label="Close"
|
||||
disabled={isPending }
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-label-secondary btn-sm me-2"
|
||||
onClick={() => setIsAddEmployee(false)}
|
||||
aria-label="Close"
|
||||
disabled={isPending}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
className="btn btn-sm btn-primary"
|
||||
disabled={isPending}
|
||||
@ -188,7 +190,7 @@ const ServiceProjectTeamAllocation = () => {
|
||||
</div>
|
||||
)}
|
||||
<div className="col-12">
|
||||
<table className="table text-center ">
|
||||
<table className="table text-center">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
@ -202,29 +204,30 @@ const ServiceProjectTeamAllocation = () => {
|
||||
Team?.map((emp) => (
|
||||
<tr key={emp?.id}>
|
||||
<td className="w-min">
|
||||
<div className="d-flex align-items-center ">
|
||||
{" "}
|
||||
<div className="d-flex align-items-center gap-2">
|
||||
<Avatar
|
||||
size="xs"
|
||||
firstName={emp?.employee?.firstName}
|
||||
lastName={emp?.employee?.lastName}
|
||||
/>
|
||||
<span className="fw-medium">{`${emp?.employee?.firstName} ${emp?.employee?.lastName}`}</span>
|
||||
<span className="fw-medium">
|
||||
{emp?.employee?.firstName} {emp?.employee?.lastName}
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<td>{emp?.teamRole?.name}</td>
|
||||
<td className="">
|
||||
{deletingEmp?.emplyee?.id === emp.id && isPending ? (
|
||||
<div className="spinner-border spinner-border-sm "></div>
|
||||
|
||||
<td>
|
||||
{deletingEmp?.employee?.id === emp.id && isPending ? (
|
||||
<div className="spinner-border spinner-border-sm"></div>
|
||||
) : (
|
||||
<span disabled={isPending}>
|
||||
<i
|
||||
className="bx bx-trash bx-sm text-danger cursor-pointer"
|
||||
onClick={() =>
|
||||
setSeletingEmp({ employee: emp, isOpen: true })
|
||||
}
|
||||
></i>
|
||||
</span>
|
||||
<i
|
||||
className="bx bx-trash bx-sm text-danger cursor-pointer"
|
||||
onClick={() =>
|
||||
setSeletingEmp({ employee: emp, isOpen: true })
|
||||
}
|
||||
></i>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
@ -233,18 +236,12 @@ const ServiceProjectTeamAllocation = () => {
|
||||
<tr>
|
||||
<td
|
||||
colSpan={3}
|
||||
className="text-muted border-0 d-flex justify-content-center "
|
||||
className="text-center text-muted py-4 border-0"
|
||||
>
|
||||
{isTeamLoading ? (
|
||||
<SpinnerLoader />
|
||||
) : (
|
||||
<div className="bg-light-secondary py-3 w-50 m-auto my-2">
|
||||
<i className="bx bx-box bx-md text-primary"></i>
|
||||
<p className="fw-medium mt-3">
|
||||
{" "}
|
||||
Please Add a Employee{" "}
|
||||
</p>
|
||||
</div>
|
||||
<p className="m-0 py-4">No Records Found</p>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
@ -2,7 +2,7 @@ import React from "react";
|
||||
import Avatar from "../../common/Avatar";
|
||||
import { formatUTCToLocalTime } from "../../../utils/dateUtils";
|
||||
import { useServiceProjectTeam } from "../../../hooks/useServiceProject";
|
||||
import { useParams } from "react-router-dom";
|
||||
import { useNavigate, useParams } from "react-router-dom";
|
||||
import { SpinnerLoader } from "../../common/Loader";
|
||||
|
||||
const ServiceProjectTeamList = () => {
|
||||
@ -11,18 +11,25 @@ const ServiceProjectTeamList = () => {
|
||||
projectId,
|
||||
true
|
||||
);
|
||||
|
||||
const navigate = useNavigate();
|
||||
|
||||
const servceProjectColmen = [
|
||||
{
|
||||
key: "employeName",
|
||||
label: "Name",
|
||||
getValue: (e) => {
|
||||
return (
|
||||
<div className="d-flex align-itmes-center">
|
||||
<Avatar />
|
||||
<span>{`${e.employee.firstName} ${e.employee.lastName}`}</span>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
getValue: (e) => (
|
||||
<div className="d-flex align-items-center cursor-pointer"
|
||||
onClick={() => navigate(`/employee/${e.employee.id}`)}>
|
||||
{" "}
|
||||
<Avatar size="xs"
|
||||
firstName={e.employee.firstName}
|
||||
lastName={e.employee.lastName}
|
||||
/>
|
||||
<small>{`${e.employee.firstName} ${e.employee.lastName}`}</small>
|
||||
</div>
|
||||
),
|
||||
align: "text-start",
|
||||
},
|
||||
{
|
||||
key: "teamRole",
|
||||
@ -30,66 +37,51 @@ const ServiceProjectTeamList = () => {
|
||||
getValue: (e) => {
|
||||
return (
|
||||
<div className="d-flex align-itmes-center">
|
||||
<span>{`${e.teamRole.firstName}`}</span>
|
||||
<span>{`${e.teamRole.name}`}</span>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
align: "text-start",
|
||||
},
|
||||
{
|
||||
key: "assignedAt",
|
||||
label: "assigned Date",
|
||||
getValue: (e) => {
|
||||
return (
|
||||
<div className="d-flex align-itmes-center">
|
||||
{formatUTCToLocalTime(e.assignedAT)}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
getValue: (e) =>
|
||||
formatUTCToLocalTime(e.assignedAT)
|
||||
,
|
||||
align: "text-center",
|
||||
},
|
||||
];
|
||||
return (
|
||||
<div className="data-table table-responsive ">
|
||||
<table className="table w-full">
|
||||
<div className="table-responsive">
|
||||
<table className="table align-middle mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
{servceProjectColmen.map((col) => (
|
||||
<th key={col.key}>{col.label}</th>
|
||||
<th key={col.key} className={col.align}>{col.label}</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
{data?.length > 0 ? (
|
||||
data.map((emp) => (
|
||||
<tr key={emp?.id}>
|
||||
<td className="w-min">
|
||||
<div className="d-flex align-items-center gap-2 py-1">
|
||||
<Avatar
|
||||
size="xs"
|
||||
firstName={emp?.employee?.firstName}
|
||||
lastName={emp?.employee?.lastName}
|
||||
/>
|
||||
<span className="fw-medium">
|
||||
{`${emp?.employee?.firstName} ${emp?.employee?.lastName}`}
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<td>{emp?.teamRole?.name}</td>
|
||||
|
||||
<td>{formatUTCToLocalTime(emp.assignedAt)}</td>
|
||||
data.map((row) => (
|
||||
<tr key={row.id}>
|
||||
{servceProjectColmen.map((col) => (
|
||||
<td key={col.key} className={col.align}>{col.getValue(row)}</td>
|
||||
))}
|
||||
</tr>
|
||||
))
|
||||
) : (
|
||||
<tr>
|
||||
<td colSpan={3} className="text-muted border-0 text-center py-4">
|
||||
<td
|
||||
colSpan={servceProjectColmen.length}
|
||||
className="text-center py-4 border-0"
|
||||
>
|
||||
{isLoading ? (
|
||||
<SpinnerLoader />
|
||||
) : (
|
||||
<div className="bg-light-secondary py-3 w-50 mx-auto my-2">
|
||||
<i className="bx bx-box bx-md text-primary"></i>
|
||||
<p className="fw-medium mt-3">Please Add an Employee</p>
|
||||
</div>
|
||||
<div className="py-8">No Records Available</div>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
56
src/components/common/Forms/InputFieldSuggesstion.jsx
Normal file
56
src/components/common/Forms/InputFieldSuggesstion.jsx
Normal file
@ -0,0 +1,56 @@
|
||||
import React from 'react'
|
||||
|
||||
const InputFieldSuggesstion = () => {
|
||||
return (
|
||||
<div className="position-relative">
|
||||
<input
|
||||
className="form-control form-control-sm"
|
||||
value={value}
|
||||
onChange={handleInputChange}
|
||||
onBlur={() => setTimeout(() => setShowSuggestions(false), 150)}
|
||||
onFocus={() => {
|
||||
if (value) setShowSuggestions(true);
|
||||
}}
|
||||
disabled={disabled}
|
||||
/>
|
||||
{showSuggestions && filteredList.length > 0 && (
|
||||
<ul
|
||||
className="list-group shadow-sm position-absolute w-100 bg-white border zindex-tooltip"
|
||||
style={{
|
||||
maxHeight: "180px",
|
||||
overflowY: "auto",
|
||||
marginTop: "2px",
|
||||
zIndex: 1000,
|
||||
borderRadius:"0px"
|
||||
}}
|
||||
>
|
||||
{filteredList.map((org) => (
|
||||
<li
|
||||
key={org}
|
||||
className="list-group-item list-group-item-action border-none "
|
||||
style={{
|
||||
cursor: "pointer",
|
||||
padding: "5px 12px",
|
||||
fontSize: "14px",
|
||||
transition: "background-color 0.2s",
|
||||
}}
|
||||
onMouseDown={() => handleSelectSuggestion(org)}
|
||||
onMouseEnter={(e) =>
|
||||
(e.currentTarget.style.backgroundColor = "#f8f9fa")
|
||||
}
|
||||
onMouseLeave={(e) =>
|
||||
(e.currentTarget.style.backgroundColor = "transparent")
|
||||
}
|
||||
>
|
||||
{org}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
|
||||
{error && <small className="danger-text">{error}</small>}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default InputFieldSuggesstion
|
||||
@ -181,5 +181,173 @@ const SelectEmployeeServerSide = ({
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SelectEmployeeServerSide;
|
||||
|
||||
|
||||
export const SelectProjectField = ()=>{
|
||||
const [searchText, setSearchText] = useState("");
|
||||
const debounce = useDebounce(searchText, 300);
|
||||
|
||||
const { data, isLoading } = useEmployeesName(
|
||||
projectId,
|
||||
debounce,
|
||||
isAllEmployee
|
||||
);
|
||||
|
||||
const options = data?.data ?? [];
|
||||
const [open, setOpen] = useState(false);
|
||||
const dropdownRef = useRef(null);
|
||||
|
||||
const getDisplayName = (emp) => {
|
||||
if (!emp) return "";
|
||||
return `${emp.firstName || ""} ${emp.lastName || ""}`.trim();
|
||||
};
|
||||
|
||||
/** -----------------------------
|
||||
* SELECTED OPTION (SINGLE)
|
||||
* ----------------------------- */
|
||||
let selectedSingle = null;
|
||||
|
||||
if (!isMultiple) {
|
||||
if (isFullObject && value) selectedSingle = value;
|
||||
else if (!isFullObject && value)
|
||||
selectedSingle = options.find((o) => o[valueKey] === value);
|
||||
}
|
||||
|
||||
/** -----------------------------
|
||||
* SELECTED OPTION (MULTIPLE)
|
||||
* ----------------------------- */
|
||||
let selectedList = [];
|
||||
|
||||
if (isMultiple && Array.isArray(value)) {
|
||||
if (isFullObject) selectedList = value;
|
||||
else {
|
||||
selectedList = options.filter((opt) => value.includes(opt[valueKey]));
|
||||
}
|
||||
}
|
||||
|
||||
/** Main button label */
|
||||
const displayText = !isMultiple
|
||||
? getDisplayName(selectedSingle) || placeholder
|
||||
: selectedList.length > 0
|
||||
? selectedList.map((e) => getDisplayName(e)).join(", ")
|
||||
: placeholder;
|
||||
|
||||
/** -----------------------------
|
||||
* HANDLE OUTSIDE CLICK
|
||||
* ----------------------------- */
|
||||
useEffect(() => {
|
||||
const handleClickOutside = (e) => {
|
||||
if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
|
||||
setOpen(false);
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener("mousedown", handleClickOutside);
|
||||
return () => document.removeEventListener("mousedown", handleClickOutside);
|
||||
}, []);
|
||||
|
||||
/** -----------------------------
|
||||
* HANDLE SELECT
|
||||
* ----------------------------- */
|
||||
const handleSelect = (option) => {
|
||||
if (!isMultiple) {
|
||||
// SINGLE SELECT
|
||||
if (isFullObject) onChange(option);
|
||||
else onChange(option[valueKey]);
|
||||
} else {
|
||||
// MULTIPLE SELECT
|
||||
let updated = [];
|
||||
|
||||
const exists = selectedList.some((e) => e[valueKey] === option[valueKey]);
|
||||
|
||||
if (exists) {
|
||||
// remove
|
||||
updated = selectedList.filter((e) => e[valueKey] !== option[valueKey]);
|
||||
} else {
|
||||
// add
|
||||
updated = [...selectedList, option];
|
||||
}
|
||||
|
||||
if (isFullObject) onChange(updated);
|
||||
else onChange(updated.map((x) => x[valueKey]));
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="mb-3 position-relative" ref={dropdownRef}>
|
||||
{label && (
|
||||
<Label className="form-label" required={required}>
|
||||
{label}
|
||||
</Label>
|
||||
)}
|
||||
|
||||
{/* MAIN BUTTON */}
|
||||
<button
|
||||
type="button"
|
||||
className={`select2-icons form-select d-flex align-items-center justify-content-between ${
|
||||
open ? "show" : ""
|
||||
}`}
|
||||
onClick={() => setOpen((prev) => !prev)}
|
||||
>
|
||||
<span className={`text-truncate ${!displayText ? "text-muted" : ""}`}>
|
||||
{displayText}
|
||||
</span>
|
||||
</button>
|
||||
|
||||
{/* DROPDOWN */}
|
||||
{open && (
|
||||
<ul
|
||||
className="dropdown-menu w-100 shadow-sm show animate__fadeIn h-64 overflow-auto rounded"
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: "100%",
|
||||
left: 0,
|
||||
zIndex: 1050,
|
||||
marginTop: "4px",
|
||||
borderRadius: "0.375rem",
|
||||
overflow: "hidden",
|
||||
}}
|
||||
>
|
||||
<div className="p-1">
|
||||
<input
|
||||
type="search"
|
||||
value={searchText}
|
||||
onChange={(e) => setSearchText(e.target.value)}
|
||||
className="form-control form-control-sm"
|
||||
placeholder="Search..."
|
||||
/>
|
||||
</div>
|
||||
|
||||
{isLoading && (
|
||||
<li className="dropdown-item text-muted text-center">Loading...</li>
|
||||
)}
|
||||
|
||||
{!isLoading && options.length === 0 && (
|
||||
<li className="dropdown-item text-muted text-center">No results found</li>
|
||||
)}
|
||||
|
||||
{!isLoading &&
|
||||
options.map((option) => {
|
||||
const isActive = isMultiple
|
||||
? selectedList.some((x) => x[valueKey] === option[valueKey])
|
||||
: selectedSingle &&
|
||||
selectedSingle[valueKey] === option[valueKey];
|
||||
|
||||
return (
|
||||
<li key={option[valueKey]}>
|
||||
<button
|
||||
type="button"
|
||||
className={`dropdown-item ${isActive ? "active" : ""}`}
|
||||
onClick={() => handleSelect(option)}
|
||||
>
|
||||
{getDisplayName(option)}
|
||||
</button>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -66,7 +66,7 @@ const OffcanvasComponent = ({
|
||||
></button>
|
||||
</div>
|
||||
|
||||
<div className="offcanvas-body">{children}</div>
|
||||
<div className="offcanvas-body ">{children}</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -10,8 +10,9 @@ import Pagination from "../../components/common/Pagination";
|
||||
import GlobalModel from "../../components/common/GlobalModel";
|
||||
import ManageServiceProject from "../../components/ServiceProject/ManageServiceProject";
|
||||
import { SpinnerLoader } from "../../components/common/Loader";
|
||||
import ServiceProjectCard from "../../components/ServiceProject/ServiceProjectTeam/ServiceProjectCard";
|
||||
|
||||
const ServiceProjectDisplay = ({ listView }) => {
|
||||
const ServiceProjectDisplay = ({ listView ,selectedStatuses }) => {
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
|
||||
const { manageServiceProject, setManageServiceProject } = useProjectContext();
|
||||
@ -25,6 +26,9 @@ const ServiceProjectDisplay = ({ listView }) => {
|
||||
}
|
||||
};
|
||||
|
||||
const filteredProjects = data?.data?.filter(project =>
|
||||
selectedStatuses.includes(project?.status?.id)
|
||||
);
|
||||
|
||||
if (isLoading)
|
||||
return (
|
||||
@ -47,9 +51,10 @@ const ServiceProjectDisplay = ({ listView }) => {
|
||||
{listView ? (
|
||||
<p>List</p>
|
||||
) : (
|
||||
data?.data?.map((project) => (
|
||||
<ProjectCard project={project} isCore={false} />
|
||||
filteredProjects?.map((project) => (
|
||||
<ServiceProjectCard project={project} isCore={false} />
|
||||
))
|
||||
|
||||
)}
|
||||
|
||||
<div className="col-12 d-flex justify-content-start mt-3">
|
||||
|
||||
@ -49,6 +49,13 @@ const ProjectPage = () => {
|
||||
const [selectedStatuses, setSelectedStatuses] = useState(
|
||||
PROJECT_STATUS.map((s) => s.id)
|
||||
);
|
||||
const handleStatusChange = (statusId) => {
|
||||
setSelectedStatuses((prev) =>
|
||||
prev.includes(statusId)
|
||||
? prev.filter((id) => id !== statusId)
|
||||
: [...prev, statusId]
|
||||
);
|
||||
};
|
||||
|
||||
const contextDispatcher = {
|
||||
setMangeProject,
|
||||
@ -75,7 +82,7 @@ const ProjectPage = () => {
|
||||
/>
|
||||
|
||||
<div className="card cursor-pointer mb-5">
|
||||
<div className="card-body py-3 px-6 pb-1">
|
||||
<div className="card-body py-3 px-6 pb-1">
|
||||
<div className="d-flex flex-wrap justify-content-between align-items-start">
|
||||
{/* LEFT SIDE — DATE TOGGLE BUTTONS */}
|
||||
<div className="mb-2">
|
||||
@ -183,16 +190,16 @@ const ProjectPage = () => {
|
||||
New Project
|
||||
</button>
|
||||
)}
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{coreProjects ? <ProjectsDisplay /> : <ServiceProjectDisplay />}
|
||||
{coreProjects ? <ProjectsDisplay listView={listView}
|
||||
searchTerm={searchTerm}
|
||||
selectedStatuses={selectedStatuses}
|
||||
handleStatusChange={handleStatusChange} /> : <ServiceProjectDisplay listView={listView}
|
||||
selectedStatuses={selectedStatuses} />}
|
||||
</div>
|
||||
</ProjectContext.Provider>
|
||||
);
|
||||
|
||||
@ -11,7 +11,7 @@ import { ITEMS_PER_PAGE, PROJECT_STATUS } from "../../utils/constants";
|
||||
import usePagination from "../../hooks/usePagination";
|
||||
import ManageProjectInfo from "../../components/Project/ManageProjectInfo";
|
||||
|
||||
const ProjectsDisplay = ({ listView, searchTerm }) => {
|
||||
const ProjectsDisplay = ({ listView, searchTerm, selectedStatuses, handleStatusChange }) => {
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const {
|
||||
manageProject,
|
||||
@ -21,35 +21,34 @@ const ProjectsDisplay = ({ listView, searchTerm }) => {
|
||||
} = useProjectContext();
|
||||
|
||||
const [projectList, setProjectList] = useState([]);
|
||||
const [selectedStatuses, setSelectedStatuses] = useState(
|
||||
PROJECT_STATUS.map((s) => s.id)
|
||||
);
|
||||
|
||||
|
||||
const { data, isLoading, isError, error } = useProjects(ITEMS_PER_PAGE, 1);
|
||||
|
||||
const filteredProjects =
|
||||
data?.data?.filter((project) => {
|
||||
const matchesStatus = selectedStatuses.includes(project.projectStatusId);
|
||||
const statusId =
|
||||
project.projectStatusId ??
|
||||
project?.status?.id ??
|
||||
project?.statusId;
|
||||
|
||||
const matchesStatus = selectedStatuses.includes(statusId);
|
||||
|
||||
const matchesSearch = project?.name
|
||||
?.toLowerCase()
|
||||
?.includes(searchTerm?.toLowerCase());
|
||||
|
||||
return matchesStatus && matchesSearch;
|
||||
}) ?? [];
|
||||
|
||||
|
||||
const paginate = (page) => {
|
||||
if (page >= 1 && page <= (data?.totalPages ?? 1)) {
|
||||
setCurrentPage(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)) {
|
||||
@ -98,6 +97,7 @@ const ProjectsDisplay = ({ listView, searchTerm }) => {
|
||||
<p>{error.message}</p>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="row">
|
||||
{listView ? (
|
||||
@ -111,7 +111,7 @@ const ProjectsDisplay = ({ listView, searchTerm }) => {
|
||||
/>
|
||||
) : (
|
||||
<ProjectCardView
|
||||
data={data?.data}
|
||||
data={projectList}
|
||||
currentPage={currentPage}
|
||||
totalPages={data?.totalPages}
|
||||
paginate={paginate}
|
||||
|
||||
@ -34,8 +34,24 @@ export const getColorNameFromHex = (hex) => {
|
||||
}
|
||||
}
|
||||
|
||||
return null; //
|
||||
return null;
|
||||
};
|
||||
export const getJobStatusBadge = (statusId) => {
|
||||
if (!statusId) return "bg-label-secondary";
|
||||
|
||||
const map = {
|
||||
"32d76a02-8f44-4aa0-9b66-c3716c45a918": "bg-label-primary", // New
|
||||
"cfa1886d-055f-4ded-84c6-42a2a8a14a66": "bg-label-info", // Assigned
|
||||
"5a6873a5-fed7-4745-a52f-8f61bf3bd72d": "bg-label-warning", // In Progress
|
||||
"aab71020-2fb8-44d9-9430-c9a7e9bf33b0": "bg-label-label-dark", // Review
|
||||
"ed10ab57-dbaa-4ca5-8ecd-56745dcbdbd7": "bg-label-success", // Done
|
||||
"3ddeefb5-ae3c-4e10-a922-35e0a452bb69": "bg-label-secondary", // Closed
|
||||
"75a0c8b8-9c6a-41af-80bf-b35bab722eb2": "bg-label-danger", // On Hold
|
||||
};
|
||||
|
||||
return map[statusId] || "bg-label-secondary";
|
||||
};
|
||||
|
||||
|
||||
export const useDebounce = (value, delay = 500) => {
|
||||
const [debouncedValue, setDebouncedValue] = useState(value);
|
||||
|
||||
@ -205,3 +205,9 @@ export const PAYEE_RECURRING_EXPENSE = [
|
||||
label: "Paused",
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
//#region Service Project and Jobs
|
||||
export const STATUS_JOB_DONE = "ed10ab57-dbaa-4ca5-8ecd-56745dcbdbd7"
|
||||
|
||||
//#endregion
|
||||
Loading…
x
Reference in New Issue
Block a user