Add roles and users admin UI with role management API

Backend:
- GET /v1/users (list company users)
- GET/POST/PATCH/DELETE /v1/roles (role CRUD with permissions)
- GET/POST/DELETE /v1/users/:userId/roles (role assignment)
- GET /v1/me/permissions (current user's effective permissions)

Frontend:
- Roles list page with kebab menu (edit permissions, delete custom)
- Role detail page with grouped permission checkboxes and inheritance note
- New role page with auto-generated slug
- Users list page showing assigned roles per user
- Manage Roles dialog for adding/removing roles per user
- Sidebar: Admin section with Users, Roles, Help links

packages/backend/src/main.ts

@@ -14,6 +14,7 @@ import { inventoryRoutes } from './routes/v1/inventory.js'
 import { productRoutes } from './routes/v1/products.js'
 import { lookupRoutes } from './routes/v1/lookups.js'
 import { fileRoutes } from './routes/v1/files.js'
+import { rbacRoutes } from './routes/v1/rbac.js'
 
 export async function buildApp() {
   const app = Fastify({
@@ -62,6 +63,7 @@ export async function buildApp() {
   await app.register(productRoutes, { prefix: '/v1' })
   await app.register(lookupRoutes, { prefix: '/v1' })
   await app.register(fileRoutes, { prefix: '/v1' })
+  await app.register(rbacRoutes, { prefix: '/v1' })
 
   return app
 }

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

@@ -0,0 +1,138 @@
+import type { FastifyPluginAsync } from 'fastify'
+import { eq, and } from 'drizzle-orm'
+import { RbacService } from '../../services/rbac.service.js'
+import { ValidationError } from '../../lib/errors.js'
+import { users } from '../../db/schema/users.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
+      .select({
+        id: users.id,
+        email: users.email,
+        firstName: users.firstName,
+        lastName: users.lastName,
+        role: users.role,
+        createdAt: users.createdAt,
+      })
+      .from(users)
+      .where(eq(users.companyId, request.companyId))
+      .orderBy(users.lastName)
+
+    return reply.send({ data: allUsers })
+  })
+  // --- Permissions ---
+
+  app.get('/permissions', { preHandler: [app.authenticate, app.requirePermission('users.view')] }, async (request, reply) => {
+    const data = await RbacService.listPermissions(app.db)
+    return reply.send({ data })
+  })
+
+  // --- Roles ---
+
+  app.get('/roles', { preHandler: [app.authenticate, app.requirePermission('users.view')] }, async (request, reply) => {
+    const data = await RbacService.listRoles(app.db, request.companyId)
+    return reply.send({ data })
+  })
+
+  app.get('/roles/:id', { preHandler: [app.authenticate, app.requirePermission('users.view')] }, async (request, reply) => {
+    const { id } = request.params as { id: string }
+    const role = await RbacService.getRoleWithPermissions(app.db, request.companyId, id)
+    if (!role) return reply.status(404).send({ error: { message: 'Role not found', statusCode: 404 } })
+    return reply.send(role)
+  })
+
+  app.post('/roles', { preHandler: [app.authenticate, app.requirePermission('users.admin')] }, async (request, reply) => {
+    const { name, slug, description, permissionSlugs } = request.body as {
+      name?: string
+      slug?: string
+      description?: string
+      permissionSlugs?: string[]
+    }
+
+    if (!name || !slug || !permissionSlugs) {
+      throw new ValidationError('name, slug, and permissionSlugs are required')
+    }
+
+    if (!/^[a-z0-9_]+$/.test(slug)) {
+      throw new ValidationError('slug must be lowercase alphanumeric with underscores')
+    }
+
+    const role = await RbacService.createRole(app.db, request.companyId, {
+      name,
+      slug,
+      description,
+      permissionSlugs,
+    })
+
+    request.log.info({ roleId: role?.id, roleName: name, userId: request.user.id }, 'Role created')
+    return reply.status(201).send(role)
+  })
+
+  app.patch('/roles/:id', { preHandler: [app.authenticate, app.requirePermission('users.admin')] }, async (request, reply) => {
+    const { id } = request.params as { id: string }
+    const { name, description, permissionSlugs } = request.body as {
+      name?: string
+      description?: string
+      permissionSlugs?: string[]
+    }
+
+    const role = await RbacService.updateRole(app.db, request.companyId, id, {
+      name,
+      description,
+      permissionSlugs,
+    })
+
+    if (!role) return reply.status(404).send({ error: { message: 'Role not found', statusCode: 404 } })
+    request.log.info({ roleId: id, userId: request.user.id }, 'Role updated')
+    return reply.send(role)
+  })
+
+  app.delete('/roles/:id', { preHandler: [app.authenticate, app.requirePermission('users.admin')] }, async (request, reply) => {
+    const { id } = request.params as { id: string }
+    const role = await RbacService.deleteRole(app.db, request.companyId, id)
+    if (!role) return reply.status(404).send({ error: { message: 'Role not found', statusCode: 404 } })
+    request.log.info({ roleId: id, roleName: role.name, userId: request.user.id }, 'Role deleted')
+    return reply.send(role)
+  })
+
+  // --- User Role Assignments ---
+
+  app.get('/users/:userId/roles', { preHandler: [app.authenticate, app.requirePermission('users.view')] }, async (request, reply) => {
+    const { userId } = request.params as { userId: string }
+    const data = await RbacService.getUserRoles(app.db, userId)
+    return reply.send({ data })
+  })
+
+  app.post('/users/:userId/roles', { preHandler: [app.authenticate, app.requirePermission('users.edit')] }, async (request, reply) => {
+    const { userId } = request.params as { userId: string }
+    const { roleId } = request.body as { roleId?: string }
+
+    if (!roleId) throw new ValidationError('roleId is required')
+
+    const assignment = await RbacService.assignRole(app.db, userId, roleId, request.user.id)
+    request.log.info({ userId, roleId, assignedBy: request.user.id }, 'Role assigned to user')
+    return reply.status(201).send(assignment)
+  })
+
+  app.delete('/users/:userId/roles/:roleId', { preHandler: [app.authenticate, app.requirePermission('users.edit')] }, async (request, reply) => {
+    const { userId, roleId } = request.params as { userId: string; roleId: string }
+    const removed = await RbacService.removeRole(app.db, userId, roleId)
+    if (!removed) return reply.status(404).send({ error: { message: 'Role assignment not found', statusCode: 404 } })
+    request.log.info({ userId, roleId, removedBy: request.user.id }, 'Role removed from user')
+    return reply.send(removed)
+  })
+
+  // --- Current user permissions ---
+
+  app.get('/me/permissions', { preHandler: [app.authenticate] }, async (request, reply) => {
+    const permSlugs = await RbacService.getUserPermissions(app.db, request.user.id)
+    const userRoles = await RbacService.getUserRoles(app.db, request.user.id)
+    return reply.send({
+      permissions: permSlugs,
+      roles: userRoles,
+    })
+  })
+}