feat: implement admin projects management dashboard

src/App.tsx

@@ -12,6 +12,8 @@ import Contact from "./features/Contact_And_Support/v1/Pages/Contact";
 import ViewEvent from "./features/Events/v1/Pages/ViewEvent";
 import LoginPage from "./features/Auth/v1/Pages/LoginPage";
 import SignUpPage from "./features/Auth/v1/Pages/SignUpPage";
+import ProjectDetailPage from "./features/Projects/pages/ProjectDetailPage";
+import AdminProjectsPage from "./features/AdminProjects/pages/AdminProjectsPage";
 
 import { startAutoUpdater } from "./system/updater/autoUpdater";
 import ProtectedRoute from "./routes/ProtectedRoute";
@@ -62,6 +64,16 @@ function App() {
           <Route path="create-event" element={<CreateNewEvent />} />
           <Route path="contact" element={<Contact />} />
 
+          {/* Admin Specific Routes */}
+          <Route
+            path="admin/projects"
+            element={
+              <ProtectedRoute user={user} allowedRoles={["Admin"]}>
+                <AdminProjectsPage />
+              </ProtectedRoute>
+            }
+          />
+
           <Route path="*" element={<div>404 Not Found</div>} />
         </Route>
 

src/features/AdminProjects/components/AnalyticsCards.tsx

@@ -0,0 +1,96 @@
+import React from 'react';
+import { ProjectAnalytics } from '../types/adminProjects.types';
+import { AreaChart, Area, ResponsiveContainer } from 'recharts';
+import { TrendingUp, TrendingDown, Users, CheckCircle2, XCircle, Clock, BarChart3, AlertTriangle } from 'lucide-react';
+import { cn } from '../../../lib/utils';
+
+interface AnalyticsCardsProps {
+  data: ProjectAnalytics | null;
+}
+
+const AnalyticsCards: React.FC<AnalyticsCardsProps> = ({ data }) => {
+  if (!data) return null;
+
+  const stats = [
+    { label: 'Total Projects', value: data.totalProjects, trend: '+12%', trendUp: true, icon: BarChart3, color: 'blue', data: data.trends.total },
+    { label: 'Submitted', value: data.submittedProjects, trend: '+5%', trendUp: true, icon: Users, color: 'indigo', data: data.trends.submitted },
+    { label: 'Approved', value: data.approvedProjects, trend: '+8%', trendUp: true, icon: CheckCircle2, color: 'emerald', data: data.trends.approved },
+    { label: 'Pending', value: data.pendingReviews, trend: '+24%', trendUp: false, icon: Clock, color: 'amber', data: data.trends.pending },
+    { label: 'Rejected', value: data.rejectedProjects, trend: '-2%', trendUp: false, icon: XCircle, color: 'rose', data: data.trends.rejected },
+    { label: 'Avg Score', value: `${data.averageScore}/10`, trend: '+0.4', trendUp: true, icon: TrendingUp, color: 'violet', data: data.trends.total.map(v => v * 0.1) },
+    { label: 'Flagged', value: data.flaggedProjects, trend: '+2', trendUp: false, icon: AlertTriangle, color: 'orange', data: data.trends.rejected },
+  ];
+
+  const colorMap: Record<string, string> = {
+    blue: 'from-blue-500/20 to-transparent text-blue-500',
+    indigo: 'from-indigo-500/20 to-transparent text-indigo-500',
+    emerald: 'from-emerald-500/20 to-transparent text-emerald-500',
+    amber: 'from-amber-500/20 to-transparent text-amber-500',
+    rose: 'from-rose-500/20 to-transparent text-rose-500',
+    violet: 'from-violet-500/20 to-transparent text-violet-500',
+    orange: 'from-orange-500/20 to-transparent text-orange-500',
+  };
+
+  const chartColorMap: Record<string, string> = {
+    blue: '#3b82f6',
+    indigo: '#6366f1',
+    emerald: '#10b881',
+    amber: '#f59e0b',
+    rose: '#f43f5e',
+    violet: '#8b5cf6',
+    orange: '#f97316',
+  };
+
+  return (
+    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 xl:grid-cols-7 gap-4 mb-8">
+      {stats.map((stat, i) => (
+        <div
+          key={i}
+          className="group relative bg-slate-900/50 border border-slate-800/60 rounded-2xl p-4 overflow-hidden transition-all hover:border-slate-700 hover:shadow-2xl hover:shadow-blue-500/5"
+        >
+          <div className="flex justify-between items-start mb-2">
+            <div className={cn("p-2 rounded-lg bg-slate-800/50", stat.color.includes('rose') ? 'text-rose-500' : stat.color.includes('amber') ? 'text-amber-500' : 'text-slate-400')}>
+              <stat.icon className="w-4 h-4" />
+            </div>
+            <div className={cn(
+              "flex items-center gap-1 text-[10px] font-bold px-1.5 py-0.5 rounded-full",
+              stat.trendUp ? "bg-emerald-500/10 text-emerald-500" : "bg-rose-500/10 text-rose-500"
+            )}>
+              {stat.trendUp ? <TrendingUp className="w-3 h-3" /> : <TrendingDown className="w-3 h-3" />}
+              {stat.trend}
+            </div>
+          </div>
+
+          <div>
+            <p className="text-[11px] font-medium text-slate-500 uppercase tracking-wider">{stat.label}</p>
+            <h4 className="text-xl font-bold text-white mt-0.5">{stat.value}</h4>
+          </div>
+
+          {/* Mini Chart */}
+          <div className="absolute bottom-0 left-0 right-0 h-10 opacity-50 group-hover:opacity-80 transition-opacity">
+            <ResponsiveContainer width="100%" height="100%">
+              <AreaChart data={stat.data.map((v, i) => ({ v }))}>
+                <defs>
+                  <linearGradient id={`grad-${i}`} x1="0" y1="0" x2="0" y2="1">
+                    <stop offset="0%" stopColor={chartColorMap[stat.color]} stopOpacity={0.4} />
+                    <stop offset="100%" stopColor={chartColorMap[stat.color]} stopOpacity={0} />
+                  </linearGradient>
+                </defs>
+                <Area
+                  type="monotone"
+                  dataKey="v"
+                  stroke={chartColorMap[stat.color]}
+                  strokeWidth={2}
+                  fill={`url(#grad-${i})`}
+                  isAnimationActive={true}
+                />
+              </AreaChart>
+            </ResponsiveContainer>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default AnalyticsCards;

src/features/AdminProjects/components/AssignJudgeModal.tsx

@@ -0,0 +1,150 @@
+import React, { useState } from 'react';
+import { X, Search, Check, Info } from 'lucide-react';
+import { ProjectJudge } from '../types/adminProjects.types';
+import { cn } from '../../../lib/utils';
+
+interface AssignJudgeModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  judges: ProjectJudge[];
+  onAssign: (judgeIds: string[]) => void;
+  projectName: string;
+}
+
+const AssignJudgeModal: React.FC<AssignJudgeModalProps> = ({ isOpen, onClose, judges, onAssign, projectName }) => {
+  const [selectedIds, setSelectedIds] = useState<string[]>([]);
+  const [search, setSearch] = useState('');
+  const [activeTrack, setActiveTrack] = useState('All Tracks');
+
+  if (!isOpen) return null;
+
+  const toggleJudge = (id: string) => {
+    setSelectedIds(prev => 
+      prev.includes(id) ? prev.filter(i => i !== id) : [...prev, id]
+    );
+  };
+
+  const filteredJudges = judges.filter(j => {
+    const matchesSearch = j.name.toLowerCase().includes(search.toLowerCase()) || 
+      j.expertise.some(e => e.toLowerCase().includes(search.toLowerCase()));
+
+    const matchesTrack = activeTrack === 'All Tracks' || 
+      j.expertise.some(e => e.toLowerCase() === activeTrack.toLowerCase()) ||
+      (activeTrack === 'AI/ML' && j.expertise.some(e => ['ai', 'ml', 'neural nets'].includes(e.toLowerCase())));
+
+    return matchesSearch && matchesTrack;
+  });
+
+  return (
+    <div className="fixed inset-0 z-[100] flex items-center justify-center p-4">
+      <div className="absolute inset-0 bg-black/60 backdrop-blur-sm" onClick={onClose} />
+
+      <div className="relative w-full max-w-lg bg-slate-900 border border-slate-800 rounded-3xl shadow-2xl overflow-hidden animate-in zoom-in-95 duration-200">
+        <div className="p-6 border-b border-slate-800 flex justify-between items-start">
+          <div>
+            <h3 className="text-xl font-bold text-white mb-1">Assign Judges</h3>
+            <p className="text-sm text-slate-400">Project: <span className="text-blue-400">{projectName}</span></p>
+          </div>
+          <button onClick={onClose} className="p-2 hover:bg-slate-800 rounded-full text-slate-400 hover:text-white transition-colors">
+            <X className="w-5 h-5" />
+          </button>
+        </div>
+
+        <div className="p-6 space-y-6">
+          <div className="relative group">
+            <Search className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-500 group-focus-within:text-blue-500 transition-colors" />
+            <input
+              type="text"
+              placeholder="Search by name, expertise, or track..."
+              className="w-full bg-slate-800/50 border border-slate-800 text-white pl-12 pr-4 py-3 rounded-2xl focus:outline-none focus:border-blue-500 transition-all"
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+            />
+          </div>
+
+          <div className="flex gap-2">
+             {['All Tracks', 'AI/ML', 'Cybersecurity'].map((tag) => (
+               <button 
+                key={tag}
+                onClick={() => setActiveTrack(tag)}
+                className={cn(
+                  "px-3 py-1.5 rounded-full text-xs font-medium border transition-all",
+                  tag === activeTrack ? "bg-blue-500/10 border-blue-500/30 text-blue-400" : "bg-slate-800 border-slate-700 text-slate-400 hover:text-slate-200"
+                )}
+               >
+                 {tag}
+               </button>
+             ))}
+          </div>
+
+          <div className="space-y-1">
+            <p className="text-[10px] font-bold text-slate-500 uppercase tracking-widest mb-3">Recommended Judges ({filteredJudges.length})</p>
+            <div className="space-y-3 max-h-[300px] overflow-y-auto pr-2 custom-scrollbar">
+              {filteredJudges.map((judge) => (
+                <div
+                  key={judge.id}
+                  onClick={() => toggleJudge(judge.id)}
+                  className={cn(
+                    "group relative flex items-center gap-4 p-4 rounded-2xl border transition-all cursor-pointer",
+                    selectedIds.includes(judge.id) 
+                      ? "bg-blue-500/5 border-blue-500/30 ring-1 ring-blue-500/30" 
+                      : "bg-slate-800/30 border-slate-800 hover:border-slate-700"
+                  )}
+                >
+                  <div className="relative">
+                    <img src={`https://i.pravatar.cc/150?u=${judge.id}`} className="w-10 h-10 rounded-xl object-cover" alt="" />
+                    <div className="absolute -bottom-1 -right-1 w-3 h-3 bg-emerald-500 border-2 border-slate-900 rounded-full" />
+                  </div>
+
+                  <div className="flex-1">
+                    <div className="flex justify-between items-start">
+                      <h4 className="text-sm font-semibold text-white">{judge.name}</h4>
+                      <span className="text-[10px] font-bold text-emerald-400 bg-emerald-500/10 px-1.5 py-0.5 rounded-md">
+                        {judge.matchPercentage}% Match
+                      </span>
+                    </div>
+                    <p className="text-xs text-slate-500 mt-0.5">{judge.role}</p>
+                    <div className="flex gap-2 mt-2">
+                      {judge.expertise.map(e => (
+                        <span key={e} className="text-[9px] bg-slate-800 text-slate-400 px-1.5 py-0.5 rounded uppercase font-bold tracking-tighter">
+                          {e}
+                        </span>
+                      ))}
+                    </div>
+                  </div>
+
+                  <div className={cn(
+                    "w-5 h-5 rounded-full border flex items-center justify-center transition-all",
+                    selectedIds.includes(judge.id) ? "bg-blue-600 border-blue-600 text-white" : "border-slate-700 group-hover:border-slate-500"
+                  )}>
+                    {selectedIds.includes(judge.id) && <Check className="w-3 h-3" />}
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+
+        <div className="p-6 border-t border-slate-800 bg-slate-800/30 flex items-center justify-between">
+          <p className="text-xs text-slate-400 font-medium">
+            <span className="text-white font-bold">{selectedIds.length}</span> judge{selectedIds.length !== 1 ? 's' : ''} selected
+          </p>
+          <div className="flex gap-3">
+            <button onClick={onClose} className="px-5 py-2.5 text-slate-400 hover:text-white font-medium transition-colors">
+              Cancel
+            </button>
+            <button
+              onClick={() => onAssign(selectedIds)}
+              disabled={selectedIds.length === 0}
+              className="px-6 py-2.5 bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-500 hover:to-indigo-500 disabled:opacity-50 disabled:cursor-not-allowed text-white rounded-xl font-bold transition-all shadow-lg shadow-blue-500/20 active:scale-95"
+            >
+              Assign Selected
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AssignJudgeModal;

src/features/AdminProjects/components/BulkActionBar.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import { CheckCircle, XCircle, UserPlus, Trash2, Download, X } from 'lucide-react';
+
+interface BulkActionBarProps {
+  selectedCount: number;
+  onClear: () => void;
+  onApprove: () => void;
+  onReject: () => void;
+  onAssignJudges: () => void;
+  onDelete: () => void;
+}
+
+const BulkActionBar: React.FC<BulkActionBarProps> = ({
+  selectedCount,
+  onClear,
+  onApprove,
+  onReject,
+  onAssignJudges,
+  onDelete
+}) => {
+  if (selectedCount === 0) return null;
+
+  return (
+    <div className="fixed bottom-8 left-1/2 -translate-x-1/2 z-50 animate-in fade-in slide-in-from-bottom-4 duration-300">
+      <div className="bg-slate-900 border border-slate-800 shadow-2xl rounded-2xl px-6 py-4 flex items-center gap-6 min-w-[500px]">
+        <div className="flex items-center gap-3 pr-6 border-r border-slate-800">
+          <div className="w-8 h-8 bg-blue-600 rounded-full flex items-center justify-center text-white font-bold text-sm">
+            {selectedCount}
+          </div>
+          <span className="text-slate-300 font-medium whitespace-nowrap">Projects Selected</span>
+          <button onClick={onClear} className="p-1 hover:bg-slate-800 rounded-lg text-slate-500 hover:text-white transition-all">
+            <X className="w-4 h-4" />
+          </button>
+        </div>
+
+        <div className="flex items-center gap-2">
+          <button
+            onClick={onAssignJudges}
+            className="flex items-center gap-2 px-4 py-2 hover:bg-slate-800 text-slate-300 hover:text-white rounded-xl transition-all text-sm font-medium"
+          >
+            <UserPlus className="w-4 h-4" />
+            Assign Judge
+          </button>
+
+          <button
+            onClick={onApprove}
+            className="flex items-center gap-2 px-4 py-2 bg-emerald-500/10 hover:bg-emerald-500/20 text-emerald-500 rounded-xl transition-all text-sm font-medium border border-emerald-500/20"
+          >
+            <CheckCircle className="w-4 h-4" />
+            Bulk Approve
+          </button>
+
+          <button
+            onClick={onReject}
+            className="flex items-center gap-2 px-4 py-2 hover:bg-slate-800 text-slate-300 hover:text-white rounded-xl transition-all text-sm font-medium"
+          >
+            <XCircle className="w-4 h-4" />
+            Bulk Reject
+          </button>
+
+          <div className="w-[1px] h-6 bg-slate-800 mx-2" />
+
+          <button
+            className="p-2 hover:bg-slate-800 text-slate-400 hover:text-white rounded-lg transition-all"
+            title="Export CSV"
+          >
+            <Download className="w-5 h-5" />
+          </button>
+
+          <button
+            onClick={onDelete}
+            className="p-2 hover:bg-rose-500/10 text-slate-400 hover:text-rose-500 rounded-lg transition-all"
+            title="Delete Selected"
+          >
+            <Trash2 className="w-5 h-5" />
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default BulkActionBar;