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,126 @@
+'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, MapPin } from 'lucide-react';
+import { format } from 'date-fns';
+
+interface Booking {
+	id: string;
+	date: string;
+	startTime: string;
+	endTime: string;
+	status: string;
+	notes?: string;
+	createdAt: Date;
+	court: {
+		id: string;
+		name: string;
+	};
+	user: {
+		id: string;
+		name: string;
+		surname: string;
+		email: string;
+	};
+}
+
+export function RecentBookings() {
+	const [bookings, setBookings] = useState<Booking[]>([]);
+	const [loading, setLoading] = useState(true);
+
+	useEffect(() => {
+		fetchRecentBookings();
+	}, []);
+
+	const fetchRecentBookings = async () => {
+		try {
+			setLoading(true);
+			const response = await fetch('/api/dashboard/recent-bookings');
+			if (response.ok) {
+				const data = await response.json();
+				setBookings(data.bookings || []);
+			}
+		} catch (error) {
+			console.error('Error fetching recent bookings:', error);
+		} finally {
+			setLoading(false);
+		}
+	};
+
+	const formatDate = (dateStr: string) => {
+		try {
+			const date = new Date(dateStr);
+			return format(date, 'MMM dd');
+		} catch {
+			return dateStr;
+		}
+	};
+
+	if (loading) {
+		return (
+			<Card>
+				<CardHeader className='pb-3'>
+					<CardTitle className='text-base'>Recent Bookings</CardTitle>
+				</CardHeader>
+				<CardContent>
+					<div className='space-y-3'>
+						{[1, 2, 3].map((i) => (
+							<div key={i} className='animate-pulse'>
+								<div className='h-4 bg-gray-200 rounded w-3/4 mb-2'></div>
+								<div className='h-3 bg-gray-200 rounded w-1/2'></div>
+							</div>
+						))}
+					</div>
+				</CardContent>
+			</Card>
+		);
+	}
+
+	return (
+		<Card>
+			<CardHeader className='pb-3'>
+				<CardTitle className='text-base'>Recent Bookings</CardTitle>
+			</CardHeader>
+			<CardContent>
+				{bookings.length === 0 ? (
+					<div className='text-sm text-gray-500 text-center py-6'>
+						No recent bookings yet. Make your first booking!
+					</div>
+				) : (
+					<div className='space-y-3'>
+						{bookings.map((booking) => (
+							<div key={booking.id} className='border rounded-lg p-3 space-y-2'>
+								<div className='flex items-center justify-between'>
+									<div className='flex items-center gap-2'>
+										<MapPin className='h-4 w-4 text-blue-600' />
+										<span className='font-medium text-sm'>{booking.court.name}</span>
+									</div>
+									<Badge variant={booking.status === 'active' ? 'default' : 'secondary'}>
+										{booking.status}
+									</Badge>
+								</div>
+
+								<div className='flex items-center gap-4 text-xs text-gray-500'>
+									<div className='flex items-center gap-1'>
+										<Calendar className='h-3 w-3' />
+										<span>{formatDate(booking.date)}</span>
+									</div>
+									<div className='flex items-center gap-1'>
+										<Clock className='h-3 w-3' />
+										<span>
+											{booking.startTime} - {booking.endTime}
+										</span>
+									</div>
+								</div>
+
+								{booking.notes && <p className='text-xs text-gray-600 italic'>{booking.notes}</p>}
+							</div>
+						))}
+					</div>
+				)}
+			</CardContent>
+		</Card>
+	);
+}