@pnkx-lib/ui 1.9.39 → 1.9.42

package/es/chunks/{index-CRvByTPr.js → index-DLRC7p6n.js}

@@ -1,5 +1,5 @@
-import { j as jsxRuntimeExports, c as Icon, _ as _extends, d as _typeof, P as PnkxField, C as CheckboxField, u as useForm, I as Input, S as Select, e as classNames, T as Typography, l as lodashExports, f as RefIcon$7, h as _arrayLikeToArray, i as _unsupportedIterableToArray, w as warningOnce, k as _createClass, m as _classCallCheck, n as _defineProperty, o as _slicedToArray, p as warning$1, q as canUseDom, r as _objectSpread2, s as updateCSS, t as removeCSS, v as _arrayWithHoles, x as _nonIterableRest, y as resetWarned$1, F as FastColor, z as generate, A as presetPrimaryColors, B as presetPalettes, G as _inherits, H as _createSuper, J as _assertThisInitialized, K as _objectWithoutProperties, M as IconContext } from './Switch-5fY0eC69.js';
-import { Button as Button$1, Cascader, Space as Space$1, Card, Skeleton as Skeleton$1, Modal as Modal$1, Tag as Tag$1, Badge as Badge$1, Breadcrumb as Breadcrumb$1, Tooltip as Tooltip$1, Divider as Divider$2, Popconfirm as Popconfirm$1, Typography as Typography$1, Table as Table$1, Tabs as Tabs$1, Popover as Popover$1, Col as Col$1, Row as Row$1, Dropdown as Dropdown$1, Flex as Flex$1, Splitter as Splitter$1, Menu as Menu$1, Pagination as Pagination$1, Steps as Steps$1, Alert as Alert$1, Spin as Spin$1, Drawer as Drawer$1, QRCode as QRCode$1, Result as Result$1, Rate as Rate$1, Segmented as Segmented$1, Statistic as Statistic$1, Timeline as Timeline$1, Tour as Tour$1, Tree as Tree$1, Watermark as Watermark$1, Anchor as Anchor$1, Affix, AutoComplete as AutoComplete$1, Input as Input$1, Collapse, ColorPicker, Empty as Empty$2, Image as Image$1 } from 'antd';
+import { j as jsxRuntimeExports, c as Icon, _ as _extends, d as _typeof, P as PnkxField, C as CheckboxField, u as useForm, e as classNames, I as Input, f as _arrayLikeToArray, h as _unsupportedIterableToArray, w as warningOnce, i as _createClass, k as _classCallCheck, l as _defineProperty, m as _slicedToArray, n as warning$1, o as canUseDom, p as _objectSpread2, q as updateCSS, r as removeCSS, s as _arrayWithHoles, t as _nonIterableRest, v as resetWarned$1, F as FastColor, x as generate, y as presetPrimaryColors, z as presetPalettes, A as _inherits, B as _createSuper, G as _assertThisInitialized, H as _objectWithoutProperties, J as IconContext } from './Switch-jt4L5Z_9.js';
+import { Button as Button$1, Cascader, Space as Space$1, Card, Skeleton as Skeleton$1, Modal as Modal$1, Badge as Badge$1, Breadcrumb as Breadcrumb$1, Tooltip as Tooltip$1, Divider as Divider$2, Popconfirm as Popconfirm$1, Typography, Table as Table$1, Tabs as Tabs$1, Popover as Popover$1, Col as Col$1, Row as Row$1, Dropdown as Dropdown$1, Flex as Flex$1, Splitter as Splitter$1, Menu as Menu$1, Pagination as Pagination$1, Steps as Steps$1, Tag as Tag$1, Alert as Alert$1, Spin as Spin$1, Drawer as Drawer$1, QRCode as QRCode$1, Result as Result$1, Rate as Rate$1, Segmented as Segmented$1, Statistic as Statistic$1, Timeline as Timeline$1, Tour as Tour$1, Tree as Tree$1, Watermark as Watermark$1, Anchor as Anchor$1, Affix, AutoComplete as AutoComplete$1, Input as Input$1, Collapse, ColorPicker, Empty as Empty$2, Image as Image$1 } from 'antd';
 import * as React from 'react';
 import React__default, { version as version$1, isValidElement, useLayoutEffect as useLayoutEffect$1, useEffect, useRef, useMemo as useMemo$1, useCallback, useState, createContext, memo, useReducer, useContext, Component } from 'react';
 import ReactDOM__default, { unstable_batchedUpdates, createPortal } from 'react-dom';
@@ -6553,29 +6553,33 @@ const DragIcon = ({ stroke, fill }) => /* @__PURE__ */ jsxRuntimeExports.jsx("sv
   }
 ) });
 
