@acmekit/dashboard 2.13.7 → 2.13.9

package/dist/user-detail-KUSRRVNX.mjs

@@ -0,0 +1,169 @@
+import {
+  SingleColumnPage
+} from "./chunk-22YYMH6M.mjs";
+import {
+  useExtension
+} from "./chunk-C5P5PL3E.mjs";
+import {
+  ActionMenu
+} from "./chunk-S3REQHPQ.mjs";
+import {
+  SingleColumnPageSkeleton
+} from "./chunk-ITNQKZQQ.mjs";
+import "./chunk-OAHCJFG3.mjs";
+import "./chunk-S4DMV3ZT.mjs";
+import {
+  useDeleteUser,
+  useUser,
+  usersQueryKeys
+} from "./chunk-YRWSG3YM.mjs";
+import {
+  queryClient
+} from "./chunk-FXYH54JP.mjs";
+import "./chunk-774WSTCC.mjs";
+import {
+  sdk
+} from "./chunk-DTY37DDZ.mjs";
+import "./chunk-QZ7TP4HQ.mjs";
+
+// src/routes/users/user-detail/breadcrumb.tsx
+import { jsx } from "react/jsx-runtime";
+var UserDetailBreadcrumb = (props) => {
+  const { id } = props.params || {};
+  const { user } = useUser(id, void 0, {
+    initialData: props.data,
+    enabled: Boolean(id)
+  });
+  if (!user) {
+    return null;
+  }
+  const name = [user.first_name, user.last_name].filter(Boolean).join(" ");
+  const display = name || user.email;
+  return /* @__PURE__ */ jsx("span", { children: display });
+};
+
+// src/routes/users/user-detail/loader.ts
+var userDetailQuery = (id) => ({
+  queryKey: usersQueryKeys.detail(id),
+  queryFn: async () => sdk.admin.user.retrieve(id)
+});
+var userLoader = async ({ params }) => {
+  const id = params.id;
+  const query = userDetailQuery(id);
+  return queryClient.ensureQueryData(query);
+};
+
+// src/routes/users/user-detail/user-detail.tsx
+import { useLoaderData, useParams } from "react-router-dom";
+
+// src/routes/users/user-detail/components/user-general-section/user-general-section.tsx
+import { PencilSquare, Trash } from "@acmekit/icons";
+import { Container, Heading, Text, toast, usePrompt } from "@acmekit/ui";
+import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var UserGeneralSection = ({ user }) => {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const prompt = usePrompt();
+  const { mutateAsync } = useDeleteUser(user.id);
+  const name = [user.first_name, user.last_name].filter(Boolean).join(" ");
+  const handleDeleteUser = async () => {
+    const res = await prompt({
+      title: t("general.areYouSure"),
+      description: t("users.deleteUserWarning", {
+        name: name ?? user.email
+      }),
+      verificationText: name ?? user.email,
+      verificationInstruction: t("general.typeToConfirm"),
+      confirmText: t("actions.delete"),
+      cancelText: t("actions.cancel")
+    });
+    if (!res) {
+      return;
+    }
+    await mutateAsync(void 0, {
+      onSuccess: () => {
+        toast.success(t("users.deleteUserSuccess", { name: user.email }));
+        navigate("..");
+      },
+      onError: (error) => {
+        toast.error(error.message);
+      }
+    });
+  };
+  return /* @__PURE__ */ jsxs(Container, { className: "divide-y p-0", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-6 py-4", children: [
+      /* @__PURE__ */ jsx2(Heading, { children: user.email }),
+      /* @__PURE__ */ jsx2(
+        ActionMenu,
+        {
+          groups: [
+            {
+              actions: [
+                {
+                  label: t("actions.edit"),
+                  to: "edit",
+                  icon: /* @__PURE__ */ jsx2(PencilSquare, {})
+                }
+              ]
+            },
+            {
+              actions: [
+                {
+                  label: t("actions.delete"),
+                  onClick: handleDeleteUser,
+                  icon: /* @__PURE__ */ jsx2(Trash, {})
+                }
+              ]
+            }
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "text-ui-fg-subtle grid grid-cols-2 items-center px-6 py-4", children: [
+      /* @__PURE__ */ jsx2(Text, { size: "small", leading: "compact", weight: "plus", children: t("fields.name") }),
+      /* @__PURE__ */ jsx2(Text, { size: "small", leading: "compact", children: name ?? "-" })
+    ] })
+  ] });
+};
+
+// src/routes/users/user-detail/user-detail.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var UserDetail = () => {
+  const initialData = useLoaderData();
+  const { id } = useParams();
+  const {
+    user,
+    isPending: isLoading,
+    isError,
+    error
+  } = useUser(id, void 0, {
+    initialData
+  });
+  const { getWidgets } = useExtension();
+  if (isLoading || !user) {
+    return /* @__PURE__ */ jsx3(SingleColumnPageSkeleton, { sections: 1, showJSON: true, showMetadata: true });
+  }
+  if (isError) {
+    throw error;
+  }
+  return /* @__PURE__ */ jsx3(
+    SingleColumnPage,
+    {
+      data: user,
+      showJSON: true,
+      showMetadata: true,
+      widgets: {
+        after: getWidgets("user.details.after"),
+        before: getWidgets("user.details.before")
+      },
+      children: /* @__PURE__ */ jsx3(UserGeneralSection, { user })
+    }
+  );
+};
+export {
+  UserDetailBreadcrumb as Breadcrumb,
+  UserDetail as Component,
+  userLoader as loader
+};

