display users table

server/routers/user/listUsers.ts

@@ -1,31 +1,69 @@
-import { Request, Response, NextFunction } from 'express';
+import { Request, Response, NextFunction } from "express";
-import { z } from 'zod';
+import { z } from "zod";
-import { db } from '@server/db';
+import { db } from "@server/db";
-import { roles, userOrgs, users } from '@server/db/schema';
+import { roles, userOrgs, users } from "@server/db/schema";
 import response from "@server/utils/response";
-import HttpCode from '@server/types/HttpCode';
+import HttpCode from "@server/types/HttpCode";
-import createHttpError from 'http-errors';
+import createHttpError from "http-errors";
-import { sql } from 'drizzle-orm';
+import { sql } from "drizzle-orm";
-import { ActionsEnum, checkUserActionPermission } from '@server/auth/actions';
+import { ActionsEnum, checkUserActionPermission } from "@server/auth/actions";
-import logger from '@server/logger';
+import logger from "@server/logger";
 
 const listUsersParamsSchema = z.object({
-    orgId: z.string().optional().transform(Number).pipe(z.number().int().positive()),
+    orgId: z.string(),
 });
 
 const listUsersSchema = z.object({
-    limit: z.string().optional().transform(Number).pipe(z.number().int().positive().default(10)),
+    limit: z
-    offset: z.string().optional().transform(Number).pipe(z.number().int().nonnegative().default(0)),
+        .string()
+        .optional()
+        .default("1000")
+        .transform(Number)
+        .pipe(z.number().int().nonnegative()),
+    offset: z
+        .string()
+        .optional()
+        .default("0")
+        .transform(Number)
+        .pipe(z.number().int().nonnegative()),
 });
 
