@compill/admin 1.0.80 → 1.0.82

package/index.esm.js

@@ -1,10 +1,10 @@
 import { jsx, jsxs, Fragment } from '@soperio/jsx-runtime';
-import { Icon, Button, IconButton, Container, Tile, Popover, Collapse, Modal, Checkbox, Badge } from '@valerya/ui';
+import { Icon, Button, IconButton, Container, Tile, Popover, Collapse, Modal, Avatar, Popup, Checkbox, Badge } from '@valerya/ui';
 import Link from 'next/link';
 import React, { useRef, useCallback, useContext as useContext$2, useLayoutEffect, useEffect, createContext } from 'react';
 import { INVALIDATE_API, API } from '@compill/admin-api';
 import { useApiMutation, useMutate, useInvalidateMutation, useApiQuery, useInvalidateQuery, useInvalidateParentMutation, useApiQueries } from '@compill/api';
-import { useFormikContext, Field, Formik, Form } from 'formik';
+import { useFormikContext, Formik, Form } from 'formik';
 import { useNavigate, useParams, Outlet, useLocation, useMatch, Link as Link$1 } from 'react-router-dom';
 import { ButtonBarButton as ButtonBarButton$1, ButtonBarSubmitButton as ButtonBarSubmitButton$1, PageSectionTitle as PageSectionTitle$1, ButtonBar as ButtonBar$1, ButtonBarDialogButton as ButtonBarDialogButton$1, TableRowActionButton as TableRowActionButton$1, DialogButton as DialogButton$1 } from '@compill/admin';
 import { toast } from 'react-toastify';
@@ -12,7 +12,8 @@ import 'react/jsx-runtime';
 import { FlexCenter, QueryLoadingState, RetryOnError, TabContainer, ModalLoadingOverlay } from '@compill/components';
 import { FormProvider, TextArea, FormRenderer, mergeInitialFormValues, FieldLabel, SubmitButton } from '@compill/form';
 import { createContext as createContext$1, runIfFn, isFunction } from '@soperio/react';
-import { Editor } from '@compill/editor';
+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';
@@ -20,6 +21,7 @@ import { useOpenLink, useBoolean } from '@compill/hooks';
 import { AppEnv } from '@compill/env';
 import { useQueryClient } from '@tanstack/react-query';
 import Image from 'next/image';
