project list display status wise

src/pages/project/ProjectList.jsx

@@ -85,7 +85,20 @@ const ProjectList = () =>
     ? Math.ceil(projectList.length / itemsPerPage)
     : 0;
 
+  const statusMap = {
+    1: { label: 'active', priority: 1 },
+    2: { label: 'hold', priority: 2 },
+    3: { label: 'inactive', priority: 3 },
+    4: { label: 'complete', priority: 4 }
+  };
+  
 
+  const sortedProjects = [...currentItems].sort((a, b) => {
+    const aPriority = statusMap[+a.projectStatusId]?.priority ?? 99;
+    const bPriority = statusMap[+b.projectStatusId]?.priority ?? 99;
+    return aPriority - bPriority;
+  });
+  
   return (
     <>
       <div
@@ -119,7 +132,7 @@ const ProjectList = () =>
             {" "}
             <button
               type="button"
-              className={`btn btn-sm btn-primary ${!HasManageProject && 'd-none' }`}
+              className={`btn btn-xs btn-primary ${!HasManageProject && 'd-none' }`}
               data-bs-toggle="modal"
               data-bs-target="#create-project-model"
               onClick={handleShow}
@@ -151,8 +164,10 @@ const ProjectList = () =>
 
         <div className="row">
           {loading && <p className="text-center">Loading...</p>}
+
+          
           {currentItems &&
-            currentItems.sort((a, b) => b.id - a.id).map((item) => (
+            sortedProjects.map((item) => (
               <ProjectCard projectData={item} key={item.id}></ProjectCard>
             ))}
         </div>