pi sills

2026-02-23 22:52:27 +00:00
parent 8fb96c7cf8
commit 2126f3912e
35 changed files with 1126 additions and 137 deletions
@@ -0,0 +1,90 @@
+import { useMemo } from 'react';
+import { Puzzle, KeyRound, UserCircle } from 'lucide-react';
+import type { LayoutNode, PanelComponents } from 'officerdev';
+import { WorkspaceLayout } from 'officerdev';
+import { useAuth } from 'hooks/useAuth';
+import { useGlobal } from 'hooks/useGlobal';
+import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
+
+import { SettingsSidebar, SettingsContent, type SettingsSection } from '../SettingsPanel';
+import { GoogleOAuthConfig } from './GoogleOAuthConfig';
+import { GoogleAccount } from './GoogleAccount';
+
+const GLOBAL_KEY = 'INTEGRATIONS_SETTINGS_SELECTED';
+const TAB_KEY = 'INTEGRATIONS_SETTINGS_TAB';
+
+const enterpriseSections: SettingsSection[] = [
+  { key: 'google-oauth', icon: KeyRound, title: 'Google OAuth', description: 'Client ID and secret for Google APIs', content: <GoogleOAuthConfig /> },
+];
+
+const personalSections: SettingsSection[] = [
+  { key: 'google-account', icon: UserCircle, title: 'Google Account', description: 'Connect your Google account', content: <GoogleAccount /> },
+];
+
+const IntegrationsSidebar = () => {
+  const { user } = useAuth();
+  const isSuperAdmin = user?.role === 'Super Admin';
+  const [tab, setTab] = useGlobal<string>(TAB_KEY, isSuperAdmin ? 'enterprise' : 'personal');
+  const sections = tab === 'enterprise' ? enterpriseSections : personalSections;
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="p-3 pb-2">
+        <div className="flex items-center gap-2.5 rounded-lg px-3 py-2 text-sm font-medium bg-duck-teal/15 text-duck-teal">
+          <Puzzle className="h-4 w-4" />
+          Integrations
+        </div>
+      </div>
+      {isSuperAdmin && (
+        <div className="px-3 pb-2">
+          <Tabs value={tab} onValueChange={setTab}>
+            <TabsList className="w-full">
+              <TabsTrigger value="enterprise" className="flex-1 cursor-pointer">
+                Enterprise
+              </TabsTrigger>
+              <TabsTrigger value="personal" className="flex-1 cursor-pointer">
+                Personal
+              </TabsTrigger>
+            </TabsList>
+          </Tabs>
+        </div>
+      )}
+      <SettingsSidebar globalKey={GLOBAL_KEY} icon={Puzzle} label="Integrations" sections={sections} hideHeader />
+    </div>
+  );
+};
+
+const IntegrationsContent = () => {
+  const { user } = useAuth();
+  const isSuperAdmin = user?.role === 'Super Admin';
+  const [tab] = useGlobal<string>(TAB_KEY, isSuperAdmin ? 'enterprise' : 'personal');
+  const sections = tab === 'enterprise' ? enterpriseSections : personalSections;
+
+  return <SettingsContent globalKey={GLOBAL_KEY} sections={sections} />;
+};
+
+const layout: LayoutNode = {
+  type: 'group',
+  id: 'integrations-root',
+  direction: 'horizontal',
+  children: [
+    { node: { type: 'panel', id: 'integrations-left', appType: null }, size: 20 },
+    { node: { type: 'panel', id: 'integrations-right', appType: null }, size: 80 },
+  ],
+};
+
+export const IntegrationsSettings = () => {
+  const panelComponents: PanelComponents = useMemo(
+    () => ({
+      'integrations-left': IntegrationsSidebar,
+      'integrations-right': IntegrationsContent,
+    }),
+    [],
+  );
+
+  return (
+    <div className="h-full w-full pt-2">
+      <WorkspaceLayout layout={layout} onLayoutChange={() => {}} components={panelComponents} />
+    </div>
+  );
+};