Better skeleton use, live services in booking

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

@@ -6,8 +6,6 @@
 	import { Button } from '$lib/components/ui/button';
 	import * as Card from '$lib/components/ui/card';
 	import { Input } from '$lib/components/ui/input';
-	import { Label } from '$lib/components/ui/label';
-	import { Textarea } from '$lib/components/ui/textarea';
 	import { Separator } from '$lib/components/ui/separator';
 	import * as Modal from '$lib/components/ui/dialog';
 	import * as AlertDialog from '$lib/components/ui/alert-dialog';
@@ -18,19 +16,32 @@
 	import { toast } from 'svelte-sonner';
 	import { Skeleton } from '$lib/components/ui/skeleton';
 
-	const user = authStore.currentUser;
-	if (browser) {
-		if (!user || user.role !== 'admin') {
-			setTimeout(() => {
-				goto('/', { replaceState: true });
-			}, 5000);
-		}
-	}
+	// =============== Auth & Permissions ===============
+	let pageState = $state<'loading' | 'authorized' | 'unauthorized'>('loading');
 
-	// =============== Alert Dialog State ===============
-	let showSaveDefaultHoursAlert = $state(false);
-	let showDeleteExceptionAlert = $state(false);
-	let exceptionToDelete = $state<number | undefined>(undefined);
+	// Check permissions immediately and on auth changes
+	$effect(() => {
+		if (!browser) return;
+
+		if (authStore.isLoading) {
+			pageState = 'loading';
+			return;
+		}
+
+		if (!authStore.isAuthenticated) {
+			pageState = 'unauthorized';
+			goto('/login', { replaceState: true });
+			return;
+		}
+
+		if (authStore.currentUser?.role !== 'admin') {
+			pageState = 'unauthorized';
+			goto('/', { replaceState: true });
+			return;
+		}
+
+		pageState = 'authorized';
+	});
 
 	// =============== Image Upload ===============
 	let uploading = $state(false);
