@compill/admin 1.0.108 → 1.0.110

package/dist/index.cjs

@@ -0,0 +1,2115 @@
+'use strict';
+
+var jsxRuntime = require('@soperio/jsx-runtime');
+var api = require('@compill/api');
+var components = require('@compill/components');
+var js = require('@mdi/js');
+var ui = require('@valerya/ui');
+var Link = require('next/link');
+var reactRouterDom = require('react-router-dom');
+var React = require('react');
+var adminApi = require('@compill/admin-api');
+var formik = require('formik');
+var reactToastify = require('react-toastify');
+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 reactDom = require('react-dom');
+var router = require('next/router');
+var table = require('@compill/table');
+var esToolkit = require('es-toolkit');
+var hooks = require('@compill/hooks');
+var env = require('@compill/env');
+var reactTable = require('@tanstack/react-table');
+var reactQuery = require('@tanstack/react-query');
+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 });
+}
+
+function isArray(value) {
+    return Array.isArray(value);
+}
+
+function Breadcrumbs({ breadcrumbs, ...props }) {
+  if (isArray(breadcrumbs)) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { dflex: true, alignItems: "center", trait: "typo.h5", ...props, children: breadcrumbs.map((b, index) => /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbItem, { breadcrumb: b, showSeparator: index > 0 }, index)) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(QueryBreadcrumbs, { queryFn: breadcrumbs.queryFn, queryField: breadcrumbs.queryField, generate: breadcrumbs.generate });
+}
+function QueryBreadcrumbs({ queryFn, queryField, generate, ...props }) {
+  const params = reactRouterDom.useParams();
+  const id = queryField ? params[queryField] : void 0;
+  const { data, isLoading, isError } = api.useApiQuery([""], queryFn, id);
+  if (isLoading || isError) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { dflex: true, alignItems: "center", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(components.Shimmer, { h: "8", w: "24" }),
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Icon, { path: js.mdiCircleSmall, mx: "1" }),
+      /* @__PURE__ */ jsxRuntime.jsx(components.Shimmer, { h: "8", w: "20" })
+    ] });
+  }
+  const breadcrumbs = generate(data);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { dflex: true, alignItems: "center", trait: "typo.h5", ...props, children: breadcrumbs.map((b, index) => /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbItem, { breadcrumb: b, showSeparator: index > 0 }, index)) });
+}
+function BreadcrumbItem({ breadcrumb, showSeparator }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    showSeparator && /* @__PURE__ */ jsxRuntime.jsx(ui.Icon, { path: js.mdiCircleSmall, mx: "1" }),
+    /* @__PURE__ */ jsxRuntime.jsx(Link, { href: `/${breadcrumb.path || "#"}`, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        hover_textDecoration: breadcrumb.path ? "underline" : void 0,
+        cursor: breadcrumb.path ? "pointer" : void 0,
+        children: breadcrumb.label
+      }
+    ) })
+  ] });
+}
+
+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,
+    {
+      title: "Regenerate",
+      disabled: mutation.isLoading,
+      onClick: invalidate,
+      icon: js.mdiDatabaseRefreshOutline,
+      ...props
+    }
+  );
+}
+
+function NavigateButton({ path, ...props }) {
+  const navigate = reactRouterDom.useNavigate();
+  const handleClick = React.useCallback(() => {
+    navigate(path);
+  }, [navigate, path]);
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { type: "submit", scheme: "dark", variant: "glass", corners: "pill", w: "10", h: "10", onClick: handleClick, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Icon, { path: js.mdiPost }) });
+}
+
+function PublishButton({
+  status,
+  queryId,
+  api: api$1,
+  ...props
+}) {
+  const isDraft = status == "draft";
+  const mutation = api.useInvalidateMutation(isDraft ? api$1.publish : api$1.unpublish, api$1.queryKey, queryId, { networkMode: "always" });
+  const publish = React.useCallback(() => {
+    mutation.reset();
+    mutation.mutateAsync(queryId).then(() => reactToastify.toast.success(isDraft ? "Published!" : "Unpublished!")).catch((error) => reactToastify.toast.error(`Error: ${error}`));
+  }, [mutation, queryId]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ButtonBarButton,
+    {
+      disabled: mutation.isLoading,
+      onClick: publish,
+      icon: isDraft ? js.mdiEye : js.mdiEyeOff,
+      ...props,
+      children: isDraft ? "Publish" : "Switch to draft"
+    }
+  );
+}
+
+function UpdateButton({ ...props }) {
+  const { dirty, handleSubmit } = formik.useFormikContext() ?? { dirty: false, handleSubmit: void 0};
+  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" });
+}
+
+function ViewButton({ label, path, icon, ...props }) {
+  const openPage = React.useCallback(() => {
+    window.open(path, "_blank");
+  }, [path]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ButtonBarButton,
+    {
+      onClick: openPage,
+      dflex: true,
+      alignItems: "center",
+      gap: "2",
+      icon: icon || js.mdiOpenInNew,
+      ...props,
+      children: label
+    }
+  );
+}
+
+function OrderCell({ api: api$1, postId, order }) {
+  const mutationDown = api.useInvalidateMutation(api$1.moveDown, api$1.queryKey);
+  const mutationUp = api.useInvalidateMutation(api$1.moveUp, api$1.queryKey);
+  const moveDown = React.useCallback((e) => {
+    e.stopPropagation();
+    mutationDown.mutateAsync(postId).catch((error) => {
+      reactToastify.toast.error(`Error: ${error}`);
+    });
+  }, [mutationDown, postId]);
+  const moveUp = React.useCallback((e) => {
+    e.stopPropagation();
+    mutationUp.mutateAsync(postId).catch((error) => {
+      reactToastify.toast.error(`Error: ${error}`);
+    });
+  }, [mutationUp, postId]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(components.FlexCenter, { placeContent: "start", numericFontVariant: "tabular-nums", children: [
+    order,
+    /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { ms: "3", variant: "borderless", scheme: "dark", onClick: moveUp, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Icon, { path: js.mdiArrowUpBoldBox }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "borderless", scheme: "dark", onClick: moveDown, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Icon, { path: js.mdiArrowDownBoldBox }) })
+  ] });
+}
+
+function PageContainer({ children, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.Container, { center: true, dflex: true, flexCol: true, gap: "8", ...props, children });
+}
+
+function PageMain({ children, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.Tile, { scheme: "light", p: "5", ...props, children });
+}
+
+function PageContentEditor({ name, ...props }) {
+  const extensions = [editor.ImageExtension];
+  return /* @__PURE__ */ jsxRuntime.jsx(PageMain, { h: "min", ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
+    formEditor.FormEditor,
+    {
+      minH: "128",
+      minW: "144",
+      maxW: props.maxW,
+      name,
+      placeHolder: "Write here...",
+      extensions
+    }
+  ) });
+}
+
+function PageQueryStateContainerInner({ queryId, api: api$1, apiFn, loadingStyles, errorStyles, children, ...props }) {
+  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 });
+  if (isError)
+    return /* @__PURE__ */ jsxRuntime.jsx(components.RetryOnError, { p: "0", onClick: invalidate, ...errorStyles });
+  return /* @__PURE__ */ jsxRuntime.jsx(PageContainer, { ...props, children: apiFn == "get" ? children(data) : children(data) });
+}
+const PageQueryStateContainer = React.forwardRef(PageQueryStateContainerInner);
+
+function PageSidebar({ children, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { w: "112", minW: "112", minH: "100%", gap: "8", dflex: true, flexCol: true, ...props, children });
+}
+
+function PageSectionTitle({ children, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { trait: "typo.h6", mb: "5", ...props, children });
+}
+
+function PageSidebarSection({ title, children, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { w: "full", ...props, children: [
+    title && /* @__PURE__ */ jsxRuntime.jsx(PageSectionTitle, { children: title }),
+    children
+  ] });
+}
+
+function PageTitle({ children, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { trait: "typo.h5", ...props, children });
+}
+
+function PageTopBar({ title, breadcrumbs, children, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(components.FlexCenter, { gap: "3", minH: "9", ...props, children: [
+    title && /* @__PURE__ */ jsxRuntime.jsx(PageTitle, { children: title }),
+    breadcrumbs && /* @__PURE__ */ jsxRuntime.jsx(Breadcrumbs, { breadcrumbs }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { flexGrow: true }),
+    children
+  ] });
+}
+const [CP, usePageTabbedTopBarContext] = react.createContext();
+function PageTabbedTopBarProvider({ children }) {
+  const [containerEl, setContainerEl] = React.useState(null);
+  React.createRef();
+  return /* @__PURE__ */ jsxRuntime.jsx(CP, { value: { containerEl, setContainerEl }, children });
+}
+function PageTabbedTopBar({ title, breadcrumbs, children, ...props }) {
+  const ref = React.createRef();
+  const { setContainerEl } = usePageTabbedTopBarContext();
+  const [isSet, setIsSet] = React.useState(false);
+  React.useEffect(() => {
+    if (!isSet && ref.current) {
+      setContainerEl(ref.current);
+      setIsSet(true);
+    }
+    return () => setContainerEl(null);
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsx(components.FlexCenter, { gap: "3", minH: "9", ...props, children: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    title && /* @__PURE__ */ jsxRuntime.jsx(PageTitle, { children: title }),
+    breadcrumbs && /* @__PURE__ */ jsxRuntime.jsx(Breadcrumbs, { breadcrumbs }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { flexGrow: true }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { ref, dflex: true, flexRow: true, gap: "3" }),
+    children
+  ] }) });
+}
+function PageTopBarToolbar({ trackingRef, children }) {
+  const { containerEl } = usePageTabbedTopBarContext();
+  const [visible, setVisible] = React.useState(false);
+  const portal = React.useMemo(() => {
+    const node = containerEl;
+    return node;
+  }, [containerEl]);
+  const host = containerEl ?? (typeof window !== "undefined" ? document.body : void 0);
+  React.useLayoutEffect(() => {
+    if (!portal || !host)
+      return;
+    try {
+      if (visible)
+        host.appendChild(portal);
+      else
+        host.removeChild(portal);
+    } catch (e) {
+    }
+    return () => {
+      try {
+        host.removeChild(portal);
+      } catch (e) {
+      }
+    };
+  }, [visible, portal, host]);
+  const callback = React.useCallback((entries) => {
+    setVisible(entries[0].isVisible);
+  }, [children]);
+  React.useEffect(() => {
+    const opts = {
+      root: null,
+      rootMargin: "0px",
+      threshold: 0,
+      /* required options*/
+      trackVisibility: true,
+      delay: 100
+    };
+    const observerScroll = new IntersectionObserver(callback, opts);
+    if (trackingRef)
+      observerScroll.observe(trackingRef);
+    return () => observerScroll.disconnect();
+  }, [trackingRef, callback, children]);
+  if (host && portal)
+    return reactDom.createPortal(children, portal);
+  return null;
+}
+
+function ScreenTopBar({ tabbed, breadcrumbs, api, item, isLoading, buttonBar, trackingRef }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    tabbed && /* @__PURE__ */ jsxRuntime.jsx(PageTopBarToolbar, { trackingRef, children: /* @__PURE__ */ jsxRuntime.jsx(Buttons$1, { api, item, isLoading, buttonBar }) }),
+    !tabbed && /* @__PURE__ */ jsxRuntime.jsx(PageTopBar, { breadcrumbs, children: /* @__PURE__ */ jsxRuntime.jsx(Buttons$1, { api, item, isLoading, buttonBar }) })
+  ] });
+}
+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: [
+      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: [
+      api instanceof adminApi.API && /* @__PURE__ */ jsxRuntime.jsx(PublishButton, { api, queryId: item.id, status: item.status, disabled: isLoading }),
+      /* @__PURE__ */ jsxRuntime.jsx(UpdateButton, { disabled: isLoading })
+    ] })
+  ] });
+}
+
+function useQueryField(queryField, useNextRouter) {
+  if (useNextRouter) {
+    const router$1 = router.useRouter();
+    return router$1.query[queryField];
+  }
+  const { [queryField]: id } = reactRouterDom.useParams();
+  return id;
+}
+function DetailsView({ queryField, api, useNextRouter, processInput, screen, tabbed, ...props }) {
+  const id = useQueryField(queryField, useNextRouter);
+  const ref = React.useRef(null);
+  return /* @__PURE__ */ jsxRuntime.jsx(PageQueryStateContainer, { api, apiFn: "get", queryId: id, ref, p: "5", ...props, children: (item) => /* @__PURE__ */ jsxRuntime.jsx(Internal, { item, screen, api, tabbed, processInput, containerRef: ref }) });
+}
+function Internal({ item, screen, api: api$1, processInput, tabbed, containerRef }) {
+  const pScreen = react.runIfFn(screen, item);
+  const { breadcrumbs, schema, initialValues, header, sections, buttonBar, type, invalidateParentQueryKey, invalidatePage } = pScreen;
+  const mutation = api.useInvalidateParentMutation(api$1.update, invalidateParentQueryKey ?? api$1.queryKey, { networkMode: "always" });
+  const invalidatePageFn = adminApi.useInvalidatePage(invalidatePage || "");
+  const save = api.useMutate(mutation, {
+    processInput,
+    successMsg: (item2, values) => `${item2.title || item2.name} updated.`,
+    errorMsg: (error, item2) => `Error updating ${item2.title || item2.name}: ${error}`,
+    onSuccess: () => {
+      if (invalidatePage)
+        invalidatePageFn();
+    }
+  });
+  let editorMaxW = void 0;
+  if (!type || type == "post")
+    editorMaxW = "calc(1280px - 28rem)";
+  else if (type == "section")
+    editorMaxW = "calc(1280px - 22rem)";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    form.FormProvider,
+    {
+      initialValues: react.runIfFn(initialValues, item),
+      validationSchema: schema,
+      onSubmit: save,
+      enableReinitialize: true,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ScreenTopBar,
+          {
+            tabbed,
+            api: api$1,
+            breadcrumbs,
+            buttonBar,
+            item,
+            isLoading: mutation.isLoading,
+            trackingRef: containerRef?.current
+          }
+        ),
+        type == "form" && sections?.map((section, index) => /* @__PURE__ */ jsxRuntime.jsx(Section, { section, item }, index)),
+        (pScreen.type == "post" || pScreen.type == "section") && /* @__PURE__ */ jsxRuntime.jsx("div", { p: "5", bgColor: "slate-100", rounded: "lg", children: /* @__PURE__ */ jsxRuntime.jsxs(PageContainer, { w: editorMaxW ? "auto" : "full", size: "x2", id: "pagecontainer", children: [
+          header,
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { dflex: true, gap: "5", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { dflex: true, flexCol: true, gap: "8", flexGrow: true, children: [
+              pScreen.editor?.type != "textarea" && // TODO Find a way to make this editor shrink in width when resizing the window...
+              /* @__PURE__ */ jsxRuntime.jsx(PageContentEditor, { name: "content", maxW: editorMaxW, minW: "144", shadow: true, rounded: "lg" }),
+              pScreen.editor?.type == "textarea" && /* @__PURE__ */ jsxRuntime.jsx(
+                form.TextArea,
+                {
+                  name: pScreen.editor?.name,
+                  maxW: editorMaxW,
+                  minW: editorMaxW,
+                  w: editorMaxW,
+                  minH: "128",
+                  rows: 25,
+                  bgColor: "white",
+                  border: "0",
+                  shadow: true,
+                  p: "5",
+                  textColor: "slate-800"
+                }
+              ),
+              pScreen.editorFooter
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(PageSidebar, { children: sections?.map((section, index) => /* @__PURE__ */ jsxRuntime.jsx(Section, { section, item, cardStyle: true }, index)) })
+          ] })
+        ] }) })
+      ]
+    }
+  );
+}
+function Section({ section, item, cardStyle }) {
+  if (section.type === "section") {
+    const style = cardStyle ? {
+      bgColor: "white",
+      rounded: "lg",
+      p: "5",
+      textSize: "sm",
+      shadow: true
+    } : {};
+    return /* @__PURE__ */ jsxRuntime.jsx(PageSidebarSection, { title: section.title, ...style, children: /* @__PURE__ */ jsxRuntime.jsx(form.FormRenderer, { form: react.runIfFn(section.form, item) }) });
+  }
+  if (section.type === "custom")
+    return react.runIfFn(section.component, item);
+  return null;
+}
+
+function useApi(api, queryField) {
+  const params = reactRouterDom.useParams();
+  if (queryField === void 0)
+    return { id: void 0, api };
+  const { [queryField]: id } = params;
+  return { id, api: react.runIfFn(api, id) };
+}
+function QueryWrapper({
+  api: api$1,
+  queryField,
+  fn,
+  transformFn,
+  config,
+  tabbed,
+  ...props
+}) {
+  const { id, api: mApi } = useApi(api$1, queryField);
+  const { data } = api.useApiQuery(mApi.queryKey, fn === "get" || fn === "getTransformed" ? mApi.get : mApi.getAll, react.isFunction(api$1) ? void 0 : id);
+  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]);
+  if (!data)
+    return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(ScreenRenderer, { config: config(transformedData), tabbed, ...props });
+}
+
+function TabbedView({ queryField, api, screen, ...props }) {
+  const { [queryField]: id } = reactRouterDom.useParams();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    PageQueryStateContainer,
+    {
+      queryId: id,
+      api,
+      apiFn: "get",
+      p: "5",
+      children: (city) => {
+        const { breadcrumbs, tabs } = react.runIfFn(screen, city);
+        return /* @__PURE__ */ jsxRuntime.jsxs(PageTabbedTopBarProvider, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(PageTabbedTopBar, { breadcrumbs, mb: "-3" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            components.TabContainer,
+            {
+              tabs: tabs.map((tab) => tab.label),
+              saveKey: `tab-${id}`,
+              mt: "-3",
+              mb: "3",
+              id: "fff",
+              children: tabs.map((tab, index) => /* @__PURE__ */ jsxRuntime.jsx(TabView, { tab }, index))
+            }
+          )
+        ] });
+      }
+    }
+  );
+}
+function TabView({ tab }) {
+  if (!tab.component && !tab.config)
+    throw new Error(`Screen config for tabbed view: one of your tabs does not have a component or config declared: ${tab.label}`);
+  if (tab.component)
+    return tab.component();
+  return /* @__PURE__ */ jsxRuntime.jsx(ScreenRenderer, { config: tab.config, tabbed: true, p: "0" });
+}
+
+const [provider$1, useContext$1] = react.createContext();
+function getColId(column) {
+  return column.accessorKey ?? column.id;
+}
+function TableContainerContextProvider({ initialVisibleColumns, columns, children }) {
+  const [showFilters, setShowFilters] = React.useState(false);
+  const [showMassActions, setShowMassActions] = React.useState(false);
+  const [visibleColumnIds, setVisibleColumnIds] = React.useState(initialVisibleColumns ?? columns?.map((col) => getColId(col)) ?? []);
+  const filteredColumns = columns?.filter((col) => visibleColumnIds.includes(getColId(col))) ?? [];
+  const toggleColumnVisibility = React.useCallback((id) => {
+    const index = visibleColumnIds.indexOf(id);
+    if (index > -1) {
+      const newIds = visibleColumnIds.concat();
+      newIds.splice(index, 1);
+      setVisibleColumnIds(newIds);
+    } else {
+      setVisibleColumnIds(visibleColumnIds.concat(id));
+    }
+  }, [visibleColumnIds, setVisibleColumnIds]);
+  const isColumnVisible = React.useCallback((id) => {
+    return visibleColumnIds.includes(id);
+  }, [visibleColumnIds]);
+  const Provider = provider$1;
+  const value = {
+    showFilters,
+    setShowFilters,
+    showMassActions,
+    setShowMassActions,
+    columns: columns ?? [],
+    filteredColumns,
+    toggleColumnVisibility,
+    isColumnVisible
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(Provider, { value, children });
+}
+
+function TableContainer({ initialPageSize, initialVisibleColumns, columns, filtersMethod = "reactRouter", children, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { w: "full", dflex: true, flexCol: true, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(table.TableContextProvider, { initialPageSize, filtersMethod, children: /* @__PURE__ */ jsxRuntime.jsx(TableContainerContextProvider, { columns, initialVisibleColumns, children }) }) });
+}
+
+function TableCreateButton({ icon, children, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(ButtonBarDialogButton, { ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(ui.Icon, { path: icon ?? js.mdiPlusThick }),
+    children
+  ] });
+}
+
+function TableFilterButton({ ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Popover, { side: "bottom-end", modal: true, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { scheme: "dark", size: "sm", aspectRatio: "square", variant: "borderless", corners: "square", ...props, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Icon, { path: js.mdiFilter }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { bgColor: "white", rounded: true, shadow: true, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { py: "3", hover_bgColor: "#ff0000", px: "5", hover_textColor: "white", children: "First Item" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { py: "3", hover_bgColor: "#ff0000", px: "5", hover_textColor: "white", children: "Second Item" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { py: "3", hover_bgColor: "#ff0000", px: "5", hover_textColor: "white", children: "Third Item" })
+    ] })
+  ] });
+}
+
+function TableTopBar({ title, breadcrumbs, children, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      dflex: true,
+      flexRow: true,
+      alignItems: "center",
+      gap: "3",
+      p: "8",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          title && /* @__PURE__ */ jsxRuntime.jsx("h2", { textSize: "x2", fontWeight: "600", textColor: "#3f4254", textTransform: "capitalize", children: title }),
+          breadcrumbs && /* @__PURE__ */ jsxRuntime.jsx(Breadcrumbs, { breadcrumbs })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { flexGrow: true, children: "\xA0" }),
+        children
+      ]
+    }
+  );
+}
+
+function TableFilters({ form: form$1, initialValues, schema, processInput }) {
+  const { showFilters } = useContext$1();
+  const { getFilters, setFilters } = table.useTableContext();
+  const handleSubmit = React.useCallback((values, actions) => {
+    const params = processInput?.(values) ?? values;
+    if (!esToolkit.isEqual(params, getFilters()))
+      setFilters(params);
+    actions.setSubmitting(false);
+  }, [setFilters, processInput]);
+  const handleReset = React.useCallback((resetForm) => {
+    setFilters(initialValues);
+    resetForm();
+  }, [setFilters, initialValues]);
+  React.useEffect(() => setFilters(initialValues), []);
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.Collapse, { in: showFilters, style: { overflow: showFilters ? "initial" : "hidden" }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { p: "8", borderT: "px", borderB: "px", borderColor: "slate-100", children: /* @__PURE__ */ jsxRuntime.jsx(
+    form.FormProvider,
+    {
+      initialValues: form.mergeInitialFormValues(getFilters(), initialValues),
+      onSubmit: handleSubmit,
+      validationSchema: schema,
+      enableReinitialize: true,
+      children: (props) => /* @__PURE__ */ jsxRuntime.jsxs("div", { dflex: true, gap: "3", placeContent: "start", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(form.FormRenderer, { flexRow: true, w: "auto", form: form$1 }),
+        /* @__PURE__ */ jsxRuntime.jsx(Buttons, { handleReset: () => handleReset(props.resetForm) })
+      ] })
+    }
+  ) }) });
+}
+function Buttons({ handleReset }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { dflex: true, gap: "3", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { dflex: true, flexCol: true, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(form.FieldLabel, { name: "", label: "\xA0" }),
+      /* @__PURE__ */ jsxRuntime.jsx(form.SubmitButton, { children: "Filter" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { dflex: true, flexCol: true, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(form.FieldLabel, { name: "", label: "\xA0" }),
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { scheme: "neutral", onClick: handleReset, children: "Reset" })
+    ] })
+  ] });
+}
+
+function ActionButton$1({
+  label,
+  buttonProps,
+  icon,
+  queryKey,
+  queryFn,
+  successMsg,
+  errorMsg,
+  invalidateParent
+}) {
+  const mutation = invalidateParent ? api.useInvalidateParentMutation(queryFn, queryKey) : api.useApiMutation(queryFn, queryKey);
+  const mutate = api.useMutate(
+    mutation,
+    {
+      successMsg,
+      errorMsg
+    }
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    ui.Button,
+    {
+      display: "flex",
+      alignItems: "center",
+      gap: "3",
+      ...buttonProps,
+      onClick: mutate,
+      disabled: mutation.isLoading,
+      children: [
+        icon && /* @__PURE__ */ jsxRuntime.jsx(ui.Icon, { path: icon }),
+        label
+      ]
+    }
+  );
+}
+
+function TableMassActions({ actions }) {
+  const { ids } = table.useTableContext();
+  const showMassActions = ids && ids.length > 0;
+  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 });
+  if (config.type === "query")
+    return /* @__PURE__ */ jsxRuntime.jsx(QueryWrapperDialog, { ...props, queryId, invalidateQueryKey, onClose });
+  if (config.type === "multiQuery")
+    return /* @__PURE__ */ jsxRuntime.jsx(MultiQueryWrapperDialog, { ...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, {})
+      ]
+    }
+  );
+}
+
+const [provider, useContext] = react.createContext();
+function TableViewProvider({ editView, deleteItem, queryKey, children }) {
+  const openLink = hooks.useOpenLink();
+  const navigate = reactRouterDom.useNavigate();
+  const [dialog, setDialog] = React.useState(null);
+  const onCloseDialog = React.useCallback(() => setDialog(null), [setDialog]);
+  const onAction = React.useCallback((action, item) => {
+    switch (action.type) {
+      case "view": {
+        navigate(react.runIfFn(action.path, item));
+        break;
+      }
+      case "link": {
+        openLink(`${env.AppEnv.websiteUrl()}/${react.runIfFn(action.path, item)}`);
+        break;
+      }
+      case "edit": {
+        const editConfig = react.runIfFn(editView, item);
+        if (editConfig) {
+          if (editConfig.type == "customDialog") {
+            setDialog(editConfig.render({ show: true, onClose: onCloseDialog }));
+          } else {
+            setDialog(
+              /* @__PURE__ */ jsxRuntime.jsx(
+                DialogRenderer,
+                {
+                  onClose: onCloseDialog,
+                  config: editConfig,
+                  queryId: item.id,
+                  invalidateQueryKey: queryKey
+                }
+              )
+            );
+          }
+        }
+        break;
+      }
+      case "delete": {
+        const deleteConfig = react.runIfFn(deleteItem, item);
+        setDialog(
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ItemDeleteDialog,
+            {
+              show: true,
+              onClose: onCloseDialog,
+              queryId: item.id,
+              invalidateQueryKey: queryKey,
+              msg: item.msg,
+              ...deleteConfig,
+              itemLabel: react.runIfFn(deleteConfig.itemLabel, item)
+            }
+          )
+        );
+        break;
+      }
+    }
+  }, [navigate, editView, deleteItem]);
+  const Provider = provider;
+  const value = {
+    dialog,
+    onAction
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(Provider, { value, children });
+}
+
+function TableRowPublishPostButton$1({ id, api: api$1, status, invalidateQueryKey, ...props }) {
+  const isDraft = status == "draft";
+  const mutation = api.useInvalidateParentMutation(isDraft ? api$1.publish : api$1.unpublish, invalidateQueryKey ?? api$1.queryKey, { networkMode: "always" });
+  const publish = React.useCallback((event) => {
+    event?.preventDefault();
+    event?.stopPropagation();
+    mutation.reset();
+    mutation.mutateAsync(id).then(() => reactToastify.toast.success(isDraft ? "Published!" : "Unpublished!")).catch((error) => reactToastify.toast.error(`Error: ${error}`));
+  }, [mutation, id]);
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "borderless", corners: "square", scheme: "dark", onClick: publish, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Icon, { path: isDraft ? js.mdiPublish : js.mdiPublishOff, size: "sm" }) });
+}
+
+function TableRowActionButton({ icon, children, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    ui.Button,
+    {
+      dflex: true,
+      alignContent: "center",
+      placeContent: "center",
+      py: "2.5",
+      px: "3",
+      h: "full",
+      size: "lg",
+      variant: "borderless",
+      corners: "square",
+      gap: "2",
+      ...props,
+      children: [
+        icon && /* @__PURE__ */ jsxRuntime.jsx(ui.Icon, { path: icon, size: "sm" }),
+        children
+      ]
+    }
+  );
+}
+
+function TableRowActionsView({ row, onAction, rowActions, api, queryKey }) {
+  const item = row.original;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { dflex: true, w: "full", alignItems: "stretch", placeContent: "end", h: "full", children: react.runIfFn(rowActions, item)?.map(
+    (action, index) => /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
+      action.type === "publish" && /* @__PURE__ */ jsxRuntime.jsx(TableRowPublishPostButton$1, { id: item.id, api: action.api ?? api, status: item.status, invalidateQueryKey: queryKey }),
+      action.type == "custom" && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: action.component(item, queryKey, action.icon, action.label) }),
+      !["publish", "custom"].includes(action.type) && /* @__PURE__ */ jsxRuntime.jsx(ActionButton, { onClick: () => onAction(action, item), scheme: schemes$1[action.type], children: /* @__PURE__ */ jsxRuntime.jsx(ui.Icon, { path: icons[action.type], size: "sm" }) })
+    ] }, index)
+  ) });
+}
+function ActionButton({ onClick, ...props }) {
+  const handleClick = React.useCallback((event) => {
+    event?.preventDefault();
+    event?.stopPropagation();
+    onClick?.(event);
+  }, [onClick]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    TableRowActionButton,
+    {
+      onClick: handleClick,
+      ...props
+    }
+  );
+}
+const icons = {
+  "link": js.mdiOpenInNew,
+  "view": js.mdiEye,
+  "edit": js.mdiPencil,
+  "delete": js.mdiDelete,
+  "publish": js.mdiDelete,
+  "custom": ""
+};
+const schemes$1 = {
+  "link": "dark",
+  "view": "dark",
+  "edit": "dark",
+  "delete": "dark",
+  "publish": "dark",
+  "custom": "dark"
+};
+
+function useTableProps(api, table, rowActions, queryParams) {
+  const navigate = reactRouterDom.useNavigate();
+  const nextRouter = router.useRouter();
+  const openLink = hooks.useOpenLink();
+  const { onAction } = useContext();
+  const { onRowClick, columns: c, ...props } = table;
+  const onRowClickHandler = React.useCallback((item) => {
+    const config = react.runIfFn(onRowClick, item);
+    if (config) {
+      switch (config.type) {
+        case "navigate": {
+          navigate(react.runIfFn(config.path, item) ?? "");
+          break;
+        }
+        case "nextpush": {
+          nextRouter.push(react.runIfFn(config.path, item));
+          break;
+        }
+        case "link": {
+          openLink(`${env.AppEnv.websiteUrl()}/${react.runIfFn(config.path, item)}`);
+          break;
+        }
+      }
+    }
+  }, [navigate, onRowClick]);
+  const columns = React.useMemo(() => {
+    const columns2 = table.columns.concat([]);
+    if (rowActions) {
+      columns2.push(
+        reactTable.createColumnHelper().display(
+          {
+            id: "actions",
+            header: "Actions",
+            cell: (props2) => /* @__PURE__ */ jsxRuntime.jsx(TableRowActionsView, { row: props2.row, onAction, rowActions, api, queryKey: api.queryKey })
+          }
+        )
+      );
+    }
+    return columns2;
+  }, [table, onAction, rowActions, api]);
+  const tableProps = { ...props };
+  tableProps.columns = columns;
+  tableProps.onRowClick = onRowClickHandler;
+  tableProps.queryKey = api.queryKey;
+  tableProps.queryFilters = queryParams;
+  tableProps.queryFn = api.search;
+  return tableProps;
+}
+
+function useId(queryField) {
+  const params = reactRouterDom.useParams();
+  if (queryField === void 0)
+    return void 0;
+  const { [queryField]: id } = params;
+  return id;
+}
+function TableView({ queryField, title, subtitle, screen, ...props }) {
+  const id = useId(queryField);
+  const _screen = react.runIfFn(screen, id);
+  return /* @__PURE__ */ jsxRuntime.jsx(PageContainer, { bgColor: "white", ...props, children: /* @__PURE__ */ jsxRuntime.jsx(TableContainer, { columns: _screen.table.columns, initialVisibleColumns: _screen.table.initialVisibleColumns, filtersMethod: _screen.table.filtersMethod, children: /* @__PURE__ */ jsxRuntime.jsx(TT, { id, title, subtitle, screen: _screen }) }) });
+}
+function TT({ id, title, subtitle, screen }) {
+  const { setRowSelection } = table.useTableContext();
+  const { api, table: table$1, filters, massActions, buttonBar, rowActions, createView, editView, deleteItem, breadcrumbs } = screen;
+  const tableApi = react.runIfFn(api, id ?? "");
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(TableTopBar, { title, breadcrumbs, children: /* @__PURE__ */ jsxRuntime.jsx(TableButtonBar, { buttonBar, createView, editView, api: tableApi, queryKey: tableApi.queryKey, children: filters && /* @__PURE__ */ jsxRuntime.jsx(TableFilterButton, {}) }) }),
+    filters && /* @__PURE__ */ jsxRuntime.jsx(
+      TableFilters,
+      {
+        form: filters.form,
+        initialValues: filters.initialValues,
+        schema: filters.schema,
+        processInput: filters.processInput
+      }
+    ),
+    massActions && /* @__PURE__ */ jsxRuntime.jsx(TableMassActions, { actions: massActions.items }),
+    /* @__PURE__ */ jsxRuntime.jsxs(TableViewProvider, { queryKey: tableApi.queryKey, editView, deleteItem, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(TableWrapper, { table: { ...table$1, onSelectionChange: setRowSelection }, rowActions, api: tableApi, subtitle, queryParams: screen.queryParams }),
+      /* @__PURE__ */ jsxRuntime.jsx(TableDialogManager, {})
+    ] })
+  ] });
+}
+function TableButtonBar({ buttonBar, queryKey, createView, editView, api, children }) {
+  const createDialogFn = React.useCallback((data) => {
+    return (onClose) => {
+      const view = react.runIfFn(createView, data) ?? react.runIfFn(editView, null);
+      if (view.type == "customDialog")
+        return view.render({ show: true, onClose });
+      else
+        return /* @__PURE__ */ jsxRuntime.jsx(DialogRenderer, { config: view, onClose, invalidateQueryKey: api.queryKey });
+    };
+  }, [createView, editView, api]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(ButtonBar, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(RefreshButton, { queryKey }),
+    buttonBar && buttonBar.map(
+      (button, index) => /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
+        button.type === "create" && editView && /* @__PURE__ */ jsxRuntime.jsx(
+          TableCreateButton,
+          {
+            buildDialog: createDialogFn(button.data),
+            icon: button.icon,
+            children: button.label
+          }
+        ),
+        button.type === "invalidate" && /* @__PURE__ */ jsxRuntime.jsx(InvalidateButton, { pathOrPermalink: button.pathOrPermalink }),
+        button.type === "custom" && button.render()
+      ] }, index)
+    ),
+    children
+  ] });
+}
+function TableWrapper({ table: table$1, subtitle, rowActions, api, queryParams }) {
+  const tableProps = useTableProps(api, table$1, rowActions, queryParams);
+  const _subtitle = React.useMemo(() => {
+    if (!subtitle)
+      return void 0;
+    return (data) => {
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { textSize: "lg", textColor: "#475569", fontWeight: "600", children: react.isFunction(subtitle) ? subtitle(data) : subtitle });
+    };
+  }, [subtitle]);
+  return /* @__PURE__ */ jsxRuntime.jsx(table.Table, { ...tableProps, p: "8", title: _subtitle });
+}
+function TableDialogManager() {
+  const { dialog } = useContext();
+  return dialog;
+}
+
+function useQueries(queries) {
+  const params = reactRouterDom.useParams();
+  const { data, isFetching, isError } = api.useApiQueries(queries.map((q) => {
+    if (!q.queryField) {
+      const api2 = react.runIfFn(q.api);
+      return {
+        queryKey: api2.queryKey,
+        queryFn: q.fn == "get" ? api2.get : api2.getAll,
+        queryParam: q.params
+      };
+    }
+    const id = params[q.queryField];
+    const api = react.runIfFn(q.api, id);
+    return {
+      queryKey: api.queryKey,
+      queryFn: q.fn == "get" ? api.get : api.getAll,
+      queryParam: q.fn == "getAll" ? q.params : react.isFunction(q.api) ? void 0 : id
+    };
+  }));
+  let transformedData = void 0;
+  if (!isFetching && !isError) {
+    transformedData = data?.map((d, index) => queries[index].transformFn ? queries[index].transformFn?.(d) : d);
+  }
+  return { data: transformedData, isFetching, isError };
+}
+function useInvalidate(queries) {
+  const queryClient = reactQuery.useQueryClient();
+  const params = reactRouterDom.useParams();
+  const invalidate = React.useCallback(
+    () => {
+      const queryKeys = [];
+      queries.forEach((q) => {
+        if (!q.queryField || !react.isFunction(q.api)) {
+          queryKeys.push(q.api.queryKey);
+        } else {
+          const id = params[q.queryField];
+          const api = react.runIfFn(q.api, id);
+          queryKeys.push(api.queryKey);
+        }
+      });
+      queryClient.invalidateQueries({ predicate: (query) => queryKeys.includes(query.queryKey) });
+    },
+    [queries, queryClient, params]
+  );
+  return invalidate;
+}
+function MultiQueryWrapper({
+  queries,
+  config,
+  tabbed,
+  ...props
+}) {
+  const { data, isFetching, isError } = useQueries(queries);
+  const invalidate = useInvalidate(queries);
+  if (isFetching)
+    return /* @__PURE__ */ jsxRuntime.jsx(components.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(ScreenRenderer, { config: config(...data), tabbed, ...props });
+}
+
+function ScreenRenderer({ config, tabbed, ...props }) {
+  if (config.type === "table")
+    return /* @__PURE__ */ jsxRuntime.jsx(TableView, { ...config, ...props });
+  if (config.type === "tabbed")
+    return /* @__PURE__ */ jsxRuntime.jsx(TabbedView, { ...config, ...props });
+  if (config.type === "details")
+    return /* @__PURE__ */ jsxRuntime.jsx(DetailsView, { ...config, tabbed, ...props });
+  if (config.type === "query")
+    return /* @__PURE__ */ jsxRuntime.jsx(QueryWrapper, { ...config, tabbed, ...props });
+  if (config.type === "multiQuery")
+    return /* @__PURE__ */ jsxRuntime.jsx(MultiQueryWrapper, { ...config, tabbed, ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {});
+}
+
+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.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",
+    {
+      dflex: true,
+      flexCol: true,
+      w: "full",
+      md_w: "64",
+      minH: "screen",
+      p: "0",
+      textColor: darkMode ? "white" : "slate-800",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          components.FlexCenter,
+          {
+            placeContent: "start",
+            p: "4",
+            font: "title",
+            gap: "3",
+            borderB: "px",
+            borderBColor: "slate-900",
+            borderOpacity: "5",
+            children: [
+              logo ?? /* @__PURE__ */ jsxRuntime.jsx(Logo, { width: 40, height: 40, darkMode }),
+              /* @__PURE__ */ jsxRuntime.jsx("h1", { textSize: "md", children: title || env.AppEnv.appName() })
+            ]
+          }
+        ),
+        /* @__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 }) })
+      ]
+    }
+  );
+}
+function Logo({ width, height, darkMode, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
+    Image,
+    {
+      src: `/logo_${darkMode ? "light" : "dark"}.png`,
+      alt: env.AppEnv.appName() || "",
+      width,
+      height,
+      priority: true,
+      unoptimized: true
+    }
+  ) });
+}
+
+function AdminLayout({ color, darkMode, logo, title, menuConfig, userMenuConfig, userSettingsPath, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      w: "full",
+      h: "screen",
+      dflex: true,
+      flexRow: true,
+      bgColor: `${color}-${darkMode ? "900" : "100"}`,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          LeftPanel,
+          {
+            color,
+            darkMode,
+            logo,
+            title,
+            menuConfig,
+            userMenuConfig,
+            userSettingsPath
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { w: "screen", py: "2", pe: "2", children: /* @__PURE__ */ jsxRuntime.jsx(Content, { bgColor: "white", rounded: "lg", shadow: true }) })
+      ]
+    }
+  );
+}
+function LeftPanel({ color, darkMode, logo, title, menuConfig, userMenuConfig, userSettingsPath }) {
+  const [isOpen, __, toggle] = hooks.useBoolean(true);
+  reactHotkeysHook.useHotkeys("ctrl+t", () => toggle(), [toggle]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ms: isOpen ? "0" : "-14.5rem",
+      transition: "all",
+      duration: "500",
+      transform: true,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Sidebar,
+          {
+            flexShrink: "0",
+            color,
+            darkMode,
+            logo,
+            title,
+            menuConfig,
+            userMenuConfig,
+            userSettingsPath
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ui.IconButton,
+          {
+            icon: js.mdiArrowLeft,
+            transition: "all",
+            duration: "500",
+            transform: true,
+            rotate: isOpen ? "0" : "180",
+            position: "absolute",
+            bottom: "14",
+            end: "-5",
+            size: "lg",
+            corners: "pill",
+            onClick: toggle,
+            z: "100"
+          }
+        )
+      ]
+    }
+  );
+}
+
+const defaultErrorMsg = "Oops, something went wrong...";
+function AttachDialog({
+  queryId,
+  queryKey,
+  queryFetchFn,
+  queryFetchAllKey,
+  queryFetchAllFn,
+  querySaveFn,
+  matchKey,
+  size = "lg",
+  show,
+  onClose,
+  itemLabel,
+  onSuccess,
+  onFetchError,
+  fetchErrorMsg = defaultErrorMsg,
+  onSaveError,
+  saveErrorMsg = defaultErrorMsg,
+  invalidateQueriesOnSuccess = true,
+  retryText = "Retry",
+  cancelLabel = "Cancel",
+  saveLabel,
+  formikProps,
+  getItemName,
+  ...props
+}) {
+  const queryClient = reactQuery.useQueryClient();
+  const { data: attached, isInitialLoading: fetchLoading, isError: fetchError, refetch, error } = api.useApiQuery(queryKey, queryFetchFn);
+  const { data, isInitialLoading: fetchAllLoading, isError: fetchAllError, refetch: refetchAll, error: errorAll } = api.useApiQuery(queryFetchAllKey, queryFetchAllFn);
+  const [selectedResources, setSelectedResources] = React.useState([]);
+  const isLoading = fetchLoading || fetchAllLoading;
+  const isError = fetchError || fetchAllError;
+  const mutation = api.useApiMutation(querySaveFn, queryKey, queryId);
+  const handleClick = React.useCallback((event) => {
+    const id = event?.currentTarget.dataset.id ?? "";
+    const arr = selectedResources.concat([]);
+    const i = selectedResources.indexOf(id);
+    if (i != -1)
+      arr.splice(i, 1);
+    else
+      arr.push(id);
+    setSelectedResources(arr);
+  }, [selectedResources, setSelectedResources]);
+  const retry = React.useCallback(() => {
+    if (fetchError)
+      refetch();
+    if (fetchAllError)
+      refetchAll();
+  }, [refetch, refetchAll, fetchError, fetchAllError]);
+  const saveItem = React.useCallback(() => {
+    mutation.reset();
+    mutation.mutateAsync({ resources: selectedResources }).then((response) => {
+      if (onSuccess)
+        onSuccess(response);
+      else
+        reactToastify.toast.success(`${itemLabel} saved`);
+      if (invalidateQueriesOnSuccess)
+        queryClient.invalidateQueries({ queryKey });
+      onClose?.();
+    }).catch((error2) => {
+      console.error("on error", error2);
+      if (onSaveError)
+        onSaveError();
+      else
+        reactToastify.toast.error(`Error adding ${itemLabel}`);
+    });
+  }, [mutation, queryId, onSuccess, queryClient, onSaveError, onClose]);
+  const resources = React.useMemo(() => {
+    let r = [];
+    if (attached && data) {
+      r = [].concat(data);
+      attached.forEach((attachedItem) => r.splice(r.findIndex((item) => item.id == attachedItem[matchKey]), 1));
+      if (getItemName)
+        r = r.map((item) => {
+          return { ...item, name: getItemName(item) };
+        });
+      r = esToolkit.sortBy(r, ["name"]);
+    }
+    return r;
+  }, [attached, data]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    ui.Modal,
+    {
+      size,
+      show,
+      onClose,
+      scheme: "light",
+      transition: true,
+      ...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 && !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,
+            {
+              label: item.name,
+              value: item.id,
+              "data-id": item.id,
+              checked: selectedResources.includes(`${item.id}`),
+              onClick: handleClick
+            },
+            item.id
+          )) }) }),
+          /* @__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: selectedResources.length == 0 || mutation.isLoading,
+                onClick: saveItem,
+                children: saveLabel ? saveLabel : queryId ? "Update" : "Create"
+              }
+            )
+          ] })
+        ] }),
+        mutation.isLoading && /* @__PURE__ */ jsxRuntime.jsx(components.ModalLoadingOverlay, {})
+      ]
+    }
+  );
+}
+function ListItem({ label, value, checked, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      dflex: true,
+      alignItems: "center",
+      hover_bgColor: "slate-100",
+      px: "5",
+      py: "2",
+      cursor: "pointer",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { flexGrow: true, children: label }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Checkbox, { name: `resources.${value}`, value, checked })
+      ]
+    }
+  );
+}
+
+function FormActionDialog({
+  initialValues,
+  itemLabel,
+  queryId = "",
+  queryKey,
+  queryFn,
+  queryOptions,
+  onSuccess,
+  successMsg,
+  showSuccessMsg,
+  onError,
+  errorMsg,
+  showErrorMsg,
+  processInput,
+  invalidateQueriesOnSuccess = true,
+  cancelLabel = "Cancel",
+  saveLabel = "Send",
+  size = "lg",
+  title,
+  form: form$1,
+  show,
+  onClose,
+  formikProps,
+  ...props
+}) {
+  const mutation = invalidateQueriesOnSuccess ? api.useInvalidateParentMutation(queryFn, queryKey, queryOptions) : api.useApiMutation(queryFn, queryKey, queryId, queryOptions);
+  const mutate = api.useMutate(mutation, {
+    onSuccess,
+    successMsg,
+    showSuccessMsg,
+    onError,
+    errorMsg,
+    showErrorMsg,
+    processInput
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    ui.Modal,
+    {
+      size,
+      show,
+      onClose,
+      scheme: "light",
+      transition: true,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Modal.Header, { children: title }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          form.FormProvider,
+          {
+            initialValues: initialValues ?? {},
+            onSubmit: mutate,
+            ...formikProps,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(ui.Modal.Body, { pb: "6", children: [
+                React.isValidElement(form$1) && form$1,
+                Array.isArray(form$1) && /* @__PURE__ */ jsxRuntime.jsx(form.FormRenderer, { form: form$1 })
+              ] }),
+              /* @__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(form.SubmitButton, { disabled: mutation.isLoading, children: saveLabel })
+              ] })
+            ]
+          }
+        ),
+        mutation.isLoading && /* @__PURE__ */ jsxRuntime.jsx(components.ModalLoadingOverlay, {})
+      ]
+    }
+  );
+}
+
+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(ui.Container, { ref, center: true, size: "x2", dflex: true, flexCol: true, gap: "8", ...props, children })
+  ] });
+});
+
+function PageSubSectionTitle({ children, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { trait: "typo.h6", mb: "3", ...props, children });
+}
+
+const labels = {
+  draft: "Draft",
+  published: "Published",
+  pending: "Pending",
+  approved: "Approved",
+  partially_approved: "Partially Approved",
+  rejected: "Rejected"
+};
+const schemes = {
+  draft: "warning",
+  published: "success",
+  pending: "secondary",
+  approved: "success",
+  partially_approved: "warning",
+  rejected: "danger"
+};
+function StatusBadge({ status, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.Badge, { size: "sm", variant: "glass", whiteSpace: "nowrap", rounded: "full", px: "3", scheme: schemes[status], ...props, children: labels[status] });
+}
+
+function TableRowViewButton({ path, ...props }) {
+  const openPage = React.useCallback((event) => {
+    event?.preventDefault();
+    event?.stopPropagation();
+    window.open(`${env.AppEnv.websiteUrl()}/${path}`, "_blank");
+  }, [path]);
+  return /* @__PURE__ */ jsxRuntime.jsx(TableRowActionButton, { icon: js.mdiOpenInNew, onClick: openPage, ...props });
+}
+
+function TableRowNavigateButton({ path, ...props }) {
+  const navigate = reactRouterDom.useNavigate();
+  const handleClick = React.useCallback((event) => {
+    event?.preventDefault();
+    event?.stopPropagation();
+    navigate(`${path}`);
+  }, [navigate, path]);
+  return /* @__PURE__ */ jsxRuntime.jsx(TableRowActionButton, { icon: js.mdiEye, onClick: handleClick, ...props });
+}
+
+function TableRowActionDialogButton({ icon, children, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    DialogButton,
+    {
+      dflex: true,
+      alignContent: "center",
+      placeContent: "center",
+      py: "2.5",
+      px: "3",
+      h: "full",
+      size: "lg",
+      variant: "borderless",
+      corners: "square",
+      gap: "2",
+      ...props,
+      children: [
+        icon && /* @__PURE__ */ jsxRuntime.jsx(ui.Icon, { path: icon, size: "sm" }),
+        children
+      ]
+    }
+  );
+}
+
+function TableRowEditButton({ children, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(TableRowActionDialogButton, { icon: js.mdiPencil, ...props, children });
+}
+
+function TableRowDeleteButton({ children, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(TableRowActionDialogButton, { icon: js.mdiDelete, ...props, children });
+}
+
+function TableRowActionBar({
+  publishId,
+  viewPath,
+  navigatePath,
+  editDialog,
+  deleteDialog,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { dflex: true, spaceX: "1", placeContent: "end", ...props, children: [
+    viewPath && /* @__PURE__ */ jsxRuntime.jsx(TableRowViewButton, { path: viewPath }),
+    navigatePath && /* @__PURE__ */ jsxRuntime.jsx(TableRowNavigateButton, { path: navigatePath }),
+    editDialog && /* @__PURE__ */ jsxRuntime.jsx(TableRowEditButton, { buildDialog: editDialog }),
+    deleteDialog && /* @__PURE__ */ jsxRuntime.jsx(TableRowDeleteButton, { buildDialog: deleteDialog }),
+    children
+  ] });
+}
+
+function TableRowPublishPostButton({ id, api: api$1, status, invalidateQueryKey, ...props }) {
+  const isDraft = status == "draft";
+  const mutation = api.useInvalidateParentMutation(isDraft ? api$1.publish : api$1.unpublish, invalidateQueryKey ?? api$1.queryKey, { networkMode: "always" });
+  const publish = React.useCallback((event) => {
+    event?.preventDefault();
+    event?.stopPropagation();
+    mutation.reset();
+    mutation.mutateAsync(id).then(() => reactToastify.toast.success(isDraft ? "Published!" : "Unpublished!")).catch((error) => reactToastify.toast.error(`Error: ${error}`));
+  }, [mutation, id]);
+  return /* @__PURE__ */ jsxRuntime.jsx(TableRowActionButton, { icon: isDraft ? js.mdiPublish : js.mdiPublishOff, onClick: publish, ...props });
+}
+
+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;
+exports.PageContentEditor = PageContentEditor;
+exports.PageMain = PageMain;
+exports.PageQueryStateContainer = PageQueryStateContainer;
+exports.PageSectionTitle = PageSectionTitle;
+exports.PageSidebar = PageSidebar;
+exports.PageSidebarSection = PageSidebarSection;
+exports.PageStateContainer = PageStateContainer;
+exports.PageSubSectionTitle = PageSubSectionTitle;
+exports.PageTabbedTopBar = PageTabbedTopBar;
+exports.PageTabbedTopBarProvider = PageTabbedTopBarProvider;
+exports.PageTitle = PageTitle;
+exports.PageTopBar = PageTopBar;
+exports.PageTopBarToolbar = PageTopBarToolbar;
+exports.PublishButton = PublishButton;
+exports.ScreenRenderer = ScreenRenderer;
+exports.SectionTitle = SectionTitle;
+exports.StatusBadge = StatusBadge;
+exports.TableContainer = TableContainer;
+exports.TableCreateButton = TableCreateButton;
+exports.TableFilterButton = TableFilterButton;
+exports.TableRowActionBar = TableRowActionBar;
+exports.TableRowActionButton = TableRowActionButton;
+exports.TableRowActionDialogButton = TableRowActionDialogButton;
+exports.TableRowDeleteButton = TableRowDeleteButton;
+exports.TableRowEditButton = TableRowEditButton;
+exports.TableRowNavigateButton = TableRowNavigateButton;
+exports.TableRowPublishPostButton = TableRowPublishPostButton;
+exports.TableRowViewButton = TableRowViewButton;
+exports.TableTopBar = TableTopBar;
+exports.UpdateButton = UpdateButton;
+exports.ViewButton = ViewButton;