+import { useSessionUser, useSessionLogout } from '@compill/auth';
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -36,7 +38,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];
@@ -67,7 +69,7 @@ function SectionTitle(_a) {
   var {
       children
     } = _a,
-    props = __rest$1(_a, ["children"]);
+    props = __rest(_a, ["children"]);
   return jsx("h2", Object.assign({
     textSize: "xl",
     fontWeight: "600",
@@ -83,11 +85,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";
@@ -100,7 +105,7 @@ function Breadcrumbs(_a) {
   var {
       breadcrumbs
     } = _a,
-    props = __rest$1(_a, ["breadcrumbs"]);
+    props = __rest(_a, ["breadcrumbs"]);
   return jsx("div", Object.assign({
     dflex: true,
     alignItems: "center",
@@ -137,7 +142,7 @@ function DialogButton(_a) {
   var {
       buildDialog
     } = _a,
-    props = __rest$1(_a, ["buildDialog"]);
+    props = __rest(_a, ["buildDialog"]);
   const [showDialog, setShowDialog] = React.useState(false);
   const onShowDialog = React.useCallback(event => {
     event === null || event === void 0 ? void 0 : event.preventDefault();
@@ -158,7 +163,7 @@ function ButtonBar(_a) {
   var {
       children
     } = _a,
-    props = __rest$1(_a, ["children"]);
+    props = __rest(_a, ["children"]);
   return jsx("div", Object.assign({
     dflex: true,
     border: "1px",
@@ -176,7 +181,7 @@ const ButtonBarButton = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       icon,
       children
     } = _a,
-    props = __rest$1(_a, ["icon", "children"]);
+    props = __rest(_a, ["icon", "children"]);
   return jsxs(Button, Object.assign({
     scheme: "dark",
     size: "sm",
@@ -202,7 +207,7 @@ const ButtonBarSubmitButton = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       icon,
       children
     } = _a,
-    props = __rest$1(_a, ["useDirty", "disabled", "icon", "children"]);
+    props = __rest(_a, ["useDirty", "disabled", "icon", "children"]);
   const {
     dirty,
     handleSubmit
@@ -236,7 +241,7 @@ function ButtonBarDialogButton(_a) {
       icon,
       children
     } = _a,
-    props = __rest$1(_a, ["icon", "children"]);
+    props = __rest(_a, ["icon", "children"]);
   return jsxs(DialogButton, Object.assign({
     scheme: "dark",
     size: "sm",
@@ -258,7 +263,7 @@ function InvalidateButton(_a) {
   var {
       pathOrPermalink
     } = _a,
-    props = __rest$1(_a, ["pathOrPermalink"]);
+    props = __rest(_a, ["pathOrPermalink"]);
   const api = INVALIDATE_API.new(pathOrPermalink);
   const mutation = useApiMutation(api.invalidate, api.queryKey);
   const invalidate = useMutate(mutation, {
@@ -276,7 +281,7 @@ function NavigateButton(_a) {
   var {
       path
     } = _a,
-    props = __rest$1(_a, ["path"]);
+    props = __rest(_a, ["path"]);
   const navigate = useNavigate();
   const handleClick = React.useCallback(() => {
     navigate(path);
@@ -302,7 +307,7 @@ function PublishButton(_a) {
       queryId,
       api
     } = _a,
-    props = __rest$1(_a, ["status", "queryId", "api"]);
+    props = __rest(_a, ["status", "queryId", "api"]);
   const isDraft = status == "draft";
   const mutation = useInvalidateMutation(isDraft ? api.publish : api.unpublish, api.queryKey, queryId, {
     networkMode: "always"
@@ -709,7 +714,7 @@ function useHotkeys(keys, callback, options, dependencies) {
 
 function UpdateButton(_a) {
   var _b;
-  var props = __rest$1(_a, []);
+  var props = __rest(_a, []);
   const {
     dirty,
     handleSubmit
@@ -735,7 +740,7 @@ function ViewButton(_a) {
       path,
       icon
     } = _a,
-    props = __rest$1(_a, ["path", "icon"]);
+    props = __rest(_a, ["path", "icon"]);
   const openPage = React.useCallback(() => {
     window.open(path, '_blank');
   }, [path]);
@@ -794,7 +799,7 @@ function PageContainer(_a) {
   var {
       children
     } = _a,
-    props = __rest$1(_a, ["children"]);
+    props = __rest(_a, ["children"]);
   return jsx(Container, Object.assign({
     center: true,
     dflex: true,
@@ -805,68 +810,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 jsx(Field, {
-    name: name,
-    children: ({
-      field,
-      meta
-    }) => jsx(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 jsx(Tile, Object.assign({
     scheme: "light",
     p: "5"
@@ -879,7 +827,8 @@ function PageContentEditor(_a) {
   var {
       name
     } = _a,
-    props = __rest$1(_a, ["name"]);
+    props = __rest(_a, ["name"]);
+  const extensions = [ImageExtension];
   return jsx(PageMain, Object.assign({
     h: "min"
   }, props, {
@@ -889,7 +838,8 @@ function PageContentEditor(_a) {
       maxW: props.maxW,
       // w={props.w}
       name: name,
-      placeHolder: "Write here..."
+      placeHolder: "Write here...",
+      extensions: extensions
     })
   }));
 }
@@ -903,7 +853,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,
@@ -929,7 +879,7 @@ function PageSidebar(_a) {
   var {
       children
     } = _a,
-    props = __rest$1(_a, ["children"]);
+    props = __rest(_a, ["children"]);
   return jsx("div", Object.assign({
     w: "112",
     minW: "112",
@@ -947,7 +897,7 @@ function PageSidebarSection(_a) {
       title,
       children
     } = _a,
-    props = __rest$1(_a, ["title", "children"]);
+    props = __rest(_a, ["title", "children"]);
   return jsxs("div", Object.assign({
     w: "full"
   }, props, {
@@ -961,7 +911,7 @@ function PageTitle(_a) {
   var {
       children
     } = _a,
-    props = __rest$1(_a, ["children"]);
+    props = __rest(_a, ["children"]);
   return jsx("div", Object.assign({
     trait: "typo.h5"
   }, props, {
@@ -975,7 +925,7 @@ function PageTopBar(_a) {
       breadcrumbs,
       children
     } = _a,
-    props = __rest$1(_a, ["title", "breadcrumbs", "children"]);
+    props = __rest(_a, ["title", "breadcrumbs", "children"]);
   return jsxs(FlexCenter, Object.assign({
     gap: "3",
     minH: "9"
@@ -1008,7 +958,7 @@ function PageTabbedTopBar(_a) {
       breadcrumbs,
       children
     } = _a,
-    props = __rest$1(_a, ["title", "breadcrumbs", "children"]);
+    props = __rest(_a, ["title", "breadcrumbs", "children"]);
   const ref = /*#__PURE__*/React.createRef();
   const {
     setContainerEl
@@ -1162,7 +1112,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.useRef(null);
   return jsx(PageQueryStateContainer, Object.assign({
@@ -1325,7 +1275,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
@@ -1354,7 +1304,7 @@ function TabbedView(_a) {
       api,
       screen
     } = _a;
-    __rest$1(_a, ["queryField", "api", "screen"]);
+    __rest(_a, ["queryField", "api", "screen"]);
   const {
     [queryField]: id
   } = useParams();
@@ -1450,7 +1400,7 @@ function TableContainer(_a) {
       columns,
       children
     } = _a,
-    props = __rest$1(_a, ["initialPageSize", "initialVisibleColumns", "columns", "children"]);
+    props = __rest(_a, ["initialPageSize", "initialVisibleColumns", "columns", "children"]);
   return jsx("div", Object.assign({
     w: "full",
     dflex: true,
@@ -1472,7 +1422,7 @@ function TableCreateButton(_a) {
       icon,
       children
     } = _a,
-    props = __rest$1(_a, ["icon", "children"]);
+    props = __rest(_a, ["icon", "children"]);
   return jsxs(ButtonBarDialogButton$1, Object.assign({}, props, {
     children: [jsx(Icon, {
       path: icon !== null && icon !== void 0 ? icon : mdiPlusThick
@@ -1481,7 +1431,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 jsxs(Popover, {
     side: "bottom-end",
@@ -1528,7 +1478,7 @@ function TableTopBar(_a) {
       title,
       children
     } = _a,
-    props = __rest$1(_a, ["title", "children"]);
+    props = __rest(_a, ["title", "children"]);
   return jsxs("div", Object.assign({
     dflex: true,
     flexRow: true,
@@ -1821,6 +1771,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,
   initialValues,
@@ -2004,7 +1958,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,
@@ -2200,7 +2154,7 @@ function DialogRenderer({
   invalidateQueryKey,
   queryId
 }) {
-  const props = __rest$1(config, ["type"]);
+  const props = __rest(config, ["type"]);
   if (config.type === "dialog") return jsx(ItemEditDialog, Object.assign({}, props, {
     queryId: queryId,
     invalidateQueryKey: invalidateQueryKey,
@@ -2255,7 +2209,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[apiFn] : api.delete;
   const mutation = invalidateQueriesOnSuccess ? useInvalidateParentMutation(fn, invalidateQueryKey !== null && invalidateQueryKey !== void 0 ? invalidateQueryKey : api.queryKey) : useApiMutation(fn, api.queryKey);
   const mutate = useMutate(mutation, {
@@ -2443,7 +2397,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 = useInvalidateParentMutation(isDraft ? api.publish : api.unpublish, invalidateQueryKey !== null && invalidateQueryKey !== void 0 ? invalidateQueryKey : api.queryKey, {
     networkMode: "always"
@@ -2505,7 +2459,7 @@ function ActionButton(_a) {
   var {
       onClick
     } = _a,
-    props = __rest$1(_a, ["onClick"]);
+    props = __rest(_a, ["onClick"]);
   const handleClick = React.useCallback(event => {
     event === null || event === void 0 ? void 0 : event.preventDefault();
     event === null || event === void 0 ? void 0 : event.stopPropagation();
@@ -2543,7 +2497,7 @@ function useTableProps(api, table, rowActions) {
       onRowClick,
       columns: c
     } = table,
-    props = __rest$1(table, ["onRowClick", "columns"]);
+    props = __rest(table, ["onRowClick", "columns"]);
   const onRowClickHandler = React.useCallback(item => {
     var _a;
     const config = runIfFn(onRowClick, item);
@@ -2607,7 +2561,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 = runIfFn(screen, id);
   return jsx(PageContainer, Object.assign({
@@ -2810,7 +2764,7 @@ function MultiQueryWrapper(_a) {
       config,
       tabbed
     } = _a,
-    props = __rest$1(_a, ["queries", "config", "tabbed"]);
+    props = __rest(_a, ["queries", "config", "tabbed"]);
   const {
     data,
     isFetching,
@@ -2838,7 +2792,7 @@ function ScreenRenderer(_a) {
       config,
       tabbed
     } = _a,
-    props = __rest$1(_a, ["config", "tabbed"]);
+    props = __rest(_a, ["config", "tabbed"]);
   if (config.type === "table") return jsx(TableView, Object.assign({}, config, props));
   if (config.type === "tabbed") return jsx(TabbedView, Object.assign({}, config, props));
   if (config.type === "details") return jsx(DetailsView, Object.assign({}, config, {
@@ -2858,7 +2812,7 @@ function ScreenRenderer(_a) {
  *
  */
 function Content(_a) {
-  var props = __rest$1(_a, []);
+  var props = __rest(_a, []);
   return jsx("div", Object.assign({
     w: "100%",
     h: "100%",
@@ -2890,7 +2844,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 jsxs(Button, Object.assign({
     as: "li",
     minH: "8",
@@ -2917,7 +2871,7 @@ function MenuButton(_a) {
   }));
 }
 
-function MenuItem(_a) {
+function MenuItem$1(_a) {
   var {
       icon,
       path,
@@ -2925,7 +2879,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 = useLocation();
   const selected = path == "/" ? location.pathname == "/" : location.pathname.startsWith(path.startsWith("/") ? path : `/${path}`);
   const match = useMatch("/" + path) != null;
@@ -2944,7 +2898,7 @@ function MenuItem(_a) {
       }, props)), match && jsx(SelectedIndicator, {
         darkMode: darkMode
       })]
-    }), subMenu === null || subMenu === void 0 ? void 0 : subMenu.map((item, index) => jsx(MenuItem, {
+    }), subMenu === null || subMenu === void 0 ? void 0 : subMenu.map((item, index) => jsx(MenuItem$1, {
       icon: item.icon,
       path: item.path,
       depth: (depth !== null && depth !== void 0 ? depth : 0) + 1,
@@ -2963,7 +2917,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
   } = useRouter();
@@ -3004,8 +2958,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 jsx("ul", Object.assign({}, props, {
     children: config.map((item, index) => {
       if (item.type == "divider") return jsx(Divider, {
@@ -3040,17 +2994,160 @@ function Divider({
   });
 }
 
+function UserBlock({
+  color,
+  darkMode,
+  menuConfig,
+  path
+}) {
+  var _a, _b, _c, _d;
+  const {
+    isLoading,
+    user
+  } = useSessionUser();
+  const navigate = useNavigate();
+  const handleClick = React.useCallback(() => navigate(path), [navigate, path]);
+  if (isLoading) return null;
+  return 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: [jsx(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}`
+    }), 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")}`
+    }), 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
+    }), jsx(OverflowMenu, {
+      color: color,
+      darkMode: darkMode,
+      menuConfig: menuConfig
+    })]
+  });
+}
+function OverflowMenu({
+  color,
+  darkMode,
+  menuConfig
+}) {
+  const [showPopup, setShowPopup] = React.useState(false);
+  const navigate = useNavigate();
+  const logout = useSessionLogout(false);
+  return jsx(Fragment, {
+    children: jsxs(Popup, {
+      show: showPopup,
+      position: "relative",
+      side: "bottom-end",
+      onClick: e => {
+        e.preventDefault();
+        e.stopPropagation();
+        setShowPopup(show => !show);
+      },
+      onHide: () => setShowPopup(false),
+      children: [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"}`
+      }), 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 jsx(MenuItem, {
+              icon: item.icon,
+              onClick: () => navigate(item.path),
+              children: item.label
+            }, index);
+          }
+          return null;
+        }), 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.useCallback(e => {
+    e.preventDefault();
+    e.stopPropagation();
+    onClick === null || onClick === void 0 ? void 0 : onClick(e);
+  }, []);
+  return jsxs(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 && jsx(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 jsxs("div", Object.assign({
+    dflex: true,
+    flexCol: true,
     w: "64",
     minH: "screen",
     p: "0",
@@ -3078,6 +3175,14 @@ function Sidebar(_a) {
       p: "4",
       darkMode: darkMode,
       config: menuConfig
+    }), jsx("div", {
+      p: "2",
+      children: jsx(UserBlock, {
+        darkMode: darkMode,
+        color: color,
+        menuConfig: userMenuConfig,
+        path: userSettingsPath
+      })
     })]
   }));
 }
@@ -3087,7 +3192,7 @@ function Logo(_a) {
       height,
       darkMode
     } = _a,
-    props = __rest$1(_a, ["width", "height", "darkMode"]);
+    props = __rest(_a, ["width", "height", "darkMode"]);
   return jsx("div", Object.assign({}, props, {
     children: jsx(Image, {
       src: `/logo_${darkMode ? "light" : "dark"}.png`,
@@ -3106,9 +3211,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 jsxs("div", Object.assign({
     w: "full",
     h: "screen",
@@ -3121,7 +3228,9 @@ function AdminLayout(_a) {
       darkMode: darkMode,
       logo: logo,
       title: title,
-      menuConfig: menuConfig
+      menuConfig: menuConfig,
+      userMenuConfig: userMenuConfig,
+      userSettingsPath: userSettingsPath
     }), jsx("div", {
       w: "screen",
       py: "2",
@@ -3139,7 +3248,9 @@ function LeftPanel({
   darkMode,
   logo,
   title,
-  menuConfig
+  menuConfig,
+  userMenuConfig,
+  userSettingsPath
 }) {
   const [isOpen, __, toggle] = useBoolean(true);
   useHotkeys('ctrl+t', () => toggle(), [toggle]);
@@ -3154,7 +3265,9 @@ function LeftPanel({
       darkMode: darkMode,
       logo: logo,
       title: title,
-      menuConfig: menuConfig
+      menuConfig: menuConfig,
+      userMenuConfig: userMenuConfig,
+      userSettingsPath: userSettingsPath
     }), jsx(IconButton, {
       icon: mdiArrowLeft,
       transition: "all",
@@ -3198,7 +3311,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 = useQueryClient();
   const {
     data: attached,
@@ -3324,7 +3437,7 @@ function ListItem(_a) {
       value,
       checked
     } = _a,
-    props = __rest$1(_a, ["label", "value", "checked"]);
+    props = __rest(_a, ["label", "value", "checked"]);
   return jsxs("div", Object.assign({
     dflex: true,
     alignItems: "center",
@@ -3369,7 +3482,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 ? useInvalidateParentMutation(queryFn, queryKey, queryOptions) : useApiMutation(queryFn, queryKey, queryId, queryOptions);
   const mutate = useMutate(mutation, {
     onSuccess,
@@ -3421,7 +3534,7 @@ function PageSectionTitle(_a) {
   var {
       children
     } = _a,
-    props = __rest$1(_a, ["children"]);
+    props = __rest(_a, ["children"]);
   return jsx("div", Object.assign({
     trait: "typo.h6",
     mb: "5"
@@ -3435,7 +3548,7 @@ const PageStateContainer = /*#__PURE__*/React.forwardRef((_a, ref) => {
       loading = false,
       children
     } = _a,
-    props = __rest$1(_a, ["loading", "children"]);
+    props = __rest(_a, ["loading", "children"]);
   return jsxs(Fragment, {
     children: [loading && jsx(QueryLoadingState, {
       w: "full",
@@ -3457,7 +3570,7 @@ function PageSubSectionTitle(_a) {
   var {
       children
     } = _a,
-    props = __rest$1(_a, ["children"]);
+    props = __rest(_a, ["children"]);
   return jsx("div", Object.assign({
     trait: "typo.h6",
     mb: "3"
@@ -3486,7 +3599,7 @@ function StatusBadge(_a) {
   var {
       status
     } = _a,
-    props = __rest$1(_a, ["status"]);
+    props = __rest(_a, ["status"]);
   return jsx(Badge, Object.assign({
     size: "sm",
     variant: "glass",
@@ -3504,7 +3617,7 @@ function TableRowActionButton(_a) {
       icon,
       children
     } = _a,
-    props = __rest$1(_a, ["icon", "children"]);
+    props = __rest(_a, ["icon", "children"]);
   return jsxs(Button, Object.assign({
     dflex: true,
     alignContent: "center",
@@ -3528,7 +3641,7 @@ function TableRowViewButton(_a) {
   var {
       path
     } = _a,
-    props = __rest$1(_a, ["path"]);
+    props = __rest(_a, ["path"]);
   const openPage = React.useCallback(event => {
     event === null || event === void 0 ? void 0 : event.preventDefault();
     event === null || event === void 0 ? void 0 : event.stopPropagation();
@@ -3544,7 +3657,7 @@ function TableRowNavigateButton(_a) {
   var {
       path
     } = _a,
-    props = __rest$1(_a, ["path"]);
+    props = __rest(_a, ["path"]);
   const navigate = useNavigate();
   const handleClick = React.useCallback(event => {
     event === null || event === void 0 ? void 0 : event.preventDefault();
@@ -3562,7 +3675,7 @@ function TableRowActionDialogButton(_a) {
       icon,
       children
     } = _a,
-    props = __rest$1(_a, ["icon", "children"]);
+    props = __rest(_a, ["icon", "children"]);
   return jsxs(DialogButton$1, Object.assign({
     dflex: true,
     alignContent: "center",
@@ -3586,7 +3699,7 @@ function TableRowEditButton(_a) {
   var {
       children
     } = _a,
-    props = __rest$1(_a, ["children"]);
+    props = __rest(_a, ["children"]);
   return jsx(TableRowActionDialogButton, Object.assign({
     icon: mdiPencil
   }, props, {
@@ -3598,7 +3711,7 @@ function TableRowDeleteButton(_a) {
   var {
       children
     } = _a,
-    props = __rest$1(_a, ["children"]);
+    props = __rest(_a, ["children"]);
   return jsx(TableRowActionDialogButton, Object.assign({
     icon: mdiDelete
   }, props, {
@@ -3615,7 +3728,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 jsxs("div", Object.assign({
     dflex: true,
     spaceX: "1",
@@ -3640,7 +3753,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 = useInvalidateParentMutation(isDraft ? api.publish : api.unpublish, invalidateQueryKey !== null && invalidateQueryKey !== void 0 ? invalidateQueryKey : api.queryKey, {
     networkMode: "always"