Refactor Admin Settings UI

src/pages/AdminSettings.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useEffect } 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';
@@ -8,12 +8,14 @@ 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 { useToast } from '@/hooks/use-toast';
-import { Loader2, Save } from 'lucide-react';
+import { Loader2, Save, Clock, Users, Bell, Shield, Settings, Trash2, Plus, X } from 'lucide-react';
 
 interface AdminSetting {
   id: string;
@@ -121,34 +123,206 @@ export default function AdminSettings() {
       await handleSave(setting.setting_key, localValue);
     };
 
-    if (setting.setting_key.includes('threshold') || setting.setting_key.includes('retention_days')) {
+    // Auto-flagging threshold settings
+    if (setting.setting_key === 'moderation.auto_flag_threshold') {
       return (
-        <div className="space-y-2">
-          <Label htmlFor={setting.setting_key}>{setting.description}</Label>
-          <div className="flex gap-2">
-            <Input
-              id={setting.setting_key}
-              type="number"
-              value={localValue}
-              onChange={(e) => {
-                setLocalValue(parseInt(e.target.value));
-                handleSettingChange(setting.setting_key, parseInt(e.target.value));
-              }}
-            />
-            <Button onClick={handleSubmit} disabled={updateSettingMutation.isPending}>
-              <Save className="w-4 h-4" />
-            </Button>
+        <Card className="p-4">
+          <div className="space-y-4">
+            <div className="flex items-center gap-2">
+              <Shield className="w-4 h-4 text-orange-500" />
+              <Label className="text-base font-medium">Auto-Flag Content Threshold</Label>
+            </div>
+            <p className="text-sm text-muted-foreground">
+              Content will be automatically flagged for review after receiving this many reports
+            </p>
+            <div className="flex items-center gap-4">
+              <Select value={localValue?.toString()} onValueChange={(value) => {
+                const numValue = parseInt(value);
+                setLocalValue(numValue);
+                handleSave(setting.setting_key, numValue);
+              }}>
+                <SelectTrigger className="w-32">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="1">1 report</SelectItem>
+                  <SelectItem value="2">2 reports</SelectItem>
+                  <SelectItem value="3">3 reports</SelectItem>
+                  <SelectItem value="5">5 reports</SelectItem>
+                  <SelectItem value="10">10 reports</SelectItem>
+                </SelectContent>
+              </Select>
+              <Badge variant="outline">Current: {localValue} reports</Badge>
             </div>
           </div>
+        </Card>
       );
     }
 
-    if (setting.setting_key.includes('email_alerts') || setting.setting_key.includes('require_approval') || setting.setting_key.includes('auto_cleanup')) {
+    // Review retention settings
+    if (setting.setting_key === 'moderation.review_retention_days') {
       return (
-        <div className="flex items-center justify-between">
-          <div className="space-y-0.5">
-            <Label>{setting.description}</Label>
+        <Card className="p-4">
+          <div className="space-y-4">
+            <div className="flex items-center gap-2">
+              <Clock className="w-4 h-4 text-blue-500" />
+              <Label className="text-base font-medium">Review Data Retention</Label>
             </div>
+            <p className="text-sm text-muted-foreground">
+              How long to keep moderated content data before automatic cleanup
+            </p>
+            <div className="flex items-center gap-4">
+              <Select value={localValue?.toString()} onValueChange={(value) => {
+                const numValue = parseInt(value);
+                setLocalValue(numValue);
+                handleSave(setting.setting_key, numValue);
+              }}>
+                <SelectTrigger className="w-40">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="30">30 days</SelectItem>
+                  <SelectItem value="60">60 days</SelectItem>
+                  <SelectItem value="90">90 days</SelectItem>
+                  <SelectItem value="180">6 months</SelectItem>
+                  <SelectItem value="365">1 year</SelectItem>
+                  <SelectItem value="730">2 years</SelectItem>
+                </SelectContent>
+              </Select>
+              <Badge variant="outline">Current: {localValue} days</Badge>
+            </div>
+          </div>
+        </Card>
+      );
+    }
+
+    // Ban duration settings
+    if (setting.setting_key === 'moderation.ban_durations') {
+      const [banDurations, setBanDurations] = useState<{[key: string]: number}>(
+        typeof localValue === 'object' ? localValue : { temporary: 7, extended: 30, permanent: 0 }
+      );
+
+      const updateBanDuration = (type: string, days: number) => {
+        const updated = { ...banDurations, [type]: days };
+        setBanDurations(updated);
+        setLocalValue(updated);
+      };
+
+      const saveBanDurations = () => {
+        handleSave(setting.setting_key, banDurations);
+      };
+
+      return (
+        <Card className="p-4">
+          <div className="space-y-4">
+            <div className="flex items-center gap-2">
+              <Users className="w-4 h-4 text-red-500" />
+              <Label className="text-base font-medium">User Ban Duration Options</Label>
+            </div>
+            <p className="text-sm text-muted-foreground">
+              Configure the available ban duration options for moderators
+            </p>
+            
+            <div className="grid gap-4">
+              <div className="flex items-center justify-between p-3 border rounded-lg">
+                <div>
+                  <Label className="font-medium">Temporary Ban</Label>
+                  <p className="text-sm text-muted-foreground">Short-term restriction for minor violations</p>
+                </div>
+                <div className="flex items-center gap-2">
+                  <Select 
+                    value={banDurations.temporary?.toString()} 
+                    onValueChange={(value) => updateBanDuration('temporary', parseInt(value))}
+                  >
+                    <SelectTrigger className="w-32">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="1">1 day</SelectItem>
+                      <SelectItem value="3">3 days</SelectItem>
+                      <SelectItem value="7">7 days</SelectItem>
+                      <SelectItem value="14">14 days</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+              </div>
+
+              <div className="flex items-center justify-between p-3 border rounded-lg">
+                <div>
+                  <Label className="font-medium">Extended Ban</Label>
+                  <p className="text-sm text-muted-foreground">Longer restriction for serious violations</p>
+                </div>
+                <div className="flex items-center gap-2">
+                  <Select 
+                    value={banDurations.extended?.toString()} 
+                    onValueChange={(value) => updateBanDuration('extended', parseInt(value))}
+                  >
+                    <SelectTrigger className="w-32">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="30">30 days</SelectItem>
+                      <SelectItem value="60">60 days</SelectItem>
+                      <SelectItem value="90">90 days</SelectItem>
+                      <SelectItem value="180">6 months</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+              </div>
+
+              <div className="flex items-center justify-between p-3 border rounded-lg">
+                <div>
+                  <Label className="font-medium">Permanent Ban</Label>
+                  <p className="text-sm text-muted-foreground">Indefinite restriction for severe violations</p>
+                </div>
+                <div className="flex items-center gap-2">
+                  <Badge variant="destructive">Permanent</Badge>
+                </div>
+              </div>
+            </div>
+
+            <Button onClick={saveBanDurations} disabled={updateSettingMutation.isPending} className="w-full">
+              <Save className="w-4 h-4 mr-2" />
+              Save Ban Duration Settings
+            </Button>
+          </div>
+        </Card>
+      );
+    }
+
+    // Boolean/switch settings
+    if (setting.setting_key.includes('email_alerts') || 
+        setting.setting_key.includes('require_approval') || 
+        setting.setting_key.includes('auto_cleanup') ||
+        setting.setting_key.includes('enable_') ||
+        setting.setting_key.includes('allow_')) {
+      
+      const getSettingIcon = () => {
+        if (setting.setting_key.includes('email_alerts')) return <Bell className="w-4 h-4 text-blue-500" />;
+        if (setting.setting_key.includes('require_approval')) return <Shield className="w-4 h-4 text-orange-500" />;
+        if (setting.setting_key.includes('auto_cleanup')) return <Trash2 className="w-4 h-4 text-green-500" />;
+        return <Settings className="w-4 h-4 text-gray-500" />;
+      };
+
+      return (
+        <Card className="p-4">
+          <div className="flex items-center justify-between">
+            <div className="space-y-1">
+              <div className="flex items-center gap-2">
+                {getSettingIcon()}
+                <Label className="text-base font-medium">{setting.description}</Label>
+              </div>
+              <p className="text-sm text-muted-foreground">
+                {setting.setting_key.includes('email_alerts') && "Receive email notifications for this event"}
+                {setting.setting_key.includes('require_approval') && "Items must be manually approved before being published"}
+                {setting.setting_key.includes('auto_cleanup') && "Automatically remove old or rejected content"}
+                {(!setting.setting_key.includes('email_alerts') && !setting.setting_key.includes('require_approval') && !setting.setting_key.includes('auto_cleanup')) && "Toggle this feature on or off"}
+              </p>
+            </div>
+            <div className="flex items-center gap-3">
+              <Badge variant={localValue ? "default" : "secondary"}>
+                {localValue ? "Enabled" : "Disabled"}
+              </Badge>
               <Switch
                 checked={localValue === true || localValue === 'true'}
                 onCheckedChange={(checked) => {
@@ -157,87 +331,124 @@ export default function AdminSettings() {
                 }}
               />
             </div>
+          </div>
+        </Card>
       );
     }
 
-    if (setting.setting_key === 'moderation.ban_durations') {
+    // Numeric threshold settings
+    if (setting.setting_key.includes('threshold') || setting.setting_key.includes('limit') || setting.setting_key.includes('max_')) {
       return (
-        <div className="space-y-2">
-          <Label htmlFor={setting.setting_key}>{setting.description}</Label>
-          <div className="flex gap-2">
-            <Textarea
-              id={setting.setting_key}
-              value={JSON.stringify(localValue, null, 2)}
+        <Card className="p-4">
+          <div className="space-y-4">
+            <div className="flex items-center gap-2">
+              <Settings className="w-4 h-4 text-purple-500" />
+              <Label className="text-base font-medium">{setting.description}</Label>
+            </div>
+            <p className="text-sm text-muted-foreground">
+              Set the numeric limit for this system parameter
+            </p>
+            <div className="flex items-center gap-4">
+              <div className="flex items-center gap-2">
+                <Input
+                  type="number"
+                  value={localValue}
                   onChange={(e) => {
-                try {
-                  const parsed = JSON.parse(e.target.value);
-                  setLocalValue(parsed);
-                  handleSettingChange(setting.setting_key, parsed);
-                } catch (err) {
-                  // Invalid JSON, don't update
-                }
+                    const value = parseInt(e.target.value) || 0;
+                    setLocalValue(value);
                   }}
-              rows={4}
+                  className="w-24"
+                  min="0"
                 />
-            <Button onClick={handleSubmit} disabled={updateSettingMutation.isPending}>
+                <Button onClick={handleSubmit} disabled={updateSettingMutation.isPending} size="sm">
                   <Save className="w-4 h-4" />
                 </Button>
               </div>
+              <Badge variant="outline">Current: {localValue}</Badge>
             </div>
+          </div>
+        </Card>
       );
     }
 
+    // Default string input
     return (
-      <div className="space-y-2">
-        <Label htmlFor={setting.setting_key}>{setting.description}</Label>
-        <div className="flex gap-2">
+      <Card className="p-4">
+        <div className="space-y-4">
+          <div className="flex items-center gap-2">
+            <Settings className="w-4 h-4 text-gray-500" />
+            <Label className="text-base font-medium">{setting.description}</Label>
+          </div>
+          <div className="flex items-center gap-2">
             <Input
-            id={setting.setting_key}
               value={localValue}
               onChange={(e) => {
                 setLocalValue(e.target.value);
-              handleSettingChange(setting.setting_key, e.target.value);
               }}
+              className="flex-1"
             />
-          <Button onClick={handleSubmit} disabled={updateSettingMutation.isPending}>
+            <Button onClick={handleSubmit} disabled={updateSettingMutation.isPending} size="sm">
               <Save className="w-4 h-4" />
             </Button>
           </div>
         </div>
+      </Card>
     );
   };
 
   return (
     <>
       <AdminHeader />
-      <div className="container mx-auto px-4 py-8">
+      <div className="container mx-auto px-4 py-8 max-w-4xl">
         <div className="mb-8">
           <h1 className="text-3xl font-bold mb-2">Admin Settings</h1>
           <p className="text-muted-foreground">
-            Configure system-wide settings and preferences
+            Configure system-wide settings and preferences with easy-to-use controls
           </p>
         </div>
 
-        <Tabs defaultValue="moderation" className="space-y-4">
+        <Tabs defaultValue="moderation" className="space-y-6">
           <TabsList className="grid w-full grid-cols-4">
-            <TabsTrigger value="moderation">Moderation</TabsTrigger>
-            <TabsTrigger value="user_management">User Management</TabsTrigger>
-            <TabsTrigger value="notifications">Notifications</TabsTrigger>
-            <TabsTrigger value="system">System</TabsTrigger>
+            <TabsTrigger value="moderation" className="flex items-center gap-2">
+              <Shield className="w-4 h-4" />
+              <span className="hidden sm:inline">Moderation</span>
+            </TabsTrigger>
+            <TabsTrigger value="user_management" className="flex items-center gap-2">
+              <Users className="w-4 h-4" />
+              <span className="hidden sm:inline">Users</span>
+            </TabsTrigger>
+            <TabsTrigger value="notifications" className="flex items-center gap-2">
+              <Bell className="w-4 h-4" />
+              <span className="hidden sm:inline">Notifications</span>
+            </TabsTrigger>
+            <TabsTrigger value="system" className="flex items-center gap-2">
+              <Settings className="w-4 h-4" />
+              <span className="hidden sm:inline">System</span>
+            </TabsTrigger>
           </TabsList>
 
           <TabsContent value="moderation">
             <Card>
               <CardHeader>
-                <CardTitle>Moderation Settings</CardTitle>
+                <CardTitle className="flex items-center gap-2">
+                  <Shield className="w-5 h-5" />
+                  Moderation Settings
+                </CardTitle>
                 <CardDescription>
-                  Configure content moderation rules and thresholds
+                  Configure content moderation rules, thresholds, and automated actions
                 </CardDescription>
               </CardHeader>
-              <CardContent className="space-y-6">
-                {getSettingsByCategory('moderation').map((setting) => (
+              <CardContent className="space-y-4">
+                {getSettingsByCategory('moderation').length > 0 ? (
+                  getSettingsByCategory('moderation').map((setting) => (
                     <SettingInput key={setting.id} setting={setting} />
-                ))}
+                  ))
+                ) : (
+                  <div className="text-center py-8 text-muted-foreground">
+                    <Shield className="w-12 h-12 mx-auto mb-4 opacity-50" />
+                    <p>No moderation settings configured yet.</p>
+                  </div>
+                )}
               </CardContent>
             </Card>
           </TabsContent>
@@ -245,15 +456,25 @@ export default function AdminSettings() {
           <TabsContent value="user_management">
             <Card>
               <CardHeader>
-                <CardTitle>User Management</CardTitle>
+                <CardTitle className="flex items-center gap-2">
+                  <Users className="w-5 h-5" />
+                  User Management
+                </CardTitle>
                 <CardDescription>
-                  Configure user management policies and options
+                  Configure user registration, profile settings, and account policies
                 </CardDescription>
               </CardHeader>
-              <CardContent className="space-y-6">
-                {getSettingsByCategory('user_management').map((setting) => (
+              <CardContent className="space-y-4">
+                {getSettingsByCategory('user_management').length > 0 ? (
+                  getSettingsByCategory('user_management').map((setting) => (
                     <SettingInput key={setting.id} setting={setting} />
-                ))}
+                  ))
+                ) : (
+                  <div className="text-center py-8 text-muted-foreground">
+                    <Users className="w-12 h-12 mx-auto mb-4 opacity-50" />
+                    <p>No user management settings configured yet.</p>
+                  </div>
+                )}
               </CardContent>
             </Card>
           </TabsContent>
@@ -261,15 +482,25 @@ export default function AdminSettings() {
           <TabsContent value="notifications">
             <Card>
               <CardHeader>
-                <CardTitle>Notifications</CardTitle>
+                <CardTitle className="flex items-center gap-2">
+                  <Bell className="w-5 h-5" />
+                  Notification Settings
+                </CardTitle>
                 <CardDescription>
-                  Configure notification preferences and alert thresholds
+                  Configure email alerts, push notifications, and communication preferences
                 </CardDescription>
               </CardHeader>
-              <CardContent className="space-y-6">
-                {getSettingsByCategory('notifications').map((setting) => (
+              <CardContent className="space-y-4">
+                {getSettingsByCategory('notifications').length > 0 ? (
+                  getSettingsByCategory('notifications').map((setting) => (
                     <SettingInput key={setting.id} setting={setting} />
-                ))}
+                  ))
+                ) : (
+                  <div className="text-center py-8 text-muted-foreground">
+                    <Bell className="w-12 h-12 mx-auto mb-4 opacity-50" />
+                    <p>No notification settings configured yet.</p>
+                  </div>
+                )}
               </CardContent>
             </Card>
           </TabsContent>
@@ -277,15 +508,25 @@ export default function AdminSettings() {
           <TabsContent value="system">
             <Card>
               <CardHeader>
-                <CardTitle>System Configuration</CardTitle>
+                <CardTitle className="flex items-center gap-2">
+                  <Settings className="w-5 h-5" />
+                  System Configuration
+                </CardTitle>
                 <CardDescription>
-                  Configure system-wide settings and maintenance options
+                  Configure system-wide settings, maintenance options, and technical parameters
                 </CardDescription>
               </CardHeader>
-              <CardContent className="space-y-6">
-                {getSettingsByCategory('system').map((setting) => (
+              <CardContent className="space-y-4">
+                {getSettingsByCategory('system').length > 0 ? (
+                  getSettingsByCategory('system').map((setting) => (
                     <SettingInput key={setting.id} setting={setting} />
-                ))}
+                  ))
+                ) : (
+                  <div className="text-center py-8 text-muted-foreground">
+                    <Settings className="w-12 h-12 mx-auto mb-4 opacity-50" />
+                    <p>No system settings configured yet.</p>
+                  </div>
+                )}
               </CardContent>
             </Card>
           </TabsContent>