Set up the basic structure and functionality for the DJ management system

Initializes project structure, adds core components, and configures essential dependencies. Replit-Commit-Author: Agent Replit-Commit-Session-Id: 3a22ac80-cd1d-4441-9e36-f24fc2f4c3de Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/3478f7c3-db8c-4fca-9165-3adbdf1b5829/e8da43e7-d99c-4328-9fdc-485bdeecffc1.jpg
2025-07-09 23:54:32 +00:00
parent 2869d657c8
commit 89946fcef9
106 changed files with 20207 additions and 0 deletions
@@ -0,0 +1,90 @@
+import { useQuery } from "@tanstack/react-query";
+import { Card, CardContent } from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+import { PendingRequests } from "./PendingRequests";
+import { AssignmentTool } from "./AssignmentTool";
+
+export function AdminDashboard() {
+  const { data: stats, isLoading } = useQuery({
+    queryKey: ["/api/stats/admin"],
+  });
+
+  if (isLoading) {
+    return (
+      <div className="space-y-8">
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+          {[...Array(4)].map((_, i) => (
+            <Card key={i}>
+              <CardContent className="p-6">
+                <Skeleton className="h-20 w-full" />
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+          <Skeleton className="h-96" />
+          <Skeleton className="h-96" />
+        </div>
+      </div>
+    );
+  }
+
+  const statCards = [
+    {
+      title: "Total DJs",
+      value: stats?.totalDJs || 0,
+      icon: "fas fa-users",
+      color: "blue",
+    },
+    {
+      title: "Active Events",
+      value: stats?.activeEvents || 0,
+      icon: "fas fa-calendar-check",
+      color: "green",
+    },
+    {
+      title: "Pending Requests",
+      value: stats?.pendingRequests || 0,
+      icon: "fas fa-exclamation-triangle",
+      color: "yellow",
+    },
+    {
+      title: "This Month",
+      value: stats?.thisMonth || 0,
+      icon: "fas fa-chart-bar",
+      color: "purple",
+    },
+  ];
+
+  return (
+    <div className="space-y-8">
+      <div className="mb-8">
+        <h2 className="text-2xl font-bold text-slate-800 mb-2">Admin Dashboard</h2>
+        <p className="text-slate-600">Manage DJs, events, and system settings</p>
+      </div>
+      
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+        {statCards.map((stat) => (
+          <Card key={stat.title}>
+            <CardContent className="p-6">
+              <div className="flex items-center justify-between">
+                <div>
+                  <p className="text-sm font-medium text-slate-600">{stat.title}</p>
+                  <p className="text-2xl font-bold text-slate-800">{stat.value}</p>
+                </div>
+                <div className={`w-12 h-12 bg-${stat.color}-100 rounded-lg flex items-center justify-center`}>
+                  <i className={`${stat.icon} text-${stat.color}-600 w-6 h-6`}></i>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+      
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        <PendingRequests />
+        <AssignmentTool />
+      </div>
+    </div>
+  );
+}