feat(frontend): update layout, UI components, stores, and API route

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

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

frontend/src/app.css

@@ -144,3 +144,14 @@
 .scrollbar-hide::-webkit-scrollbar {
 	display: none;
 }
+
+/* Hide number input spinners across the app */
+input[type='number'].no-spin {
+	-moz-appearance: textfield;
+	appearance: textfield;
+}
+input[type='number'].no-spin::-webkit-outer-spin-button,
+input[type='number'].no-spin::-webkit-inner-spin-button {
+	-webkit-appearance: none;
+	margin: 0;
+}

frontend/src/lib/components/layout/NavBar.svelte

@@ -131,7 +131,7 @@
 						{#if isLoading}
 							<Skeleton class={`h-4 ${link.width} rounded`} />
 						{:else}
-							<a href={resolve(link.href)} class="font-medium text-gray-800 hover:text-primary"
+							<a href={link.href} class="font-medium text-gray-800 hover:text-primary"
 								>{link.label}</a
 							>
 						{/if}
@@ -208,7 +208,12 @@
 			tabindex="0"
 			aria-label="Close menu"
 			onclick={toggleMenu}
-			onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); toggleMenu(); } }}
+			onkeydown={(e) => {
+				if (e.key === 'Enter' || e.key === ' ') {
+					e.preventDefault();
+					toggleMenu();
+				}
+			}}
 		></div>
 	{/if}
 
@@ -225,7 +230,7 @@
 							<Skeleton class="h-4 w-full rounded" />
 						{:else}
 							<a
-								href={resolve(link.href)}
+								href={link.href}
 								class="block rounded px-3 py-2 text-center text-primary hover:text-gray-800"
 							>
 								{link.label}
@@ -324,7 +329,9 @@
 	.notification-badge {
 		opacity: 1;
 		transform: translateY(0);
-		transition: opacity 0.2s ease, transform 0.2s ease;
+		transition:
+			opacity 0.2s ease,
+			transform 0.2s ease;
 	}
 
 	.open .notification-badge {

frontend/src/lib/components/ui/checkbox/checkbox.svelte

@@ -17,7 +17,7 @@
 	bind:ref
 	data-slot="checkbox"
 	class={cn(
-		'peer flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input shadow-xs transition-shadow outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:bg-input/30 dark:aria-invalid:ring-destructive/40 dark:data-[state=checked]:bg-primary',
+		'peer flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input bg-white shadow-xs transition-shadow outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:bg-input/30 dark:aria-invalid:ring-destructive/40 dark:data-[state=checked]:bg-primary',
 		className
 	)}
 	bind:checked

frontend/src/lib/components/ui/map/MapClusterLayer.svelte

@@ -1,6 +1,7 @@
 <script lang="ts" generics="P extends GeoJSON.GeoJsonProperties">
 	import { getContext } from "svelte";
 	import MapLibreGL from "maplibre-gl";
+	import { generateUUID } from '$lib/utils/uuid';
 
 	interface Props {
 		/** GeoJSON FeatureCollection data or URL to fetch GeoJSON from */
@@ -40,7 +41,7 @@
 		isStyleReady: () => boolean;
 	}>("map");
 
-	const id = crypto.randomUUID();
+	const id = generateUUID();
 	const sourceId = $derived(`cluster-source-${id}`);
 	const clusterLayerId = $derived(`clusters-${id}`);
 	const clusterCountLayerId = $derived(`cluster-count-${id}`);

frontend/src/lib/components/ui/map/MapRoute.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { getContext } from "svelte";
 	import MapLibreGL from "maplibre-gl";
+	import { generateUUID } from '$lib/utils/uuid';
 
 	interface Props {
 		/** Optional unique identifier for the route layer */
@@ -35,7 +36,7 @@
 		onmouseenter,
 		onmouseleave,
 		interactive = true,
-		id = crypto.randomUUID(),
+		id = generateUUID(),
 	}: Props = $props();
 
 	const mapCtx = getContext<{

frontend/src/lib/stores/savedCards.svelte.ts

@@ -17,7 +17,10 @@ function createSavedCardsStore() {
         if (loading) return;
         loading = true;
         try {
-            const res = await globalThis.fetch('/api/user/payment-methods', { credentials: 'include' });
+            const headers: Record<string, string> = {};
+            const token = globalThis.localStorage?.getItem('authToken');
+            if (token) headers['Authorization'] = `Bearer ${token}`;
+            const res = await globalThis.fetch('/api/user/payment-methods', { headers });
             if (res.ok) {
                 cards = await res.json();
             } else {

frontend/src/lib/types/booking.ts

@@ -54,9 +54,9 @@ export type BookingStatus =
 	| 'completed'
 	| 'client_cancelled'
 	| 'we_cancelled'
-	| 're-schedule'
 	| 'no_show'
-	| 'no_deposit';
+	| 'pending_release'
+	| 'deposit_lapsed';
 
 export interface BookingService {
 	booking_id: string;

frontend/src/routes/api/[...path]/+server.ts

@@ -20,8 +20,8 @@ async function proxyRequest(request: Request, path: string) {
 		if (!['GET', 'HEAD'].includes(request.method)) {
 			const contentType = request.headers.get('content-type') || '';
 			if (contentType.includes('multipart/form-data')) {
-				body = request.body;
-				fetchOptions.duplex = 'half';
+				body = request.body as BodyInit;
+				(fetchOptions as Record<string, unknown>).duplex = 'half';
 			} else {
 				body = await request.text();
 			}