From 05690af87ee5af629b9f844a1f476bd7ed89c2b4 Mon Sep 17 00:00:00 2001
From: Stephen Adamson <popertots@gmail.com>
Date: Thu, 18 Jun 2026 16:27:15 +0100
Subject: [PATCH] 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                              | 11 +++++++++++
 frontend/src/lib/components/layout/NavBar.svelte  | 15 +++++++++++----
 .../lib/components/ui/checkbox/checkbox.svelte    |  2 +-
 .../lib/components/ui/map/MapClusterLayer.svelte  |  3 ++-
 .../src/lib/components/ui/map/MapRoute.svelte     |  3 ++-
 frontend/src/lib/stores/savedCards.svelte.ts      |  5 ++++-
 frontend/src/lib/types/booking.ts                 |  4 ++--
 frontend/src/routes/api/[...path]/+server.ts      |  4 ++--
 8 files changed, 35 insertions(+), 12 deletions(-)

diff --git a/frontend/src/app.css b/frontend/src/app.css
index df65406..3fafd65 100644
--- a/frontend/src/app.css
+++ b/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;
+}
diff --git a/frontend/src/lib/components/layout/NavBar.svelte b/frontend/src/lib/components/layout/NavBar.svelte
index d96f78f..b7fd950 100644
--- a/frontend/src/lib/components/layout/NavBar.svelte
+++ b/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 {
diff --git a/frontend/src/lib/components/ui/checkbox/checkbox.svelte b/frontend/src/lib/components/ui/checkbox/checkbox.svelte
index 3a7817d..7182eb1 100644
--- a/frontend/src/lib/components/ui/checkbox/checkbox.svelte
+++ b/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
diff --git a/frontend/src/lib/components/ui/map/MapClusterLayer.svelte b/frontend/src/lib/components/ui/map/MapClusterLayer.svelte
index 3f94274..e5d811f 100644
--- a/frontend/src/lib/components/ui/map/MapClusterLayer.svelte
+++ b/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}`);
diff --git a/frontend/src/lib/components/ui/map/MapRoute.svelte b/frontend/src/lib/components/ui/map/MapRoute.svelte
index ba01fb1..9ae58ff 100644
--- a/frontend/src/lib/components/ui/map/MapRoute.svelte
+++ b/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<{
diff --git a/frontend/src/lib/stores/savedCards.svelte.ts b/frontend/src/lib/stores/savedCards.svelte.ts
index 59ff1e0..008215d 100644
--- a/frontend/src/lib/stores/savedCards.svelte.ts
+++ b/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 {
diff --git a/frontend/src/lib/types/booking.ts b/frontend/src/lib/types/booking.ts
index 6ed53e9..c70e68f 100644
--- a/frontend/src/lib/types/booking.ts
+++ b/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;
diff --git a/frontend/src/routes/api/[...path]/+server.ts b/frontend/src/routes/api/[...path]/+server.ts
index 65dcce1..fab3219 100644
--- a/frontend/src/routes/api/[...path]/+server.ts
+++ b/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();
 			}