-const SettingIcon = ({
-  stroke,
-  fill,
-  className,
-  onClick
-}) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+const SettingIcon = (props) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
   "svg",
   {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 30,
-    height: 30,
+    width: "30",
+    height: "30",
+    viewBox: "0 0 30 30",
     fill: "none",
-    className,
-    onClick,
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props,
     children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("rect", { width: 29, height: 29, x: 0.5, y: 0.5, fill: "#fff", rx: 14.5 }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("rect", { width: 29, height: 29, x: 0.5, y: 0.5, stroke: "#D6E6FE", rx: 14.5 }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("rect", { x: "0.5", y: "0.5", width: "29", height: "29", rx: "14.5", fill: "white" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "rect",
+        {
+          x: "0.5",
+          y: "0.5",
+          width: "29",
+          height: "29",
+          rx: "14.5",
+          stroke: props?.stroke || "#D6E6FE"
+        }
+      ),
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         "path",
         {
-          fill,
-          stroke,
-          d: "M16.085 11a1.5 1.5 0 0 1 2.83 0H21v1h-2.085a1.5 1.5 0 0 1-2.83 0H9v-1h5.987M17 11v1h1v-1h-1Zm.5 7a1.5 1.5 0 0 1 1.415 1H21v1h-2.085a1.5 1.5 0 0 1-2.83 0H9v-1h7.085a1.5 1.5 0 0 1 1.415-1Zm-.5 1v1h1v-1h-1Zm4-4v1h-7.085a1.5 1.5 0 0 1-2.83 0H9v-1h2.085a1.5 1.5 0 0 1 2.83 0H21Zm-9 0v1h1v-1h-1Z"
+          d: "M16.0854 11C16.2913 10.4174 16.8469 10 17.5 10C18.1531 10 18.7087 10.4174 18.9146 11H21V12H18.9146C18.7087 12.5826 18.1531 13 17.5 13C16.8469 13 16.2913 12.5826 16.0854 12C15.6004 12 15.2368 12 14.9943 12C13.6622 12 11.6641 12 9 12V11C11.6611 11 13.6569 11 14.9874 11M17 11V12H18V11H17ZM17.5 18C18.1531 18 18.7087 18.4174 18.9146 19H21V20H18.9146C18.7087 20.5826 18.1531 21 17.5 21C16.8469 21 16.2913 20.5826 16.0854 20H9V19H16.0854C16.2913 18.4174 16.8469 18 17.5 18ZM17 19V20H18V19H17ZM21 15V16H13.9146C13.7087 16.5826 13.1531 17 12.5 17C11.8469 17 11.2913 16.5826 11.0854 16H9V15H11.0854C11.2913 14.4174 11.8469 14 12.5 14C13.1531 14 13.7087 14.4174 13.9146 15H21ZM12 15V16H13V15H12Z",
+          fill: props?.stroke || "#116DFF"
         }
       )
     ]
@@ -9783,233 +9787,11 @@ const SettingTable = (props) => {
   );
 };
 
-const containerSearchSelect = "_containerSearchSelect_1f1fs_1";
-const inputSearchKey = "_inputSearchKey_1f1fs_8";
 const customBadge = "_customBadge_1f1fs_14";
 const customBadgeActive = "_customBadgeActive_1f1fs_22";
-const customContainButtonIcon = "_customContainButtonIcon_1f1fs_31";
 const styles$1 = {
-	containerSearchSelect: containerSearchSelect,
-	inputSearchKey: inputSearchKey,
 	customBadge: customBadge,
-	customBadgeActive: customBadgeActive,
-	customContainButtonIcon: customContainButtonIcon
-};
-
-class Timer {
-  timer;
-  constructor() {
-    this.timer = null;
-  }
-  debounce(func, time) {
-    if (this.timer) {
-      clearTimeout(this.timer);
-    }
-    this.timer = setTimeout(func, time);
-  }
-}
-
-const SearchIcon = (props) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-  "svg",
-  {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 18,
-    height: 18,
-    fill: "none",
-    ...props,
-    children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "path",
-      {
-        fill: props?.color || "#116DFF",
-        fillRule: "evenodd",
-        d: "M14.854 14.147a.498.498 0 0 1-.704.703l-2.13-2.124a5.5 5.5 0 1 1 .707-.707l2.127 2.128ZM8.5 13a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9Z",
-        clipRule: "evenodd"
-      }
-    )
-  }
-);
-
-const AllowClearIcon = (props) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-  "svg",
-  {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 6,
-    height: 6,
-    fill: "none",
-    ...props,
-    children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "path",
-      {
-        fill: props?.color || "#116DFF",
-        fillRule: "evenodd",
-        d: "M5.2 0 3 2.2.8 0 0 .8 2.2 3 0 5.3l.8.7L3 3.8 5.2 6l.8-.7L3.8 3 6 .8 5.2 0Z",
-        clipRule: "evenodd"
-      }
-    )
-  }
-);
-
-const TrashCanIcon = (props) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-  "svg",
-  {
-    width: "18",
-    height: "18",
-    viewBox: "0 0 24 24",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    ...props,
-    children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "path",
-      {
-        d: "M18.893 18.0357L19.393 18.0402V18.0402L18.893 18.0357ZM4.00049 5.5C3.72435 5.5 3.50049 5.72386 3.50049 6C3.50049 6.27614 3.72435 6.5 4.00049 6.5V5.5ZM20.0005 6.5C20.2766 6.5 20.5005 6.27614 20.5005 6C20.5005 5.72386 20.2766 5.5 20.0005 5.5V6.5ZM10.5005 10C10.5005 9.72386 10.2766 9.5 10.0005 9.5C9.72435 9.5 9.50049 9.72386 9.50049 10H10.5005ZM9.50049 18C9.50049 18.2761 9.72435 18.5 10.0005 18.5C10.2766 18.5 10.5005 18.2761 10.5005 18H9.50049ZM14.5005 10C14.5005 9.72386 14.2766 9.5 14.0005 9.5C13.7243 9.5 13.5005 9.72386 13.5005 10H14.5005ZM13.5005 18C13.5005 18.2761 13.7243 18.5 14.0005 18.5C14.2766 18.5 14.5005 18.2761 14.5005 18H13.5005ZM19.0005 6L18.5005 5.99554L18.393 18.0312L18.893 18.0357L19.393 18.0402L19.5005 6.00446L19.0005 6ZM14.8932 22V21.5H9.00049V22V22.5H14.8932V22ZM5.00049 6H4.50049V18H5.00049H5.50049V6H5.00049ZM4.00049 6V6.5H5.00049V6V5.5H4.00049V6ZM5.00049 6V6.5H8.00049V6V5.5H5.00049V6ZM8.00049 6V6.5H16.0005V6V5.5H8.00049V6ZM16.0005 6V6.5H19.0005V6V5.5H16.0005V6ZM19.0005 6V6.5H20.0005V6V5.5H19.0005V6ZM8.00049 5.55556H8.50049C8.50049 3.92176 10.0105 2.5 12.0005 2.5V2V1.5C9.5722 1.5 7.50049 3.262 7.50049 5.55556H8.00049ZM12.0005 2V2.5C13.9905 2.5 15.5005 3.92176 15.5005 5.55556H16.0005H16.5005C16.5005 3.262 14.4288 1.5 12.0005 1.5V2ZM8.00049 5.55556H7.50049V6H8.00049H8.50049V5.55556H8.00049ZM16.0005 5.55556H15.5005V6H16.0005H16.5005V5.55556H16.0005ZM9.00049 22V21.5C7.06749 21.5 5.50049 19.933 5.50049 18H5.00049H4.50049C4.50049 20.4853 6.51521 22.5 9.00049 22.5V22ZM18.893 18.0357L18.393 18.0312C18.3759 19.952 16.814 21.5 14.8932 21.5V22V22.5C17.3628 22.5 19.371 20.5097 19.393 18.0402L18.893 18.0357ZM10.0005 10H9.50049V18H10.0005H10.5005V10H10.0005ZM14.0005 10H13.5005V18H14.0005H14.5005V10H14.0005Z",
-        fill: props?.color || "#E0E0E0"
-      }
-    )
-  }
-);
-
-const RenderFilterFields = (props) => {
-  const {
-    control,
-    handleSubmit,
-    reset,
-    isHiddenRemove,
-    resetToInitialFilters,
-    isNullFilter
-  } = props;
-  const timer = new Timer();
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-3 mb-3 ", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      PnkxField,
-      {
-        iconStartInput: /* @__PURE__ */ jsxRuntimeExports.jsx(SearchIcon, {}),
-        allowClear: {
-          clearIcon: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "!bg-[#E7F0FF] w-[18px] h-[18px] inline-flex justify-center !items-center  rounded-[50%]", children: /* @__PURE__ */ jsxRuntimeExports.jsx(AllowClearIcon, { className: "" }) })
-        },
-        className: `!w-[255px] !rounded-[100px] !border-[#BDE3FF] ${styles$1.inputSearchKey}`,
-        component: Input,
-        name: "textSearch",
-        control,
-        type: "search",
-        placeholder: "Tìm theo mã, tên thuộc tính",
-        afterOnChange: () => {
-          timer.debounce((e) => {
-            if (handleSubmit) {
-              handleSubmit(e);
-            }
-          }, 300);
-        }
-      }
-    ),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      PnkxField,
-      {
-        className: styles$1.containerSearchSelect,
-        component: Select,
-        name: "attributeTypeValue",
-        control,
-        options: [
-          {
-            value: "1",
-            label: "Loại 1"
-          },
-          {
-            value: "2",
-            label: "Loại 2"
-          },
-          {
-            value: "3",
-            label: "Loại 3"
-          }
-        ],
-        placeholder: "Loại thuộc tính",
-        afterOnChange: () => {
-          timer.debounce((e) => {
-            if (handleSubmit) {
-              handleSubmit(e);
-            }
-          }, 300);
-        }
-      }
-    ),
-    !isHiddenRemove && /* @__PURE__ */ jsxRuntimeExports.jsx(
-      Button,
-      {
-        onClick: () => {
-          resetToInitialFilters();
-          if (reset) {
-            reset();
-          }
-        },
-        className: twMerge(
-          "!rounded-full items-center",
-          isNullFilter ? "!border-none !text-[#E0E0E0] !shadow-none !font-light" : "!border-[#FFCDC9] !text-[#DD4338]",
-          styles$1.customContainButtonIcon
-        ),
-        icon: /* @__PURE__ */ jsxRuntimeExports.jsx(TrashCanIcon, { color: isNullFilter ? "" : "#DD4338" }),
-        children: "Xoá tất cả"
-      }
-    )
-  ] });
-};
-
-const Tag = (props) => {
-  const { children, ...rest } = props;
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(Tag$1, { ...rest, children: [
-    " ",
-    children
-  ] });
-};
-
-const TagsFilter = (props) => {
-  const { items, resetToInitialFilters, reset, setItems, isHiddenRemove } = props;
-  const handleRemoveTag = (removeIndex) => {
-    if (!items) return;
-    const newTags = [
-      ...items.slice(0, removeIndex),
-      ...items.slice(removeIndex + 1)
-    ];
-    console.log(newTags);
-    setItems && setItems(newTags);
-  };
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "", children: [
-    items?.map((tag, index) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-      Tag,
-      {
-        closable: {
-          closeIcon: /* @__PURE__ */ jsxRuntimeExports.jsx(AllowClearIcon, { className: "inline !ml-2", color: "#000624" }),
-          "aria-label": "Close Button"
-        },
-        className: "!pt-[5px] !pb-[5px] !pl-[9px] w-fit !rounded-[100px] !text-[#0F1D40] !text-[14px]",
-        color: "#C4DEF9",
-        onClose: (e) => {
-          e.preventDefault();
-          handleRemoveTag(index);
-        },
-        children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: tag })
-      },
-      index
-    )),
-    !isHiddenRemove && /* @__PURE__ */ jsxRuntimeExports.jsx(
-      Button,
-      {
-        onClick: () => {
-          resetToInitialFilters();
-          if (reset) {
-            reset();
-          }
-          setItems && setItems([]);
-        },
-        className: twMerge(
-          "!rounded-[100px] !border-[#FFCDC9] !text-[#DD4338]",
-          styles$1.customContainButtonIcon
-        ),
-        icon: /* @__PURE__ */ jsxRuntimeExports.jsx(TrashCanIcon, { color: "#DD4338" }),
-        children: "Xoá tất cả"
-      }
-    )
-  ] });
-};
+	customBadgeActive: customBadgeActive};
 
 const typeColorMap = {
   error: "red",
@@ -10022,6 +9804,15 @@ const Badge = ({ type, children, customColor, ...rest }) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsx(Badge$1, { color, ...rest, children });
 };
 
+const groupHeadingButtonItems = [
+  { label: "Tất cả", value: 1155, keyActive: 1 },
+  { label: "Hoạt động", value: 15, keyActive: 2 },
+  { label: "Ngưng hoạt động", value: 16, keyActive: 3 },
+  { label: "Tạo mới", value: 12, keyActive: 4 },
+  { label: "Chờ duyệt", value: 43, keyActive: 5 },
+  { label: "Từ chối duyệt", value: 34, keyActive: 6 },
+  { label: "Đã xoá", value: 23, keyActive: 7 }
+];
 const ButtonBadge = (props) => {
   const { label, value, active, setKeyActive, keyActive } = props;
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
@@ -10045,8 +9836,11 @@ const ButtonBadge = (props) => {
     }
   );
 };
