pacnpal/thrilltrack-explorer
1
0
Fork 0
mirror of https://github.com/pacnpal/thrilltrack-explorer.git synced 2025-12-24 17:51:13 -05:00
Code Issues Packages Projects Releases Wiki Activity

Reverted to commit 095907b3a5

Browse Source
This commit is contained in:
gpt-engineer-app[bot]
2025-10-04 19:16:36 +00:00
parent 58c28a37eb
commit 065b1b4be5
15 changed files with 257 additions and 680 deletions
Download Patch File Download Diff File Expand all files Collapse all files

183
src/pages/Admin.tsx
View File

@@ -79,118 +79,109 @@ export default function Admin() {
return (
<>
<AdminHeader onRefresh={handleRefresh} />
<div className="container mx-auto px-4 py-8 max-w-7xl">
{/* Refresh status indicator - subtle */}
<div className="flex items-center gap-2 text-xs text-muted-foreground mb-6">
<RefreshCw className="w-3 h-3" />
{refreshMode === 'auto' ? (
<span>Auto-refresh: every {pollInterval / 1000}s</span>
) : (
<span>Manual refresh</span>
)}
{lastUpdated && (
<span>• {lastUpdated.toLocaleTimeString()}</span>
)}
<div className="container mx-auto px-4 py-8">
<div className="space-y-4 mb-8">
{/* Refresh status indicator */}
<div className="flex items-center justify-between">
<div className="flex items-center gap-2 text-sm text-muted-foreground">
<RefreshCw className="w-4 h-4" />
{refreshMode === 'auto' ? (
<span>Auto-refresh: every {pollInterval / 1000}s</span>
) : (
<span>Manual refresh only</span>
)}
{lastUpdated && (
<span className="text-xs">
• Last updated: {lastUpdated.toLocaleTimeString()}
</span>
)}
</div>
</div>
{/* Stats cards - horizontal layout */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-12">
<Card className="border-border/50 hover:border-border/80 transition-colors">
<CardContent className="p-4">
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
<div className="p-2 rounded-lg bg-amber-500/10">
<FileText className="h-5 w-5 text-amber-700 dark:text-amber-300" />
</div>
<div>
<p className="text-sm font-medium text-muted-foreground">Pending</p>
<p className="text-xs text-muted-foreground/80">Submissions</p>
</div>
</div>
<div className="text-4xl font-bold text-amber-700 dark:text-amber-300">
{stats.pendingSubmissions}
</div>
{/* Stats cards */}
<div className="grid grid-cols-3 gap-3 md:gap-6">
<Card>
<CardHeader className="flex flex-col items-center justify-center space-y-0 pb-2 text-center">
<FileText className="h-4 w-4 text-muted-foreground mb-2" />
<CardTitle className="text-sm font-medium">Pending Submissions</CardTitle>
</CardHeader>
<CardContent className="text-center">
<div className="text-2xl font-bold">
{stats.pendingSubmissions}
</div>
</CardContent>
</Card>
<Card className="border-border/50 hover:border-border/80 transition-colors">
<CardContent className="p-4">
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
<div className="p-2 rounded-lg bg-red-500/10">
<Flag className="h-5 w-5 text-red-700 dark:text-red-300" />
</div>
<div>
<p className="text-sm font-medium text-muted-foreground">Open</p>
<p className="text-xs text-muted-foreground/80">Reports</p>
</div>
</div>
<div className="text-4xl font-bold text-red-700 dark:text-red-300">
{stats.openReports}
</div>
<Card>
<CardHeader className="flex flex-col items-center justify-center space-y-0 pb-2 text-center">
<Flag className="h-4 w-4 text-muted-foreground mb-2" />
<CardTitle className="text-sm font-medium">Open Reports</CardTitle>
</CardHeader>
<CardContent className="text-center">
<div className="text-2xl font-bold">
{stats.openReports}
</div>
</CardContent>
</Card>
<Card className="border-border/50 hover:border-border/80 transition-colors">
<CardContent className="p-4">
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
<div className="p-2 rounded-lg bg-orange-500/10">
<AlertCircle className="h-5 w-5 text-orange-700 dark:text-orange-300" />
</div>
<div>
<p className="text-sm font-medium text-muted-foreground">Flagged</p>
<p className="text-xs text-muted-foreground/80">Content</p>
</div>
</div>
<div className="text-4xl font-bold text-orange-700 dark:text-orange-300">
{stats.flaggedContent}
</div>
<Card>
<CardHeader className="flex flex-col items-center justify-center space-y-0 pb-2 text-center">
<AlertCircle className="h-4 w-4 text-muted-foreground mb-2" />
<CardTitle className="text-sm font-medium">Flagged Content</CardTitle>
</CardHeader>
<CardContent className="text-center">
<div className="text-2xl font-bold">
{stats.flaggedContent}
</div>
</CardContent>
</Card>
</div>
</div>
{/* Content Moderation Section - flatter design */}
<div className="space-y-8">
<div>
<h2 className="text-lg font-semibold mb-4 flex items-center gap-2">
<Shield className="w-5 h-5" />
Moderation Queue
</h2>
<Tabs defaultValue="queue" className="space-y-4">
<TabsList className="grid w-full grid-cols-2">
<TabsTrigger value="queue" className="flex items-center gap-2">
<FileText className="w-4 h-4" />
{isMobile ? 'Queue' : 'Moderation Queue'}
</TabsTrigger>
<TabsTrigger value="reports" className="flex items-center gap-2">
<Flag className="w-4 h-4" />
Reports
</TabsTrigger>
</TabsList>
<TabsContent value="queue" className="mt-4">
<ModerationQueue ref={moderationQueueRef} />
</TabsContent>
<TabsContent value="reports" className="mt-4">
<ReportsQueue ref={reportsQueueRef} />
</TabsContent>
</Tabs>
</div>
{/* Content Moderation Section */}
<Card className="mb-8">
<CardHeader>
<CardTitle className="flex items-center gap-2">
<Shield className="w-5 h-5" />
Moderation Queue
</CardTitle>
</CardHeader>
<CardContent>
<Tabs defaultValue="queue" className="space-y-6">
<TabsList className="grid w-full grid-cols-2">
<TabsTrigger value="queue" className="flex items-center gap-2">
<FileText className="w-4 h-4" />
{isMobile ? 'Queue' : 'Moderation Queue'}
</TabsTrigger>
<TabsTrigger value="reports" className="flex items-center gap-2">
<Flag className="w-4 h-4" />
Reports
</TabsTrigger>
</TabsList>
<TabsContent value="queue">
<ModerationQueue ref={moderationQueueRef} />
</TabsContent>
<TabsContent value="reports">
<ReportsQueue ref={reportsQueueRef} />
</TabsContent>
</Tabs>
</CardContent>
</Card>
{/* User Management Section - flatter design */}
<div>
<h2 className="text-lg font-semibold mb-4 flex items-center gap-2">
<Users className="w-5 h-5" />
User Management
</h2>
<UserManagement />
</div>
</div>
{/* User Management Section */}
<Card className="mb-8">
<CardHeader>
<CardTitle className="flex items-center gap-2">
<Users className="w-5 h-5" />
User Management
</CardTitle>
</CardHeader>
<CardContent>
<UserManagement />
</CardContent>
</Card>
</div>
</>
);

116
src/pages/AdminDashboard.tsx
View File

@@ -1,116 +0,0 @@
import { useRef, useCallback } from 'react';
import { RefreshCw, FileText, Flag, AlertCircle } from 'lucide-react';
import { Card, CardContent } from '@/components/ui/card';
import { AdminLayout } from '@/components/layout/AdminLayout';
import { useModerationStats } from '@/hooks/useModerationStats';
import { useAdminSettings } from '@/hooks/useAdminSettings';
import { useAuth } from '@/hooks/useAuth';
import { useUserRole } from '@/hooks/useUserRole';
export default function AdminDashboard() {
const { user, loading: authLoading } = useAuth();
const { isModerator, loading: roleLoading } = useUserRole();
// Get admin settings for polling configuration
const {
getAdminPanelRefreshMode,
getAdminPanelPollInterval,
} = useAdminSettings();
const refreshMode = getAdminPanelRefreshMode();
const pollInterval = getAdminPanelPollInterval();
// Use stats hook with configurable polling
const { stats, refresh: refreshStats, lastUpdated } = useModerationStats({
enabled: !!user && !authLoading && !roleLoading && isModerator(),
pollingEnabled: refreshMode === 'auto',
pollingInterval: pollInterval,
});
const handleRefresh = useCallback(() => {
refreshStats();
}, [refreshStats]);
return (
<AdminLayout onRefresh={handleRefresh}>
<div className="container mx-auto px-6 py-8 max-w-7xl">
{/* Refresh status indicator */}
<div className="flex items-center gap-2 text-xs text-muted-foreground mb-6">
<RefreshCw className="w-3 h-3" />
{refreshMode === 'auto' ? (
<span>Auto-refresh: every {pollInterval / 1000}s</span>
) : (
<span>Manual refresh</span>
)}
{lastUpdated && (
<span>• {lastUpdated.toLocaleTimeString()}</span>
)}
</div>
{/* Stats Overview */}
<div>
<h1 className="text-2xl font-bold mb-6">Dashboard Overview</h1>
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
<Card className="border-border/50 hover:border-border/80 transition-colors">
<CardContent className="p-4">
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
<div className="p-2 rounded-lg bg-amber-500/10">
<FileText className="h-5 w-5 text-amber-700 dark:text-amber-300" />
</div>
<div>
<p className="text-sm font-medium text-muted-foreground">Pending</p>
<p className="text-xs text-muted-foreground/80">Submissions</p>
</div>
</div>
<div className="text-4xl font-bold text-amber-700 dark:text-amber-300">
{stats.pendingSubmissions}
</div>
</div>
</CardContent>
</Card>
<Card className="border-border/50 hover:border-border/80 transition-colors">
<CardContent className="p-4">
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
<div className="p-2 rounded-lg bg-red-500/10">
<Flag className="h-5 w-5 text-red-700 dark:text-red-300" />
</div>
<div>
<p className="text-sm font-medium text-muted-foreground">Open</p>
<p className="text-xs text-muted-foreground/80">Reports</p>
</div>
</div>
<div className="text-4xl font-bold text-red-700 dark:text-red-300">
{stats.openReports}
</div>
</div>
</CardContent>
</Card>
<Card className="border-border/50 hover:border-border/80 transition-colors">
<CardContent className="p-4">
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
<div className="p-2 rounded-lg bg-orange-500/10">
<AlertCircle className="h-5 w-5 text-orange-700 dark:text-orange-300" />
</div>
<div>
<p className="text-sm font-medium text-muted-foreground">Flagged</p>
<p className="text-xs text-muted-foreground/80">Content</p>
</div>
</div>
<div className="text-4xl font-bold text-orange-700 dark:text-orange-300">
{stats.flaggedContent}
</div>
</div>
</CardContent>
</Card>
</div>
</div>
</div>
</AdminLayout>
);
}

22
src/pages/AdminModeration.tsx
View File

@@ -1,22 +0,0 @@
import { useRef, useCallback } from 'react';
import { AdminLayout } from '@/components/layout/AdminLayout';
import { ModerationQueue, ModerationQueueRef } from '@/components/moderation/ModerationQueue';
export default function AdminModeration() {
const moderationQueueRef = useRef<ModerationQueueRef>(null);
const handleRefresh = useCallback(() => {
moderationQueueRef.current?.refresh();
}, []);
return (
<AdminLayout onRefresh={handleRefresh}>
<div className="container mx-auto px-6 py-8 max-w-7xl">
<div>
<h1 className="text-2xl font-bold mb-6">Moderation Queue</h1>
<ModerationQueue ref={moderationQueueRef} />
</div>
</div>
</AdminLayout>
);
}

22
src/pages/AdminReports.tsx
View File

@@ -1,22 +0,0 @@
import { useRef, useCallback } from 'react';
import { AdminLayout } from '@/components/layout/AdminLayout';
import { ReportsQueue, ReportsQueueRef } from '@/components/moderation/ReportsQueue';
export default function AdminReports() {
const reportsQueueRef = useRef<ReportsQueueRef>(null);
const handleRefresh = useCallback(() => {
reportsQueueRef.current?.refresh();
}, []);
return (
<AdminLayout onRefresh={handleRefresh}>
<div className="container mx-auto px-6 py-8 max-w-7xl">
<div>
<h1 className="text-2xl font-bold mb-6">Reports Queue</h1>
<ReportsQueue ref={reportsQueueRef} />
</div>
</div>
</AdminLayout>
);
}

30
src/pages/AdminSettings.tsx
View File

@@ -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 { AdminLayout } from '@/components/layout/AdminLayout';
import { AdminHeader } from '@/components/layout/AdminHeader';
import { useAuth } from '@/hooks/useAuth';
import { useUserRole } from '@/hooks/useUserRole';
import { useAdminSettings } from '@/hooks/useAdminSettings';
@@ -28,18 +28,20 @@ export default function AdminSettings() {
if (roleLoading || isLoading) {
return (
<AdminLayout>
<>
<AdminHeader />
<div className="flex items-center justify-center min-h-screen">
<Loader2 className="w-8 h-8 animate-spin" />
</div>
</AdminLayout>
</>
);
}
if (!user || !isSuperuser()) {
return (
<AdminLayout>
<div className="container mx-auto px-6 py-8">
<>
<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>
@@ -50,14 +52,15 @@ export default function AdminSettings() {
)}
</div>
</div>
</AdminLayout>
</>
);
}
if (!settings || settings.length === 0) {
return (
<AdminLayout>
<div className="container mx-auto px-6 py-8">
<>
<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">
@@ -70,7 +73,7 @@ export default function AdminSettings() {
)}
</div>
</div>
</AdminLayout>
</>
);
}
@@ -428,10 +431,11 @@ export default function AdminSettings() {
};
return (
<AdminLayout>
<div className="container mx-auto px-6 py-8 max-w-6xl">
<>
<AdminHeader />
<div className="container mx-auto px-4 py-8 max-w-4xl">
<div className="mb-8">
<h1 className="text-2xl font-bold mb-2">Admin Settings</h1>
<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
</p>
@@ -594,6 +598,6 @@ export default function AdminSettings() {
</TabsContent>
</Tabs>
</div>
</AdminLayout>
</>
);
}

15
src/pages/AdminUsers.tsx
View File

@@ -1,15 +0,0 @@
import { AdminLayout } from '@/components/layout/AdminLayout';
import { UserManagement } from '@/components/admin/UserManagement';
export default function AdminUsers() {
return (
<AdminLayout>
<div className="container mx-auto px-6 py-8 max-w-7xl">
<div>
<h1 className="text-2xl font-bold mb-6">User Management</h1>
<UserManagement />
</div>
</div>
</AdminLayout>
);
}