@antscorp/antsomi-ui 1.3.5-beta.180 → 1.3.5-beta.181

package/es/components/molecules/AccountSelection/AccountSelection.js

@@ -21,7 +21,7 @@ export const AccountSelection = props => {
     return (React.createElement(Popover, { content: React.createElement(AccountSelectionStyled, { className: className },
             React.createElement(Input, { placeholder: "Search", suffix: React.createElement(Icon, { type: "icon-ants-search-2", style: { fontSize: '24px' } }), value: searchValue, onChange: event => setSearchValue(event.target.value) }),
             React.createElement(Text, { className: "recent-text" }, "Recent"),
-            React.createElement("ul", null, recentData === null || recentData === void 0 ? void 0 : recentData.value.map(accountId => data === null || data === void 0 ? void 0 : data.entries.find(account => account.userId === accountId)).filter(Boolean).map(account => (React.createElement(AccountItem, { key: account.userId, userName: account.userName, userId: account.userId, onClick: handleSelectAccount, isSelected: currentAccount === account.userId })))),
+            React.createElement("ul", null, recentData === null || recentData === void 0 ? void 0 : recentData.value.map(accountId => { var _a; return (_a = data === null || data === void 0 ? void 0 : data.entries) === null || _a === void 0 ? void 0 : _a.find(account => account.userId === accountId); }).filter(Boolean).map(account => (React.createElement(AccountItem, { key: account.userId, userName: account.userName, userId: account.userId, onClick: handleSelectAccount, isSelected: currentAccount === account.userId })))),
             React.createElement("ul", { className: "account-list" }, data === null || data === void 0 ? void 0 : data.entries.filter(account => !(recentData === null || recentData === void 0 ? void 0 : recentData.value.includes(account.userId)) &&
                 searchStringQuery(account.userName, searchValue)).map(account => (React.createElement(AccountItem, { key: account.userId, userName: account.userName, userId: account.userId, onClick: handleSelectAccount, isSelected: currentAccount === account.userId })))),
             showAllAccount ? (React.createElement(Text, { className: `all-account ${currentAccount === 'ALL_ACCOUNT' ? 'is-selected' : ''}`, onClick: () => handleSelectAccount('ALL_ACCOUNT') },

package/es/components/molecules/DrawerDetail/styled.js

@@ -72,7 +72,7 @@ export const CloseBtn = styled.div `
 export const MenuItem = styled.div `
   height: 36px;
   width: 36px;
-  border-radius: ${token === null || token === void 0 ? void 0 : token.borderRadiusLG}px;
+  border-radius: ${token === null || token === void 0 ? void 0 : token.borderRadiusXL}px;
   background-color: transparent;
   display: flex;
   align-items: center;

package/es/components/molecules/HeaderV2/HeaderV2.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import { AccountSelectionProps } from '../AccountSelection';
 import { AccountSharingProps } from '../../organism';
 import { IHelpProps } from '../../organism/Help/types';
+import { envType } from '@antscorp/antsomi-ui/es/types/config';
 export interface HeaderV2Props {
     className?: string;
     style?: React.CSSProperties;
@@ -20,12 +21,12 @@ export interface HeaderV2Props {
     accountSharingConfig: Pick<AccountSharingProps, 'isShowSharing' | 'isShareAccountAccess' | 'u_ogs' | 'appCode' | 'callbackLogout' | 'callbackGetInfoAccount'> & {
         show?: boolean;
     };
-    config: {
-        env: 'DEVELOPMENT' | 'PRODUCTION';
+    config?: {
+        env?: envType;
         language?: string;
-        userId: number;
-        portalId: number;
-        token: string;
+        userId?: number;
+        portalId?: number;
+        token?: string;
     };
 }
 export declare const HeaderV2: React.FC<HeaderV2Props>;

package/es/components/molecules/HeaderV2/HeaderV2.js

@@ -10,20 +10,28 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React, { memo, useState } from 'react';
-import { AccountSelection } from '../AccountSelection';
+// Styled
 import { HeaderV2Styled } from './styled';
+// Components
+import { AccountSelection } from '../AccountSelection';
 import { AccountSharing, Help, Notification, } from '../../organism';
+// Constants
 import { CDP_API, IAM_API, ISSUE_API, PERMISSION_API, PLATFORM_API, SOCKET_API, } from '@antscorp/antsomi-ui/es/constants';
+import { useContextSelector } from 'use-context-selector';
+import { AppConfigContext } from '../../..';
 export const HeaderV2 = memo(props => {
     var _a;
+    const { auth, env: envContext, languageCode, } = useContextSelector(AppConfigContext, state => state);
     const { className, style, pageTitle = 'Page Title', accountSelection = {}, helpConfig, notificationConfig = {}, accountSharingConfig, config, } = props;
     /** General config for children component */
-    const { env, language = 'en', userId, portalId, token } = config;
+    const { env = envContext, language = languageCode, userId = isNaN(Number(auth === null || auth === void 0 ? void 0 : auth.userId)) ? 0 : Number(auth === null || auth === void 0 ? void 0 : auth.userId), portalId = auth === null || auth === void 0 ? void 0 : auth.portalId, token = auth === null || auth === void 0 ? void 0 : auth.token, } = config || {};
     const { currentAccount, inputStyle = 'select', onSelectAccount } = accountSelection, accountSelectionProps = __rest(accountSelection, ["currentAccount", "inputStyle", "onSelectAccount"]);
+    const [selectedAccount, setSelectedAccount] = useState((_a = currentAccount !== null && currentAccount !== void 0 ? currentAccount : userId) !== null && _a !== void 0 ? _a : 'ALL_ACCOUNT');
+    if (!env || !language || !userId || !portalId || !token)
+        return null;
     const { show: showHelp = true, configs } = helpConfig, helpProps = __rest(helpConfig, ["show", "configs"]);
     const { show: showNotification = true } = notificationConfig;
     const { show: showAccountSharing = true, isShowSharing = true, isShareAccountAccess = true } = accountSharingConfig, accountSharingProps = __rest(accountSharingConfig, ["show", "isShowSharing", "isShareAccountAccess"]);
-    const [selectedAccount, setSelectedAccount] = useState((_a = currentAccount !== null && currentAccount !== void 0 ? currentAccount : userId) !== null && _a !== void 0 ? _a : 'ALL_ACCOUNT');
     const accountSelectionApiConfig = {
         domain: CDP_API[env],
         languageCode: language,

package/es/components/organism/Help/Help.js

@@ -30,7 +30,7 @@ import '@antscorp/icons/main.css';
 // Services
 import TicketService from '@antscorp/antsomi-ui/es/services/Ticket';
 // Component
-import { LoadingOutlined, QuestionCircleOutlined } from '@ant-design/icons';
+import { LoadingOutlined } from '@ant-design/icons';
 import Icon from '@antscorp/icons';
 import { Editor } from '@tinymce/tinymce-react';
 import { Button, Spin } from 'antd';
@@ -52,7 +52,7 @@ const Loading = ({ isLoading, height, width }) => isLoading && (React.createElem
 const Help = props => {
     const { configs, triggerType, boundsDraggable, isShowResizeHover, children } = props;
     const { apiKey, domainPlatform, appCode, domain, portalId, token, userId, config, domainTicket, avatar, } = configs;
-    const [isOpenDropdown, setIsOpenDropdown] = useState(false);
+    // const [isOpenDropdown, setIsOpenDropdown] = useState<boolean>(false);
     const [defaultPositionDrawActions, setDefaultPositionDrawActions] = useState(DEFAULT_POSITIONS.capture);
     const [defaultPositionRecordActions, setDefaultPositionRecordActions] = useState(DEFAULT_POSITIONS.record);
     const [isMainLoading, setIsMainLoading] = useState(false);
@@ -84,7 +84,7 @@ const Help = props => {
     });
     const [isOpenImageDrawer, setIsOpenImageDrawer] = useState(false);
     const [captureType, setCaptureType] = useState(ATTACH_KEYS.CAPTURE);
-    const [open, setOpen] = useState(false);
+    // const [open, setOpen] = useState<boolean>(false);
     const [dataRecorded, setDataRecorded] = useState([]);
     const [dataListHelp, setDataListHelp] = useState([]);
     const [isMute, setIsMute] = useState(false);
@@ -155,9 +155,9 @@ const Help = props => {
         }
         return domain;
     }, [domain]);
-    const handleCancel = () => {
-        setOpen(false);
-    };
+    // const handleCancel = () => {
+    //   setOpen(false);
+    // };
     const handleClick = (data) => {
         const { key = '' } = data;
         switch (key) {
@@ -181,7 +181,7 @@ const Help = props => {
                 break;
             }
             default: {
-                setIsOpenDropdown(false);
+                // setIsOpenDropdown(false);
                 break;
             }
         }
@@ -267,7 +267,7 @@ const Help = props => {
         setUrlImageDrawer('');
         setUrlVideoPreview('');
         setIsValidAll(true);
-        setIsOpenDropdown(false);
+        // setIsOpenDropdown(false);
         setValueInput(prev => (Object.assign(Object.assign({}, prev), { message: '', title: '', files: [] })));
         setIsShowPopup(false);
         setErrFile({
@@ -382,7 +382,7 @@ const Help = props => {
             };
             setIsForceStopRecorder(false);
             setIsOpenImageDrawer(true);
-            handleCancel();
+            // handleCancel();
             setIsShowPopup(false);
         }
         catch (error) {
@@ -444,7 +444,7 @@ const Help = props => {
                 // passing canvas data url as screenshot preview src
                 setUrlImageDrawer(canvas.toDataURL());
                 setIsOpenImageDrawer(true);
-                handleCancel();
+                // handleCancel();
                 setIsShowPopup(false);
             });
             video.srcObject = stream; // passing capture stream data as video source object
@@ -987,15 +987,9 @@ const Help = props => {
                 style: { minWidth: 250, padding: 0 },
                 items: items,
                 onClick: info => handleClick(info),
-            }, onOpenChange: isOpen => setIsOpenDropdown(isOpen), trigger: triggerType, placement: "bottomRight", className: "dropdown-helps" }, children || (React.createElement(IconButtonStyled, { style: {
-                width: 36,
-                height: 36,
-                borderRadius: '5px',
-            }, icon: React.createElement(QuestionCircleOutlined, { style: {
-                    color: '#666666',
-                    fontSize: '20px',
-                    transform: 'unset',
-                } }), className: `${isOpenDropdown ? 'antsomi-btn-default-active' : ''}`, onClick: e => e.preventDefault() }))),
+            }, 
+            // onOpenChange={isOpen => setIsOpenDropdown(isOpen)}
+            trigger: triggerType, placement: "bottomRight" }, children || React.createElement(IconButtonStyled, { icon: React.createElement(Icon, { type: "icon-ants-help" }) })),
         isShowPopup &&
             createPortal(React.createElement(PopupDraggable, { isHiddenResizing: true, bounds: boundsDraggable, isShowResizeHover: isShowResizeHover, callback: callback, styleContainer: {
                     display: 'flex',

package/es/components/organism/Help/styled.js

@@ -1,7 +1,8 @@
 var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3;
 // Libraries
-import { Dropdown, Button, Space, Typography, Tree, Input } from 'antd';
+import { Dropdown, /* Button, */ Space, Typography, Tree, Input } from 'antd';
 import styled, { css } from 'styled-components';
+import { Button } from '../../atoms';
 // Constants
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
 // Components
@@ -267,6 +268,7 @@ export const IconButtonStyled = styled(Button) `
   background-color: transparent !important;
   color: #666666 !important;
   box-shadow: none !important;
+  border-radius: 10px !important;
 
   &.antsomi-dropdown-open,
   &.antsomi-popover-open {

package/es/components/organism/LeftMenu/components/ContentMenu/useContentMenu.js

@@ -8,5 +8,7 @@ export const useContentMenu = () => {
     const featureChildren = useContextSelector(LeftMenuContext, state => state.featureChildren);
     useEffect(() => { }, [featureChildren]);
     const customChildren = useMemo(() => featureChildren === null || featureChildren === void 0 ? void 0 : featureChildren.map(item => getMenuItem(item)), [featureChildren]);
-    return { children: customChildren };
+    return {
+        children: customChildren,
+    };
 };

package/es/components/organism/LeftMenu/components/HomeMenu/constants.d.ts

@@ -1,6 +1,17 @@
 import { TMenuFeatureItem } from '../../types';
+export declare const HOME_REPORT_ROUTES: {
+    DETAIL: string;
+    CONFIGURE: string;
+    CREATE: string;
+};
 export declare const CONFIG_OPTIONS: {
-    key: string;
-    label: string;
-}[];
+    CONFIGURE: {
+        key: string;
+        label: string;
+    };
+    REMOVE: {
+        key: string;
+        label: string;
+    };
+};
 export declare const HOME_MENU_ITEMS: Record<string, TMenuFeatureItem>;

package/es/components/organism/LeftMenu/components/HomeMenu/constants.js

@@ -1,13 +1,18 @@
-export const CONFIG_OPTIONS = [
-    {
+export const HOME_REPORT_ROUTES = {
+    DETAIL: ':reportId',
+    CONFIGURE: ':reportId/configure',
+    CREATE: 'create',
+};
+export const CONFIG_OPTIONS = {
+    CONFIGURE: {
         key: 'configure',
         label: 'Configure',
     },
-    {
+    REMOVE: {
         key: 'remove',
         label: 'Remove',
     },
-];
+};
 export const HOME_MENU_ITEMS = {
     RECENT: {
         menu_item_name: 'Recent',

package/es/components/organism/LeftMenu/components/HomeMenu/index.js

@@ -3,6 +3,7 @@ import React, { memo } from 'react';
 // Components
 import { ChildMenu } from '../common';
 import { Flex } from '../../../../atoms';
+// Constants
 import Icon from '@antscorp/icons';
 // Styled
 import { CreateButton, HomeMenuWrapper } from './styled';
@@ -10,11 +11,12 @@ import { CreateButton, HomeMenuWrapper } from './styled';
 import { useHomeMenu } from './useHomeMenu';
 export const HomeMenu = memo(() => {
     // Handlers
-    const { children, onCreateNewTab } = useHomeMenu();
-    return (React.createElement(HomeMenuWrapper, null,
-        React.createElement(CreateButton, { type: "primary", onClick: onCreateNewTab },
+    const { children, onCreateNewReport, onMenuClick } = useHomeMenu();
+    return (React.createElement(HomeMenuWrapper, { vertical: true },
+        React.createElement(CreateButton, { type: "primary", onClick: onCreateNewReport },
             React.createElement(Flex, { gap: 10, align: "center" },
                 React.createElement(Icon, { type: "icon-ants-plus-slim", style: { fontSize: 14 } }),
                 React.createElement("span", null, "Create"))),
-        React.createElement(ChildMenu, { items: children })));
+        React.createElement("div", { className: "menu-list" },
+            React.createElement(ChildMenu, { items: children, onMenuClick: onMenuClick }))));
 });

package/es/components/organism/LeftMenu/components/HomeMenu/styled.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export declare const HomeMenuWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const HomeMenuWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/flex/interface").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
 export declare const CreateButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").ButtonProps & import("react").RefAttributes<HTMLElement>> & {
     Group: import("react").FC<import("antd/es/button").ButtonGroupProps>;
 }, any, {}, never>;

package/es/components/organism/LeftMenu/components/HomeMenu/styled.js

@@ -2,22 +2,36 @@ var _a;
 // Libraries
 import styled from 'styled-components';
 // Components
-import { Button } from '../../../../atoms';
+import { Button, Flex } from '../../../../atoms';
 // Constants
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
-export const HomeMenuWrapper = styled.div `
-  .antsomi-menu {
-    & > li > ul {
-      font-weight: 400 !important;
-      font-size: 11px !important;
+export const HomeMenuWrapper = styled(Flex) `
+  height: 100%;
+
+  .menu-list {
+    width: 100%;
+    flex: 1 1 0%;
+    overflow: hidden;
+
+    .antsomi-menu {
+      & > li > ul {
+        font-weight: 400 !important;
+        font-size: 11px !important;
+      }
+
+      ::-webkit-scrollbar {
+        width: 13px !important;
+        height: 8px;
+      }
     }
   }
 `;
 export const CreateButton = styled(Button) `
   width: 106px;
   height: 37px !important;
-  border-radius: ${(_a = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _a === void 0 ? void 0 : _a.borderRadiusLG}px !important;
+  border-radius: ${(_a = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _a === void 0 ? void 0 : _a.borderRadiusXL}px !important;
   box-shadow: none !important;
   font-size: 14px !important;
   margin: 10px;
+  flex-shrink: 0;
 `;

package/es/components/organism/LeftMenu/components/HomeMenu/useHomeMenu.d.ts

@@ -1,4 +1,9 @@
 export declare const useHomeMenu: () => {
     children: import("../../types").TMenuItem[];
-    onCreateNewTab: () => void;
+    onCreateNewReport: () => void;
+    onOptionCallback: (args: {
+        menuItemKey: string;
+        optionKey: string;
+    }) => void;
+    onMenuClick: (key: string, _: any) => void;
 };

package/es/components/organism/LeftMenu/components/HomeMenu/useHomeMenu.js

@@ -1,22 +1,22 @@
 // Libraries
 import { useCallback, useMemo } from 'react';
 import { useContextSelector } from 'use-context-selector';
-import { get } from 'lodash';
+import { useHistory } from 'react-router-dom';
 // Queries
 import { useGetDashboard } from '@antscorp/antsomi-ui/es/queries/LeftMenu';
 // Constants
-import { CONFIG_OPTIONS, HOME_MENU_ITEMS } from './constants';
+import { CONFIG_OPTIONS, HOME_MENU_ITEMS, HOME_REPORT_ROUTES } from './constants';
 // Utils
-import { generateKey, getPortalId } from '@antscorp/antsomi-ui/es/utils';
-import { getDefaultDashboardName } from './utils';
-import { getMenuItem } from '../../utils';
+import { getGeneratePath, getMenuItem } from '../../utils';
 // Contexts
 import { AppConfigContext } from '@antscorp/antsomi-ui/es/providers';
 import { LeftMenuContext } from '../../contexts';
 export const useHomeMenu = () => {
+    // Hooks
+    const history = useHistory();
     // Contexts
     const appConfig = useContextSelector(AppConfigContext, state => state);
-    const { objectId = 0, objectType = '', isGrouped = false, } = useContextSelector(LeftMenuContext, state => state);
+    const { activeItem, permissionMenu, objectId = 0, objectType = '', isGrouped = false, } = useContextSelector(LeftMenuContext, state => state);
     const { auth, languageCode } = appConfig;
     // Queries
     const { data: dashboardData } = useGetDashboard({
@@ -44,13 +44,27 @@ export const useHomeMenu = () => {
         });
     }, [dashboardData]);
     // Memos
-    const listDashboardName = useMemo(() => {
-        var _a;
-        return ((_a = get(dashboardData, 'entries.ownedDashboard', [])) === null || _a === void 0 ? void 0 : _a.map(overview => get(overview, 'dashboardName', ''))) || [];
-    }, [dashboardData]);
-    const handleOptionCallback = useCallback((args) => {
-        console.log({ args });
-    }, []);
+    const homeItem = useMemo(() => permissionMenu === null || permissionMenu === void 0 ? void 0 : permissionMenu.find(item => item.menu_item_code === activeItem), [activeItem, permissionMenu]);
+    // const listDashboardName = useMemo(
+    //   () =>
+    //     get(dashboardData, 'entries.ownedDashboard', [])?.map(overview =>
+    //       get(overview, 'dashboardName', ''),
+    //     ) || [],
+    //   [dashboardData],
+    // );
+    const getHomePath = useCallback((path) => `${(homeItem === null || homeItem === void 0 ? void 0 : homeItem.menu_item_path) || ''}/${path}`, [homeItem === null || homeItem === void 0 ? void 0 : homeItem.menu_item_path]);
+    const onOptionCallback = useCallback((args) => {
+        const { optionKey, menuItemKey } = args;
+        switch (optionKey) {
+            case CONFIG_OPTIONS.CONFIGURE.key:
+                history.push(getGeneratePath(getHomePath(HOME_REPORT_ROUTES.CONFIGURE), Object.assign(Object.assign({}, auth), { reportId: menuItemKey })));
+                break;
+            case CONFIG_OPTIONS.REMOVE.key:
+                break;
+            default:
+                break;
+        }
+    }, [auth, history, getHomePath]);
     const customChildren = useMemo(() => {
         var _a;
         return (_a = Object.values(HOME_MENU_ITEMS)) === null || _a === void 0 ? void 0 : _a.map(item => {
@@ -59,26 +73,38 @@ export const useHomeMenu = () => {
                     menu_item_name: item.dashboardName,
                     menu_item_code: String(item.dashboardId),
                     icon_name: null,
-                    options: CONFIG_OPTIONS,
-                    optionCallback: handleOptionCallback,
+                    options: Object.values(CONFIG_OPTIONS),
+                    optionCallback: onOptionCallback,
                 })) }));
         });
-    }, [dashboardObject, handleOptionCallback]);
-    const onCreateNewTab = useCallback(() => {
-        const configTab = {
-            id: generateKey(),
-            dashboardName: getDefaultDashboardName(listDashboardName),
-            layout: 'settings',
-            filters: [],
-            enableParamFilter: 1,
-            portalId: getPortalId({}),
-            status: 1,
-        };
-        console.log({ configTab });
-        // onUpdateLoading({ isLoading: false });
-        // props.onAddNewOverview({
-        //   configTab,
-        // });
-    }, [listDashboardName]);
-    return { children: customChildren, onCreateNewTab };
+    }, [dashboardObject, onOptionCallback]);
+    // Callbacks
+    const onCreateNewReport = useCallback(() => {
+        history.push(getGeneratePath(getHomePath(HOME_REPORT_ROUTES.CREATE), auth));
+    }, [auth, history, getHomePath]);
+    const onMenuClick = useCallback((key, _) => {
+        history.push(getGeneratePath(getHomePath(HOME_REPORT_ROUTES.DETAIL), Object.assign(Object.assign({}, auth), { reportId: key })));
+    }, [auth, history, getHomePath]);
+    // const onCreateNewReport = useCallback(() => {
+    //   const configTab = {
+    //     id: generateKey(),
+    //     dashboardName: getDefaultDashboardName(listDashboardName),
+    //     layout: 'settings',
+    //     filters: [],
+    //     enableParamFilter: 1,
+    //     portalId: getPortalId({}),
+    //     status: 1,
+    //   };
+    //   // onUpdateLoading({ isLoading: false });
+    //   // props.onAddNewOverview({
+    //   //   configTab,
+    //   // });
+    // }, [listDashboardName]);
+    return {
+        children: customChildren,
+        /* Callbacks */
+        onCreateNewReport,
+        onOptionCallback,
+        onMenuClick,
+    };
 };

package/es/components/organism/LeftMenu/components/InsightsMenu/useInsightsMenu.js

@@ -8,5 +8,7 @@ import { getMenuItem } from '../../utils';
 export const useInsightsMenu = () => {
     const featureChildren = useContextSelector(LeftMenuContext, state => state.featureChildren);
     const customChildren = useMemo(() => featureChildren === null || featureChildren === void 0 ? void 0 : featureChildren.map(item => getMenuItem(item)), [featureChildren]);
-    return { children: customChildren };
+    return {
+        children: customChildren,
+    };
 };

package/es/components/organism/LeftMenu/components/ProfilesMenu/useProfilesMenu.js

@@ -8,6 +8,7 @@ import { getMenuItem } from '../../utils';
 export const useProfilesMenu = () => {
     const featureChildren = useContextSelector(LeftMenuContext, state => state.featureChildren);
     const customChildren = useMemo(() => featureChildren === null || featureChildren === void 0 ? void 0 : featureChildren.map(item => getMenuItem(item)), [featureChildren]);
-    console.log('Profiles Children: ', customChildren);
-    return { children: customChildren };
+    return {
+        children: customChildren,
+    };
 };

package/es/components/organism/LeftMenu/components/SettingsMenu/useSettingsMenu.js

@@ -8,6 +8,5 @@ import { getMenuItem } from '../../utils';
 export const useSettingsMenu = () => {
     const featureChildren = useContextSelector(LeftMenuContext, state => state.featureChildren);
     const customChildren = useMemo(() => featureChildren === null || featureChildren === void 0 ? void 0 : featureChildren.map(item => getMenuItem(item)), [featureChildren]);
-    console.log('Settings Children: ', customChildren);
     return { children: customChildren };
 };

package/es/components/organism/LeftMenu/components/TemplatesMenu/useTemplatesMenu.js

@@ -8,6 +8,7 @@ import { getMenuItem } from '../../utils';
 export const useTemplatesMenu = () => {
     const featureChildren = useContextSelector(LeftMenuContext, state => state.featureChildren);
     const customChildren = useMemo(() => featureChildren === null || featureChildren === void 0 ? void 0 : featureChildren.map(item => getMenuItem(item)), [featureChildren]);
-    console.log('Templates Children: ', customChildren);
-    return { children: customChildren };
+    return {
+        children: customChildren,
+    };
 };

package/es/components/organism/LeftMenu/components/common/ChildMenu/index.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import { TMenuItem } from '../../../types';
 interface ChildMenuProps {
     items?: TMenuItem[];
+    onMenuClick?: (key: string, keyPath: string[]) => void;
 }
 export declare const ChildMenu: React.FC<ChildMenuProps>;
 export {};

package/es/components/organism/LeftMenu/components/common/ChildMenu/index.js

@@ -2,7 +2,7 @@
 import React, { memo, useState } from 'react';
 import Icon from '@antscorp/icons';
 import { isEmpty, isNil, isString } from 'lodash';
-import { generatePath, Link } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 import { useContextSelector } from 'use-context-selector';
 // Components
 import { Dropdown, Menu } from 'antd';
@@ -12,15 +12,18 @@ import { MenuItemImage } from './components';
 import { LabelCustom, MenuWrapper } from './styled';
 // Constants
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
+import { ICON_SIZE } from '../../../constants';
 // Contexts
 import { AppConfigContext } from '@antscorp/antsomi-ui/es/providers';
+// Utils
+import { getGeneratePath } from '../../../utils';
 export const ChildMenu = memo(props => {
-    const { items = [] } = props;
-    console.log({ items });
+    const { items = [], onMenuClick } = props;
     const userId = useContextSelector(AppConfigContext, state => { var _a; return (_a = state === null || state === void 0 ? void 0 : state.auth) === null || _a === void 0 ? void 0 : _a.userId; });
     const [current, setCurrent] = useState('1');
     const onClick = e => {
         setCurrent(e.key);
+        onMenuClick === null || onMenuClick === void 0 ? void 0 : onMenuClick(e.key, e.keyPath);
     };
     // Render components
     const customMenuItems = (args) => {
@@ -41,8 +44,8 @@ export const ChildMenu = memo(props => {
                     React.createElement(Icon, { type: "icon-ants-three-dot-vertical", style: { marginTop: '2px' } })))) : (React.createElement(LabelCustom, { ellipsis: { tooltip: label } }, label));
             return {
                 key,
-                label: isString(menu_item_path) ? (React.createElement(Link, { to: generatePath(menu_item_path, { user_id: userId }), style: { width: '100%', height: '100%', display: 'flex', color: 'inherit' } }, labelComponent())) : (labelComponent()),
-                icon: !isNil(icon) ? (React.createElement(Icon, { type: icon, style: { fontSize: 25 } })) : !isNil(logo_url) ? (React.createElement(MenuItemImage, { imageUrl: logo_url, fallbackIcon: (_a = args === null || args === void 0 ? void 0 : args.parent) === null || _a === void 0 ? void 0 : _a.icon })) : null,
+                label: isString(menu_item_path) ? (React.createElement(Link, { to: getGeneratePath(menu_item_path, { userId }), className: "menu-link" }, labelComponent())) : (labelComponent()),
+                icon: !isNil(icon) ? (React.createElement(Icon, { type: icon, style: { fontSize: ICON_SIZE } })) : !isNil(logo_url) ? (React.createElement(MenuItemImage, { imageUrl: logo_url, fallbackIcon: (_a = args === null || args === void 0 ? void 0 : args.parent) === null || _a === void 0 ? void 0 : _a.icon })) : null,
                 children: customMenuItems({ parent: item, items: children }),
             };
         });

package/es/components/organism/LeftMenu/components/common/ChildMenu/styled.js

@@ -7,18 +7,25 @@ import { Typography } from '../../../../../atoms';
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
 export const MenuWrapper = styled.div `
   width: 100%;
+  height: 100%;
   background-color: transparent !important;
   color: 12px !important;
   font-weight: bold !important;
   padding: 5px !important;
   border-right: none !important;
 
+  & > ul {
+    height: 100%;
+    overflow: auto;
+  }
+
   [role='menu'] {
     background-color: transparent !important;
+    border: none !important;
   }
 
   [role='menuitem'] {
-    border-radius: ${(_a = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _a === void 0 ? void 0 : _a.borderRadiusLG}px !important;
+    border-radius: ${(_a = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _a === void 0 ? void 0 : _a.borderRadiusXL}px !important;
     padding-right: 10px !important;
   }
 
@@ -30,6 +37,14 @@ export const MenuWrapper = styled.div `
   .antsomi-menu-submenu-title:hover {
     background-color: #f2f9ff !important;
   }
+
+  .menu-link {
+    width: 100% !important;
+    height: 100% !important;
+    display: flex !important;
+    color: inherit !important;
+    text-decoration: none !important;
+  }
 `;
 export const LabelCustom = styled(Typography.Text) `
   font-size: inherit !important;

package/es/components/organism/LeftMenu/constants/variables.d.ts

@@ -13,3 +13,4 @@ export declare const MENU_ITEM_TYPE: {
     MENU: number;
     GROUP_MENU: number;
 };
+export declare const ICON_SIZE = 20;

package/es/components/organism/LeftMenu/constants/variables.js

@@ -13,3 +13,4 @@ export const MENU_ITEM_TYPE = {
     MENU: 2,
     GROUP_MENU: 3,
 };
+export const ICON_SIZE = 20;

package/es/components/organism/LeftMenu/contexts/index.d.ts

@@ -5,6 +5,8 @@ export interface TLeftMenuContext {
     objectType?: string;
     objectId?: number;
     isGrouped?: boolean;
+    activeItem?: string;
+    permissionMenu: TFeatureMenu[];
 }
 declare const LeftMenuContext: import("use-context-selector").Context<TLeftMenuContext>;
 declare const LeftMenuProvider: React.FC<React.PropsWithChildren<{

package/es/components/organism/LeftMenu/contexts/index.js

@@ -1,7 +1,7 @@
 // Libraries
 import React from 'react';
 import { createContext } from 'use-context-selector';
-const initialContext = { featureChildren: [] };
+const initialContext = { featureChildren: [], permissionMenu: [] };
 const LeftMenuContext = createContext(initialContext);
 const LeftMenuProvider = props => {
     const { value = initialContext, children } = props;