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

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 = ({
-  currentItems,
-  selectedStatuses,
-  handleStatusChange,
-  setCurrentPage,
-  totalPages,
-  isLoading,
-}) => {
+const ProjectListView = ({ data, currentPage, totalPages, paginate }) => {
   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 && (
-        <div className="py-4">
-          {" "}
-          {isLoading && <p className="text-center">Loading...</p>}
-          {!isLoading && filteredProjects.length === 0 && (
-            <p className="text-center text-muted">No projects found.</p>
-          )}
-        </div>
-      )}
-      {!isLoading && currentItems.length === 0 && (
-        <div className="py-6">
-          <p className="text-center text-muted">No projects found.</p>
-        </div>
-      )}
-      {!isLoading && totalPages > 1 && (
-        <nav>
-          <ul className="pagination pagination-sm justify-content-end py-2">
-            <li className={`page-item ${currentPage === 1 && "disabled"}`}>
-              <button
-                className="page-link"
-                onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
-              >
-                &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>
-      )}
+      <Pagination
+        currentPage={currentPage}
+        totalPages={totalPages}
+        paginate={paginate}
+      />
     </div>
   );
 };

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/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?.status?.id ??
-        project?.statusId;
+        project.projectStatusId ?? 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}
-          selectedStatuses={selectedStatuses}
-          handleStatusChange={handleStatusChange}
-          setCurrentPage={setCurrentPage}
-          totalPages={totalPages}
-          isLoading={isLoading}
+          data={projectList}
+          currentPage={currentPage}
+          totalPages={data?.totalPages}
+          paginate={paginate}
         />
       ) : (
         <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>
   );
 };