pacnpal/thrilltrack-explorer
1
0
Fork 0
mirror of https://github.com/pacnpal/thrilltrack-explorer.git synced 2025-12-23 04:11:14 -05:00
Code Issues Packages Projects Releases Wiki Activity

feat: Implement collapsible sidebar navigation

Browse Source
This commit is contained in:
gpt-engineer-app[bot]
2025-10-04 19:07:52 +00:00
parent 35f380bfb4
commit 58c28a37eb
9 changed files with 444 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

116
src/pages/AdminDashboard.tsx Normal file
View File

@@ -0,0 +1,116 @@
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>
);
}