mirror of
https://github.com/pacnpal/thrilltrack-explorer.git
synced 2025-12-24 05:31:13 -05:00
feat: Implement admin panel redesign plan
This commit is contained in:
gpt-engineer-app[bot]
156
src/pages/AdminDashboard.tsx
Normal file
156
src/pages/AdminDashboard.tsx
Normal file
@@ -0,0 +1,156 @@
|
||||
import { useRef, useEffect, useCallback, useState } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { FileText, Flag, AlertCircle } from 'lucide-react';
|
||||
import { useUserRole } from '@/hooks/useUserRole';
|
||||
import { useAuth } from '@/hooks/useAuth';
|
||||
import { Card, CardContent } from '@/components/ui/card';
|
||||
import { AdminLayout } from '@/components/layout/AdminLayout';
|
||||
import { useModerationStats } from '@/hooks/useModerationStats';
|
||||
import { useAdminSettings } from '@/hooks/useAdminSettings';
|
||||
|
||||
export default function AdminDashboard() {
|
||||
const { user, loading: authLoading } = useAuth();
|
||||
const { isModerator, loading: roleLoading } = useUserRole();
|
||||
const navigate = useNavigate();
|
||||
const [isRefreshing, setIsRefreshing] = useState(false);
|
||||
|
||||
const {
|
||||
getAdminPanelRefreshMode,
|
||||
getAdminPanelPollInterval,
|
||||
} = useAdminSettings();
|
||||
|
||||
const refreshMode = getAdminPanelRefreshMode();
|
||||
const pollInterval = getAdminPanelPollInterval();
|
||||
|
||||
const { stats, refresh: refreshStats, lastUpdated } = useModerationStats({
|
||||
enabled: !!user && !authLoading && !roleLoading && isModerator(),
|
||||
pollingEnabled: refreshMode === 'auto',
|
||||
pollingInterval: pollInterval,
|
||||
});
|
||||
|
||||
const handleRefresh = useCallback(async () => {
|
||||
setIsRefreshing(true);
|
||||
await refreshStats();
|
||||
setTimeout(() => setIsRefreshing(false), 500);
|
||||
}, [refreshStats]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!authLoading && !roleLoading) {
|
||||
if (!user) {
|
||||
navigate('/auth');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!isModerator()) {
|
||||
navigate('/');
|
||||
return;
|
||||
}
|
||||
}
|
||||
}, [user, authLoading, roleLoading, navigate, isModerator]);
|
||||
|
||||
if (authLoading || roleLoading) {
|
||||
return (
|
||||
<div className="container mx-auto px-4 py-8">
|
||||
<div className="flex items-center justify-center min-h-[400px]">
|
||||
<div className="text-center">
|
||||
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto mb-4"></div>
|
||||
<p className="text-muted-foreground">Loading admin panel...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!user || !isModerator()) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const statCards = [
|
||||
{
|
||||
label: 'Pending Submissions',
|
||||
value: stats.pendingSubmissions,
|
||||
icon: FileText,
|
||||
color: 'amber',
|
||||
link: '/admin/moderation',
|
||||
},
|
||||
{
|
||||
label: 'Open Reports',
|
||||
value: stats.openReports,
|
||||
icon: Flag,
|
||||
color: 'red',
|
||||
link: '/admin/reports',
|
||||
},
|
||||
{
|
||||
label: 'Flagged Content',
|
||||
value: stats.flaggedContent,
|
||||
icon: AlertCircle,
|
||||
color: 'orange',
|
||||
link: '/admin/moderation',
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<AdminLayout
|
||||
onRefresh={handleRefresh}
|
||||
refreshMode={refreshMode}
|
||||
pollInterval={pollInterval}
|
||||
lastUpdated={lastUpdated}
|
||||
isRefreshing={isRefreshing}
|
||||
>
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold tracking-tight">Admin Dashboard</h1>
|
||||
<p className="text-muted-foreground mt-1">
|
||||
Overview of moderation activity and pending items
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
{statCards.map((card) => {
|
||||
const Icon = card.icon;
|
||||
const colorClasses = {
|
||||
amber: {
|
||||
card: 'hover:border-amber-500/50',
|
||||
bg: 'bg-amber-500/10',
|
||||
icon: 'text-amber-600 dark:text-amber-400',
|
||||
},
|
||||
red: {
|
||||
card: 'hover:border-red-500/50',
|
||||
bg: 'bg-red-500/10',
|
||||
icon: 'text-red-600 dark:text-red-400',
|
||||
},
|
||||
orange: {
|
||||
card: 'hover:border-orange-500/50',
|
||||
bg: 'bg-orange-500/10',
|
||||
icon: 'text-orange-600 dark:text-orange-400',
|
||||
},
|
||||
};
|
||||
const colors = colorClasses[card.color as keyof typeof colorClasses];
|
||||
|
||||
return (
|
||||
<Card
|
||||
key={card.label}
|
||||
className={`${colors.card} transition-colors cursor-pointer`}
|
||||
onClick={() => navigate(card.link)}
|
||||
>
|
||||
<CardContent className="flex items-center justify-between p-6">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className={`p-3 ${colors.bg} rounded-lg`}>
|
||||
<Icon className={`w-5 h-5 ${colors.icon}`} />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-medium text-muted-foreground">
|
||||
{card.label}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-4xl font-bold">{card.value}</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</AdminLayout>
|
||||
);
|
||||
}
|
||||
85
src/pages/AdminModeration.tsx
Normal file
85
src/pages/AdminModeration.tsx
Normal file
@@ -0,0 +1,85 @@
|
||||
import { useRef, useEffect, useCallback } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { useUserRole } from '@/hooks/useUserRole';
|
||||
import { useAuth } from '@/hooks/useAuth';
|
||||
import { AdminLayout } from '@/components/layout/AdminLayout';
|
||||
import { ModerationQueue, ModerationQueueRef } from '@/components/moderation/ModerationQueue';
|
||||
import { useAdminSettings } from '@/hooks/useAdminSettings';
|
||||
import { useModerationStats } from '@/hooks/useModerationStats';
|
||||
|
||||
export default function AdminModeration() {
|
||||
const { user, loading: authLoading } = useAuth();
|
||||
const { isModerator, loading: roleLoading } = useUserRole();
|
||||
const navigate = useNavigate();
|
||||
const moderationQueueRef = useRef<ModerationQueueRef>(null);
|
||||
|
||||
const {
|
||||
getAdminPanelRefreshMode,
|
||||
getAdminPanelPollInterval,
|
||||
} = useAdminSettings();
|
||||
|
||||
const refreshMode = getAdminPanelRefreshMode();
|
||||
const pollInterval = getAdminPanelPollInterval();
|
||||
|
||||
const { refresh: refreshStats, lastUpdated } = useModerationStats({
|
||||
enabled: !!user && !authLoading && !roleLoading && isModerator(),
|
||||
pollingEnabled: refreshMode === 'auto',
|
||||
pollingInterval: pollInterval,
|
||||
});
|
||||
|
||||
const handleRefresh = useCallback(() => {
|
||||
moderationQueueRef.current?.refresh();
|
||||
refreshStats();
|
||||
}, [refreshStats]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!authLoading && !roleLoading) {
|
||||
if (!user) {
|
||||
navigate('/auth');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!isModerator()) {
|
||||
navigate('/');
|
||||
return;
|
||||
}
|
||||
}
|
||||
}, [user, authLoading, roleLoading, navigate, isModerator]);
|
||||
|
||||
if (authLoading || roleLoading) {
|
||||
return (
|
||||
<div className="container mx-auto px-4 py-8">
|
||||
<div className="flex items-center justify-center min-h-[400px]">
|
||||
<div className="text-center">
|
||||
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto mb-4"></div>
|
||||
<p className="text-muted-foreground">Loading moderation queue...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!user || !isModerator()) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<AdminLayout
|
||||
onRefresh={handleRefresh}
|
||||
refreshMode={refreshMode}
|
||||
pollInterval={pollInterval}
|
||||
lastUpdated={lastUpdated}
|
||||
>
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold tracking-tight">Moderation Queue</h1>
|
||||
<p className="text-muted-foreground mt-1">
|
||||
Review and manage pending content submissions
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<ModerationQueue ref={moderationQueueRef} />
|
||||
</div>
|
||||
</AdminLayout>
|
||||
);
|
||||
}
|
||||
85
src/pages/AdminReports.tsx
Normal file
85
src/pages/AdminReports.tsx
Normal file
@@ -0,0 +1,85 @@
|
||||
import { useRef, useEffect, useCallback } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { useUserRole } from '@/hooks/useUserRole';
|
||||
import { useAuth } from '@/hooks/useAuth';
|
||||
import { AdminLayout } from '@/components/layout/AdminLayout';
|
||||
import { ReportsQueue, ReportsQueueRef } from '@/components/moderation/ReportsQueue';
|
||||
import { useAdminSettings } from '@/hooks/useAdminSettings';
|
||||
import { useModerationStats } from '@/hooks/useModerationStats';
|
||||
|
||||
export default function AdminReports() {
|
||||
const { user, loading: authLoading } = useAuth();
|
||||
const { isModerator, loading: roleLoading } = useUserRole();
|
||||
const navigate = useNavigate();
|
||||
const reportsQueueRef = useRef<ReportsQueueRef>(null);
|
||||
|
||||
const {
|
||||
getAdminPanelRefreshMode,
|
||||
getAdminPanelPollInterval,
|
||||
} = useAdminSettings();
|
||||
|
||||
const refreshMode = getAdminPanelRefreshMode();
|
||||
const pollInterval = getAdminPanelPollInterval();
|
||||
|
||||
const { refresh: refreshStats, lastUpdated } = useModerationStats({
|
||||
enabled: !!user && !authLoading && !roleLoading && isModerator(),
|
||||
pollingEnabled: refreshMode === 'auto',
|
||||
pollingInterval: pollInterval,
|
||||
});
|
||||
|
||||
const handleRefresh = useCallback(() => {
|
||||
reportsQueueRef.current?.refresh();
|
||||
refreshStats();
|
||||
}, [refreshStats]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!authLoading && !roleLoading) {
|
||||
if (!user) {
|
||||
navigate('/auth');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!isModerator()) {
|
||||
navigate('/');
|
||||
return;
|
||||
}
|
||||
}
|
||||
}, [user, authLoading, roleLoading, navigate, isModerator]);
|
||||
|
||||
if (authLoading || roleLoading) {
|
||||
return (
|
||||
<div className="container mx-auto px-4 py-8">
|
||||
<div className="flex items-center justify-center min-h-[400px]">
|
||||
<div className="text-center">
|
||||
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto mb-4"></div>
|
||||
<p className="text-muted-foreground">Loading reports...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!user || !isModerator()) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<AdminLayout
|
||||
onRefresh={handleRefresh}
|
||||
refreshMode={refreshMode}
|
||||
pollInterval={pollInterval}
|
||||
lastUpdated={lastUpdated}
|
||||
>
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold tracking-tight">User Reports</h1>
|
||||
<p className="text-muted-foreground mt-1">
|
||||
Review and resolve user-submitted reports
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<ReportsQueue ref={reportsQueueRef} />
|
||||
</div>
|
||||
</AdminLayout>
|
||||
);
|
||||
}
|
||||
@@ -7,7 +7,7 @@ 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 { AdminHeader } from '@/components/layout/AdminHeader';
|
||||
import { AdminLayout } from '@/components/layout/AdminLayout';
|
||||
import { useAuth } from '@/hooks/useAuth';
|
||||
import { useUserRole } from '@/hooks/useUserRole';
|
||||
import { useAdminSettings } from '@/hooks/useAdminSettings';
|
||||
@@ -28,52 +28,45 @@ export default function AdminSettings() {
|
||||
|
||||
if (roleLoading || isLoading) {
|
||||
return (
|
||||
<>
|
||||
<AdminHeader />
|
||||
<div className="flex items-center justify-center min-h-screen">
|
||||
<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 (
|
||||
<>
|
||||
<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">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>
|
||||
<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 (
|
||||
<>
|
||||
<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>
|
||||
<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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -431,13 +424,12 @@ export default function AdminSettings() {
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<AdminHeader />
|
||||
<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 with easy-to-use controls
|
||||
<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>
|
||||
|
||||
@@ -598,6 +590,6 @@ export default function AdminSettings() {
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
</>
|
||||
</AdminLayout>
|
||||
);
|
||||
}
|
||||
58
src/pages/AdminUsers.tsx
Normal file
58
src/pages/AdminUsers.tsx
Normal file
@@ -0,0 +1,58 @@
|
||||
import { useEffect } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { useUserRole } from '@/hooks/useUserRole';
|
||||
import { useAuth } from '@/hooks/useAuth';
|
||||
import { AdminLayout } from '@/components/layout/AdminLayout';
|
||||
import { UserManagement } from '@/components/admin/UserManagement';
|
||||
|
||||
export default function AdminUsers() {
|
||||
const { user, loading: authLoading } = useAuth();
|
||||
const { isModerator, loading: roleLoading } = useUserRole();
|
||||
const navigate = useNavigate();
|
||||
|
||||
useEffect(() => {
|
||||
if (!authLoading && !roleLoading) {
|
||||
if (!user) {
|
||||
navigate('/auth');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!isModerator()) {
|
||||
navigate('/');
|
||||
return;
|
||||
}
|
||||
}
|
||||
}, [user, authLoading, roleLoading, navigate, isModerator]);
|
||||
|
||||
if (authLoading || roleLoading) {
|
||||
return (
|
||||
<div className="container mx-auto px-4 py-8">
|
||||
<div className="flex items-center justify-center min-h-[400px]">
|
||||
<div className="text-center">
|
||||
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto mb-4"></div>
|
||||
<p className="text-muted-foreground">Loading user management...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!user || !isModerator()) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<AdminLayout>
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold tracking-tight">User Management</h1>
|
||||
<p className="text-muted-foreground mt-1">
|
||||
Manage user profiles, roles, and permissions
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<UserManagement />
|
||||
</div>
|
||||
</AdminLayout>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user