@compill/admin 1.0.81 → 1.0.82

package/index.cjs.js

@@ -25,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 }; }
 
@@ -94,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";
@@ -1777,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,
@@ -2873,7 +2881,7 @@ function MenuButton(_a) {
   }));
 }
 
-function MenuItem(_a) {
+function MenuItem$1(_a) {
   var {
       icon,
       path,
@@ -2900,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,
@@ -2961,7 +2969,7 @@ function Menu(_a) {
       useNextRouter
     } = _a,
     props = __rest(_a, ["darkMode", "config", "useNextRouter"]);
-  const Comp = useNextRouter ? NextMenuItem : MenuItem;
+  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, {
@@ -2996,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(_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",
@@ -3034,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
+      })
     })]
   }));
 }
@@ -3062,9 +3221,11 @@ function AdminLayout(_a) {
       darkMode,
       logo,
       title,
-      menuConfig
+      menuConfig,
+      userMenuConfig,
+      userSettingsPath
     } = _a,
-    props = __rest(_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",
@@ -3077,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",
@@ -3095,7 +3258,9 @@ function LeftPanel({
   darkMode,
   logo,
   title,
-  menuConfig
+  menuConfig,
+  userMenuConfig,
+  userSettingsPath
 }) {
   const [isOpen, __, toggle] = hooks.useBoolean(true);
   useHotkeys('ctrl+t', () => toggle(), [toggle]);
@@ -3110,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",

package/index.esm.js

@@ -1,5 +1,5 @@
 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';
@@ -21,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.
@@ -84,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";
@@ -1767,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,
@@ -2863,7 +2871,7 @@ function MenuButton(_a) {
   }));
 }
 
-function MenuItem(_a) {
+function MenuItem$1(_a) {
   var {
       icon,
       path,
@@ -2890,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,
@@ -2951,7 +2959,7 @@ function Menu(_a) {
       useNextRouter
     } = _a,
     props = __rest(_a, ["darkMode", "config", "useNextRouter"]);
-  const Comp = useNextRouter ? NextMenuItem : MenuItem;
+  const Comp = useNextRouter ? NextMenuItem : MenuItem$1;
   return jsx("ul", Object.assign({}, props, {
     children: config.map((item, index) => {
       if (item.type == "divider") return jsx(Divider, {
@@ -2986,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(_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",
@@ -3024,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
+      })
     })]
   }));
 }
@@ -3052,9 +3211,11 @@ function AdminLayout(_a) {
       darkMode,
       logo,
       title,
-      menuConfig
+      menuConfig,
+      userMenuConfig,
+      userSettingsPath
     } = _a,
-    props = __rest(_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",
@@ -3067,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",
@@ -3085,7 +3248,9 @@ function LeftPanel({
   darkMode,
   logo,
   title,
-  menuConfig
+  menuConfig,
+  userMenuConfig,
+  userSettingsPath
 }) {
   const [isOpen, __, toggle] = useBoolean(true);
   useHotkeys('ctrl+t', () => toggle(), [toggle]);
@@ -3100,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",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@compill/admin",
-    "version": "1.0.81",
+    "version": "1.0.82",
     "module": "./index.esm.js",
     "main": "./index.cjs.js"
 }

package/src/lib/layout/AdminLayout.d.ts

@@ -7,6 +7,8 @@ interface LayoutProps extends SoperioComponent, ParentComponent {
     logo?: React.ReactNode;
     title?: string;
     menuConfig: MenuConfig;
+    userMenuConfig?: MenuConfig;
+    userSettingsPath: string;
 }
-export declare function AdminLayout({ color, darkMode, logo, title, menuConfig, ...props }: LayoutProps): JSX.Element;
+export declare function AdminLayout({ color, darkMode, logo, title, menuConfig, userMenuConfig, userSettingsPath, ...props }: LayoutProps): JSX.Element;
 export {};

package/src/lib/layout/Sidebar.d.ts

@@ -8,8 +8,10 @@ interface SidebarProps extends SoperioComponent, ParentComponent {
     logo?: React.ReactNode;
     title?: string;
     menuConfig: MenuConfig;
+    userMenuConfig?: MenuConfig;
+    userSettingsPath: string;
 }
-export declare function Sidebar({ show, logo, title, menuConfig, color, darkMode, ...props }: SidebarProps): JSX.Element;
+export declare function Sidebar({ show, logo, title, menuConfig, userMenuConfig, userSettingsPath, color, darkMode, ...props }: SidebarProps): JSX.Element;
 interface LogoProps extends SoperioComponent, ParentComponent {
     width: number;
     height: number;

package/src/lib/layout/menu/UserBlock.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { MenuConfig } from "@compill/admin";
+interface UserBlockProps {
+    color: string;
+    darkMode?: boolean;
+    menuConfig?: MenuConfig;
+    path: string;
+}
+export declare function UserBlock({ color, darkMode, menuConfig, path }: UserBlockProps): JSX.Element | null;
+export {};