@mesob/auth-react 0.3.4 → 0.4.0

package/dist/pages/iam/role-users.js

@@ -0,0 +1,825 @@
+// src/pages/iam/roles/users/_components/role-users-page.tsx
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+  Badge as Badge3,
+  Button as Button2,
+  DataTablePagination,
+  DeleteConfirmButton,
+  DisplayTable,
+  EntityEmptyState,
+  EntityFilter,
+  EntityHeader,
+  EntityLoadingState,
+  EntitySearch,
+  EntitySort,
+  EntityViewToggle,
+  PageBody,
+  Tbody,
+  Td,
+  Th,
+  Thead,
+  Tr,
+  useEntityPagination,
+  useEntityParams
+} from "@mesob/ui/components";
+import { IconPlus, IconUser, IconUsers as IconUsers2 } from "@tabler/icons-react";
+import { useQueryClient as useQueryClient2 } from "@tanstack/react-query";
+import { useMemo as useMemo2 } from "react";
+import { toast } from "sonner";
+
+// src/provider.tsx
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { deepmerge } from "deepmerge-ts";
+import createFetchClient from "openapi-fetch";
+import createClient from "openapi-react-query";
+import { createContext, useContext, useMemo, useState } from "react";
+
+// src/utils/cookie.ts
+var isProduction = typeof process !== "undefined" && process.env.NODE_ENV === "production";
+
+// src/provider.tsx
+import { jsx } from "react/jsx-runtime";
+var SessionContext = createContext(null);
+var ApiContext = createContext(null);
+var ConfigContext = createContext(null);
+var queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      refetchOnWindowFocus: false
+    }
+  }
+});
+function useApi() {
+  const context = useContext(ApiContext);
+  if (!context) {
+    throw new Error("useApi must be used within MesobAuthProvider");
+  }
+  return context;
+}
+
+// src/pages/iam/shared/navigation.tsx
+import { useMesob } from "@mesob/ui/providers";
+import { jsx as jsx2 } from "react/jsx-runtime";
+function AppLink({ href, children, ...props }) {
+  const mesob = useMesob();
+  const Link2 = mesob?.linkComponent ?? mesob?.navigation?.Link;
+  const locale = mesob?.locale;
+  if (Link2) {
+    return /* @__PURE__ */ jsx2(Link2, { href, ...locale ? { locale } : {}, ...props, children });
+  }
+  return /* @__PURE__ */ jsx2("a", { href, ...props, children });
+}
+
+// src/lib/query-options.ts
+import { keepPreviousData } from "@tanstack/react-query";
+var defaultEntityQueryOptions = {
+  refetchOnMount: false,
+  refetchOnWindowFocus: false,
+  refetchOnReconnect: false,
+  staleTime: 60 * 1e3,
+  gcTime: 5 * 60 * 1e3,
+  placeholderData: keepPreviousData,
+  retry: 1
+};
+
+// src/pages/iam/shared/page-helpers.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var authApi$ = {
+  useQuery(...args) {
+    const { hooks } = useApi();
+    return hooks.useQuery(...args);
+  },
+  useMutation(...args) {
+    const { hooks } = useApi();
+    return hooks.useMutation(...args);
+  }
+};
+function Link(props) {
+  return /* @__PURE__ */ jsx3(AppLink, { ...props });
+}
+
+// src/pages/iam/users/_components/user-selector.tsx
+import {
+  Badge as Badge2,
+  EntitySelector,
+  useEntitySectionState
+} from "@mesob/ui/components";
+import { cn } from "@mesob/ui/lib/utils";
+import { IconCalendar, IconUsers } from "@tabler/icons-react";
+
+// src/pages/iam/users/_components/user-card.tsx
+import {
+  Badge,
+  Button,
+  Card,
+  CardContent,
+  CardHeader,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuPortal,
+  DropdownMenuTrigger
+} from "@mesob/ui/components";
+import { IconDots, IconPencil } from "@tabler/icons-react";
+import { useState as useState2 } from "react";
+
+// src/pages/iam/users/_components/user-form.tsx
+import { zodResolver } from "@hookform/resolvers/zod";
+import {
+  EntityDrawer,
+  EntityFormActions,
+  Input,
+  Label,
+  Skeleton
+} from "@mesob/ui/components";
+import { useQueryClient } from "@tanstack/react-query";
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import { jsx as jsx4, jsxs } from "react/jsx-runtime";
+var schema = z.object({
+  fullName: z.string().min(1, "Name is required"),
+  email: z.string().email().optional().or(z.literal("")),
+  phone: z.string().optional()
+});
+var defaults = {
+  fullName: "",
+  email: "",
+  phone: ""
+};
+function UserForm({
+  mode,
+  userId,
+  open,
+  onClose,
+  onSuccess
+}) {
+  const qc = useQueryClient();
+  const { data, isLoading } = authApi$.useQuery(
+    "get",
+    "/users/{id}",
+    { params: { path: { id: userId ?? "" } } },
+    { enabled: mode === "edit" && !!userId }
+  );
+  const create = authApi$.useMutation("post", "/users", {
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ["get", "/users"] });
+    }
+  });
+  const update = authApi$.useMutation("put", "/users/{id}", {
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ["get", "/users"] });
+      if (userId) {
+        qc.invalidateQueries({ queryKey: ["get", "/users/{id}"] });
+      }
+    }
+  });
+  const del = authApi$.useMutation("delete", "/users/{id}", {
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ["get", "/users"] });
+    }
+  });
+  const form = useForm({
+    resolver: zodResolver(schema),
+    defaultValues: defaults
+  });
+  const { reset, formState } = form;
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+    if (mode === "edit" && data?.user && !isLoading) {
+      const u = data.user;
+      reset({
+        fullName: u.fullName,
+        email: u.email ?? "",
+        phone: u.phone ?? ""
+      });
+    } else {
+      reset(defaults);
+    }
+  }, [mode, data, open, isLoading, reset]);
+  const onSubmit = form.handleSubmit(async (d) => {
+    const payload = {
+      fullName: d.fullName,
+      email: d.email || void 0,
+      phone: d.phone || void 0
+    };
+    if (mode === "new") {
+      await create.mutateAsync({ body: payload });
+    } else if (userId) {
+      await update.mutateAsync({
+        params: { path: { id: userId } },
+        body: payload
+      });
+    }
+    onSuccess?.();
+    onClose();
+  });
+  const onDelete = async () => {
+    if (!userId) {
+      return;
+    }
+    await del.mutateAsync({ params: { path: { id: userId } } });
+    onSuccess?.();
+    onClose();
+  };
+  const isSubmitting = create.isPending || update.isPending;
+  return /* @__PURE__ */ jsx4(
+    EntityDrawer,
+    {
+      title: mode === "new" ? "New user" : "Edit user",
+      open,
+      onClose,
+      isDirty: formState.isDirty,
+      form: isLoading ? /* @__PURE__ */ jsx4(FormSkeleton, {}) : /* @__PURE__ */ jsxs("form", { onSubmit, className: "space-y-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsxs(Label, { htmlFor: "fullName", children: [
+            "Full name ",
+            /* @__PURE__ */ jsx4("span", { className: "text-destructive", children: "*" })
+          ] }),
+          /* @__PURE__ */ jsx4(
+            Input,
+            {
+              id: "fullName",
+              placeholder: "Full name",
+              ...form.register("fullName")
+            }
+          ),
+          formState.errors.fullName && /* @__PURE__ */ jsx4("p", { className: "text-sm text-destructive", children: formState.errors.fullName.message })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx4(Label, { htmlFor: "email", children: "Email" }),
+          /* @__PURE__ */ jsx4(
+            Input,
+            {
+              id: "email",
+              type: "email",
+              placeholder: "Email",
+              ...form.register("email")
+            }
+          ),
+          formState.errors.email && /* @__PURE__ */ jsx4("p", { className: "text-sm text-destructive", children: formState.errors.email.message })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx4(Label, { htmlFor: "phone", children: "Phone" }),
+          /* @__PURE__ */ jsx4(
+            Input,
+            {
+              id: "phone",
+              placeholder: "Phone",
+              ...form.register("phone")
+            }
+          )
+        ] })
+      ] }),
+      actions: /* @__PURE__ */ jsx4(
+        EntityFormActions,
+        {
+          mode,
+          onSubmit,
+          onReset: mode === "new" ? () => reset(defaults) : void 0,
+          onDelete: mode === "edit" ? onDelete : void 0,
+          isSubmitting,
+          isDeleting: del.isPending,
+          disabled: isLoading,
+          itemName: "user"
+        }
+      )
+    }
+  );
+}
+function FormSkeleton() {
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx4(Skeleton, { className: "h-4 w-20" }),
+      /* @__PURE__ */ jsx4(Skeleton, { className: "h-10 w-full" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx4(Skeleton, { className: "h-4 w-16" }),
+      /* @__PURE__ */ jsx4(Skeleton, { className: "h-10 w-full" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx4(Skeleton, { className: "h-4 w-14" }),
+      /* @__PURE__ */ jsx4(Skeleton, { className: "h-10 w-full" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx4(Skeleton, { className: "h-4 w-16" }),
+      /* @__PURE__ */ jsx4(Skeleton, { className: "h-10 w-full" })
+    ] })
+  ] });
+}
+
+// src/pages/iam/users/_components/user-card.tsx
+import { Fragment, jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+function UserCard({ user }) {
+  const [editOpen, setEditOpen] = useState2(false);
+  return /* @__PURE__ */ jsxs2(Fragment, { children: [
+    /* @__PURE__ */ jsxs2(Card, { className: "group hover:shadow-md transition-shadow", children: [
+      /* @__PURE__ */ jsx5(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsxs2("div", { className: "flex items-start justify-between", children: [
+        /* @__PURE__ */ jsx5(
+          Link,
+          {
+            href: `/iam/users/${user.id}`,
+            className: "text-left font-semibold hover:text-primary hover:underline",
+            children: user.fullName
+          }
+        ),
+        /* @__PURE__ */ jsxs2(DropdownMenu, { children: [
+          /* @__PURE__ */ jsx5(
+            DropdownMenuTrigger,
+            {
+              render: /* @__PURE__ */ jsx5(
+                Button,
+                {
+                  variant: "ghost",
+                  size: "icon",
+                  className: "h-8 w-8 opacity-0 group-hover:opacity-100 transition-opacity"
+                }
+              ),
+              children: /* @__PURE__ */ jsx5(IconDots, { className: "h-4 w-4" })
+            }
+          ),
+          /* @__PURE__ */ jsx5(DropdownMenuPortal, { children: /* @__PURE__ */ jsx5(DropdownMenuContent, { children: /* @__PURE__ */ jsxs2(DropdownMenuItem, { onClick: () => setEditOpen(true), children: [
+            /* @__PURE__ */ jsx5(IconPencil, { className: "mr-2 h-4 w-4" }),
+            "Edit"
+          ] }) }) })
+        ] })
+      ] }) }),
+      /* @__PURE__ */ jsxs2(CardContent, { className: "space-y-2", children: [
+        user.email && /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx5("span", { className: "text-sm", children: user.email }),
+          user.emailVerified && /* @__PURE__ */ jsx5(Badge, { variant: "outline", className: "text-xs", children: "Verified" })
+        ] }),
+        /* @__PURE__ */ jsxs2("p", { className: "text-xs text-muted-foreground", children: [
+          "Last sign in",
+          " ",
+          user.lastSignInAt ? new Date(user.lastSignInAt).toLocaleDateString() : "never"
+        ] })
+      ] })
+    ] }),
+    editOpen && /* @__PURE__ */ jsx5(
+      UserForm,
+      {
+        mode: "edit",
+        userId: user.id,
+        open: editOpen,
+        onClose: () => setEditOpen(false)
+      }
+    )
+  ] });
+}
+
+// src/pages/iam/users/_components/user-selector.tsx
+import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+function SelectableUserCard({
+  user,
+  selected,
+  onToggle
+}) {
+  return (
+    // biome-ignore lint/a11y/useSemanticElements: div needed to avoid nested buttons from UserCard
+    /* @__PURE__ */ jsx6(
+      "div",
+      {
+        role: "button",
+        tabIndex: 0,
+        onClick: onToggle,
+        onKeyDown: (e) => {
+          if (e.key === "Enter") {
+            onToggle();
+          }
+        },
+        className: cn(
+          "cursor-pointer rounded-lg transition-shadow focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          selected && "ring-primary ring-2"
+        ),
+        children: /* @__PURE__ */ jsx6(UserCard, { user })
+      }
+    )
+  );
+}
+var userColumns = [
+  {
+    key: "name",
+    header: "Name",
+    cell: (user) => /* @__PURE__ */ jsx6("p", { className: "font-medium", children: user.fullName })
+  },
+  {
+    key: "contact",
+    header: "Contact",
+    cell: (user) => /* @__PURE__ */ jsxs3("div", { className: "space-y-1", children: [
+      user.email && /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx6("span", { className: "text-sm", children: user.email }),
+        user.emailVerified && /* @__PURE__ */ jsx6(Badge2, { variant: "outline", className: "text-xs", children: "Verified" })
+      ] }),
+      user.phone && /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx6("span", { className: "text-sm", children: user.phone }),
+        user.phoneVerified && /* @__PURE__ */ jsx6(Badge2, { variant: "outline", className: "text-xs", children: "Verified" })
+      ] }),
+      !(user.email || user.phone) && /* @__PURE__ */ jsx6("span", { className: "text-muted-foreground", children: "\u2014" })
+    ] })
+  },
+  {
+    key: "lastSignIn",
+    header: "Last sign in",
+    cell: (user) => /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-1 text-muted-foreground", children: [
+      /* @__PURE__ */ jsx6(IconCalendar, { className: "h-4 w-4" }),
+      user.lastSignInAt ? new Date(user.lastSignInAt).toLocaleDateString() : "Never"
+    ] })
+  }
+];
+var EMPTY_EXCLUDE_IDS = [];
+function UserSelector({
+  trigger,
+  multiple = false,
+  onSelect,
+  excludeIds = EMPTY_EXCLUDE_IDS,
+  modalSize = "xl",
+  contentClassName
+}) {
+  const state = useEntitySectionState({
+    defaultSort: "createdAt",
+    defaultOrder: "desc",
+    defaultPageSize: 10,
+    searchParamName: "handle"
+  });
+  const usersQuery = state.queryConfig;
+  const { data, isPending, isFetching } = authApi$.useQuery(
+    "get",
+    "/users",
+    usersQuery,
+    defaultEntityQueryOptions
+  );
+  const users = (data?.users ?? []).filter((user) => {
+    return !excludeIds.includes(user.id);
+  });
+  const config = {
+    title: "Select user(s)",
+    modalSize,
+    contentClassName,
+    multiple,
+    entityName: "user",
+    entityIcon: IconUsers,
+    columns: userColumns,
+    columnCount: 4,
+    getItemLabel: (user) => user.fullName,
+    searchPlaceholder: "Search users...",
+    filterOptions: [
+      { label: "All", value: "" },
+      { label: "Email Verified", value: "emailVerified" },
+      { label: "Phone Verified", value: "phoneVerified" },
+      { label: "Not Verified", value: "notVerified" }
+    ],
+    sortOptions: [
+      { label: "Created", value: "createdAt" },
+      { label: "Updated", value: "updatedAt" },
+      { label: "Name", value: "fullName" },
+      { label: "Last Sign In", value: "lastSignInAt" }
+    ],
+    showViewToggle: false,
+    renderCard: (user, selected, onToggle) => /* @__PURE__ */ jsx6(SelectableUserCard, { user, selected, onToggle })
+  };
+  return /* @__PURE__ */ jsx6(
+    EntitySelector,
+    {
+      trigger,
+      config,
+      onSelect,
+      items: users,
+      total: data?.total,
+      isLoading: isPending || isFetching,
+      state
+    }
+  );
+}
+
+// src/pages/iam/roles/users/_components/role-users-page.tsx
+import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+var TABLE_COLUMN_COUNT = 4;
+function initials(user) {
+  return user.fullName.split(" ").filter(Boolean).slice(0, 2).map((part) => part[0]?.toUpperCase() ?? "").join("");
+}
+function UserIdentity({ user }) {
+  return /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-3", children: [
+    /* @__PURE__ */ jsxs4(Avatar, { className: "h-9 w-9", children: [
+      /* @__PURE__ */ jsx7(AvatarImage, { src: user.image ?? void 0 }),
+      /* @__PURE__ */ jsx7(AvatarFallback, { children: initials(user) })
+    ] }),
+    /* @__PURE__ */ jsx7("div", { children: /* @__PURE__ */ jsx7("p", { className: "font-medium", children: user.fullName }) })
+  ] });
+}
+function UserContact({ user }) {
+  return /* @__PURE__ */ jsxs4("div", { className: "space-y-1", children: [
+    user.email ? /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx7("span", { children: user.email }),
+      user.emailVerified ? /* @__PURE__ */ jsx7(Badge3, { variant: "outline", children: "Verified" }) : null
+    ] }) : null,
+    user.phone ? /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx7("span", { children: user.phone }),
+      user.phoneVerified ? /* @__PURE__ */ jsx7(Badge3, { variant: "outline", children: "Verified" }) : null
+    ] }) : null,
+    user.email || user.phone ? null : /* @__PURE__ */ jsx7("span", { className: "text-muted-foreground", children: "\u2014" })
+  ] });
+}
+function UserRemoveButton({
+  roleId,
+  userId,
+  onRemove
+}) {
+  return /* @__PURE__ */ jsx7(
+    DeleteConfirmButton,
+    {
+      entityName: "user",
+      onConfirm: () => onRemove(roleId, userId),
+      triggerClassName: "size-8 text-destructive hover:text-destructive"
+    }
+  );
+}
+function RoleUsersTable({
+  roleId,
+  users,
+  onRemove
+}) {
+  return /* @__PURE__ */ jsxs4(DisplayTable, { withTableBorder: true, children: [
+    /* @__PURE__ */ jsx7(Thead, { children: /* @__PURE__ */ jsxs4(Tr, { children: [
+      /* @__PURE__ */ jsx7(Th, { children: "User" }),
+      /* @__PURE__ */ jsx7(Th, { children: "Contact" }),
+      /* @__PURE__ */ jsx7(Th, { children: "Last sign in" }),
+      /* @__PURE__ */ jsx7(Th, { className: "w-[60px]" })
+    ] }) }),
+    /* @__PURE__ */ jsx7(Tbody, { children: users.map((user) => /* @__PURE__ */ jsxs4(Tr, { children: [
+      /* @__PURE__ */ jsx7(Td, { children: /* @__PURE__ */ jsx7(UserIdentity, { user }) }),
+      /* @__PURE__ */ jsx7(Td, { children: /* @__PURE__ */ jsx7(UserContact, { user }) }),
+      /* @__PURE__ */ jsx7(Td, { children: user.lastSignInAt ? new Date(user.lastSignInAt).toLocaleDateString() : "Never" }),
+      /* @__PURE__ */ jsx7(Td, { children: /* @__PURE__ */ jsx7(
+        UserRemoveButton,
+        {
+          roleId,
+          userId: user.id,
+          onRemove
+        }
+      ) })
+    ] }, user.id)) })
+  ] });
+}
+function RoleUsersCards({
+  roleId,
+  users,
+  onRemove
+}) {
+  return /* @__PURE__ */ jsx7("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3", children: users.map((user) => /* @__PURE__ */ jsx7(
+    "div",
+    {
+      className: "rounded-xl border border-border/60 bg-card p-4 shadow-sm",
+      children: /* @__PURE__ */ jsxs4("div", { className: "flex items-start justify-between gap-3", children: [
+        /* @__PURE__ */ jsxs4("div", { className: "space-y-3", children: [
+          /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ jsxs4(Avatar, { className: "h-10 w-10", children: [
+              /* @__PURE__ */ jsx7(AvatarImage, { src: user.image ?? void 0 }),
+              /* @__PURE__ */ jsx7(AvatarFallback, { children: initials(user) })
+            ] }),
+            /* @__PURE__ */ jsx7("div", { children: /* @__PURE__ */ jsx7("p", { className: "font-semibold", children: user.fullName }) })
+          ] }),
+          /* @__PURE__ */ jsxs4("div", { className: "space-y-1 text-sm text-muted-foreground", children: [
+            /* @__PURE__ */ jsx7("p", { children: user.email ?? user.phone ?? "No contact info" }),
+            /* @__PURE__ */ jsxs4("p", { children: [
+              "Last sign in",
+              " ",
+              user.lastSignInAt ? new Date(user.lastSignInAt).toLocaleDateString() : "never"
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx7(
+          UserRemoveButton,
+          {
+            roleId,
+            userId: user.id,
+            onRemove
+          }
+        )
+      ] })
+    },
+    user.id
+  )) });
+}
+function RoleUsersPage({ roleId }) {
+  const qc = useQueryClient2();
+  const { queryConfig, params, setParams } = useEntityParams({
+    searchKey: "search",
+    defaultSort: "fullName",
+    defaultOrder: "asc"
+  });
+  const usersQuery = useMemo2(
+    () => ({
+      params: {
+        path: { id: roleId },
+        query: queryConfig.params.query
+      }
+    }),
+    [queryConfig, roleId]
+  );
+  const { data, isPending, isFetching } = authApi$.useQuery(
+    "get",
+    "/roles/{id}/users",
+    usersQuery,
+    { enabled: !!roleId }
+  );
+  const assignUsers = authApi$.useMutation("post", "/roles/{id}/users", {
+    onSuccess: (result) => {
+      qc.invalidateQueries({ queryKey: ["get", "/roles"] });
+      qc.invalidateQueries({ queryKey: ["get", "/roles/{id}"] });
+      qc.invalidateQueries({ queryKey: ["get", "/roles/{id}/users"] });
+      toast.success(
+        result?.created ? `${result.created} user(s) added` : "No changes"
+      );
+    },
+    onError: () => {
+      toast.error("Failed to assign users");
+    }
+  });
+  const revokeUser = authApi$.useMutation(
+    "delete",
+    "/roles/{id}/users/{userId}",
+    {
+      onSuccess: () => {
+        qc.invalidateQueries({ queryKey: ["get", "/roles"] });
+        qc.invalidateQueries({ queryKey: ["get", "/roles/{id}"] });
+        qc.invalidateQueries({ queryKey: ["get", "/roles/{id}/users"] });
+        toast.success("User removed");
+      },
+      onError: () => {
+        toast.error("Failed to remove user");
+      }
+    }
+  );
+  const users = data?.users ?? [];
+  const { total, pageCount } = useEntityPagination({
+    items: users,
+    total: data?.total,
+    pageSize: params.pageSize
+  });
+  const isLoading = isPending || isFetching;
+  const currentView = params.view || "table";
+  const handleRemoveUser = (targetRoleId, userId) => {
+    revokeUser.mutate({
+      params: {
+        path: { id: targetRoleId, userId }
+      }
+    });
+  };
+  if (!roleId) {
+    return null;
+  }
+  let content;
+  if (isLoading) {
+    content = /* @__PURE__ */ jsx7(
+      EntityLoadingState,
+      {
+        view: currentView,
+        rowCount: params.pageSize,
+        columnCount: TABLE_COLUMN_COUNT,
+        cardCount: params.pageSize
+      }
+    );
+  } else if (total === 0) {
+    content = /* @__PURE__ */ jsx7(
+      EntityEmptyState,
+      {
+        icon: IconUsers2,
+        entityName: "user",
+        title: "No users assigned",
+        description: "Assign users from the selector to add them to this role."
+      }
+    );
+  } else if (currentView === "table") {
+    content = /* @__PURE__ */ jsxs4("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsx7(
+        RoleUsersTable,
+        {
+          roleId,
+          users,
+          onRemove: handleRemoveUser
+        }
+      ),
+      /* @__PURE__ */ jsx7(
+        DataTablePagination,
+        {
+          pageIndex: params.page - 1,
+          pageSize: params.pageSize,
+          pageCount,
+          totalRows: total,
+          onPageChange: (page) => setParams({ page: page + 1 }),
+          onPageSizeChange: (pageSize) => setParams({ pageSize, page: 1 })
+        }
+      )
+    ] });
+  } else {
+    content = /* @__PURE__ */ jsxs4("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsx7(
+        RoleUsersCards,
+        {
+          roleId,
+          users,
+          onRemove: handleRemoveUser
+        }
+      ),
+      /* @__PURE__ */ jsx7(
+        DataTablePagination,
+        {
+          pageIndex: params.page - 1,
+          pageSize: params.pageSize,
+          pageCount,
+          totalRows: total,
+          onPageChange: (page) => setParams({ page: page + 1 }),
+          onPageSizeChange: (pageSize) => setParams({ pageSize, page: 1 })
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxs4(PageBody, { className: "px-0 pb-6", children: [
+    /* @__PURE__ */ jsx7(
+      EntityHeader,
+      {
+        icon: /* @__PURE__ */ jsx7(IconUser, { className: "h-5 w-5" }),
+        title: "Role users",
+        actions: /* @__PURE__ */ jsx7(
+          UserSelector,
+          {
+            trigger: /* @__PURE__ */ jsxs4(Button2, { size: "sm", loading: assignUsers.isPending, children: [
+              /* @__PURE__ */ jsx7(IconPlus, { className: "h-4 w-4" }),
+              "Add users"
+            ] }),
+            multiple: true,
+            excludeIds: users.map((user) => user.id),
+            onSelect: (selectedUsers) => {
+              if (!selectedUsers.length) {
+                return;
+              }
+              assignUsers.mutate({
+                params: { path: { id: roleId } },
+                body: {
+                  userIds: selectedUsers.map((user) => user.id)
+                }
+              });
+            }
+          }
+        ),
+        search: /* @__PURE__ */ jsx7(
+          EntitySearch,
+          {
+            paramKey: "search",
+            placeholder: "Search assigned users..."
+          }
+        ),
+        filter: /* @__PURE__ */ jsx7(
+          EntityFilter,
+          {
+            options: [
+              { label: "All", value: "" },
+              { label: "Name", value: "fullName" },
+              { label: "Email", value: "email" },
+              { label: "Phone", value: "phone" }
+            ],
+            placeholder: "Search field"
+          }
+        ),
+        sort: /* @__PURE__ */ jsx7(
+          EntitySort,
+          {
+            defaultSort: "fullName",
+            defaultOrder: "asc",
+            options: [
+              { label: "Created", value: "createdAt" },
+              { label: "Updated", value: "updatedAt" },
+              { label: "Name", value: "fullName" },
+              { label: "Last Sign In", value: "lastSignInAt" }
+            ]
+          }
+        ),
+        view: /* @__PURE__ */ jsx7(EntityViewToggle, { views: ["table", "card"] })
+      }
+    ),
+    content
+  ] });
+}
+
+// src/pages/iam/role-users.tsx
+import { jsx as jsx8 } from "react/jsx-runtime";
+var metadata = {
+  title: "Role Users",
+  description: "Manage users assigned to a role."
+};
+async function RoleUsersRoutePage({
+  params
+}) {
+  const { id } = await params;
+  return /* @__PURE__ */ jsx8(RoleUsersPage, { roleId: id });
+}
+export {
+  RoleUsersRoutePage as default,
+  metadata
+};
+//# sourceMappingURL=role-users.js.map