@open-kingdom/shared-frontend-feature-user-management 0.0.2-14 → 0.0.2-17

package/dist/index.js

@@ -1,410 +1,356 @@
 import { jsx as e, jsxs as i } from "react/jsx-runtime";
-import { useCallback as P, useState as I, useMemo as V } from "react";
-import { useDispatch as U } from "react-redux";
-import { useInvitationsControllerInviteMutation as B, useInvitationsControllerValidateQuery as E, useInvitationsControllerAcceptMutation as G, useUsersControllerFindAllQuery as q, useUsersControllerDeleteMutation as z } from "@open-kingdom/shared-frontend-data-access-api-client";
-import { showSuccessNotification as F } from "@open-kingdom/shared-frontend-data-access-notifications";
-import { DataGrid as Y } from "@open-kingdom/shared-frontend-ui-datagrid";
-import { useTheme as O } from "@open-kingdom/shared-frontend-ui-theme";
-import { useKeyboardEvent as Q } from "@react-hookz/web";
-import { useForm as A } from "react-hook-form";
-import { zodResolver as L } from "@hookform/resolvers/zod";
-import { z as p } from "zod";
-function j({
+import { useState as N, useMemo as R, useCallback as W } from "react";
+import { useDispatch as I } from "react-redux";
+import { useInvitationsControllerInviteMutation as X, useRolesControllerFindAllQuery as F, useInvitationsControllerValidateQuery as Z, useInvitationsControllerAcceptMutation as _, useInvitationsControllerFindAllQuery as ee, useInvitationsControllerCancelMutation as te, useUserRolesControllerSetRolesMutation as ne, useAuthControllerGetProfileQuery as ie, useUsersControllerFindAllQuery as ae, useUsersControllerDeleteMutation as se, usePermissionsControllerFindAllQuery as re, useRolesControllerGetPermissionsQuery as le, useRolesControllerSetPermissionsMutation as oe, useRolesControllerDeleteMutation as de } from "@open-kingdom/shared-frontend-data-access-api-client";
+import { showSuccessNotification as A } from "@open-kingdom/shared-frontend-data-access-notifications";
+import { DataGrid as U } from "@open-kingdom/shared-frontend-ui-datagrid";
+import { AlertDialog as ce, AlertDialogContent as ue, AlertDialogHeader as me, AlertDialogTitle as fe, AlertDialogDescription as he, AlertDialogFooter as pe, AlertDialogCancel as ge, AlertDialogAction as ve, Badge as V, Label as be, Dialog as j, DialogContent as E, DialogHeader as O, DialogTitle as G, Input as P, Button as w, Card as M, CardContent as T, DialogDescription as $ } from "@open-kingdom/shared-frontend-ui-primitives";
+import { useForm as B } from "react-hook-form";
+import { zodResolver as q } from "@hookform/resolvers/zod";
+import { z as C } from "zod";
+import { formatDate as z } from "@open-kingdom/shared-poly-util-date";
+import { useDeepCompareEffect as H } from "@react-hookz/web";
+function Q({
   isOpen: t,
-  onClose: a,
-  ariaLabelledBy: r,
-  children: s
+  title: n,
+  message: s,
+  confirmLabel: m = "Confirm",
+  onConfirm: f,
+  onCancel: b,
+  isLoading: d = !1
 }) {
-  Q("Escape", () => {
-    t && a();
-  });
-  const n = P((l) => {
-    l?.focus();
-  }, []);
-  return t ? /* @__PURE__ */ e(
-    "div",
+  return /* @__PURE__ */ e(
+    ce,
     {
-      className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50",
-      onClick: a,
-      children: /* @__PURE__ */ e(
-        "div",
-        {
-          ref: n,
-          className: "w-full max-w-md rounded-lg bg-white p-6 shadow-xl dark:bg-neutral-800",
-          role: "dialog",
-          "aria-modal": "true",
-          "aria-labelledby": r,
-          tabIndex: -1,
-          onClick: (l) => l.stopPropagation(),
-          children: s
-        }
-      )
+      open: t,
+      onOpenChange: (l) => !l && b(),
+      children: /* @__PURE__ */ i(ue, { children: [
+        /* @__PURE__ */ i(me, { children: [
+          /* @__PURE__ */ e(fe, { children: n }),
+          /* @__PURE__ */ e(he, { children: s })
+        ] }),
+        /* @__PURE__ */ i(pe, { children: [
+          /* @__PURE__ */ e(
+            ge,
+            {
+              "data-testid": "confirm-cancel-btn",
+              disabled: d,
+              onClick: b,
+              children: "Cancel"
+            }
+          ),
+          /* @__PURE__ */ e(
+            ve,
+            {
+              "data-testid": "confirm-btn",
+              disabled: d,
+              onClick: f,
+              className: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+              children: m
+            }
+          )
+        ] })
+      ] })
     }
-  ) : null;
-}
-const b = "w-full px-3 py-2 border border-neutral-300 dark:border-neutral-600 rounded-md bg-white dark:bg-neutral-700 text-neutral-900 dark:text-neutral-100", J = "block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1", k = "max-w-md mx-auto mt-8 p-6 bg-white dark:bg-neutral-800 rounded-lg shadow-lg", S = "text-neutral-600 dark:text-neutral-400", C = "rounded-md px-4 py-2 text-sm font-medium transition-colors", D = `${C} bg-primary-500 text-white hover:bg-primary-600 disabled:opacity-50`, M = `${C} border border-neutral-300 text-neutral-700 hover:bg-neutral-50 dark:border-neutral-600 dark:text-neutral-300 dark:hover:bg-neutral-700`, K = `${C} bg-error-500 text-white hover:bg-error-600 disabled:opacity-50`;
-function H({
-  isOpen: t,
-  title: a,
-  message: r,
-  confirmLabel: s = "Confirm",
-  onConfirm: n,
-  onCancel: l,
-  isLoading: o = !1
-}) {
-  const d = "confirm-dialog-title";
-  return /* @__PURE__ */ i(j, { isOpen: t, onClose: l, ariaLabelledBy: d, children: [
-    /* @__PURE__ */ e(
-      "h3",
-      {
-        id: d,
-        className: "text-lg font-semibold text-neutral-900 dark:text-neutral-100",
-        children: a
-      }
-    ),
-    /* @__PURE__ */ e("p", { className: "mt-2 text-sm text-neutral-600 dark:text-neutral-400", children: r }),
-    /* @__PURE__ */ i("div", { className: "mt-6 flex justify-end gap-3", children: [
-      /* @__PURE__ */ e(
-        "button",
-        {
-          type: "button",
-          "data-testid": "confirm-cancel-btn",
-          onClick: l,
-          disabled: o,
-          className: M,
-          children: "Cancel"
-        }
-      ),
-      /* @__PURE__ */ e(
-        "button",
-        {
-          type: "button",
-          "data-testid": "confirm-btn",
-          onClick: n,
-          disabled: o,
-          className: K,
-          children: s
-        }
-      )
-    ] })
-  ] });
+  );
 }
-const W = {
-  admin: "bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300",
-  user: "bg-primary-100 text-primary-800 dark:bg-primary-900/30 dark:text-primary-300",
-  guest: "bg-neutral-100 text-neutral-700 dark:bg-neutral-700 dark:text-neutral-300"
+const xe = {
+  admin: "secondary",
+  user: "default",
+  guest: "muted"
 };
-function X({ role: t }) {
+function Y({ role: t }) {
   if (!t) return null;
-  const a = t.charAt(0).toUpperCase() + t.slice(1);
-  return /* @__PURE__ */ e(
-    "span",
-    {
-      className: `inline-block rounded-full px-2.5 py-0.5 text-xs font-medium ${W[t]}`,
-      children: a
-    }
-  );
+  const n = t.charAt(0).toUpperCase() + t.slice(1);
+  return /* @__PURE__ */ e(V, { variant: xe[t] ?? "default", children: n });
 }
-function x({
+function D({
   label: t,
-  htmlFor: a,
-  required: r,
-  error: s,
-  children: n
+  htmlFor: n,
+  required: s,
+  error: m,
+  children: f
 }) {
   return /* @__PURE__ */ i("div", { children: [
-    /* @__PURE__ */ i("label", { htmlFor: a, className: J, children: [
+    /* @__PURE__ */ i(be, { htmlFor: n, className: "mb-1", children: [
       t,
       " ",
-      r && /* @__PURE__ */ e("span", { className: "text-error-500", children: "*" })
+      s && /* @__PURE__ */ e("span", { className: "text-destructive", children: "*" })
     ] }),
-    n,
-    s && /* @__PURE__ */ e(
-      "p",
-      {
-        "data-testid": "field-error",
-        className: "mt-1 text-sm text-error-600 dark:text-error-400",
-        children: s
-      }
-    )
+    f,
+    m && /* @__PURE__ */ e("p", { "data-testid": "field-error", className: "mt-1 text-sm text-destructive", children: m })
   ] });
 }
-const Z = p.object({
-  email: p.string().email("Invalid email address"),
-  role: p.enum(["guest", "user", "admin"])
+const ye = C.object({
+  email: C.string().email("Invalid email address"),
+  role: C.string().min(1)
 });
-function _({ isOpen: t, onClose: a }) {
-  const r = U(), [s, { isLoading: n }] = B(), {
+function Ce({ isOpen: t, onClose: n }) {
+  const s = I(), [m, { isLoading: f }] = X(), { data: b } = F(), d = b ?? [], {
     register: l,
-    handleSubmit: o,
-    reset: d,
-    formState: { errors: c }
-  } = A({
-    resolver: L(Z),
+    handleSubmit: r,
+    reset: c,
+    formState: { errors: g }
+  } = B({
+    resolver: q(ye),
     defaultValues: { email: "", role: "guest" }
-  }), h = "invite-modal-title", f = () => {
-    d(), a();
+  }), a = () => {
+    c(), n();
   };
-  return /* @__PURE__ */ i(
+  return /* @__PURE__ */ e(
     j,
     {
-      isOpen: t,
-      onClose: f,
-      ariaLabelledBy: h,
-      children: [
-        /* @__PURE__ */ e(
-          "h3",
-          {
-            id: h,
-            className: "text-lg font-semibold text-neutral-900 dark:text-neutral-100",
-            children: "Invite User"
-          }
-        ),
-        /* @__PURE__ */ i("form", { onSubmit: o(async (m) => {
+      open: t,
+      onOpenChange: (u) => !u && a(),
+      children: /* @__PURE__ */ i(E, { children: [
+        /* @__PURE__ */ e(O, { children: /* @__PURE__ */ e(G, { children: "Invite User" }) }),
+        /* @__PURE__ */ i("form", { onSubmit: r(async (u) => {
           try {
-            await s({ inviteUserDto: m }).unwrap(), r(F("Invitation sent successfully")), d(), a();
+            await m({ inviteUserDto: u }).unwrap(), s(A("Invitation sent successfully")), c(), n();
           } catch {
           }
-        }), className: "mt-4 space-y-4", children: [
+        }), className: "space-y-4", children: [
           /* @__PURE__ */ e(
-            x,
+            D,
             {
               label: "Email",
               htmlFor: "invite-email",
               required: !0,
-              error: c.email?.message,
+              error: g.email?.message,
               children: /* @__PURE__ */ e(
-                "input",
+                P,
                 {
                   id: "invite-email",
                   "data-testid": "invite-email-input",
                   type: "email",
                   placeholder: "user@example.com",
-                  className: b,
                   ...l("email")
                 }
               )
             }
           ),
-          /* @__PURE__ */ e(x, { label: "Role", htmlFor: "invite-role", children: /* @__PURE__ */ i(
+          /* @__PURE__ */ e(D, { label: "Role", htmlFor: "invite-role", children: /* @__PURE__ */ e(
             "select",
             {
               id: "invite-role",
               "data-testid": "invite-role-select",
-              className: b,
+              className: "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
               ...l("role"),
-              children: [
-                /* @__PURE__ */ e("option", { value: "guest", children: "Guest" }),
-                /* @__PURE__ */ e("option", { value: "user", children: "User" }),
-                /* @__PURE__ */ e("option", { value: "admin", children: "Admin" })
-              ]
+              children: d.map((u) => /* @__PURE__ */ e("option", { value: u.name, children: u.name.charAt(0).toUpperCase() + u.name.slice(1) }, u.id))
             }
           ) }),
           /* @__PURE__ */ i("div", { className: "flex justify-end gap-3", children: [
             /* @__PURE__ */ e(
-              "button",
+              w,
               {
                 type: "button",
+                variant: "secondary",
                 "data-testid": "invite-cancel-btn",
-                onClick: f,
-                disabled: n,
-                className: M,
+                onClick: a,
+                disabled: f,
                 children: "Cancel"
               }
             ),
             /* @__PURE__ */ e(
-              "button",
+              w,
               {
                 type: "submit",
                 "data-testid": "invite-submit-btn",
-                disabled: n,
-                className: D,
-                children: n ? "Sending..." : "Send Invitation"
+                disabled: f,
+                children: f ? "Sending..." : "Send Invitation"
               }
             )
           ] })
         ] })
-      ]
+      ] })
     }
   );
 }
-const ee = {
-  error: "text-xl font-bold text-error-700 dark:text-error-400",
-  success: "text-xl font-bold text-success-700 dark:text-success-400"
+const Ne = {
+  error: "text-xl font-bold text-destructive",
+  success: "text-xl font-bold text-success"
 };
-function w({
+function k({
   variant: t,
-  title: a,
-  message: r,
-  children: s
+  title: n,
+  message: s,
+  children: m
 }) {
-  return t === "loading" ? /* @__PURE__ */ e("div", { className: k, children: /* @__PURE__ */ e("p", { className: `text-center ${S}`, children: r }) }) : /* @__PURE__ */ i(
-    "div",
+  return t === "loading" ? /* @__PURE__ */ e(M, { className: "max-w-md mx-auto mt-8", children: /* @__PURE__ */ e(T, { className: "pt-6", children: /* @__PURE__ */ e("p", { className: "text-center text-muted-foreground", children: s }) }) }) : /* @__PURE__ */ e(
+    M,
     {
-      className: k,
+      className: "max-w-md mx-auto mt-8",
       role: t === "error" ? "alert" : void 0,
-      children: [
-        a && /* @__PURE__ */ e("h2", { "data-testid": "status-card-title", className: ee[t], children: a }),
-        /* @__PURE__ */ e("p", { "data-testid": "status-card-message", className: `mt-2 ${S}`, children: r }),
-        s
-      ]
+      children: /* @__PURE__ */ i(T, { className: "pt-6", children: [
+        n && /* @__PURE__ */ e(
+          "h2",
+          {
+            "data-testid": "status-card-title",
+            className: Ne[t],
+            children: n
+          }
+        ),
+        /* @__PURE__ */ e(
+          "p",
+          {
+            "data-testid": "status-card-message",
+            className: "mt-2 text-muted-foreground",
+            children: s
+          }
+        ),
+        m
+      ] })
     }
   );
 }
-const te = p.object({
-  firstName: p.string().optional(),
-  lastName: p.string().optional(),
-  password: p.string().min(8, "Password must be at least 8 characters"),
-  confirmPassword: p.string()
+const we = C.object({
+  firstName: C.string().optional(),
+  lastName: C.string().optional(),
+  password: C.string().min(8, "Password must be at least 8 characters"),
+  confirmPassword: C.string()
 }).refine((t) => t.password === t.confirmPassword, {
   message: "Passwords do not match",
   path: ["confirmPassword"]
 });
-function pe({ token: t, loginPath: a }) {
+function Ye({ token: t, loginPath: n }) {
   const {
-    data: r,
-    isLoading: s,
-    error: n
-  } = E({ token: t }), [l, { isLoading: o, isSuccess: d }] = G(), {
-    register: c,
-    handleSubmit: h,
-    formState: { errors: f }
-  } = A({
-    resolver: L(te),
+    data: s,
+    isLoading: m,
+    error: f
+  } = Z({ token: t }), [b, { isLoading: d, isSuccess: l }] = _(), {
+    register: r,
+    handleSubmit: c,
+    formState: { errors: g }
+  } = B({
+    resolver: q(we),
     defaultValues: {
       firstName: "",
       lastName: "",
       password: "",
       confirmPassword: ""
     }
-  }), g = r?.email ?? "", m = r?.role ?? "user", v = async (y) => {
+  }), a = s?.email ?? "", v = async (u) => {
     try {
-      await l({
+      await b({
         acceptInvitationDto: {
           token: t,
-          password: y.password,
-          firstName: y.firstName || void 0,
-          lastName: y.lastName || void 0
+          password: u.password,
+          firstName: u.firstName || void 0,
+          lastName: u.lastName || void 0
         }
       }).unwrap();
     } catch {
     }
   };
-  return d ? /* @__PURE__ */ e(
-    w,
+  return l ? /* @__PURE__ */ e(
+    k,
     {
       variant: "success",
       title: "Account Created",
       message: "Your account has been created successfully. You can now log in with your email and password.",
-      children: a && /* @__PURE__ */ e(
+      children: n && /* @__PURE__ */ e(
         "a",
         {
-          href: a,
+          href: n,
           "data-testid": "accept-login-link",
-          className: "mt-4 inline-block text-sm font-medium text-primary-600 hover:underline dark:text-primary-400",
+          className: "mt-4 inline-block text-sm font-medium text-primary hover:underline",
           children: "Go to login"
         }
       )
     }
-  ) : s ? /* @__PURE__ */ e(w, { variant: "loading", message: "Validating invitation..." }) : n ? /* @__PURE__ */ e(
-    w,
+  ) : m ? /* @__PURE__ */ e(k, { variant: "loading", message: "Validating invitation..." }) : f ? /* @__PURE__ */ e(
+    k,
     {
       variant: "error",
       title: "Validation Failed",
       message: "Unable to validate this invitation. Please check your connection and try again."
     }
-  ) : r?.valid ? /* @__PURE__ */ i("div", { className: k, children: [
+  ) : s?.valid ? /* @__PURE__ */ e(M, { className: "max-w-md mx-auto mt-8", children: /* @__PURE__ */ i(T, { className: "pt-6", children: [
     /* @__PURE__ */ e(
       "h2",
       {
         "data-testid": "accept-heading",
-        className: "text-xl font-bold text-neutral-900 dark:text-neutral-100",
+        className: "text-xl font-bold text-foreground",
         children: "Accept Invitation"
       }
     ),
-    /* @__PURE__ */ i("p", { className: `mt-1 text-sm ${S}`, children: [
-      "You've been invited as ",
-      /* @__PURE__ */ e("strong", { "data-testid": "accept-role", children: m }),
+    /* @__PURE__ */ i("p", { className: "mt-1 text-sm text-muted-foreground", children: [
+      "You've been invited with email",
       " ",
-      "with email ",
-      /* @__PURE__ */ e("strong", { "data-testid": "accept-email", children: g })
+      /* @__PURE__ */ e("strong", { "data-testid": "accept-email", children: a })
     ] }),
-    /* @__PURE__ */ i("form", { onSubmit: h(v), className: "mt-4 space-y-4", children: [
-      /* @__PURE__ */ e(x, { label: "First Name", htmlFor: "accept-firstName", children: /* @__PURE__ */ e(
-        "input",
+    /* @__PURE__ */ i("form", { onSubmit: c(v), className: "mt-4 space-y-4", children: [
+      /* @__PURE__ */ e(D, { label: "First Name", htmlFor: "accept-firstName", children: /* @__PURE__ */ e(
+        P,
         {
           id: "accept-firstName",
           "data-testid": "accept-first-name-input",
           type: "text",
           placeholder: "John",
-          className: b,
-          ...c("firstName")
+          ...r("firstName")
         }
       ) }),
-      /* @__PURE__ */ e(x, { label: "Last Name", htmlFor: "accept-lastName", children: /* @__PURE__ */ e(
-        "input",
+      /* @__PURE__ */ e(D, { label: "Last Name", htmlFor: "accept-lastName", children: /* @__PURE__ */ e(
+        P,
         {
           id: "accept-lastName",
           "data-testid": "accept-last-name-input",
           type: "text",
           placeholder: "Doe",
-          className: b,
-          ...c("lastName")
+          ...r("lastName")
         }
       ) }),
       /* @__PURE__ */ e(
-        x,
+        D,
         {
           label: "Password",
           htmlFor: "accept-password",
           required: !0,
-          error: f.password?.message,
+          error: g.password?.message,
           children: /* @__PURE__ */ e(
-            "input",
+            P,
             {
               id: "accept-password",
               "data-testid": "accept-password-input",
               type: "password",
               placeholder: "Min. 8 characters",
-              className: b,
-              ...c("password")
+              ...r("password")
             }
           )
         }
       ),
       /* @__PURE__ */ e(
-        x,
+        D,
         {
           label: "Confirm Password",
           htmlFor: "accept-confirmPassword",
           required: !0,
-          error: f.confirmPassword?.message,
+          error: g.confirmPassword?.message,
           children: /* @__PURE__ */ e(
-            "input",
+            P,
             {
               id: "accept-confirmPassword",
               "data-testid": "accept-confirm-password-input",
               type: "password",
               placeholder: "Repeat password",
-              className: b,
-              ...c("confirmPassword")
+              ...r("confirmPassword")
             }
           )
         }
       ),
       /* @__PURE__ */ e(
-        "button",
+        w,
         {
           type: "submit",
           "data-testid": "accept-submit-btn",
-          disabled: o,
-          className: `w-full ${D}`,
-          children: o ? "Creating account..." : "Create Account"
+          disabled: d,
+          className: "w-full",
+          children: d ? "Creating account..." : "Create Account"
         }
       )
     ] })
-  ] }) : /* @__PURE__ */ e(
-    w,
+  ] }) }) : /* @__PURE__ */ e(
+    k,
     {
       variant: "error",
       title: "Invalid Invitation",
@@ -412,69 +358,284 @@ function pe({ token: t, loginPath: a }) {
     }
   );
 }
-function he({ currentUserId: t }) {
-  const a = U(), { theme: r, mode: s } = O(), { data: n, isLoading: l, error: o, refetch: d } = q(), [c, { isLoading: h }] = z(), [f, g] = I(!1), [m, v] = I(null), y = n ?? [], $ = P(async () => {
-    if (m)
+const De = {
+  pending: "warning",
+  accepted: "success",
+  expired: "muted"
+};
+function Se({ status: t }) {
+  if (!t) return null;
+  const n = t.charAt(0).toUpperCase() + t.slice(1);
+  return /* @__PURE__ */ e(V, { variant: De[t], children: n });
+}
+const Re = {
+  field: "email",
+  headerName: "Email",
+  flex: 2
+};
+function Ie(t) {
+  return {
+    headerName: "Role",
+    flex: 1,
+    cellRenderer: (n) => n.data ? /* @__PURE__ */ e(Y, { role: t.get(n.data.roleId) ?? null }) : null
+  };
+}
+const Ae = {
+  field: "status",
+  headerName: "Status",
+  flex: 1,
+  cellRenderer: (t) => t.data ? /* @__PURE__ */ e(Se, { status: t.data.status }) : null
+}, Pe = {
+  headerName: "Invited",
+  flex: 1,
+  valueGetter: (t) => z(t.data?.invitedAt)
+}, ke = {
+  headerName: "Expires",
+  flex: 1,
+  valueGetter: (t) => z(t.data?.tokenExpiry)
+};
+function Le(t) {
+  return {
+    headerName: "Actions",
+    flex: 1,
+    sortable: !1,
+    filter: !1,
+    cellRenderer: (n) => n.data ? /* @__PURE__ */ e(
+      "button",
+      {
+        onClick: () => n.data && t(n.data),
+        className: "text-destructive text-xs font-medium rounded px-2 py-1 transition-colors hover:bg-destructive/10 disabled:cursor-not-allowed disabled:opacity-40",
+        children: "Cancel"
+      }
+    ) : null
+  };
+}
+function Fe(t, n) {
+  return [
+    Re,
+    Ie(n),
+    Ae,
+    Pe,
+    ke,
+    Le(t)
+  ];
+}
+function Je() {
+  const t = I(), { data: n, isLoading: s, error: m, refetch: f } = ee(), [b, { isLoading: d }] = te(), { data: l } = F(), [r, c] = N(null), g = n ?? [], a = R(() => {
+    const y = l ?? [];
+    return new Map(y.map((o) => [o.id, o.name]));
+  }, [l]);
+  async function v() {
+    if (r)
+      try {
+        await b({ id: r.id }).unwrap(), t(A("Invitation cancelled successfully"));
+      } catch {
+      } finally {
+        c(null);
+      }
+  }
+  const u = R(
+    () => Fe(c, a),
+    [a]
+  );
+  return m ? /* @__PURE__ */ i(
+    "div",
+    {
+      "data-testid": "invitations-error",
+      className: "rounded-lg bg-destructive/10 p-6 text-center",
+      role: "alert",
+      children: [
+        /* @__PURE__ */ e("p", { className: "text-destructive", children: "Failed to load invitations." }),
+        /* @__PURE__ */ e(
+          "button",
+          {
+            "data-testid": "invitations-retry-btn",
+            onClick: f,
+            className: "mt-2 text-sm font-medium text-primary hover:underline",
+            children: "Try again"
+          }
+        )
+      ]
+    }
+  ) : /* @__PURE__ */ i("div", { children: [
+    /* @__PURE__ */ e("div", { className: "mb-4 flex items-center justify-between", children: /* @__PURE__ */ e(
+      "h2",
+      {
+        "data-testid": "invitations-heading",
+        className: "text-xl font-semibold text-foreground",
+        children: "Invitations"
+      }
+    ) }),
+    /* @__PURE__ */ e(
+      U,
+      {
+        rowData: g,
+        columnDefs: u,
+        loading: s
+      }
+    ),
+    /* @__PURE__ */ e(
+      Q,
+      {
+        isOpen: !!r,
+        title: "Cancel Invitation",
+        message: `Are you sure you want to cancel the invitation for ${r?.email}? This action cannot be undone.`,
+        confirmLabel: d ? "Cancelling..." : "Cancel Invitation",
+        onConfirm: v,
+        onCancel: () => c(null),
+        isLoading: d
+      }
+    )
+  ] });
+}
+function Me({
+  isOpen: t,
+  onClose: n,
+  user: s
+}) {
+  const m = I(), { data: f } = F(), [b, { isLoading: d }] = ne(), l = R(
+    () => f ?? [],
+    [f]
+  ), [r, c] = N(null);
+  H(() => {
+    if (!l.length) return;
+    const a = l.find((v) => v.name === s.role);
+    c(a?.id ?? null);
+  }, [l, s.role]);
+  const g = async (a) => {
+    if (a.preventDefault(), r !== null)
+      try {
+        await b({
+          userId: s.id,
+          updateUserRolesDto: { roleIds: [r] }
+        }).unwrap(), m(A("Role updated successfully")), n();
+      } catch {
+      }
+  };
+  return /* @__PURE__ */ e(j, { open: t, onOpenChange: (a) => !a && n(), children: /* @__PURE__ */ i(E, { children: [
+    /* @__PURE__ */ i(O, { children: [
+      /* @__PURE__ */ e(G, { children: "Change Role" }),
+      /* @__PURE__ */ i($, { children: [
+        "Changing role for ",
+        /* @__PURE__ */ e("strong", { children: s.email })
+      ] })
+    ] }),
+    /* @__PURE__ */ i("form", { onSubmit: g, className: "space-y-4", children: [
+      /* @__PURE__ */ e(D, { label: "Role", htmlFor: "role-select", children: /* @__PURE__ */ e(
+        "select",
+        {
+          id: "role-select",
+          "data-testid": "role-select",
+          className: "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+          value: r ?? "",
+          onChange: (a) => c(Number(a.target.value)),
+          children: l.map((a) => /* @__PURE__ */ e("option", { value: a.id, children: a.name.charAt(0).toUpperCase() + a.name.slice(1) }, a.id))
+        }
+      ) }),
+      /* @__PURE__ */ i("div", { className: "flex justify-end gap-3", children: [
+        /* @__PURE__ */ e(
+          w,
+          {
+            type: "button",
+            variant: "secondary",
+            "data-testid": "role-change-cancel-btn",
+            onClick: n,
+            disabled: d,
+            children: "Cancel"
+          }
+        ),
+        /* @__PURE__ */ e(
+          w,
+          {
+            type: "submit",
+            "data-testid": "role-change-submit-btn",
+            disabled: d || r === null,
+            children: d ? "Saving..." : "Save"
+          }
+        )
+      ] })
+    ] })
+  ] }) });
+}
+function L(t, n) {
+  const { data: s } = ie();
+  return s?.permissions ? s.permissions.includes(`${t}:${n}`) : !1;
+}
+function Ke({ currentUserId: t }) {
+  const n = I(), { data: s, isLoading: m, error: f, refetch: b } = ae(), [d, { isLoading: l }] = se(), r = L("users", "delete"), c = L("roles", "update"), [g, a] = N(!1), [v, u] = N(null), [y, o] = N(null), p = s ?? [], h = W(async () => {
+    if (v)
       try {
-        await c({ id: m.id }).unwrap(), a(F("User deleted successfully"));
+        await d({ id: v.id }).unwrap(), n(A("User deleted successfully"));
       } catch {
       } finally {
-        v(null);
+        u(null);
       }
-  }, [m, c, a]), R = V(
+  }, [v, d, n]), J = R(
     () => [
       { field: "email", headerName: "Email", flex: 2 },
       {
         headerName: "Name",
         flex: 2,
-        valueGetter: (u) => {
-          const { firstName: N, lastName: T } = u.data ?? {};
-          return [N, T].filter(Boolean).join(" ") || "—";
+        valueGetter: (x) => {
+          const { firstName: S, lastName: K } = x.data ?? {};
+          return [S, K].filter(Boolean).join(" ") || "—";
         }
       },
       {
         field: "role",
         headerName: "Role",
         flex: 1,
-        cellRenderer: (u) => u.data ? /* @__PURE__ */ e(X, { role: u.data.role }) : null
+        cellRenderer: (x) => x.data ? /* @__PURE__ */ e(Y, { role: x.data.role }) : null
       },
       {
         headerName: "Actions",
         flex: 1,
         sortable: !1,
         filter: !1,
-        cellRenderer: (u) => {
-          if (!u.data) return null;
-          const N = u.data.id === t;
-          return /* @__PURE__ */ e(
-            "button",
-            {
-              onClick: () => u.data && v(u.data),
-              disabled: N,
-              title: N ? "Cannot delete your own account" : "Delete user",
-              className: "rounded px-2 py-1 text-xs font-medium text-error-600 transition-colors hover:bg-error-50 disabled:cursor-not-allowed disabled:opacity-40 dark:text-error-400 dark:hover:bg-error-900/20",
-              children: "Delete"
-            }
-          );
+        cellRenderer: (x) => {
+          if (!x.data) return null;
+          const S = x.data.id === t;
+          return /* @__PURE__ */ i("div", { className: "flex gap-1", children: [
+            c && /* @__PURE__ */ e(
+              "button",
+              {
+                onClick: () => x.data && o(x.data),
+                disabled: S,
+                title: S ? "Cannot change your own role" : "Change user role",
+                className: "rounded px-2 py-1 text-xs font-medium text-primary transition-colors hover:bg-primary/10 disabled:cursor-not-allowed disabled:opacity-40",
+                children: "Change Role"
+              }
+            ),
+            r && /* @__PURE__ */ e(
+              "button",
+              {
+                onClick: () => x.data && u(x.data),
+                disabled: S,
+                title: S ? "Cannot delete your own account" : "Delete user",
+                className: "rounded px-2 py-1 text-xs font-medium text-destructive transition-colors hover:bg-destructive/10 disabled:cursor-not-allowed disabled:opacity-40",
+                children: "Delete"
+              }
+            )
+          ] });
         }
       }
     ],
-    [t]
+    [t, c, r]
   );
-  return o ? /* @__PURE__ */ i(
+  return f ? /* @__PURE__ */ i(
     "div",
     {
       "data-testid": "users-error",
-      className: "rounded-lg bg-error-50 p-6 text-center dark:bg-error-900/20",
+      className: "rounded-lg bg-destructive/10 p-6 text-center",
       role: "alert",
       children: [
-        /* @__PURE__ */ e("p", { className: "text-error-700 dark:text-error-300", children: "Failed to load users." }),
+        /* @__PURE__ */ e("p", { className: "text-destructive", children: "Failed to load users." }),
         /* @__PURE__ */ e(
           "button",
           {
             "data-testid": "users-retry-btn",
-            onClick: d,
-            className: "mt-2 text-sm font-medium text-primary-600 hover:underline dark:text-primary-400",
+            onClick: b,
+            className: "mt-2 text-sm font-medium text-primary hover:underline",
             children: "Try again"
           }
         )
@@ -486,53 +647,258 @@ function he({ currentUserId: t }) {
         "h2",
         {
           "data-testid": "users-heading",
-          className: "text-xl font-semibold text-neutral-900 dark:text-neutral-100",
+          className: "text-xl font-semibold text-foreground",
           children: "Users"
         }
       ),
       /* @__PURE__ */ e(
-        "button",
+        w,
         {
           "data-testid": "invite-user-btn",
-          onClick: () => g(!0),
-          className: D,
+          onClick: () => a(!0),
           children: "Invite User"
         }
       )
     ] }),
+    /* @__PURE__ */ e(U, { rowData: p, columnDefs: J, loading: m }),
     /* @__PURE__ */ e(
-      Y,
+      Ce,
       {
-        rowData: y,
-        columnDefs: R,
-        mode: s,
-        theme: r,
-        loading: l
+        isOpen: g,
+        onClose: () => a(!1)
       }
     ),
     /* @__PURE__ */ e(
-      _,
+      Me,
       {
-        isOpen: f,
-        onClose: () => g(!1)
+        isOpen: !!y,
+        onClose: () => o(null),
+        user: {
+          id: y?.id ?? 0,
+          email: y?.email ?? "",
+          role: y?.role ?? ""
+        }
       }
     ),
     /* @__PURE__ */ e(
-      H,
+      Q,
       {
-        isOpen: !!m,
+        isOpen: !!v,
         title: "Delete User",
-        message: `Are you sure you want to delete ${m?.email}? This action cannot be undone.`,
-        confirmLabel: h ? "Deleting..." : "Delete",
-        onConfirm: $,
-        onCancel: () => v(null),
-        isLoading: h
+        message: `Are you sure you want to delete ${v?.email}? This action cannot be undone.`,
+        confirmLabel: l ? "Deleting..." : "Delete",
+        onConfirm: h,
+        onCancel: () => u(null),
+        isLoading: l
+      }
+    )
+  ] });
+}
+function Te({
+  isOpen: t,
+  onClose: n,
+  role: s
+}) {
+  const m = I(), { data: f } = re(), { data: b } = le(
+    { id: s.id },
+    { skip: !t }
+  ), [d, { isLoading: l }] = oe(), [r, c] = N(/* @__PURE__ */ new Set()), g = f ?? [], a = b ?? [];
+  H(() => {
+    c(new Set(a.map((o) => o.id)));
+  }, [a]);
+  const v = R(() => {
+    const o = /* @__PURE__ */ new Map();
+    for (const p of g) {
+      const h = o.get(p.resource) ?? [];
+      h.push(p), o.set(p.resource, h);
+    }
+    return o;
+  }, [g]);
+  function u(o) {
+    c((p) => {
+      const h = new Set(p);
+      return h.has(o) ? h.delete(o) : h.add(o), h;
+    });
+  }
+  async function y(o) {
+    o.preventDefault();
+    try {
+      await d({
+        id: s.id,
+        setRolePermissionsDto: { permissionIds: [...r] }
+      }).unwrap(), m(A("Permissions updated successfully")), n();
+    } catch {
+    }
+  }
+  return /* @__PURE__ */ e(j, { open: t, onOpenChange: (o) => !o && n(), children: /* @__PURE__ */ i(E, { children: [
+    /* @__PURE__ */ i(O, { children: [
+      /* @__PURE__ */ e(G, { children: "Manage Permissions" }),
+      /* @__PURE__ */ i($, { children: [
+        "Editing permissions for ",
+        /* @__PURE__ */ e("strong", { children: s.name })
+      ] })
+    ] }),
+    /* @__PURE__ */ i("form", { onSubmit: y, className: "mt-4", children: [
+      /* @__PURE__ */ e("div", { className: "max-h-64 space-y-4 overflow-y-auto", children: [...v.entries()].map(([o, p]) => /* @__PURE__ */ i("fieldset", { children: [
+        /* @__PURE__ */ e("legend", { className: "text-sm font-medium capitalize text-foreground", children: o }),
+        /* @__PURE__ */ e("div", { className: "mt-1 space-y-1", children: p.map((h) => /* @__PURE__ */ i(
+          "label",
+          {
+            className: "flex items-center gap-2 text-sm text-muted-foreground",
+            children: [
+              /* @__PURE__ */ e(
+                "input",
+                {
+                  type: "checkbox",
+                  checked: r.has(h.id),
+                  onChange: () => u(h.id),
+                  className: "rounded border-input text-primary focus:ring-ring"
+                }
+              ),
+              /* @__PURE__ */ e("span", { children: h.action }),
+              h.description && /* @__PURE__ */ i("span", { className: "text-xs text-muted-foreground/70", children: [
+                "— ",
+                h.description
+              ] })
+            ]
+          },
+          h.id
+        )) })
+      ] }, o)) }),
+      /* @__PURE__ */ i("div", { className: "mt-4 flex justify-end gap-3", children: [
+        /* @__PURE__ */ e(
+          w,
+          {
+            type: "button",
+            variant: "secondary",
+            "data-testid": "permissions-cancel-btn",
+            onClick: n,
+            disabled: l,
+            children: "Cancel"
+          }
+        ),
+        /* @__PURE__ */ e(
+          w,
+          {
+            type: "submit",
+            "data-testid": "permissions-save-btn",
+            disabled: l,
+            children: l ? "Saving..." : "Save"
+          }
+        )
+      ] })
+    ] })
+  ] }) });
+}
+function We() {
+  const t = I(), { data: n, isLoading: s, error: m, refetch: f } = F(), [b, { isLoading: d }] = de(), l = L("roles", "delete"), r = L("roles", "update"), [c, g] = N(null), [a, v] = N(null), u = n ?? [];
+  async function y() {
+    if (c)
+      try {
+        await b({ id: c.id }).unwrap(), t(A("Role deleted successfully"));
+      } catch {
+      } finally {
+        g(null);
+      }
+  }
+  const o = R(
+    () => [
+      { field: "name", headerName: "Name", flex: 1 },
+      { field: "description", headerName: "Description", flex: 2 },
+      {
+        headerName: "Type",
+        flex: 1,
+        valueGetter: (p) => p.data?.isSystem ? "System" : "Custom"
+      },
+      {
+        headerName: "Actions",
+        flex: 1,
+        sortable: !1,
+        filter: !1,
+        cellRenderer: (p) => {
+          if (!p.data) return null;
+          const h = !!p.data.isSystem;
+          return /* @__PURE__ */ i("div", { className: "flex gap-1", children: [
+            r && /* @__PURE__ */ e(
+              "button",
+              {
+                onClick: () => p.data && v(p.data),
+                className: "rounded px-2 py-1 text-xs font-medium text-primary transition-colors hover:bg-primary/10",
+                children: "Permissions"
+              }
+            ),
+            l && /* @__PURE__ */ e(
+              "button",
+              {
+                onClick: () => p.data && g(p.data),
+                disabled: h,
+                title: h ? "Cannot delete a system role" : "Delete role",
+                className: "rounded px-2 py-1 text-xs font-medium text-destructive transition-colors hover:bg-destructive/10 disabled:cursor-not-allowed disabled:opacity-40",
+                children: "Delete"
+              }
+            )
+          ] });
+        }
+      }
+    ],
+    [r, l]
+  );
+  return m ? /* @__PURE__ */ i(
+    "div",
+    {
+      "data-testid": "roles-error",
+      className: "rounded-lg bg-destructive/10 p-6 text-center",
+      role: "alert",
+      children: [
+        /* @__PURE__ */ e("p", { className: "text-destructive", children: "Failed to load roles." }),
+        /* @__PURE__ */ e(
+          "button",
+          {
+            "data-testid": "roles-retry-btn",
+            onClick: f,
+            className: "mt-2 text-sm font-medium text-primary hover:underline",
+            children: "Try again"
+          }
+        )
+      ]
+    }
+  ) : /* @__PURE__ */ i("div", { children: [
+    /* @__PURE__ */ e("div", { className: "mb-4 flex items-center justify-between", children: /* @__PURE__ */ e(
+      "h2",
+      {
+        "data-testid": "roles-heading",
+        className: "text-xl font-semibold text-foreground",
+        children: "Roles & Permissions"
+      }
+    ) }),
+    /* @__PURE__ */ e(U, { rowData: u, columnDefs: o, loading: s }),
+    /* @__PURE__ */ e(
+      Te,
+      {
+        isOpen: !!a,
+        onClose: () => v(null),
+        role: a ? { id: a.id, name: a.name } : { id: 0, name: "" }
+      }
+    ),
+    /* @__PURE__ */ e(
+      Q,
+      {
+        isOpen: !!c,
+        title: "Delete Role",
+        message: `Are you sure you want to delete the "${c?.name}" role? This action cannot be undone.`,
+        confirmLabel: d ? "Deleting..." : "Delete",
+        onConfirm: y,
+        onCancel: () => g(null),
+        isLoading: d
       }
     )
   ] });
 }
 export {
-  pe as AcceptInvitation,
-  w as StatusCard,
-  he as UserList
+  Ye as AcceptInvitation,
+  Je as InvitationList,
+  We as RoleList,
+  k as StatusCard,
+  Ke as UserList,
+  L as useHasPermission
 };