-const GroupHeadingButton = (props) => {
-  const { keyActive, setKeyActive, items } = props;
+const GroupHeadingButton = () => {
+  const [keyActive, setKeyActive] = useState(1);
+  const [items, setItems] = useState(
+    groupHeadingButtonItems
+  );
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "pb-[15px]", children: items?.map((i, index) => /* @__PURE__ */ jsxRuntimeExports.jsx(
     ButtonBadge,
     {
@@ -10060,54 +9854,6 @@ const GroupHeadingButton = (props) => {
   )) });
 };
 
-const SearchFiltersForm = ({
-  initialValues,
-  renderFilterFields,
-  onSubmit,
-  onReset,
-  classNamesContainer,
-  classNameWrapperForm,
-  hideDefaultSubmit,
-  hideResetButton
-}) => {
-  const { control, handleSubmit, reset, setValue } = useForm({
-    defaultValues: initialValues
-  });
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("form", { className: classNameWrapperForm, onSubmit: handleSubmit(onSubmit), children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: classNamesContainer, children: renderFilterFields && renderFilterFields({
-      control,
-      setValue,
-      handleSubmit: handleSubmit(onSubmit),
-      reset
-    }) }),
-    !hideDefaultSubmit && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-end gap-2 mb-3", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
-        Button,
-        {
-          icon: /* @__PURE__ */ jsxRuntimeExports.jsx(RefIcon, {}),
-          className: "px-3 py-1 ",
-          color: "blue",
-          variant: "solid",
-          htmlType: "submit",
-          children: "Tìm kiếm"
-        }
-      ),
-      !hideResetButton && /* @__PURE__ */ jsxRuntimeExports.jsx(
-        Button,
-        {
-          icon: /* @__PURE__ */ jsxRuntimeExports.jsx(RefIcon$3, {}),
-          className: "px-3 py-1",
-          onClick: () => {
-            reset();
-            onReset?.();
-          },
-          children: "Đặt lại"
-        }
-      )
-    ] })
-  ] });
-};
-
 const Breadcrumb = (props) => {
   const { containerClassName, breadcrumbClassName, ...restProps } = props;
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: containerClassName, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Breadcrumb$1, { className: breadcrumbClassName, ...restProps }) });
@@ -10142,10 +9888,6 @@ const Heading = (props) => {
   ] });
 };
 
-function hasFalsyFieldsObject(obj) {
-  return Object.values(obj).every((value) => !value);
-}
-
 const Tooltip = ({ children, ...props }) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip$1, { ...props, children });
 };
@@ -10188,82 +9930,20 @@ const HeadingTable = (props) => {
     resetToInitialFilters,
     setOpenStting,
     showSetting,
-    keyActive,
-    setKeyActive,
-    groupHeadingButtonItems,
-    tagSearchItems,
-    setTagSearchItems
+    renderHeadingSearch,
+    rightHeadingContent
   } = props;
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     Heading,
     {
       breadcrumbItems: breadCrumb,
       classNameWrapHeading: "justify-between",
-      rightContent: /* @__PURE__ */ jsxRuntimeExports.jsx(
-        Button,
-        {
-          color: "blue",
-          variant: "solid",
-          shape: "round",
-          rootClassName: "transform translate-y-[110%]",
-          icon: /* @__PURE__ */ jsxRuntimeExports.jsx(RefIcon$7, {}),
-          children: "Thêm mới"
-        }
-      ),
+      rightContent: rightHeadingContent,
       children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(Typography.Title, { level: 2, children: " Danh mục thuộc tính" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
-          SearchFiltersForm,
-          {
-            onSubmit: (values) => {
-              handleSearch({
-                ...filters,
-                keyword: values?.keyword,
-                attributeType: values?.attributeType
-              });
-            },
-            initialValues: {
-              keyword: filters?.keyword,
-              attributeType: filters?.attributeType
-            },
-            classNamesContainer: "flex",
-            hideDefaultSubmit: true,
-            renderFilterFields: ({ control, handleSubmit, reset }) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(
-                RenderFilterFields,
-                {
-                  control,
-                  handleSubmit,
-                  reset,
-                  resetToInitialFilters,
-                  isHiddenRemove: !!tagSearchItems && tagSearchItems?.length > 0,
-                  isNullFilter: hasFalsyFieldsObject(
-                    lodashExports.omit(filters, ["PageIndex", "PageSize"])
-                  )
-                }
-              ),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(
-                TagsFilter,
-                {
-                  items: tagSearchItems,
-                  setItems: setTagSearchItems,
-                  resetToInitialFilters,
-                  isHiddenRemove: !tagSearchItems || tagSearchItems?.length === 0
-                }
-              )
-            ] })
-          }
-        ),
+        renderHeadingSearch(filters, handleSearch, resetToInitialFilters),
         /* @__PURE__ */ jsxRuntimeExports.jsx(Divider$1, {}),
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between items-center", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
-            GroupHeadingButton,
-            {
-              keyActive,
-              setKeyActive,
-              items: groupHeadingButtonItems
-            }
-          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(GroupHeadingButton, {}),
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             IconSettingTable,
             {
@@ -10277,124 +9957,396 @@ const HeadingTable = (props) => {
   );
 };
 
-const EditableCell = ({
-  editing,
-  dataIndex,
-  inputType,
-  children,
-  control,
+const ConfirmModal = ({
+  title,
+  content,
+  typeIcon,
+  titleCancelBtn = "Huỷ bỏ",
+  titleSubmitBtn = "Xác nhận",
+  handleCancel,
+  handleSubmit,
   ...restProps
-}) => {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("td", { ...restProps, children: editing ? /* @__PURE__ */ jsxRuntimeExports.jsx(
-    PnkxField,
-    {
-      name: dataIndex,
-      control,
-      component: Input,
-      type: inputType
-    }
-  ) : children });
-};
-const tableCss = css`
-  .ant-table-cell::before {
-    display: none !important;
-  }
-  .ant-table-thead .ant-table-cell {
-    background-color: #d6e6fe;
-    font-weight: 500;
-  }
-
-  .ant-table-thead th.ant-table-column-has-sorters:hover {
-    background-color: #d6e6fe;
-  }
-
-  .ant-table-row.table-row-even {
-    background-color: #f7f7f8;
-  }
-
-  .ant-table-row.table-row-odd {
-    background-color: #ffffff;
-  }
-  .ant-table-row:hover {
-    background-color: #e7f0ff;
-  }
-`;
-const Table = ({
-  dataSource,
-  columns,
-  loading = false,
-  totalItems,
-  filters,
-  onChangePage,
-  onChangePageSize,
-  onSort,
-  rowsSelected,
-  onSelect,
-  onRowClick,
-  rowKey = "id",
-  className,
-  editable,
-  onSave,
-  titleSettingTableModal,
-  showSetting,
-  setColumns,
-  resetToInitialFilters,
-  handleSearch,
-  groupHeadingButtonItems,
-  tagSearchItems,
-  setTagSearchItems,
-  setKeyActive,
-  keyActive,
-  ...rest
 }) => {
   //! State
-  const paginationConfig = {
-    current: filters.PageIndex,
-    pageSize: filters.PageSize,
-    total: totalItems,
-    showSizeChanger: true,
-    showQuickJumper: true,
-    showTotal: (total, range) => `${range[0]}-${range[1]} of ${total} items`,
-    onChange: (page, pageSize) => {
-      if (page !== filters.PageIndex) onChangePage(page);
-      if (pageSize !== filters.PageSize) onChangePageSize(pageSize);
+  const IconType = () => {
+    switch (typeIcon) {
+      case "success":
+        return /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "svg",
+          {
+            xmlns: "http://www.w3.org/2000/svg",
+            width: "24",
+            height: "24",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "path",
+              {
+                d: "M12 1.5C6.20156 1.5 1.5 6.20156 1.5 12C1.5 17.7984 6.20156 22.5 12 22.5C17.7984 22.5 22.5 17.7984 22.5 12C22.5 6.20156 17.7984 1.5 12 1.5ZM16.5352 8.57109L11.5992 15.4148C11.5302 15.5111 11.4393 15.5896 11.3339 15.6437C11.2286 15.6978 11.1118 15.7261 10.9934 15.7261C10.8749 15.7261 10.7582 15.6978 10.6528 15.6437C10.5474 15.5896 10.4565 15.5111 10.3875 15.4148L7.46484 11.3648C7.37578 11.2406 7.46484 11.0672 7.61719 11.0672H8.71641C8.95547 11.0672 9.18281 11.182 9.32344 11.3789L10.9922 13.6945L14.6766 8.58516C14.8172 8.39062 15.0422 8.27344 15.2836 8.27344H16.3828C16.5352 8.27344 16.6242 8.44688 16.5352 8.57109Z",
+                fill: "#52C41A"
+              }
+            )
+          }
+        );
+      case "error":
+        return /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "svg",
+          {
+            xmlns: "http://www.w3.org/2000/svg",
+            width: "24",
+            height: "24",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "path",
+              {
+                d: "M12 1.5C6.20156 1.5 1.5 6.20156 1.5 12C1.5 17.7984 6.20156 22.5 12 22.5C17.7984 22.5 22.5 17.7984 22.5 12C22.5 6.20156 17.7984 1.5 12 1.5ZM15.8766 15.9891L14.3297 15.982L12 13.2047L9.67266 15.9797L8.12344 15.9867C8.02031 15.9867 7.93594 15.9047 7.93594 15.7992C7.93594 15.7547 7.95234 15.7125 7.98047 15.6773L11.0297 12.0445L7.98047 8.41406C7.95215 8.37971 7.93643 8.3367 7.93594 8.29219C7.93594 8.18906 8.02031 8.10469 8.12344 8.10469L9.67266 8.11172L12 10.8891L14.3273 8.11406L15.8742 8.10703C15.9773 8.10703 16.0617 8.18906 16.0617 8.29453C16.0617 8.33906 16.0453 8.38125 16.0172 8.41641L12.9727 12.0469L16.0195 15.6797C16.0477 15.7148 16.0641 15.757 16.0641 15.8016C16.0641 15.9047 15.9797 15.9891 15.8766 15.9891Z",
+                fill: "#FF4D4F"
+              }
+            )
+          }
+        );
+      case "info":
+        return /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "svg",
+          {
+            xmlns: "http://www.w3.org/2000/svg",
+            width: "24",
+            height: "24",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "path",
+              {
+                d: "M12 1.5C6.20156 1.5 1.5 6.20156 1.5 12C1.5 17.7984 6.20156 22.5 12 22.5C17.7984 22.5 22.5 17.7984 22.5 12C22.5 6.20156 17.7984 1.5 12 1.5ZM12.75 17.0625C12.75 17.1656 12.6656 17.25 12.5625 17.25H11.4375C11.3344 17.25 11.25 17.1656 11.25 17.0625V10.6875C11.25 10.5844 11.3344 10.5 11.4375 10.5H12.5625C12.6656 10.5 12.75 10.5844 12.75 10.6875V17.0625ZM12 9C11.7056 8.99399 11.4253 8.87282 11.2192 8.6625C11.0132 8.45218 10.8977 8.16945 10.8977 7.875C10.8977 7.58055 11.0132 7.29782 11.2192 7.0875C11.4253 6.87718 11.7056 6.75601 12 6.75C12.2944 6.75601 12.5747 6.87718 12.7808 7.0875C12.9868 7.29782 13.1023 7.58055 13.1023 7.875C13.1023 8.16945 12.9868 8.45218 12.7808 8.6625C12.5747 8.87282 12.2944 8.99399 12 9Z",
+                fill: "#1677FF"
+              }
+            )
+          }
+        );
+      case "warning":
+        return /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "svg",
+          {
+            xmlns: "http://www.w3.org/2000/svg",
+            width: "24",
+            height: "24",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "path",
+              {
+                d: "M12 1.5C6.20156 1.5 1.5 6.20156 1.5 12C1.5 17.7984 6.20156 22.5 12 22.5C17.7984 22.5 22.5 17.7984 22.5 12C22.5 6.20156 17.7984 1.5 12 1.5ZM11.25 6.9375C11.25 6.83437 11.3344 6.75 11.4375 6.75H12.5625C12.6656 6.75 12.75 6.83437 12.75 6.9375V13.3125C12.75 13.4156 12.6656 13.5 12.5625 13.5H11.4375C11.3344 13.5 11.25 13.4156 11.25 13.3125V6.9375ZM12 17.25C11.7056 17.244 11.4253 17.1228 11.2192 16.9125C11.0132 16.7022 10.8977 16.4195 10.8977 16.125C10.8977 15.8305 11.0132 15.5478 11.2192 15.3375C11.4253 15.1272 11.7056 15.006 12 15C12.2944 15.006 12.5747 15.1272 12.7808 15.3375C12.9868 15.5478 13.1023 15.8305 13.1023 16.125C13.1023 16.4195 12.9868 16.7022 12.7808 16.9125C12.5747 17.1228 12.2944 17.244 12 17.25Z",
+                fill: "#FAAD14"
+              }
+            )
+          }
+        );
     }
   };
