From fe5964d21db3cb26dcfaa02a08078f38b8f94352 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Wed, 1 Oct 2025 12:39:22 +0000
Subject: [PATCH] feat: Add Integrations tab to Admin Settings

---
 src/pages/AdminSettings.tsx | 34 ++++++++++++++++++++++++++++++++--
 1 file changed, 32 insertions(+), 2 deletions(-)

diff --git a/src/pages/AdminSettings.tsx b/src/pages/AdminSettings.tsx
index 59bafbb9..0271145f 100644
--- a/src/pages/AdminSettings.tsx
+++ b/src/pages/AdminSettings.tsx
@@ -11,7 +11,7 @@ import { AdminHeader } from '@/components/layout/AdminHeader';
 import { useAuth } from '@/hooks/useAuth';
 import { useUserRole } from '@/hooks/useUserRole';
 import { useAdminSettings } from '@/hooks/useAdminSettings';
-import { Loader2, Save, Clock, Users, Bell, Shield, Settings, Trash2 } from 'lucide-react';
+import { Loader2, Save, Clock, Users, Bell, Shield, Settings, Trash2, Plug } from 'lucide-react';
 
 export default function AdminSettings() {
   const { user } = useAuth();
@@ -368,7 +368,7 @@ export default function AdminSettings() {
         </div>
 
         <Tabs defaultValue="moderation" className="space-y-6">
-          <TabsList className="grid w-full grid-cols-4">
+          <TabsList className="grid w-full grid-cols-5">
             <TabsTrigger value="moderation" className="flex items-center gap-2">
               <Shield className="w-4 h-4" />
               <span className="hidden sm:inline">Moderation</span>
@@ -385,6 +385,10 @@ export default function AdminSettings() {
               <Settings className="w-4 h-4" />
               <span className="hidden sm:inline">System</span>
             </TabsTrigger>
+            <TabsTrigger value="integrations" className="flex items-center gap-2">
+              <Plug className="w-4 h-4" />
+              <span className="hidden sm:inline">Integrations</span>
+            </TabsTrigger>
           </TabsList>
 
           <TabsContent value="moderation">
@@ -490,6 +494,32 @@ export default function AdminSettings() {
               </CardContent>
             </Card>
           </TabsContent>
+
+          <TabsContent value="integrations">
+            <Card>
+              <CardHeader>
+                <CardTitle className="flex items-center gap-2">
+                  <Plug className="w-5 h-5" />
+                  Integration Settings
+                </CardTitle>
+                <CardDescription>
+                  Configure third-party integrations and external services
+                </CardDescription>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                {getSettingsByCategory('integrations').length > 0 ? (
+                  getSettingsByCategory('integrations').map((setting) => (
+                    <SettingInput key={setting.id} setting={setting} />
+                  ))
+                ) : (
+                  <div className="text-center py-8 text-muted-foreground">
+                    <Plug className="w-12 h-12 mx-auto mb-4 opacity-50" />
+                    <p>No integration settings configured yet.</p>
+                  </div>
+                )}
+              </CardContent>
+            </Card>
+          </TabsContent>
         </Tabs>
       </div>
     </>