@pnkx-lib/ui 1.9.35 → 1.9.37

package/es/chunks/{index-DqaASOI_.js → index-BnBtGpK2.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, e as classNames, 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-Ck9WdQgt.js';
-import { Button as Button$1, Cascader, Space as Space$1, Card, Skeleton as Skeleton$1, Modal as Modal$1, Tooltip as Tooltip$1, Popconfirm as Popconfirm$1, Typography, Table as Table$1, Tabs as Tabs$1, Popover as Popover$1, Badge as Badge$1, Col as Col$1, Row as Row$1, Dropdown as Dropdown$1, Breadcrumb as Breadcrumb$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, Divider as Divider$2, 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, 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 * 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';
@@ -2177,12 +2177,12 @@ const Skeleton = ({ type, skeletonButtonCount }) => {
         }
       ),
       /* @__PURE__ */ jsxRuntimeExports.jsx(Card, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(Space$1, { direction: "vertical", size: "middle", style: { width: "100%" }, children: renderInputs(10) }) }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { ...styles$1.rightAlign, marginTop: 20 }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton$1.Input, { size: "small", active: true }) })
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { ...styles$2.rightAlign, marginTop: 20 }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton$1.Input, { size: "small", active: true }) })
     ] });
   }
   return /* @__PURE__ */ jsxRuntimeExports.jsx(Card, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { display: "grid", rowGap: 8 }, children: renderInputs(3) }) });
 };
-const styles$1 = {
+const styles$2 = {
   rightAlign: {
     display: "flex",
     justifyContent: "flex-end",
@@ -6553,18 +6553,34 @@ const DragIcon = ({ stroke, fill }) => /* @__PURE__ */ jsxRuntimeExports.jsx("sv
   }
 ) });
 
-const SettingIcon = ({ stroke, fill }) => /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: 30, height: 30, fill: "none", 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(
-    "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"
-    }
-  )
-] });
+const SettingIcon = ({
+  stroke,
+  fill,
+  className,
+  onClick
+}) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 30,
+    height: 30,
+    fill: "none",
+    className,
+    onClick,
+    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(
+        "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"
+        }
+      )
+    ]
+  }
+);
 
 const SendApprovalIcon = ({ stroke, fill }) => /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: 22, height: 22, fill: "none", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
   "path",
