@mesob/auth-react 0.3.5 → 0.4.0

package/dist/pages/iam/permissions.js

@@ -0,0 +1,308 @@
+"use client";
+
+// src/pages/iam/permissions.tsx
+import {
+  Button,
+  EntityFilter,
+  EntityHeader,
+  EntitySearch,
+  EntitySort,
+  EntityViewToggle,
+  PageBody,
+  PageContainer,
+  useBreadcrumbs,
+  useEntityPagination,
+  useEntityParams
+} from "@mesob/ui/components";
+import { IconKey as IconKey2 } from "@tabler/icons-react";
+import { useQueryClient } from "@tanstack/react-query";
+import { toast } from "sonner";
+
+// 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/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/permissions/_components/permissions-list.tsx
+import {
+  Badge as Badge2,
+  DataTablePagination,
+  DisplayTable,
+  EntityEmptyState,
+  EntityLoadingState,
+  Tbody,
+  Td,
+  Th,
+  Thead,
+  Tr
+} from "@mesob/ui/components";
+import { IconKey } from "@tabler/icons-react";
+
+// src/pages/iam/permissions/_components/permission-card.tsx
+import { Badge, Card, CardContent, CardHeader } from "@mesob/ui/components";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function descStr(d) {
+  if (d == null) {
+    return "";
+  }
+  if (typeof d === "string") {
+    return d;
+  }
+  if (typeof d === "object" && d !== null && "en" in d) {
+    return String(d.en ?? "");
+  }
+  return String(d);
+}
+function PermissionCard({ permission }) {
+  return /* @__PURE__ */ jsxs(Card, { className: "hover:shadow-md transition-shadow", children: [
+    /* @__PURE__ */ jsxs(CardHeader, { className: "pb-2", children: [
+      /* @__PURE__ */ jsx2("p", { className: "font-semibold", children: permission.activity }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-1", children: [
+        /* @__PURE__ */ jsx2(Badge, { variant: "secondary", children: permission.application }),
+        /* @__PURE__ */ jsx2(Badge, { variant: "outline", children: permission.feature })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx2(CardContent, { children: descStr(permission.description) && /* @__PURE__ */ jsx2("p", { className: "text-sm text-muted-foreground line-clamp-2", children: descStr(permission.description) }) })
+  ] });
+}
+
+// src/pages/iam/permissions/_components/permissions-list.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var TABLE_COLUMN_COUNT = 4;
+function descStr2(d) {
+  if (d == null) {
+    return "";
+  }
+  if (typeof d === "string") {
+    return d;
+  }
+  if (typeof d === "object" && d !== null && "en" in d) {
+    return String(d.en ?? "");
+  }
+  return String(d);
+}
+function PermissionsList({
+  data,
+  isLoading,
+  view,
+  pageIndex,
+  pageSize,
+  pageCount,
+  totalRows,
+  onPageChange,
+  onPageSizeChange
+}) {
+  if (isLoading) {
+    return /* @__PURE__ */ jsx3(
+      EntityLoadingState,
+      {
+        view,
+        rowCount: pageSize,
+        columnCount: TABLE_COLUMN_COUNT,
+        cardCount: pageSize
+      }
+    );
+  }
+  if (totalRows === 0) {
+    return /* @__PURE__ */ jsx3(
+      EntityEmptyState,
+      {
+        icon: IconKey,
+        entityName: "permission",
+        title: "No permissions",
+        description: "Permissions are managed by the system."
+      }
+    );
+  }
+  if (view === "table") {
+    return /* @__PURE__ */ jsxs2("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsxs2(DisplayTable, { withTableBorder: true, children: [
+        /* @__PURE__ */ jsx3(Thead, { children: /* @__PURE__ */ jsxs2(Tr, { children: [
+          /* @__PURE__ */ jsx3(Th, { children: "Application" }),
+          /* @__PURE__ */ jsx3(Th, { children: "Feature" }),
+          /* @__PURE__ */ jsx3(Th, { children: "Activity" }),
+          /* @__PURE__ */ jsx3(Th, { children: "Description" })
+        ] }) }),
+        /* @__PURE__ */ jsx3(Tbody, { children: data.map((p) => /* @__PURE__ */ jsxs2(Tr, { children: [
+          /* @__PURE__ */ jsx3(Td, { children: /* @__PURE__ */ jsx3(Badge2, { variant: "secondary", children: p.application }) }),
+          /* @__PURE__ */ jsx3(Td, { children: /* @__PURE__ */ jsx3(Badge2, { variant: "outline", children: p.feature }) }),
+          /* @__PURE__ */ jsx3(Td, { children: /* @__PURE__ */ jsx3("span", { className: "font-medium", children: p.activity }) }),
+          /* @__PURE__ */ jsx3(Td, { children: /* @__PURE__ */ jsx3("span", { className: "text-muted-foreground line-clamp-1 max-w-[200px]", children: descStr2(p.description) || "\u2014" }) })
+        ] }, p.id)) })
+      ] }),
+      /* @__PURE__ */ jsx3(
+        DataTablePagination,
+        {
+          pageIndex,
+          pageSize,
+          pageCount,
+          totalRows,
+          onPageChange,
+          onPageSizeChange
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxs2("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsx3("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4", children: data.map((p) => /* @__PURE__ */ jsx3(PermissionCard, { permission: p }, p.id)) }),
+    /* @__PURE__ */ jsx3(
+      DataTablePagination,
+      {
+        pageIndex,
+        pageSize,
+        pageCount,
+        totalRows,
+        onPageChange,
+        onPageSizeChange
+      }
+    )
+  ] });
+}
+
+// src/pages/iam/permissions.tsx
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function PermissionsPage() {
+  const { hooks } = useApi();
+  const qc = useQueryClient();
+  useBreadcrumbs({
+    items: [
+      { label: "Home", href: "/dashboard" },
+      { label: "IAM", href: "/iam/permissions" },
+      { label: "Permissions" }
+    ]
+  });
+  const { queryConfig, params, setParams } = useEntityParams({
+    searchKey: "search",
+    defaultSort: "id",
+    defaultOrder: "asc"
+  });
+  const permissionsQuery = queryConfig;
+  const { data, isPending, isFetching } = hooks.useQuery(
+    "get",
+    "/permissions",
+    permissionsQuery,
+    defaultEntityQueryOptions
+  );
+  const seedPermissions = hooks.useMutation("post", "/permissions/seed", {
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ["get", "/permissions"] });
+      toast.success("Permissions seeded");
+    },
+    onError: () => {
+      toast.error("Failed to seed permissions");
+    }
+  });
+  const isLoading = isPending || isFetching;
+  const permissions = data?.permissions ?? [];
+  const { total, pageCount } = useEntityPagination({
+    items: permissions,
+    total: data?.total,
+    pageSize: params.pageSize
+  });
+  return /* @__PURE__ */ jsx4(PageContainer, { className: "flex flex-1 flex-col gap-4 p-4 pt-0", children: /* @__PURE__ */ jsxs3(PageBody, { className: "px-0", children: [
+    /* @__PURE__ */ jsx4(
+      EntityHeader,
+      {
+        icon: /* @__PURE__ */ jsx4(IconKey2, { className: "h-5 w-5" }),
+        title: "Permissions",
+        actions: /* @__PURE__ */ jsx4(
+          Button,
+          {
+            variant: "outline",
+            onClick: () => seedPermissions.mutate({}),
+            loading: seedPermissions.isPending,
+            children: "Seed permissions"
+          }
+        ),
+        search: /* @__PURE__ */ jsx4(
+          EntitySearch,
+          {
+            paramKey: "search",
+            placeholder: "Search permissions..."
+          }
+        ),
+        filter: /* @__PURE__ */ jsx4(
+          EntityFilter,
+          {
+            options: [
+              { label: "All", value: "" },
+              { label: "Application", value: "application" },
+              { label: "Feature", value: "feature" },
+              { label: "Activity", value: "activity" }
+            ],
+            placeholder: "Search field"
+          }
+        ),
+        sort: /* @__PURE__ */ jsx4(
+          EntitySort,
+          {
+            defaultSort: "id",
+            defaultOrder: "asc",
+            options: [
+              { label: "ID", value: "id" },
+              { label: "Application", value: "application" },
+              { label: "Feature", value: "feature" },
+              { label: "Activity", value: "activity" }
+            ]
+          }
+        ),
+        view: /* @__PURE__ */ jsx4(EntityViewToggle, { views: ["table", "card"] })
+      }
+    ),
+    /* @__PURE__ */ jsx4(
+      PermissionsList,
+      {
+        data: permissions,
+        isLoading,
+        view: params.view || "table",
+        pageIndex: params.page - 1,
+        pageSize: params.pageSize,
+        pageCount,
+        totalRows: total,
+        onPageChange: (p) => setParams({ page: p + 1 }),
+        onPageSizeChange: (size) => setParams({ pageSize: size, page: 1 })
+      }
+    )
+  ] }) });
+}
+export {
+  PermissionsPage as default
+};
+//# sourceMappingURL=permissions.js.map

