@banch0u/core-project-test-repository 1.8.2 → 1.8.4

package/dist/components/ProfileOptions/index.module.scss

@@ -1,6 +1,6 @@
 .profile {
   display: flex;
-  gap: 12px;
+  gap: 10px;
   align-items: center;
   .category {
     display: flex;
@@ -18,6 +18,7 @@
     display: flex;
     align-items: center;
     cursor: pointer;
+    padding: 0;
     svg {
       width: 20px;
       margin-top: 3.5px;
@@ -34,17 +35,7 @@
       border-radius: 50%;
       border: 1px solid #bebebe;
     }
-    .pp {
-      width: 39px;
-      height: 39px;
-      border-radius: 50%;
-      // border: 1px solid #bebebe;
-      background: var(--darkBlueColor);
-      color: white;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    }
+
     .name {
       font-family: Inter;
       font-size: 12px;
@@ -129,3 +120,144 @@
     }
   }
 }
+.icon_overlay {
+  background-color: var(--lightBlue);
+  // padding: 11px;
+  border-radius: 6px;
+  width: 46px;
+  height: 46px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  svg {
+    width: 24px !important;
+    height: 24px !important;
+    margin-top: 0 !important;
+  }
+}
+
+.profileRow {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  position: relative;
+}
+
+.button {
+  background: transparent;
+  border: none;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  padding: 0;
+
+  svg {
+    width: 20px;
+    margin-top: 3.5px;
+  }
+}
+
+.icon_overlay {
+  background-color: var(--lightBlue);
+  border-radius: 6px;
+  width: 46px;
+  height: 46px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  svg {
+    width: 24px !important;
+    height: 24px !important;
+    margin-top: 0 !important;
+  }
+}
+
+.profile {
+  position: relative;
+  display: flex;
+  align-items: flex-end;
+}
+
+.profileHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 7px 10px;
+  border-radius: 8px;
+  background: #eef5fc;
+  cursor: pointer;
+  width: 240px;
+
+  .pp {
+    width: 32px;
+    height: 32px;
+    border-radius: 4px;
+    background: var(--blue);
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 500;
+    font-size: 16px;
+  }
+
+  .name {
+    font-weight: 600;
+    font-size: 14px;
+    color: var(--black);
+  }
+}
+
+.arrow {
+  width: 10px;
+  height: 10px;
+  border-right: 2px solid var(--blue);
+  border-bottom: 2px solid var(--blue);
+  transform: rotate(45deg);
+  transition: transform 0.3s ease;
+  margin-right: 6px;
+}
+
+.arrow.open {
+  transform: rotate(-135deg);
+}
+
+.profileDropdown {
+  position: absolute;
+  top: 100%;
+  right: -1px;
+  width: 260px;
+  border-right: 1px solid var(--blue);
+  border-left: 1px solid var(--blue);
+  border-bottom: 1px solid var(--blue);
+
+  border-radius: 0px 0px 8px 8px;
+  background: #eef5fc;
+  z-index: 100;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.menuItem {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 16px;
+  font-size: 16px;
+  cursor: pointer;
+  border-top: 1px solid var(--white);
+  text-decoration: none;
+  transition: background 0.2s ease;
+  color: var(--blue);
+  &:hover {
+    background: #e6f0fc;
+  }
+}
+
+.logoutText {
+  color: red;
+}

package/dist/index.js

@@ -18,7 +18,11 @@ export { default as NotFound } from "./pages/NotFound";
 import LoginPage from "./pages/Login";
 import PlatformPage from "./pages/Platform";
 import HeaderLayout from "./layout/Header";
+import SidebarComponent from "./layout/Sidebar";
 import { CoreProvider } from "./store/coreProvider";
+export var Sidebar = function Sidebar(props) {
+  return /*#__PURE__*/React.createElement(CoreProvider, null, /*#__PURE__*/React.createElement(SidebarComponent, props));
+};
 export var Login = function Login() {
   return /*#__PURE__*/React.createElement(CoreProvider, null, /*#__PURE__*/React.createElement(LoginPage, null));
 };

package/dist/layout/Header/AppSelect/index.js

@@ -0,0 +1,88 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useMemo, useRef, useEffect, useState } from "react";
+import { useSelector } from "react-redux";
+import { useLocation } from "react-router-dom";
+import { Collapse } from "antd";
+import { RightOutlined } from "@ant-design/icons";
+import style from "./index.module.scss";
+import { entryData } from "../../../pages/Platform/constant";
+var Panel = Collapse.Panel;
+var AppSelect = function AppSelect() {
+  var location = useLocation();
+  var _useSelector = useSelector(function (state) {
+      return state.auth;
+    }),
+    scopesData = _useSelector.scopesData;
+  var accordionRef = useRef(null);
+  var _useState = useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    activeKey = _useState2[0],
+    setActiveKey = _useState2[1]; // manage open/close state
+
+  var filteredOptions = useMemo(function () {
+    return entryData.filter(function (item) {
+      return item.scopes === "account" || scopesData === "*" || (scopesData === null || scopesData === void 0 ? void 0 : scopesData.includes(item.scopes));
+    });
+  }, [scopesData]);
+  var baseSegment = useMemo(function () {
+    return window.location.pathname.split("/")[1];
+  }, [location.pathname]);
+  var active = useMemo(function () {
+    return filteredOptions.find(function (opt) {
+      return opt.pathname.includes("/".concat(baseSegment));
+    }) || filteredOptions[0];
+  }, [filteredOptions, baseSegment]);
+
+  // ✨ Outside click listener
+  useEffect(function () {
+    var handleClickOutside = function handleClickOutside(e) {
+      if (accordionRef.current && !accordionRef.current.contains(e.target)) {
+        setActiveKey([]); // collapse if clicked outside
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return function () {
+      return document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: accordionRef
+  }, /*#__PURE__*/React.createElement(Collapse, {
+    bordered: false,
+    activeKey: activeKey,
+    onChange: function onChange(key) {
+      return setActiveKey(key);
+    },
+    expandIconPosition: "end",
+    expandIcon: function expandIcon(_ref) {
+      var isActive = _ref.isActive;
+      return /*#__PURE__*/React.createElement("div", {
+        "data-no-invert": true
+      }, /*#__PURE__*/React.createElement(RightOutlined, {
+        style: {
+          transform: "rotate(".concat(isActive ? 270 : 90, "deg)"),
+          transition: "transform 0.2s ease",
+          color: "white",
+          fontSize: "14px"
+        }
+      }));
+    },
+    className: style.accordion
+  }, /*#__PURE__*/React.createElement(Panel, {
+    header: /*#__PURE__*/React.createElement("div", {
+      className: style.accordionHeader
+    }, /*#__PURE__*/React.createElement("div", null, active === null || active === void 0 ? void 0 : active.icon), /*#__PURE__*/React.createElement("span", null, active === null || active === void 0 ? void 0 : active.value)),
+    key: "1"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: style.accordionBody
+  }, filteredOptions.filter(function (opt) {
+    return opt.pathname !== (active === null || active === void 0 ? void 0 : active.pathname);
+  }).map(function (option) {
+    return /*#__PURE__*/React.createElement("a", {
+      key: option.id,
+      href: option.pathname,
+      className: style.accordionOption
+    }, option.icon, /*#__PURE__*/React.createElement("span", null, option.value));
+  })))));
+};
+export default AppSelect;

package/dist/layout/Header/AppSelect/index.module.scss

@@ -0,0 +1,63 @@
+.accordion {
+  background: var(--blue);
+  width: 250px;
+}
+
+.accordionHeader {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  span {
+    font-size: 18px;
+    font-weight: 500;
+    color: var(--white);
+    height: auto;
+  }
+  div {
+    height: 30px;
+    filter: brightness(0) invert(1) !important;
+  }
+  svg {
+    width: 30px !important;
+    height: 30px !important;
+  }
+}
+
+.accordionBody {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.accordionOption {
+  background-color: var(--white);
+  color: var(--blue);
+  display: flex;
+  align-items: center;
+  padding: 10px;
+  border-radius: 6px;
+  gap: 10px;
+  font-size: 16px;
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 100%;
+  letter-spacing: 0%;
+
+  cursor: pointer;
+  text-decoration: none;
+  transition: background 0.2s ease;
+
+  svg {
+    width: 26px;
+    height: 26px;
+  }
+
+  &:hover {
+    background-color: var(--lightBlue);
+  }
+  &:hover {
+    span {
+      color: var(--blue);
+    }
+  }
+}

package/dist/layout/Header/index.js

@@ -1,104 +1,26 @@
-import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _regeneratorRuntime from "@babel/runtime/regenerator";
-import React, { useEffect, useState, useCallback } from "react";
+import React, { useEffect, useState } from "react";
 import style from "./index.module.scss";
-import { DsgLogo } from "../../assets/icons";
 import ProfileOptions from "../../components/ProfileOptions";
-import { Link } from "react-router-dom";
-import { PLATFORM_PATH } from "../../utils/path";
-import { useDispatch, useSelector } from "react-redux";
-import { getCompanyInfo } from "../../store/slices/companyInfo";
-import api from "../../utils/axios";
+import AppSelect from "./AppSelect";
 var Header = function Header() {
   var _useState = useState(localStorage.getItem("theme") || "light"),
     _useState2 = _slicedToArray(_useState, 2),
     theme = _useState2[0],
     setTheme = _useState2[1];
-  var _useState3 = useState(null),
-    _useState4 = _slicedToArray(_useState3, 2),
-    imageSrc = _useState4[0],
-    setImageSrc = _useState4[1];
-  var dispatch = useDispatch();
-  var companyInfo = useSelector(function (state) {
-    return state.companyInfo.companyInfo;
-  });
   var updateTheme = function updateTheme() {
     var newTheme = localStorage.getItem("theme") || "light";
     setTheme(newTheme);
   };
-  var getBase64FromURL = useCallback(/*#__PURE__*/function () {
-    var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(url) {
-      var res;
-      return _regeneratorRuntime.wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
-          case 0:
-            _context.prev = 0;
-            _context.next = 3;
-            return api.get(url);
-          case 3:
-            res = _context.sent;
-            return _context.abrupt("return", res === null || res === void 0 ? void 0 : res.data);
-          case 7:
-            _context.prev = 7;
-            _context.t0 = _context["catch"](0);
-            console.error("Error loading logo:", _context.t0);
-            return _context.abrupt("return", null);
-          case 11:
-          case "end":
-            return _context.stop();
-        }
-      }, _callee, null, [[0, 7]]);
-    }));
-    return function (_x) {
-      return _ref.apply(this, arguments);
-    };
-  }(), []);
   useEffect(function () {
-    dispatch(getCompanyInfo());
     window.addEventListener("themeChange", updateTheme);
     return function () {
       return window.removeEventListener("themeChange", updateTheme);
     };
-  }, [dispatch]);
-  useEffect(function () {
-    var fetchImage = /*#__PURE__*/function () {
-      var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
-        var _companyInfo$;
-        var base64;
-        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
-          while (1) switch (_context2.prev = _context2.next) {
-            case 0:
-              if (!(companyInfo !== null && companyInfo !== void 0 && (_companyInfo$ = companyInfo[0]) !== null && _companyInfo$ !== void 0 && _companyInfo$.filePath)) {
-                _context2.next = 5;
-                break;
-              }
-              _context2.next = 3;
-              return getBase64FromURL(companyInfo[0].filePath);
-            case 3:
-              base64 = _context2.sent;
-              setImageSrc(base64);
-            case 5:
-            case "end":
-              return _context2.stop();
-          }
-        }, _callee2);
-      }));
-      return function fetchImage() {
-        return _ref2.apply(this, arguments);
-      };
-    }();
-    fetchImage();
-  }, [companyInfo, getBase64FromURL]);
+  }, []);
   return /*#__PURE__*/React.createElement("header", {
-    className: style.header
-  }, /*#__PURE__*/React.createElement(Link, {
-    to: PLATFORM_PATH
-  }, imageSrc ? /*#__PURE__*/React.createElement("img", {
-    src: imageSrc,
-    alt: "Company Logo"
-  }) : theme === "dark" ? /*#__PURE__*/React.createElement(DsgLogo, {
-    dark: true
-  }) : /*#__PURE__*/React.createElement(DsgLogo, null)), /*#__PURE__*/React.createElement(ProfileOptions, null));
+    className: style.header,
+    "data-no-invert": true
+  }, /*#__PURE__*/React.createElement(AppSelect, null), /*#__PURE__*/React.createElement(ProfileOptions, null));
 };
 export default Header;

