@antscorp/antsomi-ui 1.3.5-beta.323 → 1.3.5-beta.325

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

@@ -1,3 +1,6 @@
 import React from 'react';
 import { ThumbnailCardProps } from './types';
-export declare const ThumbnailCard: React.FC<ThumbnailCardProps>;
+export declare const ThumbnailCard: {
+    <TActionKey extends string[] = []>(props: ThumbnailCardProps<TActionKey>): React.JSX.Element;
+    displayName: string;
+};

package/es/components/molecules/ThumbnailCard/ThumbnailCard.js

@@ -19,19 +19,208 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 // Libraries
-import Icon from '@antscorp/icons';
+import React from 'react';
+import { Icon } from '@antscorp/antsomi-ui/es/components/atoms';
 import { Modal } from 'antd';
-import React, { memo } from 'react';
+import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
 // Styled
 import { ThumbnailCardWrapper } from './styled';
 // Components
-import { Button, Flex, Spin, Typography } from '../../atoms';
+import { Button, Flex, Typography, Spin, Tooltip } from '../../atoms';
 // Constants
-import { THUMBNAIL_CARD_DEFAULT_HEIGHT, THUMBNAIL_CARD_DEFAULT_WIDTH } from './constants';
+import { THUMBNAIL_CARD_ACTION_OPTIONS, THUMBNAIL_CARD_DEFAULT_HEIGHT, THUMBNAIL_CARD_DEFAULT_WIDTH, } from './constants';
 import { getUrlNoCache, checkShowSkeletonBaseUrl } from '@antscorp/antsomi-ui/es/utils';
