Merge pull request #23 from encryption4all/feat/admin-users-per-org

feat(admin): show users per organisation on org detail page

Author: rubenhensen

src/lib/server/services/admin.ts

@@ -61,18 +61,19 @@ export async function getOrganizationWithRequests(orgId: string) {
 		.where(eq(changeRequests.orgId, orgId))
 		.orderBy(desc(changeRequests.requestedAt));
 
+	const orgUsers = await db
+		.select()
+		.from(users)
+		.where(eq(users.orgId, orgId))
+		.orderBy(users.fullName);
+
 	// Load contact person if set
 	let contactPerson = null;
 	if (orgs[0].contactUserId) {
-		const result = await db
-			.select()
-			.from(users)
-			.where(eq(users.id, orgs[0].contactUserId))
-			.limit(1);
-		contactPerson = result[0] ?? null;
+		contactPerson = orgUsers.find((u) => u.id === orgs[0].contactUserId) ?? null;
 	}
 
-	return { organization: orgs[0], requests, contactPerson };
+	return { organization: orgs[0], requests, contactPerson, users: orgUsers };
 }
 
 export async function approveChangeRequest(

src/routes/(admin)/admin/organizations/[id]/+page.svelte

@@ -40,6 +40,42 @@
 	</div>
 {/if}
 
+<section class="users">
+	<h2>Users <span class="count">({data.users.length})</span></h2>
+	{#if data.users.length === 0}
+		<p class="empty">No users belong to this organisation yet.</p>
+	{:else}
+		<div class="table-wrap">
+			<table>
+				<thead>
+					<tr>
+						<th>Name</th>
+						<th>Email</th>
+						<th>Phone</th>
+						<th>Contact</th>
+					</tr>
+				</thead>
+				<tbody>
+					{#each data.users as u (u.id)}
+						<tr>
+							<td>{u.fullName}</td>
+							<td>{u.email}</td>
+							<td>{u.phone ?? '—'}</td>
+							<td>
+								{#if data.organization.contactUserId === u.id}
+									<span class="badge">Contact person</span>
+								{:else}
+									—
+								{/if}
+							</td>
+						</tr>
+					{/each}
+				</tbody>
+			</table>
+		</div>
+	{/if}
+</section>
+
 {#if data.requests.length > 0}
 	<section class="requests">
 		<h2>Change Requests</h2>
@@ -151,6 +187,18 @@
 
 	.admin-actions { margin-bottom: 2rem; }
 
+	.users {
+		margin-bottom: 2rem;
+		h2 { margin-bottom: 1rem; }
+		.count { font-size: var(--pg-font-size-sm); color: var(--pg-text-secondary); font-weight: var(--pg-font-weight-regular); }
+		.empty { color: var(--pg-text-secondary); font-size: var(--pg-font-size-sm); }
+		.table-wrap { overflow-x: auto; }
+		table { width: 100%; border-collapse: collapse; font-size: var(--pg-font-size-sm); }
+		th, td { text-align: left; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--pg-strong-background); }
+		th { font-size: var(--pg-font-size-xs); color: var(--pg-text-secondary); text-transform: uppercase; font-weight: var(--pg-font-weight-medium); font-family: var(--pg-font-family); }
+		.badge { background: rgba(22, 163, 74, 0.12); color: #16a34a; font-size: var(--pg-font-size-xs); font-weight: var(--pg-font-weight-bold); padding: 3px 10px; border-radius: 100px; text-transform: uppercase; font-family: var(--pg-font-family); }
+	}
+
 	.requests h2 { margin-bottom: 1rem; }
 
 	.request-card {