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>
|
||||
Reference in New Issue
Block a user