From 18d8822c47faabd85cca74c7cac8c50899924de6 Mon Sep 17 00:00:00 2001
From: Stephen Adamson <popertots@gmail.com>
Date: Fri, 29 May 2026 16:08:25 +0100
Subject: [PATCH] refactor: admin user modal, image upload, and new schedule
 page

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

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
---
 .../lib/components/admin/ImageUpload.svelte   |   2 +-
 .../src/lib/components/admin/UserModal.svelte |   2 +-
 .../src/routes/admin/schedule/+page.svelte    | 648 ++++++++++++++++++
 3 files changed, 650 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/routes/admin/schedule/+page.svelte

diff --git a/frontend/src/lib/components/admin/ImageUpload.svelte b/frontend/src/lib/components/admin/ImageUpload.svelte
index 457a150..37639bb 100644
--- a/frontend/src/lib/components/admin/ImageUpload.svelte
+++ b/frontend/src/lib/components/admin/ImageUpload.svelte
@@ -825,7 +825,7 @@
 					{tags.length === 1 ? 'tag' : 'tags'}.
 					{#if tags.length > 0}
 						<div class="mt-3 flex flex-wrap gap-2">
-							{#each tags as tag}
+							{#each tags as tag (tag)}
 								<span
 									class="inline-block rounded-full bg-gray-200 px-2.5 py-1 text-xs text-gray-800"
 								>
diff --git a/frontend/src/lib/components/admin/UserModal.svelte b/frontend/src/lib/components/admin/UserModal.svelte
index 0995aa9..0056958 100644
--- a/frontend/src/lib/components/admin/UserModal.svelte
+++ b/frontend/src/lib/components/admin/UserModal.svelte
@@ -287,7 +287,7 @@
 											month: 'long',
 											day: 'numeric'
 										});
-										const today = new Date();
+										const today = new SvelteDate();
 										let age = today.getFullYear() - dob.getFullYear();
 										const m = today.getMonth() - dob.getMonth();
 										if (m < 0 || (m === 0 && today.getDate() < dob.getDate())) age--;
diff --git a/frontend/src/routes/admin/schedule/+page.svelte b/frontend/src/routes/admin/schedule/+page.svelte
new file mode 100644
index 0000000..4842ecd
--- /dev/null
+++ b/frontend/src/routes/admin/schedule/+page.svelte
@@ -0,0 +1,648 @@
+<script lang="ts">
+	// ============================================================
+	// ADMIN SCHEDULE PAGE — Google Calendar-style week view
+	// ============================================================
+	import { goto } from '$app/navigation';
+	import { authStore } from '$lib/stores/auth.svelte';
+	import { browser } from '$app/environment';
+	import { Skeleton } from '$lib/components/ui/skeleton';
+	import { Button } from '$lib/components/ui/button';
+	import { formatDuration } from '$lib/utils/format';
+	import { SvelteDate } from 'svelte/reactivity';
+	import BookingModal from '$lib/components/admin/BookingModal.svelte';
+
+	// -- Types --
+	type BookingService = { service_name?: string };
+	type ScheduleBooking = {
+		id: string;
+		start_time: string;
+		status: string;
+		duration_minutes: number;
+		user?: { full_name: string };
+		services: BookingService[];
+	};
+	type WorkingDay = {
+		date: string;
+		isOpen: boolean;
+		startTime: string;
+		endTime: string;
+	};
+
+	// -- State --
+	let pageState = $state<'loading' | 'authorized' | 'unauthorized'>('loading');
+	let bookings = $state<ScheduleBooking[]>([]);
+	let workingHours = $state<WorkingDay[]>([]);
+	let loading = $state(true);
+	let prevBookingsJson = $state('');
+	let prevHoursJson = $state('');
+	let initialized = $state(false);
+	let showBookingModal = $state(false);
+	let selectedBookingId = $state<string | null>(null);
+	let weekStart = $state<Date | undefined>(undefined);
+
+	// -- Drag-scroll state --
+	let scrollContainer = $state<HTMLElement | null>(null);
+	let isDragging = $state(false);
+	let dragStartX = $state(0);
+	let dragStartY = $state(0);
+	let dragScrollLeft = $state(0);
+	let dragScrollTop = $state(0);
+
+	// -- Auth & Init --
+	$effect(() => {
+		if (!browser) return;
+		if (authStore.isLoading) {
+			pageState = 'loading';
+			return;
+		}
+		if (!authStore.isAuthenticated || authStore.currentUser?.role !== 'admin') {
+			pageState = 'unauthorized';
+			goto(authStore.isAuthenticated ? '/' : '/login', { replaceState: true });
+			return;
+		}
+		pageState = 'authorized';
+	});
+
+	$effect(() => {
+		if (pageState === 'authorized' && !weekStart) {
+			const today = new SvelteDate();
+			const dayOfWeek = today.getDay();
+			const diff = dayOfWeek === 0 ? 6 : dayOfWeek - 1;
+			const monday = new SvelteDate(today);
+			monday.setDate(monday.getDate() - diff);
+			monday.setHours(0, 0, 0, 0);
+			weekStart = monday;
+		}
+	});
+
+	// -- Helpers --
+	function getWeekDays(start: Date): Date[] {
+		return Array.from({ length: 7 }, (_, i) => {
+			const d = new SvelteDate(start);
+			d.setDate(d.getDate() + i);
+			return d;
+		});
+	}
+
+	function formatDate(d: Date): string {
+		return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
+	}
+
+	function formatWeekLabel(start: Date): string {
+		const end = new SvelteDate(start);
+		end.setDate(end.getDate() + 6);
+		const opts: Intl.DateTimeFormatOptions = { month: 'short', day: 'numeric' };
+		const endOpts: Intl.DateTimeFormatOptions = { month: 'short', day: 'numeric', year: 'numeric' };
+		return `${start.toLocaleDateString('en-US', opts)} – ${end.toLocaleDateString('en-US', endOpts)}`;
+	}
+
+	function formatHour(h: number): string {
+		const period = h >= 12 ? 'PM' : 'AM';
+		const hour = h % 12 || 12;
+		return `${hour} ${period}`;
+	}
+
+	function formatTimeShort(iso: string): string {
+		return new SvelteDate(iso).toLocaleTimeString('en-US', {
+			hour: 'numeric',
+			minute: '2-digit',
+			hour12: true
+		});
+	}
+
+	function timeToMinutes(time: string): number {
+		const [h, m] = time.split(':').map(Number);
+		return h * 60 + m;
+	}
+
+	// Calculates pixel offset from the top of the grid.
+	// Adds 1px per hour to account for border heights.
+	function gridPxFromTime(time: string, minStart: number): number {
+		const fractionalHours = timeToMinutes(time) / 60 - minStart;
+		return fractionalHours * HOUR_HEIGHT + Math.floor(fractionalHours);
+	}
+
+	function getServiceNames(b: ScheduleBooking): string {
+		return b.services
+			.map((s) => s.service_name)
+			.filter(Boolean)
+			.join(', ');
+	}
+
+	function bookingStyle(status: string): string {
+		switch (status) {
+			case 'completed':
+				return 'background:#d1fae5;color:#065f46;border-color:#6ee7b7;text-decoration:line-through';
+			case 'confirmed':
+				return 'background:#d1fae5;color:#065f46;border-color:#6ee7b7;';
+			case 'in_progress':
+				return 'background:#dbeafe;color:#1e40af;border-color:#93c5fd';
+			case 'pending':
+				return 'background:#fef9c3;color:#854d0e;border-color:#fde047';
+			case 'client_cancelled':
+				return 'background:#fecaca;color:#7f1d1d;border-color:#f87171;text-decoration:line-through';
+			case 'we_cancelled':
+				return 'background:#fecaca;color:#7f1d1d;border-color:#f87171;text-decoration:line-through';
+			case 'no_show':
+				return 'background:#e5e7eb;color:#1f2937;border-color:#9ca3af;text-decoration:line-through';
+			default:
+				return 'background:#f3f4f6;color:#1f2937;border-color:#d1d5db';
+		}
+	}
+
+	function dotColor(status: string): string {
+		switch (status) {
+			case 'completed':
+			case 'confirmed':
+				return '#10b981';
+			case 'in_progress':
+				return '#3b82f6';
+			case 'pending':
+				return '#eab308';
+			case 'client_cancelled':
+			case 'we_cancelled':
+				return '#dc2626';
+			default:
+				return '#6b7280';
+		}
+	}
+
+	function bookingsOverlap(a: ScheduleBooking, b: ScheduleBooking): boolean {
+		const aStart = new SvelteDate(a.start_time).getTime();
+		const aEnd = aStart + a.duration_minutes * 60000;
+		const bStart = new SvelteDate(b.start_time).getTime();
+		const bEnd = bStart + b.duration_minutes * 60000;
+		return aStart < bEnd && bStart < aEnd;
+	}
+
+	// -- Data Fetching --
+	async function fetchWeekData() {
+		if (!weekStart) return;
+		if (!initialized) loading = true;
+		try {
+			const startStr = formatDate(weekStart);
+			const end = new SvelteDate(weekStart);
+			end.setDate(end.getDate() + 6);
+			const endStr = formatDate(end);
+
+			const [bookingsRes, whRes] = await Promise.all([
+				fetch(`/api/admin/bookings?start_date=${startStr}&end_date=${endStr}&per_page=500`, {
+					headers: { Authorization: `Bearer ${authStore.currentToken}` }
+				}),
+				fetch(`/api/scheduling/working-hours?start=${startStr}&end=${endStr}`, {
+					headers: { Authorization: `Bearer ${authStore.currentToken}` }
+				})
+			]);
+
+			if (bookingsRes.ok) {
+				const data = await bookingsRes.json();
+				const newBookings = data.bookings || [];
+				const newJson = JSON.stringify(newBookings);
+				if (newJson !== prevBookingsJson) {
+					bookings = newBookings;
+					prevBookingsJson = newJson;
+				}
+			}
+
+			if (whRes.ok) {
+				const data: WorkingDay[] = await whRes.json();
+				const newJson = JSON.stringify(data);
+				if (newJson !== prevHoursJson) {
+					workingHours = data;
+					prevHoursJson = newJson;
+				}
+			}
+		} catch (err) {
+			console.error('Error fetching schedule data:', err);
+		} finally {
+			if (!initialized) {
+				loading = false;
+				initialized = true;
+			}
+		}
+	}
+
+	$effect(() => {
+		if (weekStart) fetchWeekData();
+	});
+
+	$effect(() => {
+		if (pageState !== 'authorized') return;
+		const intervalId = setInterval(fetchWeekData, 600_000);
+		const handleRefresh = () => fetchWeekData();
+		window.addEventListener('bookingApproved', handleRefresh);
+		return () => {
+			clearInterval(intervalId);
+			window.removeEventListener('bookingApproved', handleRefresh);
+		};
+	});
+
+	// -- Interaction Handlers --
+	function onMouseDown(e: MouseEvent) {
+		if (!scrollContainer || e.button !== 0) return;
+		isDragging = true;
+		dragStartX = e.pageX;
+		dragStartY = e.pageY;
+		dragScrollLeft = scrollContainer.scrollLeft;
+		dragScrollTop = scrollContainer.scrollTop;
+	}
+
+	function onMouseMove(e: MouseEvent) {
+		if (!isDragging || !scrollContainer) return;
+		e.preventDefault();
+		scrollContainer.scrollLeft = dragScrollLeft - (e.pageX - dragStartX);
+		scrollContainer.scrollTop = dragScrollTop - (e.pageY - dragStartY);
+	}
+
+	function onMouseUp() {
+		isDragging = false;
+	}
+
+	function navigateWeek(delta: number) {
+		if (!weekStart) return;
+		const d = new Date(weekStart);
+		d.setDate(d.getDate() + delta * 7);
+		weekStart = d;
+	}
+
+	function goToday() {
+		const today = new Date();
+		const dayOfWeek = today.getDay();
+		const diff = dayOfWeek === 0 ? 6 : dayOfWeek - 1;
+		const monday = new Date(today);
+		monday.setDate(monday.getDate() - diff);
+		monday.setHours(0, 0, 0, 0);
+		weekStart = monday;
+	}
+
+	function openBooking(id: string) {
+		selectedBookingId = id;
+		showBookingModal = true;
+	}
+
+	// -- Layout Constants --
+	const HOUR_HEIGHT = 64;
+	const TIME_LABEL_WIDTH = 56;
+	const HEADER_HEIGHT = 48;
+	const dayHeaders = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
+
+	const today = new SvelteDate();
+	const todayStr = formatDate(today);
+
+	// -- Derived State --
+
+	// Group bookings by date string for O(1) lookup in the loop
+	const bookingsByDate = $derived(
+		bookings.reduce((acc, b) => {
+			const dateKey = b.start_time.slice(0, 10); // YYYY-MM-DD
+			if (!acc.has(dateKey)) acc.set(dateKey, []);
+			acc.get(dateKey)!.push(b);
+			return acc;
+		}, new Map<string, ScheduleBooking[]>())
+	);
+
+	const timeRange = $derived.by(() => {
+		if (!weekStart)
+			return { minStart: 8, maxEnd: 18, hours: [8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18] };
+
+		let minStart = 8,
+			maxEnd = 18;
+		for (const day of getWeekDays(weekStart)) {
+			const wh = workingHours.find((w) => w.date === formatDate(day));
+			if (wh?.isOpen) {
+				const [sh] = wh.startTime.split(':').map(Number);
+				const [eh] = wh.endTime.split(':').map(Number);
+				if (sh < minStart) minStart = sh;
+				if (eh > maxEnd) maxEnd = eh;
+			}
+		}
+		const hours: number[] = [];
+		for (let h = minStart; h <= maxEnd; h++) hours.push(h);
+		return { minStart, maxEnd, hours };
+	});
+
+	const isCurrentWeek = $derived(
+		weekStart !== undefined &&
+			(() => {
+				const end = new SvelteDate(weekStart);
+				end.setDate(end.getDate() + 6);
+				end.setHours(23, 59, 59, 999);
+				return today >= weekStart && today <= end;
+			})()
+	);
+
+	let nowMinutes = $state(today.getHours() * 60 + today.getMinutes());
+	$effect(() => {
+		if (pageState !== 'authorized') return;
+		const tickId = setInterval(() => {
+			const n = new Date();
+			nowMinutes = n.getHours() * 60 + n.getMinutes();
+		}, 30_000);
+		return () => clearInterval(tickId);
+	});
+</script>
+
+{#if pageState === 'loading'}
+	<div class="mx-auto max-w-7xl space-y-6 p-4 md:p-6">
+		<Skeleton class="h-8 w-64" />
+		<Skeleton class="h-[calc(100vh-12rem)] w-full" />
+	</div>
+{:else if pageState === 'authorized' && weekStart}
+	<div class="mx-auto flex h-[calc(100vh-4rem)] max-w-7xl flex-col overflow-hidden p-4 md:p-6">
+		<!-- NAVIGATION BAR -->
+		<div class="mb-4 flex shrink-0 flex-wrap items-center justify-between gap-3">
+			<h1 class="text-xl font-bold md:text-2xl">Schedule</h1>
+			<div class="flex items-center gap-2">
+				<Button variant="outline" size="sm" onclick={() => navigateWeek(-1)}>
+					<svg
+						class="h-4 w-4"
+						viewBox="0 0 24 24"
+						fill="none"
+						stroke="currentColor"
+						stroke-width="2"
+					>
+						<polyline points="15 18 9 12 15 6" />
+					</svg>
+					<span class="hidden sm:inline">Prev</span>
+				</Button>
+				<Button variant="outline" size="sm" onclick={goToday}>Today</Button>
+				<Button variant="outline" size="sm" onclick={() => navigateWeek(1)}>
+					<span class="hidden sm:inline">Next</span>
+					<svg
+						class="h-4 w-4"
+						viewBox="0 0 24 24"
+						fill="none"
+						stroke="currentColor"
+						stroke-width="2"
+					>
+						<polyline points="9 18 15 12 9 6" />
+					</svg>
+				</Button>
+				<span class="ml-2 text-sm font-medium text-gray-600">{formatWeekLabel(weekStart)}</span>
+			</div>
+		</div>
+
+		<!-- GRID CONTAINER -->
+		{#if loading}
+			<div class="flex-1 overflow-hidden rounded-lg border bg-white">
+				<Skeleton class="h-full w-full" />
+			</div>
+		{:else}
+			<div
+				bind:this={scrollContainer}
+				aria-label="Week schedule"
+				class="schedule-wrapper flex-1 overflow-auto rounded-lg border bg-white select-none"
+				class:cursor-grab={!isDragging}
+				class:cursor-grabbing={isDragging}
+				onmousedown={onMouseDown}
+				onmousemove={onMouseMove}
+				onmouseup={onMouseUp}
+				onmouseleave={onMouseUp}
+			>
+				<div class="relative isolate flex min-w-fit flex-col">
+					<!-- STICKY HEADER ROW -->
+					<div
+						class="sticky top-0 z-30 flex border-b bg-gray-50"
+						style="height: {HEADER_HEIGHT}px;"
+					>
+						<!-- Time Column Spacer -->
+						<div class="shrink-0 border-r bg-gray-50" style="width: {TIME_LABEL_WIDTH}px;"></div>
+
+						{#each getWeekDays(weekStart) as day, dayIdx (formatDate(day))}
+							{@const isToday = formatDate(day) === todayStr}
+							<div
+								class="flex min-w-35 flex-1 flex-col items-center justify-center border-l text-center
+								       {isToday ? 'bg-blue-200' : ''}"
+							>
+								<div class="text-xs font-medium text-gray-500">{dayHeaders[dayIdx]}</div>
+								<div class="text-sm font-bold {isToday ? 'text-blue-600' : ''}">
+									{day.getDate()}
+								</div>
+							</div>
+						{/each}
+					</div>
+
+					<!-- BODY: TIME COLUMN + GRID -->
+					<div class="relative flex">
+						<!-- 1. SOLID TIME PANE (Left Column) -->
+						<div
+							class="sticky left-0 z-20 shrink-0 border-r border-gray-100 bg-white"
+							style="width: {TIME_LABEL_WIDTH}px;"
+						>
+							{#each timeRange.hours as h (h)}
+								<div
+									class="flex items-start justify-end border-b border-gray-100 pt-0.5 pr-1.5 text-right text-xs text-gray-400"
+									style="height: {HOUR_HEIGHT}px;"
+								>
+									{formatHour(h)}
+								</div>
+							{/each}
+						</div>
+
+						<!-- 2. GRID CONTAINER (Day Columns) -->
+						<div class="relative flex flex-1 flex-col">
+							<!-- Grid Rows & Cells -->
+							<div class="relative z-0">
+								{#each timeRange.hours as h (h)}
+									<div class="flex border-b border-gray-100">
+										{#each getWeekDays(weekStart) as day (formatDate(day))}
+											{@const dateStr = formatDate(day)}
+											{@const isToday = dateStr === todayStr}
+											{@const dayBookings = bookingsByDate.get(dateStr) || []}
+
+											<div
+												class="relative min-w-35 flex-1 border-r border-gray-100 {isToday
+													? 'bg-blue-50'
+													: ''}"
+												style="height: {HOUR_HEIGHT}px;"
+											>
+												<!-- Half-hour dashed line -->
+												<div class="half-hour-line absolute inset-x-0 h-px" style="top: 50%;"></div>
+
+												<!-- BOOKING BLOCKS -->
+												{#each dayBookings.filter((b) => new SvelteDate(b.start_time).getHours() === h) as b (b.id)}
+													{@const startMinutes = new SvelteDate(b.start_time).getMinutes()}
+													{@const topOffset = (startMinutes / 60) * HOUR_HEIGHT}
+													{@const heightPx = Math.max((b.duration_minutes / 60) * HOUR_HEIGHT, 20)}
+													{@const isCancelled =
+														b.status === 'client_cancelled' ||
+														b.status === 'we_cancelled' ||
+														b.status === 'no_show'}
+													{@const hasOverlap =
+														isCancelled &&
+														dayBookings.some(
+															(other) =>
+																other.id !== b.id &&
+																!(
+																	other.status === 'client_cancelled' ||
+																	other.status === 'we_cancelled' ||
+																	other.status === 'no_show'
+																) &&
+																bookingsOverlap(b, other)
+														)}
+
+													{#if !hasOverlap}
+														<button
+															type="button"
+															aria-label="View booking for {b.user?.full_name || 'Guest'}"
+															class="absolute inset-x-0.5 z-10 cursor-pointer overflow-hidden rounded border px-1.5 py-0.5 text-left text-xs transition-shadow hover:shadow-md focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-blue-500"
+															style="top: {topOffset}px; height: {heightPx}px; {bookingStyle(
+																b.status
+															)}"
+															onclick={(e) => {
+																e.stopPropagation();
+																openBooking(b.id);
+															}}
+														>
+															<div class="flex items-center gap-1">
+																<div
+																	class="h-2 w-2 shrink-0 rounded-full"
+																	style="background:{dotColor(b.status)}"
+																></div>
+																<span class="truncate font-medium"
+																	>{b.user?.full_name || 'Guest'}</span
+																>
+															</div>
+															{#if heightPx > 36}
+																<div class="line-clamp-3 text-[10px] opacity-75">
+																	{getServiceNames(b)}
+																</div>
+															{/if}
+															{#if heightPx > 52}
+																<div class="truncate text-[10px] opacity-75">
+																	{formatTimeShort(b.start_time)} · {formatDuration(
+																		b.duration_minutes
+																	)}
+																</div>
+															{/if}
+														</button>
+													{/if}
+												{/each}
+											</div>
+										{/each}
+									</div>
+								{/each}
+							</div>
+
+							<!-- 3. OVERLAY LAYER (Lines & Closed Stripes) -->
+							<!-- z-5 places it above grid backgrounds (z-0) but below bookings (z-10) -->
+							<div class="pointer-events-none absolute inset-0 z-5">
+								{#each getWeekDays(weekStart) as day, dayIdx (formatDate(day))}
+									{@const dateStr = formatDate(day)}
+									{@const wh = workingHours.find((w) => w.date === dateStr)}
+									{@const colLeft = `calc(${dayIdx} * (100% / 7))`}
+									{@const colWidth = `calc(100% / 7)`}
+
+									{#if !wh?.isOpen}
+										<!-- Closed Day Overlay -->
+										<div
+											class="stripe-bg absolute flex items-center justify-center"
+											style="left:{colLeft}; top:0; width:{colWidth}; height:100%;"
+										>
+											<span
+												class="pointer-events-auto rounded bg-black/40 px-3 py-1 text-sm font-semibold text-white"
+												>Closed</span
+											>
+										</div>
+									{:else}
+										{@const openPx = gridPxFromTime(wh.startTime, timeRange.minStart)}
+										{@const closePx = gridPxFromTime(wh.endTime, timeRange.minStart)}
+
+										<!-- Pre-opening gray stripe -->
+										{#if openPx > 0}
+											<div
+												class="stripe-bg absolute"
+												style="left:{colLeft}; top:0; width:{colWidth}; height:{openPx}px;"
+											></div>
+										{/if}
+
+										<!-- Post-closing gray stripe -->
+										{#if closePx < timeRange.hours.length * HOUR_HEIGHT}
+											<div
+												class="stripe-bg absolute"
+												style="left:{colLeft}; top:{closePx}px; width:{colWidth}; bottom:0;"
+											></div>
+										{/if}
+
+										<!-- Opening/Closing Red Lines -->
+										<div
+											class="absolute border-t-2 border-red-500"
+											style="left:{colLeft}; top:{openPx}px; width:{colWidth};"
+										></div>
+										<div
+											class="absolute border-t-2 border-red-500"
+											style="left:{colLeft}; top:{closePx}px; width:{colWidth};"
+										></div>
+									{/if}
+								{/each}
+
+								<!-- CURRENT TIME INDICATOR -->
+								{#if isCurrentWeek}
+									{@const nowTime = `${String(Math.floor(nowMinutes / 60)).padStart(2, '0')}:${String(nowMinutes % 60).padStart(2, '0')}`}
+									{@const nowPx = gridPxFromTime(nowTime, timeRange.minStart)}
+									{@const todayIdx = getWeekDays(weekStart!).findIndex(
+										(d) => formatDate(d) === todayStr
+									)}
+									{@const colLeft = `calc(${todayIdx} * (100% / 7))`}
+									{@const colWidth = `calc(100% / 7)`}
+
+									{#if nowPx >= 0 && nowPx <= timeRange.hours.length * HOUR_HEIGHT && todayIdx !== -1}
+										<!-- Dot -->
+										<div
+											class="absolute h-3 w-3 rounded-full bg-blue-500"
+											style="left: calc({colLeft} - 6px); top: {nowPx - 6}px;"
+										></div>
+
+										<!-- Line -->
+										<!-- FIXED: Restricted width to current column using colLeft/colWidth -->
+										<div
+											class="time-indicator-line absolute h-0.5"
+											style="left: {colLeft}; width: {colWidth}; top: {nowPx}px;"
+										></div>
+									{/if}
+								{/if}
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		{/if}
+	</div>
+
+	<BookingModal bind:open={showBookingModal} bookingId={selectedBookingId ?? ''} />
+{/if}
+
+<style>
+	/* Diagonal stripe pattern for closed hours/days */
+	.stripe-bg {
+		background: repeating-linear-gradient(
+			45deg,
+			rgba(156, 163, 175, 0.4),
+			rgba(156, 163, 175, 0.4) 10px,
+			rgba(209, 213, 219, 0.15) 10px,
+			rgba(209, 213, 219, 0.15) 20px
+		);
+	}
+
+	/* Half-hour dashed line */
+	.half-hour-line {
+		background: repeating-linear-gradient(
+			to right,
+			#e5e7eb 0,
+			#e5e7eb 4px,
+			transparent 4px,
+			transparent 16px
+		);
+	}
+
+	/* Current time indicator line */
+	.time-indicator-line {
+		background: repeating-linear-gradient(
+			to right,
+			#3b82f6 0,
+			#3b82f6 8px,
+			transparent 8px,
+			transparent 16px
+		);
+	}
+</style>