Merge branch 'Service_Project_Managment' of https://git.marcoaiot.com/admin/marco.pms.web into Advance_Payment_List

src/components/Dashboard/ProjectCompletionChart.jsx

@@ -6,11 +6,11 @@ import { ITEMS_PER_PAGE } from "../../utils/constants";
 const ProjectCompletionChart = () => {
 
   const [currentPage, setCurrentPage] = useState(1);
-  const { data: projects, isLoading: loading, isError, error } = useProjects(ITEMS_PER_PAGE,currentPage);
+  const { data: projects, isLoading: loading, isError, error } = useProjects(50,currentPage);
   // Bar chart logic
-  const projectNames = projects?.data.map((p) => p.name) || [];
+  const projectNames = projects?.data?.map((p) => p.name) || [];
   const projectProgress =
-    projects?.map((p) => {
+    projects?.data?.map((p) => {
       const completed = p.completedWork || 0;
       const planned = p.plannedWork || 1;
       const percent = planned ? (completed / planned) * 100 : 0;

src/components/Project/ProjectListView.jsx

@@ -13,15 +13,9 @@ import { useNavigate } from "react-router-dom";
 import { useHasUserPermission } from "../../hooks/useHasUserPermission";
 import { useProjectContext } from "../../pages/project/ProjectPage";
 import usePagination from "../../hooks/usePagination";
+import Pagination from "../common/Pagination";
 
-const ProjectListView = ({
+const ProjectListView = ({ data, currentPage, totalPages, paginate }) => {
-  currentItems,
-  selectedStatuses,
-  handleStatusChange,
-  setCurrentPage,
-  totalPages,
-  isLoading,
-}) => {
   const dispatch = useDispatch();
   const navigate = useNavigate();
   const { setMangeProject } = useProjectContext();
@@ -132,15 +126,16 @@ const ProjectListView = ({
 
   return (
     <div className="card page-min-h py-4 px-6 shadow-sm">
-
+      <div className="table-responsive text-nowrap page-min-h">
-      <div
-        className="table-responsive text-nowrap page-min-h"
-      >
         <table className="table  table-hover align-middle m-0">
           <thead className="border-bottom ">
             <tr>
               {projectColumns.map((col) => (
-              <th key={col.key} colSpan={col.colSpan} className={`${col.className} table_header_border`}>
+                <th
+                  key={col.key}
+                  colSpan={col.colSpan}
+                  className={`${col.className} table_header_border`}
+                >
                   {col.label}
                 </th>
               ))}
@@ -148,7 +143,7 @@ const ProjectListView = ({
             </tr>
           </thead>
           <tbody>
-          {currentItems?.map((project) => (
+            {data?.map((project) => (
               <tr key={project.id}>
                 {projectColumns.map((col) => (
                   <td
@@ -223,61 +218,11 @@ const ProjectListView = ({
         </table>
       </div>
 
-      {isLoading && (
+      <Pagination
-        <div className="py-4">
+        currentPage={currentPage}
-          {" "}
+        totalPages={totalPages}
-          {isLoading && <p className="text-center">Loading...</p>}
+        paginate={paginate}
-          {!isLoading && filteredProjects.length === 0 && (
+      />
-            <p className="text-center text-muted">No projects found.</p>
-          )}
-        </div>
-      )}
-      {!isLoading && currentItems.length === 0 && (
-        <div className="py-6">
-          <p className="text-center text-muted">No projects found.</p>
-        </div>
-      )}
-      {!isLoading && totalPages > 1 && (
-        <nav>
-          <ul className="pagination pagination-sm justify-content-end py-2">
-            <li className={`page-item ${currentPage === 1 && "disabled"}`}>
-              <button
-                className="page-link"
-                onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
-              >
-                &laquo;
-              </button>
-            </li>
-            {[...Array(totalPages)].map((_, i) => (
-              <li
-                key={i}
-                className={`page-item ${currentPage === i + 1 && "active"}`}
-              >
-                <button
-                  className="page-link"
-                  onClick={() => setCurrentPage(i + 1)}
-                >
-                  {i + 1}
-                </button>
-              </li>
-            ))}
-            <li
-              className={`page-item ${
-                currentPage === totalPages && "disabled"
-              }`}
-            >
-              <button
-                className="page-link"
-                onClick={() =>
-                  setCurrentPage((p) => Math.min(totalPages, p + 1))
-                }
-              >
-                &raquo;
-              </button>
-            </li>
-          </ul>
-        </nav>
-      )}
     </div>
   );
 };

src/components/ServiceProject/ManageJobTicket.jsx

@@ -11,7 +11,7 @@ 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 { STATUS_JOB_CLOSED } from "../../utils/constants";
 import Tooltip from "../common/Tooltip";
 
 const ManageJobTicket = ({ Job }) => {
@@ -58,7 +58,7 @@ const ManageJobTicket = ({ Job }) => {
               <span className={`badge ${getJobStatusBadge(data?.status?.id)}`}>
                 {data?.status?.displayName}
               </span>
-              {STATUS_JOB_DONE !== data?.status?.id && (
+              {STATUS_JOB_CLOSED !== data?.status?.id && (
                 <HoverPopup
                   id="STATUS_CHANEG"
                   title="Change Status"

src/components/ServiceProject/ServiceProjectProfile.jsx

@@ -95,7 +95,7 @@ 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 */}
+                  <a className="d-flex justify-content-center mt-4"> {/* Added mt-4 for some top margin */}
 
                     <button
                       type="button"
@@ -107,7 +107,7 @@ const ServiceProjectProfile = () => {
                       Modify Details
                     </button>
 
-                  </li>
+                  </a>
                 </li>
               </ul>
 

src/components/common/Forms/InputFieldSuggesstion.jsx

@@ -1,56 +0,0 @@
-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

src/components/common/Forms/InputSuggesstionField.jsx

@@ -0,0 +1,90 @@
+import React, { useEffect, useRef, useState } from "react";
+import Label from "../Label";
+
+const InputSuggessionField = ({
+   organizationList = [],
+  value,
+  onChange,
+  error,
+  disabled=false
+}) => {
+  const [open, setOpen] = useState(false);
+  const dropdownRef = useRef(null);
+
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  const selectedOption = options.find((opt) => opt[valueKey] === value);
+
+  const displayText = selectedOption ? selectedOption[labelKey] : placeholder;
+
+  const handleSelect = (option) => {
+    onChange(option[valueKey]);
+    setOpen(false);
+  };
+
+  const toggleDropdown = () => setOpen((prev) => !prev);
+
+  return (
+    <div className="mb-3 position-relative" ref={dropdownRef}>
+      {label && (
+        <Label className="form-label" required={required}>
+          {label}
+        </Label>
+      )}
+
+      <button
+        type="button"
+        className={`select2-icons form-select d-flex align-items-center justify-content-between ${
+          open ? "show" : ""
+        }`}
+        onClick={toggleDropdown}
+        disabled={isLoading}
+      >
+        <span
+          className={`text-truncate ${!selectedOption ? "text-muted" : ""}`}
+        >
+          {isLoading ? "Loading..." : displayText}
+        </span>
+      </button>
+
+      {open && !isLoading && (
+        <ul
+          className="dropdown-menu w-100 shadow-sm show animate__fadeIn"
+          style={{
+            position: "absolute",
+            top: "100%",
+            left: 0,
+            zIndex: 1050,
+            marginTop: "4px",
+            borderRadius: "0.375rem",
+            overflow: "hidden",
+          }}
+        >
+          {options.map((option, i) => (
+            <li key={i}>
+              <button
+                type="button"
+                className={`dropdown-item ${
+                  option[valueKey] === value ? "active" : ""
+                }`}
+                onClick={() => handleSelect(option)}
+              >
+                {option[labelKey]}
+              </button>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+};
+
+export default InputSuggessionField;

src/components/common/Forms/SelectFieldServerSide.jsx

@@ -2,6 +2,7 @@ import React, { useEffect, useRef, useState } from "react";
 import Label from "../Label";
 import { useDebounce } from "../../../utils/appUtils";
 import { useEmployeesName } from "../../../hooks/useEmployees";
+import { useProjectBothName } from "../../../hooks/useProjects";
 
 const SelectEmployeeServerSide = ({
   label = "Select",
@@ -154,7 +155,9 @@ const SelectEmployeeServerSide = ({
           )}
 
           {!isLoading && options.length === 0 && (
-            <li className="dropdown-item text-muted text-center">No results found</li>
+            <li className="dropdown-item text-muted text-center">
+              No results found
+            </li>
           )}
 
           {!isLoading &&
@@ -183,24 +186,29 @@ const SelectEmployeeServerSide = ({
 };
 export default SelectEmployeeServerSide;
 
-
+export const SelectProjectField = ({
-export const SelectProjectField = ()=>{
+  label = "Select",
+  placeholder = "Select Project",
+  required = false,
+  value = null,
+  onChange,
+  valueKey = "id",
+  isFullObject = false,
+  isMultiple = false,
+  isAllProject = false,
+}) => {
   const [searchText, setSearchText] = useState("");
   const debounce = useDebounce(searchText, 300);
 
-  const { data, isLoading } = useEmployeesName(
+  const { data, isLoading } = useProjectBothName(debounce);
-    projectId,
-    debounce,
-    isAllEmployee
-  );
 
-  const options = data?.data ?? [];
+  const options = data ?? [];
   const [open, setOpen] = useState(false);
   const dropdownRef = useRef(null);
 
-  const getDisplayName = (emp) => {
+  const getDisplayName = (project) => {
-    if (!emp) return "";
+    if (!project) return "";
-    return `${emp.firstName || ""} ${emp.lastName || ""}`.trim();
+    return `${project.name || ""}`.trim();
   };
 
   /** -----------------------------
@@ -304,7 +312,7 @@ export const SelectProjectField = ()=>{
             top: "100%",
             left: 0,
             zIndex: 1050,
-            marginTop: "4px",
+            marginTop: "2px",
             borderRadius: "0.375rem",
             overflow: "hidden",
           }}
@@ -324,7 +332,9 @@ export const SelectProjectField = ()=>{
           )}
 
           {!isLoading && options.length === 0 && (
-            <li className="dropdown-item text-muted text-center">No results found</li>
+            <li className="dropdown-item text-muted text-center">
+              No results found
+            </li>
           )}
 
           {!isLoading &&

src/components/common/MultiSelectDropdown.css

@@ -10,7 +10,7 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 5px;
+  padding: 4px;
   border: 1px solid #ddd;
   border-radius: 5px;
   cursor: pointer;

src/components/common/SelectMultiple.jsx

@@ -101,7 +101,7 @@ const SelectMultiple = ({
           value={searchText}
           onChange={(e) => setSearchText(e.target.value)}
           className="multi-select-dropdown-search-input"
-          style={{ width: "100%", padding: 4 }}
+          style={{ width: "100%",  }}
         />
       </div>
 
@@ -177,7 +177,7 @@ const SelectMultiple = ({
                   return (
                     <span
                       key={val}
-                      className="badge bg-label-primary  mx-1 py-2 mb-1"
+                      className="badge bg-label-primary  mx-1 py-2"
                     >
                       {label}
                     </span>

src/hooks/useProjects.js

@@ -25,7 +25,10 @@ export const useProjects = (pageSize,pageNumber) => {
   return useQuery({
     queryKey: ["ProjectsList", pageSize, pageNumber],
     queryFn: async () => {
-      const response = await ProjectRepository.getProjectList(pageSize,pageNumber);
+      const response = await ProjectRepository.getProjectList(
+        pageSize,
+        pageNumber
+      );
       return response?.data;
     },
     enabled: !!loggedUser,
@@ -179,6 +182,19 @@ export const useProjectName = (provideAll=false) => {
   };
 };
 
+export const useProjectBothName = (searchString) => {
+ return useQuery({
+    queryKey: ["basic_bothProject", searchString],
+    queryFn: async () => {
+      const res = await ProjectRepository.projectNameListAll(searchString);
+      return res.data || res;
+    },
+    onError: (error) => {
+      showToast(error.message || "Error while Fetching project Name", "error");
+    },
+  });
+};
+
 export const useProjectInfra = (projectId, serviceId) => {
   const {
     data: projectInfra,

src/pages/ServiceProject/ServiceProjectDisplay.jsx

@@ -52,7 +52,7 @@ const ServiceProjectDisplay = ({ listView ,selectedStatuses }) => {
         <p>List</p>
       ) : (
         filteredProjects?.map((project) => (
-          <ServiceProjectCard project={project} isCore={false} />
+          <ServiceProjectCard key={project.id} project={project} isCore={false} />
         ))
 
       )}

src/pages/project/ProjectPage.jsx

@@ -83,7 +83,7 @@ const ProjectPage = () => {
 
         <div className="card cursor-pointer mb-5">
           <div className="card-body py-3 px-6 pb-1">
-            <div className="d-flex flex-wrap justify-content-between align-items-start">
+            <div className="d-flex flex-wrap justify-content-between align-items-center">
               {/* LEFT SIDE — DATE TOGGLE BUTTONS */}
               <div className="mb-2">
                 <div className="d-inline-flex border rounded-pill overflow-hidden shadow-none">
@@ -179,7 +179,7 @@ const ProjectPage = () => {
                 {HasManageProject && (
                   <button
                     type="button"
-                    className="btn btn-primary btn-sm d-flex align-items-center"
+                    className="btn btn-primary btn-sm d-flex align-items-center my-2"
                     onClick={() =>
                       coreProjects
                         ? setMangeProject({ isOpen: true, Project: null })      // Organization Project → Infra

src/pages/project/ProjectsDisplay.jsx

@@ -11,7 +11,12 @@ import { ITEMS_PER_PAGE, PROJECT_STATUS } from "../../utils/constants";
 import usePagination from "../../hooks/usePagination";
 import ManageProjectInfo from "../../components/Project/ManageProjectInfo";
 
-const ProjectsDisplay = ({ listView, searchTerm, selectedStatuses, handleStatusChange }) => {
+const ProjectsDisplay = ({
+  listView,
+  searchTerm,
+  selectedStatuses,
+  handleStatusChange,
+}) => {
   const [currentPage, setCurrentPage] = useState(1);
   const {
     manageProject,
@@ -22,15 +27,12 @@ const ProjectsDisplay = ({ listView, searchTerm, selectedStatuses, handleStatusC
 
   const [projectList, setProjectList] = useState([]);
 
-
   const { data, isLoading, isError, error } = useProjects(ITEMS_PER_PAGE, 1);
 
   const filteredProjects =
     data?.data?.filter((project) => {
       const statusId =
-        project.projectStatusId ??
+        project.projectStatusId ?? project?.status?.id ?? project?.statusId;
-        project?.status?.id ??
-        project?.statusId;
 
       const matchesStatus = selectedStatuses.includes(statusId);
 
@@ -41,15 +43,12 @@ const ProjectsDisplay = ({ listView, searchTerm, selectedStatuses, handleStatusC
       return matchesStatus && matchesSearch;
     }) ?? [];
 
-
   const paginate = (page) => {
     if (page >= 1 && page <= (data?.totalPages ?? 1)) {
       setCurrentPage(page);
     }
   };
 
-
-
   const sortingProject = (projects) => {
     if (!isLoading && Array.isArray(projects)) {
       const grouped = {};
@@ -102,12 +101,10 @@ const ProjectsDisplay = ({ listView, searchTerm, selectedStatuses, handleStatusC
     <div className="row">
       {listView ? (
         <ProjectListView
-          currentItems={currentItems}
+          data={projectList}
-          selectedStatuses={selectedStatuses}
+          currentPage={currentPage}
-          handleStatusChange={handleStatusChange}
+          totalPages={data?.totalPages}
-          setCurrentPage={setCurrentPage}
+          paginate={paginate}
-          totalPages={totalPages}
-          isLoading={isLoading}
         />
       ) : (
         <ProjectCardView
@@ -118,7 +115,6 @@ const ProjectsDisplay = ({ listView, searchTerm, selectedStatuses, handleStatusC
         />
       )}
 
-      {/* Project Manage Update or Create */}
       {manageProject?.isOpen && (
         <GlobalModel
           size="md"
@@ -131,7 +127,6 @@ const ProjectsDisplay = ({ listView, searchTerm, selectedStatuses, handleStatusC
           />
         </GlobalModel>
       )}
-
     </div>
   );
 };

src/repositories/ProjectRepository.jsx

@@ -1,17 +1,24 @@
 import { api } from "../utils/axiosClient";
 
 const ProjectRepository = {
-  getProjectList: (pageSize,pageNumber) => api.get(`/api/project/list?pageSize=${pageSize}&pageNumber=${pageNumber}`),
+  getProjectList: (pageSize, pageNumber) =>
+    api.get(`/api/project/list?pageSize=${pageSize}&pageNumber=${pageNumber}`),
   getProjectByprojectId: (projetid) =>
     api.get(`/api/project/details/${projetid}`),
 
-  getProjectAllocation: (projectId, serviceId, organizationId, employeeStatus) => {
+  getProjectAllocation: (
+    projectId,
+    serviceId,
+    organizationId,
+    employeeStatus
+  ) => {
     let url = `/api/project/allocation/${projectId}`;
 
     const params = [];
     if (organizationId) params.push(`organizationId=${organizationId}`);
     if (serviceId) params.push(`serviceId=${serviceId}`);
-    if (employeeStatus !== undefined) params.push(`includeInactive=${employeeStatus}`);
+    if (employeeStatus !== undefined)
+      params.push(`includeInactive=${employeeStatus}`);
 
     if (params.length > 0) {
       url += `?${params.join("&")}`;
@@ -20,7 +27,6 @@ const ProjectRepository = {
     return api.get(url);
   },
 
-
   getEmployeesByProject: (projectId) =>
     api.get(`/api/Project/employees/get/${projectId}`),
 
@@ -40,7 +46,10 @@ const ProjectRepository = {
     api.get(`/api/project/allocation-histery/${id}`),
   updateProjectsByEmployee: (id, data) =>
     api.post(`/api/project/assign-projects/${id}`, data),
-  projectNameList: (provideAll) => api.get(`/api/project/list/basic?provideAll=${provideAll}`),
+  projectNameList: (provideAll) =>
+    api.get(`/api/project/list/basic?provideAll=${provideAll}`),
+  projectNameListAll: (searchString) =>
+    api.get(`/api/project/list/basic/all?searchString=${searchString}`),
 
   getProjectDetails: (id) => api.get(`/api/project/details/${id}`),
 

src/utils/constants.jsx

@@ -208,6 +208,6 @@ export const PAYEE_RECURRING_EXPENSE = [
 
 
 //#region Service Project and Jobs
-export const STATUS_JOB_DONE = "ed10ab57-dbaa-4ca5-8ecd-56745dcbdbd7"
+export const STATUS_JOB_CLOSED = "3ddeefb5-ae3c-4e10-a922-35e0a452bb69"
 
 //#endregion