@@ -9764,10 +9780,500 @@ 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ả"
+      }
+    )
+  ] });
+};
+
+const typeColorMap = {
+  error: "red",
+  info: "blue",
+  success: "green",
+  warning: "yellow"
+};
+const Badge = ({ type, children, customColor, ...rest }) => {
+  const color = type ? typeColorMap[type] : customColor;
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Badge$1, { color, ...rest, children });
+};
+
+const ButtonBadge = (props) => {
+  const { label, value, active, setKeyActive, keyActive } = props;
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    Button,
+    {
+      className: `ml-1 mt-1  !rounded-[8px] !text-[12px] ${active ? "!border-[#007BE5] !bg-[#E5F4FF] !font-medium" : "!border-[white] !shadow-none"}`,
+      onClick: () => setKeyActive(keyActive),
+      children: [
+        label,
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          Badge,
+          {
+            count: value,
+            color: `${active ? "#BDE3FF]" : "#EEEEF0"}`,
+            className: `!text-[#4D4D57] !rounded-[8px]
+            ${active ? `!bg-[#BDE3FF] ${styles$1.customBadgeActive}` : `!bg-[#EEEEF0] ${styles$1.customBadge}`}
+            `
+          }
+        )
+      ]
+    }
+  );
+};
+const GroupHeadingButton = (props) => {
+  const { keyActive, setKeyActive, items } = props;
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "pb-[15px]", children: items?.map((i, index) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+    ButtonBadge,
+    {
+      label: i.label,
+      value: i.value,
+      active: i.keyActive === keyActive,
+      setKeyActive,
+      keyActive: i.keyActive
+    },
+    index
+  )) });
+};
+
+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 }) });
+};
+
+const Heading = (props) => {
+  const {
+    rightContent,
+    children,
+    noBreadcum,
+    classNameWrapHeading,
+    breadcrumbItems
+  } = props;
+  //! State
+  //! Function
+  //! Render
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      "div",
+      {
+        className: classNames(
+          "flex justify-between items-end ",
+          classNameWrapHeading
+        ),
+        children: [
+          !noBreadcum && /* @__PURE__ */ jsxRuntimeExports.jsx(Breadcrumb, { items: breadcrumbItems }),
+          rightContent
+        ]
+      }
+    ),
+    children
+  ] });
+};
+
+function hasFalsyFieldsObject(obj) {
+  return Object.values(obj).every((value) => !value);
+}
+
 const Tooltip = ({ children, ...props }) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip$1, { ...props, children });
 };
 
+const IconSettingTable = (props) => {
+  const { showSetting, setOpenStting } = props;
+  if (showSetting) {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "w-5 mr-3 ", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip, { title: "Cài đặt hiển thị bảng", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      SettingIcon,
+      {
+        className: "cursor-pointer",
+        onClick: () => setOpenStting(true)
+      }
+    ) }) });
+  }
+  return null;
+};
+
+const Divider$1 = ({ children, ...rest }) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Divider$2, { ...rest, children });
+};
+
+const breadCrumb = [
+  {
+    href: "/main",
+    title: "Trang chủ"
+  },
+  {
+    href: "/category",
+    title: "Danh mục"
+  },
+  {
+    title: /* @__PURE__ */ jsxRuntimeExports.jsx("a", { href: "", children: "Danh mục thuộc tính" })
+  }
+];
+const HeadingTable = (props) => {
+  const {
+    filters,
+    handleSearch,
+    resetToInitialFilters,
+    setOpenStting,
+    showSetting,
+    keyActive,
+    setKeyActive,
+    groupHeadingButtonItems,
+    tagSearchItems,
+    setTagSearchItems
+  } = 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"
+        }
+      ),
+      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
+                }
+              )
+            ] })
+          }
+        ),
+        /* @__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(
+            IconSettingTable,
+            {
+              setOpenStting,
+              showSetting
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+
 const EditableCell = ({
   editing,
   dataIndex,
@@ -9829,6 +10335,13 @@ const Table = ({
   titleSettingTableModal,
   showSetting,
   setColumns,
+  resetToInitialFilters,
+  handleSearch,
+  groupHeadingButtonItems,
+  tagSearchItems,
+  setTagSearchItems,
+  setKeyActive,
+  keyActive,
   ...rest
 }) => {
   //! State
@@ -9894,7 +10407,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.Text, { type: "danger", children: " Huỷ bỏ" })
+              children: /* @__PURE__ */ jsxRuntimeExports.jsx(Typography$1.Text, { type: "danger", children: " Huỷ bỏ" })
             }
           ),
           /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { htmlType: "submit", variant: "text", color: "blue", children: "Lưu" })
@@ -9963,14 +10476,22 @@ const Table = ({
       /* @__PURE__ */ jsxRuntimeExports.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 settingDiv = () => {
-    if (showSetting) {
-      return /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "absolute right-0 top-[-50px] p-2 z-10", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip, { title: "Cài đặt hiển thị bảng", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SettingIcon, {}) }) });
-    }
-    return null;
-  };
   const tableContent = /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: twMerge(showSetting ? "relative" : ""), children: [
-    settingDiv(),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      HeadingTable,
+      {
+        filters,
+        handleSearch,
+        resetToInitialFilters,
+        setOpenStting,
+        showSetting,
+        groupHeadingButtonItems,
+        tagSearchItems,
+        setTagSearchItems,
+        keyActive,
+        setKeyActive
+      }
+    ),
     /* @__PURE__ */ jsxRuntimeExports.jsx(
       Table$1,
       {
@@ -10096,54 +10617,6 @@ 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,
@@ -10158,17 +10631,6 @@ const Container = ({
   );
 };
 
-const typeColorMap = {
-  error: "red",
-  info: "blue",
-  success: "green",
-  warning: "yellow"
-};
-const Badge = ({ type, children, customColor, ...rest }) => {
-  const color = type ? typeColorMap[type] : customColor;
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(Badge$1, { color, ...rest, children });
-};
-
 const Col = (props) => {
   const { colClassName, ...restProps } = props;
   return /* @__PURE__ */ jsxRuntimeExports.jsx(Col$1, { className: colClassName, ...restProps });
@@ -10184,11 +10646,6 @@ const Dropdown = (props) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: containerClassName, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Dropdown$1, { className: dropdownClassName, ...restProps }) });
 };
 
-const Breadcrumb = (props) => {
-  const { containerClassName, breadcrumbClassName, ...restProps } = props;
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: containerClassName, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Breadcrumb$1, { className: breadcrumbClassName, ...restProps }) });
-};
-
 const Flex = (props) => {
   const { containerClassName, flexClassName, ...restProps } = props;
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: containerClassName, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Flex$1, { className: flexClassName, ...restProps }) });
@@ -16183,12 +16640,12 @@ const MenuItem = (props) => /* @__PURE__ */ jsxRuntimeExports.jsx(Menu$1.Item, {
 MenuItem.displayName = "Menu.Item";
 const SubMenu = (props) => /* @__PURE__ */ jsxRuntimeExports.jsx(Menu$1.SubMenu, { ...props });
 SubMenu.displayName = "Menu.SubMenu";
-const Divider$1 = Menu$1.Divider;
+const Divider = Menu$1.Divider;
 const ItemGroup = Menu$1.ItemGroup;
 const MenuComp = MenuComponent;
 MenuComp.Item = MenuItem;
 MenuComp.SubMenu = SubMenu;
-MenuComp.Divider = Divider$1;
+MenuComp.Divider = Divider;
 MenuComp.ItemGroup = ItemGroup;
 const Menu = MenuComp;
 
@@ -16655,47 +17112,6 @@ const Sidebar = ({ children, menu }) => {
   ] });
 };
 
-const Heading = (props) => {
-  const {
-    rightContent,
-    children,
-    noBreadcum,
-    classNameWrapHeading,
-    breadcrumbItems
-  } = props;
-  //! State
-  //! Function
-  //! Render
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs(
-      "div",
-      {
-        className: classNames(
-          "flex justify-between items-end ",
-          classNameWrapHeading
-        ),
-        children: [
-          !noBreadcum && /* @__PURE__ */ jsxRuntimeExports.jsx(Breadcrumb, { items: breadcrumbItems }),
-          rightContent
-        ]
-      }
-    ),
-    children
-  ] });
-};
-
-const Tag = (props) => {
-  const { children, ...rest } = props;
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(Tag$1, { ...rest, children: [
-    " ",
-    children
-  ] });
-};
-
-const Divider = ({ children, ...rest }) => {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(Divider$2, { ...rest, children });
-};
-
 const Alert = (props) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsx(Alert$1, { ...props });
 };
@@ -16756,9 +17172,9 @@ const Tree = (props) => {
 };
 
 const Watermark = ({ ...rest }) => {
-  const { Paragraph } = Typography;
+  const { Paragraph } = Typography$1;
   return /* @__PURE__ */ jsxRuntimeExports.jsx(Flex$1, { gap: "middle", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Watermark$1, { ...rest, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs(Typography, { 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." })
@@ -17265,12 +17681,12 @@ const CategoryStatus = ({ status }) => {
     statusName
   }) => {
     return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: classNames(`w-3 h-3 rounded-sm `, color) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: twMerge("w-3 h-3 rounded-sm", color || "") }),
       /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm font-normal", children: statusName })
     ] }) });
   };
   //! Render
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(ItemStatus, { color: bagde.color, statusName: bagde.text }) });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(ItemStatus, { color: bagde?.color, statusName: bagde.text });
 };
 
 const ActionRowTable = ({
@@ -17342,4 +17758,4 @@ const ActionRowTable = ({
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: renderAction() });
 };
 
-export { Alert as A, Button as B, CascaderField as C, Dropdown as D, Anchor as E, Flex as F, Appfix as G, Heading as H, AutoComplete as I, PnkxCollapse as J, PnkxColorPicker as K, Layout as L, Modal as M, Empty as N, Image as O, Popover as P, QRCode as Q, Row as R, Skeleton as S, Table as T, BulkAction as U, ConfirmModal as V, Watermark as W, ErrorBoundary as X, CategoryStatus as Y, ActionRowTable as Z, Tooltip as a, Tabs as b, SearchFiltersForm as c, Container as d, Badge as e, Col as f, Breadcrumb as g, Space as h, Splitter as i, Menu as j, Pagination as k, Steps as l, Sidebar as m, Tag as n, Divider as o, Spin as p, Drawer as q, Popconfirm as r, Result as s, typeColorMap as t, Rate as u, Segmented as v, Statistic as w, Timeline as x, Tour as y, Tree as z };
+export { Alert as A, Button as B, CascaderField as C, Dropdown as D, Anchor as E, Flex as F, Appfix as G, Heading as H, AutoComplete as I, PnkxCollapse as J, PnkxColorPicker as K, Layout as L, Modal as M, Empty as N, Image as O, Popover as P, QRCode as Q, Row as R, Skeleton as S, Table as T, BulkAction as U, ConfirmModal as V, Watermark as W, ErrorBoundary as X, CategoryStatus as Y, ActionRowTable as Z, Tooltip as a, Tabs as b, SearchFiltersForm as c, Container as d, Badge as e, Col as f, Breadcrumb as g, Space as h, Splitter as i, Menu as j, Pagination as k, Steps as l, Sidebar as m, Tag as n, Divider$1 as o, Spin as p, Drawer as q, Popconfirm as r, Result as s, typeColorMap as t, Rate as u, Segmented as v, Statistic as w, Timeline as x, Tour as y, Tree as z };