page.tsx73 lines · main

1	import { fetchAuthUsers } from '../../lib/auth-api';
2
3	export const metadata = { title: 'Auth · users' };
4	export const dynamic = 'force-dynamic';
5
6	export default async function AuthProjectUsersPage({
7	params,
8	}: {
9	params: Promise<{ projectId: string }>;
10	}) {
11	const { projectId } = await params;
12	const result = await fetchAuthUsers(100, projectId);
13
14	return (
15	<section>
16	<header className="mb-6">
17	<h2 className="font-mono text-lg tracking-tight text-[var(--color-text)]">
18	users
19	</h2>
20	<p className="mt-1 font-mono text-sm text-[var(--color-text-muted)]">
21	app end-users for this project only
22	</p>
23	</header>
24
25	{!result.ok ? (
26	<div className="rounded-md border border-dashed border-[var(--color-border)] p-8 font-mono text-sm text-[var(--color-text-muted)]">
27	{result.status === 401
28	? 'sign in to briven.tech to see users'
29	: result.message || 'could not load users'}
30	</div>
31	) : result.users.length === 0 ? (
32	<div className="rounded-md border border-dashed border-[var(--color-border)] p-8 font-mono text-sm text-[var(--color-text-muted)]">
33	no users for this project yet.
34	</div>
35	) : (
36	<div className="overflow-x-auto rounded-md border border-[var(--color-border-subtle)]">
37	<table className="w-full min-w-[640px] text-left font-mono text-xs">
38	<thead className="border-b border-[var(--color-border-subtle)] bg-[var(--color-surface)] text-[var(--color-text-muted)]">
39	<tr>
40	<th className="px-3 py-2 font-normal">email / phone</th>
41	<th className="px-3 py-2 font-normal">user id</th>
42	<th className="px-3 py-2 font-normal">joined</th>
43	</tr>
44	</thead>
45	<tbody>
46	{result.users.map((u) => (
47	<tr
48	key={u.id}
49	className="border-b border-[var(--color-border-subtle)] last:border-0"
50	>
51	<td className="px-3 py-2 text-[var(--color-text)]">
52	{u.emails[0] ?? u.phoneNumbers[0] ?? '—'}
53	</td>
54	<td className="max-w-[12rem] truncate px-3 py-2 text-[var(--color-text-muted)]">
55	{u.id}
56	</td>
57	<td className="px-3 py-2 text-[var(--color-text-muted)]">
58	{u.timeJoined
59	? new Date(u.timeJoined).toLocaleString()
60	: '—'}
61	</td>
62	</tr>
63	))}
64	</tbody>
65	</table>
66	<p className="border-t border-[var(--color-border-subtle)] px-3 py-2 font-mono text-[10px] text-[var(--color-text-muted)]">
67	{result.users.length} users · this project
68	</p>
69	</div>
70	)}
71	</section>
72	);
73	}