-export const ThumbnailCard = memo(props => {
+import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
+// export const ThumbnailCard: React.FC<ThumbnailCardProps> = memo(props => {
+//   const [modal, contextHolder] = Modal.useModal();
+//   const {
+//     id,
+//     name,
+//     width = THUMBNAIL_CARD_DEFAULT_WIDTH,
+//     height = THUMBNAIL_CARD_DEFAULT_HEIGHT,
+//     thumbnail,
+//     thumbnailFit,
+//     removable = true,
+//     actionAvailable = true,
+//     showSkeleton,
+//     loading = false,
+//     removeModalProps,
+//     editBtnProps,
+//     previewBtnProps,
+//     thumbnailCacheValue,
+//     actionButtons,
+//     onClickWrapper,
+//     ...restOfProps
+//   } = props;
+//   const { onOk, ...restOfRemoveTemplateModalProps } = removeModalProps || {};
+//   const {
+//     text: editText = 'Use template',
+//     onClick: onClickEdit,
+//     ...restOfEditBtnProps
+//   } = editBtnProps || {};
+//   const {
+//     text: previewText = 'Preview',
+//     onClick: onClickPreview,
+//     ...restOfPreviewBtnProps
+//   } = previewBtnProps || {};
+//   // Memo
+//   const showSkeletonMemo =
+//     // NOTES: Hot fix for showSkeleton base url if showSkeleton is not defined
+//     typeof showSkeleton === 'undefined'
+//       ? checkShowSkeletonBaseUrl(thumbnail)
+//       : typeof showSkeleton === 'function'
+//       ? showSkeleton(props)
+//       : showSkeleton;
+//   // Handlers
+//   const handleRemoveThumbnail: React.MouseEventHandler<HTMLElement> = e => {
+//     e.stopPropagation();
+//     modal.confirm({
+//       title: 'Remove template',
+//       centered: true,
+//       icon: <Icon type="icon-ants-info" style={{ fontSize: 16, lineHeight: '25px' }} />,
+//       content: (
+//         <div>
+//           <p>Are you sure you want to remove the template?</p>
+//           <p>This action can not be undone.</p>
+//         </div>
+//       ),
+//       okText: 'Remove',
+//       cancelText: 'Cancel',
+//       closable: true,
+//       ...restOfRemoveTemplateModalProps,
+//       onOk: async () => {
+//         if (onOk) onOk(id);
+//       },
+//     });
+//   };
+//   const handleWrapperClick: React.MouseEventHandler<HTMLElement> = e => {
+//     e.stopPropagation();
+//     onClickWrapper?.(id);
+//   };
+//   // Handlers
+//   const renderActionButtons = () => {
+//     if (!actionButtons) return null;
+//     return Object.keys(actionButtons)
+//       .map(key => {
+//         const option = THUMBNAIL_CARD_ACTION_OPTIONS[key];
+//         const actionSettings = actionButtons[key as TActionButtonKey];
+//         if (actionSettings) {
+//           const { buttonProps, key, customRender } = actionSettings;
+//           const icon = actionSettings.icon || option.icon || '';
+//           const label = actionSettings.label || option.label || '';
+//           const ButtonComponent = (
+//             <Tooltip title={label}>
+//               <Button
+//                 key={key || option.key}
+//                 type="primary"
+//                 icon={
+//                   <Icon type={icon || option.icon} style={{ fontSize: 24, color: '#FFFFFF' }} />
+//                 }
+//                 {...buttonProps}
+//               />
+//             </Tooltip>
+//           );
+//           /**
+//            * Handle custom render for action button
+//            * If customRender is a function, return the function callback the ButtonComponent
+//            * If not, return ButtonComponent
+//            */
+//           return typeof customRender === 'function'
+//             ? customRender(ButtonComponent)
+//             : ButtonComponent;
+//         }
+//         return null;
+//       })
+//       .filter(Boolean);
+//   };
+//   return (
+//     <Flex gap={10} vertical {...restOfProps} style={{ width, ...restOfProps.style }}>
+//       <ThumbnailCardWrapper
+//         $showSkeleton={showSkeletonMemo}
+//         style={{ height, cursor: actionAvailable ? 'default' : 'pointer' }}
+//         onClick={handleWrapperClick}
+//       >
+//         <div className="screen">
+//           {thumbnail && (
+//             <img
+//               src={getUrlNoCache(thumbnail, thumbnailCacheValue)}
+//               alt=""
+//               style={{ objectFit: thumbnailFit }}
+//               onError={e => {
+//                 e.currentTarget.style.display = 'none';
+//               }}
+//             />
+//           )}
+//         </div>
+//         {actionAvailable && !loading && (
+//           <>
+//             <Flex className="center-action" align="center" gap={10} vertical>
+//               <Button
+//                 type="primary"
+//                 className="animate__animated animate__fadeIn"
+//                 {...restOfEditBtnProps}
+//                 onClick={e => {
+//                   e.stopPropagation();
+//                   onClickEdit?.(id);
+//                 }}
+//               >
+//                 <Typography.Text
+//                   ellipsis={{ tooltip: editText }}
+//                   style={{ maxWidth: '100%', color: 'inherit' }}
+//                 >
+//                   {editText}
+//                 </Typography.Text>
+//               </Button>
+//               <Button
+//                 className="animate__animated animate__fadeIn"
+//                 onClick={e => {
+//                   e.stopPropagation();
+//                   onClickPreview?.(id);
+//                 }}
+//                 {...restOfPreviewBtnProps}
+//               >
+//                 <Typography.Text
+//                   ellipsis={{ tooltip: previewText }}
+//                   style={{ maxWidth: '100%', color: 'inherit' }}
+//                 >
+//                   {previewText}
+//                 </Typography.Text>
+//               </Button>
+//             </Flex>
+//             <div className="top-right-corner-action animate__animated animate__fadeIn">
+//               {renderActionButtons()}
+//               {removable && (
+//                 <Tooltip title={i18nInstance.t(translations.remove).toString()}>
+//                   <Button
+//                     type="primary"
+//                     icon={
+//                       <Icon
+//                         type="icon-ants-trash-outline"
+//                         style={{ fontSize: 24, color: '#FFFFFF' }}
+//                       />
+//                     }
+//                     onClick={handleRemoveThumbnail}
+//                   />
+//                 </Tooltip>
+//               )}
+//             </div>
+//             <div className="backdrop" />
+//             <div>{contextHolder}</div>
+//           </>
+//         )}
+//         {loading && <Spin className="thumbnail__loading" spinning />}
+//       </ThumbnailCardWrapper>
+//       {!!name && (
+//         <Typography.Text ellipsis={{ tooltip: name }} style={{ maxWidth: '100%' }}>
+//           {name}
+//         </Typography.Text>
+//       )}
+//     </Flex>
+//   );
+// });
+export const ThumbnailCard = (props) => {
     const [modal, contextHolder] = Modal.useModal();
-    const { id, name, width = THUMBNAIL_CARD_DEFAULT_WIDTH, height = THUMBNAIL_CARD_DEFAULT_HEIGHT, thumbnail, thumbnailFit, removable = true, actionAvailable = true, showSkeleton, loading = false, removeModalProps, editBtnProps, previewBtnProps, thumbnailCacheValue, onClickWrapper } = props, restOfProps = __rest(props, ["id", "name", "width", "height", "thumbnail", "thumbnailFit", "removable", "actionAvailable", "showSkeleton", "loading", "removeModalProps", "editBtnProps", "previewBtnProps", "thumbnailCacheValue", "onClickWrapper"]);
+    const { id, name, width = THUMBNAIL_CARD_DEFAULT_WIDTH, height = THUMBNAIL_CARD_DEFAULT_HEIGHT, thumbnail, thumbnailFit, removable = true, actionAvailable = true, showSkeleton, loading = false, removeModalProps, editBtnProps, previewBtnProps, thumbnailCacheValue, actionButtons, onClickWrapper } = props, restOfProps = __rest(props, ["id", "name", "width", "height", "thumbnail", "thumbnailFit", "removable", "actionAvailable", "showSkeleton", "loading", "removeModalProps", "editBtnProps", "previewBtnProps", "thumbnailCacheValue", "actionButtons", "onClickWrapper"]);
     const _a = removeModalProps || {}, { onOk } = _a, restOfRemoveTemplateModalProps = __rest(_a, ["onOk"]);
     const _b = editBtnProps || {}, { text: editText = 'Use template', onClick: onClickEdit } = _b, restOfEditBtnProps = __rest(_b, ["text", "onClick"]);
     const _c = previewBtnProps || {}, { text: previewText = 'Preview', onClick: onClickPreview } = _c, restOfPreviewBtnProps = __rest(_c, ["text", "onClick"]);
@@ -57,6 +246,33 @@ export const ThumbnailCard = memo(props => {
         e.stopPropagation();
         onClickWrapper === null || onClickWrapper === void 0 ? void 0 : onClickWrapper(id);
     };
+    // Handlers
+    const renderActionButtons = () => {
+        if (!actionButtons)
+            return null;
+        return Object.keys(actionButtons)
+            .map(key => {
+            const option = THUMBNAIL_CARD_ACTION_OPTIONS[key];
+            const actionSettings = actionButtons[key];
+            if (actionSettings) {
+                const { buttonProps, key, customRender } = actionSettings;
+                const icon = actionSettings.icon || (option === null || option === void 0 ? void 0 : option.icon) || '';
+                const label = actionSettings.label || (option === null || option === void 0 ? void 0 : option.label) || '';
+                const ButtonComponent = (React.createElement(Tooltip, { title: label },
+                    React.createElement(Button, Object.assign({ key: key || (option === null || option === void 0 ? void 0 : option.key), type: "primary", icon: React.createElement(Icon, { type: icon, style: { fontSize: 24, color: '#FFFFFF' } }) }, buttonProps))));
+                /**
+                 * Handle custom render for action button
+                 * If customRender is a function, return the function callback the ButtonComponent
+                 * If not, return ButtonComponent
+                 */
+                return typeof customRender === 'function'
+                    ? customRender(ButtonComponent)
+                    : ButtonComponent;
+            }
+            return null;
+        })
+            .filter(Boolean);
+    };
     return (React.createElement(Flex, Object.assign({ gap: 10, vertical: true }, restOfProps, { style: Object.assign({ width }, restOfProps.style) }),
         React.createElement(ThumbnailCardWrapper, { "$showSkeleton": showSkeletonMemo, style: { height, cursor: actionAvailable ? 'default' : 'pointer' }, onClick: handleWrapperClick },
             React.createElement("div", { className: "screen" }, thumbnail && (React.createElement("img", { src: getUrlNoCache(thumbnail, thumbnailCacheValue), alt: "", style: { objectFit: thumbnailFit }, onError: e => {
@@ -74,11 +290,13 @@ export const ThumbnailCard = memo(props => {
                             onClickPreview === null || onClickPreview === void 0 ? void 0 : onClickPreview(id);
                         } }, restOfPreviewBtnProps),
                         React.createElement(Typography.Text, { ellipsis: { tooltip: previewText }, style: { maxWidth: '100%', color: 'inherit' } }, previewText))),
-                removable && (React.createElement("div", { className: "top-right-corner-action animate__animated animate__fadeIn" },
-                    React.createElement(Button, { type: "primary", icon: React.createElement(Icon, { type: "icon-ants-trash-outline", style: { fontSize: 24, color: '#FFFFFF' } }), onClick: handleRemoveThumbnail }))),
+                React.createElement("div", { className: "top-right-corner-action animate__animated animate__fadeIn" },
+                    renderActionButtons(),
+                    removable && (React.createElement(Tooltip, { title: i18nInstance.t(translations.remove).toString() },
+                        React.createElement(Button, { type: "primary", icon: React.createElement(Icon, { type: "icon-ants-trash-outline", style: { fontSize: 24, color: '#FFFFFF' } }), onClick: handleRemoveThumbnail })))),
                 React.createElement("div", { className: "backdrop" }),
                 React.createElement("div", null, contextHolder))),
             loading && React.createElement(Spin, { className: "thumbnail__loading", spinning: true })),
         !!name && (React.createElement(Typography.Text, { ellipsis: { tooltip: name }, style: { maxWidth: '100%' } }, name))));
-});
+};
 ThumbnailCard.displayName = 'ThumbnailCard';

package/es/components/molecules/ThumbnailCard/constants.d.ts

@@ -1,3 +1,8 @@
 export declare const THUMBNAIL_CARD_DEFAULT_WIDTH = 330;
 export declare const THUMBNAIL_CARD_DEFAULT_HEIGHT = 230;
 export declare const THUMBNAIL_URL = "https://st-media-template.antsomi.com/base64-img/37563.png";
+export declare const THUMBNAIL_CARD_ACTION_KEYS: {
+    readonly EDIT: "EDIT";
+    readonly DUPLICATE: "DUPLICATE";
+};
+export declare const THUMBNAIL_CARD_ACTION_OPTIONS: Record<string, any>;

package/es/components/molecules/ThumbnailCard/constants.js

@@ -1,3 +1,25 @@
+// Libraries
+import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
+// Constants
+import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
 export const THUMBNAIL_CARD_DEFAULT_WIDTH = 330;
 export const THUMBNAIL_CARD_DEFAULT_HEIGHT = 230;
 export const THUMBNAIL_URL = 'https://st-media-template.antsomi.com/base64-img/37563.png';
+/* CARD ACTION KEYS */
+export const THUMBNAIL_CARD_ACTION_KEYS = {
+    EDIT: 'EDIT',
+    DUPLICATE: 'DUPLICATE',
+};
+const { EDIT, DUPLICATE } = THUMBNAIL_CARD_ACTION_KEYS;
+export const THUMBNAIL_CARD_ACTION_OPTIONS = {
+    [EDIT]: {
+        key: EDIT,
+        label: i18nInstance.t(translations.edit.title).toString(),
+        icon: 'icon-ants-pencil',
+    },
+    [DUPLICATE]: {
+        key: DUPLICATE,
+        label: i18nInstance.t(translations.duplicate.title).toString(),
+        icon: 'icon-ants-duplicate',
+    },
+};

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

@@ -27,11 +27,11 @@ export const ThumbnailCardWrapper = styled.div `
     }
 
     .top-right-corner-action {
-      display: block;
+      display: flex;
     }
 
     .backdrop {
-      opacity: 0.6 !important;
+      opacity: 0.5 !important;
     }
   }
 
@@ -66,6 +66,8 @@ export const ThumbnailCardWrapper = styled.div `
     top: 16px;
     right: 16px;
     display: none;
+    align-items: center;
+    gap: 12px;
     z-index: 12;
 
     button {

package/es/components/molecules/ThumbnailCard/types.d.ts

@@ -1,5 +1,6 @@
 import { ModalFuncProps, ButtonProps } from 'antd';
-import React, { HTMLAttributes } from 'react';
+import React, { HTMLAttributes, ReactNode } from 'react';
+import { THUMBNAIL_CARD_ACTION_KEYS } from './constants';
 export type TThumbnailCardId = string | number;
 export type TRemoveModalProps = Omit<ModalFuncProps, 'onOk'> & {
     onOk?: (id: TThumbnailCardId) => void;
@@ -8,7 +9,7 @@ export type TThumbnailButton = Omit<ButtonProps, 'onClick'> & {
     text?: string;
     onClick?: (id: TThumbnailCardId) => void;
 };
-export interface ThumbnailCardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'id'> {
+export interface ThumbnailCardProps<TActionKey extends string[] = []> extends Omit<HTMLAttributes<HTMLDivElement>, 'id'> {
     id: TThumbnailCardId;
     name?: string;
     width?: number;
@@ -22,6 +23,14 @@ export interface ThumbnailCardProps extends Omit<HTMLAttributes<HTMLDivElement>,
     actionAvailable?: boolean;
     removeModalProps?: TRemoveModalProps;
     thumbnailFit?: React.CSSProperties['objectFit'];
+    actionButtons?: Partial<Record<TActionButtonKey<TActionKey>, {
+        buttonProps?: ButtonProps;
+        key?: string;
+        label?: string;
+        icon?: string;
+        customRender?: (node: ReactNode) => ReactNode;
+    }>>;
     thumbnailCacheValue?: string | number;
     onClickWrapper?: (id: TThumbnailCardId) => void;
 }
+export type TActionButtonKey<T extends string[] = []> = (typeof THUMBNAIL_CARD_ACTION_KEYS)[keyof typeof THUMBNAIL_CARD_ACTION_KEYS] | T[number];

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

@@ -3,20 +3,58 @@ import React, { memo } from 'react';
 // Components
 import { ChildMenu } from '../common';
 import { Flex } from '../../../../atoms';
+import { Modal } from '../../../../molecules';
 // Constants
 import Icon from '@antscorp/icons';
 // Styled
-import { CreateButton, HomeMenuWrapper } from './styled';
+import { CreateButton, HomeMenuWrapper, ModalWrapper } from './styled';
 // Hooks
 import { useHomeMenu } from './useHomeMenu';
+// const MAP_TITLE = {
+//   REMOVE_ACCESS: {
+//     HEADING: getTranslateMessage(TRANSLATE_KEY._TITL_REMOV_ACCESS_TAB, 'Remove access to this tab'),
+//     BODY: getTranslateMessage(
+//       TRANSLATE_KEY.REMOV_ACCESS_TAB,
+//       'This action will remove your access to this tab. You will not see it anymore. Are you sure you want to continue?',
+//     ),
+//     HEADING_DASHBOARD: getTranslateMessage(
+//       TRANSLATE_KEY._TITL_REMOV_ACCESS_DB,
+//       'Remove access to this dashboard',
+//     ),
+//     BODY_DASHBOARD: getTranslateMessage(
+//       TRANSLATE_KEY.REMOV_ACCESS_DB,
+//       'This action will remove your access to selected dashboard. You will not see it anymore. Are you sure you want to continue?',
+//     ),
+//   },
+//   DELETE_TAB: {
+//     HEADING: getTranslateMessage(TRANSLATE_KEY._TITL_DELETE_TAB, 'Remove this tab'),
+//     BODY: getTranslateMessage(
+//       TRANSLATE_KEY.DELETE_TAB_MESS,
+//       'Removing this tab will delete it permanently. Are you sure you want to perform this action?',
+//     ),
+//     HEADING_DASHBOARD: getTranslateMessage(TRANSLATE_KEY._TITL_DELETE_DB, 'Remove this dashboard'),
+//     BODY_DASHBOARD: getTranslateMessage(
+//       TRANSLATE_KEY.DELETE_DB_MESS,
+//       'Removing this dashboard will delete it permanently. Are you sure you want to perform this action?',
+//     ),
+//   },
+//   'my-report-template': {
+//     HEADING: getTranslateMessage(TRANSLATE_KEY._TITL_SHARE_RP, 'Share Report'),
+//     BODY: getTranslateMessage(
+//       TRANSLATE_KEY._SHARE_RP_MESS,
+//       'Sharing this tab with Public access will make your report public for everyone on the portal.',
+//     ),
+//   },
+// };
 export const HomeMenu = memo(() => {
-    const { children, onCreateNewReport, onMenuClick } = useHomeMenu();
-    // console.log({});
-    return (React.createElement(HomeMenuWrapper, { gap: 10, 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("div", { className: "menu-list" },
-            React.createElement(ChildMenu, { items: children, onMenuClick: onMenuClick }))));
+    const { children, removedDashboardId, isDashboardRemoving, setRemovedDashboardId, onCreateNewReport, onMenuClick, onRemoveDashboard, } = useHomeMenu();
+    return (React.createElement(React.Fragment, null,
+        React.createElement(HomeMenuWrapper, { gap: 10, 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("div", { className: "menu-list" },
+                React.createElement(ChildMenu, { items: children, onMenuClick: onMenuClick }))),
+        React.createElement(Modal, { open: !!removedDashboardId, centered: true, onCancel: () => setRemovedDashboardId(''), title: "Remove this dashboard", okText: "Confirm", cancelText: "Cancel", closable: false, okButtonProps: { loading: isDashboardRemoving }, modalRender: node => React.createElement(ModalWrapper, null, node), onOk: onRemoveDashboard }, "Removing this dashboard will delete it permanently. Are you sure you want to perform this action?")));
 });

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

@@ -3,3 +3,4 @@ export declare const HomeMenuWrapper: import("styled-components").StyledComponen
 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>;
+export declare const ModalWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -35,3 +35,13 @@ export const CreateButton = styled(Button) `
   font-size: 14px !important;
   flex-shrink: 0;
 `;
+export const ModalWrapper = styled.div `
+  width: 379px;
+
+  & > .antsomi-modal-content {
+    & > .antsomi-modal-header,
+    & > .antsomi-modal-footer {
+      margin: 0px;
+    }
+  }
+`;

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

@@ -1,10 +1,14 @@
 /// <reference types="react" />
 export declare const useHomeMenu: () => {
     children: import("@antscorp/antsomi-ui/es/components/organism/LeftMenu/types").TMenuItem[];
+    removedDashboardId: string;
+    isDashboardRemoving: boolean;
+    setRemovedDashboardId: import("react").Dispatch<import("react").SetStateAction<string>>;
     onCreateNewReport: import("react").MouseEventHandler<HTMLElement>;
     onOptionCallback: (args: {
         menuItemKey: string;
         optionKey: string;
     }) => void;
     onMenuClick: (key: string, _: any) => void;
+    onRemoveDashboard: () => Promise<void>;
 };

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

@@ -1,23 +1,37 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 // Libraries
-import { useCallback, useMemo } from 'react';
-// import { useHistory } from 'react-router-dom';
+import { useCallback, useMemo, useState } from 'react';
 // Constants
 import { CONFIG_OPTIONS } from './constants';
 import { HOME_REPORT_ROUTES, HOME_ROUTE } from '../../constants';
+import { API_RESPONSE_CODE, CDP_API } from '@antscorp/antsomi-ui/es/constants';
 // Utils
 import { getGeneratePath, getMenuItem } from '../../utils';
-// Types
+// Hooks
 import { useLeftMenuStore } from '../../stores';
 import { useLayoutStore } from '@antscorp/antsomi-ui/es/components/template';
 import { useCustomRouter } from '@antscorp/antsomi-ui/es/hooks';
+// Queries
+import { useUpdateTask } from '@antscorp/antsomi-ui/es/queries/LeftMenu';
 export const useHomeMenu = () => {
     const { pathname, search } = window.location;
-    // const history = useHistory();
     const { navigate, replace } = useCustomRouter();
     const appMenuChildren = useLeftMenuStore(store => store.state.appMenuChildren);
     const auth = useLeftMenuStore(store => { var _a; return (_a = store.state.appConfig) === null || _a === void 0 ? void 0 : _a.auth; });
+    const env = useLeftMenuStore(store => { var _a; return (_a = store.state.appConfig) === null || _a === void 0 ? void 0 : _a.env; });
+    const dashboardParams = useLeftMenuStore(store => store.state.dashboardParams);
     const onClickCreateDashboard = useLayoutStore(store => store.state.leftMenu.onClickCreateDashboard);
+    const [removedDashboardId, setRemovedDashboardId] = useState('');
     const urlParams = useMemo(() => new URLSearchParams(search), [search]);
+    const { mutateAsync: removeDashboard, isLoading: isDashboardRemoving } = useUpdateTask();
     const onOptionCallback = useCallback((args) => {
         const { optionKey, menuItemKey } = args;
         switch (optionKey) {
@@ -29,6 +43,7 @@ export const useHomeMenu = () => {
                 break;
             }
             case CONFIG_OPTIONS.REMOVE.key:
+                setRemovedDashboardId(menuItemKey);
                 break;
             default:
                 break;
@@ -54,11 +69,26 @@ export const useHomeMenu = () => {
             navigate(newPathName);
         }
     }, [auth, pathname, navigate]);
+    const onRemoveDashboard = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
+        if (removedDashboardId && auth && env) {
+            const params = {
+                params: Object.assign(Object.assign({}, dashboardParams), { dashboardId: +removedDashboardId }),
+                auth: Object.assign(Object.assign({}, auth), { url: `${CDP_API === null || CDP_API === void 0 ? void 0 : CDP_API[env]}/hub` }),
+            };
+            const response = yield removeDashboard(params);
+            if ((response === null || response === void 0 ? void 0 : response.code) === API_RESPONSE_CODE.SUCCESS) {
+                setRemovedDashboardId('');
+            }
+        }
+    }), [auth, dashboardParams, env, removedDashboardId, removeDashboard]);
     return {
         children: customChildren,
-        /* Callbacks */
+        removedDashboardId,
+        isDashboardRemoving,
+        setRemovedDashboardId,
         onCreateNewReport,
         onOptionCallback,
         onMenuClick,
+        onRemoveDashboard,
     };
 };

package/es/components/organism/LeftMenu/hooks/useLeftMenu.js

@@ -10,13 +10,14 @@ import { useLeftMenuStore } from '../stores';
 import { POST_MESSAGE_TYPES } from '@antscorp/antsomi-ui/es/constants/postMessage';
 // Constants
 import { CDP_API, PERMISSION_API } from '@antscorp/antsomi-ui/es/constants';
+import { DASHBOARD_MODULE_CONFIG } from '../../../template/Layout/constants';
 const initialState = {
     hoverItem: '',
     isExpandMenu: true,
 };
 export const useLeftMenu = (props) => {
     // Props
-    const { objectType = 'OVERVIEW', objectId = 1, isGrouped = true, appConfig, customization, onActiveMenuCodeChange, } = props;
+    const { objectType = DASHBOARD_MODULE_CONFIG.objectType, objectId = DASHBOARD_MODULE_CONFIG.objectId, isGrouped = DASHBOARD_MODULE_CONFIG.isGrouped, appConfig, customization, onActiveMenuCodeChange, } = props;
     const { isExpandable = true, isCustomized = false, items, activeKey } = customization || {};
     const { pathname, hash } = window.location;
     const activeAppCode = useLeftMenuStore(store => store.state.activeAppCode);
@@ -24,20 +25,6 @@ export const useLeftMenu = (props) => {
     const setLeftMenuState = useLeftMenuStore(store => store.setState);
     const { auth, languageCode = 'en', env = 'development' } = appConfig || {};
     const [state, setState] = useState(initialState);
-    // const { data: menuList } = useGetListMenu({
-    //   args: {
-    //     auth: {
-    //       token: env === 'production' ? auth?.token : '5474r2x214z284d4w2b4y444d464b444q4y274u4t5x5',
-    //       url: 'https://permission.antsomi.com',
-    //       portalId: env === 'production' ? auth?.portalId : 561236459,
-    //       userId: env === 'production' ? auth?.userId : '1600083836',
-    //       accountId: env === 'production' ? auth?.accountId : '1600083836',
-    //     },
-    //     params: {
-    //       type: 'menu-item-permission',
-    //     },
-    //   },
-    // });
     const { data: menuList } = useGetListMenu({
         args: {
             auth: {
@@ -127,8 +114,12 @@ export const useLeftMenu = (props) => {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     useEffect(() => {
-        setLeftMenuState({ appConfig, isCustomized });
-    }, [appConfig, isCustomized, setLeftMenuState]);
+        setLeftMenuState({
+            appConfig,
+            isCustomized,
+            dashboardParams: { objectId, isGrouped, objectType },
+        });
+    }, [appConfig, isCustomized, isGrouped, objectId, objectType, setLeftMenuState]);
     // Active Custom App Key when active key is changed
     useEffect(() => {
         if (activeKey && items)

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

@@ -11,6 +11,11 @@ export interface LeftMenuState {
     appMenuChildren: TFeatureMenu[];
     appConfig?: AppConfigProviderProps;
     isCustomized?: boolean;
+    dashboardParams: {
+        objectId: number;
+        objectType: string;
+        isGrouped: boolean;
+    };
 }
 interface LeftMenuStore {
     state: LeftMenuState;

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

@@ -1,5 +1,6 @@
 // Libraries
 import { create } from 'zustand';
+import { DASHBOARD_MODULE_CONFIG } from '../../../template/Layout/constants';
 const initialState = {
     activeAppCode: '',
     customActiveAppKey: '',
@@ -9,6 +10,11 @@ const initialState = {
     customItems: [],
     customMenuChildren: [],
     isCustomized: false,
+    dashboardParams: {
+        objectId: DASHBOARD_MODULE_CONFIG.objectId,
+        objectType: DASHBOARD_MODULE_CONFIG.objectType,
+        isGrouped: DASHBOARD_MODULE_CONFIG.isGrouped,
+    },
 };
 export const useLeftMenuStore = create(set => ({
     state: initialState,

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

@@ -172,10 +172,10 @@ export const getMappingAppChildren = (args) => {
                 appItem.children = (_d = appItem.children) === null || _d === void 0 ? void 0 : _d.map(childMenuItem => {
                     switch (childMenuItem.menu_item_code) {
                         case MARKETING_CHANNEL_CODE.ALL_CHANNEL:
-                            childMenuItem.menu_item_path = getGeneratePath(MARKETING_ROUTES.CHANNEL, Object.assign(Object.assign({}, auth), { channelId: MARKETING_CHANNEL_KEY.ALL_CHANNEL }));
+                            childMenuItem.menu_item_path = getGeneratePath(childMenuItem.menu_item_path || '', Object.assign(Object.assign({}, auth), { channelId: MARKETING_CHANNEL_KEY.ALL_CHANNEL }));
                             break;
                         case MARKETING_CHANNEL_CODE.ORCHESTRATION:
-                            childMenuItem.menu_item_path = getGeneratePath(MARKETING_ROUTES.CHANNEL, Object.assign(Object.assign({}, auth), { channelId: MARKETING_CHANNEL_KEY.JOURNEY_ORCHESTRATION }));
+                            childMenuItem.menu_item_path = getGeneratePath(childMenuItem.menu_item_path || '', Object.assign(Object.assign({}, auth), { channelId: MARKETING_CHANNEL_KEY.JOURNEY_ORCHESTRATION }));
                             break;
                         default:
                             break;

package/es/components/template/Layout/constants/config.d.ts

@@ -0,0 +1,7 @@
+export declare const DASHBOARD_MODULE_CONFIG: {
+    key: string;
+    module: string;
+    objectId: number;
+    objectType: string;
+    isGrouped: boolean;
+};

package/es/components/template/Layout/constants/config.js

@@ -0,0 +1,7 @@
+export const DASHBOARD_MODULE_CONFIG = {
+    key: 'dashboard-report',
+    module: 'DASHBOARD',
+    objectId: 1,
+    objectType: 'OVERVIEW',
+    isGrouped: true,
+};

package/es/components/template/Layout/constants/index.d.ts

@@ -1,2 +1,3 @@
 export * from './menuCode';
 export * from './permission';
+export * from './config';

package/es/components/template/Layout/constants/index.js

@@ -1,2 +1,3 @@
 export * from './menuCode';
 export * from './permission';
+export * from './config';

package/es/config/index.d.ts

@@ -6,5 +6,6 @@ export declare const ENV: {
 export declare const isDev: boolean;
 export declare const ENDPOINT: {
     readonly DASHBOARD_V2: "dashboard/v2.0";
+    readonly OVERVIEW: "dashboard/v2.0/overview";
     readonly TOOLKIT_V2: "toolkit/v2.0";
 };

package/es/config/index.js

@@ -10,5 +10,6 @@ const API_VERSION_V2 = '2.0';
 /* ENDPOINT */
 export const ENDPOINT = {
     DASHBOARD_V2: `dashboard/v${API_VERSION_V2}`,
+    OVERVIEW: `dashboard/v${API_VERSION_V2}/overview`,
     TOOLKIT_V2: `toolkit/v${API_VERSION_V2}`,
 };

package/es/constants/api.d.ts

@@ -1,3 +1,6 @@
+export declare const API_RESPONSE_CODE: {
+    SUCCESS: number;
+};
 export declare const TINYMCE_API_KEY = "scyw71pj8619analvxs56ppc2w2fj2kpy5vnmflhhc300y35";
 export declare const CDP_API: {
     development: string;

package/es/constants/api.js

@@ -1,6 +1,9 @@
 // Constants
 import { ENV } from '../config';
 import { APP_CODES } from './variables';
+export const API_RESPONSE_CODE = {
+    SUCCESS: 200,
+};
 const { DATAFLOWS, APP_ANTALYSER } = APP_CODES;
 export const TINYMCE_API_KEY = 'scyw71pj8619analvxs56ppc2w2fj2kpy5vnmflhhc300y35';
 export const CDP_API = {

package/es/constants/theme.js

@@ -1,4 +1,4 @@
-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;
+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;
 // Types
 import { theme } from 'antd';
 // Variables
@@ -89,18 +89,19 @@ THEME.components = {
         colorBorder: (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.blue1,
         colorText: (_b = THEME.token) === null || _b === void 0 ? void 0 : _b.colorPrimary,
         colorBgContainerDisabled: (_c = THEME.token) === null || _c === void 0 ? void 0 : _c.bw6,
-        colorTextDisabled: (_d = THEME.token) === null || _d === void 0 ? void 0 : _d.bw0,
+        borderColorDisabled: (_d = THEME.token) === null || _d === void 0 ? void 0 : _d.bw6,
+        colorTextDisabled: (_e = THEME.token) === null || _e === void 0 ? void 0 : _e.bw0,
         textHoverBg: '#F2F9FF',
         /* Text type */
-        colorBgTextHover: (_e = THEME.token) === null || _e === void 0 ? void 0 : _e.blue,
-        colorBgTextActive: (_f = THEME.token) === null || _f === void 0 ? void 0 : _f.blue1_1,
+        colorBgTextHover: (_f = THEME.token) === null || _f === void 0 ? void 0 : _f.blue,
+        colorBgTextActive: (_g = THEME.token) === null || _g === void 0 ? void 0 : _g.blue1_1,
     },
     Input: {
         controlHeight: 32,
-        colorBgContainerDisabled: (_g = THEME.token) === null || _g === void 0 ? void 0 : _g.bw2,
-        colorTextDisabled: (_h = THEME.token) === null || _h === void 0 ? void 0 : _h.bw10,
-        colorBorder: (_j = THEME.token) === null || _j === void 0 ? void 0 : _j.blue1,
-        colorTextPlaceholder: (_k = THEME.token) === null || _k === void 0 ? void 0 : _k.bw6,
+        colorBgContainerDisabled: (_h = THEME.token) === null || _h === void 0 ? void 0 : _h.bw2,
+        colorTextDisabled: (_j = THEME.token) === null || _j === void 0 ? void 0 : _j.bw10,
+        colorBorder: (_k = THEME.token) === null || _k === void 0 ? void 0 : _k.blue1,
+        colorTextPlaceholder: (_l = THEME.token) === null || _l === void 0 ? void 0 : _l.bw6,
         borderRadius: 0,
         borderRadiusLG: 0,
         borderRadiusSM: 0,
@@ -114,10 +115,10 @@ THEME.components = {
         borderRadiusOuter: 0,
         borderRadiusXS: 0,
         optionActiveBg: '#F2F9FF',
-        optionSelectedBg: (_l = THEME.token) === null || _l === void 0 ? void 0 : _l.blue1_1,
-        colorBorder: (_m = THEME.token) === null || _m === void 0 ? void 0 : _m.blue1,
+        optionSelectedBg: (_m = THEME.token) === null || _m === void 0 ? void 0 : _m.blue1_1,
+        colorBorder: (_o = THEME.token) === null || _o === void 0 ? void 0 : _o.blue1,
         controlItemBgActive: '#E0EBF7',
-        colorBgContainerDisabled: (_o = THEME.token) === null || _o === void 0 ? void 0 : _o.bw2,
+        colorBgContainerDisabled: (_p = THEME.token) === null || _p === void 0 ? void 0 : _p.bw2,
         fontSizeIcon: 14,
         paddingSM: 6,
     },
@@ -131,9 +132,9 @@ THEME.components = {
         borderRadiusOuter: 0,
         controlHeight: 30,
         borderRadiusXS: 0,
-        colorBorder: (_p = THEME.token) === null || _p === void 0 ? void 0 : _p.blue1,
+        colorBorder: (_q = THEME.token) === null || _q === void 0 ? void 0 : _q.blue1,
         controlItemBgActive: '#E0EBF7',
-        colorBgContainerDisabled: (_q = THEME.token) === null || _q === void 0 ? void 0 : _q.bw2,
+        colorBgContainerDisabled: (_r = THEME.token) === null || _r === void 0 ? void 0 : _r.bw2,
         // fontSizeIcon: 14,
     },
     DatePicker: {
@@ -142,20 +143,20 @@ THEME.components = {
         borderRadiusSM: 0,
         borderRadiusOuter: 0,
         borderRadiusXS: 0,
-        colorBorder: (_r = THEME.token) === null || _r === void 0 ? void 0 : _r.blue1,
+        colorBorder: (_s = THEME.token) === null || _s === void 0 ? void 0 : _s.blue1,
         controlItemBgActive: '#E0EBF7',
-        colorBgContainerDisabled: (_s = THEME.token) === null || _s === void 0 ? void 0 : _s.bw2,
+        colorBgContainerDisabled: (_t = THEME.token) === null || _t === void 0 ? void 0 : _t.bw2,
         fontSizeIcon: 14,
         controlHeight: 31,
     },
     Divider: {
         marginLG: 15,
         marginXL: 15,
-        colorSplit: (_t = THEME.token) === null || _t === void 0 ? void 0 : _t.accent3,
+        colorSplit: (_u = THEME.token) === null || _u === void 0 ? void 0 : _u.accent3,
     },
     Checkbox: {
         controlInteractiveSize: 18,
-        colorBorder: (_u = THEME.token) === null || _u === void 0 ? void 0 : _u.colorPrimary,
+        colorBorder: (_v = THEME.token) === null || _v === void 0 ? void 0 : _v.colorPrimary,
         lineWidth: 2,
         borderRadiusSM: 5,
     },
@@ -168,7 +169,7 @@ THEME.components = {
         paddingMD: 0,
     },
     Tabs: {
-        itemColor: (_v = THEME.token) === null || _v === void 0 ? void 0 : _v.bw8,
+        itemColor: (_w = THEME.token) === null || _w === void 0 ? void 0 : _w.bw8,
         horizontalItemPadding: '17px 30px',
         horizontalItemGutter: 0,
         lineWidthBold: 3,
@@ -180,7 +181,7 @@ THEME.components = {
         lineHeight: 1.143,
         lineHeightLG: 1.143,
         lineHeightSM: 1.143,
-        itemHoverColor: (_w = THEME.token) === null || _w === void 0 ? void 0 : _w.colorPrimary,
+        itemHoverColor: (_x = THEME.token) === null || _x === void 0 ? void 0 : _x.colorPrimary,
     },
     Collapse: {
         headerBg: '#FFF',
@@ -188,12 +189,12 @@ THEME.components = {
         headerPadding: '15px 10px',
     },
     Switch: {
-        colorTextQuaternary: (_x = THEME.token) === null || _x === void 0 ? void 0 : _x.bw0,
-        colorTextTertiary: (_y = THEME.token) === null || _y === void 0 ? void 0 : _y.bw0,
+        colorTextQuaternary: (_y = THEME.token) === null || _y === void 0 ? void 0 : _y.bw0,
+        colorTextTertiary: (_z = THEME.token) === null || _z === void 0 ? void 0 : _z.bw0,
         handleSize: 12,
         handleSizeSM: 7,
         trackMinWidth: 30,
-        handleBg: (_z = THEME.token) === null || _z === void 0 ? void 0 : _z.colorPrimary,
+        handleBg: (_0 = THEME.token) === null || _0 === void 0 ? void 0 : _0.colorPrimary,
     },
     Popover: {
         borderRadiusLG: 10,
@@ -205,7 +206,7 @@ THEME.components = {
         controlItemBgHover: '#F2F9FF',
     },
     Tooltip: {
-        colorBgSpotlight: (_0 = THEME.token) === null || _0 === void 0 ? void 0 : _0.bw8,
+        colorBgSpotlight: (_1 = THEME.token) === null || _1 === void 0 ? void 0 : _1.bw8,
     },
     Menu: {
         itemHoverBg: '#F2F9FF',
@@ -214,8 +215,8 @@ THEME.components = {
         itemMarginBlock: 5,
         itemBorderRadius: 5,
         subMenuItemBg: 'transparent',
-        itemDisabledColor: (_1 = THEME.token) === null || _1 === void 0 ? void 0 : _1.colorTextDisabled,
-        itemActiveBg: (_2 = THEME.token) === null || _2 === void 0 ? void 0 : _2.blue1_1,
+        itemDisabledColor: (_2 = THEME.token) === null || _2 === void 0 ? void 0 : _2.colorTextDisabled,
+        itemActiveBg: (_3 = THEME.token) === null || _3 === void 0 ? void 0 : _3.blue1_1,
     },
     Form: {},
 };

package/es/locales/en/translation.json

@@ -543,5 +543,6 @@
             "column": "Column",
             "explore": "Explore"
         }
-    }
+    },
+    "remove": "Remove"
 }

package/es/locales/i18n.d.ts

@@ -546,6 +546,7 @@ export declare const translationsJson: {
                     explore: string;
                 };
             };
+            remove: string;
         };
     };
     vi: {
@@ -638,6 +639,14 @@ export declare const translationsJson: {
                     explore: string;
                 };
             };
+            edit: {
+                title: string;
+                description: string;
+            };
+            duplicate: {
+                title: string;
+            };
+            remove: string;
         };
     };
 };

package/es/locales/translations.d.ts

@@ -546,6 +546,7 @@ export declare const convertLanguageJsonToObject: (json: any, objToConvertTo?: C
             explore: string;
         };
     };
+    remove: string;
 }>, current?: string) => void;
 export declare const t: (id: string, ...rest: any[]) => [string, ...any[]];
 export declare const getTranslateMessage: (id: string, defaultMessage?: string, value?: Record<string, unknown>) => string;

package/es/locales/vi/translation.json

@@ -86,5 +86,13 @@
             "column": "Cột",
             "explore": "Khám phá"
         }
-    }
+    },
+    "edit": {
+        "title": "Chỉnh sửa",
+        "description": ""
+    },
+    "duplicate": {
+        "title": "Sao chép"
+    },
+    "remove": "Xóa"
 }

package/es/providers/ConfigProvider/GlobalStyle.js

@@ -139,7 +139,7 @@ export const GlobalStyle = () => {
         color: ${(_h = THEME.token) === null || _h === void 0 ? void 0 : _h.bw6} !important;
       }
 
-      .antsomi-btn-primary:disabled,
+      /* .antsomi-btn-primary:disabled, */
       .antsomi-btn-default:disabled,
       .antsomi-btn-dashed:disabled,
       .antsomi-btn-disabled,

package/es/queries/LeftMenu/index.d.ts

@@ -18,6 +18,7 @@ export type TGetDestinationChannel = {
     options?: UseQueryOptions<any, any, TDestinationChannelResponse, any[]>;
 };
 export declare const useGetDashboard: (params: TGetDashboard) => import("@tanstack/react-query").UseQueryResult<TDashboardResponse, any>;
+export declare const useUpdateTask: () => import("@tanstack/react-query").UseMutationResult<any, unknown, import("../../services/LeftMenu").TRemoveDashboardArgs, unknown>;
 export declare const useGetListMenu: (params: TGetListMenu) => import("@tanstack/react-query").UseQueryResult<TFeatureMenuResponse, any>;
 export declare const useGetListMenuPermission: (params: TGetListMenuPermission) => import("@tanstack/react-query").UseQueryResult<FeatureMenuPermission[], any>;
 export declare const useGetDestinationChannel: (params: TGetDestinationChannel) => import("@tanstack/react-query").UseQueryResult<TDestinationChannelResponse, any>;

package/es/queries/LeftMenu/index.js

@@ -1,14 +1,28 @@
 // Libraries
-import { useQuery } from '@tanstack/react-query';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 // Services
 import { leftMenuServices, } from '../../services/LeftMenu';
 // Constants
 import { QUERY_KEYS } from '../../constants/queries';
-const { getDashboard, getListMenu, getListMenuPermission, getDestinationChannel } = leftMenuServices;
+import { API_RESPONSE_CODE } from '../../constants';
+const { getDashboard, removeDashboard, getListMenu, getListMenuPermission, getDestinationChannel } = leftMenuServices;
 export const useGetDashboard = (params) => {
     const { options, args } = params;
     return useQuery(Object.assign({ queryKey: [QUERY_KEYS.GET_DASHBOARD, args.params, args.auth], queryFn: () => getDashboard(params.args), onSuccess() { } }, options));
 };
+export const useUpdateTask = () => {
+    const queryClient = useQueryClient();
+    return useMutation(removeDashboard, {
+        onSuccess: data => {
+            const { code } = data || {};
+            if (code === API_RESPONSE_CODE.SUCCESS) {
+                queryClient.invalidateQueries([QUERY_KEYS.GET_DASHBOARD], {
+                    exact: false,
+                });
+            }
+        },
+    });
+};
 export const useGetListMenu = (params) => {
     const { options, args } = params;
     return useQuery(Object.assign({ queryKey: [QUERY_KEYS.GET_LIST_MENU, args.params, args.auth], queryFn: () => getListMenu(params.args), onSuccess() { } }, options));

package/es/services/LeftMenu/index.d.ts

@@ -10,6 +10,16 @@ export type TGetDashboardArgs = {
     };
     auth: PayloadInfo;
 };
+export type TRemoveDashboardArgs = {
+    params: {
+        dashboardId: number;
+        objectType: string;
+        objectId: number;
+        isGrouped?: boolean;
+        languageCode?: string;
+    };
+    auth: PayloadInfo;
+};
 export type TGetListMenuArgs = {
     params: {
         type?: string;
@@ -34,6 +44,7 @@ export type TGetDestinationChannelArgs = {
 };
 export declare const leftMenuServices: {
     getDashboard: ({ params, auth }: TGetDashboardArgs) => Promise<TDashboardResponse>;
+    removeDashboard: ({ params, auth }: TRemoveDashboardArgs) => Promise<any>;
     getListMenu: ({ params, auth }: TGetListMenuArgs) => Promise<TFeatureMenuResponse>;
     getListMenuPermission: ({ params, auth, }: TGetListMenuPermissionArgs) => Promise<FeatureMenuPermission[]>;
     getDestinationChannel: ({ params, auth, }: TGetDestinationChannelArgs) => Promise<TDataResponse<TDestinationChannel>>;

package/es/services/LeftMenu/index.js

@@ -47,7 +47,35 @@ export const leftMenuServices = {
             return Promise.reject(error);
         }
     }),
-    getListMenu: (_b) => __awaiter(void 0, [_b], void 0, function* ({ params, auth }) {
+    removeDashboard: (_b) => __awaiter(void 0, [_b], void 0, function* ({ params, auth }) {
+        try {
+            const { dashboardId, objectId, isGrouped = false, languageCode } = params;
+            const headers = {
+                'Content-Type': 'application/json; charset=utf-8',
+                token: auth.token,
+            };
+            const REMOVE_STATUS = 3;
+            const response = yield axios({
+                method: 'PUT',
+                url: `${auth.url}/${ENDPOINT.OVERVIEW}/update-status/${dashboardId}`,
+                headers,
+                params: {
+                    _user_id: auth.userId,
+                    _owner_id: (auth === null || auth === void 0 ? void 0 : auth.accountId) || (auth === null || auth === void 0 ? void 0 : auth.userId),
+                    portalId: auth.portalId,
+                    languageCode,
+                    isGrouped,
+                    objectType: objectId,
+                    status: REMOVE_STATUS,
+                },
+            });
+            return (response === null || response === void 0 ? void 0 : response.data) || {};
+        }
+        catch (error) {
+            return Promise.reject(error);
+        }
+    }),
+    getListMenu: (_c) => __awaiter(void 0, [_c], void 0, function* ({ params, auth }) {
         try {
             const { type } = params;
             const { url, accountId, portalId, token, userId } = auth;
@@ -68,7 +96,7 @@ export const leftMenuServices = {
             return Promise.reject(error);
         }
     }),
-    getListMenuPermission: (_c) => __awaiter(void 0, [_c], void 0, function* ({ params, auth, }) {
+    getListMenuPermission: (_d) => __awaiter(void 0, [_d], void 0, function* ({ params, auth, }) {
         try {
             const { type, languageCode, hasChild, from } = params;
             const { url, accountId, token, userId } = auth;
@@ -92,7 +120,7 @@ export const leftMenuServices = {
             return Promise.reject(error);
         }
     }),
-    getDestinationChannel: (_d) => __awaiter(void 0, [_d], void 0, function* ({ params, auth, }) {
+    getDestinationChannel: (_e) => __awaiter(void 0, [_e], void 0, function* ({ params, auth, }) {
         try {
             const { languageCode, objectType } = params;
             const { url, token, userId, portalId } = auth;

package/es/types/variables.d.ts

@@ -1,5 +1,22 @@
+import { ButtonProps } from 'antd';
 import { GET_LIST_TYPE } from '../constants';
+import { ReactNode } from 'react';
 export type TUnit = 'px' | '%' | any;
 export type TAlign = 'left' | 'center' | 'right';
 export type TGetListType = (typeof GET_LIST_TYPE)[keyof typeof GET_LIST_TYPE];
 export type TBoolean = 1 | 0;
+/**
+ * @typedef {Object} TActionButton
+ * @property {ButtonProps} [buttonProps] - Optional properties for the button.
+ * @property {string} [key] - Optional unique key for the button.
+ * @property {string} [label] - Optional label for the button.
+ * @property {string} [icon] - Optional icon for the button.
+ * @property {function(ReactNode): ReactNode} [customRender] - Optional custom render function for the button's node.
+ */
+export type TActionButton = {
+    buttonProps?: ButtonProps;
+    key?: string;
+    label?: string;
+    icon?: string;
+    customRender?: (node: ReactNode) => ReactNode;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "1.3.5-beta.323",
+  "version": "1.3.5-beta.325",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",
@@ -60,7 +60,7 @@
     "not op_mini all"
   ],
   "dependencies": {
-    "@antscorp/icons": "^0.27.24",
+    "@antscorp/icons": "^0.27.26",
     "@antscorp/image-editor": "1.0.2",
     "@antscorp/processing-notification": "^1.0.3",
     "@dnd-kit/core": "^6.1.0",