fix: remove unused variables from Svelte components

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

@@ -150,7 +150,7 @@
 				const data = await response.json();
 				overlappingBookings = data.bookings || [];
 			}
-		} catch (_err) {
+		} catch {
 			// Silently handle - overlapping bookings couldn't be fetched
 		} finally {
 			loadingOverlaps = false;
@@ -337,7 +337,7 @@
 				const text = await response.text();
 				toast.error('Failed to confirm: ' + sanitizeText(text), { id: loadingToast });
 			}
-		} catch (_err) {
+		} catch {
 			toast.error('Network error confirming booking', { id: loadingToast });
 		} finally {
 			submitting = false;
@@ -365,7 +365,7 @@
 				const text = await response.text();
 				toast.error('Failed to decline: ' + sanitizeText(text), { id: loadingToast });
 			}
-		} catch (_err) {
+		} catch {
 			toast.error('Network error declining booking', { id: loadingToast });
 		} finally {
 			submitting = false;

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

@@ -181,7 +181,6 @@
 	let selectedTime = $state<string | null>(null);
 	let workingHours = $state<Record<string, DayHours> | null>(null);
 	let availableHours = $state<Record<string, DayAvailability> | null>(null);
-	let _loadingWorkingHours = $state(false);
 	let loadingAvailableHours = $state(false);
 	let hoursRangeGeneration = $state(0);
 	let hoursMonthGeneration = $state(0);
@@ -485,7 +484,7 @@
 					(user: { account_role: string }) => !excludedRoles.includes(user.account_role)
 				);
 			}
-		} catch (_err) {
+		} catch {
 			toast.error('Failed to load users');
 		} finally {
 			loadingUsers = false;
@@ -504,7 +503,7 @@
 			if (response.ok) {
 				services = await response.json();
 			}
-		} catch (_err) {
+		} catch {
 			toast.error('Failed to load services');
 		} finally {
 			loadingServices = false;
@@ -528,7 +527,6 @@
 		hoursRangeGeneration++;
 		const gen = hoursRangeGeneration;
 
-		_loadingWorkingHours = true;
 		loadingAvailableHours = true;
 
 		try {
@@ -572,10 +570,9 @@
 				workingHours = { ...workingHours, ...whMap };
 				availableHours = { ...availableHours, ...ahMap };
 			}
-		} catch (_err) {
+					} catch {
 			toast.error('Failed to load availability');
 		} finally {
-			_loadingWorkingHours = false;
 			loadingAvailableHours = false;
 		}
 	}
@@ -597,7 +594,6 @@
 		hoursMonthGeneration++;
 		const gen = hoursMonthGeneration;
 
-		_loadingWorkingHours = true;
 		loadingAvailableHours = true;
 
 		try {
@@ -636,10 +632,9 @@
 				workingHours = { ...workingHours, ...whMap };
 				availableHours = { ...availableHours, ...ahMap };
 			}
-		} catch (_err) {
+		} catch {
 			toast.error('Failed to load availability');
 		} finally {
-			_loadingWorkingHours = false;
 			loadingAvailableHours = false;
 			loadingMonthKeys = new SvelteSet([...loadingMonthKeys].filter((k) => k !== monthKey));
 		}
@@ -725,7 +720,7 @@
 				toast.error(`Failed to reserve slot: ${errorText}`);
 				return false;
 			}
-		} catch (_err) {
+		} catch {
 			toast.error('Failed to reserve slot');
 			return false;
 		} finally {
@@ -1020,7 +1015,7 @@
 				const errorText = await res.text();
 				toast.error(`Failed to create booking: ${errorText}`);
 			}
