Merge pull request #2696 from Fredkiss3/feat/paginate-user-roles-table

feat: paginate users & roles table

docker-compose.pgr.yml

@@ -7,8 +7,8 @@ services:
       POSTGRES_DB: postgres # Default database name
       POSTGRES_USER: postgres # Default user
       POSTGRES_PASSWORD: password # Default password (change for production!)
-    # volumes:
+    volumes:
-    #   - ./config/postgres:/var/lib/postgresql/data
+      - ./config/postgres:/var/lib/postgresql/data
     ports:
       - "5432:5432" # Map host port 5432 to container port 5432
     restart: no

messages/en-US.json

@@ -267,8 +267,11 @@
     "orgMissing": "Organization ID Missing",
     "orgMissingMessage": "Unable to regenerate invitation without an organization ID.",
     "accessUsersManage": "Manage Users",
+    "accessUserManage": "Manage User",
     "accessUsersDescription": "Invite and manage users with access to this organization",
     "accessUsersSearch": "Search users...",
+    "accessUsersRoleFilterCount": "{count, plural, one {# role} other {# roles}}",
+    "accessUsersRoleFilterClear": "Clear role filters",
     "accessUserCreate": "Create User",
     "accessUserRemove": "Remove User",
     "username": "Username",

server/routers/role/listRoles.ts

@@ -3,34 +3,68 @@ import response from "@server/lib/response";
 import logger from "@server/logger";
 import { OpenAPITags, registry } from "@server/openApi";
 import HttpCode from "@server/types/HttpCode";
-import { and, eq, inArray, sql } from "drizzle-orm";
+import { and, asc, desc, eq, inArray, like, sql } from "drizzle-orm";
 import { ActionsEnum } from "@server/auth/actions";
 import { NextFunction, Request, Response } from "express";
 import createHttpError from "http-errors";
 import { object, z } from "zod";
 import { fromError } from "zod-validation-error";
+import type { PaginatedResponse } from "@server/types/Pagination";
 
 const listRolesParamsSchema = z.strictObject({
     orgId: z.string()
 });
 
 const listRolesSchema = z.object({
-    limit: z
+    pageSize: z.coerce
-        .string()
+        .number<string>() // for prettier formatting
+        .int()
+        .positive()
         .optional()
-        .default("1000")
+        .catch(20)
-        .transform(Number)
+        .default(20)
-        .pipe(z.int().nonnegative()),
+        .openapi({
-    offset: z
+            type: "integer",
-        .string()
+            default: 20,
+            description: "Number of items per page"
+        }),
+    page: z.coerce
+        .number<string>() // for prettier formatting
+        .int()
+        .min(0)
         .optional()
-        .default("0")
+        .catch(1)
-        .transform(Number)
+        .default(1)
-        .pipe(z.int().nonnegative())
+        .openapi({
+            type: "integer",
+            default: 1,
+            description: "Page number to retrieve"
+        }),
+    query: z.string().optional(),
+    sort_by: z
+        .enum(["name"])
+        .optional()
+        .catch(undefined)
+        .openapi({
+            type: "string",
+            enum: ["name"],
+            description: "Field to sort by"
+        }),
+    order: z
+        .enum(["asc", "desc"])
+        .optional()
+        .default("asc")
+        .catch("asc")
+        .openapi({
+            type: "string",
+            enum: ["asc", "desc"],
+            default: "asc",
+            description: "Sort order"
+        })
 });
 