-  const [openSetting, setOpenStting] = useState(false);
-  const rowSelection = {
-    selectedRowKeys: rowsSelected,
-    onChange: onSelect
-    // getCheckboxProps: (record: any) => ({
-    //   disabled: true, // Ví dụ: disable nếu tuổi > 40
-    // }),
-  };
-  const { control, handleSubmit, reset } = useForm();
-  const [data, setData] = useState([]);
-  const [editingKey, setEditingKey] = useState("");
-  const getRowKeyValue = (record) => typeof rowKey === "function" ? rowKey(record) : record[rowKey];
-  const isEditing = (record) => getRowKeyValue(record) === editingKey;
-  const edit = (record) => {
-    reset(record);
-    setEditingKey(getRowKeyValue(record));
-  };
-  const save = (formValues) => {
-    const key = editingKey;
-    const newData = [...data];
-    const index = newData.findIndex((item) => getRowKeyValue(item) === key);
-    if (onSave) {
-      onSave(formValues);
+  //! Function
+  //! Render
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Modal, { ...restProps, footer: null, closeIcon: null, width: 400, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-3", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(IconType, {}),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "text-base font-semibold", children: title }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm", children: content })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-2 w-full justify-end items-end pt-3", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { shape: "round", onClick: handleCancel, children: titleCancelBtn }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { shape: "round", type: "primary", onClick: handleSubmit, children: titleSubmitBtn })
+    ] })
+  ] }) });
+};
+
+var CATEGORY_LIST_ENUM = /* @__PURE__ */ ((CATEGORY_LIST_ENUM2) => {
+  CATEGORY_LIST_ENUM2[CATEGORY_LIST_ENUM2["DRAFT"] = 0] = "DRAFT";
+  CATEGORY_LIST_ENUM2[CATEGORY_LIST_ENUM2["WATING_APPROVAL"] = 1] = "WATING_APPROVAL";
+  CATEGORY_LIST_ENUM2[CATEGORY_LIST_ENUM2["ACTIVE"] = 2] = "ACTIVE";
+  CATEGORY_LIST_ENUM2[CATEGORY_LIST_ENUM2["INACTIVE"] = 3] = "INACTIVE";
+  CATEGORY_LIST_ENUM2[CATEGORY_LIST_ENUM2["REJECT"] = 4] = "REJECT";
+  CATEGORY_LIST_ENUM2[CATEGORY_LIST_ENUM2["DELETE"] = 5] = "DELETE";
+  return CATEGORY_LIST_ENUM2;
+})(CATEGORY_LIST_ENUM || {});
+
+const BulkAction = ({
+  quantity,
+  handleRestore,
+  handleSendApproval,
+  handleCancelSendApproval,
+  handleRefuseApproval,
+  handleApproval,
+  handleCancelApproval,
+  handleDelete,
+  handleActivate,
+  handleInActivate,
+  status
+}) => {
+  //! State
+  const listIcon = [
+    {
+      icon: /* @__PURE__ */ jsxRuntimeExports.jsx(RestoreIcon, { stroke: "white" }),
+      action: handleRestore,
+      showConfirmModal: false,
+      title: "Khôi phục",
+      arrShow: [CATEGORY_LIST_ENUM?.DELETE, CATEGORY_LIST_ENUM?.REJECT]
+    },
+    {
+      icon: /* @__PURE__ */ jsxRuntimeExports.jsx(SendApprovalIcon, { stroke: "white" }),
+      action: handleSendApproval,
+      showConfirmModal: true,
+      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 mục này không?",
+      arrShow: [CATEGORY_LIST_ENUM?.DRAFT]
+    },
+    {
+      icon: /* @__PURE__ */ jsxRuntimeExports.jsx(CancelSendApprovalIcon, { stroke: "white" }),
+      action: handleCancelSendApproval,
+      showConfirmModal: true,
+      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 mục này không?",
+      arrShow: [CATEGORY_LIST_ENUM?.WATING_APPROVAL]
+    },
+    {
+      icon: /* @__PURE__ */ jsxRuntimeExports.jsx(RefuseApprovalIcon, { stroke: "white" }),
+      action: handleRefuseApproval,
+      showConfirmModal: true,
+      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 mục này không? Hành động này không thể hoàn tác.",
+      arrShow: [CATEGORY_LIST_ENUM?.WATING_APPROVAL]
+    },
+    {
+      icon: /* @__PURE__ */ jsxRuntimeExports.jsx(ApprovalIcon, { stroke: "white" }),
+      action: handleApproval,
+      showConfirmModal: true,
+      typeIcon: "info",
+      title: "Xác nhận duyệt",
+      content: "Bạn có chắc chắn muốn duyệt mục này không?",
+      arrShow: [CATEGORY_LIST_ENUM?.WATING_APPROVAL]
+    },
+    {
+      icon: /* @__PURE__ */ jsxRuntimeExports.jsx(CancelApprovalIcon, { stroke: "white" }),
+      action: handleCancelApproval,
+      showConfirmModal: true,
+      typeIcon: "error",
+      title: "Xác nhận hủy duyệt",
+      content: "Bạn có chắc chắn muốn hủy duyệt mục này không?",
+      arrShow: [CATEGORY_LIST_ENUM?.ACTIVE]
+    },
+    {
+      icon: /* @__PURE__ */ jsxRuntimeExports.jsx(DeleteIcon, { fill: "white" }),
+      action: handleDelete,
+      showConfirmModal: true,
+      typeIcon: "error",
+      title: "Xác nhận xóa",
+      content: "Bạn có chắc chắn muốn xóa mục này 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
+      ]
+    },
+    {
+      icon: /* @__PURE__ */ jsxRuntimeExports.jsx(ActivateIcon, { stroke: "white" }),
+      action: handleActivate,
+      showConfirmModal: true,
+      typeIcon: "info",
+      title: "Xác nhận kích hoạt",
+      content: "Bạn có chắc chắn muốn kích hoạt mục này không?",
+      arrShow: [CATEGORY_LIST_ENUM?.INACTIVE]
+    },
+    {
+      icon: /* @__PURE__ */ jsxRuntimeExports.jsx(InActiveIcon, { stroke: "white" }),
+      action: handleInActivate,
+      showConfirmModal: true,
+      typeIcon: "info",
+      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 mục này không?",
+      arrShow: [CATEGORY_LIST_ENUM?.ACTIVE]
     }
-    if (index > -1) {
-      newData[index] = { ...newData[index], ...formValues };
-      setData(newData);
-      setEditingKey("");
+  ];
+  const [open, setOpen] = useState(false);
+  const [notifyContent, setNotifyContent] = useState({
+    title: "",
+    content: "",
+    typeIcon: "info",
+    handleCancel: () => {
+    },
+    handleSubmit: () => {
     }
-  };
-  const cancel = () => {
-    setEditingKey("");
-  };
+  });
   //! Function
