tenjin-ui-kit 0.3.70 → 0.3.72-dev

package/components/layout/sidebar/style.js

@@ -0,0 +1,149 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _iconsMaterial = require("@mui/icons-material");
+var _styles = require("@mui/styles");
+var _system = require("@mui/system");
+var _responsiveTheme = _interopRequireDefault(require("../../../themes/responsiveTheme"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = (0, _styles.makeStyles)(() => ({
+  subHeader: {
+    textTransform: "uppercase",
+    fontSize: _responsiveTheme.default.typography.fontSize - 2,
+    color: "rgba(0,0,0,0.5)",
+    fontWeight: 500
+  },
+  link: {
+    textDecoration: "none"
+  },
+  listItemText: {
+    color: "".concat(_responsiveTheme.default.palette.primary.main, " !important"),
+    fontWeight: "500 !important"
+  },
+  expanded: {
+    width: "200px"
+  },
+  collapsed: {
+    width: "72px"
+  },
+  collapsedFlatMenuItem: {
+    paddingLeft: "0",
+    paddingRight: "0",
+    display: "flex !important",
+    alignItems: "center !important",
+    justifyContent: "center !important",
+    "& .MuiListItemIcon-root": {
+      minWidth: "10px"
+    }
+  },
+  collapsedFlatMenuItemText: {
+    display: "none !important"
+  },
+  flatMenuItem: {
+    height: "48px",
+    borderRadius: "7px !important"
+  },
+  selectedFlatMenuItem: {
+    backgroundColor: "".concat(_responsiveTheme.default.palette.primary.main, " !important"),
+    color: "#fff !important"
+  },
+  selectedGroupMenuItem: {
+    backgroundColor: "".concat(_responsiveTheme.default.palette.primary.main, " !important"),
+    color: "#fff !important",
+    borderRadius: "5px !important"
+  },
+  selectedFlatMenuIcon: {
+    color: "#fff !important"
+  },
+  selectedFlatMenuItemText: {
+    color: "#fff !important"
+  },
+  projectMenuMainWrapper: {
+    paddingTop: "0.5rem",
+    // padding: "7px",
+    display: "inline-block",
+    width: "100%"
+  },
+  projectMenuHeader: {
+    color: "#44409A",
+    fontFamily: "sans-serif",
+    fontSize: "18px !important",
+    lineHeight: "24px",
+    display: "flex",
+    justifyContent: "center",
+    VerticalAlignCenter: true
+  },
+  selectedProjectMenuItem: {
+    backgroundColor: "".concat(_responsiveTheme.default.palette.primary.main, " !important"),
+    color: "#fff !important",
+    borderRadius: "5px !important",
+    fontWeight: 600
+    // fontSize: "16px !important",
+  },
+  projectListText: {
+    color: "".concat(_responsiveTheme.default.palette.primary.main, " !important"),
+    marginLeft: "24px",
+    fontSize: "14px !important",
+    fontWeight: 600
+  },
+  projectListIcon: {
+    color: "".concat(_responsiveTheme.default.palette.primary.main, " !important"),
+    display: "flex",
+    alignItems: "center",
+    width: "1rem",
+    height: "1rem"
+  },
+  selectedProjectMenuItemText: {
+    color: "#fff !important"
+    // fontSize: "14px !important",
+    // fontWeight: 600,
+  },
+  selectedProjectMenuItemIcon: {
+    color: "#fff !important",
+    display: "flex",
+    alignItems: "center",
+    width: "1rem",
+    height: "1rem"
+  },
+  subHeaderIcon: {
+    color: "#44409A",
+    display: "flex",
+    alignItems: "center",
+    width: "0.8rem",
+    height: "0.8rem"
+  },
+  sidebar: {
+    display: "inline-block",
+    position: "relative"
+  },
+  buttonIcon: {
+    position: "relative",
+    padding: "16px",
+    fontSize: "16px"
+  },
+  menuItem: {
+    zIndex: 1300,
+    display: "none",
+    position: "absolute",
+    backgroundColor: "#f1f1f1",
+    minWidth: "160px",
+    boxShadow: "0px 8px 16px 0px rgba(0,0,0,0.2)",
+    left: "10%",
+    top: "auto"
+  },
+  menuItemOpen: {
+    zIndex: 1300,
+    display: "block",
+    position: "absolute",
+    backgroundColor: "#f1f1f1",
+    minWidth: "160px",
+    boxShadow: "0px 8px 16px 0px rgba(0,0,0,0.2)",
+    left: "92px",
+    top: "auto",
+    bottom: "auto",
+    marginTop: "-3.5rem"
+  }
+}));

package/components/layout/topBar/ProjectTopbar.js

@@ -0,0 +1,388 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _material = require("@mui/material");
+var _system = require("@mui/system");
+var _reactFeather = require("react-feather");
+var _fi = require("react-icons/fi");
+var _reactRouter = require("react-router");
+var _tenjin40Logo = _interopRequireDefault(require("../../../assets/images/tenjin-4.0-logo.png"));
+var _button = _interopRequireDefault(require("../../button"));
+var _modal = _interopRequireDefault(require("../../modal"));
+var _text = _interopRequireDefault(require("../../text"));
+var _UserAvatar = _interopRequireDefault(require("./UserAvatar"));
+var _TranslateOutlined = _interopRequireDefault(require("@mui/icons-material/TranslateOutlined"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+// import { BsChatRightText } from "react-icons/bs";
+
+const ANNOUNCEMENT_TYPES = {
+  success: {
+    backgroundColor: "#EDF7ED",
+    borderLeft: "6px solid #4CAF50",
+    color: "#1B5E20"
+  },
+  error: {
+    backgroundColor: "#FDECEA",
+    borderLeft: "6px solid #F44336",
+    color: "#B71C1C"
+  },
+  warning: {
+    backgroundColor: "#FFF6DA",
+    borderLeft: "6px solid #FFC107",
+    color: "#7C5E10"
+  },
+  info: {
+    backgroundColor: "#E8F4FD",
+    borderLeft: "6px solid #2196F3",
+    color: "#0D47A1"
+  }
+};
+const ProjectTopbar = _ref => {
+  var _loggedInUser$role;
+  let homeIcon = _ref.homeIcon,
+    loggedInUser = _ref.loggedInUser,
+    actions = _ref.actions,
+    onLogout = _ref.onLogout,
+    onViewProfileClick = _ref.onViewProfileClick,
+    hrefLink = _ref.hrefLink,
+    avatarItems = _ref.avatarItems,
+    _ref$announcement = _ref.announcement,
+    announcement = _ref$announcement === void 0 ? null : _ref$announcement,
+    _ref$isChatEnabled = _ref.isChatEnabled,
+    isChatEnabled = _ref$isChatEnabled === void 0 ? false : _ref$isChatEnabled,
+    localeChangeCallBack = _ref.localeChangeCallBack,
+    localeList = _ref.localeList,
+    selectedLocale = _ref.selectedLocale,
+    administrationLabel = _ref.administrationLabel,
+    aboutLabel = _ref.aboutLabel,
+    logoutConfirmLabel = _ref.logoutConfirmLabel,
+    cancelLabel = _ref.cancelLabel,
+    logoutLabel = _ref.logoutLabel;
+  const theme = (0, _system.useTheme)();
+  const _useState = (0, _react.useState)(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    anchorEl = _useState2[0],
+    setAnchorEl = _useState2[1];
+  const _useState3 = (0, _react.useState)(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    openMenuIndex = _useState4[0],
+    setOpenMenuIndex = _useState4[1];
+  const defaultLocaleList = [{
+    label: "English",
+    value: "en"
+  }, {
+    label: "Spanish",
+    value: "es"
+  }];
+  const getLocale = () => {
+    const lang = selectedLocale || getFromLocalStorage("lang") || getFromCookie("lang") || "en";
+    console.log("inside getLocale checklang ==", lang);
+    return lang;
+  };
+  function getFromLocalStorage(key) {
+    console.log("inside getFromLocalStorage checklang ==");
+    return localStorage.getItem(key);
+  }
+  function getFromCookie(name) {
+    console.log("inside getFromCookie checklang ==");
+    const cookies = document.cookie.split("; ");
+    for (let cookie of cookies) {
+      const _cookie$split = cookie.split("="),
+        _cookie$split2 = _slicedToArray(_cookie$split, 2),
+        key = _cookie$split2[0],
+        value = _cookie$split2[1];
+      if (key === name) {
+        return decodeURIComponent(value);
+      }
+    }
+    return null;
+  }
+  const _useState5 = (0, _react.useState)(getLocale),
+    _useState6 = _slicedToArray(_useState5, 2),
+    lang = _useState6[0],
+    setLang = _useState6[1];
+  const _useState7 = (0, _react.useState)(() => localeList || defaultLocaleList),
+    _useState8 = _slicedToArray(_useState7, 2),
+    localeOpts = _useState8[0],
+    setLocaleOpts = _useState8[1];
+  const updatedActions = (0, _react.useMemo)(() => {
+    const base = [...actions];
+    // if (isChatEnabled) {
+    //   base.push({
+    //     icon: <BsChatRightText size="12px" />,
+    //     title: "Tenjin Chat Bot",
+    //   });
+    // }
+    return base;
+  }, [actions, isChatEnabled]);
+  const navigate = (0, _reactRouter.useNavigate)();
+  const handleMenuOpen = (event, index) => {
+    setAnchorEl(event.currentTarget);
+    setOpenMenuIndex(index);
+  };
+  const handleMenuClose = () => {
+    setAnchorEl(null);
+    setOpenMenuIndex(null);
+  };
+  const handleItemClick = item => {
+    if (item.href) {
+      if (item.serverSide) {
+        window.location.href = item.href;
+      } else {
+        navigate(item.href);
+      }
+    } else if (item.onClick) {
+      item.onClick();
+    }
+    // else {
+    //   if (localStorage.getItem("chatBot")) {
+    //     localStorage.removeItem("chatBot");
+    //     window.dispatchEvent(new Event("chatBotUpdate"));
+    //   } else {
+    //     localStorage.setItem("chatBot", "true");
+    //     window.dispatchEvent(new Event("chatBotUpdate"));
+    //   }
+    // }
+  };
+
+  // Logout related code starts
+  const _useState9 = (0, _react.useState)(false),
+    _useState0 = _slicedToArray(_useState9, 2),
+    open = _useState0[0],
+    setOpen = _useState0[1];
+  const handleOpen = () => setOpen(true);
+  const handleClose = () => setOpen(false);
+  const logout = () => {
+    onLogout();
+    setOpen(false);
+  };
+  // Logout related code ends
+
+  return /*#__PURE__*/_react.default.createElement(_material.Paper, null, /*#__PURE__*/_react.default.createElement(_material.AppBar, {
+    position: "static",
+    sx: {
+      boxShadow: "0px 3px 10px rgba(102, 124, 188, 0.25) !important",
+      background: "#FFFFFF",
+      height: "48px !important",
+      justifyContent: "center"
+    }
+  }, /*#__PURE__*/_react.default.createElement(_material.Toolbar, null, /*#__PURE__*/_react.default.createElement(_system.Box, {
+    sx: {
+      display: "flex",
+      justifyContent: "space-between",
+      width: "100%",
+      alignItems: "center",
+      alignContent: "center"
+    }
+  }, /*#__PURE__*/_react.default.createElement(_system.Box, {
+    className: "Left",
+    sx: {
+      display: "flex",
+      flexDirection: "row",
+      alignItems: "center"
+    }
+  }, /*#__PURE__*/_react.default.createElement("a", {
+    href: hrefLink || "/home/projects/recentprojects",
+    style: {
+      marginRight: "1rem",
+      textDecoration: "none"
+    }
+  }, /*#__PURE__*/_react.default.createElement(_system.Box, {
+    sx: {
+      width: homeIcon ? 100 : 35,
+      height: homeIcon ? 90 : 30,
+      // marginTop: theme.spacing(1.7),
+      "& img": {
+        width: "inherit",
+        height: "inherit"
+      }
+    }
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    src: homeIcon || _tenjin40Logo.default,
+    alt: "app png logo"
+  })))), /*#__PURE__*/_react.default.createElement(_system.Box, {
+    className: "Center",
+    sx: {
+      marginRight: "auto",
+      color: "black"
+    }
+  }, updatedActions && /*#__PURE__*/_react.default.createElement(_system.Box, null, /*#__PURE__*/_react.default.createElement(_material.Stack, {
+    direction: "row",
+    spacing: 1
+  }, updatedActions.map((action, index) => /*#__PURE__*/_react.default.createElement("div", {
+    key: action.title
+  }, /*#__PURE__*/_react.default.createElement(_button.default, {
+    variant: "text",
+    startIcon: action.icon,
+    endIcon: action.dropdown ? /*#__PURE__*/_react.default.createElement(_reactFeather.ChevronDown, {
+      size: "0.9rem"
+    }) : null,
+    onClick: event => action.dropdown ? handleMenuOpen(event, index) : handleItemClick(action)
+  }, /*#__PURE__*/_react.default.createElement(_text.default, {
+    style: {
+      fontWeight: "600"
+    }
+  }, action.title)), action.dropdown && /*#__PURE__*/_react.default.createElement(_material.Menu, {
+    anchorEl: anchorEl,
+    open: openMenuIndex === index,
+    onClose: () => {
+      setOpenMenuIndex(null);
+      handleMenuClose();
+    }
+  }, action.dropdown.map((item, index) => /*#__PURE__*/_react.default.createElement("div", {
+    key: item.title,
+    onClick: () => {
+      if (item.clickable) {
+        handleItemClick(item);
+      }
+      handleMenuClose();
+    },
+    style: {
+      margin: "10px",
+      paddingRight: "10px",
+      cursor: item.clickable ? "pointer" : "default",
+      backgroundColor: item.heading ? "transparent" : "transparent"
+    }
+  }, item.heading ? /*#__PURE__*/_react.default.createElement(_text.default, {
+    variant: "subtitle1",
+    style: {
+      fontWeight: 600
+    }
+  }, item.title) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      display: "flex",
+      flexDirection: "column"
+    }
+  }, /*#__PURE__*/_react.default.createElement(_text.default, {
+    style: {
+      fontWeight: item.clickable || item.heading ? 600 : 400
+    }
+  }, item.title), item.subtitle && /*#__PURE__*/_react.default.createElement(_text.default, {
+    variant: "body2",
+    color: "#ACACAC",
+    sx: {
+      marginLeft: "5px"
+    }
+  }, item.subtitle)), item.divider && index !== action.dropdown.length - 1 && /*#__PURE__*/_react.default.createElement(_material.Divider, null)), item.divider && index === action.dropdown.length - 1 && /*#__PURE__*/_react.default.createElement(_material.Divider, null))))))))), localeOpts && /*#__PURE__*/_react.default.createElement(_system.Box, {
+    className: "Right",
+    sx: {
+      justifySelf: "right"
+    },
+    display: "flex",
+    alignItems: "center"
+  }, " ", /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_TranslateOutlined.default, {
+    color: "primary"
+  }), /*#__PURE__*/_react.default.createElement(_material.Select, {
+    value: lang,
+    label: "Language",
+    onChange: e => {
+      setLang(e.target.value);
+      localeChangeCallBack(e.target.value);
+    },
+    variant: "standard"
+  }, localeOpts.map(opt => /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
+    key: opt.value,
+    value: opt.value
+  }, opt.label))))), /*#__PURE__*/_react.default.createElement(_system.Box, {
+    className: "Right",
+    sx: {
+      justifySelf: "right",
+      color: "black"
+    },
+    display: "flex",
+    alignItems: "center"
+  }, announcement && /*#__PURE__*/_react.default.createElement(_system.Box, {
+    sx: {
+      backgroundColor: ANNOUNCEMENT_TYPES[announcement.type].backgroundColor,
+      borderLeft: ANNOUNCEMENT_TYPES[announcement.type].borderLeft,
+      color: ANNOUNCEMENT_TYPES[announcement.type].color,
+      minHeight: "26px",
+      height: "100%",
+      minWidth: "200px",
+      borderRadius: "4px",
+      marginRight: "10px",
+      paddingInline: "10px",
+      paddingBlock: "6px",
+      display: "flex",
+      alignItems: "center",
+      fontSize: "12px"
+    }
+  }, typeof announcement.message === "string" ? /*#__PURE__*/_react.default.createElement(_text.default, {
+    sx: {
+      fontSize: "12px"
+    }
+  }, announcement.message) : announcement.message), (loggedInUser === null || loggedInUser === void 0 || (_loggedInUser$role = loggedInUser.role) === null || _loggedInUser$role === void 0 ? void 0 : _loggedInUser$role.id) === 1 && /*#__PURE__*/_react.default.createElement(_button.default, {
+    variant: "text",
+    startIcon: /*#__PURE__*/_react.default.createElement(_reactFeather.Settings, {
+      size: "1rem"
+    })
+    // onClick={() => (window.location.href = "/admin/users")}
+    ,
+    onClick: () => {
+      window.location.href = "/admin/users";
+    }
+  }, /*#__PURE__*/_react.default.createElement(_text.default, {
+    variant: "subtitle1",
+    style: {
+      fontWeight: "600"
+    }
+  }, administrationLabel || "Administration")), /*#__PURE__*/_react.default.createElement(_button.default, {
+    variant: "text",
+    startIcon: /*#__PURE__*/_react.default.createElement(_fi.FiInfo, {
+      size: "1rem"
+    }),
+    onClick: () => {
+      window.open("/about", "_blank");
+    }
+  }, /*#__PURE__*/_react.default.createElement(_text.default, {
+    variant: "subtitle1",
+    style: {
+      fontWeight: "600"
+    }
+  }, aboutLabel || "About")), /*#__PURE__*/_react.default.createElement(_system.Box, {
+    sx: {
+      marginLeft: theme.spacing(1)
+    }
+  }, /*#__PURE__*/_react.default.createElement(_UserAvatar.default, {
+    loggedInUser: loggedInUser,
+    onLogout: handleOpen,
+    onViewProfileClick: onViewProfileClick,
+    avatarItems: avatarItems
+  })))))), /*#__PURE__*/_react.default.createElement(_modal.default, {
+    title: "Log out",
+    open: open,
+    handleClose: handleClose,
+    onClose: handleClose,
+    width: "sm"
+  }, /*#__PURE__*/_react.default.createElement(_text.default, null, logoutConfirmLabel || "Are you sure you want to log out?"), /*#__PURE__*/_react.default.createElement(_material.Grid, {
+    container: true,
+    direction: "row",
+    justifyContent: "flex-end",
+    alignItems: "flex-end",
+    style: {
+      padding: "3rem 0rem 0rem 4rem"
+    }
+  }, /*#__PURE__*/_react.default.createElement(_material.Stack, {
+    direction: "row",
+    spacing: 2
+  }, /*#__PURE__*/_react.default.createElement(_button.default, {
+    variant: "outlined",
+    onClick: handleClose
+  }, /*#__PURE__*/_react.default.createElement(_text.default, null, cancelLabel || "Cancel")), /*#__PURE__*/_react.default.createElement(_button.default, {
+    color: "error",
+    onClick: logout
+  }, /*#__PURE__*/_react.default.createElement(_text.default, null, logoutLabel || "Log out"))))));
+};
+ProjectTopbar.propTypes = {};
+var _default = exports.default = ProjectTopbar;

