@compill/admin 1.0.113 → 1.0.116

package/dist/index.cjs

@@ -7,15 +7,17 @@ var js = require('@mdi/js');
 var ui = require('@valerya/ui');
 var Link = require('next/link.js');
 var reactRouterDom = require('react-router-dom');
-var React = require('react');
 var adminApi = require('@compill/admin-api');
-var formik = require('formik');
+var React = require('react');
 var reactToastify = require('react-toastify');
+var formComponents = require('@compill/form-components');
+var formik = require('formik');
 var reactHotkeysHook = require('react-hotkeys-hook');
 var form = require('@compill/form');
 var react = require('@soperio/react');
 var formEditor = require('@compill/form-editor');
 var editor = require('@compill/editor');
+var componentsState = require('@compill/components-state');
 var reactDom = require('react-dom');
 var router_js = require('next/router.js');
 var table = require('@compill/table');
@@ -24,8 +26,8 @@ var hooks = require('@compill/hooks');
 var env = require('@compill/env');
 var reactTable = require('@tanstack/react-table');
 var reactQuery = require('@tanstack/react-query');
+var layout = require('@brikka/layout');
 var Image = require('next/image.js');
-var auth = require('@compill/auth');
 
 function SectionTitle({ children, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx("h2", { textSize: "xl", fontWeight: "600", textColor: "slate-800", ...props, children });
@@ -69,105 +71,12 @@ function BreadcrumbItem({ breadcrumb, showSeparator }) {
   ] });
 }
 