-  useEffect(() => {
+  const IsShow = (arrStatus) => {
+    return arrStatus.includes(status);
+  };
+  //! Render
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-full flex justify-center items-center", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3 px-[10px] py-3 bg-[#2561ED] rounded-lg w-fit", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-white px-3", children: [
+      "Đã chọn: ",
+      quantity
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-5 border-l border-white mx-1" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center space-x-3", children: listIcon.map(
+      (item, index) => IsShow(item?.arrShow) && /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip, { title: item?.title, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "button",
+        {
+          className: "p-1 rounded-sm  transition duration-200 cursor-pointer hover:bg-[#1B4ACB] hover:rounded-sm",
+          onClick: item?.showConfirmModal ? () => {
+            setOpen(true);
+            setNotifyContent({
+              title: item?.title || "",
+              content: item?.content || "",
+              typeIcon: item?.typeIcon,
+              handleCancel: () => {
+                setOpen(false);
+              },
+              handleSubmit: item?.action
+            });
+          } : item?.action,
+          children: item.icon
+        },
+        index
+      ) })
+    ) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      ConfirmModal,
+      {
+        title: notifyContent?.title,
+        content: notifyContent?.content,
+        typeIcon: notifyContent?.typeIcon,
+        open,
+        handleCancel: notifyContent?.handleCancel,
+        handleSubmit: notifyContent?.handleSubmit
+      }
+    )
+  ] }) });
+};
+
+const EditableCell = ({
+  editing,
+  dataIndex,
+  inputType,
+  children,
+  control,
+  ...restProps
+}) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("td", { ...restProps, children: editing ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+    PnkxField,
+    {
+      name: dataIndex,
+      control,
+      component: Input,
+      type: inputType
+    }
+  ) : children });
+};
+const tableCss = css`
+  .ant-table-cell::before {
+    display: none !important;
+  }
+  .ant-table-thead .ant-table-cell {
+    background-color: #d6e6fe;
+    font-weight: 500;
+    border-start-start-radius: 0 !important;
+    border-start-end-radius: 0 !important;
+  }
+
+  .ant-table-thead th.ant-table-column-has-sorters:hover {
+    background-color: #d6e6fe;
+  }
+
+  .ant-table-row.table-row-even {
+    background-color: #f7f7f8;
+  }
+
+  .ant-table-row.table-row-odd {
+    background-color: #ffffff;
+  }
+  .ant-table-row:hover {
+    background-color: #e7f0ff;
+  }
+`;
+const Table = ({
+  dataSource,
+  columns,
+  loading = false,
+  totalItems,
+  filters,
+  onChangePage,
+  onChangePageSize,
+  onSort,
+  rowsSelected,
+  onSelect,
+  onRowClick,
+  rowKey = "id",
+  className,
+  editable,
+  onSave,
+  titleSettingTableModal,
+  showSetting,
+  setColumns,
+  resetToInitialFilters,
+  handleSearch,
+  tagSearchItems,
+  setTagSearchItems,
+  renderHeadingSearch,
+  rightHeadingContent,
+  status,
+  ...rest
+}) => {
+  //! State
+  const paginationConfig = {
+    current: filters.PageIndex,
+    pageSize: filters.PageSize,
+    total: totalItems,
+    showSizeChanger: true,
+    showQuickJumper: true,
+    showTotal: (total, range) => `${range[0]}-${range[1]} of ${total} items`,
+    onChange: (page, pageSize) => {
+      if (page !== filters.PageIndex) onChangePage(page);
+      if (pageSize !== filters.PageSize) onChangePageSize(pageSize);
+    }
+  };
+  const [openSetting, setOpenStting] = useState(false);
+  const rowSelection = {
+    selectedRowKeys: rowsSelected,
+    onChange: onSelect
+    // getCheckboxProps: (record: any) => ({
+    //   disabled: true, // Ví dụ: disable nếu tuổi > 40
+    // }),
+  };
+  const { control, handleSubmit, reset } = useForm();
+  const [data, setData] = useState([]);
+  const [editingKey, setEditingKey] = useState("");
+  const getRowKeyValue = (record) => typeof rowKey === "function" ? rowKey(record) : record[rowKey];
+  const isEditing = (record) => getRowKeyValue(record) === editingKey;
+  const edit = (record) => {
+    reset(record);
+    setEditingKey(getRowKeyValue(record));
+  };
+  const save = (formValues) => {
+    const key = editingKey;
+    const newData = [...data];
+    const index = newData.findIndex((item) => getRowKeyValue(item) === key);
+    if (onSave) {
+      onSave(formValues);
+    }
+    if (index > -1) {
+      newData[index] = { ...newData[index], ...formValues };
+      setData(newData);
+      setEditingKey("");
+    }
+  };
+  const cancel = () => {
+    setEditingKey("");
+  };
+  //! Function
+  useEffect(() => {
     setData(Array.isArray(dataSource) ? dataSource : []);
   }, [JSON.stringify(dataSource)]);
   const columnsEditable = [
@@ -10410,7 +10362,7 @@ const Table = ({
             {
               title: "Bạn có chắc chắn muốn huỷ chỉnh sửa?",
               onConfirm: cancel,
-              children: /* @__PURE__ */ jsxRuntimeExports.jsx(Typography$1.Text, { type: "danger", children: " Huỷ bỏ" })
+              children: /* @__PURE__ */ jsxRuntimeExports.jsx(Typography.Text, { type: "danger", children: " Huỷ bỏ" })
             }
           ),
           /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { htmlType: "submit", variant: "text", color: "blue", children: "Lưu" })
@@ -10483,16 +10435,13 @@ const Table = ({
     /* @__PURE__ */ jsxRuntimeExports.jsx(
       HeadingTable,
       {
+        rightHeadingContent,
+        renderHeadingSearch,
         filters,
         handleSearch,
         resetToInitialFilters,
         setOpenStting,
-        showSetting,
-        groupHeadingButtonItems,
-        tagSearchItems,
-        setTagSearchItems,
-        keyActive,
-        setKeyActive
+        showSetting
       }
     ),
     /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -10529,7 +10478,8 @@ const Table = ({
         defaultSettingColumnItems: editable ? mergedColumns : columns,
         setDefaultSettingColumnItems: setColumns
       }
-    )
+    ),
+    rowsSelected?.length && rowsSelected?.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "fixed bottom-1/100 left-1/2 -translate-x-1/2 -translate-y-1/2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(BulkAction, { quantity: rowsSelected?.length || 0, status }) })
   ] });
   const renderTableContent = () => {
     if (editable) {
@@ -10620,6 +10570,54 @@ const Popover = (props) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: containerClassName, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Popover$1, { className: popoverClassName, ...restProps }) });
 };
 
+const SearchFiltersForm = ({
+  initialValues,
+  renderFilterFields,
+  onSubmit,
+  onReset,
+  classNamesContainer,
+  classNameWrapperForm,
+  hideDefaultSubmit,
+  hideResetButton
+}) => {
+  const { control, handleSubmit, reset, setValue } = useForm({
+    defaultValues: initialValues
+  });
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("form", { className: classNameWrapperForm, onSubmit: handleSubmit(onSubmit), children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: classNamesContainer, children: renderFilterFields && renderFilterFields({
+      control,
+      setValue,
+      handleSubmit: handleSubmit(onSubmit),
+      reset
+    }) }),
+    !hideDefaultSubmit && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-end gap-2 mb-3", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        Button,
+        {
+          icon: /* @__PURE__ */ jsxRuntimeExports.jsx(RefIcon, {}),
+          className: "px-3 py-1 ",
+          color: "blue",
+          variant: "solid",
+          htmlType: "submit",
+          children: "Tìm kiếm"
+        }
+      ),
+      !hideResetButton && /* @__PURE__ */ jsxRuntimeExports.jsx(
+        Button,
+        {
+          icon: /* @__PURE__ */ jsxRuntimeExports.jsx(RefIcon$3, {}),
+          className: "px-3 py-1",
+          onClick: () => {
+            reset();
+            onReset?.();
+          },
+          children: "Đặt lại"
+        }
+      )
+    ] })
+  ] });
+};
+
 const Container = ({
   children,
   className,
@@ -14215,7 +14213,7 @@ function genStyleUtils(config) {
   };
 }
 
-const version = '5.25.0';
+const version = '5.25.1';
 
 function isStableColor(color) {
   return color >= 0 && color <= 255;
@@ -16913,6 +16911,20 @@ const Sidebar = ({ children, menu }) => {
               )
             }
           ),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: !collapse ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "rounded-[12px] m-auto flex items-center justify-center w-10 h-10 bg-white", children: /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: "https://pouch.jumpshare.com/preview/hOWXgtQM_x234lxOpA4km_sb9utNoaWZICgdH81HOY8wLadm2DjgwtyWnKwkJ2mlYX-z8bWrjfOrB2uhrRotd2hlUvBN6o9cv6E6pgbM-_s" }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "px-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            Input,
