@mesob/auth-react 0.4.0 → 0.4.2

package/dist/chunk-JB6XVST4.js

@@ -0,0 +1,141 @@
+import {
+  RoleForm,
+  RolesList
+} from "./chunk-AIMD6R6U.js";
+import {
+  defaultEntityQueryOptions
+} from "./chunk-NPW7D2HZ.js";
+import {
+  useApi
+} from "./chunk-72YRO3A7.js";
+
+// src/components/iam/roles-page.tsx
+import {
+  Button,
+  EntityDrawerTrigger,
+  EntityFilter,
+  EntityHeader,
+  EntitySearch,
+  EntitySort,
+  EntityViewToggle,
+  PageBody,
+  PageContainer,
+  useBreadcrumbs,
+  useEntityPagination,
+  useEntityParams
+} from "@mesob/ui/components";
+import { IconShield } from "@tabler/icons-react";
+import { useQueryClient } from "@tanstack/react-query";
+import { useState } from "react";
+import { toast } from "sonner";
+import { jsx, jsxs } from "react/jsx-runtime";
+function RolesPage() {
+  const { hooks } = useApi();
+  const qc = useQueryClient();
+  useBreadcrumbs({
+    items: [
+      { label: "Home", href: "/dashboard" },
+      { label: "IAM", href: "/iam/roles" },
+      { label: "Roles" }
+    ]
+  });
+  const [createOpen, setCreateOpen] = useState(false);
+  const { queryConfig, params, setParams } = useEntityParams({
+    searchKey: "search"
+  });
+  const rolesQuery = queryConfig;
+  const { data, isPending, isFetching } = hooks.useQuery(
+    "get",
+    "/roles",
+    rolesQuery,
+    defaultEntityQueryOptions
+  );
+  const seedRoles = hooks.useMutation("post", "/roles/seed", {
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ["get", "/roles"] });
+      toast.success("Roles seeded");
+    },
+    onError: () => {
+      toast.error("Failed to seed roles");
+    }
+  });
+  const isLoading = isPending || isFetching;
+  const roles = data?.roles ?? [];
+  const { total, pageCount } = useEntityPagination({
+    items: roles,
+    total: data?.total,
+    pageSize: params.pageSize
+  });
+  return /* @__PURE__ */ jsx(PageContainer, { className: "flex flex-1 flex-col gap-4 p-4 pt-0", children: /* @__PURE__ */ jsxs(PageBody, { className: "px-0", children: [
+    /* @__PURE__ */ jsx(
+      EntityHeader,
+      {
+        icon: /* @__PURE__ */ jsx(IconShield, { className: "h-5 w-5" }),
+        title: "Roles",
+        actions: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "outline",
+              onClick: () => seedRoles.mutate({}),
+              loading: seedRoles.isPending,
+              children: "Seed roles"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            EntityDrawerTrigger,
+            {
+              mode: "new",
+              entity: "Role",
+              open: createOpen,
+              onOpenChange: setCreateOpen,
+              children: (open, onClose) => /* @__PURE__ */ jsx(RoleForm, { mode: "new", open, onClose })
+            }
+          )
+        ] }),
+        search: /* @__PURE__ */ jsx(EntitySearch, { paramKey: "search", placeholder: "Search roles..." }),
+        filter: /* @__PURE__ */ jsx(
+          EntityFilter,
+          {
+            options: [
+              { label: "All", value: "" },
+              { label: "By Code", value: "code" }
+            ],
+            placeholder: "Filter"
+          }
+        ),
+        sort: /* @__PURE__ */ jsx(
+          EntitySort,
+          {
+            options: [
+              { label: "Created", value: "createdAt" },
+              { label: "Updated", value: "updatedAt" },
+              { label: "Code", value: "code" }
+            ]
+          }
+        ),
+        view: /* @__PURE__ */ jsx(EntityViewToggle, { views: ["table", "card"] })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      RolesList,
+      {
+        data: roles,
+        isLoading,
+        view: params.view || "table",
+        pageIndex: params.page - 1,
+        pageSize: params.pageSize,
+        pageCount,
+        totalRows: total,
+        onCreateNew: () => setCreateOpen(true),
+        onPageChange: (p) => setParams({ page: p + 1 }),
+        onPageSizeChange: (size) => setParams({ pageSize: size, page: 1 })
+      }
+    )
+  ] }) });
+}
+
+export {
+  RolesPage
+};
+//# sourceMappingURL=chunk-JB6XVST4.js.map