-function DialogButton({ buildDialog, ...props }) {
-  const [showDialog, setShowDialog] = React.useState(false);
-  const onShowDialog = React.useCallback((event) => {
-    event?.preventDefault();
-    event?.stopPropagation();
-    setShowDialog(true);
-  }, [setShowDialog]);
-  const onCloseDialog = React.useCallback(() => {
-    setShowDialog(false);
-  }, [setShowDialog]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { onClick: onShowDialog, ...props }),
-    showDialog && buildDialog(onCloseDialog)
-  ] });
-}
-
-function ButtonBar({ children, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { dflex: true, border: "1px", borderColor: "zinc-200", divideX: "1px", divideColor: "zinc-200", rounded: "lg", overflow: "hidden", ...props, children });
-}
-const ButtonBarButton = React.forwardRef(
-  function({ icon, children, ...props }, ref) {
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      ui.Button,
-      {
-        scheme: "dark",
-        size: "sm",
-        aspectRatio: icon && !children ? "square" : void 0,
-        variant: "borderless",
-        dflex: true,
-        alignItems: "center",
-        placeContent: "center",
-        corners: "square",
-        gap: "2",
-        ...props,
-        ref,
-        children: [
-          icon && /* @__PURE__ */ jsxRuntime.jsx(ui.Icon, { path: icon }),
-          children
-        ]
-      }
-    );
-  }
-);
-const ButtonBarSubmitButton = React.forwardRef(
-  function({ useDirty, disabled, icon, children, ...props }, ref) {
-    const { dirty, handleSubmit } = formik.useFormikContext() ?? { dirty: false, handleSubmit: void 0};
-    const onSubmit = React.useCallback(() => handleSubmit(), [handleSubmit]);
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      ui.Button,
-      {
-        scheme: "dark",
-        size: "sm",
-        aspectRatio: icon && !children ? "square" : void 0,
-        variant: "borderless",
-        dflex: true,
-        alignItems: "center",
-        placeContent: "center",
-        corners: "square",
-        gap: "2",
-        disabled: useDirty && !dirty || disabled,
-        onClick: onSubmit,
-        ...props,
-        ref,
-        children: [
-          icon && /* @__PURE__ */ jsxRuntime.jsx(ui.Icon, { path: icon }),
-          children
-        ]
-      }
-    );
-  }
-);
-function ButtonBarDialogButton({ icon, children, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    DialogButton,
-    {
-      scheme: "dark",
-      size: "sm",
-      aspectRatio: icon && !children ? "square" : void 0,
-      variant: "borderless",
-      dflex: true,
-      alignItems: "center",
-      placeContent: "center",
-      corners: "square",
-      gap: "2",
-      ...props,
-      children: [
-        icon && /* @__PURE__ */ jsxRuntime.jsx(ui.Icon, { path: icon }),
-        children
-      ]
-    }
-  );
-}
-
 function InvalidateButton({ pathOrPermalink, ...props }) {
   const api$1 = adminApi.INVALIDATE_API.new(pathOrPermalink);
   const mutation = api.useApiMutation(api$1.invalidate, api$1.queryKey);
   const invalidate = api.useMutate(mutation, { successMsg: "Page successfully invalidated" });
   return /* @__PURE__ */ jsxRuntime.jsx(
-    ButtonBarButton,
+    components.ButtonBarButton,
     {
       title: "Regenerate",
       disabled: mutation.isLoading,
@@ -199,7 +108,7 @@ function PublishButton({
     mutation.mutateAsync(queryId).then(() => reactToastify.toast.success(isDraft ? "Published!" : "Unpublished!")).catch((error) => reactToastify.toast.error(`Error: ${error}`));
   }, [mutation, queryId]);
   return /* @__PURE__ */ jsxRuntime.jsx(
-    ButtonBarButton,
+    components.ButtonBarButton,
     {
       disabled: mutation.isLoading,
       onClick: publish,
@@ -215,7 +124,7 @@ function UpdateButton({ ...props }) {
   reactHotkeysHook.useHotkeys("ctrl+s", () => {
     if (dirty && !props.disabled) handleSubmit();
   }, { preventDefault: true }, [dirty, props, handleSubmit]);
-  return /* @__PURE__ */ jsxRuntime.jsx(ButtonBarSubmitButton, { icon: js.mdiCloudUpload, ...props, children: "Update" });
+  return /* @__PURE__ */ jsxRuntime.jsx(formComponents.ButtonBarSubmitButton, { icon: js.mdiCloudUpload, ...props, children: "Update" });
 }
 
 function ViewButton({ label, path, icon, ...props }) {
@@ -223,7 +132,7 @@ function ViewButton({ label, path, icon, ...props }) {
     window.open(path, "_blank");
   }, [path]);
   return /* @__PURE__ */ jsxRuntime.jsx(
-    ButtonBarButton,
+    components.ButtonBarButton,
     {
       onClick: openPage,
       dflex: true,
@@ -285,9 +194,9 @@ function PageQueryStateContainerInner({ queryId, api: api$1, apiFn, loadingStyle
   const { data, isLoading, isError } = apiFn == "getAll" ? api.useApiQuery(api$1.queryKey, api$1.getAll, props.apiParams) : api.useApiQuery(api$1.queryKey, api$1.get, queryId);
   const invalidate = api.useInvalidateQuery(api$1.queryKey, queryId);
   if (isLoading)
-    return /* @__PURE__ */ jsxRuntime.jsx(components.QueryLoadingState, { w: "full", h: "100%", ...loadingStyles });
+    return /* @__PURE__ */ jsxRuntime.jsx(componentsState.QueryLoadingState, { w: "full", h: "100%", ...loadingStyles });
   if (isError)
-    return /* @__PURE__ */ jsxRuntime.jsx(components.RetryOnError, { p: "0", onClick: invalidate, ...errorStyles });
+    return /* @__PURE__ */ jsxRuntime.jsx(componentsState.RetryOnError, { p: "0", onClick: invalidate, ...errorStyles });
   return /* @__PURE__ */ jsxRuntime.jsx(PageContainer, { ...props, children: apiFn == "get" ? children(data) : children(data) });
 }
 const PageQueryStateContainer = React.forwardRef(PageQueryStateContainerInner);
@@ -399,12 +308,12 @@ function ScreenTopBar({ tabbed, breadcrumbs, api, item, isLoading, buttonBar, tr
 }
 function Buttons$1({ api, item, isLoading, buttonBar }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    buttonBar && buttonBar.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(ButtonBar, { children: buttonBar.map((button, index) => /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
+    buttonBar && buttonBar.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(components.ButtonBar, { children: buttonBar.map((button, index) => /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
       button.type === "link" && /* @__PURE__ */ jsxRuntime.jsx(ViewButton, { label: button.label, path: button.path, icon: button.icon }),
       button.type === "invalidate" && /* @__PURE__ */ jsxRuntime.jsx(InvalidateButton, { pathOrPermalink: button.pathOrPermalink }),
       button.type == "custom" && button.render(item)
     ] }, index)) }),
-    /* @__PURE__ */ jsxRuntime.jsxs(ButtonBar, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(components.ButtonBar, { children: [
       api instanceof adminApi.API && /* @__PURE__ */ jsxRuntime.jsx(PublishButton, { api, queryId: item.id, status: item.status, disabled: isLoading }),
       /* @__PURE__ */ jsxRuntime.jsx(UpdateButton, { disabled: isLoading })
     ] })
@@ -620,7 +529,7 @@ function TableContainer({ initialPageSize, initialVisibleColumns, columns, filte
 }
 
 function TableCreateButton({ icon, children, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(ButtonBarDialogButton, { ...props, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(components.ButtonBarDialogButton, { ...props, children: [
     /* @__PURE__ */ jsxRuntime.jsx(ui.Icon, { path: icon ?? js.mdiPlusThick }),
     children
   ] });
@@ -741,240 +650,21 @@ function TableMassActions({ actions }) {
   return /* @__PURE__ */ jsxRuntime.jsx(ui.Collapse, { in: showMassActions, style: { overflow: showMassActions ? "initial" : "hidden" }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { dflex: true, gap: "3", flexWrap: true, alignItems: "center", px: "8", pt: "5", children: actions.map((action, index) => /* @__PURE__ */ jsxRuntime.jsx("div", { children: action.type == "button" && !action.showConfirmationDialog && /* @__PURE__ */ jsxRuntime.jsx(ActionButton$1, { label: action.label, queryFn: action.queryFn, queryKey: action.queryKey, buttonProps: action.buttonProps }) }, index)) }) });
 }
 
-const defaultErrorMsg$1 = "Oops, something went wrong...";
-function nonNullValues(data) {
-  if (data) {
-    const nonNullData = { ...data };
-    for (const key in data)
-      nonNullData[key] = nonNullData[key] ?? "";
-    return nonNullData;
-  }
-  return data;
-}
-function ItemEditDialog({
-  initialValues,
-  itemLabel,
-  queryId = "",
-  api: api$1,
-  queryFetchOptions,
-  querySaveOptions,
-  onSuccess,
-  onFetchError,
-  fetchErrorMsg = defaultErrorMsg$1,
-  onSaveError,
-  saveErrorMsg = defaultErrorMsg$1,
-  fetchToFormData,
-  formToQueryData,
-  invalidateQueriesOnSuccess = true,
-  invalidateQueryKey,
-  retryText = "Retry",
-  cancelLabel = "Cancel",
-  saveLabel,
-  size = "lg",
-  title,
-  form: form$1,
-  show,
-  onClose,
-  formikProps,
-  ...props
-}) {
-  const { isInitialLoading, isFetching, data, isError, error, refetch } = api.useApiQuery(api$1.queryKey, api$1.get, queryId, {
-    enabled: !/*queryId == 0 || */
-    (queryId == "" || queryId == null || queryId == void 0),
-    // means than this query is only enabled if the id is defined
-    onError: onFetchError,
-    ...queryFetchOptions
-  });
-  const mutation = invalidateQueriesOnSuccess ? api.useInvalidateParentMutation(api$1.upsert, invalidateQueryKey ?? api$1.queryKey, querySaveOptions) : api.useApiMutation(api$1.upsert, api$1.queryKey, queryId, querySaveOptions);
-  const retry = React.useCallback(() => refetch(), [refetch]);
-  const saveItem = React.useCallback(async (item, actions) => {
-    mutation.reset();
-    const formItem = formToQueryData ? formToQueryData(item) : { ...item };
-    await mutation.mutateAsync(formItem).then((response) => {
-      if (onSuccess)
-        onSuccess(formItem, response);
-      else
-        reactToastify.toast.success(`${title ? title(formItem) : formItem.name ?? formItem.title} ${queryId ? "saved" : "created"}`);
-      onClose?.();
-    }).catch((error2) => {
-      console.error("on error", error2);
-      if (onSaveError)
-        onSaveError(item);
-      else
-        reactToastify.toast.error(`Couldn't save ${title ? title(formItem) : formItem.name ?? formItem.title}`);
-      actions.setSubmitting(false);
-    });
-  }, [mutation, formToQueryData, onSuccess, onSaveError, onClose]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    ui.Modal,
-    {
-      size,
-      show,
-      onClose,
-      scheme: "light",
-      transition: true,
-      ...props,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(ui.Modal.Header, { children: [
-          !isInitialLoading && queryId && `Edit ${title ? title(data) : data?.["name"] ?? data?.["title"] ?? data?.["name"] ?? ""}`,
-          !queryId && `Create new ${itemLabel ?? "item"}`,
-          Array.isArray(form$1) && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {})
-        ] }),
-        isInitialLoading && /* @__PURE__ */ jsxRuntime.jsx(ui.Modal.Body, { children: /* @__PURE__ */ jsxRuntime.jsx(components.QueryLoadingState, { minW: "72" }) }),
-        isError && /* @__PURE__ */ jsxRuntime.jsx(ui.Modal.Body, { children: /* @__PURE__ */ jsxRuntime.jsx(components.RetryOnError, { label: `${fetchErrorMsg} ${error}`, onClick: retry }) }),
-        !isInitialLoading && !isError && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(
-          formik.Formik,
-          {
-            initialValues: fetchToFormData && queryId && data ? fetchToFormData(nonNullValues(data)) : nonNullValues(initialValues(data)) ?? {},
-            onSubmit: saveItem,
-            ...formikProps,
-            children: ({ setFieldValue, dirty, handleSubmit, isValid, values }) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx(ui.Modal.Body, { pb: "6", children: /* @__PURE__ */ jsxRuntime.jsxs(formik.Form, { children: [
-                React.isValidElement(form$1) && form$1,
-                Array.isArray(form$1) && /* @__PURE__ */ jsxRuntime.jsx(form.FormRenderer, { form: form$1 }),
-                react.isFunction(form$1) && /* @__PURE__ */ jsxRuntime.jsx(form.FormRenderer, { form: form$1(data ?? values) })
-              ] }) }),
-              /* @__PURE__ */ jsxRuntime.jsxs(ui.Modal.Footer, { dflex: true, placeContent: "end", spaceX: "3", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  ui.Button,
-                  {
-                    disabled: mutation.isLoading,
-                    onClick: onClose,
-                    variant: "borderless",
-                    me: "2",
-                    children: cancelLabel
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  ui.Button,
-                  {
-                    type: "submit",
-                    disabled: !dirty || mutation.isLoading,
-                    onClick: () => handleSubmit(),
-                    children: saveLabel ? saveLabel : queryId ? "Update" : "Create"
-                  }
-                )
-              ] })
-            ] })
-          }
-        ) }),
-        mutation.isLoading && /* @__PURE__ */ jsxRuntime.jsx(components.ModalLoadingOverlay, {})
-      ]
-    }
-  );
-}
-
-function QueryWrapperDialog({ api: api$1, fn, transformFn, config, onClose, queryId, invalidateQueryKey }) {
-  const { data, isFetching } = api.useApiQuery(
-    api$1.queryKey,
-    fn === "get" || fn === "getTransformed" ? api$1.get : api$1.getAll,
-    void 0,
-    { retryOnMount: false, refetchOnMount: false, refetchOnWindowFocus: false }
-  );
-  const transformedData = React.useMemo(() => {
-    if (data && (fn === "getTransformed" || fn === "getAllTransformed")) {
-      if (!transformFn)
-        console.warn(`QueryWrapperDialog: you forgot to pass transformFn as parameter for fn ${fn}`);
-      return transformFn?.(data);
-    }
-    return data;
-  }, [data, fn, transformFn]);
-  if (isFetching)
-    return null;
-  return /* @__PURE__ */ jsxRuntime.jsx(ItemEditDialog, { ...config(transformedData), queryId, invalidateQueryKey, show: true, onClose });
-}
-
-function MultiQueryWrapperDialog({ queries, config, onClose, queryId, invalidateQueryKey }) {
-  const { data, isFetching, isError } = api.useApiQueries(queries.map((q) => ({
-    queryKey: q.api.queryKey,
-    queryFn: q.fn == "get" ? q.api.get : q.api.getAll,
-    queryOptions: {
-      cacheTime: q.cache === false ? 0 : void 0,
-      staleTime: q.cache === false ? 0 : void 0
-    }
-  })));
-  const transformedData = React.useMemo(() => {
-    return data?.map((d, index) => queries[index]?.transformFn ? queries[index]?.transformFn?.(d) : d);
-  }, [data, queries]);
-  return /* @__PURE__ */ jsxRuntime.jsx(ItemEditDialog, { isPreloading: isFetching, ...config(...transformedData), queryId, invalidateQueryKey, show: true, onClose });
-}
-
 function DialogRenderer({ config, onClose, invalidateQueryKey, queryId }) {
   const { type, ...props } = config;
   if (config.type === "dialog")
-    return /* @__PURE__ */ jsxRuntime.jsx(ItemEditDialog, { ...props, queryId, invalidateQueryKey, show: true, onClose });
+    return /* @__PURE__ */ jsxRuntime.jsx(formComponents.ItemEditDialog, { ...props, queryId, invalidateQueryKey, show: true, onClose });
   if (config.type === "query")
-    return /* @__PURE__ */ jsxRuntime.jsx(QueryWrapperDialog, { ...props, queryId, invalidateQueryKey, onClose });
+    return /* @__PURE__ */ jsxRuntime.jsx(formComponents.ItemEditWrappedDialog, { ...props, queryId, invalidateQueryKey, onClose });
   if (config.type === "multiQuery")
-    return /* @__PURE__ */ jsxRuntime.jsx(MultiQueryWrapperDialog, { ...props, queryId, invalidateQueryKey, onClose });
+    return /* @__PURE__ */ jsxRuntime.jsx(formComponents.ItemEditMultiWrappedDialog, { ...props, queryId, invalidateQueryKey, onClose });
   return null;
 }
 
 function RefreshButton({ queryKey }) {
   const invalidate = api.useInvalidateQuery(queryKey);
   reactHotkeysHook.useHotkeys("ctrl+r", () => invalidate(), { preventDefault: true }, [invalidate]);
-  return /* @__PURE__ */ jsxRuntime.jsx(ButtonBarButton, { scheme: "dark", size: "sm", aspectRatio: "square", variant: "borderless", onClick: invalidate, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Icon, { path: js.mdiRefresh }) });
-}
-
-function ItemDeleteDialog({
-  title,
-  actionButtonLabel,
-  closeActionButtonLabel = "Cancel",
-  itemLabel,
-  queryId = "",
-  api: api$1,
-  apiFn,
-  invalidateQueriesOnSuccess = true,
-  invalidateQueryKey,
-  size = "lg",
-  md_boxSizing,
-  msg,
-  show,
-  onClose,
-  onSuccess,
-  ...props
-}) {
-  const fn = apiFn ? api$1[apiFn] : api$1.delete;
-  const mutation = invalidateQueriesOnSuccess ? api.useInvalidateParentMutation(fn, invalidateQueryKey ?? api$1.queryKey) : api.useApiMutation(fn, api$1.queryKey);
-  const mutate = api.useMutate(mutation, { onSuccess: () => {
-    onClose?.();
-    onSuccess?.();
-  } });
-  const handleDelete = React.useCallback(() => mutate(queryId), [mutate, queryId]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    ui.Modal,
-    {
-      size,
-      show,
-      onClose,
-      scheme: "danger",
-      variant: "glass",
-      transition: true,
-      ...props,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Modal.Header, { children: title || `Delete ${itemLabel}` }),
-        /* @__PURE__ */ jsxRuntime.jsxs(ui.Modal.Body, { pb: "6", children: [
-          !msg && `Do you really want to delete ${itemLabel}?`,
-          msg && react.runIfFn(msg, itemLabel)
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs(ui.Modal.Footer, { dflex: true, placeContent: "end", spaceX: "3", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            ui.Button,
-            {
-              disabled: mutation.isPending,
-              onClick: onClose,
-              variant: "borderless",
-              scheme: "dark",
-              me: "2",
-              children: closeActionButtonLabel
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { scheme: "danger", disabled: mutation.isPending, onClick: handleDelete, children: actionButtonLabel || "Delete" })
-        ] }),
-        mutation.isPending && /* @__PURE__ */ jsxRuntime.jsx(components.ModalLoadingOverlay, {})
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxRuntime.jsx(components.ButtonBarButton, { scheme: "dark", size: "sm", aspectRatio: "square", variant: "borderless", onClick: invalidate, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Icon, { path: js.mdiRefresh }) });
 }
 
 const [provider, useContext] = react.createContext();
@@ -1018,7 +708,7 @@ function TableViewProvider({ editView, deleteItem, queryKey, children }) {
         const deleteConfig = react.runIfFn(deleteItem, item);
         setDialog(
           /* @__PURE__ */ jsxRuntime.jsx(
-            ItemDeleteDialog,
+            formComponents.ItemDeleteDialog,
             {
               show: true,
               onClose: onCloseDialog,
@@ -1211,7 +901,7 @@ function TableButtonBar({ buttonBar, queryKey, createView, editView, api, childr
         return /* @__PURE__ */ jsxRuntime.jsx(DialogRenderer, { config: view, onClose, invalidateQueryKey: api.queryKey });
     };
   }, [createView, editView, api]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(ButtonBar, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(components.ButtonBar, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(RefreshButton, { queryKey }),
     buttonBar && buttonBar.map(
       (button, index) => /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
@@ -1301,9 +991,9 @@ function MultiQueryWrapper({
   const { data, isFetching, isError } = useQueries(queries);
   const invalidate = useInvalidate(queries);
   if (isFetching)
-    return /* @__PURE__ */ jsxRuntime.jsx(components.QueryLoadingState, { w: "full", h: "100vh" });
+    return /* @__PURE__ */ jsxRuntime.jsx(componentsState.QueryLoadingState, { w: "full", h: "100vh" });
   if (isError || !data)
-    return /* @__PURE__ */ jsxRuntime.jsx(components.RetryOnError, { p: "0", w: "full", h: "100vh", onClick: invalidate });
+    return /* @__PURE__ */ jsxRuntime.jsx(componentsState.RetryOnError, { p: "0", w: "full", h: "100vh", onClick: invalidate });
   return /* @__PURE__ */ jsxRuntime.jsx(ScreenRenderer, { config: config(...data), tabbed, ...props });
 }
 
@@ -1325,283 +1015,6 @@ function Content({ ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { w: "100%", h: "100%", overflowY: "auto", ...props, children: /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Outlet, {}) });
 }
 
-function SelectedIndicator({ darkMode }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      position: "absolute",
-      bgColor: darkMode ? "white" : "black",
-      bgOpacity: "90",
-      w: "0.5",
-      h: "6",
-      top: "1.5",
-      start: "-4"
-    }
-  );
-}
-
-function MenuButton({ depth, darkMode, icon, selected, children, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    ui.Button,
-    {
-      as: "li",
-      minH: "8",
-      ms: `${(depth ?? 0) * 2}`,
-      p: "2",
-      font: "title",
-      textColor: darkMode ? "white" : "black",
-      fontWeight: "600",
-      rounded: "lg",
-      textSize: "sm",
-      variant: "borderless",
-      hover_bgColor: darkMode ? "white" : "black",
-      hover_bgOpacity: "10",
-      hover_textColor: darkMode ? "white" : "zinc-800",
-      cursor: "pointer",
-      dflex: true,
-      alignItems: "center",
-      gap: "3",
-      ...props,
-      children: [
-        icon && /* @__PURE__ */ jsxRuntime.jsx(ui.Icon, { path: icon, opacity: selected ? "100" : "60" }),
-        children
-      ]
-    }
-  );
-}
-
-function MenuItem$1({ icon, path, depth, darkMode, subMenu, ...props }) {
-  const location = reactRouterDom.useLocation();
-  const selected = path == "/" ? location.pathname == "/" : location.pathname.startsWith(path.startsWith("/") ? path : `/${path}`);
-  const match = reactRouterDom.useMatch("/" + path) != null;
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(reactRouterDom.Link, { to: path, style: { position: "relative" }, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        MenuButton,
-        {
-          depth,
-          darkMode,
-          icon,
-          selected,
-          ...props
-        }
-      ),
-      match && /* @__PURE__ */ jsxRuntime.jsx(SelectedIndicator, { darkMode })
-    ] }),
-    subMenu?.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(
-      MenuItem$1,
-      {
-        icon: item.icon,
-        path: item.path,
-        depth: (depth ?? 0) + 1,
-        darkMode,
-        subMenu: item.children,
-        children: item.label
-      },
-      index
-    ))
-  ] });
-}
-
-function NextMenuItem({ icon, path, depth, darkMode, subMenu, ...props }) {
-  const { pathname } = router_js.useRouter();
-  const selected = path == "/" ? pathname == "/" : pathname.startsWith(path.startsWith("/") ? path : `/${path}`);
-  const match = path == "/" ? pathname == "/" : pathname == (path.startsWith("/") ? path : `/${path}`);
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(Link, { href: path, style: { position: "relative" }, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        MenuButton,
-        {
-          depth,
-          darkMode,
-          icon,
-          selected,
-          ...props
-        }
-      ),
-      match && /* @__PURE__ */ jsxRuntime.jsx(SelectedIndicator, { darkMode })
-    ] }),
-    subMenu?.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(
-      NextMenuItem,
-      {
-        icon: item.icon,
-        path: item.path,
-        depth: (depth ?? 0) + 1,
-        darkMode,
-        subMenu: item.children,
-        children: item.label
-      },
-      index
-    ))
-  ] });
-}
-
-function Menu({ darkMode, config, useNextRouter, ...props }) {
-  const Comp = useNextRouter ? NextMenuItem : MenuItem$1;
-  return /* @__PURE__ */ jsxRuntime.jsx("ul", { ...props, children: config.map((item, index) => {
-    if (item.type == "divider")
-      return /* @__PURE__ */ jsxRuntime.jsx(Divider, { title: item.label }, index);
-    if (item.type == "item") {
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        Comp,
-        {
-          icon: item.icon,
-          path: item.path,
-          depth: 0,
-          darkMode,
-          subMenu: item.children,
-          children: item.label
-        },
-        index
-      );
-    }
-  }) });
-}
-function Divider({ title }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      px: "2",
-      mt: "5",
-      mb: "2",
-      opacity: "75",
-      textTransform: "capitalize",
-      letterSpacing: "widest",
-      fontWeight: "700",
-      textSize: "xs",
-      children: title
-    }
-  );
-}
-
-function UserBlock({ color, darkMode, menuConfig, path }) {
-  const { isLoading, user } = auth.useSessionUser();
-  const navigate = reactRouterDom.useNavigate();
-  const handleClick = React.useCallback(() => navigate(path), [navigate, path]);
-  if (isLoading)
-    return null;
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      dflex: true,
-      alignItems: "center",
-      border: "0.5",
-      borderColor: `${color}-${darkMode ? "800" : "200"}`,
-      ps: "3",
-      py: "1.5",
-      textSize: "md",
-      rounded: "lg",
-      hover_bgColor: `${color}-${darkMode ? "800" : "200"}`,
-      cursor: "pointer",
-      textColor: darkMode ? "white" : "slate-800",
-      onClick: handleClick,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Avatar, { size: "sm", src: user?.media?.url ?? "", name: `${user?.firstname} ${user?.lastname}` }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { flexGrow: true, ms: "2", children: `${esToolkit.capitalize(user?.firstname || user?.lastname || "")}` }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          ui.IconButton,
-          {
-            variant: "borderless",
-            corners: "pill",
-            scheme: "dark",
-            textColor: darkMode ? "white" : "slate-800",
-            hover_textColor: darkMode ? "white" : "slate-800",
-            hover_bgColor: `${color}-${darkMode ? "900" : "200"}`,
-            icon: js.mdiCog,
-            onClick: handleClick
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(OverflowMenu, { color, darkMode, menuConfig })
-      ]
-    }
-  );
-}
-function OverflowMenu({ color, darkMode, menuConfig }) {
-  const [showPopup, setShowPopup] = React.useState(false);
-  const navigate = reactRouterDom.useNavigate();
-  const logout = auth.useSessionLogout(false);
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs(
-    ui.Popup,
-    {
-      show: showPopup,
-      position: "relative",
-      side: "bottom-end",
-      onClick: (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        setShowPopup((show) => !show);
-      },
-      onHide: () => setShowPopup(false),
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          ui.IconButton,
-          {
-            icon: js.mdiDotsVertical,
-            variant: "borderless",
-            corners: "pill",
-            scheme: "dark",
-            textColor: darkMode ? "white" : "slate-800",
-            hover_textColor: darkMode ? "white" : "slate-800",
-            hover_bgColor: `${color}-${darkMode ? "900" : "200"}`
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            bgColor: "white",
-            rounded: "sm",
-            overflow: "hidden",
-            shadow: true,
-            mt: "1",
-            border: "px",
-            borderColor: "gray-200",
-            divideColor: "gray-200",
-            divideY: "px",
-            minW: "40",
-            children: [
-              menuConfig && menuConfig.length > 0 && menuConfig.map((item, index) => {
-                if (item.type == "item") {
-                  return /* @__PURE__ */ jsxRuntime.jsx(MenuItem, { icon: item.icon, onClick: () => navigate(item.path), children: item.label }, index);
-                }
-                return null;
-              }),
-              /* @__PURE__ */ jsxRuntime.jsx(MenuItem, { icon: js.mdiLogout, onClick: logout, children: "Logout" })
-            ]
-          }
-        )
-      ]
-    }
-  ) });
-}
-function MenuItem({ icon, onClick, children, ...props }) {
-  const handleClick = React.useCallback((e) => {
-    e.preventDefault();
-    e.stopPropagation();
-    onClick?.(e);
-  }, []);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    ui.Button,
-    {
-      variant: "borderless",
-      scheme: "dark",
-      size: "sm",
-      alignItems: "center",
-      dflex: true,
-      gap: "2",
-      px: "2",
-      py: "1.5",
-      w: "full",
-      onClick: handleClick,
-      textColor: "slate-700",
-      ...props,
-      children: [
-        icon && /* @__PURE__ */ jsxRuntime.jsx(ui.Icon, { path: icon, size: "md" }),
-        children
-      ]
-    }
-  );
-}
-
 function Sidebar({ show, logo, title, menuConfig, userMenuConfig, userSettingsPath, color, darkMode, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
@@ -1631,8 +1044,8 @@ function Sidebar({ show, logo, title, menuConfig, userMenuConfig, userSettingsPa
             ]
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx(Menu, { overflowY: "auto", flexGrow: "1", p: "4", darkMode, config: menuConfig }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { p: "2", children: /* @__PURE__ */ jsxRuntime.jsx(UserBlock, { darkMode, color, menuConfig: userMenuConfig, path: userSettingsPath }) })
+        /* @__PURE__ */ jsxRuntime.jsx(layout.SidebarMenu, { overflowY: "auto", flexGrow: "1", p: "4", darkMode, config: menuConfig }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { p: "2", children: /* @__PURE__ */ jsxRuntime.jsx(layout.SidebarMenuUserBlock, { darkMode, color, menuConfig: userMenuConfig, path: userSettingsPath }) })
       ]
     }
   );
