feat: add client workspace management

2026-06-05 23:25:36 +01:00
parent 930e83344c
commit 631a5112f4
72 changed files with 6423 additions and 0 deletions
@@ -0,0 +1,48 @@
+import { asc, eq, isNull } from 'drizzle-orm';
+import { message, superValidate } from 'sveltekit-superforms/server';
+import { zod4 } from 'sveltekit-superforms/adapters';
+import { db } from '$lib/server/db';
+import { contacts, clients } from '$lib/server/db/schema';
+import { archiveSchema } from '$lib/schemas/shared.schema';
+import type { Actions, PageServerLoad } from './$types';
+
+async function loadOptions() {
+	const clientRows = await db
+		.select({ id: clients.id, name: clients.name })
+		.from(clients)
+		.where(isNull(clients.archivedAt))
+		.orderBy(asc(clients.name));
+
+	return {
+		clients: clientRows.map((client) => ({ label: client.name, value: client.id }))
+	};
+}
+
+export const load: PageServerLoad = async () => {
+	const records = await db
+		.select()
+		.from(contacts)
+		.where(isNull(contacts.archivedAt))
+		.orderBy(asc(contacts.name));
+
+	return {
+		records,
+		options: await loadOptions(),
+		archiveForm: await superValidate(zod4(archiveSchema), { id: 'contacts-archive' })
+	};
+};
+
+export const actions: Actions = {
+	archive: async (event) => {
+		const form = await superValidate(event, zod4(archiveSchema), { id: 'contacts-archive' });
+
+		if (!form.valid) return message(form, 'Contact id is required.', { status: 400 });
+
+		await db
+			.update(contacts)
+			.set({ archivedAt: new Date(), updatedAt: new Date() })
+			.where(eq(contacts.id, form.data.id));
+
+		return message(form, 'Contact archived.');
+	}
+};
@@ -0,0 +1,97 @@
+<script lang="ts">
+	import ContactsTable from './contacts-table.svelte';
+	import ArchiveContactDialog from './archive-contact-dialog.svelte';
+	import { toast } from 'svelte-sonner';
+	import { superForm } from 'sveltekit-superforms';
+	import { zod4Client } from 'sveltekit-superforms/adapters';
+	import { archiveSchema } from '$lib/schemas/shared.schema';
+	import type { PageData } from './$types';
+	type RecordRow = PageData['records'][number];
+	let { data }: { data: PageData } = $props();
+
+	let archivingId = $state<string | null>(null);
+
+	const archivingRecord = $derived(data.records.find((record) => record.id === archivingId));
+
+	// svelte-ignore state_referenced_locally
+	const archiveForm = superForm(data.archiveForm, {
+		validators: zod4Client(archiveSchema),
+		resetForm: false,
+		onUpdated: ({ form }) => handleFormToast(form, 'contacts-archive', () => (archivingId = null)),
+		onError: ({ result }) => toast.error(result.error.message, { id: 'contacts-archive' })
+	});
+
+	const { form: archiveData, enhance: enhanceArchive } = archiveForm;
+
+	function handleFormToast(
+		form: { valid: boolean; message?: string; errors: Record<string, unknown> },
+		id: string,
+		onSuccess: () => void
+	) {
+		if (form.valid) {
+			if (form.message) toast.success(form.message, { id });
+			onSuccess();
+			return;
+		}
+
+		toast.error(form.message ?? firstError(form.errors), { id });
+	}
+
+	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.';
+	}
+
+	function formatValue(value: unknown) {
+		if (value === null || value === undefined || value === '') return 'Not set';
+		return String(value);
+	}
+
+	function relationLabel(value: unknown, optionsKey: 'clients') {
+		if (typeof value !== 'string') return 'Not set';
+		return data.options[optionsKey].find((option) => option.value === value)?.label ?? value;
+	}
+
+	function openArchive(record: RecordRow) {
+		archiveForm.reset({ data: { id: record.id } });
+		archivingId = record.id;
+	}
+
+	function recordName(record: Partial<RecordRow> | undefined) {
+		const item = record as Partial<RecordRow> & {
+			name?: unknown;
+			title?: unknown;
+			invoiceNumber?: unknown;
+			label?: unknown;
+		};
+		return String(
+			item?.name ?? item?.title ?? item?.invoiceNumber ?? item?.label ?? 'this contact'
+		);
+	}
+</script>
+
+<svelte:head>
+	<title>Contacts | Clearity</title>
+</svelte:head>
+
+<div class="flex flex-col gap-6">
+	<div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+		<div>
+			<h1 class="text-2xl font-semibold tracking-tight">Contacts</h1>
+			<p class="text-sm text-muted-foreground">Manage client contacts and decision makers.</p>
+		</div>
+	</div>
+
+	<ContactsTable {data} {openArchive} {formatValue} {relationLabel} {recordName} />
+</div>
+
+<ArchiveContactDialog
+	{archivingRecord}
+	{archiveData}
+	{enhanceArchive}
+	{recordName}
+	onClose={() => (archivingId = null)}
+/>
@@ -0,0 +1,40 @@
+<script lang="ts">
+	/* eslint-disable @typescript-eslint/no-explicit-any */
+	import * as AlertDialog from '$lib/components/ui/alert-dialog/index.js';
+	let {
+		archivingRecord,
+		archiveData,
+		enhanceArchive,
+		onClose,
+		recordName
+	}: {
+		archivingRecord: any;
+		archiveData: any;
+		enhanceArchive: any;
+		onClose: () => void;
+		recordName: any;
+	} = $props();
+</script>
+
+<AlertDialog.Root open={!!archivingRecord} onOpenChange={(open) => !open && onClose()}>
+	<AlertDialog.Content>
+		<AlertDialog.Header>
+			<AlertDialog.Title>Archive contact?</AlertDialog.Title>
+			<AlertDialog.Description
+				>This will hide {recordName(archivingRecord)} from active contacts. The record will remain in
+				the database.</AlertDialog.Description
+			>
+		</AlertDialog.Header>
+		<AlertDialog.Footer>
+			<AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
+			{#if archivingRecord}
+				<form method="POST" action="?/archive" use:enhanceArchive>
+					<input type="hidden" name="id" value={$archiveData.id} />
+					<AlertDialog.Action type="submit" variant="destructive"
+						>Archive contact</AlertDialog.Action
+					>
+				</form>
+			{/if}
+		</AlertDialog.Footer>
+	</AlertDialog.Content>
+</AlertDialog.Root>
@@ -0,0 +1,66 @@
+<script lang="ts">
+	/* eslint-disable @typescript-eslint/no-explicit-any */
+	import EllipsisVerticalIcon from '@lucide/svelte/icons/ellipsis-vertical';
+	import { Button } from '$lib/components/ui/button/index.js';
+	import * as DropdownMenu from '$lib/components/ui/dropdown-menu/index.js';
+	import * as Table from '$lib/components/ui/table/index.js';
+	let {
+		data,
+		openArchive,
+		formatValue,
+		relationLabel,
+		recordName
+	}: { data: any; openArchive: any; formatValue: any; relationLabel: any; recordName: any } =
+		$props();
+</script>
+
+{#if data.records.length > 0}
+	<div class="overflow-hidden rounded-lg border border-border">
+		<Table.Root>
+			<Table.Header>
+				<Table.Row>
+					<Table.Head>Client</Table.Head>
+					<Table.Head>Name</Table.Head>
+					<Table.Head>Role</Table.Head>
+					<Table.Head>Email</Table.Head>
+					<Table.Head>Phone</Table.Head>
+					<Table.Head>Primary</Table.Head>
+					<Table.Head class="w-12"><span class="sr-only">Actions</span></Table.Head>
+				</Table.Row>
+			</Table.Header>
+			<Table.Body>
+				{#each data.records as record (record.id)}
+					<Table.Row>
+						<Table.Cell class="font-medium">{relationLabel(record.clientId, 'clients')}</Table.Cell>
+						<Table.Cell class="">{formatValue(record.name)}</Table.Cell>
+						<Table.Cell class="">{formatValue(record.role)}</Table.Cell>
+						<Table.Cell class="">{formatValue(record.email)}</Table.Cell>
+						<Table.Cell class="">{formatValue(record.phone)}</Table.Cell>
+						<Table.Cell class="">{record.isPrimary ? 'Yes' : 'No'}</Table.Cell>
+						<Table.Cell>
+							<DropdownMenu.Root>
+								<DropdownMenu.Trigger
+									>{#snippet child({ props })}<Button
+											variant="ghost"
+											size="icon-sm"
+											aria-label={`Open actions for ${recordName(record)}`}
+											{...props}><EllipsisVerticalIcon /></Button
+										>{/snippet}</DropdownMenu.Trigger
+								>
+								<DropdownMenu.Content align="end" class="w-36">
+									<DropdownMenu.Item variant="destructive" onclick={() => openArchive(record)}
+										>Archive</DropdownMenu.Item
+									>
+								</DropdownMenu.Content>
+							</DropdownMenu.Root>
+						</Table.Cell>
+					</Table.Row>
+				{/each}
+			</Table.Body>
+		</Table.Root>
+	</div>
+{:else}
+	<div class="rounded-lg border p-8 text-center text-sm text-muted-foreground">
+		No contacts have been created yet.
+	</div>
+{/if}