admin/marco.pms.web
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Merge pull request 'Service_Management_CardView :- Creating a card for Services project.' (#512) from Service_Management_CardView into Service_Project_Managment

Browse Source 
Reviewed-on: #512
merged
This commit is contained in:
pramod.mahajan 2025-11-18 11:56:35 +00:00
commit f3eed11540
8 changed files with 395 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/DailyProgressRport/TaskReportFilterPanel.jsx
View File

@ -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"

2
src/components/DailyProgressRport/TaskReportList.jsx
View File

@ -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>}
>

4
src/components/RecurringExpense/ManageRecurringExpense.jsx
View File

@ -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.

187
src/components/ServiceProject/ServiceProjectProfile.jsx
View File

@ -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>
</>
);
};

246
src/components/ServiceProject/ServiceProjectTeam/ServiceProjectCard.jsx Normal file
View File

@ -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;

11
src/pages/ServiceProject/ServiceProjectDisplay.jsx
View File

@ -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">

19
src/pages/project/ProjectPage.jsx
View File

@ -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>
);

28
src/pages/project/ProjectsDisplay.jsx
View File

@ -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}