mirror of
https://github.com/pacnpal/thrilltrack-explorer.git
synced 2025-12-20 09:31:13 -05:00
604 lines
25 KiB
TypeScript
604 lines
25 KiB
TypeScript
import { useState } from 'react';
|
|
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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import { AdminLayout } from '@/components/layout/AdminLayout';
|
|
import { useAuth } from '@/hooks/useAuth';
|
|
import { useUserRole } from '@/hooks/useUserRole';
|
|
import { useAdminSettings } from '@/hooks/useAdminSettings';
|
|
import { NovuMigrationUtility } from '@/components/admin/NovuMigrationUtility';
|
|
import { TestDataGenerator } from '@/components/admin/TestDataGenerator';
|
|
import { Loader2, Save, Clock, Users, Bell, Shield, Settings, Trash2, Plug, AlertTriangle, Lock } from 'lucide-react';
|
|
|
|
export default function AdminSettings() {
|
|
const { user } = useAuth();
|
|
const { isSuperuser, loading: roleLoading } = useUserRole();
|
|
const {
|
|
settings,
|
|
isLoading,
|
|
error,
|
|
updateSetting,
|
|
isUpdating,
|
|
getSettingsByCategory
|
|
} = useAdminSettings();
|
|
|
|
if (roleLoading || isLoading) {
|
|
return (
|
|
<AdminLayout>
|
|
<div className="flex items-center justify-center min-h-[400px]">
|
|
<Loader2 className="w-8 h-8 animate-spin" />
|
|
</div>
|
|
</AdminLayout>
|
|
);
|
|
}
|
|
|
|
if (!user || !isSuperuser()) {
|
|
return (
|
|
<AdminLayout>
|
|
<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>
|
|
</AdminLayout>
|
|
);
|
|
}
|
|
|
|
if (!settings || settings.length === 0) {
|
|
return (
|
|
<AdminLayout>
|
|
<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>
|
|
</AdminLayout>
|
|
);
|
|
}
|
|
|
|
const SettingInput = ({ setting }: { setting: any }) => {
|
|
const [localValue, setLocalValue] = useState(setting.setting_value);
|
|
|
|
const handleSubmit = async () => {
|
|
await updateSetting(setting.setting_key, localValue);
|
|
};
|
|
|
|
// Auto-flagging threshold settings
|
|
if (setting.setting_key === 'moderation.auto_flag_threshold') {
|
|
return (
|
|
<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);
|
|
updateSetting(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>
|
|
);
|
|
}
|
|
|
|
// Review retention settings
|
|
if (setting.setting_key === 'moderation.review_retention_days') {
|
|
return (
|
|
<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);
|
|
updateSetting(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 = () => {
|
|
updateSetting(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={isUpdating} className="w-full">
|
|
<Save className="w-4 h-4 mr-2" />
|
|
Save Ban Duration Settings
|
|
</Button>
|
|
</div>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
// Admin panel refresh mode setting
|
|
if (setting.setting_key === 'system.admin_panel_refresh_mode') {
|
|
return (
|
|
<Card className="p-4">
|
|
<div className="space-y-4">
|
|
<div className="flex items-center gap-2">
|
|
<Settings className="w-4 h-4 text-blue-500" />
|
|
<Label className="text-base font-medium">Admin Panel Refresh Mode</Label>
|
|
</div>
|
|
<p className="text-sm text-muted-foreground">
|
|
Choose how the admin panel statistics refresh
|
|
</p>
|
|
<div className="flex items-center gap-4">
|
|
<Select
|
|
value={typeof localValue === 'string' ? localValue.replace(/"/g, '') : localValue}
|
|
onValueChange={(value) => {
|
|
setLocalValue(value);
|
|
updateSetting(setting.setting_key, JSON.stringify(value));
|
|
}}
|
|
>
|
|
<SelectTrigger className="w-48">
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="manual">Manual Only</SelectItem>
|
|
<SelectItem value="auto">Auto-refresh</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
<Badge variant="outline">
|
|
Current: {(typeof localValue === 'string' ? localValue.replace(/"/g, '') : localValue) === 'auto' ? 'Auto-refresh' : 'Manual'}
|
|
</Badge>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
// Admin panel poll interval setting
|
|
if (setting.setting_key === 'system.admin_panel_poll_interval') {
|
|
return (
|
|
<Card className="p-4">
|
|
<div className="space-y-4">
|
|
<div className="flex items-center gap-2">
|
|
<Clock className="w-4 h-4 text-green-500" />
|
|
<Label className="text-base font-medium">Auto-refresh Interval</Label>
|
|
</div>
|
|
<p className="text-sm text-muted-foreground">
|
|
How often to automatically refresh admin panel statistics (when auto-refresh is enabled)
|
|
</p>
|
|
<div className="flex items-center gap-4">
|
|
<Select value={localValue?.toString()} onValueChange={(value) => {
|
|
const numValue = parseInt(value);
|
|
setLocalValue(numValue);
|
|
updateSetting(setting.setting_key, numValue);
|
|
}}>
|
|
<SelectTrigger className="w-40">
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="10">10 seconds</SelectItem>
|
|
<SelectItem value="30">30 seconds</SelectItem>
|
|
<SelectItem value="60">1 minute</SelectItem>
|
|
<SelectItem value="120">2 minutes</SelectItem>
|
|
<SelectItem value="300">5 minutes</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
<Badge variant="outline">Current: {localValue}s</Badge>
|
|
</div>
|
|
</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) => {
|
|
setLocalValue(checked);
|
|
updateSetting(setting.setting_key, checked);
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
// Numeric threshold settings
|
|
if (setting.setting_key.includes('threshold') || setting.setting_key.includes('limit') || setting.setting_key.includes('max_')) {
|
|
return (
|
|
<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) => {
|
|
const value = parseInt(e.target.value) || 0;
|
|
setLocalValue(value);
|
|
}}
|
|
className="w-24"
|
|
min="0"
|
|
/>
|
|
<Button onClick={handleSubmit} disabled={isUpdating} size="sm">
|
|
<Save className="w-4 h-4" />
|
|
</Button>
|
|
</div>
|
|
<Badge variant="outline">Current: {localValue}</Badge>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
// Default string input
|
|
return (
|
|
<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
|
|
value={localValue}
|
|
onChange={(e) => {
|
|
setLocalValue(e.target.value);
|
|
}}
|
|
className="flex-1"
|
|
/>
|
|
<Button onClick={handleSubmit} disabled={isUpdating} size="sm">
|
|
<Save className="w-4 h-4" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<AdminLayout>
|
|
<div className="space-y-6 max-w-4xl">
|
|
<div>
|
|
<h1 className="text-2xl font-bold tracking-tight">Admin Settings</h1>
|
|
<p className="text-muted-foreground mt-1">
|
|
Configure system-wide settings and preferences
|
|
</p>
|
|
</div>
|
|
|
|
<Tabs defaultValue="moderation" className="space-y-6">
|
|
<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>
|
|
</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>
|
|
<TabsTrigger value="integrations" className="flex items-center gap-2">
|
|
<Plug className="w-4 h-4" />
|
|
<span className="hidden sm:inline">Integrations</span>
|
|
</TabsTrigger>
|
|
<TabsTrigger value="testing" className="flex items-center gap-2">
|
|
<Loader2 className="w-4 h-4" />
|
|
<span className="hidden sm:inline">Testing</span>
|
|
</TabsTrigger>
|
|
</TabsList>
|
|
|
|
<TabsContent value="moderation">
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2">
|
|
<Shield className="w-5 h-5" />
|
|
Moderation Settings
|
|
</CardTitle>
|
|
<CardDescription>
|
|
Configure content moderation rules, thresholds, and automated actions
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<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>
|
|
|
|
<TabsContent value="user_management">
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2">
|
|
<Users className="w-5 h-5" />
|
|
User Management
|
|
</CardTitle>
|
|
<CardDescription>
|
|
Configure user registration, profile settings, and account policies
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<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>
|
|
|
|
<TabsContent value="notifications">
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2">
|
|
<Bell className="w-5 h-5" />
|
|
Notification Settings
|
|
</CardTitle>
|
|
<CardDescription>
|
|
Configure email alerts, push notifications, and communication preferences
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<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>
|
|
|
|
<TabsContent value="system">
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2">
|
|
<Settings className="w-5 h-5" />
|
|
System Configuration
|
|
</CardTitle>
|
|
<CardDescription>
|
|
Configure system-wide settings, maintenance options, and technical parameters
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<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>
|
|
|
|
<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>
|
|
)}
|
|
|
|
<NovuMigrationUtility />
|
|
</CardContent>
|
|
</Card>
|
|
</TabsContent>
|
|
|
|
<TabsContent value="testing">
|
|
<TestDataGenerator />
|
|
</TabsContent>
|
|
</Tabs>
|
|
</div>
|
|
</AdminLayout>
|
|
);
|
|
} |