@@ -1816,8 +1229,8 @@ function AttachDialog({
       ...props,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(ui.Modal.Header, { children: `Add ${itemLabel}` }),
-        isLoading && /* @__PURE__ */ jsxRuntime.jsx(ui.Modal.Body, { children: /* @__PURE__ */ jsxRuntime.jsx(components.QueryLoadingState, { minW: "72" }) }),
-        isError && /* @__PURE__ */ jsxRuntime.jsx(ui.Modal.Body, { children: /* @__PURE__ */ jsxRuntime.jsx(components.RetryOnError, { label: `${fetchErrorMsg} ${error}`, onClick: retry }) }),
+        isLoading && /* @__PURE__ */ jsxRuntime.jsx(ui.Modal.Body, { children: /* @__PURE__ */ jsxRuntime.jsx(componentsState.QueryLoadingState, { minW: "72" }) }),
+        isError && /* @__PURE__ */ jsxRuntime.jsx(ui.Modal.Body, { children: /* @__PURE__ */ jsxRuntime.jsx(componentsState.RetryOnError, { label: `${fetchErrorMsg} ${error}`, onClick: retry }) }),
         !isLoading && !isError && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(ui.Modal.Body, { px: "0", pb: "6", maxH: "750px", overflow: "auto", children: /* @__PURE__ */ jsxRuntime.jsx("div", { dflex: true, flexCol: true, overflow: "auto", children: resources.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
             ListItem,
@@ -1852,7 +1265,7 @@ function AttachDialog({
             )
           ] })
         ] }),
-        mutation.isLoading && /* @__PURE__ */ jsxRuntime.jsx(components.ModalLoadingOverlay, {})
+        mutation.isLoading && /* @__PURE__ */ jsxRuntime.jsx(componentsState.ModalLoadingOverlay, {})
       ]
     }
   );
