chore: state ordering sequence in kanban and list layout

web/constants/project.ts

@@ -51,6 +51,9 @@ export const PROJECT_AUTOMATION_MONTHS = [
   { label: "12 Months", value: 12 },
 ];
 
+export const STATE_GROUP_KEYS = ["backlog", "unstarted", "started", "completed", "cancelled"];
+
+
 export const PROJECT_UNSPLASH_COVERS = [
   "https://images.unsplash.com/photo-1531045535792-b515d59c3d1f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=870&q=80",
   "https://images.unsplash.com/photo-1693027407934-e3aa8a54c7ae?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=870&q=80",

web/helpers/state.helper.ts

@@ -1,7 +1,19 @@
 // types
-import { IStateResponse } from "types";
+import { STATE_GROUP_KEYS } from "constants/project";
+import { IState, IStateResponse } from "types";
 
 export const orderStateGroups = (unorderedStateGroups: IStateResponse | undefined): IStateResponse | undefined => {
   if (!unorderedStateGroups) return undefined;
   return Object.assign({ backlog: [], unstarted: [], started: [], completed: [], cancelled: [] }, unorderedStateGroups);
 };
+
+export const sortStates = (states: IState[]) => {
+  if (!states || states.length === 0) return null;
+
+  return states.sort((stateA, stateB) => {
+    if (stateA.group === stateB.group) {
+      return stateA.sequence - stateB.sequence;
+    }
+    return STATE_GROUP_KEYS.indexOf(stateA.group) - STATE_GROUP_KEYS.indexOf(stateB.group);
+  });
+};

web/store/project/project-state.store.ts

@@ -4,6 +4,8 @@ import { RootStore } from "../root";
 import { IState } from "types";
 // services
 import { ProjectService, ProjectStateService } from "services/project";
+// helpers
+import { sortStates } from "helpers/state.helper";
 import { groupByField } from "helpers/array.helper";
 
 export interface IProjectStateStore {
@@ -77,7 +79,7 @@ export class ProjectStateStore implements IProjectStateStore {
     if (!this.rootStore.project.projectId) return null;
     const states = this.states[this.rootStore.project.projectId];
     if (!states) return null;
-    return states;
+    return sortStates(states);
   }
 
   projectStateIds = () => {