feat: add billing and organization workflows

src/routes/dashboard/clients/[id]/+layout.svelte

@@ -2,16 +2,17 @@
 	import { goto } from '$app/navigation';
 	import { resolve } from '$app/paths';
 	import { page } from '$app/state';
-	import * as Form from '$lib/components/ui/form/index.js';
+	import { Field as FormField, Control, FieldErrors } from 'formsnap';
+	import FormSelect from '$lib/components/form-select.svelte';
+	import { industryLabel, industryOptions } from '$lib/constants/industries';
+	import * as Field from '$lib/components/ui/field/index.js';
 	import { toast } from 'svelte-sonner';
 	import { superForm } from 'sveltekit-superforms';
 	import { zod4Client } from 'sveltekit-superforms/adapters';
 	import { clientEditSchema } from '$lib/schemas/clients.schema';
-	import { handleFormToast } from '$lib/form-feedback';
 	import { Button } from '$lib/components/ui/button/index.js';
 	import * as Dialog from '$lib/components/ui/dialog/index.js';
 	import { Input } from '$lib/components/ui/input/index.js';
-	import * as NativeSelect from '$lib/components/ui/native-select/index.js';
 	import * as Tabs from '$lib/components/ui/tabs/index.js';
 	import { Textarea } from '$lib/components/ui/textarea/index.js';
 	import type { LayoutData } from './$types';
@@ -50,6 +51,28 @@
 
 	const { form: editData, enhance: enhanceEdit } = editForm;
 
+	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 navigateToTab(tab: TabValue) {
 		goto(resolve(`/dashboard/clients/[id]/${tab}`, { id: data.client.id }));
 	}
@@ -81,66 +104,60 @@
 					</Dialog.Header>
 					<form method="POST" action="/dashboard/clients?/edit" class="grid gap-2" use:enhanceEdit>
 						<input type="hidden" name="id" value={$editData.id} />
-						<Form.Field form={editForm} name="name">
-							<Form.Control id="edit-client-name">
-								{#snippet children({ props })}
-									<Form.Label>Name</Form.Label>
-									<Input {...props} type="text" bind:value={$editData.name} />
-								{/snippet}
-							</Form.Control>
-							<Form.FieldErrors />
-						</Form.Field>
-						<Form.Field form={editForm} name="type">
-							<Form.Control id="edit-client-type">
-								{#snippet children({ props })}
-									<Form.Label>Type</Form.Label>
-									<NativeSelect.Root {...props} class="w-full" bind:value={$editData.type}>
-										<NativeSelect.Option value="">Not set</NativeSelect.Option>
-										<NativeSelect.Option value="business">Business</NativeSelect.Option>
-										<NativeSelect.Option value="sport">Sport</NativeSelect.Option>
-										<NativeSelect.Option value="individual">Individual</NativeSelect.Option>
-									</NativeSelect.Root>
-								{/snippet}
-							</Form.Control>
-							<Form.FieldErrors />
-						</Form.Field>
-						<Form.Field form={editForm} name="status">
-							<Form.Control id="edit-client-status">
-								{#snippet children({ props })}
-									<Form.Label>Status</Form.Label>
-									<NativeSelect.Root {...props} class="w-full" bind:value={$editData.status}>
-										<NativeSelect.Option value="">Not set</NativeSelect.Option>
-										<NativeSelect.Option value="active">Active</NativeSelect.Option>
-										<NativeSelect.Option value="prospect">Prospect</NativeSelect.Option>
-										<NativeSelect.Option value="paused">Paused</NativeSelect.Option>
-									</NativeSelect.Root>
-								{/snippet}
-							</Form.Control>
-							<Form.FieldErrors />
-						</Form.Field>
-						<Form.Field form={editForm} name="website">
-							<Form.Control id="edit-client-website">
-								{#snippet children({ props })}
-									<Form.Label>Website</Form.Label>
-									<Input
-										{...props}
-										type="url"
-										placeholder="https://example.com"
-										bind:value={$editData.website}
-									/>
-								{/snippet}
-							</Form.Control>
-							<Form.FieldErrors />
-						</Form.Field>
-						<Form.Field form={editForm} name="notes">
-							<Form.Control id="edit-client-notes">
-								{#snippet children({ props })}
-									<Form.Label>Notes</Form.Label>
-									<Textarea {...props} bind:value={$editData.notes} />
-								{/snippet}
-							</Form.Control>
-							<Form.FieldErrors />
-						</Form.Field>
+						<FormField form={editForm} name="name">
+							<Field.Field>
+								<Control id="edit-client-name">
+									{#snippet children({ props })}
+										<Field.Label>Name</Field.Label>
+										<Input {...props} type="text" bind:value={$editData.name} />
+									{/snippet}
+								</Control>
+								<Field.Error><FieldErrors /></Field.Error>
+							</Field.Field>
+						</FormField>
+						<FormField form={editForm} name="industry">
+							<Field.Field>
+								<Control id="edit-client-industry">
+									{#snippet children({ props })}
+										<Field.Label>Industry</Field.Label>
+										<FormSelect
+											name="industry"
+											bind:value={$editData.industry}
+											options={industryOptions}
+											triggerProps={props}
+										/>
+									{/snippet}
+								</Control>
+								<Field.Error><FieldErrors /></Field.Error>
+							</Field.Field>
+						</FormField>
+						<FormField form={editForm} name="website">
+							<Field.Field>
+								<Control id="edit-client-website">
+									{#snippet children({ props })}
+										<Field.Label>Website</Field.Label>
+										<Input
+											{...props}
+											type="url"
+											placeholder="https://example.com"
+											bind:value={$editData.website}
+										/>
+									{/snippet}
+								</Control>
+								<Field.Error><FieldErrors /></Field.Error>
+							</Field.Field>
+						</FormField>
+						<FormField form={editForm} name="notes">
+							<Field.Field>
+								<Control id="edit-client-notes">
+									{#snippet children({ props })}
+										<Field.Label>Notes</Field.Label>
+										<Textarea {...props} bind:value={$editData.notes} />
+									{/snippet}
+								</Control>
+								<Field.Error><FieldErrors /></Field.Error>
+							</Field.Field>
+						</FormField>
 						<Dialog.Footer>
 							<Dialog.Close
 								>{#snippet child({ props })}<Button variant="outline" {...props}>Cancel</Button
@@ -154,18 +171,18 @@
 		</div>
 	</div>
 
-	<div class="grid gap-3 rounded-lg border p-4 sm:grid-cols-3">
+	<div class="grid gap-3 rounded-lg border p-4 sm:grid-cols-2">
 		<div>
-			<p class="text-xs font-medium text-muted-foreground uppercase">Type</p>
-			<p class="text-sm capitalize">{data.client.type}</p>
+			<p class="text-xs font-medium text-muted-foreground uppercase">Industry</p>
+			<p class="text-sm">{industryLabel(data.client.industry)}</p>
 		</div>
 		<div>
 			<p class="text-xs font-medium text-muted-foreground uppercase">Website</p>
 			<p class="text-sm">{data.client.website ?? 'Not set'}</p>
 		</div>
-		<div>
-			<p class="text-xs font-medium text-muted-foreground uppercase">Status</p>
-			<p class="text-sm capitalize">{data.client.status}</p>
+		<div class="sm:col-span-2">
+			<p class="text-xs font-medium text-muted-foreground uppercase">Notes</p>
+			<p class="text-sm whitespace-pre-wrap">{data.client.notes || 'Not set'}</p>
 		</div>
 	</div>