feat: admin reschedule modal and time blockers for schedule management

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

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

frontend/src/routes/admin/+page.svelte

@@ -9,6 +9,7 @@
 	import UsersCard from '$lib/components/admin/UsersCard.svelte';
 	import BookingsCard from '$lib/components/admin/BookingsCard.svelte';
 	import HolidayHours from '$lib/components/admin/HolidayHours.svelte';
+	import TimeBlockers from '$lib/components/admin/TimeBlockers.svelte';
 	import WeeklySchedule from '$lib/components/admin/WeeklySchedule.svelte';
 	import ServicesManagement from '$lib/components/admin/ServicesManagement.svelte';
 	import DiscountsManagement from '$lib/components/admin/DiscountsManagement.svelte';
@@ -47,6 +48,7 @@
 	let showBookingModal = $state(false);
 	let selectedUserId = $state<string | null>(null);
 	let selectedBookingId = $state<string | null>(null);
+	let rescheduleVersion = $state(0);
 
 	function openUserModal(userId: string) {
 		selectedUserId = userId;
@@ -57,6 +59,10 @@
 		selectedBookingId = bookingId;
 		showBookingModal = true;
 	}
+
+	function handleReschedule() {
+		rescheduleVersion++;
+	}
 </script>
 
 {#if pageState === 'loading'}
@@ -119,22 +125,24 @@
 			</div>
 		</div>
 
-		<!-- Holiday Hours Card Skeleton -->
+		<!-- Time Blockers Card Skeleton -->
 		<div class="rounded-lg border p-6">
-			<div class="mb-4 space-y-2">
-				<Skeleton class="h-6 w-32" />
-				<Skeleton class="h-4 w-64" />
+			<div class="mb-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+				<div class="space-y-2">
+					<Skeleton class="h-6 w-32" />
+					<Skeleton class="h-4 w-80" />
+				</div>
+				<Skeleton class="h-10 w-28" />
 			</div>
-			<div class="flex justify-between">
-				<Skeleton class="h-10 w-32" />
-			</div>
-			<div class="mt-4 grid grid-cols-1 gap-4 md:grid-cols-2">
-				{#each Array(2) as _, i (i)}
-					<Skeleton class="h-32 w-full" />
+			<div class="mt-4 space-y-3">
+				{#each Array(3) as _, i (i)}
+					<Skeleton class="h-16 w-full" />
 				{/each}
 			</div>
 		</div>
 
+		<!-- Holiday Hours Card Skeleton -->
+
 		<!-- Working Hours Card Skeleton -->
 		<div class="rounded-lg border p-6">
 			<div class="mb-4 space-y-2">
@@ -267,6 +275,7 @@
 			<UsersCard {openUserModal} />
 			<BookingsCard {openBookingModal} />
 		</div>
+		<TimeBlockers {openUserModal} {openBookingModal} onReschedule={handleReschedule} rescheduleVersion={rescheduleVersion} />
 		<HolidayHours />
 		<WeeklySchedule />
 		<ServicesManagement />
@@ -279,6 +288,6 @@
 	{/if}
 
 	{#if showBookingModal && selectedBookingId}
-		<BookingModal bind:open={showBookingModal} bookingId={selectedBookingId} />
+		<BookingModal bind:open={showBookingModal} bookingId={selectedBookingId} onReschedule={handleReschedule} />
 	{/if}
 {/if}