feat: add dashboard shell and shared components
This commit is contained in:
@@ -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>
|
||||||
@@ -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>
|
||||||
@@ -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>
|
||||||
@@ -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>
|
||||||
@@ -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>
|
||||||
@@ -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>
|
||||||
Reference in New Issue
Block a user