@@ -1949,7 +1362,7 @@ function FormActionDialog({
             ]
           }
         ),
-        mutation.isLoading && /* @__PURE__ */ jsxRuntime.jsx(components.ModalLoadingOverlay, {})
+        mutation.isLoading && /* @__PURE__ */ jsxRuntime.jsx(componentsState.ModalLoadingOverlay, {})
       ]
     }
   );
@@ -1957,7 +1370,7 @@ function FormActionDialog({
 
 const PageStateContainer = React.forwardRef(({ loading = false, children, ...props }, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    loading && /* @__PURE__ */ jsxRuntime.jsx(components.QueryLoadingState, { w: "full", h: "100%" }),
+    loading && /* @__PURE__ */ jsxRuntime.jsx(componentsState.QueryLoadingState, { w: "full", h: "100%" }),
     !loading && /* @__PURE__ */ jsxRuntime.jsx(ui.Container, { ref, center: true, size: "x2", dflex: true, flexCol: true, gap: "8", ...props, children })
   ] });
 });
@@ -2007,7 +1420,7 @@ function TableRowNavigateButton({ path, ...props }) {
 
 function TableRowActionDialogButton({ icon, children, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    DialogButton,
+    components.DialogButton,
     {
       dflex: true,
       alignContent: "center",
@@ -2069,16 +1482,8 @@ function TableRowPublishPostButton({ id, api: api$1, status, invalidateQueryKey,
 exports.AdminLayout = AdminLayout;
 exports.AttachDialog = AttachDialog;
 exports.Breadcrumbs = Breadcrumbs;
-exports.ButtonBar = ButtonBar;
-exports.ButtonBarButton = ButtonBarButton;
-exports.ButtonBarDialogButton = ButtonBarDialogButton;
-exports.ButtonBarSubmitButton = ButtonBarSubmitButton;
-exports.DialogButton = DialogButton;
 exports.FormActionDialog = FormActionDialog;
 exports.InvalidateButton = InvalidateButton;
-exports.ItemDeleteDialog = ItemDeleteDialog;
-exports.ItemEditDialog = ItemEditDialog;
-exports.Menu = Menu;
 exports.NavigateButton = NavigateButton;
 exports.OrderCell = OrderCell;
 exports.PageContainer = PageContainer;