@mesob/auth-react 0.3.4 → 0.4.0

package/dist/pages/iam/user-activity.js

@@ -0,0 +1,850 @@
+// src/pages/iam/users/activity/user-activity-page-content.tsx
+import {
+  Card as Card2,
+  CardContent as CardContent2,
+  CardHeader as CardHeader2,
+  CardTitle,
+  Section
+} from "@mesob/ui/components";
+import { IconCalendar as IconCalendar3 } from "@tabler/icons-react";
+
+// src/pages/iam/users/activity/_components/role-section.tsx
+import {
+  Button as Button2,
+  EntityEmptyState as EntityEmptyState2,
+  EntityLoadingState as EntityLoadingState2,
+  EntitySection,
+  useEntitySectionState as useEntitySectionState2
+} from "@mesob/ui/components";
+import { IconPlus, IconShield as IconShield3 } from "@tabler/icons-react";
+import { useMemo as useMemo3, useState as useState3 } from "react";
+
+// src/pages/iam/roles/_components/role-selector.tsx
+import {
+  EntitySelector,
+  useEntitySectionState
+} from "@mesob/ui/components";
+import { cn } from "@mesob/ui/lib/utils";
+import { IconCalendar, IconShield } from "@tabler/icons-react";
+
+// 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;
+}
+function useConfig() {
+  const context = useContext(ConfigContext);
+  if (!context) {
+    throw new Error("useConfig 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 });
+}
+function useNavigate() {
+  const { config } = useConfig();
+  return (href) => {
+    if (config.navigation?.onNavigate) {
+      config.navigation.onNavigate(href);
+      return;
+    }
+    if (typeof window !== "undefined") {
+      window.location.href = href;
+    }
+  };
+}
+
+// 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 });
+}
+function useRouter() {
+  const navigate = useNavigate();
+  return {
+    push: navigate
+  };
+}
+
+// src/pages/iam/roles/_components/role-card.tsx
+import {
+  Badge,
+  Button,
+  Card,
+  CardContent,
+  CardHeader,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuPortal,
+  DropdownMenuTrigger
+} from "@mesob/ui/components";
+import { IconDots, IconExternalLink } from "@tabler/icons-react";
+
+// src/pages/iam/roles/_components/roles-data.ts
+function str(v) {
+  if (v == null) {
+    return "";
+  }
+  if (typeof v === "string") {
+    return v;
+  }
+  if (typeof v === "object" && v !== null && "en" in v) {
+    const o = v;
+    return o.en ?? o.am ?? "";
+  }
+  return String(v);
+}
+
+// src/pages/iam/roles/_components/role-card.tsx
+import { jsx as jsx4, jsxs } from "react/jsx-runtime";
+function RoleCard({ role, mode = "navigate" }) {
+  const router = useRouter();
+  const canNavigate = mode === "navigate";
+  return /* @__PURE__ */ jsxs(Card, { className: "group transition-shadow hover:shadow-md", children: [
+    /* @__PURE__ */ jsxs(CardHeader, { className: "pb-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between", children: [
+        /* @__PURE__ */ jsx4(
+          "button",
+          {
+            type: "button",
+            onClick: () => {
+              if (canNavigate) {
+                router.push(`/iam/roles/${role.id}`);
+              }
+            },
+            className: "text-left font-semibold hover:text-primary hover:underline",
+            children: str(role.name) || role.code
+          }
+        ),
+        canNavigate ? /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+          /* @__PURE__ */ jsx4(
+            DropdownMenuTrigger,
+            {
+              render: /* @__PURE__ */ jsx4(
+                Button,
+                {
+                  variant: "ghost",
+                  size: "icon",
+                  className: "h-8 w-8 opacity-0 transition-opacity group-hover:opacity-100"
+                }
+              ),
+              children: /* @__PURE__ */ jsx4(IconDots, { className: "h-4 w-4" })
+            }
+          ),
+          /* @__PURE__ */ jsx4(DropdownMenuPortal, { children: /* @__PURE__ */ jsx4(DropdownMenuContent, { children: /* @__PURE__ */ jsxs(
+            DropdownMenuItem,
+            {
+              onClick: () => router.push(`/iam/roles/${role.id}`),
+              children: [
+                /* @__PURE__ */ jsx4(IconExternalLink, { className: "mr-2 h-4 w-4" }),
+                "Open"
+              ]
+            }
+          ) }) })
+        ] }) : null
+      ] }),
+      /* @__PURE__ */ jsx4(Badge, { variant: "outline", className: "text-xs", children: role.code })
+    ] }),
+    /* @__PURE__ */ jsxs(CardContent, { children: [
+      /* @__PURE__ */ jsxs("div", { className: "mb-3 flex flex-wrap gap-2", children: [
+        role.isSystem ? /* @__PURE__ */ jsx4(Badge, { children: "System" }) : null,
+        /* @__PURE__ */ jsxs(Badge, { variant: "secondary", children: [
+          role.permissionCount ?? role.permissionIds?.length ?? 0,
+          " ",
+          "permissions"
+        ] }),
+        /* @__PURE__ */ jsxs(Badge, { variant: "outline", children: [
+          role.userCount ?? 0,
+          " users"
+        ] })
+      ] }),
+      str(role.description) && /* @__PURE__ */ jsx4("p", { className: "line-clamp-2 text-sm text-muted-foreground", children: str(role.description) }),
+      /* @__PURE__ */ jsxs("p", { className: "mt-2 text-xs text-muted-foreground", children: [
+        "Created ",
+        new Date(role.createdAt).toLocaleDateString()
+      ] })
+    ] })
+  ] });
+}
+
+// src/pages/iam/roles/_components/role-selector.tsx
+import { Fragment, jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+function SelectableRoleCard({
+  role,
+  selected,
+  onToggle
+}) {
+  return (
+    // biome-ignore lint/a11y/useSemanticElements: div to avoid nested buttons from RoleCard
+    /* @__PURE__ */ jsx5(
+      "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__ */ jsx5(RoleCard, { role, mode: "static" })
+      }
+    )
+  );
+}
+var roleColumns = [
+  {
+    key: "role",
+    header: "Role",
+    cell: (role) => /* @__PURE__ */ jsxs2(Fragment, { children: [
+      /* @__PURE__ */ jsx5("p", { className: "font-medium", children: str(role.name) || role.code }),
+      /* @__PURE__ */ jsx5("p", { className: "text-sm text-muted-foreground", children: role.code })
+    ] })
+  },
+  {
+    key: "description",
+    header: "Description",
+    cell: (role) => /* @__PURE__ */ jsx5("span", { className: "text-muted-foreground line-clamp-1 max-w-[200px]", children: str(role.description) || "\u2014" })
+  },
+  {
+    key: "created",
+    header: "Created",
+    cell: (role) => /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-1 text-muted-foreground", children: [
+      /* @__PURE__ */ jsx5(IconCalendar, { className: "h-4 w-4" }),
+      new Date(role.createdAt).toLocaleDateString()
+    ] })
+  }
+];
+function RoleSelector({
+  trigger,
+  multiple = true,
+  onSelect,
+  modalSize = "xl",
+  contentClassName
+}) {
+  const state = useEntitySectionState({
+    defaultSort: "createdAt",
+    defaultOrder: "desc",
+    defaultPageSize: 10,
+    searchParamName: "search"
+  });
+  const rolesQuery = state.queryConfig;
+  const { data, isPending, isFetching } = authApi$.useQuery(
+    "get",
+    "/roles",
+    rolesQuery,
+    defaultEntityQueryOptions
+  );
+  const roles = data?.roles ?? [];
+  const config = {
+    title: "Select role(s)",
+    modalSize,
+    contentClassName,
+    multiple,
+    entityName: "role",
+    entityIcon: IconShield,
+    columns: roleColumns,
+    columnCount: 3,
+    getItemLabel: (role) => str(role.name) || role.code,
+    searchPlaceholder: "Search roles...",
+    wrapHeaderInCard: false,
+    filterOptions: [
+      { label: "All", value: "" },
+      { label: "By Code", value: "code" }
+    ],
+    sortOptions: [
+      { label: "Created", value: "createdAt" },
+      { label: "Updated", value: "updatedAt" },
+      { label: "Code", value: "code" }
+    ],
+    showViewToggle: false,
+    renderCard: (role, selected, onToggle) => /* @__PURE__ */ jsx5(SelectableRoleCard, { role, selected, onToggle })
+  };
+  return /* @__PURE__ */ jsx5(
+    EntitySelector,
+    {
+      trigger,
+      config,
+      onSelect,
+      items: roles,
+      total: data?.total,
+      isLoading: isPending || isFetching,
+      state
+    }
+  );
+}
+
+// src/pages/iam/roles/_components/roles-list.tsx
+import {
+  Badge as Badge2,
+  DataTableAction,
+  DataTablePagination,
+  DisplayTable,
+  EntityEmptyState,
+  EntityLoadingState,
+  Tbody,
+  Td,
+  Th,
+  Thead,
+  Tr
+} from "@mesob/ui/components";
+import { IconCalendar as IconCalendar2, IconShield as IconShield2 } from "@tabler/icons-react";
+import { useState as useState2 } from "react";
+
+// src/pages/iam/roles/_components/role-form.tsx
+import { zodResolver } from "@hookform/resolvers/zod";
+import {
+  EntityDrawer,
+  EntityFormActions,
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  Input,
+  LocaleInputText,
+  LocaleInputTextarea,
+  Skeleton
+} from "@mesob/ui/components";
+import { useLocaleConfig, useLocaleSchemas } from "@mesob/ui/providers";
+import { useQueryClient } from "@tanstack/react-query";
+import { useEffect, useMemo as useMemo2 } from "react";
+import { useForm, useWatch } from "react-hook-form";
+import { z } from "zod";
+import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+function RoleForm({
+  mode,
+  roleId,
+  open,
+  onClose,
+  onSuccess
+}) {
+  const qc = useQueryClient();
+  const { localeInputDefault, requiredSchema, optionalSchema } = useLocaleSchemas();
+  const { defaultLanguage } = useLocaleConfig();
+  const schema = useMemo2(
+    () => z.object({
+      name: requiredSchema,
+      code: z.string().min(1, "Code is required"),
+      description: optionalSchema,
+      permissionIds: z.array(z.string())
+    }),
+    [requiredSchema, optionalSchema]
+  );
+  const defaults = useMemo2(
+    () => ({
+      name: { ...localeInputDefault },
+      code: "",
+      description: { ...localeInputDefault },
+      permissionIds: []
+    }),
+    [localeInputDefault]
+  );
+  const { data, isLoading } = authApi$.useQuery(
+    "get",
+    "/roles/{id}",
+    { params: { path: { id: roleId ?? "" } } },
+    { enabled: mode === "edit" && !!roleId }
+  );
+  const create = authApi$.useMutation("post", "/roles", {
+    onSuccess: () => qc.invalidateQueries({ queryKey: ["get", "/roles"] })
+  });
+  const update = authApi$.useMutation("put", "/roles/{id}", {
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ["get", "/roles"] });
+      if (roleId) {
+        qc.invalidateQueries({ queryKey: ["get", "/roles/{id}"] });
+      }
+    }
+  });
+  const del = authApi$.useMutation("delete", "/roles/{id}", {
+    onSuccess: () => qc.invalidateQueries({ queryKey: ["get", "/roles"] })
+  });
+  const form = useForm({
+    resolver: zodResolver(schema),
+    defaultValues: defaults
+  });
+  const { reset, formState, control, register, setValue } = form;
+  const nameVal = useWatch({ control, name: "name" });
+  const codeVal = useWatch({ control, name: "code" });
+  useEffect(() => {
+    const nameDefault = typeof nameVal === "object" && nameVal !== null && defaultLanguage in nameVal ? nameVal[defaultLanguage] ?? "" : "";
+    if (mode === "new" && typeof nameDefault === "string" && nameDefault.trim().length > 0 && !codeVal) {
+      const code = nameDefault.toLowerCase().replace(/\s+/g, "-").replace(/[^a-z0-9-]/g, "");
+      if (code) {
+        setValue("code", code);
+      }
+    }
+  }, [mode, nameVal, setValue, codeVal, defaultLanguage]);
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+    if (mode === "edit" && data?.role && !isLoading) {
+      const r = data.role;
+      reset({
+        name: r.name ?? {},
+        code: r.code,
+        description: r.description ?? {},
+        permissionIds: r.permissionIds ?? []
+      });
+    } else {
+      reset({ ...defaults, permissionIds: [] });
+    }
+  }, [mode, data, open, isLoading, reset, defaults]);
+  const onSubmit = form.handleSubmit(async (d) => {
+    const body = {
+      name: d.name,
+      code: d.code,
+      description: d.description ?? void 0,
+      permissionIds: d.permissionIds
+    };
+    if (mode === "new") {
+      await create.mutateAsync({ body });
+    } else if (roleId) {
+      await update.mutateAsync({
+        params: { path: { id: roleId } },
+        body
+      });
+    }
+    onSuccess?.();
+    onClose();
+  });
+  const onDelete = async () => {
+    if (!roleId) {
+      return;
+    }
+    await del.mutateAsync({ params: { path: { id: roleId } } });
+    onSuccess?.();
+    onClose();
+  };
+  const editable = mode === "new" || data?.role?.isEditable !== false;
+  return /* @__PURE__ */ jsx6(
+    EntityDrawer,
+    {
+      title: mode === "new" ? "New role" : "Edit role",
+      open,
+      onClose,
+      isDirty: formState.isDirty,
+      size: "md",
+      form: isLoading ? /* @__PURE__ */ jsx6(FormSkeleton, {}) : /* @__PURE__ */ jsx6(Form, { ...form, children: /* @__PURE__ */ jsxs3("form", { onSubmit, className: "space-y-4", children: [
+        /* @__PURE__ */ jsx6(
+          LocaleInputText,
+          {
+            label: "Name",
+            field: "name",
+            required: true,
+            register,
+            errors: formState.errors,
+            placeholder: "e.g. Administrator",
+            disabled: !editable
+          }
+        ),
+        /* @__PURE__ */ jsx6(
+          FormField,
+          {
+            control,
+            name: "code",
+            render: ({ field }) => /* @__PURE__ */ jsxs3(FormItem, { children: [
+              /* @__PURE__ */ jsxs3(FormLabel, { children: [
+                "Code ",
+                /* @__PURE__ */ jsx6("span", { className: "text-destructive", children: "*" })
+              ] }),
+              /* @__PURE__ */ jsx6(FormControl, { children: /* @__PURE__ */ jsx6(
+                Input,
+                {
+                  placeholder: "e.g. admin",
+                  disabled: !editable,
+                  ...field
+                }
+              ) }),
+              /* @__PURE__ */ jsx6(FormMessage, {})
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsx6(
+          LocaleInputTextarea,
+          {
+            label: "Description",
+            field: "description",
+            register,
+            errors: formState.errors,
+            placeholder: "Description",
+            rows: 3,
+            disabled: !editable
+          }
+        )
+      ] }) }),
+      actions: /* @__PURE__ */ jsx6(
+        EntityFormActions,
+        {
+          mode,
+          onSubmit,
+          onReset: mode === "new" ? () => reset(defaults) : void 0,
+          onDelete: mode === "edit" ? onDelete : void 0,
+          isSubmitting: create.isPending || update.isPending,
+          isDeleting: del.isPending,
+          disabled: isLoading || !editable,
+          itemName: "role"
+        }
+      )
+    }
+  );
+}
+function FormSkeleton() {
+  return /* @__PURE__ */ jsxs3("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxs3("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx6(Skeleton, { className: "h-4 w-16" }),
+      /* @__PURE__ */ jsx6(Skeleton, { className: "h-10 w-full" })
+    ] }),
+    /* @__PURE__ */ jsxs3("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx6(Skeleton, { className: "h-4 w-14" }),
+      /* @__PURE__ */ jsx6(Skeleton, { className: "h-10 w-full" })
+    ] }),
+    /* @__PURE__ */ jsxs3("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx6(Skeleton, { className: "h-4 w-24" }),
+      /* @__PURE__ */ jsx6(Skeleton, { className: "h-20 w-full" })
+    ] })
+  ] });
+}
+
+// src/pages/iam/roles/_components/roles-list.tsx
+import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+var TABLE_COLUMN_COUNT = 5;
+function RolesList({
+  data,
+  isLoading,
+  view,
+  pageIndex,
+  pageSize,
+  pageCount,
+  totalRows,
+  onPageChange,
+  onPageSizeChange,
+  onCreateNew
+}) {
+  const [drawerRole, setDrawerRole] = useState2(null);
+  if (isLoading) {
+    return /* @__PURE__ */ jsx7(
+      EntityLoadingState,
+      {
+        view,
+        rowCount: pageSize,
+        columnCount: TABLE_COLUMN_COUNT,
+        cardCount: pageSize
+      }
+    );
+  }
+  if (totalRows === 0) {
+    return /* @__PURE__ */ jsx7(
+      EntityEmptyState,
+      {
+        icon: IconShield2,
+        entityName: "role",
+        title: "No roles yet",
+        description: "Create your first role to get started.",
+        onAction: onCreateNew
+      }
+    );
+  }
+  if (view === "table") {
+    return /* @__PURE__ */ jsxs4("div", { className: "space-y-4", children: [
+      drawerRole ? /* @__PURE__ */ jsx7(
+        RoleForm,
+        {
+          mode: "edit",
+          roleId: drawerRole.id,
+          open: true,
+          onClose: () => setDrawerRole(null),
+          onSuccess: () => setDrawerRole(null)
+        }
+      ) : null,
+      /* @__PURE__ */ jsxs4(DisplayTable, { withTableBorder: true, children: [
+        /* @__PURE__ */ jsx7(Thead, { children: /* @__PURE__ */ jsxs4(Tr, { children: [
+          /* @__PURE__ */ jsx7(Th, { children: "Role" }),
+          /* @__PURE__ */ jsx7(Th, { children: "Description" }),
+          /* @__PURE__ */ jsx7(Th, { children: "Access" }),
+          /* @__PURE__ */ jsx7(Th, { children: "Created" }),
+          /* @__PURE__ */ jsx7(Th, { className: "w-[50px]" })
+        ] }) }),
+        /* @__PURE__ */ jsx7(Tbody, { children: data.map((role) => /* @__PURE__ */ jsxs4(Tr, { className: "group", children: [
+          /* @__PURE__ */ jsx7(Td, { children: /* @__PURE__ */ jsxs4(
+            Link,
+            {
+              href: `/iam/roles/${role.id}`,
+              className: "block text-left font-medium hover:text-primary hover:underline cursor-pointer",
+              children: [
+                /* @__PURE__ */ jsx7("p", { children: str(role.name) || role.code }),
+                /* @__PURE__ */ jsx7(Badge2, { variant: "outline", className: "mt-1 text-xs", children: role.code })
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsx7(Td, { children: /* @__PURE__ */ jsx7("span", { className: "text-muted-foreground line-clamp-1 max-w-[200px]", children: str(role.description) || "\u2014" }) }),
+          /* @__PURE__ */ jsx7(Td, { children: /* @__PURE__ */ jsxs4("div", { className: "flex flex-wrap gap-2", children: [
+            role.isSystem ? /* @__PURE__ */ jsx7(Badge2, { children: "System" }) : null,
+            /* @__PURE__ */ jsxs4(Badge2, { variant: "secondary", children: [
+              role.permissionCount ?? role.permissionIds?.length ?? 0,
+              " ",
+              "permissions"
+            ] })
+          ] }) }),
+          /* @__PURE__ */ jsx7(Td, { children: /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-1 text-muted-foreground", children: [
+            /* @__PURE__ */ jsx7(IconCalendar2, { className: "h-4 w-4" }),
+            new Date(role.createdAt).toLocaleDateString()
+          ] }) }),
+          /* @__PURE__ */ jsx7(Td, { children: /* @__PURE__ */ jsx7(DataTableAction, { onClick: () => setDrawerRole(role) }) })
+        ] }, role.id)) })
+      ] }),
+      /* @__PURE__ */ jsx7(
+        DataTablePagination,
+        {
+          pageIndex,
+          pageSize,
+          pageCount,
+          totalRows,
+          onPageChange,
+          onPageSizeChange
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxs4("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsx7("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4", children: data.map((r) => /* @__PURE__ */ jsx7(RoleCard, { role: r }, r.id)) }),
+    /* @__PURE__ */ jsx7(
+      DataTablePagination,
+      {
+        pageIndex,
+        pageSize,
+        pageCount,
+        totalRows,
+        onPageChange,
+        onPageSizeChange
+      }
+    )
+  ] });
+}
+
+// src/pages/iam/users/activity/_components/role-section.tsx
+import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+var LIMIT = 100;
+var TABLE_COLUMN_COUNT2 = 4;
+function filterAndSort(roles, search, sort, order) {
+  let out = roles;
+  if (search.trim()) {
+    const q = search.trim().toLowerCase();
+    out = out.filter(
+      (r) => str(r.name).toLowerCase().includes(q) || r.code.toLowerCase().includes(q)
+    );
+  }
+  const mult = order === "asc" ? 1 : -1;
+  const by = sort === "code" ? "code" : "createdAt";
+  out = [...out].sort(
+    (a, b) => by === "code" ? mult * a.code.localeCompare(b.code) : mult * (new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime())
+  );
+  return out;
+}
+function RoleSection({ userId }) {
+  const [open, setOpen] = useState3(false);
+  const sectionState = useEntitySectionState2({
+    defaultSort: "createdAt",
+    defaultOrder: "desc",
+    defaultPageSize: 10,
+    filterOptions: [
+      { label: "All", value: "" },
+      { label: "By Code", value: "code" }
+    ],
+    sortOptions: [
+      { label: "Created", value: "createdAt" },
+      { label: "Updated", value: "updatedAt" },
+      { label: "Code", value: "code" }
+    ],
+    views: ["table", "card"]
+  });
+  const { data, isPending, isFetching } = authApi$.useQuery(
+    "get",
+    "/roles",
+    { params: { query: { limit: LIMIT } } },
+    { ...defaultEntityQueryOptions, enabled: open }
+  );
+  const isLoading = isPending || isFetching;
+  const roles = data?.roles ?? [];
+  const filtered = useMemo3(
+    () => filterAndSort(
+      roles,
+      sectionState.search,
+      sectionState.sort,
+      sectionState.order
+    ),
+    [roles, sectionState.search, sectionState.sort, sectionState.order]
+  );
+  const pageCount = Math.ceil(filtered.length / sectionState.pageSize) || 1;
+  const pageIndex = Math.min(sectionState.page - 1, Math.max(0, pageCount - 1));
+  const paginated = useMemo3(
+    () => filtered.slice(
+      pageIndex * sectionState.pageSize,
+      pageIndex * sectionState.pageSize + sectionState.pageSize
+    ),
+    [filtered, pageIndex, sectionState.pageSize]
+  );
+  return /* @__PURE__ */ jsx8(
+    EntitySection,
+    {
+      title: "Role",
+      state: sectionState,
+      onOpenChange: setOpen,
+      actions: /* @__PURE__ */ jsx8(
+        RoleSelector,
+        {
+          trigger: /* @__PURE__ */ jsxs5(Button2, { variant: "outline", size: "sm", children: [
+            /* @__PURE__ */ jsx8(IconPlus, { className: "h-4 w-4" }),
+            "Add role"
+          ] }),
+          multiple: true,
+          onSelect: (roles2) => {
+            console.log("Selected roles:", userId, roles2);
+          }
+        }
+      ),
+      config: {
+        searchPlaceholder: "Search roles...",
+        filterOptions: sectionState.filterOptions,
+        sortOptions: sectionState.sortOptions,
+        views: sectionState.views
+      },
+      children: (state) => /* @__PURE__ */ jsxs5(Fragment2, { children: [
+        isLoading && /* @__PURE__ */ jsx8(
+          EntityLoadingState2,
+          {
+            view: state.view,
+            rowCount: state.pageSize,
+            columnCount: TABLE_COLUMN_COUNT2,
+            cardCount: state.pageSize
+          }
+        ),
+        !isLoading && filtered.length === 0 && /* @__PURE__ */ jsx8(
+          EntityEmptyState2,
+          {
+            icon: IconShield3,
+            entityName: "role",
+            title: "No roles",
+            description: roles.length === 0 ? "No roles in tenant." : "No matches."
+          }
+        ),
+        !isLoading && filtered.length > 0 && /* @__PURE__ */ jsx8(
+          RolesList,
+          {
+            data: paginated,
+            view: state.view,
+            pageIndex,
+            pageSize: state.pageSize,
+            pageCount,
+            totalRows: filtered.length,
+            onPageChange: (p) => state.setPage(p + 1),
+            onPageSizeChange: (size) => {
+              state.setPageSize(size);
+              state.setPage(1);
+            }
+          }
+        )
+      ] })
+    }
+  );
+}
+
+// src/pages/iam/users/activity/user-activity-page-content.tsx
+import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+function UserActivityPageContent({
+  userId
+}) {
+  if (!userId) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs6("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxs6(Card2, { children: [
+      /* @__PURE__ */ jsx9(CardHeader2, { children: /* @__PURE__ */ jsx9(CardTitle, { children: "Activity" }) }),
+      /* @__PURE__ */ jsxs6(CardContent2, { className: "flex items-center gap-2 text-muted-foreground text-sm", children: [
+        /* @__PURE__ */ jsx9(IconCalendar3, { className: "h-4 w-4" }),
+        "Activity (placeholder)"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx9(RoleSection, { userId }),
+    /* @__PURE__ */ jsx9(Section, { title: "Permissions", children: "test" }),
+    /* @__PURE__ */ jsx9(Section, { title: "Groups", children: "test" })
+  ] });
+}
+
+// src/pages/iam/user-activity.tsx
+import { jsx as jsx10 } from "react/jsx-runtime";
+async function UserActivityPage({
+  params
+}) {
+  const { id } = await params;
+  return /* @__PURE__ */ jsx10(UserActivityPageContent, { userId: id });
+}
+export {
+  UserActivityPage as default
+};
+//# sourceMappingURL=user-activity.js.map