Refactor admin to shared generic CRUD; restructure proclamation categories/groups and APIs

- Replace per-model admin forms with the shared generic AdminTable/AdminModal CRUD - Add ProclamationGroup model and admin + API v2 routes (replaces subscription levels) - Drop subscription levels and flatten proclamation categories - Update v2 serializers and seed data accordingly
2026-08-27 12:03:40 -05:00
parent b618d8cb93
commit 1d11de8cec
50 changed files with 1168 additions and 2000 deletions
@@ -4,22 +4,17 @@
 </script>

 <Window>
-	<div class="flex flex-col items-center gap-4 p-6 text-center">
-		<h1 class="text-xl font-bold text-gray-900 dark:text-gray-100">
+	<div>
+		<h1>
 			Admin Error ({$page.status})
 		</h1>
-		<p class="max-w-md text-sm text-gray-600 dark:text-gray-400">
+		<p>
 			{#if $page.error?.message}
 				{$page.error.message}
 			{:else}
 				An unexpected error occurred while loading this admin page.
 			{/if}
 		</p>
-		<a
-			href="/admin"
-			class="mt-2 border border-gray-200 px-4 py-2 text-sm font-medium text-gray-900 hover:bg-gray-50 dark:border-gray-700 dark:text-gray-100 dark:hover:bg-gray-800"
-		>
-			Back to Admin
-		</a>
+		<a href="/admin"> Back to Admin </a>
 	</div>
 </Window>
@@ -5,15 +5,12 @@
 	let models = $derived(data.models);
 </script>

-<h1 class="p-6 text-xl font-bold text-gray-900 dark:text-gray-100">Admin Dashboard</h1>
-<div class="grid grid-cols-1 gap-4 px-6 pb-6 sm:grid-cols-2 lg:grid-cols-3">
+<h1>Admin Dashboard</h1>
+<div>
 	{#each models as model (model.slug)}
-		<a
-			href={'/admin/' + model.slug}
-			class="block border border-gray-200 p-4 hover:bg-gray-50 dark:border-gray-700 dark:hover:bg-gray-800"
-		>
-			<h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100">{model.displayName}</h2>
-			<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
+		<a href={'/admin/' + model.slug}>
+			<h2>{model.displayName}</h2>
+			<p>
 				{model.listFields.length} fields
 			</p>
 		</a>
@@ -8,7 +8,6 @@
 	let mode = $state<'normal' | 'emergency' | null>(null);
 	let expiryDate = $state<string | null>(null);
 	let toastMessage = $state('');
-	let toastType = $state<'success' | 'error'>('success');

 	function handleRotate(emergency: boolean) {
 		return ({ cancel }: any) => {
@@ -29,7 +28,6 @@
 					}
 				} else {
 					toastMessage = 'Rotation failed';
-					toastType = 'error';
 				}
 			};
 		};
@@ -38,7 +36,6 @@
 	function copyKey() {
 		navigator.clipboard.writeText(newKey);
 		toastMessage = 'Copied to clipboard';
-		toastType = 'success';
 	}

 	function dismissKey() {
@@ -48,44 +45,26 @@
 	}
 </script>