package/dist/user-edit-HTN3ZGCL.mjs

@@ -0,0 +1,114 @@
+import "./chunk-IUCDCPJU.mjs";
+import {
+  KeyboundForm,
+  RouteDrawer,
+  useRouteModal
+} from "./chunk-2U3RK3JG.mjs";
+import {
+  Form
+} from "./chunk-ND3ODI36.mjs";
+import {
+  useUpdateUser,
+  useUser
+} from "./chunk-YRWSG3YM.mjs";
+import "./chunk-FXYH54JP.mjs";
+import "./chunk-774WSTCC.mjs";
+import "./chunk-DTY37DDZ.mjs";
+import "./chunk-QZ7TP4HQ.mjs";
+
+// src/routes/users/user-edit/user-edit.tsx
+import { Heading } from "@acmekit/ui";
+import { useTranslation as useTranslation2 } from "react-i18next";
+import { useParams } from "react-router-dom";
+
+// src/routes/users/user-edit/components/edit-user-form/edit-user-form.tsx
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Button, Input } from "@acmekit/ui";
+import { useForm } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import * as zod from "zod";
+import { jsx, jsxs } from "react/jsx-runtime";
+var EditUserFormSchema = zod.object({
+  first_name: zod.string().optional(),
+  last_name: zod.string().optional()
+});
+var EditUserForm = ({ user }) => {
+  const { t } = useTranslation();
+  const { handleSuccess } = useRouteModal();
+  const form = useForm({
+    defaultValues: {
+      first_name: user.first_name || "",
+      last_name: user.last_name || ""
+    },
+    resolver: zodResolver(EditUserFormSchema)
+  });
+  const { mutateAsync, isPending } = useUpdateUser(user.id);
+  const handleSubmit = form.handleSubmit(async (values) => {
+    await mutateAsync(values, {
+      onSuccess: () => {
+        handleSuccess();
+      }
+    });
+  });
+  return /* @__PURE__ */ jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxs(
+    KeyboundForm,
+    {
+      onSubmit: handleSubmit,
+      className: "flex flex-1 flex-col overflow-hidden",
+      children: [
+        /* @__PURE__ */ jsxs(RouteDrawer.Body, { className: "flex max-w-full flex-1 flex-col gap-y-8 overflow-y-auto", children: [
+          /* @__PURE__ */ jsx(
+            Form.Field,
+            {
+              control: form.control,
+              name: "first_name",
+              render: ({ field }) => {
+                return /* @__PURE__ */ jsxs(Form.Item, { children: [
+                  /* @__PURE__ */ jsx(Form.Label, { children: t("fields.firstName") }),
+                  /* @__PURE__ */ jsx(Form.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
+                  /* @__PURE__ */ jsx(Form.ErrorMessage, {})
+                ] });
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Form.Field,
+            {
+              control: form.control,
+              name: "last_name",
+              render: ({ field }) => {
+                return /* @__PURE__ */ jsxs(Form.Item, { children: [
+                  /* @__PURE__ */ jsx(Form.Label, { children: t("fields.lastName") }),
+                  /* @__PURE__ */ jsx(Form.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
+                  /* @__PURE__ */ jsx(Form.ErrorMessage, {})
+                ] });
+              }
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
+          /* @__PURE__ */ jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", children: t("actions.cancel") }) }),
+          /* @__PURE__ */ jsx(Button, { size: "small", type: "submit", isLoading: isPending, children: t("actions.save") })
+        ] }) })
+      ]
+    }
+  ) });
+};
+
+// src/routes/users/user-edit/user-edit.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var UserEdit = () => {
+  const { t } = useTranslation2();
+  const { id } = useParams();
+  const { user, isPending: isLoading, isError, error } = useUser(id);
+  if (isError) {
+    throw error;
+  }
+  return /* @__PURE__ */ jsxs2(RouteDrawer, { children: [
+    /* @__PURE__ */ jsx2(RouteDrawer.Header, { children: /* @__PURE__ */ jsx2(Heading, { children: t("users.editUser") }) }),
+    !isLoading && user && /* @__PURE__ */ jsx2(EditUserForm, { user })
+  ] });
+};
+export {
+  UserEdit as Component
+};

package/dist/user-invite-E3FAAU3V.mjs

@@ -0,0 +1,361 @@
+import {
+  _DataTable,
+  useDataTable
+} from "./chunk-YLPAZ2DP.mjs";
+import {
+  isFetchError
+} from "./chunk-TCNCAWYD.mjs";
+import {
+  useQueryParams
+} from "./chunk-C76H5USB.mjs";
+import "./chunk-DFFLVEZ5.mjs";
+import "./chunk-535OVBXR.mjs";
+import {
+  ActionMenu
+} from "./chunk-S3REQHPQ.mjs";
+import {
+  useCreateInvite,
+  useDeleteInvite,
+  useInvites,
+  useResendInvite
+} from "./chunk-XIM7X4FB.mjs";
+import "./chunk-ITNQKZQQ.mjs";
+import "./chunk-OAHCJFG3.mjs";
+import "./chunk-S4DMV3ZT.mjs";
+import {
+  KeyboundForm,
+  RouteFocusModal
+} from "./chunk-2U3RK3JG.mjs";
+import {
+  Form
+} from "./chunk-ND3ODI36.mjs";
+import "./chunk-FXYH54JP.mjs";
+import "./chunk-774WSTCC.mjs";
+import "./chunk-DTY37DDZ.mjs";
+import "./chunk-QZ7TP4HQ.mjs";
+
+// src/routes/users/user-invite/components/invite-user-form/invite-user-form.tsx
+import { zodResolver } from "@hookform/resolvers/zod";
+import { ArrowPath, Link, Trash } from "@acmekit/icons";
+import {
+  Alert,
+  Button,
+  Container,
+  Heading,
+  Input,
+  StatusBadge,
+  Text,
+  Tooltip,
+  usePrompt
+} from "@acmekit/ui";
+import { createColumnHelper } from "@tanstack/react-table";
+import copy from "copy-to-clipboard";
+import { format } from "date-fns";
+import { useMemo } from "react";
+import { useForm } from "react-hook-form";
+import { Trans, useTranslation } from "react-i18next";
+import * as zod from "zod";
+
+// src/hooks/table/query/use-user-invite-table-query.tsx
+var useUserInviteTableQuery = ({
+  prefix,
+  pageSize = 20
+}) => {
+  const queryObject = useQueryParams(
+    ["offset", "q", "order", "created_at", "updated_at"],
+    prefix
+  );
+  const { offset, created_at, updated_at, q, order } = queryObject;
+  const searchParams = {
+    limit: pageSize,
+    offset: offset ? Number(offset) : 0,
+    order,
+    created_at: created_at ? JSON.parse(created_at) : void 0,
+    updated_at: updated_at ? JSON.parse(updated_at) : void 0,
+    q
+  };
+  return {
+    searchParams,
+    raw: queryObject
+  };
+};
+
+// src/routes/users/user-invite/components/invite-user-form/invite-user-form.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var InviteUserSchema = zod.object({
+  email: zod.string().email()
+});
+var PAGE_SIZE = 10;
+var PREFIX = "usr_invite";
+var INVITE_URL = `${window.location.origin}${__BASE__ === "/" ? "" : __BASE__}/invite?token=`;
+var InviteUserForm = () => {
+  const { t } = useTranslation();
+  const form = useForm({
+    defaultValues: {
+      email: ""
+    },
+    resolver: zodResolver(InviteUserSchema)
+  });
+  const { raw, searchParams } = useUserInviteTableQuery({
+    prefix: PREFIX,
+    pageSize: PAGE_SIZE
+  });
+  const {
+    invites,
+    count,
+    isPending: isLoading,
+    isError,
+    error
+  } = useInvites(searchParams);
+  const columns = useColumns();
+  const { table } = useDataTable({
+    data: invites ?? [],
+    columns,
+    count,
+    enablePagination: true,
+    getRowId: (row) => row.id,
+    pageSize: PAGE_SIZE,
+    prefix: PREFIX
+  });
+  const { mutateAsync, isPending } = useCreateInvite();
+  const handleSubmit = form.handleSubmit(async (values) => {
+    try {
+      await mutateAsync({ email: values.email });
+      form.reset();
+    } catch (error2) {
+      if (isFetchError(error2) && error2.status === 400) {
+        form.setError("root", {
+          type: "manual",
+          message: error2.message
+        });
+        return;
+      }
+    }
+  });
+  if (isError) {
+    throw error;
+  }
+  return /* @__PURE__ */ jsx(RouteFocusModal.Form, { form, children: /* @__PURE__ */ jsxs(
+    KeyboundForm,
+    {
+      onSubmit: handleSubmit,
+      className: "flex h-full flex-col overflow-hidden",
+      children: [
+        /* @__PURE__ */ jsx(RouteFocusModal.Header, {}),
+        /* @__PURE__ */ jsx(RouteFocusModal.Body, { className: "flex flex-1 flex-col overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "flex flex-1 flex-col items-center overflow-y-auto", children: /* @__PURE__ */ jsxs("div", { className: "flex w-full max-w-[720px] flex-col gap-y-8 px-2 py-16", children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx(Heading, { children: t("users.inviteUser") }),
+            /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-subtle", children: t("users.inviteUserHint") })
+          ] }),
+          form.formState.errors.root && /* @__PURE__ */ jsx(
+            Alert,
+            {
+              variant: "error",
+              dismissible: false,
+              className: "text-balance",
+              children: form.formState.errors.root.message
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-y-4", children: [
+            /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-4", children: /* @__PURE__ */ jsx(
+              Form.Field,
+              {
+                control: form.control,
+                name: "email",
+                render: ({ field }) => {
+                  return /* @__PURE__ */ jsxs(Form.Item, { children: [
+                    /* @__PURE__ */ jsx(Form.Label, { children: t("fields.email") }),
+                    /* @__PURE__ */ jsx(Form.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
+                    /* @__PURE__ */ jsx(Form.ErrorMessage, {})
+                  ] });
+                }
+              }
+            ) }),
+            /* @__PURE__ */ jsx("div", { className: "flex items-center justify-end", children: /* @__PURE__ */ jsx(
+              Button,
+              {
+                size: "small",
+                variant: "secondary",
+                type: "submit",
+                isLoading: isPending,
+                children: t("users.sendInvite")
+              }
+            ) })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-y-4", children: [
+            /* @__PURE__ */ jsx(Heading, { level: "h2", children: t("users.pendingInvites") }),
+            /* @__PURE__ */ jsx(Container, { className: "overflow-hidden p-0", children: /* @__PURE__ */ jsx(
+              _DataTable,
+              {
+                table,
+                columns,
+                count,
+                pageSize: PAGE_SIZE,
+                pagination: true,
+                search: "autofocus",
+                isLoading,
+                queryObject: raw,
+                prefix: PREFIX,
+                orderBy: [
+                  { key: "email", label: t("fields.email") },
+                  { key: "created_at", label: t("fields.createdAt") },
+                  { key: "updated_at", label: t("fields.updatedAt") }
+                ]
+              }
+            ) })
+          ] })
+        ] }) }) })
+      ]
+    }
+  ) });
+};
+var InviteActions = ({ invite }) => {
+  const { mutateAsync: revokeAsync } = useDeleteInvite(invite.id);
+  const { mutateAsync: resendAsync } = useResendInvite(invite.id);
+  const prompt = usePrompt();
+  const { t } = useTranslation();
+  const handleDelete = async () => {
+    const res = await prompt({
+      title: t("general.areYouSure"),
+      description: t("users.deleteInviteWarning", {
+        email: invite.email
+      }),
+      cancelText: t("actions.cancel"),
+      confirmText: t("actions.delete")
+    });
+    if (!res) {
+      return;
+    }
+    await revokeAsync();
+  };
+  const handleResend = async () => {
+    await resendAsync();
+  };
+  const handleCopyInviteLink = () => {
+    const inviteUrl = `${INVITE_URL}${invite.token}`;
+    copy(inviteUrl);
+  };
+  return /* @__PURE__ */ jsx(
+    ActionMenu,
+    {
+      groups: [
+        {
+          actions: [
+            {
+              icon: /* @__PURE__ */ jsx(ArrowPath, {}),
+              label: t("users.resendInvite"),
+              onClick: handleResend
+            }
+          ]
+        },
+        {
+          actions: [
+            {
+              icon: /* @__PURE__ */ jsx(Link, {}),
+              label: t("users.copyInviteLink"),
+              onClick: handleCopyInviteLink
+            }
+          ]
+        },
+        {
+          actions: [
+            {
+              icon: /* @__PURE__ */ jsx(Trash, {}),
+              label: t("actions.delete"),
+              onClick: handleDelete
+            }
+          ]
+        }
+      ]
+    }
+  );
+};
+var columnHelper = createColumnHelper();
+var useColumns = () => {
+  const { t } = useTranslation();
+  return useMemo(
+    () => [
+      columnHelper.accessor("email", {
+        header: t("fields.email"),
+        cell: ({ getValue }) => {
+          return getValue();
+        }
+      }),
+      columnHelper.accessor("accepted", {
+        header: t("fields.status"),
+        cell: ({ getValue, row }) => {
+          const accepted = getValue();
+          const expired = new Date(row.original.expires_at) < /* @__PURE__ */ new Date();
+          if (accepted) {
+            return /* @__PURE__ */ jsx(
+              Tooltip,
+              {
+                content: t("users.acceptedOnDate", {
+                  date: format(
+                    new Date(row.original.updated_at),
+                    "dd MMM, yyyy"
+                  )
+                }),
+                children: /* @__PURE__ */ jsx(StatusBadge, { color: "green", children: t("users.inviteStatus.accepted") })
+              }
+            );
+          }
+          if (expired) {
+            return /* @__PURE__ */ jsx(
+              Tooltip,
+              {
+                content: t("users.expiredOnDate", {
+                  date: format(
+                    new Date(row.original.expires_at),
+                    "dd MMM, yyyy"
+                  )
+                }),
+                children: /* @__PURE__ */ jsx(StatusBadge, { color: "red", children: t("users.inviteStatus.expired") })
+              }
+            );
+          }
+          return /* @__PURE__ */ jsx(
+            Tooltip,
+            {
+              content: /* @__PURE__ */ jsx(
+                Trans,
+                {
+                  i18nKey: "users.validFromUntil",
+                  components: [
+                    /* @__PURE__ */ jsx("span", { className: "font-medium" }, "from"),
+                    /* @__PURE__ */ jsx("span", { className: "font-medium" }, "untill")
+                  ],
+                  values: {
+                    from: format(
+                      new Date(row.original.created_at),
+                      "dd MMM, yyyy"
+                    ),
+                    until: format(
+                      new Date(row.original.expires_at),
+                      "dd MMM, yyyy"
+                    )
+                  }
+                }
+              ),
+              children: /* @__PURE__ */ jsx(StatusBadge, { color: "orange", children: t("users.inviteStatus.pending") })
+            }
+          );
+        }
+      }),
+      columnHelper.display({
+        id: "actions",
+        cell: ({ row }) => /* @__PURE__ */ jsx(InviteActions, { invite: row.original })
+      })
+    ],
+    [t]
+  );
+};
+
+// src/routes/users/user-invite/user-invite.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var UserInvite = () => {
+  return /* @__PURE__ */ jsx2(RouteFocusModal, { children: /* @__PURE__ */ jsx2(InviteUserForm, {}) });
+};
+export {
+  UserInvite as Component
+};