update ui and other frontend updates

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

@@ -0,0 +1,23 @@
+import { pbAdmin } from '$lib/server/pb-admin';
+
+export async function load() {
+	const fams = await pbAdmin.getList('fams');
+	const famsWithStats = await Promise.all(fams.map(async (fam: any) => {
+		const [members, rewards] = await Promise.all([
+			pbAdmin.getList('members', `famId = '${fam.id}'`),
+			pbAdmin.getList('rewards', `famId = '${fam.id}'`),
+		]);
+		return {
+			id: fam.id, name: fam.name, slug: fam.slug, inviteCode: fam.inviteCode,
+			memberCount: members.length,
+			claimedRewards: (rewards as any[]).filter((r: any) => r.claimed).length,
+			totalRewards: rewards.length,
+		};
+	}));
+
+	const totalFams = fams.length;
+	const totalMembers = famsWithStats.reduce((s: number, f: any) => s + f.memberCount, 0);
+	const totalRewards = famsWithStats.reduce((s: number, f: any) => s + f.totalRewards, 0);
+
+	return { fams: famsWithStats, totalFams, totalMembers, totalRewards };
+}

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

@@ -0,0 +1,37 @@
+<script lang="ts">
+	let { data } = $props();
+</script>
+
+<h1>Super Admin</h1>
+
+<div class="stats">
+	<div class="card"><strong>{data.totalFams}</strong> Families</div>
+	<div class="card"><strong>{data.totalMembers}</strong> Members</div>
+	<div class="card"><strong>{data.totalRewards}</strong> Rewards</div>
+</div>
+
+<h2>Families</h2>
+<table>
+	<thead><tr><th>Name</th><th>Slug</th><th>Members</th><th>Rewards</th><th>Invite Code</th></tr></thead>
+	<tbody>
+		{#each data.fams as fam}
+			<tr>
+				<td><a href="/{fam.slug}/admin">{fam.name}</a></td>
+				<td>{fam.slug}</td>
+				<td>{fam.memberCount}</td>
+				<td>{fam.claimedRewards}/{fam.totalRewards}</td>
+				<td><code>{fam.inviteCode}</code></td>
+			</tr>
+		{/each}
+	</tbody>
+</table>
+
+<style>
+	.stats { display: flex; gap: 1rem; margin: 1rem 0; }
+	.card { padding: 1rem; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px; flex: 1; text-align: center; }
+	.card strong { font-size: 1.5rem; display: block; }
+	table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
+	th, td { padding: 0.5rem; border: 1px solid #e5e7eb; text-align: left; }
+	th { background: #f9fafb; font-weight: 600; }
+	code { background: #eee; padding: 0.1rem 0.3rem; border-radius: 3px; font-size: 0.85em; }
+</style>