Add paginated users/roles, user status, frontend permissions, profile pictures, identifier file storage

- Users page: paginated, searchable, sortable with inline roles (no N+1)
- Roles page: paginated, searchable, sortable + /roles/all for dropdowns
- User is_active field with migration, PATCH toggle, auth check (disabled=401)
- Frontend permission checks: auth store loads permissions, sidebar/buttons conditional
- Profile pictures via file storage for users and members, avatar component
- Identifier images use file storage API instead of base64
- Fix TypeScript errors across admin UI
- 64 API tests passing (10 new)

packages/backend/src/routes/v1/rbac.ts

@@ -1,28 +1,110 @@
 import type { FastifyPluginAsync } from 'fastify'
-import { eq, and } from 'drizzle-orm'
+import { eq, and, count, sql, type Column } from 'drizzle-orm'
+import { PaginationSchema } from '@forte/shared/schemas'
 import { RbacService } from '../../services/rbac.service.js'
 import { ValidationError } from '../../lib/errors.js'
 import { users } from '../../db/schema/users.js'
+import { roles, userRoles } from '../../db/schema/rbac.js'
+import { withPagination, withSort, buildSearchCondition, paginatedResponse } from '../../utils/pagination.js'
 
 export const rbacRoutes: FastifyPluginAsync = async (app) => {
   // --- Users list ---
 
   app.get('/users', { preHandler: [app.authenticate, app.requirePermission('users.view')] }, async (request, reply) => {
-    const allUsers = await app.db
+    const params = PaginationSchema.parse(request.query)
+    const baseWhere = eq(users.companyId, request.companyId)
+
+    const searchCondition = params.q
+      ? buildSearchCondition(params.q, [users.firstName, users.lastName, users.email])
+      : undefined
+
+    const where = searchCondition ? and(baseWhere, searchCondition) : baseWhere
+
+    const sortableColumns: Record<string, Column> = {
+      name: users.lastName,
+      email: users.email,
+      created_at: users.createdAt,
+    }
+
+    let query = app.db
       .select({
         id: users.id,
         email: users.email,
         firstName: users.firstName,
         lastName: users.lastName,
         role: users.role,
+        isActive: users.isActive,
         createdAt: users.createdAt,
       })
       .from(users)
-      .where(eq(users.companyId, request.companyId))
-      .orderBy(users.lastName)
+      .where(where)
+      .$dynamic()
 
-    return reply.send({ data: allUsers })
+    query = withSort(query, params.sort, params.order, sortableColumns, users.lastName)
+    query = withPagination(query, params.page, params.limit)
+
+    const [data, [{ total }]] = await Promise.all([
+      query,
+      app.db.select({ total: count() }).from(users).where(where),
+    ])
+
+    // Attach roles to each user
+    const userIds = data.map((u) => u.id)
+    const roleAssignments = userIds.length > 0
+      ? await app.db
+          .select({
+            userId: userRoles.userId,
+            roleId: roles.id,
+            roleName: roles.name,
+            roleSlug: roles.slug,
+            isSystem: roles.isSystem,
+          })
+          .from(userRoles)
+          .innerJoin(roles, eq(userRoles.roleId, roles.id))
+          .where(sql`${userRoles.userId} IN ${userIds}`)
+      : []
+
+    const rolesByUser = new Map<string, { id: string; name: string; slug: string; isSystem: boolean }[]>()
+    for (const ra of roleAssignments) {
+      const list = rolesByUser.get(ra.userId) ?? []
+      list.push({ id: ra.roleId, name: ra.roleName, slug: ra.roleSlug, isSystem: ra.isSystem })
+      rolesByUser.set(ra.userId, list)
+    }
+
+    const usersWithRoles = data.map((u) => ({
+      ...u,
+      roles: rolesByUser.get(u.id) ?? [],
+    }))
+
+    return reply.send(paginatedResponse(usersWithRoles, total, params.page, params.limit))
   })
+  // --- User status ---
+
+  app.patch('/users/:userId/status', { preHandler: [app.authenticate, app.requirePermission('users.admin')] }, async (request, reply) => {
+    const { userId } = request.params as { userId: string }
+    const { isActive } = request.body as { isActive?: boolean }
+
+    if (typeof isActive !== 'boolean') {
+      throw new ValidationError('isActive (boolean) is required')
+    }
+
+    // Prevent disabling yourself
+    if (userId === request.user.id) {
+      throw new ValidationError('Cannot change your own account status')
+    }
+
+    const [updated] = await app.db
+      .update(users)
+      .set({ isActive, updatedAt: new Date() })
+      .where(and(eq(users.id, userId), eq(users.companyId, request.companyId)))
+      .returning({ id: users.id, isActive: users.isActive })
+
+    if (!updated) return reply.status(404).send({ error: { message: 'User not found', statusCode: 404 } })
+
+    request.log.info({ userId, isActive, changedBy: request.user.id }, 'User status changed')
+    return reply.send(updated)
+  })
+
   // --- Permissions ---
 
   app.get('/permissions', { preHandler: [app.authenticate, app.requirePermission('users.view')] }, async (request, reply) => {
@@ -33,7 +115,18 @@ export const rbacRoutes: FastifyPluginAsync = async (app) => {
   // --- Roles ---
 
   app.get('/roles', { preHandler: [app.authenticate, app.requirePermission('users.view')] }, async (request, reply) => {
-    const data = await RbacService.listRoles(app.db, request.companyId)
+    const params = PaginationSchema.parse(request.query)
+    const result = await RbacService.listRoles(app.db, request.companyId, params)
+    return reply.send(result)
+  })
+
+  // Unpaginated list for dropdowns/selectors
+  app.get('/roles/all', { preHandler: [app.authenticate, app.requirePermission('users.view')] }, async (request, reply) => {
+    const data = await app.db
+      .select()
+      .from(roles)
+      .where(and(eq(roles.companyId, request.companyId), eq(roles.isActive, true)))
+      .orderBy(roles.name)
     return reply.send({ data })
   })