+            {
+              className: "h-[40px]",
+              iconStartInput: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "img",
+                {
+                  className: "w-[20px] h-[20px]",
+                  src: "https://pouch.jumpshare.com/preview/hOWXgtQM_x234lxOpA4km_sb9utNoaWZICgdH81HOY8wLadm2DjgwtyWnKwkJ2mlYX-z8bWrjfOrB2uhrRotd2hlUvBN6o9cv6E6pgbM-_s"
+                }
+              ),
+              placeholder: "Tìm kiếm"
+            }
+          ) }) }),
           /* @__PURE__ */ jsxRuntimeExports.jsxs("nav", { className: twMerge("flex flex-1 flex-col px-2"), children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { role: "list", className: twMerge("-mx-2 space-y-1 relative"), children: menu.map((item) => {
               const isActive = openSubCollapse || [activeMainMenu, pathUrl].includes(item.href) || collapse;
@@ -17110,480 +17122,218 @@ const Sidebar = ({ children, menu }) => {
       }
     ),
     /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "div",
-      {
-        className: twMerge(
-          collapse && openSubCollapse ? "ml-18" : "",
-          "flex-1 h-screen overflow-y-auto scrollbar-none"
-        ),
-        children
-      }
-    )
-  ] });
-};
-
-const Alert = (props) => {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(Alert$1, { ...props });
-};
-
-const Spin = ({ children, ...rest }) => {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(Spin$1, { ...rest, children });
-};
-
-const Drawer = ({ onSubmit, children, ...rest }) => {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(Drawer$1, { ...rest, children: onSubmit ? /* @__PURE__ */ jsxRuntimeExports.jsx(
-    "form",
-    {
-      id: "pnkx-form",
-      onSubmit: (e) => {
-        e.preventDefault();
-        onSubmit?.(e);
-      },
-      method: "POST",
-      children
-    }
-  ) : children });
-};
-
-const Popconfirm = ({ children, ...rest }) => {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(Popconfirm$1, { ...rest, children });
-};
-
-const QRCode = (props) => {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(QRCode$1, { ...props });
-};
-
-const Result = ({ children, ...rest }) => {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(Result$1, { ...rest, children });
-};
-
-const Rate = (props) => {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(Rate$1, { ...props });
-};
-
-const Segmented = (props) => {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(Segmented$1, { ...props });
-};
-
-const Statistic = (props) => {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(Statistic$1, { ...props });
-};
-
-const Timeline = (props) => {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(Timeline$1, { ...props });
-};
-
-const Tour = (props) => {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(Tour$1, { ...props });
-};
-
-const Tree = (props) => {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(Tree$1, { ...props });
-};
-
-const Watermark = ({ ...rest }) => {
-  const { Paragraph } = Typography$1;
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(Flex$1, { gap: "middle", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Watermark$1, { ...rest, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs(Typography$1, { children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(Paragraph, { children: "The light-speed iteration of the digital world makes products more complex. However, human consciousness and attention resources are limited. Facing this design contradiction, the pursuit of natural interaction will be the consistent direction of Ant Design." }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(Paragraph, { children: "Natural user cognition: According to cognitive psychology, about 80% of external information is obtained through visual channels. The most important visual elements in the interface design, including layout, colors, illustrations, icons, etc., should fully absorb the laws of nature, thereby reducing the user's cognitive cost and bringing authentic and smooth feelings. In some scenarios, opportunely adding other sensory channels such as hearing, touch can create a richer and more natural product experience." }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(Paragraph, { children: "Natural user behavior: In the interaction with the system, the designer should fully understand the relationship between users, system roles, and task objectives, and also contextually organize system functions and services. At the same time, a series of methods such as behavior analysis, artificial intelligence and sensors could be applied to assist users to make effective decisions and reduce extra operations of users, to save users' mental and physical resources and make human-computer interaction more natural." })
-    ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "img",
-      {
-        style: {
-          zIndex: 10,
-          width: "100%",
-          maxWidth: 800,
-          position: "relative"
-        },
-        src: "https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*zx7LTI_ECSAAAAAAAAAAAABkARQnAQ",
-        alt: "img"
-      }
-    )
-  ] }) });
-};
-
-const AnchorContext = /*#__PURE__*/React.createContext(undefined);
-
-const AnchorLink = props => {
-  const {
-    href,
-    title,
-    prefixCls: customizePrefixCls,
-    children,
-    className,
-    target,
-    replace
-  } = props;
-  const context = React.useContext(AnchorContext);
-  const {
-    registerLink,
-    unregisterLink,
-    scrollTo,
-    onClick,
-    activeLink,
-    direction
-  } = context || {};
-  React.useEffect(() => {
-    registerLink === null || registerLink === void 0 ? void 0 : registerLink(href);
-    return () => {
-      unregisterLink === null || unregisterLink === void 0 ? void 0 : unregisterLink(href);
-    };
-  }, [href]);
-  const handleClick = e => {
-    onClick === null || onClick === void 0 ? void 0 : onClick(e, {
-      title,
-      href
-    });
-    scrollTo === null || scrollTo === void 0 ? void 0 : scrollTo(href);
-    // Support clicking on an anchor does not record history.
-    if (e.defaultPrevented) {
-      return;
-    }
-    const isExternalLink = href.startsWith('http://') || href.startsWith('https://');
-    // Support external link
-    if (isExternalLink) {
-      if (replace) {
-        e.preventDefault();
-        window.location.replace(href);
-      }
-      return;
-    }
-    // Handling internal anchor link
-    e.preventDefault();
-    const historyMethod = replace ? 'replaceState' : 'pushState';
-    window.history[historyMethod](null, '', href);
-  };
-  // =================== Warning =====================
-  if (process.env.NODE_ENV !== 'production') {
-    const warning = devUseWarning('Anchor.Link');
-    process.env.NODE_ENV !== "production" ? warning(!children || direction !== 'horizontal', 'usage', '`Anchor.Link children` is not supported when `Anchor` direction is horizontal') : void 0;
-  }
-  const {
-    getPrefixCls
-  } = React.useContext(ConfigContext);
-  const prefixCls = getPrefixCls('anchor', customizePrefixCls);
-  const active = activeLink === href;
-  const wrapperClassName = classNames(`${prefixCls}-link`, className, {
-    [`${prefixCls}-link-active`]: active
-  });
-  const titleClassName = classNames(`${prefixCls}-link-title`, {
-    [`${prefixCls}-link-title-active`]: active
-  });
-  return /*#__PURE__*/React.createElement("div", {
-    className: wrapperClassName
-  }, /*#__PURE__*/React.createElement("a", {
-    className: titleClassName,
-    href: href,
-    title: typeof title === 'string' ? title : '',
-    target: target,
-    onClick: handleClick
-  }, title), direction !== 'horizontal' ? children : null);
-};
-
-const AnchorComponent = (props) => {
-  const { containerClassName, spaceClassName, ...restProps } = props;
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: containerClassName, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Anchor$1, { className: spaceClassName, ...restProps }) });
-};
-AnchorComponent.Link = AnchorLink;
-const Anchor = AnchorComponent;
-
-const Appfix = ({ children, ...rest }) => {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(Affix, { ...rest, children });
-};
-
-const AutoComplete = (props) => {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(AutoComplete$1, { ...props, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Input$1, {}) });
-};
-
-const PnkxCollapse = (props) => {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(Collapse, { ...props });
-};
-
-const PnkxColorPicker = (props) => {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(ColorPicker, { ...props });
-};
-
-const Empty = (props) => {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(Empty$2, { ...props });
-};
-
-const Image = (props) => {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(Image$1, { ...props });
-};
-
-const ConfirmModal = ({
-  title,
-  content,
-  typeIcon,
-  titleCancelBtn = "Huỷ bỏ",
-  titleSubmitBtn = "Xác nhận",
-  handleCancel,
-  handleSubmit,
-  ...restProps
-}) => {
-  //! State
-  const IconType = () => {
-    switch (typeIcon) {
-      case "success":
-        return /* @__PURE__ */ jsxRuntimeExports.jsx(
-          "svg",
-          {
-            xmlns: "http://www.w3.org/2000/svg",
-            width: "24",
-            height: "24",
-            viewBox: "0 0 24 24",
-            fill: "none",
-            children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-              "path",
-              {
-                d: "M12 1.5C6.20156 1.5 1.5 6.20156 1.5 12C1.5 17.7984 6.20156 22.5 12 22.5C17.7984 22.5 22.5 17.7984 22.5 12C22.5 6.20156 17.7984 1.5 12 1.5ZM16.5352 8.57109L11.5992 15.4148C11.5302 15.5111 11.4393 15.5896 11.3339 15.6437C11.2286 15.6978 11.1118 15.7261 10.9934 15.7261C10.8749 15.7261 10.7582 15.6978 10.6528 15.6437C10.5474 15.5896 10.4565 15.5111 10.3875 15.4148L7.46484 11.3648C7.37578 11.2406 7.46484 11.0672 7.61719 11.0672H8.71641C8.95547 11.0672 9.18281 11.182 9.32344 11.3789L10.9922 13.6945L14.6766 8.58516C14.8172 8.39062 15.0422 8.27344 15.2836 8.27344H16.3828C16.5352 8.27344 16.6242 8.44688 16.5352 8.57109Z",
-                fill: "#52C41A"
-              }
-            )
-          }
-        );
-      case "error":
-        return /* @__PURE__ */ jsxRuntimeExports.jsx(
-          "svg",
-          {
-            xmlns: "http://www.w3.org/2000/svg",
-            width: "24",
-            height: "24",
-            viewBox: "0 0 24 24",
-            fill: "none",
-            children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-              "path",
-              {
-                d: "M12 1.5C6.20156 1.5 1.5 6.20156 1.5 12C1.5 17.7984 6.20156 22.5 12 22.5C17.7984 22.5 22.5 17.7984 22.5 12C22.5 6.20156 17.7984 1.5 12 1.5ZM15.8766 15.9891L14.3297 15.982L12 13.2047L9.67266 15.9797L8.12344 15.9867C8.02031 15.9867 7.93594 15.9047 7.93594 15.7992C7.93594 15.7547 7.95234 15.7125 7.98047 15.6773L11.0297 12.0445L7.98047 8.41406C7.95215 8.37971 7.93643 8.3367 7.93594 8.29219C7.93594 8.18906 8.02031 8.10469 8.12344 8.10469L9.67266 8.11172L12 10.8891L14.3273 8.11406L15.8742 8.10703C15.9773 8.10703 16.0617 8.18906 16.0617 8.29453C16.0617 8.33906 16.0453 8.38125 16.0172 8.41641L12.9727 12.0469L16.0195 15.6797C16.0477 15.7148 16.0641 15.757 16.0641 15.8016C16.0641 15.9047 15.9797 15.9891 15.8766 15.9891Z",
-                fill: "#FF4D4F"
-              }
-            )
-          }
-        );
-      case "info":
-        return /* @__PURE__ */ jsxRuntimeExports.jsx(
-          "svg",
-          {
-            xmlns: "http://www.w3.org/2000/svg",
-            width: "24",
-            height: "24",
-            viewBox: "0 0 24 24",
-            fill: "none",
-            children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-              "path",
-              {
-                d: "M12 1.5C6.20156 1.5 1.5 6.20156 1.5 12C1.5 17.7984 6.20156 22.5 12 22.5C17.7984 22.5 22.5 17.7984 22.5 12C22.5 6.20156 17.7984 1.5 12 1.5ZM12.75 17.0625C12.75 17.1656 12.6656 17.25 12.5625 17.25H11.4375C11.3344 17.25 11.25 17.1656 11.25 17.0625V10.6875C11.25 10.5844 11.3344 10.5 11.4375 10.5H12.5625C12.6656 10.5 12.75 10.5844 12.75 10.6875V17.0625ZM12 9C11.7056 8.99399 11.4253 8.87282 11.2192 8.6625C11.0132 8.45218 10.8977 8.16945 10.8977 7.875C10.8977 7.58055 11.0132 7.29782 11.2192 7.0875C11.4253 6.87718 11.7056 6.75601 12 6.75C12.2944 6.75601 12.5747 6.87718 12.7808 7.0875C12.9868 7.29782 13.1023 7.58055 13.1023 7.875C13.1023 8.16945 12.9868 8.45218 12.7808 8.6625C12.5747 8.87282 12.2944 8.99399 12 9Z",
-                fill: "#1677FF"
-              }
-            )
-          }
-        );
-      case "warning":
-        return /* @__PURE__ */ jsxRuntimeExports.jsx(
-          "svg",
-          {
-            xmlns: "http://www.w3.org/2000/svg",
-            width: "24",
-            height: "24",
-            viewBox: "0 0 24 24",
-            fill: "none",
-            children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-              "path",
-              {
-                d: "M12 1.5C6.20156 1.5 1.5 6.20156 1.5 12C1.5 17.7984 6.20156 22.5 12 22.5C17.7984 22.5 22.5 17.7984 22.5 12C22.5 6.20156 17.7984 1.5 12 1.5ZM11.25 6.9375C11.25 6.83437 11.3344 6.75 11.4375 6.75H12.5625C12.6656 6.75 12.75 6.83437 12.75 6.9375V13.3125C12.75 13.4156 12.6656 13.5 12.5625 13.5H11.4375C11.3344 13.5 11.25 13.4156 11.25 13.3125V6.9375ZM12 17.25C11.7056 17.244 11.4253 17.1228 11.2192 16.9125C11.0132 16.7022 10.8977 16.4195 10.8977 16.125C10.8977 15.8305 11.0132 15.5478 11.2192 15.3375C11.4253 15.1272 11.7056 15.006 12 15C12.2944 15.006 12.5747 15.1272 12.7808 15.3375C12.9868 15.5478 13.1023 15.8305 13.1023 16.125C13.1023 16.4195 12.9868 16.7022 12.7808 16.9125C12.5747 17.1228 12.2944 17.244 12 17.25Z",
-                fill: "#FAAD14"
-              }
-            )
-          }
-        );
-    }
-  };
-  //! Function
-  //! Render
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(Modal, { ...restProps, footer: null, closeIcon: null, width: 400, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-3", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(IconType, {}),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "text-base font-semibold", children: title }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm", children: content })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-2 w-full justify-end items-end pt-3", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { shape: "round", onClick: handleCancel, children: titleCancelBtn }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { shape: "round", type: "primary", onClick: handleSubmit, children: titleSubmitBtn })
-    ] })
-  ] }) });
-};
-
-var CATEGORY_LIST_ENUM = /* @__PURE__ */ ((CATEGORY_LIST_ENUM2) => {
-  CATEGORY_LIST_ENUM2[CATEGORY_LIST_ENUM2["DRAFT"] = 0] = "DRAFT";
-  CATEGORY_LIST_ENUM2[CATEGORY_LIST_ENUM2["WATING_APPROVAL"] = 1] = "WATING_APPROVAL";
-  CATEGORY_LIST_ENUM2[CATEGORY_LIST_ENUM2["ACTIVE"] = 2] = "ACTIVE";
-  CATEGORY_LIST_ENUM2[CATEGORY_LIST_ENUM2["INACTIVE"] = 3] = "INACTIVE";
-  CATEGORY_LIST_ENUM2[CATEGORY_LIST_ENUM2["REJECT"] = 4] = "REJECT";
-  CATEGORY_LIST_ENUM2[CATEGORY_LIST_ENUM2["DELETE"] = 5] = "DELETE";
-  return CATEGORY_LIST_ENUM2;
-})(CATEGORY_LIST_ENUM || {});
-
-const BulkAction = ({
-  quantity,
-  handleRestore,
-  handleSendApproval,
-  handleCancelSendApproval,
-  handleRefuseApproval,
-  handleApproval,
-  handleCancelApproval,
-  handleDelete,
-  handleActivate,
-  handleInActivate,
-  status
-}) => {
-  //! State
-  const listIcon = [
-    {
-      icon: /* @__PURE__ */ jsxRuntimeExports.jsx(RestoreIcon, { stroke: "white" }),
-      action: handleRestore,
-      showConfirmModal: false,
-      title: "Khôi phục",
-      arrShow: [CATEGORY_LIST_ENUM?.DELETE, CATEGORY_LIST_ENUM?.REJECT]
-    },
-    {
-      icon: /* @__PURE__ */ jsxRuntimeExports.jsx(SendApprovalIcon, { stroke: "white" }),
-      action: handleSendApproval,
-      showConfirmModal: true,
-      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 mục này không?",
-      arrShow: [CATEGORY_LIST_ENUM?.DRAFT]
-    },
-    {
-      icon: /* @__PURE__ */ jsxRuntimeExports.jsx(CancelSendApprovalIcon, { stroke: "white" }),
-      action: handleCancelSendApproval,
-      showConfirmModal: true,
-      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 mục này không?",
-      arrShow: [CATEGORY_LIST_ENUM?.WATING_APPROVAL]
-    },
-    {
-      icon: /* @__PURE__ */ jsxRuntimeExports.jsx(RefuseApprovalIcon, { stroke: "white" }),
-      action: handleRefuseApproval,
-      showConfirmModal: true,
-      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 mục này không? Hành động này không thể hoàn tác.",
-      arrShow: [CATEGORY_LIST_ENUM?.WATING_APPROVAL]
-    },
-    {
-      icon: /* @__PURE__ */ jsxRuntimeExports.jsx(ApprovalIcon, { stroke: "white" }),
-      action: handleApproval,
-      showConfirmModal: true,
-      typeIcon: "info",
-      title: "Xác nhận duyệt",
-      content: "Bạn có chắc chắn muốn duyệt mục này không?",
-      arrShow: [CATEGORY_LIST_ENUM?.WATING_APPROVAL]
-    },
-    {
-      icon: /* @__PURE__ */ jsxRuntimeExports.jsx(CancelApprovalIcon, { stroke: "white" }),
-      action: handleCancelApproval,
-      showConfirmModal: true,
-      typeIcon: "error",
-      title: "Xác nhận hủy duyệt",
-      content: "Bạn có chắc chắn muốn hủy duyệt mục này không?",
-      arrShow: [CATEGORY_LIST_ENUM?.ACTIVE]
-    },
-    {
-      icon: /* @__PURE__ */ jsxRuntimeExports.jsx(DeleteIcon, { fill: "white" }),
-      action: handleDelete,
-      showConfirmModal: true,
-      typeIcon: "error",
-      title: "Xác nhận xóa",
-      content: "Bạn có chắc chắn muốn xóa mục này 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
-      ]
-    },
-    {
-      icon: /* @__PURE__ */ jsxRuntimeExports.jsx(ActivateIcon, { stroke: "white" }),
-      action: handleActivate,
-      showConfirmModal: true,
-      typeIcon: "info",
-      title: "Xác nhận kích hoạt",
-      content: "Bạn có chắc chắn muốn kích hoạt mục này không?",
-      arrShow: [CATEGORY_LIST_ENUM?.INACTIVE]
-    },
+      "div",
+      {
+        className: twMerge(
+          collapse && openSubCollapse ? "ml-18" : "",
+          "flex-1 p-4 h-screen overflow-y-auto scrollbar-none"
+        ),
+        children
+      }
+    )
+  ] });
+};
+
+const Tag = (props) => {
+  const { children, ...rest } = props;
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(Tag$1, { ...rest, children: [
+    " ",
+    children
+  ] });
+};
+
+const Alert = (props) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Alert$1, { ...props });
+};
+
+const Spin = ({ children, ...rest }) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Spin$1, { ...rest, children });
+};
+
+const Drawer = ({ onSubmit, children, ...rest }) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Drawer$1, { ...rest, children: onSubmit ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "form",
     {
-      icon: /* @__PURE__ */ jsxRuntimeExports.jsx(InActiveIcon, { stroke: "white" }),
-      action: handleInActivate,
-      showConfirmModal: true,
-      typeIcon: "info",
-      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 mục này không?",
-      arrShow: [CATEGORY_LIST_ENUM?.ACTIVE]
-    }
-  ];
-  const [open, setOpen] = useState(false);
-  const [notifyContent, setNotifyContent] = useState({
-    title: "",
-    content: "",
-    typeIcon: "info",
-    handleCancel: () => {
-    },
-    handleSubmit: () => {
+      id: "pnkx-form",
+      onSubmit: (e) => {
+        e.preventDefault();
+        onSubmit?.(e);
+      },
+      method: "POST",
+      children
     }
-  });
-  //! Function
-  const IsShow = (arrStatus) => {
-    return arrStatus.includes(status);
-  };
-  //! Render
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-full flex justify-center items-center", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3 px-[10px] py-3 bg-[#2561ED] rounded-lg w-fit", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-white px-3", children: [
-      "Đã chọn: ",
-      quantity
+  ) : children });
+};
+
+const Popconfirm = ({ children, ...rest }) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Popconfirm$1, { ...rest, children });
+};
+
+const QRCode = (props) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(QRCode$1, { ...props });
+};
+
+const Result = ({ children, ...rest }) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Result$1, { ...rest, children });
+};
+
+const Rate = (props) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Rate$1, { ...props });
+};
+
+const Segmented = (props) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Segmented$1, { ...props });
+};
+
+const Statistic = (props) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Statistic$1, { ...props });
+};
+
+const Timeline = (props) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Timeline$1, { ...props });
+};
+
+const Tour = (props) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Tour$1, { ...props });
+};
+
+const Tree = (props) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Tree$1, { ...props });
+};
+
+const Watermark = ({ ...rest }) => {
+  const { Paragraph } = Typography;
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Flex$1, { gap: "middle", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Watermark$1, { ...rest, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(Typography, { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Paragraph, { children: "The light-speed iteration of the digital world makes products more complex. However, human consciousness and attention resources are limited. Facing this design contradiction, the pursuit of natural interaction will be the consistent direction of Ant Design." }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Paragraph, { children: "Natural user cognition: According to cognitive psychology, about 80% of external information is obtained through visual channels. The most important visual elements in the interface design, including layout, colors, illustrations, icons, etc., should fully absorb the laws of nature, thereby reducing the user's cognitive cost and bringing authentic and smooth feelings. In some scenarios, opportunely adding other sensory channels such as hearing, touch can create a richer and more natural product experience." }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Paragraph, { children: "Natural user behavior: In the interaction with the system, the designer should fully understand the relationship between users, system roles, and task objectives, and also contextually organize system functions and services. At the same time, a series of methods such as behavior analysis, artificial intelligence and sensors could be applied to assist users to make effective decisions and reduce extra operations of users, to save users' mental and physical resources and make human-computer interaction more natural." })
     ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-5 border-l border-white mx-1" }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center space-x-3", children: listIcon.map(
-      (item, index) => IsShow(item?.arrShow) && /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip, { title: item?.title, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-        "button",
-        {
-          className: "p-1 rounded-sm  transition duration-200 cursor-pointer hover:bg-[#1B4ACB] hover:rounded-sm",
-          onClick: item?.showConfirmModal ? () => {
-            setOpen(true);
-            setNotifyContent({
-              title: item?.title || "",
-              content: item?.content || "",
-              typeIcon: item?.typeIcon,
-              handleCancel: () => {
-                setOpen(false);
-              },
-              handleSubmit: item?.action
-            });
-          } : item?.action,
-          children: item.icon
-        },
-        index
-      ) })
-    ) }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(
-      ConfirmModal,
+      "img",
       {
-        title: notifyContent?.title,
-        content: notifyContent?.content,
-        typeIcon: notifyContent?.typeIcon,
-        open,
-        handleCancel: notifyContent?.handleCancel,
-        handleSubmit: notifyContent?.handleSubmit
+        style: {
+          zIndex: 10,
+          width: "100%",
+          maxWidth: 800,
+          position: "relative"
+        },
+        src: "https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*zx7LTI_ECSAAAAAAAAAAAABkARQnAQ",
+        alt: "img"
       }
     )
   ] }) });
 };
 
