Update frontend to match new tested backend

frontend/src/lib/components/account/UserBookingModal.svelte

@@ -4,6 +4,7 @@
 	import { toast } from 'svelte-sonner';
 	import * as Modal from '$lib/components/ui/dialog';
 	import { Button } from '$lib/components/ui/button';
+	import type { Booking } from '$lib/types/booking';
 
 	interface Props {
 		open: boolean;
@@ -12,38 +13,6 @@
 
 	let { open = $bindable(), bookingId }: Props = $props();
 
-	type Booking = {
-		id: string;
-		start_time: string;
-		status: string;
-		notes?: string;
-		created_at: string;
-		updated_at: string;
-		services: Array<{
-			service_name?: string;
-			service_description?: string;
-			price?: number;
-			duration_minutes?: number;
-		}>;
-		payments: Array<{
-			id: string;
-			payment_type: string;
-			payment_method: string;
-			status: string;
-			amount: number;
-			created_at: string;
-			invoice_number?: number;
-			is_vat_applicable: boolean;
-			vat_amount?: number;
-			net_amount?: number;
-			vat_rate?: number;
-		}>;
-		total_amount: number;
-		amount_paid: number;
-		amount_due: number;
-		duration_minutes: number;
-	};
-
 	let selectedBooking = $state<Booking | null>(null);
 	let loading = $state(false);
 
@@ -66,7 +35,7 @@
 
 			if (response.ok) {
 				const data = await response.json();
-				selectedBooking = data;
+				selectedBooking = data as Booking;
 			} else {
 				const text = await response.text();
 				toast.error('Failed to load booking: ' + text);
@@ -169,6 +138,48 @@
 					</div>
 				</div>
 
+				<!-- Deposit Info -->
+				{#if selectedBooking.deposit_required}
+					<div class="rounded-lg border border-blue-200 bg-blue-50 p-4">
+						<h3 class="mb-3 text-sm font-semibold tracking-wide text-blue-800 uppercase">
+							Deposit Information
+						</h3>
+						<div class="grid gap-3 md:grid-cols-2">
+							<div>
+								<div class="text-xs text-blue-600">Deposit Amount</div>
+								<div class="font-semibold text-blue-900">
+									£{selectedBooking.deposit_amount?.toFixed(2) || '0.00'}
+								</div>
+							</div>
+							<div>
+								<div class="text-xs text-blue-600">Deposit Status</div>
+								<div class="font-semibold">
+									<span
+										class="{selectedBooking.deposit_paid
+											? 'bg-green-100 text-green-800'
+											: 'bg-red-100 text-red-800'} inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium"
+									>
+										{selectedBooking.deposit_paid ? 'Paid' : 'Outstanding'}
+									</span>
+								</div>
+							</div>
+							{#if selectedBooking.deposit_deadline && !selectedBooking.deposit_paid}
+								<div class="md:col-span-2">
+									<div class="text-xs text-blue-600">Deadline</div>
+									<div class="font-semibold text-blue-900">
+										{new SvelteDate(selectedBooking.deposit_deadline).toLocaleDateString('en-GB', {
+											weekday: 'long',
+											day: 'numeric',
+											month: 'long',
+											year: 'numeric'
+										})}
+									</div>
+								</div>
+							{/if}
+						</div>
+					</div>
+				{/if}
+
 				<!-- Services -->
 				{#if selectedBooking.services && selectedBooking.services.length > 0}
 					<div class="rounded-lg border border-gray-200 bg-gray-50 p-4">
@@ -281,11 +292,14 @@
 
 		<Modal.Footer class="flex items-center justify-end gap-2">
 			{#if selectedBooking}
-				<Button variant="outline" onclick={() => {
-					if (selectedBooking) {
-						window.open(`/api/bookings/${selectedBooking.id}/calendar`, '_blank');
-					}
-				}}>
+				<Button
+					variant="outline"
+					onclick={() => {
+						if (selectedBooking) {
+							window.open(`/api/bookings/${selectedBooking.id}/calendar`, '_blank');
+						}
+					}}
+				>
 					Add to Calendar
 				</Button>
 			{/if}