-<div class="p-6">
-	<h1 class="mb-4 text-xl font-bold text-gray-900 dark:text-gray-100">API Key Management</h1>
+<div>
+	<h1>API Key Management</h1>

 	{#if newKey}
-		<div
-			class="mb-6 border border-amber-300 bg-amber-50 p-4 dark:border-amber-700 dark:bg-amber-900/30"
-		>
-			<p class="mb-2 text-sm font-semibold text-amber-800 dark:text-amber-300">
+		<div>
+			<p>
 				{mode === 'emergency' ? 'Emergency Rotation Complete' : 'New API Key Generated'}
 			</p>
-			<p class="mb-1 text-xs text-amber-700 dark:text-amber-400">
-				This key will not be shown again. Copy it now.
-			</p>
-			<div class="mb-3">
-				<code
-					class="rounded border border-amber-300 bg-white px-3 py-2 font-mono text-sm break-all dark:border-amber-600 dark:bg-gray-900 dark:text-gray-100"
-				>
+			<p>This key will not be shown again. Copy it now.</p>
+			<div>
+				<code>
 					{newKey}
 				</code>
 			</div>
-			<div class="flex gap-2">
-				<button
-					type="button"
-					onclick={copyKey}
-					class="border border-amber-300 bg-white px-3 py-1.5 text-sm font-medium hover:bg-amber-100 dark:border-amber-600 dark:bg-gray-800 dark:text-amber-300 dark:hover:bg-amber-900/50"
-				>
-					Copy to Clipboard
-				</button>
-				<button
-					type="button"
-					onclick={dismissKey}
-					class="border border-gray-300 px-3 py-1.5 text-sm dark:border-gray-600 dark:text-gray-300"
-				>
-					Dismiss
-				</button>
+			<div>
+				<button type="button" onclick={copyKey}> Copy to Clipboard </button>
+				<button type="button" onclick={dismissKey}> Dismiss </button>
 			</div>
 			{#if mode === 'normal' && expiryDate}
-				<p class="mt-3 text-xs text-amber-700 dark:text-amber-400">
+				<p>
 					The previous key will remain valid until {new Date(expiryDate).toLocaleString()}
 					to give in-field devices time to update.
 				</p>
@@ -94,23 +73,17 @@
 	{/if}

 	{#if toastMessage}
-		<div
-			class="mb-4 border px-4 py-2 text-sm {toastType === 'success'
-				? 'border-green-300 bg-green-50 text-green-700'
-				: 'border-red-300 bg-red-50 text-red-700'}"
-		>
+		<div>
 			{toastMessage}
 		</div>
 	{/if}

-	<div class="mb-6 rounded border border-gray-200 p-4 dark:border-gray-700">
-		<h2 class="mb-3 text-sm font-semibold text-gray-700 dark:text-gray-300">Current Key Status</h2>
+	<div>
+		<h2>Current Key Status</h2>
 		{#if data.activeKey}
-			<div class="space-y-1 text-sm text-gray-600 dark:text-gray-400">
+			<div>
 				<div>
-					Prefix: <code class="font-mono font-medium text-gray-900 dark:text-gray-100"
-						>{data.activeKey.prefix}</code
-					>
+					Prefix: <code>{data.activeKey.prefix}</code>
 				</div>
 				<div>Created: {new Date(data.activeKey.createdAt).toLocaleString()}</div>
 				{#if data.activeKey.expiresAt}
@@ -118,31 +91,21 @@
 				{/if}
 			</div>
 		{:else}
-			<p class="text-sm text-gray-500 dark:text-gray-400">No active API key. Generate one below.</p>
+			<p>No active API key. Generate one below.</p>
 		{/if}
 		{#if data.totalRotated > 0}
-			<p class="mt-2 text-xs text-gray-400">
+			<p>
 				{data.totalRotated} previous key(s) have been rotated.
 			</p>
 		{/if}
 	</div>

-	<div class="flex flex-wrap gap-3">
+	<div>
 		<form method="POST" action="?/rotate" use:enhance={handleRotate(false)}>
-			<button
-				type="submit"
-				class="border border-gray-300 bg-gray-100 px-4 py-2 text-sm font-medium hover:bg-gray-200 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
-			>
-				Generate New API Key
-			</button>
+			<button type="submit"> Generate New API Key </button>
 		</form>
 		<form method="POST" action="?/rotateEmergency" use:enhance={handleRotate(true)}>
-			<button
-				type="submit"
-				class="border border-red-300 bg-red-50 px-4 py-2 text-sm font-medium text-red-700 hover:bg-red-100 dark:border-red-700 dark:bg-red-900/30 dark:text-red-400 dark:hover:bg-red-900/50"
-			>
-				Emergency Rotation
-			</button>
+			<button type="submit"> Emergency Rotation </button>
 		</form>
 	</div>
 </div>
@@ -10,18 +10,7 @@ const config = getModelConfig('license-keys')!;
 export const load: PageServerLoad = async ({ locals }) => {
 	const records = await loadRecords(locals, config);

-	const subscriptionLevels = await prisma.subscriptionLevel.findMany({
-		select: { id: true, name: true },
-		orderBy: { name: 'asc' }
-	});
-
-	return {
-		...records,
-		subscriptionLevels: subscriptionLevels.map((s: { id: number; name: string }) => ({
-			label: s.name,
-			value: s.name
-		}))
-	};
+	return { ...records };
 };

 export const actions = {
@@ -29,20 +18,13 @@ export const actions = {
 		if (!locals.user) throw error(401, 'Unauthorized');

 		const formData = await request.formData();
-		const email = formData.get('email')?.toString();
-		const level = formData.get('level')?.toString();
+		const email = formData.get('email')?.toString()?.trim().toLowerCase();

 		if (!email) {
 			return { success: false, error: 'Email is required' };
 		}
-		if (!level) {
-			return { success: false, error: 'Subscription level is required' };
-		}

 		const user = await prisma.user.findUnique({ where: { email } });
-		if (!user) {
-			return { success: false, error: 'No user found with that email' };
-		}

 		const hex = crypto.randomUUID().replace(/-/g, '').slice(0, 16).toUpperCase();
 		const key = `${hex.slice(0, 4)}-${hex.slice(4, 8)}-${hex.slice(8, 12)}-${hex.slice(12, 16)}`;
@@ -51,19 +33,21 @@ export const actions = {
 			data: {
 				key,
 				active: true,
-				level,
-				userId: user.id
+				userId: user?.id,
+				email: user ? undefined : email
 			}
 		});

 		try {
-			const profile = await prisma.profile.findUnique({ where: { userId: user.id } });
+			const profile = await prisma.profile.findFirst({
+				where: user ? { userId: user.id } : { email }
+			});
 			await sendMail({
 				to: email,
 				subject: 'Your Rhemawave License Key',
 				templateId: 'license-key-delivery',
 				data: {
-					firstName: profile?.firstName ?? user.name ?? 'Valued Customer',
+					firstName: profile?.firstName ?? user?.name ?? 'Valued Customer',
 					license_key: key
 				}
 			});
@@ -92,8 +76,8 @@ export const actions = {
 			data: {
 				key,
 				active: true,
-				level: existing.level,
-				userId: existing.userId
+				userId: existing.userId,
+				email: existing.email
 			}
 		});

@@ -5,7 +5,6 @@
 	import AdminModal from '$lib/components/admin/AdminModal.svelte';
 	import Toast from '$lib/components/admin/Toast.svelte';
 	import { getModelConfig } from '$lib/svelte-admin/registry';
-	import LicenseKeyForm from './LicenseKeyForm.svelte';

 	let { data }: PageProps = $props();

@@ -15,7 +14,9 @@
 	let replaceOpen = $state(false);
 	let replaceRecord = $state<Record<string, unknown> | null>(null);
 	let toastMessage = $state('');
-	let toastType = $state<'success' | 'error'>('success');
+
+	let email = $state('');
+	let formError = $state('');

 	function openCreate() {
 		createOpen = true;
@@ -40,26 +41,35 @@
 			if (result.type === 'success' && result.status === 200) {
 				closeReplace();
 				toastMessage = 'License key replaced';
-				toastType = 'success';
 			} else {
 				toastMessage = 'Failed to replace license key';
-				toastType = 'error';
 			}
 			await update();
 		};
 	}
+
+	function createEnhance() {
+		return async ({ result, update }: any) => {
+			if (result.type === 'success' && result.status === 200) {
+				if (result.data?.error) {
+					formError = result.data.error;
+				} else {
+					email = '';
+					formError = '';
+					await update();
+					closeCreate();
+				}
+			} else {
+				await update();
+			}
+		};
+	}
 </script>

-<div class="p-6">
-	<div class="mb-4 flex items-center justify-between">
-		<h1 class="text-xl font-bold text-gray-900 dark:text-gray-100">{config.displayName}</h1>
-		<button
-			type="button"
-			onclick={openCreate}
-			class="border border-gray-300 px-3 py-1.5 text-sm font-medium dark:border-gray-600 dark:text-gray-300"
-		>
-			New License Key +
-		</button>
+<div>
+	<div>
+		<h1>{config.displayName}</h1>
+		<button type="button" onclick={openCreate}>New License Key +</button>
 	</div>

 	<AdminTable
@@ -74,58 +84,45 @@
 </div>

 <AdminModal title="Create License Key" open={createOpen} onClose={closeCreate}>
-	<LicenseKeyForm subscriptionLevels={data.subscriptionLevels} onSuccess={closeCreate} />
+	<form method="POST" action="?/createKey" use:enhance={createEnhance}>
+		{#if formError}
+			<div>{formError}</div>
+		{/if}
+		<div>
+			<label for="field-email">Email</label>
+			<input
+				type="email"
+				id="field-email"
+				name="email"
+				required
+				bind:value={email}
+				placeholder="user@example.com"
+			/>
+			<p>If no account exists for this email yet, the key will be attached when they register.</p>
+		</div>
+		<div>
+			<button type="submit">Create &amp; Email Key</button>
+		</div>
+	</form>
 </AdminModal>

 <AdminModal title="Replace License Key" open={replaceOpen} onClose={closeReplace}>
 	{#if replaceRecord}
-		<div class="flex flex-col gap-4">
-			<p class="text-sm text-gray-700 dark:text-gray-300">
-				Generate a new key to replace <strong>{String(replaceRecord.key)}</strong>?
-			</p>
-			<div
-				class="rounded border border-gray-200 bg-gray-50 p-3 text-sm dark:border-gray-700 dark:bg-gray-800"
-			>
-				<div class="mb-1 text-gray-500 dark:text-gray-400">
-					User: <span class="font-medium text-gray-700 dark:text-gray-300"
-						>{String(replaceRecord['user.name'] ?? '')}</span
-					>
-				</div>
-				<div class="text-gray-500 dark:text-gray-400">
-					Level: <span class="font-medium text-gray-700 dark:text-gray-300"
-						>{String(replaceRecord.level ?? '')}</span
-					>
-				</div>
+		<div>
+			<p>Generate a new key to replace <strong>{String(replaceRecord.key)}</strong>?</p>
+			<div>
+				<div>User: <span>{String(replaceRecord['user.name'] ?? '')}</span></div>
 			</div>
-			<p class="text-xs text-gray-500 dark:text-gray-400">
-				The existing key will be deleted and a new one with the same subscription level will be
-				created and emailed.
-			</p>
-			<form
-				method="POST"
-				action="?/replace"
-				use:enhance={replaceEnhance}
-				class="flex justify-end gap-2 pt-2"
-			>
+			<p>The existing key will be deleted and a new one will be created and emailed.</p>
+			<form method="POST" action="?/replace" use:enhance={replaceEnhance}>
 				<input type="hidden" name="id" value={String(replaceRecord.id)} />
-				<button
-					type="button"
-					onclick={closeReplace}
-					class="border border-gray-300 px-3 py-1.5 text-sm dark:border-gray-600 dark:text-gray-300"
-				>
-					Cancel
-				</button>
-				<button
-					type="submit"
-					class="border border-amber-300 bg-amber-50 px-4 py-1.5 text-sm font-medium hover:bg-amber-100 dark:border-amber-700 dark:bg-amber-900/30 dark:text-amber-300 dark:hover:bg-amber-900/50"
-				>
-					Generate Replacement
-				</button>
+				<button type="button" onclick={closeReplace}>Cancel</button>
+				<button type="submit">Generate Replacement</button>
 			</form>
 		</div>
 	{/if}
 </AdminModal>

 {#if toastMessage}
-	<Toast message={toastMessage} type={toastType} />
+	<Toast message={toastMessage} />
 {/if}
@@ -1,91 +0,0 @@
-<script lang="ts">
-	import { enhance } from '$app/forms';
-
-	let {
-		subscriptionLevels = [] as { label: string; value: string }[],
-		onSuccess
-	}: {
-		subscriptionLevels?: { label: string; value: string }[];
-		onSuccess?: () => void;
-	} = $props();
-
-	let email = $state('');
-	let level = $state('');
-	let formError = $state('');
-
-	function handleEnhance() {
-		return async ({ result, update }: any) => {
-			if (result.type === 'success' && result.status === 200) {
-				if (result.data?.error) {
-					formError = result.data.error;
-				} else {
-					email = '';
-					level = '';
-					formError = '';
-					await update();
-					onSuccess?.();
-				}
-			} else {
-				await update();
-			}
-		};
-	}
-</script>
-
-<form method="POST" action="?/createKey" use:enhance={handleEnhance}>
-	{#if formError}
-		<div class="mb-4 border border-red-300 bg-red-50 px-4 py-2 text-sm text-red-700">
-			{formError}
-		</div>
-	{/if}
-
-	<div class="flex flex-col gap-4">
-		<div>
-			<label
-				for="field-email"
-				class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300"
-			>
-				User Email
-			</label>
-			<input
-				type="email"
-				id="field-email"
-				name="email"
-				required
-				bind:value={email}
-				class="w-full border border-gray-300 px-3 py-1.5 text-sm dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100"
-				placeholder="user@example.com"
-			/>
-		</div>
-
-		<div>
-			<label
-				for="field-level"
-				class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300"
-			>
-				Subscription Level
-			</label>
-			<select
-				name="level"
-				id="field-level"
-				required
-				onchange={(e) => (level = (e.target as HTMLSelectElement).value)}
-				class="w-full border border-gray-300 px-3 py-1.5 text-sm dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100"
-			>
-				<option value="" disabled selected={!level}>-- Select --</option>
-				{#each subscriptionLevels as opt (opt.value)}
-					<option value={opt.value} selected={opt.value === level}>{opt.label}</option>
-				{/each}
-			</select>
-		</div>
-
-		<div class="flex justify-end gap-2 pt-2">
-			<button
-				type="submit"
-				class="border border-gray-300 bg-gray-100 px-4 py-1.5 text-sm font-medium hover:bg-gray-200 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
-			>
-				Create & Email Key
-			</button>
-		</div>
-	</div>
-</form>
@@ -19,9 +19,8 @@ vi.mock('$lib/svelte-admin/crud', () => ({
 vi.mock('$lib/db', () => ({
 	prisma: {
 		user: { findUnique: vi.fn() },
-		profile: { findUnique: vi.fn() },
-		licenseKey: { create: vi.fn() },
-		subscriptionLevel: { findMany: vi.fn() }
+		profile: { findFirst: vi.fn() },
+		licenseKey: { create: vi.fn() }
 	}
 }));

@@ -29,7 +28,7 @@ import { prisma } from '$lib/db';
 import { actions } from './+page.server';

 const mockFindUnique = prisma.user.findUnique as ReturnType<typeof vi.fn>;
-const mockProfileFindUnique = prisma.profile.findUnique as ReturnType<typeof vi.fn>;
+const mockProfileFindFirst = prisma.profile.findFirst as ReturnType<typeof vi.fn>;
 const mockLicenseKeyCreate = prisma.licenseKey.create as ReturnType<typeof vi.fn>;

 describe('admin license-keys createKey action', () => {
@@ -39,7 +38,7 @@ describe('admin license-keys createKey action', () => {

 	it('rejects unauthenticated requests', async () => {
 		const locals = createLocals();
-		const req = createFormRequest({ email: 'jane@example.com', level: 'standard' });
+		const req = createFormRequest({ email: 'jane@example.com' });

 		const err = await actions.createKey({ request: req, locals } as any).catch((e) => e);
 		expect(isHttpError(err, 401)).toBe(true);
@@ -47,27 +46,36 @@ describe('admin license-keys createKey action', () => {

 	it('returns error when email is missing', async () => {
 		const locals = createLocals(mockUser() as any);
-		const req = createFormRequest({ level: 'standard' });
+		const req = createFormRequest({});

 		const result = await actions.createKey({ request: req, locals } as any);
 		expect(result).toEqual({ success: false, error: 'Email is required' });
 	});

-	it('returns error when level is missing', async () => {
-		const locals = createLocals(mockUser() as any);
-		const req = createFormRequest({ email: 'jane@example.com' });
-
-		const result = await actions.createKey({ request: req, locals } as any);
-		expect(result).toEqual({ success: false, error: 'Subscription level is required' });
-	});
-
-	it('returns error when user is not found', async () => {
+	it('creates a key with only an email when no user exists yet', async () => {
 		mockFindUnique.mockResolvedValue(null);
+		mockProfileFindFirst.mockResolvedValue(null);
+		mockLicenseKeyCreate.mockResolvedValue({});
+		sendMail.mockResolvedValue({ id: 'email-1' });
+
 		const locals = createLocals(mockUser() as any);
-		const req = createFormRequest({ email: 'nobody@example.com', level: 'standard' });
+		const req = createFormRequest({ email: 'nobody@example.com' });

 		const result = await actions.createKey({ request: req, locals } as any);
-		expect(result).toEqual({ success: false, error: 'No user found with that email' });
+
+		expect(result).toEqual({ success: true, error: undefined });
+		expect(mockLicenseKeyCreate).toHaveBeenCalledOnce();
+
+		const createCall = mockLicenseKeyCreate.mock.calls[0][0];
+		expect(createCall.data.active).toBe(true);
+		expect(createCall.data.userId).toBeUndefined();
+		expect(createCall.data.email).toBe('nobody@example.com');
+
+		expect(sendMail).toHaveBeenCalledOnce();
+		const mailCall = sendMail.mock.calls[0][0];
+		expect(mailCall.to).toBe('nobody@example.com');
+		expect(mailCall.templateId).toBe('license-key-delivery');
+		expect(mailCall.data.firstName).toBe('Valued Customer');
 	});

 	it('creates a license key and sends email with license_key variable', async () => {
@@ -75,12 +83,12 @@ describe('admin license-keys createKey action', () => {
 		const profile = { firstName: 'Jane' };

 		mockFindUnique.mockResolvedValue(user);
-		mockProfileFindUnique.mockResolvedValue(profile);
+		mockProfileFindFirst.mockResolvedValue(profile);
 		mockLicenseKeyCreate.mockResolvedValue({});
 		sendMail.mockResolvedValue({ id: 'email-1' });

 		const locals = createLocals(user as any);
-		const req = createFormRequest({ email: user.email, level: 'standard' });
+		const req = createFormRequest({ email: user.email });

 		const result = await actions.createKey({ request: req, locals } as any);

@@ -90,7 +98,6 @@ describe('admin license-keys createKey action', () => {
 		const createCall = mockLicenseKeyCreate.mock.calls[0][0];
 		expect(createCall.data.key).toMatch(/^[A-Z0-9]{4}-[A-Z0-9]{4}-[A-Z0-9]{4}-[A-Z0-9]{4}$/);
 		expect(createCall.data.active).toBe(true);
-		expect(createCall.data.level).toBe('standard');
 		expect(createCall.data.userId).toBe('user-1');

 		expect(sendMail).toHaveBeenCalledOnce();
@@ -106,12 +113,12 @@ describe('admin license-keys createKey action', () => {
 		const user = mockUser();

 		mockFindUnique.mockResolvedValue(user);
-		mockProfileFindUnique.mockResolvedValue(null);
+		mockProfileFindFirst.mockResolvedValue(null);
 		mockLicenseKeyCreate.mockResolvedValue({});
 		sendMail.mockResolvedValue({ id: 'email-1' });

 		const locals = createLocals(user as any);
-		const req = createFormRequest({ email: user.email, level: 'premium' });
+		const req = createFormRequest({ email: user.email });

 		await actions.createKey({ request: req, locals } as any);

@@ -125,14 +132,14 @@ describe('admin license-keys createKey action', () => {
 		const user = mockUser();

 		mockFindUnique.mockResolvedValue(user);
-		mockProfileFindUnique.mockResolvedValue({ firstName: 'Jane' });
+		mockProfileFindFirst.mockResolvedValue({ firstName: 'Jane' });
 		mockLicenseKeyCreate.mockResolvedValue({});
 		sendMail.mockRejectedValue(new Error('Resend API down'));

 		const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});

 		const locals = createLocals(user as any);
-		const req = createFormRequest({ email: user.email, level: 'standard' });
+		const req = createFormRequest({ email: user.email });

 		const result = await actions.createKey({ request: req, locals } as any);
 		expect(result).toEqual({ success: true, error: undefined });
@@ -4,51 +4,25 @@ import { getDelegate } from '$lib/svelte-admin/prisma-delegate';

 const config = getModelConfig('proclamation-categories')!;

-export const load: PageServerLoad = async ({ locals }) => {
+export const load: PageServerLoad = async () => {
 	const delegate = getDelegate(config);

 	const records = await delegate.findMany({
-		where: { parentId: null },
-		include: config.include,
-		orderBy: { sortOrder: 'asc' }
+		orderBy: [{ sortOrder: 'asc' }, { name: 'asc' }]
 	});

-	const relationOptionsData: Record<string, { label: string; value: string | number }[]> = {};
-
-	for (const [field, relConfig] of Object.entries(config.relationOptions ?? {})) {
-		const relDelegate = getDelegate({ ...config, modelName: relConfig.model });
-		const selectFields: Record<string, boolean> = {
-			[relConfig.valueField]: true,
-			[relConfig.labelField]: true
-		};
-		const options = await relDelegate.findMany({
-			select: selectFields,
-			orderBy: { [relConfig.labelField]: 'asc' }
-		});
-		const mapped = (options as Record<string, unknown>[]).map((opt: Record<string, unknown>) => ({
-			label: String(opt[relConfig.labelField]),
-			value: opt[relConfig.valueField] as string | number
-		}));
-		relationOptionsData[field] = mapped;
-	}
-
 	return {
 		records: records as Record<string, unknown>[],
-		relationOptionsData
+		relationOptionsData: {}
 	};
 };

 export const actions = {
-	upsert: async ({ request, locals }) => {
+	upsert: async ({ request }) => {
 		const formData = await request.formData();

 		const name = (formData.get('name')?.toString() ?? '').trim();
 		const rawId = formData.get('id')?.toString();
-		const childIds = formData.getAll('childId').map((v) => v.toString());
-		const childNames = formData
-			.getAll('childName')
-			.map((v) => v.toString().trim())
-			.filter(Boolean);

 		if (!name) {
 			return { success: false, error: 'Name is required', fieldErrors: { name: 'Required' } };
@@ -57,70 +31,31 @@ export const actions = {
 		const delegate = getDelegate(config);

 		try {
-			let categoryId: number;
 			if (rawId) {
-				const id = parseInt(rawId, 10);
 				await delegate.update({
-					where: { id },
+					where: { id: parseInt(rawId, 10) },
 					data: { name }
 				});
-				categoryId = id;
 			} else {
 				const maxSort = await delegate.findFirst({
-					where: { parentId: null },
 					orderBy: { sortOrder: 'desc' },
 					select: { sortOrder: true }
 				});
-				const sortOrder = (maxSort?.sortOrder ?? -1) + 1;
-				const created = await delegate.create({
-					data: { name, sortOrder }
+				await delegate.create({
+					data: { name, sortOrder: (maxSort?.sortOrder ?? -1) + 1 }
 				});
-				categoryId = created.id;
 			}
-
-			const existingChildren = await delegate.findMany({
-				where: { parentId: categoryId },
-				select: { id: true }
-			});
-			const existingChildIdSet = new Set(existingChildren.map((c: { id: number }) => c.id));
-
-			const submittedIdSet = new Set<number>();
-
-			for (let i = 0; i < childNames.length; i++) {
-				const childName = childNames[i];
-				if (!childName) continue;
-
-				const childIdRaw = childIds[i] ? parseInt(childIds[i], 10) : null;
-
-				if (childIdRaw && existingChildIdSet.has(childIdRaw)) {
-					submittedIdSet.add(childIdRaw);
-					await delegate.update({
-						where: { id: childIdRaw },
-						data: { name: childName }
-					});
-				} else {
-					await delegate.create({
-						data: { name: childName, parentId: categoryId }
-					});
-				}
-			}
-
-			for (const child of existingChildren) {
-				if (!submittedIdSet.has(child.id)) {
-					await delegate.delete({ where: { id: child.id } });
-				}
-			}
-
-			return { success: true };
 		} catch (e: unknown) {
 			if (e && typeof e === 'object' && 'code' in e && (e as { code: string }).code === 'P2002') {
 				return {
 					success: false,
-					error: 'A sub-category with this name already exists under this parent.'
+					error: 'A category with this name already exists.'
 				};
 			}
 			throw e;
 		}
+
+		return { success: true };
 	},
 	delete: async ({ request, locals }) => {
 		const formData = await request.formData();
@@ -137,8 +72,17 @@ export const actions = {
 			if (!match) return { success: false, error: 'Access denied' };
 		}

-		await delegate.deleteMany({ where: { parentId: id } });
-		await delegate.delete({ where: { id } });
+		try {
+			await delegate.delete({ where: { id } });
+		} catch (e: unknown) {
+			if (e && typeof e === 'object' && 'code' in e && (e as { code: string }).code === 'P2003') {
+				return {
+					success: false,
+					error: 'Cannot delete: one or more proclamations use this category.'
+				};
+			}
+			throw e;
+		}

 		return { success: true };
 	},
@@ -1,12 +1,11 @@
 <script lang="ts">
 	import type { PageProps } from './$types';
-	import type { ActionResult } from '$lib/svelte-admin/types';
+	import { enhance } from '$app/forms';
+	import { invalidateAll } from '$app/navigation';
 	import AdminTable from '$lib/components/admin/AdminTable.svelte';
 	import AdminModal from '$lib/components/admin/AdminModal.svelte';
 	import Toast from '$lib/components/admin/Toast.svelte';
 	import { getModelConfig } from '$lib/svelte-admin/registry';
-	import { invalidateAll } from '$app/navigation';
-	import CategoryForm from './CategoryForm.svelte';

 	let { data, form }: PageProps = $props();

@@ -16,16 +15,17 @@
 	let modalOpen = $state(false);
 	let editingRecord = $state<Record<string, unknown> | null>(null);
 	let toastMessage = $state('');
-	let toastType = $state<'success' | 'error'>('success');
 	let fieldErrors = $state<Record<string, string>>({});
 	let formError = $state('');

+	let name = $state('');
+	let dirty = $state(false);
+
 	$effect(() => {
 		if (form && 'success' in (form as any)) {
 			const result = form as any;
 			if (result.success) {
 				toastMessage = 'Saved successfully';
-				toastType = 'success';
 				closeModal();
 			} else {
 				formError = result.error ?? '';
@@ -34,6 +34,11 @@
 		}
 	});

+	$effect(() => {
+		name = String((editingRecord ?? {})['name'] ?? '');
+		dirty = false;
+	});
+
 	async function handleReorder(ids: (string | number)[]) {
 		const formData = new FormData();
 		formData.set('ids', JSON.stringify(ids));
@@ -61,10 +66,14 @@
 		formError = '';
 		fieldErrors = {};
 	}
+
+	function markDirty() {
+		if (editingRecord?.id) dirty = true;
+	}
 </script>

-<div class="p-6">
-	<h1 class="mb-4 text-xl font-bold text-gray-900 dark:text-gray-100">{config.displayName}</h1>
+<div>
+	<h1>{config.displayName}</h1>
 	<AdminTable
 		records={data.records}
 		listFields={config.listFields}
@@ -87,14 +96,33 @@
 	{canDelete}
 	recordId={editingRecord?.id as string | undefined}
 >
-	<CategoryForm
-		record={editingRecord ?? {}}
-		{fieldErrors}
-		{formError}
-		submitLabel={editingRecord ? 'Save' : 'Create'}
-	/>
+	<form action="?/upsert" method="POST" use:enhance oninput={markDirty}>
+		{#if editingRecord?.id}
+			<input type="hidden" name="id" value={String(editingRecord.id)} />
+		{/if}
+
+		{#if formError}
+			<div>{formError}</div>
+		{/if}
+
+		<div>
+			<div>
+				<label for="field-name">Name</label>
+				<input type="text" id="field-name" name="name" bind:value={name} />
+				{#if fieldErrors.name}
+					<p>{fieldErrors.name}</p>
+				{/if}
+			</div>
+
+			<div>
+				<button type="submit" disabled={!!editingRecord?.id && !dirty}>
+					{editingRecord ? 'Save' : 'Create'}
+				</button>
+			</div>
+		</div>
+	</form>
 </AdminModal>

 {#if toastMessage}
-	<Toast message={toastMessage} type={toastType} />
+	<Toast message={toastMessage} />
 {/if}
@@ -1,124 +0,0 @@
-<script lang="ts">
-	import { enhance } from '$app/forms';
-
-	let {
-		record = {} as Record<string, unknown>,
-		fieldErrors = {} as Record<string, string>,
-		formError = '',
-		action = '?/upsert',
-		submitLabel = 'Save'
-	}: {
-		record?: Record<string, unknown>;
-		fieldErrors?: Record<string, string>;
-		formError?: string;
-		action?: string;
-		submitLabel?: string;
-	} = $props();
-
-	let name = $state('');
-	let children = $state<{ id: number | null; name: string }[]>([]);
-	let dirty = $state(false);
-
-	$effect(() => {
-		dirty = false;
-	});
-
-	$effect(() => {
-		name = String(record.name ?? '');
-		const existingChildren = (record.children as Array<{ id: number; name: string }>) ?? [];
-		children = existingChildren.map((c) => ({ id: c.id, name: c.name }));
-	});
-
-	function markDirty() {
-		if (record.id) dirty = true;
-	}
-
-	function addChild() {
-		children = [...children, { id: null, name: '' }];
-		if (record.id) dirty = true;
-	}
-
-	function removeChild(index: number) {
-		children = children.filter((_, i) => i !== index);
-		if (record.id) dirty = true;
-	}
-</script>
-
-<form {action} method="POST" use:enhance oninput={markDirty}>
-	{#if record?.id}
-		<input type="hidden" name="id" value={String(record.id)} />
-	{/if}
-
-	{#if formError}
-		<div class="mb-4 border border-red-300 bg-red-50 px-4 py-2 text-sm text-red-700">
-			{formError}
-		</div>
-	{/if}
-
-	<div class="flex flex-col gap-4">
-		<div>
-			<label
-				for="field-name"
-				class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300"
-			>
-				Name
-			</label>
-			<input
-				type="text"
-				id="field-name"
-				name="name"
-				bind:value={name}
-				class="w-full border px-3 py-1.5 text-sm {fieldErrors.name
-					? 'border-red-400'
-					: 'border-gray-300 dark:border-gray-600'} dark:bg-gray-800 dark:text-gray-100"
-			/>
-			{#if fieldErrors.name}
-				<p class="mt-1 text-xs text-red-600">{fieldErrors.name}</p>
-			{/if}
-		</div>
-
-		<div>
-			<label class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">
-				Sub-categories
-			</label>
-			{#each children as child, i}
-				<div class="mb-2 flex items-center gap-2">
-					<input type="hidden" name="childId" value={child.id ?? ''} />
-					<input
-						type="text"
-						name="childName"
-						bind:value={child.name}
-						placeholder="Sub-category name"
-						class="flex-1 border px-3 py-1.5 text-sm {fieldErrors[`childName.${i}`]
-							? 'border-red-400'
-							: 'border-gray-300 dark:border-gray-600'} dark:bg-gray-800 dark:text-gray-100"
-					/>
-					<button
-						type="button"
-						onclick={() => removeChild(i)}
-						class="shrink-0 px-2 py-1 text-sm text-red-600 hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-900/20"
-					>
-						Remove
-					</button>
-				</div>
-			{/each}
-			<button
-				type="button"
-				onclick={addChild}
-				class="mt-1 text-sm text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300"
-			>
-				+ Add Sub-category
-			</button>
-		</div>
-
-		<div class="flex justify-end gap-2 pt-2">
-			<button
-				type="submit"
-				disabled={!!record?.id && !dirty}
-				class="border border-gray-300 bg-gray-100 px-4 py-1.5 text-sm font-medium hover:bg-gray-200 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
-			>
-				{submitLabel}
-			</button>
-		</div>
-	</div>
-</form>
@@ -0,0 +1,107 @@
+import type { PageServerLoad } from './$types';
+import { getModelConfig } from '$lib/svelte-admin/registry';
+import { getDelegate } from '$lib/svelte-admin/prisma-delegate';
+
+const config = getModelConfig('proclamation-groups')!;
+
+export const load: PageServerLoad = async () => {
+	const delegate = getDelegate(config);
+
+	const records = await delegate.findMany({
+		orderBy: [{ sortOrder: 'asc' }, { name: 'asc' }]
+	});
+
+	return {
+		records: records as Record<string, unknown>[],
+		relationOptionsData: {}
+	};
+};
+
+export const actions = {
+	upsert: async ({ request }) => {
+		const formData = await request.formData();
+
+		const name = (formData.get('name')?.toString() ?? '').trim();
+		const rawId = formData.get('id')?.toString();
+
+		if (!name) {
+			return { success: false, error: 'Name is required', fieldErrors: { name: 'Required' } };
+		}
+
+		const delegate = getDelegate(config);
+
+		try {
+			if (rawId) {
+				await delegate.update({
+					where: { id: parseInt(rawId, 10) },
+					data: { name }
+				});
+			} else {
+				const maxSort = await delegate.findFirst({
+					orderBy: { sortOrder: 'desc' },
+					select: { sortOrder: true }
+				});
+				await delegate.create({
+					data: { name, sortOrder: (maxSort?.sortOrder ?? -1) + 1 }
+				});
+			}
+		} catch (e: unknown) {
+			if (e && typeof e === 'object' && 'code' in e && (e as { code: string }).code === 'P2002') {
+				return {
+					success: false,
+					error: 'A group with this name already exists.'
+				};
+			}
+			throw e;
+		}
+
+		return { success: true };
+	},
+	delete: async ({ request, locals }) => {
+		const formData = await request.formData();
+		const rawId = formData.get('id')?.toString();
+		if (!rawId) return { success: false, error: 'Missing id' };
+
+		const id = parseInt(rawId, 10);
+		const delegate = getDelegate(config);
+
+		const viewerRoleId = (locals.user as { roleId?: number } | null)?.roleId ?? 4;
+		const where = config.accessFilter?.(viewerRoleId);
+		if (where) {
+			const match = await delegate.findFirst({ where: { id, ...where } });
+			if (!match) return { success: false, error: 'Access denied' };
+		}
+
+		try {
+			await delegate.delete({ where: { id } });
+		} catch (e: unknown) {
+			if (e && typeof e === 'object' && 'code' in e && (e as { code: string }).code === 'P2003') {
+				return {
+					success: false,
+					error: 'Cannot delete: one or more proclamations use this group.'
+				};
+			}
+			throw e;
+		}
+
+		return { success: true };
+	},
+	reorder: async ({ request }) => {
+		const formData = await request.formData();
+		const raw = formData.get('ids')?.toString();
+		if (!raw) return { success: false, error: 'Missing ids' };
+
+		const ids = JSON.parse(raw) as number[];
+
+		const delegate = getDelegate(config);
+
+		for (let i = 0; i < ids.length; i++) {
+			await delegate.update({
+				where: { id: ids[i] },
+				data: { sortOrder: i }
+			});
+		}
+
+		return { success: true };
+	}
+};
@@ -1,30 +1,31 @@
 <script lang="ts">
 	import type { PageProps } from './$types';
-	import type { ActionResult } from '$lib/svelte-admin/types';
+	import { enhance } from '$app/forms';
+	import { invalidateAll } from '$app/navigation';
 	import AdminTable from '$lib/components/admin/AdminTable.svelte';
 	import AdminModal from '$lib/components/admin/AdminModal.svelte';
 	import Toast from '$lib/components/admin/Toast.svelte';
 	import { getModelConfig } from '$lib/svelte-admin/registry';
-	import LevelForm from './LevelForm.svelte';

 	let { data, form }: PageProps = $props();

-	const config = getModelConfig('subscription-levels')!;
+	const config = getModelConfig('proclamation-groups')!;
 	const canDelete = $derived((data.adminUser?.roleId ?? 4) <= 2);

 	let modalOpen = $state(false);
 	let editingRecord = $state<Record<string, unknown> | null>(null);
 	let toastMessage = $state('');
-	let toastType = $state<'success' | 'error'>('success');
 	let fieldErrors = $state<Record<string, string>>({});
 	let formError = $state('');

+	let name = $state('');
+	let dirty = $state(false);
+
 	$effect(() => {
 		if (form && 'success' in (form as any)) {
 			const result = form as any;
 			if (result.success) {
 				toastMessage = 'Saved successfully';
-				toastType = 'success';
 				closeModal();
 			} else {
 				formError = result.error ?? '';
@@ -33,6 +34,18 @@
 		}
 	});

+	$effect(() => {
+		name = String((editingRecord ?? {})['name'] ?? '');
+		dirty = false;
+	});
+
+	async function handleReorder(ids: (string | number)[]) {
+		const formData = new FormData();
+		formData.set('ids', JSON.stringify(ids));
+		await fetch('?/reorder', { method: 'POST', body: formData });
+		await invalidateAll();
+	}
+
 	function openCreate() {
 		editingRecord = null;
 		formError = '';
@@ -53,16 +66,22 @@
 		formError = '';
 		fieldErrors = {};
 	}
+
+	function markDirty() {
+		if (editingRecord?.id) dirty = true;
+	}
 </script>

-<div class="p-6">
-	<h1 class="mb-4 text-xl font-bold text-gray-900 dark:text-gray-100">{config.displayName}</h1>
+<div>
+	<h1>{config.displayName}</h1>
 	<AdminTable
 		records={data.records}
 		listFields={config.listFields}
 		searchFields={config.searchFields}
 		fieldTypes={config.fieldTypes}
 		singular={config.displayNameSingular}
+		draggable={true}
+		onReorder={handleReorder}
 		onRowClick={openEdit}
 		onNew={openCreate}
 	/>
@@ -77,14 +96,33 @@
 	{canDelete}
 	recordId={editingRecord?.id as string | undefined}
 >
-	<LevelForm
-		record={editingRecord ?? {}}
-		{fieldErrors}
-		{formError}
-		submitLabel={editingRecord ? 'Update' : 'Create'}
-	/>
+	<form action="?/upsert" method="POST" use:enhance oninput={markDirty}>
+		{#if editingRecord?.id}
+			<input type="hidden" name="id" value={String(editingRecord.id)} />
+		{/if}
+
+		{#if formError}
+			<div>{formError}</div>
+		{/if}
+
+		<div>
+			<div>
+				<label for="field-name">Name</label>
+				<input type="text" id="field-name" name="name" bind:value={name} />
+				{#if fieldErrors.name}
+					<p>{fieldErrors.name}</p>
+				{/if}
+			</div>
+
+			<div>
+				<button type="submit" disabled={!!editingRecord?.id && !dirty}>
+					{editingRecord ? 'Save' : 'Create'}
+				</button>
+			</div>
+		</div>
+	</form>
 </AdminModal>

 {#if toastMessage}
-	<Toast message={toastMessage} type={toastType} />
+	<Toast message={toastMessage} />
 {/if}
@@ -27,11 +27,16 @@ export const load: PageServerLoad = async ({ locals }) => {
 	}

 	const categories = await prisma.proclamationCategory.findMany({
-		select: { id: true, name: true, parentId: true },
+		select: { id: true, name: true },
 		orderBy: { name: 'asc' }
 	});

-	return { ...base, categories };
+	const groups = await prisma.proclamationGroup.findMany({
+		select: { id: true, name: true },
+		orderBy: { sortOrder: 'asc' }
+	});
+
+	return { ...base, categories, groups };
 };

 export const actions = {
@@ -54,12 +59,8 @@ export const actions = {
 		}

 		const rawId = formData.get('id')?.toString();
-		const { parentCategoryId, ...rest } = form.data;

-		const data: Record<string, unknown> = {
-			...rest,
-			categoryId: rest.categoryId ?? parentCategoryId
-		};
+		const data: Record<string, unknown> = { ...form.data };

 		try {
 			if (rawId) {
@@ -1,11 +1,15 @@
 <script lang="ts">
 	import type { PageProps } from './$types';
-	import type { ActionResult } from '$lib/svelte-admin/types';
+	import { enhance } from '$app/forms';
+	import { Editor } from '@tiptap/core';
+	import StarterKit from '@tiptap/starter-kit';
+	import Highlight from '@tiptap/extension-highlight';
+	import { TextStyle } from '@tiptap/extension-text-style';
+	import { Color } from '@tiptap/extension-color';
 	import AdminTable from '$lib/components/admin/AdminTable.svelte';
 	import AdminModal from '$lib/components/admin/AdminModal.svelte';
 	import Toast from '$lib/components/admin/Toast.svelte';
 	import { getModelConfig } from '$lib/svelte-admin/registry';
-	import ProclamationForm from './ProclamationForm.svelte';

 	let { data, form }: PageProps = $props();

@@ -17,16 +21,25 @@
 	let modalOpen = $state(false);
 	let editingRecord = $state<Record<string, unknown> | null>(null);
 	let toastMessage = $state('');
-	let toastType = $state<'success' | 'error'>('success');
 	let fieldErrors = $state<Record<string, string>>({});
 	let formError = $state('');

+	let dirty = $state(false);
+	let name = $state('');
+	let solfeggioFrequencyId = $state('');
+	let categoryId = $state('');
+	let groupId = $state('');
+
+	// Inline TipTap editor
+	let element = $state<HTMLElement>();
+	let editor: Editor | null = null;
+	let content = $state('');
+
 	$effect(() => {
 		if (form && 'success' in (form as any)) {
 			const result = form as any;
 			if (result.success) {
 				toastMessage = 'Saved successfully';
-				toastType = 'success';
 				closeModal();
 			} else {
 				formError = result.error ?? '';
@@ -35,6 +48,80 @@
 		}
 	});

+	$effect(() => {
+		const record = editingRecord ?? {};
+		name = String(record['name'] ?? '');
+		solfeggioFrequencyId = String(record['solfeggioFrequencyId'] ?? '');
+		categoryId = String(record['categoryId'] ?? '');
+		groupId = String(record['groupId'] ?? '');
+		content = typeof record['content'] === 'string' ? (record['content'] as string) : '';
+		dirty = false;
+	});
+
+	function markDirty() {
+		if (editingRecord?.id) dirty = true;
+	}
+
+	function handleCategoryChange(e: Event) {
+		categoryId = (e.target as HTMLSelectElement).value;
+	}
+
+	function handleGroupChange(e: Event) {
+		groupId = (e.target as HTMLSelectElement).value;
+	}
+
+	let contentKey = $derived(editingRecord?.id ?? 'new');
+
+	$effect(() => {
+		if (!isSuper || !modalOpen || !element) return;
+		const initialContent =
+			typeof (editingRecord ?? {})['content'] === 'string'
+				? ((editingRecord ?? {})['content'] as string)
+				: '';
+
+		editor = new Editor({
+			element,
+			extensions: [
+				StarterKit.configure({
+					bulletList: false,
+					orderedList: false
+				}),
+				TextStyle,
+				Color,
+				Highlight.configure({ multicolor: true })
+			],
+			content: initialContent,
+			onUpdate: ({ editor }) => {
+				content = editor.getHTML();
+			}
+		});
+
+		const instance = editor;
+		instance.setEditable(true);
+
+		return () => {
+			instance.destroy();
+		};
+	});
+
+	function toggleBold() {
+		editor?.chain().focus().toggleBold().run();
+	}
+	function toggleItalic() {
+		editor?.chain().focus().toggleItalic().run();
+	}
+	function toggleHighlight() {
+		editor?.chain().focus().toggleHighlight().run();
+	}
+
+	function setColor() {
+		const current = editor?.getAttributes('textStyle').color ?? '#000000';
+		const colors = ['#000000', '#FF0000', '#0000FF', '#008000', '#FFA500', '#800080', '#808080'];
+		const idx = colors.indexOf(current);
+		const next = colors[(idx + 1) % colors.length];
+		editor?.chain().focus().setColor(next).run();
+	}
+
 	function openCreate() {
 		editingRecord = null;
 		formError = '';
@@ -57,8 +144,8 @@
 	}
 </script>

-<div class="p-6">
-	<h1 class="mb-4 text-xl font-bold text-gray-900 dark:text-gray-100">{config.displayName}</h1>
+<div>
+	<h1>{config.displayName}</h1>
 	<AdminTable
 		records={data.records}
 		listFields={config.listFields}
@@ -79,17 +166,109 @@
 	{canDelete}
 	recordId={editingRecord?.id as string | undefined}
 >
-	<ProclamationForm
-		record={editingRecord ?? {}}
-		relationOptionsData={data.relationOptionsData}
-		categories={data.categories}
-		{fieldErrors}
-		{formError}
-		{isSuper}
-		submitLabel={editingRecord ? 'Update' : 'Create'}
-	/>
+	<form action="?/upsert" method="POST" use:enhance oninput={markDirty}>
+		{#if editingRecord?.id}
+			<input type="hidden" name="id" value={String(editingRecord.id)} />
+		{/if}
+
+		{#if formError}
+			<div>{formError}</div>
+		{/if}
+
+		<div>
+			<div>
+				<label for="field-name">Name</label>
+				<input type="text" id="field-name" name="name" bind:value={name} />
+				{#if fieldErrors.name}
+					<p>{fieldErrors.name}</p>
+				{/if}
+			</div>
+
+			<div>
+				<label for="field-solfeggioFrequencyId">Frequency</label>
+				<select
+					id="field-solfeggioFrequencyId"
+					name="solfeggioFrequencyId"
+					onchange={(e) => (solfeggioFrequencyId = (e.target as HTMLSelectElement).value)}
+				>
+					<option value="">-- Select Frequency --</option>
+					{#each data.relationOptionsData.solfeggioFrequencyId ?? [] as opt (String(opt.value))}
+						<option value={opt.value} selected={String(opt.value) === solfeggioFrequencyId}
+							>{opt.label}</option
+						>
+					{/each}
+				</select>
+				{#if fieldErrors.solfeggioFrequencyId}
+					<p>{fieldErrors.solfeggioFrequencyId}</p>
+				{/if}
+			</div>
+
+			<div>
+				<label for="field-categoryId">Category</label>
+				<select id="field-categoryId" name="categoryId" onchange={handleCategoryChange}>
+					<option value="">-- Select Category --</option>
+					{#each data.categories as cat (String(cat.id))}
+						<option value={cat.id} selected={String(cat.id) === categoryId}>{cat.name}</option>
+					{/each}
+				</select>
+				{#if fieldErrors.categoryId}
+					<p>{fieldErrors.categoryId}</p>
+				{/if}
+			</div>
+
+			<div>
+				<label for="field-groupId">Group</label>
+				<select id="field-groupId" name="groupId" onchange={handleGroupChange}>
+					<option value="">-- Select Group --</option>
+					{#each data.groups as group (String(group.id))}
+						<option value={group.id} selected={String(group.id) === groupId}>{group.name}</option>
+					{/each}
+				</select>
+				{#if fieldErrors.groupId}
+					<p>{fieldErrors.groupId}</p>
+				{/if}
+			</div>
+
+			{#if isSuper}
+				<div>
+					<label for="field-content">Content</label>
+					<div id="field-content">
+						{#key contentKey}
+							<div>
+								<div>
+									<button type="button" onclick={toggleBold} title="Bold">B</button>
+									<button type="button" onclick={toggleItalic} title="Italic">I</button>
+									<button type="button" onclick={toggleHighlight} title="Highlight">
+										<span>H</span>
+									</button>
+									<button type="button" onclick={setColor} title="Cycle text color">A</button>
+								</div>
+								<div
+									bind:this={element}
+									data-testid="tiptap-editor"
+									role="textbox"
+									tabindex="0"
+									contenteditable="true"
+								></div>
+							</div>
+							<input type="hidden" name="content" value={content} />
+						{/key}
+					</div>
+					{#if fieldErrors.content}
+						<p>{fieldErrors.content}</p>
+					{/if}
+				</div>
+			{/if}
+
+			<div>
+				<button type="submit" disabled={!!editingRecord?.id && !dirty}>
+					{editingRecord ? 'Update' : 'Create'}
+				</button>
+			</div>
+		</div>
+	</form>
 </AdminModal>

 {#if toastMessage}
-	<Toast message={toastMessage} type={toastType} />
+	<Toast message={toastMessage} />
 {/if}
@@ -1,237 +0,0 @@
-<script lang="ts">
-	import { enhance } from '$app/forms';
-	import TipTap from '$lib/components/tiptap/TipTap.svelte';
-
-	let {
-		record = {} as Record<string, unknown>,
-		fieldErrors = {} as Record<string, string>,
-		formError = '',
-		relationOptionsData = {} as Record<string, { label: string; value: string | number }[]>,
-		categories = [] as { id: number; name: string; parentId: number | null }[],
-		isSuper = false,
-		action = '?/upsert',
-		submitLabel = 'Save'
-	}: {
-		record?: Record<string, unknown>;
-		fieldErrors?: Record<string, string>;
-		formError?: string;
-		relationOptionsData?: Record<string, { label: string; value: string | number }[]>;
-		categories?: { id: number; name: string; parentId: number | null }[];
-		isSuper?: boolean;
-		action?: string;
-		submitLabel?: string;
-	} = $props();
-
-	let dirty = $state(false);
-
-	$effect(() => {
-		dirty = false;
-	});
-
-	function markDirty() {
-		if (record.id) dirty = true;
-	}
-
-	let name = $state('');
-	let solfeggioFrequencyId = $state('');
-	let subscriptionLevelId = $state('');
-	let parentCategoryId = $state('');
-	let categoryId = $state('');
-
-	$effect(() => {
-		name = String(record.name ?? '');
-		solfeggioFrequencyId = String(record.solfeggioFrequencyId ?? '');
-		subscriptionLevelId = String(record.subscriptionLevelId ?? '');
-		parentCategoryId = String(
-			record.parentCategoryId ??
-				(record.category as Record<string, unknown> | undefined)?.parentId ??
-				''
-		);
-		categoryId = String(record.categoryId ?? '');
-	});
-
-	let parentOptions = $derived(categories.filter((c) => c.parentId === null));
-
-	let childOptions = $derived(
-		parentCategoryId ? categories.filter((c) => c.parentId === Number(parentCategoryId)) : []
-	);
-
-	function handleParentChange(e: Event) {
-		const target = e.target as HTMLSelectElement;
-		parentCategoryId = target.value;
-		categoryId = '';
-	}
-
-	let contentKey = $derived(record.id ?? 'new');
-</script>
-
-<form {action} method="POST" use:enhance oninput={markDirty}>
-	{#if record?.id}
-		<input type="hidden" name="id" value={String(record.id)} />
-	{/if}
-
-	{#if formError}
-		<div class="mb-4 border border-red-300 bg-red-50 px-4 py-2 text-sm text-red-700">
-			{formError}
-		</div>
-	{/if}
-
-	<div class="flex flex-col gap-4">
-		<div>
-			<label
-				for="field-name"
-				class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300"
-			>
-				Name
-			</label>
-			<input
-				type="text"
-				id="field-name"
-				name="name"
-				bind:value={name}
-				class="w-full border px-3 py-1.5 text-sm {fieldErrors.name
-					? 'border-red-400'
-					: 'border-gray-300 dark:border-gray-600'} dark:bg-gray-800 dark:text-gray-100"
-			/>
-			{#if fieldErrors.name}
-				<p class="mt-1 text-xs text-red-600">{fieldErrors.name}</p>
-			{/if}
-		</div>
-
-		<div>
-			<label
-				for="field-solfeggioFrequencyId"
-				class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300"
-			>
-				Frequency
-			</label>
-			<select
-				id="field-solfeggioFrequencyId"
-				name="solfeggioFrequencyId"
-				onchange={(e) => (solfeggioFrequencyId = (e.target as HTMLSelectElement).value)}
-				class="w-full border px-3 py-1.5 text-sm {fieldErrors.solfeggioFrequencyId
-					? 'border-red-400'
-					: 'border-gray-300 dark:border-gray-600'} dark:bg-gray-800 dark:text-gray-100"
-			>
-				<option value="">-- Select Frequency --</option>
-				{#each relationOptionsData.solfeggioFrequencyId ?? [] as opt (String(opt.value))}
-					<option value={opt.value} selected={String(opt.value) === solfeggioFrequencyId}
-						>{opt.label}</option
-					>
-				{/each}
-			</select>
-			{#if fieldErrors.solfeggioFrequencyId}
-				<p class="mt-1 text-xs text-red-600">{fieldErrors.solfeggioFrequencyId}</p>
-			{/if}
-		</div>
-
-		<div>
-			<label
-				for="field-parentCategoryId"
-				class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300"
-			>
-				Category
-			</label>
-			<select
-				id="field-parentCategoryId"
-				name="parentCategoryId"
-				onchange={handleParentChange}
-				class="w-full border px-3 py-1.5 text-sm {fieldErrors.parentCategoryId
-					? 'border-red-400'
-					: 'border-gray-300 dark:border-gray-600'} dark:bg-gray-800 dark:text-gray-100"
-			>
-				<option value="">-- Select Category --</option>
-				{#each parentOptions as cat (String(cat.id))}
-					<option value={cat.id} selected={String(cat.id) === parentCategoryId}>{cat.name}</option>
-				{/each}
-			</select>
-			{#if fieldErrors.parentCategoryId}
-				<p class="mt-1 text-xs text-red-600">{fieldErrors.parentCategoryId}</p>
-			{/if}
-		</div>
-
-		<div>
-			<label
-				for="field-categoryId"
-				class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300"
-			>
-				Sub-Category
-			</label>
-			<select
-				id="field-categoryId"
-				name="categoryId"
-				onchange={(e) => (categoryId = (e.target as HTMLSelectElement).value)}
-				class="w-full border px-3 py-1.5 text-sm {fieldErrors.categoryId
-					? 'border-red-400'
-					: 'border-gray-300 dark:border-gray-600'} dark:bg-gray-800 dark:text-gray-100"
-			>
-				<option value="">-- Select Sub-Category --</option>
-				{#each childOptions as cat (String(cat.id))}
-					<option value={cat.id} selected={String(cat.id) === categoryId}>{cat.name}</option>
-				{/each}
-			</select>
-			{#if fieldErrors.categoryId}
-				<p class="mt-1 text-xs text-red-600">{fieldErrors.categoryId}</p>
-			{/if}
-		</div>
-
-		<div>
-			<label
-				for="field-subscriptionLevelId"
-				class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300"
-			>
-				Subscription Level
-			</label>
-			<select
-				id="field-subscriptionLevelId"
-				name="subscriptionLevelId"
-				onchange={(e) => (subscriptionLevelId = (e.target as HTMLSelectElement).value)}
-				class="w-full border px-3 py-1.5 text-sm {fieldErrors.subscriptionLevelId
-					? 'border-red-400'
-					: 'border-gray-300 dark:border-gray-600'} dark:bg-gray-800 dark:text-gray-100"
-			>
-				<option value="">-- Select Level --</option>
-				{#each relationOptionsData.subscriptionLevelId ?? [] as opt (String(opt.value))}
-					<option value={opt.value} selected={String(opt.value) === subscriptionLevelId}
-						>{opt.label}</option
-					>
-				{/each}
-			</select>
-			{#if fieldErrors.subscriptionLevelId}
-				<p class="mt-1 text-xs text-red-600">{fieldErrors.subscriptionLevelId}</p>
-			{/if}
-		</div>
-
-		{#if isSuper}
-			<div>
-				<label
-					for="field-content"
-					class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300"
-				>
-					Content
-				</label>
-				<div id="field-content">
-					{#key record.id}
-						<TipTap
-							initialContent={typeof record.content === 'string' ? record.content : ''}
-							name="content"
-						/>
-					{/key}
-				</div>
-				{#if fieldErrors.content}
-					<p class="mt-1 text-xs text-red-600">{fieldErrors.content}</p>
-				{/if}
-			</div>
-		{/if}
-
-		<div class="flex justify-end gap-2 pt-2">
-			<button
-				type="submit"
-				disabled={!!record?.id && !dirty}
-				class="border border-gray-300 bg-gray-100 px-4 py-1.5 text-sm font-medium hover:bg-gray-200 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
-			>
-				{submitLabel}
-			</button>
-		</div>
-	</div>
-</form>
@@ -1,152 +0,0 @@
-import { page } from 'vitest/browser';
-import { describe, it, expect, vi } from 'vitest';
-import { render } from 'vitest-browser-svelte';
-
-vi.mock('$app/forms', () => ({
-	enhance: () => () => {}
-}));
-
-vi.mock('$lib/components/tiptap/TipTap.svelte', () => ({
-	default: ($anchor: Element) => {
-		const div = document.createElement('div');
-		div.setAttribute('data-testid', 'tiptap-mock');
-		$anchor.replaceWith(div);
-	}
-}));
-
-import ProclamationForm from './ProclamationForm.svelte';
-
-const relationOptionsData = {
-	solfeggioFrequencyId: [
-		{ label: 'UT - 396', value: 1 },
-		{ label: 'RE - 417', value: 2 }
-	],
-	subscriptionLevelId: [
-		{ label: 'Free', value: 1 },
-		{ label: 'Premium', value: 2 }
-	]
-};
-
-const categories = [
-	{ id: 1, name: 'Healing', parentId: null },
-	{ id: 2, name: 'Manifestation', parentId: null },
-	{ id: 3, name: 'Physical Healing', parentId: 1 },
-	{ id: 4, name: 'Emotional Healing', parentId: 1 }
-];
-
-describe('ProclamationForm', () => {
-	it('renders all basic fields in create mode', async () => {
-		render(ProclamationForm, {
-			relationOptionsData,
-			categories,
-			isSuper: true
-		});
-
-		await expect.element(page.getByRole('textbox', { name: 'Name' })).toBeInTheDocument();
-		await expect.element(page.getByRole('combobox', { name: /^Frequency$/ })).toBeInTheDocument();
-		await expect.element(page.getByRole('combobox', { name: /^Category$/ })).toBeInTheDocument();
-		await expect
-			.element(page.getByRole('combobox', { name: /^Sub-Category$/ }))
-			.toBeInTheDocument();
-		await expect
-			.element(page.getByRole('combobox', { name: /^Subscription Level$/ }))
-			.toBeInTheDocument();
-		await expect.element(page.getByRole('button', { name: 'Save' })).toBeInTheDocument();
-	});
-
-	it('pre-fills name input when editing an existing record', async () => {
-		render(ProclamationForm, {
-			record: {
-				id: 'proc-1',
-				name: 'Test Proclamation',
-				solfeggioFrequencyId: 2,
-				subscriptionLevelId: 2,
-				categoryId: 3,
-				parentCategoryId: 1
-			},
-			relationOptionsData,
-			categories,
-			isSuper: true,
-			submitLabel: 'Update'
-		});
-
-		await expect
-			.element(page.getByRole('textbox', { name: 'Name' }))
-			.toHaveValue('Test Proclamation');
-	});
-
-	it('pre-fills select values when editing an existing record', async () => {
-		render(ProclamationForm, {
-			record: {
-				id: 'proc-1',
-				name: 'Test Proclamation',
-				solfeggioFrequencyId: 2,
-				subscriptionLevelId: 2,
-				categoryId: 3,
-				parentCategoryId: 1
-			},
-			relationOptionsData,
-			categories,
-			isSuper: true
-		});
-
-		const freqEl = (await page
-			.getByRole('combobox', { name: /^Frequency$/ })
-			.element()) as HTMLSelectElement;
-		const levelEl = (await page
-			.getByRole('combobox', { name: /^Subscription Level$/ })
-			.element()) as HTMLSelectElement;
-
-		expect(freqEl.value).toBe('2');
-		expect(levelEl.value).toBe('2');
-	});
-
-	it('shows content field when isSuper is true', async () => {
-		render(ProclamationForm, {
-			record: { id: 'proc-1', name: 'Test', content: '<p>Secret</p>' },
-			relationOptionsData,
-			categories,
-			isSuper: true
-		});
-
-		await expect.element(page.getByText('Content')).toBeInTheDocument();
-		await expect.element(page.getByTestId('tiptap-mock')).toBeInTheDocument();
-	});
-
-	it('hides content field when isSuper is false', async () => {
-		render(ProclamationForm, {
-			record: { id: 'proc-1', name: 'Test', content: '<p>Secret</p>' },
-			relationOptionsData,
-			categories,
-			isSuper: false
-		});
-
-		await expect.element(page.getByText('Content')).not.toBeInTheDocument();
-	});
-
-	it('disables submit button when editing and not dirty', async () => {
-		render(ProclamationForm, {
-			record: { id: 'proc-1', name: 'Test' },
-			relationOptionsData,
-			categories,
-			isSuper: true,
-			submitLabel: 'Update'
-		});
-
-		await expect.element(page.getByRole('button', { name: 'Update' })).toBeDisabled();
-	});
-
-	it('enables submit button when editing and user modifies a field', async () => {
-		render(ProclamationForm, {
-			record: { id: 'proc-1', name: 'Test' },
-			relationOptionsData,
-			categories,
-			isSuper: true,
-			submitLabel: 'Update'
-		});
-
-		await page.getByRole('textbox', { name: 'Name' }).fill('New Name');
-
-		await expect.element(page.getByRole('button', { name: 'Update' })).toBeEnabled();
-	});
-});
@@ -13,6 +13,9 @@ vi.mock('$lib/db', () => ({
 		},
 		proclamationCategory: {
 			findMany: vi.fn()
+		},
+		proclamationGroup: {
+			findMany: vi.fn()
 		}
 	}
 }));
@@ -31,6 +34,7 @@ const mockLoadRecords = loadRecords as ReturnType<typeof vi.fn>;
 const mockDeleteRecord = deleteRecord as ReturnType<typeof vi.fn>;
 const mockSuperFormErrorsToFieldErrors = superFormErrorsToFieldErrors as ReturnType<typeof vi.fn>;
 const mockCatFindMany = prisma.proclamationCategory.findMany as ReturnType<typeof vi.fn>;
+const mockGroupFindMany = prisma.proclamationGroup.findMany as ReturnType<typeof vi.fn>;
 const mockFindUnique = prisma.proclamation.findUnique as ReturnType<typeof vi.fn>;
 const mockCreate = prisma.proclamation.create as ReturnType<typeof vi.fn>;
 const mockUpdate = prisma.proclamation.update as ReturnType<typeof vi.fn>;
@@ -46,11 +50,13 @@ describe('proclamations admin page server', () => {
 			{ id: '2', name: 'B', content: '<p>secret2</p>' }
 		];
 		const relationOptionsData = {};
-		const categories = [{ id: 1, name: 'Healing', parentId: null }];
+		const categories = [{ id: 1, name: 'Healing' }];
+		const groups = [{ id: 1, name: 'General' }];

 		it('strips content for non-Super users', async () => {
 			mockLoadRecords.mockResolvedValue({ records: recordsWithContent, relationOptionsData });
 			mockCatFindMany.mockResolvedValue(categories);
+			mockGroupFindMany.mockResolvedValue(groups);

 			const locals = createLocals(mockUser({ roleId: 4 }) as any);
 			const result = await load({ locals } as any);
@@ -61,13 +67,15 @@ describe('proclamations admin page server', () => {
 					{ id: '2', name: 'B' }
 				],
 				relationOptionsData,
-				categories
+				categories,
+				groups
 			});
 		});

 		it('keeps content for Super users', async () => {
 			mockLoadRecords.mockResolvedValue({ records: recordsWithContent, relationOptionsData });
 			mockCatFindMany.mockResolvedValue(categories);
+			mockGroupFindMany.mockResolvedValue(groups);

 			const locals = createLocals(mockUser({ roleId: 1 }) as any);
 			const result = await load({ locals } as any);
@@ -75,7 +83,8 @@ describe('proclamations admin page server', () => {
 			expect(result).toEqual({
 				records: recordsWithContent,
 				relationOptionsData,
-				categories
+				categories,
+				groups
 			});
 		});
 	});
@@ -0,0 +1,174 @@
+import { page } from 'vitest/browser';
+import { describe, it, expect, vi } from 'vitest';
+import { render } from 'vitest-browser-svelte';
+import type { PageProps } from './$types';
+
+vi.mock('$app/forms', () => ({
+	enhance: () => () => {}
+}));
+
+import Page from './+page.svelte';
+
+const relationOptionsData = {
+	solfeggioFrequencyId: [
+		{ label: 'UT - 396', value: 1 },
+		{ label: 'RE - 417', value: 2 }
+	]
+};
+
+const categories = [
+	{ id: 1, name: 'Healing' },
+	{ id: 2, name: 'Manifestation' }
+];
+
+const groups = [
+	{ id: 1, name: 'General' },
+	{ id: 2, name: 'Specific' }
+];
+
+const superAdmin = {
+	id: 'admin-1',
+	name: 'Super Admin',
+	roleId: 1,
+	roleName: 'SUPER'
+};
+
+function makeData(overrides: Partial<PageProps['data']> = {}): PageProps['data'] {
+	return {
+		records: [],
+		relationOptionsData,
+		categories,
+		groups,
+		adminUser: superAdmin,
+		userRoleId: superAdmin.roleId,
+		...overrides
+	};
+}
+
+function mountPage(dataOverrides: Partial<PageProps['data']> = {}) {
+	return render(Page, { params: {}, data: makeData(dataOverrides), form: null });
+}
+
+const editRecord = {
+	id: 'proc-1',
+	name: 'Test Proclamation',
+	content: '<p>Secret</p>',
+	solfeggioFrequencyId: 2,
+	categoryId: 1,
+	groupId: 2,
+	category: { name: 'Healing' },
+	group: { name: 'Specific' },
+	solfeggioFrequency: { name: 'RE - 417' }
+};
+
+async function openCreateModal() {
+	await page.getByRole('button', { name: 'New Proclamation +' }).click();
+}
+
+async function openEditModal() {
+	await page.getByRole('cell', { name: 'Test Proclamation' }).click();
+}
+
+describe('proclamations admin page (super user)', () => {
+	it('renders all basic fields in create mode', async () => {
+		mountPage();
+
+		await openCreateModal();
+
+		await expect.element(page.getByRole('textbox', { name: 'Name' })).toBeInTheDocument();
+		await expect.element(page.getByRole('combobox', { name: /^Frequency$/ })).toBeInTheDocument();
+		await expect.element(page.getByRole('combobox', { name: /^Category$/ })).toBeInTheDocument();
+		await expect.element(page.getByRole('combobox', { name: /^Group$/ })).toBeInTheDocument();
+		await expect.element(page.getByRole('button', { name: 'Create' })).toBeInTheDocument();
+	});
+
+	it('pre-fills name input when editing an existing record', async () => {
+		mountPage({ records: [editRecord] });
+
+		await openEditModal();
+
+		await expect
+			.element(page.getByRole('textbox', { name: 'Name' }))
+			.toHaveValue('Test Proclamation');
+	});
+
+	it('pre-fills select values when editing an existing record', async () => {
+		mountPage({ records: [editRecord] });
+
+		await openEditModal();
+
+		const freqEl = (await page
+			.getByRole('combobox', { name: /^Frequency$/ })
+			.element()) as HTMLSelectElement;
+		const categoryEl = (await page
+			.getByRole('combobox', { name: /^Category$/ })
+			.element()) as HTMLSelectElement;
+		const groupEl = (await page
+			.getByRole('combobox', { name: /^Group$/ })
+			.element()) as HTMLSelectElement;
+
+		expect(freqEl.value).toBe('2');
+		expect(categoryEl.value).toBe('1');
+		expect(groupEl.value).toBe('2');
+	});
+
+	it('keeps group selection independent of category selection (movable filter)', async () => {
+		mountPage({ records: [editRecord] });
+
+		await openEditModal();
+
+		const categoryEl = (await page
+			.getByRole('combobox', { name: /^Category$/ })
+			.element()) as HTMLSelectElement;
+		const groupEl = (await page
+			.getByRole('combobox', { name: /^Group$/ })
+			.element()) as HTMLSelectElement;
+
+		categoryEl.value = '2';
+		categoryEl.dispatchEvent(new Event('change', { bubbles: true }));
+
+		expect(categoryEl.value).toBe('2');
+		expect(groupEl.value).toBe('2');
+	});
+
+	it('shows content editor when isSuper is true', async () => {
+		mountPage({ records: [editRecord] });
+
+		await openEditModal();
+
+		await expect.element(page.getByText('Content')).toBeInTheDocument();
+		await expect.element(page.getByTestId('tiptap-editor')).toBeInTheDocument();
+	});
+
+	it('disables submit button when editing and not dirty', async () => {
+		mountPage({ records: [editRecord] });
+
+		await openEditModal();
+
+		await expect.element(page.getByRole('button', { name: 'Update' })).toBeDisabled();
+	});
+
+	it('enables submit button when editing and user modifies a field', async () => {
+		mountPage({ records: [editRecord] });
+
+		await openEditModal();
+
+		await page.getByRole('textbox', { name: 'Name' }).fill('New Name');
+
+		await expect.element(page.getByRole('button', { name: 'Update' })).toBeEnabled();
+	});
+});
+
+describe('proclamations admin page (non-super user)', () => {
+	it('hides create/edit entry points and content field from non-super users', async () => {
+		mountPage({
+			records: [editRecord],
+			adminUser: { ...superAdmin, id: 'admin-2', roleId: 2, roleName: 'ADMIN' }
+		});
+
+		await expect
+			.element(page.getByRole('button', { name: 'New Proclamation +' }))
+			.not.toBeInTheDocument();
+		await expect.element(page.getByText('Content')).not.toBeInTheDocument();
+	});
+});
@@ -15,7 +15,6 @@
 	let modalOpen = $state(false);
 	let editingRecord = $state<Record<string, unknown> | null>(null);
 	let toastMessage = $state('');
-	let toastType = $state<'success' | 'error'>('success');
 	let fieldErrors = $state<Record<string, string>>({});
 	let formError = $state('');
 	let addressFormOpen = $state(false);
@@ -44,7 +43,6 @@
 			} else if ((form as any).userError) {
 				userError = (form as any).userError;
 			} else if (form.success) {
-				toastType = 'success';
 				if ((form as any).address) {
 					toastMessage = 'Address saved';
 					const addr = (form as any).address as Record<string, unknown>;
@@ -112,8 +110,8 @@
 	}
 </script>

-<div class="p-6">
-	<h1 class="mb-4 text-xl font-bold text-gray-900 dark:text-gray-100">{config.displayName}</h1>
+<div>
+	<h1>{config.displayName}</h1>
 	<AdminTable
 		records={data.records}
 		listFields={config.listFields}
@@ -139,100 +137,74 @@
 			<input type="hidden" name="id" value={String(editingRecord.id)} />
 		{/if}
 		{#if formError}
-			<div class="mb-4 border border-red-300 bg-red-50 px-4 py-2 text-sm text-red-700">
+			<div>
 				{formError}
 			</div>
 		{/if}
-		<div class="flex flex-col gap-4">
+		<div>
 			<div>
-				<label
-					for="field-userId"
-					class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300"
-				>
-					User
-				</label>
-				<select
-					id="field-userId"
-					name="userId"
-					value={String(editingRecord?.userId ?? '')}
-					class="w-full border px-3 py-1.5 text-sm {fieldErrors.userId
-						? 'border-red-400'
-						: 'border-gray-300 dark:border-gray-600'} dark:bg-gray-800 dark:text-gray-100"
-				>
+				<label for="field-userId"> User </label>
+				<select id="field-userId" name="userId" value={String(editingRecord?.userId ?? '')}>
 					<option value="">-- Select User --</option>
 					{#each data.relationOptionsData.userId ?? [] as opt (String(opt.value))}
 						<option value={opt.value}>{opt.label}</option>
 					{/each}
 				</select>
 				{#if fieldErrors.userId}
-					<p class="mt-1 text-xs text-red-600">{fieldErrors.userId}</p>
+					<p>{fieldErrors.userId}</p>
 				{/if}
 			</div>
 			<div>
-				<label
-					for="field-firstName"
-					class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300"
-				>
-					First Name
-				</label>
+				<label for="field-email"> Email (for unregistered users) </label>
+				<input
+					type="text"
+					id="field-email"
+					name="email"
+					value={String(editingRecord?.email ?? '')}
+					placeholder="user@example.com"
+				/>
+				{#if fieldErrors.email}
+					<p>{fieldErrors.email}</p>
+				{/if}
+			</div>
+			<div>
+				<label for="field-firstName"> First Name </label>
 				<input
 					type="text"
 					id="field-firstName"
 					name="firstName"
 					value={String(editingRecord?.firstName ?? '')}
-					class="w-full border px-3 py-1.5 text-sm {fieldErrors.firstName
-						? 'border-red-400'
-						: 'border-gray-300 dark:border-gray-600'} dark:bg-gray-800 dark:text-gray-100"
 				/>
 				{#if fieldErrors.firstName}
-					<p class="mt-1 text-xs text-red-600">{fieldErrors.firstName}</p>
+					<p>{fieldErrors.firstName}</p>
 				{/if}
 			</div>
 			<div>
-				<label
-					for="field-lastName"
-					class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300"
-				>
-					Last Name
-				</label>
+				<label for="field-lastName"> Last Name </label>
 				<input
 					type="text"
 					id="field-lastName"
 					name="lastName"
 					value={String(editingRecord?.lastName ?? '')}
-					class="w-full border px-3 py-1.5 text-sm {fieldErrors.lastName
-						? 'border-red-400'
-						: 'border-gray-300 dark:border-gray-600'} dark:bg-gray-800 dark:text-gray-100"
 				/>
 				{#if fieldErrors.lastName}
-					<p class="mt-1 text-xs text-red-600">{fieldErrors.lastName}</p>
+					<p>{fieldErrors.lastName}</p>
 				{/if}
 			</div>
 			<div>
-				<label
-					for="field-phoneNumber"
-					class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300"
-				>
-					Phone Number
-				</label>
+				<label for="field-phoneNumber"> Phone Number </label>
 				<input
 					type="text"
 					id="field-phoneNumber"
 					name="phoneNumber"
 					value={String(editingRecord?.phoneNumber ?? '')}
-					class="w-full border px-3 py-1.5 text-sm {fieldErrors.phoneNumber
-						? 'border-red-400'
-						: 'border-gray-300 dark:border-gray-600'} dark:bg-gray-800 dark:text-gray-100"
 				/>
 				{#if fieldErrors.phoneNumber}
-					<p class="mt-1 text-xs text-red-600">{fieldErrors.phoneNumber}</p>
+					<p>{fieldErrors.phoneNumber}</p>
 				{/if}
 			</div>
-			<div class="flex justify-end gap-2 pt-2">
-				<button
-					type="submit"
-					class="border border-gray-300 bg-gray-100 px-4 py-1.5 text-sm font-medium hover:bg-gray-200 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
-				>
+			<div>
+				<button type="submit">
 					{editingRecord ? 'Update' : 'Create'}
 				</button>
 			</div>
@@ -241,72 +213,36 @@

 	{#if editingRecord}
 		{@const user = editingRecord.user as Record<string, unknown> | undefined}
-		<div class="mt-6 border-t border-gray-200 pt-4 dark:border-gray-700">
-			<div class="mb-2 flex items-center justify-between">
-				<h3 class="text-sm font-semibold text-gray-700 dark:text-gray-300">User</h3>
-				<button
-					type="button"
-					onclick={toggleUserForm}
-					class="text-xs font-medium text-blue-600 hover:text-blue-800 dark:text-blue-400"
-				>
+		<div>
+			<div>
+				<h3>User</h3>
+				<button type="button" onclick={toggleUserForm}>
 					{userFormOpen ? 'Cancel' : 'Edit User'}
 				</button>
 			</div>
-			<p class="mb-1 text-sm text-gray-600 dark:text-gray-400">
+			<p>
 				{(user?.name as string) ?? ''} ({(user?.email as string) ?? ''})
 			</p>

 			{#if userFormOpen}
-				<form
-					method="POST"
-					action="?/updateUser"
-					use:enhance
-					class="mt-3 rounded border border-gray-200 p-3 dark:border-gray-700"
-				>
+				<form method="POST" action="?/updateUser" use:enhance>
 					<input type="hidden" name="id" value={String(user?.id ?? '')} />
 					{#if userError}
-						<div class="mb-2 border border-red-300 bg-red-50 px-3 py-1.5 text-sm text-red-700">
+						<div>
 							{userError}
 						</div>
 					{/if}
-					<div class="flex flex-col gap-2">
+					<div>
 						<div>
-							<label
-								for="user-name"
-								class="mb-0.5 block text-xs font-medium text-gray-600 dark:text-gray-400"
-							>
-								Name
-							</label>
-							<input
-								type="text"
-								id="user-name"
-								name="name"
-								value={userName}
-								class="w-full border border-gray-300 px-2 py-1 text-sm dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100"
-							/>
+							<label for="user-name"> Name </label>
+							<input type="text" id="user-name" name="name" value={userName} />
 						</div>
 						<div>
-							<label
-								for="user-email"
-								class="mb-0.5 block text-xs font-medium text-gray-600 dark:text-gray-400"
-							>
-								Email
-							</label>
-							<input
-								type="email"
-								id="user-email"
-								name="email"
-								value={userEmail}
-								class="w-full border border-gray-300 px-2 py-1 text-sm dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100"
-							/>
+							<label for="user-email"> Email </label>
+							<input type="email" id="user-email" name="email" value={userEmail} />
 						</div>
-						<div class="flex justify-end">
-							<button
-								type="submit"
-								class="border border-gray-300 bg-gray-100 px-3 py-1 text-xs font-medium hover:bg-gray-200 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
-							>
-								Save User
-							</button>
+						<div>
+							<button type="submit"> Save User </button>
 						</div>
 					</div>
 				</form>
@@ -316,172 +252,100 @@

 	{#if editingRecord}
 		{@const addresses = (editingRecord.addresses as Record<string, unknown>[]) ?? []}
-		<div class="mt-6 border-t border-gray-200 pt-4 dark:border-gray-700">
-			<div class="mb-2 flex items-center justify-between">
-				<h3 class="text-sm font-semibold text-gray-700 dark:text-gray-300">Addresses</h3>
-				<button
-					type="button"
-					onclick={toggleAddressForm}
-					class="text-xs font-medium text-blue-600 hover:text-blue-800 dark:text-blue-400"
-				>
+		<div>
+			<div>
+				<h3>Addresses</h3>
+				<button type="button" onclick={toggleAddressForm}>
 					{addressFormOpen ? 'Cancel' : 'Add Address +'}
 				</button>
 			</div>

 			{#if addressFormOpen}
-				<form
-					method="POST"
-					action="?/upsertAddress"
-					use:enhance
-					class="mb-3 rounded border border-gray-200 p-3 dark:border-gray-700"
-				>
+				<form method="POST" action="?/upsertAddress" use:enhance>
 					<input type="hidden" name="profileId" value={String(editingRecord.id)} />
 					{#if addressError}
-						<div class="mb-2 border border-red-300 bg-red-50 px-3 py-1.5 text-sm text-red-700">
+						<div>
 							{addressError}
 						</div>
 					{/if}
-					<div class="grid grid-cols-2 gap-2">
+					<div>
 						<div>
-							<label
-								for="addr-street"
-								class="mb-0.5 block text-xs font-medium text-gray-600 dark:text-gray-400"
-							>
-								Street
-							</label>
-							<input
-								type="text"
-								id="addr-street"
-								name="street"
-								required
-								class="w-full border border-gray-300 px-2 py-1 text-sm dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100"
-							/>
+							<label for="addr-street"> Street </label>
+							<input type="text" id="addr-street" name="street" required />
 						</div>
 						<div>
-							<label
-								for="addr-city"
-								class="mb-0.5 block text-xs font-medium text-gray-600 dark:text-gray-400"
-							>
-								City
-							</label>
-							<input
-								type="text"
-								id="addr-city"
-								name="city"
-								required
-								class="w-full border border-gray-300 px-2 py-1 text-sm dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100"
-							/>
+							<label for="addr-city"> City </label>
+							<input type="text" id="addr-city" name="city" required />
 						</div>
 						<div>
-							<label
-								for="addr-state"
-								class="mb-0.5 block text-xs font-medium text-gray-600 dark:text-gray-400"
-							>
-								State
-							</label>
-							<input
-								type="text"
-								id="addr-state"
-								name="state"
-								required
-								class="w-full border border-gray-300 px-2 py-1 text-sm dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100"
-							/>
+							<label for="addr-state"> State </label>
+							<input type="text" id="addr-state" name="state" required />
 						</div>
 						<div>
-							<label
-								for="addr-postal"
-								class="mb-0.5 block text-xs font-medium text-gray-600 dark:text-gray-400"
-							>
-								Postal Code
-							</label>
-							<input
-								type="text"
-								id="addr-postal"
-								name="postalCode"
-								required
-								class="w-full border border-gray-300 px-2 py-1 text-sm dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100"
-							/>
+							<label for="addr-postal"> Postal Code </label>
+							<input type="text" id="addr-postal" name="postalCode" required />
 						</div>
 						<div>
-							<label
-								for="addr-country"
-								class="mb-0.5 block text-xs font-medium text-gray-600 dark:text-gray-400"
-							>
-								Country
-							</label>
-							<input
-								type="text"
-								id="addr-country"
-								name="country"
-								required
-								class="w-full border border-gray-300 px-2 py-1 text-sm dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100"
-							/>
+							<label for="addr-country"> Country </label>
+							<input type="text" id="addr-country" name="country" required />
 						</div>
 					</div>
-					<div class="mt-2 flex flex-wrap gap-4">
-						<label class="flex items-center gap-1.5 text-xs text-gray-600 dark:text-gray-400">
-							<input type="checkbox" name="isDefaultMailing" class="h-3.5 w-3.5" />
+					<div>
+						<label>
+							<input type="checkbox" name="isDefaultMailing" />
 							Default Mailing
 						</label>
-						<label class="flex items-center gap-1.5 text-xs text-gray-600 dark:text-gray-400">
-							<input type="checkbox" name="isDefaultBilling" class="h-3.5 w-3.5" />
+						<label>
+							<input type="checkbox" name="isDefaultBilling" />
 							Default Billing
 						</label>
-						<label class="flex items-center gap-1.5 text-xs text-gray-600 dark:text-gray-400">
-							<input type="checkbox" name="isDefaultShipping" class="h-3.5 w-3.5" />
+						<label>
+							<input type="checkbox" name="isDefaultShipping" />
 							Default Shipping
 						</label>
 					</div>
-					<div class="mt-2 flex justify-end">
-						<button
-							type="submit"
-							class="border border-gray-300 bg-gray-100 px-3 py-1 text-xs font-medium hover:bg-gray-200 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
-						>
-							Save Address
-						</button>
+					<div>
+						<button type="submit"> Save Address </button>
 					</div>
 				</form>
 			{/if}

 			{#if addresses.length > 0}
-				<table class="w-full text-sm">
+				<table>
 					<thead>
-						<tr class="border-b border-gray-200 dark:border-gray-700">
-							<th class="px-2 py-1 text-left text-xs font-medium text-gray-500 uppercase">Street</th
-							>
-							<th class="px-2 py-1 text-left text-xs font-medium text-gray-500 uppercase">City</th>
-							<th class="px-2 py-1 text-left text-xs font-medium text-gray-500 uppercase">State</th>
-							<th class="px-2 py-1 text-left text-xs font-medium text-gray-500 uppercase">Zip</th>
-							<th class="px-2 py-1 text-left text-xs font-medium text-gray-500 uppercase"
-								>Country</th
-							>
-							<th class="px-2 py-1 text-center text-xs font-medium text-gray-500 uppercase">M</th>
-							<th class="px-2 py-1 text-center text-xs font-medium text-gray-500 uppercase">B</th>
-							<th class="px-2 py-1 text-center text-xs font-medium text-gray-500 uppercase">S</th>
+						<tr>
+							<th>Street</th>
+							<th>City</th>
+							<th>State</th>
+							<th>Zip</th>
+							<th>Country</th>
+							<th>M</th>
+							<th>B</th>
+							<th>S</th>
 						</tr>
 					</thead>
 					<tbody>
 						{#each addresses as addr}
-							<tr class="border-b border-gray-100 dark:border-gray-800">
-								<td class="px-2 py-1">{addr.street as string}</td>
-								<td class="px-2 py-1">{addr.city as string}</td>
-								<td class="px-2 py-1">{addr.state as string}</td>
-								<td class="px-2 py-1">{addr.postalCode as string}</td>
-								<td class="px-2 py-1">{addr.country as string}</td>
-								<td class="px-2 py-1 text-center text-xs">{addr.isDefaultMailing ? '✓' : ''}</td>
-								<td class="px-2 py-1 text-center text-xs">{addr.isDefaultBilling ? '✓' : ''}</td>
-								<td class="px-2 py-1 text-center text-xs">{addr.isDefaultShipping ? '✓' : ''}</td>
+							<tr>
+								<td>{addr.street as string}</td>
+								<td>{addr.city as string}</td>
+								<td>{addr.state as string}</td>
+								<td>{addr.postalCode as string}</td>
+								<td>{addr.country as string}</td>
+								<td>{addr.isDefaultMailing ? '✓' : ''}</td>
+								<td>{addr.isDefaultBilling ? '✓' : ''}</td>
+								<td>{addr.isDefaultShipping ? '✓' : ''}</td>
 							</tr>
 						{/each}
 					</tbody>
 				</table>
 			{:else}
-				<p class="text-sm text-gray-500">No addresses on file.</p>
+				<p>No addresses on file.</p>
 			{/if}
 		</div>
 	{/if}
 </AdminModal>

 {#if toastMessage}
-	<Toast message={toastMessage} type={toastType} />
+	<Toast message={toastMessage} />
 {/if}
@@ -1,11 +1,10 @@
 <script lang="ts">
 	import type { PageProps } from './$types';
-	import type { ActionResult } from '$lib/svelte-admin/types';
+	import { enhance } from '$app/forms';
 	import AdminTable from '$lib/components/admin/AdminTable.svelte';
 	import AdminModal from '$lib/components/admin/AdminModal.svelte';
 	import Toast from '$lib/components/admin/Toast.svelte';
 	import { getModelConfig } from '$lib/svelte-admin/registry';
-	import FreqForm from './FreqForm.svelte';

 	let { data, form }: PageProps = $props();

@@ -15,16 +14,18 @@
 	let modalOpen = $state(false);
 	let editingRecord = $state<Record<string, unknown> | null>(null);
 	let toastMessage = $state('');
-	let toastType = $state<'success' | 'error'>('success');
 	let fieldErrors = $state<Record<string, string>>({});
 	let formError = $state('');

+	let name = $state('');
+	let value = $state('');
+	let dirty = $state(false);
+
 	$effect(() => {
 		if (form && 'success' in (form as any)) {
 			const result = form as any;
 			if (result.success) {
 				toastMessage = 'Saved successfully';
-				toastType = 'success';
 				closeModal();
 			} else {
 				formError = result.error ?? '';
@@ -33,6 +34,13 @@
 		}
 	});

+	$effect(() => {
+		const record = editingRecord ?? {};
+		name = String(record['name'] ?? '');
+		value = String(record['value'] ?? '');
+		dirty = false;
+	});
+
 	function openCreate() {
 		editingRecord = null;
 		formError = '';
@@ -53,10 +61,14 @@
 		formError = '';
 		fieldErrors = {};
 	}
+
+	function markDirty() {
+		if (editingRecord?.id) dirty = true;
+	}
 </script>

-<div class="p-6">
-	<h1 class="mb-4 text-xl font-bold text-gray-900 dark:text-gray-100">{config.displayName}</h1>
+<div>
+	<h1>{config.displayName}</h1>
 	<AdminTable
 		records={data.records}
 		listFields={config.listFields}
@@ -77,14 +89,41 @@
 	{canDelete}
 	recordId={editingRecord?.id as string | undefined}
 >
-	<FreqForm
-		record={editingRecord ?? {}}
-		{fieldErrors}
-		{formError}
-		submitLabel={editingRecord ? 'Update' : 'Create'}
-	/>
+	<form action="?/upsert" method="POST" use:enhance oninput={markDirty}>
+		{#if editingRecord?.id}
+			<input type="hidden" name="id" value={String(editingRecord.id)} />
+		{/if}
+
+		{#if formError}
+			<div>{formError}</div>
+		{/if}
+
+		<div>
+			<div>
+				<label for="field-name">Name</label>
+				<input type="text" id="field-name" name="name" bind:value={name} />
+				{#if fieldErrors.name}
+					<p>{fieldErrors.name}</p>
+				{/if}
+			</div>
+
+			<div>
+				<label for="field-value">Value</label>
+				<input type="number" id="field-value" name="value" bind:value step="1" />
+				{#if fieldErrors.value}
+					<p>{fieldErrors.value}</p>
+				{/if}
+			</div>
+
+			<div>
+				<button type="submit" disabled={!!editingRecord?.id && !dirty}>
+					{editingRecord ? 'Update' : 'Create'}
+				</button>
+			</div>
+		</div>
+	</form>
 </AdminModal>

 {#if toastMessage}
-	<Toast message={toastMessage} type={toastType} />
+	<Toast message={toastMessage} />
 {/if}
@@ -1,96 +0,0 @@
-<script lang="ts">
-	import { enhance } from '$app/forms';
-
-	let {
-		record = {} as Record<string, unknown>,
-		fieldErrors = {} as Record<string, string>,
-		formError = '',
-		action = '?/upsert',
-		submitLabel = 'Save'
-	}: {
-		record?: Record<string, unknown>;
-		fieldErrors?: Record<string, string>;
-		formError?: string;
-		action?: string;
-		submitLabel?: string;
-	} = $props();
-
-	let name = $state(String(record.name ?? ''));
-	let value = $state(String(record.value ?? ''));
-	let dirty = $state(false);
-
-	$effect(() => {
-		dirty = false;
-	});
-
-	function markDirty() {
-		if (record.id) dirty = true;
-	}
-</script>
-
-<form {action} method="POST" use:enhance oninput={markDirty}>
-	{#if record?.id}
-		<input type="hidden" name="id" value={String(record.id)} />
-	{/if}
-
-	{#if formError}
-		<div class="mb-4 border border-red-300 bg-red-50 px-4 py-2 text-sm text-red-700">
-			{formError}
-		</div>
-	{/if}
-
-	<div class="flex flex-col gap-4">
-		<div>
-			<label
-				for="field-name"
-				class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300"
-			>
-				Name
-			</label>
-			<input
-				type="text"
-				id="field-name"
-				name="name"
-				bind:value={name}
-				class="w-full border px-3 py-1.5 text-sm {fieldErrors.name
-					? 'border-red-400'
-					: 'border-gray-300 dark:border-gray-600'} dark:bg-gray-800 dark:text-gray-100"
-			/>
-			{#if fieldErrors.name}
-				<p class="mt-1 text-xs text-red-600">{fieldErrors.name}</p>
-			{/if}
-		</div>
-
-		<div>
-			<label
-				for="field-value"
-				class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300"
-			>
-				Value
-			</label>
-			<input
-				type="number"
-				id="field-value"
-				name="value"
-				bind:value
-				step="1"
-				class="w-full border px-3 py-1.5 text-sm {fieldErrors.value
-					? 'border-red-400'
-					: 'border-gray-300 dark:border-gray-600'} dark:bg-gray-800 dark:text-gray-100"
-			/>
-			{#if fieldErrors.value}
-				<p class="mt-1 text-xs text-red-600">{fieldErrors.value}</p>
-			{/if}
-		</div>
-
-		<div class="flex justify-end gap-2 pt-2">
-			<button
-				type="submit"
-				disabled={!!record?.id && !dirty}
-				class="border border-gray-300 bg-gray-100 px-4 py-1.5 text-sm font-medium hover:bg-gray-200 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
-			>
-				{submitLabel}
-			</button>
-		</div>
-	</div>
-</form>
@@ -1,18 +0,0 @@
-import type { PageServerLoad } from './$types';
-import { getModelConfig } from '$lib/svelte-admin/registry';
-import { loadRecords, upsertRecord, deleteRecord } from '$lib/svelte-admin/crud';
-
-const config = getModelConfig('subscription-levels')!;
-
-export const load: PageServerLoad = async ({ locals }) => {
-	return loadRecords(locals, config);
-};
-
-export const actions = {
-	upsert: async ({ request, locals }) => {
-		return upsertRecord(request, config, locals);
-	},
-	delete: async ({ request, locals }) => {
-		return deleteRecord(request, config, locals);
-	}
-};
@@ -1,95 +0,0 @@
-<script lang="ts">
-	import { enhance } from '$app/forms';
-
-	let {
-		record = {} as Record<string, unknown>,
-		fieldErrors = {} as Record<string, string>,
-		formError = '',
-		action = '?/upsert',
-		submitLabel = 'Save'
-	}: {
-		record?: Record<string, unknown>;
-		fieldErrors?: Record<string, string>;
-		formError?: string;
-		action?: string;
-		submitLabel?: string;
-	} = $props();
-
-	let name = $state(String(record.name ?? ''));
-	let description = $state(String(record.description ?? ''));
-	let dirty = $state(false);
-
-	$effect(() => {
-		dirty = false;
-	});
-
-	function markDirty() {
-		if (record.id) dirty = true;
-	}
-</script>
-
-<form {action} method="POST" use:enhance oninput={markDirty}>
-	{#if record?.id}
-		<input type="hidden" name="id" value={String(record.id)} />
-	{/if}
-
-	{#if formError}
-		<div class="mb-4 border border-red-300 bg-red-50 px-4 py-2 text-sm text-red-700">
-			{formError}
-		</div>
-	{/if}
-
-	<div class="flex flex-col gap-4">
-		<div>
-			<label
-				for="field-name"
-				class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300"
-			>
-				Name
-			</label>
-			<input
-				type="text"
-				id="field-name"
-				name="name"
-				bind:value={name}
-				class="w-full border px-3 py-1.5 text-sm {fieldErrors.name
-					? 'border-red-400'
-					: 'border-gray-300 dark:border-gray-600'} dark:bg-gray-800 dark:text-gray-100"
-			/>
-			{#if fieldErrors.name}
-				<p class="mt-1 text-xs text-red-600">{fieldErrors.name}</p>
-			{/if}
-		</div>
-
-		<div>
-			<label
-				for="field-description"
-				class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300"
-			>
-				Description
-			</label>
-			<input
-				type="text"
-				id="field-description"
-				name="description"
-				bind:value={description}
-				class="w-full border px-3 py-1.5 text-sm {fieldErrors.description
-					? 'border-red-400'
-					: 'border-gray-300 dark:border-gray-600'} dark:bg-gray-800 dark:text-gray-100"
-			/>
-			{#if fieldErrors.description}
-				<p class="mt-1 text-xs text-red-600">{fieldErrors.description}</p>
-			{/if}
-		</div>
-
-		<div class="flex justify-end gap-2 pt-2">
-			<button
-				type="submit"
-				disabled={!!record?.id && !dirty}
-				class="border border-gray-300 bg-gray-100 px-4 py-1.5 text-sm font-medium hover:bg-gray-200 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
-			>
-				{submitLabel}
-			</button>
-		</div>
-	</div>
-</form>
@@ -1,11 +1,10 @@
 <script lang="ts">
 	import type { PageProps } from './$types';
-	import type { ActionResult } from '$lib/svelte-admin/types';
+	import { enhance } from '$app/forms';
 	import AdminTable from '$lib/components/admin/AdminTable.svelte';
 	import AdminModal from '$lib/components/admin/AdminModal.svelte';
 	import Toast from '$lib/components/admin/Toast.svelte';
 	import { getModelConfig } from '$lib/svelte-admin/registry';
-	import UserRoleForm from './UserRoleForm.svelte';

 	let { data, form }: PageProps = $props();

@@ -15,16 +14,17 @@
 	let modalOpen = $state(false);
 	let editingRecord = $state<Record<string, unknown> | null>(null);
 	let toastMessage = $state('');
-	let toastType = $state<'success' | 'error'>('success');
 	let fieldErrors = $state<Record<string, string>>({});
 	let formError = $state('');

+	let name = $state('');
+	let dirty = $state(false);
+
 	$effect(() => {
 		if (form && 'success' in (form as any)) {
 			const result = form as any;
 			if (result.success) {
 				toastMessage = 'Saved successfully';
-				toastType = 'success';
 				closeModal();
 			} else {
 				formError = result.error ?? '';
@@ -33,6 +33,11 @@
 		}
 	});

+	$effect(() => {
+		name = String((editingRecord ?? {})['name'] ?? '');
+		dirty = false;
+	});
+
 	function openCreate() {
 		editingRecord = null;
 		formError = '';
@@ -53,10 +58,14 @@
 		formError = '';
 		fieldErrors = {};
 	}
+
+	function markDirty() {
+		if (editingRecord?.id) dirty = true;
+	}
 </script>

-<div class="p-6">
-	<h1 class="mb-4 text-xl font-bold text-gray-900 dark:text-gray-100">{config.displayName}</h1>
+<div>
+	<h1>{config.displayName}</h1>
 	<AdminTable
 		records={data.records}
 		listFields={config.listFields}
@@ -77,14 +86,33 @@
 	{canDelete}
 	recordId={editingRecord?.id as string | undefined}
 >
-	<UserRoleForm
-		record={editingRecord ?? {}}
-		{fieldErrors}
-		{formError}
-		submitLabel={editingRecord ? 'Update' : 'Create'}
-	/>
+	<form action="?/upsert" method="POST" use:enhance oninput={markDirty}>
+		{#if editingRecord?.id}
+			<input type="hidden" name="id" value={String(editingRecord.id)} />
+		{/if}
+
+		{#if formError}
+			<div>{formError}</div>
+		{/if}
+
+		<div>
+			<div>
+				<label for="field-name">Name</label>
+				<input type="text" id="field-name" name="name" bind:value={name} />
+				{#if fieldErrors.name}
+					<p>{fieldErrors.name}</p>
+				{/if}
+			</div>
+
+			<div>
+				<button type="submit" disabled={!!editingRecord?.id && !dirty}>
+					{editingRecord ? 'Update' : 'Create'}
+				</button>
+			</div>
+		</div>
+	</form>
 </AdminModal>

 {#if toastMessage}
-	<Toast message={toastMessage} type={toastType} />
+	<Toast message={toastMessage} />
 {/if}
@@ -1,73 +0,0 @@
-<script lang="ts">
-	import { enhance } from '$app/forms';
-
-	let {
-		record = {} as Record<string, unknown>,
-		fieldErrors = {} as Record<string, string>,
-		formError = '',
-		action = '?/upsert',
-		submitLabel = 'Save'
-	}: {
-		record?: Record<string, unknown>;
-		fieldErrors?: Record<string, string>;
-		formError?: string;
-		action?: string;
-		submitLabel?: string;
-	} = $props();
-
-	let name = $state(String(record.name ?? ''));
-	let dirty = $state(false);
-
-	$effect(() => {
-		dirty = false;
-	});
-
-	function markDirty() {
-		if (record.id) dirty = true;
-	}
-</script>
-
-<form {action} method="POST" use:enhance oninput={markDirty}>
-	{#if record?.id}
-		<input type="hidden" name="id" value={String(record.id)} />
-	{/if}
-
-	{#if formError}
-		<div class="mb-4 border border-red-300 bg-red-50 px-4 py-2 text-sm text-red-700">
-			{formError}
-		</div>
-	{/if}
-
-	<div class="flex flex-col gap-4">
-		<div>
-			<label
-				for="field-name"
-				class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300"
-			>
-				Name
-			</label>
-			<input
-				type="text"
-				id="field-name"
-				name="name"
-				bind:value={name}
-				class="w-full border px-3 py-1.5 text-sm {fieldErrors.name
-					? 'border-red-400'
-					: 'border-gray-300 dark:border-gray-600'} dark:bg-gray-800 dark:text-gray-100"
-			/>
-			{#if fieldErrors.name}
-				<p class="mt-1 text-xs text-red-600">{fieldErrors.name}</p>
-			{/if}
-		</div>
-
-		<div class="flex justify-end gap-2 pt-2">
-			<button
-				type="submit"
-				disabled={!!record?.id && !dirty}
-				class="border border-gray-300 bg-gray-100 px-4 py-1.5 text-sm font-medium hover:bg-gray-200 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
-			>
-				{submitLabel}
-			</button>
-		</div>
-	</div>
-</form>
@@ -1,6 +1,5 @@
 <script lang="ts">
 	import type { PageProps } from './$types';
-	import type { ActionResult } from '$lib/svelte-admin/types';
 	import AdminTable from '$lib/components/admin/AdminTable.svelte';
 	import AdminModal from '$lib/components/admin/AdminModal.svelte';
 	import Toast from '$lib/components/admin/Toast.svelte';
@@ -15,7 +14,6 @@
 	let modalOpen = $state(false);
 	let editingRecord = $state<Record<string, unknown> | null>(null);
 	let toastMessage = $state('');
-	let toastType = $state<'success' | 'error'>('success');
 	let fieldErrors = $state<Record<string, string>>({});
 	let formError = $state('');

@@ -24,7 +22,6 @@
 			const result = form as any;
 			if (result.success) {
 				toastMessage = 'Saved successfully';
-				toastType = 'success';
 				closeModal();
 			} else {
 				formError = result.error ?? '';
@@ -55,8 +52,8 @@
 	}
 </script>

-<div class="p-6">
-	<h1 class="mb-4 text-xl font-bold text-gray-900 dark:text-gray-100">{config.displayName}</h1>
+<div>
+	<h1>{config.displayName}</h1>
 	<AdminTable
 		records={data.records}
 		listFields={config.listFields}
@@ -87,5 +84,5 @@
 </AdminModal>

 {#if toastMessage}
-	<Toast message={toastMessage} type={toastType} />
+	<Toast message={toastMessage} />
 {/if}
@@ -35,43 +35,27 @@
 	{/if}

 	{#if formError}
-		<div class="mb-4 border border-red-300 bg-red-50 px-4 py-2 text-sm text-red-700">
+		<div>
 			{formError}
 		</div>
 	{/if}

-	<div class="flex flex-col gap-4">
+	<div>
 		<div>
-			<label
-				for="field-roleId"
-				class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300"
-			>
-				Role
-			</label>
-			<select
-				id="field-roleId"
-				name="roleId"
-				bind:value={roleId}
-				class="w-full border px-3 py-1.5 text-sm {fieldErrors.roleId
-					? 'border-red-400'
-					: 'border-gray-300 dark:border-gray-600'} dark:bg-gray-800 dark:text-gray-100"
-			>
+			<label for="field-roleId"> Role </label>
+			<select id="field-roleId" name="roleId" bind:value={roleId}>
 				<option value="">-- Select Role --</option>
 				{#each relationOptionsData.roleId ?? [] as opt (String(opt.value))}
 					<option value={opt.value}>{opt.label}</option>
 				{/each}
 			</select>
 			{#if fieldErrors.roleId}
-				<p class="mt-1 text-xs text-red-600">{fieldErrors.roleId}</p>
+				<p>{fieldErrors.roleId}</p>
 			{/if}
 		</div>

-		<div class="flex justify-end gap-2 pt-2">
-			<button
-				type="submit"
-				disabled={!!record?.id && !dirty}
-				class="border border-gray-300 bg-gray-100 px-4 py-1.5 text-sm font-medium hover:bg-gray-200 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
-			>
+		<div>
+			<button type="submit" disabled={!!record?.id && !dirty}>
 				{submitLabel}
 			</button>
 		</div>