feat: Implement admin panel redesign plan

2025-12-23 11:51:14 -05:00 · 2025-10-06 12:10:08 +00:00
parent 065b1b4be5
commit 8e5fbba674
10 changed files with 662 additions and 60 deletions
--- a/src/pages/AdminDashboard.tsx
+++ b/src/pages/AdminDashboard.tsx
@@ -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>
+  );
+}