Update frontend to match new tested backend

frontend/src/lib/components/admin/BookingsCard.svelte

@@ -8,64 +8,11 @@
 	import * as Card from '$lib/components/ui/card';
 	import { Input } from '$lib/components/ui/input';
 	import { Skeleton } from '$lib/components/ui/skeleton';
+	import type { Booking } from '$lib/types/booking';
 
 	// Props
 	let { openBookingModal }: { openBookingModal: (bookingId: string) => void } = $props();
 
-	// Types
-	type Booking = {
-		id: string;
-		start_time: string;
-		status:
-			| 'pending'
-			| 'confirmed'
-			| 'in_progress'
-			| 'completed'
-			| 'client_cancelled'
-			| 'we_cancelled'
-			| 're-schedule'
-			| 'no_show';
-		notes?: string;
-		created_at: string;
-		updated_at: string;
-		created_by?: string;
-		user?: {
-			id: string;
-			full_name: string;
-		};
-		services: Array<{
-			booking_id: string;
-			service_id: string;
-			override_price?: number;
-			override_duration_minutes?: number;
-			service_name?: string;
-			service_description?: string;
-			price?: number;
-			duration_minutes?: number;
-		}>;
-		payments: Array<{
-			id: string;
-			booking_id: string;
-			payment_type: 'deposit' | 'full' | 'tip' | 'balance' | 'partial';
-			payment_method: 'online_square' | 'in_person_card' | 'cash' | 'giftcard' | 'discount';
-			vendor_code?: string;
-			invoice_number?: number;
-			status: 'pending' | 'completed' | 'failed' | 'refunded';
-			amount: number;
-			is_vat_applicable: boolean;
-			vat_rate?: number;
-			vat_amount?: number;
-			net_amount?: number;
-			created_at: string;
-			updated_at: string;
-			created_by?: string;
-		}>;
-		total_amount: number;
-		amount_paid: number;
-		amount_due: number;
-		duration_minutes: number;
-	};
-
 	// State
 	let bookings = $state<Booking[]>([]);
 	let totalBookings = $state(0);
@@ -99,7 +46,7 @@
 			});
 			if (response.ok) {
 				const data = await response.json();
-				
+
 				if (data.bookings && data.bookings.length === 0) {
 					bookings = [];
 					totalBookings = 0;
@@ -110,28 +57,9 @@
 					return;
 				}
 
-				bookings = data.bookings.map((b: any) => ({
-					id: b.id,
-					start_time: b.start_time,
-					status: b.status,
-					notes: b.notes,
-					created_at: b.created_at,
-					updated_at: b.updated_at,
-					created_by: b.created_by,
-					user: b.user
-						? {
-								id: b.user.id,
-								full_name: b.user.full_name
-							}
-						: undefined,
-					services: b.services || [],
-					total_amount: b.total_amount || 0,
-					amount_paid: b.amount_paid || 0,
-					amount_due: b.amount_due || 0,
-					duration_minutes: b.duration_minutes || 0
-				}));
+				bookings = data.bookings as Booking[];
 				totalBookings = data.total || 0;
-				totalPages = data.totalPages || 1;
+				totalPages = data.total_pages || 1;
 				currentPage = data.page || 1;
 			} else {
 				const text = await response.text();
@@ -222,7 +150,7 @@
 
 	// Format services list
 	function formatServices(services: Booking['services']): string {
-		const serviceNames = services.map((s) => s.service_name || 'Unknown Service');
+		const serviceNames = services?.map((s) => s.service_name || 'Unknown Service') || [];
 		if (serviceNames.length === 0) return 'No services';
 		if (serviceNames.length === 1) return serviceNames[0];
 		if (serviceNames.length === 2) return serviceNames.join(' and ');
@@ -232,7 +160,7 @@
 	// Get status badge classes
 	function getStatusClasses(status: Booking['status']): string {
 		const baseClasses = 'inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium';
-		const statusMap = {
+		const statusMap: Record<string, string> = {
 			confirmed: 'bg-emerald-100 text-emerald-800',
 			pending: 'bg-amber-100 text-amber-800',
 			in_progress: 'bg-blue-100 text-blue-800',
@@ -240,13 +168,14 @@
 			client_cancelled: 'bg-red-100 text-red-800',
 			we_cancelled: 'bg-rose-100 text-rose-800',
 			're-schedule': 'bg-purple-100 text-purple-800',
-			no_show: 'bg-gray-100 text-gray-800'
+			no_show: 'bg-gray-100 text-gray-800',
+			no_deposit: 'bg-orange-100 text-orange-800'
 		};
 		return `${baseClasses} ${statusMap[status] || 'bg-gray-100 text-gray-800'}`;
 	}
 
 	function getStatusDotClasses(status: Booking['status']): string {
-		const statusMap = {
+		const statusMap: Record<string, string> = {
 			confirmed: 'bg-emerald-600',
 			pending: 'bg-amber-600',
 			in_progress: 'bg-blue-600',
@@ -254,7 +183,8 @@
 			client_cancelled: 'bg-red-600',
 			we_cancelled: 'bg-rose-600',
 			're-schedule': 'bg-purple-600',
-			no_show: 'bg-gray-600'
+			no_show: 'bg-gray-600',
+			no_deposit: 'bg-orange-600'
 		};
 		return `mr-1 h-1.5 w-1.5 rounded-full ${statusMap[status] || 'bg-gray-600'}`;
 	}