+const AnchorContext = /*#__PURE__*/React.createContext(undefined);
+
+const AnchorLink = props => {
+  const {
+    href,
+    title,
+    prefixCls: customizePrefixCls,
+    children,
+    className,
+    target,
+    replace
+  } = props;
+  const context = React.useContext(AnchorContext);
+  const {
+    registerLink,
+    unregisterLink,
+    scrollTo,
+    onClick,
+    activeLink,
+    direction
+  } = context || {};
+  React.useEffect(() => {
+    registerLink === null || registerLink === void 0 ? void 0 : registerLink(href);
+    return () => {
+      unregisterLink === null || unregisterLink === void 0 ? void 0 : unregisterLink(href);
+    };
+  }, [href]);
+  const handleClick = e => {
+    onClick === null || onClick === void 0 ? void 0 : onClick(e, {
+      title,
+      href
+    });
+    scrollTo === null || scrollTo === void 0 ? void 0 : scrollTo(href);
+    // Support clicking on an anchor does not record history.
+    if (e.defaultPrevented) {
+      return;
+    }
+    const isExternalLink = href.startsWith('http://') || href.startsWith('https://');
+    // Support external link
+    if (isExternalLink) {
+      if (replace) {
+        e.preventDefault();
+        window.location.replace(href);
+      }
+      return;
+    }
+    // Handling internal anchor link
+    e.preventDefault();
+    const historyMethod = replace ? 'replaceState' : 'pushState';
+    window.history[historyMethod](null, '', href);
+  };
+  // =================== Warning =====================
+  if (process.env.NODE_ENV !== 'production') {
+    const warning = devUseWarning('Anchor.Link');
+    process.env.NODE_ENV !== "production" ? warning(!children || direction !== 'horizontal', 'usage', '`Anchor.Link children` is not supported when `Anchor` direction is horizontal') : void 0;
+  }
+  const {
+    getPrefixCls
+  } = React.useContext(ConfigContext);
+  const prefixCls = getPrefixCls('anchor', customizePrefixCls);
+  const active = activeLink === href;
+  const wrapperClassName = classNames(`${prefixCls}-link`, className, {
+    [`${prefixCls}-link-active`]: active
+  });
+  const titleClassName = classNames(`${prefixCls}-link-title`, {
+    [`${prefixCls}-link-title-active`]: active
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    className: wrapperClassName
+  }, /*#__PURE__*/React.createElement("a", {
+    className: titleClassName,
+    href: href,
+    title: typeof title === 'string' ? title : '',
+    target: target,
+    onClick: handleClick
+  }, title), direction !== 'horizontal' ? children : null);
+};
+
+const AnchorComponent = (props) => {
+  const { containerClassName, spaceClassName, ...restProps } = props;
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: containerClassName, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Anchor$1, { className: spaceClassName, ...restProps }) });
+};
+AnchorComponent.Link = AnchorLink;
+const Anchor = AnchorComponent;
+
+const Appfix = ({ children, ...rest }) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Affix, { ...rest, children });
+};
+
+const AutoComplete = (props) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(AutoComplete$1, { ...props, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Input$1, {}) });
+};
+
+const PnkxCollapse = (props) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Collapse, { ...props });
+};
+
+const PnkxColorPicker = (props) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(ColorPicker, { ...props });
+};
+
+const Empty = (props) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Empty$2, { ...props });
+};
+
+const Image = (props) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Image$1, { ...props });
+};
+
 class ErrorBoundaryClass extends Component {
   constructor(props) {
     super(props);