From 930e83344c0089c30c7e3b3eb606ba11d8a7439b Mon Sep 17 00:00:00 2001
From: Daniel Kirby <dkirby24.10@gmail.com>
Date: Fri, 5 Jun 2026 23:25:30 +0100
Subject: [PATCH] feat: add dashboard shell and shared components

---
 src/lib/components/app-sidebar.svelte     | 109 ++++++++++++++++++++
 src/lib/components/centre-switcher.svelte |  74 ++++++++++++++
 src/lib/components/login-form.svelte      | 116 ++++++++++++++++++++++
 src/lib/components/money-field.svelte     |  45 +++++++++
 src/lib/components/search-form.svelte     |  21 ++++
 src/routes/dashboard/+layout.svelte       | 108 ++++++++++++++++++++
 src/routes/dashboard/+page.svelte         |   0
 7 files changed, 473 insertions(+)
 create mode 100644 src/lib/components/app-sidebar.svelte
 create mode 100644 src/lib/components/centre-switcher.svelte
 create mode 100644 src/lib/components/login-form.svelte
 create mode 100644 src/lib/components/money-field.svelte
 create mode 100644 src/lib/components/search-form.svelte
 create mode 100644 src/routes/dashboard/+layout.svelte
 create mode 100644 src/routes/dashboard/+page.svelte

