@agilemotion/oui-react-js 1.3.8 → 1.4.0

package/dist/components/card/CardFooter.js

@@ -19,26 +19,22 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
 const useStyles = (0, _styles.makeStyles)(_cardFooterStyle.default);
 
 function CardFooter(props) {
   const classes = useStyles();
-
-  const className = props.className,
-        children = props.children,
-        plain = props.plain,
-        profile = props.profile,
-        pricing = props.pricing,
-        testimonial = props.testimonial,
-        stats = props.stats,
-        chart = props.chart,
-        product = props.product,
-        rest = _objectWithoutProperties(props, ["className", "children", "plain", "profile", "pricing", "testimonial", "stats", "chart", "product"]);
-
+  const {
+    className,
+    children,
+    plain,
+    profile,
+    pricing,
+    testimonial,
+    stats,
+    chart,
+    product,
+    ...rest
+  } = props;
   const cardFooterClasses = (0, _classnames.default)({
     [classes.cardFooter]: true,
     [classes.cardFooterPlain]: plain,

package/dist/components/card/CardHeader.js

@@ -19,27 +19,23 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
 const useStyles = (0, _styles.makeStyles)(_cardHeaderStyle.default);
 
 function CardHeader(props) {
   const classes = useStyles();
-
-  const className = props.className,
-        children = props.children,
-        color = props.color,
-        plain = props.plain,
-        image = props.image,
-        contact = props.contact,
-        signup = props.signup,
-        stats = props.stats,
-        icon = props.icon,
-        text = props.text,
-        rest = _objectWithoutProperties(props, ["className", "children", "color", "plain", "image", "contact", "signup", "stats", "icon", "text"]);
-
+  const {
+    className,
+    children,
+    color,
+    plain,
+    image,
+    contact,
+    signup,
+    stats,
+    icon,
+    text,
+    ...rest
+  } = props;
   const cardHeaderClasses = (0, _classnames.default)({
     [classes.cardHeader]: true,
     [classes[color + "CardHeader"]]: color,

package/dist/components/card/CardIcon.js

@@ -19,20 +19,16 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
 const useStyles = (0, _styles.makeStyles)(_cardIconStyle.default);
 
 function CardIcon(props) {
   const classes = useStyles();
-
-  const className = props.className,
-        children = props.children,
-        color = props.color,
-        rest = _objectWithoutProperties(props, ["className", "children", "color"]);
-
+  const {
+    className,
+    children,
+    color,
+    ...rest
+  } = props;
   const cardIconClasses = (0, _classnames.default)({
     [classes.cardIcon]: true,
     [classes[color + "CardHeader"]]: color,

package/dist/components/card/CardText.js

@@ -19,20 +19,16 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
 const useStyles = (0, _styles.makeStyles)(_cardTextStyle.default);
 
 function CardText(props) {
   const classes = useStyles();
-
-  const className = props.className,
-        children = props.children,
-        color = props.color,
-        rest = _objectWithoutProperties(props, ["className", "children", "color"]);
-
+  const {
+    className,
+    children,
+    color,
+    ...rest
+  } = props;
   const cardTextClasses = (0, _classnames.default)({
     [classes.cardText]: true,
     [classes[color + "CardHeader"]]: color,

package/dist/components/customInput/CustomInput.js

@@ -31,16 +31,18 @@ const useStyles = (0, _styles.makeStyles)(_customInputStyle.default);
 
 function CustomInput(props) {
   const classes = useStyles();
-  const formControlProps = props.formControlProps,
-        labelText = props.labelText,
-        id = props.id,
-        labelProps = props.labelProps,
-        inputProps = props.inputProps,
-        error = props.error,
-        white = props.white,
-        inputRootCustomClasses = props.inputRootCustomClasses,
-        success = props.success,
-        helperText = props.helperText;
+  const {
+    formControlProps,
+    labelText,
+    id,
+    labelProps,
+    inputProps,
+    error,
+    white,
+    inputRootCustomClasses,
+    success,
+    helperText
+  } = props;
   const labelClasses = (0, _classnames.default)({
     [" " + classes.labelRootError]: error,
     [" " + classes.labelRootSuccess]: success && !error

package/dist/components/dashboard/BasicBusinessAppDashboard.js

@@ -15,6 +15,8 @@ var _Utils = _interopRequireDefault(require("../../Utils"));
 
 var _ViewPort = _interopRequireDefault(require("../layout/ViewPort"));
 
+var _Window = _interopRequireDefault(require("../layout/Window"));
+
 var _reactRouterDom = require("react-router-dom");
 
 var _perfectScrollbar = _interopRequireDefault(require("perfect-scrollbar"));
@@ -27,81 +29,40 @@ var _reactRedux = require("react-redux");
 
 var _DashboardStore = require("../../redux/store/DashboardStore");
 
-var _ApplicationContext = _interopRequireDefault(require("../../ApplicationContext"));
+var _ApplicationManager = _interopRequireDefault(require("../../ApplicationManager"));
+
+var _SocketManager = _interopRequireDefault(require("../SocketManager"));
+
+var _WindowViewPort = _interopRequireDefault(require("../layout/WindowViewPort"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+let ps;
+
+const BasicBusinessAppDashboard = props => {
+  const [navDrawerOpen, setNavDrawerOpen] = _react.default.useState(true);
 
-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."); }
+  const [loading, setLoading] = _react.default.useState(true);
 
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+  const [activeColor, setActiveColor] = _react.default.useState('blue');
 
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+  const [secondaryThemeColor, setSecondaryThemeColor] = _react.default.useState('');
 
-function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+  const [primaryThemeColor, setPrimaryThemeColor] = _react.default.useState('');
 
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+  const [themeTextColor, setThemeTextColor] = _react.default.useState('');
 
-let ps;
+  const [routes, setRoutes] = _react.default.useState([]);
 
-const BasicBusinessAppDashboard = props => {
-  const _React$useState = _react.default.useState(true),
-        _React$useState2 = _slicedToArray(_React$useState, 2),
-        navDrawerOpen = _React$useState2[0],
-        setNavDrawerOpen = _React$useState2[1];
-
-  const _React$useState3 = _react.default.useState(true),
-        _React$useState4 = _slicedToArray(_React$useState3, 2),
-        loading = _React$useState4[0],
-        setLoading = _React$useState4[1];
-
-  const _React$useState5 = _react.default.useState("blue"),
-        _React$useState6 = _slicedToArray(_React$useState5, 2),
-        activeColor = _React$useState6[0],
-        setActiveColor = _React$useState6[1];
-
-  const _React$useState7 = _react.default.useState(""),
-        _React$useState8 = _slicedToArray(_React$useState7, 2),
-        secondaryThemeColor = _React$useState8[0],
-        setSecondaryThemeColor = _React$useState8[1];
-
-  const _React$useState9 = _react.default.useState(""),
-        _React$useState10 = _slicedToArray(_React$useState9, 2),
-        primaryThemeColor = _React$useState10[0],
-        setPrimaryThemeColor = _React$useState10[1];
-
-  const _React$useState11 = _react.default.useState(""),
-        _React$useState12 = _slicedToArray(_React$useState11, 2),
-        themeTextColor = _React$useState12[0],
-        setThemeTextColor = _React$useState12[1];
-
-  const _React$useState13 = _react.default.useState([]),
-        _React$useState14 = _slicedToArray(_React$useState13, 2),
-        routes = _React$useState14[0],
-        setRoutes = _React$useState14[1];
-
-  const _React$useState15 = _react.default.useState("data:image/png;base64," + props.logo),
-        _React$useState16 = _slicedToArray(_React$useState15, 2),
-        logo = _React$useState16[0],
-        setLogo = _React$useState16[1];
-
-  const _React$useState17 = _react.default.useState(document.documentElement.className.indexOf("nav-open") !== -1),
-        _React$useState18 = _slicedToArray(_React$useState17, 2),
-        sidebarOpened = _React$useState18[0],
-        setSidebarOpened = _React$useState18[1];
-
-  const _React$useState19 = _react.default.useState(true),
-        _React$useState20 = _slicedToArray(_React$useState19, 2),
-        sidebarMini = _React$useState20[0],
-        setSidebarMini = _React$useState20[1];
-
-  const _React$useState21 = _react.default.useState(0),
-        _React$useState22 = _slicedToArray(_React$useState21, 2),
-        opacity = _React$useState22[0],
-        setOpacity = _React$useState22[1];
+  const [logo, setLogo] = _react.default.useState('data:image/png;base64,' + props.logo);
+
+  const [sidebarOpened, setSidebarOpened] = _react.default.useState(document.documentElement.className.indexOf('nav-open') !== -1);
+
+  const [sidebarMini, setSidebarMini] = _react.default.useState(true);
+
+  const [opacity, setOpacity] = _react.default.useState(0);
 
   const dispatch = (0, _reactRedux.useDispatch)();
 
@@ -114,36 +75,43 @@ const BasicBusinessAppDashboard = props => {
   };
 
   _react.default.useEffect(() => {
-    if (navigator.platform.indexOf("Win") > -1) {
-      document.documentElement.classList.add("perfect-scrollbar-on");
-      document.documentElement.classList.remove("perfect-scrollbar-off");
-      let tables = document.querySelectorAll(".table-responsive");
+    if (navigator.platform.indexOf('Win') > -1) {
+      document.documentElement.classList.add('perfect-scrollbar-on');
+      document.documentElement.classList.remove('perfect-scrollbar-off');
+      let tables = document.querySelectorAll('.table-responsive');
 
       for (let i = 0; i < tables.length; i++) {
         ps = new _perfectScrollbar.default(tables[i]);
       }
     }
 
-    window.addEventListener("scroll", showNavbarButton);
+    window.addEventListener('scroll', showNavbarButton);
   });
 
   _react.default.useEffect(() => {
     if (props.width !== null && typeof props.width !== 'undefined') {
-      alert(props.width);
       setNavDrawerOpen(props.width === _withWidth.LARGE);
     }
   }, [props.width]);
 
   _react.default.useEffect(() => {
-    document.body.classList.add("white-content");
+    _SocketManager.default.init();
+
+    return () => {
+      _SocketManager.default.disconnect();
+    };
+  }, []);
+
+  _react.default.useEffect(() => {
+    document.body.classList.add('white-content');
 
-    if (navigator.platform.indexOf("Win") > -1) {//ps.destroy();
+    if (navigator.platform.indexOf('Win') > -1) {//ps.destroy();
       //document.documentElement.className.add("perfect-scrollbar-off");
       //document.documentElement.classList.remove("perfect-scrollbar-on");
     }
 
-    window.removeEventListener("scroll", showNavbarButton);
-    setActiveColor("agility");
+    window.removeEventListener('scroll', showNavbarButton);
+    setActiveColor('agility');
     setSecondaryThemeColor(props.settings.systemProfileDto.secondCorporateBrandColor);
     setPrimaryThemeColor(props.settings.systemProfileDto.firstCorporateBrandColor);
     setThemeTextColor(props.settings.systemProfileDto.themeTextColor);
@@ -194,9 +162,10 @@ const BasicBusinessAppDashboard = props => {
 
       let newRoutes = [];
       let newRoute = {};
-      newRoute.name = "Dashboard";
-      newRoute.icon = "fa fa-pie-chart";
-      newRoute.layout = "/admin";
+      newRoute.name = 'Dashboard';
+      newRoute.id = 'dashboard';
+      newRoute.icon = 'fa fa-pie-chart';
+      newRoute.layout = '/admin';
       newRoute.level = 0;
       newRoute.isParent = true;
       newRoutes.push(newRoute);
@@ -208,13 +177,13 @@ const BasicBusinessAppDashboard = props => {
           let route = {};
           route.name = module.label;
           route.icon = module.icon;
-          route.layout = "/admin";
+          route.menu = module.menu;
+          route.layout = '/admin';
           route.level = 0;
 
-          if (module.menuBar && module.menuBar.menus.length > 0) {
+          if (module.menu) {
             route.collapse = true;
-            route.state = module.name + "Collapse";
-            route.views = getViews(module.menuBar.menus, 1);
+            route.state = module.name + 'Collapse';
           }
 
           newRoutes.push(route);
@@ -223,14 +192,15 @@ const BasicBusinessAppDashboard = props => {
 
       if (props.settings.settingsMenu) {
         newRoute = {};
-        newRoute.name = "Settings";
-        newRoute.icon = "fa fa-cog";
-        newRoute.layout = "/admin";
+        newRoute.name = 'Settings';
+        newRoute.icon = 'fa fa-cog';
+        newRoute.layout = '/admin';
         newRoute.isParent = true;
         newRoute.collapse = true;
         newRoute.level = 0;
-        newRoute.state = "settingsMenuCollapse";
-        newRoute.views = getViews(props.settings.settingsMenu.menus, 1);
+        newRoute.menu = ''; // TODO : set menu value
+
+        newRoute.state = 'settingsMenuCollapse';
         newRoutes.push(newRoute);
       }
 
@@ -240,53 +210,8 @@ const BasicBusinessAppDashboard = props => {
     }
   }, [props.settings]);
 
-  const getViews = (menus, level) => {
-    let newViews = [];
-
-    for (let i = 0; i < menus.length; i++) {
-      let createView = {};
-      createView.name = menus[i].attributes.label;
-      createView.mini = "SS";
-      createView.layout = "/admin";
-      createView.level = level;
-
-      if (menus[i].items && menus[i].items.length > 0) {
-        createView.collapse = true;
-        createView.state = menus[i].id + "Collapse";
-        createView.views = getItems(menus[i].items, level + 1);
-      }
-
-      newViews.push(createView);
-    }
-
-    return newViews;
-  };
-
-  const getItems = (items, level) => {
-    let newItems = [];
-
-    for (let i = 0; i < items.length; i++) {
-      let createItem = {};
-      createItem.name = items[i].attributes.label;
-      createItem.mini = "SS";
-      createItem.layout = "/admin";
-      createItem.item = items[i];
-      createItem.level = level;
-
-      if (!_Utils.default.isNull(items[i].subMenu)) {
-        createItem.collapse = true;
-        createItem.state = items[i].id + "SubMenuCollapse";
-        createItem.views = getItems(items[i].subMenu.items, level + 1);
-      }
-
-      newItems.push(createItem);
-    }
-
-    return newItems;
-  };
-
   const toggleSidebar = () => {
-    document.documentElement.classList.toggle("nav-open");
+    document.documentElement.classList.toggle('nav-open');
     setSidebarOpened(!sidebarOpened);
   };
 
@@ -304,7 +229,7 @@ const BasicBusinessAppDashboard = props => {
         return getRoutes(prop.views);
       }
 
-      if (prop.layout === "/admin") {
+      if (prop.layout === '/admin') {
         return /*#__PURE__*/_react.default.createElement(_reactRouterDom.Route, {
           path: prop.layout + prop.path,
           component: prop.component,
@@ -317,10 +242,10 @@ const BasicBusinessAppDashboard = props => {
   };
 
   const getActiveRoute = routes => {
-    let activeRoute = "Dashboard";
+    let activeRoute = 'Dashboard';
 
     for (let i = 0; i < routes.length; i++) {
-      if (routes[i].collapse) {
+      if (routes[i].collapse && routes[i].views) {
         let collapseActiveRoute = getActiveRoute(routes[i].views);
 
         if (collapseActiveRoute !== activeRoute) {
@@ -341,38 +266,38 @@ const BasicBusinessAppDashboard = props => {
   };
 
   const handleMiniClick = () => {
-    let notifyMessage = "Sidebar mini ";
+    let notifyMessage = 'Sidebar mini ';
 
-    if (document.body.classList.contains("sidebar-mini")) {
+    if (document.body.classList.contains('sidebar-mini')) {
       setSidebarMini(false);
-      notifyMessage += "deactivated...";
+      notifyMessage += 'deactivated...';
     } else {
       setSidebarMini(true);
-      notifyMessage += "activated...";
+      notifyMessage += 'activated...';
     }
 
     let options = {};
     options = {
-      place: "tr",
+      place: 'tr',
       message: notifyMessage,
-      type: "primary",
-      icon: "tim-icons icon-bell-55",
+      type: 'primary',
+      icon: 'tim-icons icon-bell-55',
       autoDismiss: 7
     };
-    document.body.classList.toggle("sidebar-mini");
+    document.body.classList.toggle('sidebar-mini');
   };
 
   const closeSidebar = () => {
     setSidebarOpened(false);
-    document.documentElement.classList.remove("nav-open");
+    document.documentElement.classList.remove('nav-open');
   };
 
-  function launcDashboard() {
-    _ApplicationContext.default.closeCurrentView(false);
+  function launchDashboard() {
+    _ApplicationManager.default.closeAllViews();
 
-    _ApplicationContext.default.getViewPortHistory().push("/switch");
+    _ApplicationManager.default.navigate('/switch');
 
-    _ApplicationContext.default.getViewPortHistory().push("/view/dashboard");
+    _ApplicationManager.default.navigate('/view/dashboard');
   }
 
   return loading ? /*#__PURE__*/_react.default.createElement("div", null, "Loading...") : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
@@ -393,23 +318,26 @@ const BasicBusinessAppDashboard = props => {
     className: "tim-icons icon-align-center visible-on-sidebar-regular text-muted"
   }), /*#__PURE__*/_react.default.createElement("i", {
     className: "tim-icons icon-bullet-list-67 visible-on-sidebar-mini text-muted"
-  })), " "), " ", /*#__PURE__*/_react.default.createElement(_Sidebar.default, _extends({}, props, {
+  })), ' '), ' ', /*#__PURE__*/_react.default.createElement(_Sidebar.default, _extends({}, props, {
     routes: routes,
-    activeColor: "agility",
+    activeColor: 'agility',
     secondaryThemeColor: secondaryThemeColor,
-    activeRouteMenu: 'Dashboard',
-    className: "sidebar",
+    activeRouteMenu: {
+      id: 'dashboard',
+      name: 'Dashboard'
+    },
+    className: 'sidebar',
     dashboardLauncher: () => {
-      launcDashboard();
+      launchDashboard();
     },
     appLogoPath: props.appLogoPath,
     logo: {
-      outterLink: "",
-      text: "",
+      outterLink: '',
+      text: '',
       imgSrc: logo
     },
     closeSidebar: closeSidebar
-  })), " ", /*#__PURE__*/_react.default.createElement("div", {
+  })), ' ', /*#__PURE__*/_react.default.createElement("div", {
     className: "main-panel",
     data: activeColor
   }, /*#__PURE__*/_react.default.createElement(_HomeNavbar.default, _extends({}, props, {
@@ -422,11 +350,9 @@ const BasicBusinessAppDashboard = props => {
     settingsMenu: props.settings.settingsMenu,
     toggleSidebar: toggleSidebar,
     logoutCallBack: props.logoutCallBack
-  })), " ", /*#__PURE__*/_react.default.createElement("div", {
+  })), ' ', /*#__PURE__*/_react.default.createElement("div", {
     className: "content"
-  }, /*#__PURE__*/_react.default.createElement(_ViewPort.default, {
-    settings: props.settings
-  }))), " "));
+  }, /*#__PURE__*/_react.default.createElement(_ViewPort.default, null), /*#__PURE__*/_react.default.createElement(_WindowViewPort.default, null))), ' '));
 };
 
 BasicBusinessAppDashboard.propTypes = {