From afbfdaccc7dfb7494797613d389fecbcd88e5f65 Mon Sep 17 00:00:00 2001
From: Avdhesh-Varshney <avdhesh7v@gmail.com>
Date: Sat, 10 Jan 2026 21:19:42 +0530
Subject: [PATCH 1/6] create integrations route & page

---
 .../modules/app/routes/constants/routes.ts    |  1 +
 client/src/modules/settings/modules/index.tsx |  3 +++
 .../modules/integrations/v1/index.tsx         |  5 ++++
 client/src/modules/settings/routes/index.tsx  | 24 ++++++++++++++++++-
 4 files changed, 32 insertions(+), 1 deletion(-)
 create mode 100644 client/src/modules/settings/modules/integrations/v1/index.tsx

diff --git a/client/src/modules/app/routes/constants/routes.ts b/client/src/modules/app/routes/constants/routes.ts
index bda6ff06..730fa47b 100644
--- a/client/src/modules/app/routes/constants/routes.ts
+++ b/client/src/modules/app/routes/constants/routes.ts
@@ -14,4 +14,5 @@ export enum ROUTES_HOME_V1 {
 
 export enum ROUTES_SETTINGS_V1 {
   PROFILE = '/profile',
+  INTEGRATIONS = '/integrations',
 }
diff --git a/client/src/modules/settings/modules/index.tsx b/client/src/modules/settings/modules/index.tsx
index 05321729..8318ca35 100644
--- a/client/src/modules/settings/modules/index.tsx
+++ b/client/src/modules/settings/modules/index.tsx
@@ -1,3 +1,6 @@
 import { lazy } from 'react';
 
 export const ProfileLazyComponentV1 = lazy(() => import('./profile/v1'));
+export const IntegrationsLazyComponentV1 = lazy(
+  () => import('./integrations/v1')
+);
diff --git a/client/src/modules/settings/modules/integrations/v1/index.tsx b/client/src/modules/settings/modules/integrations/v1/index.tsx
new file mode 100644
index 00000000..cf73d98f
--- /dev/null
+++ b/client/src/modules/settings/modules/integrations/v1/index.tsx
@@ -0,0 +1,5 @@
+const Integrations = () => {
+  return <div>Integrations</div>;
+};
+
+export default Integrations;
diff --git a/client/src/modules/settings/routes/index.tsx b/client/src/modules/settings/routes/index.tsx
index bec90c3e..bb91f480 100644
--- a/client/src/modules/settings/routes/index.tsx
+++ b/client/src/modules/settings/routes/index.tsx
@@ -1,4 +1,5 @@
 import AccountCircleOutlinedIcon from '@mui/icons-material/AccountCircleOutlined';
+import ExtensionIcon from '@mui/icons-material/Extension';
 import {
   ROUTES_V1,
   ROUTES_SETTINGS_V1,
@@ -6,7 +7,10 @@ import {
 import { SettingTabType } from '../v1/typings';
 import { Navigate, Route } from 'react-router-dom';
 import { ProtectedRoute } from '../../app/routes/auth-routes/protected-route';
-import { ProfileLazyComponentV1 } from '../modules';
+import {
+  ProfileLazyComponentV1,
+  IntegrationsLazyComponentV1,
+} from '../modules';
 
 export const settingsRoutes = ({
   isMobileOrTablet,
@@ -21,6 +25,14 @@ export const settingsRoutes = ({
       name: 'Your profile',
       description: 'Edit your personal details',
     },
+    {
+      id: 'integrations',
+      icon: <ExtensionIcon sx={{ fontSize: 20 }} />,
+      path: ROUTES_SETTINGS_V1.INTEGRATIONS,
+      name: 'Integrations',
+      description: 'Manage your integrations',
+      locked: false,
+    },
   ];
 
   const routes: React.ReactNode[] = [
@@ -31,6 +43,16 @@ export const settingsRoutes = ({
         <ProtectedRoute component={ProfileLazyComponentV1} hasAccess={true} />
       }
     />,
+    <Route
+      key={`${ROUTES_SETTINGS_V1.INTEGRATIONS}/*`}
+      path={`${ROUTES_SETTINGS_V1.INTEGRATIONS}/*`}
+      element={
+        <ProtectedRoute
+          component={IntegrationsLazyComponentV1}
+          hasAccess={true}
+        />
+      }
+    />,
 
     !isMobileOrTablet && (
       <Route

From 7c4cec03f7769d8ed22418ddda6461711ee6ddb7 Mon Sep 17 00:00:00 2001
From: Avdhesh-Varshney <avdhesh7v@gmail.com>
Date: Sat, 10 Jan 2026 22:23:03 +0530
Subject: [PATCH 2/6] develop integrations page

---
 .../v1/components/integrations-header.tsx     |  70 +++++
 .../modules/integrations/v1/hooks/index.ts    |  39 +++
 .../modules/integrations/v1/index.tsx         | 270 +++++++++++++++++-
 3 files changed, 378 insertions(+), 1 deletion(-)
 create mode 100644 client/src/modules/settings/modules/integrations/v1/components/integrations-header.tsx
 create mode 100644 client/src/modules/settings/modules/integrations/v1/hooks/index.ts

diff --git a/client/src/modules/settings/modules/integrations/v1/components/integrations-header.tsx b/client/src/modules/settings/modules/integrations/v1/components/integrations-header.tsx
new file mode 100644
index 00000000..8f99756c
--- /dev/null
+++ b/client/src/modules/settings/modules/integrations/v1/components/integrations-header.tsx
@@ -0,0 +1,70 @@
+import { Box, IconButton, useTheme } from '@mui/material';
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+import A2ZTypography from '../../../../../../shared/components/atoms/typography';
+import { HEADER_HEIGHT } from '../../../../../../shared/components/organisms/header/constants';
+import { useDevice } from '../../../../../../shared/hooks/use-device';
+import { useCustomNavigate } from '../../../../../../shared/hooks/use-custom-navigate';
+import {
+  ROUTES_SETTINGS_V1,
+  ROUTES_V1,
+} from '../../../../../app/routes/constants/routes';
+
+interface IntegrationsHeaderProps {
+  title: string;
+}
+
+const IntegrationsHeader = ({ title }: IntegrationsHeaderProps) => {
+  const theme = useTheme();
+  const { isMobileOrTablet } = useDevice();
+  const navigate = useCustomNavigate();
+
+  const handleBackClick = () => {
+    navigate({
+      pathname: `${ROUTES_V1.SETTINGS}${ROUTES_SETTINGS_V1.INTEGRATIONS}`,
+    });
+  };
+
+  return (
+    <Box
+      sx={{
+        height: `${HEADER_HEIGHT}px`,
+        minHeight: `${HEADER_HEIGHT}px`,
+        maxHeight: `${HEADER_HEIGHT}px`,
+        display: 'flex',
+        alignItems: 'center',
+        px: { xs: 2, md: 3 },
+        borderBottom: `1px solid ${theme.palette.divider}`,
+        bgcolor: 'background.paper',
+        gap: 2,
+      }}
+    >
+      {isMobileOrTablet && (
+        <IconButton
+          onClick={handleBackClick}
+          sx={{
+            color: 'text.primary',
+            '&:hover': {
+              bgcolor: 'action.hover',
+            },
+          }}
+          aria-label="Go back to integrations"
+        >
+          <ArrowBackIcon />
+        </IconButton>
+      )}
+      <A2ZTypography
+        text={title}
+        variant="h6"
+        props={{
+          sx: {
+            fontWeight: 600,
+            color: 'text.primary',
+            flex: 1,
+          },
+        }}
+      />
+    </Box>
+  );
+};
+
+export default IntegrationsHeader;
diff --git a/client/src/modules/settings/modules/integrations/v1/hooks/index.ts b/client/src/modules/settings/modules/integrations/v1/hooks/index.ts
new file mode 100644
index 00000000..0e0fa242
--- /dev/null
+++ b/client/src/modules/settings/modules/integrations/v1/hooks/index.ts
@@ -0,0 +1,39 @@
+import { useMemo } from 'react';
+import { useLocation } from 'react-router-dom';
+import { integrationsRoutes } from '../../../../routes';
+import { useDevice } from '../../../../../../shared/hooks/use-device';
+
+const useIntegrationsSettings = () => {
+  const location = useLocation();
+  const { isMobileOrTablet } = useDevice();
+
+  const { integrations, routes } = integrationsRoutes({ isMobileOrTablet });
+
+  const integrationId = useMemo(() => {
+    const pathParts = location.pathname.split('/');
+    const integrationsIndex = pathParts.findIndex(
+      part => part === 'integrations'
+    );
+    if (integrationsIndex !== -1 && pathParts[integrationsIndex + 1]) {
+      const slug = pathParts[integrationsIndex + 1];
+      return integrations.find(
+        integration => integration.integrationSlug === slug
+      )?.id;
+    }
+    return null;
+  }, [location.pathname, integrations]);
+
+  const activeIntegration = useMemo(() => {
+    if (!integrationId) return undefined;
+    return integrations.find(integration => integration.id === integrationId);
+  }, [integrationId, integrations]);
+
+  return {
+    integrations,
+    routes,
+    integrationId,
+    activeIntegration,
+  };
+};
+
+export default useIntegrationsSettings;
diff --git a/client/src/modules/settings/modules/integrations/v1/index.tsx b/client/src/modules/settings/modules/integrations/v1/index.tsx
index cf73d98f..6721c868 100644
--- a/client/src/modules/settings/modules/integrations/v1/index.tsx
+++ b/client/src/modules/settings/modules/integrations/v1/index.tsx
@@ -1,5 +1,273 @@
+import { Box, ButtonBase, useTheme } from '@mui/material';
+import { Routes } from 'react-router-dom';
+import LockIcon from '@mui/icons-material/Lock';
+import { SETTINGS_SIDEBAR_WIDTH } from '../../../v1/constants';
+import useIntegrationsSettings from './hooks';
+import A2ZTypography from '../../../../../shared/components/atoms/typography';
+import { useCustomNavigate } from '../../../../../shared/hooks/use-custom-navigate';
+import { useDevice } from '../../../../../shared/hooks/use-device';
+import {
+  ROUTES_SETTINGS_V1,
+  ROUTES_V1,
+} from '../../../../app/routes/constants/routes';
+import IntegrationsHeader from './components/integrations-header';
+import { IntegrationSettingType } from '../../../v1/typings';
+
 const Integrations = () => {
-  return <div>Integrations</div>;
+  const theme = useTheme();
+  const { isMobileOrTablet } = useDevice();
+  const navigate = useCustomNavigate();
+  const { integrations, routes, integrationId, activeIntegration } =
+    useIntegrationsSettings();
+
+  // On mobile, show sidebar only when not on a detail page
+  const showSidebarOnMobile = !isMobileOrTablet || !activeIntegration;
+
+  return (
+    <Box
+      sx={{
+        height: '100%',
+        width: '100%',
+        display: 'flex',
+        justifyContent: 'flex-start',
+        alignItems: 'flex-start',
+        bgcolor: 'background.default',
+        overflow: 'hidden',
+      }}
+    >
+      <Box
+        sx={{
+          height: '100%',
+          width: {
+            xs: showSidebarOnMobile ? '100%' : 0,
+            md: SETTINGS_SIDEBAR_WIDTH,
+          },
+          minWidth: {
+            xs: showSidebarOnMobile ? '100%' : 0,
+            md: SETTINGS_SIDEBAR_WIDTH,
+          },
+          maxWidth: {
+            xs: showSidebarOnMobile ? '100%' : 0,
+            md: SETTINGS_SIDEBAR_WIDTH,
+          },
+          display: {
+            xs: showSidebarOnMobile ? 'flex' : 'none',
+            md: 'flex',
+          },
+          flexDirection: 'column',
+          justifyContent: 'flex-start',
+          alignItems: 'flex-start',
+          bgcolor: 'background.paper',
+          overflow: 'hidden',
+        }}
+      >
+        <Box
+          sx={{
+            flex: 1,
+            width: '100%',
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'flex-start',
+            alignItems: 'flex-start',
+            overflow: 'hidden',
+            '&:hover': {
+              overflowY: 'auto',
+              '&::-webkit-scrollbar': {
+                width: '8px',
+              },
+              '&::-webkit-scrollbar-track': {
+                bgcolor: 'transparent',
+              },
+              '&::-webkit-scrollbar-thumb': {
+                bgcolor: 'divider',
+                borderRadius: '4px',
+                '&:hover': {
+                  bgcolor: 'action.disabled',
+                },
+              },
+            },
+          }}
+        >
+          {integrations.map(
+            (integration: IntegrationSettingType, index: number) => {
+              const {
+                id,
+                integrationSlug,
+                name,
+                icon,
+                description,
+                locked = false,
+              } = integration;
+              const absolutePath = `${ROUTES_V1.SETTINGS}${ROUTES_SETTINGS_V1.INTEGRATIONS}/${integrationSlug}`;
+              const isTabActive = integrationId === id;
+
+              return (
+                <ButtonBase<'div'>
+                  key={id || index}
+                  component="div"
+                  sx={{
+                    width: '100%',
+                    p: 2,
+                    display: 'flex',
+                    flexDirection: 'column',
+                    justifyContent: 'flex-start',
+                    alignItems: 'flex-start',
+                    rowGap: 0.25,
+                    borderBottom:
+                      index < integrations.length - 1
+                        ? `1px solid ${theme.palette.divider}`
+                        : 'none',
+                    bgcolor: isTabActive
+                      ? theme.palette.mode === 'dark'
+                        ? 'rgba(59, 130, 246, 0.1)'
+                        : 'rgba(240, 245, 240, 1)'
+                      : 'transparent',
+                    boxShadow: 'none',
+                    outline: 'none',
+                    transition: 'background-color 200ms ease-in-out',
+                    '&:hover': {
+                      bgcolor: isTabActive
+                        ? theme.palette.mode === 'dark'
+                          ? 'rgba(59, 130, 246, 0.15)'
+                          : 'rgba(240, 245, 240, 0.68)'
+                        : 'action.hover',
+                      boxShadow: 'none',
+                      outline: 'none',
+                    },
+                  }}
+                  disabled={locked}
+                  onClick={() => {
+                    if (locked) {
+                      return;
+                    }
+                    navigate({ pathname: absolutePath });
+                  }}
+                >
+                  <Box
+                    sx={{
+                      width: '100%',
+                      display: 'flex',
+                      justifyContent: 'space-between',
+                      alignItems: 'center',
+                      columnGap: 1.5,
+                    }}
+                  >
+                    <Box
+                      sx={{
+                        display: 'flex',
+                        justifyContent: 'flex-start',
+                        alignItems: 'center',
+                        columnGap: 1.5,
+                      }}
+                    >
+                      <Box
+                        sx={{
+                          position: 'relative',
+                          display: 'flex',
+                          alignItems: 'center',
+                          justifyContent: 'center',
+                          color: isTabActive
+                            ? 'primary.main'
+                            : 'text.secondary',
+                        }}
+                      >
+                        {icon}
+                        {locked && (
+                          <LockIcon
+                            sx={{
+                              ml: 'auto',
+                              height: 15,
+                              width: 15,
+                              bgcolor: 'background.default',
+                              p: 0.25,
+                              borderRadius: '50%',
+                              border: `1px solid ${theme.palette.divider}`,
+                              position: 'absolute',
+                              right: -4,
+                              top: -6,
+                              fontSize: 15,
+                              color: 'text.secondary',
+                            }}
+                          />
+                        )}
+                      </Box>
+                      <A2ZTypography
+                        text={name}
+                        variant="body1"
+                        props={{
+                          sx: {
+                            fontSize: 16,
+                            fontWeight: 600,
+                            color: isTabActive
+                              ? 'primary.main'
+                              : 'text.primary',
+                          },
+                          'data-testid': `integration-${name}`,
+                        }}
+                      />
+                    </Box>
+                  </Box>
+                  {description && (
+                    <A2ZTypography
+                      text={description}
+                      variant="body2"
+                      props={{
+                        sx: {
+                          fontSize: 14,
+                          fontWeight: 400,
+                          color: 'text.secondary',
+                          pl: 'calc(20px + 12px)',
+                        },
+                      }}
+                    />
+                  )}
+                </ButtonBase>
+              );
+            }
+          )}
+        </Box>
+      </Box>
+
+      <Box
+        sx={{
+          height: '100%',
+          width: {
+            xs: activeIntegration ? '100%' : 0,
+            md: `calc(100% - ${SETTINGS_SIDEBAR_WIDTH}px)`,
+          },
+          minWidth: {
+            xs: activeIntegration ? '100%' : 0,
+            md: `calc(100% - ${SETTINGS_SIDEBAR_WIDTH}px)`,
+          },
+          maxWidth: {
+            xs: activeIntegration ? '100%' : 0,
+            md: `calc(100% - ${SETTINGS_SIDEBAR_WIDTH}px)`,
+          },
+          display: {
+            xs: activeIntegration ? 'flex' : 'none',
+            md: 'flex',
+          },
+          flexDirection: 'column',
+          borderLeft: { xs: 'none', md: `1px solid ${theme.palette.divider}` },
+          borderColor: 'divider',
+          bgcolor: 'background.default',
+          overflow: 'hidden',
+        }}
+      >
+        {activeIntegration && (
+          <IntegrationsHeader title={activeIntegration.name} />
+        )}
+        <Box
+          sx={{
+            flex: 1,
+            overflow: 'auto',
+          }}
+        >
+          <Routes>{routes}</Routes>
+        </Box>
+      </Box>
+    </Box>
+  );
 };
 
 export default Integrations;

From 3f0d5ccd2e1c251139e6d44fc1090d1cf0e1c5e7 Mon Sep 17 00:00:00 2001
From: Avdhesh-Varshney <avdhesh7v@gmail.com>
Date: Sat, 10 Jan 2026 22:24:29 +0530
Subject: [PATCH 3/6] create openai integrations route & page

---
 .../modules/app/routes/constants/routes.ts    |  4 ++
 client/src/modules/settings/modules/index.tsx |  3 ++
 .../integrations/modules/openai/v1/index.tsx  |  5 ++
 client/src/modules/settings/routes/index.tsx  | 51 ++++++++++++++++++-
 .../src/modules/settings/v1/typings/index.ts  | 10 ++++
 client/src/shared/icons/openai.tsx            | 30 +++++++++++
 6 files changed, 102 insertions(+), 1 deletion(-)
 create mode 100644 client/src/modules/settings/modules/integrations/modules/openai/v1/index.tsx
 create mode 100644 client/src/shared/icons/openai.tsx

diff --git a/client/src/modules/app/routes/constants/routes.ts b/client/src/modules/app/routes/constants/routes.ts
index 730fa47b..cba1d32e 100644
--- a/client/src/modules/app/routes/constants/routes.ts
+++ b/client/src/modules/app/routes/constants/routes.ts
@@ -16,3 +16,7 @@ export enum ROUTES_SETTINGS_V1 {
   PROFILE = '/profile',
   INTEGRATIONS = '/integrations',
 }
+
+export enum ROUTES_SETTINGS_INTEGRATIONS_V1 {
+  OPENAI = '/openai',
+}
diff --git a/client/src/modules/settings/modules/index.tsx b/client/src/modules/settings/modules/index.tsx
index 8318ca35..a00cd769 100644
--- a/client/src/modules/settings/modules/index.tsx
+++ b/client/src/modules/settings/modules/index.tsx
@@ -4,3 +4,6 @@ export const ProfileLazyComponentV1 = lazy(() => import('./profile/v1'));
 export const IntegrationsLazyComponentV1 = lazy(
   () => import('./integrations/v1')
 );
+export const OpenAILazyComponentV1 = lazy(
+  () => import('./integrations/modules/openai/v1')
+);
diff --git a/client/src/modules/settings/modules/integrations/modules/openai/v1/index.tsx b/client/src/modules/settings/modules/integrations/modules/openai/v1/index.tsx
new file mode 100644
index 00000000..29d8c67f
--- /dev/null
+++ b/client/src/modules/settings/modules/integrations/modules/openai/v1/index.tsx
@@ -0,0 +1,5 @@
+const OpenAI = () => {
+  return <div>OpenAI</div>;
+};
+
+export default OpenAI;
diff --git a/client/src/modules/settings/routes/index.tsx b/client/src/modules/settings/routes/index.tsx
index bb91f480..a1dd887f 100644
--- a/client/src/modules/settings/routes/index.tsx
+++ b/client/src/modules/settings/routes/index.tsx
@@ -3,14 +3,17 @@ import ExtensionIcon from '@mui/icons-material/Extension';
 import {
   ROUTES_V1,
   ROUTES_SETTINGS_V1,
+  ROUTES_SETTINGS_INTEGRATIONS_V1,
 } from '../../app/routes/constants/routes';
-import { SettingTabType } from '../v1/typings';
+import { IntegrationSettingType, SettingTabType } from '../v1/typings';
 import { Navigate, Route } from 'react-router-dom';
 import { ProtectedRoute } from '../../app/routes/auth-routes/protected-route';
 import {
   ProfileLazyComponentV1,
   IntegrationsLazyComponentV1,
+  OpenAILazyComponentV1,
 } from '../modules';
+import OpenAIIcon from '../../../shared/icons/openai';
 
 export const settingsRoutes = ({
   isMobileOrTablet,
@@ -73,3 +76,49 @@ export const settingsRoutes = ({
     routes,
   };
 };
+
+export const integrationsRoutes = ({
+  isMobileOrTablet,
+}: {
+  isMobileOrTablet: boolean;
+}) => {
+  const integrations: IntegrationSettingType[] = [
+    {
+      id: 'openai',
+      type: 'integration',
+      integrationSlug: 'openai',
+      icon: <OpenAIIcon width={24} height={24} />,
+      name: 'OpenAI',
+      description: 'Setup your OpenAI integration',
+      locked: false,
+    },
+  ];
+
+  const routes: React.ReactNode[] = [
+    <Route
+      key={ROUTES_SETTINGS_INTEGRATIONS_V1.OPENAI}
+      path={ROUTES_SETTINGS_INTEGRATIONS_V1.OPENAI}
+      element={
+        <ProtectedRoute component={OpenAILazyComponentV1} hasAccess={true} />
+      }
+    />,
+
+    !isMobileOrTablet && (
+      <Route
+        key="*"
+        path="*"
+        element={
+          <Navigate
+            to={`${ROUTES_V1.SETTINGS}${ROUTES_SETTINGS_V1.INTEGRATIONS}${ROUTES_SETTINGS_INTEGRATIONS_V1.OPENAI}`}
+            replace
+          />
+        }
+      />
+    ),
+  ];
+
+  return {
+    integrations,
+    routes,
+  };
+};
diff --git a/client/src/modules/settings/v1/typings/index.ts b/client/src/modules/settings/v1/typings/index.ts
index 5788dc1e..64ee2464 100644
--- a/client/src/modules/settings/v1/typings/index.ts
+++ b/client/src/modules/settings/v1/typings/index.ts
@@ -12,3 +12,13 @@ export interface SettingTabType {
   disabled?: boolean;
   feature?: string;
 }
+
+export interface IntegrationSettingType {
+  id: string;
+  type: string;
+  integrationSlug: string;
+  icon: ReactNode;
+  name: string;
+  description?: string;
+  locked?: boolean;
+}
diff --git a/client/src/shared/icons/openai.tsx b/client/src/shared/icons/openai.tsx
new file mode 100644
index 00000000..c9d666d3
--- /dev/null
+++ b/client/src/shared/icons/openai.tsx
@@ -0,0 +1,30 @@
+import { FC, SVGProps } from 'react';
+
+const OpenAIIcon: FC<SVGProps<SVGSVGElement>> = ({
+  color = '#7a7a7a',
+  width = 24,
+  height = 24,
+  ...props
+}) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={width}
+      height={height}
+      viewBox="0 0 512 512"
+      fillRule="evenodd"
+      clipRule="evenodd"
+      strokeLinejoin="round"
+      strokeMiterlimit={2}
+      {...props}
+    >
+      <path
+        d="M474.123 209.81c11.525-34.577 7.569-72.423-10.838-103.904-27.696-48.168-83.433-72.94-137.794-61.414a127.14 127.14 0 00-95.475-42.49c-55.564 0-104.936 35.781-122.139 88.593-35.781 7.397-66.574 29.76-84.637 61.414-27.868 48.167-21.503 108.72 15.826 150.007-11.525 34.578-7.569 72.424 10.838 103.733 27.696 48.34 83.433 73.111 137.966 61.585 24.084 27.18 58.833 42.835 95.303 42.663 55.564 0 104.936-35.782 122.139-88.594 35.782-7.397 66.574-29.76 84.465-61.413 28.04-48.168 21.676-108.722-15.654-150.008v-.172zm-39.567-87.218c11.01 19.267 15.139 41.803 11.354 63.65-.688-.516-2.064-1.204-2.924-1.72l-101.152-58.49a16.965 16.965 0 00-16.687 0L206.621 194.5v-50.232l97.883-56.597c45.587-26.32 103.732-10.666 130.052 34.921zm-227.935 104.42l49.888-28.9 49.887 28.9v57.63l-49.887 28.9-49.888-28.9v-57.63zm23.223-191.81c22.364 0 43.867 7.742 61.07 22.02-.688.344-2.064 1.204-3.097 1.72L186.666 117.26c-5.161 2.925-8.258 8.43-8.258 14.45v136.934l-43.523-25.116V130.333c0-52.64 42.491-95.13 95.131-95.302l-.172.172zM52.14 168.697c11.182-19.268 28.557-34.062 49.544-41.803V247.14c0 6.02 3.097 11.354 8.258 14.45l118.354 68.295-43.695 25.288-97.711-56.425c-45.415-26.32-61.07-84.465-34.75-130.052zm26.665 220.71c-11.182-19.095-15.139-41.802-11.354-63.65.688.516 2.064 1.204 2.924 1.72l101.152 58.49a16.965 16.965 0 0016.687 0l118.354-68.467v50.232l-97.883 56.425c-45.587 26.148-103.732 10.665-130.052-34.75h.172zm204.54 87.39c-22.192 0-43.867-7.741-60.898-22.02a62.439 62.439 0 003.097-1.72l101.152-58.317c5.16-2.924 8.429-8.43 8.257-14.45V243.527l43.523 25.116v113.022c0 52.64-42.663 95.303-95.131 95.303v-.172zM461.22 343.303c-11.182 19.267-28.729 34.061-49.544 41.63V264.687c0-6.021-3.097-11.526-8.257-14.45L284.893 181.77l43.523-25.116 97.883 56.424c45.587 26.32 61.07 84.466 34.75 130.053l.172.172z"
+        fillRule="nonzero"
+        fill={color}
+      />
+    </svg>
+  );
+};
+
+export default OpenAIIcon;

From 84d750011d18ff1c62067d4e54049b312535523d Mon Sep 17 00:00:00 2001
From: Avdhesh-Varshney <avdhesh7v@gmail.com>
Date: Sat, 10 Jan 2026 22:25:02 +0530
Subject: [PATCH 4/6] rmv unnecessary var

---
 client/src/modules/settings/v1/hooks/index.ts |  5 -----
 client/src/modules/settings/v1/index.tsx      | 11 +++++------
 2 files changed, 5 insertions(+), 11 deletions(-)

diff --git a/client/src/modules/settings/v1/hooks/index.ts b/client/src/modules/settings/v1/hooks/index.ts
index 0b4f58c7..4148f2b8 100644
--- a/client/src/modules/settings/v1/hooks/index.ts
+++ b/client/src/modules/settings/v1/hooks/index.ts
@@ -46,10 +46,6 @@ const useSettingsV1 = () => {
     });
   }, [location.pathname, settings]);
 
-  const isSettingsDetailPage = useMemo(() => {
-    return activeSetting !== undefined;
-  }, [activeSetting]);
-
   return {
     searchTerm,
     setSearchTerm,
@@ -58,7 +54,6 @@ const useSettingsV1 = () => {
     routes,
     filteredSettings,
     activeSetting,
-    isSettingsDetailPage,
   };
 };
 
diff --git a/client/src/modules/settings/v1/index.tsx b/client/src/modules/settings/v1/index.tsx
index c08a928b..bab6f819 100644
--- a/client/src/modules/settings/v1/index.tsx
+++ b/client/src/modules/settings/v1/index.tsx
@@ -18,11 +18,10 @@ const Settings = () => {
     filteredSettings,
     routes,
     activeSetting,
-    isSettingsDetailPage,
   } = useSettingsV1();
 
   // On mobile, show sidebar only when not on a detail page
-  const showSidebarOnMobile = !isMobileOrTablet || !isSettingsDetailPage;
+  const showSidebarOnMobile = !isMobileOrTablet || !activeSetting;
 
   return (
     <Box
@@ -131,19 +130,19 @@ const Settings = () => {
         sx={{
           height: '100%',
           width: {
-            xs: isSettingsDetailPage ? '100%' : 0,
+            xs: activeSetting ? '100%' : 0,
             md: `calc(100% - ${SETTINGS_SIDEBAR_WIDTH}px)`,
           },
           minWidth: {
-            xs: isSettingsDetailPage ? '100%' : 0,
+            xs: activeSetting ? '100%' : 0,
             md: `calc(100% - ${SETTINGS_SIDEBAR_WIDTH}px)`,
           },
           maxWidth: {
-            xs: isSettingsDetailPage ? '100%' : 0,
+            xs: activeSetting ? '100%' : 0,
             md: `calc(100% - ${SETTINGS_SIDEBAR_WIDTH}px)`,
           },
           display: {
-            xs: isSettingsDetailPage ? 'flex' : 'none',
+            xs: activeSetting ? 'flex' : 'none',
             md: 'flex',
           },
           flexDirection: 'column',

From 14e65a7aff5aae2f874de05259580001462b6955 Mon Sep 17 00:00:00 2001
From: Avdhesh-Varshney <avdhesh7v@gmail.com>
Date: Sun, 11 Jan 2026 16:38:39 +0530
Subject: [PATCH 5/6] design open ai key integration

---
 .../modules/openai/v1/hooks/index.ts          |  44 +++++++
 .../integrations/modules/openai/v1/index.tsx  | 108 +++++++++++++++++-
 .../modules/integrations/v1/hooks/index.ts    |   4 +-
 .../modules/integrations/v1/index.tsx         |   4 +-
 4 files changed, 155 insertions(+), 5 deletions(-)
 create mode 100644 client/src/modules/settings/modules/integrations/modules/openai/v1/hooks/index.ts

diff --git a/client/src/modules/settings/modules/integrations/modules/openai/v1/hooks/index.ts b/client/src/modules/settings/modules/integrations/modules/openai/v1/hooks/index.ts
new file mode 100644
index 00000000..a5e690b6
--- /dev/null
+++ b/client/src/modules/settings/modules/integrations/modules/openai/v1/hooks/index.ts
@@ -0,0 +1,44 @@
+import { useState, useCallback } from 'react';
+
+const useOpenAIIntegrationV1 = () => {
+  const [apiKey, setApiKey] = useState<string>('');
+  const [isConnected, setIsConnected] = useState<boolean>(false);
+  const [loading, setLoading] = useState<boolean>(false);
+
+  const handleConnect = useCallback(async () => {
+    setLoading(true);
+    try {
+      // TODO: Implement the logic to connect to OpenAI
+      setIsConnected(true);
+      setApiKey(apiKey);
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setLoading(false);
+    }
+  }, [apiKey]);
+
+  const handleDisconnect = useCallback(async () => {
+    setLoading(true);
+    try {
+      // TODO: Implement the logic to disconnect from OpenAI
+      setIsConnected(false);
+      setApiKey('');
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  return {
+    apiKey,
+    setApiKey,
+    isConnected,
+    loading,
+    handleConnect,
+    handleDisconnect,
+  };
+};
+
+export default useOpenAIIntegrationV1;
diff --git a/client/src/modules/settings/modules/integrations/modules/openai/v1/index.tsx b/client/src/modules/settings/modules/integrations/modules/openai/v1/index.tsx
index 29d8c67f..d834fcb6 100644
--- a/client/src/modules/settings/modules/integrations/modules/openai/v1/index.tsx
+++ b/client/src/modules/settings/modules/integrations/modules/openai/v1/index.tsx
@@ -1,5 +1,111 @@
+import { Box, Button, Stack, CircularProgress } from '@mui/material';
+import VpnKeyIcon from '@mui/icons-material/VpnKey';
+import InputBox from '../../../../../../../shared/components/atoms/input-box';
+import A2ZTypography from '../../../../../../../shared/components/atoms/typography';
+import useOpenAIIntegrationV1 from './hooks';
+
 const OpenAI = () => {
-  return <div>OpenAI</div>;
+  const {
+    apiKey,
+    setApiKey,
+    isConnected,
+    loading,
+    handleConnect,
+    handleDisconnect,
+  } = useOpenAIIntegrationV1();
+
+  return (
+    <Box
+      sx={{
+        p: { xs: 2, md: 3 },
+        height: '100%',
+        overflow: 'auto',
+      }}
+    >
+      <Stack spacing={3}>
+        <A2ZTypography
+          text="Connect your OpenAI account by providing your API key."
+          variant="body2"
+          props={{
+            sx: {
+              color: 'text.secondary',
+            },
+          }}
+        />
+
+        <Box>
+          <InputBox
+            id="openai-api-key"
+            name="apiKey"
+            type={isConnected ? 'text' : 'password'}
+            value={isConnected ? '*'.repeat(apiKey.length) : apiKey}
+            placeholder={
+              isConnected
+                ? 'Your API key is connected and encrypted'
+                : 'Enter your OpenAI API key'
+            }
+            icon={<VpnKeyIcon />}
+            disabled={isConnected}
+            autoComplete="off"
+            autoFocus={!isConnected && !loading}
+            sx={{
+              width: '50%',
+              '& .MuiOutlinedInput-root': {
+                bgcolor: 'background.paper',
+              },
+            }}
+            slotProps={{
+              htmlInput: {
+                onChange: (e: React.ChangeEvent<HTMLInputElement>) => {
+                  setApiKey(e.target.value);
+                },
+              },
+            }}
+          />
+          <A2ZTypography
+            text={
+              isConnected
+                ? 'Your API key is connected and encrypted'
+                : 'Your API key will be securely stored and encrypted'
+            }
+            variant="caption"
+            props={{
+              sx: {
+                mt: 0.5,
+                display: 'block',
+                color: 'text.secondary',
+              },
+            }}
+          />
+        </Box>
+
+        <Box>
+          <Button
+            variant="contained"
+            color={isConnected ? 'error' : 'primary'}
+            disabled={loading || !apiKey.trim()}
+            onClick={isConnected ? handleDisconnect : handleConnect}
+            sx={{
+              py: 1.2,
+              fontSize: '1rem',
+              borderRadius: 1,
+            }}
+          >
+            {loading ? (
+              <>
+                <CircularProgress size={18} sx={{ mr: 1 }} />
+                {isConnected ? 'Disconnecting...' : 'Connecting...'}
+              </>
+            ) : isConnected ? (
+              'Disconnect'
+            ) : (
+              'Connect'
+            )}
+          </Button>
+        </Box>
+      </Stack>
+    </Box>
+  );
 };
 
 export default OpenAI;
diff --git a/client/src/modules/settings/modules/integrations/v1/hooks/index.ts b/client/src/modules/settings/modules/integrations/v1/hooks/index.ts
index 0e0fa242..76638ccc 100644
--- a/client/src/modules/settings/modules/integrations/v1/hooks/index.ts
+++ b/client/src/modules/settings/modules/integrations/v1/hooks/index.ts
@@ -3,7 +3,7 @@ import { useLocation } from 'react-router-dom';
 import { integrationsRoutes } from '../../../../routes';
 import { useDevice } from '../../../../../../shared/hooks/use-device';
 
-const useIntegrationsSettings = () => {
+const useIntegrationsSettingsV1 = () => {
   const location = useLocation();
   const { isMobileOrTablet } = useDevice();
 
@@ -36,4 +36,4 @@ const useIntegrationsSettings = () => {
   };
 };
 
-export default useIntegrationsSettings;
+export default useIntegrationsSettingsV1;
diff --git a/client/src/modules/settings/modules/integrations/v1/index.tsx b/client/src/modules/settings/modules/integrations/v1/index.tsx
index 6721c868..41416b16 100644
--- a/client/src/modules/settings/modules/integrations/v1/index.tsx
+++ b/client/src/modules/settings/modules/integrations/v1/index.tsx
@@ -2,7 +2,7 @@ import { Box, ButtonBase, useTheme } from '@mui/material';
 import { Routes } from 'react-router-dom';
 import LockIcon from '@mui/icons-material/Lock';
 import { SETTINGS_SIDEBAR_WIDTH } from '../../../v1/constants';
-import useIntegrationsSettings from './hooks';
+import useIntegrationsSettingsV1 from './hooks';
 import A2ZTypography from '../../../../../shared/components/atoms/typography';
 import { useCustomNavigate } from '../../../../../shared/hooks/use-custom-navigate';
 import { useDevice } from '../../../../../shared/hooks/use-device';
@@ -18,7 +18,7 @@ const Integrations = () => {
   const { isMobileOrTablet } = useDevice();
   const navigate = useCustomNavigate();
   const { integrations, routes, integrationId, activeIntegration } =
-    useIntegrationsSettings();
+    useIntegrationsSettingsV1();
 
   // On mobile, show sidebar only when not on a detail page
   const showSidebarOnMobile = !isMobileOrTablet || !activeIntegration;

From 0ddf22673db0946af55c18fc99cf1634e18c4cb9 Mon Sep 17 00:00:00 2001
From: Avdhesh-Varshney <avdhesh7v@gmail.com>
Date: Sun, 11 Jan 2026 22:17:54 +0530
Subject: [PATCH 6/6] review changes

---
 .../modules/openai/v1/hooks/index.ts          | 24 ++++++++++++++++---
 .../integrations/modules/openai/v1/index.tsx  |  4 ++--
 .../modules/integrations/v1/index.tsx         |  2 +-
 client/src/modules/settings/routes/index.tsx  |  4 +---
 .../src/modules/settings/v1/typings/index.ts  |  1 -
 5 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/client/src/modules/settings/modules/integrations/modules/openai/v1/hooks/index.ts b/client/src/modules/settings/modules/integrations/modules/openai/v1/hooks/index.ts
index a5e690b6..6685e001 100644
--- a/client/src/modules/settings/modules/integrations/modules/openai/v1/hooks/index.ts
+++ b/client/src/modules/settings/modules/integrations/modules/openai/v1/hooks/index.ts
@@ -1,6 +1,9 @@
 import { useState, useCallback } from 'react';
+import { useNotifications } from '../../../../../../../../shared/hooks/use-notification';
 
 const useOpenAIIntegrationV1 = () => {
+  const { addNotification } = useNotifications();
+
   const [apiKey, setApiKey] = useState<string>('');
   const [isConnected, setIsConnected] = useState<boolean>(false);
   const [loading, setLoading] = useState<boolean>(false);
@@ -10,13 +13,20 @@ const useOpenAIIntegrationV1 = () => {
     try {
       // TODO: Implement the logic to connect to OpenAI
       setIsConnected(true);
-      setApiKey(apiKey);
+      addNotification({
+        message: 'OpenAI connected successfully',
+        type: 'success',
+      });
     } catch (error) {
       console.error(error);
+      addNotification({
+        message: 'Failed to connect to OpenAI',
+        type: 'error',
+      });
     } finally {
       setLoading(false);
     }
-  }, [apiKey]);
+  }, [addNotification]);
 
   const handleDisconnect = useCallback(async () => {
     setLoading(true);
@@ -24,12 +34,20 @@ const useOpenAIIntegrationV1 = () => {
       // TODO: Implement the logic to disconnect from OpenAI
       setIsConnected(false);
       setApiKey('');
+      addNotification({
+        message: 'OpenAI disconnected successfully',
+        type: 'success',
+      });
     } catch (error) {
       console.error(error);
+      addNotification({
+        message: 'Failed to disconnect from OpenAI',
+        type: 'error',
+      });
     } finally {
       setLoading(false);
     }
-  }, []);
+  }, [addNotification]);
 
   return {
     apiKey,
diff --git a/client/src/modules/settings/modules/integrations/modules/openai/v1/index.tsx b/client/src/modules/settings/modules/integrations/modules/openai/v1/index.tsx
index d834fcb6..bf1ca1ed 100644
--- a/client/src/modules/settings/modules/integrations/modules/openai/v1/index.tsx
+++ b/client/src/modules/settings/modules/integrations/modules/openai/v1/index.tsx
@@ -38,7 +38,7 @@ const OpenAI = () => {
             id="openai-api-key"
             name="apiKey"
             type={isConnected ? 'text' : 'password'}
-            value={isConnected ? '*'.repeat(apiKey.length) : apiKey}
+            value={isConnected ? '••••••••••••••••' : apiKey}
             placeholder={
               isConnected
                 ? 'Your API key is connected and encrypted'
@@ -49,7 +49,7 @@ const OpenAI = () => {
             autoComplete="off"
             autoFocus={!isConnected && !loading}
             sx={{
-              width: '50%',
+              width: { xs: '100%', md: '50%' },
               '& .MuiOutlinedInput-root': {
                 bgcolor: 'background.paper',
               },
diff --git a/client/src/modules/settings/modules/integrations/v1/index.tsx b/client/src/modules/settings/modules/integrations/v1/index.tsx
index 41416b16..d76c8c1e 100644
--- a/client/src/modules/settings/modules/integrations/v1/index.tsx
+++ b/client/src/modules/settings/modules/integrations/v1/index.tsx
@@ -216,7 +216,7 @@ const Integrations = () => {
                           fontSize: 14,
                           fontWeight: 400,
                           color: 'text.secondary',
-                          pl: 'calc(20px + 12px)',
+                          pl: 4,
                         },
                       }}
                     />
diff --git a/client/src/modules/settings/routes/index.tsx b/client/src/modules/settings/routes/index.tsx
index a1dd887f..8cfd5d4b 100644
--- a/client/src/modules/settings/routes/index.tsx
+++ b/client/src/modules/settings/routes/index.tsx
@@ -34,7 +34,6 @@ export const settingsRoutes = ({
       path: ROUTES_SETTINGS_V1.INTEGRATIONS,
       name: 'Integrations',
       description: 'Manage your integrations',
-      locked: false,
     },
   ];
 
@@ -85,9 +84,8 @@ export const integrationsRoutes = ({
   const integrations: IntegrationSettingType[] = [
     {
       id: 'openai',
-      type: 'integration',
       integrationSlug: 'openai',
-      icon: <OpenAIIcon width={24} height={24} />,
+      icon: <OpenAIIcon width={20} height={20} />,
       name: 'OpenAI',
       description: 'Setup your OpenAI integration',
       locked: false,
diff --git a/client/src/modules/settings/v1/typings/index.ts b/client/src/modules/settings/v1/typings/index.ts
index 64ee2464..2bef09a6 100644
--- a/client/src/modules/settings/v1/typings/index.ts
+++ b/client/src/modules/settings/v1/typings/index.ts
@@ -15,7 +15,6 @@ export interface SettingTabType {
 
 export interface IntegrationSettingType {
   id: string;
-  type: string;
   integrationSlug: string;
   icon: ReactNode;
   name: string;