initial version of the app

2025-09-21 17:11:02 +01:00
commit c8062cf96b
101 changed files with 23061 additions and 0 deletions
@@ -0,0 +1,135 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Calendar, Clock, Users, MapPin, TrendingUp, Activity } from 'lucide-react';
+
+interface DashboardStats {
+	totalUsers: number;
+	todayBookings: number;
+	activeCourts: number;
+	userBookings: number;
+	upcomingBookings: number;
+}
+
+export function QuickStats() {
+	const [stats, setStats] = useState<DashboardStats>({
+		totalUsers: 0,
+		todayBookings: 0,
+		activeCourts: 0,
+		userBookings: 0,
+		upcomingBookings: 0,
+	});
+	const [loading, setLoading] = useState(true);
+
+	useEffect(() => {
+		fetchStats();
+	}, []);
+
+	const fetchStats = async () => {
+		try {
+			setLoading(true);
+			const response = await fetch('/api/dashboard/stats');
+			if (response.ok) {
+				const data = await response.json();
+				setStats(data.stats);
+			}
+		} catch (error) {
+			console.error('Error fetching dashboard stats:', error);
+		} finally {
+			setLoading(false);
+		}
+	};
+
+	if (loading) {
+		return (
+			<div className='space-y-4'>
+				<Card>
+					<CardContent className='p-6'>
+						<div className='animate-pulse'>
+							<div className='h-4 bg-gray-200 rounded w-3/4 mb-4'></div>
+							<div className='space-y-3'>
+								{[1, 2, 3, 4].map((i) => (
+									<div key={i} className='flex justify-between'>
+										<div className='h-3 bg-gray-200 rounded w-1/2'></div>
+										<div className='h-3 bg-gray-200 rounded w-1/4'></div>
+									</div>
+								))}
+							</div>
+						</div>
+					</CardContent>
+				</Card>
+			</div>
+		);
+	}
+
+	return (
+		<div className='space-y-4'>
+			<Card>
+				<CardHeader className='pb-3'>
+					<CardTitle className='text-base'>Quick Stats</CardTitle>
+				</CardHeader>
+				<CardContent className='space-y-4'>
+					<div className='flex items-center justify-between'>
+						<div className='flex items-center gap-2'>
+							<Calendar className='h-4 w-4 text-blue-600' />
+							<span className='text-sm'>Your Bookings</span>
+						</div>
+						<Badge variant='secondary'>{stats.userBookings} active</Badge>
+					</div>
+
+					<div className='flex items-center justify-between'>
+						<div className='flex items-center gap-2'>
+							<Clock className='h-4 w-4 text-green-600' />
+							<span className='text-sm'>Upcoming</span>
+						</div>
+						<Badge variant='secondary'>{stats.upcomingBookings} bookings</Badge>
+					</div>
+
+					<div className='flex items-center justify-between'>
+						<div className='flex items-center gap-2'>
+							<MapPin className='h-4 w-4 text-purple-600' />
+							<span className='text-sm'>Active Courts</span>
+						</div>
+						<Badge variant='secondary'>{stats.activeCourts} available</Badge>
+					</div>
+
+					<div className='flex items-center justify-between'>
+						<div className='flex items-center gap-2'>
+							<Activity className='h-4 w-4 text-orange-600' />
+							<span className='text-sm'>Today\'s Bookings</span>
+						</div>
+						<Badge variant='secondary'>{stats.todayBookings} total</Badge>
+					</div>
+				</CardContent>
+			</Card>
+
+			<Card>
+				<CardHeader className='pb-3'>
+					<CardTitle className='text-base'>System Info</CardTitle>
+				</CardHeader>
+				<CardContent className='space-y-3'>
+					<div className='flex items-center justify-between'>
+						<div className='flex items-center gap-2'>
+							<Users className='h-4 w-4 text-gray-600' />
+							<span className='text-sm'>Total Users</span>
+						</div>
+						<Badge variant='outline'>{stats.totalUsers}</Badge>
+					</div>
+
+					<div className='flex items-center justify-between'>
+						<div className='flex items-center gap-2'>
+							<TrendingUp className='h-4 w-4 text-green-600' />
+							<span className='text-sm'>System Status</span>
+						</div>
+						<div className='flex items-center gap-2'>
+							<div className='h-2 w-2 bg-green-500 rounded-full' />
+							<span className='text-xs text-green-600'>Online</span>
+						</div>
+					</div>
+				</CardContent>
+			</Card>
+		</div>
+	);
+}