feat: Instance Admin Panel: Configuration Settings (#2800)

* feat: Instance Admin Panel: Configuration Settings * refactor: seprate Google and Github form into independent components. * feat: add admin auth wrapper and access denied page. * style: design updates.
2026-04-30 04:59:41 -05:00 · 2023-11-20 20:46:49 +05:30
parent 7978c8277c
commit 2a2e504ebb
21 changed files with 1144 additions and 105 deletions
@@ -0,0 +1,204 @@
+import { FC } from "react";
+import { Controller, useForm } from "react-hook-form";
+// ui
+import { Button, Input, ToggleSwitch } from "@plane/ui";
+// types
+import { IFormattedInstanceConfiguration } from "types/instance";
+// hooks
+import useToast from "hooks/use-toast";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+
+export interface IInstanceEmailForm {
+  config: IFormattedInstanceConfiguration;
+}
+
+export interface EmailFormValues {
+  EMAIL_HOST: string;
+  EMAIL_PORT: string;
+  EMAIL_HOST_USER: string;
+  EMAIL_HOST_PASSWORD: string;
+  EMAIL_USE_TLS: string;
+  EMAIL_USE_SSL: string;
+}
+
+export const InstanceEmailForm: FC<IInstanceEmailForm> = (props) => {
+  const { config } = props;
+  // store
+  const { instance: instanceStore } = useMobxStore();
+  // toast
+  const { setToastAlert } = useToast();
+  // form data
+  const {
+    handleSubmit,
+    control,
+    formState: { errors, isSubmitting },
+  } = useForm<EmailFormValues>({
+    defaultValues: {
+      EMAIL_HOST: config["EMAIL_HOST"],
+      EMAIL_PORT: config["EMAIL_PORT"],
+      EMAIL_HOST_USER: config["EMAIL_HOST_USER"],
+      EMAIL_HOST_PASSWORD: config["EMAIL_HOST_PASSWORD"],
+      EMAIL_USE_TLS: config["EMAIL_USE_TLS"],
+      EMAIL_USE_SSL: config["EMAIL_USE_SSL"],
+    },
+  });
+
+  const onSubmit = async (formData: EmailFormValues) => {
+    const payload: Partial<EmailFormValues> = { ...formData };
+
+    await instanceStore
+      .updateInstanceConfigurations(payload)
+      .then(() =>
+        setToastAlert({
+          title: "Success",
+          type: "success",
+          message: "Email Settings updated successfully",
+        })
+      )
+      .catch((err) => console.error(err));
+  };
+
+  return (
+    <div className="flex flex-col gap-8 m-8 w-4/5">
+      <div className="pb-2 mb-2 border-b border-custom-border-100">
+        <div className="text-custom-text-100 font-medium text-lg">Email</div>
+        <div className="text-custom-text-300 font-normal text-sm">Email related settings.</div>
+      </div>
+      <div className="grid grid-col grid-cols-1 lg:grid-cols-2 items-center justify-between gap-x-16 gap-y-8 w-full">
+        <div className="flex flex-col gap-1">
+          <h4 className="text-sm">Host</h4>
+          <Controller
+            control={control}
+            name="EMAIL_HOST"
+            render={({ field: { value, onChange, ref } }) => (
+              <Input
+                id="EMAIL_HOST"
+                name="EMAIL_HOST"
+                type="text"
+                value={value}
+                onChange={onChange}
+                ref={ref}
+                hasError={Boolean(errors.EMAIL_HOST)}
+                placeholder="Email Host"
+                className="rounded-md font-medium w-full"
+              />
+            )}
+          />
+        </div>
+
+        <div className="flex flex-col gap-1">
+          <h4 className="text-sm">Port</h4>
+          <Controller
+            control={control}
+            name="EMAIL_PORT"
+            render={({ field: { value, onChange, ref } }) => (
+              <Input
+                id="EMAIL_PORT"
+                name="EMAIL_PORT"
+                type="text"
+                value={value}
+                onChange={onChange}
+                ref={ref}
+                hasError={Boolean(errors.EMAIL_PORT)}
+                placeholder="Email Port"
+                className="rounded-md font-medium w-full"
+              />
+            )}
+          />
+        </div>
+      </div>
+      <div className="grid grid-col grid-cols-1 lg:grid-cols-2 items-center justify-between gap-x-16 gap-y-8 w-full">
+        <div className="flex flex-col gap-1">
+          <h4 className="text-sm">Username</h4>
+          <Controller
+            control={control}
+            name="EMAIL_HOST_USER"
+            render={({ field: { value, onChange, ref } }) => (
+              <Input
+                id="EMAIL_HOST_USER"
+                name="EMAIL_HOST_USER"
+                type="text"
+                value={value}
+                onChange={onChange}
+                ref={ref}
+                hasError={Boolean(errors.EMAIL_HOST_USER)}
+                placeholder="Username"
+                className="rounded-md font-medium w-full"
+              />
+            )}
+          />
+        </div>
+
+        <div className="flex flex-col gap-1">
+          <h4 className="text-sm">Password</h4>
+          <Controller
+            control={control}
+            name="EMAIL_HOST_PASSWORD"
+            render={({ field: { value, onChange, ref } }) => (
+              <Input
+                id="EMAIL_HOST_PASSWORD"
+                name="EMAIL_HOST_PASSWORD"
+                type="text"
+                value={value}
+                onChange={onChange}
+                ref={ref}
+                hasError={Boolean(errors.EMAIL_HOST_PASSWORD)}
+                placeholder="Password"
+                className="rounded-md font-medium w-full"
+              />
+            )}
+          />
+        </div>
+      </div>
+
+      <div className="flex items-center gap-8 pt-4">
+        <div>
+          <div className="text-custom-text-100 font-medium text-sm">Enable TLS</div>
+        </div>
+        <div>
+          <Controller
+            control={control}
+            name="EMAIL_USE_TLS"
+            render={({ field: { value, onChange } }) => (
+              <ToggleSwitch
+                value={Boolean(parseInt(value))}
+                onChange={() => {
+                  Boolean(parseInt(value)) === true ? onChange("0") : onChange("1");
+                }}
+                size="sm"
+              />
+            )}
+          />
+        </div>
+      </div>
+
+      <div className="flex items-center gap-8 pt-4">
+        <div>
+          <div className="text-custom-text-100 font-medium text-sm">Enable SSL</div>
+        </div>
+        <div>
+          <Controller
+            control={control}
+            name="EMAIL_USE_SSL"
+            render={({ field: { value, onChange } }) => (
+              <ToggleSwitch
+                value={Boolean(parseInt(value))}
+                onChange={() => {
+                  Boolean(parseInt(value)) === true ? onChange("0") : onChange("1");
+                }}
+                size="sm"
+              />
+            )}
+          />
+        </div>
+      </div>
+
+      <div className="flex items-center py-1">
+        <Button variant="primary" onClick={handleSubmit(onSubmit)} loading={isSubmitting}>
+          {isSubmitting ? "Saving..." : "Save Changes"}
+        </Button>
+      </div>
+    </div>
+  );
+};
@@ -52,6 +52,12 @@ export const InstanceGeneralForm: FC<IInstanceGeneralForm> = (props) => {

  return (
    <div className="flex flex-col gap-8 m-8">
+      <div className="pb-2 mb-2 border-b border-custom-border-100">
+        <div className="text-custom-text-100 font-medium text-lg">General</div>
+        <div className="text-custom-text-300 font-normal text-sm">
+          The usual things like your mail, name of instance and other stuff.
+        </div>
+      </div>
      <div className="grid grid-col grid-cols-1 lg:grid-cols-2 2xl:grid-cols-3 items-center justify-between gap-8 w-full">
        <div className="flex flex-col gap-1">
          <h4 className="text-sm">Name of instance</h4>
@@ -0,0 +1,132 @@
+import { FC } from "react";
+import { Controller, useForm } from "react-hook-form";
+// ui
+import { Button, Input } from "@plane/ui";
+// types
+import { IFormattedInstanceConfiguration } from "types/instance";
+// hooks
+import useToast from "hooks/use-toast";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// icons
+import { Copy } from "lucide-react";
+
+export interface IInstanceGithubConfigForm {
+  config: IFormattedInstanceConfiguration;
+}
+
+export interface GithubConfigFormValues {
+  GITHUB_CLIENT_ID: string;
+  GITHUB_CLIENT_SECRET: string;
+}
+
+export const InstanceGithubConfigForm: FC<IInstanceGithubConfigForm> = (props) => {
+  const { config } = props;
+  // store
+  const { instance: instanceStore } = useMobxStore();
+  // toast
+  const { setToastAlert } = useToast();
+  // form data
+  const {
+    handleSubmit,
+    control,
+    formState: { errors, isSubmitting },
+  } = useForm<GithubConfigFormValues>({
+    defaultValues: {
+      GITHUB_CLIENT_ID: config["GITHUB_CLIENT_ID"],
+      GITHUB_CLIENT_SECRET: config["GITHUB_CLIENT_SECRET"],
+    },
+  });
+
+  const onSubmit = async (formData: GithubConfigFormValues) => {
+    const payload: Partial<GithubConfigFormValues> = { ...formData };
+
+    await instanceStore
+      .updateInstanceConfigurations(payload)
+      .then(() =>
+        setToastAlert({
+          title: "Success",
+          type: "success",
+          message: "Github Configuration Settings updated successfully",
+        })
+      )
+      .catch((err) => console.error(err));
+  };
+
+  const originURL = typeof window !== "undefined" ? window.location.origin : "";
+
+  return (
+    <>
+      <div className="grid grid-col grid-cols-1 lg:grid-cols-2 items-center justify-between gap-x-16 gap-y-8 w-full">
+        <div className="flex flex-col gap-1">
+          <h4 className="text-sm">Client ID</h4>
+          <Controller
+            control={control}
+            name="GITHUB_CLIENT_ID"
+            render={({ field: { value, onChange, ref } }) => (
+              <Input
+                id="GITHUB_CLIENT_ID"
+                name="GITHUB_CLIENT_ID"
+                type="text"
+                value={value}
+                onChange={onChange}
+                ref={ref}
+                hasError={Boolean(errors.GITHUB_CLIENT_ID)}
+                placeholder="Github Client ID"
+                className="rounded-md font-medium w-full"
+              />
+            )}
+          />
+        </div>
+        <div className="flex flex-col gap-1">
+          <h4 className="text-sm">Client Secret</h4>
+          <Controller
+            control={control}
+            name="GITHUB_CLIENT_SECRET"
+            render={({ field: { value, onChange, ref } }) => (
+              <Input
+                id="GITHUB_CLIENT_SECRET"
+                name="GITHUB_CLIENT_SECRET"
+                type="text"
+                value={value}
+                onChange={onChange}
+                ref={ref}
+                hasError={Boolean(errors.GITHUB_CLIENT_SECRET)}
+                placeholder="Github Client Secret"
+                className="rounded-md font-medium w-full"
+              />
+            )}
+          />
+        </div>
+      </div>
+      <div className="grid grid-col grid-cols-1 lg:grid-cols-2 items-center justify-between gap-x-16 gap-y-8 w-full">
+        <div className="flex flex-col gap-1">
+          <h4 className="text-sm">Origin URL</h4>
+          <Button
+            variant="neutral-primary"
+            className="py-2 flex justify-between items-center"
+            onClick={() => {
+              navigator.clipboard.writeText(originURL);
+              setToastAlert({
+                message: "The Origin URL has been successfully copied to your clipboard",
+                type: "success",
+                title: "Copied to clipboard",
+              });
+            }}
+          >
+            <p className="font-medium text-sm">{originURL}</p>
+            <Copy size={18} color="#B9B9B9" />
+          </Button>
+          <p className="text-xs text-custom-text-400/60">*paste this URL in your Github console.</p>
+        </div>
+        <div className="flex flex-col gap-1">
+          <div className="flex items-center p-2">
+            <Button variant="primary" onClick={handleSubmit(onSubmit)} loading={isSubmitting}>
+              {isSubmitting ? "Saving..." : "Save Changes"}
+            </Button>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
@@ -0,0 +1,132 @@
+import { FC } from "react";
+import { Controller, useForm } from "react-hook-form";
+// ui
+import { Button, Input } from "@plane/ui";
+// types
+import { IFormattedInstanceConfiguration } from "types/instance";
+// hooks
+import useToast from "hooks/use-toast";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// icons
+import { Copy } from "lucide-react";
+
+export interface IInstanceGoogleConfigForm {
+  config: IFormattedInstanceConfiguration;
+}
+
+export interface GoogleConfigFormValues {
+  GOOGLE_CLIENT_ID: string;
+  GOOGLE_CLIENT_SECRET: string;
+}
+
+export const InstanceGoogleConfigForm: FC<IInstanceGoogleConfigForm> = (props) => {
+  const { config } = props;
+  // store
+  const { instance: instanceStore } = useMobxStore();
+  // toast
+  const { setToastAlert } = useToast();
+  // form data
+  const {
+    handleSubmit,
+    control,
+    formState: { errors, isSubmitting },
+  } = useForm<GoogleConfigFormValues>({
+    defaultValues: {
+      GOOGLE_CLIENT_ID: config["GOOGLE_CLIENT_ID"],
+      GOOGLE_CLIENT_SECRET: config["GOOGLE_CLIENT_SECRET"],
+    },
+  });
+
+  const onSubmit = async (formData: GoogleConfigFormValues) => {
+    const payload: Partial<GoogleConfigFormValues> = { ...formData };
+
+    await instanceStore
+      .updateInstanceConfigurations(payload)
+      .then(() =>
+        setToastAlert({
+          title: "Success",
+          type: "success",
+          message: "Google Configuration Settings updated successfully",
+        })
+      )
+      .catch((err) => console.error(err));
+  };
+
+  const originURL = typeof window !== "undefined" ? window.location.origin : "";
+
+  return (
+    <>
+      <div className="grid grid-col grid-cols-1 lg:grid-cols-2 items-center justify-between gap-x-16 gap-y-8 w-full">
+        <div className="flex flex-col gap-1">
+          <h4 className="text-sm">Client ID</h4>
+          <Controller
+            control={control}
+            name="GOOGLE_CLIENT_ID"
+            render={({ field: { value, onChange, ref } }) => (
+              <Input
+                id="GOOGLE_CLIENT_ID"
+                name="GOOGLE_CLIENT_ID"
+                type="text"
+                value={value}
+                onChange={onChange}
+                ref={ref}
+                hasError={Boolean(errors.GOOGLE_CLIENT_ID)}
+                placeholder="Google Client ID"
+                className="rounded-md font-medium w-full"
+              />
+            )}
+          />
+        </div>
+        <div className="flex flex-col gap-1">
+          <h4 className="text-sm">Client Secret</h4>
+          <Controller
+            control={control}
+            name="GOOGLE_CLIENT_SECRET"
+            render={({ field: { value, onChange, ref } }) => (
+              <Input
+                id="GOOGLE_CLIENT_SECRET"
+                name="GOOGLE_CLIENT_SECRET"
+                type="text"
+                value={value}
+                onChange={onChange}
+                ref={ref}
+                hasError={Boolean(errors.GOOGLE_CLIENT_SECRET)}
+                placeholder="Google Client Secret"
+                className="rounded-md font-medium w-full"
+              />
+            )}
+          />
+        </div>
+      </div>
+      <div className="grid grid-col grid-cols-1 lg:grid-cols-2 items-center justify-between gap-x-16 gap-y-8 w-full">
+        <div className="flex flex-col gap-1">
+          <h4 className="text-sm">Origin URL</h4>
+          <Button
+            variant="neutral-primary"
+            className="py-2 flex justify-between items-center"
+            onClick={() => {
+              navigator.clipboard.writeText(originURL);
+              setToastAlert({
+                message: "The Origin URL has been successfully copied to your clipboard",
+                type: "success",
+                title: "Copied to clipboard",
+              });
+            }}
+          >
+            <p className="font-medium text-sm">{originURL}</p>
+            <Copy size={18} color="#B9B9B9" />
+          </Button>
+          <p className="text-xs text-custom-text-400/60">*paste this URL in your Google developer console.</p>
+        </div>
+        <div className="flex flex-col gap-1">
+          <div className="flex items-center p-2">
+            <Button variant="primary" onClick={handleSubmit(onSubmit)} loading={isSubmitting}>
+              {isSubmitting ? "Saving..." : "Save Changes"}
+            </Button>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
@@ -0,0 +1,137 @@
+import { FC } from "react";
+import { Controller, useForm } from "react-hook-form";
+// ui
+import { Button, Input } from "@plane/ui";
+// types
+import { IFormattedInstanceConfiguration } from "types/instance";
+// hooks
+import useToast from "hooks/use-toast";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+
+export interface IInstanceOpenAIForm {
+  config: IFormattedInstanceConfiguration;
+}
+
+export interface OpenAIFormValues {
+  OPENAI_API_BASE: string;
+  OPENAI_API_KEY: string;
+  GPT_ENGINE: string;
+}
+
+export const InstanceOpenAIForm: FC<IInstanceOpenAIForm> = (props) => {
+  const { config } = props;
+  // store
+  const { instance: instanceStore } = useMobxStore();
+  // toast
+  const { setToastAlert } = useToast();
+  // form data
+  const {
+    handleSubmit,
+    control,
+    formState: { errors, isSubmitting },
+  } = useForm<OpenAIFormValues>({
+    defaultValues: {
+      OPENAI_API_BASE: config["OPENAI_API_BASE"],
+      OPENAI_API_KEY: config["OPENAI_API_KEY"],
+      GPT_ENGINE: config["GPT_ENGINE"],
+    },
+  });
+
+  const onSubmit = async (formData: OpenAIFormValues) => {
+    const payload: Partial<OpenAIFormValues> = { ...formData };
+
+    await instanceStore
+      .updateInstanceConfigurations(payload)
+      .then(() =>
+        setToastAlert({
+          title: "Success",
+          type: "success",
+          message: "Open AI Settings updated successfully",
+        })
+      )
+      .catch((err) => console.error(err));
+  };
+
+  return (
+    <div className="flex flex-col gap-8 m-8 w-4/5">
+      <div className="pb-2 mb-2 border-b border-custom-border-100">
+        <div className="text-custom-text-100 font-medium text-lg">OpenAI</div>
+        <div className="text-custom-text-300 font-normal text-sm">
+          AI is everywhere make use it as much as you can! <a href="#" className="text-custom-primary-100">Learn more.</a>
+        </div>
+      </div>
+      <div className="grid grid-col grid-cols-1 lg:grid-cols-2 items-center justify-between gap-x-16 gap-y-8 w-full">
+        <div className="flex flex-col gap-1">
+          <h4 className="text-sm">OpenAI API Base</h4>
+          <Controller
+            control={control}
+            name="OPENAI_API_BASE"
+            render={({ field: { value, onChange, ref } }) => (
+              <Input
+                id="OPENAI_API_BASE"
+                name="OPENAI_API_BASE"
+                type="text"
+                value={value}
+                onChange={onChange}
+                ref={ref}
+                hasError={Boolean(errors.OPENAI_API_BASE)}
+                placeholder="OpenAI API Base"
+                className="rounded-md font-medium w-full"
+              />
+            )}
+          />
+        </div>
+
+        <div className="flex flex-col gap-1">
+          <h4 className="text-sm">OpenAI API Key</h4>
+          <Controller
+            control={control}
+            name="OPENAI_API_KEY"
+            render={({ field: { value, onChange, ref } }) => (
+              <Input
+                id="OPENAI_API_KEY"
+                name="OPENAI_API_KEY"
+                type="text"
+                value={value}
+                onChange={onChange}
+                ref={ref}
+                hasError={Boolean(errors.OPENAI_API_KEY)}
+                placeholder="OpenAI API Key"
+                className="rounded-md font-medium w-full"
+              />
+            )}
+          />
+        </div>
+      </div>
+      <div className="grid grid-col grid-cols-1 lg:grid-cols-2 items-center justify-between gap-x-16 gap-y-8 w-full">
+        <div className="flex flex-col gap-1">
+          <h4 className="text-sm">GPT Engine</h4>
+          <Controller
+            control={control}
+            name="GPT_ENGINE"
+            render={({ field: { value, onChange, ref } }) => (
+              <Input
+                id="GPT_ENGINE"
+                name="GPT_ENGINE"
+                type="text"
+                value={value}
+                onChange={onChange}
+                ref={ref}
+                hasError={Boolean(errors.GPT_ENGINE)}
+                placeholder="GPT Engine"
+                className="rounded-md font-medium w-full"
+              />
+            )}
+          />
+        </div>
+      </div>
+
+      <div className="flex items-center py-1">
+        <Button variant="primary" onClick={handleSubmit(onSubmit)} loading={isSubmitting}>
+          {isSubmitting ? "Saving..." : "Save Changes"}
+        </Button>
+      </div>
+    </div>
+  );
+};
@@ -3,7 +3,7 @@ import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 import Link from "next/link";
 import { Menu, Transition } from "@headlessui/react";
-import { LogOut, Settings, Shield, UserCircle2 } from "lucide-react";
+import { Cog, LogIn, LogOut, Settings, UserCircle2 } from "lucide-react";
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
 // hooks
@@ -11,7 +11,7 @@ import useToast from "hooks/use-toast";
 // services
 import { AuthService } from "services/auth.service";
 // ui
-import { Avatar } from "@plane/ui";
+import { Avatar, Tooltip } from "@plane/ui";

 // Static Data
 const profileLinks = (workspaceSlug: string, userId: string) => [
@@ -70,19 +70,30 @@ export const InstanceSidebarDropdown = observer(() => {
            sidebarCollapsed ? "justify-center" : ""
          }`}
        >
-          <div className={`flex-shrink-0 `}>
-            <Shield className="h-6 w-6 text-custom-text-100" />
+          <div className={`flex-shrink-0 flex items-center justify-center h-6 w-6 bg-custom-sidebar-background-80 rounded`}>
+            <Cog className="h-5 w-5 text-custom-text-200" />
          </div>

          {!sidebarCollapsed && (
-            <h4 className="text-custom-text-100 font-medium text-base truncate">Instance Admin Settings</h4>
+            <h4 className="text-custom-text-200 font-medium text-base truncate">Instance Admin</h4>
          )}
        </div>
      </div>

      {!sidebarCollapsed && (
        <Menu as="div" className="relative flex-shrink-0">
-          <Menu.Button className="grid place-items-center outline-none">
+          <Menu.Button className="flex gap-4 place-items-center outline-none">
+            {!sidebarCollapsed && (
+              <Tooltip position="bottom-left" tooltipContent="Go back to your workspace">
+                <div className="flex-shrink-0">
+                  <Link href={`/${redirectWorkspaceSlug}`}>
+                    <a>
+                      <LogIn className="h-5 w-5 text-custom-text-200 rotate-180" />
+                    </a>
+                  </Link>
+                </div>
+              </Tooltip>
+            )}
            <Avatar
              name={currentUser?.display_name}
              src={currentUser?.avatar}
@@ -132,7 +143,7 @@ export const InstanceSidebarDropdown = observer(() => {

              <div className="p-2 pb-0">
                <Menu.Item as="button" type="button" className="w-full">
-                  <Link href={redirectWorkspaceSlug}>
+                  <Link href={`/${redirectWorkspaceSlug}`}>
                    <a className="flex w-full items-center justify-center rounded px-2 py-1 text-sm font-medium text-custom-primary-100 hover:text-custom-primary-200 bg-custom-primary-10 hover:bg-custom-primary-20">
                      Normal Mode
                    </a>
@@ -1,6 +1,7 @@
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { BarChart2, Briefcase, CheckCircle, LayoutGrid } from "lucide-react";
+// icons
+import { BrainCog, Cog, Lock, Mail } from "lucide-react";
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
 // ui
@@ -8,24 +9,28 @@ import { Tooltip } from "@plane/ui";

 const INSTANCE_ADMIN_LINKS = [
  {
-    Icon: LayoutGrid,
+    Icon: Cog,
    name: "General",
+    description: "General settings here",
    href: `/admin`,
  },
  {
-    Icon: BarChart2,
-    name: "OAuth",
-    href: `/admin/oauth`,
-  },
-  {
-    Icon: Briefcase,
+    Icon: Mail,
    name: "Email",
+    description: "Email related settings will go here",
    href: `/admin/email`,
  },
  {
-    Icon: CheckCircle,
-    name: "AI",
-    href: `/admin/ai`,
+    Icon: Lock,
+    name: "Authorization",
+    description: "Autorization",
+    href: `/admin/authorization`,
+  },
+  {
+    Icon: BrainCog,
+    name: "OpenAI",
+    description: "OpenAI configurations",
+    href: `/admin/openai`,
  },
 ];

@@ -37,7 +42,7 @@ export const InstanceAdminSidebarMenu = () => {
  const router = useRouter();

  return (
-    <div className="h-full overflow-y-auto w-full cursor-pointer space-y-2 p-4">
+    <div className="h-full overflow-y-auto w-full cursor-pointer space-y-3 p-4">
      {INSTANCE_ADMIN_LINKS.map((item, index) => {
        const isActive = item.name === "Settings" ? router.asPath.includes(item.href) : router.asPath === item.href;

@@ -46,14 +51,29 @@ export const InstanceAdminSidebarMenu = () => {
            <a className="block w-full">
              <Tooltip tooltipContent={item.name} position="right" className="ml-2" disabled={!sidebarCollapsed}>
                <div
-                  className={`group flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-sm font-medium outline-none ${
+                  className={`group flex w-full items-center gap-3 rounded-md px-3 py-2 outline-none ${
                    isActive
                      ? "bg-custom-primary-100/10 text-custom-primary-100"
                      : "text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 focus:bg-custom-sidebar-background-80"
                  } ${sidebarCollapsed ? "justify-center" : ""}`}
                >
                  {<item.Icon className="h-4 w-4" />}
-                  {!sidebarCollapsed && item.name}
+                  {!sidebarCollapsed && (
+                    <div className="flex flex-col leading-snug">
+                      <span
+                        className={`text-sm font-medium ${
+                          isActive ? "text-custom-primary-100" : "text-custom-sidebar-text-200"
+                        }`}
+                      >
+                        {item.name}
+                      </span>
+                      <span
+                        className={`text-xs ${isActive ? "text-custom-primary-100" : "text-custom-sidebar-text-300"}`}
+                      >
+                        {item.description}
+                      </span>
+                    </div>
+                  )}
                </div>
              </Tooltip>
            </a>