Refactor Admin Settings page

src/pages/AdminSettings.tsx

@@ -1,82 +1,29 @@
-import { useState, useEffect } from 'react';
+import { useState } from 'react';
-import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Switch } from '@/components/ui/switch';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
-import { Textarea } from '@/components/ui/textarea';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
-import { Separator } from '@/components/ui/separator';
 import { Badge } from '@/components/ui/badge';
 import { AdminHeader } from '@/components/layout/AdminHeader';
 import { useAuth } from '@/hooks/useAuth';
 import { useUserRole } from '@/hooks/useUserRole';
-import { supabase } from '@/integrations/supabase/client';
+import { useAdminSettings } from '@/hooks/useAdminSettings';
-import { useToast } from '@/hooks/use-toast';
+import { Loader2, Save, Clock, Users, Bell, Shield, Settings, Trash2 } from 'lucide-react';
-import { Loader2, Save, Clock, Users, Bell, Shield, Settings, Trash2, Plus, X } from 'lucide-react';
-
-interface AdminSetting {
-  id: string;
-  setting_key: string;
-  setting_value: any;
-  category: string;
-  description: string;
-}
 
 export default function AdminSettings() {
   const { user } = useAuth();
-  const { permissions, loading: roleLoading } = useUserRole();
+  const { isAdmin, isModerator, loading: roleLoading } = useUserRole();
-  const { toast } = useToast();
+  const { 
-  const queryClient = useQueryClient();
+    settings, 
-  const [hasChanges, setHasChanges] = useState(false);
+    isLoading, 
-
+    error, 
-  // Fetch admin settings
+    updateSetting, 
-  const { data: settings, isLoading } = useQuery({
+    isUpdating,
-    queryKey: ['admin-settings'],
+    getSettingsByCategory 
-    queryFn: async () => {
+  } = useAdminSettings();
-      const { data, error } = await supabase
-        .from('admin_settings')
-        .select('*')
-        .order('category', { ascending: true });
-      
-      if (error) throw error;
-      return data as AdminSetting[];
-    },
-    enabled: !!user && permissions?.role_level !== 'user'
-  });
-
-  // Update settings mutation
-  const updateSettingMutation = useMutation({
-    mutationFn: async ({ key, value }: { key: string; value: any }) => {
-      const { error } = await supabase
-        .from('admin_settings')
-        .update({ 
-          setting_value: value,
-          updated_by: user?.id,
-          updated_at: new Date().toISOString()
-        })
-        .eq('setting_key', key);
-      
-      if (error) throw error;
-    },
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['admin-settings'] });
-      setHasChanges(false);
-      toast({
-        title: "Settings Updated",
-        description: "Admin settings have been saved successfully.",
-      });
-    },
-    onError: (error: any) => {
-      toast({
-        title: "Error",
-        description: error.message || "Failed to update settings",
-        variant: "destructive",
-      });
-    }
-  });
 
   if (roleLoading || isLoading) {
     return (
@@ -89,38 +36,51 @@ export default function AdminSettings() {
     );
   }
 
-  if (!user || permissions?.role_level === 'user') {
+  if (!user || (!isAdmin() && !isModerator())) {
     return (
       <>
         <AdminHeader />
         <div className="container mx-auto px-4 py-8">
-          <div className="text-center">
+          <div className="text-center space-y-4">
             <h1 className="text-2xl font-bold mb-4">Access Denied</h1>
             <p className="text-muted-foreground">You don't have permission to access admin settings.</p>
+            {error && (
+              <div className="text-sm text-red-500 p-4 bg-red-50 rounded-md">
+                Error details: {error.message}
+              </div>
+            )}
           </div>
         </div>
       </>
     );
   }
 
-  const getSettingsByCategory = (category: string) => {
+  if (!settings || settings.length === 0) {
-    return settings?.filter(s => s.category === category) || [];
+    return (
-  };
+      <>
+        <AdminHeader />
+        <div className="container mx-auto px-4 py-8">
+          <div className="text-center space-y-4">
+            <h1 className="text-2xl font-bold mb-4">No Settings Found</h1>
+            <p className="text-muted-foreground">
+              No admin settings have been configured yet. Please contact your system administrator.
+            </p>
+            {error && (
+              <div className="text-sm text-red-500 p-4 bg-red-50 rounded-md">
+                Error details: {error.message}
+              </div>
+            )}
+          </div>
+        </div>
+      </>
+    );
+  }
 
-  const handleSettingChange = (key: string, value: any) => {
+  const SettingInput = ({ setting }: { setting: any }) => {
-    setHasChanges(true);
-    // You could implement local state management here for real-time updates
-  };
-
-  const handleSave = async (key: string, value: any) => {
-    await updateSettingMutation.mutateAsync({ key, value });
-  };
-
-  const SettingInput = ({ setting }: { setting: AdminSetting }) => {
     const [localValue, setLocalValue] = useState(setting.setting_value);
 
     const handleSubmit = async () => {
-      await handleSave(setting.setting_key, localValue);
+      await updateSetting(setting.setting_key, localValue);
     };
 
     // Auto-flagging threshold settings
@@ -139,7 +99,7 @@ export default function AdminSettings() {
               <Select value={localValue?.toString()} onValueChange={(value) => {
                 const numValue = parseInt(value);
                 setLocalValue(numValue);
-                handleSave(setting.setting_key, numValue);
+                updateSetting(setting.setting_key, numValue);
               }}>
                 <SelectTrigger className="w-32">
                   <SelectValue />
@@ -175,7 +135,7 @@ export default function AdminSettings() {
               <Select value={localValue?.toString()} onValueChange={(value) => {
                 const numValue = parseInt(value);
                 setLocalValue(numValue);
-                handleSave(setting.setting_key, numValue);
+                updateSetting(setting.setting_key, numValue);
               }}>
                 <SelectTrigger className="w-40">
                   <SelectValue />
@@ -209,7 +169,7 @@ export default function AdminSettings() {
       };
 
       const saveBanDurations = () => {
-        handleSave(setting.setting_key, banDurations);
+        updateSetting(setting.setting_key, banDurations);
       };
 
       return (
@@ -281,7 +241,7 @@ export default function AdminSettings() {
               </div>
             </div>
 
-            <Button onClick={saveBanDurations} disabled={updateSettingMutation.isPending} className="w-full">
+            <Button onClick={saveBanDurations} disabled={isUpdating} className="w-full">
               <Save className="w-4 h-4 mr-2" />
               Save Ban Duration Settings
             </Button>
@@ -327,7 +287,7 @@ export default function AdminSettings() {
                 checked={localValue === true || localValue === 'true'}
                 onCheckedChange={(checked) => {
                   setLocalValue(checked);
-                  handleSave(setting.setting_key, checked);
+                  updateSetting(setting.setting_key, checked);
                 }}
               />
             </div>
@@ -360,7 +320,7 @@ export default function AdminSettings() {
                   className="w-24"
                   min="0"
                 />
-                <Button onClick={handleSubmit} disabled={updateSettingMutation.isPending} size="sm">
+                <Button onClick={handleSubmit} disabled={isUpdating} size="sm">
                   <Save className="w-4 h-4" />
                 </Button>
               </div>
@@ -387,7 +347,7 @@ export default function AdminSettings() {
               }}
               className="flex-1"
             />
-            <Button onClick={handleSubmit} disabled={updateSettingMutation.isPending} size="sm">
+            <Button onClick={handleSubmit} disabled={isUpdating} size="sm">
               <Save className="w-4 h-4" />
             </Button>
           </div>