[WEB-3751] chore: work item state icon improvement (#6960)

* chore: return order based on group

* chore: order for workspace stats endpoint

* chore: state response updated

* chore: state icon types updated

* chore: state icon updated

* chore: state settings new icon implementation

* chore: icon implementation

* chore: code refactor

* chore: code refactor

* chore: code refactor

* fix: order field type

---------

Co-authored-by: sangeethailango <sangeethailango21@gmail.com>

web/ce/components/command-palette/actions/work-item-actions/change-state-list.tsx

@@ -2,6 +2,7 @@ import { Command } from "cmdk";
 import { observer } from "mobx-react";
 import { Check } from "lucide-react";
 // plane imports
+import { EIconSize } from "@plane/constants";
 import { Spinner, StateGroupIcon } from "@plane/ui";
 // store hooks
 import { useProjectState } from "@/hooks/store";
@@ -26,7 +27,12 @@ export const ChangeWorkItemStateList = observer((props: TChangeWorkItemStateList
           projectStates.map((state) => (
             <Command.Item key={state.id} onSelect={() => handleStateChange(state.id)} className="focus:outline-none">
               <div className="flex items-center space-x-3">
-                <StateGroupIcon stateGroup={state.group} color={state.color} height="16px" width="16px" />
+                <StateGroupIcon
+                  stateGroup={state.group}
+                  color={state.color}
+                  size={EIconSize.LG}
+                  percentage={state?.order}
+                />
                 <p>{state.name}</p>
               </div>
               <div>{state.id === currentStateId && <Check className="h-3 w-3" />}</div>