theming, date, time localisation, additional features, seeding initial cleanup

components/dashboard/RecentBookings.tsx

@@ -85,16 +85,16 @@ export function RecentBookings() {
 			</CardHeader>
 			<CardContent>
 				{bookings.length === 0 ? (
-					<div className='text-sm text-gray-500 text-center py-6'>
+					<div className='text-sm text-muted-foreground 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 key={booking.id} className='border border-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' />
+										<MapPin className='h-4 w-4 text-primary' />
 										<span className='font-medium text-sm'>{booking.court.name}</span>
 									</div>
 									<Badge variant={booking.status === 'active' ? 'default' : 'secondary'}>
@@ -102,7 +102,7 @@ export function RecentBookings() {
 									</Badge>
 								</div>
 
-								<div className='flex items-center gap-4 text-xs text-gray-500'>
+								<div className='flex items-center gap-4 text-xs text-muted-foreground'>
 									<div className='flex items-center gap-1'>
 										<Calendar className='h-3 w-3' />
 										<span>{formatDate(booking.date)}</span>
@@ -115,7 +115,9 @@ export function RecentBookings() {
 									</div>
 								</div>
 
-								{booking.notes && <p className='text-xs text-gray-600 italic'>{booking.notes}</p>}
+								{booking.notes && (
+									<p className='text-xs text-muted-foreground italic'>{booking.notes}</p>
+								)}
 							</div>
 						))}
 					</div>