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

<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>