@pnkx-lib/ui 1.9.328 → 1.9.329

package/es/ui/index.js

@@ -1,14 +1,18 @@
-export { Button } from './Button.js';
+import { Button } from './Button.js';
 export { CascaderField } from './Cascader.js';
 export { ErrorMessage } from './ErrorMessage.js';
-export { Typography } from './Typography.js';
-export { A as ActionRowTable, B as BulkActions, T as Table } from '../chunks/index-kvqVmred.js';
+import { Typography } from './Typography.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useCallback, useEffect, useRef } from 'react';
+import { Select, Input, Pagination, Table as Table$1, Tooltip as Tooltip$1 } from 'antd';
+import { TypeStatusTable, TypeActionRowTable, TypeBulkActions } from '../constants/index.js';
+export { PAGE_NUMBER, PAGE_SIZE, SORT, START_PAGE, START_PAGE_SIZE } from '../constants/index.js';
 export { Modal } from './Modal.js';
-export { Tooltip } from './Tooltip.js';
+import { Tooltip } from './Tooltip.js';
 export { Tabs } from './Tabs.js';
 export { Label } from './Label.js';
 export { Skeleton } from './Skeleton.js';
-export { Popover } from './Popover.js';
+import { Popover } from './Popover.js';
 export { SearchFiltersForm } from './SearchFilterForm.js';
 export { Container } from './Container.js';
 export { Badge, typeColorMap } from './Badge.js';
@@ -47,9 +51,13 @@ export { Collapse } from './Collapse.js';
 export { ColorPicker } from './ColorPicker.js';
 export { Empty } from './Empty.js';
 export { Image } from './Image.js';
-export { ConfirmModal } from './ConfirmModal.js';
+import { ConfirmModal } from './ConfirmModal.js';
 export { ErrorBoundary } from './ErrorBoundary.js';
-export { CATEGORY_LIST_ENUM, CategoryStatus, badgeStatusCategoryConfig } from './CategoryStatus.js';
+import { CATEGORY_LIST_ENUM } from './CategoryStatus.js';
+export { CategoryStatus, badgeStatusCategoryConfig } from './CategoryStatus.js';
+import { useToggle } from '@pnkx-lib/core';
+import { isEmpty } from 'lodash';
+import { t as twMerge } from '../chunks/bundle-mjs-BBFHkixS.js';
 export { BreadcrumbHeading } from './BreadcrumbHeading.js';
 export { Card } from './Card.js';
 export { ConfigProvider } from './ConfigProvider.js';
@@ -59,6 +67,888 @@ export { UploadMultiple } from './UploadMultiple.js';
 export { ImportFile } from './ImportFile.js';
 export { ExportFile } from './ExportFile.js';
 export { UploadComponent } from './UploadComponent.js';
-export { useMessage } from './Message.js';
+export { useAppMessage } from './Message.js';
 export { a as MAX_TAG_COUNT, M as MAX_TAG_TEXT_LENGTH, T as TINY_API } from '../chunks/common-BygVXrbX.js';