package/dist/chunk-JB6XVST4.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/iam/roles-page.tsx"],"sourcesContent":["'use client';\n\nimport {\n  Button,\n  EntityDrawerTrigger,\n  EntityFilter,\n  EntityHeader,\n  EntitySearch,\n  EntitySort,\n  EntityViewToggle,\n  PageBody,\n  PageContainer,\n  useBreadcrumbs,\n  useEntityPagination,\n  useEntityParams,\n} from '@mesob/ui/components';\nimport { IconShield } from '@tabler/icons-react';\nimport { useQueryClient } from '@tanstack/react-query';\nimport { useState } from 'react';\nimport { toast } from 'sonner';\nimport type { paths } from '../../data/openapi';\nimport { defaultEntityQueryOptions } from '../../lib/query-options';\nimport { RoleForm } from '../../pages/iam/roles/_components/role-form';\nimport { RolesList } from '../../pages/iam/roles/_components/roles-list';\nimport { useApi } from '../../provider';\n\nexport function RolesPage() {\n  const { hooks } = useApi();\n  const qc = useQueryClient();\n  useBreadcrumbs({\n    items: [\n      { label: 'Home', href: '/dashboard' },\n      { label: 'IAM', href: '/iam/roles' },\n      { label: 'Roles' },\n    ],\n  });\n\n  const [createOpen, setCreateOpen] = useState(false);\n  const { queryConfig, params, setParams } = useEntityParams({\n    searchKey: 'search',\n  });\n  const rolesQuery = queryConfig as {\n    params: {\n      query: NonNullable<paths['/roles']['get']['parameters']['query']>;\n    };\n  };\n\n  const { data, isPending, isFetching } = hooks.useQuery(\n    'get',\n    '/roles',\n    rolesQuery,\n    defaultEntityQueryOptions,\n  );\n\n  const seedRoles = hooks.useMutation('post', '/roles/seed', {\n    onSuccess: () => {\n      qc.invalidateQueries({ queryKey: ['get', '/roles'] });\n      toast.success('Roles seeded');\n    },\n    onError: () => {\n      toast.error('Failed to seed roles');\n    },\n  });\n\n  const isLoading = isPending || isFetching;\n  const roles = data?.roles ?? [];\n  const { total, pageCount } = useEntityPagination({\n    items: roles,\n    total: data?.total,\n    pageSize: params.pageSize,\n  });\n\n  return (\n    <PageContainer className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n      <PageBody className=\"px-0\">\n        <EntityHeader\n          icon={<IconShield className=\"h-5 w-5\" />}\n          title=\"Roles\"\n          actions={\n            <div className=\"flex items-center gap-2\">\n              <Button\n                variant=\"outline\"\n                onClick={() => seedRoles.mutate({})}\n                loading={seedRoles.isPending}\n              >\n                Seed roles\n              </Button>\n              <EntityDrawerTrigger\n                mode=\"new\"\n                entity=\"Role\"\n                open={createOpen}\n                onOpenChange={setCreateOpen}\n              >\n                {(open, onClose) => (\n                  <RoleForm mode=\"new\" open={open} onClose={onClose} />\n                )}\n              </EntityDrawerTrigger>\n            </div>\n          }\n          search={\n            <EntitySearch paramKey=\"search\" placeholder=\"Search roles...\" />\n          }\n          filter={\n            <EntityFilter\n              options={[\n                { label: 'All', value: '' },\n                { label: 'By Code', value: 'code' },\n              ]}\n              placeholder=\"Filter\"\n            />\n          }\n          sort={\n            <EntitySort\n              options={[\n                { label: 'Created', value: 'createdAt' },\n                { label: 'Updated', value: 'updatedAt' },\n                { label: 'Code', value: 'code' },\n              ]}\n            />\n          }\n          view={<EntityViewToggle views={['table', 'card']} />}\n        />\n        <RolesList\n          data={roles}\n          isLoading={isLoading}\n          view={(params.view || 'table') as 'table' | 'card'}\n          pageIndex={params.page - 1}\n          pageSize={params.pageSize}\n          pageCount={pageCount}\n          totalRows={total}\n          onCreateNew={() => setCreateOpen(true)}\n          onPageChange={(p) => setParams({ page: p + 1 })}\n          onPageSizeChange={(size) => setParams({ pageSize: size, page: 1 })}\n        />\n      </PageBody>\n    </PageContainer>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-JUHBVG5Q.js

@@ -0,0 +1,303 @@
+import {
+  RoleCard,
+  RolesList,
+  str
+} from "./chunk-AIMD6R6U.js";
+import {
+  authApi$
+} from "./chunk-3BZC4VVD.js";
+import {
+  defaultEntityQueryOptions
+} from "./chunk-NPW7D2HZ.js";
+
+// src/pages/iam/users/activity/user-activity-page-content.tsx
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  Section
+} from "@mesob/ui/components";
+import { IconCalendar as IconCalendar2 } from "@tabler/icons-react";
+
+// src/pages/iam/users/activity/_components/role-section.tsx
+import {
+  Button,
+  EntityEmptyState,
+  EntityLoadingState,
+  EntitySection,
+  useEntitySectionState as useEntitySectionState2
+} from "@mesob/ui/components";
+import { IconPlus, IconShield as IconShield2 } from "@tabler/icons-react";
+import { useMemo, useState } 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";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function SelectableRoleCard({
+  role,
+  selected,
+  onToggle
+}) {
+  return (
+    // biome-ignore lint/a11y/useSemanticElements: div to avoid nested buttons from RoleCard
+    /* @__PURE__ */ jsx(
+      "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__ */ jsx(RoleCard, { role, mode: "static" })
+      }
+    )
+  );
+}
+var roleColumns = [
+  {
+    key: "role",
+    header: "Role",
+    cell: (role) => /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("p", { className: "font-medium", children: str(role.name) || role.code }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: role.code })
+    ] })
+  },
+  {
+    key: "description",
+    header: "Description",
+    cell: (role) => /* @__PURE__ */ jsx("span", { className: "text-muted-foreground line-clamp-1 max-w-[200px]", children: str(role.description) || "\u2014" })
+  },
+  {
+    key: "created",
+    header: "Created",
+    cell: (role) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 text-muted-foreground", children: [
+      /* @__PURE__ */ jsx(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__ */ jsx(SelectableRoleCard, { role, selected, onToggle })
+  };
+  return /* @__PURE__ */ jsx(
+    EntitySelector,
+    {
+      trigger,
+      config,
+      onSelect,
+      items: roles,
+      total: data?.total,
+      isLoading: isPending || isFetching,
+      state
+    }
+  );
+}
+
+// src/pages/iam/users/activity/_components/role-section.tsx
+import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var LIMIT = 100;
+var TABLE_COLUMN_COUNT = 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] = useState(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 = useMemo(
+    () => 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 = useMemo(
+    () => filtered.slice(
+      pageIndex * sectionState.pageSize,
+      pageIndex * sectionState.pageSize + sectionState.pageSize
+    ),
+    [filtered, pageIndex, sectionState.pageSize]
+  );
+  return /* @__PURE__ */ jsx2(
+    EntitySection,
+    {
+      title: "Role",
+      state: sectionState,
+      onOpenChange: setOpen,
+      actions: /* @__PURE__ */ jsx2(
+        RoleSelector,
+        {
+          trigger: /* @__PURE__ */ jsxs2(Button, { variant: "outline", size: "sm", children: [
+            /* @__PURE__ */ jsx2(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__ */ jsxs2(Fragment2, { children: [
+        isLoading && /* @__PURE__ */ jsx2(
+          EntityLoadingState,
+          {
+            view: state.view,
+            rowCount: state.pageSize,
+            columnCount: TABLE_COLUMN_COUNT,
+            cardCount: state.pageSize
+          }
+        ),
+        !isLoading && filtered.length === 0 && /* @__PURE__ */ jsx2(
+          EntityEmptyState,
+          {
+            icon: IconShield2,
+            entityName: "role",
+            title: "No roles",
+            description: roles.length === 0 ? "No roles in tenant." : "No matches."
+          }
+        ),
+        !isLoading && filtered.length > 0 && /* @__PURE__ */ jsx2(
+          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 jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function UserActivityPageContent({
+  userId
+}) {
+  if (!userId) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs3("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxs3(Card, { children: [
+      /* @__PURE__ */ jsx3(CardHeader, { children: /* @__PURE__ */ jsx3(CardTitle, { children: "Activity" }) }),
+      /* @__PURE__ */ jsxs3(CardContent, { className: "flex items-center gap-2 text-muted-foreground text-sm", children: [
+        /* @__PURE__ */ jsx3(IconCalendar2, { className: "h-4 w-4" }),
+        "Activity (placeholder)"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx3(RoleSection, { userId }),
+    /* @__PURE__ */ jsx3(Section, { title: "Permissions", children: "test" }),
+    /* @__PURE__ */ jsx3(Section, { title: "Groups", children: "test" })
+  ] });
+}
+
+export {
+  UserActivityPageContent
+};
+//# sourceMappingURL=chunk-JUHBVG5Q.js.map

package/dist/chunk-JUHBVG5Q.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/pages/iam/users/activity/user-activity-page-content.tsx","../src/pages/iam/users/activity/_components/role-section.tsx","../src/pages/iam/roles/_components/role-selector.tsx"],"sourcesContent":["'use client';\n\nimport {\n  Card,\n  CardContent,\n  CardHeader,\n  CardTitle,\n  Section,\n} from '@mesob/ui/components';\nimport { IconCalendar } from '@tabler/icons-react';\nimport { RoleSection } from './_components/role-section';\n\ntype UserActivityPageContentProps = {\n  userId: string;\n};\n\nexport function UserActivityPageContent({\n  userId,\n}: UserActivityPageContentProps) {\n  if (!userId) {\n    return null;\n  }\n\n  return (\n    <div className=\"space-y-4\">\n      <Card>\n        <CardHeader>\n          <CardTitle>Activity</CardTitle>\n        </CardHeader>\n        <CardContent className=\"flex items-center gap-2 text-muted-foreground text-sm\">\n          <IconCalendar className=\"h-4 w-4\" />\n          Activity (placeholder)\n        </CardContent>\n      </Card>\n      <RoleSection userId={userId} />\n      <Section title=\"Permissions\">test</Section>\n      <Section title=\"Groups\">test</Section>\n    </div>\n  );\n}\n","'use client';\n\nimport {\n  Button,\n  EntityEmptyState,\n  EntityLoadingState,\n  EntitySection,\n  useEntitySectionState,\n} from '@mesob/ui/components';\nimport { IconPlus, IconShield } from '@tabler/icons-react';\nimport { useMemo, useState } from 'react';\nimport { RoleSelector } from '../../../roles/_components/role-selector';\nimport type { Role } from '../../../roles/_components/roles-data';\nimport { str } from '../../../roles/_components/roles-data';\nimport { RolesList } from '../../../roles/_components/roles-list';\nimport {\n  authApi$,\n  defaultEntityQueryOptions,\n} from '../../../shared/page-helpers';\n\nconst LIMIT = 100;\nconst TABLE_COLUMN_COUNT = 4;\n\nfunction filterAndSort(\n  roles: Role[],\n  search: string,\n  sort: string,\n  order: 'asc' | 'desc',\n) {\n  let out = roles;\n  if (search.trim()) {\n    const q = search.trim().toLowerCase();\n    out = out.filter(\n      (r) =>\n        str(r.name).toLowerCase().includes(q) ||\n        r.code.toLowerCase().includes(q),\n    );\n  }\n  const mult = order === 'asc' ? 1 : -1;\n  const by = sort === 'code' ? 'code' : 'createdAt';\n  out = [...out].sort((a, b) =>\n    by === 'code'\n      ? mult * a.code.localeCompare(b.code)\n      : mult *\n        (new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime()),\n  );\n  return out;\n}\n\nexport function RoleSection({ userId }: { userId: string }) {\n  const [open, setOpen] = useState(false);\n  const sectionState = useEntitySectionState({\n    defaultSort: 'createdAt',\n    defaultOrder: 'desc',\n    defaultPageSize: 10,\n    filterOptions: [\n      { label: 'All', value: '' },\n      { label: 'By Code', value: 'code' },\n    ],\n    sortOptions: [\n      { label: 'Created', value: 'createdAt' },\n      { label: 'Updated', value: 'updatedAt' },\n      { label: 'Code', value: 'code' },\n    ],\n    views: ['table', 'card'],\n  });\n\n  const { data, isPending, isFetching } = authApi$.useQuery(\n    'get',\n    '/roles',\n    { params: { query: { limit: LIMIT } } },\n    { ...defaultEntityQueryOptions, enabled: open },\n  );\n  const isLoading = isPending || isFetching;\n  const roles = data?.roles ?? [];\n\n  const filtered = useMemo(\n    () =>\n      filterAndSort(\n        roles,\n        sectionState.search,\n        sectionState.sort,\n        sectionState.order,\n      ),\n    [roles, sectionState.search, sectionState.sort, sectionState.order],\n  );\n  const pageCount = Math.ceil(filtered.length / sectionState.pageSize) || 1;\n  const pageIndex = Math.min(sectionState.page - 1, Math.max(0, pageCount - 1));\n  const paginated = useMemo(\n    () =>\n      filtered.slice(\n        pageIndex * sectionState.pageSize,\n        pageIndex * sectionState.pageSize + sectionState.pageSize,\n      ),\n    [filtered, pageIndex, sectionState.pageSize],\n  );\n\n  return (\n    <EntitySection\n      title=\"Role\"\n      state={sectionState}\n      onOpenChange={setOpen}\n      actions={\n        <RoleSelector\n          trigger={\n            <Button variant=\"outline\" size=\"sm\">\n              <IconPlus className=\"h-4 w-4\" />\n              Add role\n            </Button>\n          }\n          multiple\n          onSelect={(roles) => {\n            // TODO: assign roles to user; logging for now\n            // biome-ignore lint/suspicious/noConsole: intentional for now\n            console.log('Selected roles:', userId, roles);\n          }}\n        />\n      }\n      config={{\n        searchPlaceholder: 'Search roles...',\n        filterOptions: sectionState.filterOptions,\n        sortOptions: sectionState.sortOptions,\n        views: sectionState.views,\n      }}\n    >\n      {(state) => (\n        <>\n          {isLoading && (\n            <EntityLoadingState\n              view={state.view as 'table' | 'card'}\n              rowCount={state.pageSize}\n              columnCount={TABLE_COLUMN_COUNT}\n              cardCount={state.pageSize}\n            />\n          )}\n          {!isLoading && filtered.length === 0 && (\n            <EntityEmptyState\n              icon={IconShield}\n              entityName=\"role\"\n              title=\"No roles\"\n              description={\n                roles.length === 0 ? 'No roles in tenant.' : 'No matches.'\n              }\n            />\n          )}\n          {!isLoading && filtered.length > 0 && (\n            <RolesList\n              data={paginated}\n              view={state.view as 'table' | 'card'}\n              pageIndex={pageIndex}\n              pageSize={state.pageSize}\n              pageCount={pageCount}\n              totalRows={filtered.length}\n              onPageChange={(p) => state.setPage(p + 1)}\n              onPageSizeChange={(size) => {\n                state.setPageSize(size);\n                state.setPage(1);\n              }}\n            />\n          )}\n        </>\n      )}\n    </EntitySection>\n  );\n}\n","'use client';\n\nimport {\n  EntitySelector,\n  type EntitySelectorColumn,\n  type EntitySelectorConfig,\n  useEntitySectionState,\n} from '@mesob/ui/components';\nimport { cn } from '@mesob/ui/lib/utils';\nimport { IconCalendar, IconShield } from '@tabler/icons-react';\nimport type { ReactNode } from 'react';\nimport type { paths } from '../../../../data/openapi';\nimport { authApi$, defaultEntityQueryOptions } from '../../shared/page-helpers';\nimport { RoleCard } from './role-card';\nimport type { Role } from './roles-data';\nimport { str } from './roles-data';\n\nfunction SelectableRoleCard({\n  role,\n  selected,\n  onToggle,\n}: {\n  role: Role;\n  selected: boolean;\n  onToggle: () => void;\n}) {\n  return (\n    // biome-ignore lint/a11y/useSemanticElements: div to avoid nested buttons from RoleCard\n    <div\n      role=\"button\"\n      tabIndex={0}\n      onClick={onToggle}\n      onKeyDown={(e) => {\n        if (e.key === 'Enter') {\n          onToggle();\n        }\n      }}\n      className={cn(\n        'cursor-pointer rounded-lg transition-shadow focus:outline-none focus-visible:ring-2 focus-visible:ring-ring',\n        selected && 'ring-primary ring-2',\n      )}\n    >\n      <RoleCard role={role} mode=\"static\" />\n    </div>\n  );\n}\n\nconst roleColumns: EntitySelectorColumn<Role>[] = [\n  {\n    key: 'role',\n    header: 'Role',\n    cell: (role) => (\n      <>\n        <p className=\"font-medium\">{str(role.name) || role.code}</p>\n        <p className=\"text-sm text-muted-foreground\">{role.code}</p>\n      </>\n    ),\n  },\n  {\n    key: 'description',\n    header: 'Description',\n    cell: (role) => (\n      <span className=\"text-muted-foreground line-clamp-1 max-w-[200px]\">\n        {str(role.description) || '—'}\n      </span>\n    ),\n  },\n  {\n    key: 'created',\n    header: 'Created',\n    cell: (role) => (\n      <div className=\"flex items-center gap-1 text-muted-foreground\">\n        <IconCalendar className=\"h-4 w-4\" />\n        {new Date(role.createdAt).toLocaleDateString()}\n      </div>\n    ),\n  },\n];\n\ntype RoleSelectorProps = {\n  trigger: ReactNode;\n  multiple?: boolean;\n  onSelect: (roles: Role[]) => void;\n  modalSize?: 'sm' | 'md' | 'lg' | 'xl' | 'full';\n  contentClassName?: string;\n};\n\nexport function RoleSelector({\n  trigger,\n  multiple = true,\n  onSelect,\n  modalSize = 'xl',\n  contentClassName,\n}: RoleSelectorProps) {\n  const state = useEntitySectionState({\n    defaultSort: 'createdAt',\n    defaultOrder: 'desc',\n    defaultPageSize: 10,\n    searchParamName: 'search',\n  });\n  const rolesQuery = state.queryConfig as {\n    params: {\n      query: NonNullable<paths['/roles']['get']['parameters']['query']>;\n    };\n  };\n\n  const { data, isPending, isFetching } = authApi$.useQuery(\n    'get',\n    '/roles',\n    rolesQuery,\n    defaultEntityQueryOptions,\n  );\n\n  const roles = data?.roles ?? [];\n\n  const config: EntitySelectorConfig<Role> = {\n    title: 'Select role(s)',\n    modalSize,\n    contentClassName,\n    multiple,\n    entityName: 'role',\n    entityIcon: IconShield,\n    columns: roleColumns,\n    columnCount: 3,\n    getItemLabel: (role) => str(role.name) || role.code,\n    searchPlaceholder: 'Search roles...',\n    wrapHeaderInCard: false,\n    filterOptions: [\n      { label: 'All', value: '' },\n      { label: 'By Code', value: 'code' },\n    ],\n    sortOptions: [\n      { label: 'Created', value: 'createdAt' },\n      { label: 'Updated', value: 'updatedAt' },\n      { label: 'Code', value: 'code' },\n    ],\n    showViewToggle: false,\n    renderCard: (role, selected, onToggle) => (\n      <SelectableRoleCard role={role} selected={selected} onToggle={onToggle} />\n    ),\n  };\n\n  return (\n    <EntitySelector<Role>\n      trigger={trigger}\n      config={config}\n      onSelect={onSelect}\n      items={roles}\n      total={data?.total}\n      isLoading={isPending || isFetching}\n      state={state}\n    />\n  );\n}\n"],"mappings":"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","names":["IconCalendar","useEntitySectionState","IconShield","Fragment","jsx","jsxs","useEntitySectionState","roles","IconShield","jsx","jsxs","IconCalendar"]}

package/dist/chunk-JZZJCBAE.js

@@ -0,0 +1,118 @@
+import {
+  DataTable
+} from "./chunk-TFVBER3Y.js";
+import {
+  useApi
+} from "./chunk-72YRO3A7.js";
+
+// src/components/iam/roles.tsx
+import { Badge, Button } from "@mesob/ui/components";
+import { useLocale } from "next-intl";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function getTranslation(value, locale) {
+  if (!value) {
+    return "";
+  }
+  if (typeof value === "string") {
+    return value;
+  }
+  if (typeof value === "object") {
+    return value[locale] ?? value.en ?? value.am ?? "";
+  }
+  return "";
+}
+function Roles() {
+  const { hooks } = useApi();
+  const locale = useLocale();
+  const [page, setPage] = useState(1);
+  const limit = 20;
+  const { data, isLoading, error } = hooks.useQuery("get", "/roles", {
+    params: {
+      query: {
+        page: String(page),
+        limit: String(limit)
+      }
+    }
+  });
+  const columns = [
+    {
+      key: "name",
+      header: "Role",
+      cell: (role) => /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("p", { className: "font-medium", children: getTranslation(role.name, locale) }),
+        /* @__PURE__ */ jsx(Badge, { variant: "outline", className: "mt-1", children: role.code })
+      ] })
+    },
+    {
+      key: "access",
+      header: "Access",
+      cell: (role) => /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-2", children: [
+        role.isSystem ? /* @__PURE__ */ jsx(Badge, { children: "System" }) : null,
+        /* @__PURE__ */ jsxs(Badge, { variant: "secondary", children: [
+          role.permissionCount ?? 0,
+          " permissions"
+        ] })
+      ] })
+    },
+    {
+      key: "createdAt",
+      header: "Created",
+      cell: (role) => /* @__PURE__ */ jsx("p", { className: "text-sm", children: new Date(role.createdAt).toLocaleDateString() })
+    },
+    {
+      key: "actions",
+      header: "Actions",
+      cell: (_role) => /* @__PURE__ */ jsx("div", { className: "flex gap-2", children: /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", children: "Edit" }) })
+    }
+  ];
+  if (error) {
+    return /* @__PURE__ */ jsx("div", { className: "p-6 text-center", children: /* @__PURE__ */ jsx("p", { className: "text-destructive", children: "Error loading roles" }) });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "w-full p-6 space-y-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("h1", { className: "text-3xl font-bold", children: "Roles" }),
+        /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: "Manage roles and assigned permissions" })
+      ] }),
+      /* @__PURE__ */ jsx(Button, { children: "Create Role" })
+    ] }),
+    /* @__PURE__ */ jsx(
+      DataTable,
+      {
+        data: data?.roles || [],
+        columns,
+        isLoading,
+        emptyMessage: "No roles found"
+      }
+    ),
+    data && "roles" in data && data.roles && data.roles.length >= limit && /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center", children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "outline",
+          disabled: page === 1,
+          onClick: () => setPage((prev) => prev - 1),
+          children: "Previous"
+        }
+      ),
+      /* @__PURE__ */ jsxs("span", { className: "text-sm text-muted-foreground", children: [
+        "Page ",
+        page
+      ] }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "outline",
+          onClick: () => setPage((prev) => prev + 1),
+          children: "Next"
+        }
+      )
+    ] })
+  ] });
+}
+
+export {
+  Roles
+};
+//# sourceMappingURL=chunk-JZZJCBAE.js.map