@@ -122,13 +133,18 @@
 	}
 
 	async function fetchDefaultHours() {
+		if (pageState !== 'authorized') return;
+
 		defaultHoursIsLoading = true;
 		let error = null;
 
 		try {
 			const response = await fetch('/api/scheduling/default-hours', {
 				method: 'GET',
-				headers: { 'Content-Type': 'application/json' }
+				headers: {
+					'Content-Type': 'application/json',
+					Authorization: `Bearer ${authStore.currentToken}`
+				}
 			});
 
 			if (response.ok) {
@@ -154,7 +170,9 @@
 	}
 
 	$effect(() => {
-		fetchDefaultHours();
+		if (pageState === 'authorized') {
+			fetchDefaultHours();
+		}
 	});
 
 	type ExceptionGroup = {
@@ -205,17 +223,6 @@
 	let defaultHoursDraft = $state<WorkingHourRow[]>([]);
 	let showDefaultHoursModal = $state(false);
 
-	// Mocked load - in a real app, this would fetch from your backend
-	async function loadWorkingHours() {
-		loadingHours = true;
-		// Simulate loading delay
-		await new Promise((r) => setTimeout(r, 500));
-		// Set defaultHours to the initial demo values (in a real app, it would be API data)
-		loadingHours = false;
-	}
-
-	onMount(loadWorkingHours);
-
 	let showExceptionModal = $state(false);
 
 	const dayNames = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
@@ -251,7 +258,7 @@
 				method: 'PUT',
 				headers: {
 					'Content-Type': 'application/json',
-					Authorization: `Bearer ${localStorage.getItem('authToken')}`
+					Authorization: `Bearer ${authStore.currentToken}`
 				},
 				body: JSON.stringify(payload)
 			});
@@ -488,13 +495,15 @@
 
 	// Fetch services from API
 	async function fetchServices() {
+		if (pageState !== 'authorized') return;
+
 		servicesLoading = true;
 		try {
 			const response = await fetch('/api/admin/services', {
 				method: 'GET',
 				headers: {
 					'Content-Type': 'application/json',
-					Authorization: `Bearer ${localStorage.getItem('authToken')}`
+					Authorization: `Bearer ${authStore.currentToken}`
 				}
 			});
 
@@ -521,7 +530,7 @@
 			const response = await fetch(`/api/admin/services/${serviceId}/toggle`, {
 				method: 'PUT',
 				headers: {
-					Authorization: `Bearer ${localStorage.getItem('authToken')}`
+					Authorization: `Bearer ${authStore.currentToken}`
 				}
 			});
 
@@ -553,7 +562,7 @@
 			const response = await fetch(`/api/admin/services/${serviceId}`, {
 				method: 'DELETE',
 				headers: {
-					Authorization: `Bearer ${localStorage.getItem('authToken')}`
+					Authorization: `Bearer ${authStore.currentToken}`
 				}
 			});
 
@@ -582,11 +591,182 @@
 
 	// Fetch services on component mount
 	$effect(() => {
-		fetchServices();
+		if (pageState === 'authorized') {
+			fetchServices();
+		}
 	});
+
+	// =============== Alert Dialog State ===============
+	let showSaveDefaultHoursAlert = $state(false);
+	let showDeleteExceptionAlert = $state(false);
+	let exceptionToDelete = $state<number | undefined>(undefined);
 </script>
 
-{#if user?.role == 'admin'}
+{#if pageState === 'loading'}
+	<!-- Full page skeleton loading -->
+	<div class="mx-auto max-w-6xl space-y-6 p-6">
+		<!-- Header Skeleton -->
+		<div class="mb-8 flex items-center justify-center text-center">
+			<div class="space-y-2">
+				<Skeleton class="h-8 w-64" />
+				<Skeleton class="h-4 w-96" />
+			</div>
+		</div>
+
+		<!-- Image Upload Card Skeleton -->
+		<Card.Root>
+			<Card.Header>
+				<Skeleton class="h-6 w-32" />
+				<Skeleton class="h-4 w-48" />
+			</Card.Header>
+			<Card.Content class="space-y-4">
+				<Skeleton class="h-32 w-full" />
+				<div class="flex justify-end">
+					<Skeleton class="h-10 w-40" />
+				</div>
+			</Card.Content>
+		</Card.Root>
+
+		<!-- Users & Bookings Grid Skeleton -->
+		<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+			<!-- Users Card Skeleton -->
+			<Card.Root>
+				<Card.Header>
+					<Skeleton class="h-6 w-20" />
+					<Skeleton class="h-4 w-40" />
+				</Card.Header>
+				<Card.Content class="space-y-4">
+					<div class="flex gap-2">
+						<Skeleton class="h-10 flex-1" />
+						<Skeleton class="h-10 w-20" />
+					</div>
+					<div class="space-y-2">
+						{#each Array(3) as _, i}
+							<Skeleton class="h-16 w-full" />
+						{/each}
+					</div>
+				</Card.Content>
+			</Card.Root>
+
+			<!-- Bookings Card Skeleton -->
+			<Card.Root>
+				<Card.Header>
+					<Skeleton class="h-6 w-24" />
+					<Skeleton class="h-4 w-40" />
+				</Card.Header>
+				<Card.Content class="space-y-4">
+					<div class="flex gap-2">
+						<Skeleton class="h-10 flex-1" />
+						<Skeleton class="h-10 w-20" />
+					</div>
+					<div class="space-y-2">
+						{#each Array(3) as _, i}
+							<Skeleton class="h-16 w-full" />
+						{/each}
+					</div>
+				</Card.Content>
+			</Card.Root>
+		</div>
+
+		<!-- Holiday Hours Card Skeleton -->
+		<Card.Root>
+			<Card.Header>
+				<Skeleton class="h-6 w-32" />
+				<Skeleton class="h-4 w-64" />
+			</Card.Header>
+			<Card.Content class="space-y-4">
+				<div class="flex justify-between">
+					<Skeleton class="h-10 w-32" />
+				</div>
+				<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+					{#each Array(2) as _, i}
+						<Skeleton class="h-32 w-full" />
+					{/each}
+				</div>
+			</Card.Content>
+		</Card.Root>
+
+		<!-- Working Hours Card Skeleton -->
+		<Card.Root>
+			<Card.Header>
+				<Skeleton class="h-6 w-32" />
+				<Skeleton class="h-4 w-64" />
+			</Card.Header>
+			<Card.Content class="space-y-4">
+				<div class="flex justify-between">
+					<Skeleton class="h-6 w-40" />
+					<Skeleton class="h-10 w-24" />
+				</div>
+				<div class="w-full overflow-x-auto">
+					<table class="w-full table-auto">
+						<thead>
+							<tr class="text-left text-xs text-gray-500">
+								<th class="py-2"><Skeleton class="h-4 w-12" /></th>
+								<th class="py-2"><Skeleton class="h-4 w-16" /></th>
+								<th class="py-2"><Skeleton class="h-4 w-16" /></th>
+								<th class="py-2"><Skeleton class="h-4 w-16" /></th>
+							</tr>
+						</thead>
+						<tbody>
+							{#each Array(7) as _, i}
+								<tr class="border-t">
+									<td class="py-2"><Skeleton class="h-4 w-20" /></td>
+									<td class="py-2"><Skeleton class="h-4 w-12" /></td>
+									<td class="py-2"><Skeleton class="h-4 w-12" /></td>
+									<td class="py-2"><Skeleton class="h-4 w-12" /></td>
+								</tr>
+							{/each}
+						</tbody>
+					</table>
+				</div>
+			</Card.Content>
+		</Card.Root>
+
+		<!-- Services Management Card Skeleton -->
+		<Card.Root>
+			<Card.Header>
+				<Skeleton class="h-6 w-40" />
+				<Skeleton class="h-4 w-80" />
+			</Card.Header>
+			<Card.Content class="space-y-4">
+				<div class="flex justify-between">
+					<Skeleton class="h-10 w-32" />
+				</div>
+				<div class="hidden w-full overflow-x-auto md:block">
+					<table class="w-full table-auto border-collapse text-sm">
+						<thead>
+							<tr class="border-b text-left text-xs text-gray-500">
+								<th class="py-3"><Skeleton class="h-4 w-20" /></th>
+								<th class="py-3"><Skeleton class="h-4 w-32" /></th>
+								<th class="py-3"><Skeleton class="h-4 w-16" /></th>
+								<th class="py-3"><Skeleton class="h-4 w-20" /></th>
+								<th class="py-3"><Skeleton class="h-4 w-16" /></th>
+								<th class="py-3"><Skeleton class="h-4 w-24" /></th>
+							</tr>
+						</thead>
+						<tbody>
+							{#each Array(3) as _, 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>
+									<td class="py-3"><Skeleton class="h-4 w-16" /></td>
+									<td class="py-3"><Skeleton class="h-4 w-20" /></td>
+									<td class="py-3"><Skeleton class="h-4 w-16" /></td>
+									<td class="py-3">
+										<div class="flex justify-center gap-2">
+											<Skeleton class="h-8 w-16" />
+											<Skeleton class="h-8 w-16" />
+										</div>
+									</td>
+								</tr>
+							{/each}
+						</tbody>
+					</table>
+				</div>
+			</Card.Content>
+		</Card.Root>
+	</div>
+{:else if pageState === 'authorized'}
 	<div class="mx-auto max-w-6xl space-y-6 p-6">
 		<div class="mb-4 flex items-center justify-center text-center">
 			<div>
@@ -1279,20 +1459,4 @@
 			</Modal.Content>
 		</Modal.Root>
 	{/if}
-{:else if !user}
-	<div class="mx-auto max-w-6xl space-y-6 p-6">
-		<div class="text-center">
-			<h1 class="text-3xl font-bold">Checking your permissions…</h1>
-		</div>
-	</div>
-{:else}
-	<div class="mx-auto max-w-6xl space-y-6 p-6">
-		<div class="text-center">
-			<h1 class="text-3xl font-bold">403 Forbidden</h1>
-			<p class="text-gray-600">You do not have permission to access this page.</p>
-			<p class="text-gray-600">
-				Redirecting you to the <a href="/">homepage</a> in 5 seconds…
-			</p>
-		</div>
-	</div>
 {/if}