feat: selectTab state from url

frontend/src/views/Project/MembersPage/MembersPage.tsx

@@ -1,25 +1,33 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
+import { useRouter } from 'next/router';
+import { useEffect, useState } from 'react';
 import { Tab, TabList, TabPanel, Tabs } from "@app/components/v2";
 import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
 import { withProjectPermission } from "@app/hoc";
 
 import { IdentityTab, MembersTab,ProjectRoleListTab, ServiceTokenTab } from "./components";
 
-enum TabSections {
-  Member = "members",
-  Roles = "roles",
-  Groups = "groups",
-  Identities = "identities",
-  ServiceTokens = "service-tokens"
-}
+import { TabSections } from '@app/types';
 
 export const MembersPage = withProjectPermission(
   () => {
+    const router = useRouter();
+    const { query } = router;
+    const selectedTab = query.selectedTab as string;
+    const [activeTab, setActiveTab] = useState<TabSections>(TabSections.Member);
+
+    useEffect(() => {
+      if (selectedTab && Object.values(TabSections).includes(selectedTab as TabSections)) {
+        setActiveTab(selectedTab as TabSections);
+      }
+    }, [selectedTab]);
+
     return (
       <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
         <div className="mx-auto mb-6 w-full max-w-7xl py-6 px-6">
+          <div>{selectedTab}</div>
           <p className="mr-4 mb-4 text-3xl font-semibold text-white">Project Access Control</p>
-          <Tabs defaultValue={TabSections.Member}>
+          <Tabs value={activeTab} onValueChange={setActiveTab}>
             <TabList>
               <Tab value={TabSections.Member}>Users</Tab>
               <Tab value={TabSections.Identities}>