@compill/admin 1.0.80 → 1.0.82

package/index.cjs.js

@@ -16,6 +16,7 @@ require('react/jsx-runtime');
 var components = require('@compill/components');
 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');
@@ -24,6 +25,7 @@ var hooks = require('@compill/hooks');
 var env = require('@compill/env');
 var reactQuery = require('@tanstack/react-query');
 var Image = require('next/image');
+var auth = require('@compill/auth');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -46,7 +48,7 @@ OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
 PERFORMANCE OF THIS SOFTWARE.
 ***************************************************************************** */
 
-function __rest$1(s, e) {
+function __rest(s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
         t[p] = s[p];
@@ -77,7 +79,7 @@ function SectionTitle(_a) {
   var {
       children
     } = _a,
-    props = __rest$1(_a, ["children"]);
+    props = __rest(_a, ["children"]);
   return jsxRuntime.jsx("h2", Object.assign({
     textSize: "xl",
     fontWeight: "600",
@@ -93,11 +95,14 @@ var mdiArrowLeft = "M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.
 var mdiArrowUpBoldBox = "M19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21M12,7L7,12H10V16H14V12H17L12,7Z";
 var mdiCircleSmall = "M12,10A2,2 0 0,0 10,12C10,13.11 10.9,14 12,14C13.11,14 14,13.11 14,12A2,2 0 0,0 12,10Z";
 var mdiCloudUpload = "M11 20H6.5Q4.22 20 2.61 18.43 1 16.85 1 14.58 1 12.63 2.17 11.1 3.35 9.57 5.25 9.15 5.88 6.85 7.75 5.43 9.63 4 12 4 14.93 4 16.96 6.04 19 8.07 19 11 20.73 11.2 21.86 12.5 23 13.78 23 15.5 23 17.38 21.69 18.69 20.38 20 18.5 20H13V12.85L14.6 14.4L16 13L12 9L8 13L9.4 14.4L11 12.85Z";
+var mdiCog = "M12,15.5A3.5,3.5 0 0,1 8.5,12A3.5,3.5 0 0,1 12,8.5A3.5,3.5 0 0,1 15.5,12A3.5,3.5 0 0,1 12,15.5M19.43,12.97C19.47,12.65 19.5,12.33 19.5,12C19.5,11.67 19.47,11.34 19.43,11L21.54,9.37C21.73,9.22 21.78,8.95 21.66,8.73L19.66,5.27C19.54,5.05 19.27,4.96 19.05,5.05L16.56,6.05C16.04,5.66 15.5,5.32 14.87,5.07L14.5,2.42C14.46,2.18 14.25,2 14,2H10C9.75,2 9.54,2.18 9.5,2.42L9.13,5.07C8.5,5.32 7.96,5.66 7.44,6.05L4.95,5.05C4.73,4.96 4.46,5.05 4.34,5.27L2.34,8.73C2.21,8.95 2.27,9.22 2.46,9.37L4.57,11C4.53,11.34 4.5,11.67 4.5,12C4.5,12.33 4.53,12.65 4.57,12.97L2.46,14.63C2.27,14.78 2.21,15.05 2.34,15.27L4.34,18.73C4.46,18.95 4.73,19.03 4.95,18.95L7.44,17.94C7.96,18.34 8.5,18.68 9.13,18.93L9.5,21.58C9.54,21.82 9.75,22 10,22H14C14.25,22 14.46,21.82 14.5,21.58L14.87,18.93C15.5,18.67 16.04,18.34 16.56,17.94L19.05,18.95C19.27,19.03 19.54,18.95 19.66,18.73L21.66,15.27C21.78,15.05 21.73,14.78 21.54,14.63L19.43,12.97Z";
 var mdiDatabaseRefreshOutline = "M6 12.45V9.64C7.47 10.47 9.61 11 12 11S16.53 10.47 18 9.64V12.03C18.17 12 18.33 12 18.5 12C19 12 19.5 12.07 20 12.18V7C20 4.79 16.42 3 12 3S4 4.79 4 7V17C4 19.21 7.59 21 12 21C12.17 21 12.33 21 12.5 21C12.24 20.37 12.09 19.7 12.03 19L12 19C8.13 19 6 17.5 6 17V14.77C7.61 15.55 9.72 16 12 16C12.17 16 12.34 16 12.5 16C12.85 15.18 13.34 14.46 13.95 13.86C13.32 13.95 12.67 14 12 14C9.58 14 7.3 13.4 6 12.45M12 5C15.87 5 18 6.5 18 7S15.87 9 12 9 6 7.5 6 7 8.13 5 12 5M18 18.5L19.77 16.73C19.32 16.28 18.69 16 18 16C16.62 16 15.5 17.12 15.5 18.5S16.62 21 18 21C18.82 21 19.54 20.61 20 20H21.71C21.12 21.47 19.68 22.5 18 22.5C15.79 22.5 14 20.71 14 18.5S15.79 14.5 18 14.5C19.11 14.5 20.11 14.95 20.83 15.67L22 14.5V18.5H18Z";
 var mdiDelete = "M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z";
+var mdiDotsVertical = "M12,16A2,2 0 0,1 14,18A2,2 0 0,1 12,20A2,2 0 0,1 10,18A2,2 0 0,1 12,16M12,10A2,2 0 0,1 14,12A2,2 0 0,1 12,14A2,2 0 0,1 10,12A2,2 0 0,1 12,10M12,4A2,2 0 0,1 14,6A2,2 0 0,1 12,8A2,2 0 0,1 10,6A2,2 0 0,1 12,4Z";
 var mdiEye = "M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9M12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17M12,4.5C7,4.5 2.73,7.61 1,12C2.73,16.39 7,19.5 12,19.5C17,19.5 21.27,16.39 23,12C21.27,7.61 17,4.5 12,4.5Z";
 var mdiEyeOff = "M11.83,9L15,12.16C15,12.11 15,12.05 15,12A3,3 0 0,0 12,9C11.94,9 11.89,9 11.83,9M7.53,9.8L9.08,11.35C9.03,11.56 9,11.77 9,12A3,3 0 0,0 12,15C12.22,15 12.44,14.97 12.65,14.92L14.2,16.47C13.53,16.8 12.79,17 12,17A5,5 0 0,1 7,12C7,11.21 7.2,10.47 7.53,9.8M2,4.27L4.28,6.55L4.73,7C3.08,8.3 1.78,10 1,12C2.73,16.39 7,19.5 12,19.5C13.55,19.5 15.03,19.2 16.38,18.66L16.81,19.08L19.73,22L21,20.73L3.27,3M12,7A5,5 0 0,1 17,12C17,12.64 16.87,13.26 16.64,13.82L19.57,16.75C21.07,15.5 22.27,13.86 23,12C21.27,7.61 17,4.5 12,4.5C10.6,4.5 9.26,4.75 8,5.2L10.17,7.35C10.74,7.13 11.35,7 12,7Z";
 var mdiFilter = "M14,12V19.88C14.04,20.18 13.94,20.5 13.71,20.71C13.32,21.1 12.69,21.1 12.3,20.71L10.29,18.7C10.06,18.47 9.96,18.16 10,17.87V12H9.97L4.21,4.62C3.87,4.19 3.95,3.56 4.38,3.22C4.57,3.08 4.78,3 5,3V3H19V3C19.22,3 19.43,3.08 19.62,3.22C20.05,3.56 20.13,4.19 19.79,4.62L14.03,12H14Z";
+var mdiLogout = "M17 7L15.59 8.41L18.17 11H8V13H18.17L15.59 15.58L17 17L22 12M4 5H12V3H4C2.9 3 2 3.9 2 5V19C2 20.1 2.9 21 4 21H12V19H4V5Z";
 var mdiOpenInNew = "M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z";
 var mdiPencil = "M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z";
 var mdiPlusThick = "M20 14H14V20H10V14H4V10H10V4H14V10H20V14Z";
@@ -110,7 +115,7 @@ function Breadcrumbs(_a) {
   var {
       breadcrumbs
     } = _a,
-    props = __rest$1(_a, ["breadcrumbs"]);
+    props = __rest(_a, ["breadcrumbs"]);
   return jsxRuntime.jsx("div", Object.assign({
     dflex: true,
     alignItems: "center",
@@ -147,7 +152,7 @@ function DialogButton(_a) {
   var {
       buildDialog
     } = _a,
-    props = __rest$1(_a, ["buildDialog"]);
+    props = __rest(_a, ["buildDialog"]);
   const [showDialog, setShowDialog] = React__default["default"].useState(false);
   const onShowDialog = React__default["default"].useCallback(event => {
     event === null || event === void 0 ? void 0 : event.preventDefault();
@@ -168,7 +173,7 @@ function ButtonBar(_a) {
   var {
       children
     } = _a,
-    props = __rest$1(_a, ["children"]);
+    props = __rest(_a, ["children"]);
   return jsxRuntime.jsx("div", Object.assign({
     dflex: true,
     border: "1px",
@@ -186,7 +191,7 @@ const ButtonBarButton = /*#__PURE__*/React__default["default"].forwardRef(functi
       icon,
       children
     } = _a,
-    props = __rest$1(_a, ["icon", "children"]);
+    props = __rest(_a, ["icon", "children"]);
   return jsxRuntime.jsxs(ui.Button, Object.assign({
     scheme: "dark",
     size: "sm",
@@ -212,7 +217,7 @@ const ButtonBarSubmitButton = /*#__PURE__*/React__default["default"].forwardRef(
       icon,
       children
     } = _a,
-    props = __rest$1(_a, ["useDirty", "disabled", "icon", "children"]);
+    props = __rest(_a, ["useDirty", "disabled", "icon", "children"]);
   const {
     dirty,
     handleSubmit
@@ -246,7 +251,7 @@ function ButtonBarDialogButton(_a) {
       icon,
       children
     } = _a,
-    props = __rest$1(_a, ["icon", "children"]);
+    props = __rest(_a, ["icon", "children"]);
   return jsxRuntime.jsxs(DialogButton, Object.assign({
     scheme: "dark",
     size: "sm",
@@ -268,7 +273,7 @@ function InvalidateButton(_a) {
   var {
       pathOrPermalink
     } = _a,
-    props = __rest$1(_a, ["pathOrPermalink"]);
+    props = __rest(_a, ["pathOrPermalink"]);
   const api$1 = adminApi.INVALIDATE_API.new(pathOrPermalink);
   const mutation = api.useApiMutation(api$1.invalidate, api$1.queryKey);
   const invalidate = api.useMutate(mutation, {
@@ -286,7 +291,7 @@ function NavigateButton(_a) {
   var {
       path
     } = _a,
-    props = __rest$1(_a, ["path"]);
+    props = __rest(_a, ["path"]);
   const navigate = reactRouterDom.useNavigate();
   const handleClick = React__default["default"].useCallback(() => {
     navigate(path);
@@ -312,7 +317,7 @@ function PublishButton(_a) {
       queryId,
       api: api$1
     } = _a,
-    props = __rest$1(_a, ["status", "queryId", "api"]);
+    props = __rest(_a, ["status", "queryId", "api"]);
   const isDraft = status == "draft";
   const mutation = api.useInvalidateMutation(isDraft ? api$1.publish : api$1.unpublish, api$1.queryKey, queryId, {
     networkMode: "always"
@@ -719,7 +724,7 @@ function useHotkeys(keys, callback, options, dependencies) {
 
 function UpdateButton(_a) {
   var _b;
-  var props = __rest$1(_a, []);
+  var props = __rest(_a, []);
   const {
     dirty,
     handleSubmit
@@ -745,7 +750,7 @@ function ViewButton(_a) {
       path,
       icon
     } = _a,
-    props = __rest$1(_a, ["path", "icon"]);
+    props = __rest(_a, ["path", "icon"]);
   const openPage = React__default["default"].useCallback(() => {
     window.open(path, '_blank');
   }, [path]);
@@ -804,7 +809,7 @@ function PageContainer(_a) {
   var {
       children
     } = _a,
-    props = __rest$1(_a, ["children"]);
+    props = __rest(_a, ["children"]);
   return jsxRuntime.jsx(ui.Container, Object.assign({
     center: true,
     dflex: true,
@@ -815,68 +820,11 @@ function PageContainer(_a) {
   }));
 }
 
-/******************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-
-function __rest(s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-}
-
-typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
-    var e = new Error(message);
-    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
-};
-
-function FormEditor(_a) {
-  // const { initialValues } = useFormikContext();
-  var {
-      name,
-      placeholder
-    } = _a,
-    props = __rest(_a, ["name", "placeholder"]);
-  return jsxRuntime.jsx(formik.Field, {
-    name: name,
-    children: ({
-      field,
-      meta
-    }) => jsxRuntime.jsx(editor.Editor, Object.assign({}, props, {
-      // placeholder={placeholder}
-      defaultValue: meta.initialValue,
-      onChange: e => field.onChange({
-        target: {
-          name: name,
-          value: e
-        }
-      })
-    }))
-  });
-}
-
 function PageMain(_a) {
   var {
       children
     } = _a,
-    props = __rest$1(_a, ["children"]);
+    props = __rest(_a, ["children"]);
   return jsxRuntime.jsx(ui.Tile, Object.assign({
     scheme: "light",
     p: "5"
@@ -889,17 +837,19 @@ function PageContentEditor(_a) {
   var {
       name
     } = _a,
-    props = __rest$1(_a, ["name"]);
+    props = __rest(_a, ["name"]);
+  const extensions = [editor.ImageExtension];
   return jsxRuntime.jsx(PageMain, Object.assign({
     h: "min"
   }, props, {
-    children: jsxRuntime.jsx(FormEditor, {
+    children: jsxRuntime.jsx(formEditor.FormEditor, {
       minH: "128",
       minW: "144",
       maxW: props.maxW,
       // w={props.w}
       name: name,
-      placeHolder: "Write here..."
+      placeHolder: "Write here...",
+      extensions: extensions
     })
   }));
 }
@@ -913,7 +863,7 @@ function PageQueryStateContainerInner(_a) {
       errorStyles,
       children
     } = _a,
-    props = __rest$1(_a, ["queryId", "api", "apiFn", "loadingStyles", "errorStyles", "children"]);
+    props = __rest(_a, ["queryId", "api", "apiFn", "loadingStyles", "errorStyles", "children"]);
   // @ts-ignore
   const {
     data,
@@ -939,7 +889,7 @@ function PageSidebar(_a) {
   var {
       children
     } = _a,
-    props = __rest$1(_a, ["children"]);
+    props = __rest(_a, ["children"]);
   return jsxRuntime.jsx("div", Object.assign({
     w: "112",
     minW: "112",
@@ -957,7 +907,7 @@ function PageSidebarSection(_a) {
       title,
       children
     } = _a,
-    props = __rest$1(_a, ["title", "children"]);
+    props = __rest(_a, ["title", "children"]);
   return jsxRuntime.jsxs("div", Object.assign({
     w: "full"
   }, props, {
@@ -971,7 +921,7 @@ function PageTitle(_a) {
   var {
       children
     } = _a,
-    props = __rest$1(_a, ["children"]);
+    props = __rest(_a, ["children"]);
   return jsxRuntime.jsx("div", Object.assign({
     trait: "typo.h5"
   }, props, {
@@ -985,7 +935,7 @@ function PageTopBar(_a) {
       breadcrumbs,
       children
     } = _a,
-    props = __rest$1(_a, ["title", "breadcrumbs", "children"]);
+    props = __rest(_a, ["title", "breadcrumbs", "children"]);
   return jsxRuntime.jsxs(components.FlexCenter, Object.assign({
     gap: "3",
     minH: "9"
@@ -1018,7 +968,7 @@ function PageTabbedTopBar(_a) {
       breadcrumbs,
       children
     } = _a,
-    props = __rest$1(_a, ["title", "breadcrumbs", "children"]);
+    props = __rest(_a, ["title", "breadcrumbs", "children"]);
   const ref = /*#__PURE__*/React__default["default"].createRef();
   const {
     setContainerEl
@@ -1172,7 +1122,7 @@ function DetailsView(_a) {
       screen,
       tabbed
     } = _a,
-    props = __rest$1(_a, ["queryField", "api", "useNextRouter", "processInput", "screen", "tabbed"]);
+    props = __rest(_a, ["queryField", "api", "useNextRouter", "processInput", "screen", "tabbed"]);
   const id = useQueryField(queryField, useNextRouter);
   const ref = React__default["default"].useRef(null);
   return jsxRuntime.jsx(PageQueryStateContainer, Object.assign({
@@ -1335,7 +1285,7 @@ function QueryWrapper(_a) {
       config,
       tabbed
     } = _a,
-    props = __rest$1(_a, ["api", "queryField", "fn", "transformFn", "config", "tabbed"]);
+    props = __rest(_a, ["api", "queryField", "fn", "transformFn", "config", "tabbed"]);
   const {
     id,
     api: mApi
@@ -1364,7 +1314,7 @@ function TabbedView(_a) {
       api,
       screen
     } = _a;
-    __rest$1(_a, ["queryField", "api", "screen"]);
+    __rest(_a, ["queryField", "api", "screen"]);
   const {
     [queryField]: id
   } = reactRouterDom.useParams();
@@ -1460,7 +1410,7 @@ function TableContainer(_a) {
       columns,
       children
     } = _a,
-    props = __rest$1(_a, ["initialPageSize", "initialVisibleColumns", "columns", "children"]);
+    props = __rest(_a, ["initialPageSize", "initialVisibleColumns", "columns", "children"]);
   return jsxRuntime.jsx("div", Object.assign({
     w: "full",
     dflex: true,
@@ -1482,7 +1432,7 @@ function TableCreateButton(_a) {
       icon,
       children
     } = _a,
-    props = __rest$1(_a, ["icon", "children"]);
+    props = __rest(_a, ["icon", "children"]);
   return jsxRuntime.jsxs(admin.ButtonBarDialogButton, Object.assign({}, props, {
     children: [jsxRuntime.jsx(ui.Icon, {
       path: icon !== null && icon !== void 0 ? icon : mdiPlusThick
@@ -1491,7 +1441,7 @@ function TableCreateButton(_a) {
 }
 
 function TableFilterButton(_a) {
-  var props = __rest$1(_a, []);
+  var props = __rest(_a, []);
   // return <Button scheme="secondary" {...props}><Icon path={mdiFilter} /></Button>
   return jsxRuntime.jsxs(ui.Popover, {
     side: "bottom-end",
@@ -1538,7 +1488,7 @@ function TableTopBar(_a) {
       title,
       children
     } = _a,
-    props = __rest$1(_a, ["title", "children"]);
+    props = __rest(_a, ["title", "children"]);
   return jsxRuntime.jsxs("div", Object.assign({
     dflex: true,
     flexRow: true,
@@ -1831,6 +1781,10 @@ function isEqual(a, b) {
     return isEqualWith(a, b, noop);
 }
 
+function capitalize(str) {
+    return (str.charAt(0).toUpperCase() + str.slice(1).toLowerCase());
+}
+
 function TableFilters({
   form: form$1,
   initialValues,
@@ -2014,7 +1968,7 @@ function ItemEditDialog(_a) {
       onClose,
       formikProps
     } = _a,
-    props = __rest$1(_a, ["initialValues", "itemLabel", "queryId", "api", "queryFetchOptions", "querySaveOptions", "onSuccess", "onFetchError", "fetchErrorMsg", "onSaveError", "saveErrorMsg", "fetchToFormData", "formToQueryData", "invalidateQueriesOnSuccess", "invalidateQueryKey", "retryText", "cancelLabel", "saveLabel", "size", "title", "form", "show", "onClose", "formikProps"]);
+    props = __rest(_a, ["initialValues", "itemLabel", "queryId", "api", "queryFetchOptions", "querySaveOptions", "onSuccess", "onFetchError", "fetchErrorMsg", "onSaveError", "saveErrorMsg", "fetchToFormData", "formToQueryData", "invalidateQueriesOnSuccess", "invalidateQueryKey", "retryText", "cancelLabel", "saveLabel", "size", "title", "form", "show", "onClose", "formikProps"]);
   const {
     isInitialLoading,
     isFetching,
@@ -2210,7 +2164,7 @@ function DialogRenderer({
   invalidateQueryKey,
   queryId
 }) {
-  const props = __rest$1(config, ["type"]);
+  const props = __rest(config, ["type"]);
   if (config.type === "dialog") return jsxRuntime.jsx(ItemEditDialog, Object.assign({}, props, {
     queryId: queryId,
     invalidateQueryKey: invalidateQueryKey,
@@ -2265,7 +2219,7 @@ function ItemDeleteDialog(_a) {
       show,
       onClose
     } = _a,
-    props = __rest$1(_a, ["title", "actionButtonLabel", "itemLabel", "queryId", "api", "apiFn", "invalidateQueriesOnSuccess", "invalidateQueryKey", "size", "md_boxSizing", "msg", "show", "onClose"]);
+    props = __rest(_a, ["title", "actionButtonLabel", "itemLabel", "queryId", "api", "apiFn", "invalidateQueriesOnSuccess", "invalidateQueryKey", "size", "md_boxSizing", "msg", "show", "onClose"]);
   const fn = apiFn ? api$1[apiFn] : api$1.delete;
   const mutation = invalidateQueriesOnSuccess ? api.useInvalidateParentMutation(fn, invalidateQueryKey !== null && invalidateQueryKey !== void 0 ? invalidateQueryKey : api$1.queryKey) : api.useApiMutation(fn, api$1.queryKey);
   const mutate = api.useMutate(mutation, {
@@ -2453,7 +2407,7 @@ function TableRowPublishPostButton$1(_a) {
       status,
       invalidateQueryKey
     } = _a,
-    props = __rest$1(_a, ["id", "api", "status", "invalidateQueryKey"]);
+    props = __rest(_a, ["id", "api", "status", "invalidateQueryKey"]);
   const isDraft = status == "draft";
   const mutation = api.useInvalidateParentMutation(isDraft ? api$1.publish : api$1.unpublish, invalidateQueryKey !== null && invalidateQueryKey !== void 0 ? invalidateQueryKey : api$1.queryKey, {
     networkMode: "always"
@@ -2515,7 +2469,7 @@ function ActionButton(_a) {
   var {
       onClick
     } = _a,
-    props = __rest$1(_a, ["onClick"]);
+    props = __rest(_a, ["onClick"]);
   const handleClick = React__default["default"].useCallback(event => {
     event === null || event === void 0 ? void 0 : event.preventDefault();
     event === null || event === void 0 ? void 0 : event.stopPropagation();
@@ -2553,7 +2507,7 @@ function useTableProps(api, table, rowActions) {
       onRowClick,
       columns: c
     } = table,
-    props = __rest$1(table, ["onRowClick", "columns"]);
+    props = __rest(table, ["onRowClick", "columns"]);
   const onRowClickHandler = React__default["default"].useCallback(item => {
     var _a;
     const config = react.runIfFn(onRowClick, item);
@@ -2617,7 +2571,7 @@ function TableView(_a) {
       subtitle,
       screen
     } = _a,
-    props = __rest$1(_a, ["queryField", "title", "subtitle", "screen"]);
+    props = __rest(_a, ["queryField", "title", "subtitle", "screen"]);
   const id = useId(queryField);
   const _screen = react.runIfFn(screen, id);
   return jsxRuntime.jsx(PageContainer, Object.assign({
@@ -2820,7 +2774,7 @@ function MultiQueryWrapper(_a) {
       config,
       tabbed
     } = _a,
-    props = __rest$1(_a, ["queries", "config", "tabbed"]);
+    props = __rest(_a, ["queries", "config", "tabbed"]);
   const {
     data,
     isFetching,
@@ -2848,7 +2802,7 @@ function ScreenRenderer(_a) {
       config,
       tabbed
     } = _a,
-    props = __rest$1(_a, ["config", "tabbed"]);
+    props = __rest(_a, ["config", "tabbed"]);
   if (config.type === "table") return jsxRuntime.jsx(TableView, Object.assign({}, config, props));
   if (config.type === "tabbed") return jsxRuntime.jsx(TabbedView, Object.assign({}, config, props));
   if (config.type === "details") return jsxRuntime.jsx(DetailsView, Object.assign({}, config, {
@@ -2868,7 +2822,7 @@ function ScreenRenderer(_a) {
  *
  */
 function Content(_a) {
-  var props = __rest$1(_a, []);
+  var props = __rest(_a, []);
   return jsxRuntime.jsx("div", Object.assign({
     w: "100%",
     h: "100%",
@@ -2900,7 +2854,7 @@ function MenuButton(_a) {
       selected,
       children
     } = _a,
-    props = __rest$1(_a, ["depth", "darkMode", "icon", "selected", "children"]);
+    props = __rest(_a, ["depth", "darkMode", "icon", "selected", "children"]);
   return jsxRuntime.jsxs(ui.Button, Object.assign({
     as: "li",
     minH: "8",
@@ -2927,7 +2881,7 @@ function MenuButton(_a) {
   }));
 }
 
-function MenuItem(_a) {
+function MenuItem$1(_a) {
   var {
       icon,
       path,
@@ -2935,7 +2889,7 @@ function MenuItem(_a) {
       darkMode,
       subMenu
     } = _a,
-    props = __rest$1(_a, ["icon", "path", "depth", "darkMode", "subMenu"]);
+    props = __rest(_a, ["icon", "path", "depth", "darkMode", "subMenu"]);
   const location = reactRouterDom.useLocation();
   const selected = path == "/" ? location.pathname == "/" : location.pathname.startsWith(path.startsWith("/") ? path : `/${path}`);
   const match = reactRouterDom.useMatch("/" + path) != null;
@@ -2954,7 +2908,7 @@ function MenuItem(_a) {
       }, props)), match && jsxRuntime.jsx(SelectedIndicator, {
         darkMode: darkMode
       })]
-    }), subMenu === null || subMenu === void 0 ? void 0 : subMenu.map((item, index) => jsxRuntime.jsx(MenuItem, {
+    }), subMenu === null || subMenu === void 0 ? void 0 : subMenu.map((item, index) => jsxRuntime.jsx(MenuItem$1, {
       icon: item.icon,
       path: item.path,
       depth: (depth !== null && depth !== void 0 ? depth : 0) + 1,
@@ -2973,7 +2927,7 @@ function NextMenuItem(_a) {
       darkMode,
       subMenu
     } = _a,
-    props = __rest$1(_a, ["icon", "path", "depth", "darkMode", "subMenu"]);
+    props = __rest(_a, ["icon", "path", "depth", "darkMode", "subMenu"]);
   const {
     pathname
   } = router.useRouter();
@@ -3014,8 +2968,8 @@ function Menu(_a) {
       config,
       useNextRouter
     } = _a,
-    props = __rest$1(_a, ["darkMode", "config", "useNextRouter"]);
-  const Comp = useNextRouter ? NextMenuItem : MenuItem;
+    props = __rest(_a, ["darkMode", "config", "useNextRouter"]);
+  const Comp = useNextRouter ? NextMenuItem : MenuItem$1;
   return jsxRuntime.jsx("ul", Object.assign({}, props, {
     children: config.map((item, index) => {
       if (item.type == "divider") return jsxRuntime.jsx(Divider, {
@@ -3050,17 +3004,160 @@ function Divider({
   });
 }
 
+function UserBlock({
+  color,
+  darkMode,
+  menuConfig,
+  path
+}) {
+  var _a, _b, _c, _d;
+  const {
+    isLoading,
+    user
+  } = auth.useSessionUser();
+  const navigate = reactRouterDom.useNavigate();
+  const handleClick = React__default["default"].useCallback(() => navigate(path), [navigate, path]);
+  if (isLoading) return null;
+  return 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: [jsxRuntime.jsx(ui.Avatar, {
+      size: "sm",
+      src: (_b = (_a = user === null || user === void 0 ? void 0 : user.media) === null || _a === void 0 ? void 0 : _a.url) !== null && _b !== void 0 ? _b : "",
+      name: `${user === null || user === void 0 ? void 0 : user.firstname} ${user === null || user === void 0 ? void 0 : user.lastname}`
+    }), jsxRuntime.jsx("span", {
+      flexGrow: true,
+      ms: "2",
+      children: `${capitalize((_d = (_c = user === null || user === void 0 ? void 0 : user.firstname) !== null && _c !== void 0 ? _c : user === null || user === void 0 ? void 0 : user.lastname) !== null && _d !== void 0 ? _d : "Jonathan")}`
+    }), 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: mdiCog,
+      onClick: handleClick
+    }), jsxRuntime.jsx(OverflowMenu, {
+      color: color,
+      darkMode: darkMode,
+      menuConfig: menuConfig
+    })]
+  });
+}
+function OverflowMenu({
+  color,
+  darkMode,
+  menuConfig
+}) {
+  const [showPopup, setShowPopup] = React__default["default"].useState(false);
+  const navigate = reactRouterDom.useNavigate();
+  const logout = auth.useSessionLogout(false);
+  return jsxRuntime.jsx(jsxRuntime.Fragment, {
+    children: jsxRuntime.jsxs(ui.Popup, {
+      show: showPopup,
+      position: "relative",
+      side: "bottom-end",
+      onClick: e => {
+        e.preventDefault();
+        e.stopPropagation();
+        setShowPopup(show => !show);
+      },
+      onHide: () => setShowPopup(false),
+      children: [jsxRuntime.jsx(ui.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"}`
+      }), 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 jsxRuntime.jsx(MenuItem, {
+              icon: item.icon,
+              onClick: () => navigate(item.path),
+              children: item.label
+            }, index);
+          }
+          return null;
+        }), jsxRuntime.jsx(MenuItem, {
+          icon: mdiLogout,
+          onClick: logout,
+          children: "Logout"
+        })]
+      })]
+    })
+  });
+}
+function MenuItem(_a) {
+  var {
+      icon,
+      onClick,
+      children
+    } = _a,
+    props = __rest(_a, ["icon", "onClick", "children"]);
+  const handleClick = React__default["default"].useCallback(e => {
+    e.preventDefault();
+    e.stopPropagation();
+    onClick === null || onClick === void 0 ? void 0 : onClick(e);
+  }, []);
+  return jsxRuntime.jsxs(ui.Button, Object.assign({
+    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 && jsxRuntime.jsx(ui.Icon, {
+      path: icon,
+      size: "md"
+    }), children]
+  }));
+}
+
 function Sidebar(_a) {
   var {
       show,
       logo,
       title,
       menuConfig,
+      userMenuConfig,
+      userSettingsPath,
       color,
       darkMode
     } = _a,
-    props = __rest$1(_a, ["show", "logo", "title", "menuConfig", "color", "darkMode"]);
+    props = __rest(_a, ["show", "logo", "title", "menuConfig", "userMenuConfig", "userSettingsPath", "color", "darkMode"]);
   return jsxRuntime.jsxs("div", Object.assign({
+    dflex: true,
+    flexCol: true,
     w: "64",
     minH: "screen",
     p: "0",
@@ -3088,6 +3185,14 @@ function Sidebar(_a) {
       p: "4",
       darkMode: darkMode,
       config: menuConfig
+    }), jsxRuntime.jsx("div", {
+      p: "2",
+      children: jsxRuntime.jsx(UserBlock, {
+        darkMode: darkMode,
+        color: color,
+        menuConfig: userMenuConfig,
+        path: userSettingsPath
+      })
     })]
   }));
 }
@@ -3097,7 +3202,7 @@ function Logo(_a) {
       height,
       darkMode
     } = _a,
-    props = __rest$1(_a, ["width", "height", "darkMode"]);
+    props = __rest(_a, ["width", "height", "darkMode"]);
   return jsxRuntime.jsx("div", Object.assign({}, props, {
     children: jsxRuntime.jsx(Image__default["default"], {
       src: `/logo_${darkMode ? "light" : "dark"}.png`,
@@ -3116,9 +3221,11 @@ function AdminLayout(_a) {
       darkMode,
       logo,
       title,
-      menuConfig
+      menuConfig,
+      userMenuConfig,
+      userSettingsPath
     } = _a,
-    props = __rest$1(_a, ["color", "darkMode", "logo", "title", "menuConfig"]);
+    props = __rest(_a, ["color", "darkMode", "logo", "title", "menuConfig", "userMenuConfig", "userSettingsPath"]);
   return jsxRuntime.jsxs("div", Object.assign({
     w: "full",
     h: "screen",
@@ -3131,7 +3238,9 @@ function AdminLayout(_a) {
       darkMode: darkMode,
       logo: logo,
       title: title,
-      menuConfig: menuConfig
+      menuConfig: menuConfig,
+      userMenuConfig: userMenuConfig,
+      userSettingsPath: userSettingsPath
     }), jsxRuntime.jsx("div", {
       w: "screen",
       py: "2",
@@ -3149,7 +3258,9 @@ function LeftPanel({
   darkMode,
   logo,
   title,
-  menuConfig
+  menuConfig,
+  userMenuConfig,
+  userSettingsPath
 }) {
   const [isOpen, __, toggle] = hooks.useBoolean(true);
   useHotkeys('ctrl+t', () => toggle(), [toggle]);
@@ -3164,7 +3275,9 @@ function LeftPanel({
       darkMode: darkMode,
       logo: logo,
       title: title,
-      menuConfig: menuConfig
+      menuConfig: menuConfig,
+      userMenuConfig: userMenuConfig,
+      userSettingsPath: userSettingsPath
     }), jsxRuntime.jsx(ui.IconButton, {
       icon: mdiArrowLeft,
       transition: "all",
@@ -3208,7 +3321,7 @@ function AttachDialog(_a) {
       formikProps,
       getItemName
     } = _a,
-    props = __rest$1(_a, ["queryId", "queryKey", "queryFetchFn", "queryFetchAllKey", "queryFetchAllFn", "querySaveFn", "matchKey", "size", "show", "onClose", "itemLabel", "onSuccess", "onFetchError", "fetchErrorMsg", "onSaveError", "saveErrorMsg", "invalidateQueriesOnSuccess", "retryText", "cancelLabel", "saveLabel", "formikProps", "getItemName"]);
+    props = __rest(_a, ["queryId", "queryKey", "queryFetchFn", "queryFetchAllKey", "queryFetchAllFn", "querySaveFn", "matchKey", "size", "show", "onClose", "itemLabel", "onSuccess", "onFetchError", "fetchErrorMsg", "onSaveError", "saveErrorMsg", "invalidateQueriesOnSuccess", "retryText", "cancelLabel", "saveLabel", "formikProps", "getItemName"]);
   const queryClient = reactQuery.useQueryClient();
   const {
     data: attached,
@@ -3334,7 +3447,7 @@ function ListItem(_a) {
       value,
       checked
     } = _a,
-    props = __rest$1(_a, ["label", "value", "checked"]);
+    props = __rest(_a, ["label", "value", "checked"]);
   return jsxRuntime.jsxs("div", Object.assign({
     dflex: true,
     alignItems: "center",
@@ -3379,7 +3492,7 @@ function FormActionDialog(_a) {
       onClose,
       formikProps
     } = _a,
-    props = __rest$1(_a, ["initialValues", "itemLabel", "queryId", "queryKey", "queryFn", "queryOptions", "onSuccess", "successMsg", "showSuccessMsg", "onError", "errorMsg", "showErrorMsg", "processInput", "invalidateQueriesOnSuccess", "cancelLabel", "saveLabel", "size", "title", "form", "show", "onClose", "formikProps"]);
+    props = __rest(_a, ["initialValues", "itemLabel", "queryId", "queryKey", "queryFn", "queryOptions", "onSuccess", "successMsg", "showSuccessMsg", "onError", "errorMsg", "showErrorMsg", "processInput", "invalidateQueriesOnSuccess", "cancelLabel", "saveLabel", "size", "title", "form", "show", "onClose", "formikProps"]);
   const mutation = invalidateQueriesOnSuccess ? api.useInvalidateParentMutation(queryFn, queryKey, queryOptions) : api.useApiMutation(queryFn, queryKey, queryId, queryOptions);
   const mutate = api.useMutate(mutation, {
     onSuccess,
@@ -3431,7 +3544,7 @@ function PageSectionTitle(_a) {
   var {
       children
     } = _a,
-    props = __rest$1(_a, ["children"]);
+    props = __rest(_a, ["children"]);
   return jsxRuntime.jsx("div", Object.assign({
     trait: "typo.h6",
     mb: "5"
@@ -3445,7 +3558,7 @@ const PageStateContainer = /*#__PURE__*/React__default["default"].forwardRef((_a
       loading = false,
       children
     } = _a,
-    props = __rest$1(_a, ["loading", "children"]);
+    props = __rest(_a, ["loading", "children"]);
   return jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [loading && jsxRuntime.jsx(components.QueryLoadingState, {
       w: "full",
@@ -3467,7 +3580,7 @@ function PageSubSectionTitle(_a) {
   var {
       children
     } = _a,
-    props = __rest$1(_a, ["children"]);
+    props = __rest(_a, ["children"]);
   return jsxRuntime.jsx("div", Object.assign({
     trait: "typo.h6",
     mb: "3"
@@ -3496,7 +3609,7 @@ function StatusBadge(_a) {
   var {
       status
     } = _a,
-    props = __rest$1(_a, ["status"]);
+    props = __rest(_a, ["status"]);
   return jsxRuntime.jsx(ui.Badge, Object.assign({
     size: "sm",
     variant: "glass",
@@ -3514,7 +3627,7 @@ function TableRowActionButton(_a) {
       icon,
       children
     } = _a,
-    props = __rest$1(_a, ["icon", "children"]);
+    props = __rest(_a, ["icon", "children"]);
   return jsxRuntime.jsxs(ui.Button, Object.assign({
     dflex: true,
     alignContent: "center",
@@ -3538,7 +3651,7 @@ function TableRowViewButton(_a) {
   var {
       path
     } = _a,
-    props = __rest$1(_a, ["path"]);
+    props = __rest(_a, ["path"]);
   const openPage = React__default["default"].useCallback(event => {
     event === null || event === void 0 ? void 0 : event.preventDefault();
     event === null || event === void 0 ? void 0 : event.stopPropagation();
@@ -3554,7 +3667,7 @@ function TableRowNavigateButton(_a) {
   var {
       path
     } = _a,
-    props = __rest$1(_a, ["path"]);
+    props = __rest(_a, ["path"]);
   const navigate = reactRouterDom.useNavigate();
   const handleClick = React__default["default"].useCallback(event => {
     event === null || event === void 0 ? void 0 : event.preventDefault();
@@ -3572,7 +3685,7 @@ function TableRowActionDialogButton(_a) {
       icon,
       children
     } = _a,
-    props = __rest$1(_a, ["icon", "children"]);
+    props = __rest(_a, ["icon", "children"]);
   return jsxRuntime.jsxs(admin.DialogButton, Object.assign({
     dflex: true,
     alignContent: "center",
@@ -3596,7 +3709,7 @@ function TableRowEditButton(_a) {
   var {
       children
     } = _a,
-    props = __rest$1(_a, ["children"]);
+    props = __rest(_a, ["children"]);
   return jsxRuntime.jsx(TableRowActionDialogButton, Object.assign({
     icon: mdiPencil
   }, props, {
@@ -3608,7 +3721,7 @@ function TableRowDeleteButton(_a) {
   var {
       children
     } = _a,
-    props = __rest$1(_a, ["children"]);
+    props = __rest(_a, ["children"]);
   return jsxRuntime.jsx(TableRowActionDialogButton, Object.assign({
     icon: mdiDelete
   }, props, {
@@ -3625,7 +3738,7 @@ function TableRowActionBar(_a) {
       deleteDialog,
       children
     } = _a,
-    props = __rest$1(_a, ["publishId", "viewPath", "navigatePath", "editDialog", "deleteDialog", "children"]);
+    props = __rest(_a, ["publishId", "viewPath", "navigatePath", "editDialog", "deleteDialog", "children"]);
   return jsxRuntime.jsxs("div", Object.assign({
     dflex: true,
     spaceX: "1",
@@ -3650,7 +3763,7 @@ function TableRowPublishPostButton(_a) {
       status,
       invalidateQueryKey
     } = _a,
-    props = __rest$1(_a, ["id", "api", "status", "invalidateQueryKey"]);
+    props = __rest(_a, ["id", "api", "status", "invalidateQueryKey"]);
   const isDraft = status == "draft";
   const mutation = api.useInvalidateParentMutation(isDraft ? api$1.publish : api$1.unpublish, invalidateQueryKey !== null && invalidateQueryKey !== void 0 ? invalidateQueryKey : api$1.queryKey, {
     networkMode: "always"