Replace demo pages with live app data

src/app/admin/page.tsx

@@ -1,9 +1,11 @@
 import { AppShell } from "@/components/app-shell";
+import { Avatar } from "@/components/avatar";
 import { StatusBadge } from "@/components/status-badge";
 import { SYSTEM_PERMISSIONS } from "@/lib/access";
+import { prisma } from "@/lib/prisma";
 import { requireCurrentUser, userIsAdmin } from "@/lib/session";
 import { requireInitialSetup } from "@/lib/setup";
-import { rooms } from "@/lib/sample-data";
+import Link from "next/link";
 import { redirect } from "next/navigation";
 
 export default async function AdminPage() {
@@ -14,8 +16,29 @@ export default async function AdminPage() {
     redirect("/dashboard");
   }
 
+  const [personalRoom, users, rooms, roles] = await Promise.all([
+    prisma.room.findFirst({ where: { ownerId: user.id }, select: { slug: true } }),
+    prisma.user.findMany({
+      include: { roles: { include: { role: true } }, _count: { select: { ownedRooms: true, roomMembers: true } } },
+      orderBy: { createdAt: "asc" }
+    }),
+    prisma.room.findMany({
+      include: { owner: true, _count: { select: { members: true, mediaSources: true } } },
+      orderBy: { updatedAt: "desc" }
+    }),
+    prisma.role.findMany({
+      include: { _count: { select: { users: true, permissions: true } } },
+      orderBy: { name: "asc" }
+    })
+  ]);
+
   return (
-    <AppShell active="Admin" isAdmin>
+    <AppShell
+      active="Admin"
+      isAdmin
+      roomHref={personalRoom ? `/rooms/${encodeURIComponent(personalRoom.slug)}` : "/dashboard"}
+      userName={user.displayName || user.username}
+    >
       <header className="topbar">
         <div className="title-block">
           <h1>Admin</h1>
@@ -27,7 +50,7 @@ export default async function AdminPage() {
         <section className="panel">
           <div className="panel-header">
             <h2>Rooms</h2>
-            <button className="button primary">Create room</button>
+            <StatusBadge>{rooms.length} total</StatusBadge>
           </div>
           <div className="panel-body">
             <table className="table">
@@ -41,21 +64,69 @@ export default async function AdminPage() {
               </thead>
               <tbody>
                 {rooms.map((room) => (
-                  <tr key={room.name}>
-                    <td>{room.name}</td>
-                    <td>{room.owner}</td>
+                  <tr key={room.id}>
+                    <td>
+                      <Link href={`/rooms/${encodeURIComponent(room.slug)}`}>{room.name}</Link>
+                    </td>
+                    <td>{room.owner?.displayName || room.owner?.username || "Unassigned"}</td>
                     <td>{room.visibility}</td>
-                    <td>{room.status}</td>
+                    <td>{room._count.members + 1} users / {room._count.mediaSources} media</td>
                   </tr>
                 ))}
               </tbody>
             </table>
           </div>
         </section>
+        <section className="panel">
+          <div className="panel-header">
+            <h2>Users</h2>
+            <StatusBadge>{users.length} accounts</StatusBadge>
+          </div>
+          <div className="panel-body">
+            {users.map((account) => (
+              <div className="row" key={account.id}>
+                <div className="row-main">
+                  <Avatar name={account.displayName || account.username} />
+                  <div className="row-title">
+                    <strong>{account.displayName || account.username}</strong>
+                    <span>@{account.username} · {account._count.ownedRooms + account._count.roomMembers} rooms</span>
+                  </div>
+                </div>
+                <div className="status-row">
+                  {account.roles.map((userRole) => (
+                    <StatusBadge key={userRole.roleId} tone={userRole.role.name === "admin" ? "good" : undefined}>
+                      {userRole.role.name}
+                    </StatusBadge>
+                  ))}
+                  {account.roles.length === 0 ? <StatusBadge>user</StatusBadge> : null}
+                </div>
+              </div>
+            ))}
+          </div>
+        </section>
+      </section>
+      <section className="room-layout" style={{ marginTop: 18 }}>
+        <section className="panel">
+          <div className="panel-header">
+            <h2>Roles</h2>
+            <StatusBadge>{roles.length} defined</StatusBadge>
+          </div>
+          <div className="panel-body">
+            {roles.map((role) => (
+              <div className="row" key={role.id}>
+                <div className="row-title">
+                  <strong>{role.name}</strong>
+                  <span>{role.description || `${role.scope.toLowerCase()} role`}</span>
+                </div>
+                <StatusBadge>{role._count.users} users / {role._count.permissions} permissions</StatusBadge>
+              </div>
+            ))}
+          </div>
+        </section>
         <section className="panel">
           <div className="panel-header">
             <h2>Permissions</h2>
-            <StatusBadge>Roles</StatusBadge>
+            <StatusBadge>System</StatusBadge>
           </div>
           <div className="panel-body">
             {SYSTEM_PERMISSIONS.map((permission) => (