From b7fa22b018ad0415a4a6205b9a3f26fd30a0f0d8 Mon Sep 17 00:00:00 2001
From: Stephen Adamson <popertots@gmail.com>
Date: Sun, 5 Jul 2026 22:26:18 +0100
Subject: [PATCH] refactor: accept defaultHours prop in WeeklySchedule and
 TimeBlockers

Add optional defaultHours prop to accept pre-fetched data from parent page. Standardise select element styling with shadow-xs, focus-visible ring, and consistent padding.

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

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
---
 .../lib/components/admin/TimeBlockers.svelte  | 23 +++++++++++-----
 .../components/admin/WeeklySchedule.svelte    | 27 ++++++++++++++++---
 2 files changed, 41 insertions(+), 9 deletions(-)

diff --git a/frontend/src/lib/components/admin/TimeBlockers.svelte b/frontend/src/lib/components/admin/TimeBlockers.svelte
index 7026869..31e1f23 100644
--- a/frontend/src/lib/components/admin/TimeBlockers.svelte
+++ b/frontend/src/lib/components/admin/TimeBlockers.svelte
@@ -53,9 +53,10 @@
 		openUserModal?: (userId: string) => void;
 		openBookingModal?: (bookingId: string) => void;
 		rescheduleVersion?: number;
+		defaultHours?: WorkingHourRow[];
 	}
 
-	const { openUserModal, openBookingModal, rescheduleVersion = 0 }: Props = $props();
+	const { openUserModal, openBookingModal, rescheduleVersion = 0, defaultHours: defaultHoursProp }: Props = $props();
 
 	const PAGE_SIZE = 5;
 
@@ -501,7 +502,17 @@
 
 	$effect(() => {
 		fetchBlockers();
-		fetchDefaultHours();
+	});
+
+	$effect(() => {
+		if (defaultHoursProp !== undefined) {
+			if (defaultHoursProp.length > 0) {
+				defaultHours = defaultHoursProp;
+			}
+			hoursLoading = false;
+		} else {
+			fetchDefaultHours();
+		}
 	});
 
 	$effect(() => {
@@ -763,7 +774,7 @@
 							</p>
 						{:else}
 							<select
-								class="flex h-9 w-full rounded-md border border-input bg-transparent px-3 text-sm"
+								class="flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm shadow-xs ring-offset-background transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50"
 								bind:value={startSelectValue}
 								onchange={() => {
 									const p = parseSelectValue(startSelectValue);
@@ -797,9 +808,9 @@
 				{:else if availableEndOptions.length === 0}
 					<p class="text-sm text-gray-400">No available end time after selected start</p>
 				{:else}
-					<select
-						class="flex h-9 w-full rounded-md border border-input bg-transparent px-3 text-sm"
-						bind:value={endSelectValue}
+							<select
+								class="flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm shadow-xs ring-offset-background transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50"
+								bind:value={endSelectValue}
 						onchange={() => {
 							const p = parseSelectValue(endSelectValue);
 							endHour = p.hour;
diff --git a/frontend/src/lib/components/admin/WeeklySchedule.svelte b/frontend/src/lib/components/admin/WeeklySchedule.svelte
index 564aa4f..1fa52b4 100644
--- a/frontend/src/lib/components/admin/WeeklySchedule.svelte
+++ b/frontend/src/lib/components/admin/WeeklySchedule.svelte
@@ -13,6 +13,13 @@
 
 	const TIME15 = ['00', '15', '30', '45'];
 
+	// =============== Props ===============
+	interface Props {
+		defaultHours?: Array<{ weekday: number; startTime: string; endTime: string; isOpen: boolean }>;
+	}
+
+	let { defaultHours: defaultHoursProp }: Props = $props();
+
 	// =============== Types ===============
 	type WorkingHourRow = {
 		weekday: number;
@@ -192,7 +199,21 @@
 
 	// =============== Effects ===============
 	$effect(() => {
-		if (browser) {
+		if (defaultHoursProp !== undefined) {
+			// Parent provides data via prop — map camelCase to display format
+			if (defaultHoursProp.length > 0) {
+				defaultHours = defaultHoursProp.map(
+					(hour: { weekday: number; startTime: string; endTime: string; isOpen: boolean }) => ({
+						weekday: hour.weekday,
+						start_time: formatTime(hour.startTime),
+						end_time: formatTime(hour.endTime),
+						is_open: hour.isOpen
+					})
+				);
+			}
+			defaultHoursIsLoading = false;
+		} else if (browser) {
+			// Backward compatible: self-fetch
 			fetchDefaultHours();
 		}
 	});
@@ -485,7 +506,7 @@
 									<select
 										bind:value={row.start_time}
 										disabled={!row.is_open}
-										class="max-w-[70px] text-sm"
+										class="flex h-9 max-w-[70px] rounded-md border border-input bg-background px-2 py-1 text-sm shadow-xs ring-offset-background transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50"
 									>
 										{#each Array(24) as _, hour (hour)}
 											{#each TIME15 as min (min)}
@@ -500,7 +521,7 @@
 									<select
 										bind:value={row.end_time}
 										disabled={!row.is_open}
-										class="max-w-[70px] text-sm"
+										class="flex h-9 max-w-[70px] rounded-md border border-input bg-background px-2 py-1 text-sm shadow-xs ring-offset-background transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50"
 									>
 										{#each Array(24) as _, hour (hour)}
 											{#each TIME15 as min (min)}