@mesob/auth-react 0.3.4 → 0.4.0

package/dist/pages/iam/roles.js

@@ -0,0 +1,684 @@
+"use client";
+
+// src/pages/iam/roles.tsx
+import {
+  Button as Button2,
+  EntityDrawerTrigger,
+  EntityFilter,
+  EntityHeader,
+  EntitySearch,
+  EntitySort,
+  EntityViewToggle,
+  PageBody,
+  PageContainer,
+  useBreadcrumbs,
+  useEntityPagination,
+  useEntityParams
+} from "@mesob/ui/components";
+import { IconShield as IconShield2 } from "@tabler/icons-react";
+import { useQueryClient as useQueryClient2 } from "@tanstack/react-query";
+import { useState as useState3 } from "react";
+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;
+}
+function useConfig() {
+  const context = useContext(ConfigContext);
+  if (!context) {
+    throw new Error("useConfig must be used within MesobAuthProvider");
+  }
+  return context;
+}
+
+// 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";
+
+// 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/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-form.tsx
+import { jsx as jsx4, jsxs } 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__ */ jsx4(
+    EntityDrawer,
+    {
+      title: mode === "new" ? "New role" : "Edit role",
+      open,
+      onClose,
+      isDirty: formState.isDirty,
+      size: "md",
+      form: isLoading ? /* @__PURE__ */ jsx4(FormSkeleton, {}) : /* @__PURE__ */ jsx4(Form, { ...form, children: /* @__PURE__ */ jsxs("form", { onSubmit, className: "space-y-4", children: [
+        /* @__PURE__ */ jsx4(
+          LocaleInputText,
+          {
+            label: "Name",
+            field: "name",
+            required: true,
+            register,
+            errors: formState.errors,
+            placeholder: "e.g. Administrator",
+            disabled: !editable
+          }
+        ),
+        /* @__PURE__ */ jsx4(
+          FormField,
+          {
+            control,
+            name: "code",
+            render: ({ field }) => /* @__PURE__ */ jsxs(FormItem, { children: [
+              /* @__PURE__ */ jsxs(FormLabel, { children: [
+                "Code ",
+                /* @__PURE__ */ jsx4("span", { className: "text-destructive", children: "*" })
+              ] }),
+              /* @__PURE__ */ jsx4(FormControl, { children: /* @__PURE__ */ jsx4(
+                Input,
+                {
+                  placeholder: "e.g. admin",
+                  disabled: !editable,
+                  ...field
+                }
+              ) }),
+              /* @__PURE__ */ jsx4(FormMessage, {})
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsx4(
+          LocaleInputTextarea,
+          {
+            label: "Description",
+            field: "description",
+            register,
+            errors: formState.errors,
+            placeholder: "Description",
+            rows: 3,
+            disabled: !editable
+          }
+        )
+      ] }) }),
+      actions: /* @__PURE__ */ jsx4(
+        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__ */ jsxs("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx4(Skeleton, { className: "h-4 w-16" }),
+      /* @__PURE__ */ jsx4(Skeleton, { className: "h-10 w-full" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx4(Skeleton, { className: "h-4 w-14" }),
+      /* @__PURE__ */ jsx4(Skeleton, { className: "h-10 w-full" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx4(Skeleton, { className: "h-4 w-24" }),
+      /* @__PURE__ */ jsx4(Skeleton, { className: "h-20 w-full" })
+    ] })
+  ] });
+}
+
+// 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, IconShield } from "@tabler/icons-react";
+import { useState as useState2 } from "react";
+
+// 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 jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+function RoleCard({ role, mode = "navigate" }) {
+  const router = useRouter();
+  const canNavigate = mode === "navigate";
+  return /* @__PURE__ */ jsxs2(Card, { className: "group transition-shadow hover:shadow-md", children: [
+    /* @__PURE__ */ jsxs2(CardHeader, { className: "pb-2", children: [
+      /* @__PURE__ */ jsxs2("div", { className: "flex items-start justify-between", children: [
+        /* @__PURE__ */ jsx5(
+          "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__ */ jsxs2(DropdownMenu, { children: [
+          /* @__PURE__ */ jsx5(
+            DropdownMenuTrigger,
+            {
+              render: /* @__PURE__ */ jsx5(
+                Button,
+                {
+                  variant: "ghost",
+                  size: "icon",
+                  className: "h-8 w-8 opacity-0 transition-opacity group-hover:opacity-100"
+                }
+              ),
+              children: /* @__PURE__ */ jsx5(IconDots, { className: "h-4 w-4" })
+            }
+          ),
+          /* @__PURE__ */ jsx5(DropdownMenuPortal, { children: /* @__PURE__ */ jsx5(DropdownMenuContent, { children: /* @__PURE__ */ jsxs2(
+            DropdownMenuItem,
+            {
+              onClick: () => router.push(`/iam/roles/${role.id}`),
+              children: [
+                /* @__PURE__ */ jsx5(IconExternalLink, { className: "mr-2 h-4 w-4" }),
+                "Open"
+              ]
+            }
+          ) }) })
+        ] }) : null
+      ] }),
+      /* @__PURE__ */ jsx5(Badge, { variant: "outline", className: "text-xs", children: role.code })
+    ] }),
+    /* @__PURE__ */ jsxs2(CardContent, { children: [
+      /* @__PURE__ */ jsxs2("div", { className: "mb-3 flex flex-wrap gap-2", children: [
+        role.isSystem ? /* @__PURE__ */ jsx5(Badge, { children: "System" }) : null,
+        /* @__PURE__ */ jsxs2(Badge, { variant: "secondary", children: [
+          role.permissionCount ?? role.permissionIds?.length ?? 0,
+          " ",
+          "permissions"
+        ] }),
+        /* @__PURE__ */ jsxs2(Badge, { variant: "outline", children: [
+          role.userCount ?? 0,
+          " users"
+        ] })
+      ] }),
+      str(role.description) && /* @__PURE__ */ jsx5("p", { className: "line-clamp-2 text-sm text-muted-foreground", children: str(role.description) }),
+      /* @__PURE__ */ jsxs2("p", { className: "mt-2 text-xs text-muted-foreground", children: [
+        "Created ",
+        new Date(role.createdAt).toLocaleDateString()
+      ] })
+    ] })
+  ] });
+}
+
+// src/pages/iam/roles/_components/roles-list.tsx
+import { jsx as jsx6, jsxs as jsxs3 } 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__ */ jsx6(
+      EntityLoadingState,
+      {
+        view,
+        rowCount: pageSize,
+        columnCount: TABLE_COLUMN_COUNT,
+        cardCount: pageSize
+      }
+    );
+  }
+  if (totalRows === 0) {
+    return /* @__PURE__ */ jsx6(
+      EntityEmptyState,
+      {
+        icon: IconShield,
+        entityName: "role",
+        title: "No roles yet",
+        description: "Create your first role to get started.",
+        onAction: onCreateNew
+      }
+    );
+  }
+  if (view === "table") {
+    return /* @__PURE__ */ jsxs3("div", { className: "space-y-4", children: [
+      drawerRole ? /* @__PURE__ */ jsx6(
+        RoleForm,
+        {
+          mode: "edit",
+          roleId: drawerRole.id,
+          open: true,
+          onClose: () => setDrawerRole(null),
+          onSuccess: () => setDrawerRole(null)
+        }
+      ) : null,
+      /* @__PURE__ */ jsxs3(DisplayTable, { withTableBorder: true, children: [
+        /* @__PURE__ */ jsx6(Thead, { children: /* @__PURE__ */ jsxs3(Tr, { children: [
+          /* @__PURE__ */ jsx6(Th, { children: "Role" }),
+          /* @__PURE__ */ jsx6(Th, { children: "Description" }),
+          /* @__PURE__ */ jsx6(Th, { children: "Access" }),
+          /* @__PURE__ */ jsx6(Th, { children: "Created" }),
+          /* @__PURE__ */ jsx6(Th, { className: "w-[50px]" })
+        ] }) }),
+        /* @__PURE__ */ jsx6(Tbody, { children: data.map((role) => /* @__PURE__ */ jsxs3(Tr, { className: "group", children: [
+          /* @__PURE__ */ jsx6(Td, { children: /* @__PURE__ */ jsxs3(
+            Link,
+            {
+              href: `/iam/roles/${role.id}`,
+              className: "block text-left font-medium hover:text-primary hover:underline cursor-pointer",
+              children: [
+                /* @__PURE__ */ jsx6("p", { children: str(role.name) || role.code }),
+                /* @__PURE__ */ jsx6(Badge2, { variant: "outline", className: "mt-1 text-xs", children: role.code })
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsx6(Td, { children: /* @__PURE__ */ jsx6("span", { className: "text-muted-foreground line-clamp-1 max-w-[200px]", children: str(role.description) || "\u2014" }) }),
+          /* @__PURE__ */ jsx6(Td, { children: /* @__PURE__ */ jsxs3("div", { className: "flex flex-wrap gap-2", children: [
+            role.isSystem ? /* @__PURE__ */ jsx6(Badge2, { children: "System" }) : null,
+            /* @__PURE__ */ jsxs3(Badge2, { variant: "secondary", children: [
+              role.permissionCount ?? role.permissionIds?.length ?? 0,
+              " ",
+              "permissions"
+            ] })
+          ] }) }),
+          /* @__PURE__ */ jsx6(Td, { children: /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-1 text-muted-foreground", children: [
+            /* @__PURE__ */ jsx6(IconCalendar, { className: "h-4 w-4" }),
+            new Date(role.createdAt).toLocaleDateString()
+          ] }) }),
+          /* @__PURE__ */ jsx6(Td, { children: /* @__PURE__ */ jsx6(DataTableAction, { onClick: () => setDrawerRole(role) }) })
+        ] }, role.id)) })
+      ] }),
+      /* @__PURE__ */ jsx6(
+        DataTablePagination,
+        {
+          pageIndex,
+          pageSize,
+          pageCount,
+          totalRows,
+          onPageChange,
+          onPageSizeChange
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxs3("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsx6("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__ */ jsx6(RoleCard, { role: r }, r.id)) }),
+    /* @__PURE__ */ jsx6(
+      DataTablePagination,
+      {
+        pageIndex,
+        pageSize,
+        pageCount,
+        totalRows,
+        onPageChange,
+        onPageSizeChange
+      }
+    )
+  ] });
+}
+
+// src/pages/iam/roles.tsx
+import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+function RolesPage() {
+  const { hooks } = useApi();
+  const qc = useQueryClient2();
+  useBreadcrumbs({
+    items: [
+      { label: "Home", href: "/dashboard" },
+      { label: "IAM", href: "/iam/roles" },
+      { label: "Roles" }
+    ]
+  });
+  const [createOpen, setCreateOpen] = useState3(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__ */ jsx7(PageContainer, { className: "flex flex-1 flex-col gap-4 p-4 pt-0", children: /* @__PURE__ */ jsxs4(PageBody, { className: "px-0", children: [
+    /* @__PURE__ */ jsx7(
+      EntityHeader,
+      {
+        icon: /* @__PURE__ */ jsx7(IconShield2, { className: "h-5 w-5" }),
+        title: "Roles",
+        actions: /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx7(
+            Button2,
+            {
+              variant: "outline",
+              onClick: () => seedRoles.mutate({}),
+              loading: seedRoles.isPending,
+              children: "Seed roles"
+            }
+          ),
+          /* @__PURE__ */ jsx7(
+            EntityDrawerTrigger,
+            {
+              mode: "new",
+              entity: "Role",
+              open: createOpen,
+              onOpenChange: setCreateOpen,
+              children: (open, onClose) => /* @__PURE__ */ jsx7(RoleForm, { mode: "new", open, onClose })
+            }
+          )
+        ] }),
+        search: /* @__PURE__ */ jsx7(EntitySearch, { paramKey: "search", placeholder: "Search roles..." }),
+        filter: /* @__PURE__ */ jsx7(
+          EntityFilter,
+          {
+            options: [
+              { label: "All", value: "" },
+              { label: "By Code", value: "code" }
+            ],
+            placeholder: "Filter"
+          }
+        ),
+        sort: /* @__PURE__ */ jsx7(
+          EntitySort,
+          {
+            options: [
+              { label: "Created", value: "createdAt" },
+              { label: "Updated", value: "updatedAt" },
+              { label: "Code", value: "code" }
+            ]
+          }
+        ),
+        view: /* @__PURE__ */ jsx7(EntityViewToggle, { views: ["table", "card"] })
+      }
+    ),
+    /* @__PURE__ */ jsx7(
+      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 as default
+};
+//# sourceMappingURL=roles.js.map