additional features, refinement and more control over the app from admin side, better bookings UX

components/admin/admin-dashboard.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
@@ -15,14 +15,52 @@ import { AdminCourtManagement } from './AdminCourtManagement';
 import { AdminSettingsManagement } from './AdminSettingsManagement';
 import { AdminTimeSlotManagement } from './AdminTimeSlotManagement';
 
+interface AdminStats {
+	totalUsers: number;
+	activeCourts: number;
+	todaysBookings: number;
+	monthlyBookings: number;
+}
+
+interface RecentBooking {
+	id: string;
+	date: string;
+	startTime: string;
+	endTime: string;
+	courtName: string;
+	userName: string;
+	status: string;
+}
+
 export function AdminDashboard() {
 	const router = useRouter();
-	const [stats] = useState({
-		totalUsers: 125,
-		todayBookings: 18,
-		totalCourts: 2,
-		weeklyRevenue: 850,
+	const [stats, setStats] = useState<AdminStats>({
+		totalUsers: 0,
+		activeCourts: 0,
+		todaysBookings: 0,
+		monthlyBookings: 0,
 	});
+	const [recentBookings, setRecentBookings] = useState<RecentBooking[]>([]);
+	const [loading, setLoading] = useState(true);
+
+	useEffect(() => {
+		fetchStats();
+	}, []);
+
+	const fetchStats = async () => {
+		try {
+			const response = await fetch('/api/admin/stats');
+			if (response.ok) {
+				const data = await response.json();
+				setStats(data.stats);
+				setRecentBookings(data.recentBookings);
+			}
+		} catch (error) {
+			console.error('Error fetching admin stats:', error);
+		} finally {
+			setLoading(false);
+		}
+	};
 
 	const handleLogout = async () => {
 		try {
@@ -68,19 +106,8 @@ export function AdminDashboard() {
 							<Users className='h-4 w-4 text-muted-foreground' />
 						</CardHeader>
 						<CardContent>
-							<div className='text-2xl font-bold'>{stats.totalUsers}</div>
-							<p className='text-xs text-muted-foreground'>+12% from last month</p>
-						</CardContent>
-					</Card>
-
-					<Card>
-						<CardHeader className='flex flex-row items-center justify-between space-y-0 pb-2'>
-							<CardTitle className='text-sm font-medium'>Today's Bookings</CardTitle>
-							<Calendar className='h-4 w-4 text-muted-foreground' />
-						</CardHeader>
-						<CardContent>
-							<div className='text-2xl font-bold'>{stats.todayBookings}</div>
-							<p className='text-xs text-muted-foreground'>+5% from yesterday</p>
+							<div className='text-2xl font-bold'>{loading ? '...' : stats.totalUsers}</div>
+							<p className='text-xs text-muted-foreground'>Registered users</p>
 						</CardContent>
 					</Card>
 
@@ -90,19 +117,30 @@ export function AdminDashboard() {
 							<MapPin className='h-4 w-4 text-muted-foreground' />
 						</CardHeader>
 						<CardContent>
-							<div className='text-2xl font-bold'>{stats.totalCourts}</div>
-							<p className='text-xs text-muted-foreground'>All courts operational</p>
+							<div className='text-2xl font-bold'>{loading ? '...' : stats.activeCourts}</div>
+							<p className='text-xs text-muted-foreground'>Available for booking</p>
 						</CardContent>
 					</Card>
 
 					<Card>
 						<CardHeader className='flex flex-row items-center justify-between space-y-0 pb-2'>
-							<CardTitle className='text-sm font-medium'>Weekly Revenue</CardTitle>
+							<CardTitle className='text-sm font-medium'>Today's Bookings</CardTitle>
+							<Calendar className='h-4 w-4 text-muted-foreground' />
+						</CardHeader>
+						<CardContent>
+							<div className='text-2xl font-bold'>{loading ? '...' : stats.todaysBookings}</div>
+							<p className='text-xs text-muted-foreground'>Bookings for today</p>
+						</CardContent>
+					</Card>
+
+					<Card>
+						<CardHeader className='flex flex-row items-center justify-between space-y-0 pb-2'>
+							<CardTitle className='text-sm font-medium'>Monthly Bookings</CardTitle>
 							<BarChart3 className='h-4 w-4 text-muted-foreground' />
 						</CardHeader>
 						<CardContent>
-							<div className='text-2xl font-bold'>${stats.weeklyRevenue}</div>
-							<p className='text-xs text-muted-foreground'>+8% from last week</p>
+							<div className='text-2xl font-bold'>{loading ? '...' : stats.monthlyBookings}</div>
+							<p className='text-xs text-muted-foreground'>This month's total</p>
 						</CardContent>
 					</Card>
 				</div>
@@ -127,7 +165,7 @@ export function AdminDashboard() {
 						<AdminCourtManagement />
 					</TabsContent>{' '}
 					<TabsContent value='settings'>
-						<div className="space-y-6">
+						<div className='space-y-6'>
 							<AdminSettingsManagement />
 							<AdminTimeSlotManagement />
 						</div>