feat(rbac): add roles and permissions

frontend/athena/components/users/UserFormDialog.tsx

@@ -14,20 +14,16 @@ import {
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
+import type { Role } from "@/types/rbac";
 import type { User, UserPayload, UserRole } from "@/types/user";
 
-const roles: Array<{ value: UserRole; label: string }> = [
-  { value: "admin", label: "Admin" },
-  { value: "manager", label: "Manager" },
-  { value: "user", label: "Benutzer" },
-];
-
 const emptyForm: UserPayload = {
   first_name: "",
   last_name: "",
   username: "",
   email: "",
-  role: "user",
+  role: "support",
+  role_id: undefined,
   is_active: true,
   password: "",
 };
@@ -37,6 +33,7 @@ type Props = {
   user?: User | null;
   pending?: boolean;
   serverError?: string;
+  roles: Role[];
   onOpenChange: (open: boolean) => void;
   onSubmit: (payload: UserPayload) => Promise<void>;
 };
@@ -46,6 +43,7 @@ export default function UserFormDialog({
   user,
   pending = false,
   serverError,
+  roles,
   onOpenChange,
   onSubmit,
 }: Props) {
@@ -57,10 +55,15 @@ export default function UserFormDialog({
         username: user.username,
         email: user.email,
         role: user.role,
+        role_id: user.role_id,
         is_active: user.is_active,
         password: "",
       }
-    : emptyForm;
+    : {
+        ...emptyForm,
+        role: roles[0]?.name ?? "support",
+        role_id: roles[0]?.id,
+      };
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
@@ -72,6 +75,7 @@ export default function UserFormDialog({
             isEditing={isEditing}
             pending={pending}
             serverError={serverError}
+            roles={roles}
             onCancel={() => onOpenChange(false)}
             onSubmit={onSubmit}
           />
@@ -86,6 +90,7 @@ function UserForm({
   isEditing,
   pending,
   serverError,
+  roles,
   onCancel,
   onSubmit,
 }: {
@@ -93,6 +98,7 @@ function UserForm({
   isEditing: boolean;
   pending: boolean;
   serverError?: string;
+  roles: Role[];
   onCancel: () => void;
   onSubmit: (payload: UserPayload) => Promise<void>;
 }) {
@@ -179,13 +185,17 @@ function UserForm({
 
             <Field label="Rolle">
               <select
-                value={form.role}
-                onChange={(event) => updateField("role", event.target.value as UserRole)}
+                value={form.role_id ?? ""}
+                onChange={(event) => {
+                  const role = roles.find((item) => item.id === Number(event.target.value));
+                  updateField("role_id", role?.id);
+                  updateField("role", (role?.name ?? "") as UserRole);
+                }}
                 className="h-8 w-full rounded-lg border border-input bg-transparent px-2.5 text-sm outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"
               >
                 {roles.map((role) => (
-                  <option key={role.value} value={role.value}>
-                    {role.label}
+                  <option key={role.id} value={role.id}>
+                    {role.display_name}
                   </option>
                 ))}
               </select>