package/components/layout/topBar/UserAvatar.js

@@ -0,0 +1,138 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _material = require("@mui/material");
+var _styles = require("@mui/styles");
+var _react = _interopRequireWildcard(require("react"));
+var _avatar = _interopRequireDefault(require("../../avatar"));
+var _text = _interopRequireDefault(require("../../text"));
+var _timeStamp = _interopRequireDefault(require("../../timeStamp"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const StyledMenu = (0, _styles.withStyles)({
+  paper: {
+    width: "fit-content !important",
+    marginLeft: "10px",
+    zIndex: 1
+  }
+})(props => /*#__PURE__*/_react.default.createElement(_material.Menu, _extends({
+  disableAutoFocusItem: true,
+  anchorOrigin: {
+    vertical: "bottom",
+    horizontal: "center"
+  }
+}, props)));
+const UserAvatar = _ref => {
+  let loggedInUser = _ref.loggedInUser,
+    onViewProfileClick = _ref.onViewProfileClick,
+    onLogout = _ref.onLogout,
+    avatarItems = _ref.avatarItems;
+  const _useState = (0, _react.useState)(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    menu = _useState2[0],
+    setMenu = _useState2[1];
+  const theme = (0, _material.useTheme)();
+  const handleMenu = event => {
+    setMenu(event.currentTarget);
+  };
+  const handleCloseMenu = () => {
+    setMenu(null);
+  };
+  return loggedInUser ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_material.Box, {
+    onClick: handleMenu
+  }, /*#__PURE__*/_react.default.createElement(_avatar.default, {
+    size: "small",
+    variant: "rounded",
+    user: loggedInUser
+  })), /*#__PURE__*/_react.default.createElement(StyledMenu, {
+    id: "simple-menu",
+    anchorEl: menu,
+    open: Boolean(menu),
+    onClose: handleCloseMenu
+  }, (loggedInUser === null || loggedInUser === void 0 ? void 0 : loggedInUser.name) && (loggedInUser === null || loggedInUser === void 0 ? void 0 : loggedInUser.email) && /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
+    onClick: () => {
+      handleCloseMenu();
+      if (onViewProfileClick) {
+        onViewProfileClick();
+      }
+    }
+  }, /*#__PURE__*/_react.default.createElement(_material.Box, {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center"
+  }, /*#__PURE__*/_react.default.createElement(_material.Box, {
+    sx: {
+      marginRight: theme.spacing(1)
+    }
+  }, /*#__PURE__*/_react.default.createElement(_avatar.default, {
+    size: "small",
+    variant: "rounded",
+    user: loggedInUser
+  })), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_text.default, {
+    className: "name"
+  }, loggedInUser.name), /*#__PURE__*/_react.default.createElement(_text.default, {
+    className: "email"
+  }, loggedInUser.email)))), (loggedInUser === null || loggedInUser === void 0 ? void 0 : loggedInUser.lastLoginAt) && /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
+    sx: {
+      cursor: "default !important"
+    }
+  }, /*#__PURE__*/_react.default.createElement(_material.Box, {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center"
+  }, /*#__PURE__*/_react.default.createElement(_material.Box, {
+    sx: {
+      marginRight: theme.spacing(1)
+    }
+  }, /*#__PURE__*/_react.default.createElement(_text.default, {
+    color: "secondary"
+  }, "Last Login :")), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_text.default, {
+    color: "secondary"
+  }, /*#__PURE__*/_react.default.createElement(_timeStamp.default, {
+    value: (loggedInUser === null || loggedInUser === void 0 ? void 0 : loggedInUser.lastLoginAt) + "Z",
+    local: true,
+    format: "default"
+  }))))), !!(avatarItems !== null && avatarItems !== void 0 && avatarItems.length) && (avatarItems === null || avatarItems === void 0 ? void 0 : avatarItems.map((item, index) => /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
+    key: index // Add key prop for mapped items
+    ,
+    onClick: () => {
+      handleCloseMenu();
+      if (item.onClick) {
+        item.onClick();
+      }
+    }
+  }, /*#__PURE__*/_react.default.createElement(_material.Box, {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center"
+  }, /*#__PURE__*/_react.default.createElement(_material.Box, {
+    sx: {
+      marginRight: theme.spacing(1)
+    }
+  }, /*#__PURE__*/_react.default.createElement(_material.Avatar, {
+    variant: "rounded",
+    sx: {
+      width: 30,
+      height: 30
+    }
+  }, item.icon)), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_text.default, null, item.title)))))), (loggedInUser === null || loggedInUser === void 0 ? void 0 : loggedInUser.name) && /*#__PURE__*/_react.default.createElement(_material.Divider, null), /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
+    onClick: () => {
+      handleCloseMenu();
+      if (onLogout) {
+        onLogout();
+      }
+    }
+  }, /*#__PURE__*/_react.default.createElement(_text.default, null, "Log out")))) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
+};
+UserAvatar.propTypes = {};
+var _default = exports.default = UserAvatar;