-export { PAGE_NUMBER, PAGE_SIZE, SORT, START_PAGE, START_PAGE_SIZE, TypeActionRowTable, TypeBulkActions, TypeStatusTable } from '../constants/index.js';
+
+const iconTableNoData = "data:image/png;base64,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";
+
+const { Option } = Select;
+const CustomPagination = ({
+  current = 1,
+  pageSize = 10,
+  total = 0,
+  pageSizeOptions = ["10", "50", "100", "150", "200"],
+  onChange,
+  onShowSizeChange,
+  size,
+  ...rest
+}) => {
+  const [jumpValue, setJumpValue] = useState("");
+  const showTotal = (total2, range) => `${range[0]}-${range[1]} trên tổng ${total2}`;
+  const totalPages = Math.ceil(total / pageSize);
+  const handleJump = () => {
+    const pageNumber = parseInt(jumpValue);
+    if (pageNumber && pageNumber >= 1 && pageNumber <= totalPages && pageNumber !== current) {
+      onChange?.(pageNumber, pageSize);
+    }
+    setJumpValue("");
+  };
+  const handleJumpKeyPress = (e) => {
+    if (e.key === "Enter") {
+      handleJump();
+    }
+  };
+  const handleJumpInputChange = (e) => {
+    const value = e.target.value;
+    if (value === "" || /^\d+$/.test(value) && parseInt(value) <= totalPages) {
+      setJumpValue(value);
+    }
+  };
+  const handleKeyDown = (e) => {
+    const allowedKeys = [
+      "Backspace",
+      "Delete",
+      "Tab",
+      "Escape",
+      "Enter",
+      "ArrowLeft",
+      "ArrowRight",
+      "ArrowUp",
+      "ArrowDown"
+    ];
+    if (!allowedKeys.includes(e.key) && !/^[0-9]$/.test(e.key)) {
+      e.preventDefault();
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between py-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2  pnkx-default-select-container !w-fit !h-fit", children: /* @__PURE__ */ jsx(
+        Select,
+        {
+          value: pageSize.toString(),
+          onChange: (value) => {
+            const newSize = parseInt(value);
+            onShowSizeChange?.(current, newSize);
+          },
+          size: "small",
+          className: "min-w-16",
+          popupMatchSelectWidth: true,
+          getPopupContainer: (trigger) => trigger.parentElement,
+          children: pageSizeOptions.map((option) => /* @__PURE__ */ jsx(Option, { value: option, children: option }, option))
+        }
+      ) }),
+      showTotal && /* @__PURE__ */ jsx("div", { className: "text-sm text-gray-600", children: showTotal(total, [
+        (current - 1) * pageSize + 1,
+        Math.min(current * pageSize, total)
+      ]) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx(Typography.Text, { className: "text-sm text-gray-600 whitespace-nowrap", children: "Xem trang" }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            value: jumpValue,
+            onChange: handleJumpInputChange,
+            onKeyUp: handleJumpKeyPress,
+            onKeyDown: handleKeyDown,
+            onBlur: handleJump,
+            placeholder: current.toString(),
+            size: "small",
+            className: "text-center w-10! !border-[#bde3ff]",
+            type: "text",
+            min: 1,
+            max: totalPages
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(
+        Pagination,
+        {
+          current,
+          pageSize,
+          total,
+          onChange,
+          size,
+          showQuickJumper: false,
+          showSizeChanger: false,
+          ...rest
+        }
+      )
+    ] })
+  ] });
+};
+
+const useTableHeightWrapper = (options = {}) => {
+  const {
+    tableContainerId = "table_content",
+    extraOffset = 24,
+    // Layout padding bottom mặc định
+    minHeight = 200
+  } = options;
+  const [tableHeight, setTableHeight] = useState(minHeight);
+  const calculateTableHeight = useCallback(() => {
+    try {
+      const viewportHeight = window.innerHeight;
+      const layoutWrapper = document.getElementById("layout-wrapper-table");
+      if (!layoutWrapper) {
+        console.error("Layout wrapper table container not found");
+        setTableHeight(minHeight);
+        return;
+      }
+      const wrapperRect = layoutWrapper.getBoundingClientRect();
+      const availableHeight = viewportHeight - wrapperRect.top;
+      const tableContainer = document.getElementById(tableContainerId);
+      if (!tableContainer) {
+        console.error(`Table container "${tableContainerId}" not found`);
+        setTableHeight(minHeight);
+        return;
+      }
+      const directChildren = Array.from(layoutWrapper.children);
+      let otherElementsHeight = 0;
+      directChildren.forEach((child) => {
+        const rect = child.getBoundingClientRect();
+        const styles = window.getComputedStyle(child);
+        const marginTop = parseInt(styles.marginTop, 10) || 0;
+        const marginBottom = parseInt(styles.marginBottom, 10) || 0;
+        const totalHeight = rect.height + marginTop + marginBottom;
+        const isTableContent = child.id === tableContainerId;
+        const isBulkActionTable = child.id === "bulkaction_table";
+        if (!isTableContent && !isBulkActionTable) {
+          otherElementsHeight += totalHeight;
+        }
+      });
+      const tableStyles = window.getComputedStyle(tableContainer);
+      const tablePaddingTop = parseInt(tableStyles.paddingTop, 10) || 0;
+      const tablePaddingBottom = parseInt(tableStyles.paddingBottom, 10) || 0;
+      const tableHeader = tableContainer.querySelector(".ant-table-header");
+      const headerHeight = tableHeader ? tableHeader.getBoundingClientRect().height : 0;
+      let paginationHeight = 0;
+      const paginationSelectors = [
+        ".ant-pagination",
+        ".ant-table-pagination",
+        ".ant-pagination-mini"
+      ];
+      for (const selector of paginationSelectors) {
+        const pagination = tableContainer.querySelector(selector);
+        if (pagination) {
+          const paginationRect = pagination.getBoundingClientRect();
+          const paginationStyles = window.getComputedStyle(pagination);
+          const paginationMarginTop = parseInt(paginationStyles.marginTop, 10) || 0;
+          const paginationMarginBottom = parseInt(paginationStyles.marginBottom, 10) || 0;
+          paginationHeight = paginationRect.height + paginationMarginTop + paginationMarginBottom;
+          break;
+        }
+      }
+      if (paginationHeight === 0) {
+        paginationHeight = 44;
+      }
+      const bulkActionHeight = 0;
+      const tableBodyHeight = availableHeight - otherElementsHeight - tablePaddingTop - tablePaddingBottom - headerHeight - paginationHeight - bulkActionHeight - extraOffset;
+      const finalHeight = Math.max(tableBodyHeight, minHeight);
+      setTableHeight(finalHeight);
+    } catch (error) {
+      console.error("Error calculating table height:", error);
+      setTableHeight(minHeight);
+    }
+  }, [tableContainerId, extraOffset, minHeight]);
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      calculateTableHeight();
+    }, 300);
+    const handleResize = () => {
+      calculateTableHeight();
+    };
+    window.addEventListener("resize", handleResize);
+    const observer = new MutationObserver((mutations) => {
+      let shouldRecalculate = false;
+      mutations.forEach((mutation) => {
+        if (mutation.type === "childList") {
+          shouldRecalculate = true;
+        }
+      });
+      if (shouldRecalculate) {
+        setTimeout(calculateTableHeight, 100);
+      }
+    });
+    const layoutWrapper = document.getElementById("layout-wrapper-table");
+    const tableContainer = document.getElementById(tableContainerId);
+    if (layoutWrapper) {
+      observer.observe(layoutWrapper, {
+        childList: true,
+        subtree: true,
+        attributes: true,
+        attributeFilter: ["style", "class"]
+      });
+    }
+    if (tableContainer && tableContainer !== layoutWrapper) {
+      observer.observe(tableContainer, {
+        childList: true,
+        subtree: true,
+        attributes: true,
+        attributeFilter: ["style", "class"]
+      });
+    }
+    return () => {
+      clearTimeout(timer);
+      window.removeEventListener("resize", handleResize);
+      observer.disconnect();
+    };
+  }, [calculateTableHeight, tableContainerId]);
+  return {
+    tableHeight,
+    recalculate: calculateTableHeight
+  };
+};
+
+const Table = ({
+  dataSource = [],
+  columns,
+  loading = false,
+  totalItems = 100,
+  filters,
+  onChangePage,
+  onChangePageSize,
+  onSort,
+  rowsSelected,
+  onSelect,
+  onRowClick,
+  rowKey = "id",
+  showIndexColumn = true,
+  size = "small",
+  defaultEllipsis = true,
+  onDoubleClickRow,
+  handleSubmit,
+  ...rest
+}) => {
+  const status = filters?.status;
+  //! State
+  const tableContainerRef = useRef(null);
+  const rowSelection = {
+    selectedRowKeys: rowsSelected,
+    onChange: onSelect,
+    getCheckboxProps: () => ({
+      disabled: status === TypeStatusTable.ALL
+    })
+  };
+  const ellipsisColumns = columns.map((column) => ({
+    ...column,
+    ellipsis: column?.ellipsis !== void 0 ? column?.ellipsis : defaultEllipsis
+  }));
+  const startIndex = (filters.page - 1) * filters.size;
+  const columnsWithIndex = showIndexColumn ? [
+    {
+      title: "STT",
+      dataIndex: "index",
+      key: "index",
+      width: 70,
+      align: "center",
+      render: (_, __, index) => startIndex + index + 1
+    },
+    ...ellipsisColumns
+  ] : ellipsisColumns;
+  //! Function
+  const renderSizePagination = () => {
+    switch (size) {
+      case "small":
+        return "small";
+      // Dạng nhỏ gọn
+      default:
+        return "default";
+    }
+  };
+  const handleTableChange = (_pagination, _filters, sorter) => {
+    if (sorter && onSort) {
+      onSort(sorter);
+    }
+  };
+  const handleOnClickRow = (record, onRowClick2) => (e) => {
+    const target = e.target;
+    if (target.closest("input") || // ⛔ Checkbox
+    target.closest("button") || // ⛔ Button trong row
+    target.closest("svg") || // ⛔ Icon
+    target.closest(".ant-checkbox") || // ⛔ AntD checkbox
+    target.closest("a")) {
+      return;
+    }
+    onRowClick2?.(record);
+  };
+  const handleDoubleClickRow = (record, onDoubleClickRow2) => (e) => {
+    const target = e.target;
+    if (target.closest("input") || // ⛔ Checkbox
+    target.closest("button") || // ⛔ Button trong row
+    target.closest("svg") || // ⛔ Icon
+    target.closest(".ant-checkbox") || // ⛔ AntD checkbox
+    target.closest("a")) {
+      return;
+    }
+    onDoubleClickRow2?.(record);
+  };
+  const { tableHeight } = useTableHeightWrapper({
+    tableContainerId: "table_content",
+    // ID của table container
+    minHeight: 200
+    // chiều cao tối thiểu
+  });
+  useEffect(() => {
+    const scrollToTop = () => {
+      if (tableContainerRef.current) {
+        const tableBody = tableContainerRef.current.querySelector(".ant-table-body");
+        if (tableBody) {
+          tableBody.scrollTop = 0;
+        }
+      }
+    };
+    const timeoutId = setTimeout(scrollToTop, 0);
+    return () => clearTimeout(timeoutId);
+  }, [filters.page]);
+  const tableContent = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: tableContainerRef,
+      id: "table_content",
+      className: "bg-[#FFFFFF] p-2 rounded-bl-lg rounded-br-lg",
+      children: [
+        /* @__PURE__ */ jsx(
+          Table$1,
+          {
+            rowKey,
+            dataSource,
+            columns: columnsWithIndex,
+            pagination: false,
+            loading,
+            rowSelection: rowsSelected ? rowSelection : void 0,
+            onChange: handleTableChange,
+            onRow: (record) => ({
+              onClick: handleOnClickRow(record, onRowClick),
+              onDoubleClick: handleDoubleClickRow(record, onDoubleClickRow)
+            }),
+            locale: {
+              emptyText: loading ? null : /* @__PURE__ */ jsx(EmptyTable, {})
+            },
+            scroll: { y: tableHeight },
+            size,
+            ...rest,
+            className: "table-scroll-bar"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          CustomPagination,
+          {
+            current: filters?.page,
+            pageSize: filters?.size,
+            total: totalItems,
+            onChange: (page) => onChangePage(page),
+            onShowSizeChange: (_, size2) => onChangePageSize(size2),
+            size: renderSizePagination()
+          }
+        )
+      ]
+    }
+  );
+  const renderTable = () => {
+    if (handleSubmit) {
+      return /* @__PURE__ */ jsx("form", { onSubmit: handleSubmit, children: tableContent });
+    }
+    return tableContent;
+  };
+  //! Render
+  return renderTable();
+};
+const EmptyTable = () => {
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center text-center", children: [
+    /* @__PURE__ */ jsx("img", { src: iconTableNoData, alt: "no data" }),
+    /* @__PURE__ */ jsx("span", { className: "text-lg font-bold text-black", children: "Không có dữ liệu nào phù hợp" }),
+    /* @__PURE__ */ jsx("p", { className: "text-gray-500", children: "Kiểm tra lại bộ lọc hoặc thêm mới dữ liệu" })
+  ] });
+};
+
+const EditIcon = ({ stroke, fill = "#007BE5" }) => /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: 14, height: 15, fill: "none", children: /* @__PURE__ */ jsx(
+  "path",
+  {
+    fill,
+    stroke,
+    d: "m1.177 11.137.711.237-.711-.237ZM1.8 9.264l-.712-.238.712.238Zm.644-1.043.53.53-.53-.53ZM8.667 2l-.53-.53.53.53ZM12 5.333l.53.53-.53-.53Zm-6.222 6.222-.53-.53.53.53Zm-1.042.644.237.711-.237-.711Zm-1.873.624.237.712-.237-.712Zm2.574-.95-.452-.598.452.599Zm-.263.163-.333-.672.333.672Zm7.629-9.11-.672.333.672-.333Zm0 1.48-.672-.333.672.333Zm-3.21-3.21.333.673-.333-.672Zm1.48 0-.333.673.333-.672Zm-9.11 7.63.673.333-.672-.333Zm.163-.263-.599-.452.6.452Zm-1.26 4.066-.706.252.706-.252Zm.505.505-.252.706.252-.706ZM8.364 2.303a.75.75 0 0 0-1.061 1.06l1.06-1.06Zm2.272 4.394a.75.75 0 0 0 1.061-1.06l-1.06 1.06ZM7 12.917a.75.75 0 0 0 0 1.5v-1.5Zm5.833 1.5a.75.75 0 0 0 0-1.5v1.5Zm-11.656-3.28.711.237.624-1.873-.711-.237-.712-.238L.465 10.9l.712.238ZM2.445 8.22l.53.53 6.222-6.22L8.667 2l-.53-.53-6.222 6.22.53.531ZM12 5.333l-.53-.53-6.222 6.221.53.53.53.53 6.222-6.22-.53-.53ZM4.736 12.2l-.237-.712-1.873.625.237.711.237.712 1.873-.625-.237-.711Zm1.042-.644-.53-.53c-.18.18-.222.219-.263.25l.452.599.451.598c.144-.108.269-.235.42-.387l-.53-.53Zm-1.042.644.237.711c.204-.068.373-.122.535-.202l-.334-.672-.333-.672c-.047.023-.1.043-.342.123l.237.712Zm.7-.325-.451-.6a.92.92 0 0 1-.144.09l.333.672.334.672c.134-.067.261-.146.38-.236l-.451-.598ZM12 2l-.53.53c.497.497.608.622.661.73l.672-.334.672-.333c-.19-.383-.533-.712-.945-1.124L12 2Zm0 3.333.53.53c.412-.411.755-.74.945-1.124l-.672-.333-.672-.333c-.053.107-.164.233-.661.73l.53.53Zm.803-2.407-.672.333a.917.917 0 0 1 0 .814l.672.333.672.333a2.417 2.417 0 0 0 0-2.146l-.672.333ZM8.667 2l.53.53c.497-.497.622-.608.73-.661l-.334-.672L9.26.525c-.383.19-.712.533-1.124.944l.53.53ZM12 2l.53-.53c-.411-.412-.74-.755-1.124-.945l-.333.672-.333.672c.107.053.232.164.73.661L12 2Zm-2.407-.803.333.672a.917.917 0 0 1 .814 0l.333-.672.333-.672a2.417 2.417 0 0 0-2.146 0l.333.672ZM1.801 9.264l.711.237c.081-.242.1-.295.124-.342l-.672-.333-.672-.334c-.08.161-.135.33-.203.534l.712.238Zm.644-1.043-.53-.53c-.152.152-.279.276-.388.42l.6.452.598.452a2.99 2.99 0 0 1 .25-.263l-.53-.53Zm-.481.605.672.333c.025-.05.055-.1.089-.144l-.599-.452-.599-.452c-.09.12-.168.247-.235.381l.672.334Zm-.787 2.31L.465 10.9c-.13.393-.246.737-.312 1.016-.063.267-.118.617.007.966l.706-.252.706-.252c.028.078-.007.088.041-.119.046-.196.135-.463.275-.884l-.711-.237Zm1.686 1.687-.237-.711c-.421.14-.688.228-.884.274-.208.049-.197.014-.12.041l-.251.707-.252.706c.349.124.698.07.966.007.278-.066.622-.181 1.015-.312l-.237-.712ZM.866 12.63l-.706.252c.16.447.511.8.96.96l.251-.707.252-.707a.083.083 0 0 1-.05-.05l-.707.252Zm6.967-9.796-.53.53 3.333 3.334.53-.53.531-.53-3.333-3.334-.53.53ZM7 13.666v.75h5.833v-1.5H7v.75Z"
+  }
+) });
+
+const RestoreIcon = ({ stroke, fill }) => /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: 22, height: 22, fill: "none", children: /* @__PURE__ */ jsx(
+  "path",
+  {
+    stroke,
+    fill,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 1.5,
+    d: "M3.405 6.611a8.824 8.824 0 0 1 7.64-4.388c3.701 0 6.87 2.269 8.179 5.486m-13.14 0h-4.41V3.32m16.92 12.069a8.824 8.824 0 0 1-7.64 4.388 8.822 8.822 0 0 1-8.178-5.486m13.14 0h4.41v4.389"
+  }
+) });
+
+const SendApprovalIcon = ({ stroke, fill }) => /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: 22, height: 22, fill: "none", children: /* @__PURE__ */ jsx(
+  "path",
+  {
+    fill,
+    stroke,
+    strokeLinecap: "round",
+    strokeWidth: 1.714,
+    d: "M6.44 11h4.45m-4.584-.521L2.912 4.37c-.513-.922.474-1.953 1.419-1.481l14.304 7.15a1.073 1.073 0 0 1 0 1.92L4.33 19.11c-.945.472-1.932-.559-1.42-1.482l3.395-6.107c.18-.324.18-.718 0-1.042Z"
+  }
+) });
+
+const CancelSendApprovalIcon = ({ fill, stroke }) => /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: 22, height: 22, fill: "none", children: /* @__PURE__ */ jsx(
+  "path",
+  {
+    fill,
+    stroke,
+    strokeLinecap: "round",
+    strokeWidth: 1.5,
+    d: "M12.829 7.343 9.17 14.657M20.143 11a9.143 9.143 0 1 1-18.286 0 9.143 9.143 0 0 1 18.286 0Z"
+  }
+) });
+
+const ApprovalIcon = ({ stroke, fill }) => /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: 22, height: 22, fill: "none", children: /* @__PURE__ */ jsx(
+  "path",
+  {
+    fill,
+    stroke,
+    strokeLinecap: "round",
+    strokeWidth: 1.714,
+    d: "m15.33 6.429-8.667 8.89a.827.827 0 0 1-1.19 0L1.856 11.61m9.618 3.707 8.668-8.89"
+  }
+) });
+
+const CancelApprovalIcon = ({ stroke, fill }) => /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: 22, height: 22, fill: "none", children: /* @__PURE__ */ jsx(
+  "path",
+  {
+    fill,
+    stroke,
+    strokeLinecap: "round",
+    strokeWidth: 1.5,
+    d: "M13.743 8.257 11 11m0 0-2.743 2.743M11 11l2.743 2.743M11 11 8.257 8.257M20.143 11a9.143 9.143 0 1 1-18.286 0 9.143 9.143 0 0 1 18.286 0Z"
+  }
+) });
+
+const RefuseApprovalIcon = ({ stroke, fill }) => /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: 22, height: 22, fill: "none", children: [
+  /* @__PURE__ */ jsx("mask", { id: "a", fill: "#fff", children: /* @__PURE__ */ jsx("path", { d: "M11 2.086A8.914 8.914 0 1 0 19.914 11 8.924 8.924 0 0 0 11 2.086ZM18.543 11a7.505 7.505 0 0 1-1.75 4.824L6.176 5.206A7.543 7.543 0 0 1 18.543 11ZM3.457 11a7.505 7.505 0 0 1 1.75-4.824l10.617 10.618A7.544 7.544 0 0 1 3.457 11Z" }) }),
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      fill: "#fff",
+      d: "M11 2.086A8.914 8.914 0 1 0 19.914 11 8.924 8.924 0 0 0 11 2.086ZM18.543 11a7.505 7.505 0 0 1-1.75 4.824L6.176 5.206A7.543 7.543 0 0 1 18.543 11ZM3.457 11a7.505 7.505 0 0 1 1.75-4.824l10.617 10.618A7.544 7.544 0 0 1 3.457 11Z"
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      fill,
+      stroke,
+      d: "m11 2.086.002-1.714H11v1.714ZM19.914 11h1.715v-.002L19.914 11Zm-1.371 0-1.714.001h1.714Zm-1.75 4.824-1.212 1.212 1.325 1.325 1.202-1.437-1.315-1.1ZM6.176 5.206 5.08 3.888 3.635 5.089l1.329 1.329 1.212-1.212ZM3.457 11h1.714v-.002L3.457 11Zm1.75-4.824 1.212-1.212-1.325-1.325-1.202 1.437 1.315 1.1Zm10.617 10.618 1.096 1.318 1.445-1.201-1.329-1.329-1.212 1.212ZM11 2.086V.372c-2.102 0-4.157.623-5.905 1.79l.952 1.426L7 5.014A7.2 7.2 0 0 1 11 3.8V2.086ZM6.047 3.588l-.952-1.425a10.629 10.629 0 0 0-3.915 4.77l1.584.656 1.584.656A7.2 7.2 0 0 1 7 5.014l-.953-1.426Zm-3.283 4L1.18 6.934a10.629 10.629 0 0 0-.604 6.14l1.681-.334 1.681-.334a7.2 7.2 0 0 1 .41-4.16l-1.584-.656Zm-.507 5.151-1.681.335a10.628 10.628 0 0 0 2.908 5.442l1.213-1.212 1.212-1.213a7.2 7.2 0 0 1-1.97-3.686l-1.682.334Zm2.44 4.564-1.213 1.213a10.628 10.628 0 0 0 5.442 2.908l.335-1.68.334-1.682a7.201 7.201 0 0 1-3.686-1.97l-1.212 1.212Zm4.564 2.44-.335 1.681c2.062.41 4.2.2 6.141-.604l-.656-1.584-.656-1.584a7.2 7.2 0 0 1-4.16.41l-.334 1.681Zm5.15-.507.656 1.584a10.628 10.628 0 0 0 4.77-3.915l-1.425-.952L16.987 15a7.2 7.2 0 0 1-3.232 2.652l.656 1.584Zm4-3.283 1.426.952A10.628 10.628 0 0 0 21.63 11H18.2a7.2 7.2 0 0 1-1.213 4l1.425.953ZM19.915 11l1.715-.002a10.638 10.638 0 0 0-3.116-7.51L17.3 4.7l-1.213 1.212a7.21 7.21 0 0 1 2.112 5.09L19.914 11Zm-2.613-6.3 1.212-1.213A10.638 10.638 0 0 0 11.002.372L11 2.086 10.998 3.8a7.21 7.21 0 0 1 5.09 2.112L17.301 4.7Zm1.242 6.3-1.714.002a5.79 5.79 0 0 1-1.35 3.722l1.314 1.1 1.315 1.1a9.22 9.22 0 0 0 2.15-5.926L18.542 11Zm-1.75 4.824 1.213-1.212L7.388 3.994 6.176 5.206 4.964 6.418 15.58 17.036l1.212-1.212ZM6.176 5.206l1.096 1.318a5.828 5.828 0 0 1 2.985-1.3l-.219-1.7-.219-1.701a9.257 9.257 0 0 0-4.74 2.065l1.097 1.318Zm3.862-1.683.219 1.7a5.828 5.828 0 0 1 3.216.503l.727-1.552.728-1.552a9.257 9.257 0 0 0-5.109-.8l.22 1.701Zm4.162.651-.727 1.552a5.829 5.829 0 0 1 2.445 2.15l1.446-.92 1.447-.92a9.257 9.257 0 0 0-3.883-3.414L14.2 4.174Zm3.164 2.782-1.446.92c.594.934.91 2.018.91 3.125h1.715l1.714-.002a9.257 9.257 0 0 0-1.447-4.964l-1.446.92ZM3.457 11l1.714-.002a5.79 5.79 0 0 1 1.35-3.722l-1.314-1.1-1.315-1.1a9.22 9.22 0 0 0-2.15 5.926L3.458 11Zm1.75-4.824L3.994 7.388l10.618 10.618 1.212-1.212 1.212-1.212L6.42 4.964 5.207 6.176Zm10.617 10.618-1.096-1.318a5.828 5.828 0 0 1-2.985 1.3l.219 1.701.219 1.7a9.257 9.257 0 0 0 4.74-2.065l-1.097-1.318Zm-3.862 1.683-.219-1.7a5.829 5.829 0 0 1-3.216-.503L7.8 17.826l-.728 1.552a9.257 9.257 0 0 0 5.109.8l-.22-1.7Zm-4.162-.65.727-1.553a5.83 5.83 0 0 1-2.445-2.15l-1.446.92-1.447.92a9.257 9.257 0 0 0 3.883 3.414l.728-1.552Zm-3.164-2.782 1.446-.92a5.829 5.829 0 0 1-.91-3.126L3.456 11l-1.714.001a9.257 9.257 0 0 0 1.446 4.964l1.447-.92Z",
+      mask: "url(#a)"
+    }
+  )
+] });
+
+const ActivateIcon = ({ stroke, fill }) => /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: 22, height: 22, fill: "none", children: /* @__PURE__ */ jsx(
+  "path",
+  {
+    fill,
+    stroke,
+    strokeLinecap: "round",
+    strokeWidth: 1.714,
+    d: "M14.657 8.257V6.43a3.657 3.657 0 0 0-6.076-2.743M7.526 19.229h6.948c1.024 0 1.536 0 1.927-.2.345-.175.624-.455.8-.799.199-.391.199-.903.199-1.927v-5.12c0-1.024 0-1.536-.2-1.928a1.83 1.83 0 0 0-.799-.799c-.39-.199-.903-.199-1.927-.199H7.526c-1.025 0-1.537 0-1.928.2a1.829 1.829 0 0 0-.799.798c-.2.392-.2.904-.2 1.928v5.12c0 1.024 0 1.536.2 1.927.175.344.455.624.8.8.39.198.902.198 1.927.198Z"
+  }
+) });
+
+const DeleteIcon = ({ stroke, fill = "#DD4338" }) => /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: 23, height: 24, fill: "none", children: /* @__PURE__ */ jsx(
+  "path",
+  {
+    fill,
+    stroke,
+    d: "m18.219 17.634.75.006-.75-.006ZM4.319 5.65a.75.75 0 1 0 0 1.5v-1.5Zm14.934 1.5a.75.75 0 0 0 0-1.5v1.5Zm-8.584 2.984a.75.75 0 1 0-1.5 0h1.5ZM9.17 17.6a.75.75 0 0 0 1.5 0h-1.5Zm5.234-7.466a.75.75 0 1 0-1.5 0h1.5Zm-1.5 7.466a.75.75 0 0 0 1.5 0h-1.5Zm5.416-11.2-.75-.006-.1 11.233.75.007.75.006.1-11.233-.75-.007Zm-3.833 14.934v-.75h-5.5v1.5h5.5v-.75ZM5.253 6.4h-.75v11.2h1.5V6.4h-.75Zm-.934 0v.75h.934v-1.5h-.934v.75Zm.934 0v.75h2.8v-1.5h-2.8v.75Zm2.8 0v.75h7.466v-1.5H8.053v.75Zm7.466 0v.75h2.8v-1.5h-2.8v.75Zm2.8 0v.75h.934v-1.5h-.934v.75ZM8.053 5.985h.75c0-1.338 1.25-2.568 2.983-2.568v-1.5c-2.39 0-4.483 1.74-4.483 4.068h.75Zm3.733-3.318v.75c1.733 0 2.983 1.23 2.983 2.568h1.5c0-2.327-2.092-4.068-4.483-4.068v.75ZM8.053 5.985h-.75V6.4h1.5v-.415h-.75Zm7.466 0h-.75V6.4h1.5v-.415h-.75ZM8.986 21.334v-.75A2.983 2.983 0 0 1 6.003 17.6h-1.5a4.483 4.483 0 0 0 4.483 4.484v-.75Zm9.233-3.7-.75-.007a2.983 2.983 0 0 1-2.983 2.957v1.5a4.483 4.483 0 0 0 4.483-4.444l-.75-.006Zm-8.3-7.5h-.75V17.6h1.5v-7.466h-.75Zm3.734 0h-.75V17.6h1.5v-7.466h-.75Z"
+  }
+) });
+
+const InActiveIcon = ({ stroke, fill }) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 22,
+    height: 22,
+    fill: "none",
+    children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        fill,
+        stroke,
+        strokeLinecap: "round",
+        strokeWidth: 1.714,
+        d: "M7.343 8.257V6.43a3.657 3.657 0 0 1 7.314 0v1.828M7.526 19.23h6.948c1.024 0 1.536 0 1.927-.2.345-.175.624-.455.8-.799.199-.391.199-.903.199-1.927v-5.12c0-1.024 0-1.536-.2-1.928a1.83 1.83 0 0 0-.799-.799c-.39-.199-.903-.199-1.927-.199H7.526c-1.025 0-1.537 0-1.928.2a1.829 1.829 0 0 0-.799.798c-.2.392-.2.904-.2 1.928v5.12c0 1.024 0 1.536.2 1.927.175.344.455.624.8.8.39.198.902.198 1.927.198Z"
+      }
+    )
+  }
+);
+
+const MoreIcon = ({ stroke, fill }) => /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: 18, height: 18, fill: "none", children: /* @__PURE__ */ jsx(
+  "path",
+  {
+    fill,
+    stroke,
+    fillRule: "evenodd",
+    d: "M4 8h2v2H4V8Zm4 0h2v2H8V8Zm4 0h2v2h-2V8Z",
+    clipRule: "evenodd"
+  }
+) });
+
+const ActionRowTable = ({
+  type,
+  contentTooltip,
+  handleClick
+}) => {
+  //! State
+  const {
+    shouldRender: shouldRenderDelete,
+    open: openDelete,
+    toggle: toggleDelete
+  } = useToggle();
+  //! Function
+  const handleDelete = () => {
+    handleClick?.();
+    toggleDelete();
+  };
+  const renderAction = () => {
+    switch (type) {
+      case TypeActionRowTable.EDIT:
+        return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Tooltip, { title: contentTooltip, children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            onClick: handleClick,
+            type: "text",
+            className: "cursor-pointer",
+            shape: "circle",
+            icon: /* @__PURE__ */ jsx(EditIcon, { fill: "#007BE5" })
+          }
+        ) }) });
+      case TypeActionRowTable.DELETE:
+        return /* @__PURE__ */ jsx(Tooltip, { title: contentTooltip, children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            onClick: toggleDelete,
+            type: "text",
+            className: "cursor-pointer",
+            shape: "circle",
+            icon: /* @__PURE__ */ jsx(DeleteIcon, { fill: "#DD4338" })
+          }
+        ) });
+    }
+  };
+  //! Render
+  return /* @__PURE__ */ jsxs("div", { children: [
+    shouldRenderDelete && /* @__PURE__ */ jsx(
+      ConfirmModal,
+      {
+        title: "Xác nhận xóa",
+        content: "Bạn có chắc chắn muốn xóa không? Hành động này không thể hoàn tác.",
+        typeIcon: "error",
+        open: openDelete,
+        handleCancel: toggleDelete,
+        handleSubmit: handleDelete
+      }
+    ),
+    renderAction()
+  ] });
+};
+
+const BulkAction = ({
+  quantity = 0,
+  listIcon,
+  status,
+  setNotifyContent,
+  toggle
+}) => {
+  //! State
+  //! Function
+  const IsShow = (arrStatus) => {
+    return arrStatus.includes(status);
+  };
+  //! Render
+  return /* @__PURE__ */ jsx("div", { className: "w-full flex justify-center items-center", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 px-[10px] py-3 bg-[#2561ED] rounded-lg w-fit", children: [
+    /* @__PURE__ */ jsxs("div", { className: "text-white px-3", children: [
+      "Đã chọn: ",
+      quantity
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "h-5 border-l border-white mx-1" }),
+    /* @__PURE__ */ jsx("div", { className: "flex items-center space-x-3", children: !isEmpty(listIcon) && listIcon?.map(
+      (item, index) => IsShow(item?.arrShow) && /* @__PURE__ */ jsx(Tooltip, { title: item?.name, children: /* @__PURE__ */ jsx(
+        "button",
+        {
+          className: "p-1 rounded-sm  transition duration-200 cursor-pointer hover:bg-[#1B4ACB] hover:rounded-sm",
+          onClick: () => {
+            toggle();
+            setNotifyContent({
+              title: item?.title || "",
+              content: item?.content || "",
+              typeIcon: item?.typeIcon,
+              handleCancel: () => {
+                toggle();
+              },
+              handleSubmit: () => {
+                if (item?.action) {
+                  item?.action();
+                }
+                toggle();
+              }
+            });
+          },
+          children: item.icon
+        },
+        index
+      ) })
+    ) })
+  ] }) });
+};
+
+const DropListActions = ({
+  listIcon,
+  status,
+  setNotifyContent,
+  toggle
+}) => {
+  //! State
+  //! Function
+  const IsShow = (arrStatus) => {
+    return arrStatus.includes(status);
+  };
+  const renderContentPopover = () => {
+    return /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: !isEmpty(listIcon) && listIcon?.map(
+      (item, index) => item?.showTitle && IsShow(item?.arrShow) && /* @__PURE__ */ jsxs(
+        "button",
+        {
+          className: twMerge(
+            "flex gap-4 px-3 py-2 rounded-sm  transition duration-200   hover:rounded-sm",
+            IsShow(item?.arrShow) ? "hover:bg-[#F5F6F7] cursor-pointer" : "text-[#B2B7C2] cursor-not-allowed"
+          ),
+          disabled: IsShow(item?.arrShow) ? false : true,
+          onClick: () => {
+            toggle();
+            setNotifyContent({
+              title: item?.title || "",
+              content: item?.content || "",
+              typeIcon: item?.typeIcon,
+              handleCancel: () => {
+                toggle();
+              },
+              handleSubmit: () => {
+                if (item?.action) {
+                  item?.action();
+                }
+                toggle();
+              }
+            });
+          },
+          children: [
+            item.iconDropList,
+            /* @__PURE__ */ jsx("span", { children: item.name || "" })
+          ]
+        },
+        index
+      )
+    ) });
+  };
+  //! Render
+  return /* @__PURE__ */ jsx("div", { className: "w-full flex justify-center items-center", children: /* @__PURE__ */ jsx(Tooltip$1, { title: "Thao tác khác", children: /* @__PURE__ */ jsx(
+    Popover,
+    {
+      placement: "bottom",
+      content: renderContentPopover(),
+      trigger: "click",
+      children: /* @__PURE__ */ jsx("div", { className: "p-1 border-[#BDE3FF] rounded-full border cursor-pointer", children: /* @__PURE__ */ jsx(MoreIcon, { fill: "#007BE5" }) })
+    }
+  ) }) });
+};
+
+const BulkActions = ({
+  quantity = 0,
+  handleDelete,
+  handleSubmitForApproval,
+  handleCancelSubmission,
+  handleApprove,
+  handleCancelApproval,
+  handleReject,
+  handleDeactivate,
+  handleActivate,
+  handleRestore,
+  status,
+  typeBulkaction,
+  isApproved = false
+  // Chỉ sử dụng khi là danh sách icon
+}) => {
+  //! State
+  const listIcon = [
+    {
+      icon: /* @__PURE__ */ jsx(RestoreIcon, { stroke: "white" }),
+      iconDropList: /* @__PURE__ */ jsx(RestoreIcon, { stroke: "#0F1D40" }),
+      iconDisable: /* @__PURE__ */ jsx(RestoreIcon, { stroke: "#B2B7C2" }),
+      action: handleRestore,
+      name: "Khôi phục",
+      typeIcon: "info",
+      title: "Xác nhận khôi phục",
+      content: "Bạn có chắc chắn muốn khôi phục không?",
+      arrShow: [CATEGORY_LIST_ENUM?.DELETE, CATEGORY_LIST_ENUM?.REJECT],
+      showTitle: true
+    },
+    {
+      icon: /* @__PURE__ */ jsx(SendApprovalIcon, { stroke: "white" }),
+      iconDropList: /* @__PURE__ */ jsx(SendApprovalIcon, { stroke: "#0F1D40" }),
+      iconDisable: /* @__PURE__ */ jsx(SendApprovalIcon, { stroke: "#B2B7C2" }),
+      action: handleSubmitForApproval,
+      name: "Gửi duyệt",
+      typeIcon: "info",
+      title: "Xác nhận gửi duyệt",
+      content: "Bạn có chắc chắn muốn gửi duyệt không?",
+      arrShow: [CATEGORY_LIST_ENUM?.DRAFT],
+      showTitle: true
+    },
+    {
+      icon: /* @__PURE__ */ jsx(CancelSendApprovalIcon, { stroke: "white" }),
+      iconDropList: /* @__PURE__ */ jsx(CancelSendApprovalIcon, { stroke: "#0F1D40" }),
+      iconDisable: /* @__PURE__ */ jsx(CancelSendApprovalIcon, { stroke: "#B2B7C2" }),
+      action: handleCancelSubmission,
+      name: "Huỷ gửi duyệt",
+      typeIcon: "error",
+      title: "Xác nhận hủy gửi duyệt",
+      content: "Bạn có chắc chắn muốn hủy gửi duyệt không?",
+      arrShow: [CATEGORY_LIST_ENUM?.WATING_APPROVAL],
+      showTitle: true
+    },
+    {
+      icon: /* @__PURE__ */ jsx(RefuseApprovalIcon, { stroke: "white" }),
+      iconDropList: /* @__PURE__ */ jsx(RefuseApprovalIcon, { stroke: "#0F1D40" }),
+      iconDisable: /* @__PURE__ */ jsx(RefuseApprovalIcon, { stroke: "#B2B7C2" }),
+      action: handleReject,
+      name: "Từ chối duyệt",
+      typeIcon: "error",
+      title: "Xác nhận từ chối duyệt",
+      content: "Bạn có chắc chắn muốn từ chối duyệt không? Hành động này không thể hoàn tác.",
+      arrShow: [CATEGORY_LIST_ENUM?.WATING_APPROVAL],
+      showTitle: true
+    },
+    {
+      icon: /* @__PURE__ */ jsx(ApprovalIcon, { stroke: "white" }),
+      iconDropList: /* @__PURE__ */ jsx(ApprovalIcon, { stroke: "#0F1D40" }),
+      iconDisable: /* @__PURE__ */ jsx(ApprovalIcon, { stroke: "#B2B7C2" }),
+      action: handleApprove,
+      name: "Duyệt",
+      typeIcon: "info",
+      title: "Xác nhận duyệt",
+      content: "Bạn có chắc chắn muốn duyệt không?",
+      arrShow: [CATEGORY_LIST_ENUM?.WATING_APPROVAL],
+      showTitle: true
+    },
+    {
+      icon: /* @__PURE__ */ jsx(CancelApprovalIcon, { stroke: "white" }),
+      iconDropList: /* @__PURE__ */ jsx(CancelApprovalIcon, { stroke: "#0F1D40" }),
+      iconDisable: /* @__PURE__ */ jsx(CancelApprovalIcon, { stroke: "#B2B7C2" }),
+      action: handleCancelApproval,
+      typeIcon: "error",
+      name: "Hủy duyệt",
+      title: "Xác nhận hủy duyệt",
+      content: "Bạn có chắc chắn muốn hủy duyệt không?",
+      arrShow: isApproved ? [CATEGORY_LIST_ENUM?.ACTIVE] : [],
+      showTitle: true
+    },
+    {
+      icon: /* @__PURE__ */ jsx(DeleteIcon, { fill: "white" }),
+      iconDropList: /* @__PURE__ */ jsx(DeleteIcon, { fill: "#0F1D40" }),
+      iconDisable: /* @__PURE__ */ jsx(DeleteIcon, { fill: "#B2B7C2" }),
+      action: handleDelete,
+      typeIcon: "error",
+      name: "Xoá",
+      title: "Xác nhận xóa",
+      content: "Bạn có chắc chắn muốn xóa không? Hành động này không thể hoàn tác.",
+      arrShow: [
+        CATEGORY_LIST_ENUM?.DRAFT,
+        CATEGORY_LIST_ENUM?.ACTIVE,
+        CATEGORY_LIST_ENUM?.INACTIVE
+      ],
+      showTitle: false
+    },
+    {
+      icon: /* @__PURE__ */ jsx(ActivateIcon, { stroke: "white" }),
+      iconDropList: /* @__PURE__ */ jsx(ActivateIcon, { stroke: "#0F1D40" }),
+      iconDisable: /* @__PURE__ */ jsx(ActivateIcon, { stroke: "#B2B7C2" }),
+      action: handleActivate,
+      typeIcon: "info",
+      name: "Kích hoạt",
+      title: "Xác nhận kích hoạt",
+      content: "Bạn có chắc chắn muốn kích hoạt không?",
+      arrShow: [CATEGORY_LIST_ENUM?.INACTIVE],
+      showTitle: true
+    },
+    {
+      icon: /* @__PURE__ */ jsx(InActiveIcon, { stroke: "white" }),
+      iconDropList: /* @__PURE__ */ jsx(InActiveIcon, { stroke: "#0F1D40" }),
+      iconDisable: /* @__PURE__ */ jsx(InActiveIcon, { stroke: "#B2B7C2" }),
+      action: handleDeactivate,
+      name: "Vô hiệu hóa",
+      typeIcon: "error",
+      title: "Xác nhận vô hiệu hóa",
+      content: "Bạn có chắc chắn muốn vô hiệu hóa không?",
+      arrShow: [CATEGORY_LIST_ENUM?.ACTIVE],
+      showTitle: true
+    }
+  ];
+  console.log("listIcon", listIcon);
+  const { open, shouldRender, toggle } = useToggle();
+  const [notifyContent, setNotifyContent] = useState({
+    title: "",
+    content: "",
+    typeIcon: "info",
+    handleCancel: () => {
+    },
+    handleSubmit: () => {
+    }
+  });
+  //! Function
+  const renderBulkActions = () => {
+    switch (typeBulkaction) {
+      case TypeBulkActions.BULKACTION:
+        return /* @__PURE__ */ jsx(
+          BulkAction,
+          {
+            listIcon,
+            quantity,
+            setNotifyContent,
+            toggle,
+            status
+          }
+        );
+      case TypeBulkActions.DROPLIST:
+        return /* @__PURE__ */ jsx(
+          DropListActions,
+          {
+            listIcon,
+            setNotifyContent,
+            toggle,
+            status
+          }
+        );
+    }
+  };
+  //! Render
+  return /* @__PURE__ */ jsxs("div", { children: [
+    renderBulkActions(),
+    shouldRender && /* @__PURE__ */ jsx(
+      ConfirmModal,
+      {
+        title: notifyContent?.title,
+        content: notifyContent?.content,
+        typeIcon: notifyContent?.typeIcon,
+        open,
+        handleCancel: notifyContent?.handleCancel,
+        handleSubmit: notifyContent?.handleSubmit
+      }
+    )
+  ] });
+};
+
+export { ActionRowTable, BulkActions, Button, CATEGORY_LIST_ENUM, ConfirmModal, Popover, Table, Tooltip, TypeActionRowTable, TypeBulkActions, TypeStatusTable, Typography };