src/pages/project/ProjectList.jsx

@@ -33,7 +33,29 @@ const ProjectList = () =>
 
 
   useEffect(() => {
-    setProjectList( projects )
+    if (!loading && Array.isArray(projects)) {
+      // Step 1: Group projects by statusId
+      const grouped = {};
+  
+      projects.forEach((project) => {
+        const statusId = project.projectStatusId;
+        if (!grouped[statusId]) {
+          grouped[statusId] = [];
+        }
+        grouped[statusId].push(project);
+      });
+  
+      // Step 2: Sort each group by name
+      const sortedGrouped = Object.keys(grouped)
+        .sort() // sort group keys (status IDs)
+        .flatMap((statusId) =>
+          grouped[statusId].sort((a, b) =>
+            a.name.toLowerCase().localeCompare(b.name.toLowerCase())
+          )
+        );
+  
+      setProjectList(sortedGrouped); // final sorted flat list
+    }
     
   }, [ projects, loginUser?.projects, loading ] );
 
@@ -85,20 +107,8 @@ 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
@@ -167,7 +177,7 @@ const ProjectList = () =>
 
           
           {currentItems &&
-            sortedProjects.map((item) => (
+            currentItems.map((item) => (
               <ProjectCard projectData={item} key={item.id}></ProjectCard>
             ))}
         </div>