@mesob/auth-react 0.3.4 → 0.4.0

package/dist/pages/iam/tenants.js

@@ -0,0 +1,610 @@
+"use client";
+
+// src/pages/iam/tenants.tsx
+import {
+  EntityDrawerTrigger,
+  EntityFilter,
+  EntityHeader,
+  EntitySearch,
+  EntitySort,
+  EntityViewToggle,
+  PageBody,
+  PageContainer,
+  useBreadcrumbs,
+  useEntityPagination,
+  useEntityParams
+} from "@mesob/ui/components";
+import { IconBuilding as IconBuilding2 } from "@tabler/icons-react";
+import { useState as useState4 } from "react";
+
+// 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/tenants/_components/tenant-form.tsx
+import { zodResolver } from "@hookform/resolvers/zod";
+import {
+  EntityDrawer,
+  EntityFormActions,
+  Input,
+  Label,
+  Skeleton,
+  Textarea
+} from "@mesob/ui/components";
+import { useQueryClient } from "@tanstack/react-query";
+import { useEffect } from "react";
+import { useForm } 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 });
+}
+
+// src/pages/iam/shared/page-helpers.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var authApi$ = {
+  useQuery(...args) {
+    const { hooks } = useApi();
+    return hooks.useQuery(...args);
+  },
+  useMutation(...args) {
+    const { hooks } = useApi();
+    return hooks.useMutation(...args);
+  }
+};
+function Link(props) {
+  return /* @__PURE__ */ jsx3(AppLink, { ...props });
+}
+
+// src/pages/iam/tenants/_components/tenants-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/tenants/_components/tenant-form.tsx
+import { jsx as jsx4, jsxs } from "react/jsx-runtime";
+var schema = z.object({
+  id: z.string().min(1).max(30),
+  name: z.string().optional(),
+  description: z.string().optional(),
+  isActive: z.boolean()
+});
+var defaults = {
+  id: "",
+  name: "",
+  description: "",
+  isActive: true
+};
+function TenantForm({
+  mode,
+  tenantId,
+  open,
+  onClose,
+  onSuccess
+}) {
+  const qc = useQueryClient();
+  const { data, isLoading } = authApi$.useQuery(
+    "get",
+    "/tenants/{id}",
+    { params: { path: { id: tenantId ?? "" } } },
+    { enabled: mode === "edit" && !!tenantId }
+  );
+  const create = authApi$.useMutation("post", "/tenants", {
+    onSuccess: () => qc.invalidateQueries({ queryKey: ["get", "/tenants"] })
+  });
+  const update = authApi$.useMutation("put", "/tenants/{id}", {
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ["get", "/tenants"] });
+      if (tenantId) {
+        qc.invalidateQueries({ queryKey: ["get", "/tenants/{id}"] });
+      }
+    }
+  });
+  const del = authApi$.useMutation("delete", "/tenants/{id}", {
+    onSuccess: () => qc.invalidateQueries({ queryKey: ["get", "/tenants"] })
+  });
+  const form = useForm({
+    resolver: zodResolver(schema),
+    defaultValues: defaults
+  });
+  const { reset, formState, register } = form;
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+    if (mode === "edit" && data?.tenant && !isLoading) {
+      const t = data.tenant;
+      reset({
+        id: t.id,
+        name: str(t.name) || "",
+        description: str(t.description) || "",
+        isActive: t.isActive
+      });
+    } else {
+      reset(defaults);
+    }
+  }, [mode, data, open, isLoading, reset]);
+  const onSubmit = form.handleSubmit(async (d) => {
+    const body = {
+      id: d.id,
+      name: d.name || void 0,
+      description: d.description || void 0,
+      isActive: d.isActive
+    };
+    if (mode === "new") {
+      await create.mutateAsync({ body });
+    } else if (tenantId) {
+      await update.mutateAsync({
+        params: { path: { id: tenantId } },
+        body: {
+          name: d.name || void 0,
+          description: d.description || void 0,
+          isActive: d.isActive
+        }
+      });
+    }
+    onSuccess?.();
+    onClose();
+  });
+  const onDelete = async () => {
+    if (!tenantId) {
+      return;
+    }
+    await del.mutateAsync({ params: { path: { id: tenantId } } });
+    onSuccess?.();
+    onClose();
+  };
+  return /* @__PURE__ */ jsx4(
+    EntityDrawer,
+    {
+      title: mode === "new" ? "New tenant" : "Edit tenant",
+      open,
+      onClose,
+      isDirty: formState.isDirty,
+      size: "md",
+      form: isLoading ? /* @__PURE__ */ jsx4(FormSkeleton, {}) : /* @__PURE__ */ jsxs("form", { onSubmit, className: "space-y-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsxs(Label, { htmlFor: "id", children: [
+            "ID ",
+            /* @__PURE__ */ jsx4("span", { className: "text-destructive", children: "*" })
+          ] }),
+          /* @__PURE__ */ jsx4(
+            Input,
+            {
+              id: "id",
+              placeholder: "e.g. acme",
+              ...register("id"),
+              disabled: mode === "edit"
+            }
+          ),
+          formState.errors.id && /* @__PURE__ */ jsx4("p", { className: "text-sm text-destructive", children: formState.errors.id.message })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx4(Label, { htmlFor: "name", children: "Name" }),
+          /* @__PURE__ */ jsx4(
+            Input,
+            {
+              id: "name",
+              placeholder: "Display name",
+              ...register("name")
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx4(Label, { htmlFor: "description", children: "Description" }),
+          /* @__PURE__ */ jsx4(
+            Textarea,
+            {
+              id: "description",
+              placeholder: "Description",
+              rows: 3,
+              ...register("description")
+            }
+          )
+        ] }),
+        mode === "edit" && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx4(
+            "input",
+            {
+              type: "checkbox",
+              id: "isActive",
+              ...register("isActive", {
+                setValueAs: (v) => v === true || v === "on"
+              }),
+              className: "h-4 w-4"
+            }
+          ),
+          /* @__PURE__ */ jsx4(Label, { htmlFor: "isActive", children: "Active" })
+        ] })
+      ] }),
+      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,
+          itemName: "tenant"
+        }
+      )
+    }
+  );
+}
+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-12" }),
+      /* @__PURE__ */ jsx4(Skeleton, { className: "h-10 w-full" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx4(Skeleton, { className: "h-4 w-16" }),
+      /* @__PURE__ */ jsx4(Skeleton, { className: "h-10 w-full" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx4(Skeleton, { className: "h-4 w-24" }),
+      /* @__PURE__ */ jsx4(Skeleton, { className: "h-20 w-full" })
+    ] })
+  ] });
+}
+
+// src/pages/iam/tenants/_components/tenants-list.tsx
+import {
+  Badge as Badge2,
+  DataTableAction,
+  DataTablePagination,
+  DisplayTable,
+  EntityEmptyState,
+  EntityLoadingState,
+  Tbody,
+  Td,
+  Th,
+  Thead,
+  Tr
+} from "@mesob/ui/components";
+import { IconBuilding, IconCalendar } from "@tabler/icons-react";
+import { useState as useState3 } from "react";
+
+// src/pages/iam/tenants/_components/tenant-card.tsx
+import {
+  Badge,
+  Button,
+  Card,
+  CardContent,
+  CardHeader,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuPortal,
+  DropdownMenuTrigger
+} from "@mesob/ui/components";
+import { IconDots, IconPencil } from "@tabler/icons-react";
+import { useState as useState2 } from "react";
+import { Fragment, jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+function TenantCard({ tenant }) {
+  const [editOpen, setEditOpen] = useState2(false);
+  return /* @__PURE__ */ jsxs2(Fragment, { children: [
+    /* @__PURE__ */ jsxs2(Card, { className: "group hover:shadow-md transition-shadow", children: [
+      /* @__PURE__ */ jsxs2(CardHeader, { className: "pb-2", children: [
+        /* @__PURE__ */ jsxs2("div", { className: "flex items-start justify-between", children: [
+          /* @__PURE__ */ jsx5(
+            Link,
+            {
+              href: `/iam/tenants/${tenant.id}`,
+              className: "text-left font-semibold hover:text-primary hover:underline",
+              children: str(tenant.name) || tenant.id
+            }
+          ),
+          /* @__PURE__ */ jsxs2(DropdownMenu, { children: [
+            /* @__PURE__ */ jsx5(
+              DropdownMenuTrigger,
+              {
+                render: /* @__PURE__ */ jsx5(
+                  Button,
+                  {
+                    variant: "ghost",
+                    size: "icon",
+                    className: "h-8 w-8 opacity-0 group-hover:opacity-100 transition-opacity"
+                  }
+                ),
+                children: /* @__PURE__ */ jsx5(IconDots, { className: "h-4 w-4" })
+              }
+            ),
+            /* @__PURE__ */ jsx5(DropdownMenuPortal, { children: /* @__PURE__ */ jsx5(DropdownMenuContent, { children: /* @__PURE__ */ jsxs2(DropdownMenuItem, { onClick: () => setEditOpen(true), children: [
+              /* @__PURE__ */ jsx5(IconPencil, { className: "mr-2 h-4 w-4" }),
+              "Edit"
+            ] }) }) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx5("p", { className: "text-sm text-muted-foreground", children: tenant.id })
+      ] }),
+      /* @__PURE__ */ jsxs2(CardContent, { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx5(Badge, { variant: tenant.isActive ? "default" : "secondary", children: tenant.isActive ? "Active" : "Inactive" }),
+        str(tenant.description) ? /* @__PURE__ */ jsx5("p", { className: "text-sm text-muted-foreground line-clamp-2", children: str(tenant.description) }) : null,
+        /* @__PURE__ */ jsxs2("p", { className: "text-xs text-muted-foreground", children: [
+          "Created ",
+          new Date(tenant.createdAt).toLocaleDateString()
+        ] })
+      ] })
+    ] }),
+    editOpen ? /* @__PURE__ */ jsx5(
+      TenantForm,
+      {
+        mode: "edit",
+        tenantId: tenant.id,
+        open: editOpen,
+        onClose: () => setEditOpen(false)
+      }
+    ) : null
+  ] });
+}
+
+// src/pages/iam/tenants/_components/tenants-list.tsx
+import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+var TABLE_COLUMN_COUNT = 5;
+function TenantsList({
+  data,
+  isLoading,
+  view,
+  pageIndex,
+  pageSize,
+  pageCount,
+  totalRows,
+  onPageChange,
+  onPageSizeChange,
+  onCreateNew
+}) {
+  const [editingTenantId, setEditingTenantId] = useState3(null);
+  if (isLoading) {
+    return /* @__PURE__ */ jsx6(
+      EntityLoadingState,
+      {
+        view,
+        rowCount: pageSize,
+        columnCount: TABLE_COLUMN_COUNT,
+        cardCount: pageSize
+      }
+    );
+  }
+  if (totalRows === 0) {
+    return /* @__PURE__ */ jsx6(
+      EntityEmptyState,
+      {
+        icon: IconBuilding,
+        entityName: "tenant",
+        title: "No tenants yet",
+        description: "Create your first tenant to get started.",
+        onAction: onCreateNew
+      }
+    );
+  }
+  if (view === "table") {
+    return /* @__PURE__ */ jsxs3("div", { className: "space-y-4", children: [
+      editingTenantId && /* @__PURE__ */ jsx6(
+        TenantForm,
+        {
+          mode: "edit",
+          tenantId: editingTenantId,
+          open: true,
+          onClose: () => setEditingTenantId(null)
+        }
+      ),
+      /* @__PURE__ */ jsxs3(DisplayTable, { withTableBorder: true, children: [
+        /* @__PURE__ */ jsx6(Thead, { children: /* @__PURE__ */ jsxs3(Tr, { children: [
+          /* @__PURE__ */ jsx6(Th, { children: "Tenant" }),
+          /* @__PURE__ */ jsx6(Th, { children: "Description" }),
+          /* @__PURE__ */ jsx6(Th, { children: "Status" }),
+          /* @__PURE__ */ jsx6(Th, { children: "Created" }),
+          /* @__PURE__ */ jsx6(Th, { className: "w-[50px]" })
+        ] }) }),
+        /* @__PURE__ */ jsx6(Tbody, { children: data.map((tenant) => /* @__PURE__ */ jsxs3(Tr, { className: "group", children: [
+          /* @__PURE__ */ jsx6(Td, { children: /* @__PURE__ */ jsxs3(
+            Link,
+            {
+              href: `/iam/tenants/${tenant.id}`,
+              className: "block text-left font-medium hover:text-primary hover:underline cursor-pointer",
+              children: [
+                /* @__PURE__ */ jsx6("p", { children: str(tenant.name) || tenant.id }),
+                /* @__PURE__ */ jsx6("p", { className: "text-sm text-muted-foreground", children: tenant.id })
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsx6(Td, { children: /* @__PURE__ */ jsx6("span", { className: "text-muted-foreground line-clamp-1 max-w-[200px]", children: str(tenant.description) || "\u2014" }) }),
+          /* @__PURE__ */ jsx6(Td, { children: /* @__PURE__ */ jsx6(Badge2, { variant: tenant.isActive ? "default" : "secondary", children: tenant.isActive ? "Active" : "Inactive" }) }),
+          /* @__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(tenant.createdAt).toLocaleDateString()
+          ] }) }),
+          /* @__PURE__ */ jsx6(Td, { children: /* @__PURE__ */ jsx6(
+            DataTableAction,
+            {
+              onClick: () => setEditingTenantId(tenant.id)
+            }
+          ) })
+        ] }, tenant.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((t) => /* @__PURE__ */ jsx6(TenantCard, { tenant: t }, t.id)) }),
+    /* @__PURE__ */ jsx6(
+      DataTablePagination,
+      {
+        pageIndex,
+        pageSize,
+        pageCount,
+        totalRows,
+        onPageChange,
+        onPageSizeChange
+      }
+    )
+  ] });
+}
+
+// src/pages/iam/tenants.tsx
+import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+function TenantsPage() {
+  const { hooks } = useApi();
+  useBreadcrumbs({
+    items: [
+      { label: "Home", href: "/dashboard" },
+      { label: "IAM", href: "/iam/tenants" },
+      { label: "Tenants" }
+    ]
+  });
+  const [createOpen, setCreateOpen] = useState4(false);
+  const { queryConfig, params, setParams } = useEntityParams({
+    searchKey: "search"
+  });
+  const tenantsQuery = queryConfig;
+  const { data, error, isPending, isFetching } = hooks.useQuery(
+    "get",
+    "/tenants",
+    tenantsQuery,
+    defaultEntityQueryOptions
+  );
+  const isLoading = isPending || isFetching;
+  const tenants = data?.tenants ?? [];
+  const { total, pageCount } = useEntityPagination({
+    items: tenants,
+    total: data?.total,
+    pageSize: params.pageSize
+  });
+  const errorStatus = error?.status;
+  const hasAccessError = errorStatus === 401 || errorStatus === 403;
+  const hasError = Boolean(error) && !isLoading;
+  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(IconBuilding2, { className: "size-5" }),
+        title: "Tenants",
+        actions: hasAccessError ? null : /* @__PURE__ */ jsx7(
+          EntityDrawerTrigger,
+          {
+            mode: "new",
+            entity: "Tenant",
+            open: createOpen,
+            onOpenChange: setCreateOpen,
+            children: (open, onClose) => /* @__PURE__ */ jsx7(TenantForm, { mode: "new", open, onClose })
+          }
+        ),
+        search: hasAccessError ? null : /* @__PURE__ */ jsx7(EntitySearch, { paramKey: "search", placeholder: "Search tenants..." }),
+        filter: hasAccessError ? null : /* @__PURE__ */ jsx7(
+          EntityFilter,
+          {
+            options: [
+              { label: "All", value: "" },
+              { label: "Active", value: "isActive:true" },
+              { label: "Inactive", value: "isActive:false" }
+            ],
+            placeholder: "Filter"
+          }
+        ),
+        sort: hasAccessError ? null : /* @__PURE__ */ jsx7(
+          EntitySort,
+          {
+            options: [
+              { label: "Created", value: "createdAt" },
+              { label: "Updated", value: "updatedAt" },
+              { label: "Name", value: "name" }
+            ]
+          }
+        ),
+        view: hasAccessError ? null : /* @__PURE__ */ jsx7(EntityViewToggle, { views: ["table", "card"] })
+      }
+    ),
+    hasError ? /* @__PURE__ */ jsxs4("div", { className: "rounded-[1.75rem] border border-border/60 bg-muted/20 p-8", children: [
+      /* @__PURE__ */ jsx7("div", { className: "text-lg font-semibold", children: hasAccessError ? "Tenant access denied" : "Unable to load tenants" }),
+      /* @__PURE__ */ jsx7("p", { className: "mt-2 text-sm text-muted-foreground", children: hasAccessError ? "This account does not have permission to view or manage tenants." : "The tenants page returned an unexpected error. Retry after the API is healthy." })
+    ] }) : /* @__PURE__ */ jsx7(
+      TenantsList,
+      {
+        data: tenants,
+        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 {
+  TenantsPage as default
+};
+//# sourceMappingURL=tenants.js.map