package/dist/pages/iam/permissions.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/pages/iam/permissions.tsx","../../../src/lib/query-options.ts","../../../src/provider.tsx","../../../src/utils/cookie.ts","../../../src/pages/iam/permissions/_components/permissions-list.tsx","../../../src/pages/iam/permissions/_components/permission-card.tsx"],"sourcesContent":["'use client';\n\nimport {\n  Button,\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 { IconKey } from '@tabler/icons-react';\nimport { useQueryClient } from '@tanstack/react-query';\nimport { toast } from 'sonner';\nimport type { paths } from '../../data/openapi';\nimport { defaultEntityQueryOptions } from '../../lib/query-options';\nimport { useApi } from '../../provider';\nimport { PermissionsList } from './permissions/_components/permissions-list';\n\nexport default function PermissionsPage() {\n  const { hooks } = useApi();\n  const qc = useQueryClient();\n  useBreadcrumbs({\n    items: [\n      { label: 'Home', href: '/dashboard' },\n      { label: 'IAM', href: '/iam/permissions' },\n      { label: 'Permissions' },\n    ],\n  });\n  const { queryConfig, params, setParams } = useEntityParams({\n    searchKey: 'search',\n    defaultSort: 'id',\n    defaultOrder: 'asc',\n  });\n  const permissionsQuery = queryConfig as {\n    params: {\n      query: NonNullable<paths['/permissions']['get']['parameters']['query']>;\n    };\n  };\n\n  const { data, isPending, isFetching } = hooks.useQuery(\n    'get',\n    '/permissions',\n    permissionsQuery,\n    defaultEntityQueryOptions,\n  );\n\n  const seedPermissions = hooks.useMutation('post', '/permissions/seed', {\n    onSuccess: () => {\n      qc.invalidateQueries({ queryKey: ['get', '/permissions'] });\n      toast.success('Permissions seeded');\n    },\n    onError: () => {\n      toast.error('Failed to seed permissions');\n    },\n  });\n\n  const isLoading = isPending || isFetching;\n  const permissions = data?.permissions ?? [];\n  const { total, pageCount } = useEntityPagination({\n    items: permissions,\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={<IconKey className=\"h-5 w-5\" />}\n          title=\"Permissions\"\n          actions={\n            <Button\n              variant=\"outline\"\n              onClick={() => seedPermissions.mutate({})}\n              loading={seedPermissions.isPending}\n            >\n              Seed permissions\n            </Button>\n          }\n          search={\n            <EntitySearch\n              paramKey=\"search\"\n              placeholder=\"Search permissions...\"\n            />\n          }\n          filter={\n            <EntityFilter\n              options={[\n                { label: 'All', value: '' },\n                { label: 'Application', value: 'application' },\n                { label: 'Feature', value: 'feature' },\n                { label: 'Activity', value: 'activity' },\n              ]}\n              placeholder=\"Search field\"\n            />\n          }\n          sort={\n            <EntitySort\n              defaultSort=\"id\"\n              defaultOrder=\"asc\"\n              options={[\n                { label: 'ID', value: 'id' },\n                { label: 'Application', value: 'application' },\n                { label: 'Feature', value: 'feature' },\n                { label: 'Activity', value: 'activity' },\n              ]}\n            />\n          }\n          view={<EntityViewToggle views={['table', 'card']} />}\n        />\n        <PermissionsList\n          data={permissions}\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          onPageChange={(p) => setParams({ page: p + 1 })}\n          onPageSizeChange={(size) => setParams({ pageSize: size, page: 1 })}\n        />\n      </PageBody>\n    </PageContainer>\n  );\n}\n","import { keepPreviousData } from '@tanstack/react-query';\n\nexport const defaultEntityQueryOptions = {\n  refetchOnMount: false,\n  refetchOnWindowFocus: false,\n  refetchOnReconnect: false,\n  staleTime: 60 * 1000,\n  gcTime: 5 * 60 * 1000,\n  placeholderData: keepPreviousData,\n  retry: 1,\n};\n","'use client';\n\nimport { QueryClient, QueryClientProvider } from '@tanstack/react-query';\nimport { deepmerge } from 'deepmerge-ts';\nimport createFetchClient from 'openapi-fetch';\nimport createClient from 'openapi-react-query';\nimport type { ReactNode } from 'react';\nimport { createContext, useContext, useMemo, useState } from 'react';\nimport type { paths } from './data/openapi';\nimport { createTranslator } from './lib/translations';\nimport {\n  type AuthClientConfig,\n  type AuthResponse,\n  defaultAuthClientConfig,\n  type Session,\n  type User,\n} from './types';\nimport { getSessionCookieName } from './utils/cookie';\nimport { createCustomFetch } from './utils/custom-fetch';\n\n// biome-ignore lint/suspicious/noExplicitAny: OpenAPI hooks type\ntype OpenApiHooks = any;\n\n// --- Utility: Check if running on server ---\nfunction isServer(): boolean {\n  return typeof document === 'undefined';\n}\n\n/**\n * @deprecated Cookie is httpOnly and cannot be read client-side.\n * Use `useSession().isAuthenticated` instead.\n * This function always returns false on client.\n */\nexport function hasAuthCookie(_cookieName: string): boolean {\n  // Cookie is httpOnly, can't check client-side\n  // Always return false - use useSession() for auth status\n  return false;\n}\n\n// --- Types ---\nexport type AuthStatus = 'loading' | 'authenticated' | 'unauthenticated';\n\ntype AuthState = {\n  user: User | null;\n  session: Session | null;\n  status: AuthStatus;\n  error: Error | null;\n};\n\ntype SessionContextValue = AuthState & {\n  isLoading: boolean;\n  isAuthenticated: boolean;\n  refresh: () => Promise<void>;\n  signOut: () => Promise<void>;\n};\n\ntype ApiContextValue = {\n  hooks: OpenApiHooks;\n  setAuth: (auth: AuthResponse) => void;\n  clearAuth: () => void;\n  refresh: () => Promise<void>;\n};\n\ntype ConfigContextValue = {\n  config: AuthClientConfig;\n  cookieName: string;\n  t: (key: string, params?: Record<string, string | number>) => string;\n};\n\nconst SessionContext = createContext<SessionContextValue | null>(null);\nconst ApiContext = createContext<ApiContextValue | null>(null);\nconst ConfigContext = createContext<ConfigContextValue | null>(null);\n\nconst queryClient = new QueryClient({\n  defaultOptions: {\n    queries: {\n      refetchOnWindowFocus: false,\n    },\n  },\n});\n\n// --- Hooks ---\n\n/**\n * Get session state including user, session, and auth status.\n * - `status`: 'loading' | 'authenticated' | 'unauthenticated'\n * - `isLoading`: true while fetching session\n * - `isAuthenticated`: true if user and session exist\n */\nexport function useSession(): SessionContextValue {\n  const context = useContext(SessionContext);\n  if (!context) {\n    throw new Error('useSession must be used within MesobAuthProvider');\n  }\n  return context;\n}\n\nexport function useApi(): ApiContextValue {\n  const context = useContext(ApiContext);\n  if (!context) {\n    throw new Error('useApi must be used within MesobAuthProvider');\n  }\n  return context;\n}\n\nexport function useConfig(): ConfigContextValue {\n  const context = useContext(ConfigContext);\n  if (!context) {\n    throw new Error('useConfig must be used within MesobAuthProvider');\n  }\n  return context;\n}\n\n/**\n * @deprecated Cookie is httpOnly, can't be checked client-side.\n * Use `useSession().isAuthenticated` instead.\n */\nexport function useHasAuthCookie(): boolean {\n  const { status } = useSession();\n  return status === 'authenticated' || status === 'loading';\n}\n\n// --- Provider ---\n\ntype MesobAuthProviderProps = {\n  config: AuthClientConfig;\n  children: ReactNode;\n};\n\nexport function MesobAuthProvider({\n  config,\n  children,\n}: MesobAuthProviderProps) {\n  const mergedConfig = useMemo(\n    () =>\n      deepmerge(\n        { ...defaultAuthClientConfig } as Partial<AuthClientConfig>,\n        config,\n      ) as AuthClientConfig,\n    [config],\n  );\n\n  const api = useMemo(\n    () =>\n      createFetchClient<paths>({\n        baseUrl: mergedConfig.baseURL,\n        fetch: createCustomFetch(mergedConfig),\n      }),\n    [mergedConfig],\n  );\n\n  const hooks = useMemo(() => createClient(api), [api]);\n  const cookieName = useMemo(\n    () => getSessionCookieName(mergedConfig),\n    [mergedConfig],\n  );\n\n  return (\n    <QueryClientProvider client={queryClient}>\n      <AuthStateProvider\n        config={mergedConfig}\n        hooks={hooks}\n        cookieName={cookieName}\n      >\n        {children}\n      </AuthStateProvider>\n    </QueryClientProvider>\n  );\n}\n\ntype AuthStateProviderProps = {\n  config: AuthClientConfig;\n  hooks: OpenApiHooks;\n  cookieName: string;\n  children: ReactNode;\n};\n\nfunction AuthStateProvider({\n  config,\n  hooks,\n  cookieName,\n  children,\n}: AuthStateProviderProps) {\n  // Manual override for sign-out / sign-in\n  const [override, setOverride] = useState<AuthState | null>(null);\n\n  // Always fetch session - cookie is httpOnly, can't check client-side\n  // Server will read the cookie and return user/session if valid\n  const {\n    data: sessionData,\n    isLoading,\n    isFetched,\n    error: sessionError,\n    refetch,\n  } = hooks.useQuery(\n    'get',\n    '/session',\n    {},\n    {\n      enabled: !(override || isServer()),\n      refetchOnMount: false,\n      refetchOnWindowFocus: false,\n      refetchOnReconnect: false,\n      retry: false,\n      gcTime: 0,\n      staleTime: 0,\n    },\n  );\n\n  // Derive state directly - no useEffect\n  const user = override?.user ?? sessionData?.user ?? null;\n  const session = override?.session ?? sessionData?.session ?? null;\n  const error = override?.error ?? (sessionError as Error | null);\n\n  // Check error status code\n  const errorStatus = (() => {\n    if (!sessionError) {\n      return null;\n    }\n    const err = sessionError as { status?: number };\n    return err.status ?? null;\n  })();\n\n  // Check if error is a network/connection error\n  const isNetworkError = (() => {\n    if (!sessionError) {\n      return false;\n    }\n    const error = sessionError as Error & { cause?: unknown; data?: unknown };\n    const errorMessage =\n      error.message || String(error) || JSON.stringify(error);\n    // Network errors: TypeError, DOMException, or fetch failures\n    if (\n      error instanceof TypeError ||\n      error instanceof DOMException ||\n      error.name === 'TypeError' ||\n      errorMessage.includes('Failed to fetch') ||\n      errorMessage.includes('ERR_CONNECTION_REFUSED') ||\n      errorMessage.includes('NetworkError') ||\n      errorMessage.includes('Network request failed') ||\n      errorMessage.includes('fetch failed')\n    ) {\n      return true;\n    }\n    // Check error cause\n    if (error.cause) {\n      const causeStr = String(error.cause);\n      if (\n        causeStr.includes('Failed to fetch') ||\n        causeStr.includes('ERR_CONNECTION_REFUSED') ||\n        causeStr.includes('NetworkError')\n      ) {\n        return true;\n      }\n    }\n    return false;\n  })();\n\n  // Compute status\n  // biome-ignore lint: Status determination requires multiple checks\n  const status: AuthStatus = (() => {\n    if (override) {\n      return override.status;\n    }\n    if (isServer()) {\n      return 'loading';\n    }\n    if (user && session) {\n      return 'authenticated';\n    }\n    // Check for network errors or auth errors first - allow auth page to show\n    if (isNetworkError || errorStatus === 401) {\n      return 'unauthenticated';\n    }\n    // If we have an error but it's not a network error, still check loading state\n    if (sessionError && !isNetworkError && errorStatus !== 401) {\n      if (errorStatus && errorStatus >= 500) {\n        return 'authenticated';\n      }\n      // Other errors mean unauthenticated\n      if (isFetched) {\n        return 'unauthenticated';\n      }\n    }\n    if (isLoading || !isFetched) {\n      return 'loading';\n    }\n    if (isFetched && !user && !session) {\n      return 'unauthenticated';\n    }\n    return 'unauthenticated';\n  })();\n\n  const signOutMutation = hooks.useMutation('post', '/sign-out');\n  const t = createTranslator(config.messages || {});\n\n  const setAuth = (auth: AuthResponse) => {\n    setOverride({\n      user: auth.user,\n      session: auth.session,\n      status: 'authenticated',\n      error: null,\n    });\n  };\n\n  const clearAuth = () => {\n    setOverride({\n      user: null,\n      session: null,\n      status: 'unauthenticated',\n      error: null,\n    });\n  };\n\n  const refresh = async () => {\n    setOverride(null);\n    await refetch();\n  };\n\n  const signOut = async () => {\n    try {\n      await signOutMutation.mutateAsync({});\n    } finally {\n      clearAuth();\n    }\n  };\n\n  return (\n    <ConfigContext.Provider value={{ config, cookieName, t }}>\n      <ApiContext.Provider value={{ hooks, setAuth, clearAuth, refresh }}>\n        <SessionContext.Provider\n          value={{\n            user,\n            session,\n            status,\n            error,\n            isLoading: status === 'loading',\n            isAuthenticated: status === 'authenticated',\n            refresh,\n            signOut,\n          }}\n        >\n          {children}\n        </SessionContext.Provider>\n      </ApiContext.Provider>\n    </ConfigContext.Provider>\n  );\n}\n","import type { AuthClientConfig } from '../types';\n\nconst isProduction =\n  typeof process !== 'undefined' && process.env.NODE_ENV === 'production';\n\nexport const getSessionCookieName = (config: AuthClientConfig): string => {\n  const prefix = config.cookiePrefix || '';\n  const baseName = 'session_token';\n  if (prefix) {\n    return `${prefix}_${baseName}`;\n  }\n  return isProduction ? '__Host-session_token' : baseName;\n};\n","'use client';\n\nimport {\n  Badge,\n  DataTablePagination,\n  DisplayTable,\n  EntityEmptyState,\n  EntityLoadingState,\n  Tbody,\n  Td,\n  Th,\n  Thead,\n  Tr,\n} from '@mesob/ui/components';\nimport { IconKey } from '@tabler/icons-react';\nimport { PermissionCard } from './permission-card';\nimport type { Permission } from './permissions-data';\n\nconst TABLE_COLUMN_COUNT = 4;\n\nfunction descStr(d: unknown): string {\n  if (d == null) {\n    return '';\n  }\n  if (typeof d === 'string') {\n    return d;\n  }\n  if (typeof d === 'object' && d !== null && 'en' in d) {\n    return String((d as { en?: string }).en ?? '');\n  }\n  return String(d);\n}\n\ntype PermissionsListProps = {\n  data: Permission[];\n  isLoading?: boolean;\n  view: 'table' | 'card';\n  pageIndex: number;\n  pageSize: number;\n  pageCount: number;\n  totalRows: number;\n  onPageChange: (page: number) => void;\n  onPageSizeChange: (size: number) => void;\n};\n\nexport function PermissionsList({\n  data,\n  isLoading,\n  view,\n  pageIndex,\n  pageSize,\n  pageCount,\n  totalRows,\n  onPageChange,\n  onPageSizeChange,\n}: PermissionsListProps) {\n  if (isLoading) {\n    return (\n      <EntityLoadingState\n        view={view}\n        rowCount={pageSize}\n        columnCount={TABLE_COLUMN_COUNT}\n        cardCount={pageSize}\n      />\n    );\n  }\n  if (totalRows === 0) {\n    return (\n      <EntityEmptyState\n        icon={IconKey}\n        entityName=\"permission\"\n        title=\"No permissions\"\n        description=\"Permissions are managed by the system.\"\n      />\n    );\n  }\n  if (view === 'table') {\n    return (\n      <div className=\"space-y-4\">\n        <DisplayTable withTableBorder>\n          <Thead>\n            <Tr>\n              <Th>Application</Th>\n              <Th>Feature</Th>\n              <Th>Activity</Th>\n              <Th>Description</Th>\n            </Tr>\n          </Thead>\n          <Tbody>\n            {data.map((p) => (\n              <Tr key={p.id}>\n                <Td>\n                  <Badge variant=\"secondary\">{p.application}</Badge>\n                </Td>\n                <Td>\n                  <Badge variant=\"outline\">{p.feature}</Badge>\n                </Td>\n                <Td>\n                  <span className=\"font-medium\">{p.activity}</span>\n                </Td>\n                <Td>\n                  <span className=\"text-muted-foreground line-clamp-1 max-w-[200px]\">\n                    {descStr(p.description) || '—'}\n                  </span>\n                </Td>\n              </Tr>\n            ))}\n          </Tbody>\n        </DisplayTable>\n        <DataTablePagination\n          pageIndex={pageIndex}\n          pageSize={pageSize}\n          pageCount={pageCount}\n          totalRows={totalRows}\n          onPageChange={onPageChange}\n          onPageSizeChange={onPageSizeChange}\n        />\n      </div>\n    );\n  }\n  return (\n    <div className=\"space-y-4\">\n      <div className=\"grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4\">\n        {data.map((p) => (\n          <PermissionCard key={p.id} permission={p} />\n        ))}\n      </div>\n      <DataTablePagination\n        pageIndex={pageIndex}\n        pageSize={pageSize}\n        pageCount={pageCount}\n        totalRows={totalRows}\n        onPageChange={onPageChange}\n        onPageSizeChange={onPageSizeChange}\n      />\n    </div>\n  );\n}\n","'use client';\n\nimport { Badge, Card, CardContent, CardHeader } from '@mesob/ui/components';\nimport type { Permission } from './permissions-data';\n\ntype PermissionCardProps = { permission: Permission };\n\nfunction descStr(d: unknown): string {\n  if (d == null) {\n    return '';\n  }\n  if (typeof d === 'string') {\n    return d;\n  }\n  if (typeof d === 'object' && d !== null && 'en' in d) {\n    return String((d as { en?: string }).en ?? '');\n  }\n  return String(d);\n}\n\nexport function PermissionCard({ permission }: PermissionCardProps) {\n  return (\n    <Card className=\"hover:shadow-md transition-shadow\">\n      <CardHeader className=\"pb-2\">\n        <p className=\"font-semibold\">{permission.activity}</p>\n        <div className=\"flex flex-wrap gap-1\">\n          <Badge variant=\"secondary\">{permission.application}</Badge>\n          <Badge variant=\"outline\">{permission.feature}</Badge>\n        </div>\n      </CardHeader>\n      <CardContent>\n        {descStr(permission.description) && (\n          <p className=\"text-sm text-muted-foreground line-clamp-2\">\n            {descStr(permission.description)}\n          </p>\n        )}\n      </CardContent>\n    </Card>\n  );\n}\n"],"mappings":"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","names":["IconKey","Badge","jsx","jsx","jsxs","descStr","Badge","jsx","jsxs","IconKey"]}

package/dist/pages/iam/role-detail-layout.d.ts

@@ -0,0 +1,12 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+type RoleDetailLayoutPageProps = {
+    children: ReactNode;
+    params: Promise<{
+        id: string;
+    }>;
+};
+declare function RoleDetailLayoutPage({ children, params, }: RoleDetailLayoutPageProps): Promise<react_jsx_runtime.JSX.Element>;
+
+export { RoleDetailLayoutPage as default };

package/dist/pages/iam/role-detail-layout.js

@@ -0,0 +1,145 @@
+// src/components/iam/role-detail-layout.tsx
+import {
+  EntityDetailHeader,
+  EntityEmptyState,
+  PageContainer,
+  useBreadcrumbs
+} from "@mesob/ui/components";
+import { IconShield } from "@tabler/icons-react";
+import { useMemo as useMemo2 } from "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/components/iam/role-detail-layout.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function str(value) {
+  if (value == null) {
+    return "";
+  }
+  if (typeof value === "string") {
+    return value;
+  }
+  if (typeof value === "object" && value !== null && "en" in value) {
+    const localized = value;
+    return localized.en ?? localized.am ?? "";
+  }
+  return String(value);
+}
+function RoleDetailLayout({
+  roleId,
+  basePath = "/iam/roles",
+  children
+}) {
+  const { hooks } = useApi();
+  const { config } = useConfig();
+  const { data, isLoading, isFetching, isError } = hooks.useQuery(
+    "get",
+    "/roles/{id}",
+    { params: { path: { id: roleId } } },
+    { enabled: !!roleId }
+  );
+  const role = data?.role;
+  const title = role ? str(role.name) || role.code : roleId ?? "Role";
+  useBreadcrumbs({
+    items: [
+      { label: "Home", href: "/dashboard" },
+      { label: "IAM", href: "/iam" },
+      { label: "Roles", href: basePath },
+      { label: title }
+    ]
+  });
+  const tabs = useMemo2(
+    () => [
+      { value: "detail", name: "Detail", href: `${basePath}/${roleId}` },
+      {
+        value: "permissions",
+        name: "Permissions",
+        href: `${basePath}/${roleId}/permissions`
+      },
+      {
+        value: "users",
+        name: "Users",
+        href: `${basePath}/${roleId}/users`
+      }
+    ],
+    [basePath, roleId]
+  );
+  if (!roleId) {
+    return null;
+  }
+  const loading = isLoading || isFetching;
+  if (!(loading || role)) {
+    return /* @__PURE__ */ jsx2(PageContainer, { className: "flex flex-1 flex-col gap-4 p-4 pt-0", children: /* @__PURE__ */ jsx2(
+      EntityEmptyState,
+      {
+        icon: IconShield,
+        entityName: "role",
+        title: isError ? "Role unavailable" : "Role not found",
+        description: isError ? "Failed to load this role." : "This role no longer exists.",
+        actionLabel: "Back to roles",
+        onAction: () => config.navigation?.onNavigate?.(basePath) ?? window.history.back()
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsxs(PageContainer, { className: "flex flex-1 flex-col gap-4 p-4 pt-0", children: [
+    /* @__PURE__ */ jsx2(
+      EntityDetailHeader,
+      {
+        title,
+        icon: /* @__PURE__ */ jsx2(IconShield, { className: "h-5 w-5" }),
+        loading,
+        tabs
+      }
+    ),
+    children
+  ] });
+}
+
+// src/pages/iam/role-detail-layout.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+async function RoleDetailLayoutPage({
+  children,
+  params
+}) {
+  const { id } = await params;
+  return /* @__PURE__ */ jsx3(RoleDetailLayout, { roleId: id, basePath: "/iam/roles", children });
+}
+export {
+  RoleDetailLayoutPage as default
+};
+//# sourceMappingURL=role-detail-layout.js.map

package/dist/pages/iam/role-detail-layout.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/iam/role-detail-layout.tsx","../../../src/provider.tsx","../../../src/utils/cookie.ts","../../../src/pages/iam/role-detail-layout.tsx"],"sourcesContent":["'use client';\n\nimport {\n  EntityDetailHeader,\n  EntityEmptyState,\n  PageContainer,\n  type TabItem,\n  useBreadcrumbs,\n} from '@mesob/ui/components';\nimport { IconShield } from '@tabler/icons-react';\nimport type { ReactNode } from 'react';\nimport { useMemo } from 'react';\nimport { useApi, useConfig } from '../../provider';\n\nfunction str(value: unknown): string {\n  if (value == null) {\n    return '';\n  }\n  if (typeof value === 'string') {\n    return value;\n  }\n  if (typeof value === 'object' && value !== null && 'en' in value) {\n    const localized = value as { en?: string; am?: string };\n    return localized.en ?? localized.am ?? '';\n  }\n  return String(value);\n}\n\ntype RoleDetailLayoutProps = {\n  roleId: string;\n  basePath?: string;\n  children: ReactNode;\n};\n\nexport function RoleDetailLayout({\n  roleId,\n  basePath = '/iam/roles',\n  children,\n}: RoleDetailLayoutProps) {\n  const { hooks } = useApi();\n  const { config } = useConfig();\n  const { data, isLoading, isFetching, isError } = hooks.useQuery(\n    'get',\n    '/roles/{id}',\n    { params: { path: { id: roleId } } },\n    { enabled: !!roleId },\n  );\n\n  const role = data?.role;\n  const title = role ? str(role.name) || role.code : (roleId ?? 'Role');\n\n  useBreadcrumbs({\n    items: [\n      { label: 'Home', href: '/dashboard' },\n      { label: 'IAM', href: '/iam' },\n      { label: 'Roles', href: basePath },\n      { label: title },\n    ],\n  });\n\n  const tabs: TabItem[] = useMemo(\n    () => [\n      { value: 'detail', name: 'Detail', href: `${basePath}/${roleId}` },\n      {\n        value: 'permissions',\n        name: 'Permissions',\n        href: `${basePath}/${roleId}/permissions`,\n      },\n      {\n        value: 'users',\n        name: 'Users',\n        href: `${basePath}/${roleId}/users`,\n      },\n    ],\n    [basePath, roleId],\n  );\n\n  if (!roleId) {\n    return null;\n  }\n\n  const loading = isLoading || isFetching;\n  if (!(loading || role)) {\n    return (\n      <PageContainer className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n        <EntityEmptyState\n          icon={IconShield}\n          entityName=\"role\"\n          title={isError ? 'Role unavailable' : 'Role not found'}\n          description={\n            isError\n              ? 'Failed to load this role.'\n              : 'This role no longer exists.'\n          }\n          actionLabel=\"Back to roles\"\n          onAction={() =>\n            config.navigation?.onNavigate?.(basePath) ?? window.history.back()\n          }\n        />\n      </PageContainer>\n    );\n  }\n\n  return (\n    <PageContainer className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n      <EntityDetailHeader\n        title={title}\n        icon={<IconShield className=\"h-5 w-5\" />}\n        loading={loading}\n        tabs={tabs}\n      />\n      {children}\n    </PageContainer>\n  );\n}\n","'use client';\n\nimport { QueryClient, QueryClientProvider } from '@tanstack/react-query';\nimport { deepmerge } from 'deepmerge-ts';\nimport createFetchClient from 'openapi-fetch';\nimport createClient from 'openapi-react-query';\nimport type { ReactNode } from 'react';\nimport { createContext, useContext, useMemo, useState } from 'react';\nimport type { paths } from './data/openapi';\nimport { createTranslator } from './lib/translations';\nimport {\n  type AuthClientConfig,\n  type AuthResponse,\n  defaultAuthClientConfig,\n  type Session,\n  type User,\n} from './types';\nimport { getSessionCookieName } from './utils/cookie';\nimport { createCustomFetch } from './utils/custom-fetch';\n\n// biome-ignore lint/suspicious/noExplicitAny: OpenAPI hooks type\ntype OpenApiHooks = any;\n\n// --- Utility: Check if running on server ---\nfunction isServer(): boolean {\n  return typeof document === 'undefined';\n}\n\n/**\n * @deprecated Cookie is httpOnly and cannot be read client-side.\n * Use `useSession().isAuthenticated` instead.\n * This function always returns false on client.\n */\nexport function hasAuthCookie(_cookieName: string): boolean {\n  // Cookie is httpOnly, can't check client-side\n  // Always return false - use useSession() for auth status\n  return false;\n}\n\n// --- Types ---\nexport type AuthStatus = 'loading' | 'authenticated' | 'unauthenticated';\n\ntype AuthState = {\n  user: User | null;\n  session: Session | null;\n  status: AuthStatus;\n  error: Error | null;\n};\n\ntype SessionContextValue = AuthState & {\n  isLoading: boolean;\n  isAuthenticated: boolean;\n  refresh: () => Promise<void>;\n  signOut: () => Promise<void>;\n};\n\ntype ApiContextValue = {\n  hooks: OpenApiHooks;\n  setAuth: (auth: AuthResponse) => void;\n  clearAuth: () => void;\n  refresh: () => Promise<void>;\n};\n\ntype ConfigContextValue = {\n  config: AuthClientConfig;\n  cookieName: string;\n  t: (key: string, params?: Record<string, string | number>) => string;\n};\n\nconst SessionContext = createContext<SessionContextValue | null>(null);\nconst ApiContext = createContext<ApiContextValue | null>(null);\nconst ConfigContext = createContext<ConfigContextValue | null>(null);\n\nconst queryClient = new QueryClient({\n  defaultOptions: {\n    queries: {\n      refetchOnWindowFocus: false,\n    },\n  },\n});\n\n// --- Hooks ---\n\n/**\n * Get session state including user, session, and auth status.\n * - `status`: 'loading' | 'authenticated' | 'unauthenticated'\n * - `isLoading`: true while fetching session\n * - `isAuthenticated`: true if user and session exist\n */\nexport function useSession(): SessionContextValue {\n  const context = useContext(SessionContext);\n  if (!context) {\n    throw new Error('useSession must be used within MesobAuthProvider');\n  }\n  return context;\n}\n\nexport function useApi(): ApiContextValue {\n  const context = useContext(ApiContext);\n  if (!context) {\n    throw new Error('useApi must be used within MesobAuthProvider');\n  }\n  return context;\n}\n\nexport function useConfig(): ConfigContextValue {\n  const context = useContext(ConfigContext);\n  if (!context) {\n    throw new Error('useConfig must be used within MesobAuthProvider');\n  }\n  return context;\n}\n\n/**\n * @deprecated Cookie is httpOnly, can't be checked client-side.\n * Use `useSession().isAuthenticated` instead.\n */\nexport function useHasAuthCookie(): boolean {\n  const { status } = useSession();\n  return status === 'authenticated' || status === 'loading';\n}\n\n// --- Provider ---\n\ntype MesobAuthProviderProps = {\n  config: AuthClientConfig;\n  children: ReactNode;\n};\n\nexport function MesobAuthProvider({\n  config,\n  children,\n}: MesobAuthProviderProps) {\n  const mergedConfig = useMemo(\n    () =>\n      deepmerge(\n        { ...defaultAuthClientConfig } as Partial<AuthClientConfig>,\n        config,\n      ) as AuthClientConfig,\n    [config],\n  );\n\n  const api = useMemo(\n    () =>\n      createFetchClient<paths>({\n        baseUrl: mergedConfig.baseURL,\n        fetch: createCustomFetch(mergedConfig),\n      }),\n    [mergedConfig],\n  );\n\n  const hooks = useMemo(() => createClient(api), [api]);\n  const cookieName = useMemo(\n    () => getSessionCookieName(mergedConfig),\n    [mergedConfig],\n  );\n\n  return (\n    <QueryClientProvider client={queryClient}>\n      <AuthStateProvider\n        config={mergedConfig}\n        hooks={hooks}\n        cookieName={cookieName}\n      >\n        {children}\n      </AuthStateProvider>\n    </QueryClientProvider>\n  );\n}\n\ntype AuthStateProviderProps = {\n  config: AuthClientConfig;\n  hooks: OpenApiHooks;\n  cookieName: string;\n  children: ReactNode;\n};\n\nfunction AuthStateProvider({\n  config,\n  hooks,\n  cookieName,\n  children,\n}: AuthStateProviderProps) {\n  // Manual override for sign-out / sign-in\n  const [override, setOverride] = useState<AuthState | null>(null);\n\n  // Always fetch session - cookie is httpOnly, can't check client-side\n  // Server will read the cookie and return user/session if valid\n  const {\n    data: sessionData,\n    isLoading,\n    isFetched,\n    error: sessionError,\n    refetch,\n  } = hooks.useQuery(\n    'get',\n    '/session',\n    {},\n    {\n      enabled: !(override || isServer()),\n      refetchOnMount: false,\n      refetchOnWindowFocus: false,\n      refetchOnReconnect: false,\n      retry: false,\n      gcTime: 0,\n      staleTime: 0,\n    },\n  );\n\n  // Derive state directly - no useEffect\n  const user = override?.user ?? sessionData?.user ?? null;\n  const session = override?.session ?? sessionData?.session ?? null;\n  const error = override?.error ?? (sessionError as Error | null);\n\n  // Check error status code\n  const errorStatus = (() => {\n    if (!sessionError) {\n      return null;\n    }\n    const err = sessionError as { status?: number };\n    return err.status ?? null;\n  })();\n\n  // Check if error is a network/connection error\n  const isNetworkError = (() => {\n    if (!sessionError) {\n      return false;\n    }\n    const error = sessionError as Error & { cause?: unknown; data?: unknown };\n    const errorMessage =\n      error.message || String(error) || JSON.stringify(error);\n    // Network errors: TypeError, DOMException, or fetch failures\n    if (\n      error instanceof TypeError ||\n      error instanceof DOMException ||\n      error.name === 'TypeError' ||\n      errorMessage.includes('Failed to fetch') ||\n      errorMessage.includes('ERR_CONNECTION_REFUSED') ||\n      errorMessage.includes('NetworkError') ||\n      errorMessage.includes('Network request failed') ||\n      errorMessage.includes('fetch failed')\n    ) {\n      return true;\n    }\n    // Check error cause\n    if (error.cause) {\n      const causeStr = String(error.cause);\n      if (\n        causeStr.includes('Failed to fetch') ||\n        causeStr.includes('ERR_CONNECTION_REFUSED') ||\n        causeStr.includes('NetworkError')\n      ) {\n        return true;\n      }\n    }\n    return false;\n  })();\n\n  // Compute status\n  // biome-ignore lint: Status determination requires multiple checks\n  const status: AuthStatus = (() => {\n    if (override) {\n      return override.status;\n    }\n    if (isServer()) {\n      return 'loading';\n    }\n    if (user && session) {\n      return 'authenticated';\n    }\n    // Check for network errors or auth errors first - allow auth page to show\n    if (isNetworkError || errorStatus === 401) {\n      return 'unauthenticated';\n    }\n    // If we have an error but it's not a network error, still check loading state\n    if (sessionError && !isNetworkError && errorStatus !== 401) {\n      if (errorStatus && errorStatus >= 500) {\n        return 'authenticated';\n      }\n      // Other errors mean unauthenticated\n      if (isFetched) {\n        return 'unauthenticated';\n      }\n    }\n    if (isLoading || !isFetched) {\n      return 'loading';\n    }\n    if (isFetched && !user && !session) {\n      return 'unauthenticated';\n    }\n    return 'unauthenticated';\n  })();\n\n  const signOutMutation = hooks.useMutation('post', '/sign-out');\n  const t = createTranslator(config.messages || {});\n\n  const setAuth = (auth: AuthResponse) => {\n    setOverride({\n      user: auth.user,\n      session: auth.session,\n      status: 'authenticated',\n      error: null,\n    });\n  };\n\n  const clearAuth = () => {\n    setOverride({\n      user: null,\n      session: null,\n      status: 'unauthenticated',\n      error: null,\n    });\n  };\n\n  const refresh = async () => {\n    setOverride(null);\n    await refetch();\n  };\n\n  const signOut = async () => {\n    try {\n      await signOutMutation.mutateAsync({});\n    } finally {\n      clearAuth();\n    }\n  };\n\n  return (\n    <ConfigContext.Provider value={{ config, cookieName, t }}>\n      <ApiContext.Provider value={{ hooks, setAuth, clearAuth, refresh }}>\n        <SessionContext.Provider\n          value={{\n            user,\n            session,\n            status,\n            error,\n            isLoading: status === 'loading',\n            isAuthenticated: status === 'authenticated',\n            refresh,\n            signOut,\n          }}\n        >\n          {children}\n        </SessionContext.Provider>\n      </ApiContext.Provider>\n    </ConfigContext.Provider>\n  );\n}\n","import type { AuthClientConfig } from '../types';\n\nconst isProduction =\n  typeof process !== 'undefined' && process.env.NODE_ENV === 'production';\n\nexport const getSessionCookieName = (config: AuthClientConfig): string => {\n  const prefix = config.cookiePrefix || '';\n  const baseName = 'session_token';\n  if (prefix) {\n    return `${prefix}_${baseName}`;\n  }\n  return isProduction ? '__Host-session_token' : baseName;\n};\n","import type { ReactNode } from 'react';\nimport { RoleDetailLayout } from '../../components/iam/role-detail-layout';\n\ntype RoleDetailLayoutPageProps = {\n  children: ReactNode;\n  params: Promise<{ id: string }>;\n};\n\nexport default async function RoleDetailLayoutPage({\n  children,\n  params,\n}: RoleDetailLayoutPageProps) {\n  const { id } = await params;\n\n  return (\n    <RoleDetailLayout roleId={id} basePath=\"/iam/roles\">\n      {children}\n    </RoleDetailLayout>\n  );\n}\n"],"mappings":"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","names":["useMemo","jsx","useMemo","jsx"]}

package/dist/pages/iam/role-detail.d.ts

@@ -0,0 +1,12 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Metadata } from 'next';
+
+type RoleDetailPageProps = {
+    params: Promise<{
+        id: string;
+    }>;
+};
+declare const metadata: Metadata;
+declare function RoleDetailRoutePage({ params, }: RoleDetailPageProps): Promise<react_jsx_runtime.JSX.Element>;
+
+export { RoleDetailRoutePage as default, metadata };