package/dist/chunk-JZZJCBAE.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/iam/roles.tsx"],"sourcesContent":["'use client';\n\nimport { Badge, Button } from '@mesob/ui/components';\nimport { useLocale } from 'next-intl';\nimport { useState } from 'react';\nimport { useApi } from '../../provider';\nimport { DataTable, type DataTableColumn } from '../shared/data-table';\n\n// Role type from OpenAPI schema\ntype Role = {\n  id: string;\n  code: string;\n  name: string | { am?: string; en?: string };\n  description?: string | { am?: string; en?: string };\n  createdAt: string;\n  isSystem?: boolean;\n  permissionCount?: number;\n};\n\nfunction getTranslation(\n  value: string | { am?: string; en?: string } | null | undefined,\n  locale: string,\n): string {\n  if (!value) {\n    return '';\n  }\n  if (typeof value === 'string') {\n    return value;\n  }\n  if (typeof value === 'object') {\n    return value[locale as 'am' | 'en'] ?? value.en ?? value.am ?? '';\n  }\n  return '';\n}\n\nexport function Roles() {\n  const { hooks } = useApi();\n  const locale = useLocale();\n  const [page, setPage] = useState(1);\n  const limit = 20;\n\n  // Use openapi-react-query hooks\n  const { data, isLoading, error } = hooks.useQuery('get', '/roles', {\n    params: {\n      query: {\n        page: String(page),\n        limit: String(limit),\n      },\n    },\n  });\n\n  const columns: DataTableColumn<Role>[] = [\n    {\n      key: 'name',\n      header: 'Role',\n      cell: (role) => (\n        <div>\n          <p className=\"font-medium\">{getTranslation(role.name, locale)}</p>\n          <Badge variant=\"outline\" className=\"mt-1\">\n            {role.code}\n          </Badge>\n        </div>\n      ),\n    },\n    {\n      key: 'access',\n      header: 'Access',\n      cell: (role) => (\n        <div className=\"flex flex-wrap gap-2\">\n          {role.isSystem ? <Badge>System</Badge> : null}\n          <Badge variant=\"secondary\">\n            {role.permissionCount ?? 0} permissions\n          </Badge>\n        </div>\n      ),\n    },\n    {\n      key: 'createdAt',\n      header: 'Created',\n      cell: (role) => (\n        <p className=\"text-sm\">\n          {new Date(role.createdAt).toLocaleDateString()}\n        </p>\n      ),\n    },\n    {\n      key: 'actions',\n      header: 'Actions',\n      cell: (_role) => (\n        <div className=\"flex gap-2\">\n          <Button variant=\"outline\" size=\"sm\">\n            Edit\n          </Button>\n        </div>\n      ),\n    },\n  ];\n\n  if (error) {\n    return (\n      <div className=\"p-6 text-center\">\n        <p className=\"text-destructive\">Error loading roles</p>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"w-full p-6 space-y-4\">\n      <div className=\"flex justify-between items-center\">\n        <div>\n          <h1 className=\"text-3xl font-bold\">Roles</h1>\n          <p className=\"text-muted-foreground\">\n            Manage roles and assigned permissions\n          </p>\n        </div>\n        <Button>Create Role</Button>\n      </div>\n\n      <DataTable\n        data={(data as { roles: Role[] })?.roles || []}\n        columns={columns}\n        isLoading={isLoading}\n        emptyMessage=\"No roles found\"\n      />\n\n      {data &&\n        'roles' in data &&\n        data.roles &&\n        (data.roles as Role[]).length >= limit && (\n          <div className=\"flex justify-between items-center\">\n            <Button\n              variant=\"outline\"\n              disabled={page === 1}\n              onClick={() => setPage((prev) => prev - 1)}\n            >\n              Previous\n            </Button>\n            <span className=\"text-sm text-muted-foreground\">Page {page}</span>\n            <Button\n              variant=\"outline\"\n              onClick={() => setPage((prev) => prev + 1)}\n            >\n              Next\n            </Button>\n          </div>\n        )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}