From f2daea6c39c9d0f7f0aaf3df8a160653e9c85492 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 15 May 2026 18:26:30 +0000
Subject: [PATCH] Add admin users management page with pagination, search, and
 inline username editing

https://claude.ai/code/session_01E4UUQqQedhFP2F5YcBRArs
---
 app/models/user.ts         |  31 ++++-
 app/routes.ts              |   1 +
 app/routes/admin.tsx       |   7 +
 app/routes/admin.users.tsx | 275 +++++++++++++++++++++++++++++++++++++
 4 files changed, 313 insertions(+), 1 deletion(-)
 create mode 100644 app/routes/admin.users.tsx

diff --git a/app/models/user.ts b/app/models/user.ts
index 9c219b6..f44b85f 100644
--- a/app/models/user.ts
+++ b/app/models/user.ts
@@ -1,4 +1,4 @@
-import { eq, inArray, and } from "drizzle-orm";
+import { eq, inArray, and, or, ilike, sql } from "drizzle-orm";
 import { database } from "~/database/context";
 import * as schema from "~/database/schema";
 import { generateFlagConfig } from "~/lib/flag-generator";
@@ -107,6 +107,35 @@ export async function findAllUsers(): Promise<User[]> {
   });
 }
 
+export async function findUsersPaginated(options: {
+  limit: number;
+  offset: number;
+  search?: string;
+}): Promise<{ users: User[]; total: number; hasMore: boolean }> {
+  const db = database();
+  const searchFilter = options.search
+    ? or(
+        ilike(schema.users.email, `%${options.search}%`),
+        ilike(schema.users.username, `%${options.search}%`),
+        ilike(schema.users.displayName, `%${options.search}%`),
+      )
+    : undefined;
+
+  const [users, [{ count }]] = await Promise.all([
+    db.query.users.findMany({
+      where: searchFilter,
+      orderBy: (users, { asc }) => [asc(users.displayName)],
+      limit: options.limit,
+      offset: options.offset,
+    }),
+    db
+      .select({ count: sql<number>`count(*)::int` })
+      .from(schema.users)
+      .where(searchFilter),
+  ]);
+  return { users, total: count, hasMore: options.offset + users.length < count };
+}
+
 /**
  * Returns true if the user currently owns a team in a draft-status season.
  * Used to prevent timezone changes mid-draft.
diff --git a/app/routes.ts b/app/routes.ts
index e8a0b73..9577079 100644
--- a/app/routes.ts
+++ b/app/routes.ts
@@ -148,6 +148,7 @@ export default [
     route("templates/:id", "routes/admin.templates.$id.tsx"),
     route("data-sync", "routes/admin.data-sync.tsx"),
     route("standings-snapshots", "routes/admin.standings-snapshots.tsx"),
+    route("users", "routes/admin.users.tsx"),
   ]),
   route(
     "api/admin/export-sports-data",
diff --git a/app/routes/admin.tsx b/app/routes/admin.tsx
index c233ae3..1fb88f5 100644
--- a/app/routes/admin.tsx
+++ b/app/routes/admin.tsx
@@ -12,6 +12,7 @@ import {
   RefreshCw,
   Award,
   Activity,
+  Users,
 } from "lucide-react";
 
 export function meta(): Route.MetaDescriptors {
@@ -79,6 +80,12 @@ export default function AdminLayout() {
               Season Templates
             </Link>
           </Button>
+          <Button variant="ghost" className="w-full justify-start" asChild>
+            <Link to="/admin/users">
+              <Users className="mr-2 h-4 w-4" />
+              Users
+            </Link>
+          </Button>
           <div className="border-t my-2" />
           <Button variant="ghost" className="w-full justify-start" asChild>
             <Link to="/admin/data-sync">
diff --git a/app/routes/admin.users.tsx b/app/routes/admin.users.tsx
new file mode 100644
index 0000000..72b67fd
--- /dev/null
+++ b/app/routes/admin.users.tsx
@@ -0,0 +1,275 @@
+import { useState } from "react";
+import { Form, redirect, useSearchParams } from "react-router";
+import type { Route } from "./+types/admin.users";
+
+import { auth } from "~/lib/auth.server";
+import {
+  isUserAdmin,
+  findUsersPaginated,
+  findUserByUsername,
+  updateUser,
+  USERNAME_RE,
+} from "~/models/user";
+import { Button } from "~/components/ui/button";
+import { Input } from "~/components/ui/input";
+import { Badge } from "~/components/ui/badge";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "~/components/ui/card";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "~/components/ui/table";
+import { Pencil, Check, X } from "lucide-react";
+
+const PAGE_SIZE = 25;
+
+export function meta(): Route.MetaDescriptors {
+  return [{ title: "Users — Brackt Admin" }];
+}
+
+export async function loader(args: Route.LoaderArgs) {
+  const session = await auth.api.getSession({ headers: args.request.headers });
+  const userId = session?.user.id ?? null;
+  if (!userId) throw redirect("/");
+
+  const isAdmin = await isUserAdmin(userId);
+  if (!isAdmin) throw redirect("/");
+
+  const searchParams = new URL(args.request.url).searchParams;
+  const page = Math.max(0, parseInt(searchParams.get("page") ?? "0", 10) || 0);
+  const search = searchParams.get("search") ?? "";
+
+  const { users, total, hasMore } = await findUsersPaginated({
+    limit: PAGE_SIZE,
+    offset: page * PAGE_SIZE,
+    search: search || undefined,
+  });
+
+  const totalPages = Math.ceil(total / PAGE_SIZE);
+  return { users, page, totalPages, total, hasMore, search };
+}
+
+export async function action(args: Route.ActionArgs) {
+  const session = await auth.api.getSession({ headers: args.request.headers });
+  const userId = session?.user.id ?? null;
+  if (!userId) throw redirect("/");
+
+  const isAdmin = await isUserAdmin(userId);
+  if (!isAdmin) throw redirect("/");
+
+  const formData = await args.request.formData();
+  const intent = formData.get("intent");
+
+  if (intent === "update-username") {
+    const targetUserId = formData.get("userId");
+    const username = formData.get("username");
+
+    if (typeof targetUserId !== "string" || typeof username !== "string") {
+      return { error: "Invalid request" };
+    }
+
+    const trimmed = username.trim();
+
+    if (trimmed !== "" && !USERNAME_RE.test(trimmed)) {
+      return {
+        error:
+          "Username must be 3–30 characters and contain only letters, numbers, underscores, or hyphens.",
+        userId: targetUserId,
+      };
+    }
+
+    if (trimmed !== "") {
+      const existing = await findUserByUsername(trimmed);
+      if (existing && existing.id !== targetUserId) {
+        return { error: "That username is already taken.", userId: targetUserId };
+      }
+    }
+
+    await updateUser(targetUserId, { username: trimmed || null });
+    return { success: true };
+  }
+
+  return {};
+}
+
+export default function AdminUsers({ loaderData, actionData }: Route.ComponentProps) {
+  const { users, page, totalPages, total, search } = loaderData;
+  const [searchParams] = useSearchParams();
+  const [editingId, setEditingId] = useState<string | null>(null);
+  const [editValue, setEditValue] = useState("");
+
+  function startEdit(userId: string, currentUsername: string | null) {
+    setEditingId(userId);
+    setEditValue(currentUsername ?? "");
+  }
+
+  function cancelEdit() {
+    setEditingId(null);
+    setEditValue("");
+  }
+
+  function buildPageUrl(newPage: number) {
+    const p = new URLSearchParams(searchParams);
+    p.set("page", String(newPage));
+    return `?${p.toString()}`;
+  }
+
+  return (
+    <div className="p-8">
+      <div className="mb-6 flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-bold">Users</h1>
+          <p className="text-muted-foreground text-sm mt-1">{total} total users</p>
+        </div>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>All Users</CardTitle>
+          <CardDescription>Search and manage user accounts.</CardDescription>
+          <Form method="get" className="mt-2 flex gap-2">
+            <Input
+              name="search"
+              placeholder="Search by email, username, or display name…"
+              defaultValue={search}
+              className="max-w-sm"
+            />
+            <input type="hidden" name="page" value="0" />
+            <Button type="submit" variant="secondary">
+              Search
+            </Button>
+            {search && (
+              <Button variant="ghost" asChild>
+                <a href="?page=0">Clear</a>
+              </Button>
+            )}
+          </Form>
+        </CardHeader>
+        <CardContent>
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>Email</TableHead>
+                <TableHead>Username</TableHead>
+                <TableHead>Display Name</TableHead>
+                <TableHead>Admin</TableHead>
+                <TableHead>Joined</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {users.length === 0 && (
+                <TableRow>
+                  <TableCell colSpan={5} className="text-center text-muted-foreground py-8">
+                    No users found.
+                  </TableCell>
+                </TableRow>
+              )}
+              {users.map((user) => {
+                const isEditing = editingId === user.id;
+                const hasError = actionData && "error" in actionData && actionData.userId === user.id;
+                return (
+                  <TableRow key={user.id}>
+                    <TableCell className="font-mono text-sm">{user.email}</TableCell>
+                    <TableCell>
+                      {isEditing ? (
+                        <div className="flex flex-col gap-1">
+                          <Form method="post" className="flex items-center gap-1">
+                            <input type="hidden" name="intent" value="update-username" />
+                            <input type="hidden" name="userId" value={user.id} />
+                            <Input
+                              name="username"
+                              value={editValue}
+                              onChange={(e) => setEditValue(e.target.value)}
+                              className="h-7 w-40 text-sm"
+                              autoFocus
+                              placeholder="leave blank to clear"
+                            />
+                            <Button
+                              type="submit"
+                              size="icon"
+                              variant="ghost"
+                              className="h-7 w-7"
+                              title="Save"
+                              onClick={() => setEditingId(null)}
+                            >
+                              <Check className="h-4 w-4" />
+                            </Button>
+                            <Button
+                              type="button"
+                              size="icon"
+                              variant="ghost"
+                              className="h-7 w-7"
+                              title="Cancel"
+                              onClick={cancelEdit}
+                            >
+                              <X className="h-4 w-4" />
+                            </Button>
+                          </Form>
+                          {hasError && (
+                            <p className="text-destructive text-xs">{actionData.error}</p>
+                          )}
+                        </div>
+                      ) : (
+                        <div className="flex items-center gap-1">
+                          <span className="text-sm">{user.username ?? "—"}</span>
+                          <Button
+                            type="button"
+                            size="icon"
+                            variant="ghost"
+                            className="h-6 w-6 opacity-50 hover:opacity-100"
+                            title="Edit username"
+                            onClick={() => startEdit(user.id, user.username)}
+                          >
+                            <Pencil className="h-3 w-3" />
+                          </Button>
+                        </div>
+                      )}
+                    </TableCell>
+                    <TableCell className="text-sm text-muted-foreground">
+                      {user.displayName ?? "—"}
+                    </TableCell>
+                    <TableCell>
+                      {user.isAdmin && <Badge variant="secondary">Admin</Badge>}
+                    </TableCell>
+                    <TableCell className="text-sm text-muted-foreground">
+                      {new Date(user.createdAt).toLocaleDateString()}
+                    </TableCell>
+                  </TableRow>
+                );
+              })}
+            </TableBody>
+          </Table>
+
+          {totalPages > 1 && (
+            <div className="mt-4 flex items-center justify-between">
+              <span className="text-sm text-muted-foreground">
+                Page {page + 1} of {totalPages}
+              </span>
+              <div className="flex gap-2">
+                {page > 0 && (
+                  <Button variant="outline" size="sm" asChild>
+                    <a href={buildPageUrl(page - 1)}>Previous</a>
+                  </Button>
+                )}
+                {page < totalPages - 1 && (
+                  <Button variant="outline" size="sm" asChild>
+                    <a href={buildPageUrl(page + 1)}>Next</a>
+                  </Button>
+                )}
+              </div>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}