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

Reviewed-on: #512
merged

src/components/DailyProgressRport/TaskReportFilterPanel.jsx

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

src/components/DailyProgressRport/TaskReportList.jsx

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

src/components/RecurringExpense/ManageRecurringExpense.jsx

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

src/components/ServiceProject/ServiceProjectProfile.jsx

@@ -1,15 +1,28 @@
-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 (
+    <>
+      {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">
@@ -82,6 +95,19 @@ const ServiceProjectProfile = () => {
 
                 <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>
 
@@ -91,6 +117,7 @@ const ServiceProjectProfile = () => {
 
 
       </div>
+    </>
   );
 };
 

src/components/ServiceProject/ServiceProjectTeam/ServiceProjectCard.jsx

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

src/pages/ServiceProject/ServiceProjectDisplay.jsx

@@ -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) => (
+        filteredProjects?.map((project) => (
-          <ProjectCard project={project} isCore={false} />
+          <ServiceProjectCard project={project} isCore={false} />
         ))
+
       )}
 
       <div className="col-12 d-flex justify-content-start mt-3">

src/pages/project/ProjectPage.jsx

@@ -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,
@@ -183,16 +190,16 @@ const ProjectPage = () => {
                     New Project
                   </button>
                 )}
-
+              </div>
-
+            </div>
           </div>
         </div>
 
-
+        {coreProjects ? <ProjectsDisplay listView={listView}
-          </div>
+          searchTerm={searchTerm}
-        </div>
+          selectedStatuses={selectedStatuses}
-
+          handleStatusChange={handleStatusChange} /> : <ServiceProjectDisplay listView={listView}
-        {coreProjects ? <ProjectsDisplay /> : <ServiceProjectDisplay />}
+            selectedStatuses={selectedStatuses} />}
       </div>
     </ProjectContext.Provider>
   );

src/pages/project/ProjectsDisplay.jsx

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