@agilemotion/oui-react-js 1.8.43 → 1.8.45

package/dist/ApplicationManager.js

@@ -7,7 +7,6 @@ exports.default = exports.TEMPLATE_TOKEN_REGEX = exports.SYSTEM_EVENT = exports.
 var _Observable = _interopRequireDefault(require("./event/Observable"));
 var _Event = _interopRequireDefault(require("./event/Event"));
 var _EventType = _interopRequireDefault(require("./event/EventType"));
-var _Graph = _interopRequireDefault(require("./components/Graph"));
 var _Utils = _interopRequireDefault(require("./Utils"));
 var _DynamicJS = _interopRequireWildcard(require("./DynamicJS"));
 var _TypedValue = _interopRequireDefault(require("./TypedValue"));
@@ -80,13 +79,7 @@ class ApplicationManager {
           return instance.getActiveTenant();
         },
         getUniqueOrgForRole(role) {
-          let profile = JSON.parse(instance.getUserDetails().profile);
-          let roles = profile.organisations.filter(org => org.roles.includes(role)) // Filter organisations by role
-          .map(org => org.code);
-          if (roles.length > 1) {
-            throw new Error("There is more than one organisation for role : [" + role + "]");
-          }
-          return roles[0];
+          return instance.getUniqueOrgForRole(role);
         }
       };
       if (!Array.isArray) {
@@ -98,6 +91,15 @@ class ApplicationManager {
     }
     return ApplicationManager.instance;
   }
+  getUniqueOrgForRole(role) {
+    let profile = JSON.parse(this.getUserDetails().profile);
+    let roles = profile.organisations.filter(org => org.roles.includes(role)) // Filter organisations by role
+    .map(org => org.code);
+    if (roles.length > 1) {
+      throw new Error("There is more than one organisation for role : [" + role + "]");
+    }
+    return roles[0];
+  }
   addApplicationContextSubscription = subscription => {
     return new Promise(resolve => {
       _Observable.default.addApplicationContextSubscription(subscription);

package/dist/BasicApp.css

@@ -1,37 +1,42 @@
 .App {
-  text-align: center;
+    text-align: center;
 }
 
 .App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 80px;
+    animation: App-logo-spin infinite 20s linear;
+    height: 80px;
 }
 
 .App-header {
-  background-color: #222;
-  height: 150px;
-  padding: 20px;
-  color: white;
+    background-color: #222;
+    height: 150px;
+    padding: 20px;
+    color: white;
 }
 
 .App-intro {
-  font-size: large;
+    font-size: large;
 }
 
 @keyframes App-logo-spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+    }
 }
 
 #pdf-frame {
-  display: none;
-  align-items: stretch;
-  position: absolute;
-  width: 100%;
-  height: 100%
+    display: none;
+    align-items: stretch;
+    position: absolute;
+    width: 100%;
+    height: 100%
 }
 
 #root {
-  height: 100%;
-  background-color: #ffffff;
+    height: 100%;
+    background-color: #ffffff;
+    overflow: hidden;
 }

package/dist/InteractionPortalApp.css

@@ -1,37 +1,42 @@
 .App {
-  text-align: center;
+    text-align: center;
 }
 
 .App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 80px;
+    animation: App-logo-spin infinite 20s linear;
+    height: 80px;
 }
 
 .App-header {
-  background-color: #f1f1f1;
-  height: 150px;
-  padding: 20px;
-  color: white;
+    background-color: #f1f1f1;
+    height: 150px;
+    padding: 20px;
+    color: white;
 }
 
 .App-intro {
-  font-size: large;
+    font-size: large;
 }
 
 @keyframes App-logo-spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+    }
 }
 
 #pdf-frame {
-  display: none;
-  align-items: stretch;
-  position: absolute;
-  width: 100%;
-  height: 100%
+    display: none;
+    align-items: stretch;
+    position: absolute;
+    width: 100%;
+    height: 100%
 }
 
 #root {
-  height: 100%;
-  background-color: #ffffff;
+    height: 100%;
+    background-color: #ffffff;
+    overflow: hidden;
 }

package/dist/InteractionPortalApp.js