package/dist/layout/Header/index.module.scss

@@ -1,19 +1,15 @@
 .header {
-  height: 84px;
-  background: #fff;
+  height: 81px;
+  background: var(--blue);
   align-items: center;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 0 20px;
-  border-bottom: 1px solid #c4c4c4;
+  padding: 0 17px;
   z-index: 1;
-  svg {
-    width: 123px;
-    height: auto;
-  }
-  img {
-    width: 95px;
-    height: auto;
-  }
+  position: relative;
+  overflow: visible; // ✅ allows dropdowns to escape
+  // z-index: 10;
+}
+.header {
 }

package/dist/layout/Sidebar/index.js

@@ -0,0 +1,147 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import React, { useEffect, useState, useCallback } from "react";
+import { Link, useLocation } from "react-router-dom";
+import Cookies from "js-cookie";
+import style from "./index.module.scss";
+import { Layout, Menu } from "antd";
+import { DsgLogo, DsgLogoEmblem } from "../../assets/icons";
+import { PLATFORM_PATH } from "../../utils/path";
+import { useDispatch, useSelector } from "react-redux";
+import { getCompanyInfo } from "../../store/slices/companyInfo";
+import api from "../../utils/axios";
+var Sider = Layout.Sider;
+var Sidebar = function Sidebar(_ref) {
+  var _items$flatMap$find;
+  var _ref$items = _ref.items,
+    items = _ref$items === void 0 ? [] : _ref$items;
+  var location = useLocation();
+  var dispatch = useDispatch();
+  var companyInfo = useSelector(function (state) {
+    return state.companyInfo.companyInfo;
+  });
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    collapsed = _useState2[0],
+    setCollapsed = _useState2[1];
+  var _useState3 = useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    imageSrc = _useState4[0],
+    setImageSrc = _useState4[1];
+  var _useState5 = useState(localStorage.getItem("theme") === "dark"),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isDark = _useState6[0],
+    setIsDark = _useState6[1];
+  var handleCollapse = function handleCollapse() {
+    var newState = !collapsed;
+    setCollapsed(newState);
+    Cookies.set("sidebarCollapsed", newState, {
+      expires: 7
+    });
+  };
+  var getBase64FromURL = useCallback(/*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(url) {
+      var res;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            _context.prev = 0;
+            _context.next = 3;
+            return api.get(url);
+          case 3:
+            res = _context.sent;
+            return _context.abrupt("return", res === null || res === void 0 ? void 0 : res.data);
+          case 7:
+            _context.prev = 7;
+            _context.t0 = _context["catch"](0);
+            console.error("Error loading logo:", _context.t0);
+            return _context.abrupt("return", null);
+          case 11:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[0, 7]]);
+    }));
+    return function (_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }(), []);
+  useEffect(function () {
+    var sidebarState = Cookies.get("sidebarCollapsed") === "true";
+    setCollapsed(sidebarState);
+    dispatch(getCompanyInfo());
+  }, [dispatch]);
+  console.log(companyInfo);
+  useEffect(function () {
+    var fetchLogo = /*#__PURE__*/function () {
+      var _ref3 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+        var _companyInfo$;
+        var base64;
+        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
+            case 0:
+              if (!(companyInfo !== null && companyInfo !== void 0 && (_companyInfo$ = companyInfo[0]) !== null && _companyInfo$ !== void 0 && _companyInfo$.filePath)) {
+                _context2.next = 5;
+                break;
+              }
+              _context2.next = 3;
+              return getBase64FromURL(companyInfo[0].filePath);
+            case 3:
+              base64 = _context2.sent;
+              setImageSrc(base64);
+            case 5:
+            case "end":
+              return _context2.stop();
+          }
+        }, _callee2);
+      }));
+      return function fetchLogo() {
+        return _ref3.apply(this, arguments);
+      };
+    }();
+    fetchLogo();
+  }, [companyInfo, getBase64FromURL]);
+  useEffect(function () {
+    var handleThemeChange = function handleThemeChange() {
+      setIsDark(localStorage.getItem("theme") === "dark");
+    };
+    window.addEventListener("themeChange", handleThemeChange);
+    return function () {
+      window.removeEventListener("themeChange", handleThemeChange);
+    };
+  }, []);
+  var selectedKey = (_items$flatMap$find = items.flatMap(function (item) {
+    return item.children ? item.children : item;
+  }).find(function (item) {
+    return location.pathname.includes(item.key);
+  })) === null || _items$flatMap$find === void 0 ? void 0 : _items$flatMap$find.key;
+  return /*#__PURE__*/React.createElement(Sider, {
+    width: 270,
+    collapsible: true,
+    collapsed: collapsed,
+    collapsedWidth: 64,
+    trigger: null,
+    className: style.sidebar
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "sideBar"
+  }, /*#__PURE__*/React.createElement(Menu, {
+    mode: "inline",
+    items: items,
+    selectedKeys: [selectedKey],
+    className: style.menu
+  })), /*#__PURE__*/React.createElement(Link, {
+    to: PLATFORM_PATH,
+    className: style.buttons
+  }, collapsed ? /*#__PURE__*/React.createElement(DsgLogoEmblem, null) : imageSrc ? /*#__PURE__*/React.createElement("img", {
+    src: imageSrc,
+    alt: "Company Logo"
+  }) : isDark ? /*#__PURE__*/React.createElement(DsgLogo, {
+    dark: true
+  }) : /*#__PURE__*/React.createElement(DsgLogo, null)), /*#__PURE__*/React.createElement("div", {
+    "data-no-invert": true,
+    className: style.collapseButton,
+    onClick: handleCollapse
+  }, collapsed ? "->" : "<-"));
+};
+export default Sidebar;

package/dist/layout/Sidebar/index.module.scss

@@ -0,0 +1,50 @@
+.sidebar {
+  background: #fff !important;
+  border: none;
+  position: relative;
+  box-shadow: 0px 0px 8px 0px #00000025;
+  height: calc(100vh - 85px);
+  border-radius: 0px 0px 12px 0px;
+  svg {
+    vertical-align: middle;
+  }
+  .menu {
+    margin-top: 10px;
+    padding: 0 6px;
+    li {
+      span {
+        margin-left: 8px;
+        font-size: 16px;
+        font-weight: 500;
+        line-height: 20px;
+        text-align: left;
+      }
+    }
+  }
+  .buttons {
+    position: absolute;
+    left: 15px;
+    bottom: 16px;
+    svg {
+      width: 100%;
+      height: auto;
+      padding-right: 15px;
+    }
+    img {
+      width: 100%;
+      height: auto;
+      padding-right: 15px;
+    }
+  }
+  .collapseButton {
+    position: absolute;
+    right: -12px;
+    top: 50%;
+    transform: translateY(-100%);
+    padding: 5px;
+    background: var(--blue);
+    border-radius: 50%;
+    color: var(--white);
+    cursor: pointer;
+  }
+}