datastake-daf 0.6.667 → 0.6.669

package/dist/layouts/index.js

@@ -8,12 +8,17 @@ var antd = require('antd');
 var jsxRuntime = require('react/jsx-runtime');
 var PropTypes = require('prop-types');
 var moment = require('moment');
+var dayjs = require('dayjs');
+var axios = require('axios');
+require('lodash');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var o__default = /*#__PURE__*/_interopDefaultLegacy(o);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment);
+var dayjs__default = /*#__PURE__*/_interopDefaultLegacy(dayjs);
+var axios__default = /*#__PURE__*/_interopDefaultLegacy(axios);
 
 typeof localStorage.getItem('is_collapsed') === 'string' ? localStorage.getItem('is_collapsed') === 'true' ? true : false : true;
 typeof localStorage.getItem('is_nested_sidebar_collapsed') === 'string' ? localStorage.getItem('is_nested_sidebar_collapsed') === 'true' : true;
@@ -5680,7 +5685,7 @@ const MOBILE_WIDTH$1 = `max-width: ${MOBILE_W$1}px`;
 const TABLET_WIDTH$1 = `max-width: ${TABLET_W$1}px`;
 
 /* eslint-disable react/prop-types */
-const Style$5 = dt.div`
+const Style$6 = dt.div`
   display: flex;
   cursor: pointer;
 
