From 91999d8244277de03e5be3792b48ccc5e3e2e9d3 Mon Sep 17 00:00:00 2001
From: Stephen Adamson <popertots@gmail.com>
Date: Fri, 29 May 2026 16:09:05 +0100
Subject: [PATCH] refactor: account modals with auto-select and formatting

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

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
---
 .../src/lib/components/account/EditRequestModal.svelte    | 8 ++++----
 .../src/lib/components/account/UserBookingModal.svelte    | 6 +++---
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/frontend/src/lib/components/account/EditRequestModal.svelte b/frontend/src/lib/components/account/EditRequestModal.svelte
index aa4d1ec..2532f7e 100644
--- a/frontend/src/lib/components/account/EditRequestModal.svelte
+++ b/frontend/src/lib/components/account/EditRequestModal.svelte
@@ -302,8 +302,8 @@
 	function isDateUnavailable(date: DateValue): boolean {
 		const d = date as CalendarDate;
 		const jsDate = d.toDate(getLocalTimeZone());
-		const now = new Date();
-		const todayStart = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+		const now = new SvelteDate();
+		const todayStart = new SvelteDate(now.getFullYear(), now.getMonth(), now.getDate());
 		if (jsDate < todayStart) return true;
 		if (d.compare(minDate) < 0 || d.compare(maxCalendarDate) > 0) return true;
 		if (!workingHours) return true;
@@ -378,7 +378,7 @@
 	$effect(() => {
 		if (editMode === 'services') {
 			// Fetch hours for the booking's current date to calculate remaining time
-			const bookingDate = new Date(booking.start_time);
+			const bookingDate = new SvelteDate(booking.start_time);
 			const calDate = new CalendarDate(
 				bookingDate.getFullYear(),
 				bookingDate.getMonth() + 1,
@@ -581,7 +581,7 @@
 	function calculateRemainingTime(): number {
 		if (!workingHours || !availableHours) return 0;
 
-		const bookingDate = new Date(booking.start_time);
+		const bookingDate = new SvelteDate(booking.start_time);
 		const dateStr = `${bookingDate.getFullYear()}-${String(bookingDate.getMonth() + 1).padStart(2, '0')}-${String(bookingDate.getDate()).padStart(2, '0')}`;
 
 		const dayWH = workingHours[dateStr];
diff --git a/frontend/src/lib/components/account/UserBookingModal.svelte b/frontend/src/lib/components/account/UserBookingModal.svelte
index 3cf18c9..cd45271 100644
--- a/frontend/src/lib/components/account/UserBookingModal.svelte
+++ b/frontend/src/lib/components/account/UserBookingModal.svelte
@@ -34,7 +34,7 @@
 	);
 
 	let isFutureBooking = $derived(
-		selectedBooking ? new Date(selectedBooking.start_time) > new Date() : false
+		selectedBooking ? new SvelteDate(selectedBooking.start_time) > new SvelteDate() : false
 	);
 
 	let hasPayments = $derived(
@@ -260,7 +260,7 @@
 				</div>
 
 				{#if selectedBooking}
-					{@const isPastBooking = new Date(selectedBooking.start_time) < new Date()}
+					{@const isPastBooking = new SvelteDate(selectedBooking.start_time) < new SvelteDate()}
 					{@const isUnpaid = selectedBooking.amount_due > 0}
 					{@const showChip = !isPastBooking || isUnpaid}
 					{@const isConfirmedOrLater = ['confirmed', 'in_progress', 'completed'].includes(
@@ -449,7 +449,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">