@@ -36,7 +36,6 @@ const InteractionPortalApp = props => {
     if (window.location.pathname !== '/reset-password' && window.location.pathname !== '/login' && window.location.pathname !== '/forgot-password' && window.location.pathname !== '/change-password') {
       navigate("/");
     }
-    console.log("\n\n\n\nImpl : ", props.implConfig);
   }, []);
   return /*#__PURE__*/_react.default.createElement(_ThemeProvider.default, {
     theme: agilityTheme

package/dist/InteractionPortalAppHome.js

@@ -12,6 +12,11 @@ var _Utils = _interopRequireDefault(require("./Utils"));
 var _reactRouterDom = require("react-router-dom");
 var _RestUtils = require("./RestUtils");
 var _SideMenuModuleDashboard = _interopRequireDefault(require("./components/dashboard/SideMenuModuleDashboard"));
+var _SocketManager = _interopRequireDefault(require("./components/SocketManager"));
+var _FoldingSideTabDashboard = _interopRequireDefault(require("./components/dashboard/FoldingSideTabDashboard"));
+var _material = require("@mui/material");
+var _ThemeProvider = _interopRequireDefault(require("@mui/styles/ThemeProvider"));
+var _react2 = require("@emotion/react");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const location = window.location.protocol + "//" + window.location.hostname;
 const status = response => {
@@ -49,6 +54,8 @@ const InteractionPortalAppHome = /*#__PURE__*/_react.default.memo((props, ref) =
     });
     (0, _RestUtils.sendRequest)(location + _ApplicationManager.default.getContextRoot() + '/auth/api/v1/user/find', response => {
       _ApplicationManager.default.setUserDetails(response);
+      _SocketManager.default.init();
+      _ApplicationManager.default.setActiveTenant(_ApplicationManager.default.getUniqueOrgForRole('VENDOR'));
     }, e => {
       console.log(e);
     });
@@ -81,15 +88,74 @@ const InteractionPortalAppHome = /*#__PURE__*/_react.default.memo((props, ref) =
     className: "main w-100 h-100 d-inline-block"
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "w-100 h-100"
-  }, !loading && !_Utils.default.isNull(dashboardSettings) && !hasClientError ? /*#__PURE__*/_react.default.createElement(_SideMenuModuleDashboard.default, {
+  }, !loading && !_Utils.default.isNull(dashboardSettings) && !hasClientError ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: `main w-100 h-100 d-inline-block coj-skin`
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "w-100 h-100"
+  }, /*#__PURE__*/_react.default.createElement(_react2.ThemeProvider, {
+    theme: (0, _material.createTheme)({
+      palette: {
+        primary: {
+          main: props.implConfig.primaryColor
+        },
+        secondary: {
+          main: props.implConfig.secondaryColor
+        }
+      }
+    })
+  }, /*#__PURE__*/_react.default.createElement(_ThemeProvider.default, {
+    theme: (0, _material.createTheme)({
+      palette: {
+        primary: {
+          main: dashboardSettings.systemProfileDto.firstCorporateBrandColor
+        },
+        secondary: {
+          main: dashboardSettings.systemProfileDto.secondCorporateBrandColor
+        }
+      },
+      components: {
+        MuiCssBaseline: {
+          styleOverrides: {
+            body: {
+              // Firefox
+              scrollbarColor: 'rgba(100, 100, 100, 0.4) transparent',
+              scrollbarWidth: 'thin'
+            },
+            // WebKit browsers
+            '::-webkit-scrollbar': {
+              width: '8px',
+              height: '8px'
+            },
+            '::-webkit-scrollbar-track': {
+              background: 'transparent'
+            },
+            '::-webkit-scrollbar-thumb': {
+              backgroundColor: 'rgba(100, 100, 100, 0.4)',
+              borderRadius: '4px',
+              transition: 'background-color 0.3s'
+            },
+            '::-webkit-scrollbar-thumb:hover': {
+              backgroundColor: 'rgba(100, 100, 100, 0.6)'
+            }
+          }
+        }
+      }
+    })
+  }, /*#__PURE__*/_react.default.createElement(_material.CssBaseline, null), /*#__PURE__*/_react.default.createElement(_FoldingSideTabDashboard.default, {
     logoutCallBack: () => {
       logout();
     },
     settings: dashboardSettings,
     avatar: !_Utils.default.isNull(avatarUrl) ? avatarUrl : null,
     logo: dashboardSettings.logo,
-    appLogoPath: props.implConfig.appLogo
-  }) : hasClientError ? /*#__PURE__*/_react.default.createElement("div", {
+    showDashboardMenu: false,
+    appLogoPath: /*dashboardSettings.logo*/null,
+    logoStyle: {
+      padding: '32px'
+    }
+  }), /*#__PURE__*/_react.default.createElement(_LoadingIndicator.default, {
+    color: loadingColor
+  })))))) : hasClientError ? /*#__PURE__*/_react.default.createElement("div", {
     style: "margin: 128px; color: red; font-size: 24px"
   }, "System error - Unknown client") : null), /*#__PURE__*/_react.default.createElement(_LoadingIndicator.default, {
     color: loadingColor

package/dist/RestService.js

@@ -90,9 +90,9 @@ class RestService {
             } else {
               if (!this.isParamValueNull(parameterValue)) {
                 requestBody = parameterValue.instanceType === 'TypedValue' ? parameterValue.value : parameterValue;
-                if (typeof requestBody === 'object') {
-                  requestBody.type = parameterValue.type;
-                }
+                /*if (typeof requestBody === 'object') {
+                    requestBody.type = parameterValue.type;
+                }*/
               }
             }
           }

package/dist/Utils.js

@@ -17,6 +17,13 @@ class Utils {
   static isNull(value) {
     return value === null || typeof value === 'undefined';
   }
+  static normalizeCssSize(value, fallback) {
+    if (value == null) return fallback;
+    // allow "72px", "5rem", etc.
+    if (typeof value === "string" && value.trim()) return value.trim();
+    if (typeof value === "number" && Number.isFinite(value)) return `${value}px`;
+    return fallback;
+  }
   static getInitials(name) {
     const parts = name.split(' ');
     let initials = '';

package/dist/assets/jss/components/customInputStyle.js

@@ -53,7 +53,6 @@ const customInputStyle = {
   },
   formControl: {
     margin: "0 0 17px 0",
-    paddingTop: "27px",
     position: "relative",
     verticalAlign: "unset",
     "& svg,& .fab,& .far,& .fal,& .fas,& .material-icons": {

package/dist/assets/jss/components/customInputStyle.jsx

@@ -55,7 +55,6 @@ const customInputStyle = {
     },
     formControl: {
         margin: "0 0 17px 0",
-        paddingTop: "27px",
         position: "relative",
         verticalAlign: "unset",
         "& svg,& .fab,& .far,& .fal,& .fas,& .material-icons": {

package/dist/components/DataGrid.js

@@ -429,7 +429,9 @@ const DataGrid = exports.DataGrid = /*#__PURE__*/_react.default.memo(/*#__PURE__
           processData(result, conf);
         }).catch(e => {
           console.error(e);
-          _Utils.default.publishErrorMessage(e, props.viewId);
+          if (e.errorType !== 'INVALID_PARAMETER') {
+            _Utils.default.publishErrorMessage(e, props.viewId);
+          }
         });
       } else {
         throw new Error('Unknown service type : ' + serviceType);
@@ -591,6 +593,7 @@ const DataGrid = exports.DataGrid = /*#__PURE__*/_react.default.memo(/*#__PURE__
         updateColumnReadOnlyStatus(column, props.rows);
       }
       rowsRef.current = rowValues;
+      setSelected([]);
       setRows(rowValues);
     }
   }, [props.rows]);
@@ -744,6 +747,7 @@ const DataGrid = exports.DataGrid = /*#__PURE__*/_react.default.memo(/*#__PURE__
   }
   return visible && /*#__PURE__*/_react.default.createElement("div", {
     id: props.config.id,
+    className: _Utils.default.getComponentAttribute(props.config, 'className', null),
     style: _Utils.default.isNull(props.hasBorder) || props.hasBorder === true ? _Utils.default.mergeStyles({
       margin: '0',
       border: '1px solid #e2e2e2',
@@ -808,7 +812,7 @@ const DataGrid = exports.DataGrid = /*#__PURE__*/_react.default.memo(/*#__PURE__
     },
     label: "Wrap table text"
   })), /*#__PURE__*/_react.default.createElement("div", {
-    className: "responsive-table",
+    className: `responsive-table`,
     style: {
       height: props.height
     }

package/dist/components/PopupView.js

@@ -16,7 +16,7 @@ var _ApplicationManager = _interopRequireDefault(require("../ApplicationManager"
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function PopupViewDialog(props) {
   const [title, setTitle] = _react.default.useState(null);
-  const height = _Utils.default.getComponentStyleAttribute(props.view.config, 'height', '38vh');
+  const height = _Utils.default.getComponentStyleAttribute(props.view.config, 'height', '80vh');
   const width = _Utils.default.getComponentStyleAttribute(props.view.config, 'width', '60vw');
   const useStyles = (0, _styles.makeStyles)(theme => ({
     dialogPaper: {

package/dist/components/SocketManager.js

@@ -99,14 +99,16 @@ class SocketManager {
     });
   };
   registerOnline() {
-    console.log('***** REGISTERING ONLINE *****');
     let userDetails = _ApplicationManager.default.getUserDetails();
+    // TODO : Resolve the hardcoding
+    let profile = typeof (typeof userDetails.profile === 'string' || JSON.parse(userDetails.profile) === 'string') ? userDetails.profile : 'COJ';
+    console.log('***** REGISTERING ONLINE ***** [' + profile + ']');
     this.emitEvent(_SocketRequest.default.REGISTER_ONLINE, {
       user: {
         userId: userDetails.username,
         name: userDetails.name + ' ' + userDetails.surname
       },
-      orgCode: userDetails.profile
+      orgCode: profile
     }).then(data => {
       console.log("REGISTERED ONLINE - " + userDetails.username);
       this.connected = true;

package/dist/components/TitleBar.js

@@ -58,7 +58,7 @@ const TitleBar = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.fo
     className: 'title-bar'
   }, /*#__PURE__*/_react.default.createElement("div", {
     style: {
-      padding: '32px 0 4px 0',
+      padding: '4px 0 4px 0',
       fontSize: '24px',
       color: '#202124'
     }

package/dist/components/Toolbar.js

@@ -326,7 +326,7 @@ const Toolbar = props => {
     className: 'oui-toolbar',
     style: _Utils.default.mergeStyles({
       borderBottom: '1px solid #e2e2e2',
-      padding: '4px 0 0 0',
+      padding: '4px 0',
       overflow: 'hidden'
     }, props.config)
   }, render(props.config));

package/dist/components/customInput/CustomInput.js

@@ -62,7 +62,10 @@ function CustomInput(props) {
     minLength: inputProps && inputProps.minLength ? inputProps.minLength : undefined
   };
   return /*#__PURE__*/_react.default.createElement(_FormControl.default, _extends({}, formControlProps, {
-    className: formControlClasses
+    className: formControlClasses,
+    style: {
+      marginTop: '20px'
+    }
   }), labelText !== undefined ? /*#__PURE__*/_react.default.createElement(_InputLabel.default, _extends({
     className: classes.labelRoot + " " + labelClasses,
     htmlFor: id

package/dist/components/dashboard/FoldingSideTabDashboard.css

@@ -0,0 +1,3 @@
+.sidebar .nav {
+    margin-top: 0 !important;
+}

package/dist/components/dashboard/FoldingSideTabDashboard.js

@@ -18,11 +18,20 @@ var _DashboardStore = require("../../redux/store/DashboardStore");
 var _ApplicationManager = _interopRequireDefault(require("../../ApplicationManager"));
 var _SocketManager = _interopRequireDefault(require("../SocketManager"));
 var _WindowViewPort = _interopRequireDefault(require("../layout/WindowViewPort"));
-var _styles = require("@mui/material/styles");
-var _Button = _interopRequireDefault(require("@mui/material/Button"));
+require("./FoldingSideTabDashboard.css");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 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); }
 let ps;
+const DATA_URL_PREFIX = 'data:image/png;base64,';
+function normalizeLogo(src) {
+  if (!src) return undefined;
+  const s = src.trim();
+  if (/^data:/i.test(s)) {
+    const dup = new RegExp(`^(${DATA_URL_PREFIX})+`, 'i');
+    return s.replace(dup, DATA_URL_PREFIX);
+  }
+  return DATA_URL_PREFIX + s;
+}
 const FoldingSideTabDashboard = props => {
   const [navDrawerOpen, setNavDrawerOpen] = _react.default.useState(true);
   const [loading, setLoading] = _react.default.useState(true);
@@ -31,7 +40,7 @@ const FoldingSideTabDashboard = props => {
   const [primaryThemeColor, setPrimaryThemeColor] = _react.default.useState('');
   const [themeTextColor, setThemeTextColor] = _react.default.useState('');
   const [routes, setRoutes] = _react.default.useState([]);
-  const [logo, setLogo] = _react.default.useState('data:image/png;base64,' + props.logo);
+  const [logo, setLogo] = _react.default.useState(normalizeLogo(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);
@@ -119,13 +128,15 @@ const FoldingSideTabDashboard = props => {
       }
       let newRoutes = [];
       let newRoute = {};
-      newRoute.name = 'Dashboard';
-      newRoute.id = 'dashboard';
-      newRoute.icon = 'fa fa-pie-chart';
-      newRoute.layout = '/admin';
-      newRoute.level = 0;
-      newRoute.isParent = true;
-      newRoutes.push(newRoute);
+      if (_Utils.default.isNull(props.showDashboardMenu) || props.showDashboardMenu) {
+        newRoute.name = 'Dashboard';
+        newRoute.id = 'dashboard';
+        newRoute.icon = 'fa fa-pie-chart';
+        newRoute.layout = '/admin';
+        newRoute.level = 0;
+        newRoute.isParent = true;
+        newRoutes.push(newRoute);
+      }
       if (!_Utils.default.isNull(props.settings.systemProfileDto.modules)) {
         for (let i = 0; i < props.settings.systemProfileDto.modules.length; i++) {
           let module = props.settings.systemProfileDto.modules[i];
@@ -255,10 +266,10 @@ const FoldingSideTabDashboard = props => {
     routes: routes,
     activeColor: 'agility',
     secondaryThemeColor: secondaryThemeColor,
-    activeRouteMenu: {
+    activeRouteMenu: props.showDashboardMenu ? {
       id: 'dashboard',
       name: 'Dashboard'
-    },
+    } : null,
     className: 'sidebar',
     dashboardLauncher: () => {
       launchDashboard();
@@ -269,6 +280,7 @@ const FoldingSideTabDashboard = props => {
       text: '',
       imgSrc: logo
     },
+    logoStyle: props.logoStyle,
     closeSidebar: closeSidebar
   })), ' ', /*#__PURE__*/_react.default.createElement("div", {
     className: "main-panel",

package/dist/components/dashboard/SideMenuModuleDashboard.css

@@ -9,7 +9,7 @@
 }
 
 .side-menu-module-dashboard .viewport {
-    width: calc(100% - 448px) !important;
+    width: calc(100% - 348px) !important;
 }
 
 .side-menu-module-dashboard .sidebar {
@@ -19,7 +19,7 @@
     margin-left: 0 !important;
     margin-top: 0 !important;
     border-radius: 0 !important;
-    width: 440px !important;
+    width: 340px !important;
 }
 
 .side-menu-module-dashboard .main-panel {
@@ -32,8 +32,8 @@
 }
 
 .side-menu-module-dashboard .navbar.navbar-absolute {
-    left: 440px !important;
-    width: calc(100% - 440px) !important;
+    left: 340px !important;
+    width: calc(100% - 340px) !important;
     background-color: transparent !important;
     color: #1d253b !important;
     padding: 10px 12px 10px 0 !important;
@@ -49,7 +49,7 @@
 }
 
 .side-menu-module-dashboard .main-panel > .content {
-    padding: 78px 12px 30px 448px !important;
+    padding: 78px 12px 30px 348px !important;
 }
 
 @media screen and (max-width: 991px){

package/dist/components/dashboard/SideMenuModuleDashboard.js

@@ -18,6 +18,7 @@ var _ApplicationManager = _interopRequireDefault(require("../../ApplicationManag
 var _WindowViewPort = _interopRequireDefault(require("../layout/WindowViewPort"));
 require("./SideMenuModuleDashboard.css");
 var _ModuleMenuSidebar = _interopRequireDefault(require("./components/blackDashboard/sidebar/ModuleMenuSidebar"));
+var _SocketManager = _interopRequireDefault(require("../SocketManager"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 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); }
 let ps;
@@ -60,7 +61,7 @@ const SideMenuModuleDashboard = props => {
   _react.default.useEffect(() => {
     //Sockets.init();
     return () => {
-      //Sockets.disconnect();
+      _SocketManager.default.disconnect();
     };
   }, []);
   _react.default.useEffect(() => {
@@ -284,7 +285,9 @@ const SideMenuModuleDashboard = props => {
     style: {
       width: windowPinned ? 'calc(100% - 320px)' : '100%'
     }
-  }, /*#__PURE__*/_react.default.createElement(_ViewPort.default, null)), /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement(_ViewPort.default, {
+    windowPinned: windowPinned
+  })), /*#__PURE__*/_react.default.createElement("div", {
     className: 'col no-margin no-padding',
     style: {
       width: windowPinned ? '320px' : '0'

package/dist/components/dashboard/components/blackDashboard/sidebar/FoldingTabSidebar.css

@@ -5,3 +5,97 @@
 .sidebar .nav a:before {
     content: none !important;
 }
+
+/* Root sidebar container (lives under a global header using --header-h) */
+.sidebar {
+    display: flex;
+    flex-direction: column;
+    inline-size: 100%;
+    block-size: calc(100dvh - var(--header-h, 0px));
+    overflow: hidden; /* only the middle section scrolls */
+}
+
+/* If you don't have a global header for some screens, you can toggle this class instead */
+/* .sidebar--no-header { block-size: 100dvh; } */
+
+/* ---------- TOP: brand + heading ---------- */
+.sidebar__top {
+    padding: 32px 0 12px 0;
+    margin-left: 8px;
+    margin-right: 8px;
+    display: grid;
+    gap: 8px;
+    justify-items: center;
+    align-content: center;
+    border-bottom: 1px solid #e1e1e1;
+}
+
+/* Control the height of the logo area via CSS var */
+:root { --sidebar-logo-h: 96px; }
+
+.sidebar__logo {
+    inline-size: 100%;
+    block-size: var(--sidebar-logo-h);
+}
+
+.sidebar__brand {
+    display: block;
+    inline-size: 100%;
+    block-size: 100%;
+}
+
+.sidebar__brand-img {
+    display: block;
+    inline-size: 100%;
+    block-size: 100%;
+    object-fit: contain;   /* switch to 'cover' if you want edge-to-edge crop */
+}
+
+/* Heading text under the brand (optional) */
+.sidebar__heading {
+    font-size: 20px;
+    font-weight: 600;
+    text-align: center;
+}
+
+/* ---------- MIDDLE: menu (the ONLY scroller) ---------- */
+.sidebar__scroll {
+    flex: 1 1 auto;
+    min-block-size: 0;     /* crucial for flex scrolling */
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding: 8px 0;
+}
+
+/* ---------- BOTTOM: app logo + copyright ---------- */
+.sidebar__bottom {
+    margin-top: auto;      /* pins to bottom */
+    flex: 0 0 auto;        /* never shrink off-screen */
+    padding: 12px 10px;
+    display: grid;
+    gap: 8px;
+    justify-items: center;
+    border-top: 1px solid #e1e1e1;
+    margin-left: 4px;
+    margin-right: 4px;
+}
+
+.sidebar__app-logo img {
+    display: block;
+    max-block-size: 72px;
+    inline-size: auto;
+    object-fit: contain;
+}
+
+.sidebar__copyright {
+    font-size: 12px;
+    opacity: 0.8;
+    text-align: center;
+}
+
+/* Optional: basic nav spacing (keep your existing nav/link styles as needed) */
+.nav-wrapper {
+    padding: 16px;
+    margin: 8px;
+}
+