feat(task-35): admin People section — vets, sponsors, mentors, volunteers, users

Full CRUD for vets, sponsors, mentors, volunteer applications, and users.
Includes approve/deny flows for pending users, role management, and password reset.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/routes/admin/mentors/+page.server.ts

@@ -0,0 +1,35 @@
+import type { PageServerLoad } from './$types';
+import { db } from '$lib/server/db';
+import { mentors, users, petMentors } from '$lib/server/schema';
+import { eq, count } from 'drizzle-orm';
+import { hasPermission } from '$lib/roles';
+import type { Role } from '$lib/roles';
+import { error } from '@sveltejs/kit';
+
+export const load: PageServerLoad = async ({ locals }) => {
+	if (!hasPermission(locals.user!.role as Role, 'pets')) error(403, 'Access denied');
+
+	const mentorRows = await db
+		.select({
+			id: mentors.id,
+			userId: mentors.userId,
+			bio: mentors.bio,
+			active: mentors.active,
+			createdAt: mentors.createdAt,
+			userName: users.name,
+			userEmail: users.email
+		})
+		.from(mentors)
+		.innerJoin(users, eq(mentors.userId, users.id))
+		.orderBy(users.name);
+
+	// Count assigned pets for each mentor
+	const mentorList = await Promise.all(
+		mentorRows.map(async (m) => {
+			const [petCountRow] = await db.select({ total: count() }).from(petMentors).where(eq(petMentors.mentorId, m.id));
+			return { ...m, petCount: petCountRow?.total ?? 0 };
+		})
+	);
+
+	return { mentors: mentorList };
+};

