refactor: admin booking modals with shared formatting and auto-select

Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent)

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>

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

@@ -74,7 +74,7 @@
 
 	// Step 4: Date & Time
 	let placeholder = $state<CalendarDate>(
-		new CalendarDate(new Date().getFullYear(), new Date().getMonth() + 1, new Date().getDate())
+		new CalendarDate(new SvelteDate().getFullYear(), new SvelteDate().getMonth() + 1, new SvelteDate().getDate())
 	);
 	let selectedDate = $state<CalendarDate | undefined>(undefined);
 	let selectedTime = $state<string | null>(null);

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

@@ -1,11 +1,11 @@
 <script lang="ts">
 	import { authStore } from '$lib/stores/auth.svelte';
-	import { SvelteDate } from 'svelte/reactivity';
 	import { toast } from 'svelte-sonner';
 	import * as Modal from '$lib/components/ui/dialog';
 	import { Button } from '$lib/components/ui/button';
 	import ApprovalModal from '$lib/components/admin/ApprovalModal.svelte';
 	import RescheduleModal from '$lib/components/admin/RescheduleModal.svelte';
+	import { formatDuration, formatDateTime, calculateAge } from '$lib/utils/format';
 	import type { Booking } from '$lib/types/booking';
 
 	interface Props {
@@ -52,6 +52,7 @@
 					created_at: data.created_at,
 					updated_at: data.updated_at,
 					created_by: data.created_by,
+					created_by_name: data.created_by_name,
 
 					// Deposit fields
 					deposit_required: data.deposit_required ?? false,
@@ -221,42 +222,27 @@
 						<div>
 							<div class="text-xs text-gray-500">Scheduled Date & Time</div>
 							<div class="font-medium">
-								{(() => {
-									const date = new SvelteDate(selectedBooking.start_time);
-									const dateStr = date.toLocaleDateString('en-US', {
-										weekday: 'long',
-										day: 'numeric',
-										month: 'short'
-									});
-									const timeStr = date.toLocaleTimeString('en-US', {
-										hour: 'numeric',
-										minute: '2-digit',
-										hour12: true
-									});
-									return `${dateStr} at ${timeStr}`;
-								})()}
+								{formatDateTime(selectedBooking.start_time)}
 							</div>
 						</div>
 						<div>
 							<div class="text-xs text-gray-500">Duration</div>
-							<div class="font-medium">{totalDuration} minutes</div>
+							<div class="font-medium">{formatDuration(totalDuration)}</div>
 						</div>
 						<div>
 							<div class="text-xs text-gray-500">Created</div>
 							<div class="text-sm">
-								{new SvelteDate(selectedBooking.created_at).toLocaleString()}
+								{formatDateTime(selectedBooking.created_at)}
 							</div>
 						</div>
-						<div>
-							<div class="text-xs text-gray-500">Last Updated</div>
-							<div class="text-sm">
-								{new SvelteDate(selectedBooking.updated_at).toLocaleString()}
-							</div>
-						</div>
-						{#if selectedBooking.created_by}
-							<div class="md:col-span-2">
-								<div class="text-xs text-gray-500">Created By</div>
-								<div class="text-sm">{selectedBooking.created_by}</div>
+						{#if selectedBooking.created_by_name}
+							<div>
+								<div class="text-xs text-gray-500">Booked In By</div>
+								<div class="text-sm">
+									{selectedBooking.created_by === authStore.currentUser?.id
+										? 'yourself'
+										: selectedBooking.created_by_name}
+								</div>
 							</div>
 						{/if}
 					</div>
@@ -284,8 +270,8 @@
 										<div class="mt-1 text-sm text-gray-600">{service.service_description}</div>
 									{/if}
 									<div class="mt-2 flex items-center justify-between text-sm">
-										<span class="text-gray-600">{service.override_duration_minutes ?? service.duration_minutes} min</span>
-										<span class="font-semibold">£{(service.override_price ?? service.price ?? 0).toFixed(2)}</span>
+								<span class="text-gray-600">{formatDuration(service.override_duration_minutes ?? service.duration_minutes ?? 0)}</span>
+								<span class="font-semibold">£{(service.override_price ?? service.price ?? 0).toFixed(2)}</span>
 									</div>
 								</div>
 							{/each}
@@ -298,33 +284,68 @@
 					<h3 class="mb-3 text-sm font-semibold tracking-wide text-gray-600 uppercase">
 						Customer Information
 					</h3>
+
+					<div class="mb-4 flex items-center gap-4">
+						{#if selectedBooking.user?.profile_pic_url}
+							<img
+								src={selectedBooking.user.profile_pic_url}
+								alt={selectedBooking.user.full_name}
+								class="h-16 w-16 rounded-full object-cover ring-4 ring-blue-200"
+							/>
+						{/if}
+						<div>
+							<div class="text-lg font-semibold">{selectedBooking.user?.full_name || '—'}</div>
+							{#if selectedBooking.user?.date_of_birth}
+								<div class="text-sm text-gray-500">{calculateAge(selectedBooking.user.date_of_birth)} years old</div>
+							{/if}
+						</div>
+					</div>
+
 					<div class="grid gap-3 md:grid-cols-2">
-						<div>
-							<div class="text-xs text-gray-500">Name</div>
-							<div class="font-medium">{selectedBooking.user?.full_name || '—'}</div>
-						</div>
 						<div>
 							<div class="text-xs text-gray-500">Email</div>
-							<div class="font-medium break-words" title={selectedBooking.user?.email}>{selectedBooking.user?.email || '—'}</div>
+							{#if selectedBooking.user?.email}
+								<a
+									href="mailto:{selectedBooking.user.email}"
+									class="font-medium break-words text-blue-600 hover:underline"
+								>{selectedBooking.user.email}</a>
+							{:else}
+								<div class="font-medium">—</div>
+							{/if}
 						</div>
 						<div>
 							<div class="text-xs text-gray-500">Phone</div>
-							<div class="font-medium">{selectedBooking.user?.phone || '—'}</div>
+							{#if selectedBooking.user?.phone}
+								<a
+									href="tel:{selectedBooking.user.phone}"
+									class="font-medium text-blue-600 hover:underline"
+								>{selectedBooking.user.phone}</a>
+							{:else}
+								<div class="font-medium">—</div>
+							{/if}
 						</div>
-						<div>
-							<div class="text-xs text-gray-500">Customer ID</div>
-							<div class="font-medium">{selectedBooking.user?.id || '—'}</div>
-						</div>
-						{#if selectedBooking.user?.loyalty_stamps !== undefined && selectedBooking.user?.loyalty_stamps !== null}
-							<div>
-								<div class="text-xs text-gray-500">Loyalty Stamps</div>
-								<div class="font-medium">{selectedBooking.user.loyalty_stamps}</div>
-							</div>
-						{/if}
 						{#if selectedBooking.user?.referral_code}
 							<div>
 								<div class="text-xs text-gray-500">Referral Code</div>
-								<div class="font-medium">{selectedBooking.user.referral_code}</div>
+								<div class="flex items-center gap-1.5">
+									<code class="rounded bg-gray-200 px-1.5 py-0.5 text-sm font-mono font-medium">
+										{selectedBooking.user.referral_code}
+									</code>
+									<button
+										type="button"
+										title="Copy referral code"
+										class="inline-flex items-center justify-center rounded p-1 text-gray-500 hover:bg-gray-200 hover:text-gray-700 transition-colors"
+										onclick={() => {
+											navigator.clipboard.writeText(selectedBooking.user!.referral_code!);
+											toast.success('Referral code copied');
+										}}
+									>
+										<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+											<rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
+											<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
+										</svg>
+									</button>
+								</div>
 							</div>
 						{/if}
 						{#if selectedBooking.user?.referral_code_uses !== undefined && selectedBooking.user?.referral_code_uses !== null}
@@ -364,16 +385,7 @@
 											</span>
 											{#if !selectedBooking.deposit_paid && selectedBooking.deposit_deadline}
 												<span class="text-gray-500">
-													• Due: {new SvelteDate(selectedBooking.deposit_deadline).toLocaleDateString('en-GB', {
-														weekday: 'short',
-														day: 'numeric',
-														month: 'short',
-														year: 'numeric'
-													})} at {new SvelteDate(selectedBooking.deposit_deadline).toLocaleTimeString('en-GB', {
-														hour: 'numeric',
-														minute: '2-digit',
-														hour12: true
-													})}
+													• Due: {formatDateTime(selectedBooking.deposit_deadline)}
 												</span>
 											{/if}
 										</div>
@@ -411,7 +423,7 @@
 							Payment History
 						</h3>
 						<div class="space-y-3">
-							{#each selectedBooking.payments as payment (payment.id)}
+							{#each selectedBooking.payments as payment, index (index)}
 								<div class="rounded-md border border-gray-300 bg-white p-3">
 									<div class="flex items-start justify-between">
 										<div class="flex-1">
@@ -465,7 +477,7 @@
 												</div>
 											{/if}
 											<div class="mt-1 text-xs text-gray-400">
-												{new SvelteDate(payment.created_at).toLocaleString()}
+												{formatDateTime(payment.created_at)}
 											</div>
 										</div>
 										<div class="text-right font-semibold">

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

@@ -7,7 +7,7 @@
 	import { onMount } from 'svelte';
 	import { toast } from 'svelte-sonner';
 
-	import type { AvailableHoursDay } from '$lib/types/booking';
+	import type { AvailableHoursDay, Service } from '$lib/types/booking';
 
 	const RESERVATION_TTL = 15;
 
@@ -21,7 +21,7 @@
 	} | null>(null);
 	let loading = $state(true);
 	let noSlotsToday = $state(false);
-	let currentTime = $state(new Date());
+	let currentTime = $state(new SvelteDate());
 
 	let reservationId = $state<string | null>(null);
 	let reservationExpiresAt = $state<Date | null>(null);
@@ -29,11 +29,33 @@
 	let isReserving = $state(false);
 	let reservedDuration = $state(0);
 
+	let shortestServiceMinutes = $state<number | null>(null);
+
+	async function fetchShortestService() {
+		try {
+			const response = await fetch('/api/services', {
+				headers: { Authorization: `Bearer ${authStore.currentToken}` }
+			});
+			if (response.ok) {
+				const services: Service[] = await response.json();
+				const durations = services
+					.map((s) => s.duration_minutes)
+					.filter((d) => d > 0);
+				if (durations.length > 0) {
+					shortestServiceMinutes = Math.min(...durations);
+				}
+			}
+		} catch (err) {
+			console.error('Failed to fetch services', err);
+		}
+	}
+
 	onMount(() => {
 		calculateSlotAvailability();
+		fetchShortestService();
 
 		const interval = setInterval(() => {
-			currentTime = new Date();
+			currentTime = new SvelteDate();
 		}, 60000);
 
 		return () => clearInterval(interval);
@@ -235,6 +257,17 @@
 		(window as any).__walkInCountdownInterval = setInterval(updateCountdown, 1000);
 	}
 
+	let availableMinutes = $derived.by(() => {
+		if (!slotInfo) return null;
+		if (slotInfo.isAvailableNow) return getLiveRemainingMinutes();
+		return slotInfo.durationMinutes;
+	});
+
+	let tooShortForService = $derived.by(() => {
+		if (shortestServiceMinutes === null || availableMinutes === null) return false;
+		return availableMinutes < shortestServiceMinutes;
+	});
+
 	async function handleStartWalkIn() {
 		if (!slotInfo) return;
 
@@ -320,10 +353,16 @@
 		{/if}
 	{/if}
 
-	<div class="flex items-center gap-3">
+	{#if tooShortForService}
+		<p class="mb-4 text-sm text-amber-600">
+			Not enough time for any service{shortestServiceMinutes !== null ? ` (shortest service is ${formatDuration(shortestServiceMinutes)})` : ''}
+		</p>
+	{/if}
+
+	<div class="flex flex-wrap items-center gap-3">
 		<Button
 			onclick={handleStartWalkIn}
-			disabled={noSlotsToday || isReserving || (slotInfo?.isAvailableNow && (getLiveRemainingMinutes() ?? 0) <= 0)}
+			disabled={noSlotsToday || isReserving || (slotInfo?.isAvailableNow && (getLiveRemainingMinutes() ?? 0) <= 0) || tooShortForService}
 		>
 			{isReserving ? 'Reserving...' : 'Start Walk-In Session'}
 		</Button>

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

@@ -720,7 +720,7 @@
 								sessions, etc.)
 							</p>
 							<div class="space-y-3">
-								{#each selectedServices as service}
+								{#each selectedServices as service (service.id)}
 									<!-- Safety check to ensure override exists -->
 									{#if serviceOverrides[service.id]}
 										<div class="rounded-lg border bg-white p-4">