-export async function listUsers(req: Request, res: Response, next: NextFunction): Promise<any> {
+async function queryUsers(orgId: string, limit: number, offset: number) {
+    return await db
+        .select({
+            id: users.userId,
+            email: users.email,
+            emailVerified: users.emailVerified,
+            dateCreated: users.dateCreated,
+            orgId: userOrgs.orgId,
+            roleId: userOrgs.roleId,
+            roleName: roles.name,
+        })
+        .from(users)
+        .leftJoin(userOrgs, sql`${users.userId} = ${userOrgs.userId}`)
+        .leftJoin(roles, sql`${userOrgs.roleId} = ${roles.roleId}`)
+        .where(sql`${userOrgs.orgId} = ${orgId}`)
+        .limit(limit)
+        .offset(offset);
+}
+
+export type ListUsersResponse = {
+    users: NonNullable<Awaited<ReturnType<typeof queryUsers>>>;
+    pagination: { total: number; limit: number; offset: number };
+};
+
+export async function listUsers(
+    req: Request,
+    res: Response,
+    next: NextFunction
+): Promise<any> {
     try {
         const parsedQuery = listUsersSchema.safeParse(req.query);
         if (!parsedQuery.success) {
             return next(
                 createHttpError(
                     HttpCode.BAD_REQUEST,
-                    parsedQuery.error.errors.map(e => e.message).join(', ')
+                    parsedQuery.error.errors.map((e) => e.message).join(", ")
                 )
             );
         }
@@ -36,7 +74,7 @@ export async function listUsers(req: Request, res: Response, next: NextFunction)
             return next(
                 createHttpError(
                     HttpCode.BAD_REQUEST,
-                    parsedParams.error.errors.map(e => e.message).join(', ')
+                    parsedParams.error.errors.map((e) => e.message).join(", ")
                 )
             );
         }
@@ -44,35 +82,31 @@ export async function listUsers(req: Request, res: Response, next: NextFunction)
         const { orgId } = parsedParams.data;
 
         // Check if the user has permission to list users
-        const hasPermission = await checkUserActionPermission(ActionsEnum.listUsers, req);
+        const hasPermission = await checkUserActionPermission(
+            ActionsEnum.listUsers,
+            req
+        );
         if (!hasPermission) {
-            return next(createHttpError(HttpCode.FORBIDDEN, 'User does not have permission to perform this action'));
+            return next(
+                createHttpError(
+                    HttpCode.FORBIDDEN,
+                    "User does not have permission to perform this action"
+                )
+            );
         }
 
-        // Query to join users, userOrgs, and roles tables
+        const usersWithRoles = await queryUsers(
-        const usersWithRoles = await db
+            orgId.toString(),
-            .select({
+            limit,
-                id: users.userId,
+            offset
-                email: users.email,
+        );
-                emailVerified: users.emailVerified,
-                dateCreated: users.dateCreated,
-                orgId: userOrgs.orgId,
-                roleId: userOrgs.roleId,
-                roleName: roles.name,
-            })
-            .from(users)
-            .leftJoin(userOrgs, sql`${users.userId} = ${userOrgs.userId}`)
-            .leftJoin(roles, sql`${userOrgs.roleId} = ${roles.roleId}`)
-            .where(sql`${userOrgs.orgId} = ${orgId}`)
-            .limit(limit)
-            .offset(offset);
 
         // Count total users
         const [{ count }] = await db
             .select({ count: sql<number>`count(*)` })
             .from(users);
 
-        return response(res, {
+        return response<ListUsersResponse>(res, {
             data: {
                 users: usersWithRoles,
                 pagination: {
@@ -88,6 +122,8 @@ export async function listUsers(req: Request, res: Response, next: NextFunction)
         });
     } catch (error) {
         logger.error(error);
-        return next(createHttpError(HttpCode.INTERNAL_SERVER_ERROR, "An error occurred..."));
+        return next(
+            createHttpError(HttpCode.INTERNAL_SERVER_ERROR, "An error occurred")
+        );
     }
 }

src/app/[orgId]/settings/resources/components/ResourcesDataTable.tsx

@@ -59,7 +59,7 @@ export function ResourcesDataTable<TData, TValue>({
         <div>
             <div className="flex items-center justify-between pb-4">
                 <Input
-                    placeholder="Search your resources"
+                    placeholder="Search resources"
                     value={
                         (table.getColumn("name")?.getFilterValue() as string) ??
                         ""

src/app/[orgId]/settings/sites/components/SitesDataTable.tsx

@@ -59,7 +59,7 @@ export function SitesDataTable<TData, TValue>({
         <div>
             <div className="flex items-center justify-between pb-4">
                 <Input
-                    placeholder="Search your sites"
+                    placeholder="Search sites"
                     value={
                         (table.getColumn("name")?.getFilterValue() as string) ??
                         ""
@@ -94,7 +94,7 @@ export function SitesDataTable<TData, TValue>({
                                                 : flexRender(
                                                       header.column.columnDef
                                                           .header,
-                                                      header.getContext(),
+                                                      header.getContext()
                                                   )}
                                         </TableHead>
                                     );
@@ -115,7 +115,7 @@ export function SitesDataTable<TData, TValue>({
                                         <TableCell key={cell.id}>
                                             {flexRender(
                                                 cell.column.columnDef.cell,
-                                                cell.getContext(),
+                                                cell.getContext()
                                             )}
                                         </TableCell>
                                     ))}

src/app/[orgId]/settings/users/components/UsersDataTable.tsx

@@ -0,0 +1,143 @@
+"use client";
+
+import {
+    ColumnDef,
+    flexRender,
+    getCoreRowModel,
+    useReactTable,
+    getPaginationRowModel,
+    SortingState,
+    getSortedRowModel,
+    ColumnFiltersState,
+    getFilteredRowModel,
+} from "@tanstack/react-table";
+import {
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableHeader,
+    TableRow,
+} from "@/components/ui/table";
+import { Button } from "@app/components/ui/button";
+import { useState } from "react";
+import { Input } from "@app/components/ui/input";
+import { DataTablePagination } from "../../../../../components/DataTablePagination";
+import { Plus } from "lucide-react";
+
+interface DataTableProps<TData, TValue> {
+    columns: ColumnDef<TData, TValue>[];
+    data: TData[];
+    inviteUser?: () => void;
+}
+
+export function UsersDataTable<TData, TValue>({
+    inviteUser,
+    columns,
+    data,
+}: DataTableProps<TData, TValue>) {
+    const [sorting, setSorting] = useState<SortingState>([]);
+    const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
+
+    const table = useReactTable({
+        data,
+        columns,
+        getCoreRowModel: getCoreRowModel(),
+        getPaginationRowModel: getPaginationRowModel(),
+        onSortingChange: setSorting,
+        getSortedRowModel: getSortedRowModel(),
+        onColumnFiltersChange: setColumnFilters,
+        getFilteredRowModel: getFilteredRowModel(),
+        state: {
+            sorting,
+            columnFilters,
+        },
+    });
+
+    return (
+        <div>
+            <div className="flex items-center justify-between pb-4">
+                <Input
+                    placeholder="Search users"
+                    value={
+                        (table
+                            .getColumn("email")
+                            ?.getFilterValue() as string) ?? ""
+                    }
+                    onChange={(event) =>
+                        table
+                            .getColumn("email")
+                            ?.setFilterValue(event.target.value)
+                    }
+                    className="max-w-sm mr-2"
+                />
+                <Button
+                    onClick={() => {
+                        if (inviteUser) {
+                            inviteUser();
+                        }
+                    }}
+                >
+                    <Plus className="mr-2 h-4 w-4" /> Invite User
+                </Button>
+            </div>
+            <div>
+                <Table>
+                    <TableHeader>
+                        {table.getHeaderGroups().map((headerGroup) => (
+                            <TableRow key={headerGroup.id}>
+                                {headerGroup.headers.map((header) => {
+                                    return (
+                                        <TableHead key={header.id}>
+                                            {header.isPlaceholder
+                                                ? null
+                                                : flexRender(
+                                                      header.column.columnDef
+                                                          .header,
+                                                      header.getContext()
+                                                  )}
+                                        </TableHead>
+                                    );
+                                })}
+                            </TableRow>
+                        ))}
+                    </TableHeader>
+                    <TableBody>
+                        {table.getRowModel().rows?.length ? (
+                            table.getRowModel().rows.map((row) => (
+                                <TableRow
+                                    key={row.id}
+                                    data-state={
+                                        row.getIsSelected() && "selected"
+                                    }
+                                >
+                                    {row.getVisibleCells().map((cell) => (
+                                        <TableCell key={cell.id}>
+                                            {flexRender(
+                                                cell.column.columnDef.cell,
+                                                cell.getContext()
+                                            )}
+                                        </TableCell>
+                                    ))}
+                                </TableRow>
+                            ))
+                        ) : (
+                            <TableRow>
+                                <TableCell
+                                    colSpan={columns.length}
+                                    className="h-24 text-center"
+                                >
+                                    No Users. Invite one to share access to
+                                    resources.
+                                </TableCell>
+                            </TableRow>
+                        )}
+                    </TableBody>
+                </Table>
+            </div>
+            <div className="mt-4">
+                <DataTablePagination table={table} />
+            </div>
+        </div>
+    );
+}

src/app/[orgId]/settings/users/components/UsersTable.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import { ColumnDef } from "@tanstack/react-table";
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger,
+} from "@app/components/ui/dropdown-menu";
+import { Button } from "@app/components/ui/button";
+import { ArrowUpDown, MoreHorizontal } from "lucide-react";
+import { UsersDataTable } from "./UsersDataTable";
+
+export type UserRow = {
+    id: string;
+    email: string;
+};
+
+export const columns: ColumnDef<UserRow>[] = [
+    {
+        accessorKey: "email",
+        header: ({ column }) => {
+            return (
+                <Button
+                    variant="ghost"
+                    onClick={() =>
+                        column.toggleSorting(column.getIsSorted() === "asc")
+                    }
+                >
+                    Email
+                    <ArrowUpDown className="ml-2 h-4 w-4" />
+                </Button>
+            );
+        },
+    },
+    {
+        id: "actions",
+        cell: ({ row }) => {
+            const userRow = row.original;
+
+            return (
+                <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>Edit access</DropdownMenuItem>
+                    </DropdownMenuContent>
+                </DropdownMenu>
+            );
+        },
+    },
+];
+
+type UsersTableProps = {
+    users: UserRow[];
+};
+
+export default function UsersTable({ users }: UsersTableProps) {
+    return (
+        <UsersDataTable
+            columns={columns}
+            data={users}
+            inviteUser={() => {
+                console.log("Invite user");
+            }}
+        />
+    );
+}

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

@@ -0,0 +1,46 @@
+import { internal } from "@app/api";
+import { authCookieHeader } from "@app/api/cookies";
+import { ListUsersResponse } from "@server/routers/user";
+import { AxiosResponse } from "axios";
+import UsersTable, { UserRow } from "./components/UsersTable";
+
+type UsersPageProps = {
+    params: Promise<{ orgId: string }>;
+};
+
+export default async function UsersPage(props: UsersPageProps) {
+    const params = await props.params;
+    let users: ListUsersResponse["users"] = [];
+    try {
+        const res = await internal.get<AxiosResponse<ListUsersResponse>>(
+            `/org/${params.orgId}/users`,
+            await authCookieHeader()
+        );
+        users = res.data.data.users;
+    } catch (e) {
+        console.error("Error fetching users", e);
+    }
+
+    const userRows: UserRow[] = users.map((user) => {
+        return {
+            id: user.id,
+            email: user.email,
+        };
+    });
+
+    return (
+        <>
+            <div className="space-y-0.5 select-none mb-6">
+                <h2 className="text-2xl font-bold tracking-tight">
+                    Manage Users
+                </h2>
+                <p className="text-muted-foreground">
+                    Manage existing your users or invite new ones to your
+                    organization.
+                </p>
+            </div>
+
+            <UsersTable users={userRows} />
+        </>
+    );
+}