src/routes/admin/mentors/+page.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+	let { data } = $props();
+</script>
+
+<svelte:head><title>Mentors — Admin</title></svelte:head>
+
+<div>
+	<div class="flex items-center justify-between mb-6">
+		<h1 class="text-2xl font-bold text-gray-900">Mentor Management</h1>
+		<p class="text-sm text-gray-500">{data.mentors.length} mentor{data.mentors.length !== 1 ? 's' : ''}</p>
+	</div>
+
+	{#if data.mentors.length === 0}
+		<div class="text-center py-12 text-gray-400">
+			<svg class="mx-auto h-12 w-12 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z" />
+			</svg>
+			<p class="text-sm font-medium">No mentors yet. Assign a user the mentor role to create one.</p>
+		</div>
+	{:else}
+		<div class="bg-white rounded-xl shadow-sm border border-gray-soft overflow-hidden">
+			<table class="w-full text-sm text-left">
+				<thead>
+					<tr class="border-b border-gray-soft bg-gray-50">
+						<th class="px-6 py-3 font-semibold text-gray-600">Name</th>
+						<th class="px-6 py-3 font-semibold text-gray-600">Email</th>
+						<th class="px-6 py-3 font-semibold text-gray-600">Pets Mentoring</th>
+						<th class="px-6 py-3 font-semibold text-gray-600">Status</th>
+						<th class="px-6 py-3 font-semibold text-gray-600 text-right">Actions</th>
+					</tr>
+				</thead>
+				<tbody>
+					{#each data.mentors as mentor}
+						<tr class="border-b border-gray-soft last:border-0 hover:bg-gray-50 transition-colors">
+							<td class="px-6 py-4 font-medium text-gray-900">{mentor.userName}</td>
+							<td class="px-6 py-4 text-gray-600">
+								<a href="mailto:{mentor.userEmail}" class="hover:text-teal-brand">{mentor.userEmail}</a>
+							</td>
+							<td class="px-6 py-4 text-gray-600">{mentor.petCount}</td>
+							<td class="px-6 py-4">
+								<span class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium {mentor.active ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-600'}">
+									{mentor.active ? 'Active' : 'Inactive'}
+								</span>
+							</td>
+							<td class="px-6 py-4 text-right">
+								<a href="/admin/mentors/{mentor.id}" class="text-sm font-medium text-teal-brand hover:text-teal-dark">Edit</a>
+							</td>
+						</tr>
+					{/each}
+				</tbody>
+			</table>
+		</div>
+	{/if}
+</div>

src/routes/admin/mentors/[id]/+page.server.ts

@@ -0,0 +1,66 @@
+import type { PageServerLoad, Actions } from './$types';
+import { db } from '$lib/server/db';
+import { mentors, users, petMentors, pets } from '$lib/server/schema';
+import { eq } from 'drizzle-orm';
+import { error, fail } from '@sveltejs/kit';
+import { logAudit } from '$lib/server/audit';
+import { hasPermission } from '$lib/roles';
+import type { Role } from '$lib/roles';
+
+export const load: PageServerLoad = async ({ params, locals }) => {
+	if (!hasPermission(locals.user!.role as Role, 'pets')) error(403, 'Access denied');
+	const id = parseInt(params.id, 10);
+	if (isNaN(id)) error(404, 'Mentor not found');
+
+	const [mentorRow] = await db
+		.select({
+			id: mentors.id,
+			userId: mentors.userId,
+			bio: mentors.bio,
+			active: mentors.active,
+			createdAt: mentors.createdAt,
+			userName: users.name,
+			userEmail: users.email
+		})
+		.from(mentors)
+		.innerJoin(users, eq(mentors.userId, users.id))
+		.where(eq(mentors.id, id));
+
+	if (!mentorRow) error(404, 'Mentor not found');
+
+	// Pets assigned to this mentor
+	const assignedPets = await db
+		.select({
+			id: pets.id,
+			name: pets.name,
+			status: pets.status
+		})
+		.from(petMentors)
+		.innerJoin(pets, eq(petMentors.petId, pets.id))
+		.where(eq(petMentors.mentorId, id));
+
+	return { mentor: mentorRow, assignedPets };
+};
+
+export const actions: Actions = {
+	default: async ({ request, params, locals }) => {
+		if (!hasPermission(locals.user!.role as Role, 'pets')) error(403, 'Access denied');
+		const id = parseInt(params.id, 10);
+		const fd = await request.formData();
+
+		const bio = fd.get('bio')?.toString().trim() || null;
+		const active = fd.get('active') === 'on';
+
+		await db.update(mentors).set({ bio, active }).where(eq(mentors.id, id));
+
+		await logAudit({
+			userId: locals.user?.id ?? undefined,
+			action: 'update_mentor',
+			entity: 'mentor',
+			entityId: id,
+			diff: { active }
+		});
+
+		return { success: true };
+	}
+};

src/routes/admin/mentors/[id]/+page.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+	import { enhance } from '$app/forms';
+	import StatusBadge from '$lib/components/ui/StatusBadge.svelte';
+	let { data, form } = $props();
+	const mentor = $derived(data.mentor);
+	let submitting = $state(false);
+	let showSuccess = $state(false);
+
+	function handleEnhance() {
+		submitting = true;
+		return async ({ update, result }: { update: (opts?: { reset?: boolean }) => Promise<void>; result: { type: string } }) => {
+			submitting = false;
+			await update({ reset: false });
+			if (result.type === 'success') { showSuccess = true; setTimeout(() => showSuccess = false, 3000); }
+		};
+	}
+
+	const inputClass = 'w-full px-3 py-2.5 rounded-lg border border-gray-soft bg-white text-gray-brand placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-teal-brand focus:border-teal-brand text-sm';
+	const labelClass = 'block text-sm font-medium text-gray-700 mb-1';
+</script>
+
+<svelte:head><title>{mentor.userName} — Mentor — Admin</title></svelte:head>
+
+<div>
+	<div class="flex items-center gap-4 mb-6">
+		<a href="/admin/mentors" class="text-gray-400 hover:text-gray-600 transition-colors">
+			<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" /></svg>
+		</a>
+		<div>
+			<h1 class="text-2xl font-bold text-gray-900">{mentor.userName}</h1>
+			<p class="text-sm text-gray-500">{mentor.userEmail}</p>
+		</div>
+	</div>
+
+	{#if showSuccess}
+		<div class="mb-6 p-4 bg-green-50 border border-green-200 rounded-xl text-sm text-green-700 flex items-center gap-2">
+			<svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg>
+			Mentor updated.
+		</div>
+	{/if}
+
+	<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+		<div class="lg:col-span-2">
+			<form method="POST" use:enhance={handleEnhance} class="space-y-6">
+				<div class="bg-white rounded-xl shadow-sm border border-gray-soft p-6 space-y-4">
+					<h2 class="text-lg font-semibold text-gray-900">Mentor Details</h2>
+					<div>
+						<label for="bio" class={labelClass}>Bio</label>
+						<textarea id="bio" name="bio" rows="5" class="{inputClass} resize-y">{mentor.bio ?? ''}</textarea>
+					</div>
+					<div class="flex items-center gap-3">
+						<input type="checkbox" id="active" name="active" checked={mentor.active} class="w-5 h-5 rounded border-gray-soft text-teal-brand focus:ring-teal-brand" />
+						<label for="active" class="text-sm font-medium text-gray-700">Active mentor</label>
+					</div>
+				</div>
+				<div class="flex justify-end gap-3">
+					<a href="/admin/mentors" class="px-6 py-2.5 text-sm font-medium rounded-lg border border-gray-soft text-gray-brand hover:bg-gray-100 transition-colors">Cancel</a>
+					<button type="submit" disabled={submitting} class="px-6 py-2.5 text-sm font-medium rounded-lg bg-teal-brand text-white hover:bg-teal-dark transition-colors disabled:opacity-50 cursor-pointer">
+						{submitting ? 'Saving...' : 'Save Changes'}
+					</button>
+				</div>
+			</form>
+		</div>
+
+		<div>
+			<div class="bg-white rounded-xl shadow-sm border border-gray-soft p-6">
+				<h2 class="text-lg font-semibold text-gray-900 mb-4">Assigned Pets ({data.assignedPets.length})</h2>
+				{#if data.assignedPets.length === 0}
+					<p class="text-sm text-gray-400">No pets assigned.</p>
+				{:else}
+					<ul class="space-y-2">
+						{#each data.assignedPets as pet}
+							<li class="flex items-center justify-between">
+								<a href="/admin/pets/{pet.id}" class="text-sm font-medium text-teal-brand hover:text-teal-dark">{pet.name}</a>
+								<StatusBadge status={pet.status} />
+							</li>
+						{/each}
+					</ul>
+				{/if}
+			</div>
+		</div>
+	</div>
+</div>

src/routes/admin/sponsors/+page.server.ts

@@ -0,0 +1,44 @@
+import type { PageServerLoad, Actions } from './$types';
+import { db } from '$lib/server/db';
+import { sponsors } from '$lib/server/schema';
+import { eq, asc } from 'drizzle-orm';
+import { error, fail } from '@sveltejs/kit';
+import { logAudit } from '$lib/server/audit';
+import { hasPermission } from '$lib/roles';
+import type { Role } from '$lib/roles';
+
+export const load: PageServerLoad = async ({ locals }) => {
+	if (!hasPermission(locals.user!.role as Role, 'sponsors')) error(403, 'Access denied');
+	const allSponsors = await db.select().from(sponsors).orderBy(asc(sponsors.sortOrder));
+
+	const grouped = {
+		top_dog: allSponsors.filter(s => s.tier === 'top_dog'),
+		wagging_tails: allSponsors.filter(s => s.tier === 'wagging_tails'),
+		wet_noses: allSponsors.filter(s => s.tier === 'wet_noses')
+	};
+
+	return { sponsors: allSponsors, grouped };
+};
+
+export const actions: Actions = {
+	toggleActive: async ({ request, locals }) => {
+		if (!hasPermission(locals.user!.role as Role, 'sponsors')) error(403, 'Access denied');
+		const fd = await request.formData();
+		const sponsorId = parseInt(fd.get('sponsorId') as string, 10);
+		const active = fd.get('active') === 'true';
+
+		if (!sponsorId || isNaN(sponsorId)) return fail(400, { error: 'Invalid sponsor ID' });
+
+		await db.update(sponsors).set({ active }).where(eq(sponsors.id, sponsorId));
+
+		await logAudit({
+			userId: locals.user?.id ?? undefined,
+			action: 'toggle_sponsor_active',
+			entity: 'sponsor',
+			entityId: sponsorId,
+			diff: { active }
+		});
+
+		return { success: true };
+	}
+};

src/routes/admin/sponsors/+page.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+	import { enhance } from '$app/forms';
+	let { data } = $props();
+	const grouped = $derived(data.grouped);
+
+	const tierLabels: Record<string, string> = {
+		top_dog: 'Top Dog', wagging_tails: 'Wagging Tails', wet_noses: 'Wet Noses'
+	};
+	const tierColors: Record<string, string> = {
+		top_dog: 'border-yellow-400 bg-yellow-50', wagging_tails: 'border-blue-400 bg-blue-50', wet_noses: 'border-pink-400 bg-pink-50'
+	};
+</script>
+
+<svelte:head><title>Sponsors — Admin</title></svelte:head>
+
+<div>
+	<div class="flex items-center justify-between mb-6">
+		<h1 class="text-2xl font-bold text-gray-900">Sponsor Management</h1>
+		<a href="/admin/sponsors/new" class="px-4 py-2.5 text-sm font-medium rounded-lg bg-teal-brand text-white hover:bg-teal-dark transition-colors">+ Add Sponsor</a>
+	</div>
+
+	{#each ['top_dog', 'wagging_tails', 'wet_noses'] as tier}
+		{@const tierSponsors = grouped[tier as keyof typeof grouped]}
+		<div class="mb-8">
+			<div class="flex items-center gap-3 mb-4">
+				<h2 class="text-lg font-semibold text-gray-900">{tierLabels[tier]}</h2>
+				<span class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium bg-gray-100 text-gray-600">{tierSponsors.length}</span>
+			</div>
+
+			{#if tierSponsors.length === 0}
+				<div class="bg-gray-50 rounded-xl border border-dashed border-gray-300 p-8 text-center text-gray-400">
+					<p class="text-sm">No sponsors in this tier yet.</p>
+				</div>
+			{:else}
+				<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+					{#each tierSponsors as sponsor}
+						<div class="bg-white rounded-xl shadow-sm border-2 {sponsor.active ? tierColors[tier] : 'border-gray-200 bg-gray-50 opacity-60'} p-5">
+							<div class="flex items-start gap-4">
+								{#if sponsor.logoUrl}
+									<img src={sponsor.logoUrl} alt="{sponsor.name} logo" class="w-16 h-16 rounded-lg object-contain bg-white border border-gray-soft flex-shrink-0" />
+								{:else}
+									<div class="w-16 h-16 rounded-lg bg-gray-100 flex items-center justify-center flex-shrink-0">
+										<svg class="w-8 h-8 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+											<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
+										</svg>
+									</div>
+								{/if}
+								<div class="flex-1 min-w-0">
+									<h3 class="text-sm font-semibold text-gray-900 truncate">{sponsor.name}</h3>
+									{#if sponsor.websiteUrl}
+										<a href={sponsor.websiteUrl} target="_blank" rel="noopener noreferrer" class="text-xs text-teal-brand hover:text-teal-dark truncate block">{sponsor.websiteUrl}</a>
+									{/if}
+								</div>
+							</div>
+
+							<div class="flex items-center justify-between mt-4 pt-3 border-t border-gray-soft">
+								<form method="POST" action="?/toggleActive" use:enhance={() => async ({ update }) => { await update({ reset: false }); }}>
+									<input type="hidden" name="sponsorId" value={sponsor.id} />
+									<input type="hidden" name="active" value={sponsor.active ? 'false' : 'true'} />
+									<button type="submit" class="inline-flex items-center gap-2 text-xs font-medium cursor-pointer {sponsor.active ? 'text-green-600' : 'text-gray-400'} hover:text-gray-600 transition-colors">
+										<span class="w-3 h-3 rounded-full {sponsor.active ? 'bg-green-400' : 'bg-gray-300'}"></span>
+										{sponsor.active ? 'Active' : 'Inactive'}
+									</button>
+								</form>
+								<a href="/admin/sponsors/{sponsor.id}" class="text-xs font-medium text-teal-brand hover:text-teal-dark">Edit</a>
+							</div>
+						</div>
+					{/each}
+				</div>
+			{/if}
+		</div>
+	{/each}
+</div>

src/routes/admin/sponsors/[id]/+page.server.ts

@@ -0,0 +1,59 @@
+import type { PageServerLoad, Actions } from './$types';
+import { db } from '$lib/server/db';
+import { sponsors } from '$lib/server/schema';
+import { eq } from 'drizzle-orm';
+import { error, fail } from '@sveltejs/kit';
+import { logAudit } from '$lib/server/audit';
+import { hasPermission } from '$lib/roles';
+import type { Role } from '$lib/roles';
+
+export const load: PageServerLoad = async ({ params, locals }) => {
+	if (!hasPermission(locals.user!.role as Role, 'sponsors')) error(403, 'Access denied');
+	const id = parseInt(params.id, 10);
+	if (isNaN(id)) error(404, 'Sponsor not found');
+
+	const [sponsor] = await db.select().from(sponsors).where(eq(sponsors.id, id));
+	if (!sponsor) error(404, 'Sponsor not found');
+
+	return { sponsor };
+};
+
+export const actions: Actions = {
+	default: async ({ request, params, locals }) => {
+		if (!hasPermission(locals.user!.role as Role, 'sponsors')) error(403, 'Access denied');
+		const id = parseInt(params.id, 10);
+		const fd = await request.formData();
+
+		const name = fd.get('name')?.toString().trim() ?? '';
+		if (!name) return fail(400, { error: 'Name is required' });
+
+		const tier = fd.get('tier')?.toString() ?? 'wet_noses';
+		if (!['top_dog', 'wagging_tails', 'wet_noses'].includes(tier)) return fail(400, { error: 'Invalid tier' });
+
+		const logoUrl = fd.get('logoUrl')?.toString().trim() || null;
+		const websiteUrl = fd.get('websiteUrl')?.toString().trim() || null;
+		const description = fd.get('description')?.toString().trim() || null;
+		const active = fd.get('active') === 'on';
+		const sortOrder = parseInt(fd.get('sortOrder')?.toString() ?? '0', 10);
+
+		await db.update(sponsors).set({
+			name,
+			tier: tier as typeof sponsors.tier.enumValues[number],
+			logoUrl,
+			websiteUrl,
+			description,
+			active,
+			sortOrder
+		}).where(eq(sponsors.id, id));
+
+		await logAudit({
+			userId: locals.user?.id ?? undefined,
+			action: 'update_sponsor',
+			entity: 'sponsor',
+			entityId: id,
+			diff: { name, tier }
+		});
+
+		return { success: true };
+	}
+};

src/routes/admin/sponsors/[id]/+page.svelte

@@ -0,0 +1,87 @@
+<script lang="ts">
+	import { enhance } from '$app/forms';
+	let { data, form } = $props();
+	const sponsor = $derived(data.sponsor);
+	let submitting = $state(false);
+	let showSuccess = $state(false);
+
+	function handleEnhance() {
+		submitting = true;
+		return async ({ update, result }: { update: (opts?: { reset?: boolean }) => Promise<void>; result: { type: string } }) => {
+			submitting = false;
+			await update({ reset: false });
+			if (result.type === 'success') { showSuccess = true; setTimeout(() => showSuccess = false, 3000); }
+		};
+	}
+
+	const inputClass = 'w-full px-3 py-2.5 rounded-lg border border-gray-soft bg-white text-gray-brand placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-teal-brand focus:border-teal-brand text-sm';
+	const labelClass = 'block text-sm font-medium text-gray-700 mb-1';
+</script>
+
+<svelte:head><title>{sponsor.name} — Admin</title></svelte:head>
+
+<div class="max-w-2xl">
+	<div class="flex items-center gap-4 mb-6">
+		<a href="/admin/sponsors" class="text-gray-400 hover:text-gray-600 transition-colors">
+			<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" /></svg>
+		</a>
+		<h1 class="text-2xl font-bold text-gray-900">{sponsor.name}</h1>
+	</div>
+
+	{#if showSuccess}
+		<div class="mb-6 p-4 bg-green-50 border border-green-200 rounded-xl text-sm text-green-700 flex items-center gap-2">
+			<svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg>
+			Sponsor updated.
+		</div>
+	{/if}
+
+	{#if form?.error}
+		<div class="mb-6 p-4 bg-red-50 border border-red-200 rounded-xl text-sm text-red-700">{form.error}</div>
+	{/if}
+
+	<form method="POST" use:enhance={handleEnhance} class="space-y-6">
+		<div class="bg-white rounded-xl shadow-sm border border-gray-soft p-6 space-y-4">
+			<div>
+				<label for="name" class={labelClass}>Name <span class="text-red-500">*</span></label>
+				<input type="text" id="name" name="name" required value={sponsor.name} class={inputClass} />
+			</div>
+			<div>
+				<label for="tier" class={labelClass}>Tier</label>
+				<select id="tier" name="tier" class={inputClass}>
+					<option value="top_dog" selected={sponsor.tier === 'top_dog'}>Top Dog</option>
+					<option value="wagging_tails" selected={sponsor.tier === 'wagging_tails'}>Wagging Tails</option>
+					<option value="wet_noses" selected={sponsor.tier === 'wet_noses'}>Wet Noses</option>
+				</select>
+			</div>
+			<div>
+				<label for="logoUrl" class={labelClass}>Logo URL</label>
+				<input type="url" id="logoUrl" name="logoUrl" value={sponsor.logoUrl ?? ''} class={inputClass} placeholder="https://..." />
+				{#if sponsor.logoUrl}
+					<img src={sponsor.logoUrl} alt="Current logo" class="mt-2 h-16 object-contain rounded" />
+				{/if}
+			</div>
+			<div>
+				<label for="websiteUrl" class={labelClass}>Website URL</label>
+				<input type="url" id="websiteUrl" name="websiteUrl" value={sponsor.websiteUrl ?? ''} class={inputClass} placeholder="https://..." />
+			</div>
+			<div>
+				<label for="description" class={labelClass}>Description</label>
+				<textarea id="description" name="description" rows="3" class="{inputClass} resize-y">{sponsor.description ?? ''}</textarea>
+			</div>
+			<div>
+				<label for="sortOrder" class={labelClass}>Sort Order</label>
+				<input type="number" id="sortOrder" name="sortOrder" value={sponsor.sortOrder} min="0" class={inputClass} />
+			</div>
+			<div class="flex items-center gap-3">
+				<input type="checkbox" id="active" name="active" checked={sponsor.active} class="w-5 h-5 rounded border-gray-soft text-teal-brand focus:ring-teal-brand" />
+				<label for="active" class="text-sm font-medium text-gray-700">Active (visible on website)</label>
+			</div>
+		</div>
+		<div class="flex justify-end gap-3">
+			<a href="/admin/sponsors" class="px-6 py-2.5 text-sm font-medium rounded-lg border border-gray-soft text-gray-brand hover:bg-gray-100 transition-colors">Cancel</a>
+			<button type="submit" disabled={submitting} class="px-6 py-2.5 text-sm font-medium rounded-lg bg-teal-brand text-white hover:bg-teal-dark transition-colors disabled:opacity-50 cursor-pointer">
+				{submitting ? 'Saving...' : 'Save Changes'}
+			</button>
+		</div>
+	</form>
+</div>

src/routes/admin/sponsors/new/+page.server.ts

@@ -0,0 +1,46 @@
+import type { Actions } from './$types';
+import { db } from '$lib/server/db';
+import { sponsors } from '$lib/server/schema';
+import { error, fail, redirect } from '@sveltejs/kit';
+import { logAudit } from '$lib/server/audit';
+import { hasPermission } from '$lib/roles';
+import type { Role } from '$lib/roles';
+
+export const actions: Actions = {
+	default: async ({ request, locals }) => {
+		if (!hasPermission(locals.user!.role as Role, 'sponsors')) error(403, 'Access denied');
+		const fd = await request.formData();
+
+		const name = fd.get('name')?.toString().trim() ?? '';
+		if (!name) return fail(400, { error: 'Name is required' });
+
+		const tier = fd.get('tier')?.toString() ?? 'wet_noses';
+		if (!['top_dog', 'wagging_tails', 'wet_noses'].includes(tier)) return fail(400, { error: 'Invalid tier' });
+
+		const logoUrl = fd.get('logoUrl')?.toString().trim() || null;
+		const websiteUrl = fd.get('websiteUrl')?.toString().trim() || null;
+		const description = fd.get('description')?.toString().trim() || null;
+		const active = fd.get('active') === 'on';
+		const sortOrder = parseInt(fd.get('sortOrder')?.toString() ?? '0', 10);
+
+		const [inserted] = await db.insert(sponsors).values({
+			name,
+			tier: tier as typeof sponsors.tier.enumValues[number],
+			logoUrl,
+			websiteUrl,
+			description,
+			active,
+			sortOrder
+		}).$returningId();
+
+		await logAudit({
+			userId: locals.user?.id ?? undefined,
+			action: 'create_sponsor',
+			entity: 'sponsor',
+			entityId: inserted.id,
+			diff: { name, tier }
+		});
+
+		redirect(303, '/admin/sponsors');
+	}
+};

src/routes/admin/sponsors/new/+page.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+	import { enhance } from '$app/forms';
+	let { form } = $props();
+	let submitting = $state(false);
+	const inputClass = 'w-full px-3 py-2.5 rounded-lg border border-gray-soft bg-white text-gray-brand placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-teal-brand focus:border-teal-brand text-sm';
+	const labelClass = 'block text-sm font-medium text-gray-700 mb-1';
+</script>
+
+<svelte:head><title>Add Sponsor — Admin</title></svelte:head>
+
+<div class="max-w-2xl">
+	<div class="flex items-center gap-4 mb-6">
+		<a href="/admin/sponsors" class="text-gray-400 hover:text-gray-600 transition-colors">
+			<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" /></svg>
+		</a>
+		<h1 class="text-2xl font-bold text-gray-900">Add Sponsor</h1>
+	</div>
+
+	{#if form?.error}
+		<div class="mb-6 p-4 bg-red-50 border border-red-200 rounded-xl text-sm text-red-700">{form.error}</div>
+	{/if}
+
+	<form method="POST" use:enhance={() => { submitting = true; return async ({ update }) => { submitting = false; await update(); }; }} class="space-y-6">
+		<div class="bg-white rounded-xl shadow-sm border border-gray-soft p-6 space-y-4">
+			<div>
+				<label for="name" class={labelClass}>Name <span class="text-red-500">*</span></label>
+				<input type="text" id="name" name="name" required class={inputClass} />
+			</div>
+			<div>
+				<label for="tier" class={labelClass}>Tier <span class="text-red-500">*</span></label>
+				<select id="tier" name="tier" required class={inputClass}>
+					<option value="top_dog">Top Dog</option>
+					<option value="wagging_tails">Wagging Tails</option>
+					<option value="wet_noses">Wet Noses</option>
+				</select>
+			</div>
+			<div>
+				<label for="logoUrl" class={labelClass}>Logo URL</label>
+				<input type="url" id="logoUrl" name="logoUrl" class={inputClass} placeholder="https://..." />
+			</div>
+			<div>
+				<label for="websiteUrl" class={labelClass}>Website URL</label>
+				<input type="url" id="websiteUrl" name="websiteUrl" class={inputClass} placeholder="https://..." />
+			</div>
+			<div>
+				<label for="description" class={labelClass}>Description</label>
+				<textarea id="description" name="description" rows="3" class="{inputClass} resize-y"></textarea>
+			</div>
+			<div>
+				<label for="sortOrder" class={labelClass}>Sort Order</label>
+				<input type="number" id="sortOrder" name="sortOrder" value="0" min="0" class={inputClass} />
+			</div>
+			<div class="flex items-center gap-3">
+				<input type="checkbox" id="active" name="active" checked class="w-5 h-5 rounded border-gray-soft text-teal-brand focus:ring-teal-brand" />
+				<label for="active" class="text-sm font-medium text-gray-700">Active (visible on website)</label>
+			</div>
+		</div>
+		<div class="flex justify-end gap-3">
+			<a href="/admin/sponsors" class="px-6 py-2.5 text-sm font-medium rounded-lg border border-gray-soft text-gray-brand hover:bg-gray-100 transition-colors">Cancel</a>
+			<button type="submit" disabled={submitting} class="px-6 py-2.5 text-sm font-medium rounded-lg bg-teal-brand text-white hover:bg-teal-dark transition-colors disabled:opacity-50 cursor-pointer">
+				{submitting ? 'Adding...' : 'Add Sponsor'}
+			</button>
+		</div>
+	</form>
+</div>

src/routes/admin/users/+page.server.ts

@@ -0,0 +1,76 @@
+import type { PageServerLoad, Actions } from './$types';
+import { db } from '$lib/server/db';
+import { users } from '$lib/server/schema';
+import { error, fail } from '@sveltejs/kit';
+import { hasPermission } from '$lib/roles';
+import type { Role } from '$lib/roles';
+import { eq, desc, count } from 'drizzle-orm';
+import { logAudit } from '$lib/server/audit';
+import { sendRegistrationApproved, sendRegistrationDenied } from '$lib/server/email';
+
+export const load: PageServerLoad = async ({ locals }) => {
+	if (!hasPermission(locals.user!.role as Role, 'users')) error(403, 'You do not have permission to manage users');
+
+	const userList = await db
+		.select({
+			id: users.id,
+			name: users.name,
+			email: users.email,
+			role: users.role,
+			active: users.active,
+			createdAt: users.createdAt
+		})
+		.from(users)
+		.orderBy(desc(users.createdAt));
+
+	const [pendingRow] = await db.select({ total: count() }).from(users).where(eq(users.active, false));
+	const pendingCount = pendingRow?.total ?? 0;
+
+	return { users: userList, pendingCount };
+};
+
+export const actions: Actions = {
+	approve: async ({ request, locals }) => {
+		if (!hasPermission(locals.user!.role as Role, 'users')) error(403, 'Access denied');
+		const fd = await request.formData();
+		const userId = parseInt(fd.get('userId')?.toString() ?? '', 10);
+		const role = fd.get('role')?.toString() ?? 'viewer';
+
+		if (isNaN(userId)) return fail(400, { error: 'Invalid user ID' });
+
+		const validRoles = ['sysadmin', 'director', 'foster_coordinator', 'volunteer_manager', 'vet_liaison', 'content_editor', 'applications_manager', 'viewer', 'foster'];
+		if (!validRoles.includes(role)) return fail(400, { error: 'Invalid role' });
+
+		const [user] = await db.select({ id: users.id, name: users.name, email: users.email }).from(users).where(eq(users.id, userId)).limit(1);
+		if (!user) return fail(404, { error: 'User not found' });
+
+		await db.update(users).set({ active: true, role: role as typeof users.role.enumValues[number] }).where(eq(users.id, userId));
+		await logAudit({ userId: locals.user!.id, action: 'approve_user', entity: 'user', entityId: userId, diff: { role } });
+
+		try {
+			await sendRegistrationApproved(process.env.ORG_NAME ?? 'Rescue', user.email, user.name, `${process.env.SITE_URL ?? ''}/login`);
+		} catch { /* noop */ }
+
+		return { success: true, action: 'approve' };
+	},
+
+	deny: async ({ request, locals }) => {
+		if (!hasPermission(locals.user!.role as Role, 'users')) error(403, 'Access denied');
+		const fd = await request.formData();
+		const userId = parseInt(fd.get('userId')?.toString() ?? '', 10);
+		if (isNaN(userId)) return fail(400, { error: 'Invalid user ID' });
+
+		const [user] = await db.select({ id: users.id, name: users.name, email: users.email, active: users.active }).from(users).where(eq(users.id, userId)).limit(1);
+		if (!user) return fail(404, { error: 'User not found' });
+		if (user.active) return fail(400, { error: 'Cannot deny an active user. Use the edit page to deactivate.' });
+
+		await db.delete(users).where(eq(users.id, userId));
+		await logAudit({ userId: locals.user!.id, action: 'deny_user', entity: 'user', entityId: userId });
+
+		try {
+			await sendRegistrationDenied(process.env.ORG_NAME ?? 'Rescue', user.email, user.name);
+		} catch { /* noop */ }
+
+		return { success: true, action: 'deny' };
+	}
+};

src/routes/admin/users/+page.svelte

@@ -0,0 +1,123 @@
+<script lang="ts">
+	import { enhance } from '$app/forms';
+	import StatusBadge from '$lib/components/ui/StatusBadge.svelte';
+
+	let { data, form } = $props();
+
+	let submitting = $state<number | null>(null);
+	let confirmDeny = $state<number | null>(null);
+
+	const roleOptions = [
+		{ value: 'viewer', label: 'Viewer' },
+		{ value: 'foster', label: 'Foster' },
+		{ value: 'applications_manager', label: 'Applications Manager' },
+		{ value: 'volunteer_manager', label: 'Volunteer Manager' },
+		{ value: 'content_editor', label: 'Content Editor' },
+		{ value: 'vet_liaison', label: 'Vet Liaison' },
+		{ value: 'foster_coordinator', label: 'Foster Coordinator' },
+		{ value: 'director', label: 'Director' },
+		{ value: 'sysadmin', label: 'Sysadmin' }
+	];
+
+	function formatDate(d: string | Date): string {
+		return new Date(d).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
+	}
+
+	function roleLabel(role: string): string {
+		return roleOptions.find(r => r.value === role)?.label ?? role;
+	}
+</script>
+
+<svelte:head><title>Users — Admin</title></svelte:head>
+
+<div>
+	<div class="flex items-center justify-between mb-6">
+		<div>
+			<h1 class="text-2xl font-bold text-gray-900">Users</h1>
+			{#if data.pendingCount > 0}
+				<p class="text-sm text-amber-600 mt-1">{data.pendingCount} pending approval</p>
+			{/if}
+		</div>
+		<a href="/admin/users/new" class="px-4 py-2 text-sm font-medium rounded-lg bg-teal-brand text-white hover:bg-teal-dark transition-colors">
+			Add User
+		</a>
+	</div>
+
+	{#if form?.error}
+		<div class="mb-6 p-4 bg-red-50 border border-red-200 rounded-xl text-sm text-red-700">{form.error}</div>
+	{/if}
+
+	{#if data.users.length === 0}
+		<div class="text-center py-12 text-gray-400">
+			<p class="text-sm font-medium">No users found.</p>
+		</div>
+	{:else}
+		<div class="bg-white rounded-xl shadow-sm border border-gray-soft overflow-hidden">
+			<table class="w-full text-sm text-left">
+				<thead>
+					<tr class="border-b border-gray-soft bg-gray-50">
+						<th class="px-6 py-3 font-semibold text-gray-600">Name</th>
+						<th class="px-6 py-3 font-semibold text-gray-600">Email</th>
+						<th class="px-6 py-3 font-semibold text-gray-600">Role</th>
+						<th class="px-6 py-3 font-semibold text-gray-600">Status</th>
+						<th class="px-6 py-3 font-semibold text-gray-600">Joined</th>
+						<th class="px-6 py-3 font-semibold text-gray-600 text-right">Actions</th>
+					</tr>
+				</thead>
+				<tbody>
+					{#each data.users as user}
+						<tr class="border-b border-gray-soft last:border-0 hover:bg-gray-50 transition-colors {!user.active ? 'bg-amber-50' : ''}">
+							<td class="px-6 py-4 font-medium text-gray-900">{user.name}</td>
+							<td class="px-6 py-4 text-gray-600"><a href="mailto:{user.email}" class="hover:text-teal-brand">{user.email}</a></td>
+							<td class="px-6 py-4 text-gray-600">{roleLabel(user.role)}</td>
+							<td class="px-6 py-4">
+								{#if user.active}
+									<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">Active</span>
+								{:else}
+									<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-amber-100 text-amber-800">Pending</span>
+								{/if}
+							</td>
+							<td class="px-6 py-4 text-gray-500 text-xs">{formatDate(user.createdAt)}</td>
+							<td class="px-6 py-4 text-right">
+								{#if !user.active}
+									<div class="flex items-center justify-end gap-2">
+										<form method="POST" action="?/approve" use:enhance={() => {
+											submitting = user.id;
+											return async ({ update }) => { submitting = null; await update(); };
+										}}>
+											<input type="hidden" name="userId" value={user.id} />
+											<select name="role" class="px-2 py-1.5 rounded border border-gray-soft text-xs bg-white">
+												{#each roleOptions as opt}
+													<option value={opt.value}>{opt.label}</option>
+												{/each}
+											</select>
+											<button type="submit" disabled={submitting === user.id} class="ml-1 px-3 py-1.5 text-xs font-medium rounded bg-green-600 text-white hover:bg-green-700 disabled:opacity-50 cursor-pointer">
+												Approve
+											</button>
+										</form>
+										{#if confirmDeny === user.id}
+											<form method="POST" action="?/deny" use:enhance={() => {
+												submitting = user.id;
+												return async ({ update }) => { submitting = null; confirmDeny = null; await update(); };
+											}}>
+												<input type="hidden" name="userId" value={user.id} />
+												<button type="submit" disabled={submitting === user.id} class="px-3 py-1.5 text-xs font-medium rounded bg-red-600 text-white hover:bg-red-700 disabled:opacity-50 cursor-pointer">
+													Confirm Deny
+												</button>
+											</form>
+											<button onclick={() => confirmDeny = null} class="px-3 py-1.5 text-xs rounded border border-gray-soft text-gray-600 hover:bg-gray-100 cursor-pointer">Cancel</button>
+										{:else}
+											<button onclick={() => confirmDeny = user.id} class="px-3 py-1.5 text-xs font-medium rounded border border-red-300 text-red-600 hover:bg-red-50 cursor-pointer">Deny</button>
+										{/if}
+									</div>
+								{:else}
+									<a href="/admin/users/{user.id}" class="text-sm font-medium text-teal-brand hover:text-teal-dark">Edit</a>
+								{/if}
+							</td>
+						</tr>
+					{/each}
+				</tbody>
+			</table>
+		</div>
+	{/if}
+</div>

src/routes/admin/users/[id]/+page.server.ts

@@ -0,0 +1,85 @@
+import type { PageServerLoad, Actions } from './$types';
+import { db } from '$lib/server/db';
+import { users } from '$lib/server/schema';
+import { eq } from 'drizzle-orm';
+import { error, fail } from '@sveltejs/kit';
+import { hasPermission } from '$lib/roles';
+import type { Role } from '$lib/roles';
+import { hashPassword } from '$lib/server/auth-utils';
+import { logAudit } from '$lib/server/audit';
+
+export const load: PageServerLoad = async ({ params, locals }) => {
+	if (!hasPermission(locals.user!.role as Role, 'users')) error(403, 'Access denied');
+	const id = parseInt(params.id, 10);
+	if (isNaN(id)) error(404, 'User not found');
+
+	const [user] = await db
+		.select({
+			id: users.id,
+			name: users.name,
+			email: users.email,
+			role: users.role,
+			active: users.active,
+			mustChangePassword: users.mustChangePassword,
+			createdAt: users.createdAt
+		})
+		.from(users)
+		.where(eq(users.id, id))
+		.limit(1);
+
+	if (!user) error(404, 'User not found');
+	return { user };
+};
+
+export const actions: Actions = {
+	update: async ({ request, params, locals }) => {
+		if (!hasPermission(locals.user!.role as Role, 'users')) error(403, 'Access denied');
+		const id = parseInt(params.id, 10);
+		const fd = await request.formData();
+		const name = fd.get('name')?.toString().trim() ?? '';
+		const role = fd.get('role')?.toString() ?? 'viewer';
+		const active = fd.get('active') === 'on';
+
+		if (!name) return fail(400, { error: 'Name is required' });
+
+		const validRoles = ['sysadmin', 'director', 'foster_coordinator', 'volunteer_manager', 'vet_liaison', 'content_editor', 'applications_manager', 'viewer', 'foster'];
+		if (!validRoles.includes(role)) return fail(400, { error: 'Invalid role' });
+
+		await db.update(users)
+			.set({ name, role: role as typeof users.role.enumValues[number], active })
+			.where(eq(users.id, id));
+
+		await logAudit({
+			userId: locals.user!.id,
+			action: 'update_user',
+			entity: 'user',
+			entityId: id,
+			diff: { name, role, active }
+		});
+
+		return { success: true, action: 'update' };
+	},
+
+	resetPassword: async ({ request, params, locals }) => {
+		if (!hasPermission(locals.user!.role as Role, 'users')) error(403, 'Access denied');
+		const id = parseInt(params.id, 10);
+		const fd = await request.formData();
+		const password = fd.get('password')?.toString() ?? '';
+
+		if (!password || password.length < 8) return fail(400, { error: 'Password must be at least 8 characters' });
+
+		const passwordHash = await hashPassword(password);
+		await db.update(users)
+			.set({ passwordHash, mustChangePassword: true })
+			.where(eq(users.id, id));
+
+		await logAudit({
+			userId: locals.user!.id,
+			action: 'reset_user_password',
+			entity: 'user',
+			entityId: id
+		});
+
+		return { success: true, action: 'resetPassword' };
+	}
+};

src/routes/admin/users/[id]/+page.svelte

@@ -0,0 +1,120 @@
+<script lang="ts">
+	import { enhance } from '$app/forms';
+
+	let { data, form } = $props();
+	const user = $derived(data.user);
+
+	let submitting = $state<string | null>(null);
+	let showSuccess = $state(false);
+	let showPasswordForm = $state(false);
+
+	function handleEnhance(action: string) {
+		submitting = action;
+		return async ({ update, result }: { update: (opts?: { reset?: boolean }) => Promise<void>; result: { type: string } }) => {
+			submitting = null;
+			await update({ reset: false });
+			if (result.type === 'success') { showSuccess = true; setTimeout(() => showSuccess = false, 3000); }
+		};
+	}
+
+	const roleOptions = [
+		{ value: 'viewer', label: 'Viewer' },
+		{ value: 'foster', label: 'Foster' },
+		{ value: 'applications_manager', label: 'Applications Manager' },
+		{ value: 'volunteer_manager', label: 'Volunteer Manager' },
+		{ value: 'content_editor', label: 'Content Editor' },
+		{ value: 'vet_liaison', label: 'Vet Liaison' },
+		{ value: 'foster_coordinator', label: 'Foster Coordinator' },
+		{ value: 'director', label: 'Director' },
+		{ value: 'sysadmin', label: 'Sysadmin' }
+	];
+
+	const inputClass = 'w-full px-3 py-2.5 rounded-lg border border-gray-soft bg-white text-gray-brand placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-teal-brand focus:border-teal-brand text-sm';
+	const labelClass = 'block text-sm font-medium text-gray-700 mb-1';
+</script>
+
+<svelte:head><title>{user.name} — Admin</title></svelte:head>
+
+<div class="max-w-lg">
+	<div class="flex items-center gap-4 mb-6">
+		<a href="/admin/users" class="text-gray-400 hover:text-gray-600 transition-colors">
+			<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" /></svg>
+		</a>
+		<h1 class="text-2xl font-bold text-gray-900">{user.name}</h1>
+	</div>
+
+	{#if form?.error}
+		<div class="mb-6 p-4 bg-red-50 border border-red-200 rounded-xl text-sm text-red-700">{form.error}</div>
+	{/if}
+
+	{#if showSuccess}
+		<div class="mb-6 p-4 bg-green-50 border border-green-200 rounded-xl text-sm text-green-700 flex items-center gap-2">
+			<svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg>
+			Changes saved.
+		</div>
+	{/if}
+
+	<div class="space-y-6">
+		<div class="bg-white rounded-xl shadow-sm border border-gray-soft p-6">
+			<h2 class="text-lg font-semibold text-gray-900 mb-4">Edit User</h2>
+			<form method="POST" action="?/update" use:enhance={() => handleEnhance('update')}>
+				<div class="space-y-4">
+					<div>
+						<label for="name" class={labelClass}>Full Name</label>
+						<input id="name" name="name" type="text" required value={user.name} class={inputClass} />
+					</div>
+					<div>
+						<p class={labelClass}>Email</p>
+						<p class="text-sm text-gray-600 px-3 py-2.5">{user.email}</p>
+					</div>
+					<div>
+						<label for="role" class={labelClass}>Role</label>
+						<select id="role" name="role" class={inputClass}>
+							{#each roleOptions as opt}
+								<option value={opt.value} selected={user.role === opt.value}>{opt.label}</option>
+							{/each}
+						</select>
+					</div>
+					<div class="flex items-center gap-2">
+						<input id="active" name="active" type="checkbox" checked={user.active} class="rounded border-gray-soft text-teal-brand focus:ring-teal-brand" />
+						<label for="active" class="text-sm text-gray-700">Active (can log in)</label>
+					</div>
+				</div>
+				<div class="mt-6">
+					<button type="submit" disabled={submitting === 'update'} class="px-6 py-2.5 text-sm font-medium rounded-lg bg-teal-brand text-white hover:bg-teal-dark transition-colors disabled:opacity-50 cursor-pointer">
+						{submitting === 'update' ? 'Saving...' : 'Save Changes'}
+					</button>
+				</div>
+			</form>
+		</div>
+
+		<div class="bg-white rounded-xl shadow-sm border border-gray-soft p-6">
+			<div class="flex items-center justify-between mb-4">
+				<h2 class="text-lg font-semibold text-gray-900">Password</h2>
+				<button onclick={() => showPasswordForm = !showPasswordForm} class="text-sm text-teal-brand hover:text-teal-dark cursor-pointer">
+					{showPasswordForm ? 'Cancel' : 'Reset Password'}
+				</button>
+			</div>
+			{#if showPasswordForm}
+				<form method="POST" action="?/resetPassword" use:enhance={() => handleEnhance('resetPassword')}>
+					<div class="space-y-4">
+						<div>
+							<label for="password" class={labelClass}>New Password</label>
+							<input id="password" name="password" type="text" required minlength="8" class={inputClass} placeholder="At least 8 characters" />
+							<p class="mt-1 text-xs text-gray-400">User will be prompted to change this on next login.</p>
+						</div>
+					</div>
+					<div class="mt-4">
+						<button type="submit" disabled={submitting === 'resetPassword'} class="px-6 py-2.5 text-sm font-medium rounded-lg bg-amber-600 text-white hover:bg-amber-700 transition-colors disabled:opacity-50 cursor-pointer">
+							{submitting === 'resetPassword' ? 'Resetting...' : 'Set Password'}
+						</button>
+					</div>
+				</form>
+			{:else}
+				<p class="text-sm text-gray-500">
+					{user.mustChangePassword ? 'User must change password on next login.' : 'Password is set.'}
+				</p>
+			{/if}
+		</div>
+	</div>
+</div>

src/routes/admin/users/new/+page.server.ts

@@ -0,0 +1,69 @@
+import type { PageServerLoad, Actions } from './$types';
+import { db } from '$lib/server/db';
+import { users } from '$lib/server/schema';
+import { error, fail, redirect } from '@sveltejs/kit';
+import { hasPermission } from '$lib/roles';
+import type { Role } from '$lib/roles';
+import { hashPassword } from '$lib/server/auth-utils';
+import { logAudit } from '$lib/server/audit';
+import { sendRegistrationApproved } from '$lib/server/email';
+
+export const load: PageServerLoad = async ({ locals }) => {
+	if (!hasPermission(locals.user!.role as Role, 'users')) error(403, 'Access denied');
+	return {};
+};
+
+export const actions: Actions = {
+	default: async ({ request, locals }) => {
+		if (!hasPermission(locals.user!.role as Role, 'users')) error(403, 'Access denied');
+		const fd = await request.formData();
+		const name = fd.get('name')?.toString().trim() ?? '';
+		const email = fd.get('email')?.toString().trim().toLowerCase() ?? '';
+		const role = fd.get('role')?.toString() ?? 'viewer';
+		const password = fd.get('password')?.toString() ?? '';
+		const sendWelcome = fd.get('sendWelcome') === 'on';
+
+		if (!name) return fail(400, { error: 'Name is required' });
+		if (!email) return fail(400, { error: 'Email is required' });
+		if (!password || password.length < 8) return fail(400, { error: 'Password must be at least 8 characters' });
+
+		const validRoles = ['sysadmin', 'director', 'foster_coordinator', 'volunteer_manager', 'vet_liaison', 'content_editor', 'applications_manager', 'viewer', 'foster'];
+		if (!validRoles.includes(role)) return fail(400, { error: 'Invalid role' });
+
+		const existing = await db.select({ id: users.id }).from(users).where(
+			(await import('drizzle-orm')).eq(users.email, email)
+		).limit(1);
+		if (existing.length > 0) return fail(400, { error: 'A user with that email already exists' });
+
+		const passwordHash = await hashPassword(password);
+		const [result] = await db.insert(users).values({
+			name,
+			email,
+			passwordHash,
+			role: role as typeof users.role.enumValues[number],
+			active: true,
+			mustChangePassword: true
+		}).$returningId();
+
+		await logAudit({
+			userId: locals.user!.id,
+			action: 'create_user',
+			entity: 'user',
+			entityId: result.id,
+			diff: { name, email, role }
+		});
+
+		if (sendWelcome) {
+			try {
+				await sendRegistrationApproved(
+					process.env.ORG_NAME ?? 'Rescue',
+					email,
+					name,
+					`${process.env.SITE_URL ?? ''}/login`
+				);
+			} catch { /* noop */ }
+		}
+
+		redirect(303, '/admin/users');
+	}
+};

src/routes/admin/users/new/+page.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">
+	import { enhance } from '$app/forms';
+
+	let { form } = $props();
+	let submitting = $state(false);
+
+	const roleOptions = [
+		{ value: 'viewer', label: 'Viewer' },
+		{ value: 'foster', label: 'Foster' },
+		{ value: 'applications_manager', label: 'Applications Manager' },
+		{ value: 'volunteer_manager', label: 'Volunteer Manager' },
+		{ value: 'content_editor', label: 'Content Editor' },
+		{ value: 'vet_liaison', label: 'Vet Liaison' },
+		{ value: 'foster_coordinator', label: 'Foster Coordinator' },
+		{ value: 'director', label: 'Director' },
+		{ value: 'sysadmin', label: 'Sysadmin' }
+	];
+
+	const inputClass = 'w-full px-3 py-2.5 rounded-lg border border-gray-soft bg-white text-gray-brand placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-teal-brand focus:border-teal-brand text-sm';
+	const labelClass = 'block text-sm font-medium text-gray-700 mb-1';
+</script>
+
+<svelte:head><title>New User — Admin</title></svelte:head>
+
+<div class="max-w-lg">
+	<div class="flex items-center gap-4 mb-6">
+		<a href="/admin/users" class="text-gray-400 hover:text-gray-600 transition-colors">
+			<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" /></svg>
+		</a>
+		<h1 class="text-2xl font-bold text-gray-900">New User</h1>
+	</div>
+
+	{#if form?.error}
+		<div class="mb-6 p-4 bg-red-50 border border-red-200 rounded-xl text-sm text-red-700">{form.error}</div>
+	{/if}
+
+	<div class="bg-white rounded-xl shadow-sm border border-gray-soft p-6">
+		<form method="POST" use:enhance={() => {
+			submitting = true;
+			return async ({ update }) => { submitting = false; await update(); };
+		}}>
+			<div class="space-y-4">
+				<div>
+					<label for="name" class={labelClass}>Full Name</label>
+					<input id="name" name="name" type="text" required class={inputClass} placeholder="Jane Smith" />
+				</div>
+				<div>
+					<label for="email" class={labelClass}>Email Address</label>
+					<input id="email" name="email" type="email" required class={inputClass} placeholder="jane@example.com" />
+				</div>
+				<div>
+					<label for="role" class={labelClass}>Role</label>
+					<select id="role" name="role" class={inputClass}>
+						{#each roleOptions as opt}
+							<option value={opt.value}>{opt.label}</option>
+						{/each}
+					</select>
+				</div>
+				<div>
+					<label for="password" class={labelClass}>Temporary Password</label>
+					<input id="password" name="password" type="text" required minlength="8" class={inputClass} placeholder="At least 8 characters" />
+					<p class="mt-1 text-xs text-gray-400">User will be prompted to change this on first login.</p>
+				</div>
+				<div class="flex items-center gap-2">
+					<input id="sendWelcome" name="sendWelcome" type="checkbox" class="rounded border-gray-soft text-teal-brand focus:ring-teal-brand" />
+					<label for="sendWelcome" class="text-sm text-gray-700">Send welcome email with login link</label>
+				</div>
+			</div>
+			<div class="mt-6 flex gap-3">
+				<button type="submit" disabled={submitting} class="px-6 py-2.5 text-sm font-medium rounded-lg bg-teal-brand text-white hover:bg-teal-dark transition-colors disabled:opacity-50 cursor-pointer">
+					{submitting ? 'Creating...' : 'Create User'}
+				</button>
+				<a href="/admin/users" class="px-6 py-2.5 text-sm font-medium rounded-lg border border-gray-soft text-gray-700 hover:bg-gray-50 transition-colors">Cancel</a>
+			</div>
+		</form>
+	</div>
+</div>

src/routes/admin/vets/+page.server.ts

@@ -0,0 +1,18 @@
+import type { PageServerLoad } from './$types';
+import { db } from '$lib/server/db';
+import { vets } from '$lib/server/schema';
+import { like, or } from 'drizzle-orm';
+import { hasPermission } from '$lib/roles';
+import type { Role } from '$lib/roles';
+import { error } from '@sveltejs/kit';
+
+export const load: PageServerLoad = async ({ url, locals }) => {
+	if (!hasPermission(locals.user!.role as Role, 'vets')) error(403, 'Access denied');
+	const q = url.searchParams.get('q')?.trim() ?? '';
+
+	const vetList = q
+		? await db.select().from(vets).where(or(like(vets.name, `%${q}%`), like(vets.clinic, `%${q}%`))).orderBy(vets.name)
+		: await db.select().from(vets).orderBy(vets.name);
+
+	return { vets: vetList, q };
+};

src/routes/admin/vets/+page.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+	let { data } = $props();
+	const vetList = $derived(data.vets);
+	const inputClass = 'w-full px-3 py-2.5 rounded-lg border border-gray-soft bg-white text-gray-brand placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-teal-brand focus:border-teal-brand text-sm';
+</script>
+
+<svelte:head><title>Vets — Admin</title></svelte:head>
+
+<div>
+	<div class="flex items-center justify-between mb-6">
+		<h1 class="text-2xl font-bold text-gray-900">Vet Management</h1>
+		<a href="/admin/vets/new" class="px-4 py-2.5 text-sm font-medium rounded-lg bg-teal-brand text-white hover:bg-teal-dark transition-colors">+ Add Vet</a>
+	</div>
+
+	<div class="bg-white rounded-xl shadow-sm border border-gray-soft p-4 mb-6">
+		<form method="GET" class="flex gap-3">
+			<input type="text" name="q" value={data.q} placeholder="Search by name or clinic..." class={inputClass} />
+			<button type="submit" class="px-5 py-2.5 text-sm font-medium rounded-lg bg-teal-brand text-white hover:bg-teal-dark transition-colors whitespace-nowrap cursor-pointer">Search</button>
+			{#if data.q}
+				<a href="/admin/vets" class="px-5 py-2.5 text-sm font-medium rounded-lg border border-gray-soft text-gray-brand hover:bg-gray-100 transition-colors whitespace-nowrap">Clear</a>
+			{/if}
+		</form>
+	</div>
+
+	{#if vetList.length === 0}
+		<div class="text-center py-12 text-gray-400">
+			<svg class="mx-auto h-12 w-12 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
+			</svg>
+			<p class="text-sm font-medium">{data.q ? 'No vets match your search' : 'No vets yet'}</p>
+		</div>
+	{:else}
+		<div class="bg-white rounded-xl shadow-sm border border-gray-soft overflow-hidden">
+			<table class="w-full text-sm text-left">
+				<thead>
+					<tr class="border-b border-gray-soft bg-gray-50">
+						<th class="px-6 py-3 font-semibold text-gray-600">Name</th>
+						<th class="px-6 py-3 font-semibold text-gray-600">Clinic</th>
+						<th class="px-6 py-3 font-semibold text-gray-600">Phone</th>
+						<th class="px-6 py-3 font-semibold text-gray-600">Email</th>
+						<th class="px-6 py-3 font-semibold text-gray-600 text-right">Actions</th>
+					</tr>
+				</thead>
+				<tbody>
+					{#each vetList as vet}
+						<tr class="border-b border-gray-soft last:border-0 hover:bg-gray-50 transition-colors">
+							<td class="px-6 py-4"><a href="/admin/vets/{vet.id}" class="font-medium text-teal-brand hover:text-teal-dark">{vet.name}</a></td>
+							<td class="px-6 py-4 text-gray-600">{vet.clinic ?? '—'}</td>
+							<td class="px-6 py-4 text-gray-600">{#if vet.phone}<a href="tel:{vet.phone}" class="hover:text-teal-brand">{vet.phone}</a>{:else}—{/if}</td>
+							<td class="px-6 py-4 text-gray-600">{#if vet.email}<a href="mailto:{vet.email}" class="hover:text-teal-brand">{vet.email}</a>{:else}—{/if}</td>
+							<td class="px-6 py-4 text-right"><a href="/admin/vets/{vet.id}" class="text-sm font-medium text-teal-brand hover:text-teal-dark">Edit</a></td>
+						</tr>
+					{/each}
+				</tbody>
+			</table>
+		</div>
+		<p class="mt-4 text-sm text-gray-400">{vetList.length} vet{vetList.length !== 1 ? 's' : ''} total</p>
+	{/if}
+</div>

src/routes/admin/vets/[id]/+page.server.ts

@@ -0,0 +1,52 @@
+import type { PageServerLoad, Actions } from './$types';
+import { db } from '$lib/server/db';
+import { vets, petMedical, pets } from '$lib/server/schema';
+import { eq, count } from 'drizzle-orm';
+import { error, fail } from '@sveltejs/kit';
+import { logAudit } from '$lib/server/audit';
+import { hasPermission } from '$lib/roles';
+import type { Role } from '$lib/roles';
+
+export const load: PageServerLoad = async ({ params, locals }) => {
+	if (!hasPermission(locals.user!.role as Role, 'vets')) error(403, 'Access denied');
+	const id = parseInt(params.id, 10);
+	if (isNaN(id)) error(404, 'Vet not found');
+
+	const [vet] = await db.select().from(vets).where(eq(vets.id, id));
+	if (!vet) error(404, 'Vet not found');
+
+	const [medicalPetCount] = await db.select({ total: count() }).from(petMedical).where(eq(petMedical.vetId, id));
+	const [clinicPetCount] = await db.select({ total: count() }).from(pets).where(eq(pets.vetId, id));
+	const petCount = (medicalPetCount?.total ?? 0) + (clinicPetCount?.total ?? 0);
+
+	return { vet, petCount };
+};
+
+export const actions: Actions = {
+	default: async ({ request, params, locals }) => {
+		if (!hasPermission(locals.user!.role as Role, 'vets')) error(403, 'Access denied');
+		const id = parseInt(params.id, 10);
+		const fd = await request.formData();
+
+		const name = fd.get('name')?.toString().trim() ?? '';
+		if (!name) return fail(400, { error: 'Name is required' });
+
+		const clinic = fd.get('clinic')?.toString().trim() || null;
+		const phone = fd.get('phone')?.toString().trim() || null;
+		const email = fd.get('email')?.toString().trim() || null;
+		const address = fd.get('address')?.toString().trim() || null;
+		const notes = fd.get('notes')?.toString().trim() || null;
+
+		await db.update(vets).set({ name, clinic, phone, email, address, notes }).where(eq(vets.id, id));
+
+		await logAudit({
+			userId: locals.user?.id ?? undefined,
+			action: 'update_vet',
+			entity: 'vet',
+			entityId: id,
+			diff: { name, clinic }
+		});
+
+		return { success: true };
+	}
+};

src/routes/admin/vets/[id]/+page.svelte

@@ -0,0 +1,87 @@
+<script lang="ts">
+	import { enhance } from '$app/forms';
+	let { data, form } = $props();
+	const vet = $derived(data.vet);
+	let submitting = $state(false);
+	let showSuccess = $state(false);
+
+	function handleEnhance() {
+		submitting = true;
+		return async ({ update, result }: { update: (opts?: { reset?: boolean }) => Promise<void>; result: { type: string } }) => {
+			submitting = false;
+			await update({ reset: false });
+			if (result.type === 'success') { showSuccess = true; setTimeout(() => showSuccess = false, 3000); }
+		};
+	}
+
+	const inputClass = 'w-full px-3 py-2.5 rounded-lg border border-gray-soft bg-white text-gray-brand placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-teal-brand focus:border-teal-brand text-sm';
+	const labelClass = 'block text-sm font-medium text-gray-700 mb-1';
+</script>
+
+<svelte:head><title>{vet.name} — Admin</title></svelte:head>
+
+<div>
+	<div class="flex items-center gap-4 mb-6">
+		<a href="/admin/vets" class="text-gray-400 hover:text-gray-600 transition-colors">
+			<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" /></svg>
+		</a>
+		<div>
+			<h1 class="text-2xl font-bold text-gray-900">{vet.name}</h1>
+			{#if vet.clinic}<p class="text-sm text-gray-500">{vet.clinic}</p>{/if}
+		</div>
+	</div>
+
+	<div class="mb-6 p-4 bg-blue-50 border border-blue-200 rounded-xl text-sm text-blue-700 flex items-center gap-2">
+		<svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
+		{data.petCount} pet record{data.petCount !== 1 ? 's' : ''} assigned to this vet
+	</div>
+
+	{#if showSuccess}
+		<div class="mb-6 p-4 bg-green-50 border border-green-200 rounded-xl text-sm text-green-700 flex items-center gap-2">
+			<svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg>
+			Vet updated successfully.
+		</div>
+	{/if}
+
+	{#if form?.error}
+		<div class="mb-6 p-4 bg-red-50 border border-red-200 rounded-xl text-sm text-red-700">{form.error}</div>
+	{/if}
+
+	<form method="POST" use:enhance={handleEnhance} class="space-y-6">
+		<div class="bg-white rounded-xl shadow-sm border border-gray-soft p-6">
+			<h2 class="text-lg font-semibold text-gray-900 mb-4">Vet Information</h2>
+			<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+				<div>
+					<label for="name" class={labelClass}>Name <span class="text-red-500">*</span></label>
+					<input type="text" id="name" name="name" required value={vet.name} class={inputClass} />
+				</div>
+				<div>
+					<label for="clinic" class={labelClass}>Clinic</label>
+					<input type="text" id="clinic" name="clinic" value={vet.clinic ?? ''} class={inputClass} />
+				</div>
+				<div>
+					<label for="phone" class={labelClass}>Phone</label>
+					<input type="tel" id="phone" name="phone" value={vet.phone ?? ''} class={inputClass} />
+				</div>
+				<div>
+					<label for="email" class={labelClass}>Email</label>
+					<input type="email" id="email" name="email" value={vet.email ?? ''} class={inputClass} />
+				</div>
+				<div class="md:col-span-2">
+					<label for="address" class={labelClass}>Address</label>
+					<textarea id="address" name="address" rows="2" class="{inputClass} resize-y">{vet.address ?? ''}</textarea>
+				</div>
+				<div class="md:col-span-2">
+					<label for="notes" class={labelClass}>Notes</label>
+					<textarea id="notes" name="notes" rows="3" class="{inputClass} resize-y">{vet.notes ?? ''}</textarea>
+				</div>
+			</div>
+		</div>
+		<div class="flex justify-end gap-3">
+			<a href="/admin/vets" class="px-6 py-2.5 text-sm font-medium rounded-lg border border-gray-soft text-gray-brand hover:bg-gray-100 transition-colors">Cancel</a>
+			<button type="submit" disabled={submitting} class="px-6 py-2.5 text-sm font-medium rounded-lg bg-teal-brand text-white hover:bg-teal-dark transition-colors disabled:opacity-50 cursor-pointer">
+				{submitting ? 'Saving...' : 'Save Changes'}
+			</button>
+		</div>
+	</form>
+</div>

src/routes/admin/vets/new/+page.server.ts

@@ -0,0 +1,35 @@
+import type { Actions } from './$types';
+import { db } from '$lib/server/db';
+import { vets } from '$lib/server/schema';
+import { error, fail, redirect } from '@sveltejs/kit';
+import { logAudit } from '$lib/server/audit';
+import { hasPermission } from '$lib/roles';
+import type { Role } from '$lib/roles';
+
+export const actions: Actions = {
+	default: async ({ request, locals }) => {
+		if (!hasPermission(locals.user!.role as Role, 'vets')) error(403, 'Access denied');
+		const fd = await request.formData();
+
+		const name = fd.get('name')?.toString().trim() ?? '';
+		if (!name) return fail(400, { error: 'Name is required' });
+
+		const clinic = fd.get('clinic')?.toString().trim() || null;
+		const phone = fd.get('phone')?.toString().trim() || null;
+		const email = fd.get('email')?.toString().trim() || null;
+		const address = fd.get('address')?.toString().trim() || null;
+		const notes = fd.get('notes')?.toString().trim() || null;
+
+		const [inserted] = await db.insert(vets).values({ name, clinic, phone, email, address, notes }).$returningId();
+
+		await logAudit({
+			userId: locals.user?.id ?? undefined,
+			action: 'create_vet',
+			entity: 'vet',
+			entityId: inserted.id,
+			diff: { name, clinic }
+		});
+
+		redirect(303, '/admin/vets');
+	}
+};

src/routes/admin/vets/new/+page.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+	import { enhance } from '$app/forms';
+	let { form } = $props();
+	let submitting = $state(false);
+	const inputClass = 'w-full px-3 py-2.5 rounded-lg border border-gray-soft bg-white text-gray-brand placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-teal-brand focus:border-teal-brand text-sm';
+	const labelClass = 'block text-sm font-medium text-gray-700 mb-1';
+</script>
+
+<svelte:head><title>Add Vet — Admin</title></svelte:head>
+
+<div class="max-w-4xl">
+	<div class="flex items-center gap-4 mb-6">
+		<a href="/admin/vets" class="text-gray-400 hover:text-gray-600 transition-colors">
+			<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" /></svg>
+		</a>
+		<h1 class="text-2xl font-bold text-gray-900">Add Vet</h1>
+	</div>
+
+	{#if form?.error}
+		<div class="mb-6 p-4 bg-red-50 border border-red-200 rounded-xl text-sm text-red-700">{form.error}</div>
+	{/if}
+
+	<form method="POST" use:enhance={() => { submitting = true; return async ({ update }) => { submitting = false; await update(); }; }} class="space-y-6">
+		<div class="bg-white rounded-xl shadow-sm border border-gray-soft p-6">
+			<h2 class="text-lg font-semibold text-gray-900 mb-4">Vet Information</h2>
+			<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+				<div>
+					<label for="name" class={labelClass}>Name <span class="text-red-500">*</span></label>
+					<input type="text" id="name" name="name" required class={inputClass} />
+				</div>
+				<div>
+					<label for="clinic" class={labelClass}>Clinic</label>
+					<input type="text" id="clinic" name="clinic" class={inputClass} />
+				</div>
+				<div>
+					<label for="phone" class={labelClass}>Phone</label>
+					<input type="tel" id="phone" name="phone" class={inputClass} />
+				</div>
+				<div>
+					<label for="email" class={labelClass}>Email</label>
+					<input type="email" id="email" name="email" class={inputClass} />
+				</div>
+				<div class="md:col-span-2">
+					<label for="address" class={labelClass}>Address</label>
+					<textarea id="address" name="address" rows="2" class="{inputClass} resize-y"></textarea>
+				</div>
+				<div class="md:col-span-2">
+					<label for="notes" class={labelClass}>Notes</label>
+					<textarea id="notes" name="notes" rows="3" class="{inputClass} resize-y"></textarea>
+				</div>
+			</div>
+		</div>
+		<div class="flex justify-end gap-3">
+			<a href="/admin/vets" class="px-6 py-2.5 text-sm font-medium rounded-lg border border-gray-soft text-gray-brand hover:bg-gray-100 transition-colors">Cancel</a>
+			<button type="submit" disabled={submitting} class="px-6 py-2.5 text-sm font-medium rounded-lg bg-teal-brand text-white hover:bg-teal-dark transition-colors disabled:opacity-50 cursor-pointer">
+				{submitting ? 'Adding...' : 'Add Vet'}
+			</button>
+		</div>
+	</form>
+</div>

src/routes/admin/volunteers/+page.server.ts

@@ -0,0 +1,43 @@
+import type { PageServerLoad } from './$types';
+import { db } from '$lib/server/db';
+import { applications } from '$lib/server/schema';
+import { eq, and, count, desc } from 'drizzle-orm';
+import { hasPermission } from '$lib/roles';
+import type { Role } from '$lib/roles';
+import { error } from '@sveltejs/kit';
+
+const PER_PAGE = 20;
+
+export const load: PageServerLoad = async ({ url, locals }) => {
+	if (!hasPermission(locals.user!.role as Role, 'volunteers')) error(403, 'Access denied');
+
+	const status = url.searchParams.get('status') ?? '';
+	const page = Math.max(1, parseInt(url.searchParams.get('page') ?? '1', 10));
+	const offset = (page - 1) * PER_PAGE;
+
+	const conditions = [eq(applications.type, 'volunteer') as ReturnType<typeof eq>];
+	if (status) conditions.push(eq(applications.status, status as typeof applications.status.enumValues[number]) as ReturnType<typeof eq>);
+
+	const where = and(...conditions);
+
+	const [totalRow] = await db.select({ total: count() }).from(applications).where(where);
+	const total = totalRow?.total ?? 0;
+	const totalPages = Math.max(1, Math.ceil(total / PER_PAGE));
+
+	const volunteers = await db
+		.select({
+			id: applications.id,
+			applicantName: applications.applicantName,
+			email: applications.applicantEmail,
+			phone: applications.applicantPhone,
+			status: applications.status,
+			createdAt: applications.createdAt
+		})
+		.from(applications)
+		.where(where)
+		.orderBy(desc(applications.createdAt))
+		.limit(PER_PAGE)
+		.offset(offset);
+
+	return { volunteers, total, page, totalPages, status };
+};

src/routes/admin/volunteers/+page.svelte

@@ -0,0 +1,89 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { page } from '$app/state';
+	import StatusBadge from '$lib/components/ui/StatusBadge.svelte';
+	import Pagination from '$lib/components/ui/Pagination.svelte';
+
+	let { data } = $props();
+
+	const statusOptions = [
+		{ value: '', label: 'All Statuses' },
+		{ value: 'pending', label: 'Pending' },
+		{ value: 'reviewing', label: 'Reviewing' },
+		{ value: 'approved', label: 'Approved' },
+		{ value: 'denied', label: 'Denied' }
+	];
+
+	function handleFilterChange(value: string) {
+		const url = new URL(page.url);
+		if (value) { url.searchParams.set('status', value); } else { url.searchParams.delete('status'); }
+		url.searchParams.delete('page');
+		goto(url.pathname + url.search);
+	}
+
+	function buildBaseUrl(): string {
+		const url = new URL(page.url);
+		return url.pathname + '?' + url.searchParams.toString();
+	}
+
+	function formatDate(d: string | Date): string {
+		return new Date(d).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
+	}
+</script>
+
+<svelte:head><title>Volunteer Applications — Admin</title></svelte:head>
+
+<div>
+	<div class="flex items-center justify-between mb-6">
+		<h1 class="text-2xl font-bold text-gray-900">Volunteer Applications</h1>
+		<span class="text-sm text-gray-500">{data.total} total</span>
+	</div>
+
+	<div class="bg-white rounded-xl shadow-sm border border-gray-soft p-4 mb-6">
+		<select
+			value={data.status}
+			onchange={(e) => handleFilterChange(e.currentTarget.value)}
+			class="px-3 py-2.5 rounded-lg border border-gray-soft bg-white text-sm focus:outline-none focus:ring-2 focus:ring-teal-brand"
+		>
+			{#each statusOptions as opt}
+				<option value={opt.value}>{opt.label}</option>
+			{/each}
+		</select>
+	</div>
+
+	{#if data.volunteers.length === 0}
+		<div class="text-center py-12 text-gray-400">
+			<p class="text-sm font-medium">No volunteer applications found.</p>
+		</div>
+	{:else}
+		<div class="bg-white rounded-xl shadow-sm border border-gray-soft overflow-hidden">
+			<table class="w-full text-sm text-left">
+				<thead>
+					<tr class="border-b border-gray-soft bg-gray-50">
+						<th class="px-6 py-3 font-semibold text-gray-600">Name</th>
+						<th class="px-6 py-3 font-semibold text-gray-600">Email</th>
+						<th class="px-6 py-3 font-semibold text-gray-600">Phone</th>
+						<th class="px-6 py-3 font-semibold text-gray-600">Status</th>
+						<th class="px-6 py-3 font-semibold text-gray-600">Date</th>
+						<th class="px-6 py-3 font-semibold text-gray-600 text-right">Actions</th>
+					</tr>
+				</thead>
+				<tbody>
+					{#each data.volunteers as vol}
+						<tr class="border-b border-gray-soft last:border-0 hover:bg-gray-50 transition-colors">
+							<td class="px-6 py-4 font-medium text-gray-900">{vol.applicantName}</td>
+							<td class="px-6 py-4 text-gray-600"><a href="mailto:{vol.email}" class="hover:text-teal-brand">{vol.email}</a></td>
+							<td class="px-6 py-4 text-gray-600">{vol.phone ?? '—'}</td>
+							<td class="px-6 py-4"><StatusBadge status={vol.status} /></td>
+							<td class="px-6 py-4 text-gray-500 text-xs">{formatDate(vol.createdAt)}</td>
+							<td class="px-6 py-4 text-right">
+								<a href="/admin/volunteers/{vol.id}" class="text-sm font-medium text-teal-brand hover:text-teal-dark">View</a>
+							</td>
+						</tr>
+					{/each}
+				</tbody>
+			</table>
+		</div>
+		<Pagination page={data.page} totalPages={data.totalPages} baseUrl={buildBaseUrl()} />
+	{/if}
+</div>

src/routes/admin/volunteers/[id]/+page.server.ts

@@ -0,0 +1,59 @@
+import type { PageServerLoad, Actions } from './$types';
+import { db } from '$lib/server/db';
+import { applications } from '$lib/server/schema';
+import { eq } from 'drizzle-orm';
+import { error, fail } from '@sveltejs/kit';
+import { logAudit } from '$lib/server/audit';
+import { sendApplicationStatusUpdate } from '$lib/server/email';
+import { hasPermission } from '$lib/roles';
+import type { Role } from '$lib/roles';
+
+export const load: PageServerLoad = async ({ params, locals }) => {
+	if (!hasPermission(locals.user!.role as Role, 'volunteers')) error(403, 'Access denied');
+	const id = parseInt(params.id, 10);
+	if (isNaN(id)) error(404, 'Application not found');
+
+	const [app] = await db.select().from(applications).where(eq(applications.id, id));
+	if (!app || app.type !== 'volunteer') error(404, 'Volunteer application not found');
+
+	return { application: app };
+};
+
+export const actions: Actions = {
+	updateStatus: async ({ request, params, locals }) => {
+		if (!hasPermission(locals.user!.role as Role, 'volunteers')) error(403, 'Access denied');
+		const id = parseInt(params.id, 10);
+		const fd = await request.formData();
+		const status = fd.get('status')?.toString();
+
+		if (!status || !['pending', 'reviewing', 'approved', 'denied', 'withdrawn'].includes(status)) {
+			return fail(400, { error: 'Invalid status' });
+		}
+
+		await db.update(applications).set({ status: status as typeof applications.status.enumValues[number] }).where(eq(applications.id, id));
+
+		await logAudit({
+			userId: locals.user?.id ?? undefined,
+			action: 'update_volunteer_status',
+			entity: 'application',
+			entityId: id,
+			diff: { status }
+		});
+
+		try {
+			const [app] = await db.select({ applicantName: applications.applicantName, email: applications.applicantEmail }).from(applications).where(eq(applications.id, id));
+			if (app) {
+				await sendApplicationStatusUpdate(
+					process.env.ORG_NAME ?? 'Rescue',
+					app.email,
+					app.applicantName,
+					'volunteer',
+					status,
+					process.env.SITE_URL ?? ''
+				);
+			}
+		} catch { /* noop */ }
+
+		return { success: true };
+	}
+};

src/routes/admin/volunteers/[id]/+page.svelte

@@ -0,0 +1,124 @@
+<script lang="ts">
+	import { enhance } from '$app/forms';
+	import StatusBadge from '$lib/components/ui/StatusBadge.svelte';
+
+	let { data, form } = $props();
+	const app = $derived(data.application);
+
+	let submitting = $state(false);
+	let showSuccess = $state(false);
+
+	function handleEnhance() {
+		submitting = true;
+		return async ({ update, result }: { update: (opts?: { reset?: boolean }) => Promise<void>; result: { type: string } }) => {
+			submitting = false;
+			await update({ reset: false });
+			if (result.type === 'success') { showSuccess = true; setTimeout(() => showSuccess = false, 3000); }
+		};
+	}
+
+	function formatDate(d: string | Date): string {
+		return new Date(d).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' });
+	}
+
+	function formatFieldLabel(key: string): string {
+		return key.replace(/([A-Z])/g, ' $1').replace(/_/g, ' ').replace(/\b\w/g, c => c.toUpperCase()).trim();
+	}
+
+	const formDataEntries = $derived.by(() => {
+		let fd = app.formData;
+		if (!fd) return [];
+		if (typeof fd === 'string') { try { fd = JSON.parse(fd); } catch { return []; } }
+		if (typeof fd !== 'object' || fd === null) return [];
+		return Object.entries(fd as Record<string, unknown>).filter(([, v]) => v !== null && v !== undefined && v !== '');
+	});
+
+	const statusOptions = ['pending', 'reviewing', 'approved', 'denied', 'withdrawn'];
+	const inputClass = 'w-full px-3 py-2.5 rounded-lg border border-gray-soft bg-white text-gray-brand placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-teal-brand focus:border-teal-brand text-sm';
+	const labelClass = 'block text-sm font-medium text-gray-700 mb-1';
+</script>
+
+<svelte:head><title>Volunteer #{app.id} — Admin</title></svelte:head>
+
+<div>
+	<div class="flex items-center gap-4 mb-6">
+		<a href="/admin/volunteers" class="text-gray-400 hover:text-gray-600 transition-colors">
+			<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" /></svg>
+		</a>
+		<div class="flex items-center gap-3">
+			<h1 class="text-2xl font-bold text-gray-900">{app.applicantName}</h1>
+			<StatusBadge status={app.status} />
+		</div>
+	</div>
+
+	{#if form?.error}
+		<div class="mb-6 p-4 bg-red-50 border border-red-200 rounded-xl text-sm text-red-700">{form.error}</div>
+	{/if}
+
+	<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+		<div class="lg:col-span-2 space-y-6">
+			<div class="bg-white rounded-xl shadow-sm border border-gray-soft p-6">
+				<h2 class="text-lg font-semibold text-gray-900 mb-4">Applicant Information</h2>
+				<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+					<div>
+						<p class="text-xs text-gray-400 uppercase tracking-wide">Email</p>
+						<p class="text-sm mt-1"><a href="mailto:{app.applicantEmail}" class="text-teal-brand hover:text-teal-dark">{app.applicantEmail}</a></p>
+					</div>
+					{#if app.applicantPhone}
+						<div>
+							<p class="text-xs text-gray-400 uppercase tracking-wide">Phone</p>
+							<p class="text-sm mt-1"><a href="tel:{app.applicantPhone}" class="text-teal-brand hover:text-teal-dark">{app.applicantPhone}</a></p>
+						</div>
+					{/if}
+					<div>
+						<p class="text-xs text-gray-400 uppercase tracking-wide">Submitted</p>
+						<p class="text-sm text-gray-600 mt-1">{formatDate(app.createdAt)}</p>
+					</div>
+				</div>
+			</div>
+
+			{#if formDataEntries.length > 0}
+				<div class="bg-white rounded-xl shadow-sm border border-gray-soft p-6">
+					<h2 class="text-lg font-semibold text-gray-900 mb-4">Application Details</h2>
+					<dl class="space-y-4">
+						{#each formDataEntries as [key, value]}
+							<div class="border-b border-gray-soft pb-3 last:border-0 last:pb-0">
+								<dt class="text-xs text-gray-400 uppercase tracking-wide">{formatFieldLabel(key)}</dt>
+								<dd class="text-sm text-gray-900 mt-1 whitespace-pre-wrap">
+									{#if typeof value === 'boolean'}{value ? 'Yes' : 'No'}
+									{:else if Array.isArray(value)}{value.join(', ')}
+									{:else}{String(value)}{/if}
+								</dd>
+							</div>
+						{/each}
+					</dl>
+				</div>
+			{/if}
+		</div>
+
+		<div>
+			<div class="bg-white rounded-xl shadow-sm border border-gray-soft p-6">
+				<h2 class="text-lg font-semibold text-gray-900 mb-4">Update Status</h2>
+				{#if showSuccess}
+					<div class="mb-4 p-3 bg-green-50 border border-green-200 rounded-lg text-sm text-green-700 flex items-center gap-2">
+						<svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg>
+						Status updated.
+					</div>
+				{/if}
+				<form method="POST" action="?/updateStatus" use:enhance={handleEnhance}>
+					<div class="mb-3">
+						<label for="status" class={labelClass}>Status</label>
+						<select id="status" name="status" class={inputClass}>
+							{#each statusOptions as s}
+								<option value={s} selected={app.status === s}>{s.charAt(0).toUpperCase() + s.slice(1)}</option>
+							{/each}
+						</select>
+					</div>
+					<button type="submit" disabled={submitting} class="w-full px-4 py-2.5 text-sm font-medium rounded-lg bg-teal-brand text-white hover:bg-teal-dark transition-colors disabled:opacity-50 cursor-pointer">
+						{submitting ? 'Saving...' : 'Save Status'}
+					</button>
+				</form>
+			</div>
+		</div>
+	</div>
+</div>