diff --git a/src/lib/components/app-sidebar.svelte b/src/lib/components/app-sidebar.svelte
new file mode 100644
index 0000000..f05f719
--- /dev/null
+++ b/src/lib/components/app-sidebar.svelte
@@ -0,0 +1,109 @@
+<script lang="ts" module>
+	const data = {
+		navMain: [
+			{
+				title: 'Management',
+				url: '/dashboard',
+				items: [
+					{
+						title: 'Dashboard',
+						url: '/dashboard'
+					},
+					{
+						title: 'Admins',
+						url: '/dashboard/admins'
+					},
+					{
+						title: 'Clients',
+						url: '/dashboard/clients'
+					},
+					{
+						title: 'Addresses',
+						url: '/dashboard/addresses'
+					},
+					{
+						title: 'Contacts',
+						url: '/dashboard/contacts'
+					},
+					{
+						title: 'Bookings',
+						url: '/dashboard/bookings'
+					},
+					{
+						title: 'Rooms',
+						url: '/dashboard/rooms'
+					},
+					{
+						title: 'Services',
+						url: '/dashboard/services'
+					},
+					{
+						title: 'Invoices',
+						url: '/dashboard/invoices'
+					},
+					{
+						title: 'Contracts',
+						url: '/dashboard/contracts'
+					}
+				]
+			}
+		]
+	} as const;
+</script>
+
+<script lang="ts">
+	import { resolve } from '$app/paths';
+	import { page } from '$app/state';
+	import CentreSwitcher from './centre-switcher.svelte';
+	import SearchForm from './search-form.svelte';
+	import * as Sidebar from '$lib/components/ui/sidebar/index.js';
+	import type { ComponentProps } from 'svelte';
+
+	let { ref = $bindable(null), ...restProps }: ComponentProps<typeof Sidebar.Root> = $props();
+
+	type NavUrl = (typeof data.navMain)[number]['items'][number]['url'];
+
+	function navHref(url: NavUrl) {
+		return resolve(url);
+	}
+
+	function isActive(url: NavUrl) {
+		const resolvedUrl: string = navHref(url);
+		const pathname: string = page.url.pathname;
+
+		if (resolvedUrl === '/dashboard') {
+			return pathname === resolvedUrl;
+		}
+
+		return pathname === resolvedUrl || pathname.startsWith(`${resolvedUrl}/`);
+	}
+</script>
+
+<Sidebar.Root {...restProps} bind:ref>
+	<Sidebar.Header>
+		<CentreSwitcher />
+		<SearchForm />
+	</Sidebar.Header>
+	<Sidebar.Content>
+		<!-- We create a Sidebar.Group for each parent. -->
+		{#each data.navMain as group (group.title)}
+			<Sidebar.Group>
+				<Sidebar.GroupLabel>{group.title}</Sidebar.GroupLabel>
+				<Sidebar.GroupContent>
+					<Sidebar.Menu>
+						{#each group.items as item (item.title)}
+							<Sidebar.MenuItem>
+								<Sidebar.MenuButton isActive={isActive(item.url)}>
+									{#snippet child({ props })}
+										<a href={navHref(item.url)} {...props}>{item.title}</a>
+									{/snippet}
+								</Sidebar.MenuButton>
+							</Sidebar.MenuItem>
+						{/each}
+					</Sidebar.Menu>
+				</Sidebar.GroupContent>
+			</Sidebar.Group>
+		{/each}
+	</Sidebar.Content>
+	<Sidebar.Rail />
+</Sidebar.Root>
diff --git a/src/lib/components/centre-switcher.svelte b/src/lib/components/centre-switcher.svelte
new file mode 100644
index 0000000..7477044
--- /dev/null
+++ b/src/lib/components/centre-switcher.svelte
@@ -0,0 +1,74 @@
+<script lang="ts">
+	import Building2Icon from '@lucide/svelte/icons/building-2';
+	import CheckIcon from '@lucide/svelte/icons/check';
+	import ChevronsUpDownIcon from '@lucide/svelte/icons/chevrons-up-down';
+	import * as DropdownMenu from '$lib/components/ui/dropdown-menu/index.js';
+	import * as Sidebar from '$lib/components/ui/sidebar/index.js';
+
+	type Centre = {
+		name: string;
+		workspace: string;
+	};
+
+	const centres: Centre[] = [
+		{
+			name: 'Steel City Stadium',
+			workspace: 'Blueprint Workspace'
+		},
+		{
+			name: 'Lodmund Court',
+			workspace: 'Blueprint Workspace'
+		}
+	];
+
+	let selectedCentre = $state(centres[0]);
+</script>
+
+<Sidebar.Menu>
+	<Sidebar.MenuItem>
+		<DropdownMenu.Root>
+			<DropdownMenu.Trigger>
+				{#snippet child({ props })}
+					<Sidebar.MenuButton
+						size="lg"
+						class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+						{...props}
+					>
+						<div
+							class="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground"
+						>
+							<Building2Icon class="size-4" />
+						</div>
+						<div class="grid flex-1 text-left text-sm leading-tight">
+							<span class="truncate font-semibold">{selectedCentre.name}</span>
+							<span class="truncate text-xs">{selectedCentre.workspace}</span>
+						</div>
+						<ChevronsUpDownIcon class="ms-auto" />
+					</Sidebar.MenuButton>
+				{/snippet}
+			</DropdownMenu.Trigger>
+			<DropdownMenu.Content class="w-(--bits-dropdown-menu-anchor-width)" align="start">
+				{#each centres as centre (centre.name)}
+					<DropdownMenu.Item
+						onSelect={() => (selectedCentre = centre)}
+						class="gap-2 focus:bg-sidebar-accent focus:text-sidebar-accent-foreground data-[selected=true]:bg-sidebar-accent data-[selected=true]:text-sidebar-accent-foreground"
+						data-selected={centre.name === selectedCentre.name}
+					>
+						<div
+							class="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground group-focus/dropdown-menu-item:bg-sidebar-primary group-focus/dropdown-menu-item:text-sidebar-primary-foreground"
+						>
+							<Building2Icon class="!text-sidebar-primary-foreground size-4" />
+						</div>
+						<div class="grid flex-1 text-left text-sm leading-tight">
+							<span class="truncate font-semibold">{centre.name}</span>
+							<span class="truncate text-xs text-muted-foreground">{centre.workspace}</span>
+						</div>
+						{#if centre.name === selectedCentre.name}
+							<CheckIcon class="ms-auto" />
+						{/if}
+					</DropdownMenu.Item>
+				{/each}
+			</DropdownMenu.Content>
+		</DropdownMenu.Root>
+	</Sidebar.MenuItem>
+</Sidebar.Menu>
diff --git a/src/lib/components/login-form.svelte b/src/lib/components/login-form.svelte
new file mode 100644
index 0000000..3eb89d4
--- /dev/null
+++ b/src/lib/components/login-form.svelte
@@ -0,0 +1,116 @@
+<script lang="ts">
+	import { toast } from 'svelte-sonner';
+	import GalleryVerticalEndIcon from "@lucide/svelte/icons/gallery-vertical-end";
+	import { Field as FormField, Control, FieldErrors } from 'formsnap';
+	import * as Field from '$lib/components/ui/field/index.js';
+	import { superForm, type SuperValidated } from 'sveltekit-superforms';
+	import { zod4Client } from 'sveltekit-superforms/adapters';
+	import type { HTMLAttributes } from "svelte/elements";
+	import { Input } from "$lib/components/ui/input/index.js";
+	import { Button } from "$lib/components/ui/button/index.js";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import { loginSchema, type LoginSchema } from '$lib/schemas/auth';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		form: initialForm,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		form: SuperValidated<LoginSchema['_output'], string>;
+	} = $props();
+
+	const id = $props.id();
+	// svelte-ignore state_referenced_locally
+	const loginForm = superForm(initialForm, {
+		validators: zod4Client(loginSchema),
+		resetForm: false,
+		onUpdated: ({ form }) => {
+			if (!form.valid) {
+				toast.error(form.message ?? firstError(form.errors), {
+					id: 'login-error',
+					position: 'top-center'
+				});
+			}
+		},
+		onError: ({ result }) => {
+			toast.error(result.error.message, {
+				id: 'login-error',
+				position: 'top-center'
+			});
+		}
+	});
+
+	const { form: formData, enhance } = loginForm;
+
+	function firstError(errors: Record<string, unknown>) {
+		for (const value of Object.values(errors)) {
+			if (Array.isArray(value) && typeof value[0] === 'string') {
+				return value[0];
+			}
+		}
+
+		return 'Check the highlighted fields.';
+	}
+</script>
+
+<div class={cn("flex flex-col gap-6", className)} bind:this={ref} {...restProps}>
+	<form method="POST" use:enhance>
+		<Field.Group>
+			<div class="flex flex-col items-center gap-2 text-center">
+				<div class="flex flex-col items-center gap-2 font-medium">
+					<div class="bg-primary text-primary-foreground flex size-9 items-center justify-center rounded-md">
+						<GalleryVerticalEndIcon class="size-6" />
+					</div>
+					<span class="sr-only">Clearity</span>
+				</div>
+				<h1 class="text-xl font-bold">Sign in to Clearity</h1>
+				<Field.Description>
+					Use the administrator account created for this workspace.
+				</Field.Description>
+			</div>
+			<FormField form={loginForm} name="email">
+				<Field.Field>
+					<Control id="email-{id}">
+						{#snippet children({ props })}
+							<Field.Label>Email</Field.Label>
+							<Input
+								{...props}
+								type="email"
+								autocomplete="email"
+								placeholder="admin@example.com"
+								bind:value={$formData.email}
+							/>
+						{/snippet}
+					</Control>
+					<Field.Error><FieldErrors /></Field.Error>
+				</Field.Field>
+			</FormField>
+			<FormField form={loginForm} name="password">
+				<Field.Field>
+					<Control id="password-{id}">
+						{#snippet children({ props })}
+							<Field.Label>Password</Field.Label>
+							<Input
+								{...props}
+								type="password"
+								autocomplete="current-password"
+								bind:value={$formData.password}
+							/>
+						{/snippet}
+					</Control>
+					<Field.Error><FieldErrors /></Field.Error>
+				</Field.Field>
+				<Field.Description>
+					New users are created manually by an administrator; public registration is disabled.
+				</Field.Description>
+			</FormField>
+			<Field.Field>
+				<Button type="submit" class="w-full">Sign in</Button>
+			</Field.Field>
+		</Field.Group>
+	</form>
+	<Field.Description class="px-6 text-center">
+		Business and sport centre management for clients, bookings, rooms, services, and invoices.
+	</Field.Description>
+</div>
diff --git a/src/lib/components/money-field.svelte b/src/lib/components/money-field.svelte
new file mode 100644
index 0000000..7474e8f
--- /dev/null
+++ b/src/lib/components/money-field.svelte
@@ -0,0 +1,45 @@
+<script lang="ts">
+	/* eslint-disable @typescript-eslint/no-explicit-any */
+	import { Field as FormField, Control, FieldErrors } from 'formsnap';
+	import * as Field from '$lib/components/ui/field/index.js';
+	import * as InputGroup from '$lib/components/ui/input-group/index.js';
+
+	let {
+		form,
+		data,
+		name,
+		label,
+		id
+	}: {
+		form: any;
+		data: any;
+		name: string;
+		label: string;
+		id: string;
+	} = $props();
+</script>
+
+<FormField {form} {name}>
+	<Field.Field>
+		<Control {id}>
+			{#snippet children({ props })}
+				<Field.Label>{label}</Field.Label>
+				<InputGroup.Root>
+					<InputGroup.Addon>
+						<InputGroup.Text>£</InputGroup.Text>
+					</InputGroup.Addon>
+					<InputGroup.Input
+						{...props}
+						type="number"
+						min="0"
+						step="0.01"
+						inputmode="decimal"
+						placeholder="0.00"
+						bind:value={$data[name]}
+					/>
+				</InputGroup.Root>
+			{/snippet}
+		</Control>
+		<Field.Error><FieldErrors /></Field.Error>
+	</Field.Field>
+</FormField>
diff --git a/src/lib/components/search-form.svelte b/src/lib/components/search-form.svelte
new file mode 100644
index 0000000..ecad833
--- /dev/null
+++ b/src/lib/components/search-form.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { Label } from "$lib/components/ui/label/index.js";
+	import * as Sidebar from "$lib/components/ui/sidebar/index.js";
+	import type { WithElementRef } from "$lib/utils.js";
+	import SearchIcon from "@lucide/svelte/icons/search";
+	import type { HTMLFormAttributes } from "svelte/elements";
+
+	let { ref = $bindable(null), ...restProps }: WithElementRef<HTMLFormAttributes> = $props();
+</script>
+
+<form bind:this={ref} {...restProps}>
+	<Sidebar.Group class="py-0">
+		<Sidebar.GroupContent class="relative">
+			<Label for="search" class="sr-only">Search</Label>
+			<Sidebar.Input id="search" placeholder="Search the docs..." class="ps-8" />
+			<SearchIcon
+				class="pointer-events-none absolute start-2 top-1/2 size-4 -translate-y-1/2 opacity-50 select-none"
+			/>
+		</Sidebar.GroupContent>
+	</Sidebar.Group>
+</form>
diff --git a/src/routes/dashboard/+layout.svelte b/src/routes/dashboard/+layout.svelte
new file mode 100644
index 0000000..f2a1caa
--- /dev/null
+++ b/src/routes/dashboard/+layout.svelte
@@ -0,0 +1,108 @@
+<script lang="ts">
+	import { page } from '$app/state';
+	import AppSidebar from '$lib/components/app-sidebar.svelte';
+	import * as Breadcrumb from '$lib/components/ui/breadcrumb/index.js';
+	import { Separator } from '$lib/components/ui/separator/index.js';
+	import * as Sidebar from '$lib/components/ui/sidebar/index.js';
+
+	const { children } = $props();
+
+	type BreadcrumbItem = {
+		label: string;
+		href?: string;
+	};
+
+	const segmentLabels: Record<string, string> = {
+		dashboard: 'Dashboard',
+		admins: 'Admins',
+		clients: 'Clients',
+		addresses: 'Addresses',
+		contacts: 'Contacts',
+		bookings: 'Bookings',
+		rooms: 'Rooms',
+		services: 'Services',
+		invoices: 'Invoices',
+		contracts: 'Contracts'
+	};
+
+	function titleCase(segment: string) {
+		return segment
+			.split('-')
+			.filter(Boolean)
+			.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+			.join(' ');
+	}
+
+	function recordLabel(value: unknown) {
+		if (typeof value !== 'object' || value === null) return null;
+
+		const record = value as Record<string, unknown>;
+
+		for (const key of ['name', 'title', 'invoiceNumber', 'label'] as const) {
+			if (key in record) return String(record[key]);
+		}
+
+		return null;
+	}
+
+	function dynamicSegmentLabel(
+		paramName: string,
+		fallback: string,
+		routeSegments: string[],
+		index: number
+	) {
+		const routeParent = routeSegments[index - 1];
+		const singularRouteParent = routeParent?.replace(/s$/, '');
+		const data = page.data as Record<string, unknown>;
+		const params = page.params as Record<string, string | undefined>;
+		const routeRecord = singularRouteParent ? data[singularRouteParent] : undefined;
+
+		return recordLabel(routeRecord) ?? params[paramName] ?? fallback;
+	}
+
+	let breadcrumbs = $derived.by<BreadcrumbItem[]>(() => {
+		const pathSegments = page.url.pathname.split('/').filter(Boolean);
+		const routeSegments = page.route.id?.split('/').filter(Boolean) ?? pathSegments;
+
+		return pathSegments.map((segment, index) => {
+			const routeSegment = routeSegments[index];
+			const dynamicMatch = routeSegment?.match(/^\[(.+)\]$/);
+			const label = dynamicMatch
+				? dynamicSegmentLabel(dynamicMatch[1], segment, routeSegments, index)
+				: (segmentLabels[segment] ?? titleCase(segment));
+			const href = `/${pathSegments.slice(0, index + 1).join('/')}`;
+			const isLast = index === pathSegments.length - 1;
+
+			return isLast ? { label } : { label, href };
+		});
+	});
+</script>
+
+<Sidebar.Provider>
+	<AppSidebar />
+	<Sidebar.Inset>
+		<header class="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+			<Sidebar.Trigger class="-ms-1" />
+			<Separator orientation="vertical" class="me-2 h-4" />
+			<Breadcrumb.Root>
+				<Breadcrumb.List>
+					{#each breadcrumbs as item, index (`${item.href ?? page.url.pathname}:${item.label}`)}
+						{#if index > 0}
+							<Breadcrumb.Separator class="hidden md:block" />
+						{/if}
+						<Breadcrumb.Item class={index === 0 ? 'hidden md:block' : undefined}>
+							{#if item.href}
+								<Breadcrumb.Link href={item.href}>{item.label}</Breadcrumb.Link>
+							{:else}
+								<Breadcrumb.Page>{item.label}</Breadcrumb.Page>
+							{/if}
+						</Breadcrumb.Item>
+					{/each}
+				</Breadcrumb.List>
+			</Breadcrumb.Root>
+		</header>
+		<div class="flex flex-1 flex-col gap-4 p-4">
+			{@render children()}
+		</div>
+	</Sidebar.Inset>
+</Sidebar.Provider>
diff --git a/src/routes/dashboard/+page.svelte b/src/routes/dashboard/+page.svelte
new file mode 100644
index 0000000..e69de29