@fctc/sme-widget-ui 1.0.7 → 1.0.9

package/dist/widgets.mjs

@@ -6707,9 +6707,9 @@ var PlayIcon = () => {
 import { jsx as jsx26, jsxs as jsxs14 } from "react/jsx-runtime";
 
 // src/icons/search-icon.tsx
-import { jsx as jsx27, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx27 } from "react/jsx-runtime";
 var SearchIcon = () => {
-  return /* @__PURE__ */ jsxs15(
+  return /* @__PURE__ */ jsx27(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -6717,28 +6717,19 @@ var SearchIcon = () => {
       height: "20",
       viewBox: "0 0 20 20",
       fill: "none",
-      children: [
-        /* @__PURE__ */ jsx27(
-          "path",
-          {
-            d: "M9.58334 18.1248C4.875 18.1248 1.04167 14.2915 1.04167 9.58317C1.04167 4.87484 4.875 1.0415 9.58334 1.0415C14.2917 1.0415 18.125 4.87484 18.125 9.58317C18.125 14.2915 14.2917 18.1248 9.58334 18.1248ZM9.58334 2.2915C5.55834 2.2915 2.29167 5.5665 2.29167 9.58317C2.29167 13.5998 5.55834 16.8748 9.58334 16.8748C13.6083 16.8748 16.875 13.5998 16.875 9.58317C16.875 5.5665 13.6083 2.2915 9.58334 2.2915Z",
-            fill: "#525252"
-          }
-        ),
-        /* @__PURE__ */ jsx27(
-          "path",
-          {
-            d: "M18.3333 18.9585C18.175 18.9585 18.0167 18.9002 17.8917 18.7752L16.225 17.1085C15.9833 16.8669 15.9833 16.4669 16.225 16.2252C16.4667 15.9835 16.8667 15.9835 17.1083 16.2252L18.775 17.8919C19.0167 18.1335 19.0167 18.5335 18.775 18.7752C18.65 18.9002 18.4917 18.9585 18.3333 18.9585Z",
-            fill: "#525252"
-          }
-        )
-      ]
+      children: /* @__PURE__ */ jsx27(
+        "path",
+        {
+          d: "M14.5232 13.4627L17.7355 16.6742L16.6742 17.7355L13.4627 14.5232C12.2678 15.4812 10.7815 16.0022 9.25 16C5.524 16 2.5 12.976 2.5 9.25C2.5 5.524 5.524 2.5 9.25 2.5C12.976 2.5 16 5.524 16 9.25C16.0022 10.7815 15.4812 12.2678 14.5232 13.4627ZM13.0187 12.9062C13.9706 11.9274 14.5021 10.6153 14.5 9.25C14.5 6.349 12.1502 4 9.25 4C6.349 4 4 6.349 4 9.25C4 12.1502 6.349 14.5 9.25 14.5C10.6153 14.5021 11.9274 13.9706 12.9062 13.0187L13.0187 12.9062Z",
+          fill: "#AEAEAE"
+        }
+      )
     }
   );
 };
 
 // src/icons/setting-icon.tsx
-import { jsx as jsx28, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs15 } from "react/jsx-runtime";
 
 // src/icons/star-filled-icon.tsx
 import { jsx as jsx29 } from "react/jsx-runtime";
@@ -6784,12 +6775,12 @@ var TriangleIcon = (props) => /* @__PURE__ */ jsx30(
 import { jsx as jsx31 } from "react/jsx-runtime";
 
 // src/icons/vector-icon.tsx
-import { jsx as jsx32, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs16 } from "react/jsx-runtime";
 
 // src/icons/zip-icon.tsx
-import { jsx as jsx33, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs17 } from "react/jsx-runtime";
 var ZipIcon = () => {
-  return /* @__PURE__ */ jsxs18(
+  return /* @__PURE__ */ jsxs17(
     "svg",
     {
       width: "40",
@@ -6798,8 +6789,8 @@ var ZipIcon = () => {
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
       children: [
-        /* @__PURE__ */ jsxs18("g", { clipPath: "url(#clip0_3042_66427)", children: [
-          /* @__PURE__ */ jsxs18("g", { filter: "url(#filter0_di_3042_66427)", children: [
+        /* @__PURE__ */ jsxs17("g", { clipPath: "url(#clip0_3042_66427)", children: [
+          /* @__PURE__ */ jsxs17("g", { filter: "url(#filter0_di_3042_66427)", children: [
             /* @__PURE__ */ jsx33(
               "path",
               {
@@ -6824,7 +6815,7 @@ var ZipIcon = () => {
               strokeWidth: "1.5"
             }
           ),
-          /* @__PURE__ */ jsxs18("g", { filter: "url(#filter1_i_3042_66427)", children: [
+          /* @__PURE__ */ jsxs17("g", { filter: "url(#filter1_i_3042_66427)", children: [
             /* @__PURE__ */ jsx33("mask", { id: "path-4-inside-1_3042_66427", fill: "white", children: /* @__PURE__ */ jsx33("path", { d: "M0 22C0 19.7909 1.79086 18 4 18H20C22.2091 18 24 19.7909 24 22V30C24 32.2091 22.2091 34 20 34H4C1.79086 34 0 32.2091 0 30V22Z" }) }),
             /* @__PURE__ */ jsx33(
               "path",
@@ -6851,8 +6842,8 @@ var ZipIcon = () => {
             )
           ] })
         ] }),
-        /* @__PURE__ */ jsxs18("defs", { children: [
-          /* @__PURE__ */ jsxs18(
+        /* @__PURE__ */ jsxs17("defs", { children: [
+          /* @__PURE__ */ jsxs17(
             "filter",
             {
               id: "filter0_di_3042_66427",
@@ -6930,7 +6921,7 @@ var ZipIcon = () => {
               ]
             }
           ),
-          /* @__PURE__ */ jsxs18(
+          /* @__PURE__ */ jsxs17(
             "filter",
             {
               id: "filter1_i_3042_66427",
@@ -6989,9 +6980,9 @@ var ZipIcon = () => {
 };
 
 // src/icons/empty-data.tsx
-import { jsx as jsx34, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs18 } from "react/jsx-runtime";
 var EmptyData = ({ className }) => {
-  return /* @__PURE__ */ jsxs19(
+  return /* @__PURE__ */ jsxs18(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -7000,7 +6991,7 @@ var EmptyData = ({ className }) => {
       viewBox: "0 0 120 140",
       fill: "none",
       children: [
-        /* @__PURE__ */ jsxs19("g", { clipPath: "url(#clip0_5603_10527)", children: [
+        /* @__PURE__ */ jsxs18("g", { clipPath: "url(#clip0_5603_10527)", children: [
           /* @__PURE__ */ jsx34("g", { filter: "url(#filter0_d_5603_10527)", children: /* @__PURE__ */ jsx34(
             "path",
             {
@@ -7033,7 +7024,7 @@ var EmptyData = ({ className }) => {
               )
             }
           ),
-          /* @__PURE__ */ jsxs19("g", { mask: "url(#mask0_5603_10527)", children: [
+          /* @__PURE__ */ jsxs18("g", { mask: "url(#mask0_5603_10527)", children: [
             /* @__PURE__ */ jsx34(
               "path",
               {
@@ -7098,7 +7089,7 @@ var EmptyData = ({ className }) => {
               )
             }
           ),
-          /* @__PURE__ */ jsx34("g", { mask: "url(#mask2_5603_10527)", children: /* @__PURE__ */ jsxs19("g", { opacity: "0.07", children: [
+          /* @__PURE__ */ jsx34("g", { mask: "url(#mask2_5603_10527)", children: /* @__PURE__ */ jsxs18("g", { opacity: "0.07", children: [
             /* @__PURE__ */ jsx34("path", { d: "M73.716 93H27V99.214H73.716V93Z", fill: "black" }),
             /* @__PURE__ */ jsx34("path", { d: "M95.812 101.699H27V107.913H95.812V101.699Z", fill: "black" }),
             /* @__PURE__ */ jsx34("path", { d: "M69.297 113.506H27V119.72H69.297V113.506Z", fill: "black" }),
@@ -7138,8 +7129,8 @@ var EmptyData = ({ className }) => {
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs19("defs", { children: [
-          /* @__PURE__ */ jsxs19(
+        /* @__PURE__ */ jsxs18("defs", { children: [
+          /* @__PURE__ */ jsxs18(
             "filter",
             {
               id: "filter0_d_5603_10527",
@@ -7197,7 +7188,7 @@ var EmptyData = ({ className }) => {
 };
 
 // src/icons/loading-icon.tsx
-import { jsx as jsx35, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs19 } from "react/jsx-runtime";
 var LoadingIcon = ({
   width = 15,
   height = 15,
@@ -7218,7 +7209,7 @@ var LoadingIcon = ({
         background: "transparent"
       },
       ...props,
-      children: /* @__PURE__ */ jsxs20("g", { children: [
+      children: /* @__PURE__ */ jsxs19("g", { children: [
         /* @__PURE__ */ jsx35(
           "circle",
           {
@@ -7249,8 +7240,8 @@ var LoadingIcon = ({
 };
 
 // src/icons/paid-icon.tsx
-import { jsx as jsx36, jsxs as jsxs21 } from "react/jsx-runtime";
-var PaidIcon = () => /* @__PURE__ */ jsxs21(
+import { jsx as jsx36, jsxs as jsxs20 } from "react/jsx-runtime";
+var PaidIcon = () => /* @__PURE__ */ jsxs20(
   "svg",
   {
     width: "208",
@@ -7259,7 +7250,7 @@ var PaidIcon = () => /* @__PURE__ */ jsxs21(
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     children: [
-      /* @__PURE__ */ jsxs21("g", { opacity: "0.5", filter: "url(#filter0_d_615_26793)", children: [
+      /* @__PURE__ */ jsxs20("g", { opacity: "0.5", filter: "url(#filter0_d_615_26793)", children: [
         /* @__PURE__ */ jsx36(
           "path",
           {
@@ -7335,8 +7326,8 @@ var PaidIcon = () => /* @__PURE__ */ jsxs21(
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs21("defs", { children: [
-        /* @__PURE__ */ jsxs21(
+      /* @__PURE__ */ jsxs20("defs", { children: [
+        /* @__PURE__ */ jsxs20(
           "filter",
           {
             id: "filter0_d_615_26793",
@@ -7433,13 +7424,13 @@ var PlaceHolderIcon = () => {
 };
 
 // src/icons/google-icon.tsx
-import { jsx as jsx38, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx38, jsxs as jsxs21 } from "react/jsx-runtime";
 var GoogleIcon = ({
   width = 20,
   height = 20,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs22(
+  return /* @__PURE__ */ jsxs21(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -7484,9 +7475,9 @@ var GoogleIcon = ({
 };
 
 // src/icons/eye-closed-icon.tsx
-import { jsx as jsx39, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs22 } from "react/jsx-runtime";
 var EyeClosedIcon = () => {
-  return /* @__PURE__ */ jsxs23(
+  return /* @__PURE__ */ jsxs22(
     "svg",
     {
       width: "20",
@@ -11677,7 +11668,7 @@ instance.use(Browser).use(initReactI18next).init({
 var i18n_default = instance;
 
 // src/widgets/advanced/table/table-group.tsx
-import { Fragment as Fragment2, jsx as jsx40, jsxs as jsxs24 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx40, jsxs as jsxs23 } from "react/jsx-runtime";
 var TableGroup = (props) => {
   const {
     handleExpandChildGroup,
@@ -11708,8 +11699,8 @@ var TableGroup = (props) => {
     pageGroup,
     setPageGroup
   } = props;
-  return /* @__PURE__ */ jsxs24(Fragment2, { children: [
-    /* @__PURE__ */ jsxs24(
+  return /* @__PURE__ */ jsxs23(Fragment2, { children: [
+    /* @__PURE__ */ jsxs23(
       "tr",
       {
         draggable: true,
@@ -11722,13 +11713,13 @@ var TableGroup = (props) => {
               colSpan: colEmptyGroup.fromStart ?? 1,
               style: { display: "table-cell" },
               className: "relative z-20 w-max whitespace-nowrap border-b border-gray-200 p-3 text-sm font-normal text-gray-900 h-[53px]",
-              children: /* @__PURE__ */ jsxs24(
+              children: /* @__PURE__ */ jsxs23(
                 "div",
                 {
                   style: { paddingLeft: leftPadding },
                   className: `flex items-center justify-between gap-2 font-medium ml-2 z-21`,
                   children: [
-                    /* @__PURE__ */ jsxs24("div", { className: "flex items-center gap-2", children: [
+                    /* @__PURE__ */ jsxs23("div", { className: "flex items-center gap-2", children: [
                       /* @__PURE__ */ jsx40(
                         TriangleIcon,
                         {
@@ -11805,7 +11796,7 @@ var TableGroup = (props) => {
 
 // src/widgets/advanced/table/table-row.tsx
 import { useEffect as useEffect2, useMemo as useMemo3, useRef as useRef2 } from "react";
-import { Fragment as Fragment3, jsx as jsx41, jsxs as jsxs25 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx41, jsxs as jsxs24 } from "react/jsx-runtime";
 var Row = (props) => {
   const {
     row,
@@ -11875,7 +11866,7 @@ var Row = (props) => {
     {
       "data-row-id": row?.id,
       className: `border-b border-[#e8e8e8] cursor-pointer`,
-      children: /* @__PURE__ */ jsxs25(Fragment3, { children: [
+      children: /* @__PURE__ */ jsxs24(Fragment3, { children: [
         isDisplayCheckbox && /* @__PURE__ */ jsx41(
           "td",
           {
@@ -11932,7 +11923,7 @@ var Row = (props) => {
 };
 
 // src/widgets/advanced/table/table-body.tsx
-import { jsx as jsx42, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx42, jsxs as jsxs25 } from "react/jsx-runtime";
 var TableBodyRow = (props) => {
   const {
     rows,
@@ -11956,7 +11947,8 @@ var TableBodyRow = (props) => {
     checked,
     isForm,
     typeCo,
-    selectedRowKeys
+    selectedRowKeys,
+    isEditTable
   } = props;
   const [isAutoSelect, setIsAutoSelect] = useState2(false);
   const rootStyle = getComputedStyle(document.documentElement);
@@ -12001,16 +11993,16 @@ var TableBodyRow = (props) => {
         checkedAll,
         setIsAutoSelect,
         isAutoSelect,
-        s: true,
         selectedRowKeysRef,
-        setSelectedRowKeys
+        setSelectedRowKeys,
+        isEditTable
       },
       `record-${index4}`
     );
-  }) : !isForm && /* @__PURE__ */ jsx42("tr", { children: /* @__PURE__ */ jsx42("td", { className: "w-full", colSpan: columns?.length + 2, children: /* @__PURE__ */ jsxs26(
+  }) : !isForm && /* @__PURE__ */ jsx42("tr", { children: /* @__PURE__ */ jsx42("td", { className: "w-full", colSpan: columns?.length + 2, children: /* @__PURE__ */ jsxs25(
     "div",
     {
-      className: `flex flex-col items-center justify-center gap-3 ${typeCo === "form" ? "my-6" : "my-20"}`,
+      className: `flex flex-col items-center justify-center gap-3 ${typeCo === "form" ? "my-6" : "my-2"}`,
       children: [
         /* @__PURE__ */ jsx42(EmptyData, { className: colorPrimary }),
         /* @__PURE__ */ jsx42("div", { className: "text-xl font-extrabold", children: i18n_default.t("empty_data") })
@@ -12019,7 +12011,7 @@ var TableBodyRow = (props) => {
   ) }) });
 };
 var TableBody = (props) => {
-  return /* @__PURE__ */ jsx42("tbody", { className: "overflow-hidden", children: /* @__PURE__ */ jsx42(TableBodyRow, { ...props }) });
+  return /* @__PURE__ */ jsx42("tbody", { className: "overflow-hidden z-0", children: /* @__PURE__ */ jsx42(TableBodyRow, { ...props }) });
 };
 
 // src/widgets/advanced/table/table-filter.tsx
@@ -12059,7 +12051,7 @@ var useClickOutside = ({
 };
 
 // src/widgets/advanced/table/table-filter.tsx
-import { jsx as jsx43, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs26 } from "react/jsx-runtime";
 var TableFilter = ({ columns, onToggleColumnOptional }) => {
   const [openTableFilter, setOpenTableFilter] = useState3();
   const [filterPosition, setFilterPosition] = useState3(null);
@@ -12091,7 +12083,7 @@ var TableFilter = ({ columns, onToggleColumnOptional }) => {
       window.removeEventListener("resize", updatePosition);
     };
   }, [filterRef, openTableFilter]);
-  return /* @__PURE__ */ jsxs27(
+  return /* @__PURE__ */ jsxs26(
     "div",
     {
       ref: filterRef,
@@ -12108,7 +12100,7 @@ var TableFilter = ({ columns, onToggleColumnOptional }) => {
             onClick: () => {
               setOpenTableFilter(!openTableFilter);
             },
-            children: /* @__PURE__ */ jsxs27(
+            children: /* @__PURE__ */ jsxs26(
               "svg",
               {
                 xmlns: "http://www.w3.org/2000/svg",
@@ -12172,7 +12164,7 @@ var TableFilter = ({ columns, onToggleColumnOptional }) => {
               style: { top: filterPosition?.top, right: filterPosition?.right },
               className: "absolute z-[9999] flex w-[250px] h-auto max-h-[800%] overflow-auto flex-col gap-[16px] rounded-[8px] bg-[#fff] px-[24px] py-[16px] shadow-md",
               children: columns?.filter((val) => val?.optional !== void 0)?.map((item) => {
-                return /* @__PURE__ */ jsxs27("div", { className: "flex items-center gap-2", children: [
+                return /* @__PURE__ */ jsxs26("div", { className: "flex items-center gap-2", children: [
                   /* @__PURE__ */ jsx43(
                     "input",
                     {
@@ -12203,14 +12195,14 @@ var TableFilter = ({ columns, onToggleColumnOptional }) => {
 };
 
 // src/widgets/advanced/table/table-footer.tsx
-import { jsx as jsx44, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs27 } from "react/jsx-runtime";
 var TableFooter = ({ onAddRow, rows }) => {
   const emptyData = rows?.length <= 0;
   return /* @__PURE__ */ jsx44("tfoot", { children: /* @__PURE__ */ jsx44("tr", { className: `relative ${emptyData ? " h-20" : "h-14"}`, children: /* @__PURE__ */ jsx44(
     "td",
     {
       className: `absolute left-0 p-0 right-0 flex items-center ${emptyData ? "justify-center" : "justify-start"}`,
-      children: /* @__PURE__ */ jsxs28(
+      children: /* @__PURE__ */ jsxs27(
         "button",
         {
           type: "button",
@@ -12220,7 +12212,7 @@ var TableFooter = ({ onAddRow, rows }) => {
           },
           className: `button-primary m-2 flex ${!emptyData ? "!bg-white border border-primary " : ""}`,
           children: [
-            /* @__PURE__ */ jsxs28(
+            /* @__PURE__ */ jsxs27(
               "svg",
               {
                 style: {
@@ -12259,7 +12251,7 @@ var TableFooter = ({ onAddRow, rows }) => {
 };
 
 // src/widgets/advanced/table/table-head.tsx
-import { jsx as jsx45, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs28 } from "react/jsx-runtime";
 var TableHead = (props) => {
   const {
     handleCheckBoxAll,
@@ -12269,11 +12261,11 @@ var TableHead = (props) => {
     onRemoveRow,
     onToggleColumnOptional
   } = props;
-  return /* @__PURE__ */ jsx45("thead", { className: "relative z-[0]", children: /* @__PURE__ */ jsxs29(
+  return /* @__PURE__ */ jsx45("thead", { className: "relative z-10", children: /* @__PURE__ */ jsxs28(
     "tr",
     {
       style: { userSelect: "none", WebkitUserSelect: "none" },
-      className: "border-b-[1.5px] border-[#DEE7DD] sticky top-0 bg-[#eff1f2] z-[1]",
+      className: "border-b-[1.5px] border-[rgba(66,66,66,0.12)] sticky top-0 bg-white z-[1]",
       children: [
         isDisplayCheckbox && /* @__PURE__ */ jsx45(
           "th",
@@ -14159,7 +14151,7 @@ Button.displayName = "Button";
 
 // src/widgets/advanced/login/shared/text-input.tsx
 import { useState as useState4 } from "react";
-import { jsx as jsx47, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx47, jsxs as jsxs29 } from "react/jsx-runtime";
 function TextInput(props) {
   const {
     className,
@@ -14173,12 +14165,12 @@ function TextInput(props) {
     required
   } = props;
   const [showPassword, setShowPassword] = useState4(false);
-  return /* @__PURE__ */ jsxs30("div", { className: `flex justify-center gap-2 flex-col ${className}`, children: [
-    label && /* @__PURE__ */ jsxs30("label", { className: "text-[#262626] text-sm leading-5 font-semibold", children: [
+  return /* @__PURE__ */ jsxs29("div", { className: `flex justify-center gap-2 flex-col ${className}`, children: [
+    label && /* @__PURE__ */ jsxs29("label", { className: "text-[#262626] text-sm leading-5 font-semibold", children: [
       label,
       required ? /* @__PURE__ */ jsx47("span", { className: "text-[#ff4d4f]", children: "*" }) : ""
     ] }),
-    /* @__PURE__ */ jsxs30(
+    /* @__PURE__ */ jsxs29(
       "div",
       {
         className: `flex h-14 w-full items-center border border-[#E0E0E0] px-4 py-3 ${inputWrapperClassName}`,
@@ -14215,7 +14207,7 @@ function TextInput(props) {
 
 // src/widgets/advanced/login/provider/credential/form-options/index.tsx
 import { useEffect as useEffect5 } from "react";
-import { jsx as jsx48, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx48, jsxs as jsxs30 } from "react/jsx-runtime";
 var STAY_LOGIN_IN = "stayLoginIn";
 function FormOptions({
   forgotPasswordUrl,
@@ -14241,8 +14233,8 @@ function FormOptions({
   useEffect5(() => {
     localStorage.setItem(STAY_LOGIN_IN, "false");
   }, []);
-  return /* @__PURE__ */ jsxs31("div", { className: "flex justify-between items-center text-[#005aa9] text-sm leading-5 font-medium select-none", children: [
-    /* @__PURE__ */ jsxs31("label", { className: "flex gap-3", children: [
+  return /* @__PURE__ */ jsxs30("div", { className: "flex justify-between items-center text-[#005aa9] text-sm leading-5 font-medium select-none", children: [
+    /* @__PURE__ */ jsxs30("label", { className: "flex gap-3", children: [
       /* @__PURE__ */ jsx48(
         "input",
         {
@@ -14270,7 +14262,7 @@ var loginSchema = z.object({
 });
 
 // src/widgets/advanced/login/provider/credential/index.tsx
-import { Fragment as Fragment4, jsx as jsx49, jsxs as jsxs32 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx49, jsxs as jsxs31 } from "react/jsx-runtime";
 var CredentialLogin = (props) => {
   const {
     shouldRenderDivider,
@@ -14290,15 +14282,15 @@ var CredentialLogin = (props) => {
     mode: "onChange",
     resolver: s2(loginSchema)
   });
-  return /* @__PURE__ */ jsxs32(Fragment4, { children: [
-    /* @__PURE__ */ jsxs32(
+  return /* @__PURE__ */ jsxs31(Fragment4, { children: [
+    /* @__PURE__ */ jsxs31(
       "form",
       {
         onSubmit: handleSubmit(onSubmit ?? (() => {
         })),
         className: `flex w-full h-fit flex-col gap-10`,
         children: [
-          /* @__PURE__ */ jsxs32("div", { className: "flex flex-col gap-6", children: [
+          /* @__PURE__ */ jsxs31("div", { className: "flex flex-col gap-6", children: [
             /* @__PURE__ */ jsx49(
               TextInput,
               {
@@ -14347,7 +14339,7 @@ var CredentialLogin = (props) => {
         ]
       }
     ),
-    shouldRenderDivider && /* @__PURE__ */ jsxs32("div", { className: "flex justify-center relative", children: [
+    shouldRenderDivider && /* @__PURE__ */ jsxs31("div", { className: "flex justify-center relative", children: [
       /* @__PURE__ */ jsx49("div", { className: "absolute inset-x-0 top-[calc(50%-0.5px)] h-[0.8px] bg-gray-300" }),
       /* @__PURE__ */ jsx49("span", { className: "relative font-medium text-sm inline-block bg-white px-2.5 text-[#6e6e6e]", children: "ho\u1EB7c" })
     ] })
@@ -14355,10 +14347,10 @@ var CredentialLogin = (props) => {
 };
 
 // src/widgets/advanced/login/provider/google/google-btn/index.tsx
-import { jsx as jsx50, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx50, jsxs as jsxs32 } from "react/jsx-runtime";
 function GoogleButton(props) {
   const { onLoginGoogle, db } = props;
-  return /* @__PURE__ */ jsxs33(
+  return /* @__PURE__ */ jsxs32(
     "button",
     {
       className: "google-wrapper w-full active:scale-[0.97] cursor-pointer hover:bg-gray-100 scale-100 transition-all gap-2 p-4 border border-[#e5e7eb] rounded-[10px] flex items-center justify-center bg-white",
@@ -14380,22 +14372,22 @@ function SocialRedirect(props) {
 }
 
 // src/widgets/advanced/login/provider/google/index.tsx
-import { Fragment as Fragment6, jsx as jsx52, jsxs as jsxs34 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx52, jsxs as jsxs33 } from "react/jsx-runtime";
 var GoogleLogin = ({ db, onLoginSocial, onLoginGoogle }) => {
-  return /* @__PURE__ */ jsxs34(Fragment6, { children: [
+  return /* @__PURE__ */ jsxs33(Fragment6, { children: [
     /* @__PURE__ */ jsx52(GoogleButton, { db, onLoginGoogle }),
     /* @__PURE__ */ jsx52(SocialRedirect, { db, onLoginSocial })
   ] });
 };
 
 // src/widgets/advanced/login/index.tsx
-import { jsx as jsx53, jsxs as jsxs35 } from "react/jsx-runtime";
+import { jsx as jsx53, jsxs as jsxs34 } from "react/jsx-runtime";
 var LoginProviderMapping = {
   google: GoogleLogin
 };
 var Login = (props) => {
   const { providers = [], forgotPasswordUrl = "/", db, onLoginSocial, onLoginGoogle } = props;
-  return /* @__PURE__ */ jsxs35("div", { className: "w-full space-y-8", children: [
+  return /* @__PURE__ */ jsxs34("div", { className: "w-full space-y-8", children: [
     /* @__PURE__ */ jsx53(
       CredentialLogin,
       {
@@ -14420,7 +14412,7 @@ var Login = (props) => {
 };
 
 // src/widgets/advanced/search/popup-filter/index.tsx
-import { jsx as jsx54, jsxs as jsxs36 } from "react/jsx-runtime";
+import { jsx as jsx54, jsxs as jsxs35 } from "react/jsx-runtime";
 var PopupFilter = ({
   handleAddTagSearch,
   removeSearchItems,
@@ -14430,13 +14422,13 @@ var PopupFilter = ({
   setGroupBy,
   fields
 }) => {
-  return /* @__PURE__ */ jsx54("div", { className: "popup-filter absolute right-0 top-[calc(100%_+_3px)] z-[33] w-auto min-w-full overflow-x-auto rounded-lg border bg-white border-none shadow-xl", children: /* @__PURE__ */ jsxs36(
+  return /* @__PURE__ */ jsx54("div", { className: "popup-filter absolute right-0 top-[calc(100%_+_3px)] z-[33] w-auto min-w-full overflow-x-auto rounded-lg border bg-white border-none shadow-xl", children: /* @__PURE__ */ jsxs35(
     "div",
     {
       className: `flex py-3 ${(filterBy?.length === 0 || groupBy?.length === 0) && "!grid-cols-1"}`,
       children: [
-        filterBy?.length > 0 && /* @__PURE__ */ jsxs36("div", { className: "filter-by w-full px-3", children: [
-          /* @__PURE__ */ jsxs36("div", { className: "flex w-fit items-center justify-start gap-2 px-3 py-1", children: [
+        filterBy?.length > 0 && /* @__PURE__ */ jsxs35("div", { className: "filter-by w-full px-3", children: [
+          /* @__PURE__ */ jsxs35("div", { className: "flex w-fit items-center justify-start gap-2 px-3 py-1", children: [
             /* @__PURE__ */ jsx54(FilterIcon, { className: "filter-by-icon text-primary" }),
             /* @__PURE__ */ jsx54("span", { className: "font-bold text-sm text-[#212529]", children: instance.t("filter_by") })
           ] }),
@@ -14448,7 +14440,7 @@ var PopupFilter = ({
               acc.push(/* @__PURE__ */ jsx54("hr", { className: "my-2" }, "separator-" + index4));
             }
             acc.push(
-              /* @__PURE__ */ jsxs36(
+              /* @__PURE__ */ jsxs35(
                 "button",
                 {
                   className: `filter-by-item w-full flex items-center gap-2 bg-white px-3 py-1 text-left cursor-pointer ${isExist ? "filter-by-checked font-semibold " : "hover:!bg-[rgba(0,0,0,0.08)]"}`,
@@ -14484,15 +14476,15 @@ var PopupFilter = ({
           }, [])
         ] }),
         filterBy?.length > 0 && groupBy?.length > 0 && /* @__PURE__ */ jsx54("div", { className: "h-['initial'] w-[1px] bg-[#dee2e6]" }),
-        groupBy?.length > 0 && /* @__PURE__ */ jsxs36("div", { className: "group-by w-full px-3", children: [
-          /* @__PURE__ */ jsxs36("div", { className: "flex w-fit items-center justify-start gap-2 px-3 py-1", children: [
+        groupBy?.length > 0 && /* @__PURE__ */ jsxs35("div", { className: "group-by w-full px-3", children: [
+          /* @__PURE__ */ jsxs35("div", { className: "flex w-fit items-center justify-start gap-2 px-3 py-1", children: [
             /* @__PURE__ */ jsx54(GroupByIcon, { className: "group-by-icon text-primary" }),
             /* @__PURE__ */ jsx54("span", { className: "font-bold text-sm text-[#212529]", children: instance.t("group_by") })
           ] }),
           groupBy?.map((item, index4) => {
             const isExist = item?.active;
             if (!item.string) return;
-            return /* @__PURE__ */ jsxs36(
+            return /* @__PURE__ */ jsxs35(
               "button",
               {
                 onClick: () => {
@@ -14534,7 +14526,7 @@ import { useEffect as useEffect6, useState as useState5 } from "react";
 
 // src/widgets/advanced/search/tag-search/index.tsx
 import { Fragment as Fragment7 } from "react";
-import { Fragment as Fragment8, jsx as jsx55, jsxs as jsxs37 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx55, jsxs as jsxs36 } from "react/jsx-runtime";
 var TagSearch = ({
   removeSearchItems,
   selectedTags,
@@ -14544,16 +14536,16 @@ var TagSearch = ({
   return selectedTags?.length > 0 && selectedTags?.map((tag, index4) => {
     if (tag?.values?.length > 0) {
       if (tag?.type !== "group_by") {
-        return /* @__PURE__ */ jsxs37(
+        return /* @__PURE__ */ jsxs36(
           "div",
           {
             className: "flex min-h-full overflow-hidden rounded bg-[#E9ECEF] hover:shadow-xl",
             children: [
               /* @__PURE__ */ jsx55("div", { className: "bg-primary flex items-center justify-center px-2 text-sm font-semibold leading-[1.5] text-white", children: tag?.type === SearchType.SEARCH ? tag?.title : /* @__PURE__ */ jsx55(FilterIcon, {}) }),
               /* @__PURE__ */ jsx55("div", { className: "pl-2 align-middle text-[#495057] text-[14px]", children: tag.values.map((value, idx) => {
-                return /* @__PURE__ */ jsxs37(Fragment7, { children: [
+                return /* @__PURE__ */ jsxs36(Fragment7, { children: [
                   /* @__PURE__ */ jsx55("span", { children: value }),
-                  idx < tag.values.length - 1 && /* @__PURE__ */ jsxs37("span", { className: "text-sm italic text-[#495057] text-opacity-50", children: [
+                  idx < tag.values.length - 1 && /* @__PURE__ */ jsxs36("span", { className: "text-sm italic text-[#495057] text-opacity-50", children: [
                     " ",
                     instance.t("or"),
                     " "
@@ -14590,15 +14582,15 @@ var TagSearch = ({
           {
             className: "flex min-h-full overflow-hidden",
             children: /* @__PURE__ */ jsx55("div", { className: "flex flex-wrap items-center gap-2 align-middle text-[#495057] text-[14px]", children: tag?.values?.length > 0 && tag?.values.map(
-              (value, indexValue) => value?.strings?.length > 0 && /* @__PURE__ */ jsxs37(
+              (value, indexValue) => value?.strings?.length > 0 && /* @__PURE__ */ jsxs36(
                 "div",
                 {
                   className: "flex gap-2 overflow-hidden rounded bg-[#E9ECEF] hover:shadow-xl",
                   children: [
                     /* @__PURE__ */ jsx55("div", { className: "bg-primary flex items-center justify-center px-2 text-sm font-semibold leading-[1.5] text-white", children: /* @__PURE__ */ jsx55(GroupByIcon, {}) }),
-                    value?.strings?.map((string, idx) => /* @__PURE__ */ jsxs37(Fragment8, { children: [
+                    value?.strings?.map((string, idx) => /* @__PURE__ */ jsxs36(Fragment8, { children: [
                       /* @__PURE__ */ jsx55("span", { children: string }),
-                      idx < value?.strings.length - 1 && /* @__PURE__ */ jsxs37("span", { className: "text-sm italic text-[#495057] text-opacity-50", children: [
+                      idx < value?.strings.length - 1 && /* @__PURE__ */ jsxs36("span", { className: "text-sm italic text-[#495057] text-opacity-50", children: [
                         " ",
                         "> ",
                         " "
@@ -14630,7 +14622,7 @@ var TagSearch = ({
 };
 
 // src/widgets/advanced/search/search-list/index.tsx
-import { jsx as jsx56, jsxs as jsxs38 } from "react/jsx-runtime";
+import { jsx as jsx56, jsxs as jsxs37 } from "react/jsx-runtime";
 var SearchList = ({
   handleAddTagSearch,
   handleMouseEnter,
@@ -14648,7 +14640,7 @@ var SearchList = ({
           if (!validateAndParseDate(searchString, searchItem?.type === "datetime"))
             return;
         }
-        return /* @__PURE__ */ jsxs38(
+        return /* @__PURE__ */ jsxs37(
           "button",
           {
             onClick: () => {
@@ -14686,7 +14678,7 @@ var SearchList = ({
 };
 
 // src/widgets/advanced/search/search-item/index.tsx
-import { Fragment as Fragment9, jsx as jsx57, jsxs as jsxs39 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx57, jsxs as jsxs38 } from "react/jsx-runtime";
 var Search = ({
   removeSearchItems,
   selectedTags,
@@ -14783,19 +14775,19 @@ var Search = ({
     }
     setIsReadyFormatDomain(true);
   }, [aid, filterBy, fieldsList]);
-  return /* @__PURE__ */ jsxs39(
+  return /* @__PURE__ */ jsxs38(
     "div",
     {
       ref: popupFilterRef,
       className: `search ${selectedRowKeys?.length <= 0 ? "flex" : "hidden"} !order-3 xl:!order-2 bg-white custom-search-input relative items-center w-full min-w-[70%] flex-1 xl:min-w-[480px] xl:flex-1 rounded-[10px] bg-grey-100 shadow-[0px_1px_3px_rgba(16,24,40,0.1),0px_1px_2px_rgba(16,24,40,0.06)] min-h-[40px] border border-[#F2F2F2]`,
       children: [
-        /* @__PURE__ */ jsxs39(
+        /* @__PURE__ */ jsxs38(
           "div",
           {
             className: `relative flex md:min-w-[400px] max-w-full items-center gap-[8px] p-1 !pl-4 w-full ${(showFiltersGroups || filterBy?.length > 0 || groupBy?.length > 0) && "border-r border-[rgba(242,242,242,1)]"}`,
             children: [
               /* @__PURE__ */ jsx57("div", { className: "min-h-5 min-w-5", children: /* @__PURE__ */ jsx57(SearchIcon, {}) }),
-              /* @__PURE__ */ jsxs39("div", { className: "flex flex-1 flex-wrap items-center gap-[8px]", children: [
+              /* @__PURE__ */ jsxs38("div", { className: "flex flex-1 flex-wrap items-center gap-[8px]", children: [
                 /* @__PURE__ */ jsx57(
                   TagSearch,
                   {
@@ -14830,7 +14822,7 @@ var Search = ({
             ]
           }
         ),
-        (showFiltersGroups || filterBy?.length > 0 || groupBy?.length > 0) && /* @__PURE__ */ jsxs39(Fragment9, { children: [
+        (showFiltersGroups || filterBy?.length > 0 || groupBy?.length > 0) && /* @__PURE__ */ jsxs38(Fragment9, { children: [
           /* @__PURE__ */ jsx57(
             "div",
             {
@@ -16682,7 +16674,7 @@ var M = e2.forwardRef(({ id: t3, anchorId: l2, anchorSelect: n4, content: i3, ht
 // src/widgets/common/modal-layer.tsx
 import { Fragment as Fragment11 } from "react";
 import { Dialog, DialogPanel, Transition } from "@headlessui/react";
-import { jsx as jsx59, jsxs as jsxs40 } from "react/jsx-runtime";
+import { jsx as jsx59, jsxs as jsxs39 } from "react/jsx-runtime";
 var ModalLayer = ({
   isOpen,
   onClose,
@@ -16700,10 +16692,10 @@ var ModalLayer = ({
       leaveFrom: "transform scale-100 opacity-100",
       leaveTo: "transform scale-95 opacity-0",
       as: Fragment11,
-      children: /* @__PURE__ */ jsx59(Dialog, { onClose, "aria-labelledby": "modal-title", children: /* @__PURE__ */ jsx59(DialogPanel, { children: /* @__PURE__ */ jsxs40("div", { className: "fixed bottom-0 left-0 right-0 top-0 z-[500]", children: [
+      children: /* @__PURE__ */ jsx59(Dialog, { onClose, "aria-labelledby": "modal-title", children: /* @__PURE__ */ jsx59(DialogPanel, { children: /* @__PURE__ */ jsxs39("div", { className: "fixed bottom-0 left-0 right-0 top-0 z-[500]", children: [
         /* @__PURE__ */ jsx59("div", { className: "absolute inset-0 bg-[rgba(27,27,27,0.48)]" }),
-        /* @__PURE__ */ jsx59("div", { className: "flex items-center justify-center mx-4 absolute inset-0 overflow-auto", children: /* @__PURE__ */ jsxs40("div", { className: " relative z-[1] mx-auto my-[88px] p-4 flex flex-col gap-2 max-w-[1000px] transform rounded-xl bg-[#FFF]", children: [
-          /* @__PURE__ */ jsxs40(
+        /* @__PURE__ */ jsx59("div", { className: "flex items-center justify-center mx-4 absolute inset-0 overflow-auto", children: /* @__PURE__ */ jsxs39("div", { className: " relative z-[1] mx-auto my-[88px] p-4 flex flex-col gap-2 max-w-[1000px] transform rounded-xl bg-[#FFF]", children: [
+          /* @__PURE__ */ jsxs39(
             "div",
             {
               className: `flex justify-between items-center border-[rgba(0,0,0,0.1)] pb-2`,
@@ -16729,7 +16721,7 @@ var ModalLayer = ({
 };
 
 // src/widgets/common/modal-confirm.tsx
-import { jsx as jsx60, jsxs as jsxs41 } from "react/jsx-runtime";
+import { jsx as jsx60, jsxs as jsxs40 } from "react/jsx-runtime";
 var ModalConfirm = ({
   name: name2,
   isShowModal,
@@ -16742,7 +16734,7 @@ var ModalConfirm = ({
   const renderButtonAction = (name3) => {
     switch (name3) {
       case "duplicate":
-        return /* @__PURE__ */ jsxs41(
+        return /* @__PURE__ */ jsxs40(
           "button",
           {
             type: "button",
@@ -16756,7 +16748,7 @@ var ModalConfirm = ({
           }
         );
       case "archive":
-        return /* @__PURE__ */ jsxs41(
+        return /* @__PURE__ */ jsxs40(
           "button",
           {
             type: "button",
@@ -16770,7 +16762,7 @@ var ModalConfirm = ({
           }
         );
       case "unarchive":
-        return /* @__PURE__ */ jsxs41(
+        return /* @__PURE__ */ jsxs40(
           "button",
           {
             type: "button",
@@ -16784,7 +16776,7 @@ var ModalConfirm = ({
           }
         );
       case "delete":
-        return /* @__PURE__ */ jsxs41(
+        return /* @__PURE__ */ jsxs40(
           "button",
           {
             type: "button",
@@ -16801,12 +16793,12 @@ var ModalConfirm = ({
         break;
     }
   };
-  return /* @__PURE__ */ jsx60(ModalLayer, { isOpen: isShowModal, onClose, children: /* @__PURE__ */ jsxs41("div", { className: "mx-auto flex flex-col items-center justify-center gap-4", children: [
-    /* @__PURE__ */ jsxs41("div", { className: "flex flex-col gap-[4px] items-center", children: [
+  return /* @__PURE__ */ jsx60(ModalLayer, { isOpen: isShowModal, onClose, children: /* @__PURE__ */ jsxs40("div", { className: "mx-auto flex flex-col items-center justify-center gap-4", children: [
+    /* @__PURE__ */ jsxs40("div", { className: "flex flex-col gap-[4px] items-center", children: [
       /* @__PURE__ */ jsx60("div", { className: "text-[18px] font-bold", children: title }),
       /* @__PURE__ */ jsx60("p", { className: "text-[16px]", children: content })
     ] }),
-    /* @__PURE__ */ jsxs41("div", { className: "flex justify-center items-center gap-2 w-full", children: [
+    /* @__PURE__ */ jsxs40("div", { className: "flex justify-center items-center gap-2 w-full", children: [
       /* @__PURE__ */ jsx60(
         "button",
         {
@@ -16824,7 +16816,7 @@ var ModalConfirm = ({
 // src/widgets/common/modal-detail.tsx
 import { useState as useState6 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
-import { Fragment as Fragment12, jsx as jsx61, jsxs as jsxs42 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx61, jsxs as jsxs41 } from "react/jsx-runtime";
 var ModalDetail = ({
   idToolTip,
   title,
@@ -16846,11 +16838,11 @@ var ModalDetail = ({
     window.location.href = `/form/menu?model=${model}&id=${idForm}`;
   };
   return createPortal2(
-    /* @__PURE__ */ jsx61(Fragment12, { children: showModalDetail && /* @__PURE__ */ jsxs42("div", { className: "fixed bottom-0 left-0 right-0 top-0 z-[100]", children: [
+    /* @__PURE__ */ jsx61(Fragment12, { children: showModalDetail && /* @__PURE__ */ jsxs41("div", { className: "fixed bottom-0 left-0 right-0 top-0 z-[100]", children: [
       /* @__PURE__ */ jsx61("div", { className: "absolute inset-0 bg-[rgba(27,27,27,0.48)]" }),
-      /* @__PURE__ */ jsx61("div", { className: "absolute inset-0 overflow-auto flex flex-col justify-center items-center px-5", children: /* @__PURE__ */ jsxs42("div", { className: "relative z-[1] max-w-full p-4 flex flex-col gap-4 w-[1000px] transform rounded-3xl bg-[#FFF] h-[90%]", children: [
-        /* @__PURE__ */ jsxs42("div", { className: "flex justify-between items-center border-b border-[rgba(0,0,0,0.1)] pb-2", children: [
-          /* @__PURE__ */ jsxs42(
+      /* @__PURE__ */ jsx61("div", { className: "absolute inset-0 overflow-auto flex flex-col justify-center items-center px-5", children: /* @__PURE__ */ jsxs41("div", { className: "relative z-[1] max-w-full p-4 flex flex-col gap-4 w-[1000px] transform rounded-3xl bg-[#FFF] h-[90%]", children: [
+        /* @__PURE__ */ jsxs41("div", { className: "flex justify-between items-center border-b border-[rgba(0,0,0,0.1)] pb-2", children: [
+          /* @__PURE__ */ jsxs41(
             "div",
             {
               id: "modal-detail",
@@ -16885,7 +16877,7 @@ var ModalDetail = ({
 
 // src/widgets/common/loading-normal.tsx
 import { useEffect as useEffect7, useState as useState7 } from "react";
-import { jsx as jsx62, jsxs as jsxs43 } from "react/jsx-runtime";
+import { jsx as jsx62, jsxs as jsxs42 } from "react/jsx-runtime";
 var LayerLoading = () => {
   const [activeIndex, setActiveIndex] = useState7(0);
   useEffect7(() => {
@@ -16894,7 +16886,7 @@ var LayerLoading = () => {
     }, 200);
     return () => clearInterval(interval);
   }, []);
-  return /* @__PURE__ */ jsx62("div", { className: "my-auto flex-1 h-full flex justify-center items-center", children: /* @__PURE__ */ jsx62("div", { className: "flex justify-center items-center", children: /* @__PURE__ */ jsxs43("div", { className: "flex justify-center flex-col items-center gap-12", children: [
+  return /* @__PURE__ */ jsx62("div", { className: "my-auto flex-1 h-full flex justify-center items-center", children: /* @__PURE__ */ jsx62("div", { className: "flex justify-center items-center", children: /* @__PURE__ */ jsxs42("div", { className: "flex justify-center flex-col items-center gap-12", children: [
     /* @__PURE__ */ jsx62("div", { className: "loading-container", children: [...Array(6)].map((_2, index4) => /* @__PURE__ */ jsx62(
       "div",
       {
@@ -16928,7 +16920,7 @@ var LoadingSmall = () => {
 
 // src/widgets/common/video-player.tsx
 import { useRef as useRef5, useState as useState9 } from "react";
-import { jsx as jsx64, jsxs as jsxs44 } from "react/jsx-runtime";
+import { jsx as jsx64, jsxs as jsxs43 } from "react/jsx-runtime";
 var VideoPlayer = ({ src }) => {
   const [isPlaying, setIsPlaying] = useState9(false);
   const videoRef = useRef5(null);
@@ -16955,7 +16947,7 @@ var VideoPlayer = ({ src }) => {
       }
     }
   };
-  return /* @__PURE__ */ jsxs44("div", { className: "relative flex aspect-square h-[120px] w-[120px] items-center justify-center overflow-hidden rounded-lg max-sm:h-auto max-sm:w-full", children: [
+  return /* @__PURE__ */ jsxs43("div", { className: "relative flex aspect-square h-[120px] w-[120px] items-center justify-center overflow-hidden rounded-lg max-sm:h-auto max-sm:w-full", children: [
     /* @__PURE__ */ jsx64(
       "video",
       {
@@ -16974,7 +16966,7 @@ var VideoPlayer = ({ src }) => {
 };
 
 // src/widgets/common/render-files.tsx
-import { jsx as jsx65, jsxs as jsxs45 } from "react/jsx-runtime";
+import { jsx as jsx65, jsxs as jsxs44 } from "react/jsx-runtime";
 var ImageItem = ({ filename, checksum, index: index4, src = null, useGetImage }) => {
   const { data: image } = useGetImage({
     data: { filename, checksum },
@@ -17014,16 +17006,16 @@ var FileItem = (props) => {
     } else if (mimetype?.includes("video")) {
       return /* @__PURE__ */ jsx65(VideoPlayer, { ...props });
     } else {
-      return /* @__PURE__ */ jsxs45("div", { className: "flex bg-gray-200 items-center p-2 gap-2 overflow-hidden", children: [
+      return /* @__PURE__ */ jsxs44("div", { className: "flex bg-gray-200 items-center p-2 gap-2 overflow-hidden", children: [
         fileTypeIcon[mimetype],
-        /* @__PURE__ */ jsxs45("div", { children: [
+        /* @__PURE__ */ jsxs44("div", { children: [
           /* @__PURE__ */ jsx65("p", { className: "text-[#0A0D14] font-medium", children: filename }),
           /* @__PURE__ */ jsx65("span", { className: "text-[12px]", children: formatFileSize(size4) })
         ] })
       ] });
     }
   };
-  return /* @__PURE__ */ jsxs45(
+  return /* @__PURE__ */ jsxs44(
     "div",
     {
       className: "flex relative items-center overflow-hidden justify-between group rounded-md w-fit group/file",
@@ -17284,7 +17276,7 @@ var po = $2(K("zoom"));
 var uo = $2(K("flip"));
 
 // src/widgets/common/select-files.tsx
-import { Fragment as Fragment13, jsx as jsx66, jsxs as jsxs46 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx66, jsxs as jsxs45 } from "react/jsx-runtime";
 var ButtonSelectFiles = ({
   fileInputRef,
   selectedFiles,
@@ -17381,8 +17373,8 @@ var ButtonSelectFiles = ({
       await handleUploadImage({ formData });
     }
   };
-  return /* @__PURE__ */ jsxs46(Fragment13, { children: [
-    isPending ? /* @__PURE__ */ jsx66(Fragment13, { children: /* @__PURE__ */ jsx66("span", { className: "text-sm text-gray-500", children: i18n_default.t("\u0110ang t\u1EA3i l\xEAn...") }) }) : /* @__PURE__ */ jsxs46(
+  return /* @__PURE__ */ jsxs45(Fragment13, { children: [
+    isPending ? /* @__PURE__ */ jsx66(Fragment13, { children: /* @__PURE__ */ jsx66("span", { className: "text-sm text-gray-500", children: i18n_default.t("\u0110ang t\u1EA3i l\xEAn...") }) }) : /* @__PURE__ */ jsxs45(
       "button",
       {
         type: "button",
@@ -17410,7 +17402,7 @@ var ButtonSelectFiles = ({
 };
 
 // src/widgets/basic/avatar-field/avatar.tsx
-import { Fragment as Fragment14, jsx as jsx67, jsxs as jsxs47 } from "react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx67, jsxs as jsxs46 } from "react/jsx-runtime";
 var AvatarField = (props) => {
   const {
     isForm = false,
@@ -17434,7 +17426,7 @@ var AvatarField = (props) => {
     color: textColor,
     fontSize: `${size4 / 2.5}px`
   };
-  return /* @__PURE__ */ jsxs47(Fragment14, { children: [
+  return /* @__PURE__ */ jsxs46(Fragment14, { children: [
     isForm && allowShowDetail && /* @__PURE__ */ jsx67(
       ModalDetail,
       {
@@ -17476,7 +17468,7 @@ var AvatarField = (props) => {
 };
 
 // src/widgets/basic/binary-field/binary.tsx
-import { jsx as jsx68, jsxs as jsxs48 } from "react/jsx-runtime";
+import { jsx as jsx68, jsxs as jsxs47 } from "react/jsx-runtime";
 var BinaryField = (props) => {
   const {
     name: name2,
@@ -17508,7 +17500,7 @@ var BinaryField = (props) => {
           {
             ref: binaryRef,
             className: "relative flex w-fit items-center gap-4 rounded-lg shadow-md mb-11",
-            children: renderImage ? /* @__PURE__ */ jsxs48("div", { className: "relative group", children: [
+            children: renderImage ? /* @__PURE__ */ jsxs47("div", { className: "relative group", children: [
               renderImage && checkIsImageLink2(renderImage) ? /* @__PURE__ */ jsx68(
                 "img",
                 {
@@ -17533,7 +17525,7 @@ var BinaryField = (props) => {
                   children: /* @__PURE__ */ jsx68(DeleteIcon, {})
                 }
               )
-            ] }) : /* @__PURE__ */ jsxs48(
+            ] }) : /* @__PURE__ */ jsxs47(
               "label",
               {
                 htmlFor: inputId,
@@ -17599,7 +17591,7 @@ var ButtonBadgeField = (props) => {
 };
 
 // src/widgets/basic/button-field/button.tsx
-import { Fragment as Fragment15, jsx as jsx70, jsxs as jsxs49 } from "react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx70, jsxs as jsxs48 } from "react/jsx-runtime";
 var ButtonField = (props) => {
   const {
     func,
@@ -17618,7 +17610,7 @@ var ButtonField = (props) => {
       onClick: func,
       children: i18n_default.t(content)
     }
-  ) : /* @__PURE__ */ jsxs49(
+  ) : /* @__PURE__ */ jsxs48(
     "button",
     {
       type,
@@ -17635,7 +17627,7 @@ var ButtonField = (props) => {
 
 // src/widgets/basic/char-field/char.tsx
 import { useEffect as useEffect9 } from "react";
-import { Fragment as Fragment16, jsx as jsx71, jsxs as jsxs50 } from "react/jsx-runtime";
+import { Fragment as Fragment16, jsx as jsx71, jsxs as jsxs49 } from "react/jsx-runtime";
 var CharField = (props) => {
   const {
     name: name2,
@@ -17698,7 +17690,7 @@ var CharField = (props) => {
         }, [value2, clearErrors, name2]);
         const realValue = typeof value2 === "string" || typeof value2 === "number" ? String(value2) : "";
         const displayValue = (widget === "access_token" || widget === "refresh_token") && typeof realValue === "string" && !isDirty ? "*".repeat(realValue?.length) : widget === "private_secret_key" && formValues?.id && typeof formValues?.id === "number" && !isDirty && typeof realValue === "string" ? `${realValue?.slice(0, 4)}${realValue?.length > 4 ? "*".repeat(realValue?.length - 4) : ""}` : typeof realValue === "string" || typeof realValue === "number" ? String(realValue) : "";
-        return /* @__PURE__ */ jsxs50(Fragment16, { children: [
+        return /* @__PURE__ */ jsxs49(Fragment16, { children: [
           /* @__PURE__ */ jsx71(
             "textarea",
             {
@@ -17825,7 +17817,7 @@ var CheckboxField = (props) => {
 
 // src/widgets/basic/color-field/color-wrapper.tsx
 import { useEffect as useEffect10, useRef as useRef6, useState as useState10 } from "react";
-import { Fragment as Fragment17, jsx as jsx73, jsxs as jsxs51 } from "react/jsx-runtime";
+import { Fragment as Fragment17, jsx as jsx73, jsxs as jsxs50 } from "react/jsx-runtime";
 var ColorWrapper = (props) => {
   const {
     colors: colors2,
@@ -17852,7 +17844,7 @@ var ColorWrapper = (props) => {
       document.removeEventListener("mousedown", handleClickOutside);
     };
   }, []);
-  return /* @__PURE__ */ jsx73("div", { ref: pickColorsRef, children: showFullColors ? /* @__PURE__ */ jsx73("div", { className: "flex gap-2", children: COLORS.map((color) => /* @__PURE__ */ jsxs51("div", { children: [
+  return /* @__PURE__ */ jsx73("div", { ref: pickColorsRef, children: showFullColors ? /* @__PURE__ */ jsx73("div", { className: "flex gap-2", children: COLORS.map((color) => /* @__PURE__ */ jsxs50("div", { children: [
     /* @__PURE__ */ jsx73(
       "button",
       {
@@ -17876,7 +17868,7 @@ var ColorWrapper = (props) => {
         content: i18n_default.t(color?.name)
       }
     )
-  ] }, color?.id)) }) : /* @__PURE__ */ jsxs51(Fragment17, { children: [
+  ] }, color?.id)) }) : /* @__PURE__ */ jsxs50(Fragment17, { children: [
     /* @__PURE__ */ jsx73(
       "button",
       {
@@ -17933,7 +17925,7 @@ var ColorField = (props) => {
 
 // src/widgets/basic/copy-link-buttton/copy-link.tsx
 import { useEffect as useEffect11 } from "react";
-import { jsx as jsx75, jsxs as jsxs52 } from "react/jsx-runtime";
+import { jsx as jsx75, jsxs as jsxs51 } from "react/jsx-runtime";
 var CopyLinkButtonField = (props) => {
   const {
     isForm,
@@ -17971,8 +17963,8 @@ var CopyLinkButtonField = (props) => {
             clearErrors(name2);
           }
         }, [value]);
-        return /* @__PURE__ */ jsxs52("div", { className: "relative", children: [
-          /* @__PURE__ */ jsxs52("div", { className: "flex relative field", children: [
+        return /* @__PURE__ */ jsxs51("div", { className: "relative", children: [
+          /* @__PURE__ */ jsxs51("div", { className: "flex relative field", children: [
             /* @__PURE__ */ jsx75(
               "input",
               {
@@ -21965,7 +21957,7 @@ function useEffectEvent(callback) {
 }
 
 // node_modules/react-datepicker/node_modules/@floating-ui/react/dist/floating-ui.react.mjs
-import { jsx as jsx76, jsxs as jsxs53, Fragment as Fragment18 } from "react/jsx-runtime";
+import { jsx as jsx76, jsxs as jsxs52, Fragment as Fragment18 } from "react/jsx-runtime";
 import * as ReactDOM2 from "react-dom";
 
 // node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.mjs
@@ -22363,7 +22355,7 @@ var FloatingArrow = /* @__PURE__ */ React8.forwardRef(function FloatingArrow2(pr
     bottom: isCustomShape ? "" : "rotate(180deg)",
     right: isCustomShape ? "rotate(-90deg)" : "rotate(90deg)"
   }[side];
-  return /* @__PURE__ */ jsxs53("svg", {
+  return /* @__PURE__ */ jsxs52("svg", {
     ...rest,
     "aria-hidden": true,
     ref,
@@ -31779,7 +31771,7 @@ var StateManagedSelect$1 = StateManagedSelect;
 
 // src/widgets/basic/date-field/date.tsx
 var import_moment2 = __toESM(require_moment());
-import { Fragment as Fragment22, jsx as jsx79, jsxs as jsxs54 } from "react/jsx-runtime";
+import { Fragment as Fragment22, jsx as jsx79, jsxs as jsxs53 } from "react/jsx-runtime";
 var DateField = (props) => {
   const {
     name: name2,
@@ -31806,7 +31798,7 @@ var DateField = (props) => {
     context
   } = props;
   const InputDateCustom = forwardRef6(
-    ({ onClick, className, onChange: onChange2, isForm: isForm2, defaultValue }, ref) => /* @__PURE__ */ jsxs54("label", { className: `flex ${className}`, children: [
+    ({ onClick, className, onChange: onChange2, isForm: isForm2, defaultValue }, ref) => /* @__PURE__ */ jsxs53("label", { className: `flex ${className}`, children: [
       /* @__PURE__ */ jsx79(
         "input",
         {
@@ -31849,7 +31841,7 @@ var DateField = (props) => {
             }
           }, [value, clearErrors, name2]);
           const selectedDate = !methods ? value && (0, import_moment2.default)(value, formatDateParse).isValid() ? (0, import_moment2.default)(value, formatDateParse).add(7, "hours").toDate() : null : field?.value && (0, import_moment2.default)(field.value, formatDateParse).isValid() ? (0, import_moment2.default)(field.value, formatDateParse).add(7, "hours").toDate() : null;
-          return /* @__PURE__ */ jsxs54(Fragment22, { children: [
+          return /* @__PURE__ */ jsxs53(Fragment22, { children: [
             /* @__PURE__ */ jsx79(
               DatePicker,
               {
@@ -31916,7 +31908,7 @@ var DateField = (props) => {
                   increaseMonth,
                   prevMonthButtonDisabled,
                   nextMonthButtonDisabled
-                }) => /* @__PURE__ */ jsxs54(
+                }) => /* @__PURE__ */ jsxs53(
                   "div",
                   {
                     style: {
@@ -32009,10 +32001,10 @@ var DateField = (props) => {
 };
 
 // src/widgets/basic/download-binary-field/download-binary.tsx
-import { jsx as jsx80, jsxs as jsxs55 } from "react/jsx-runtime";
+import { jsx as jsx80, jsxs as jsxs54 } from "react/jsx-runtime";
 var DownLoadBinaryField = (props) => {
   const { handleFileDownload } = props;
-  return /* @__PURE__ */ jsxs55(
+  return /* @__PURE__ */ jsxs54(
     "button",
     {
       type: "button",
@@ -32027,7 +32019,7 @@ var DownLoadBinaryField = (props) => {
 };
 
 // src/widgets/basic/download-file-field/download-file.tsx
-import { jsx as jsx81, jsxs as jsxs56 } from "react/jsx-runtime";
+import { jsx as jsx81, jsxs as jsxs55 } from "react/jsx-runtime";
 var DownloadFileField = (props) => {
   const {
     readonly,
@@ -32039,8 +32031,8 @@ var DownloadFileField = (props) => {
     handleFileChange,
     handleFileDownload
   } = props;
-  return /* @__PURE__ */ jsxs56("div", { className: "", children: [
-    /* @__PURE__ */ jsxs56(
+  return /* @__PURE__ */ jsxs55("div", { className: "", children: [
+    /* @__PURE__ */ jsxs55(
       "label",
       {
         htmlFor: inputId,
@@ -32075,7 +32067,7 @@ var DownloadFileField = (props) => {
 
 // src/widgets/basic/dropdown-field/dropdown.tsx
 import { useState as useState15 } from "react";
-import { jsx as jsx82, jsxs as jsxs57 } from "react/jsx-runtime";
+import { jsx as jsx82, jsxs as jsxs56 } from "react/jsx-runtime";
 var DropdownField = (props) => {
   const {
     options: options2,
@@ -32089,14 +32081,14 @@ var DropdownField = (props) => {
   } = props;
   const [open, setOpen] = useState15(false);
   const dropdownRef = useClickOutside2({ handler: () => setOpen(false) });
-  return /* @__PURE__ */ jsxs57(
+  return /* @__PURE__ */ jsxs56(
     "div",
     {
       ref: dropdownRef,
       className: `relative ${className}`,
       onClick: () => setOpen(!open),
       children: [
-        /* @__PURE__ */ jsxs57(
+        /* @__PURE__ */ jsxs56(
           "div",
           {
             className: `flex items-center gap-2 px-3 py-1 bg-white border rounded-lg cursor-pointer ${buttonClassName}`,
@@ -32132,7 +32124,7 @@ var DropdownField = (props) => {
 };
 
 // src/widgets/basic/fee-field/fee.tsx
-import { Fragment as Fragment23, jsx as jsx83, jsxs as jsxs58 } from "react/jsx-runtime";
+import { Fragment as Fragment23, jsx as jsx83, jsxs as jsxs57 } from "react/jsx-runtime";
 var FeeField = (props) => {
   const { value, formValues } = props;
   const totalAmount = formatNumberOnly(parseFloat(value?.total_amount)) + " VND";
@@ -32142,23 +32134,23 @@ var FeeField = (props) => {
     )
   ) + " VND";
   const remaining_amount = formatNumberOnly(parseFloat(formValues?.amount_residual ?? 0)) + " VND";
-  return /* @__PURE__ */ jsxs58(Fragment23, { children: [
+  return /* @__PURE__ */ jsxs57(Fragment23, { children: [
     value?.subtotals?.map((sub) => {
       if (sub?.tax_amount > 0 && sub?.tax_groups?.length > 0) {
-        return /* @__PURE__ */ jsxs58(Fragment23, { children: [
-          /* @__PURE__ */ jsxs58("div", { className: "grid grid-cols-2 gap-x-4 gap-y-2 min-w-[300px] max-w-fit ml-auto", children: [
-            /* @__PURE__ */ jsxs58("div", { className: "text-[14px] leading-[21px] text-right", children: [
+        return /* @__PURE__ */ jsxs57(Fragment23, { children: [
+          /* @__PURE__ */ jsxs57("div", { className: "grid grid-cols-2 gap-x-4 gap-y-2 min-w-[300px] max-w-fit ml-auto", children: [
+            /* @__PURE__ */ jsxs57("div", { className: "text-[14px] leading-[21px] text-right", children: [
               sub?.name,
               ":"
             ] }),
             /* @__PURE__ */ jsx83("div", { className: "text-[14px] leading-[21px] text-[rgb(73,80,87)] text-right font-semibold", children: formatNumberOnly(parseFloat(sub?.base_amount ?? 0)) + " VND" })
           ] }),
-          sub?.tax_groups.map((group) => /* @__PURE__ */ jsxs58(
+          sub?.tax_groups.map((group) => /* @__PURE__ */ jsxs57(
             "div",
             {
               className: "grid grid-cols-2 gap-x-4 gap-y-2 min-w-[300px] max-w-fit ml-auto mt-2",
               children: [
-                /* @__PURE__ */ jsxs58("div", { className: "text-[14px] leading-[21px] text-right", children: [
+                /* @__PURE__ */ jsxs57("div", { className: "text-[14px] leading-[21px] text-right", children: [
                   group?.group_name,
                   ":"
                 ] }),
@@ -32170,22 +32162,22 @@ var FeeField = (props) => {
         ] });
       }
     }),
-    /* @__PURE__ */ jsxs58("div", { className: "grid grid-cols-2 gap-x-4 gap-y-2 min-w-[300px] max-w-fit ml-auto mt-2 pt-2 lg:mt-5 lg:pt-5", children: [
-      /* @__PURE__ */ jsxs58("div", { className: "text-[14px] leading-[21px] text-right", children: [
+    /* @__PURE__ */ jsxs57("div", { className: "grid grid-cols-2 gap-x-4 gap-y-2 min-w-[300px] max-w-fit ml-auto mt-2 pt-2 lg:mt-5 lg:pt-5", children: [
+      /* @__PURE__ */ jsxs57("div", { className: "text-[14px] leading-[21px] text-right", children: [
         i18n_default.t("total"),
         ":"
       ] }),
       /* @__PURE__ */ jsx83("div", { className: "text-xl leading-[21px] font-bold text-[rgb(73,80,87)] text-right ", children: totalAmount })
     ] }),
-    /* @__PURE__ */ jsxs58("div", { className: "grid grid-cols-2 gap-x-4 gap-y-2 min-w-[300px] max-w-fit ml-auto mt-2 pt-2 lg:mt-5 lg:pt-5 border-t border-[#c4c4c4ee]", children: [
-      /* @__PURE__ */ jsxs58("div", { className: "text-[14px] leading-[21px] text-right", children: [
+    /* @__PURE__ */ jsxs57("div", { className: "grid grid-cols-2 gap-x-4 gap-y-2 min-w-[300px] max-w-fit ml-auto mt-2 pt-2 lg:mt-5 lg:pt-5 border-t border-[#c4c4c4ee]", children: [
+      /* @__PURE__ */ jsxs57("div", { className: "text-[14px] leading-[21px] text-right", children: [
         i18n_default.t("paid_amount"),
         ":"
       ] }),
       /* @__PURE__ */ jsx83("div", { className: "text-lg leading-[21px] font-semibold text-[rgb(73,80,87)] text-right ", children: paid_amount })
     ] }),
-    /* @__PURE__ */ jsxs58("div", { className: "grid grid-cols-2 gap-x-4 gap-y-2 min-w-[300px] max-w-fit ml-auto mt-2 lg:mt-3", children: [
-      /* @__PURE__ */ jsxs58("div", { className: "text-[14px] leading-[21px] text-right", children: [
+    /* @__PURE__ */ jsxs57("div", { className: "grid grid-cols-2 gap-x-4 gap-y-2 min-w-[300px] max-w-fit ml-auto mt-2 lg:mt-3", children: [
+      /* @__PURE__ */ jsxs57("div", { className: "text-[14px] leading-[21px] text-right", children: [
         i18n_default.t("remanining_amount"),
         ":"
       ] }),
@@ -32196,7 +32188,7 @@ var FeeField = (props) => {
 
 // src/widgets/basic/file-upload-field/file-upload.tsx
 import { useEffect as useEffect16, useRef as useRef14, useState as useState16 } from "react";
-import { jsx as jsx84, jsxs as jsxs59 } from "react/jsx-runtime";
+import { jsx as jsx84, jsxs as jsxs58 } from "react/jsx-runtime";
 var FileUploadField = (props) => {
   const { name: name2, methods, isForm, model, required, idForm, widget, useUploadImage, useUploadFile, useGetImage, isBase64File } = props;
   const fileInputRef = useRef14(null);
@@ -32227,7 +32219,7 @@ var FileUploadField = (props) => {
             );
           }
         }, [selectedFiles]);
-        return /* @__PURE__ */ jsxs59("div", { children: [
+        return /* @__PURE__ */ jsxs58("div", { children: [
           selectedFiles.length > 0 && /* @__PURE__ */ jsx84(
             RenderFiles,
             {
@@ -32261,7 +32253,7 @@ var FileUploadField = (props) => {
 
 // src/widgets/basic/float-field/float.tsx
 import { useEffect as useEffect17, useRef as useRef15, useState as useState17 } from "react";
-import { Fragment as Fragment24, jsx as jsx85, jsxs as jsxs60 } from "react/jsx-runtime";
+import { Fragment as Fragment24, jsx as jsx85, jsxs as jsxs59 } from "react/jsx-runtime";
 var FloatField = (props) => {
   const {
     name: name2,
@@ -32385,7 +32377,7 @@ var FloatField = (props) => {
           isDirtyRef.current = false;
           inputRef.current?.blur();
         };
-        return /* @__PURE__ */ jsxs60(Fragment24, { children: [
+        return /* @__PURE__ */ jsxs59(Fragment24, { children: [
           /* @__PURE__ */ jsx85(
             "input",
             {
@@ -32413,7 +32405,7 @@ var FloatField = (props) => {
 
 // src/widgets/basic/float-time-field/float-time.tsx
 import { useState as useState18 } from "react";
-import { Fragment as Fragment25, jsx as jsx86, jsxs as jsxs61 } from "react/jsx-runtime";
+import { Fragment as Fragment25, jsx as jsx86, jsxs as jsxs60 } from "react/jsx-runtime";
 var FloatTimeField = (props) => {
   const {
     name: name2,
@@ -32492,7 +32484,7 @@ var FloatTimeField = (props) => {
           }
           onBlur();
         };
-        return /* @__PURE__ */ jsxs61(Fragment25, { children: [
+        return /* @__PURE__ */ jsxs60(Fragment25, { children: [
           /* @__PURE__ */ jsx86(
             "input",
             {
@@ -32609,7 +32601,7 @@ var ImageField = (props) => {
 import { useEffect as useEffect19 } from "react";
 
 // src/widgets/basic/information-field/information.tsx
-import { Fragment as Fragment26, jsx as jsx89, jsxs as jsxs62 } from "react/jsx-runtime";
+import { Fragment as Fragment26, jsx as jsx89, jsxs as jsxs61 } from "react/jsx-runtime";
 var InfomationField = (props) => {
   const { value, isForm = false, showName = true, stringToColor } = props;
   if (!value || Array.isArray(value) && value.length === 0) {
@@ -32625,7 +32617,7 @@ var InfomationField = (props) => {
       stringToColor
     },
     item.id
-  )) : /* @__PURE__ */ jsxs62("div", { className: "flex gap-2 items-center w-max", children: [
+  )) : /* @__PURE__ */ jsxs61("div", { className: "flex gap-2 items-center w-max", children: [
     /* @__PURE__ */ jsx89(
       AvatarField,
       {
@@ -32641,7 +32633,7 @@ var InfomationField = (props) => {
 };
 
 // src/widgets/basic/many2many-tags-field/many2many-tags.tsx
-import { jsx as jsx90, jsxs as jsxs63 } from "react/jsx-runtime";
+import { jsx as jsx90, jsxs as jsxs62 } from "react/jsx-runtime";
 var CustomMultiValue = ({ stringToColor, ...props }) => {
   const { selectProps, data, menuList } = props;
   const { relation } = selectProps;
@@ -32650,7 +32642,7 @@ var CustomMultiValue = ({ stringToColor, ...props }) => {
       (childItem) => childItem?.is_display && childItem?.action?.res_model === relation
     )
   )?.[0]?.action?.id;
-  return /* @__PURE__ */ jsxs63("div", { className: "flex items-center gap-2 relative mr-2 group", children: [
+  return /* @__PURE__ */ jsxs62("div", { className: "flex items-center gap-2 relative mr-2 group", children: [
     /* @__PURE__ */ jsx90(
       AvatarField,
       {
@@ -32738,7 +32730,7 @@ var Many2ManyTagField = (props) => {
           onChange2?.(name2 ?? "", newValue);
           clearErrors(name2);
         };
-        return /* @__PURE__ */ jsxs63("div", { className: "group", children: [
+        return /* @__PURE__ */ jsxs62("div", { className: "group", children: [
           /* @__PURE__ */ jsx90(
             CustomSelect,
             {
@@ -32821,7 +32813,7 @@ var Many2ManyTagField = (props) => {
 
 // src/widgets/basic/monetary-field/monetary.tsx
 import { useEffect as useEffect20 } from "react";
-import { Fragment as Fragment27, jsx as jsx91, jsxs as jsxs64 } from "react/jsx-runtime";
+import { Fragment as Fragment27, jsx as jsx91, jsxs as jsxs63 } from "react/jsx-runtime";
 var MonetaryField = (props) => {
   const {
     name: name2,
@@ -32840,8 +32832,8 @@ var MonetaryField = (props) => {
     isEditTable
   } = props;
   if (isForm && name2 === "amount_residual") {
-    return /* @__PURE__ */ jsxs64("div", { className: "flex justify-end gap-x-4 gap-y-2 ml-auto mt-2 lg:mt-5", children: [
-      /* @__PURE__ */ jsxs64("span", { className: "font-semibold", children: [
+    return /* @__PURE__ */ jsxs63("div", { className: "flex justify-end gap-x-4 gap-y-2 ml-auto mt-2 lg:mt-5", children: [
+      /* @__PURE__ */ jsxs63("span", { className: "font-semibold", children: [
         string,
         ":"
       ] }),
@@ -32881,7 +32873,7 @@ var MonetaryField = (props) => {
         const baseClasses = `w-full min-h-[44px] ring-0 px-3 py-[12px] text-sm font-normal gap-2 opacity-100 leading-[1.5] resize-none overflow-hidden field-sizing-content`;
         const editableClass = isEditTable ? `${error2 ? "hover:border-b-[1px] hover:border-b-[#de4747]" : "hover:border-b-[1px] hover:border-b-primary"} outline-0 hover:!outline-none` : `focus:ring-0 focus:!outline-none focus:border-[1px] focus:border-primary outline-0 bg-[#f7f7f7] border border-[#f7f7f7] rounded-[10px]`;
         const readonlyClass = readonly ? "!cursor-not-allowed border-transparent text-[#5c5a5a]" : "!cursor-pointer border-[#f7f7f7] text-[#525866]";
-        return /* @__PURE__ */ jsxs64(Fragment27, { children: [
+        return /* @__PURE__ */ jsxs63(Fragment27, { children: [
           /* @__PURE__ */ jsx91(
             "input",
             {
@@ -32931,7 +32923,7 @@ var PaidBadgedField = () => {
 
 // src/widgets/basic/priority-field/rating-star.tsx
 import React16, { useEffect as useEffect21, useState as useState19 } from "react";
-import { jsx as jsx93, jsxs as jsxs65 } from "react/jsx-runtime";
+import { jsx as jsx93, jsxs as jsxs64 } from "react/jsx-runtime";
 var RatingStarField = (props) => {
   const {
     label,
@@ -32976,7 +32968,7 @@ var RatingStarField = (props) => {
         const starValue = index4 + 1;
         const fillColor = hover > 0 ? hover >= starValue ? "#f3cc00" : "white" : rating >= starValue ? "#f3cc00" : "white";
         const strokeColor = hover > 0 ? hover >= starValue ? "#f3cc00" : "rgba(73,80,87,0.76)" : rating >= starValue ? "#f3cc00" : "rgba(73,80,87,0.76)";
-        return /* @__PURE__ */ jsxs65(React16.Fragment, { children: [
+        return /* @__PURE__ */ jsxs64(React16.Fragment, { children: [
           /* @__PURE__ */ jsx93(
             "div",
             {
@@ -33056,7 +33048,7 @@ var PriorityField = (props) => {
 
 // src/widgets/basic/radio-group-field/radio-group.tsx
 import { useEffect as useEffect22 } from "react";
-import { jsx as jsx95, jsxs as jsxs66 } from "react/jsx-runtime";
+import { jsx as jsx95, jsxs as jsxs65 } from "react/jsx-runtime";
 var RadioGroupField = (props) => {
   const {
     name: name2,
@@ -33080,7 +33072,7 @@ var RadioGroupField = (props) => {
     {
       name: name2 ?? "",
       control: methods.control,
-      render: ({ field }) => /* @__PURE__ */ jsx95("div", { className: "flex items-center gap-[10px] pb-4", children: selection?.map((select) => /* @__PURE__ */ jsxs66("div", { className: "flex items-center gap-1", children: [
+      render: ({ field }) => /* @__PURE__ */ jsx95("div", { className: "flex items-center gap-[10px] pb-4", children: selection?.map((select) => /* @__PURE__ */ jsxs65("div", { className: "flex items-center gap-1", children: [
         /* @__PURE__ */ jsx95(
           "input",
           {
@@ -33108,7 +33100,7 @@ var RadioGroupField = (props) => {
 
 // src/widgets/basic/remaining-days-field/remaining-days.tsx
 var import_moment3 = __toESM(require_moment());
-import { jsx as jsx96, jsxs as jsxs67 } from "react/jsx-runtime";
+import { jsx as jsx96, jsxs as jsxs66 } from "react/jsx-runtime";
 var RemainingDaysField = (props) => {
   const {
     value,
@@ -33119,7 +33111,7 @@ var RemainingDaysField = (props) => {
   if (!value) return null;
   const adjustedValue = (0, import_moment3.default)(value).add(7, "hours");
   const isFuture = adjustedValue.isAfter((0, import_moment3.default)());
-  return /* @__PURE__ */ jsxs67("div", { className: isForm ? "mb-4" : "", children: [
+  return /* @__PURE__ */ jsxs66("div", { className: isForm ? "mb-4" : "", children: [
     /* @__PURE__ */ jsx96(M, { id: `remainingDays_${value}`, place: "top", content: string }),
     /* @__PURE__ */ jsx96(
       "div",
@@ -33139,7 +33131,7 @@ var RemainingDaysField = (props) => {
 };
 
 // src/widgets/basic/select-dropdown-field/select-dropdown.tsx
-import { Fragment as Fragment28, jsx as jsx97, jsxs as jsxs68 } from "react/jsx-runtime";
+import { Fragment as Fragment28, jsx as jsx97, jsxs as jsxs67 } from "react/jsx-runtime";
 var SelectDropdownField = (props) => {
   const {
     selection,
@@ -33159,7 +33151,7 @@ var SelectDropdownField = (props) => {
     value: val[0],
     label: val[1]
   })) : [];
-  if (!isForm) {
+  if (!isForm && !isEditTable) {
     return /* @__PURE__ */ jsx97("span", { children: options2?.find((item) => item?.value === value)?.label });
   } else {
     return /* @__PURE__ */ jsx97(
@@ -33196,25 +33188,48 @@ var SelectDropdownField = (props) => {
               })
             }
           };
-          return /* @__PURE__ */ jsxs68(Fragment28, { children: [
+          return /* @__PURE__ */ jsxs67(Fragment28, { children: [
             /* @__PURE__ */ jsx97("div", { className: "group", children: /* @__PURE__ */ jsx97(
               StateManagedSelect$1,
               {
                 ...commonProps,
-                classNames: isEditTable ? {
-                  control: () => `w-full flex ring-0 cursor-pointer outline-0 !shadow-none p-2 pl-3 text-sm text-[#1A1A1B] font-normal gap-2 opacity-100 leading-5 resize-none overflow-hidden field-sizing-content border border-transparent border-b border-[#f7f7f7] hover:border-b-primary ${readonly ? "!cursor-not-allowed" : ""}`,
-                  valueContainer: () => "!m-0 !p-0",
-                  singleValue: () => `!m-0 ${readonly ? "!text-[#5c5a5a]" : ""}`,
-                  input: () => "!m-0 !p-0",
-                  dropdownIndicator: () => "invisible group-hover:visible !m-0 !p-0",
-                  clearIndicator: () => "invisible group-hover:visible !m-0 !p-0"
-                } : {
-                  control: ({ isFocused }) => `w-full flex min-h-[44px] ring-0 cursor-pointer outline-0 !bg-white !shadow-none !rounded-[8px] p-2 pl-3 text-sm text-[#1A1A1B] font-normal cursor-pointer gap-2 opacity-100 leading-5 resize-none overflow-hidden field-sizing-content ${isFocused ? "!border-[1px] border-primary !ring-0 outline-none" : "border border-[rgba(66,66,66,0.12)]"} `,
-                  valueContainer: () => "!m-0 !p-0",
-                  singleValue: () => `!m-0 ${readonly ? "!text-[#5c5a5a]" : ""}`,
-                  input: () => "!m-0 !p-0",
-                  dropdownIndicator: () => "!m-0 !p-0"
+                styles: {
+                  control: (base, state) => ({
+                    ...base,
+                    display: "flex",
+                    minHeight: "44px",
+                    cursor: readonly ? "not-allowed" : "pointer",
+                    backgroundColor: "#f7f7f7",
+                    borderRadius: isEditTable ? "0px" : "10px",
+                    padding: "4px 0px",
+                    border: isForm ? state.isFocused ? "1px solid var(--primary)" : "1px solid transparent" : "none",
+                    boxShadow: "none",
+                    "&:hover": {
+                      borderColor: "var(--primary)"
+                    },
+                    ...isEditTable && {
+                      minWidth: "300px",
+                      maxWidth: "300px",
+                      borderBottom: "1px solid transparent",
+                      background: "transparent"
+                    }
+                  }),
+                  clearIndicator: (base) => ({
+                    ...base,
+                    padding: "0"
+                  }),
+                  menuPortal: (base) => ({
+                    ...base,
+                    zIndex: 9999
+                  }),
+                  menu: (base) => ({
+                    ...base,
+                    zIndex: 9999,
+                    width: isEditTable ? "300px" : "100%",
+                    minWidth: isEditTable ? "300px" : "100%"
+                  })
                 },
+                menuPortalTarget: typeof window !== "undefined" ? document.body : null,
                 components: {
                   IndicatorSeparator: () => null,
                   DropdownIndicator: (props2) => readonly || !isEditTable ? null : /* @__PURE__ */ jsx97(components.DropdownIndicator, { ...props2 })
@@ -33272,7 +33287,7 @@ var TextAreaField = (props) => {
 };
 
 // src/widgets/basic/toggle-button-field/toggle-button.tsx
-import { jsx as jsx99, jsxs as jsxs69 } from "react/jsx-runtime";
+import { jsx as jsx99, jsxs as jsxs68 } from "react/jsx-runtime";
 var ToggleButtonField = (props) => {
   const {
     name: name2,
@@ -33287,7 +33302,7 @@ var ToggleButtonField = (props) => {
     {
       name: name2 ?? "",
       control: methods?.control,
-      render: ({ field }) => /* @__PURE__ */ jsx99("div", { className: "inline-flex items-center", children: /* @__PURE__ */ jsxs69("label", { className: "relative inline-block w-9 h-5 cursor-pointer", children: [
+      render: ({ field }) => /* @__PURE__ */ jsx99("div", { className: "inline-flex items-center", children: /* @__PURE__ */ jsxs68("label", { className: "relative inline-block w-9 h-5 cursor-pointer", children: [
         /* @__PURE__ */ jsx99(
           "input",
           {
@@ -33328,7 +33343,7 @@ var ToggleButtonField = (props) => {
 
 // src/widgets/basic/integer-field/integer.tsx
 import { useEffect as useEffect23, useRef as useRef17, useState as useState20 } from "react";
-import { Fragment as Fragment29, jsx as jsx100, jsxs as jsxs70 } from "react/jsx-runtime";
+import { Fragment as Fragment29, jsx as jsx100, jsxs as jsxs69 } from "react/jsx-runtime";
 var IntegerField = (props) => {
   const {
     name: name2,
@@ -33426,7 +33441,7 @@ var IntegerField = (props) => {
           inputRef.current?.blur();
           clearErrors(name2);
         };
-        return /* @__PURE__ */ jsxs70(Fragment29, { children: [
+        return /* @__PURE__ */ jsxs69(Fragment29, { children: [
           /* @__PURE__ */ jsx100(
             "input",
             {
@@ -33469,7 +33484,7 @@ var IntegerField = (props) => {
 };
 
 // src/widgets/basic/status-dropdown-field/status-dropdown.tsx
-import { jsx as jsx101, jsxs as jsxs71 } from "react/jsx-runtime";
+import { jsx as jsx101, jsxs as jsxs70 } from "react/jsx-runtime";
 var StatusDropdownField = (props) => {
   const {
     buttonRef,
@@ -33481,7 +33496,7 @@ var StatusDropdownField = (props) => {
     handleClick,
     colors: colors2
   } = props;
-  return /* @__PURE__ */ jsxs71(
+  return /* @__PURE__ */ jsxs70(
     "div",
     {
       ref: buttonRef,
@@ -33497,14 +33512,14 @@ var StatusDropdownField = (props) => {
         ),
         isOpen && /* @__PURE__ */ jsx101("div", { className: "absolute w-[200px] top-full bg-white transition-all right-0 flex flex-col rounded-lg z-10 shadow-md border !border-[#dbe0e6] overflow-hidden", children: selection?.map((item, index4) => {
           const isActive = item[0] == state;
-          return /* @__PURE__ */ jsxs71(
+          return /* @__PURE__ */ jsxs70(
             "div",
             {
               className: `cursor-pointer relative hover:bg-gray-200 pl-[12px] pr-[20px] py-[5px] flex items-center justify-start gap-2 ${isActive ? "bg-gray-100" : ""}`,
               onClick: () => handleClick(item[0]),
               children: [
                 /* @__PURE__ */ jsx101("div", { className: "w-4 h-4", children: isActive && /* @__PURE__ */ jsx101(CheckIcon, {}) }),
-                /* @__PURE__ */ jsxs71("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsxs70("div", { className: "flex items-center gap-2", children: [
                   /* @__PURE__ */ jsx101(
                     "div",
                     {
@@ -33525,7 +33540,7 @@ var StatusDropdownField = (props) => {
 
 // src/widgets/basic/many2many-field/many2many.tsx
 import { createPortal as createPortal5 } from "react-dom";
-import { jsx as jsx102, jsxs as jsxs72 } from "react/jsx-runtime";
+import { jsx as jsx102, jsxs as jsxs71 } from "react/jsx-runtime";
 var Many2ManyField = (props) => {
   const {
     aid,
@@ -33577,14 +33592,14 @@ var Many2ManyField = (props) => {
     clearSearch
   } = searchController;
   return createPortal5(
-    /* @__PURE__ */ jsxs72("div", { className: "fixed bottom-0 left-0 right-0 top-0 z-[9999]", children: [
+    /* @__PURE__ */ jsxs71("div", { className: "fixed bottom-0 left-0 right-0 top-0 z-[9999]", children: [
       /* @__PURE__ */ jsx102("div", { className: "absolute inset-0 bg-[rgba(27,27,27,0.48)]" }),
-      /* @__PURE__ */ jsx102("div", { className: "absolute inset-0 overflow-auto px-6 flex justify-center items-center", children: /* @__PURE__ */ jsxs72("div", { className: "relative z-[1] p-4 flex flex-col gap-2 max-w-full lg:max-w-[1000px] lg:min-w-[1000px] transform rounded-3xl bg-[#FFF] min-h-[90%] max-h-[90%] h-fit", children: [
-        /* @__PURE__ */ jsxs72("div", { className: "flex justify-between items-center border-b border-[rgba(0,0,0,0.1)] pb-2", children: [
+      /* @__PURE__ */ jsx102("div", { className: "absolute inset-0 overflow-auto px-6 flex justify-center items-center", children: /* @__PURE__ */ jsxs71("div", { className: "relative z-[1] p-4 flex flex-col gap-2 max-w-full lg:max-w-[1000px] lg:min-w-[1000px] transform rounded-3xl bg-[#FFF] min-h-[90%] max-h-[90%] h-fit", children: [
+        /* @__PURE__ */ jsxs71("div", { className: "flex justify-between items-center border-b border-[rgba(0,0,0,0.1)] pb-2", children: [
           /* @__PURE__ */ jsx102("div", { className: "text-[20px] font-semibold", children: title }),
           /* @__PURE__ */ jsx102("button", { className: "cursor-pointer", onClick: onClose, children: /* @__PURE__ */ jsx102(CloseIcon, {}) })
         ] }),
-        /* @__PURE__ */ jsxs72("div", { className: "grid grid-cols-3 gap-2 items-center py-2", children: [
+        /* @__PURE__ */ jsxs71("div", { className: "grid grid-cols-3 gap-2 items-center py-2", children: [
           /* @__PURE__ */ jsx102("div", { className: "col-span-3 sm:col-span-2 flex-1", children: /* @__PURE__ */ jsx102(
             Search,
             {
@@ -33643,7 +33658,7 @@ var Many2ManyField = (props) => {
               "div",
               {
                 className: `flex w-full items-center h-full overflow-auto `,
-                children: /* @__PURE__ */ jsx102("div", { className: "w-full h-full max-w-full", children: /* @__PURE__ */ jsxs72(
+                children: /* @__PURE__ */ jsx102("div", { className: "w-full h-full max-w-full", children: /* @__PURE__ */ jsxs71(
                   "table",
                   {
                     className: `relative w-full bg-white custom-dropdown `,
@@ -33699,7 +33714,7 @@ var Many2ManyField = (props) => {
             ) }) })
           }
         ) }) }) : /* @__PURE__ */ jsx102(LayerLoading, {}),
-        /* @__PURE__ */ jsxs72("div", { className: "flex items-center gap-2 mt-auto", children: [
+        /* @__PURE__ */ jsxs71("div", { className: "flex items-center gap-2 mt-auto", children: [
           isDisplayCheckbox && /* @__PURE__ */ jsx102(
             "button",
             {
@@ -33744,14 +33759,14 @@ var Many2ManyField = (props) => {
 
 // src/widgets/basic/many2one-field/many2one.tsx
 import React17, { useEffect as useEffect24, useMemo as useMemo9 } from "react";
-import { Fragment as Fragment30, jsx as jsx103, jsxs as jsxs73 } from "react/jsx-runtime";
+import { Fragment as Fragment30, jsx as jsx103, jsxs as jsxs72 } from "react/jsx-runtime";
 var CustomMenuList = (props) => {
   const { options: options2, children, selectProps } = props;
   const { setIsShowModalMany2Many, searchable } = selectProps;
   const limitedChildren = React17.Children.toArray(children).slice(0, 10);
-  return /* @__PURE__ */ jsxs73(components.MenuList, { ...props, className: "z-[99]", children: [
+  return /* @__PURE__ */ jsxs72(components.MenuList, { ...props, className: "z-[99]", children: [
     limitedChildren,
-    options2?.length > 0 && (options2?.length > 10 || searchable) && /* @__PURE__ */ jsxs73(
+    options2?.length > 0 && (options2?.length > 10 || searchable) && /* @__PURE__ */ jsxs72(
       "button",
       {
         type: "button",
@@ -33778,15 +33793,10 @@ var Many2OneField = (props) => {
     string,
     //return
     menuList,
-    handleChooseRecord,
-    handleClose,
-    selectedRowKeys,
     allowShowDetail,
     index: index4,
     contextObject,
     renderDetail,
-    isShowModalMany2Many,
-    initValue,
     tempSelectedOption,
     options: options2,
     fetchMoreOptions,
@@ -33807,7 +33817,7 @@ var Many2OneField = (props) => {
   );
   if (!isForm && !isEditTable) {
     const id = propValue && typeof propValue === "object" && "id" in propValue ? propValue.id : propValue;
-    return /* @__PURE__ */ jsxs73(Fragment30, { children: [
+    return /* @__PURE__ */ jsxs72(Fragment30, { children: [
       allowShowDetail && /* @__PURE__ */ jsx103(
         ModalDetail,
         {
@@ -33859,7 +33869,7 @@ var Many2OneField = (props) => {
                 methods?.clearErrors(name2);
               }
             }, [selectedOption]);
-            return /* @__PURE__ */ jsxs73("div", { className: "group", children: [
+            return /* @__PURE__ */ jsxs72("div", { className: "group", children: [
               /* @__PURE__ */ jsx103(
                 StateManagedSelect$1,
                 {
@@ -33939,7 +33949,7 @@ var Many2OneField = (props) => {
 };
 
 // src/widgets/basic/status-bar-field/duration/duration.tsx
-import { jsx as jsx104, jsxs as jsxs74 } from "react/jsx-runtime";
+import { jsx as jsx104, jsxs as jsxs73 } from "react/jsx-runtime";
 var StatusbarDurationField = (props) => {
   const {
     disabled,
@@ -33953,10 +33963,10 @@ var StatusbarDurationField = (props) => {
     "div",
     {
       className: `w-full items-center  rounded-[10px] !flex flex-col-reverse justify-center lg:!justify-end lg:!flex-row gap-y-[15px]`,
-      children: /* @__PURE__ */ jsxs74("div", { className: "flex items-center gap-[24px]", children: [
+      children: /* @__PURE__ */ jsxs73("div", { className: "flex items-center gap-[24px]", children: [
         /* @__PURE__ */ jsx104("div", { className: "flex items-center", children: dataResponse && dataResponse?.records?.filter((item) => !item?.fold || item.id == defaultValue)?.map((option, index4) => {
           const value = option?.id === defaultValue;
-          return /* @__PURE__ */ jsxs74(
+          return /* @__PURE__ */ jsxs73(
             "label",
             {
               onClick: () => !disabled && handleClick(option.id),
@@ -33991,7 +34001,7 @@ var StatusbarDurationField = (props) => {
         }) }),
         dataResponse?.records?.some(
           (item) => item?.fold && item.id !== defaultValue
-        ) && /* @__PURE__ */ jsxs74(
+        ) && /* @__PURE__ */ jsxs73(
           "div",
           {
             onClick: () => setModalStatus(!modelStatus),
@@ -34029,13 +34039,13 @@ var StatusbarDurationField = (props) => {
 
 // src/widgets/basic/status-bar-field/option/option.tsx
 import { useMemo as useMemo10 } from "react";
-import { jsx as jsx105, jsxs as jsxs75 } from "react/jsx-runtime";
+import { jsx as jsx105, jsxs as jsxs74 } from "react/jsx-runtime";
 var StatusBarOptionField = (props) => {
   const { selection, defaultValue } = props;
   const memoizedStatusOptions = useMemo10(() => selection, [selection]);
   return /* @__PURE__ */ jsx105("div", { className: "flex items-center flex-wrap", children: memoizedStatusOptions?.map((option, index4) => {
     const value = option?.[0] === defaultValue;
-    return /* @__PURE__ */ jsxs75(
+    return /* @__PURE__ */ jsxs74(
       "label",
       {
         className: `relative flex-shrink-0 cursor-default py-[10px] px-8 font-semibold !text-sm
@@ -34062,7 +34072,7 @@ var StatusBarOptionField = (props) => {
 };
 
 // src/widgets/basic/date-option-field/date-option.tsx
-import { jsx as jsx106, jsxs as jsxs76 } from "react/jsx-runtime";
+import { jsx as jsx106, jsxs as jsxs75 } from "react/jsx-runtime";
 var DateOptionField = (props) => {
   const {
     name: name2,
@@ -34078,7 +34088,7 @@ var DateOptionField = (props) => {
     {
       name: name2 ?? "",
       control: methods?.control,
-      render: ({ field }) => /* @__PURE__ */ jsxs76(
+      render: ({ field }) => /* @__PURE__ */ jsxs75(
         "label",
         {
           className: `cursor-pointer mr-2 w-[50px] flex items-center justify-center p-[4px] border rounded-md text-sm