@@ -5743,7 +5748,7 @@ function UserIcon({
   companyLogo
 }) {
   if (companyLogo) {
-    return /*#__PURE__*/jsxRuntime.jsx(Style$5, {
+    return /*#__PURE__*/jsxRuntime.jsx(Style$6, {
       children: /*#__PURE__*/jsxRuntime.jsxs("div", {
         className: "flex",
         children: [/*#__PURE__*/jsxRuntime.jsx("div", {
@@ -5761,7 +5766,7 @@ function UserIcon({
       })
     });
   }
-  return /*#__PURE__*/jsxRuntime.jsx(Style$5, {
+  return /*#__PURE__*/jsxRuntime.jsx(Style$6, {
     children: /*#__PURE__*/jsxRuntime.jsxs("div", {
       className: "flex",
       children: [/*#__PURE__*/jsxRuntime.jsx("div", {
@@ -5778,7 +5783,7 @@ function UserIcon({
   });
 }
 
-const Style$4 = dt.div`
+const Style$5 = dt.div`
   position: fixed;
   background: rgba(0, 0, 0, 0.4);
   width: 100dvw;
@@ -5978,7 +5983,7 @@ function MobileDrawer({
       }
     });
   };
-  return /*#__PURE__*/jsxRuntime.jsx(Style$4, {
+  return /*#__PURE__*/jsxRuntime.jsx(Style$5, {
     className: formatClassname([!drawerOpened && 'closed', isUserDropdown && 'user-dropdown']),
     children: /*#__PURE__*/jsxRuntime.jsx("div", {
       className: "drawer",
@@ -6407,174 +6412,1356 @@ const Notification = ({
   });
 };
 
-/* eslint-disable react/prop-types */
-function NotificationHistory({
-  visible,
-  setHistoryVisible,
-  t = key => key
+var Style$4 = dt.div`
+  .noti-list {
+    height: 50vh;
+    max-height: 500px;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    gap: 40px;
+
+    .loading-all {
+      padding: 8px 0px;
+      text-align: center;
+    }
+
+    .noti-group {
+      h4 {
+        font-size: var(--font-size-lg);
+        font-weight: 600;
+        margin-bottom: var(--size);
+      }
+    } 
+
+    .noti {
+      padding: 8px 0px;
+      border-bottom: 1px solid #EAECF0;
+
+      &:last-of-type {
+        border-bottom: 0px;
+      }
+
+      .noti-title {
+        display: flex;
+
+        h5 {
+          font-size: 14px;
+          font-weight: 600;
+          line-height: 20px;
+          flex: 1;
+        }
+
+        span {
+          font-size: 14px;
+          font-weight: 500;
+          line-height: 20px;
+          color: #667085;
+        }
+      }
+
+      p {
+        margin-bottom: 0px;
+        color: #667085;
+        font-weight: 500;
+        font-size: 14px;
+      }
+    }
+  }
+`;
+
+function Tags({
+  tags = []
 }) {
-  return /*#__PURE__*/jsxRuntime.jsx(antd.Modal, {
-    open: visible,
-    onCancel: () => setHistoryVisible(false),
-    footer: null,
-    title: t('Notification History'),
-    children: /*#__PURE__*/jsxRuntime.jsx("div", {
+  const mainTags = [...tags].splice(0, 3);
+  const otherTags = [...tags].splice(3, tags.length - 1);
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "flex ml-3",
+    children: [mainTags.map((t, i) => /*#__PURE__*/jsxRuntime.jsx(antd.Tag, {
       style: {
-        padding: '20px'
+        textAlign: 'center'
       },
-      children: t('Notification history content will appear here')
-    })
+      color: t.color || 'default',
+      children: t.label
+    }, `tag-${i}`)), !!otherTags.length && /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
+      placement: "bottom",
+      title: /*#__PURE__*/jsxRuntime.jsx("div", {
+        children: otherTags.map((t, i) => /*#__PURE__*/jsxRuntime.jsxs(o__default["default"].Fragment, {
+          children: [t.label, i !== otherTags.length - 1 && /*#__PURE__*/jsxRuntime.jsx("br", {})]
+        }, `other-tags-p-${i}`))
+      }),
+      children: /*#__PURE__*/jsxRuntime.jsxs(antd.Tag, {
+        style: {
+          textAlign: 'center'
+        },
+        children: ["+", otherTags.length]
+      })
+    })]
   });
 }
 
-/* eslint-disable react/prop-types */
-function Notifications({
-  mod = 'pme',
-  toggle = () => {},
-  t = key => key,
-  goTo = () => {},
-  getRedirectLink = () => {},
-  appName = 'app',
-  theme = {}
+function Buttons({
+  actionButtons = [],
+  extraButtons = []
 }) {
-  const [historyVisible, setHistoryVisible] = o.useState(false);
-  const {
-    loading,
-    _notifications,
-    _fetch,
-    total,
-    clearAll
-  } = useNotificationsContext();
-  const items = [{
-    key: "details",
-    icon: /*#__PURE__*/jsxRuntime.jsx(CustomIcon, {
-      name: "CheckDone",
-      width: 13,
-      height: 13
-    }),
-    disabled: !total,
-    onClick: () => {
-      clearAll();
-      toggle();
-    },
-    label: t('Clear All')
-  }, {
-    key: "publish",
-    icon: /*#__PURE__*/jsxRuntime.jsx(CustomIcon, {
-      name: "NotificationText",
-      width: 13,
-      height: 13
-    }),
-    onClick: () => {
-      toggle();
-      setHistoryVisible(true);
-    },
-    label: t('View All')
-  }, {
-    key: "dashboard",
-    icon: /*#__PURE__*/jsxRuntime.jsx(CustomIcon, {
-      name: "Settings",
-      width: 13,
-      height: 13
-    }),
-    onClick: () => {
-      toggle();
-      goTo(getRedirectLink(`/app/${mod}/view/settings?activeForm=notifications`));
-    },
-    label: t('Settings')
-  }];
-  return /*#__PURE__*/jsxRuntime.jsxs(NotificationsStyle, {
-    className: appName,
-    children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: "notis-title",
-      children: [/*#__PURE__*/jsxRuntime.jsx("h3", {
-        children: t('Notification')
-      }), /*#__PURE__*/jsxRuntime.jsx(antd.Dropdown, {
+  const [minWidth, setMinWidth] = o.useState(0);
+  o.useEffect(() => {
+    let _minWidth = minWidth;
+    actionButtons.forEach((_, i) => {
+      const _btn = document.getElementById(`header-btn-${i}`);
+      const _width = parseInt(_btn.offsetWidth);
+      if (_width > _minWidth) {
+        _minWidth = _width;
+      }
+    });
+    setMinWidth(_minWidth);
+  }, [actionButtons]);
+  const renderButtons = (b, i) => {
+    const _button = /*#__PURE__*/jsxRuntime.jsx("div", {
+      children: /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
+        title: b.tooltip,
+        children: /*#__PURE__*/jsxRuntime.jsx(antd.Button, {
+          type: b.type,
+          id: `header-btn-${i}`,
+          icon: typeof b.icon === "string" ? /*#__PURE__*/jsxRuntime.jsx(CustomIcon, {
+            name: b.icon,
+            width: 16,
+            height: 16
+          }) : b.icon,
+          onClick: b.onClick,
+          className: formatClassname([b.noMinWidth && "no-min-width", b.className, b.squareIconButton && "squareIconButton no-min-width", b.icon && "squareIconButton no-min-width"]),
+          disabled: b.disabled,
+          style: {
+            minWidth: b.noMinWidth ? undefined : minWidth ? minWidth : undefined,
+            ...(b?.style || {})
+          },
+          children: b.label
+        })
+      })
+    }, `action-btn-${i}-${b?.key}`);
+    if (b.tooltip) {
+      return /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
+        title: b.tooltip,
+        children: _button
+      });
+    }
+    if (b.popConfirm) {
+      return /*#__PURE__*/jsxRuntime.jsx(antd.Popconfirm, {
+        ...b.popConfirm,
+        children: _button
+      });
+    }
+    return _button;
+  };
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "buttons-cont",
+    children: [actionButtons.map(renderButtons), !!extraButtons.length && /*#__PURE__*/jsxRuntime.jsx("div", {
+      children: /*#__PURE__*/jsxRuntime.jsx(antd.Dropdown, {
         menu: {
-          items
+          items: extraButtons
         },
         trigger: "click",
-        rootClassName: formatClassname(['dark-menu', appName, theme.customHeaderColor && 'custom']),
-        children: /*#__PURE__*/jsxRuntime.jsx("div", {
-          className: "cursor-pointer",
-          children: /*#__PURE__*/jsxRuntime.jsx(CustomIcon, {
-            name: "MoreCustom",
-            width: 3,
-            height: 13
+        placement: "bottomRight",
+        children: /*#__PURE__*/jsxRuntime.jsx("a", {
+          onClick: e => e.preventDefault(),
+          children: /*#__PURE__*/jsxRuntime.jsx(antd.Button, {
+            className: "squareIconButton no-min-width",
+            icon: /*#__PURE__*/jsxRuntime.jsx(CustomIcon, {
+              name: "More",
+              width: 3,
+              height: 13
+            })
           })
         })
-      })]
-    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: "notis-list",
-      onScroll: e => {
-        const _t = e.target;
-        const canFetch = _t.scrollTop + _t.clientHeight >= _t.scrollHeight - 200;
-        if (canFetch) {
-          _fetch();
-        }
-      },
-      children: [!loading && !total ? /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "no-notis",
-        children: t('No new notifications')
-      }) : null, _notifications.map((n, i) => /*#__PURE__*/jsxRuntime.jsx(Notification, {
-        toggle: toggle,
-        n: n,
-        t: t,
-        goTo: goTo
-      }, `notifications-${i + 1}`)), loading && /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "loading-cont",
-        children: /*#__PURE__*/jsxRuntime.jsx(icons.LoadingOutlined, {})
-      })]
-    }), /*#__PURE__*/jsxRuntime.jsx(NotificationHistory, {
-      visible: historyVisible,
-      setHistoryVisible: setHistoryVisible,
-      t: t,
-      goTo: goTo
+      })
     })]
   });
 }
 
-var Style$3 = dt.div`
-  &.popup {
-    h2 {
-      margin-bottom: 8px;
-    }
+const capitalize = string => string && string.charAt(0).toUpperCase() + string.slice(1);
+const camelCaseToTitle = string => string && typeof string === 'string' ? string.split(/(?=[A-Z])/).map(word => capitalize(word)).join(' ') : string;
 
-    p {
-      color: #667085;
-      margin-bottom: 20px;
+const CustomSelect = ({
+  value,
+  filterSelectOptions,
+  placeholder = '',
+  onChange = () => {},
+  disabled = false,
+  options = [],
+  i = 0,
+  k,
+  filters,
+  config = {}
+}) => {
+  const filteredOptions = o.useMemo(() => {
+    if (typeof config.filterOptions === 'function') {
+      return options.filter(option => config.filterOptions({
+        option,
+        filters
+      }));
     }
-
-    .ant-form-item-label {
-      padding-bottom: 6px;
+    return options;
+  }, [config, filters, options]);
+  o.useEffect(() => {
+    if (value) {
+      filteredOptions.find(o => o.value === value);
     }
-
-    .buttons {
-      margin-top: 24px;
+  }, [filteredOptions]);
+  return /*#__PURE__*/jsxRuntime.jsx(antd.Select, {
+    style: {
+      width: '100%'
+    },
+    value: value,
+    placeholder: placeholder,
+    filterOption: filterSelectOptions,
+    onChange: onChange,
+    disabled: disabled,
+    showSearch: true,
+    allowClear: true,
+    mode: config.isMulti ? 'multiple' : undefined,
+    children: filteredOptions.map((o, j) => /*#__PURE__*/jsxRuntime.jsx(antd.Select.Option, {
+      value: o.value || o,
+      children: o.label || camelCaseToTitle(o)
+    }, `${i}-${j}-${k}`))
+  });
+};
+CustomSelect.propTypes = {
+  value: PropTypes__default["default"].object,
+  filterSelectOptions: PropTypes__default["default"].func,
+  placeholder: PropTypes__default["default"].string,
+  onChange: PropTypes__default["default"].func,
+  disabled: PropTypes__default["default"].bool,
+  options: PropTypes__default["default"].any,
+  i: PropTypes__default["default"].number,
+  k: PropTypes__default["default"].string,
+  filters: PropTypes__default["default"].object,
+  config: PropTypes__default["default"].object
+};
+
+const Timeframe = ({
+  value,
+  onChange = () => {},
+  disabled = false,
+  t = s => s
+}) => {
+  const getValue = () => {
+    if (value && typeof value === 'object') {
+      const {
+        startDate,
+        endDate
+      } = value;
+      const _start = typeof startDate === 'string' ? dayjs__default["default"](startDate) : startDate;
+      const _end = typeof endDate === 'string' ? dayjs__default["default"](endDate) : endDate;
+      return {
+        startDate: _start,
+        endDate: _end
+      };
+    }
+    return {};
+  };
+  const {
+    startDate,
+    endDate
+  } = getValue();
+  return /*#__PURE__*/jsxRuntime.jsx(antd.DatePicker.RangePicker, {
+    value: [startDate, endDate],
+    className: "w-100",
+    separator: /*#__PURE__*/jsxRuntime.jsx(CustomIcon, {
+      name: "Right",
+      width: 10,
+      height: 10,
+      color: "#D2D6DB"
+    }),
+    placeholder: [t('Start Date'), t('End Date')],
+    disabled: disabled,
+    format: "DD MM YYYY",
+    onChange: val => {
+      if (val) {
+        const [startDate, endDate] = val;
+        onChange({
+          startDate,
+          endDate
+        });
+      } else {
+        onChange({});
+      }
     }
+  });
+};
+Timeframe.propTypes = {
+  t: PropTypes__default["default"].func,
+  value: PropTypes__default["default"].string,
+  disabled: PropTypes__default["default"].bool,
+  onChange: PropTypes__default["default"].func
+};
 
-    .errors-cont {
-      margin-top: 8px;
+/**
+ * @description Manages window.storage
+ * @returns storage objects
+ * @class StorageManager
+ */
+class StorageManager {
+  /**
+   * @description Set or update given value in localStorage
+   * @static
+   * @returns Object
+   * @memberof StorageManager
+   */
+  static set(key, value) {
+    if (key && value) {
+      window.localStorage.setItem(key, value);
+      return {
+        success: true,
+        data: "Storage has been set successfully."
+      };
     }
+    return {
+      error: true,
+      data: "Storage was not set. Storage key and value is required!"
+    };
   }
-`;
 
-const Style$2 = dt.div`
-  .ant-btn {
-    border-radius: 100px 100px 100px 0;
-    padding: 10px;
-    height: fit-content;
-    font-size: var(--size);
-    line-height: var(--size-lg);
-    font-weight: 400;
-    width: 100%;
-
-    @media (${MOBILE_WIDTH$1}) {
-      padding: 0.8rem 2.625rem;
+  /**
+   * @description Set or update given value in sessionStorage, used to not remember user after closing opened tab.
+   * @static
+   * @returns Object
+   * @memberof StorageManager
+   */
+  static setToSession(key, value) {
+    if (key && value) {
+      window.sessionStorage.setItem(key, value);
+      return {
+        success: true,
+        data: "Storage has been set successfully."
+      };
     }
+    return {
+      error: true,
+      data: "Storage was not set. Storage key and value is required!"
+    };
+  }
 
-    &.normal-br {
-      border-radius: 8px;
+  /**
+   * @description Fetch data from localStorage
+   * @static
+   * @returns Object
+   * @memberof StorageManager
+   */
+  static get(key, defaultValue = undefined) {
+    if (key) {
+      const val = window.localStorage.getItem(key) || window.sessionStorage.getItem(key);
+      return val || defaultValue;
+    }
+    return {
+      error: true,
+      data: "Storage key is required!"
+    };
+  }
+
+  /**
+   * @description Clear only one value from localStorage
+   * @static
+   * @returns Object
+   * @memberof StorageManager
+   */
+  static clearOne(key) {
+    if (key === 'token') {
+      localStorage.removeItem('trade-type');
+      localStorage.removeItem('trade-value');
+    }
+    if (key) {
+      window.localStorage.removeItem(key) || window.sessionStorage.removeItem(key);
+    }
+    return "Storage key is required!";
+  }
+
+  /**
+   * @description Clear all values from localStorage
+   * @static
+   * @returns Object
+   * @memberof StorageManager
+   */
+  static clearAll() {
+    window.localStorage.clear();
+    window.sessionStorage.clear();
+  }
+  static hasKey(key) {
+    return typeof this.get(key) === 'string';
+  }
+  static saveFilters(module, namespace, filters = {}, merge = false) {
+    let savedFilters = this.get('filters');
+    try {
+      savedFilters = JSON.parse(savedFilters);
+    } catch (e) {
+      savedFilters = {};
+    }
+    if (!savedFilters) {
+      savedFilters = {};
+    }
+    if (!savedFilters[module]) {
+      savedFilters[module] = {};
+    }
+    if (!savedFilters[module][namespace]) {
+      savedFilters[module][namespace] = {};
+    }
+    if (Object.keys(filters).length) {
+      savedFilters[module][namespace] = merge ? Object.assign(savedFilters[module][namespace], filters) : filters;
+    } else {
+      savedFilters[module][namespace] = {};
+    }
+    this.set('filters', JSON.stringify(savedFilters));
+    return savedFilters[module][namespace];
+  }
+  static getFilters(module, namespace) {
+    let savedFilters = this.get('filters');
+    try {
+      savedFilters = JSON.parse(savedFilters);
+    } catch (e) {
+      savedFilters = {};
+    }
+    if (!savedFilters) {
+      savedFilters = {};
+    }
+    if (!savedFilters[module]) {
+      savedFilters[module] = {};
+    }
+    if (!savedFilters[module][namespace]) {
+      savedFilters[module][namespace] = {};
+    }
+    return savedFilters[module][namespace];
+  }
+}
+
+const isProxy = () => {
+  const pathname = window.location.pathname;
+  if (pathname.includes('/proxy/pme') || pathname.includes('/proxy/cadd')) {
+    return window.opener || !!StorageManager.get('proxy_token');
+  }
+  return false;
+};
+const getToken = () => isProxy() ? StorageManager.get('proxy_token') : StorageManager.get('token');
+
+var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+
+function createCommonjsModule(fn, module) {
+	return module = { exports: {} }, fn(module, module.exports), module.exports;
+}
+
+var customParseFormat = createCommonjsModule(function (module, exports) {
+!function(e,t){module.exports=t();}(commonjsGlobal,(function(){var e={LTS:"h:mm:ss A",LT:"h:mm A",L:"MM/DD/YYYY",LL:"MMMM D, YYYY",LLL:"MMMM D, YYYY h:mm A",LLLL:"dddd, MMMM D, YYYY h:mm A"},t=/(\[[^[]*\])|([-_:/.,()\s]+)|(A|a|YYYY|YY?|MM?M?M?|Do|DD?|hh?|HH?|mm?|ss?|S{1,3}|z|ZZ?)/g,n=/\d\d/,r=/\d\d?/,i=/\d*[^-_:/,()\s\d]+/,o={},s=function(e){return (e=+e)+(e>68?1900:2e3)};var a=function(e){return function(t){this[e]=+t;}},f=[/[+-]\d\d:?(\d\d)?|Z/,function(e){(this.zone||(this.zone={})).offset=function(e){if(!e)return 0;if("Z"===e)return 0;var t=e.match(/([+-]|\d\d)/g),n=60*t[1]+(+t[2]||0);return 0===n?0:"+"===t[0]?-n:n}(e);}],h=function(e){var t=o[e];return t&&(t.indexOf?t:t.s.concat(t.f))},u=function(e,t){var n,r=o.meridiem;if(r){for(var i=1;i<=24;i+=1)if(e.indexOf(r(i,0,t))>-1){n=i>12;break}}else n=e===(t?"pm":"PM");return n},d={A:[i,function(e){this.afternoon=u(e,!1);}],a:[i,function(e){this.afternoon=u(e,!0);}],S:[/\d/,function(e){this.milliseconds=100*+e;}],SS:[n,function(e){this.milliseconds=10*+e;}],SSS:[/\d{3}/,function(e){this.milliseconds=+e;}],s:[r,a("seconds")],ss:[r,a("seconds")],m:[r,a("minutes")],mm:[r,a("minutes")],H:[r,a("hours")],h:[r,a("hours")],HH:[r,a("hours")],hh:[r,a("hours")],D:[r,a("day")],DD:[n,a("day")],Do:[i,function(e){var t=o.ordinal,n=e.match(/\d+/);if(this.day=n[0],t)for(var r=1;r<=31;r+=1)t(r).replace(/\[|\]/g,"")===e&&(this.day=r);}],M:[r,a("month")],MM:[n,a("month")],MMM:[i,function(e){var t=h("months"),n=(h("monthsShort")||t.map((function(e){return e.slice(0,3)}))).indexOf(e)+1;if(n<1)throw new Error;this.month=n%12||n;}],MMMM:[i,function(e){var t=h("months").indexOf(e)+1;if(t<1)throw new Error;this.month=t%12||t;}],Y:[/[+-]?\d+/,a("year")],YY:[n,function(e){this.year=s(e);}],YYYY:[/\d{4}/,a("year")],Z:f,ZZ:f};function c(n){var r,i;r=n,i=o&&o.formats;for(var s=(n=r.replace(/(\[[^\]]+])|(LTS?|l{1,4}|L{1,4})/g,(function(t,n,r){var o=r&&r.toUpperCase();return n||i[r]||e[r]||i[o].replace(/(\[[^\]]+])|(MMMM|MM|DD|dddd)/g,(function(e,t,n){return t||n.slice(1)}))}))).match(t),a=s.length,f=0;f<a;f+=1){var h=s[f],u=d[h],c=u&&u[0],l=u&&u[1];s[f]=l?{regex:c,parser:l}:h.replace(/^\[|\]$/g,"");}return function(e){for(var t={},n=0,r=0;n<a;n+=1){var i=s[n];if("string"==typeof i)r+=i.length;else {var o=i.regex,f=i.parser,h=e.slice(r),u=o.exec(h)[0];f.call(t,u),e=e.replace(u,"");}}return function(e){var t=e.afternoon;if(void 0!==t){var n=e.hours;t?n<12&&(e.hours+=12):12===n&&(e.hours=0),delete e.afternoon;}}(t),t}}return function(e,t,n){n.p.customParseFormat=!0,e&&e.parseTwoDigitYear&&(s=e.parseTwoDigitYear);var r=t.prototype,i=r.parse;r.parse=function(e){var t=e.date,r=e.utc,s=e.args;this.$u=r;var a=s[1];if("string"==typeof a){var f=!0===s[2],h=!0===s[3],u=f||h,d=s[2];h&&(d=s[2]),o=this.$locale(),!f&&d&&(o=n.Ls[d]),this.$d=function(e,t,n){try{if(["x","X"].indexOf(t)>-1)return new Date(("X"===t?1e3:1)*e);var r=c(t)(e),i=r.year,o=r.month,s=r.day,a=r.hours,f=r.minutes,h=r.seconds,u=r.milliseconds,d=r.zone,l=new Date,m=s||(i||o?1:l.getDate()),M=i||l.getFullYear(),Y=0;i&&!o||(Y=o>0?o-1:l.getMonth());var p=a||0,v=f||0,D=h||0,g=u||0;return d?new Date(Date.UTC(M,Y,m,p,v,D,g+60*d.offset*1e3)):n?new Date(Date.UTC(M,Y,m,p,v,D,g)):new Date(M,Y,m,p,v,D,g)}catch(e){return new Date("")}}(t,a,r),this.init(),d&&!0!==d&&(this.$L=this.locale(d).$L),u&&t!=this.format(a)&&(this.$d=new Date("")),o={};}else if(a instanceof Array)for(var l=a.length,m=1;m<=l;m+=1){s[1]=a[m-1];var M=n.apply(this,s);if(M.isValid()){this.$d=M.$d,this.$L=M.$L,this.init();break}m===l&&(this.$d=new Date(""));}else i.call(this,e);};}}));
+});
+
+var utc = createCommonjsModule(function (module, exports) {
+!function(t,i){module.exports=i();}(commonjsGlobal,(function(){var t="minute",i=/[+-]\d\d(?::?\d\d)?/g,e=/([+-]|\d\d)/g;return function(s,f,n){var u=f.prototype;n.utc=function(t){var i={date:t,utc:!0,args:arguments};return new f(i)},u.utc=function(i){var e=n(this.toDate(),{locale:this.$L,utc:!0});return i?e.add(this.utcOffset(),t):e},u.local=function(){return n(this.toDate(),{locale:this.$L,utc:!1})};var o=u.parse;u.parse=function(t){t.utc&&(this.$u=!0),this.$utils().u(t.$offset)||(this.$offset=t.$offset),o.call(this,t);};var r=u.init;u.init=function(){if(this.$u){var t=this.$d;this.$y=t.getUTCFullYear(),this.$M=t.getUTCMonth(),this.$D=t.getUTCDate(),this.$W=t.getUTCDay(),this.$H=t.getUTCHours(),this.$m=t.getUTCMinutes(),this.$s=t.getUTCSeconds(),this.$ms=t.getUTCMilliseconds();}else r.call(this);};var a=u.utcOffset;u.utcOffset=function(s,f){var n=this.$utils().u;if(n(s))return this.$u?0:n(this.$offset)?a.call(this):this.$offset;if("string"==typeof s&&(s=function(t){void 0===t&&(t="");var s=t.match(i);if(!s)return null;var f=(""+s[0]).match(e)||["-",0,0],n=f[0],u=60*+f[1]+ +f[2];return 0===u?0:"+"===n?u:-u}(s),null===s))return this;var u=Math.abs(s)<=16?60*s:s,o=this;if(f)return o.$offset=u,o.$u=0===s,o;if(0!==s){var r=this.$u?this.toDate().getTimezoneOffset():-1*this.utcOffset();(o=this.local().add(u+r,t)).$offset=u,o.$x.$localOffset=r;}else o=this.utc();return o};var h=u.format;u.format=function(t){var i=t||(this.$u?"YYYY-MM-DDTHH:mm:ss[Z]":"");return h.call(this,i)},u.valueOf=function(){var t=this.$utils().u(this.$offset)?0:this.$offset+(this.$x.$localOffset||this.$d.getTimezoneOffset());return this.$d.valueOf()-6e4*t},u.isUTC=function(){return !!this.$u},u.toISOString=function(){return this.toDate().toISOString()},u.toString=function(){return this.toDate().toUTCString()};var l=u.toDate;u.toDate=function(t){return "s"===t&&this.$offset?n(this.format("YYYY-MM-DD HH:mm:ss:SSS")).toDate():l.call(this)};var c=u.diff;u.diff=function(t,i,e){if(t&&this.$u===t.$u)return c.call(this,t,i,e);var s=this.local(),f=n(t).local();return c.call(s,f,i,e)};}}));
+});
+
+var localizedFormat = createCommonjsModule(function (module, exports) {
+!function(e,t){module.exports=t();}(commonjsGlobal,(function(){var e={LTS:"h:mm:ss A",LT:"h:mm A",L:"MM/DD/YYYY",LL:"MMMM D, YYYY",LLL:"MMMM D, YYYY h:mm A",LLLL:"dddd, MMMM D, YYYY h:mm A"};return function(t,o,n){var r=o.prototype,i=r.format;n.en.formats=e,r.format=function(t){void 0===t&&(t="YYYY-MM-DDTHH:mm:ssZ");var o=this.$locale().formats,n=function(t,o){return t.replace(/(\[[^\]]+])|(LTS?|l{1,4}|L{1,4})/g,(function(t,n,r){var i=r&&r.toUpperCase();return n||o[r]||e[r]||o[i].replace(/(\[[^\]]+])|(MMMM|MM|DD|dddd)/g,(function(e,t,o){return t||o.slice(1)}))}))}(t,void 0===o?{}:o);return i.call(this,n)};}}));
+});
+
+createCommonjsModule(function (module, exports) {
+!function(e,n){module.exports=n(dayjs__default["default"]);}(commonjsGlobal,(function(e){function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var t=n(e),i={name:"fr",weekdays:"dimanche_lundi_mardi_mercredi_jeudi_vendredi_samedi".split("_"),weekdaysShort:"dim._lun._mar._mer._jeu._ven._sam.".split("_"),weekdaysMin:"di_lu_ma_me_je_ve_sa".split("_"),months:"janvier_février_mars_avril_mai_juin_juillet_août_septembre_octobre_novembre_décembre".split("_"),monthsShort:"janv._févr._mars_avr._mai_juin_juil._août_sept._oct._nov._déc.".split("_"),weekStart:1,yearStart:4,formats:{LT:"HH:mm",LTS:"HH:mm:ss",L:"DD/MM/YYYY",LL:"D MMMM YYYY",LLL:"D MMMM YYYY HH:mm",LLLL:"dddd D MMMM YYYY HH:mm"},relativeTime:{future:"dans %s",past:"il y a %s",s:"quelques secondes",m:"une minute",mm:"%d minutes",h:"une heure",hh:"%d heures",d:"un jour",dd:"%d jours",M:"un mois",MM:"%d mois",y:"un an",yy:"%d ans"},ordinal:function(e){return ""+e+(1===e?"er":"")}};return t.default.locale(i,null,!0),i}));
+});
+
+createCommonjsModule(function (module, exports) {
+!function(e,o){module.exports=o(dayjs__default["default"]);}(commonjsGlobal,(function(e){function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s=o(e),d={name:"es",monthsShort:"ene_feb_mar_abr_may_jun_jul_ago_sep_oct_nov_dic".split("_"),weekdays:"domingo_lunes_martes_miércoles_jueves_viernes_sábado".split("_"),weekdaysShort:"dom._lun._mar._mié._jue._vie._sáb.".split("_"),weekdaysMin:"do_lu_ma_mi_ju_vi_sá".split("_"),months:"enero_febrero_marzo_abril_mayo_junio_julio_agosto_septiembre_octubre_noviembre_diciembre".split("_"),weekStart:1,formats:{LT:"H:mm",LTS:"H:mm:ss",L:"DD/MM/YYYY",LL:"D [de] MMMM [de] YYYY",LLL:"D [de] MMMM [de] YYYY H:mm",LLLL:"dddd, D [de] MMMM [de] YYYY H:mm"},relativeTime:{future:"en %s",past:"hace %s",s:"unos segundos",m:"un minuto",mm:"%d minutos",h:"una hora",hh:"%d horas",d:"un día",dd:"%d días",M:"un mes",MM:"%d meses",y:"un año",yy:"%d años"},ordinal:function(e){return e+"º"}};return s.default.locale(d,null,!0),d}));
+});
+
+createCommonjsModule(function (module, exports) {
+!function(e,n){module.exports=n();}(commonjsGlobal,(function(){return {name:"en",weekdays:"Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),months:"January_February_March_April_May_June_July_August_September_October_November_December".split("_"),ordinal:function(e){var n=["th","st","nd","rd"],t=e%100;return "["+e+(n[(t-20)%10]||n[t]||n[0])+"]"}}}));
+});
+
+/* eslint-disable no-case-declarations */
+dayjs__default["default"].extend(customParseFormat);
+dayjs__default["default"].extend(utc);
+dayjs__default["default"].extend(utc);
+dayjs__default["default"].extend(localizedFormat);
+
+/**
+ * @function filterString
+ * @description Checks if a string contains a search string ignoring accents.
+ * @param {string} str1 - The string to search in.
+ * @param {string} str2 - The search string.
+ * @returns {boolean} - Whether the string contains the search string or not.
+ * @example
+ * filterString('hello', 'he') // true
+ * filterString('hello', 'll') // true
+ * filterString('hello', 'z') // false
+ * filterString('h ll ', 'll') // true
+ * filterString('h ll ', 'll') // true
+ */
+const filterString = (str1, str2) => {
+  str1 = typeof str1 === "string" ? str1.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "") : "";
+  str2 = typeof str2 === "string" ? str2.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "") : "";
+  return str1.toLowerCase().indexOf(str2.toLowerCase()) >= 0;
+};
+
+/**
+ * @function filterSelectOptions
+ * @description Checks if a select option matches an input value ignoring accents.
+ * @param {string} inputValue - The input value to check.
+ * @param {object} option - The select option object.
+ * @property {string} [option.children] - The text content of the option.
+ * @property {string} [option.label] - The label of the option.
+ * @returns {boolean} - Whether the option matches the input value or not.
+ * @example
+ * filterSelectOptions('hello', { children: 'hello world' }) // true
+ * filterSelectOptions('hello', { label: 'hello world' }) // true
+ * filterSelectOptions('hello', { label: 'goodbye world' }) // false
+ */
+const filterSelectOptions = (inputValue, option) => {
+  return filterString(typeof option.children === "string" ? option.children : typeof option.label === "string" ? option.label : "", inputValue);
+};
+
+/**
+ * Formats a date string into a specified format. This function should
+ * always be used when a date is formatted.
+ *
+ * @param {string} value - The date string to be formatted.
+ * @param {string} [format='DD MMM YYYY'] - The format to output the date in.
+ * @param {string} [locale = 'en'] - The langauge of the date.
+ * @returns {string} - The formatted date string.
+ */
+
+const renderDateFormatted = (value, format = "DD MMM YYYY", locale = "en") => {
+  return dayjs__default["default"].utc(value, "YYYY-MM-DD").locale(locale).format(format);
+};
+
+const {
+  Text
+} = antd.Typography;
+const getAjaxData = async ({
+  entity,
+  filterValues,
+  mapper,
+  method,
+  setModel,
+  apiUrl,
+  app
+}) => {
+  const noQuerryApps = ["nashiriki", "straatos"];
+  const data = await axios__default["default"].post(noQuerryApps.includes(app) ? "/query" : "/query/options", {
+    entity,
+    method,
+    mapper: mapper,
+    filters: filterValues
+  }, {
+    baseURL: apiUrl,
+    headers: {
+      Authorization: `Bearer ${getToken()}`,
+      Application: app
+    }
+  });
+  setModel(data.data);
+};
+const AjaxSelect = ({
+  config,
+  filters = {},
+  k = "",
+  app,
+  setValue = () => {},
+  isEdit = false,
+  placeholder = "",
+  apiUrl
+}) => {
+  const [model, setModel] = o.useState([]);
+  const [initFetch, setInitFetch] = o.useState(false);
+  const filterValues = o.useMemo(() => typeof config.filters === "function" ? config.filters(filters) : {}, [config, filters]);
+  const [lastFilterValues, setLastFilterValues] = o.useState(filterValues);
+  const isFilter = config?.isOnFilter || false;
+  const disabled = o.useMemo(() => typeof config.disabled === "function" ? config.disabled(filters) : true, [config, filters]);
+  const value = o.useMemo(() => filters[k] || null, [k, filters]);
+  const label = o.useMemo(() => {
+    const v = model.find(m => m.value === value);
+    if (v) {
+      return v.label;
+    }
+    return "";
+  }, [model, value]);
+  o.useEffect(() => {
+    if (Object.keys(lastFilterValues) && !disabled) {
+      getAjaxData({
+        apiUrl: isFilter ? config.filtersConfig?.apiUrl : apiUrl,
+        app: isFilter ? config.filtersConfig?.app : app,
+        entity: config.entity,
+        filterValues: lastFilterValues,
+        mapper: config.mapper,
+        method: config.method,
+        setModel
+      });
+      setInitFetch(true);
+    }
+  }, [lastFilterValues]);
+  o.useEffect(() => {
+    if (!model.find(m => m.value === value) && initFetch) {
+      setValue(undefined);
+    }
+  }, [model]);
+  o.useEffect(() => {
+    const changedPath = Object.keys(lastFilterValues).reduce((all, key) => {
+      const now = filterValues[key];
+      const old = lastFilterValues[key];
+      if (old !== now) {
+        all.push(key);
+      }
+      return all;
+    }, []);
+    if (changedPath.length) {
+      setLastFilterValues(filterValues);
+    }
+  }, [filterValues]);
+  return !isEdit ? /*#__PURE__*/jsxRuntime.jsx(Text, {
+    style: config.labelStyle || {},
+    ellipsis: {
+      tooltip: label
+    },
+    children: label
+  }) : /*#__PURE__*/jsxRuntime.jsx(antd.Select, {
+    autoComplete: "new-password",
+    allowClear: true,
+    showSearch: true,
+    value: value,
+    style: {
+      width: "100%"
+    },
+    disabled: disabled,
+    placeholder: placeholder,
+    filterOption: filterSelectOptions,
+    optionFilterProp: "label",
+    options: model,
+    onChange: val => {
+      setValue(val);
+    }
+  });
+};
+AjaxSelect.propTypes = {
+  config: PropTypes__default["default"].object,
+  filters: PropTypes__default["default"].object,
+  k: PropTypes__default["default"].string,
+  setValue: PropTypes__default["default"].func,
+  isEdit: PropTypes__default["default"].bool,
+  placeholder: PropTypes__default["default"].string
+};
+
+const SelectFilters = ({
+  onApply,
+  className,
+  setShowFilters = () => {},
+  options = {},
+  filtersConfig,
+  app,
+  showFilters = false,
+  selectedFilters = {},
+  apiUrl,
+  t = s => s,
+  language = 'en',
+  type = 'default',
+  isHeader = false
+}) => {
+  const [filters, setFilters] = o.useState(selectedFilters || {});
+  const [initFilters, setInitFilters] = o.useState(selectedFilters || {});
+  const getClearLabel = () => {
+    switch (type) {
+      case 'small':
+        return 'Clear';
+      default:
+        return 'Clear Filters';
+    }
+  };
+  const getApplyLabel = () => {
+    switch (type) {
+      case 'small':
+        return 'Apply';
+      default:
+        return 'Apply Filters';
+    }
+  };
+  const hasChanges = o.useMemo(() => {
+    let _hasChanges = false;
+    const activeFiltersKeys = Object.keys(filters);
+    if (activeFiltersKeys.length !== Object.keys(initFilters).length) {
+      return true;
+    }
+    activeFiltersKeys.forEach(k => {
+      if (!_hasChanges && initFilters[k] !== filters[k]) {
+        _hasChanges = true;
+      }
+    });
+    return _hasChanges;
+  }, [initFilters, filters]);
+  const entries = Object.entries(filtersConfig).filter(([k, v]) => {
+    if (!showFilters) {
+      return false;
+    }
+    if (v.type === 'select') {
+      return !!options[k];
+    }
+    return true;
+  });
+  const onChange = (val, key) => {
+    setFilters(prev => {
+      const o = {};
+      const entries = Object.entries(prev);
+      entries.forEach(([kk, vv]) => {
+        o[kk] = vv;
+      });
+      o[key] = val;
+      return o;
+    });
+  };
+  const getPlaceholder = p => {
+    if (typeof p === 'function') {
+      return p(t);
+    }
+    if (typeof p === 'string') {
+      return t(p);
+    }
+    return t('Filter');
+  };
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    className: formatClassname([className, 'daf-select-filters', type]),
+    children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: formatClassname(['filters', entries.length === 0 && 'empty', isHeader && 'px-0 pt-1']),
+      children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "filters-cont",
+        children: entries.filter(([, v]) => !(typeof v.show === 'function' ? v.show(filters) : false)).map(([k, v], i) => /*#__PURE__*/jsxRuntime.jsx("div", {
+          style: v.style,
+          className: "cont",
+          children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+            children: [v.type === 'select' && options[k] && /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
+              children: /*#__PURE__*/jsxRuntime.jsx(CustomSelect, {
+                config: v,
+                k: k,
+                filters: filters,
+                value: filters[k],
+                filterSelectOptions: filterSelectOptions,
+                placeholder: getPlaceholder(v.placeholder),
+                onChange: e => onChange(e, k),
+                disabled: typeof v.disabled === 'function' ? v.disabled(filters) : false,
+                options: typeof v.getOptions === 'function' ? v.getOptions(filters) : options[k],
+                i: i
+              })
+            }), v.type === 'timeframe' && /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
+              children: /*#__PURE__*/jsxRuntime.jsx(Timeframe, {
+                t: t,
+                value: filters[k],
+                onChange: e => onChange(e, k),
+                disabled: typeof v.disabled === 'function' ? v.disabled(filters) : false
+              })
+            }), v.type === 'ajaxSelect' && /*#__PURE__*/jsxRuntime.jsx(AjaxSelect, {
+              k: k,
+              filters: filters,
+              config: v,
+              apiUrl: apiUrl,
+              setValue: v => onChange(v, k),
+              allowClear: true,
+              app: app,
+              isEdit: showFilters,
+              placeholder: getPlaceholder(v.placeholder)
+            }), v.type === 'text' && /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
+              children: /*#__PURE__*/jsxRuntime.jsx(antd.Input, {
+                type: "text",
+                value: filters[k],
+                placeholder: getPlaceholder(v.placeholder),
+                onChange: e => onChange(e.target.value, k)
+              })
+            })]
+          })
+        }, i.toString()))
+      }), showFilters && /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "cont apply-cont",
+        children: /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
+          title: t(hasChanges ? getApplyLabel() : getClearLabel()),
+          children: /*#__PURE__*/jsxRuntime.jsx(antd.Button, {
+            type: 'primary'
+            // danger={!hasChanges}
+            ,
+            onClick: () => {
+              if (hasChanges) {
+                const obj = filters;
+                Object.keys(obj).forEach(key => obj[key] === undefined && delete obj[key]);
+                onApply(obj);
+                setInitFilters(filters);
+                if (!Object.keys(filters).length) {
+                  setShowFilters(false);
+                }
+              } else {
+                setFilters({});
+                onApply({});
+                setInitFilters({});
+                setShowFilters(false);
+              }
+            },
+            icon: /*#__PURE__*/jsxRuntime.jsx(CustomIcon, {
+              color: 'white',
+              width: 16,
+              height: 16,
+              name: hasChanges ? 'Check' : 'Clear'
+            })
+          })
+        })
+      })]
+    })
+  });
+};
+SelectFilters.propTypes = {
+  t: PropTypes__default["default"].func,
+  onApply: PropTypes__default["default"].func,
+  options: PropTypes__default["default"].object,
+  className: PropTypes__default["default"].string,
+  showFilters: PropTypes__default["default"].bool,
+  setShowFilters: PropTypes__default["default"].func,
+  filtersConfig: PropTypes__default["default"].object,
+  selectedFilters: PropTypes__default["default"].object,
+  language: PropTypes__default["default"].string,
+  apiUrl: PropTypes__default["default"].string
+};
+
+const {
+  Paragraph
+} = antd.Typography;
+const checkHasActiveFilterValues = filtersConfig => {
+  if (!filtersConfig?.filtersConfig || !filtersConfig?.selectedFilters) return false;
+  const filterConfigKeys = Object.keys(filtersConfig.filtersConfig);
+  const selectedFilters = filtersConfig.selectedFilters;
+  return filterConfigKeys.some(key => {
+    const value = selectedFilters[key];
+    return value !== undefined && value !== null && value !== "";
+  });
+};
+const useHeader = ({
+  title = "",
+  tooltip = "",
+  supportText = "",
+  tags = [],
+  actionButtons: _actionButtons = [],
+  titleTooltip,
+  className,
+  addedHeader = null,
+  addedHeaderFirst,
+  extraButtons: _extraButtons = [],
+  onDownload,
+  downloadDisabled,
+  goBackTo,
+  loading,
+  renderExtraComponents,
+  app = "",
+  isViewMode = false,
+  filtersConfig = {}
+}) => {
+  const hasActiveFilterValues = o.useMemo(() => checkHasActiveFilterValues(filtersConfig), [filtersConfig?.filtersConfig, filtersConfig?.selectedFilters]);
+  const [showFilters, setShowFilters] = o.useState(() => checkHasActiveFilterValues(filtersConfig));
+  const hasFilters = filtersConfig && Object.keys(filtersConfig).length > 0;
+  o.useEffect(() => {
+    if (hasActiveFilterValues) {
+      setShowFilters(true);
+    }
+  }, [hasActiveFilterValues]);
+  const downloadButtonAction = app && app === "sbg" && isViewMode ? null : {
+    onClick: onDownload,
+    disabled: downloadDisabled,
+    label: "Download",
+    key: "download"
+  };
+  const downloadButton = app && app === "sbg" && isViewMode ? null : {
+    onClick: onDownload,
+    icon: /*#__PURE__*/jsxRuntime.jsx(CustomIcon, {
+      width: 16,
+      height: 16,
+      color: "#6C737F",
+      name: "Download"
+    }),
+    key: "download",
+    disabled: downloadDisabled,
+    noMinWidth: true,
+    className: "download-btn"
+  };
+  const filterButton = [{
+    icon: "Filter",
+    key: "filters",
+    noMinWidth: true,
+    squareIconButton: true,
+    onClick: () => {
+      setShowFilters(p => !p);
+    }
+  }];
+  const actionButtons = onDownload && _actionButtons.length < 3 ? [..._actionButtons, ...(hasFilters ? filterButton : []), downloadButton] : [..._actionButtons, ...(hasFilters ? filterButton : [])];
+  const extraButtons = onDownload && _actionButtons.length >= 3 ? [..._extraButtons, downloadButtonAction] : [..._extraButtons];
+  const mainCont = o.useRef();
+  const buttonCont = o.useRef();
+  const [mainContWidth, setMainContWidth] = o.useState(600);
+  const [buttonContWidth, setButtonContWidth] = o.useState(0);
+  const hasSupportText = !!supportText?.length;
+  const hasTags = !!tags?.length;
+  const hasButtons = o.useMemo(() => !!(actionButtons?.length || extraButtons?.length), [actionButtons, extraButtons]);
+  o.useEffect(() => {
+    const mainContObserver = new ResizeObserver(entries => {
+      const _mainEntry = entries[0];
+      if (_mainEntry) {
+        const _mainWidth = _mainEntry.contentRect.width;
+        setMainContWidth(_mainWidth);
+      }
+    });
+    mainContObserver.observe(mainCont.current);
+    let buttonContObserver;
+    if (hasButtons) {
+      buttonContObserver = new ResizeObserver(entries => {
+        const _buttonEntry = entries[0];
+        if (_buttonEntry) {
+          const _btnWidth = _buttonEntry.contentRect.width;
+          setButtonContWidth(_btnWidth);
+        }
+      });
+    }
+    if (hasButtons) {
+      buttonContObserver.observe(buttonCont.current);
+    }
+    return () => {
+      mainContObserver.disconnect();
+      if (hasButtons) {
+        buttonContObserver.disconnect();
+      }
+    };
+  }, [hasButtons, buttonCont.current]);
+  const maxWidth = o.useMemo(
+  //? DONT CHANGE THE MAX TO AVOID NEGATIVE VALUES WHEN BUTTON CONT WIDTH IS 0
+  () => mainContWidth - Math.max(0, buttonContWidth) - 24, [mainContWidth, buttonContWidth]);
+  const renderMainCont = () => /*#__PURE__*/jsxRuntime.jsxs("div", {
+    children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: formatClassname(["main-cont flex", className]),
+      ref: mainCont,
+      children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "flex-1 flex flex-column justify-content-center",
+        children: [typeof title === "string" ? /*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: formatClassname(["title flex", hasSupportText && "mb-1"]),
+          style: {
+            maxWidth,
+            alignItems: "center"
+          },
+          children: [goBackTo && /*#__PURE__*/jsxRuntime.jsx(antd.Button, {
+            className: "flex mr-xs no-min-width",
+            onClick: () => goBackTo(),
+            style: {
+              padding: 2,
+              height: "25px",
+              minWidth: "25px",
+              borderRadius: "4px",
+              opacity: loading ? 0 : 1
+            },
+            children: /*#__PURE__*/jsxRuntime.jsx(CustomIcon, {
+              name: "Right",
+              style: {
+                transform: "rotate(180deg)",
+                width: "12px",
+                color: "var(--base-gray-70)"
+              }
+            })
+          }), loading ? /*#__PURE__*/jsxRuntime.jsx(antd.Skeleton, {
+            active: true,
+            title: false,
+            paragraph: {
+              rows: 1
+            },
+            style: {
+              marginTop: "10px"
+            }
+          }) : /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
+            title: titleTooltip || title,
+            children: /*#__PURE__*/jsxRuntime.jsx("h2", {
+              className: formatClassname(["mb-0 mr-1", hasButtons && "limited"]),
+              children: title
+            })
+          }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+            className: "flex",
+            children: [!!tooltip && /*#__PURE__*/jsxRuntime.jsx("div", {
+              className: "flex flex-column justify-content-center",
+              children: typeof tooltip === "string" ? /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
+                title: tooltip,
+                children: /*#__PURE__*/jsxRuntime.jsx(icons.InfoCircleOutlined, {})
+              }) : typeof tooltip === "object" ? /*#__PURE__*/jsxRuntime.jsx(antd.Popover, {
+                rootClassName: formatClassname(["header-tooltip", tooltip.className]),
+                title: tooltip.title,
+                content: tooltip.content,
+                children: /*#__PURE__*/jsxRuntime.jsx(icons.InfoCircleOutlined, {})
+              }) : null
+            }), typeof renderExtraComponents === "function" ? renderExtraComponents() : null, hasTags && /*#__PURE__*/jsxRuntime.jsx(Tags, {
+              tags: tags
+            })]
+          })]
+        }) : typeof title === "function" ? title(maxWidth) : title, /*#__PURE__*/jsxRuntime.jsx("div", {
+          style: {
+            marginLeft: goBackTo ? "33px" : 0
+          },
+          className: "support-text",
+          children: /*#__PURE__*/jsxRuntime.jsx(Paragraph, {
+            ellipsis: {
+              tooltip: supportText,
+              rows: 1
+            },
+            style: {
+              maxWidth: maxWidth
+            },
+            children: supportText
+          })
+        })]
+      }), addedHeaderFirst ? /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "flex gap-2",
+        ref: buttonCont,
+        children: [addedHeader, hasButtons && /*#__PURE__*/jsxRuntime.jsx("div", {
+          children: /*#__PURE__*/jsxRuntime.jsx(Buttons, {
+            extraButtons: extraButtons,
+            actionButtons: actionButtons
+          })
+        })]
+      }) : /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "flex gap-2",
+        ref: buttonCont,
+        children: [hasButtons && /*#__PURE__*/jsxRuntime.jsx("div", {
+          children: /*#__PURE__*/jsxRuntime.jsx(Buttons, {
+            extraButtons: extraButtons,
+            actionButtons: actionButtons
+          })
+        }), addedHeader]
+      })]
+    }), /*#__PURE__*/jsxRuntime.jsx("div", {
+      style: {
+        marginLeft: goBackTo ? "33px" : 0,
+        width: "100%"
+      },
+      children: hasFilters && /*#__PURE__*/jsxRuntime.jsx(SelectFilters, {
+        t: filtersConfig.t,
+        apiUrl: filtersConfig.apiUrl,
+        showFilters: showFilters,
+        onApply: filtersConfig.onApply,
+        options: filtersConfig.options,
+        setShowFilters: setShowFilters,
+        language: filtersConfig.language,
+        type: filtersConfig.type,
+        filtersConfig: filtersConfig.filtersConfig,
+        selectedFilters: filtersConfig.selectedFilters,
+        className: filtersConfig.className,
+        isHeader: true
+      })
+    })]
+  });
+  return {
+    renderMainCont,
+    mainContWidth
+  };
+};
+
+function TabsHeader({
+  tabs = [],
+  onChange = () => {},
+  value = '',
+  className = 'mt-2',
+  ...rest
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    className: formatClassname(['daf-tabs-header pl-6 pr-6', className]),
+    children: /*#__PURE__*/jsxRuntime.jsx(antd.Tabs, {
+      onChange: onChange,
+      defaultActiveKey: value,
+      activeKey: value,
+      items: tabs.map(tab => ({
+        children: null,
+        key: tab.value,
+        label: tab.label,
+        disabled: tab.disabled
+      })),
+      ...rest
+    })
+  });
+}
+TabsHeader.propTypes = {
+  tabs: PropTypes__default["default"].array,
+  onChange: PropTypes__default["default"].func,
+  value: PropTypes__default["default"].string,
+  className: PropTypes__default["default"].string
+};
+
+function ModalHeader({
+  title = '',
+  tooltip = '',
+  supportText = '',
+  tags = [],
+  actionButtons = [],
+  extraButtons = [],
+  tabsConfig
+}) {
+  const hasTabs = !!tabsConfig;
+  const className = hasTabs ? 'with-tabs' : undefined;
+  const {
+    renderMainCont
+  } = useHeader({
+    title,
+    tooltip,
+    supportText,
+    tags,
+    className,
+    actionButtons,
+    extraButtons
+  });
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [renderMainCont(), !!tabsConfig && /*#__PURE__*/jsxRuntime.jsx(TabsHeader, {
+      ...tabsConfig
+    })]
+  });
+}
+ModalHeader.propTypes = {
+  tooltip: PropTypes__default["default"].any,
+  title: PropTypes__default["default"].string,
+  supportText: PropTypes__default["default"].any,
+  tags: PropTypes__default["default"].any,
+  actionButtons: PropTypes__default["default"].array,
+  extraButtons: PropTypes__default["default"].array,
+  tabsConfig: PropTypes__default["default"].any
+};
+
+const renderNotiBody = ({
+  n
+}) => {
+  switch (n.type) {
+    default:
+      return /*#__PURE__*/jsxRuntime.jsx("label", {
+        children: n.body
+      });
+  }
+};
+const renderNotiTitle = ({
+  n
+}) => {
+  return n.title;
+};
+
+/* eslint-disable react/prop-types */
+function NotificationHistory({
+  visible,
+  setHistoryVisible,
+  t = key => key,
+  useNotificationsHistoryContext = () => {}
+}) {
+  const {
+    loading,
+    _notifications,
+    _fetch,
+    total
+  } = useNotificationsHistoryContext();
+  const groupped = o.useMemo(() => _notifications.reduce((all, item) => {
+    const _key = renderDateFormatted(item.createdAt, 'MMMM YYYY');
+    if (all[_key]) {
+      all[_key].items.push(item);
+    } else {
+      all[_key] = {
+        items: [item]
+      };
+    }
+    return all;
+  }, {}), [_notifications]);
+  return /*#__PURE__*/jsxRuntime.jsx(antd.Modal, {
+    open: visible,
+    width: 680,
+    footer: null,
+    onCancel: () => setHistoryVisible(false),
+    title: /*#__PURE__*/jsxRuntime.jsx(ModalHeader, {
+      title: t('Notification History'),
+      supportText: t('Visualise all your notifications here.')
+    }),
+    children: /*#__PURE__*/jsxRuntime.jsx(Style$4, {
+      children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "noti-list",
+        onScroll: e => {
+          const _t = e.target;
+          const canFetch = _t.scrollTop + _t.clientHeight >= _t.scrollHeight - 200;
+          if (canFetch) {
+            _fetch();
+          }
+        },
+        children: [Object.keys(groupped).map((key, i) => /*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: "noti-group",
+          children: [/*#__PURE__*/jsxRuntime.jsx("h4", {
+            children: key
+          }), groupped[key].items.map((n, i) => /*#__PURE__*/jsxRuntime.jsxs("div", {
+            className: "noti",
+            children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+              className: "noti-title",
+              children: [/*#__PURE__*/jsxRuntime.jsx("h5", {
+                children: renderNotiTitle({
+                  n
+                })
+              }), /*#__PURE__*/jsxRuntime.jsx("span", {
+                children: renderDateFormatted(n.createdAt)
+              })]
+            }), /*#__PURE__*/jsxRuntime.jsx("p", {
+              children: renderNotiBody({
+                n
+              })
+            })]
+          }, `${i}-noti-${n.id}`))]
+        }, `${key}-${i}`)), loading && /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "loading-all",
+          children: /*#__PURE__*/jsxRuntime.jsx(icons.LoadingOutlined, {})
+        }), !loading && !total ? /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "no-notis",
+          children: /*#__PURE__*/jsxRuntime.jsx("p", {
+            children: t('No new notifications')
+          })
+        }) : null]
+      })
+    })
+  });
+}
+
+/* eslint-disable react/prop-types */
+function Notifications({
+  mod = 'pme',
+  toggle = () => {},
+  t = key => key,
+  goTo = () => {},
+  getRedirectLink = () => {},
+  appName = 'app',
+  theme = {},
+  useNotificationsHistoryContext = () => {},
+  useNotificationsContext = () => {}
+}) {
+  const [historyVisible, setHistoryVisible] = o.useState(false);
+  const {
+    loading,
+    _notifications,
+    _fetch,
+    total,
+    clearAll
+  } = useNotificationsContext();
+  const items = [{
+    key: "details",
+    icon: /*#__PURE__*/jsxRuntime.jsx(CustomIcon, {
+      name: "CheckDone",
+      width: 13,
+      height: 13
+    }),
+    disabled: !total,
+    onClick: () => {
+      clearAll();
+      toggle();
+    },
+    label: t('Clear All')
+  }, {
+    key: "publish",
+    icon: /*#__PURE__*/jsxRuntime.jsx(CustomIcon, {
+      name: "NotificationText",
+      width: 13,
+      height: 13
+    }),
+    onClick: () => {
+      toggle();
+      setHistoryVisible(true);
+    },
+    label: t('View All')
+  }, {
+    key: "dashboard",
+    icon: /*#__PURE__*/jsxRuntime.jsx(CustomIcon, {
+      name: "Settings",
+      width: 13,
+      height: 13
+    }),
+    onClick: () => {
+      toggle();
+      goTo(getRedirectLink(`/app/${mod}/view/settings?activeForm=notifications`));
+    },
+    label: t('Settings')
+  }];
+  return /*#__PURE__*/jsxRuntime.jsxs(NotificationsStyle, {
+    className: appName,
+    children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "notis-title",
+      children: [/*#__PURE__*/jsxRuntime.jsx("h3", {
+        children: t('Notification')
+      }), /*#__PURE__*/jsxRuntime.jsx(antd.Dropdown, {
+        menu: {
+          items
+        },
+        trigger: "click",
+        rootClassName: formatClassname(['dark-menu', appName, theme.customHeaderColor && 'custom']),
+        children: /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "cursor-pointer",
+          children: /*#__PURE__*/jsxRuntime.jsx(CustomIcon, {
+            name: "MoreCustom",
+            width: 3,
+            height: 13
+          })
+        })
+      })]
+    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "notis-list",
+      onScroll: e => {
+        const _t = e.target;
+        const canFetch = _t.scrollTop + _t.clientHeight >= _t.scrollHeight - 200;
+        if (canFetch) {
+          _fetch();
+        }
+      },
+      children: [!loading && !total ? /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "no-notis",
+        children: t('No new notifications')
+      }) : null, _notifications.map((n, i) => /*#__PURE__*/jsxRuntime.jsx(Notification, {
+        toggle: toggle,
+        n: n,
+        t: t,
+        goTo: goTo
+      }, `notifications-${i + 1}`)), loading && /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "loading-cont",
+        children: /*#__PURE__*/jsxRuntime.jsx(icons.LoadingOutlined, {})
+      })]
+    }), /*#__PURE__*/jsxRuntime.jsx(NotificationHistory, {
+      visible: historyVisible,
+      setHistoryVisible: setHistoryVisible,
+      t: t,
+      goTo: goTo
+    })]
+  });
+}
+
+var Style$3 = dt.div`
+  &.popup {
+    h2 {
+      margin-bottom: 8px;
+    }
+
+    p {
+      color: #667085;
+      margin-bottom: 20px;
+    }
+
+    .ant-form-item-label {
+      padding-bottom: 6px;
+    }
+
+    .buttons {
+      margin-top: 24px;
+    }
+
+    .errors-cont {
+      margin-top: 8px;
+    }
+  }
+`;
+
+const Style$2 = dt.div`
+  .ant-btn {
+    border-radius: 100px 100px 100px 0;
+    padding: 10px;
+    height: fit-content;
+    font-size: var(--size);
+    line-height: var(--size-lg);
+    font-weight: 400;
+    width: 100%;
+
+    @media (${MOBILE_WIDTH$1}) {
+      padding: 0.8rem 2.625rem;
+    }
+
+    &.normal-br {
+      border-radius: 8px;
     }
 
     &.ant-btn-primary {
@@ -6753,143 +7940,6 @@ function LoginPopup({
   });
 }
 
-/**
- * @description Manages window.storage
- * @returns storage objects
- * @class StorageManager
- */
-class StorageManager {
-  /**
-   * @description Set or update given value in localStorage
-   * @static
-   * @returns Object
-   * @memberof StorageManager
-   */
-  static set(key, value) {
-    if (key && value) {
-      window.localStorage.setItem(key, value);
-      return {
-        success: true,
-        data: "Storage has been set successfully."
-      };
-    }
-    return {
-      error: true,
-      data: "Storage was not set. Storage key and value is required!"
-    };
-  }
-
-  /**
-   * @description Set or update given value in sessionStorage, used to not remember user after closing opened tab.
-   * @static
-   * @returns Object
-   * @memberof StorageManager
-   */
-  static setToSession(key, value) {
-    if (key && value) {
-      window.sessionStorage.setItem(key, value);
-      return {
-        success: true,
-        data: "Storage has been set successfully."
-      };
-    }
-    return {
-      error: true,
-      data: "Storage was not set. Storage key and value is required!"
-    };
-  }
-
-  /**
-   * @description Fetch data from localStorage
-   * @static
-   * @returns Object
-   * @memberof StorageManager
-   */
-  static get(key, defaultValue = undefined) {
-    if (key) {
-      const val = window.localStorage.getItem(key) || window.sessionStorage.getItem(key);
-      return val || defaultValue;
-    }
-    return {
-      error: true,
-      data: "Storage key is required!"
-    };
-  }
-
-  /**
-   * @description Clear only one value from localStorage
-   * @static
-   * @returns Object
-   * @memberof StorageManager
-   */
-  static clearOne(key) {
-    if (key === 'token') {
-      localStorage.removeItem('trade-type');
-      localStorage.removeItem('trade-value');
-    }
-    if (key) {
-      window.localStorage.removeItem(key) || window.sessionStorage.removeItem(key);
-    }
-    return "Storage key is required!";
-  }
-
-  /**
-   * @description Clear all values from localStorage
-   * @static
-   * @returns Object
-   * @memberof StorageManager
-   */
-  static clearAll() {
-    window.localStorage.clear();
-    window.sessionStorage.clear();
-  }
-  static hasKey(key) {
-    return typeof this.get(key) === 'string';
-  }
-  static saveFilters(module, namespace, filters = {}, merge = false) {
-    let savedFilters = this.get('filters');
-    try {
-      savedFilters = JSON.parse(savedFilters);
-    } catch (e) {
-      savedFilters = {};
-    }
-    if (!savedFilters) {
-      savedFilters = {};
-    }
-    if (!savedFilters[module]) {
-      savedFilters[module] = {};
-    }
-    if (!savedFilters[module][namespace]) {
-      savedFilters[module][namespace] = {};
-    }
-    if (Object.keys(filters).length) {
-      savedFilters[module][namespace] = merge ? Object.assign(savedFilters[module][namespace], filters) : filters;
-    } else {
-      savedFilters[module][namespace] = {};
-    }
-    this.set('filters', JSON.stringify(savedFilters));
-    return savedFilters[module][namespace];
-  }
-  static getFilters(module, namespace) {
-    let savedFilters = this.get('filters');
-    try {
-      savedFilters = JSON.parse(savedFilters);
-    } catch (e) {
-      savedFilters = {};
-    }
-    if (!savedFilters) {
-      savedFilters = {};
-    }
-    if (!savedFilters[module]) {
-      savedFilters[module] = {};
-    }
-    if (!savedFilters[module][namespace]) {
-      savedFilters[module][namespace] = {};
-    }
-    return savedFilters[module][namespace];
-  }
-}
-
 /* eslint-disable react/prop-types */
 const {
   Content
@@ -6963,6 +8013,8 @@ function AppLayout({
   NotificationsHistoryProvider,
   changeNotificationState,
   notificationMode,
+  useNotificationsHistoryContext,
+  useNotificationsContext,
   // Collapse
   isCollapsed,
   setIsCollapsed,
@@ -7187,7 +8239,9 @@ function AppLayout({
                       goTo: goTo,
                       getRedirectLink: getRedirectLink,
                       appName: appName,
-                      theme: theme
+                      theme: theme,
+                      useNotificationsHistoryContext: useNotificationsHistoryContext,
+                      useNotificationsContext: useNotificationsContext
                     }),
                     disabled: true
                   }]