feat(frontend): add router query for settings groups

frontend/src/components/settings/index.tsx

@@ -16,6 +16,7 @@ import {
   Tab,
   Tabs,
 } from "@mui/material";
+import { useRouter } from "next/router";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 
@@ -25,7 +26,7 @@ import { useUpdate } from "@/hooks/crud/useUpdate";
 import { useToast } from "@/hooks/useToast";
 import { useTranslate } from "@/hooks/useTranslate";
 import { PageHeader } from "@/layout/content/PageHeader";
-import { EntityType } from "@/services/types";
+import { EntityType, RouterType } from "@/services/types";
 import { ISetting } from "@/types/setting.types";
 import { SXStyleOptions } from "@/utils/SXStyleOptions";
 
@@ -66,10 +67,16 @@ function groupBy(array: ISetting[]) {
   }, {} as Record<string, ISetting[]>);
 }
 
+const DEFAULT_SETTINGS_GROUP = "chatbot_settings" as const;
+
 export const Settings = () => {
   const { t } = useTranslate();
+  const router = useRouter();
+  const group = router.query.group?.toString();
   const { toast } = useToast();
-  const [selectedTab, setSelectedTab] = useState("chatbot_settings");
+  const [selectedTab, setSelectedTab] = useState(
+    group || DEFAULT_SETTINGS_GROUP,
+  );
   const { control, watch } = useForm();
   const { data: settings } = useFind(
     { entity: EntityType.SETTING },
@@ -94,6 +101,7 @@ export const Settings = () => {
   };
   const handleChange = (_event: React.SyntheticEvent, newValue: string) => {
     setSelectedTab(newValue);
+    router.push(`/${RouterType.SETTINGS}/groups/${newValue}`);
   };
   const isDisabled = (setting: ISetting) => {
     return (
@@ -135,6 +143,12 @@ export const Settings = () => {
     };
   }, [watch, debouncedUpdate]);
 
+  useEffect(() => {
+    setSelectedTab(group || DEFAULT_SETTINGS_GROUP);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [group]);
+
   return (
     <Grid container gap={3} flexDirection="column">
       <PageHeader icon={faCogs} title={t("title.settings")} />

frontend/src/pages/settings/groups/[group]/index.tsx

@@ -0,0 +1,11 @@
+/*
+ * Copyright © 2024 Hexastack. All rights reserved.
+ *
+ * Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms:
+ * 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission.
+ * 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file).
+ */
+
+import SettingsPage from "../..";
+
+export default SettingsPage;

frontend/src/pages/settings/groups/index.tsx

@@ -0,0 +1,11 @@
+/*
+ * Copyright © 2024 Hexastack. All rights reserved.
+ *
+ * Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms:
+ * 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission.
+ * 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file).
+ */
+
+import SettingsPage from "..";
+
+export default SettingsPage;

frontend/src/services/types.ts

@@ -65,6 +65,7 @@ export enum RouterType {
   RESET = "reset",
   VISUAL_EDITOR = "visual-editor",
   INBOX = "inbox",
+  SETTINGS = "settings",
 }
 
 export const FULL_WIDTH_PATHNAMES: TRouterValues[] = [