@compill/admin 1.0.105 → 1.0.107

package/dist/index.mjs

@@ -0,0 +1,2000 @@
+import { jsxs, jsx, Fragment } from '@soperio/jsx-runtime';
+import { useApiQuery, useInvalidateQuery, useApiMutation, useMutate, useInvalidateMutation, useInvalidateParentMutation, useApiQueries } from '@compill/api';
+import { QueryLoadingState, RetryOnError, Shimmer, FlexCenter, ModalLoadingOverlay, TabContainer } from '@compill/components';
+import { mdiCircleSmall, mdiDatabaseRefreshOutline, mdiPost, mdiEye, mdiEyeOff, mdiCloudUpload, mdiOpenInNew, mdiArrowUpBoldBox, mdiArrowDownBoldBox, mdiPlusThick, mdiFilter, mdiArrowLeft, mdiPencil, mdiDelete, mdiPublish, mdiPublishOff, mdiCog, mdiDotsVertical, mdiLogout, mdiRefresh } from '@mdi/js';
+import { Button, Icon, Container, Tile, Popover, Modal, IconButton, Checkbox, Badge, Avatar, Collapse, Popup } from '@valerya/ui';
+import { isArray } from 'es-toolkit/compat';
+import Link from 'next/link';
+import { useParams, useNavigate, useLocation, useMatch, Link as Link$1, Outlet } from 'react-router-dom';
+import React8 from 'react';
+import { INVALIDATE_API, useInvalidatePage, API } from '@compill/admin-api';
+import { useFormikContext, Formik, Form } from 'formik';
+import { toast } from 'react-toastify';
+import { useHotkeys } from 'react-hotkeys-hook';
+import { FormRenderer, FormProvider, SubmitButton, TextArea, mergeInitialFormValues, FieldLabel } from '@compill/form';
+import { createContext, isFunction, runIfFn } from '@soperio/react';
+import { FormEditor } from '@compill/form-editor';
+import { ImageExtension } from '@compill/editor';
+import { createPortal } from 'react-dom';
+import { useRouter } from 'next/router';
+import { TableContextProvider, useTableContext, Table } from '@compill/table';
+import { sortBy, capitalize, isEqual } from 'es-toolkit';
+import { useBoolean, useOpenLink } from '@compill/hooks';
+import { AppEnv } from '@compill/env';
+import { createColumnHelper } from '@tanstack/react-table';
+import { useQueryClient } from '@tanstack/react-query';
+import Image from 'next/image';
+import { useSessionUser, useSessionLogout } from '@compill/auth';
+
+// src/lib/SectionTitle.tsx
+function SectionTitle({ children, ...props }) {
+  return /* @__PURE__ */ jsx("h2", { textSize: "xl", fontWeight: "600", textColor: "slate-800", ...props, children });
+}
+function Breadcrumbs({ breadcrumbs, ...props }) {
+  if (isArray(breadcrumbs)) {
+    return /* @__PURE__ */ jsx("div", { dflex: true, alignItems: "center", trait: "typo.h5", ...props, children: breadcrumbs.map((b, index) => /* @__PURE__ */ jsx(BreadcrumbItem, { breadcrumb: b, showSeparator: index > 0 }, index)) });
+  }
+  return /* @__PURE__ */ jsx(QueryBreadcrumbs, { queryFn: breadcrumbs.queryFn, queryField: breadcrumbs.queryField, generate: breadcrumbs.generate });
+}
+function QueryBreadcrumbs({ queryFn, queryField, generate, ...props }) {
+  const params = useParams();
+  const id = queryField ? params[queryField] : void 0;
+  const { data, isLoading, isError } = useApiQuery([""], queryFn, id);
+  if (isLoading || isError) {
+    return /* @__PURE__ */ jsxs("div", { dflex: true, alignItems: "center", children: [
+      /* @__PURE__ */ jsx(Shimmer, { h: "8", w: "24" }),
+      /* @__PURE__ */ jsx(Icon, { path: mdiCircleSmall, mx: "1" }),
+      /* @__PURE__ */ jsx(Shimmer, { h: "8", w: "20" })
+    ] });
+  }
+  const breadcrumbs = generate(data);
+  return /* @__PURE__ */ jsx("div", { dflex: true, alignItems: "center", trait: "typo.h5", ...props, children: breadcrumbs.map((b, index) => /* @__PURE__ */ jsx(BreadcrumbItem, { breadcrumb: b, showSeparator: index > 0 }, index)) });
+}
+function BreadcrumbItem({ breadcrumb, showSeparator }) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    showSeparator && /* @__PURE__ */ jsx(Icon, { path: mdiCircleSmall, mx: "1" }),
+    /* @__PURE__ */ jsx(Link, { href: `/${breadcrumb.path || "#"}`, children: /* @__PURE__ */ 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] = React8.useState(false);
+  const onShowDialog = React8.useCallback((event) => {
+    event?.preventDefault();
+    event?.stopPropagation();
+    setShowDialog(true);
+  }, [setShowDialog]);
+  const onCloseDialog = React8.useCallback(() => {
+    setShowDialog(false);
+  }, [setShowDialog]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Button, { onClick: onShowDialog, ...props }),
+    showDialog && buildDialog(onCloseDialog)
+  ] });
+}
+function ButtonBar({ children, ...props }) {
+  return /* @__PURE__ */ jsx("div", { dflex: true, border: "1px", borderColor: "zinc-200", divideX: "1px", divideColor: "zinc-200", rounded: "lg", overflow: "hidden", ...props, children });
+}
+var ButtonBarButton = React8.forwardRef(
+  function({ icon, children, ...props }, ref) {
+    return /* @__PURE__ */ jsxs(
+      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__ */ jsx(Icon, { path: icon }),
+          children
+        ]
+      }
+    );
+  }
+);
+var ButtonBarSubmitButton = React8.forwardRef(
+  function({ useDirty, disabled, icon, children, ...props }, ref) {
+    const { dirty, handleSubmit } = useFormikContext() ?? { dirty: false, handleSubmit: void 0};
+    const onSubmit = React8.useCallback(() => handleSubmit(), [handleSubmit]);
+    return /* @__PURE__ */ jsxs(
+      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__ */ jsx(Icon, { path: icon }),
+          children
+        ]
+      }
+    );
+  }
+);
+function ButtonBarDialogButton({ icon, children, ...props }) {
+  return /* @__PURE__ */ 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__ */ jsx(Icon, { path: icon }),
+        children
+      ]
+    }
+  );
+}
+function InvalidateButton({ pathOrPermalink, ...props }) {
+  const api = INVALIDATE_API.new(pathOrPermalink);
+  const mutation = useApiMutation(api.invalidate, api.queryKey);
+  const invalidate = useMutate(mutation, { successMsg: "Page successfully invalidated" });
+  return /* @__PURE__ */ jsx(
+    ButtonBarButton,
+    {
+      title: "Regenerate",
+      disabled: mutation.isLoading,
+      onClick: invalidate,
+      icon: mdiDatabaseRefreshOutline,
+      ...props
+    }
+  );
+}
+function NavigateButton({ path, ...props }) {
+  const navigate = useNavigate();
+  const handleClick = React8.useCallback(() => {
+    navigate(path);
+  }, [navigate, path]);
+  return /* @__PURE__ */ jsx(Button, { type: "submit", scheme: "dark", variant: "glass", corners: "pill", w: "10", h: "10", onClick: handleClick, ...props, children: /* @__PURE__ */ jsx(Icon, { path: mdiPost }) });
+}
+function PublishButton({
+  status,
+  queryId,
+  api,
+  ...props
+}) {
+  const isDraft = status == "draft";
+  const mutation = useInvalidateMutation(isDraft ? api.publish : api.unpublish, api.queryKey, queryId, { networkMode: "always" });
+  const publish = React8.useCallback(() => {
+    mutation.reset();
+    mutation.mutateAsync(queryId).then(() => toast.success(isDraft ? "Published!" : "Unpublished!")).catch((error) => toast.error(`Error: ${error}`));
+  }, [mutation, queryId]);
+  return /* @__PURE__ */ jsx(
+    ButtonBarButton,
+    {
+      disabled: mutation.isLoading,
+      onClick: publish,
+      icon: isDraft ? mdiEye : mdiEyeOff,
+      ...props,
+      children: isDraft ? "Publish" : "Switch to draft"
+    }
+  );
+}
+function UpdateButton({ ...props }) {
+  const { dirty, handleSubmit } = useFormikContext() ?? { dirty: false, handleSubmit: void 0};
+  useHotkeys("ctrl+s", () => {
+    if (dirty && !props.disabled) handleSubmit();
+  }, { preventDefault: true }, [dirty, props, handleSubmit]);
+  return /* @__PURE__ */ jsx(ButtonBarSubmitButton, { icon: mdiCloudUpload, ...props, children: "Update" });
+}
+function ViewButton({ label, path, icon, ...props }) {
+  const openPage = React8.useCallback(() => {
+    window.open(path, "_blank");
+  }, [path]);
+  return /* @__PURE__ */ jsx(
+    ButtonBarButton,
+    {
+      onClick: openPage,
+      dflex: true,
+      alignItems: "center",
+      gap: "2",
+      icon: icon || mdiOpenInNew,
+      ...props,
+      children: label
+    }
+  );
+}
+function OrderCell({ api, postId, order }) {
+  const mutationDown = useInvalidateMutation(api.moveDown, api.queryKey);
+  const mutationUp = useInvalidateMutation(api.moveUp, api.queryKey);
+  const moveDown = React8.useCallback((e) => {
+    e.stopPropagation();
+    mutationDown.mutateAsync(postId).catch((error) => {
+      toast.error(`Error: ${error}`);
+    });
+  }, [mutationDown, postId]);
+  const moveUp = React8.useCallback((e) => {
+    e.stopPropagation();
+    mutationUp.mutateAsync(postId).catch((error) => {
+      toast.error(`Error: ${error}`);
+    });
+  }, [mutationUp, postId]);
+  return /* @__PURE__ */ jsxs(FlexCenter, { placeContent: "start", numericFontVariant: "tabular-nums", children: [
+    order,
+    /* @__PURE__ */ jsx(Button, { ms: "3", variant: "borderless", scheme: "dark", onClick: moveUp, children: /* @__PURE__ */ jsx(Icon, { path: mdiArrowUpBoldBox }) }),
+    /* @__PURE__ */ jsx(Button, { variant: "borderless", scheme: "dark", onClick: moveDown, children: /* @__PURE__ */ jsx(Icon, { path: mdiArrowDownBoldBox }) })
+  ] });
+}
+function PageContainer({ children, ...props }) {
+  return /* @__PURE__ */ jsx(Container, { center: true, dflex: true, flexCol: true, gap: "8", ...props, children });
+}
+function PageMain({ children, ...props }) {
+  return /* @__PURE__ */ jsx(Tile, { scheme: "light", p: "5", ...props, children });
+}
+function PageContentEditor({ name, ...props }) {
+  const extensions = [ImageExtension];
+  return /* @__PURE__ */ jsx(PageMain, { h: "min", ...props, children: /* @__PURE__ */ jsx(
+    FormEditor,
+    {
+      minH: "128",
+      minW: "144",
+      maxW: props.maxW,
+      name,
+      placeHolder: "Write here...",
+      extensions
+    }
+  ) });
+}
+function PageQueryStateContainerInner({ queryId, api, apiFn, loadingStyles, errorStyles, children, ...props }) {
+  const { data, isLoading, isError } = apiFn == "getAll" ? useApiQuery(api.queryKey, api.getAll, props.apiParams) : useApiQuery(api.queryKey, api.get, queryId);
+  const invalidate = useInvalidateQuery(api.queryKey, queryId);
+  if (isLoading)
+    return /* @__PURE__ */ jsx(QueryLoadingState, { w: "full", h: "100%", ...loadingStyles });
+  if (isError)
+    return /* @__PURE__ */ jsx(RetryOnError, { p: "0", onClick: invalidate, ...errorStyles });
+  return /* @__PURE__ */ jsx(PageContainer, { ...props, children: apiFn == "get" ? children(data) : children(data) });
+}
+var PageQueryStateContainer = React8.forwardRef(PageQueryStateContainerInner);
+function PageSidebar({ children, ...props }) {
+  return /* @__PURE__ */ jsx("div", { w: "112", minW: "112", minH: "100%", gap: "8", dflex: true, flexCol: true, ...props, children });
+}
+function PageSectionTitle({ children, ...props }) {
+  return /* @__PURE__ */ jsx("div", { trait: "typo.h6", mb: "5", ...props, children });
+}
+function PageSidebarSection({ title, children, ...props }) {
+  return /* @__PURE__ */ jsxs("div", { w: "full", ...props, children: [
+    title && /* @__PURE__ */ jsx(PageSectionTitle, { children: title }),
+    children
+  ] });
+}
+function PageTitle({ children, ...props }) {
+  return /* @__PURE__ */ jsx("div", { trait: "typo.h5", ...props, children });
+}
+function PageTopBar({ title, breadcrumbs, children, ...props }) {
+  return /* @__PURE__ */ jsxs(FlexCenter, { gap: "3", minH: "9", ...props, children: [
+    title && /* @__PURE__ */ jsx(PageTitle, { children: title }),
+    breadcrumbs && /* @__PURE__ */ jsx(Breadcrumbs, { breadcrumbs }),
+    /* @__PURE__ */ jsx("div", { flexGrow: true }),
+    children
+  ] });
+}
+var [CP, usePageTabbedTopBarContext] = createContext();
+function PageTabbedTopBarProvider({ children }) {
+  const [containerEl, setContainerEl] = React8.useState(null);
+  React8.createRef();
+  return /* @__PURE__ */ jsx(CP, { value: { containerEl, setContainerEl }, children });
+}
+function PageTabbedTopBar({ title, breadcrumbs, children, ...props }) {
+  const ref = React8.createRef();
+  const { setContainerEl } = usePageTabbedTopBarContext();
+  const [isSet, setIsSet] = React8.useState(false);
+  React8.useEffect(() => {
+    if (!isSet && ref.current) {
+      setContainerEl(ref.current);
+      setIsSet(true);
+    }
+    return () => setContainerEl(null);
+  }, []);
+  return /* @__PURE__ */ jsx(FlexCenter, { gap: "3", minH: "9", ...props, children: /* @__PURE__ */ jsxs(Fragment, { children: [
+    title && /* @__PURE__ */ jsx(PageTitle, { children: title }),
+    breadcrumbs && /* @__PURE__ */ jsx(Breadcrumbs, { breadcrumbs }),
+    /* @__PURE__ */ jsx("div", { flexGrow: true }),
+    /* @__PURE__ */ jsx("div", { ref, dflex: true, flexRow: true, gap: "3" }),
+    children
+  ] }) });
+}
+function PageTopBarToolbar({ trackingRef, children }) {
+  const { containerEl } = usePageTabbedTopBarContext();
+  const [visible, setVisible] = React8.useState(false);
+  const portal = React8.useMemo(() => {
+    const node = containerEl;
+    return node;
+  }, [containerEl]);
+  const host = containerEl ?? (typeof window !== "undefined" ? document.body : void 0);
+  React8.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 = React8.useCallback((entries) => {
+    setVisible(entries[0].isVisible);
+  }, [children]);
+  React8.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 createPortal(children, portal);
+  return null;
+}
+function ScreenTopBar({ tabbed, breadcrumbs, api, item, isLoading, buttonBar, trackingRef }) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    tabbed && /* @__PURE__ */ jsx(PageTopBarToolbar, { trackingRef, children: /* @__PURE__ */ jsx(Buttons, { api, item, isLoading, buttonBar }) }),
+    !tabbed && /* @__PURE__ */ jsx(PageTopBar, { breadcrumbs, children: /* @__PURE__ */ jsx(Buttons, { api, item, isLoading, buttonBar }) })
+  ] });
+}
+function Buttons({ api, item, isLoading, buttonBar }) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    buttonBar && buttonBar.length > 0 && /* @__PURE__ */ jsx(ButtonBar, { children: buttonBar.map((button, index) => /* @__PURE__ */ jsxs(React8.Fragment, { children: [
+      button.type === "link" && /* @__PURE__ */ jsx(ViewButton, { label: button.label, path: button.path, icon: button.icon }),
+      button.type === "invalidate" && /* @__PURE__ */ jsx(InvalidateButton, { pathOrPermalink: button.pathOrPermalink }),
+      button.type == "custom" && button.render(item)
+    ] }, index)) }),
+    /* @__PURE__ */ jsxs(ButtonBar, { children: [
+      api instanceof API && /* @__PURE__ */ jsx(PublishButton, { api, queryId: item.id, status: item.status, disabled: isLoading }),
+      /* @__PURE__ */ jsx(UpdateButton, { disabled: isLoading })
+    ] })
+  ] });
+}
+function useQueryField(queryField, useNextRouter) {
+  if (useNextRouter) {
+    const router = useRouter();
+    return router.query[queryField];
+  }
+  const { [queryField]: id } = useParams();
+  return id;
+}
+function DetailsView({ queryField, api, useNextRouter, processInput, screen, tabbed, ...props }) {
+  const id = useQueryField(queryField, useNextRouter);
+  const ref = React8.useRef(null);
+  return /* @__PURE__ */ jsx(PageQueryStateContainer, { api, apiFn: "get", queryId: id, ref, p: "5", ...props, children: (item) => /* @__PURE__ */ jsx(Internal, { item, screen, api, tabbed, processInput, containerRef: ref }) });
+}
+function Internal({ item, screen, api, processInput, tabbed, containerRef }) {
+  const pScreen = runIfFn(screen, item);
+  const { breadcrumbs, schema, initialValues, header, sections, buttonBar, type, invalidateParentQueryKey, invalidatePage } = pScreen;
+  const mutation = useInvalidateParentMutation(api.update, invalidateParentQueryKey ?? api.queryKey, { networkMode: "always" });
+  const invalidatePageFn = useInvalidatePage(invalidatePage || "");
+  const save = 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__ */ jsxs(
+    FormProvider,
+    {
+      initialValues: runIfFn(initialValues, item),
+      validationSchema: schema,
+      onSubmit: save,
+      enableReinitialize: true,
+      children: [
+        /* @__PURE__ */ jsx(
+          ScreenTopBar,
+          {
+            tabbed,
+            api,
+            breadcrumbs,
+            buttonBar,
+            item,
+            isLoading: mutation.isLoading,
+            trackingRef: containerRef?.current
+          }
+        ),
+        type == "form" && sections?.map((section, index) => /* @__PURE__ */ jsx(Section, { section, item }, index)),
+        (pScreen.type == "post" || pScreen.type == "section") && /* @__PURE__ */ jsx("div", { p: "5", bgColor: "slate-100", rounded: "lg", children: /* @__PURE__ */ jsxs(PageContainer, { w: editorMaxW ? "auto" : "full", size: "x2", id: "pagecontainer", children: [
+          header,
+          /* @__PURE__ */ jsxs("div", { dflex: true, gap: "5", children: [
+            /* @__PURE__ */ 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__ */ jsx(PageContentEditor, { name: "content", maxW: editorMaxW, minW: "144", shadow: true, rounded: "lg" }),
+              pScreen.editor?.type == "textarea" && /* @__PURE__ */ jsx(
+                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__ */ jsx(PageSidebar, { children: sections?.map((section, index) => /* @__PURE__ */ 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__ */ jsx(PageSidebarSection, { title: section.title, ...style, children: /* @__PURE__ */ jsx(FormRenderer, { form: runIfFn(section.form, item) }) });
+  }
+  if (section.type === "custom")
+    return runIfFn(section.component, item);
+  return null;
+}
+function useApi(api, queryField) {
+  const params = useParams();
+  if (queryField === void 0)
+    return { id: void 0, api };
+  const { [queryField]: id } = params;
+  return { id, api: runIfFn(api, id) };
+}
+function QueryWrapper({
+  api,
+  queryField,
+  fn,
+  transformFn,
+  config,
+  tabbed,
+  ...props
+}) {
+  const { id, api: mApi } = useApi(api, queryField);
+  const { data } = useApiQuery(mApi.queryKey, fn === "get" || fn === "getTransformed" ? mApi.get : mApi.getAll, isFunction(api) ? void 0 : id);
+  const transformedData = React8.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__ */ jsx(ScreenRenderer, { config: config(transformedData), tabbed, ...props });
+}
+function TabbedView({ queryField, api, screen, ...props }) {
+  const { [queryField]: id } = useParams();
+  return /* @__PURE__ */ jsx(
+    PageQueryStateContainer,
+    {
+      queryId: id,
+      api,
+      apiFn: "get",
+      p: "5",
+      children: (city) => {
+        const { breadcrumbs, tabs } = runIfFn(screen, city);
+        return /* @__PURE__ */ jsxs(PageTabbedTopBarProvider, { children: [
+          /* @__PURE__ */ jsx(PageTabbedTopBar, { breadcrumbs, mb: "-3" }),
+          /* @__PURE__ */ jsx(
+            TabContainer,
+            {
+              tabs: tabs.map((tab) => tab.label),
+              saveKey: `tab-${id}`,
+              mt: "-3",
+              mb: "3",
+              id: "fff",
+              children: tabs.map((tab, index) => /* @__PURE__ */ 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__ */ jsx(ScreenRenderer, { config: tab.config, tabbed: true, p: "0" });
+}
+var [provider, useContext] = createContext();
+function getColId(column) {
+  return column.accessorKey ?? column.id;
+}
+function TableContainerContextProvider({ initialVisibleColumns, columns, children }) {
+  const [showFilters, setShowFilters] = React8.useState(false);
+  const [showMassActions, setShowMassActions] = React8.useState(false);
+  const [visibleColumnIds, setVisibleColumnIds] = React8.useState(initialVisibleColumns ?? columns?.map((col) => getColId(col)) ?? []);
+  const filteredColumns = columns?.filter((col) => visibleColumnIds.includes(getColId(col))) ?? [];
+  const toggleColumnVisibility = React8.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 = React8.useCallback((id) => {
+    return visibleColumnIds.includes(id);
+  }, [visibleColumnIds]);
+  const Provider = provider;
+  const value = {
+    showFilters,
+    setShowFilters,
+    showMassActions,
+    setShowMassActions,
+    columns: columns ?? [],
+    filteredColumns,
+    toggleColumnVisibility,
+    isColumnVisible
+  };
+  return /* @__PURE__ */ jsx(Provider, { value, children });
+}
+function TableContainer({ initialPageSize, initialVisibleColumns, columns, filtersMethod = "reactRouter", children, ...props }) {
+  return /* @__PURE__ */ jsx("div", { w: "full", dflex: true, flexCol: true, ...props, children: /* @__PURE__ */ jsx(TableContextProvider, { initialPageSize, filtersMethod, children: /* @__PURE__ */ jsx(TableContainerContextProvider, { columns, initialVisibleColumns, children }) }) });
+}
+function TableCreateButton({ icon, children, ...props }) {
+  return /* @__PURE__ */ jsxs(ButtonBarDialogButton, { ...props, children: [
+    /* @__PURE__ */ jsx(Icon, { path: icon ?? mdiPlusThick }),
+    children
+  ] });
+}
+function TableFilterButton({ ...props }) {
+  return /* @__PURE__ */ jsxs(Popover, { side: "bottom-end", modal: true, children: [
+    /* @__PURE__ */ jsx(Button, { scheme: "dark", size: "sm", aspectRatio: "square", variant: "borderless", corners: "square", ...props, children: /* @__PURE__ */ jsx(Icon, { path: mdiFilter }) }),
+    /* @__PURE__ */ jsxs("div", { bgColor: "white", rounded: true, shadow: true, children: [
+      /* @__PURE__ */ jsx("div", { py: "3", hover_bgColor: "#ff0000", px: "5", hover_textColor: "white", children: "First Item" }),
+      /* @__PURE__ */ jsx("div", { py: "3", hover_bgColor: "#ff0000", px: "5", hover_textColor: "white", children: "Second Item" }),
+      /* @__PURE__ */ jsx("div", { py: "3", hover_bgColor: "#ff0000", px: "5", hover_textColor: "white", children: "Third Item" })
+    ] })
+  ] });
+}
+function TableTopBar({ title, breadcrumbs, children, ...props }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      dflex: true,
+      flexRow: true,
+      alignItems: "center",
+      gap: "3",
+      p: "8",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          title && /* @__PURE__ */ jsx("h2", { textSize: "x2", fontWeight: "600", textColor: "#3f4254", textTransform: "capitalize", children: title }),
+          breadcrumbs && /* @__PURE__ */ jsx(Breadcrumbs, { breadcrumbs })
+        ] }),
+        /* @__PURE__ */ jsx("div", { flexGrow: true, children: "\xA0" }),
+        children
+      ]
+    }
+  );
+}
+function TableFilters({ form, initialValues, schema, processInput }) {
+  const { showFilters } = useContext();
+  const { getFilters, setFilters } = useTableContext();
+  const handleSubmit = React8.useCallback((values, actions) => {
+    const params = processInput?.(values) ?? values;
+    if (!isEqual(params, getFilters()))
+      setFilters(params);
+    actions.setSubmitting(false);
+  }, [setFilters, processInput]);
+  const handleReset = React8.useCallback((resetForm) => {
+    setFilters(initialValues);
+    resetForm();
+  }, [setFilters, initialValues]);
+  React8.useEffect(() => setFilters(initialValues), []);
+  return /* @__PURE__ */ jsx(Collapse, { in: showFilters, style: { overflow: showFilters ? "initial" : "hidden" }, children: /* @__PURE__ */ jsx("div", { p: "8", borderT: "px", borderB: "px", borderColor: "slate-100", children: /* @__PURE__ */ jsx(
+    FormProvider,
+    {
+      initialValues: mergeInitialFormValues(getFilters(), initialValues),
+      onSubmit: handleSubmit,
+      validationSchema: schema,
+      enableReinitialize: true,
+      children: (props) => /* @__PURE__ */ jsxs("div", { dflex: true, gap: "3", placeContent: "start", children: [
+        /* @__PURE__ */ jsx(FormRenderer, { flexRow: true, w: "auto", form }),
+        /* @__PURE__ */ jsx(Buttons2, { handleReset: () => handleReset(props.resetForm) })
+      ] })
+    }
+  ) }) });
+}
+function Buttons2({ handleReset }) {
+  return /* @__PURE__ */ jsxs("div", { dflex: true, gap: "3", children: [
+    /* @__PURE__ */ jsxs("div", { dflex: true, flexCol: true, children: [
+      /* @__PURE__ */ jsx(FieldLabel, { name: "", label: "\xA0" }),
+      /* @__PURE__ */ jsx(SubmitButton, { children: "Filter" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { dflex: true, flexCol: true, children: [
+      /* @__PURE__ */ jsx(FieldLabel, { name: "", label: "\xA0" }),
+      /* @__PURE__ */ jsx(Button, { scheme: "neutral", onClick: handleReset, children: "Reset" })
+    ] })
+  ] });
+}
+function ActionButton({
+  label,
+  buttonProps,
+  icon,
+  queryKey,
+  queryFn,
+  successMsg,
+  errorMsg,
+  invalidateParent
+}) {
+  const mutation = invalidateParent ? useInvalidateParentMutation(queryFn, queryKey) : useApiMutation(queryFn, queryKey);
+  const mutate = useMutate(
+    mutation,
+    {
+      successMsg,
+      errorMsg
+    }
+  );
+  return /* @__PURE__ */ jsxs(
+    Button,
+    {
+      display: "flex",
+      alignItems: "center",
+      gap: "3",
+      ...buttonProps,
+      onClick: mutate,
+      disabled: mutation.isLoading,
+      children: [
+        icon && /* @__PURE__ */ jsx(Icon, { path: icon }),
+        label
+      ]
+    }
+  );
+}
+function TableMassActions({ actions }) {
+  const { ids } = useTableContext();
+  const showMassActions = ids && ids.length > 0;
+  return /* @__PURE__ */ jsx(Collapse, { in: showMassActions, style: { overflow: showMassActions ? "initial" : "hidden" }, children: /* @__PURE__ */ jsx("div", { dflex: true, gap: "3", flexWrap: true, alignItems: "center", px: "8", pt: "5", children: actions.map((action, index) => /* @__PURE__ */ jsx("div", { children: action.type == "button" && !action.showConfirmationDialog && /* @__PURE__ */ jsx(ActionButton, { label: action.label, queryFn: action.queryFn, queryKey: action.queryKey, buttonProps: action.buttonProps }) }, index)) }) });
+}
+var defaultErrorMsg = "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,
+  queryFetchOptions,
+  querySaveOptions,
+  onSuccess,
+  onFetchError,
+  fetchErrorMsg = defaultErrorMsg,
+  onSaveError,
+  saveErrorMsg = defaultErrorMsg,
+  fetchToFormData,
+  formToQueryData,
+  invalidateQueriesOnSuccess = true,
+  invalidateQueryKey,
+  retryText = "Retry",
+  cancelLabel = "Cancel",
+  saveLabel,
+  size = "lg",
+  title,
+  form,
+  show,
+  onClose,
+  formikProps,
+  ...props
+}) {
+  const { isInitialLoading, isFetching, data, isError, error, refetch } = useApiQuery(api.queryKey, api.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 ? useInvalidateParentMutation(api.upsert, invalidateQueryKey ?? api.queryKey, querySaveOptions) : useApiMutation(api.upsert, api.queryKey, queryId, querySaveOptions);
+  const retry = React8.useCallback(() => refetch(), [refetch]);
+  const saveItem = React8.useCallback(async (item, actions) => {
+    mutation.reset();
+    const formItem = formToQueryData ? formToQueryData(item) : { ...item };
+    await mutation.mutateAsync(formItem).then((response) => {
+      if (onSuccess)
+        onSuccess(formItem, response);
+      else
+        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
+        toast.error(`Couldn't save ${title ? title(formItem) : formItem.name ?? formItem.title}`);
+      actions.setSubmitting(false);
+    });
+  }, [mutation, formToQueryData, onSuccess, onSaveError, onClose]);
+  return /* @__PURE__ */ jsxs(
+    Modal,
+    {
+      size,
+      show,
+      onClose,
+      scheme: "light",
+      transition: true,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs(Modal.Header, { children: [
+          !isInitialLoading && queryId && `Edit ${title ? title(data) : data?.["name"] ?? data?.["title"] ?? data?.["name"] ?? ""}`,
+          !queryId && `Create new ${itemLabel ?? "item"}`,
+          Array.isArray(form) && /* @__PURE__ */ jsx(Fragment, {})
+        ] }),
+        isInitialLoading && /* @__PURE__ */ jsx(Modal.Body, { children: /* @__PURE__ */ jsx(QueryLoadingState, { minW: "72" }) }),
+        isError && /* @__PURE__ */ jsx(Modal.Body, { children: /* @__PURE__ */ jsx(RetryOnError, { label: `${fetchErrorMsg} ${error}`, onClick: retry }) }),
+        !isInitialLoading && !isError && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+          Formik,
+          {
+            initialValues: fetchToFormData && queryId && data ? fetchToFormData(nonNullValues(data)) : nonNullValues(initialValues(data)) ?? {},
+            onSubmit: saveItem,
+            ...formikProps,
+            children: ({ setFieldValue, dirty, handleSubmit, isValid, values }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(Modal.Body, { pb: "6", children: /* @__PURE__ */ jsxs(Form, { children: [
+                React8.isValidElement(form) && form,
+                Array.isArray(form) && /* @__PURE__ */ jsx(FormRenderer, { form }),
+                isFunction(form) && /* @__PURE__ */ jsx(FormRenderer, { form: form(data ?? values) })
+              ] }) }),
+              /* @__PURE__ */ jsxs(Modal.Footer, { dflex: true, placeContent: "end", spaceX: "3", children: [
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    disabled: mutation.isLoading,
+                    onClick: onClose,
+                    variant: "borderless",
+                    me: "2",
+                    children: cancelLabel
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    type: "submit",
+                    disabled: !dirty || mutation.isLoading,
+                    onClick: () => handleSubmit(),
+                    children: saveLabel ? saveLabel : queryId ? "Update" : "Create"
+                  }
+                )
+              ] })
+            ] })
+          }
+        ) }),
+        mutation.isLoading && /* @__PURE__ */ jsx(ModalLoadingOverlay, {})
+      ]
+    }
+  );
+}
+function QueryWrapperDialog({ api, fn, transformFn, config, onClose, queryId, invalidateQueryKey }) {
+  const { data, isFetching } = useApiQuery(
+    api.queryKey,
+    fn === "get" || fn === "getTransformed" ? api.get : api.getAll,
+    void 0,
+    { retryOnMount: false, refetchOnMount: false, refetchOnWindowFocus: false }
+  );
+  const transformedData = React8.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__ */ jsx(ItemEditDialog, { ...config(transformedData), queryId, invalidateQueryKey, show: true, onClose });
+}
+function MultiQueryWrapperDialog({ queries, config, onClose, queryId, invalidateQueryKey }) {
+  const { data, isFetching, isError } = 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 = React8.useMemo(() => {
+    return data?.map((d, index) => queries[index]?.transformFn ? queries[index]?.transformFn?.(d) : d);
+  }, [data, queries]);
+  return /* @__PURE__ */ 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__ */ jsx(ItemEditDialog, { ...props, queryId, invalidateQueryKey, show: true, onClose });
+  if (config.type === "query")
+    return /* @__PURE__ */ jsx(QueryWrapperDialog, { ...props, queryId, invalidateQueryKey, onClose });
+  if (config.type === "multiQuery")
+    return /* @__PURE__ */ jsx(MultiQueryWrapperDialog, { ...props, queryId, invalidateQueryKey, onClose });
+  return null;
+}
+function RefreshButton({ queryKey }) {
+  const invalidate = useInvalidateQuery(queryKey);
+  useHotkeys("ctrl+r", () => invalidate(), { preventDefault: true }, [invalidate]);
+  return /* @__PURE__ */ jsx(ButtonBarButton, { scheme: "dark", size: "sm", aspectRatio: "square", variant: "borderless", onClick: invalidate, children: /* @__PURE__ */ jsx(Icon, { path: mdiRefresh }) });
+}
+function ItemDeleteDialog({
+  title,
+  actionButtonLabel,
+  closeActionButtonLabel = "Cancel",
+  itemLabel,
+  queryId = "",
+  api,
+  apiFn,
+  invalidateQueriesOnSuccess = true,
+  invalidateQueryKey,
+  size = "lg",
+  md_boxSizing,
+  msg,
+  show,
+  onClose,
+  onSuccess,
+  ...props
+}) {
+  const fn = apiFn ? api[apiFn] : api.delete;
+  const mutation = invalidateQueriesOnSuccess ? useInvalidateParentMutation(fn, invalidateQueryKey ?? api.queryKey) : useApiMutation(fn, api.queryKey);
+  const mutate = useMutate(mutation, { onSuccess: () => {
+    onClose?.();
+    onSuccess?.();
+  } });
+  const handleDelete = React8.useCallback(() => mutate(queryId), [mutate, queryId]);
+  return /* @__PURE__ */ jsxs(
+    Modal,
+    {
+      size,
+      show,
+      onClose,
+      scheme: "danger",
+      variant: "glass",
+      transition: true,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(Modal.Header, { children: title || `Delete ${itemLabel}` }),
+        /* @__PURE__ */ jsxs(Modal.Body, { pb: "6", children: [
+          !msg && `Do you really want to delete ${itemLabel}?`,
+          msg && runIfFn(msg, itemLabel)
+        ] }),
+        /* @__PURE__ */ jsxs(Modal.Footer, { dflex: true, placeContent: "end", spaceX: "3", children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              disabled: mutation.isPending,
+              onClick: onClose,
+              variant: "borderless",
+              scheme: "dark",
+              me: "2",
+              children: closeActionButtonLabel
+            }
+          ),
+          /* @__PURE__ */ jsx(Button, { scheme: "danger", disabled: mutation.isPending, onClick: handleDelete, children: actionButtonLabel || "Delete" })
+        ] }),
+        mutation.isPending && /* @__PURE__ */ jsx(ModalLoadingOverlay, {})
+      ]
+    }
+  );
+}
+var [provider2, useContext2] = createContext();
+function TableViewProvider({ editView, deleteItem, queryKey, children }) {
+  const openLink = useOpenLink();
+  const navigate = useNavigate();
+  const [dialog, setDialog] = React8.useState(null);
+  const onCloseDialog = React8.useCallback(() => setDialog(null), [setDialog]);
+  const onAction = React8.useCallback((action, item) => {
+    switch (action.type) {
+      case "view": {
+        navigate(runIfFn(action.path, item));
+        break;
+      }
+      case "link": {
+        openLink(`${AppEnv.websiteUrl()}/${runIfFn(action.path, item)}`);
+        break;
+      }
+      case "edit": {
+        const editConfig = runIfFn(editView, item);
+        if (editConfig) {
+          if (editConfig.type == "customDialog") {
+            setDialog(editConfig.render({ show: true, onClose: onCloseDialog }));
+          } else {
+            setDialog(
+              /* @__PURE__ */ jsx(
+                DialogRenderer,
+                {
+                  onClose: onCloseDialog,
+                  config: editConfig,
+                  queryId: item.id,
+                  invalidateQueryKey: queryKey
+                }
+              )
+            );
+          }
+        }
+        break;
+      }
+      case "delete": {
+        const deleteConfig = runIfFn(deleteItem, item);
+        setDialog(
+          /* @__PURE__ */ jsx(
+            ItemDeleteDialog,
+            {
+              show: true,
+              onClose: onCloseDialog,
+              queryId: item.id,
+              invalidateQueryKey: queryKey,
+              msg: item.msg,
+              ...deleteConfig,
+              itemLabel: runIfFn(deleteConfig.itemLabel, item)
+            }
+          )
+        );
+        break;
+      }
+    }
+  }, [navigate, editView, deleteItem]);
+  const Provider = provider2;
+  const value = {
+    dialog,
+    onAction
+  };
+  return /* @__PURE__ */ jsx(Provider, { value, children });
+}
+function TableRowPublishPostButton({ id, api, status, invalidateQueryKey, ...props }) {
+  const isDraft = status == "draft";
+  const mutation = useInvalidateParentMutation(isDraft ? api.publish : api.unpublish, invalidateQueryKey ?? api.queryKey, { networkMode: "always" });
+  const publish = React8.useCallback((event) => {
+    event?.preventDefault();
+    event?.stopPropagation();
+    mutation.reset();
+    mutation.mutateAsync(id).then(() => toast.success(isDraft ? "Published!" : "Unpublished!")).catch((error) => toast.error(`Error: ${error}`));
+  }, [mutation, id]);
+  return /* @__PURE__ */ jsx(Button, { variant: "borderless", corners: "square", scheme: "dark", onClick: publish, ...props, children: /* @__PURE__ */ jsx(Icon, { path: isDraft ? mdiPublish : mdiPublishOff, size: "sm" }) });
+}
+function TableRowActionButton({ icon, children, ...props }) {
+  return /* @__PURE__ */ jsxs(
+    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__ */ jsx(Icon, { path: icon, size: "sm" }),
+        children
+      ]
+    }
+  );
+}
+function TableRowActionsView({ row, onAction, rowActions, api, queryKey }) {
+  const item = row.original;
+  return /* @__PURE__ */ jsx("div", { dflex: true, w: "full", alignItems: "stretch", placeContent: "end", h: "full", children: runIfFn(rowActions, item)?.map(
+    (action, index) => /* @__PURE__ */ jsxs(React8.Fragment, { children: [
+      action.type === "publish" && /* @__PURE__ */ jsx(TableRowPublishPostButton, { id: item.id, api: action.api ?? api, status: item.status, invalidateQueryKey: queryKey }),
+      action.type == "custom" && /* @__PURE__ */ jsx(Fragment, { children: action.component(item, queryKey, action.icon, action.label) }),
+      !["publish", "custom"].includes(action.type) && /* @__PURE__ */ jsx(ActionButton2, { onClick: () => onAction(action, item), scheme: schemes[action.type], children: /* @__PURE__ */ jsx(Icon, { path: icons[action.type], size: "sm" }) })
+    ] }, index)
+  ) });
+}
+function ActionButton2({ onClick, ...props }) {
+  const handleClick = React8.useCallback((event) => {
+    event?.preventDefault();
+    event?.stopPropagation();
+    onClick?.(event);
+  }, [onClick]);
+  return /* @__PURE__ */ jsx(
+    TableRowActionButton,
+    {
+      onClick: handleClick,
+      ...props
+    }
+  );
+}
+var icons = {
+  "link": mdiOpenInNew,
+  "view": mdiEye,
+  "edit": mdiPencil,
+  "delete": mdiDelete,
+  "publish": mdiDelete,
+  "custom": ""
+};
+var schemes = {
+  "link": "dark",
+  "view": "dark",
+  "edit": "dark",
+  "delete": "dark",
+  "publish": "dark",
+  "custom": "dark"
+};
+function useTableProps(api, table, rowActions, queryParams) {
+  const navigate = useNavigate();
+  const nextRouter = useRouter();
+  const openLink = useOpenLink();
+  const { onAction } = useContext2();
+  const { onRowClick, columns: c, ...props } = table;
+  const onRowClickHandler = React8.useCallback((item) => {
+    const config = runIfFn(onRowClick, item);
+    if (config) {
+      switch (config.type) {
+        case "navigate": {
+          navigate(runIfFn(config.path, item) ?? "");
+          break;
+        }
+        case "nextpush": {
+          nextRouter.push(runIfFn(config.path, item));
+          break;
+        }
+        case "link": {
+          openLink(`${AppEnv.websiteUrl()}/${runIfFn(config.path, item)}`);
+          break;
+        }
+      }
+    }
+  }, [navigate, onRowClick]);
+  const columns = React8.useMemo(() => {
+    const columns2 = table.columns.concat([]);
+    if (rowActions) {
+      columns2.push(
+        createColumnHelper().display(
+          {
+            id: "actions",
+            header: "Actions",
+            cell: (props2) => /* @__PURE__ */ 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 = 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 = runIfFn(screen, id);
+  return /* @__PURE__ */ jsx(PageContainer, { bgColor: "white", ...props, children: /* @__PURE__ */ jsx(TableContainer, { columns: _screen.table.columns, initialVisibleColumns: _screen.table.initialVisibleColumns, filtersMethod: _screen.table.filtersMethod, children: /* @__PURE__ */ jsx(TT, { id, title, subtitle, screen: _screen }) }) });
+}
+function TT({ id, title, subtitle, screen }) {
+  const { setRowSelection } = useTableContext();
+  const { api, table, filters, massActions, buttonBar, rowActions, createView, editView, deleteItem, breadcrumbs } = screen;
+  const tableApi = runIfFn(api, id ?? "");
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(TableTopBar, { title, breadcrumbs, children: /* @__PURE__ */ jsx(TableButtonBar, { buttonBar, createView, editView, api: tableApi, queryKey: tableApi.queryKey, children: filters && /* @__PURE__ */ jsx(TableFilterButton, {}) }) }),
+    filters && /* @__PURE__ */ jsx(
+      TableFilters,
+      {
+        form: filters.form,
+        initialValues: filters.initialValues,
+        schema: filters.schema,
+        processInput: filters.processInput
+      }
+    ),
+    massActions && /* @__PURE__ */ jsx(TableMassActions, { actions: massActions.items }),
+    /* @__PURE__ */ jsxs(TableViewProvider, { queryKey: tableApi.queryKey, editView, deleteItem, children: [
+      /* @__PURE__ */ jsx(TableWrapper, { table: { ...table, onSelectionChange: setRowSelection }, rowActions, api: tableApi, subtitle, queryParams: screen.queryParams }),
+      /* @__PURE__ */ jsx(TableDialogManager, {})
+    ] })
+  ] });
+}
+function TableButtonBar({ buttonBar, queryKey, createView, editView, api, children }) {
+  const createDialogFn = React8.useCallback((data) => {
+    return (onClose) => {
+      const view = runIfFn(createView, data) ?? runIfFn(editView, null);
+      if (view.type == "customDialog")
+        return view.render({ show: true, onClose });
+      else
+        return /* @__PURE__ */ jsx(DialogRenderer, { config: view, onClose, invalidateQueryKey: api.queryKey });
+    };
+  }, [createView, editView, api]);
+  return /* @__PURE__ */ jsxs(ButtonBar, { children: [
+    /* @__PURE__ */ jsx(RefreshButton, { queryKey }),
+    buttonBar && buttonBar.map(
+      (button, index) => /* @__PURE__ */ jsxs(React8.Fragment, { children: [
+        button.type === "create" && editView && /* @__PURE__ */ jsx(
+          TableCreateButton,
+          {
+            buildDialog: createDialogFn(button.data),
+            icon: button.icon,
+            children: button.label
+          }
+        ),
+        button.type === "invalidate" && /* @__PURE__ */ jsx(InvalidateButton, { pathOrPermalink: button.pathOrPermalink }),
+        button.type === "custom" && button.render()
+      ] }, index)
+    ),
+    children
+  ] });
+}
+function TableWrapper({ table, subtitle, rowActions, api, queryParams }) {
+  const tableProps = useTableProps(api, table, rowActions, queryParams);
+  const _subtitle = React8.useMemo(() => {
+    if (!subtitle)
+      return void 0;
+    return (data) => {
+      return /* @__PURE__ */ jsx("div", { textSize: "lg", textColor: "#475569", fontWeight: "600", children: isFunction(subtitle) ? subtitle(data) : subtitle });
+    };
+  }, [subtitle]);
+  return /* @__PURE__ */ jsx(Table, { ...tableProps, p: "8", title: _subtitle });
+}
+function TableDialogManager() {
+  const { dialog } = useContext2();
+  return dialog;
+}
+function useQueries(queries) {
+  const params = useParams();
+  const { data, isFetching, isError } = useApiQueries(queries.map((q) => {
+    if (!q.queryField) {
+      const api2 = 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 = runIfFn(q.api, id);
+    return {
+      queryKey: api.queryKey,
+      queryFn: q.fn == "get" ? api.get : api.getAll,
+      queryParam: q.fn == "getAll" ? q.params : 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 = useQueryClient();
+  const params = useParams();
+  const invalidate = React8.useCallback(
+    () => {
+      const queryKeys = [];
+      queries.forEach((q) => {
+        if (!q.queryField || !isFunction(q.api)) {
+          queryKeys.push(q.api.queryKey);
+        } else {
+          const id = params[q.queryField];
+          const api = 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__ */ jsx(QueryLoadingState, { w: "full", h: "100vh" });
+  if (isError || !data)
+    return /* @__PURE__ */ jsx(RetryOnError, { p: "0", w: "full", h: "100vh", onClick: invalidate });
+  return /* @__PURE__ */ jsx(ScreenRenderer, { config: config(...data), tabbed, ...props });
+}
+function ScreenRenderer({ config, tabbed, ...props }) {
+  if (config.type === "table")
+    return /* @__PURE__ */ jsx(TableView, { ...config, ...props });
+  if (config.type === "tabbed")
+    return /* @__PURE__ */ jsx(TabbedView, { ...config, ...props });
+  if (config.type === "details")
+    return /* @__PURE__ */ jsx(DetailsView, { ...config, tabbed, ...props });
+  if (config.type === "query")
+    return /* @__PURE__ */ jsx(QueryWrapper, { ...config, tabbed, ...props });
+  if (config.type === "multiQuery")
+    return /* @__PURE__ */ jsx(MultiQueryWrapper, { ...config, tabbed, ...props });
+  return /* @__PURE__ */ jsx(Fragment, {});
+}
+function Content({ ...props }) {
+  return /* @__PURE__ */ jsx("div", { w: "100%", h: "100%", overflowY: "auto", ...props, children: /* @__PURE__ */ jsx(Outlet, {}) });
+}
+function SelectedIndicator({ darkMode }) {
+  return /* @__PURE__ */ 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__ */ jsxs(
+    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__ */ jsx(Icon, { path: icon, opacity: selected ? "100" : "60" }),
+        children
+      ]
+    }
+  );
+}
+function MenuItem({ icon, path, depth, darkMode, subMenu, ...props }) {
+  const location = useLocation();
+  const selected = path == "/" ? location.pathname == "/" : location.pathname.startsWith(path.startsWith("/") ? path : `/${path}`);
+  const match = useMatch("/" + path) != null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(Link$1, { to: path, style: { position: "relative" }, children: [
+      /* @__PURE__ */ jsx(
+        MenuButton,
+        {
+          depth,
+          darkMode,
+          icon,
+          selected,
+          ...props
+        }
+      ),
+      match && /* @__PURE__ */ jsx(SelectedIndicator, { darkMode })
+    ] }),
+    subMenu?.map((item, index) => /* @__PURE__ */ jsx(
+      MenuItem,
+      {
+        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 } = useRouter();
+  const selected = path == "/" ? pathname == "/" : pathname.startsWith(path.startsWith("/") ? path : `/${path}`);
+  const match = path == "/" ? pathname == "/" : pathname == (path.startsWith("/") ? path : `/${path}`);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(Link, { href: path, style: { position: "relative" }, children: [
+      /* @__PURE__ */ jsx(
+        MenuButton,
+        {
+          depth,
+          darkMode,
+          icon,
+          selected,
+          ...props
+        }
+      ),
+      match && /* @__PURE__ */ jsx(SelectedIndicator, { darkMode })
+    ] }),
+    subMenu?.map((item, index) => /* @__PURE__ */ 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;
+  return /* @__PURE__ */ jsx("ul", { ...props, children: config.map((item, index) => {
+    if (item.type == "divider")
+      return /* @__PURE__ */ jsx(Divider, { title: item.label }, index);
+    if (item.type == "item") {
+      return /* @__PURE__ */ jsx(
+        Comp,
+        {
+          icon: item.icon,
+          path: item.path,
+          depth: 0,
+          darkMode,
+          subMenu: item.children,
+          children: item.label
+        },
+        index
+      );
+    }
+  }) });
+}
+function Divider({ title }) {
+  return /* @__PURE__ */ 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 } = useSessionUser();
+  const navigate = useNavigate();
+  const handleClick = React8.useCallback(() => navigate(path), [navigate, path]);
+  if (isLoading)
+    return null;
+  return /* @__PURE__ */ 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__ */ jsx(Avatar, { size: "sm", src: user?.media?.url ?? "", name: `${user?.firstname} ${user?.lastname}` }),
+        /* @__PURE__ */ jsx("span", { flexGrow: true, ms: "2", children: `${capitalize(user?.firstname || user?.lastname || "")}` }),
+        /* @__PURE__ */ jsx(
+          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: mdiCog,
+            onClick: handleClick
+          }
+        ),
+        /* @__PURE__ */ jsx(OverflowMenu, { color, darkMode, menuConfig })
+      ]
+    }
+  );
+}
+function OverflowMenu({ color, darkMode, menuConfig }) {
+  const [showPopup, setShowPopup] = React8.useState(false);
+  const navigate = useNavigate();
+  const logout = useSessionLogout(false);
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
+    Popup,
+    {
+      show: showPopup,
+      position: "relative",
+      side: "bottom-end",
+      onClick: (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setShowPopup((show) => !show);
+      },
+      onHide: () => setShowPopup(false),
+      children: [
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            icon: 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__ */ 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__ */ jsx(MenuItem2, { icon: item.icon, onClick: () => navigate(item.path), children: item.label }, index);
+                }
+                return null;
+              }),
+              /* @__PURE__ */ jsx(MenuItem2, { icon: mdiLogout, onClick: logout, children: "Logout" })
+            ]
+          }
+        )
+      ]
+    }
+  ) });
+}
+function MenuItem2({ icon, onClick, children, ...props }) {
+  const handleClick = React8.useCallback((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    onClick?.(e);
+  }, []);
+  return /* @__PURE__ */ jsxs(
+    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__ */ jsx(Icon, { path: icon, size: "md" }),
+        children
+      ]
+    }
+  );
+}
+function Sidebar({ show, logo, title, menuConfig, userMenuConfig, userSettingsPath, color, darkMode, ...props }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      dflex: true,
+      flexCol: true,
+      w: "full",
+      md_w: "64",
+      minH: "screen",
+      p: "0",
+      textColor: darkMode ? "white" : "slate-800",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs(
+          FlexCenter,
+          {
+            placeContent: "start",
+            p: "4",
+            font: "title",
+            gap: "3",
+            borderB: "px",
+            borderBColor: "slate-900",
+            borderOpacity: "5",
+            children: [
+              logo ?? /* @__PURE__ */ jsx(Logo, { width: 40, height: 40, darkMode }),
+              /* @__PURE__ */ jsx("h1", { textSize: "md", children: title || AppEnv.appName() })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(Menu, { overflowY: "auto", flexGrow: "1", p: "4", darkMode, config: menuConfig }),
+        /* @__PURE__ */ jsx("div", { p: "2", children: /* @__PURE__ */ jsx(UserBlock, { darkMode, color, menuConfig: userMenuConfig, path: userSettingsPath }) })
+      ]
+    }
+  );
+}
+function Logo({ width, height, darkMode, ...props }) {
+  return /* @__PURE__ */ jsx("div", { ...props, children: /* @__PURE__ */ jsx(
+    Image,
+    {
+      src: `/logo_${darkMode ? "light" : "dark"}.png`,
+      alt: AppEnv.appName() || "",
+      width,
+      height,
+      priority: true,
+      unoptimized: true
+    }
+  ) });
+}
+function AdminLayout({ color, darkMode, logo, title, menuConfig, userMenuConfig, userSettingsPath, ...props }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      w: "full",
+      h: "screen",
+      dflex: true,
+      flexRow: true,
+      bgColor: `${color}-${darkMode ? "900" : "100"}`,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          LeftPanel,
+          {
+            color,
+            darkMode,
+            logo,
+            title,
+            menuConfig,
+            userMenuConfig,
+            userSettingsPath
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { w: "screen", py: "2", pe: "2", children: /* @__PURE__ */ jsx(Content, { bgColor: "white", rounded: "lg", shadow: true }) })
+      ]
+    }
+  );
+}
+function LeftPanel({ color, darkMode, logo, title, menuConfig, userMenuConfig, userSettingsPath }) {
+  const [isOpen, __, toggle] = useBoolean(true);
+  useHotkeys("ctrl+t", () => toggle(), [toggle]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ms: isOpen ? "0" : "-14.5rem",
+      transition: "all",
+      duration: "500",
+      transform: true,
+      children: [
+        /* @__PURE__ */ jsx(
+          Sidebar,
+          {
+            flexShrink: "0",
+            color,
+            darkMode,
+            logo,
+            title,
+            menuConfig,
+            userMenuConfig,
+            userSettingsPath
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            icon: 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"
+          }
+        )
+      ]
+    }
+  );
+}
+var defaultErrorMsg2 = "Oops, something went wrong...";
+function AttachDialog({
+  queryId,
+  queryKey,
+  queryFetchFn,
+  queryFetchAllKey,
+  queryFetchAllFn,
+  querySaveFn,
+  matchKey,
+  size = "lg",
+  show,
+  onClose,
+  itemLabel,
+  onSuccess,
+  onFetchError,
+  fetchErrorMsg = defaultErrorMsg2,
+  onSaveError,
+  saveErrorMsg = defaultErrorMsg2,
+  invalidateQueriesOnSuccess = true,
+  retryText = "Retry",
+  cancelLabel = "Cancel",
+  saveLabel,
+  formikProps,
+  getItemName,
+  ...props
+}) {
+  const queryClient = useQueryClient();
+  const { data: attached, isInitialLoading: fetchLoading, isError: fetchError, refetch, error } = useApiQuery(queryKey, queryFetchFn);
+  const { data, isInitialLoading: fetchAllLoading, isError: fetchAllError, refetch: refetchAll, error: errorAll } = useApiQuery(queryFetchAllKey, queryFetchAllFn);
+  const [selectedResources, setSelectedResources] = React8.useState([]);
+  const isLoading = fetchLoading || fetchAllLoading;
+  const isError = fetchError || fetchAllError;
+  const mutation = useApiMutation(querySaveFn, queryKey, queryId);
+  const handleClick = React8.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 = React8.useCallback(() => {
+    if (fetchError)
+      refetch();
+    if (fetchAllError)
+      refetchAll();
+  }, [refetch, refetchAll, fetchError, fetchAllError]);
+  const saveItem = React8.useCallback(() => {
+    mutation.reset();
+    mutation.mutateAsync({ resources: selectedResources }).then((response) => {
+      if (onSuccess)
+        onSuccess(response);
+      else
+        toast.success(`${itemLabel} saved`);
+      if (invalidateQueriesOnSuccess)
+        queryClient.invalidateQueries({ queryKey });
+      onClose?.();
+    }).catch((error2) => {
+      console.error("on error", error2);
+      if (onSaveError)
+        onSaveError();
+      else
+        toast.error(`Error adding ${itemLabel}`);
+    });
+  }, [mutation, queryId, onSuccess, queryClient, onSaveError, onClose]);
+  const resources = React8.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 = sortBy(r, ["name"]);
+    }
+    return r;
+  }, [attached, data]);
+  return /* @__PURE__ */ jsxs(
+    Modal,
+    {
+      size,
+      show,
+      onClose,
+      scheme: "light",
+      transition: true,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(Modal.Header, { children: `Add ${itemLabel}` }),
+        isLoading && /* @__PURE__ */ jsx(Modal.Body, { children: /* @__PURE__ */ jsx(QueryLoadingState, { minW: "72" }) }),
+        isError && /* @__PURE__ */ jsx(Modal.Body, { children: /* @__PURE__ */ jsx(RetryOnError, { label: `${fetchErrorMsg} ${error}`, onClick: retry }) }),
+        !isLoading && !isError && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Modal.Body, { px: "0", pb: "6", maxH: "750px", overflow: "auto", children: /* @__PURE__ */ jsx("div", { dflex: true, flexCol: true, overflow: "auto", children: resources.map((item) => /* @__PURE__ */ jsx(
+            ListItem,
+            {
+              label: item.name,
+              value: item.id,
+              "data-id": item.id,
+              checked: selectedResources.includes(`${item.id}`),
+              onClick: handleClick
+            },
+            item.id
+          )) }) }),
+          /* @__PURE__ */ jsxs(Modal.Footer, { dflex: true, placeContent: "end", spaceX: "3", children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                disabled: mutation.isLoading,
+                onClick: onClose,
+                variant: "borderless",
+                me: "2",
+                children: cancelLabel
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "submit",
+                disabled: selectedResources.length == 0 || mutation.isLoading,
+                onClick: saveItem,
+                children: saveLabel ? saveLabel : queryId ? "Update" : "Create"
+              }
+            )
+          ] })
+        ] }),
+        mutation.isLoading && /* @__PURE__ */ jsx(ModalLoadingOverlay, {})
+      ]
+    }
+  );
+}
+function ListItem({ label, value, checked, ...props }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      dflex: true,
+      alignItems: "center",
+      hover_bgColor: "slate-100",
+      px: "5",
+      py: "2",
+      cursor: "pointer",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { flexGrow: true, children: label }),
+        /* @__PURE__ */ jsx(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,
+  show,
+  onClose,
+  formikProps,
+  ...props
+}) {
+  const mutation = invalidateQueriesOnSuccess ? useInvalidateParentMutation(queryFn, queryKey, queryOptions) : useApiMutation(queryFn, queryKey, queryId, queryOptions);
+  const mutate = useMutate(mutation, {
+    onSuccess,
+    successMsg,
+    showSuccessMsg,
+    onError,
+    errorMsg,
+    showErrorMsg,
+    processInput
+  });
+  return /* @__PURE__ */ jsxs(
+    Modal,
+    {
+      size,
+      show,
+      onClose,
+      scheme: "light",
+      transition: true,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(Modal.Header, { children: title }),
+        /* @__PURE__ */ jsxs(
+          FormProvider,
+          {
+            initialValues: initialValues ?? {},
+            onSubmit: mutate,
+            ...formikProps,
+            children: [
+              /* @__PURE__ */ jsxs(Modal.Body, { pb: "6", children: [
+                React8.isValidElement(form) && form,
+                Array.isArray(form) && /* @__PURE__ */ jsx(FormRenderer, { form })
+              ] }),
+              /* @__PURE__ */ jsxs(Modal.Footer, { dflex: true, placeContent: "end", spaceX: "3", children: [
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    disabled: mutation.isLoading,
+                    onClick: onClose,
+                    variant: "borderless",
+                    me: "2",
+                    children: cancelLabel
+                  }
+                ),
+                /* @__PURE__ */ jsx(SubmitButton, { disabled: mutation.isLoading, children: saveLabel })
+              ] })
+            ]
+          }
+        ),
+        mutation.isLoading && /* @__PURE__ */ jsx(ModalLoadingOverlay, {})
+      ]
+    }
+  );
+}
+var PageStateContainer = React8.forwardRef(({ loading = false, children, ...props }, ref) => {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    loading && /* @__PURE__ */ jsx(QueryLoadingState, { w: "full", h: "100%" }),
+    !loading && /* @__PURE__ */ jsx(Container, { ref, center: true, size: "x2", dflex: true, flexCol: true, gap: "8", ...props, children })
+  ] });
+});
+function PageSubSectionTitle({ children, ...props }) {
+  return /* @__PURE__ */ jsx("div", { trait: "typo.h6", mb: "3", ...props, children });
+}
+var labels = {
+  draft: "Draft",
+  published: "Published",
+  pending: "Pending",
+  approved: "Approved",
+  partially_approved: "Partially Approved",
+  rejected: "Rejected"
+};
+var schemes2 = {
+  draft: "warning",
+  published: "success",
+  pending: "secondary",
+  approved: "success",
+  partially_approved: "warning",
+  rejected: "danger"
+};
+function StatusBadge({ status, ...props }) {
+  return /* @__PURE__ */ jsx(Badge, { size: "sm", variant: "glass", whiteSpace: "nowrap", rounded: "full", px: "3", scheme: schemes2[status], ...props, children: labels[status] });
+}
+function TableRowViewButton({ path, ...props }) {
+  const openPage = React8.useCallback((event) => {
+    event?.preventDefault();
+    event?.stopPropagation();
+    window.open(`${AppEnv.websiteUrl()}/${path}`, "_blank");
+  }, [path]);
+  return /* @__PURE__ */ jsx(TableRowActionButton, { icon: mdiOpenInNew, onClick: openPage, ...props });
+}
+function TableRowNavigateButton({ path, ...props }) {
+  const navigate = useNavigate();
+  const handleClick = React8.useCallback((event) => {
+    event?.preventDefault();
+    event?.stopPropagation();
+    navigate(`${path}`);
+  }, [navigate, path]);
+  return /* @__PURE__ */ jsx(TableRowActionButton, { icon: mdiEye, onClick: handleClick, ...props });
+}
+function TableRowActionDialogButton({ icon, children, ...props }) {
+  return /* @__PURE__ */ 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__ */ jsx(Icon, { path: icon, size: "sm" }),
+        children
+      ]
+    }
+  );
+}
+function TableRowEditButton({ children, ...props }) {
+  return /* @__PURE__ */ jsx(TableRowActionDialogButton, { icon: mdiPencil, ...props, children });
+}
+function TableRowDeleteButton({ children, ...props }) {
+  return /* @__PURE__ */ jsx(TableRowActionDialogButton, { icon: mdiDelete, ...props, children });
+}
+function TableRowActionBar({
+  publishId,
+  viewPath,
+  navigatePath,
+  editDialog,
+  deleteDialog,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs("div", { dflex: true, spaceX: "1", placeContent: "end", ...props, children: [
+    viewPath && /* @__PURE__ */ jsx(TableRowViewButton, { path: viewPath }),
+    navigatePath && /* @__PURE__ */ jsx(TableRowNavigateButton, { path: navigatePath }),
+    editDialog && /* @__PURE__ */ jsx(TableRowEditButton, { buildDialog: editDialog }),
+    deleteDialog && /* @__PURE__ */ jsx(TableRowDeleteButton, { buildDialog: deleteDialog }),
+    children
+  ] });
+}
+function TableRowPublishPostButton2({ id, api, status, invalidateQueryKey, ...props }) {
+  const isDraft = status == "draft";
+  const mutation = useInvalidateParentMutation(isDraft ? api.publish : api.unpublish, invalidateQueryKey ?? api.queryKey, { networkMode: "always" });
+  const publish = React8.useCallback((event) => {
+    event?.preventDefault();
+    event?.stopPropagation();
+    mutation.reset();
+    mutation.mutateAsync(id).then(() => toast.success(isDraft ? "Published!" : "Unpublished!")).catch((error) => toast.error(`Error: ${error}`));
+  }, [mutation, id]);
+  return /* @__PURE__ */ jsx(TableRowActionButton, { icon: isDraft ? mdiPublish : mdiPublishOff, onClick: publish, ...props });
+}
+
+export { AdminLayout, AttachDialog, Breadcrumbs, ButtonBar, ButtonBarButton, ButtonBarDialogButton, ButtonBarSubmitButton, DialogButton, FormActionDialog, InvalidateButton, ItemDeleteDialog, ItemEditDialog, Menu, NavigateButton, OrderCell, PageContainer, PageContentEditor, PageMain, PageQueryStateContainer, PageSectionTitle, PageSidebar, PageSidebarSection, PageStateContainer, PageSubSectionTitle, PageTabbedTopBar, PageTabbedTopBarProvider, PageTitle, PageTopBar, PageTopBarToolbar, PublishButton, ScreenRenderer, SectionTitle, StatusBadge, TableContainer, TableCreateButton, TableFilterButton, TableRowActionBar, TableRowActionButton, TableRowActionDialogButton, TableRowDeleteButton, TableRowEditButton, TableRowNavigateButton, TableRowPublishPostButton2 as TableRowPublishPostButton, TableRowViewButton, TableTopBar, UpdateButton, ViewButton };