-async function queryRoles(orgId: string, limit: number, offset: number) {
+function queryRolesBase() {
-    return await db
+    return db
         .select({
             roleId: roles.roleId,
             orgId: roles.orgId,
@@ -45,20 +79,15 @@ async function queryRoles(orgId: string, limit: number, offset: number) {
             sshUnixGroups: roles.sshUnixGroups
         })
         .from(roles)
-        .leftJoin(orgs, eq(roles.orgId, orgs.orgId))
+        .leftJoin(orgs, eq(roles.orgId, orgs.orgId));
-        .where(eq(roles.orgId, orgId))
+    // .where(eq(roles.orgId, orgId))
-        .limit(limit)
+    // .limit(limit)
-        .offset(offset);
+    // .offset(offset);
 }
 
-export type ListRolesResponse = {
+export type ListRolesResponse = PaginatedResponse<{
-    roles: NonNullable<Awaited<ReturnType<typeof queryRoles>>>;
+    roles: NonNullable<Awaited<ReturnType<typeof queryRolesBase>>>;
-    pagination: {
+}>;
-        total: number;
-        limit: number;
-        offset: number;
-    };
-};
 
 registry.registerPath({
     method: "get",
@@ -88,7 +117,7 @@ export async function listRoles(
             );
         }
 
-        const { limit, offset } = parsedQuery.data;
+        const { page, pageSize, query, sort_by, order } = parsedQuery.data;
 
         const parsedParams = listRolesParamsSchema.safeParse(req.params);
         if (!parsedParams.success) {
@@ -102,14 +131,36 @@ export async function listRoles(
 
         const { orgId } = parsedParams.data;
 
-        const countQuery: any = db
+        const conditions = [and(eq(roles.orgId, orgId))];
-            .select({ count: sql<number>`cast(count(*) as integer)` })
-            .from(roles)
-            .where(eq(roles.orgId, orgId));
 
-        const rolesList = await queryRoles(orgId, limit, offset);
+        if (query) {
-        const totalCountResult = await countQuery;
+            conditions.push(
-        const totalCount = totalCountResult[0].count;
+                like(sql`LOWER(${roles.name})`, "%" + query.toLowerCase() + "%")
+            );
+        }
+
+        const countQuery = db.$count(
+            queryRolesBase()
+                .where(and(...conditions))
+                .as("filtered_roles")
+        );
+
+        const rolesListQuery = queryRolesBase()
+            .where(and(...conditions))
+            .limit(pageSize)
+            .offset(pageSize * (page - 1))
+            .orderBy(
+                sort_by
+                    ? order === "asc"
+                        ? asc(roles[sort_by])
+                        : desc(roles[sort_by])
+                    : asc(roles.name)
+            );
+
+        const [totalCount, rolesList] = await Promise.all([
+            countQuery,
+            rolesListQuery
+        ]);
 
         let rolesWithAllowSsh = rolesList;
         if (rolesList.length > 0) {
@@ -135,8 +186,8 @@ export async function listRoles(
                 roles: rolesWithAllowSsh,
                 pagination: {
                     total: totalCount,
-                    limit,
+                    page,
-                    offset
+                    pageSize
                 }
             },
             success: true,

server/routers/user/adminListUsers.ts

@@ -1,31 +1,98 @@
 import { Request, Response, NextFunction } from "express";
 import { z } from "zod";
-import { db } from "@server/db";
+import { db, idp, users } from "@server/db";
 import response from "@server/lib/response";
 import HttpCode from "@server/types/HttpCode";
 import createHttpError from "http-errors";
-import { sql, eq } from "drizzle-orm";
+import { and, asc, desc, eq, like, or, sql } from "drizzle-orm";
 import logger from "@server/logger";
-import { idp, users } from "@server/db";
 import { fromZodError } from "zod-validation-error";
+import { OpenAPITags, registry } from "@server/openApi";
+import type { PaginatedResponse } from "@server/types/Pagination";
+import { UserType } from "@server/types/UserTypes";
 
 const listUsersSchema = z.strictObject({
-    limit: z
+    pageSize: z.coerce
-        .string()
+        .number<string>()
+        .int()
+        .positive()
         .optional()
-        .default("1000")
+        .catch(20)
-        .transform(Number)
+        .default(20)
-        .pipe(z.int().nonnegative()),
+        .openapi({
-    offset: z
+            type: "integer",
-        .string()
+            default: 20,
+            description: "Number of items per page"
+        }),
+    page: z.coerce
+        .number<string>()
+        .int()
+        .min(0)
         .optional()
-        .default("0")
+        .catch(1)
-        .transform(Number)
+        .default(1)
-        .pipe(z.int().nonnegative())
+        .openapi({
+            type: "integer",
+            default: 1,
+            description: "Page number to retrieve"
+        }),
+    query: z.string().optional(),
+    sort_by: z
+        .enum(["username", "email", "name"])
+        .optional()
+        .catch(undefined)
+        .openapi({
+            type: "string",
+            enum: ["username", "email", "name"],
+            description: "Field to sort by"
+        }),
+    order: z
+        .enum(["asc", "desc"])
+        .optional()
+        .default("asc")
+        .catch("asc")
+        .openapi({
+            type: "string",
+            enum: ["asc", "desc"],
+            default: "asc",
+            description: "Sort order"
+        }),
+    idp_id: z
+        .preprocess(
+            (val) => {
+                if (val === undefined || val === null || val === "") {
+                    return undefined;
+                }
+                if (val === "internal") {
+                    return "internal";
+                }
+                if (typeof val === "string" && /^\d+$/.test(val)) {
+                    return parseInt(val, 10);
+                }
+                return undefined;
+            },
+            z
+                .union([z.literal("internal"), z.number().int().positive()])
+                .optional()
+        )
+        .openapi({
+            description:
+                'Filter by identity provider id, or "internal" for internal users'
+        }),
+    two_factor: z
+        .enum(["true", "false"])
+        .transform((v) => v === "true")
+        .optional()
+        .catch(undefined)
+        .openapi({
+            type: "boolean",
+            description:
+                "Filter by 2FA state matching: enabled if twoFactorEnabled or twoFactorSetupRequested"
+        })
 });
 
-async function queryUsers(limit: number, offset: number) {
+function queryUsersBase() {
-    return await db
+    return db
         .select({
             id: users.userId,
             email: users.email,
@@ -40,17 +107,39 @@ async function queryUsers(limit: number, offset: number) {
             twoFactorSetupRequested: users.twoFactorSetupRequested
         })
         .from(users)
-        .leftJoin(idp, eq(users.idpId, idp.idpId))
+        .leftJoin(idp, eq(users.idpId, idp.idpId));
-        .where(eq(users.serverAdmin, false))
-        .limit(limit)
-        .offset(offset);
 }
 
-export type AdminListUsersResponse = {
+/** Row shape returned by `queryUsersBase()` (matches selected columns + join). */
-    users: NonNullable<Awaited<ReturnType<typeof queryUsers>>>;
+export type AdminListUserRow = {
-    pagination: { total: number; limit: number; offset: number };
+    id: string;
+    email: string | null;
+    username: string;
+    name: string | null;
+    dateCreated: string;
+    serverAdmin: boolean;
+    type: string;
+    idpName: string | null;
+    idpId: number | null;
+    twoFactorEnabled: boolean;
+    twoFactorSetupRequested: boolean | null;
 };
 
+export type AdminListUsersResponse = PaginatedResponse<{
+    users: AdminListUserRow[];
+}>;
+
+registry.registerPath({
+    method: "get",
+    path: "/users",
+    description: "List non–server-admin users (server admin).",
+    tags: [OpenAPITags.User],
+    request: {
+        query: listUsersSchema
+    },
+    responses: {}
+});
+
 export async function adminListUsers(
     req: Request,
     res: Response,
@@ -66,21 +155,96 @@ export async function adminListUsers(
                 )
             );
         }
-        const { limit, offset } = parsedQuery.data;
+        const {
+            page,
+            pageSize,
+            query,
+            sort_by,
+            order,
+            idp_id,
+            two_factor: twoFactorFilter
+        } = parsedQuery.data;
 
-        const allUsers = await queryUsers(limit, offset);
+        if (typeof idp_id === "number") {
+            const idpOk = await db
+                .select({ one: sql`1` })
+                .from(idp)
+                .where(eq(idp.idpId, idp_id))
+                .limit(1);
+            if (idpOk.length === 0) {
+                return next(
+                    createHttpError(
+                        HttpCode.BAD_REQUEST,
+                        "idp_id does not exist"
+                    )
+                );
+            }
+        }
 
-        const [{ count }] = await db
+        const conditions = [eq(users.serverAdmin, false)];
-            .select({ count: sql<number>`count(*)` })
+
-            .from(users);
+        if (query) {
+            const q = "%" + query.toLowerCase() + "%";
+            conditions.push(
+                or(
+                    like(sql`LOWER(${users.username})`, q),
+                    like(sql`LOWER(${users.email})`, q),
+                    like(sql`LOWER(${users.name})`, q)
+                )!
+            );
+        }
+
+        if (idp_id === "internal") {
+            conditions.push(eq(users.type, UserType.Internal));
+        } else if (typeof idp_id === "number") {
+            conditions.push(eq(users.idpId, idp_id));
+        }
+
+        if (typeof twoFactorFilter === "boolean") {
+            if (twoFactorFilter) {
+                conditions.push(
+                    or(
+                        eq(users.twoFactorEnabled, true),
+                        eq(users.twoFactorSetupRequested, true)
+                    )!
+                );
+            } else {
+                conditions.push(
+                    and(
+                        eq(users.twoFactorEnabled, false),
+                        eq(users.twoFactorSetupRequested, false)
+                    )!
+                );
+            }
+        }
+
+        const whereClause = and(...conditions);
+
+        const countQuery = db.$count(
+            queryUsersBase().where(whereClause).as("filtered_admin_users")
+        );
+
+        const userListQuery = queryUsersBase()
+            .where(whereClause)
+            .limit(pageSize)
+            .offset(pageSize * (page - 1))
+            .orderBy(
+                sort_by
+                    ? order === "asc"
+                        ? asc(users[sort_by])
+                        : desc(users[sort_by])
+                    : asc(users.username)
+            );
+
+        const [total, rows] = await Promise.all([countQuery, userListQuery]);
 
         return response<AdminListUsersResponse>(res, {
             data: {
-                users: allUsers,
+                users: rows,
                 pagination: {
-                    total: count,
+                    total,
-                    limit,
+                    page,
-                    offset
+                    pageSize
                 }
             },
             success: true,

server/routers/user/listUsers.ts

@@ -1,36 +1,113 @@
 import { Request, Response, NextFunction } from "express";
 import { z } from "zod";
 import { db, idpOidcConfig } from "@server/db";
-import { idp, roles, userOrgRoles, userOrgs, users } from "@server/db";
+import {
+    idp,
+    idpOrg,
+    roles,
+    userOrgRoles,
+    userOrgs,
+    users
+} from "@server/db";
 import response from "@server/lib/response";
 import HttpCode from "@server/types/HttpCode";
 import createHttpError from "http-errors";
-import { and, eq, inArray, sql } from "drizzle-orm";
+import { and, asc, desc, eq, exists, inArray, like, or, sql } from "drizzle-orm";
 import logger from "@server/logger";
 import { fromZodError } from "zod-validation-error";
 import { OpenAPITags, registry } from "@server/openApi";
+import type { PaginatedResponse } from "@server/types/Pagination";
+import { UserType } from "@server/types/UserTypes";
 
 const listUsersParamsSchema = z.strictObject({
     orgId: z.string()
 });
 
 const listUsersSchema = z.strictObject({
-    limit: z
+    pageSize: z.coerce
-        .string()
+        .number<string>() // for prettier formatting
+        .int()
+        .positive()
         .optional()
-        .default("1000")
+        .catch(20)
-        .transform(Number)
+        .default(20)
-        .pipe(z.int().nonnegative()),
+        .openapi({
-    offset: z
+            type: "integer",
-        .string()
+            default: 20,
+            description: "Number of items per page"
+        }),
+    page: z.coerce
+        .number<string>() // for prettier formatting
+        .int()
+        .min(0)
         .optional()
-        .default("0")
+        .catch(1)
-        .transform(Number)
+        .default(1)
-        .pipe(z.int().nonnegative())
+        .openapi({
+            type: "integer",
+            default: 1,
+            description: "Page number to retrieve"
+        }),
+    query: z.string().optional(),
+    sort_by: z
+        .enum(["username"])
+        .optional()
+        .catch(undefined)
+        .openapi({
+            type: "string",
+            enum: ["username"],
+            description: "Field to sort by"
+        }),
+    order: z
+        .enum(["asc", "desc"])
+        .optional()
+        .default("asc")
+        .catch("asc")
+        .openapi({
+            type: "string",
+            enum: ["asc", "desc"],
+            default: "asc",
+            description: "Sort order"
+        }),
+    idp_id: z
+        .preprocess((val) => {
+            if (val === undefined || val === null || val === "") {
+                return undefined;
+            }
+            if (val === "internal") {
+                return "internal";
+            }
+            if (typeof val === "string" && /^\d+$/.test(val)) {
+                return parseInt(val, 10);
+            }
+            return undefined;
+        }, z.union([z.literal("internal"), z.number().int().positive()]).optional())
+        .openapi({
+            description:
+                'Filter by identity provider id, or "internal" for internal users'
+        }),
+    role_id: z
+        .preprocess((val) => {
+            if (val === undefined || val === null || val === "") {
+                return undefined;
+            }
+            const raw = Array.isArray(val) ? val : [val];
+            const nums = raw
+                .map((v) =>
+                    typeof v === "string" ? parseInt(v, 10) : Number(v)
+                )
+                .filter((n) => Number.isInteger(n) && n > 0);
+            const unique = [...new Set(nums)];
+            return unique.length ? unique : undefined;
+        }, z.array(z.number().int().positive()).max(50).optional())
+        .openapi({
+            description:
+                "Filter users who have any of these role ids in the organization (repeat query param)"
+        })
 });
 
-async function queryUsers(orgId: string, limit: number, offset: number) {
+function queryUsersBase() {
-    const rows = await db
+    return db
         .select({
             id: users.userId,
             email: users.email,
@@ -50,53 +127,19 @@ async function queryUsers(orgId: string, limit: number, offset: number) {
         .from(users)
         .leftJoin(userOrgs, eq(users.userId, userOrgs.userId))
         .leftJoin(idp, eq(users.idpId, idp.idpId))
-        .leftJoin(idpOidcConfig, eq(idpOidcConfig.idpId, idp.idpId))
+        .leftJoin(idpOidcConfig, eq(idpOidcConfig.idpId, idp.idpId));
-        .where(eq(userOrgs.orgId, orgId))
-        .limit(limit)
-        .offset(offset);
-
-    const userIds = rows.map((r) => r.id);
-    const roleRows =
-        userIds.length === 0
-            ? []
-            : await db
-                  .select({
-                      userId: userOrgRoles.userId,
-                      roleId: userOrgRoles.roleId,
-                      roleName: roles.name
-                  })
-                  .from(userOrgRoles)
-                  .leftJoin(roles, eq(userOrgRoles.roleId, roles.roleId))
-                  .where(
-                      and(
-                          eq(userOrgRoles.orgId, orgId),
-                          inArray(userOrgRoles.userId, userIds)
-                      )
-                  );
-
-    const rolesByUser = new Map<
-        string,
-        { roleId: number; roleName: string }[]
-    >();
-    for (const r of roleRows) {
-        const list = rolesByUser.get(r.userId) ?? [];
-        list.push({ roleId: r.roleId, roleName: r.roleName ?? "" });
-        rolesByUser.set(r.userId, list);
-    }
-
-    return rows.map((row) => {
-        const userRoles = rolesByUser.get(row.id) ?? [];
-        return {
-            ...row,
-            roles: userRoles
-        };
-    });
 }
 
-export type ListUsersResponse = {
+export type ListUsersResponse = PaginatedResponse<{
-    users: NonNullable<Awaited<ReturnType<typeof queryUsers>>>;
+    users: Array<
-    pagination: { total: number; limit: number; offset: number };
+        NonNullable<Awaited<ReturnType<typeof queryUsersBase>>>[number] & {
-};
+            roles: Array<{
+                roleId: number;
+                roleName: string;
+            }>;
+        }
+    >;
+}>;
 
 registry.registerPath({
     method: "get",
@@ -125,7 +168,9 @@ export async function listUsers(
                 )
             );
         }
-        const { limit, offset } = parsedQuery.data;
+        const { page, pageSize, sort_by, order, query, idp_id, role_id } =
+            parsedQuery.data;
+        const roleIds = role_id ?? [];
 
         const parsedParams = listUsersParamsSchema.safeParse(req.params);
         if (!parsedParams.success) {
@@ -139,24 +184,154 @@ export async function listUsers(
 
         const { orgId } = parsedParams.data;
 
-        const usersWithRoles = await queryUsers(
+        if (typeof idp_id === "number") {
-            orgId.toString(),
+            const idpOk = await db
-            limit,
+                .select({ one: sql`1` })
-            offset
+                .from(idpOrg)
+                .where(
+                    and(eq(idpOrg.orgId, orgId), eq(idpOrg.idpId, idp_id))
+                )
+                .limit(1);
+            if (idpOk.length === 0) {
+                return next(
+                    createHttpError(
+                        HttpCode.BAD_REQUEST,
+                        "idp_id is not linked to this organization"
+                    )
+                );
+            }
+        }
+
+        if (roleIds.length > 0) {
+            const validRoles = await db
+                .select({ roleId: roles.roleId })
+                .from(roles)
+                .where(
+                    and(eq(roles.orgId, orgId), inArray(roles.roleId, roleIds))
+                );
+            if (validRoles.length !== roleIds.length) {
+                return next(
+                    createHttpError(
+                        HttpCode.BAD_REQUEST,
+                        "One or more role_id values are not valid for this organization"
+                    )
+                );
+            }
+        }
+
+        const conditions = [and(eq(userOrgs.orgId, orgId))];
+
+        if (query) {
+            conditions.push(
+                or(
+                    like(
+                        sql`LOWER(${users.name})`,
+                        "%" + query.toLowerCase() + "%"
+                    ),
+                    like(
+                        sql`LOWER(${users.username})`,
+                        "%" + query.toLowerCase() + "%"
+                    ),
+                    like(
+                        sql`LOWER(${users.email})`,
+                        "%" + query.toLowerCase() + "%"
+                    )
+                )
+            );
+        }
+
+        if (idp_id === "internal") {
+            conditions.push(eq(users.type, UserType.Internal));
+        } else if (typeof idp_id === "number") {
+            conditions.push(eq(users.idpId, idp_id));
+        }
+
+        if (roleIds.length > 0) {
+            conditions.push(
+                exists(
+                    db
+                        .select()
+                        .from(userOrgRoles)
+                        .where(
+                            and(
+                                eq(userOrgRoles.userId, users.userId),
+                                eq(userOrgRoles.orgId, orgId),
+                                inArray(userOrgRoles.roleId, roleIds)
+                            )
+                        )
+                )
+            );
+        }
+
+        const countQuery = db.$count(
+            queryUsersBase()
+                .where(and(...conditions))
+                .as("filtered_users")
         );
 
-        const [{ count }] = await db
+        const userListQuery = queryUsersBase()
-            .select({ count: sql<number>`count(*)` })
+            .where(and(...conditions))
-            .from(userOrgs)
+            .limit(pageSize)
-            .where(eq(userOrgs.orgId, orgId));
+            .offset(pageSize * (page - 1))
+            .orderBy(
+                sort_by
+                    ? order === "asc"
+                        ? asc(users[sort_by])
+                        : desc(users[sort_by])
+                    : asc(users.name)
+            );
+
+        const [total, usersWithoutRoles] = await Promise.all([
+            countQuery,
+            userListQuery
+        ]);
+
+        const userIds = usersWithoutRoles.map((r) => r.id);
+        const roleRows =
+            userIds.length === 0
+                ? []
+                : await db
+                      .select({
+                          userId: userOrgRoles.userId,
+                          roleId: userOrgRoles.roleId,
+                          roleName: roles.name
+                      })
+                      .from(userOrgRoles)
+                      .leftJoin(roles, eq(userOrgRoles.roleId, roles.roleId))
+                      .where(
+                          and(
+                              eq(userOrgRoles.orgId, orgId),
+                              inArray(userOrgRoles.userId, userIds)
+                          )
+                      );
+
+        const rolesByUser = new Map<
+            string,
+            { roleId: number; roleName: string }[]
+        >();
+        for (const r of roleRows) {
+            const list = rolesByUser.get(r.userId) ?? [];
+            list.push({ roleId: r.roleId, roleName: r.roleName ?? "" });
+            rolesByUser.set(r.userId, list);
+        }
+
+        const usersWithRoles: ListUsersResponse["users"] = [];
+
+        for (const user of usersWithoutRoles) {
+            const userRoles = rolesByUser.get(user.id) ?? [];
+            usersWithRoles.push({
+                ...user,
+                roles: userRoles
+            });
+        }
 
         return response<ListUsersResponse>(res, {
             data: {
                 users: usersWithRoles,
                 pagination: {
-                    total: count,
+                    total,
-                    limit,
+                    page,
-                    offset
+                    pageSize
                 }
             },
             success: true,

src/app/[orgId]/settings/access/roles/page.tsx

@@ -16,24 +16,32 @@ export const metadata: Metadata = {
 
 type RolesPageProps = {
     params: Promise<{ orgId: string }>;
+    searchParams: Promise<Record<string, string>>;
 };
 
 export const dynamic = "force-dynamic";
 
 export default async function RolesPage(props: RolesPageProps) {
     const params = await props.params;
+    const searchParams = new URLSearchParams(await props.searchParams);
 
     let roles: ListRolesResponse["roles"] = [];
+    let pagination: ListRolesResponse["pagination"] = {
+        total: 0,
+        page: 1,
+        pageSize: 20
+    };
     let hasInvitations = false;
 
     const res = await internal
         .get<
             AxiosResponse<ListRolesResponse>
-        >(`/org/${params.orgId}/roles`, await authCookieHeader())
+        >(`/org/${params.orgId}/roles?${searchParams.toString()}`, await authCookieHeader())
         .catch((e) => {});
 
     if (res && res.status === 200) {
         roles = res.data.data.roles;
+        pagination = res.data.data.pagination;
     }
 
     const invitationsRes = await internal
@@ -68,7 +76,14 @@ export default async function RolesPage(props: RolesPageProps) {
                 description={t("accessRolesDescription")}
             />
             <OrgProvider org={org}>
-                <RolesTable roles={roleRows} />
+                <RolesTable
+                    roles={roleRows}
+                    rowCount={pagination.total}
+                    pagination={{
+                        pageIndex: pagination.page - 1,
+                        pageSize: pagination.pageSize
+                    }}
+                />
             </OrgProvider>
         </>
     );

src/app/[orgId]/settings/access/users/page.tsx

@@ -1,8 +1,9 @@
 import { internal } from "@app/lib/api";
 import { authCookieHeader } from "@app/lib/api/cookies";
 import { getUserDisplayName } from "@app/lib/getUserDisplayName";
+import type { ListOrgIdpsResponse } from "@server/routers/orgIdp/types";
+import type { ListRolesResponse } from "@server/routers/role/listRoles";
 import { ListUsersResponse } from "@server/routers/user";
-import { AxiosResponse } from "axios";
 import UsersTable, { UserRow } from "@app/components/UsersTable";
 import { GetOrgResponse } from "@server/routers/org";
 import { cache } from "react";
@@ -19,36 +20,73 @@ export const metadata: Metadata = {
 
 type UsersPageProps = {
     params: Promise<{ orgId: string }>;
+    searchParams: Promise<Record<string, string>>;
 };
 
 export const dynamic = "force-dynamic";
 
 export default async function UsersPage(props: UsersPageProps) {
     const params = await props.params;
+    const searchParams = new URLSearchParams(await props.searchParams);
 
-    const getUser = cache(verifySession);
+    const user = await verifySession();
-    const user = await getUser();
-    const t = await getTranslations();
 
     let users: ListUsersResponse["users"] = [];
+    let pagination: ListUsersResponse["pagination"] = {
+        total: 0,
+        page: 1,
+        pageSize: 20
+    };
     let hasInvitations = false;
 
-    const res = await internal
+    const cookieHeader = await authCookieHeader();
-        .get<
-            AxiosResponse<ListUsersResponse>
-        >(`/org/${params.orgId}/users`, await authCookieHeader())
-        .catch((e) => {});
 
-    if (res && res.status === 200) {
+    const [usersRes, idpsRes, rolesRes] = await Promise.all([
-        users = res.data.data.users;
+        internal
+            .get(
+                `/org/${params.orgId}/users?${searchParams.toString()}`,
+                cookieHeader
+            )
+            .catch(() => {}),
+        internal
+            .get(`/org/${params.orgId}/idp?limit=500&offset=0`, cookieHeader)
+            .catch(() => {}),
+        internal
+            .get(`/org/${params.orgId}/roles?pageSize=500&page=1`, cookieHeader)
+            .catch(() => {})
+    ]);
+
+    if (usersRes && usersRes.status === 200) {
+        const list = usersRes.data.data as ListUsersResponse;
+        users = list.users;
+        pagination = list.pagination;
     }
 
+    const t = await getTranslations();
+
+    const orgIdps =
+        idpsRes && idpsRes.status === 200 ? (idpsRes.data.data.idps ?? []) : [];
+    const idpFilterOptions = [
+        { value: "internal", label: t("idpNameInternal") },
+        ...orgIdps.map((i: ListOrgIdpsResponse["idps"][number]) => ({
+            value: String(i.idpId),
+            label: i.name
+        }))
+    ];
+
+    const orgRoles =
+        rolesRes && rolesRes.status === 200
+            ? (rolesRes.data.data.roles ?? [])
+            : [];
+    const roleFilterOptions = orgRoles.map(
+        (r: ListRolesResponse["roles"][number]) => ({
+            value: String(r.roleId),
+            label: r.name
+        })
+    );
+
     const invitationsRes = await internal
-        .get<
+        .get(
-            AxiosResponse<{
-                pagination: { total: number };
-            }>
-        >(
             `/org/${params.orgId}/invitations?limit=1&offset=0`,
             await authCookieHeader()
         )
@@ -61,9 +99,7 @@ export default async function UsersPage(props: UsersPageProps) {
     let org: GetOrgResponse | null = null;
     const getOrg = cache(async () =>
         internal
-            .get<
+            .get(`/org/${params.orgId}`, await authCookieHeader())
-                AxiosResponse<GetOrgResponse>
-            >(`/org/${params.orgId}`, await authCookieHeader())
             .catch((e) => {
                 console.error(e);
             })
@@ -110,7 +146,16 @@ export default async function UsersPage(props: UsersPageProps) {
             />
             <UserProvider user={user!}>
                 <OrgProvider org={org}>
-                    <UsersTable users={userRows} />
+                    <UsersTable
+                        users={userRows}
+                        rowCount={pagination.total}
+                        pagination={{
+                            pageIndex: pagination.page - 1,
+                            pageSize: pagination.pageSize
+                        }}
+                        idpFilterOptions={idpFilterOptions}
+                        roleFilterOptions={roleFilterOptions}
+                    />
                 </OrgProvider>
             </UserProvider>
         </>

src/app/admin/users/AdminUsersTable.tsx

@@ -1,264 +0,0 @@
-"use client";
-
-import { UsersDataTable } from "@app/components/AdminUsersDataTable";
-import { Button } from "@app/components/ui/button";
-import { ArrowRight, ArrowUpDown, MoreHorizontal } from "lucide-react";
-import { useRouter } from "next/navigation";
-import { useState } from "react";
-import ConfirmDeleteDialog from "@app/components/ConfirmDeleteDialog";
-import { toast } from "@app/hooks/useToast";
-import { formatAxiosError } from "@app/lib/api";
-import { createApiClient } from "@app/lib/api";
-import { useEnvContext } from "@app/hooks/useEnvContext";
-import { useTranslations } from "next-intl";
-import {
-    DropdownMenu,
-    DropdownMenuItem,
-    DropdownMenuContent,
-    DropdownMenuTrigger
-} from "@app/components/ui/dropdown-menu";
-import { ExtendedColumnDef } from "@app/components/ui/data-table";
-
-export type GlobalUserRow = {
-    id: string;
-    name: string | null;
-    username: string;
-    email: string | null;
-    type: string;
-    idpId: number | null;
-    idpName: string;
-    dateCreated: string;
-    twoFactorEnabled: boolean | null;
-    twoFactorSetupRequested: boolean | null;
-};
-
-type Props = {
-    users: GlobalUserRow[];
-};
-
-export default function UsersTable({ users }: Props) {
-    const router = useRouter();
-    const t = useTranslations();
-
-    const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
-    const [selected, setSelected] = useState<GlobalUserRow | null>(null);
-    const [rows, setRows] = useState<GlobalUserRow[]>(users);
-
-    const api = createApiClient(useEnvContext());
-
-    const deleteUser = (id: string) => {
-        api.delete(`/user/${id}`)
-            .catch((e) => {
-                console.error(t("userErrorDelete"), e);
-                toast({
-                    variant: "destructive",
-                    title: t("userErrorDelete"),
-                    description: formatAxiosError(e, t("userErrorDelete"))
-                });
-            })
-            .then(() => {
-                router.refresh();
-                setIsDeleteModalOpen(false);
-
-                const newRows = rows.filter((row) => row.id !== id);
-
-                setRows(newRows);
-            });
-    };
-
-    const columns: ExtendedColumnDef<GlobalUserRow>[] = [
-        {
-            accessorKey: "id",
-            friendlyName: "ID",
-            header: ({ column }) => {
-                return (
-                    <Button
-                        variant="ghost"
-                        onClick={() =>
-                            column.toggleSorting(column.getIsSorted() === "asc")
-                        }
-                    >
-                        ID
-                    </Button>
-                );
-            }
-        },
-        {
-            accessorKey: "username",
-            friendlyName: t("username"),
-            header: ({ column }) => {
-                return (
-                    <Button
-                        variant="ghost"
-                        onClick={() =>
-                            column.toggleSorting(column.getIsSorted() === "asc")
-                        }
-                    >
-                        {t("username")}
-                        <ArrowUpDown className="ml-2 h-4 w-4" />
-                    </Button>
-                );
-            }
-        },
-        {
-            accessorKey: "email",
-            friendlyName: t("email"),
-            header: ({ column }) => {
-                return (
-                    <Button
-                        variant="ghost"
-                        onClick={() =>
-                            column.toggleSorting(column.getIsSorted() === "asc")
-                        }
-                    >
-                        {t("email")}
-                        <ArrowUpDown className="ml-2 h-4 w-4" />
-                    </Button>
-                );
-            }
-        },
-        {
-            accessorKey: "name",
-            friendlyName: t("name"),
-            header: ({ column }) => {
-                return (
-                    <Button
-                        variant="ghost"
-                        onClick={() =>
-                            column.toggleSorting(column.getIsSorted() === "asc")
-                        }
-                    >
-                        {t("name")}
-                        <ArrowUpDown className="ml-2 h-4 w-4" />
-                    </Button>
-                );
-            }
-        },
-        {
-            accessorKey: "idpName",
-            friendlyName: t("identityProvider"),
-            header: ({ column }) => {
-                return (
-                    <Button
-                        variant="ghost"
-                        onClick={() =>
-                            column.toggleSorting(column.getIsSorted() === "asc")
-                        }
-                    >
-                        {t("identityProvider")}
-                        <ArrowUpDown className="ml-2 h-4 w-4" />
-                    </Button>
-                );
-            }
-        },
-        {
-            accessorKey: "twoFactorEnabled",
-            friendlyName: t("twoFactor"),
-            header: ({ column }) => {
-                return (
-                    <Button
-                        variant="ghost"
-                        onClick={() =>
-                            column.toggleSorting(column.getIsSorted() === "asc")
-                        }
-                    >
-                        {t("twoFactor")}
-                        <ArrowUpDown className="ml-2 h-4 w-4" />
-                    </Button>
-                );
-            },
-            cell: ({ row }) => {
-                const userRow = row.original;
-
-                return (
-                    <div className="flex flex-row items-center gap-2">
-                        <span>
-                            {userRow.twoFactorEnabled ||
-                            userRow.twoFactorSetupRequested ? (
-                                <span className="text-green-500">
-                                    {t("enabled")}
-                                </span>
-                            ) : (
-                                <span>{t("disabled")}</span>
-                            )}
-                        </span>
-                    </div>
-                );
-            }
-        },
-        {
-            id: "actions",
-            header: () => <span className="p-3">{t("actions")}</span>,
-            cell: ({ row }) => {
-                const r = row.original;
-                return (
-                    <>
-                        <div className="flex items-center gap-2">
-                            <Button
-                                variant={"outline"}
-                                onClick={() => {
-                                    router.push(`/admin/users/${r.id}`);
-                                }}
-                            >
-                                {t("edit")}
-                                <ArrowRight className="ml-2 w-4 h-4" />
-                            </Button>
-                            <DropdownMenu>
-                                <DropdownMenuTrigger asChild>
-                                    <Button
-                                        variant="ghost"
-                                        className="h-8 w-8 p-0"
-                                    >
-                                        <span className="sr-only">
-                                            Open menu
-                                        </span>
-                                        <MoreHorizontal className="h-4 w-4" />
-                                    </Button>
-                                </DropdownMenuTrigger>
-                                <DropdownMenuContent align="end">
-                                    <DropdownMenuItem
-                                        onClick={() => {
-                                            setSelected(r);
-                                            setIsDeleteModalOpen(true);
-                                        }}
-                                    >
-                                        {t("delete")}
-                                    </DropdownMenuItem>
-                                </DropdownMenuContent>
-                            </DropdownMenu>
-                        </div>
-                    </>
-                );
-            }
-        }
-    ];
-
-    return (
-        <>
-            {selected && (
-                <ConfirmDeleteDialog
-                    open={isDeleteModalOpen}
-                    setOpen={(val) => {
-                        setIsDeleteModalOpen(val);
-                        setSelected(null);
-                    }}
-                    dialog={
-                        <div className="space-y-2">
-                            <p>{t("userQuestionRemove")}</p>
-
-                            <p>{t("userMessageRemove")}</p>
-                        </div>
-                    }
-                    buttonText={t("userDeleteConfirm")}
-                    onConfirm={async () => deleteUser(selected!.id)}
-                    string={
-                        selected.email || selected.name || selected.username
-                    }
-                    title={t("userDeleteServer")}
-                />
-            )}
-
-            <UsersDataTable columns={columns} data={rows} />
-        </>
-    );
-}

src/app/admin/users/page.tsx

@@ -1,33 +1,70 @@
 import { internal } from "@app/lib/api";
 import { authCookieHeader } from "@app/lib/api/cookies";
-import { AxiosResponse } from "axios";
 import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
-import { AdminListUsersResponse } from "@server/routers/user/adminListUsers";
+import type { AdminListUsersResponse } from "@server/routers/user/adminListUsers";
+import type { ListIdpsResponse } from "@server/routers/idp/listIdps";
 import UsersTable, { GlobalUserRow } from "@app/components/AdminUsersTable";
 import { Alert, AlertDescription, AlertTitle } from "@app/components/ui/alert";
 import { InfoIcon } from "lucide-react";
 import { getTranslations } from "next-intl/server";
 
-type PageProps = {
+/** API JSON body shape for `response<T>()` handlers (see `server/lib/response.ts`). */
-    params: Promise<{ orgId: string }>;
+type ApiPayload<T> = {
+    data: T;
+    success: boolean;
+    error: boolean;
+    message: string;
+    status: number;
+};
+
+type AdminUsersPageProps = {
+    searchParams: Promise<Record<string, string>>;
 };
 
 export const dynamic = "force-dynamic";
 
-export default async function UsersPage(props: PageProps) {
+export default async function UsersPage(props: AdminUsersPageProps) {
+    const searchParams = new URLSearchParams(await props.searchParams);
+    const cookieHeader = await authCookieHeader();
+
     let rows: AdminListUsersResponse["users"] = [];
-    try {
+    let pagination: AdminListUsersResponse["pagination"] = {
-        const res = await internal.get<AxiosResponse<AdminListUsersResponse>>(
+        total: 0,
-            `/users`,
+        page: 1,
-            await authCookieHeader()
+        pageSize: 20
-        );
+    };
-        rows = res.data.data.users;
+
-    } catch (e) {
+    const [usersRes, idpsRes] = await Promise.all([
-        console.error(e);
+        internal
+            .get<
+                ApiPayload<AdminListUsersResponse>
+            >(`/users?${searchParams.toString()}`, cookieHeader)
+            .catch(() => {}),
+        internal
+            .get<
+                ApiPayload<ListIdpsResponse>
+            >(`/idp?limit=500&offset=0`, cookieHeader)
+            .catch(() => {})
+    ]);
+
+    if (usersRes && usersRes.status === 200) {
+        const list = usersRes.data.data;
+        rows = list.users;
+        pagination = list.pagination;
     }
 
     const t = await getTranslations();
 
+    const globalIdps =
+        idpsRes && idpsRes.status === 200 ? (idpsRes.data.data.idps ?? []) : [];
+    const idpFilterOptions = [
+        { value: "internal", label: t("idpNameInternal") },
+        ...globalIdps.map((i: ListIdpsResponse["idps"][number]) => ({
+            value: String(i.idpId),
+            label: i.name
+        }))
+    ];
+
     const userRows: GlobalUserRow[] = rows.map((row) => {
         return {
             id: row.id,
@@ -59,7 +96,15 @@ export default async function UsersPage(props: PageProps) {
                     {t("userAbountDescription")}
                 </AlertDescription>
             </Alert>
-            <UsersTable users={userRows} />
+            <UsersTable
+                users={userRows}
+                rowCount={pagination.total}
+                pagination={{
+                    pageIndex: pagination.page - 1,
+                    pageSize: pagination.pageSize
+                }}
+                idpFilterOptions={idpFilterOptions}
+            />
         </>
     );
 }

src/components/AdminUsersDataTable.tsx

@@ -1,37 +0,0 @@
-"use client";
-
-import { ColumnDef } from "@tanstack/react-table";
-import { DataTable } from "@app/components/ui/data-table";
-import { useTranslations } from "next-intl";
-
-interface DataTableProps<TData, TValue> {
-    columns: ColumnDef<TData, TValue>[];
-    data: TData[];
-    onRefresh?: () => void;
-    isRefreshing?: boolean;
-}
-
-export function UsersDataTable<TData, TValue>({
-    columns,
-    data,
-    onRefresh,
-    isRefreshing
-}: DataTableProps<TData, TValue>) {
-    const t = useTranslations();
-
-    return (
-        <DataTable
-            columns={columns}
-            data={data}
-            persistPageSize="userServer-table"
-            title={t("userServer")}
-            searchPlaceholder={t("userSearch")}
-            searchColumn="email"
-            onRefresh={onRefresh}
-            isRefreshing={isRefreshing}
-            enableColumnVisibility={true}
-            stickyLeftColumn="username"
-            stickyRightColumn="actions"
-        />
-    );
-}

src/components/AdminUsersTable.tsx

@@ -1,19 +1,31 @@
 "use client";
 
-import { ColumnDef } from "@tanstack/react-table";
-import { ExtendedColumnDef } from "@app/components/ui/data-table";
-import { UsersDataTable } from "@app/components/AdminUsersDataTable";
-import { Button } from "@app/components/ui/button";
-import { ArrowRight, ArrowUpDown, MoreHorizontal } from "lucide-react";
-import { useRouter } from "next/navigation";
-import { useState, useEffect } from "react";
 import ConfirmDeleteDialog from "@app/components/ConfirmDeleteDialog";
-import { toast } from "@app/hooks/useToast";
+import { ColumnFilterButton } from "@app/components/ColumnFilterButton";
-import { formatAxiosError } from "@app/lib/api";
+import { Button } from "@app/components/ui/button";
-import { createApiClient } from "@app/lib/api";
+import {
-import { getUserDisplayName } from "@app/lib/getUserDisplayName";
+    ControlledDataTable,
+    type ExtendedColumnDef
+} from "@app/components/ui/controlled-data-table";
 import { useEnvContext } from "@app/hooks/useEnvContext";
+import { useNavigationContext } from "@app/hooks/useNavigationContext";
+import { toast } from "@app/hooks/useToast";
+import { createApiClient, formatAxiosError } from "@app/lib/api";
+import { getUserDisplayName } from "@app/lib/getUserDisplayName";
+import { getNextSortOrder, getSortDirection } from "@app/lib/sortColumn";
+import { type PaginationState } from "@tanstack/react-table";
+import {
+    ArrowDown01Icon,
+    ArrowRight,
+    ArrowUp10Icon,
+    ChevronsUpDownIcon,
+    MoreHorizontal
+} from "lucide-react";
 import { useTranslations } from "next-intl";
+import { useRouter } from "next/navigation";
+import { useState, useTransition } from "react";
+import { useDebouncedCallback } from "use-debounce";
+import z from "zod";
 import {
     DropdownMenu,
     DropdownMenuItem,
@@ -31,7 +43,6 @@ import {
     CredenzaClose
 } from "@app/components/Credenza";
 import CopyToClipboard from "@app/components/CopyToClipboard";
-import { AxiosResponse } from "axios";
 
 export type GlobalUserRow = {
     id: string;
@@ -44,10 +55,16 @@ export type GlobalUserRow = {
     dateCreated: string;
     twoFactorEnabled: boolean | null;
     twoFactorSetupRequested: boolean | null;
+    serverAdmin?: boolean;
 };
 
+type FilterOption = { value: string; label: string };
+
 type Props = {
     users: GlobalUserRow[];
+    pagination: PaginationState;
+    rowCount: number;
+    idpFilterOptions: FilterOption[];
 };
 
 type AdminGeneratePasswordResetCodeResponse = {
@@ -56,74 +73,103 @@ type AdminGeneratePasswordResetCodeResponse = {
     url: string;
 };
 
-export default function UsersTable({ users }: Props) {
+export default function UsersTable({
+    users,
+    pagination,
+    rowCount,
+    idpFilterOptions
+}: Props) {
     const router = useRouter();
     const t = useTranslations();
+    const api = createApiClient(useEnvContext());
 
     const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
     const [selected, setSelected] = useState<GlobalUserRow | null>(null);
-    const [rows, setRows] = useState<GlobalUserRow[]>(users);
-
-    const api = createApiClient(useEnvContext());
-
-    const [isRefreshing, setIsRefreshing] = useState(false);
     const [isPasswordResetCodeDialogOpen, setIsPasswordResetCodeDialogOpen] =
         useState(false);
     const [passwordResetCodeData, setPasswordResetCodeData] =
         useState<AdminGeneratePasswordResetCodeResponse | null>(null);
     const [isGeneratingCode, setIsGeneratingCode] = useState(false);
 
-    // Update local state when props change (e.g., after refresh)
+    const [isRefreshing, startTransition] = useTransition();
-    useEffect(() => {
+    const {
-        setRows(users);
+        navigate: filter,
-    }, [users]);
+        isNavigating: isFiltering,
+        searchParams,
+        pathname
+    } = useNavigationContext();
+
+    const idpIdParamSchema = z
+        .union([z.literal("internal"), z.string().regex(/^\d+$/)])
+        .optional()
+        .catch(undefined);
+
+    const twoFactorFilterSchema = z
+        .enum(["true", "false"])
+        .optional()
+        .catch(undefined);
+
+    function handleFilterChange(
+        column: string,
+        value: string | undefined | null
+    ) {
+        const sp = new URLSearchParams(searchParams);
+        sp.delete(column);
+        sp.delete("page");
+
+        if (value) {
+            sp.set(column, value);
+        }
+        startTransition(() => router.push(`${pathname}?${sp.toString()}`));
+    }
 
     const refreshData = async () => {
-        console.log("Data refreshed");
+        startTransition(async () => {
-        setIsRefreshing(true);
+            try {
-        try {
+                await new Promise((resolve) => setTimeout(resolve, 200));
-            await new Promise((resolve) => setTimeout(resolve, 200));
+                router.refresh();
-            router.refresh();
+            } catch (error) {
-        } catch (error) {
+                toast({
-            toast({
+                    title: t("error"),
-                title: t("error"),
+                    description: t("refreshError"),
-                description: t("refreshError"),
+                    variant: "destructive"
-                variant: "destructive"
+                });
-            });
+            }
-        } finally {
+        });
-            setIsRefreshing(false);
-        }
     };
 
     const deleteUser = (id: string) => {
-        api.delete(`/user/${id}`)
+        startTransition(() => {
-            .catch((e) => {
+            void api
-                console.error(t("userErrorDelete"), e);
+                .delete(`/user/${id}`)
-                toast({
+                .catch((e) => {
-                    variant: "destructive",
+                    console.error(t("userErrorDelete"), e);
-                    title: t("userErrorDelete"),
+                    toast({
-                    description: formatAxiosError(e, t("userErrorDelete"))
+                        variant: "destructive",
+                        title: t("userErrorDelete"),
+                        description: formatAxiosError(e, t("userErrorDelete"))
+                    });
+                })
+                .then(() => {
+                    router.refresh();
+                    setIsDeleteModalOpen(false);
+                    setSelected(null);
                 });
-            })
+        });
-            .then(() => {
-                router.refresh();
-                setIsDeleteModalOpen(false);
-
-                const newRows = rows.filter((row) => row.id !== id);
-
-                setRows(newRows);
-            });
     };
 
     const generatePasswordResetCode = async (userId: string) => {
         setIsGeneratingCode(true);
         try {
-            const res = await api.post<
+            const res = await api.post(
-                AxiosResponse<AdminGeneratePasswordResetCodeResponse>
+                `/user/${userId}/generate-password-reset-code`
-            >(`/user/${userId}/generate-password-reset-code`);
+            );
 
-            if (res.data?.data) {
+            const envelope = res.data as {
-                setPasswordResetCodeData(res.data.data);
+                data?: AdminGeneratePasswordResetCodeResponse;
+            };
+            if (envelope?.data) {
+                setPasswordResetCodeData(envelope.data);
                 setIsPasswordResetCodeDialogOpen(true);
             }
         } catch (e) {
@@ -138,37 +184,55 @@ export default function UsersTable({ users }: Props) {
         }
     };
 
+    function toggleSort(column: string) {
+        const newSearch = getNextSortOrder(column, searchParams);
+        filter({
+            searchParams: newSearch
+        });
+    }
+
+    const handlePaginationChange = (newPage: PaginationState) => {
+        searchParams.set("page", (newPage.pageIndex + 1).toString());
+        searchParams.set("pageSize", newPage.pageSize.toString());
+        filter({
+            searchParams
+        });
+    };
+
+    const handleSearchChange = useDebouncedCallback((query: string) => {
+        searchParams.set("query", query);
+        searchParams.delete("page");
+        filter({
+            searchParams
+        });
+    }, 300);
+
     const columns: ExtendedColumnDef<GlobalUserRow>[] = [
         {
             accessorKey: "id",
             friendlyName: "ID",
-            header: ({ column }) => {
+            header: () => <span className="p-3">ID</span>
-                return (
-                    <Button
-                        variant="ghost"
-                        onClick={() =>
-                            column.toggleSorting(column.getIsSorted() === "asc")
-                        }
-                    >
-                        ID
-                    </Button>
-                );
-            }
         },
         {
             accessorKey: "username",
             enableHiding: false,
             friendlyName: t("username"),
-            header: ({ column }) => {
+            header: () => {
+                const sortOrder = getSortDirection("username", searchParams);
+                const Icon =
+                    sortOrder === "asc"
+                        ? ArrowDown01Icon
+                        : sortOrder === "desc"
+                          ? ArrowUp10Icon
+                          : ChevronsUpDownIcon;
                 return (
                     <Button
                         variant="ghost"
-                        onClick={() =>
+                        className="p-3"
-                            column.toggleSorting(column.getIsSorted() === "asc")
+                        onClick={() => toggleSort("username")}
-                        }
                     >
                         {t("username")}
-                        <ArrowUpDown className="ml-2 h-4 w-4" />
+                        <Icon className="ml-2 h-4 w-4" />
                     </Button>
                 );
             }
@@ -176,16 +240,22 @@ export default function UsersTable({ users }: Props) {
         {
             accessorKey: "email",
             friendlyName: t("email"),
-            header: ({ column }) => {
+            header: () => {
+                const sortOrder = getSortDirection("email", searchParams);
+                const Icon =
+                    sortOrder === "asc"
+                        ? ArrowDown01Icon
+                        : sortOrder === "desc"
+                          ? ArrowUp10Icon
+                          : ChevronsUpDownIcon;
                 return (
                     <Button
                         variant="ghost"
-                        onClick={() =>
+                        className="p-3"
-                            column.toggleSorting(column.getIsSorted() === "asc")
+                        onClick={() => toggleSort("email")}
-                        }
                     >
                         {t("email")}
-                        <ArrowUpDown className="ml-2 h-4 w-4" />
+                        <Icon className="ml-2 h-4 w-4" />
                     </Button>
                 );
             }
@@ -193,16 +263,22 @@ export default function UsersTable({ users }: Props) {
         {
             accessorKey: "name",
             friendlyName: t("name"),
-            header: ({ column }) => {
+            header: () => {
+                const sortOrder = getSortDirection("name", searchParams);
+                const Icon =
+                    sortOrder === "asc"
+                        ? ArrowDown01Icon
+                        : sortOrder === "desc"
+                          ? ArrowUp10Icon
+                          : ChevronsUpDownIcon;
                 return (
                     <Button
                         variant="ghost"
-                        onClick={() =>
+                        className="p-3"
-                            column.toggleSorting(column.getIsSorted() === "asc")
+                        onClick={() => toggleSort("name")}
-                        }
                     >
                         {t("name")}
-                        <ArrowUpDown className="ml-2 h-4 w-4" />
+                        <Icon className="ml-2 h-4 w-4" />
                     </Button>
                 );
             }
@@ -210,39 +286,45 @@ export default function UsersTable({ users }: Props) {
         {
             accessorKey: "idpName",
             friendlyName: t("identityProvider"),
-            header: ({ column }) => {
+            header: () => (
-                return (
+                <ColumnFilterButton
-                    <Button
+                    options={idpFilterOptions}
-                        variant="ghost"
+                    selectedValue={idpIdParamSchema.parse(
-                        onClick={() =>
+                        searchParams.get("idp_id") ?? undefined
-                            column.toggleSorting(column.getIsSorted() === "asc")
+                    )}
-                        }
+                    onValueChange={(value) =>
-                    >
+                        handleFilterChange("idp_id", value)
-                        {t("identityProvider")}
+                    }
-                        <ArrowUpDown className="ml-2 h-4 w-4" />
+                    searchPlaceholder={t("searchPlaceholder")}
-                    </Button>
+                    emptyMessage={t("emptySearchOptions")}
-                );
+                    label={t("identityProvider")}
-            }
+                    className="p-3"
+                />
+            )
         },
         {
             accessorKey: "twoFactorEnabled",
             friendlyName: t("twoFactor"),
-            header: ({ column }) => {
+            header: () => (
-                return (
+                <ColumnFilterButton
-                    <Button
+                    options={[
-                        variant="ghost"
+                        { value: "true", label: t("enabled") },
-                        onClick={() =>
+                        { value: "false", label: t("disabled") }
-                            column.toggleSorting(column.getIsSorted() === "asc")
+                    ]}
-                        }
+                    selectedValue={twoFactorFilterSchema.parse(
-                    >
+                        searchParams.get("two_factor") ?? undefined
-                        {t("twoFactor")}
+                    )}
-                        <ArrowUpDown className="ml-2 h-4 w-4" />
+                    onValueChange={(value) =>
-                    </Button>
+                        handleFilterChange("two_factor", value)
-                );
+                    }
-            },
+                    searchPlaceholder={t("searchPlaceholder")}
+                    emptyMessage={t("emptySearchOptions")}
+                    label={t("twoFactor")}
+                    className="p-3"
+                />
+            ),
             cell: ({ row }) => {
                 const userRow = row.original;
-
                 return (
                     <div className="flex flex-row items-center gap-2">
                         <span>
@@ -277,8 +359,11 @@ export default function UsersTable({ users }: Props) {
                             <DropdownMenuContent align="end">
                                 {r.type === "internal" && (
                                     <DropdownMenuItem
+                                        disabled={isGeneratingCode}
                                         onClick={() => {
-                                            generatePasswordResetCode(r.id);
+                                            void generatePasswordResetCode(
+                                                r.id
+                                            );
                                         }}
                                     >
                                         {t("generatePasswordResetCode")}
@@ -350,11 +435,21 @@ export default function UsersTable({ users }: Props) {
                 />
             )}
 
-            <UsersDataTable
+            <ControlledDataTable
                 columns={columns}
-                data={rows}
+                rows={users}
+                tableId="admin-users-table"
+                searchPlaceholder={t("userSearch")}
+                pagination={pagination}
+                onPaginationChange={handlePaginationChange}
+                searchQuery={searchParams.get("query")?.toString()}
+                onSearch={handleSearchChange}
                 onRefresh={refreshData}
-                isRefreshing={isRefreshing}
+                isRefreshing={isRefreshing || isFiltering}
+                rowCount={rowCount}
+                enableColumnVisibility
+                stickyLeftColumn="username"
+                stickyRightColumn="actions"
             />
 
             <Credenza

src/components/ColumnMultiFilterButton.tsx

@@ -0,0 +1,146 @@
+"use client";
+
+import { useMemo, useState } from "react";
+import { useTranslations } from "next-intl";
+import { Button } from "@app/components/ui/button";
+import {
+    Popover,
+    PopoverContent,
+    PopoverTrigger
+} from "@app/components/ui/popover";
+import {
+    Command,
+    CommandEmpty,
+    CommandGroup,
+    CommandInput,
+    CommandItem,
+    CommandList
+} from "@app/components/ui/command";
+import { CheckIcon, Funnel } from "lucide-react";
+import { cn } from "@app/lib/cn";
+import { Badge } from "./ui/badge";
+
+type FilterOption = {
+    value: string;
+    label: string;
+};
+
+type ColumnMultiFilterButtonProps = {
+    options: FilterOption[];
+    selectedValues: string[];
+    onSelectedValuesChange: (values: string[]) => void;
+    searchPlaceholder?: string;
+    emptyMessage?: string;
+    className?: string;
+    label: string;
+};
+
+export function ColumnMultiFilterButton({
+    options,
+    selectedValues,
+    onSelectedValuesChange,
+    searchPlaceholder = "Search...",
+    emptyMessage = "No options found",
+    className,
+    label
+}: ColumnMultiFilterButtonProps) {
+    const [open, setOpen] = useState(false);
+    const t = useTranslations();
+
+    const selectedSet = useMemo(
+        () => new Set(selectedValues),
+        [selectedValues]
+    );
+
+    const summary = useMemo(() => {
+        if (selectedValues.length === 0) {
+            return null;
+        }
+        if (selectedValues.length === 1) {
+            return (
+                options.find((o) => o.value === selectedValues[0])?.label ??
+                selectedValues[0]
+            );
+        }
+        return t("accessUsersRoleFilterCount", {
+            count: selectedValues.length
+        });
+    }, [selectedValues, options, t]);
+
+    function toggle(value: string) {
+        const next = selectedSet.has(value)
+            ? selectedValues.filter((v) => v !== value)
+            : [...selectedValues, value];
+        onSelectedValuesChange(next);
+    }
+
+    return (
+        <Popover open={open} onOpenChange={setOpen}>
+            <PopoverTrigger asChild>
+                <Button
+                    variant="ghost"
+                    role="combobox"
+                    aria-expanded={open}
+                    className={cn(
+                        "justify-between text-sm h-8 px-2",
+                        selectedValues.length === 0 && "text-muted-foreground",
+                        className
+                    )}
+                >
+                    <div className="flex items-center gap-2 min-w-0">
+                        <span className="shrink-0">{label}</span>
+                        <Funnel className="size-4 flex-none shrink-0" />
+                        {summary && (
+                            <Badge
+                                className="truncate max-w-[10rem]"
+                                variant="secondary"
+                            >
+                                {summary}
+                            </Badge>
+                        )}
+                    </div>
+                </Button>
+            </PopoverTrigger>
+            <PopoverContent className="p-0 w-50" align="start">
+                <Command>
+                    <CommandInput placeholder={searchPlaceholder} />
+                    <CommandList>
+                        <CommandEmpty>{emptyMessage}</CommandEmpty>
+                        <CommandGroup>
+                            {selectedValues.length > 0 && (
+                                <CommandItem
+                                    onSelect={() => {
+                                        onSelectedValuesChange([]);
+                                        setOpen(false);
+                                    }}
+                                    className="text-muted-foreground"
+                                >
+                                    {t("accessUsersRoleFilterClear")}
+                                </CommandItem>
+                            )}
+                            {options.map((option) => (
+                                <CommandItem
+                                    key={option.value}
+                                    value={option.label}
+                                    onSelect={() => {
+                                        toggle(option.value);
+                                    }}
+                                >
+                                    <CheckIcon
+                                        className={cn(
+                                            "mr-2 h-4 w-4",
+                                            selectedSet.has(option.value)
+                                                ? "opacity-100"
+                                                : "opacity-0"
+                                        )}
+                                    />
+                                    {option.label}
+                                </CommandItem>
+                            ))}
+                        </CommandGroup>
+                    </CommandList>
+                </Command>
+            </PopoverContent>
+        </Popover>
+    );
+}

src/components/InternalResourceForm.tsx

@@ -1066,7 +1066,7 @@ export function InternalResourceForm({
                                                             ]
                                                         )
                                                     }
-                                                    enableAutocomplete={true}
+                                                    enableAutocomplete
                                                     autocompleteOptions={
                                                         allRoles
                                                     }

src/components/RolesDataTable.tsx

@@ -1,41 +0,0 @@
-"use client";
-
-import { ColumnDef } from "@tanstack/react-table";
-import { DataTable } from "@app/components/ui/data-table";
-import { useTranslations } from "next-intl";
-
-interface DataTableProps<TData, TValue> {
-    columns: ColumnDef<TData, TValue>[];
-    data: TData[];
-    createRole?: () => void;
-    onRefresh?: () => void;
-    isRefreshing?: boolean;
-}
-
-export function RolesDataTable<TData, TValue>({
-    columns,
-    data,
-    createRole,
-    onRefresh,
-    isRefreshing
-}: DataTableProps<TData, TValue>) {
-    const t = useTranslations();
-
-    return (
-        <DataTable
-            columns={columns}
-            data={data}
-            persistPageSize="roles-table"
-            title={t("roles")}
-            searchPlaceholder={t("accessRolesSearch")}
-            searchColumn="name"
-            onAdd={createRole}
-            onRefresh={onRefresh}
-            isRefreshing={isRefreshing}
-            addButtonText={t("accessRolesAdd")}
-            enableColumnVisibility={true}
-            stickyLeftColumn="name"
-            stickyRightColumn="actions"
-        />
-    );
-}

src/components/RolesTable.tsx

@@ -2,40 +2,60 @@
 
 import CreateRoleForm from "@app/components/CreateRoleForm";
 import DeleteRoleForm from "@app/components/DeleteRoleForm";
-import { RolesDataTable } from "@app/components/RolesDataTable";
 import { Button } from "@app/components/ui/button";
 import { ExtendedColumnDef } from "@app/components/ui/data-table";
+import { useNavigationContext } from "@app/hooks/useNavigationContext";
 import { toast } from "@app/hooks/useToast";
+import { getNextSortOrder, getSortDirection } from "@app/lib/sortColumn";
 import { Role } from "@server/db";
-import { ArrowUpDown, MoreHorizontal } from "lucide-react";
+import type { PaginationState } from "@tanstack/react-table";
+import {
+    ArrowDown01Icon,
+    ArrowUp10Icon,
+    ChevronsUpDownIcon,
+    MoreHorizontal
+} from "lucide-react";
 import { useTranslations } from "next-intl";
 import { useRouter } from "next/navigation";
 import { useState, useTransition } from "react";
+import { useDebouncedCallback } from "use-debounce";
+import EditRoleForm from "./EditRoleForm";
+import { ControlledDataTable } from "./ui/controlled-data-table";
 import {
     DropdownMenu,
-    DropdownMenuTrigger,
     DropdownMenuContent,
-    DropdownMenuItem
+    DropdownMenuItem,
+    DropdownMenuTrigger
 } from "./ui/dropdown-menu";
-import EditRoleForm from "./EditRoleForm";
 
 export type RoleRow = Role;
 
 type RolesTableProps = {
     roles: RoleRow[];
+    pagination: PaginationState;
+    rowCount: number;
 };
 
-export default function UsersTable({ roles }: RolesTableProps) {
+export default function UsersTable({
+    roles,
+    pagination,
+    rowCount
+}: RolesTableProps) {
     const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
     const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
     const [editingRole, setEditingRole] = useState<RoleRow | null>(null);
     const [isEditDialogOpen, setIsEditDialogOpen] = useState(false);
     const router = useRouter();
+    const [isRefreshing, startTransition] = useTransition();
+    const {
+        navigate: filter,
+        isNavigating: isFiltering,
+        searchParams
+    } = useNavigationContext();
 
     const [roleToRemove, setRoleToRemove] = useState<RoleRow | null>(null);
 
     const t = useTranslations();
-    const [isRefreshing, startTransition] = useTransition();
 
     const refreshData = async () => {
         console.log("Data refreshed");
@@ -56,15 +76,17 @@ export default function UsersTable({ roles }: RolesTableProps) {
             enableHiding: false,
             friendlyName: t("name"),
             header: ({ column }) => {
+                const nameOrder = getSortDirection("name", searchParams);
+                const Icon =
+                    nameOrder === "asc"
+                        ? ArrowDown01Icon
+                        : nameOrder === "desc"
+                          ? ArrowUp10Icon
+                          : ChevronsUpDownIcon;
                 return (
-                    <Button
+                    <Button variant="ghost" onClick={() => toggleSort("name")}>
-                        variant="ghost"
-                        onClick={() =>
-                            column.toggleSorting(column.getIsSorted() === "asc")
-                        }
-                    >
                         {t("name")}
-                        <ArrowUpDown className="ml-2 h-4 w-4" />
+                        <Icon className="ml-2 h-4 w-4" />
                     </Button>
                 );
             }
@@ -148,6 +170,30 @@ export default function UsersTable({ roles }: RolesTableProps) {
         }
     ];
 
+    function toggleSort(column: string) {
+        const newSearch = getNextSortOrder(column, searchParams);
+
+        filter({
+            searchParams: newSearch
+        });
+    }
+
+    const handlePaginationChange = (newPage: PaginationState) => {
+        searchParams.set("page", (newPage.pageIndex + 1).toString());
+        searchParams.set("pageSize", newPage.pageSize.toString());
+        filter({
+            searchParams
+        });
+    };
+
+    const handleSearchChange = useDebouncedCallback((query: string) => {
+        searchParams.set("query", query);
+        searchParams.delete("page");
+        filter({
+            searchParams
+        });
+    }, 300);
+
     return (
         <>
             {editingRole && (
@@ -191,10 +237,18 @@ export default function UsersTable({ roles }: RolesTableProps) {
                 />
             )}
 
-            <RolesDataTable
+            <ControlledDataTable
                 columns={columns}
-                data={roles}
+                rows={roles}
-                createRole={() => {
+                tableId="roles-table"
+                searchQuery={searchParams.get("query")?.toString()}
+                onSearch={handleSearchChange}
+                onPaginationChange={handlePaginationChange}
+                searchPlaceholder={t("accessRolesSearch")}
+                addButtonText={t("accessRolesAdd")}
+                rowCount={rowCount}
+                pagination={pagination}
+                onAdd={() => {
                     setIsCreateModalOpen(true);
                 }}
                 onRefresh={() => startTransition(refreshData)}

src/components/UsersDataTable.tsx

@@ -1,41 +0,0 @@
-"use client";
-
-import { ColumnDef } from "@tanstack/react-table";
-import { DataTable } from "@app/components/ui/data-table";
-import { useTranslations } from "next-intl";
-
-interface DataTableProps<TData, TValue> {
-    columns: ColumnDef<TData, TValue>[];
-    data: TData[];
-    inviteUser?: () => void;
-    onRefresh?: () => void;
-    isRefreshing?: boolean;
-}
-
-export function UsersDataTable<TData, TValue>({
-    columns,
-    data,
-    inviteUser,
-    onRefresh,
-    isRefreshing
-}: DataTableProps<TData, TValue>) {
-    const t = useTranslations();
-
-    return (
-        <DataTable
-            columns={columns}
-            data={data}
-            persistPageSize="users-table"
-            title={t("users")}
-            searchPlaceholder={t("accessUsersSearch")}
-            searchColumn="email"
-            onAdd={inviteUser}
-            onRefresh={onRefresh}
-            isRefreshing={isRefreshing}
-            addButtonText={t("accessUserCreate")}
-            enableColumnVisibility={true}
-            stickyLeftColumn="displayUsername"
-            stickyRightColumn="actions"
-        />
-    );
-}

src/components/UsersTable.tsx

@@ -1,29 +1,42 @@
 "use client";
 
-import { ColumnDef } from "@tanstack/react-table";
+import ConfirmDeleteDialog from "@app/components/ConfirmDeleteDialog";
-import { ExtendedColumnDef } from "@app/components/ui/data-table";
+import { Button } from "@app/components/ui/button";
 import {
     DropdownMenu,
     DropdownMenuContent,
     DropdownMenuItem,
     DropdownMenuTrigger
 } from "@app/components/ui/dropdown-menu";
-import { Button } from "@app/components/ui/button";
+import { useEnvContext } from "@app/hooks/useEnvContext";
-import { ArrowRight, ArrowUpDown, Crown, MoreHorizontal } from "lucide-react";
+import { useNavigationContext } from "@app/hooks/useNavigationContext";
-import { UsersDataTable } from "@app/components/UsersDataTable";
-import { useState, useEffect } from "react";
-import ConfirmDeleteDialog from "@app/components/ConfirmDeleteDialog";
 import { useOrgContext } from "@app/hooks/useOrgContext";
 import { toast } from "@app/hooks/useToast";
+import { useUserContext } from "@app/hooks/useUserContext";
+import { createApiClient, formatAxiosError } from "@app/lib/api";
+import { getUserDisplayName } from "@app/lib/getUserDisplayName";
+import { getNextSortOrder, getSortDirection } from "@app/lib/sortColumn";
+import { type PaginationState } from "@tanstack/react-table";
+import {
+    ArrowDown01Icon,
+    ArrowRight,
+    ArrowUp10Icon,
+    ChevronsUpDownIcon,
+    MoreHorizontal
+} from "lucide-react";
+import { useTranslations } from "next-intl";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
-import { formatAxiosError } from "@app/lib/api";
+import { useMemo, useState, useTransition } from "react";
-import { createApiClient } from "@app/lib/api";
+import { useDebouncedCallback } from "use-debounce";
-import { getUserDisplayName } from "@app/lib/getUserDisplayName";
+import z from "zod";
-import { useEnvContext } from "@app/hooks/useEnvContext";
+import { ColumnFilterButton } from "./ColumnFilterButton";
-import { useUserContext } from "@app/hooks/useUserContext";
+import { ColumnMultiFilterButton } from "./ColumnMultiFilterButton";
-import { useTranslations } from "next-intl";
 import IdpTypeBadge from "./IdpTypeBadge";
+import {
+    ControlledDataTable,
+    type ExtendedColumnDef
+} from "./ui/controlled-data-table";
 import UserRoleBadges from "./UserRoleBadges";
 
 export type UserRow = {
@@ -41,41 +54,90 @@ export type UserRow = {
     isOwner: boolean;
 };
 
+type FilterOption = { value: string; label: string };
+
 type UsersTableProps = {
     users: UserRow[];
+    pagination: PaginationState;
+    rowCount: number;
+    idpFilterOptions: FilterOption[];
+    roleFilterOptions: FilterOption[];
 };
 
-export default function UsersTable({ users: u }: UsersTableProps) {
+export default function UsersTable({
+    users,
+    pagination,
+    rowCount,
+    idpFilterOptions,
+    roleFilterOptions
+}: UsersTableProps) {
     const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
     const [selectedUser, setSelectedUser] = useState<UserRow | null>(null);
-    const [users, setUsers] = useState<UserRow[]>(u);
     const router = useRouter();
     const api = createApiClient(useEnvContext());
-    const { user, updateUser } = useUserContext();
+    const { user } = useUserContext();
     const { org } = useOrgContext();
     const t = useTranslations();
-    const [isRefreshing, setIsRefreshing] = useState(false);
+    const [isNavigatingToAddPage, startNavigation] = useTransition();
+    const [isRefreshing, startTransition] = useTransition();
+    const {
+        navigate: filter,
+        isNavigating: isFiltering,
+        searchParams,
+        pathname
+    } = useNavigationContext();
 
-    // Update local state when props change (e.g., after refresh)
+    const idpIdParamSchema = z
-    useEffect(() => {
+        .union([z.literal("internal"), z.string().regex(/^\d+$/)])
-        setUsers(u);
+        .optional()
-    }, [u]);
+        .catch(undefined);
+
+    const roleIdsFromSearchParams = useMemo(() => {
+        const sp = new URLSearchParams(searchParams);
+        return [
+            ...new Set(sp.getAll("role_id").filter((id) => /^\d+$/.test(id)))
+        ];
+    }, [searchParams.toString()]);
+
+    function handleFilterChange(
+        column: string,
+        value: string | undefined | null
+    ) {
+        const sp = new URLSearchParams(searchParams);
+        sp.delete(column);
+        sp.delete("page");
+
+        if (value) {
+            sp.set(column, value);
+        }
+        startTransition(() => router.push(`${pathname}?${sp.toString()}`));
+    }
+
+    function handleRoleIdsChange(values: string[]) {
+        const sp = new URLSearchParams(searchParams);
+        sp.delete("role_id");
+        sp.delete("page");
+        for (const id of values) {
+            if (/^\d+$/.test(id)) {
+                sp.append("role_id", id);
+            }
+        }
+        startTransition(() => router.push(`${pathname}?${sp.toString()}`));
+    }
 
     const refreshData = async () => {
-        console.log("Data refreshed");
+        startTransition(async () => {
-        setIsRefreshing(true);
+            try {
-        try {
+                await new Promise((resolve) => setTimeout(resolve, 200));
-            await new Promise((resolve) => setTimeout(resolve, 200));
+                router.refresh();
-            router.refresh();
+            } catch (error) {
-        } catch (error) {
+                toast({
-            toast({
+                    title: t("error"),
-                title: t("error"),
+                    description: t("refreshError"),
-                description: t("refreshError"),
+                    variant: "destructive"
-                variant: "destructive"
+                });
-            });
+            }
-        } finally {
+        });
-            setIsRefreshing(false);
-        }
     };
 
     const columns: ExtendedColumnDef<UserRow>[] = [
@@ -84,15 +146,21 @@ export default function UsersTable({ users: u }: UsersTableProps) {
             enableHiding: false,
             friendlyName: t("username"),
             header: ({ column }) => {
+                const nameOrder = getSortDirection("username", searchParams);
+                const Icon =
+                    nameOrder === "asc"
+                        ? ArrowDown01Icon
+                        : nameOrder === "desc"
+                          ? ArrowUp10Icon
+                          : ChevronsUpDownIcon;
                 return (
                     <Button
                         variant="ghost"
-                        onClick={() =>
+                        className="p-3"
-                            column.toggleSorting(column.getIsSorted() === "asc")
+                        onClick={() => toggleSort("username")}
-                        }
                     >
                         {t("username")}
-                        <ArrowUpDown className="ml-2 h-4 w-4" />
+                        <Icon className="ml-2 h-4 w-4" />
                     </Button>
                 );
             }
@@ -100,17 +168,21 @@ export default function UsersTable({ users: u }: UsersTableProps) {
         {
             accessorKey: "idpName",
             friendlyName: t("identityProvider"),
-            header: ({ column }) => {
+            header: () => {
                 return (
-                    <Button
+                    <ColumnFilterButton
-                        variant="ghost"
+                        options={idpFilterOptions}
-                        onClick={() =>
+                        selectedValue={idpIdParamSchema.parse(
-                            column.toggleSorting(column.getIsSorted() === "asc")
+                            searchParams.get("idp_id") ?? undefined
+                        )}
+                        onValueChange={(value) =>
+                            handleFilterChange("idp_id", value)
                         }
-                    >
+                        searchPlaceholder={t("searchPlaceholder")}
-                        {t("identityProvider")}
+                        emptyMessage={t("emptySearchOptions")}
-                        <ArrowUpDown className="ml-2 h-4 w-4" />
+                        label={t("identityProvider")}
-                    </Button>
+                        className="p-3"
+                    />
                 );
             },
             cell: ({ row }) => {
@@ -128,17 +200,17 @@ export default function UsersTable({ users: u }: UsersTableProps) {
             id: "role",
             accessorFn: (row) => row.roleLabels.join(", "),
             friendlyName: t("role"),
-            header: ({ column }) => {
+            header: () => {
                 return (
-                    <Button
+                    <ColumnMultiFilterButton
-                        variant="ghost"
+                        options={roleFilterOptions}
-                        onClick={() =>
+                        selectedValues={roleIdsFromSearchParams}
-                            column.toggleSorting(column.getIsSorted() === "asc")
+                        onSelectedValuesChange={handleRoleIdsChange}
-                        }
+                        searchPlaceholder={t("searchPlaceholder")}
-                    >
+                        emptyMessage={t("emptySearchOptions")}
-                        {t("role")}
+                        label={t("role")}
-                        <ArrowUpDown className="ml-2 h-4 w-4" />
+                        className="p-3"
-                    </Button>
+                    />
                 );
             },
             cell: ({ row }) => {
@@ -180,10 +252,8 @@ export default function UsersTable({ users: u }: UsersTableProps) {
                                             isDisabled && e.preventDefault()
                                         }
                                     >
-                                        <DropdownMenuItem
+                                        <DropdownMenuItem disabled={isDisabled}>
-                                            disabled={isDisabled}
+                                            {t("accessUserManage")}
-                                        >
-                                            {t("accessUsersManage")}
                                         </DropdownMenuItem>
                                     </Link>
                                     {!isDisabled && (
@@ -214,10 +284,7 @@ export default function UsersTable({ users: u }: UsersTableProps) {
                             <Link
                                 href={`/${org?.org.orgId}/settings/access/users/${userRow.id}`}
                             >
-                                <Button
+                                <Button variant={"outline"} className="ml-2">
-                                    variant={"outline"}
-                                    className="ml-2"
-                                >
                                     {t("manage")}
                                     <ArrowRight className="ml-2 w-4 h-4" />
                                 </Button>
@@ -252,15 +319,36 @@ export default function UsersTable({ users: u }: UsersTableProps) {
                         email: selectedUser.email || ""
                     })
                 });
-
-                setUsers((prev) =>
-                    prev.filter((u) => u.id !== selectedUser?.id)
-                );
             }
         }
+        router.refresh();
         setIsDeleteModalOpen(false);
     }
 
+    function toggleSort(column: string) {
+        const newSearch = getNextSortOrder(column, searchParams);
+
+        filter({
+            searchParams: newSearch
+        });
+    }
+
+    const handlePaginationChange = (newPage: PaginationState) => {
+        searchParams.set("page", (newPage.pageIndex + 1).toString());
+        searchParams.set("pageSize", newPage.pageSize.toString());
+        filter({
+            searchParams
+        });
+    };
+
+    const handleSearchChange = useDebouncedCallback((query: string) => {
+        searchParams.set("query", query);
+        searchParams.delete("page");
+        filter({
+            searchParams
+        });
+    }, 300);
+
     return (
         <>
             <ConfirmDeleteDialog
@@ -276,7 +364,7 @@ export default function UsersTable({ users: u }: UsersTableProps) {
                     </div>
                 }
                 buttonText={t("userRemoveOrgConfirm")}
-                onConfirm={removeUser}
+                onConfirm={async () => startTransition(removeUser)}
                 string={
                     selectedUser
                         ? getUserDisplayName({
@@ -289,16 +377,26 @@ export default function UsersTable({ users: u }: UsersTableProps) {
                 title={t("userRemoveOrg")}
             />
 
-            <UsersDataTable
+            <ControlledDataTable
                 columns={columns}
-                data={users}
+                pagination={pagination}
-                inviteUser={() => {
+                rowCount={rowCount}
-                    router.push(
+                isNavigatingToAddPage={isNavigatingToAddPage}
-                        `/${org?.org.orgId}/settings/access/users/create`
+                searchQuery={searchParams.get("query")?.toString()}
+                onSearch={handleSearchChange}
+                onPaginationChange={handlePaginationChange}
+                rows={users}
+                searchPlaceholder={t("accessUsersSearch")}
+                tableId="users-table"
+                onAdd={() => {
+                    startNavigation(() =>
+                        router.push(
+                            `/${org?.org.orgId}/settings/access/users/create`
+                        )
                     );
                 }}
                 onRefresh={refreshData}
-                isRefreshing={isRefreshing}
+                isRefreshing={isRefreshing || isFiltering}
             />
         </>
     );

src/components/machines-selector.tsx

@@ -3,18 +3,9 @@ import type { ListClientsResponse } from "@server/routers/client";
 import { useQuery } from "@tanstack/react-query";
 import { useMemo, useState } from "react";
 import { useDebounce } from "use-debounce";
-import {
-    Command,
-    CommandEmpty,
-    CommandGroup,
-    CommandInput,
-    CommandItem,
-    CommandList
-} from "./ui/command";
-import { cn } from "@app/lib/cn";
 
-import { CheckIcon } from "lucide-react";
 import { useTranslations } from "next-intl";
+import { MultiSelectTags } from "./multi-select-tags";
 
 export type SelectedMachine = Pick<
     ListClientsResponse["clients"][number],
@@ -57,52 +48,71 @@ export function MachinesSelector({
         return allMachines;
     }, [machines, selectedMachines, debouncedValue]);
 
-    const selectedMachinesIds = new Set(
+    // const selectedMachinesIds = new Set(
-        selectedMachines.map((m) => m.clientId)
+    //     selectedMachines.map((m) => m.clientId)
-    );
+    // );
 
     return (
-        <Command shouldFilter={false}>
+        <MultiSelectTags
-            <CommandInput
+            emptyPlaceholder={t("machineNotFound")}
-                placeholder={t("machineSearch")}
+            searchPlaceholder={t("machineSearch")}
-                value={machineSearchQuery}
+            value={selectedMachines.map((m) => ({
-                onValueChange={setMachineSearchQuery}
+                ...m,
-            />
+                text: m.name,
-            <CommandList>
+                id: m.clientId.toString()
-                <CommandEmpty>{t("machineNotFound")}</CommandEmpty>
+            }))}
-                <CommandGroup>
+            onChange={(values) => {
-                    {machinesShown.map((m) => (
+                onSelectMachines(values);
-                        <CommandItem
+            }}
-                            value={`${m.name}:${m.clientId}`}
+            options={machinesShown.map((m) => ({
-                            key={m.clientId}
+                ...m,
-                            onSelect={() => {
+                id: m.clientId.toString(),
-                                let newMachineClients = [];
+                text: m.name
-                                if (selectedMachinesIds.has(m.clientId)) {
+            }))}
-                                    newMachineClients = selectedMachines.filter(
+            onSearch={setMachineSearchQuery}
-                                        (mc) => mc.clientId !== m.clientId
+            searchQuery={machineSearchQuery}
-                                    );
+        />
-                                } else {
+        // <Command shouldFilter={false}>
-                                    newMachineClients = [
+        //     <CommandInput
-                                        ...selectedMachines,
+        //         placeholder={t("machineSearch")}
-                                        m
+        //         value={machineSearchQuery}
-                                    ];
+        //         onValueChange={setMachineSearchQuery}
-                                }
+        //     />
-                                onSelectMachines(newMachineClients);
+        //     <CommandList>
-                            }}
+        //         <CommandEmpty>{t("machineNotFound")}</CommandEmpty>
-                        >
+        //         <CommandGroup>
-                            <CheckIcon
+        //             {machinesShown.map((m) => (
-                                className={cn(
+        //                 <CommandItem
-                                    "mr-2 h-4 w-4",
+        //                     value={`${m.name}:${m.clientId}`}
-                                    selectedMachinesIds.has(m.clientId)
+        //                     key={m.clientId}
-                                        ? "opacity-100"
+        //                     onSelect={() => {
-                                        : "opacity-0"
+        //                         let newMachineClients = [];
-                                )}
+        //                         if (selectedMachinesIds.has(m.clientId)) {
-                            />
+        //                             newMachineClients = selectedMachines.filter(
-                            {`${m.name}`}
+        //                                 (mc) => mc.clientId !== m.clientId
-                        </CommandItem>
+        //                             );
-                    ))}
+        //                         } else {
-                </CommandGroup>
+        //                             newMachineClients = [
-            </CommandList>
+        //                                 ...selectedMachines,
-        </Command>
+        //                                 m
+        //                             ];
+        //                         }
+        //                         onSelectMachines(newMachineClients);
+        //                     }}
+        //                 >
+        //                     <CheckIcon
+        //                         className={cn(
+        //                             "mr-2 h-4 w-4",
+        //                             selectedMachinesIds.has(m.clientId)
+        //                                 ? "opacity-100"
+        //                                 : "opacity-0"
+        //                         )}
+        //                     />
+        //                     {`${m.name}`}
+        //                 </CommandItem>
+        //             ))}
+        //         </CommandGroup>
+        //     </CommandList>
+        // </Command>
     );
 }

src/components/multi-select-tags.tsx

@@ -0,0 +1,77 @@
+import type { Ref } from "react";
+import {
+    Command,
+    CommandEmpty,
+    CommandGroup,
+    CommandInput,
+    CommandItem,
+    CommandList
+} from "./ui/command";
+import { cn } from "@app/lib/cn";
+import { CheckIcon } from "lucide-react";
+
+export type TagValue = { text: string; id: string };
+
+export type MultiSelectTagsProps<T extends TagValue> = {
+    emptyPlaceholder: string;
+    searchPlaceholder: string;
+    searchQuery?: string;
+    options: Array<T>;
+    value: Array<T>;
+    onChange: (newValue: Array<T>) => void;
+    onSearch: (query: string) => void;
+    ref?: Ref<HTMLButtonElement>;
+};
+
+export function MultiSelectTags<T extends TagValue>({
+    emptyPlaceholder,
+    searchPlaceholder,
+    searchQuery,
+    value,
+    options,
+    onSearch,
+    onChange
+}: MultiSelectTagsProps<T>) {
+    const selectedValues = new Set(value.map((v) => v.id));
+    return (
+        <Command shouldFilter={false}>
+            <CommandInput
+                placeholder={searchPlaceholder}
+                value={searchQuery}
+                onValueChange={onSearch}
+            />
+            <CommandList>
+                <CommandEmpty>{emptyPlaceholder}</CommandEmpty>
+                <CommandGroup>
+                    {options.map((option) => (
+                        <CommandItem
+                            value={option.id}
+                            key={option.id}
+                            onSelect={() => {
+                                let newValues = [];
+                                if (selectedValues.has(option.id)) {
+                                    newValues = value.filter(
+                                        (v) => v.id !== option.id
+                                    );
+                                } else {
+                                    newValues = [...value, option];
+                                }
+                                onChange(newValues);
+                            }}
+                        >
+                            <CheckIcon
+                                className={cn(
+                                    "mr-2 h-4 w-4",
+                                    selectedValues.has(option.id)
+                                        ? "opacity-100"
+                                        : "opacity-0"
+                                )}
+                            />
+                            {`${option.text}`}
+                        </CommandItem>
+                    ))}
+                </CommandGroup>
+            </CommandList>
+        </Command>
+    );
+}