-		} catch (_err) {
+		} catch {
 			toast.error('An error occurred while creating booking');
 		} finally {
 			submitting = false;
@@ -1148,8 +1143,10 @@
 							<div class="max-h-[300px] overflow-y-auto rounded-md border border-gray-200">
 								{#if loadingUsers}
 									<div class="space-y-2 p-2">
-										{#each Array(3) as _, i (i)}
+										{#each Array(3) as __, i (i)}
+					{__}
 											<Skeleton class="h-10 w-full" />
+											{__}
 										{/each}
 									</div>
 								{:else if users.length === 0}
@@ -1260,8 +1257,10 @@
 					<Card.Content class="space-y-4">
 						{#if loadingServices}
 							<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
-								{#each Array(4) as _, i (i)}
+								{#each Array(4) as __, i (i)}
+					{__}
 									<Skeleton class="h-28 w-full" />
+									{__}
 								{/each}
 							</div>
 						{:else if services.length === 0}
@@ -1291,10 +1290,12 @@
 									/>
 									<Button variant="outline" size="sm" onclick={fetchCustomServices}>Search</Button>
 								</div>
-								{#if loadingCustomServices}
+									{#if loadingCustomServices}
 									<div class="space-y-2">
-										{#each Array(3) as _, i (i)}
+										{#each Array(3) as __, i (i)}
+					{__}
 											<Skeleton class="h-10 w-full" />
+											{__}
 										{/each}
 									</div>
 								{:else if customServices.length > 0}

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

@@ -86,7 +86,7 @@
 				const text = await response.text();
 				toast.error('Failed to cancel: ' + text);
 			}
-		} catch (_err) {
+		} catch {
 			toast.error('Network error');
 		} finally {
 			cancelling = false;

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

@@ -286,7 +286,8 @@
 	<Card.Content>
 		{#if loading}
 			<div class="space-y-4">
-				{#each Array(3) as _, i (i)}
+				{#each Array(3) as __, i (i)}
+					{__}
 					<div class="space-y-2">
 						<Skeleton class="h-4 w-32" />
 						<Skeleton class="h-5 w-full" />

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

@@ -283,7 +283,8 @@
 
 		{#if loading}
 			<div class="space-y-3">
-				{#each Array(3) as _, i (i)}
+				{#each Array(3) as __, i (i)}
+					{__}
 					<Skeleton class="h-12 w-full" />
 				{/each}
 			</div>

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

@@ -275,7 +275,8 @@
 	<Card.Content>
 		{#if loading}
 			<div class="space-y-3">
-				{#each Array(3) as _, i (i)}
+				{#each Array(3) as __, i (i)}
+					{__}
 					<Skeleton class="h-16 w-full" />
 				{/each}
 			</div>

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

@@ -49,7 +49,6 @@
 	let cardQuery = $state('');
 	let cards = $state<GiftCard[]>([]);
 	let balances = $state<UserBalance[]>([]);
-	let _totalCards = $state(0);
 	let totalBalanceRecords = $state(0);
 	let currentPage = $state(1);
 	let totalPages = $state(1);
@@ -138,18 +137,12 @@
 	// Page 3: Recipient email input
 	let generateEmail = $state('');
 
-	let _tillGuestEmail = $state<string | undefined>(undefined);
-
 	// Payment Processing States
 	let cashAmount = $state('');
-	let _cashTendered = $state(0);
-	let _extraAsTip = $state(false);
 
 	let ephemeralCardNumber = $state('');
 	let ephemeralCardExpiry = $state('');
 	let ephemeralCardCVC = $state('');
-	let _ephemeralCardError = $state('');
-
 	let paymentError = $state('');
 	let paymentResult = $state<{
 		id: string;
@@ -158,7 +151,6 @@
 		status?: string;
 	} | null>(null);
 	let cardMachineItemID = $state<string | null>(null);
-	let _checkoutId = $state<string | null>(null);
 	let processingMessage = $state('Processing payment...');
 
 	// Idempotency Key
@@ -242,14 +234,6 @@
 		transferAmount && !transferAmountError && transferToCode && !transferCodeError
 	);
 
-	// TillPayment state
-	const _showTillPayment = $state(false);
-	const _tillAmount = $state(0);
-	const _tillAction = $state<'create' | 'topup'>('create');
-	const _tillGiftCardId = $state<string | undefined>(undefined);
-	const _tillUserId = $state<string | undefined>(undefined);
-	const _tillDelivery = $state<'account' | 'code'>('code');
-
 	async function fetchGiftCards(page: number = 1, search: string = '') {
 		loading = true;
 		loadingSearch = true;
@@ -267,14 +251,13 @@
 				summary.total_user_balances = data.total_user_balances;
 				cards = data.gift_cards;
 				balances = data.user_balances;
-				_totalCards = data.total;
-				totalBalanceRecords = data.ub_total ?? data.user_balances?.length ?? 0;
+			totalBalanceRecords = data.ub_total ?? data.user_balances?.length ?? 0;
 				currentPage = data.page;
 				totalPages = data.totalPages;
 			} else {
 				toast.error('Failed to fetch gift cards');
 			}
-		} catch (_err) {
+		} catch {
 			toast.error('Network error fetching gift cards');
 		} finally {
 			loading = false;
@@ -297,7 +280,7 @@
 			} else {
 				toast.error('Failed to fetch expired balances');
 			}
-		} catch (_err) {
+		} catch {
 			toast.error('Network error fetching expired balances');
 		} finally {
 			loadingExpired = false;
@@ -321,7 +304,7 @@
 				const err = await res.json();
 				toast.error(err.error || 'Failed to claim balance');
 			}
-		} catch (_err) {
+		} catch {
 			toast.error('Network error claiming balance');
 		} finally {
 			claimingId = null;
@@ -415,7 +398,7 @@
 				const errText = await res.text();
 				toast.error(errText || 'Failed to create inventory card');
 			}
-		} catch (_err) {
+		} catch {
 			toast.error('Network error');
 		} finally {
 			creating = false;
@@ -457,7 +440,7 @@
 				const errText = await res.text();
 				toast.error(errText || 'Failed to transfer balance');
 			}
-		} catch (_err) {
+		} catch {
 			toast.error('Network error transferring balance');
 		} finally {
 			transferring = false;
@@ -475,7 +458,6 @@
 		generateEmail = '';
 		generateUserQuery = '';
 		generateUsers = [];
-		_tillGuestEmail = undefined;
 	}
 
 	function resetTopUpModal() {
@@ -485,16 +467,12 @@
 
 		// Reset payment
 		cashAmount = '';
-		_cashTendered = 0;
-		_extraAsTip = false;
 		ephemeralCardNumber = '';
 		ephemeralCardExpiry = '';
 		ephemeralCardCVC = '';
-		_ephemeralCardError = '';
 		paymentError = '';
 		paymentResult = null;
 		cardMachineItemID = null;
-		_checkoutId = null;
 		idempotencyKey = '';
 	}
 
@@ -607,7 +585,6 @@
 				const data = await res.json();
 				cardMachineItemID = data.item_id || null;
 				if (data.status === 'pending' && data.checkout_id) {
-					_checkoutId = data.checkout_id;
 					setModalStep(actionType, 'processing');
 					pollEmbeddedCheckout(data.checkout_id, amt, actionType);
 				} else {
@@ -1276,14 +1253,12 @@
 					</thead>
 					<tbody>
 						{#if loading}
-							{#each Array(3) as _, i (i)}
 								<tr class="border-b">
 									<td class="py-3"><Skeleton class="h-4 w-36" /></td>
 									<td class="py-3"><Skeleton class="h-4 w-44" /></td>
 									<td class="py-3"><Skeleton class="h-4 w-16" /></td>
 									<td class="py-3"><Skeleton class="h-4 w-24" /></td>
 								</tr>
-							{/each}
 						{:else if balances.length === 0}
 							<tr>
 								<td colspan="4" class="py-8 text-center text-gray-500">
@@ -1309,7 +1284,8 @@
 			<!-- Mobile view - Balances -->
 			<div class="grid gap-4 md:hidden">
 				{#if loading}
-					{#each Array(2) as _, i (i)}
+					{#each Array(2) as __, i (i)}
+					{__}
 						<div class="space-y-3 rounded-lg border p-4">
 							<Skeleton class="h-4 w-36" />
 							<Skeleton class="h-4 w-full" />
@@ -1361,7 +1337,6 @@
 					</thead>
 					<tbody>
 						{#if loadingExpired}
-							{#each Array(3) as _, i (i)}
 								<tr class="border-b">
 									<td class="py-3"><Skeleton class="h-4 w-32" /></td>
 									<td class="py-3"><Skeleton class="h-4 w-16" /></td>
@@ -1369,7 +1344,21 @@
 									<td class="py-3"><Skeleton class="h-4 w-20" /></td>
 									<td class="py-3 text-center"><Skeleton class="mx-auto h-4 w-24" /></td>
 								</tr>
-							{/each}
+								<tr class="border-b">
+									<td class="py-3"><Skeleton class="h-4 w-32" /></td>
+									<td class="py-3"><Skeleton class="h-4 w-16" /></td>
+									<td class="py-3"><Skeleton class="h-4 w-24" /></td>
+									<td class="py-3"><Skeleton class="h-4 w-20" /></td>
+									<td class="py-3 text-center"><Skeleton class="mx-auto h-4 w-24" /></td>
+								</tr>
+								<tr class="border-b">
+									<td class="py-3"><Skeleton class="h-4 w-32" /></td>
+									<td class="py-3"><Skeleton class="h-4 w-16" /></td>
+									<td class="py-3"><Skeleton class="h-4 w-24" /></td>
+									<td class="py-3"><Skeleton class="h-4 w-20" /></td>
+									<td class="py-3 text-center"><Skeleton class="mx-auto h-4 w-24" /></td>
+								</tr>
+
 						{:else if expiredBalances.length === 0}
 							<tr>
 								<td colspan="5" class="py-8 text-center text-gray-500">
@@ -1424,7 +1413,8 @@
 			<!-- Mobile view - Expired Balances -->
 			<div class="grid gap-4 md:hidden">
 				{#if loadingExpired}
-					{#each Array(2) as _, i (i)}
+					{#each Array(2) as __, i (i)}
+					{__}
 						<div class="space-y-3 rounded-lg border p-4">
 							<Skeleton class="h-4 w-36" />
 							<Skeleton class="h-4 w-full" />

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

@@ -342,7 +342,8 @@
 	<Card.Content class="space-y-4">
 		{#if exceptionGroupsLoading}
 			<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
-				{#each Array(2) as _, i (i)}
+				{#each Array(2) as __, i (i)}
+					{__}
 					<Skeleton class="h-32 w-full" />
 				{/each}
 			</div>
@@ -567,7 +568,7 @@
 											disabled={!row.is_open}
 											class="flex h-9 w-24 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 Array.from({ length: 24 }, (_, hour) => hour) as hour (hour)}
 												{#each TIME15 as min (min)}
 													<option value="{String(hour).padStart(2, '0')}:{min}"
 														>{String(hour).padStart(2, '0')}:{min}</option
@@ -582,7 +583,7 @@
 											disabled={!row.is_open}
 											class="flex h-9 w-24 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 Array.from({ length: 24 }, (_, hour) => hour) as hour (hour)}
 												{#each TIME15 as min (min)}
 													<option value="{String(hour).padStart(2, '0')}:{min}"
 														>{String(hour).padStart(2, '0')}:{min}</option

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

@@ -361,7 +361,6 @@
 	}
 
 	let availableTags = $state<string[]>([]);
-	let _loadingTags = $state(true);
 	let isMobile = $state(false);
 
 	async function fetchTags() {
@@ -373,8 +372,6 @@
 			}
 		} catch (e) {
 			console.error('Failed to fetch tags:', e);
-		} finally {
-			_loadingTags = false;
 		}
 	}
 

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

@@ -297,7 +297,6 @@
 				</thead>
 				<tbody>
 					{#if loading}
-						{#each Array(2) as _, i (i)}
 							<tr class="border-b">
 								<td class="py-3"><Skeleton class="h-4 w-32" /></td>
 								<td class="py-3"><Skeleton class="h-4 w-48" /></td>
@@ -310,7 +309,19 @@
 									</div>
 								</td>
 							</tr>
-						{/each}
+							<tr class="border-b">
+								<td class="py-3"><Skeleton class="h-4 w-32" /></td>
+								<td class="py-3"><Skeleton class="h-4 w-48" /></td>
+								<td class="py-3"><Skeleton class="mx-auto h-4 w-12" /></td>
+								<td class="py-3"><Skeleton class="mx-auto h-4 w-12" /></td>
+								<td class="py-3 text-center">
+									<div class="flex justify-center gap-2">
+										<Skeleton class="h-8 w-16" />
+										<Skeleton class="h-8 w-16" />
+									</div>
+								</td>
+							</tr>
+
 					{:else}
 						{#each patchTests as pt (pt.id)}
 							<tr class="border-b hover:bg-gray-50">
@@ -346,7 +357,8 @@
 
 		<div class="space-y-4 md:hidden">
 			{#if loading}
-				{#each Array(2) as _, i (i)}
+				{#each Array(2) as __, i (i)}
+					{__}
 					<div class="space-y-3 rounded-lg border p-4">
 						<Skeleton class="h-5 w-32" />
 						<Skeleton class="h-4 w-48" />

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

@@ -366,7 +366,6 @@
 				</thead>
 				<tbody>
 					{#if servicesLoading}
-						{#each Array(3) as _, i (i)}
 							<tr class="border-b">
 								<td class="py-3"><Skeleton class="h-4 w-32" /></td>
 								<td class="py-3"><Skeleton class="h-4 w-48" /></td>
@@ -380,7 +379,33 @@
 									</div>
 								</td>
 							</tr>
-						{/each}
+							<tr class="border-b">
+								<td class="py-3"><Skeleton class="h-4 w-32" /></td>
+								<td class="py-3"><Skeleton class="h-4 w-48" /></td>
+								<td class="py-3 text-right"><Skeleton class="ml-auto h-4 w-16" /></td>
+								<td class="py-3 text-right"><Skeleton class="ml-auto h-4 w-20" /></td>
+								<td class="py-3 text-center"><Skeleton class="mx-auto h-4 w-16" /></td>
+								<td class="py-3 text-center">
+									<div class="flex justify-center gap-2">
+										<Skeleton class="h-8 w-16" />
+										<Skeleton class="h-8 w-16" />
+									</div>
+								</td>
+							</tr>
+							<tr class="border-b">
+								<td class="py-3"><Skeleton class="h-4 w-32" /></td>
+								<td class="py-3"><Skeleton class="h-4 w-48" /></td>
+								<td class="py-3 text-right"><Skeleton class="ml-auto h-4 w-16" /></td>
+								<td class="py-3 text-right"><Skeleton class="ml-auto h-4 w-20" /></td>
+								<td class="py-3 text-center"><Skeleton class="mx-auto h-4 w-16" /></td>
+								<td class="py-3 text-center">
+									<div class="flex justify-center gap-2">
+										<Skeleton class="h-8 w-16" />
+										<Skeleton class="h-8 w-16" />
+									</div>
+								</td>
+							</tr>
+
 					{:else}
 						{#each services as service (service.id)}
 							<tr class="border-b hover:bg-gray-50">
@@ -438,7 +463,8 @@
 
 		<div class="space-y-4 md:hidden">
 			{#if servicesLoading}
-				{#each Array(3) as _, i (i)}
+				{#each Array(3) as __, i (i)}
+					{__}
 					<div class="rounded-lg border p-4">
 						<div class="space-y-3">
 							<Skeleton class="h-5 w-32" />

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

@@ -552,7 +552,8 @@
 	<Card.Content class="space-y-4">
 		{#if loading}
 			<div class="space-y-3">
-				{#each Array(3) as _, i (i)}
+				{#each Array(3) as __, i (i)}
+					{__}
 					<Skeleton class="h-16 w-full" />
 				{/each}
 			</div>
@@ -665,7 +666,8 @@
 						>
 							Prev
 						</Button>
-						{#each Array(totalPages) as _, i (i)}
+						{#each Array(totalPages) as __, i (i)}
+					{__}
 							<Button
 								variant={currentPage === i + 1 ? 'default' : 'outline'}
 								size="sm"

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

@@ -507,7 +507,8 @@
 							Customer Relationship
 						</h3>
 						<div class="space-y-2">
-							{#each Array(5) as _, i (i)}
+							{#each Array(5) as __, i (i)}
+					{__}
 								<div class="h-10 animate-pulse rounded-md bg-gray-200"></div>
 							{/each}
 						</div>

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

@@ -176,7 +176,8 @@
 
 			<div class="mt-3 max-h-60 space-y-2 overflow-y-auto">
 				{#if initialLoad}
-					{#each Array(3) as _, i (i)}
+					{#each Array(3) as __, i (i)}
+					{__}
 						<div class="rounded bg-gray-50 p-2">
 							<Skeleton class="mb-1 h-4 w-32" />
 							<Skeleton class="h-3 w-48" />

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

@@ -31,7 +31,6 @@
 
 	let _reservationId = $state<string | null>(null);
 	let reservationExpiresAt = $state<Date | null>(null);
-	let _reservationCountdown = $state<string>('');
 	let isReserving = $state(false);
 	let reservedDuration = $state(0);
 	let reservedStartTime = $state<string | null>(null);
@@ -48,7 +47,7 @@
 					shortestServiceMinutes = Math.min(...durations);
 				}
 			}
-		} catch (_err) {
+		} catch {
 			// Silently handled - services list remains empty
 		}
 	}
@@ -82,7 +81,6 @@
 		// Clear local state first so a slow DELETE doesn't block the UI.
 		_reservationId = null;
 		reservationExpiresAt = null;
-		_reservationCountdown = '';
 		reservedDuration = 0;
 		reservedStartTime = null;
 		if (window.__walkInCountdownInterval) {
@@ -209,7 +207,7 @@
 			const dayEndTimeVal = minutesToTime(dayEndMinutesVal);
 
 			if (shouldApplyLunchProtection(dayStartTimeVal, dayEndTimeVal)) {
-				const { windowStart, windowEnd: _windowEnd } = calculateMiddleWindow(
+				const { windowStart } = calculateMiddleWindow(
 					dayStartTimeVal,
 					dayEndTimeVal
 				);
@@ -330,7 +328,6 @@
 
 		const updateCountdown = () => {
 			if (!reservationExpiresAt) {
-				_reservationCountdown = '';
 				return;
 			}
 
@@ -338,7 +335,6 @@
 			const diff = reservationExpiresAt.getTime() - now.getTime();
 
 			if (diff <= 0) {
-				_reservationCountdown = 'Expired';
 				_reservationId = null;
 				reservationExpiresAt = null;
 				toast.error('Slot released — please re-check availability');
@@ -348,10 +344,6 @@
 				showCreateModal = false;
 				return;
 			}
-
-			const minutes = Math.floor(diff / 60000);
-			const seconds = Math.floor((diff % 60000) / 1000);
-			_reservationCountdown = `${minutes}:${seconds.toString().padStart(2, '0')}`;
 		};
 
 		updateCountdown();

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

@@ -32,7 +32,6 @@
 		availableStartTime?: string;
 		reservationExpiresAt?: Date | null;
 		onBookingCreated?: () => void;
-		_onclose?: () => void;
 	}
 
 	let {
@@ -41,7 +40,6 @@
 		availableStartTime,
 		reservationExpiresAt,
 		onBookingCreated,
-		_onclose
 	}: Props = $props();
 
 	// =============== State ===============
@@ -313,7 +311,7 @@
 			if (response.ok) {
 				services = await response.json();
 			}
-		} catch (_err) {
+		} catch {
 			toast.error('Failed to load services');
 		} finally {
 			loadingServices = false;
@@ -558,7 +556,7 @@
 				const errorText = await res.text();
 				toast.error(`Failed to create booking: ${errorText}`);
 			}
-		} catch (_err) {
+		} catch {
 			toast.error('An error occurred while creating booking');
 		} finally {
 			submitting = false;
@@ -723,7 +721,8 @@
 							<div class="max-h-[300px] overflow-y-auto rounded-md border border-gray-200">
 								{#if loadingUsers}
 									<div class="space-y-2 p-2">
-										{#each Array(3) as _, i (i)}
+										{#each Array(3) as __, i (i)}
+					{__}
 											<Skeleton class="h-10 w-full" />
 										{/each}
 									</div>
@@ -836,7 +835,8 @@
 					<Card.Content class="space-y-4">
 						{#if loadingServices}
 							<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
-								{#each Array(4) as _, i (i)}
+								{#each Array(4) as __, i (i)}
+					{__}
 									<Skeleton class="h-28 w-full" />
 								{/each}
 							</div>
@@ -869,7 +869,8 @@
 								</div>
 								{#if loadingCustomServices}
 									<div class="space-y-2">
-										{#each Array(3) as _, i (i)}
+										{#each Array(3) as __, i (i)}
+					{__}
 											<Skeleton class="h-10 w-full" />
 										{/each}
 									</div>

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

@@ -423,7 +423,6 @@
 						</tr>
 					</thead>
 					<tbody class="divide-y divide-gray-200">
-						{#each Array(7) as _, i (i)}
 							<tr>
 								<td class="px-4 py-4">
 									<div class="flex items-center gap-2">
@@ -444,14 +443,135 @@
 									<Skeleton class="ml-auto h-4 w-12" />
 								</td>
 							</tr>
-						{/each}
+							<tr>
+								<td class="px-4 py-4">
+									<div class="flex items-center gap-2">
+										<Skeleton class="h-8 w-8 rounded-full" />
+										<Skeleton class="h-4 w-20" />
+									</div>
+								</td>
+								<td class="px-4 py-4 text-center">
+									<Skeleton class="mx-auto h-6 w-16 rounded-full" />
+								</td>
+								<td class="px-4 py-4">
+									<Skeleton class="h-4 w-20" />
+								</td>
+								<td class="px-4 py-4">
+									<Skeleton class="h-4 w-20" />
+								</td>
+								<td class="px-4 py-4 text-right">
+									<Skeleton class="ml-auto h-4 w-12" />
+								</td>
+							</tr>
+							<tr>
+								<td class="px-4 py-4">
+									<div class="flex items-center gap-2">
+										<Skeleton class="h-8 w-8 rounded-full" />
+										<Skeleton class="h-4 w-20" />
+									</div>
+								</td>
+								<td class="px-4 py-4 text-center">
+									<Skeleton class="mx-auto h-6 w-16 rounded-full" />
+								</td>
+								<td class="px-4 py-4">
+									<Skeleton class="h-4 w-20" />
+								</td>
+								<td class="px-4 py-4">
+									<Skeleton class="h-4 w-20" />
+								</td>
+								<td class="px-4 py-4 text-right">
+									<Skeleton class="ml-auto h-4 w-12" />
+								</td>
+							</tr>
+							<tr>
+								<td class="px-4 py-4">
+									<div class="flex items-center gap-2">
+										<Skeleton class="h-8 w-8 rounded-full" />
+										<Skeleton class="h-4 w-20" />
+									</div>
+								</td>
+								<td class="px-4 py-4 text-center">
+									<Skeleton class="mx-auto h-6 w-16 rounded-full" />
+								</td>
+								<td class="px-4 py-4">
+									<Skeleton class="h-4 w-20" />
+								</td>
+								<td class="px-4 py-4">
+									<Skeleton class="h-4 w-20" />
+								</td>
+								<td class="px-4 py-4 text-right">
+									<Skeleton class="ml-auto h-4 w-12" />
+								</td>
+							</tr>
+							<tr>
+								<td class="px-4 py-4">
+									<div class="flex items-center gap-2">
+										<Skeleton class="h-8 w-8 rounded-full" />
+										<Skeleton class="h-4 w-20" />
+									</div>
+								</td>
+								<td class="px-4 py-4 text-center">
+									<Skeleton class="mx-auto h-6 w-16 rounded-full" />
+								</td>
+								<td class="px-4 py-4">
+									<Skeleton class="h-4 w-20" />
+								</td>
+								<td class="px-4 py-4">
+									<Skeleton class="h-4 w-20" />
+								</td>
+								<td class="px-4 py-4 text-right">
+									<Skeleton class="ml-auto h-4 w-12" />
+								</td>
+							</tr>
+							<tr>
+								<td class="px-4 py-4">
+									<div class="flex items-center gap-2">
+										<Skeleton class="h-8 w-8 rounded-full" />
+										<Skeleton class="h-4 w-20" />
+									</div>
+								</td>
+								<td class="px-4 py-4 text-center">
+									<Skeleton class="mx-auto h-6 w-16 rounded-full" />
+								</td>
+								<td class="px-4 py-4">
+									<Skeleton class="h-4 w-20" />
+								</td>
+								<td class="px-4 py-4">
+									<Skeleton class="h-4 w-20" />
+								</td>
+								<td class="px-4 py-4 text-right">
+									<Skeleton class="ml-auto h-4 w-12" />
+								</td>
+							</tr>
+							<tr>
+								<td class="px-4 py-4">
+									<div class="flex items-center gap-2">
+										<Skeleton class="h-8 w-8 rounded-full" />
+										<Skeleton class="h-4 w-20" />
+									</div>
+								</td>
+								<td class="px-4 py-4 text-center">
+									<Skeleton class="mx-auto h-6 w-16 rounded-full" />
+								</td>
+								<td class="px-4 py-4">
+									<Skeleton class="h-4 w-20" />
+								</td>
+								<td class="px-4 py-4">
+									<Skeleton class="h-4 w-20" />
+								</td>
+								<td class="px-4 py-4 text-right">
+									<Skeleton class="ml-auto h-4 w-12" />
+								</td>
+							</tr>
+
 					</tbody>
 				</table>
 			</div>
 
 			<!-- Mobile Skeleton -->
 			<div class="space-y-3 md:hidden">
-				{#each Array(7) as _, i (i)}
+				{#each Array(7) as __, i (i)}
+					{__}
 					<div class="rounded-lg border p-4">
 						<div class="mb-3 flex items-center justify-between">
 							<div class="flex items-center gap-2">
@@ -500,34 +620,34 @@
 									<Checkbox bind:checked={row.is_open} />
 								</td>
 								<td class="py-2">
-									<select
-										bind:value={row.start_time}
-										disabled={!row.is_open}
-										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)}
-												<option value="{String(hour).padStart(2, '0')}:{min}"
-													>{String(hour).padStart(2, '0')}:{min}</option
-												>
+										<select
+											bind:value={row.start_time}
+											disabled={!row.is_open}
+											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.from({ length: 24 }, (_, hour) => hour) as hour (hour)}
+												{#each TIME15 as min (min)}
+													<option value="{String(hour).padStart(2, '0')}:{min}"
+														>{String(hour).padStart(2, '0')}:{min}</option
+													>
+												{/each}
 											{/each}
-										{/each}
-									</select>
+										</select>
 								</td>
 								<td class="py-2">
-									<select
-										bind:value={row.end_time}
-										disabled={!row.is_open}
-										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)}
-												<option value="{String(hour).padStart(2, '0')}:{min}"
-													>{String(hour).padStart(2, '0')}:{min}</option
-												>
+										<select
+											bind:value={row.end_time}
+											disabled={!row.is_open}
+											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.from({ length: 24 }, (_, hour) => hour) as hour (hour)}
+												{#each TIME15 as min (min)}
+													<option value="{String(hour).padStart(2, '0')}:{min}"
+														>{String(hour).padStart(2, '0')}:{min}</option
+													>
+												{/each}
 											{/each}
-										{/each}
-									</select>
+										</select>
 								</td>
 							</tr>
 						{/each}