react-table-edit 1.5.11 → 1.5.13

package/dist/index.js

@@ -19692,11 +19692,11 @@ const useOnClickOutside = (ref, handler) => {
             // ** Call passed function on click outside
             handler(event);
         };
-        document.addEventListener("mousedown", listener);
-        document.addEventListener("touchstart", listener);
+        document.addEventListener('mousedown', listener);
+        document.addEventListener('touchstart', listener);
         return () => {
-            document.removeEventListener("mousedown", listener);
-            document.removeEventListener("touchstart", listener);
+            document.removeEventListener('mousedown', listener);
+            document.removeEventListener('touchstart', listener);
         };
     }, 
     // ** Add ref and handler to effect dependencies
@@ -19711,7 +19711,7 @@ const checkThousandSeparator = (thousandSeparator, decimalSeparator) => {
     if (thousandSeparator) {
         if (decimalSeparator) {
             if (thousandSeparator === decimalSeparator) {
-                return ",";
+                return ',';
             }
             else {
                 return thousandSeparator;
@@ -19722,14 +19722,14 @@ const checkThousandSeparator = (thousandSeparator, decimalSeparator) => {
         }
     }
     else {
-        return ",";
+        return ',';
     }
 };
 const checkDecimalSeparator = (thousandSeparator, decimalSeparator) => {
     if (decimalSeparator) {
         if (thousandSeparator) {
             if (thousandSeparator === decimalSeparator) {
-                return ".";
+                return '.';
             }
             else {
                 return decimalSeparator;
@@ -19740,11 +19740,11 @@ const checkDecimalSeparator = (thousandSeparator, decimalSeparator) => {
         }
     }
     else {
-        return ".";
+        return '.';
     }
 };
 const isNullOrUndefined$1 = (d) => {
-    if (d === null || d === undefined || d === "") {
+    if (d === null || d === undefined || d === '') {
         return true;
     }
     return false;
@@ -19752,8 +19752,8 @@ const isNullOrUndefined$1 = (d) => {
 const generateUUID = () => {
     // Public Domain/MIT
     let d = new Date().getTime(); //Timestamp
-    let d2 = (typeof performance !== "undefined" && performance.now && performance.now() * 1000) || 0; //Time in microseconds since page-load or 0 if unsupported
-    return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function (c) {
+    let d2 = (typeof performance !== 'undefined' && performance.now && performance.now() * 1000) || 0; //Time in microseconds since page-load or 0 if unsupported
+    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
         let r = Math.random() * 16; //random number between 0 and 16
         if (d > 0) {
             //Use timestamp until depleted
@@ -19765,7 +19765,7 @@ const generateUUID = () => {
             r = (d2 + r) % 16 | 0;
             d2 = Math.floor(d2 / 16);
         }
-        return (c === "x" ? r : 0x3).toString(16);
+        return (c === 'x' ? r : 0x3).toString(16);
     });
 };
 /**
@@ -19782,17 +19782,17 @@ const formartNumberic = (str, decimalSeparator, thousandSeparator, fraction = 10
         str = roundNumber(Number(str), fraction);
     }
     // eslint-disable-next-line
-    if (str || str == "0") {
+    if (str || str == '0') {
         str = str.toString();
-        const value = decimalSeparator !== "." ? str.toString().replaceAll(".", decimalSeparator ?? "") : str;
-        const arr = value.toString().split(decimalSeparator ?? "", 2);
-        let flag = value.toString().includes(decimalSeparator ?? "");
+        const value = decimalSeparator !== '.' ? str.toString().replaceAll('.', decimalSeparator ?? '') : str;
+        const arr = value.toString().split(decimalSeparator ?? '', 2);
+        let flag = value.toString().includes(decimalSeparator ?? '');
         if (arr[0].length < 3) {
-            return flag ? `${arr[0]}${decimalSeparator}${arr[1]?.substring(0, fraction) ?? ""}` : arr[0];
+            return flag ? `${arr[0]}${decimalSeparator}${arr[1]?.substring(0, fraction) ?? ''}` : arr[0];
         }
         else {
             let flagNegative = false;
-            if (arr[0][0] === "-") {
+            if (arr[0][0] === '-') {
                 flagNegative = true;
                 arr[0] = arr[0].substring(1, arr[0].length);
             }
@@ -19803,20 +19803,20 @@ const formartNumberic = (str, decimalSeparator, thousandSeparator, fraction = 10
                     count++;
                 }
             }
-            if (arr[0].lastIndexOf(thousandSeparator ?? "") === arr[0].length - 1) {
+            if (arr[0].lastIndexOf(thousandSeparator ?? '') === arr[0].length - 1) {
                 arr[0] = arr[0].slice(0, arr[0].length - 1);
             }
             if (isDone) {
-                flag = (arr[1]?.substring(0, fraction) ?? "") !== "";
+                flag = (arr[1]?.substring(0, fraction) ?? '') !== '';
             }
             if (flagNegative && haveNegative) {
-                arr[0] = "-".concat(arr[0]);
+                arr[0] = '-'.concat(arr[0]);
             }
-            return flag ? `${arr[0]}${decimalSeparator}${arr[1]?.substring(0, fraction) ?? ""}` : arr[0];
+            return flag ? `${arr[0]}${decimalSeparator}${arr[1]?.substring(0, fraction) ?? ''}` : arr[0];
         }
     }
     else {
-        return "";
+        return '';
     }
 };
 const roundNumber = (num, fraction) => {
@@ -19824,24 +19824,24 @@ const roundNumber = (num, fraction) => {
     const result = Math.round(num * base) / base;
     return result;
 };
-const formatDateTime = (data, format = "dd/MM/yyyy") => {
+const formatDateTime = (data, format = 'dd/MM/yyyy') => {
     if (!data) {
-        return "";
+        return '';
     }
     const date = new Date(data);
     const map = {
-        DD: String(date.getDate()).padStart(2, "0"),
-        dd: String(date.getDate()).padStart(2, "0"),
-        MM: String(date.getMonth() + 1).padStart(2, "0"),
+        DD: String(date.getDate()).padStart(2, '0'),
+        dd: String(date.getDate()).padStart(2, '0'),
+        MM: String(date.getMonth() + 1).padStart(2, '0'),
         yyyy: date.getFullYear(),
-        HH: String(date.getHours()).padStart(2, "0"),
-        mm: String(date.getMinutes()).padStart(2, "0")
+        HH: String(date.getHours()).padStart(2, '0'),
+        mm: String(date.getMinutes()).padStart(2, '0')
     };
     return format.replace(/dd|DD|MM|yyyy|HH|mm/g, (match) => map[match]);
 };
 // Hàm tìm vị trí theo chuỗi index
 const FindNodeByPath = (tree, path) => {
-    const levels = path.split("-").map((num) => parseInt(num, 10));
+    const levels = path.split('-').map((num) => parseInt(num, 10));
     let current = tree;
     let node = null;
     for (let index = 0; index < levels.length - 1; index++) {
@@ -19890,15 +19890,15 @@ const calculateTableStructure = (columns, settingColumns) => {
                 calcTotalRightWidth(col.columns);
             }
             else {
-                if (col.fixedType === "right" && col.visible !== false) {
+                if (col.fixedType === 'right' && col.visible !== false) {
                     rightTotal += col.width ?? 40;
                 }
             }
         });
     };
     const applySetting = (cols) => {
-        return cols.map(cell => {
-            const setting = settingColumns?.find(s => s.field === cell.field);
+        return cols.map((cell) => {
+            const setting = settingColumns?.find((s) => s.field === cell.field);
             if (setting) {
                 cell.sortOrder = setting.sortOrder;
                 cell.visible = setting.visible ?? true;
@@ -19911,10 +19911,19 @@ const calculateTableStructure = (columns, settingColumns) => {
                 cell.headerDisplay = setting.headerText || cell.headerText;
             }
             else {
-                cell.visible = false;
-            }
-            if (cell.columns?.length) {
-                cell.columns = applySetting(cell.columns); // đệ quy
+                if (cell.columns?.length) {
+                    cell.columns = applySetting(cell.columns);
+                    cell.sortOrder = cell.columns[0].sortOrder;
+                    if (cell.columns.some((x) => x.visible !== false)) {
+                        cell.visible = true;
+                    }
+                    else {
+                        cell.visible = false;
+                    }
+                }
+                else {
+                    cell.visible = false;
+                }
             }
             return cell;
         });
@@ -19922,7 +19931,7 @@ const calculateTableStructure = (columns, settingColumns) => {
     const traverse = (cols, level = 0) => {
         levels[level] = levels[level] || [];
         let columns = [...cols];
-        if (settingColumns?.some(c => c.sortOrder !== undefined && c.sortOrder !== null)) {
+        if (settingColumns?.some((c) => c.sortOrder !== undefined && c.sortOrder !== null)) {
             columns = columns.sort((a, b) => (a.sortOrder ?? 0) - (b.sortOrder ?? 0));
         }
         return columns.reduce((colspanSum, col, indexCol) => {
@@ -19936,7 +19945,7 @@ const calculateTableStructure = (columns, settingColumns) => {
             };
             levels[level].push(cell);
             const headerKey = `${level}-${indexCol}`;
-            if (cell.fixedType === "left" && cell.visible !== false) {
+            if (cell.fixedType === 'left' && cell.visible !== false) {
                 objHeaderWidthFixLeft[headerKey] = leftTotal;
             }
             if (!hasChildren) {
@@ -19944,16 +19953,16 @@ const calculateTableStructure = (columns, settingColumns) => {
                 const width = cell.width ?? 40;
                 cell.index = index;
                 flat.push(cell);
-                if (cell.fixedType === "left" && cell.visible !== false) {
+                if (cell.fixedType === 'left' && cell.visible !== false) {
                     objWidthFixLeft[index] = leftTotal;
                     leftTotal += width;
                 }
-                if (cell.fixedType === "right" && cell.visible !== false) {
+                if (cell.fixedType === 'right' && cell.visible !== false) {
                     rightTotal -= width;
                     objWidthFixRight[index] = rightTotal;
                 }
             }
-            if (cell.fixedType === "right" && cell.visible !== false) {
+            if (cell.fixedType === 'right' && cell.visible !== false) {
                 objHeaderWidthFixRight[headerKey] = rightTotal;
             }
             return colspanSum + colspan;
@@ -19966,7 +19975,7 @@ const calculateTableStructure = (columns, settingColumns) => {
     traverse(columns);
     // Danh sách các cột được hiển thị
     const flatVisble = flat.filter((e) => e.visible !== false);
-    const flatVisbleContent = flatVisble.filter((x) => x.field !== "command" && x.field !== "#" && x.field !== "checkbox");
+    const flatVisbleContent = flatVisble.filter((x) => x.field !== 'command' && x.field !== '#' && x.field !== 'checkbox');
     // Tính toán vị trí đầu tiên và cuối cùng của các cột cố định
     const lastObjWidthFixLeft = Math.max(...Object.keys(objWidthFixLeft).map(Number), 0);
     const fisrtObjWidthFixRight = Math.min(...Object.keys(objWidthFixRight).map(Number), flat.length);
@@ -19989,8 +19998,8 @@ const calculateTableStructure = (columns, settingColumns) => {
     };
 };
 /**
-* Kiểm tra row có thỏa mãn tất cả filter và chứa từ khóa tìm kiếm hay không
-*/
+ * Kiểm tra row có thỏa mãn tất cả filter và chứa từ khóa tìm kiếm hay không
+ */
 const CheckRowMatch = (row, filters, keyword, searchKeys) => {
     const isFilterMatch = filters.every((filter) => {
         const { key, value, ope } = filter;
@@ -20002,23 +20011,23 @@ const CheckRowMatch = (row, filters, keyword, searchKeys) => {
         const filterStr = String(value).toLowerCase();
         /*eslint-disable*/
         switch (ope) {
-            case "startswith":
+            case 'startswith':
                 return valStr.startsWith(filterStr);
-            case "endswith":
+            case 'endswith':
                 return valStr.endsWith(filterStr);
-            case "contains":
+            case 'contains':
                 return valStr.includes(filterStr);
-            case "equal":
+            case 'equal':
                 return rowValue == value;
-            case "notequal":
+            case 'notequal':
                 return rowValue != value;
-            case "greaterthan":
+            case 'greaterthan':
                 return rowValue > value;
-            case "greaterthanorequal":
+            case 'greaterthanorequal':
                 return rowValue >= value;
-            case "lessthan":
+            case 'lessthan':
                 return rowValue < value;
-            case "lessthanorequal":
+            case 'lessthanorequal':
                 return rowValue <= value;
             default:
                 return false;
@@ -20477,25 +20486,16 @@ const ReactInput = (props) => {
                 }), value: value, onChange: (val) => setValue(val.target.value) }), value ? jsxRuntime.jsx(SvgX, { className: 'input__clear-icon', onClick: handelClear, strokeWidth: 3, fontSize: 16 }) : ''] }));
 };
 
-const RenderToolbarTop = ({ toolbarTopOption, setOpenPopupSetupColumn }) => {
+const RenderToolbarTop = ({ toolbarTopOption }) => {
     return (jsxRuntime.jsx("div", { id: "table_custom_top_toolbar", className: "r-toolbar r-toolbar-top", "aria-orientation": "horizontal", children: jsxRuntime.jsxs("div", { className: "r-toolbar-items", children: [jsxRuntime.jsx("div", { className: "r-toolbar-left", children: toolbarTopOption?.map((item, index) => {
-                        return item.align === "left" ? jsxRuntime.jsx(ToolBarElement, { item: item, index: index, setOpenPopupSetupColumn: setOpenPopupSetupColumn }) : "";
+                        return item.align === 'left' ? jsxRuntime.jsx(ToolBarElement, { item: item, index: index }) : '';
                     }) }), jsxRuntime.jsx("div", { className: "r-toolbar-center", children: toolbarTopOption?.map((item, index) => {
-                        return item.align === "center" ? jsxRuntime.jsx(ToolBarElement, { item: item, index: index, setOpenPopupSetupColumn: setOpenPopupSetupColumn }) : "";
+                        return item.align === 'center' ? jsxRuntime.jsx(ToolBarElement, { item: item, index: index }) : '';
                     }) }), jsxRuntime.jsx("div", { className: "r-toolbar-right", children: toolbarTopOption?.map((item, index) => {
-                        return item.align === "right" ? jsxRuntime.jsx(ToolBarElement, { item: item, index: index, setOpenPopupSetupColumn: setOpenPopupSetupColumn }) : "";
+                        return item.align === 'right' ? jsxRuntime.jsx(ToolBarElement, { item: item, index: index }) : '';
                     }) })] }) }));
 };
-const ToolBarElement = ({ item, index, setOpenPopupSetupColumn }) => {
-    if (item.id === "GROUP") {
-        return (jsxRuntime.jsx("div", { className: "r-toolbar-item cursor-pointer", "aria-disabled": "false", children: jsxRuntime.jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "stroke-width": "1.5", id: "toolbar-columns-group", "font-size": "20", color: "#7F7F7F", className: "cursor-pointer", children: [jsxRuntime.jsxs("g", { "clip-path": "url(#group_svg__a)", fill: "#7F7F7F", children: [jsxRuntime.jsx("path", { d: "M22.167 0h-7.334c-.486 0-.952.181-1.295.503A1.662 1.662 0 0 0 13 1.714v20.572c0 .454.194.89.538 1.211.343.322.81.503 1.295.503h7.334c.486 0 .952-.181 1.295-.503.344-.321.537-.757.538-1.211V1.714c0-.454-.194-.89-.538-1.211A1.902 1.902 0 0 0 22.167 0Zm0 1.714v6h-7.334v-6h7.334Zm0 7.715v5.142h-7.334V9.43h7.334Zm-7.334 12.857v-6h7.334v6h-7.334ZM7.502 11.25h-1.5v-1.5h-1.5v1.5h-1.5v1.5h1.5v1.5h1.5v-1.5h1.5v-1.5Z" }), jsxRuntime.jsx("path", { d: "M10.502 4.5V3h-4.5a1.502 1.502 0 0 0-1.5 1.5v2.31a5.242 5.242 0 0 0 0 10.38v2.31a1.502 1.502 0 0 0 1.5 1.5h4.5v-1.5h-4.5v-2.31a5.243 5.243 0 0 0 0-10.38V4.5h4.5Zm-1.5 7.5a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z" })] }), jsxRuntime.jsx("defs", { children: jsxRuntime.jsx("clipPath", { id: "group_svg__a", children: jsxRuntime.jsx("path", { fill: "#fff", d: "M0 0h24v24H0z" }) }) })] }) }, `toolbar-top-${index}`));
-    }
-    if (item.id === "EXPAND") {
-        return jsxRuntime.jsx("div", { className: "r-toolbar-item cursor-pointer", "aria-disabled": "false" }, `toolbar-top-${index}`);
-    }
-    if (item.id === "COLUMN_CHOOSE") {
-        return (jsxRuntime.jsx("div", { className: "r-toolbar-item cursor-pointer", "aria-disabled": "false", children: jsxRuntime.jsx(SvgSettings, { className: "me-1", fontSize: 20, color: "#7F7F7F", onClick: () => setOpenPopupSetupColumn(true) }) }, `toolbar-top-${index}`));
-    }
+const ToolBarElement = ({ item, index }) => {
     return (jsxRuntime.jsx("div", { className: "r-toolbar-item", "aria-disabled": "false", children: item.template?.() }, `toolbar-top-${index}`));
 };
 
@@ -30585,6 +30585,36 @@ function setYear(date, year, options) {
   return date_;
 }
 
+/**
+ * The subMonths function options.
+ */
+
+/**
+ * @name subMonths
+ * @category Month Helpers
+ * @summary Subtract the specified number of months from the given date.
+ *
+ * @description
+ * Subtract the specified number of months from the given date.
+ *
+ * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc).
+ * @typeParam ResultDate - The result `Date` type, it is the type returned from the context function if it is passed, or inferred from the arguments.
+ *
+ * @param date - The date to be changed
+ * @param amount - The amount of months to be subtracted.
+ * @param options - An object with options
+ *
+ * @returns The new date with the months subtracted
+ *
+ * @example
+ * // Subtract 5 months from 1 February 2015:
+ * const result = subMonths(new Date(2015, 1, 1), 5)
+ * //=> Mon Sep 01 2014 00:00:00
+ */
+function subMonths(date, amount, options) {
+  return addMonths(date, -amount, options);
+}
+
 /**
  * Time zone name format.
  */
@@ -36315,7 +36345,7 @@ const CommandElement = (props) => {
             }) }) }));
 };
 
-var css_248z$2 = "@charset \"UTF-8\";\n.react-select-table .select-table-control {\n  opacity: 1;\n  border: 1px solid hsl(0, 0%, 80%);\n  border-radius: 0.357rem;\n  width: 100%;\n  height: 28px;\n  background-color: #FFFFFF;\n  display: flex;\n  align-items: center;\n  padding: 2px 8px;\n}\n.react-select-table .select-table-control .select-table-indicator svg {\n  fill: #c4c4c4 !important;\n}\n.react-select-table .select-table-control .icon-clear {\n  font-size: 25px;\n  margin-top: 2px;\n  font-weight: 500;\n  color: #c4c4c4;\n}\n.react-select-table .select-table-control .icon-clear:hover {\n  color: rgba(0, 0, 0, 0.8705882353) !important;\n}\n.react-select-table .select-table-control.r-select-is-open .select-table-indicator svg {\n  fill: rgba(0, 0, 0, 0.8705882353) !important;\n}\n.react-select-table .select-table-control.r-select-is-invalid {\n  border: 1px solid red !important;\n}\n.react-select-table .select-table-control.r-select-is-focus {\n  border: 1px solid #1989fa !important;\n}\n.react-select-table .select-table-control.r-select-is-disabled {\n  background-color: #efefef !important;\n}\n.react-select-table .select-table-control .select-table-container {\n  position: relative;\n  flex: 1;\n}\n.react-select-table .select-table-control .select-table-container .input-container {\n  background-color: transparent;\n  white-space: nowrap;\n  top: 0px;\n  left: 0px;\n  display: inline;\n}\n.react-select-table .select-table-control .select-table-container .input-container .select-input {\n  background-color: transparent;\n  text-align: center;\n  width: 100%;\n  box-sizing: border-box;\n  margin-left: -3px;\n  border: none;\n  /* Loại bỏ border */\n  outline: none;\n  /* Loại bỏ outline khi input được chọn */\n}\n.react-select-table .select-table-control .select-table-container .input-container .select-input:focus {\n  border-width: 0px !important;\n}\n.react-select-table .select-table-control .select-table-container .select-placeholder {\n  position: absolute;\n  color: #283046;\n  margin-top: 1px;\n  background-color: transparent;\n}\n.react-select-table .select-table-control .select-table-container .select-value {\n  position: absolute;\n  background-color: transparent;\n  bottom: 0px;\n  left: 0px;\n  width: 100%;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.react-select-table .formula-dropdown {\n  min-width: min-content !important;\n  box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 15px;\n}\n.react-select-table input::placeholder {\n  color: #000000 !important;\n  opacity: 1;\n  /* Firefox */\n}\n\n.r-select-grid.r-select-tree-grid .r-select-gridtable .r-select-row:hover {\n  background-color: rgba(235, 70, 25, 0.1) !important;\n  color: #eb4619;\n}\n\n.r-select-grid {\n  font-size: 12px;\n  font-family: Montserrat, Helvetica, Arial, serif;\n  font-weight: 500 !important;\n  border-radius: 4px !important;\n  overflow: hidden;\n}\n.r-select-grid table {\n  table-layout: fixed;\n  border-collapse: separate;\n  border-spacing: 0px;\n}\n.r-select-grid .r-select-gridtable {\n  -webkit-overflow-scrolling: touch;\n  overflow-x: auto;\n  overflow-y: auto;\n  position: relative;\n  background-color: #FFFFFF;\n  color: rgba(0, 0, 0, 0.8705882353) !important;\n  font-weight: 400 !important;\n  font-size: 13px !important;\n  /* Toàn bộ thanh cuộn */\n}\n.r-select-grid .r-select-gridtable::-webkit-scrollbar {\n  width: 9px;\n  height: 9px;\n}\n.r-select-grid .r-select-gridtable::-webkit-scrollbar-track {\n  background: #FCFCFC;\n}\n.r-select-grid .r-select-gridtable::-webkit-scrollbar-thumb {\n  background: #8B8B8B;\n  border-radius: 6px;\n}\n.r-select-grid .r-select-gridtable::-webkit-scrollbar-thumb:hover {\n  background: #636363;\n}\n.r-select-grid .r-select-gridtable .r-select-gridheader .r-select-row .r-select-headercell {\n  color: rgba(0, 0, 0, 0.8705882353) !important;\n  position: sticky;\n  padding: 0px;\n  height: 35px;\n  z-index: 1;\n  border-width: 0px;\n  line-height: 16px;\n}\n.r-select-grid .r-select-gridtable .r-select-gridheader .r-select-row .r-select-headercell .r-select-headercell-div {\n  border-bottom: 1px solid #e0e0e0;\n  background-color: #fafafa;\n  display: flex;\n  align-items: center;\n  text-align: center;\n  padding: 5px 10px;\n  height: 100%;\n}\n.r-select-grid .r-select-gridtable .r-select-gridheader .r-select-row .r-select-headercell .r-select-headercell-text {\n  width: 100%;\n}\n.r-select-grid .r-select-gridtable .r-select-gridcontent .r-select-row {\n  background-color: #FFFFFF;\n  cursor: pointer;\n}\n.r-select-grid .r-select-gridtable .r-select-gridcontent .r-select-row .cell-fixed {\n  position: sticky;\n  z-index: 1;\n}\n.r-select-grid .r-select-gridtable .r-select-gridcontent .r-select-row.fisrt-row .r-select-rowcell {\n  border-top-width: 0px !important;\n}\n.r-select-grid .r-select-gridtable .r-select-gridcontent .r-select-row.last-row .r-select-rowcell {\n  border-bottom: 1px solid #e0e0e0;\n}\n.r-select-grid .r-select-gridtable .r-select-gridcontent .r-select-row .r-select-rowcell {\n  border-top: 1px solid #e0e0e0;\n  height: 30px !important;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  padding: 7px 9px;\n  vertical-align: middle !important;\n}\n.r-select-grid .r-select-gridtable .r-select-gridcontent .r-select-row .r-select-rowcell.r-select-move {\n  background-color: rgba(235, 70, 25, 0.1) !important;\n  color: #eb4619 !important;\n}\n.r-select-grid .r-select-gridtable .r-select-gridcontent .r-select-row .r-select-rowcell.r-select-active {\n  background-color: #eb4619 !important;\n  color: #FFFFFF !important;\n}\n.r-tooltip .r-select-grid .r-select-gridtable .r-select-gridcontent .r-select-row .r-select-rowcell.r-hidden {\n  display: none;\n}\n.r-tooltip .r-select-grid .r-select-gridtable .r-select-gridcontent .r-select-row .r-select-rowcell.r-hidden ::after {\n  display: none;\n}\n.r-select-grid .r-select-gridtable .r-select-gridcontent .r-select-row .r-select-rowcell .r-icon-expand {\n  transition: transform 0.3s ease !important;\n}\n.r-select-grid .r-select-gridtable .r-select-gridcontent .r-select-row .r-select-rowcell .r-icon-expand.is-open {\n  transform: rotate(90deg) !important;\n  -moz-transform: rotate(90deg);\n  -webkit-transform: rotate(90deg);\n  -o-transform: rotate(90deg);\n}\n.r-select-grid .r-select-gridtable.no-header .r-select-rowcell {\n  border: none !important;\n}\n.r-select-grid .r-no-data {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 14px;\n  padding: 7px 9px;\n  color: #8f8f8f;\n}\n.r-select-grid .r-select-footer {\n  height: 30px;\n  background-color: #fafafa;\n}\n.r-select-grid .r-select-footer button {\n  font-weight: 400 !important;\n  font-size: 13px;\n}\n.r-select-grid .r-select-footer .r-btn {\n  border-width: 0px !important;\n}\n\n.r-pagesize .react-select-table .select-table-control {\n  border-radius: 0px;\n  border: 0px;\n  border-bottom: 1px solid #e0e0e0 !important;\n}\n.r-pagesize .react-select-table .select-table-control.r-select-is-focus {\n  border: 0px !important;\n  border-bottom: 1px solid #1989fa !important;\n}\n\n.r-sidebar {\n  width: 400px;\n  right: -400px;\n  padding: 0;\n  background-color: #FFFFFF;\n  z-index: 1051;\n  position: fixed;\n  top: 0;\n  bottom: 0;\n  height: 100vh;\n  height: calc(var(--vh, 1vh) * 100);\n  transition: right 0.4s cubic-bezier(0.05, 0.74, 0.2, 0.99);\n  backface-visibility: hidden;\n  border-left: 1px solid rgba(0, 0, 0, 0.05);\n}\n.r-sidebar.open {\n  box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.11), 0 5px 15px 0 rgba(0, 0, 0, 0.08);\n  right: 0;\n}\n.r-sidebar .modal-header {\n  background-color: #FFFFFF;\n}\n.r-sidebar .modal-header .btn-close {\n  padding: 0.8rem;\n  box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.1);\n  border-radius: 0.357rem;\n  background-color: #FFFFFF;\n  opacity: 1;\n  transition: all 0.23s ease 0.1s;\n  position: relative;\n  transform: translate(18px, -10px);\n}\n.r-sidebar .modal-header .btn-close:hover, .r-sidebar .modal-header .btn-close:focus, .r-sidebar .modal-header .btn-close:active {\n  opacity: 1;\n  outline: none;\n  transform: translate(15px, -2px);\n  box-shadow: none;\n}\n\n.r-sidebar .react-select {\n  max-width: 100%;\n}\n\n.r-sidebar {\n  width: 400px;\n  right: -100vw;\n  height: 100vh;\n}\n.r-sidebar .r-handle {\n  position: fixed;\n  background-color: #FFFFFF;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  filter: drop-shadow(0.9px 0.9px 1.5px);\n  height: 50px;\n  display: flex;\n  align-items: center;\n  border-radius: 0px 5px 5px 0px;\n  cursor: pointer;\n  margin-left: 7px;\n  z-index: 9;\n}\n.r-sidebar.customizer-md {\n  width: 600px;\n}\n.r-sidebar.customizer-lg {\n  width: 800px;\n}\n.r-sidebar.customizer-500 {\n  width: 500px;\n}\n@media (max-width: 500px) {\n  .r-sidebar.customizer-500 {\n    width: 100vw;\n  }\n}\n.r-sidebar.customizer-600 {\n  width: 600px;\n}\n@media (max-width: 600px) {\n  .r-sidebar.customizer-600 {\n    width: 100vw;\n  }\n}\n.r-sidebar.customizer-700 {\n  width: 700px;\n}\n@media (max-width: 700px) {\n  .r-sidebar.customizer-700 {\n    width: 100vw;\n  }\n}\n.r-sidebar.customizer-800 {\n  width: 800px;\n}\n@media (max-width: 800px) {\n  .r-sidebar.customizer-800 {\n    width: 100vw;\n  }\n}\n.r-sidebar.customizer-900 {\n  width: 900px;\n}\n@media (max-width: 900px) {\n  .r-sidebar.customizer-900 {\n    width: 100vw;\n  }\n}\n.r-sidebar.customizer-1000 {\n  width: 1000px;\n}\n@media (max-width: 1000px) {\n  .r-sidebar.customizer-1000 {\n    width: 100vw;\n  }\n}\n.r-sidebar.customizer-1500 {\n  width: 1500px;\n}\n@media (max-width: 1500px) {\n  .r-sidebar.customizer-1500 {\n    width: 100vw;\n  }\n}\n.r-sidebar.fullscreen {\n  width: 100%;\n}\n.r-sidebar.open {\n  right: 0;\n}\n\n.r-datepicker {\n  position: relative;\n}\n.r-datepicker .form-control {\n  height: 28px;\n}\n\n.r-datepicker-popup {\n  background: white;\n  border: 1px solid #e0e0e0;\n  padding: 15px 5px !important;\n}\n.r-datepicker-popup .rdp-nav {\n  display: none;\n}\n.r-datepicker-popup .rdp-month_caption {\n  display: none;\n}\n.r-datepicker-popup .select-month-year {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  padding: 5px 5px 8px 5px;\n}\n.r-datepicker-popup .select-month-year .select-month {\n  text-align: right;\n  width: 90px !important;\n}\n.r-datepicker-popup .select-month-year .select-year {\n  text-align: left;\n  width: 65px !important;\n}\n.r-datepicker-popup .select-month-year svg:hover {\n  color: #eb4619;\n}\n.r-datepicker-popup .select-month-year .select-table-control .select-table-container {\n  color: rgba(0, 0, 0, 0.8705882353) !important;\n  font-size: 14px !important;\n  font-weight: 600;\n}\n.r-datepicker-popup .select-month-year .select-table-control .select-table-container .select-input {\n  cursor: pointer !important;\n}\n.r-datepicker-popup .select-month-year .react-select-table .select-table-control {\n  border: none;\n}\n.r-datepicker-popup .select-month-year .react-select-table .r-select-is-focus {\n  border: none !important;\n}\n.r-datepicker-popup .select-month-year .select-table-indicator {\n  display: none;\n}\n.r-datepicker-popup .rdp-weekday {\n  color: #323232 !important;\n  opacity: 1 !important;\n  font-weight: 500;\n  font-size: 14px !important;\n}\n.r-datepicker-popup .rdp-day {\n  color: #323232 !important;\n  font-size: 13.5px !important;\n  height: 32px !important;\n  width: 32px !important;\n}\n.r-datepicker-popup .rdp-day .rdp-day_button {\n  height: 32px !important;\n  width: 32px !important;\n}\n.r-datepicker-popup .rdp-day.rdp-today {\n  font-weight: bold;\n  color: #eb4619;\n}\n.r-datepicker-popup .rdp-day.rdp-today .rdp-day_button {\n  border: 1px solid #eb4619;\n  border-radius: 8px;\n}\n.r-datepicker-popup .rdp-day.rdp-selected .rdp-day_button {\n  border: 1px solid #eb4619;\n  background-color: #eb4619;\n  color: #FFFFFF;\n  border-radius: 8px;\n}\n.r-datepicker-popup .rdp-day.rdp-in-range .rdp-day_button {\n  background-color: #fce6df;\n  color: #eb4619;\n  border-radius: 2px;\n  height: 22px !important;\n  border-width: 0px !important;\n}\n.r-datepicker-popup .rdp-day .rdp-day_button:hover {\n  background-color: #fce6df;\n  color: #eb4619;\n  border-radius: 8px;\n}\n.r-datepicker-popup .btn-today {\n  margin-top: 5px;\n  text-align: center;\n  font-size: 13px;\n  color: #eb4619;\n  cursor: pointer;\n  user-select: none;\n  font-weight: 500;\n}\n.r-datepicker-popup .btn-today:hover {\n  text-decoration: underline;\n}\n\n.tab-custom {\n  font-family: Roboto, \"Segoe UI\", GeezaPro, \"DejaVu Serif\", \"sans-serif\", -apple-system, BlinkMacSystemFont;\n  display: flex;\n}\n.tab-custom.tab-parent {\n  border-bottom: solid 1px #c9c9c9;\n}\n.tab-custom .btn-scroll {\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n}\n.tab-custom .tab-component::-webkit-scrollbar {\n  display: none;\n  /* Ẩn thanh cuộn nếu không cần */\n}\n.tab-custom .tab-component {\n  white-space: nowrap;\n  overflow-x: hidden;\n  scroll-behavior: smooth;\n}\n.tab-custom .tab-component > * {\n  display: inline-block;\n}\n.tab-custom .tab-component .tab-custom-item {\n  display: inline-block;\n  padding: 3px 10px;\n  line-height: 23px;\n  cursor: pointer;\n  font-size: 13px;\n  font-weight: 500;\n  text-transform: uppercase;\n  height: 30px;\n  color: rgba(0, 0, 0, 0.5);\n}\n.tab-custom .tab-component .tab-custom-item.active {\n  border-bottom: solid 2px #eb4619 !important;\n  color: #eb4619;\n}\n.tab-custom.tab-child .tab-custom-item {\n  font-size: 12px !important;\n  line-height: 23px !important;\n  border-radius: 5px 5px 0px 0px;\n  margin: 8px 3px 0px 3px;\n  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;\n}\n\n.bs-stepper {\n  background-color: #FFFFFF;\n  box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.1);\n  border-radius: 0.5rem;\n}\n.bs-stepper .bs-stepper-header {\n  padding: 1.5rem 1.5rem;\n  flex-wrap: wrap;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.08);\n  margin: 0;\n}\n.bs-stepper .bs-stepper-header .line {\n  flex: 0;\n  min-width: auto;\n  min-height: auto;\n  background-color: transparent;\n  margin: 0;\n  padding: 0 1.75rem;\n  color: #283046;\n  font-size: 1.5rem;\n}\n.bs-stepper .bs-stepper-header .step {\n  margin-bottom: 0.25rem;\n  margin-top: 0.25rem;\n}\n.bs-stepper .bs-stepper-header .step .step-trigger {\n  flex-wrap: nowrap;\n  padding: 0;\n  font-weight: normal;\n}\n.bs-stepper .bs-stepper-header .step .step-trigger .bs-stepper-box {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 38px;\n  height: 38px;\n  padding: 0.5em 0;\n  font-weight: 500;\n  color: #babfc7;\n  background-color: rgba(186, 191, 199, 0.12);\n  border-radius: 0.35rem;\n}\n.bs-stepper .bs-stepper-header .step .step-trigger .bs-stepper-label {\n  text-align: left;\n  margin: 0;\n  margin-top: 0.5rem;\n  margin-left: 1rem;\n}\n.bs-stepper .bs-stepper-header .step .step-trigger .bs-stepper-label .bs-stepper-title {\n  display: inherit;\n  color: #283046;\n  font-weight: 600;\n  line-height: 1rem;\n  margin-bottom: 0rem;\n}\n.bs-stepper .bs-stepper-header .step .step-trigger .bs-stepper-label .bs-stepper-subtitle {\n  font-weight: 400;\n  font-size: 0.85rem;\n  color: #b9b9c3;\n}\n.bs-stepper .bs-stepper-header .step .step-trigger:hover {\n  background-color: transparent;\n}\n.bs-stepper .bs-stepper-header .step.active .step-trigger .bs-stepper-box {\n  background-color: #eb4619;\n  color: #FFFFFF;\n  box-shadow: 0 3px 6px 0 rgba(235, 70, 25, 0.4);\n}\n.bs-stepper .bs-stepper-header .step.active .step-trigger .bs-stepper-label .bs-stepper-title {\n  color: #eb4619;\n}\n.bs-stepper .bs-stepper-header .step.crossed .step-trigger .bs-stepper-box {\n  background-color: rgba(235, 70, 25, 0.12);\n  color: #eb4619;\n}\n.bs-stepper .bs-stepper-header .step.crossed .step-trigger .bs-stepper-label .bs-stepper-title {\n  color: #b9b9c3;\n}\n.bs-stepper .bs-stepper-header .step.crossed + .line {\n  color: #eb4619;\n}\n.bs-stepper .bs-stepper-content {\n  padding: 1.5rem 1.5rem;\n}\n.bs-stepper .bs-stepper-content .content {\n  margin-left: 0;\n}\n.bs-stepper .bs-stepper-content .content .content-header {\n  margin-bottom: 1rem;\n}\n.bs-stepper.vertical .bs-stepper-header {\n  border-right: 1px solid #e0e0e0;\n  border-bottom: none;\n}\n.bs-stepper.vertical .bs-stepper-header .step .step-trigger {\n  padding: 1rem 0;\n}\n.bs-stepper.vertical .bs-stepper-header .line {\n  display: none;\n}\n.bs-stepper.vertical .bs-stepper-content {\n  width: 100%;\n  padding-top: 2.5rem;\n}\n.bs-stepper.vertical .bs-stepper-content .content:not(.active) {\n  display: none;\n}\n.bs-stepper.vertical.wizard-icons .step {\n  text-align: center;\n}\n.bs-stepper.wizard-modern {\n  background-color: transparent;\n  box-shadow: none;\n}\n.bs-stepper.wizard-modern .bs-stepper-header {\n  border: none;\n}\n.bs-stepper.wizard-modern .bs-stepper-content {\n  background-color: #FFFFFF;\n  border-radius: 0.5rem;\n  box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.1);\n}\n\n.horizontal-wizard,\n.vertical-wizard,\n.modern-horizontal-wizard,\n.modern-vertical-wizard {\n  margin-bottom: 2.2rem;\n}\n\nhtml[data-textdirection=rtl] .btn-prev,\nhtml[data-textdirection=rtl] .btn-next {\n  display: flex;\n}\nhtml[data-textdirection=rtl] .btn-prev i,\nhtml[data-textdirection=rtl] .btn-prev svg,\nhtml[data-textdirection=rtl] .btn-next i,\nhtml[data-textdirection=rtl] .btn-next svg {\n  transform: rotate(-180deg);\n}\n\n@media (max-width: 992px) {\n  .bs-stepper .bs-stepper-header {\n    flex-direction: column;\n    align-items: flex-start;\n  }\n  .bs-stepper .bs-stepper-header .step .step-trigger {\n    padding: 0.5rem 0 !important;\n    flex-direction: row;\n  }\n  .bs-stepper .bs-stepper-header .line {\n    display: none;\n  }\n  .bs-stepper.vertical {\n    flex-direction: column;\n  }\n  .bs-stepper.vertical .bs-stepper-header {\n    align-items: flex-start;\n  }\n  .bs-stepper.vertical .bs-stepper-content {\n    padding-top: 1.5rem;\n  }\n}\n.r-table-edit .r-grid {\n  font-size: 12px;\n}\n.r-table-edit .r-grid .r-search {\n  display: flex;\n  position: relative;\n  align-items: center;\n}\n.r-table-edit .r-grid .r-search .input__value {\n  z-index: 1;\n}\n.r-table-edit .r-grid .r-search .input__value.is-clearable {\n  padding-right: 25px;\n}\n.r-table-edit .r-grid .r-search .input__clear-icon {\n  position: absolute;\n  right: 5px;\n  z-index: 10;\n}\n.r-table-edit .r-grid .r-gridtable {\n  -webkit-overflow-scrolling: touch;\n  overflow-x: auto;\n  overflow-y: scroll;\n  position: relative;\n  background-color: #FFFFFF;\n  color: rgba(0, 0, 0, 0.8705882353);\n  font-weight: 400;\n  border: 1px solid #e0e0e0;\n  /* Toàn bộ thanh cuộn */\n  /* Nền của thanh cuộn */\n  /* Thanh trượt (thumb) */\n  /* Khi hover */\n}\n.r-table-edit .r-grid .r-gridtable table {\n  table-layout: fixed;\n  border-collapse: separate;\n  border-spacing: 0px;\n}\n.r-table-edit .r-grid .r-gridtable::-webkit-scrollbar {\n  width: 9px;\n  /* Độ rộng của thanh cuộn */\n  height: 9px;\n  /* Độ cao của thanh cuộn */\n}\n.r-table-edit .r-grid .r-gridtable::-webkit-scrollbar-track {\n  background: #FCFCFC;\n  /* Màu nền nhạt */\n}\n.r-table-edit .r-grid .r-gridtable::-webkit-scrollbar-thumb {\n  background: #8B8B8B;\n  /* Màu xám nhạt */\n  border-radius: 6px;\n  /* Bo góc giống Edge */\n}\n.r-table-edit .r-grid .r-gridtable::-webkit-scrollbar-thumb:hover {\n  background: #636363;\n  /* Màu đậm hơn khi hover */\n}\n.r-table-edit .r-grid .r-gridtable .react-resizable-handle.react-resizable-handle-se {\n  position: absolute;\n  right: 0px;\n  top: 0px;\n  width: 10px;\n  height: 100%;\n  cursor: col-resize;\n  background-image: none;\n}\n.r-table-edit .r-grid .r-gridtable .r-filter svg.active {\n  color: #eb4619;\n}\n.r-table-edit .r-grid .r-gridtable .r-filter-popup .react-select-table .select-value {\n  line-height: 20px !important;\n}\n.r-table-edit .r-grid .r-gridtable .r-filter-popup .react-select-table .select-placeholder {\n  line-height: 20px !important;\n}\n.r-table-edit .r-grid .r-gridtable .r-filter-popup .react-select-table .r-select-is-focus {\n  border-color: #eb4619 !important;\n}\n.r-table-edit .r-grid .r-gridtable .r-filter-popup .form-control:focus {\n  border-color: #eb4619 !important;\n}\n.r-table-edit .r-grid .r-gridtable .r-no-data {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 14px;\n  padding: 20px 9px;\n  color: #8f8f8f;\n}\n.r-table-edit .r-grid .r-gridtable .r-loading-overlay {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(255, 255, 255, 0.3);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  z-index: 3;\n}\n.r-table-edit .r-grid .r-gridtable .r-loading-overlay .r-loading {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 14px;\n  padding: 7px 9px;\n  color: #eb4619;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridheader .r-row .cell-fixed {\n  z-index: 2 !important;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridheader .r-row .cell-fixed.fix-right .r-headercell-div {\n  border-left: 1px solid #e0e0e0;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridheader .r-row .cell-fixed.fix-left .r-headercell-div {\n  border-right: 1px solid #e0e0e0;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridheader .r-row .cell-fixed.fix-left.fixed-last .r-headercell-div {\n  box-shadow: 2px 0 4px -1px rgba(0, 0, 0, 0.1);\n}\n.r-table-edit .r-grid .r-gridtable .r-gridheader .r-row .cell-fixed.fix-right.fixed-last .r-headercell-div {\n  box-shadow: -2px 0 4px -1px rgba(0, 0, 0, 0.1);\n}\n.r-table-edit .r-grid .r-gridtable .r-gridheader .r-row .r-headercell {\n  color: rgba(0, 0, 0, 0.8705882353);\n  position: sticky;\n  padding: 0px;\n  height: 42px;\n  z-index: 1;\n  border-width: 0px;\n  line-height: 16px;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridheader .r-row .r-headercell .r-headercell-div {\n  border-right: 1px solid #e0e0e0;\n  border-bottom: 1px solid #e0e0e0;\n  background-color: #FFFFFF;\n  display: flex;\n  align-items: center;\n  text-align: center;\n  padding: 5px 10px;\n  height: 100%;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridheader .r-row .r-headercell .header-content {\n  display: flex;\n  flex: 1 1 0%;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridheader .r-row .r-headercell .header-content .text-content {\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row:first-of-type .r-rowcell-div {\n  border-top-color: #FFFFFF;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row {\n  font-size: 13px;\n  transition: transform 0.05s linear;\n  will-change: transform;\n  backface-visibility: hidden;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .cell-fixed {\n  position: sticky;\n  z-index: 1;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .cell-fixed .r-rowcell.r-cell-selected-right {\n  margin-right: 1px;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell {\n  background-color: #FFFFFF;\n  border-bottom: 1px solid #e0e0e0;\n  border-right: 1px solid #e0e0e0;\n  vertical-align: middle;\n  padding: 0;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell.cell-fixed .r-rowcell-div.r-cell-selected-right {\n  padding-right: 1px;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell.fix-right {\n  border-left: 1px solid #e0e0e0;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell.fix-right.fixed-last {\n  border-left: 1px solid #e0e0e0;\n  box-shadow: -2px 0 4px -1px rgba(0, 0, 0, 0.1);\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell.fix-left.fixed-last {\n  border-right: 1px solid #e0e0e0;\n  box-shadow: 2px 0 4px -1px rgba(0, 0, 0, 0.1);\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell.r-active-row {\n  background-color: #fce6df;\n  border-right: 2px solid #eb4619;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div {\n  min-height: 28px !important;\n  border: 1px solid transparent;\n  position: relative;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .r-icon-expand {\n  transition: transform 0.3s ease;\n  position: absolute;\n  left: 3px;\n  top: 8px;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .r-icon-expand.is-open {\n  transform: rotate(90deg);\n  -moz-transform: rotate(90deg);\n  -webkit-transform: rotate(90deg);\n  -o-transform: rotate(90deg);\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .arrow-context-menu {\n  position: absolute;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 15px;\n  width: 15px;\n  background-color: #FFFFFF;\n  border-radius: 10px;\n  border: 1px solid #e0e0e0;\n  box-shadow: 0px 0px 2px #e0e0e0;\n  right: -5px;\n  bottom: -5px;\n  z-index: 10000;\n  cursor: pointer;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div.command {\n  padding-top: 0px;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div:focus {\n  outline: none;\n  /* bỏ viền focus mặc định */\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div.r-cell-disable {\n  background-color: #f9f9f9;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div.r-active-cell {\n  background-color: rgb(255, 240, 240);\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .r-cell-text:focus {\n  outline: none;\n  /* bỏ viền focus mặc định */\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .r-icon-invalid {\n  position: absolute;\n  width: 10px;\n  height: 10px;\n  top: 0px;\n  left: -6px;\n  rotate: -90deg;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .r-drag-icon {\n  position: absolute;\n  border: 1px solid #FFFFFF;\n  bottom: -2px;\n  right: -2px;\n  width: 7px;\n  height: 7px;\n  background-color: #eb4619;\n  border-radius: 20%;\n  cursor: crosshair;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .r-cell-text {\n  padding: 0px 7px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  display: flex;\n  align-items: center;\n  min-width: 0;\n  min-height: 28px;\n  flex: 1;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .r-cell-text .r-drop-icon {\n  position: absolute;\n  fill: #c4c4c4 !important;\n  right: 8.5px;\n  top: 3.5px;\n  cursor: pointer;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .is-invalid {\n  border-width: 0px !important;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .is-invalid .r-select-is-invalid {\n  border-width: 0px !important;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div.r-cell-selected-top {\n  border-top: 1px solid #eb4619;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div.r-cell-selected-bottom {\n  border-bottom: 1px solid #eb4619;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div.r-cell-selected-left {\n  border-left: 1px solid #eb4619;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div.r-cell-selected-right {\n  border-right: 1px solid #eb4619;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .r-datepicker .form-control {\n  padding: 0px 4px;\n  border-radius: 0px;\n  border-width: 0px;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .react-select-table.is-invalid {\n  border-width: 0px;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .react-select-table .r-select-is-focus {\n  border-width: 0px !important;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .react-select-table .select-table-control {\n  border-radius: 0px;\n  border-width: 0px;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .react-select-table .select-table-control.r-select-is-focus {\n  border: 1px solid #1989fa;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .form-edit .display-value {\n  cursor: pointer;\n  border-radius: 0px;\n  background-color: #FFFFFF;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .form-edit .input-display {\n  border-width: 0px;\n  box-sizing: border-box;\n  border: none;\n  /* Loại bỏ border */\n  outline: none;\n  /* Loại bỏ outline khi input được chọn */\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .form-edit .form-input-content .form-control {\n  border-radius: 4px;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .form-edit .form-input-content .form-control:focus {\n  border: 1px solid #1989fa;\n  outline: none;\n  box-shadow: none;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .form-edit input::placeholder {\n  color: #eb4619;\n  opacity: 1;\n  /* Firefox */\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .form-edit-inline .form__display {\n  vertical-align: middle;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .form-edit-inline .form__edit {\n  display: none;\n  text-align: left;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .form-edit-inline .form__edit.active {\n  display: flex;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .form-edit-inline .form__edit .form-label {\n  font-size: 10px;\n  margin-bottom: 0px;\n  text-align: left;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .form-edit-inline .form__edit .form-control {\n  border-radius: 0px;\n  height: 23px;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .form-edit-inline .form__edit .form__element {\n  margin: 0px 2px;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .r-date-input {\n  text-align: center;\n  height: 29px;\n  border: 1px solid #ccc;\n  border-radius: 4px;\n  padding: 5px;\n  font-size: 14px;\n  background-color: #f9f9f9;\n  color: #333;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .form-control:focus {\n  border-radius: 0px;\n  border-width: 0px;\n  background-color: #f8f8f8;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div input {\n  font-size: 13px;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridfoot {\n  color: #283046;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridfoot .r-row {\n  bottom: 0px;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridfoot .r-row .r-footer {\n  background-color: #fafafa;\n  font-size: 14px;\n  font-weight: 600;\n  width: 100px;\n  position: sticky;\n  z-index: 1;\n  bottom: 0;\n  border-width: 0px;\n  padding: 0px;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridfoot .r-row .r-footer.cell-fixed {\n  z-index: 2;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridfoot .r-row .r-footer .r-footer-div {\n  height: 30px;\n  padding: 5px 7px;\n}\n.r-table-edit .r-grid .r-gridtable .formula-dropdown {\n  box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 15px;\n}\n.r-table-edit .r-grid .text-left .form-label {\n  text-align: left;\n}\n.r-table-edit .r-grid .r-toolbar {\n  border: 1px solid #e0e0e0;\n  height: 44px;\n}\n.r-table-edit .r-grid .r-toolbar.r-toolbar-bottom {\n  border-top-width: 0px;\n}\n.r-table-edit .r-grid .r-toolbar.r-toolbar-top {\n  border-bottom-width: 0px;\n}\n.r-table-edit .r-grid .r-toolbar .r-toolbar-items {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n.r-table-edit .r-grid .r-toolbar .r-toolbar-items .r-toolbar-left {\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n}\n.r-table-edit .r-grid .r-toolbar .r-toolbar-items .r-toolbar-left .r-toolbar-item {\n  margin: 7px 0px 7px 7px;\n}\n.r-table-edit .r-grid .r-toolbar .r-toolbar-items .r-toolbar-center {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.r-table-edit .r-grid .r-toolbar .r-toolbar-items .r-toolbar-center .r-toolbar-item {\n  margin: 7px 3px 7px 3px;\n}\n.r-table-edit .r-grid .r-toolbar .r-toolbar-items .r-toolbar-right {\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n}\n.r-table-edit .r-grid .r-toolbar .r-toolbar-items .r-toolbar-right .r-toolbar-item {\n  margin: 7px 7px 7px 0px;\n}\n.r-table-edit .r-setting-container {\n  margin: 0px 15px;\n}\n.r-table-edit .r-setting-container .r-setting-content {\n  -webkit-overflow-scrolling: touch;\n  overflow-x: auto;\n  overflow-y: scroll;\n  position: relative;\n  background-color: #FFFFFF;\n  color: rgba(0, 0, 0, 0.8705882353);\n  font-weight: 400;\n  border-left: 1px solid #e0e0e0;\n  border-right: 1px solid #e0e0e0;\n  /* Toàn bộ thanh cuộn */\n  /* Nền của thanh cuộn */\n  /* Thanh trượt (thumb) */\n  /* Khi hover */\n}\n.r-table-edit .r-setting-container .r-setting-content::-webkit-scrollbar {\n  width: 9px;\n  /* Độ rộng của thanh cuộn */\n  height: 9px;\n  /* Độ cao của thanh cuộn */\n}\n.r-table-edit .r-setting-container .r-setting-content::-webkit-scrollbar-track {\n  background: #FCFCFC;\n  /* Màu nền nhạt */\n}\n.r-table-edit .r-setting-container .r-setting-content::-webkit-scrollbar-thumb {\n  background: #8B8B8B;\n  /* Màu xám nhạt */\n  border-radius: 6px;\n  /* Bo góc giống Edge */\n}\n.r-table-edit .r-setting-container .r-setting-content::-webkit-scrollbar-thumb:hover {\n  background: #636363;\n  /* Màu đậm hơn khi hover */\n}\n.r-table-edit .r-setting-container .r-setting-row {\n  padding: 5px !important;\n  margin: 0px;\n  border-bottom: 1px solid #e0e0e0;\n  font-size: 13px;\n  display: flex;\n  align-items: center;\n}\n.r-table-edit .r-setting-container .r-setting-row .r-setting-cell {\n  padding-right: 10px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.r-table-edit .r-setting-container .r-setting-row .r-setting-cell .form-control {\n  font-size: 13px !important;\n}\n.r-table-edit .r-setting-container .r-setting-row.r-setting-header {\n  font-size: 12px !important;\n}\n.r-table-edit.r-virtualized-table .r-row:hover .r-rowcell {\n  background-color: #fce6df !important;\n}\n.r-table-edit .r-pager {\n  border: 1px solid #e0e0e0;\n  border-top-width: 0px;\n  min-height: 50px;\n  width: 100%;\n  display: inline-block;\n}\n.r-table-edit .r-pager .r-pagercontainer {\n  margin-left: 10px;\n  float: left;\n  height: 100%;\n  display: block;\n  align-items: center;\n}\n.r-table-edit .r-pager .r-pagercontainer .r-button {\n  display: inline-block;\n  margin: 9px 6px;\n  height: 30px;\n  width: 30px;\n  padding: 6px;\n  border-width: 0px;\n  background-color: transparent;\n}\n.r-table-edit .r-pager .r-pagercontainer .r-button svg {\n  font-size: 16px;\n}\n.r-table-edit .r-pager .r-pagercontainer .r-number {\n  display: inline-block;\n  margin: 10px 4px 0px 0px;\n  height: 25px;\n  width: 25px;\n  font-size: 13px;\n  padding-top: 4px;\n  text-align: center;\n  cursor: pointer;\n  border-radius: 5px;\n}\n.r-table-edit .r-pager .r-pagercontainer .r-number.r-active {\n  background-color: rgba(235, 70, 25, 0.1);\n  color: #eb4619;\n}\n.r-table-edit .r-pager .r-pagercontainer .r-number:hover {\n  border: 1px solid #eb4619;\n}\n.r-table-edit .r-pager .r-pagesize {\n  margin-left: 20px;\n  font-size: 13px;\n  display: inline-block;\n}\n.r-table-edit .r-pager .r-pagesize .select-pagesize__menu-portal {\n  z-index: 5;\n}\n.r-table-edit .r-pager .r-parentmsgbar {\n  font-size: 13px;\n  float: right;\n  padding-bottom: 9px;\n  padding-right: 18px;\n  padding-top: 14px;\n}\n\n.r-tooltip .tooltip-inner {\n  font-size: 11px;\n}\n.r-tooltip.tooltip-error ::before {\n  border-top-color: rgb(235, 78, 78);\n}\n.r-tooltip.tooltip-error .tooltip-inner {\n  background-color: rgb(235, 78, 78);\n}\n\n.btn-input-style {\n  font-weight: 500;\n  text-transform: uppercase;\n  border: 1px solid #e0e0e0;\n  border-radius: 5px;\n  margin-left: 3px;\n  height: 28px;\n  padding: 2px 5px;\n  cursor: pointer;\n}\n.btn-input-style:hover {\n  background-color: rgba(235, 70, 25, 0.1);\n  color: #eb4619;\n}\n.btn-input-style.active-custom {\n  background-color: #eb4619;\n  color: #FFFFFF;\n}";
+var css_248z$2 = "@charset \"UTF-8\";\n.react-select-table .select-table-control {\n  opacity: 1;\n  border: 1px solid hsl(0, 0%, 80%);\n  border-radius: 0.357rem;\n  width: 100%;\n  height: 28px;\n  background-color: #FFFFFF;\n  display: flex;\n  align-items: center;\n  padding: 2px 8px;\n}\n.react-select-table .select-table-control .select-table-indicator svg {\n  fill: #c4c4c4 !important;\n}\n.react-select-table .select-table-control .icon-clear {\n  font-size: 25px;\n  margin-top: 2px;\n  font-weight: 500;\n  color: #c4c4c4;\n}\n.react-select-table .select-table-control .icon-clear:hover {\n  color: rgba(0, 0, 0, 0.8705882353) !important;\n}\n.react-select-table .select-table-control.r-select-is-open .select-table-indicator svg {\n  fill: rgba(0, 0, 0, 0.8705882353) !important;\n}\n.react-select-table .select-table-control.r-select-is-invalid {\n  border: 1px solid red !important;\n}\n.react-select-table .select-table-control.r-select-is-focus {\n  border: 1px solid #1989fa !important;\n}\n.react-select-table .select-table-control.r-select-is-disabled {\n  background-color: #efefef !important;\n}\n.react-select-table .select-table-control .select-table-container {\n  position: relative;\n  flex: 1;\n}\n.react-select-table .select-table-control .select-table-container .input-container {\n  background-color: transparent;\n  white-space: nowrap;\n  top: 0px;\n  left: 0px;\n  display: inline;\n}\n.react-select-table .select-table-control .select-table-container .input-container .select-input {\n  background-color: transparent;\n  text-align: center;\n  width: 100%;\n  box-sizing: border-box;\n  margin-left: -3px;\n  border: none;\n  /* Loại bỏ border */\n  outline: none;\n  /* Loại bỏ outline khi input được chọn */\n}\n.react-select-table .select-table-control .select-table-container .input-container .select-input:focus {\n  border-width: 0px !important;\n}\n.react-select-table .select-table-control .select-table-container .select-placeholder {\n  position: absolute;\n  color: #283046;\n  margin-top: 1px;\n  background-color: transparent;\n}\n.react-select-table .select-table-control .select-table-container .select-value {\n  position: absolute;\n  background-color: transparent;\n  bottom: 0px;\n  left: 0px;\n  width: 100%;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.react-select-table .formula-dropdown {\n  min-width: min-content !important;\n  box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 15px;\n}\n.react-select-table input::placeholder {\n  color: #000000 !important;\n  opacity: 1;\n  /* Firefox */\n}\n\n.r-select-grid.r-select-tree-grid .r-select-gridtable .r-select-row:hover {\n  background-color: rgba(235, 70, 25, 0.1) !important;\n  color: #eb4619;\n}\n\n.r-select-grid {\n  font-size: 12px;\n  font-family: Montserrat, Helvetica, Arial, serif;\n  font-weight: 500 !important;\n  border-radius: 4px !important;\n  overflow: hidden;\n}\n.r-select-grid table {\n  table-layout: fixed;\n  border-collapse: separate;\n  border-spacing: 0px;\n}\n.r-select-grid .r-select-gridtable {\n  -webkit-overflow-scrolling: touch;\n  overflow-x: auto;\n  overflow-y: auto;\n  position: relative;\n  background-color: #FFFFFF;\n  color: rgba(0, 0, 0, 0.8705882353) !important;\n  font-weight: 400 !important;\n  font-size: 13px !important;\n  /* Toàn bộ thanh cuộn */\n}\n.r-select-grid .r-select-gridtable::-webkit-scrollbar {\n  width: 9px;\n  height: 9px;\n}\n.r-select-grid .r-select-gridtable::-webkit-scrollbar-track {\n  background: #FCFCFC;\n}\n.r-select-grid .r-select-gridtable::-webkit-scrollbar-thumb {\n  background: #8B8B8B;\n  border-radius: 6px;\n}\n.r-select-grid .r-select-gridtable::-webkit-scrollbar-thumb:hover {\n  background: #636363;\n}\n.r-select-grid .r-select-gridtable .r-select-gridheader .r-select-row .r-select-headercell {\n  color: rgba(0, 0, 0, 0.8705882353) !important;\n  position: sticky;\n  padding: 0px;\n  height: 35px;\n  z-index: 1;\n  border-width: 0px;\n  line-height: 16px;\n}\n.r-select-grid .r-select-gridtable .r-select-gridheader .r-select-row .r-select-headercell .r-select-headercell-div {\n  border-bottom: 1px solid #e0e0e0;\n  background-color: #fafafa;\n  display: flex;\n  align-items: center;\n  text-align: center;\n  padding: 5px 10px;\n  height: 100%;\n}\n.r-select-grid .r-select-gridtable .r-select-gridheader .r-select-row .r-select-headercell .r-select-headercell-text {\n  width: 100%;\n}\n.r-select-grid .r-select-gridtable .r-select-gridcontent .r-select-row {\n  background-color: #FFFFFF;\n  cursor: pointer;\n}\n.r-select-grid .r-select-gridtable .r-select-gridcontent .r-select-row .cell-fixed {\n  position: sticky;\n  z-index: 1;\n}\n.r-select-grid .r-select-gridtable .r-select-gridcontent .r-select-row.fisrt-row .r-select-rowcell {\n  border-top-width: 0px !important;\n}\n.r-select-grid .r-select-gridtable .r-select-gridcontent .r-select-row.last-row .r-select-rowcell {\n  border-bottom: 1px solid #e0e0e0;\n}\n.r-select-grid .r-select-gridtable .r-select-gridcontent .r-select-row .r-select-rowcell {\n  border-top: 1px solid #e0e0e0;\n  height: 30px !important;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  padding: 7px 9px;\n  vertical-align: middle !important;\n}\n.r-select-grid .r-select-gridtable .r-select-gridcontent .r-select-row .r-select-rowcell.r-select-move {\n  background-color: rgba(235, 70, 25, 0.1) !important;\n  color: #eb4619 !important;\n}\n.r-select-grid .r-select-gridtable .r-select-gridcontent .r-select-row .r-select-rowcell.r-select-active {\n  background-color: #eb4619 !important;\n  color: #FFFFFF !important;\n}\n.r-tooltip .r-select-grid .r-select-gridtable .r-select-gridcontent .r-select-row .r-select-rowcell.r-hidden {\n  display: none;\n}\n.r-tooltip .r-select-grid .r-select-gridtable .r-select-gridcontent .r-select-row .r-select-rowcell.r-hidden ::after {\n  display: none;\n}\n.r-select-grid .r-select-gridtable .r-select-gridcontent .r-select-row .r-select-rowcell .r-icon-expand {\n  transition: transform 0.3s ease !important;\n}\n.r-select-grid .r-select-gridtable .r-select-gridcontent .r-select-row .r-select-rowcell .r-icon-expand.is-open {\n  transform: rotate(90deg) !important;\n  -moz-transform: rotate(90deg);\n  -webkit-transform: rotate(90deg);\n  -o-transform: rotate(90deg);\n}\n.r-select-grid .r-select-gridtable.no-header .r-select-rowcell {\n  border: none !important;\n}\n.r-select-grid .r-no-data {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 14px;\n  padding: 7px 9px;\n  color: #8f8f8f;\n}\n.r-select-grid .r-select-footer {\n  height: 30px;\n  background-color: #fafafa;\n}\n.r-select-grid .r-select-footer button {\n  font-weight: 400 !important;\n  font-size: 13px;\n}\n.r-select-grid .r-select-footer .r-btn {\n  border-width: 0px !important;\n}\n\n.r-pagesize .react-select-table .select-table-control {\n  border-radius: 0px;\n  border: 0px;\n  border-bottom: 1px solid #e0e0e0 !important;\n}\n.r-pagesize .react-select-table .select-table-control.r-select-is-focus {\n  border: 0px !important;\n  border-bottom: 1px solid #1989fa !important;\n}\n\n.r-sidebar {\n  width: 400px;\n  right: -400px;\n  padding: 0;\n  background-color: #FFFFFF;\n  z-index: 1051;\n  position: fixed;\n  top: 0;\n  bottom: 0;\n  height: 100vh;\n  height: calc(var(--vh, 1vh) * 100);\n  transition: right 0.4s cubic-bezier(0.05, 0.74, 0.2, 0.99);\n  backface-visibility: hidden;\n  border-left: 1px solid rgba(0, 0, 0, 0.05);\n}\n.r-sidebar.open {\n  box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.11), 0 5px 15px 0 rgba(0, 0, 0, 0.08);\n  right: 0;\n}\n.r-sidebar .modal-header {\n  background-color: #FFFFFF;\n}\n.r-sidebar .modal-header .btn-close {\n  padding: 0.8rem;\n  box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.1);\n  border-radius: 0.357rem;\n  background-color: #FFFFFF;\n  opacity: 1;\n  transition: all 0.23s ease 0.1s;\n  position: relative;\n  transform: translate(18px, -10px);\n}\n.r-sidebar .modal-header .btn-close:hover, .r-sidebar .modal-header .btn-close:focus, .r-sidebar .modal-header .btn-close:active {\n  opacity: 1;\n  outline: none;\n  transform: translate(15px, -2px);\n  box-shadow: none;\n}\n\n.r-sidebar .react-select {\n  max-width: 100%;\n}\n\n.r-sidebar {\n  width: 400px;\n  right: -100vw;\n  height: 100vh;\n}\n.r-sidebar .r-handle {\n  position: fixed;\n  background-color: #FFFFFF;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  filter: drop-shadow(0.9px 0.9px 1.5px);\n  height: 50px;\n  display: flex;\n  align-items: center;\n  border-radius: 0px 5px 5px 0px;\n  cursor: pointer;\n  margin-left: 7px;\n  z-index: 9;\n}\n.r-sidebar.customizer-md {\n  width: 600px;\n}\n.r-sidebar.customizer-lg {\n  width: 800px;\n}\n.r-sidebar.customizer-500 {\n  width: 500px;\n}\n@media (max-width: 500px) {\n  .r-sidebar.customizer-500 {\n    width: 100vw;\n  }\n}\n.r-sidebar.customizer-600 {\n  width: 600px;\n}\n@media (max-width: 600px) {\n  .r-sidebar.customizer-600 {\n    width: 100vw;\n  }\n}\n.r-sidebar.customizer-700 {\n  width: 700px;\n}\n@media (max-width: 700px) {\n  .r-sidebar.customizer-700 {\n    width: 100vw;\n  }\n}\n.r-sidebar.customizer-800 {\n  width: 800px;\n}\n@media (max-width: 800px) {\n  .r-sidebar.customizer-800 {\n    width: 100vw;\n  }\n}\n.r-sidebar.customizer-900 {\n  width: 900px;\n}\n@media (max-width: 900px) {\n  .r-sidebar.customizer-900 {\n    width: 100vw;\n  }\n}\n.r-sidebar.customizer-1000 {\n  width: 1000px;\n}\n@media (max-width: 1000px) {\n  .r-sidebar.customizer-1000 {\n    width: 100vw;\n  }\n}\n.r-sidebar.customizer-1500 {\n  width: 1500px;\n}\n@media (max-width: 1500px) {\n  .r-sidebar.customizer-1500 {\n    width: 100vw;\n  }\n}\n.r-sidebar.fullscreen {\n  width: 100%;\n}\n.r-sidebar.open {\n  right: 0;\n}\n\n.r-datepicker {\n  position: relative;\n}\n.r-datepicker .form-control {\n  height: 28px;\n}\n\n.r-datepicker-popup {\n  background: white;\n  border: 1px solid #e0e0e0;\n  padding: 15px 5px !important;\n}\n.r-datepicker-popup .rdp-nav {\n  display: none;\n}\n.r-datepicker-popup .rdp-month_caption {\n  display: none;\n}\n.r-datepicker-popup .select-month-year {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  padding: 5px 5px 8px 5px;\n}\n.r-datepicker-popup .select-month-year .select-month {\n  text-align: right;\n  width: 90px !important;\n}\n.r-datepicker-popup .select-month-year .select-year {\n  text-align: left;\n  width: 65px !important;\n}\n.r-datepicker-popup .select-month-year svg:hover {\n  color: #eb4619;\n}\n.r-datepicker-popup .select-month-year .select-table-control .select-table-container {\n  color: rgba(0, 0, 0, 0.8705882353) !important;\n  font-size: 14px !important;\n  font-weight: 600;\n}\n.r-datepicker-popup .select-month-year .select-table-control .select-table-container .select-input {\n  cursor: pointer !important;\n}\n.r-datepicker-popup .select-month-year .react-select-table .select-table-control {\n  border: none;\n}\n.r-datepicker-popup .select-month-year .react-select-table .r-select-is-focus {\n  border: none !important;\n}\n.r-datepicker-popup .select-month-year .select-table-indicator {\n  display: none;\n}\n.r-datepicker-popup .rdp-weekday {\n  color: rgba(0, 0, 0, 0.8705882353) !important;\n  opacity: 1 !important;\n  font-weight: 500;\n  font-size: 14px !important;\n}\n.r-datepicker-popup .rdp-day {\n  color: rgba(0, 0, 0, 0.8705882353) !important;\n  font-size: 13.5px !important;\n  height: 32px !important;\n  width: 32px !important;\n}\n.r-datepicker-popup .rdp-day .rdp-day_button {\n  height: 32px !important;\n  width: 32px !important;\n}\n.r-datepicker-popup .rdp-day.rdp-today {\n  font-weight: bold;\n  color: #eb4619;\n}\n.r-datepicker-popup .rdp-day.rdp-today .rdp-day_button {\n  border: 1px solid #eb4619;\n  border-radius: 8px;\n}\n.r-datepicker-popup .rdp-day.rdp-selected .rdp-day_button {\n  border: 1px solid #eb4619;\n  background-color: #eb4619;\n  color: #FFFFFF;\n  border-radius: 8px;\n}\n.r-datepicker-popup .rdp-day.rdp-in-range .rdp-day_button {\n  background-color: #fce6df;\n  color: #eb4619;\n  border-radius: 2px;\n  height: 22px !important;\n  border-width: 0px !important;\n}\n.r-datepicker-popup .rdp-day .rdp-day_button:hover {\n  background-color: #fce6df;\n  color: #eb4619;\n  border-radius: 8px;\n}\n.r-datepicker-popup .btn-today {\n  margin-top: 5px;\n  text-align: center;\n  font-size: 13px;\n  color: #eb4619;\n  cursor: pointer;\n  user-select: none;\n  font-weight: 500;\n}\n.r-datepicker-popup .btn-today:hover {\n  text-decoration: underline;\n}\n\n.tab-custom {\n  font-family: Roboto, \"Segoe UI\", GeezaPro, \"DejaVu Serif\", \"sans-serif\", -apple-system, BlinkMacSystemFont;\n  display: flex;\n}\n.tab-custom.tab-parent {\n  border-bottom: solid 1px #c9c9c9;\n}\n.tab-custom .btn-scroll {\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n}\n.tab-custom .tab-component::-webkit-scrollbar {\n  display: none;\n  /* Ẩn thanh cuộn nếu không cần */\n}\n.tab-custom .tab-component {\n  white-space: nowrap;\n  overflow-x: hidden;\n  scroll-behavior: smooth;\n}\n.tab-custom .tab-component > * {\n  display: inline-block;\n}\n.tab-custom .tab-component .tab-custom-item {\n  display: inline-block;\n  padding: 3px 10px;\n  line-height: 23px;\n  cursor: pointer;\n  font-size: 13px;\n  font-weight: 500;\n  text-transform: uppercase;\n  height: 30px;\n  color: rgba(0, 0, 0, 0.5);\n}\n.tab-custom .tab-component .tab-custom-item.active {\n  border-bottom: solid 2px #eb4619 !important;\n  color: #eb4619;\n}\n.tab-custom.tab-child .tab-custom-item {\n  font-size: 12px !important;\n  line-height: 23px !important;\n  border-radius: 5px 5px 0px 0px;\n  margin: 8px 3px 0px 3px;\n  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;\n}\n\n.bs-stepper {\n  background-color: #FFFFFF;\n  box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.1);\n  border-radius: 0.5rem;\n}\n.bs-stepper .bs-stepper-header {\n  padding: 1.5rem 1.5rem;\n  flex-wrap: wrap;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.08);\n  margin: 0;\n}\n.bs-stepper .bs-stepper-header .line {\n  flex: 0;\n  min-width: auto;\n  min-height: auto;\n  background-color: transparent;\n  margin: 0;\n  padding: 0 1.75rem;\n  color: #283046;\n  font-size: 1.5rem;\n}\n.bs-stepper .bs-stepper-header .step {\n  margin-bottom: 0.25rem;\n  margin-top: 0.25rem;\n}\n.bs-stepper .bs-stepper-header .step .step-trigger {\n  flex-wrap: nowrap;\n  padding: 0;\n  font-weight: normal;\n}\n.bs-stepper .bs-stepper-header .step .step-trigger .bs-stepper-box {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 38px;\n  height: 38px;\n  padding: 0.5em 0;\n  font-weight: 500;\n  color: #babfc7;\n  background-color: rgba(186, 191, 199, 0.12);\n  border-radius: 0.35rem;\n}\n.bs-stepper .bs-stepper-header .step .step-trigger .bs-stepper-label {\n  text-align: left;\n  margin: 0;\n  margin-top: 0.5rem;\n  margin-left: 1rem;\n}\n.bs-stepper .bs-stepper-header .step .step-trigger .bs-stepper-label .bs-stepper-title {\n  display: inherit;\n  color: #283046;\n  font-weight: 600;\n  line-height: 1rem;\n  margin-bottom: 0rem;\n}\n.bs-stepper .bs-stepper-header .step .step-trigger .bs-stepper-label .bs-stepper-subtitle {\n  font-weight: 400;\n  font-size: 0.85rem;\n  color: #b9b9c3;\n}\n.bs-stepper .bs-stepper-header .step .step-trigger:hover {\n  background-color: transparent;\n}\n.bs-stepper .bs-stepper-header .step.active .step-trigger .bs-stepper-box {\n  background-color: #eb4619;\n  color: #FFFFFF;\n  box-shadow: 0 3px 6px 0 rgba(235, 70, 25, 0.4);\n}\n.bs-stepper .bs-stepper-header .step.active .step-trigger .bs-stepper-label .bs-stepper-title {\n  color: #eb4619;\n}\n.bs-stepper .bs-stepper-header .step.crossed .step-trigger .bs-stepper-box {\n  background-color: rgba(235, 70, 25, 0.12);\n  color: #eb4619;\n}\n.bs-stepper .bs-stepper-header .step.crossed .step-trigger .bs-stepper-label .bs-stepper-title {\n  color: #b9b9c3;\n}\n.bs-stepper .bs-stepper-header .step.crossed + .line {\n  color: #eb4619;\n}\n.bs-stepper .bs-stepper-content {\n  padding: 1.5rem 1.5rem;\n}\n.bs-stepper .bs-stepper-content .content {\n  margin-left: 0;\n}\n.bs-stepper .bs-stepper-content .content .content-header {\n  margin-bottom: 1rem;\n}\n.bs-stepper.vertical .bs-stepper-header {\n  border-right: 1px solid #e0e0e0;\n  border-bottom: none;\n}\n.bs-stepper.vertical .bs-stepper-header .step .step-trigger {\n  padding: 1rem 0;\n}\n.bs-stepper.vertical .bs-stepper-header .line {\n  display: none;\n}\n.bs-stepper.vertical .bs-stepper-content {\n  width: 100%;\n  padding-top: 2.5rem;\n}\n.bs-stepper.vertical .bs-stepper-content .content:not(.active) {\n  display: none;\n}\n.bs-stepper.vertical.wizard-icons .step {\n  text-align: center;\n}\n.bs-stepper.wizard-modern {\n  background-color: transparent;\n  box-shadow: none;\n}\n.bs-stepper.wizard-modern .bs-stepper-header {\n  border: none;\n}\n.bs-stepper.wizard-modern .bs-stepper-content {\n  background-color: #FFFFFF;\n  border-radius: 0.5rem;\n  box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.1);\n}\n\n.horizontal-wizard,\n.vertical-wizard,\n.modern-horizontal-wizard,\n.modern-vertical-wizard {\n  margin-bottom: 2.2rem;\n}\n\nhtml[data-textdirection=rtl] .btn-prev,\nhtml[data-textdirection=rtl] .btn-next {\n  display: flex;\n}\nhtml[data-textdirection=rtl] .btn-prev i,\nhtml[data-textdirection=rtl] .btn-prev svg,\nhtml[data-textdirection=rtl] .btn-next i,\nhtml[data-textdirection=rtl] .btn-next svg {\n  transform: rotate(-180deg);\n}\n\n@media (max-width: 992px) {\n  .bs-stepper .bs-stepper-header {\n    flex-direction: column;\n    align-items: flex-start;\n  }\n  .bs-stepper .bs-stepper-header .step .step-trigger {\n    padding: 0.5rem 0 !important;\n    flex-direction: row;\n  }\n  .bs-stepper .bs-stepper-header .line {\n    display: none;\n  }\n  .bs-stepper.vertical {\n    flex-direction: column;\n  }\n  .bs-stepper.vertical .bs-stepper-header {\n    align-items: flex-start;\n  }\n  .bs-stepper.vertical .bs-stepper-content {\n    padding-top: 1.5rem;\n  }\n}\n.r-table-edit .r-grid {\n  font-size: 12px;\n}\n.r-table-edit .r-grid .r-search {\n  display: flex;\n  position: relative;\n  align-items: center;\n}\n.r-table-edit .r-grid .r-search .input__value {\n  z-index: 1;\n}\n.r-table-edit .r-grid .r-search .input__value.is-clearable {\n  padding-right: 25px;\n}\n.r-table-edit .r-grid .r-search .input__clear-icon {\n  position: absolute;\n  right: 5px;\n  z-index: 10;\n}\n.r-table-edit .r-grid .r-gridtable {\n  -webkit-overflow-scrolling: touch;\n  overflow-x: auto;\n  overflow-y: scroll;\n  position: relative;\n  background-color: #FFFFFF;\n  color: rgba(0, 0, 0, 0.8705882353);\n  font-weight: 400;\n  border: 1px solid #e0e0e0;\n  /* Toàn bộ thanh cuộn */\n  /* Nền của thanh cuộn */\n  /* Thanh trượt (thumb) */\n  /* Khi hover */\n}\n.r-table-edit .r-grid .r-gridtable table {\n  table-layout: fixed;\n  border-collapse: separate;\n  border-spacing: 0px;\n}\n.r-table-edit .r-grid .r-gridtable::-webkit-scrollbar {\n  width: 9px;\n  /* Độ rộng của thanh cuộn */\n  height: 9px;\n  /* Độ cao của thanh cuộn */\n}\n.r-table-edit .r-grid .r-gridtable::-webkit-scrollbar-track {\n  background: #FCFCFC;\n  /* Màu nền nhạt */\n}\n.r-table-edit .r-grid .r-gridtable::-webkit-scrollbar-thumb {\n  background: #8B8B8B;\n  /* Màu xám nhạt */\n  border-radius: 6px;\n  /* Bo góc giống Edge */\n}\n.r-table-edit .r-grid .r-gridtable::-webkit-scrollbar-thumb:hover {\n  background: #636363;\n  /* Màu đậm hơn khi hover */\n}\n.r-table-edit .r-grid .r-gridtable .react-resizable-handle.react-resizable-handle-se {\n  position: absolute;\n  right: 0px;\n  top: 0px;\n  width: 10px;\n  height: 100%;\n  cursor: col-resize;\n  background-image: none;\n}\n.r-table-edit .r-grid .r-gridtable .r-filter svg.active {\n  color: #eb4619;\n}\n.r-table-edit .r-grid .r-gridtable .r-filter-popup .react-select-table .select-value {\n  line-height: 20px !important;\n}\n.r-table-edit .r-grid .r-gridtable .r-filter-popup .react-select-table .select-placeholder {\n  line-height: 20px !important;\n}\n.r-table-edit .r-grid .r-gridtable .r-filter-popup .react-select-table .r-select-is-focus {\n  border-color: #eb4619 !important;\n}\n.r-table-edit .r-grid .r-gridtable .r-filter-popup .form-control:focus {\n  border-color: #eb4619 !important;\n}\n.r-table-edit .r-grid .r-gridtable .r-no-data {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 14px;\n  padding: 20px 9px;\n  color: #8f8f8f;\n}\n.r-table-edit .r-grid .r-gridtable .r-loading-overlay {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(255, 255, 255, 0.3);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  z-index: 3;\n}\n.r-table-edit .r-grid .r-gridtable .r-loading-overlay .r-loading {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 14px;\n  padding: 7px 9px;\n  color: #eb4619;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridheader .r-row .cell-fixed {\n  z-index: 2 !important;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridheader .r-row .cell-fixed.fix-right .r-headercell-div {\n  border-left: 1px solid #e0e0e0;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridheader .r-row .cell-fixed.fix-left .r-headercell-div {\n  border-right: 1px solid #e0e0e0;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridheader .r-row .cell-fixed.fix-left.fixed-last .r-headercell-div {\n  box-shadow: 2px 0 4px -1px rgba(0, 0, 0, 0.1);\n}\n.r-table-edit .r-grid .r-gridtable .r-gridheader .r-row .cell-fixed.fix-right.fixed-last .r-headercell-div {\n  box-shadow: -2px 0 4px -1px rgba(0, 0, 0, 0.1);\n}\n.r-table-edit .r-grid .r-gridtable .r-gridheader .r-row .r-headercell {\n  color: rgba(0, 0, 0, 0.8705882353);\n  position: sticky;\n  padding: 0px;\n  height: 42px;\n  z-index: 1;\n  border-width: 0px;\n  line-height: 16px;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridheader .r-row .r-headercell .r-headercell-div {\n  border-right: 1px solid #e0e0e0;\n  border-bottom: 1px solid #e0e0e0;\n  background-color: #FFFFFF;\n  display: flex;\n  align-items: center;\n  text-align: center;\n  padding: 5px 10px;\n  height: 100%;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridheader .r-row .r-headercell .header-content {\n  display: flex;\n  flex: 1 1 0%;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridheader .r-row .r-headercell .header-content .text-content {\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row:first-of-type .r-rowcell-div {\n  border-top-color: #FFFFFF;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row {\n  font-size: 13px;\n  transition: transform 0.05s linear;\n  will-change: transform;\n  backface-visibility: hidden;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .cell-fixed {\n  position: sticky;\n  z-index: 1;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .cell-fixed .r-rowcell.r-cell-selected-right {\n  margin-right: 1px;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell {\n  background-color: #FFFFFF;\n  border-bottom: 1px solid #e0e0e0;\n  border-right: 1px solid #e0e0e0;\n  vertical-align: middle;\n  padding: 0;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell.r-cell-sum-group {\n  background-color: #fafafa;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell.r-cell-sum-group .r-rowcell-div {\n  padding-left: 10px;\n  padding-right: 15px;\n  display: flex;\n  align-items: center;\n  background-color: #fafafa;\n  font-weight: 550;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell.r-cell-group {\n  left: 0px;\n  position: sticky;\n  z-index: 1;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell.r-cell-group .r-rowcell-div {\n  padding-left: 10px;\n  padding-right: 15px;\n  display: flex;\n  align-items: center;\n  background-color: #fafafa;\n  font-weight: 550;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell.r-cell-group .r-rowcell-div svg {\n  margin-right: 10px;\n  cursor: pointer;\n  user-select: none;\n  transition: transform 0.2s ease-in-out;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell.r-cell-group .r-rowcell-div svg:hover {\n  color: #eb4619;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell.cell-fixed .r-rowcell-div.r-cell-selected-right {\n  padding-right: 1px;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell.fix-right {\n  border-left: 1px solid #e0e0e0;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell.fix-right.fixed-last {\n  border-left: 1px solid #e0e0e0;\n  box-shadow: -2px 0 4px -1px rgba(0, 0, 0, 0.1);\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell.fix-left.fixed-last {\n  border-right: 1px solid #e0e0e0;\n  box-shadow: 2px 0 4px -1px rgba(0, 0, 0, 0.1);\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell.r-active-row {\n  background-color: #fce6df;\n  border-right: 2px solid #eb4619;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div {\n  min-height: 28px !important;\n  border: 1px solid transparent;\n  position: relative;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .r-icon-expand {\n  transition: transform 0.3s ease;\n  position: absolute;\n  left: 3px;\n  top: 8px;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .r-icon-expand.is-open {\n  transform: rotate(90deg);\n  -moz-transform: rotate(90deg);\n  -webkit-transform: rotate(90deg);\n  -o-transform: rotate(90deg);\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .arrow-context-menu {\n  position: absolute;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 15px;\n  width: 15px;\n  background-color: #FFFFFF;\n  border-radius: 10px;\n  border: 1px solid #e0e0e0;\n  box-shadow: 0px 0px 2px #e0e0e0;\n  right: -5px;\n  bottom: -5px;\n  z-index: 10000;\n  cursor: pointer;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div.command {\n  padding-top: 0px;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div:focus {\n  outline: none;\n  /* bỏ viền focus mặc định */\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div.r-cell-disable {\n  background-color: #f9f9f9;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div.r-active-cell {\n  background-color: rgb(255, 240, 240);\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .r-cell-text:focus {\n  outline: none;\n  /* bỏ viền focus mặc định */\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .r-icon-invalid {\n  position: absolute;\n  width: 10px;\n  height: 10px;\n  top: 0px;\n  left: -6px;\n  rotate: -90deg;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .r-drag-icon {\n  position: absolute;\n  border: 1px solid #FFFFFF;\n  bottom: -2px;\n  right: -2px;\n  width: 7px;\n  height: 7px;\n  background-color: #eb4619;\n  border-radius: 20%;\n  cursor: crosshair;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .r-cell-text {\n  padding: 0px 7px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  display: flex;\n  align-items: center;\n  min-width: 0;\n  min-height: 28px;\n  flex: 1;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .r-cell-text .r-drop-icon {\n  position: absolute;\n  fill: #c4c4c4 !important;\n  right: 8.5px;\n  top: 3.5px;\n  cursor: pointer;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .is-invalid {\n  border-width: 0px !important;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .is-invalid .r-select-is-invalid {\n  border-width: 0px !important;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div.r-cell-selected-top {\n  border-top: 1px solid #eb4619;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div.r-cell-selected-bottom {\n  border-bottom: 1px solid #eb4619;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div.r-cell-selected-left {\n  border-left: 1px solid #eb4619;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div.r-cell-selected-right {\n  border-right: 1px solid #eb4619;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .r-datepicker .form-control {\n  padding: 0px 4px;\n  border-radius: 0px;\n  border-width: 0px;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .react-select-table.is-invalid {\n  border-width: 0px;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .react-select-table .r-select-is-focus {\n  border-width: 0px !important;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .react-select-table .select-table-control {\n  border-radius: 0px;\n  border-width: 0px;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .react-select-table .select-table-control.r-select-is-focus {\n  border: 1px solid #1989fa;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .form-edit .display-value {\n  cursor: pointer;\n  border-radius: 0px;\n  background-color: #FFFFFF;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .form-edit .input-display {\n  border-width: 0px;\n  box-sizing: border-box;\n  border: none;\n  /* Loại bỏ border */\n  outline: none;\n  /* Loại bỏ outline khi input được chọn */\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .form-edit .form-input-content .form-control {\n  border-radius: 4px;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .form-edit .form-input-content .form-control:focus {\n  border: 1px solid #1989fa;\n  outline: none;\n  box-shadow: none;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .form-edit input::placeholder {\n  color: #eb4619;\n  opacity: 1;\n  /* Firefox */\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .form-edit-inline .form__display {\n  vertical-align: middle;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .form-edit-inline .form__edit {\n  display: none;\n  text-align: left;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .form-edit-inline .form__edit.active {\n  display: flex;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .form-edit-inline .form__edit .form-label {\n  font-size: 10px;\n  margin-bottom: 0px;\n  text-align: left;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .form-edit-inline .form__edit .form-control {\n  border-radius: 0px;\n  height: 23px;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .form-edit-inline .form__edit .form__element {\n  margin: 0px 2px;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .r-date-input {\n  text-align: center;\n  height: 29px;\n  border: 1px solid #ccc;\n  border-radius: 4px;\n  padding: 5px;\n  font-size: 14px;\n  background-color: #f9f9f9;\n  color: #333;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .form-control:focus {\n  border-radius: 0px;\n  border-width: 0px;\n  background-color: #f8f8f8;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div input {\n  font-size: 13px;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridfoot {\n  color: #283046;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridfoot .r-row {\n  bottom: 0px;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridfoot .r-row .r-footer {\n  background-color: #fafafa;\n  font-size: 14px;\n  font-weight: 600;\n  width: 100px;\n  position: sticky;\n  z-index: 1;\n  bottom: 0;\n  border-width: 0px;\n  padding: 0px;\n  border-top: 1px solid #e0e0e0;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridfoot .r-row .r-footer.cell-fixed {\n  z-index: 2;\n}\n.r-table-edit .r-grid .r-gridtable .r-gridfoot .r-row .r-footer .r-footer-div {\n  height: 30px;\n  padding: 5px 7px;\n}\n.r-table-edit .r-grid .r-gridtable .formula-dropdown {\n  box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 15px;\n}\n.r-table-edit .r-grid .text-left .form-label {\n  text-align: left;\n}\n.r-table-edit .r-grid .r-toolbar {\n  border: 1px solid #e0e0e0;\n  height: 44px;\n}\n.r-table-edit .r-grid .r-toolbar.r-toolbar-bottom {\n  border-top-width: 0px;\n}\n.r-table-edit .r-grid .r-toolbar.r-toolbar-top {\n  border-bottom-width: 0px;\n}\n.r-table-edit .r-grid .r-toolbar .r-toolbar-items {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n.r-table-edit .r-grid .r-toolbar .r-toolbar-items svg {\n  cursor: pointer;\n}\n.r-table-edit .r-grid .r-toolbar .r-toolbar-items svg:hover {\n  color: #eb4619;\n}\n.r-table-edit .r-grid .r-toolbar .r-toolbar-items .r-toolbar-left {\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n}\n.r-table-edit .r-grid .r-toolbar .r-toolbar-items .r-toolbar-left .r-toolbar-item {\n  margin: 7px 0px 7px 7px;\n}\n.r-table-edit .r-grid .r-toolbar .r-toolbar-items .r-toolbar-center {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.r-table-edit .r-grid .r-toolbar .r-toolbar-items .r-toolbar-center .r-toolbar-item {\n  margin: 7px 3px 7px 3px;\n}\n.r-table-edit .r-grid .r-toolbar .r-toolbar-items .r-toolbar-right {\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n}\n.r-table-edit .r-grid .r-toolbar .r-toolbar-items .r-toolbar-right .r-toolbar-item {\n  margin: 7px 7px 7px 0px;\n}\n.r-table-edit .r-setting-container {\n  margin: 0px 15px;\n}\n.r-table-edit .r-setting-container .r-setting-content {\n  -webkit-overflow-scrolling: touch;\n  overflow-x: auto;\n  overflow-y: scroll;\n  position: relative;\n  background-color: #FFFFFF;\n  color: rgba(0, 0, 0, 0.8705882353);\n  font-weight: 400;\n  border-left: 1px solid #e0e0e0;\n  border-right: 1px solid #e0e0e0;\n  /* Toàn bộ thanh cuộn */\n  /* Nền của thanh cuộn */\n  /* Thanh trượt (thumb) */\n  /* Khi hover */\n}\n.r-table-edit .r-setting-container .r-setting-content::-webkit-scrollbar {\n  width: 9px;\n  /* Độ rộng của thanh cuộn */\n  height: 9px;\n  /* Độ cao của thanh cuộn */\n}\n.r-table-edit .r-setting-container .r-setting-content::-webkit-scrollbar-track {\n  background: #FCFCFC;\n  /* Màu nền nhạt */\n}\n.r-table-edit .r-setting-container .r-setting-content::-webkit-scrollbar-thumb {\n  background: #8B8B8B;\n  /* Màu xám nhạt */\n  border-radius: 6px;\n  /* Bo góc giống Edge */\n}\n.r-table-edit .r-setting-container .r-setting-content::-webkit-scrollbar-thumb:hover {\n  background: #636363;\n  /* Màu đậm hơn khi hover */\n}\n.r-table-edit .r-setting-container .r-setting-row {\n  padding: 5px !important;\n  margin: 0px;\n  border-bottom: 1px solid #e0e0e0;\n  font-size: 13px;\n  display: flex;\n  align-items: center;\n}\n.r-table-edit .r-setting-container .r-setting-row .r-setting-cell {\n  padding-right: 10px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.r-table-edit .r-setting-container .r-setting-row .r-setting-cell .form-control {\n  font-size: 13px !important;\n}\n.r-table-edit .r-setting-container .r-setting-row.r-setting-header {\n  font-size: 12px !important;\n}\n.r-table-edit.r-virtualized-table .r-row:hover .r-rowcell {\n  background-color: #fce6df !important;\n}\n.r-table-edit .r-pager {\n  border: 1px solid #e0e0e0;\n  border-top-width: 0px;\n  min-height: 50px;\n  width: 100%;\n  display: inline-block;\n}\n.r-table-edit .r-pager .r-pagercontainer {\n  margin-left: 10px;\n  float: left;\n  height: 100%;\n  display: block;\n  align-items: center;\n}\n.r-table-edit .r-pager .r-pagercontainer .r-button {\n  display: inline-block;\n  margin: 9px 6px;\n  height: 30px;\n  width: 30px;\n  padding: 6px;\n  border-width: 0px;\n  background-color: transparent;\n}\n.r-table-edit .r-pager .r-pagercontainer .r-button svg {\n  font-size: 16px;\n}\n.r-table-edit .r-pager .r-pagercontainer .r-number {\n  display: inline-block;\n  margin: 10px 4px 0px 0px;\n  height: 25px;\n  width: 25px;\n  font-size: 13px;\n  padding-top: 4px;\n  text-align: center;\n  cursor: pointer;\n  border-radius: 5px;\n}\n.r-table-edit .r-pager .r-pagercontainer .r-number.r-active {\n  background-color: rgba(235, 70, 25, 0.1);\n  color: #eb4619;\n}\n.r-table-edit .r-pager .r-pagercontainer .r-number:hover {\n  border: 1px solid #eb4619;\n}\n.r-table-edit .r-pager .r-pagesize {\n  margin-left: 20px;\n  font-size: 13px;\n  display: inline-block;\n}\n.r-table-edit .r-pager .r-pagesize .select-pagesize__menu-portal {\n  z-index: 5;\n}\n.r-table-edit .r-pager .r-parentmsgbar {\n  font-size: 13px;\n  float: right;\n  padding-bottom: 9px;\n  padding-right: 18px;\n  padding-top: 14px;\n}\n\n.r-tooltip .tooltip-inner {\n  font-size: 11px;\n}\n.r-tooltip.tooltip-error ::before {\n  border-top-color: rgb(235, 78, 78);\n}\n.r-tooltip.tooltip-error .tooltip-inner {\n  background-color: rgb(235, 78, 78);\n}\n\n.btn-input-style {\n  font-weight: 500;\n  text-transform: uppercase;\n  border: 1px solid #e0e0e0;\n  border-radius: 5px;\n  margin-left: 3px;\n  height: 28px;\n  padding: 2px 5px;\n  cursor: pointer;\n}\n.btn-input-style:hover {\n  background-color: rgba(235, 70, 25, 0.1);\n  color: #eb4619;\n}\n.btn-input-style.active-custom {\n  background-color: #eb4619;\n  color: #FFFFFF;\n}";
 styleInject(css_248z$2);
 
 const getColumn = (contentColumns, col, count) => {
@@ -38614,14 +38644,331 @@ reactResizable.exports.ResizableBox = ResizableBox$1.default;
 var css_248z$1 = ".react-resizable {\n  position: relative;\n}\n.react-resizable-handle {\n  position: absolute;\n  width: 20px;\n  height: 20px;\n  background-repeat: no-repeat;\n  background-origin: content-box;\n  box-sizing: border-box;\n  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+');\n  background-position: bottom right;\n  padding: 0 3px 3px 0;\n}\n.react-resizable-handle-sw {\n  bottom: 0;\n  left: 0;\n  cursor: sw-resize;\n  transform: rotate(90deg);\n}\n.react-resizable-handle-se {\n  bottom: 0;\n  right: 0;\n  cursor: se-resize;\n}\n.react-resizable-handle-nw {\n  top: 0;\n  left: 0;\n  cursor: nw-resize;\n  transform: rotate(180deg);\n}\n.react-resizable-handle-ne {\n  top: 0;\n  right: 0;\n  cursor: ne-resize;\n  transform: rotate(270deg);\n}\n.react-resizable-handle-w,\n.react-resizable-handle-e {\n  top: 50%;\n  margin-top: -10px;\n  cursor: ew-resize;\n}\n.react-resizable-handle-w {\n  left: 0;\n  transform: rotate(135deg);\n}\n.react-resizable-handle-e {\n  right: 0;\n  transform: rotate(315deg);\n}\n.react-resizable-handle-n,\n.react-resizable-handle-s {\n  left: 50%;\n  margin-left: -10px;\n  cursor: ns-resize;\n}\n.react-resizable-handle-n {\n  top: 0;\n  transform: rotate(225deg);\n}\n.react-resizable-handle-s {\n  bottom: 0;\n  transform: rotate(45deg);\n}";
 styleInject(css_248z$1);
 
-const HeaderTableCol$1 = (props) => {
+const DateRangePicker = React$5.forwardRef((props, ref) => {
+    const { id, onKeyDown, className, invalid, container, onPaste, onChange, value } = props;
+    const dateFormat = props.dateFormat ?? 'dd/MM/yyyy';
+    const { from, to } = value || {};
+    const today = new Date();
+    const { t } = reactI18next.useTranslation();
+    const [viewDateFrom, setViewDateFrom] = React$5.useState(from ? new Date(from) : today);
+    const [viewDateTo, setViewDateTo] = React$5.useState(to ? new Date(to) : addMonths(today, 1));
+    const [open, setOpen] = React$5.useState(false);
+    const formatDisplay = (f, t) => {
+        if (f && t) {
+            return `${formatDateTime(f, dateFormat)} - ${formatDateTime(t, dateFormat)}`;
+        }
+        if (f) {
+            return `${formatDateTime(f, dateFormat)} - `;
+        }
+        return '';
+    };
+    const [inputValue, setInputValue] = React$5.useState(formatDisplay(from, to));
+    const toggle = () => setOpen((prev) => !prev);
+    const handleSelect = (selected, selectedTo) => {
+        let newRange = { from, to };
+        if (selectedTo) {
+            newRange = { from: selected, to: selectedTo };
+            setViewDateFrom(selected || today);
+            setViewDateTo(selectedTo || today);
+        }
+        else if (!newRange.from || (selected && selected < newRange.from)) {
+            newRange = { from: selected, to };
+            setViewDateFrom(selected || today);
+        }
+        else if (newRange.from && selected && selected > newRange.from && (!newRange.to || selected < newRange.to)) {
+            newRange = { from, to: selected };
+            setViewDateTo(selected || today);
+        }
+        else if (newRange.to && selected && selected > newRange.to) {
+            newRange = { from, to: selected };
+            setViewDateTo(selected || today);
+        }
+        onChange(newRange);
+        setInputValue(formatDisplay(newRange.from, newRange.to));
+    };
+    const handleChange = (e) => {
+        const v = e.target.value;
+        setInputValue(v);
+        const parts = v.split('-').map((p) => p.trim());
+        if (parts.length === 2 && parts[0].length === 10 && parts[1].length === 10) {
+            const parsedFrom = parse(parts[0], dateFormat, today);
+            const parsedTo = parse(parts[1], dateFormat, today);
+            if (!isNaN(parsedFrom.getTime()) && !isNaN(parsedTo.getTime())) {
+                onChange({ from: parsedFrom, to: parsedTo });
+            }
+        }
+    };
+    const optionsMonth = [
+        { value: 1, label: t('January') },
+        { value: 2, label: t('February') },
+        { value: 3, label: t('March') },
+        { value: 4, label: t('April') },
+        { value: 5, label: t('May') },
+        { value: 6, label: t('June') },
+        { value: 7, label: t('July') },
+        { value: 8, label: t('August') },
+        { value: 9, label: t('September') },
+        { value: 10, label: t('October') },
+        { value: 11, label: t('November') },
+        { value: 12, label: t('December') }
+    ];
+    const getMaskFromFormat = () => '99/99/9999 -> 99/99/9999';
+    return (jsxRuntime.jsx("div", { className: classNames$1('r-daterangepicker', { 'is-invalid': invalid }), ref: ref, id: id, children: jsxRuntime.jsxs(Dropdown$1$1, { className: className, isOpen: open, toggle: toggle, children: [jsxRuntime.jsx(DropdownToggle$1, { tag: "div", "data-toggle": "dropdown", "aria-expanded": open, className: "d-flex align-items-center", style: { cursor: 'pointer' }, children: jsxRuntime.jsx(InputMask, { mask: getMaskFromFormat(), value: inputValue, onChange: handleChange, placeholder: "dd/mm/yyyy -> dd/mm/yyyy", className: "form-control", style: { width: 230 }, onKeyDown: (e) => {
+                            if (e.code === 'Space') {
+                                setOpen(!open);
+                            }
+                            else if (onKeyDown) {
+                                const rs = onKeyDown(e);
+                                if (rs) {
+                                    setOpen(false);
+                                }
+                            }
+                        }, onPaste: (e) => {
+                            onPaste?.(e);
+                            setOpen(false);
+                        } }) }), jsxRuntime.jsxs(DropdownMenu$1, { className: "r-datepicker-popup formula-dropdown icon-dropdown p-0", container: container, style: { position: 'fixed', borderRadius: 8, zIndex: 9999 }, children: [jsxRuntime.jsxs("div", { className: "d-flex", style: { padding: 10, gap: 20 }, children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs("div", { className: "select-month-year", children: [jsxRuntime.jsx(SvgChevronLeft, { cursor: 'pointer', fontSize: 22, onClick: () => {
+                                                        const newDate = new Date(viewDateFrom);
+                                                        newDate.setMonth(viewDateFrom.getMonth() - 1);
+                                                        setViewDateFrom(newDate);
+                                                    } }), jsxRuntime.jsxs("div", { className: "d-flex", children: [jsxRuntime.jsx("div", { className: "select-month", children: jsxRuntime.jsx(SelectTable, { options: optionsMonth, onChange: (e) => {
+                                                                    const newMonth = parseInt(e.value, 10);
+                                                                    const newDate = new Date(viewDateFrom);
+                                                                    newDate.setMonth(newMonth - 1);
+                                                                    setViewDateFrom(newDate);
+                                                                }, value: optionsMonth.find((x) => x.value === viewDateFrom.getMonth() + 1) }) }), jsxRuntime.jsx("div", { className: "select-year", children: jsxRuntime.jsx(SelectTable, { options: Array.from({ length: 200 }, (_, i) => 1900 + i).map((x) => ({ value: x, label: x })), onChange: (e) => {
+                                                                    const newYear = parseInt(e.value, 10);
+                                                                    const newDate = new Date(viewDateFrom);
+                                                                    newDate.setFullYear(newYear);
+                                                                    setViewDateFrom(newDate);
+                                                                }, value: { value: viewDateFrom.getFullYear(), label: viewDateFrom.getFullYear() } }) })] }), jsxRuntime.jsx(SvgChevronRight, { cursor: 'pointer', fontSize: 22, onClick: () => {
+                                                        const newDate = new Date(viewDateFrom);
+                                                        newDate.setMonth(viewDateFrom.getMonth() + 1);
+                                                        setViewDateFrom(newDate);
+                                                    } })] }), jsxRuntime.jsx(DayPicker, { mode: "single", selected: from, onSelect: (d) => handleSelect(d), month: viewDateFrom, showOutsideDays: true, modifiers: {
+                                                inRange: (day) => !!(from && to && day && day > from && day < to),
+                                                rangeStart: from,
+                                                rangeEnd: to
+                                            }, modifiersClassNames: {
+                                                inRange: 'rdp-in-range',
+                                                rangeStart: 'rdp-selected',
+                                                rangeEnd: 'rdp-selected'
+                                            } })] }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs("div", { className: "select-month-year", children: [jsxRuntime.jsx(SvgChevronLeft, { cursor: 'pointer', fontSize: 22, onClick: () => {
+                                                        const newDate = new Date(viewDateTo);
+                                                        newDate.setMonth(viewDateTo.getMonth() - 1);
+                                                        setViewDateTo(newDate);
+                                                    } }), jsxRuntime.jsxs("div", { className: "d-flex", children: [jsxRuntime.jsx("div", { className: "select-month", children: jsxRuntime.jsx(SelectTable, { options: optionsMonth, onChange: (e) => {
+                                                                    const newMonth = parseInt(e.value, 10);
+                                                                    const newDate = new Date(viewDateTo);
+                                                                    newDate.setMonth(newMonth - 1);
+                                                                    setViewDateTo(newDate);
+                                                                }, value: optionsMonth.find((x) => x.value === viewDateTo.getMonth() + 1) }) }), jsxRuntime.jsx("div", { className: "select-year", children: jsxRuntime.jsx(SelectTable, { options: Array.from({ length: 200 }, (_, i) => 1900 + i).map((x) => ({ value: x, label: x })), onChange: (e) => {
+                                                                    const newYear = parseInt(e.value, 10);
+                                                                    const newDate = new Date(viewDateTo);
+                                                                    newDate.setFullYear(newYear);
+                                                                    setViewDateTo(newDate);
+                                                                }, value: { value: viewDateTo.getFullYear(), label: viewDateTo.getFullYear() } }) })] }), jsxRuntime.jsx(SvgChevronRight, { cursor: 'pointer', fontSize: 22, onClick: () => {
+                                                        const newDate = new Date(viewDateTo);
+                                                        newDate.setMonth(viewDateTo.getMonth() + 1);
+                                                        setViewDateTo(newDate);
+                                                    } })] }), jsxRuntime.jsx(DayPicker, { mode: "single", selected: to, onSelect: (d) => handleSelect(d), month: viewDateTo, showOutsideDays: true, modifiers: {
+                                                inRange: (day) => !!(from && to && day && day > from && day < to),
+                                                rangeStart: from,
+                                                rangeEnd: to
+                                            }, modifiersClassNames: {
+                                                inRange: 'rdp-in-range',
+                                                rangeStart: 'rdp-selected',
+                                                rangeEnd: 'rdp-selected'
+                                            } })] })] }), jsxRuntime.jsxs("div", { className: "d-flex border-top ms-50", style: { gap: 20, paddingTop: 10 }, children: [jsxRuntime.jsx("div", { className: "btn-today", onClick: () => {
+                                        handleSelect(today, today);
+                                        setOpen(false);
+                                    }, children: t('Today') }), jsxRuntime.jsx("div", { className: "btn-today", onClick: () => {
+                                        handleSelect(addDays(today, -1), addDays(today, -1));
+                                        setOpen(false);
+                                    }, children: t('Yesterday') }), jsxRuntime.jsx("div", { className: "btn-today", onClick: () => {
+                                        handleSelect(startOfWeek(today, { weekStartsOn: 1 }), endOfWeek(today, { weekStartsOn: 1 }));
+                                        setOpen(false);
+                                    }, children: t('This week') }), jsxRuntime.jsx("div", { className: "btn-today", onClick: () => {
+                                        handleSelect(startOfMonth(today), endOfMonth(today));
+                                        setOpen(false);
+                                    }, children: t('This month') }), jsxRuntime.jsx("div", { className: "btn-today", onClick: () => {
+                                        const lastMonth = subMonths(today, 1);
+                                        handleSelect(startOfMonth(lastMonth), endOfMonth(lastMonth));
+                                        setOpen(false);
+                                    }, children: t('Last month') })] })] })] }) }));
+});
+
+const FilterComponent = ({ optionsFilter, formatSetting, filterBy, setOpenFilter, changeFilter, column }) => {
+    const { t } = reactI18next.useTranslation();
+    const fieldFilter = column.fieldFilter ?? column.field;
+    let typeFilter = column.filterType;
+    if (!typeFilter) {
+        if (column.type === 'numeric') {
+            typeFilter = 'numeric';
+        }
+        else if (column.type === 'date' || column.type === 'datetime') {
+            typeFilter = 'date';
+        }
+        else if (column.type === 'select') {
+            typeFilter = 'select';
+        }
+        else {
+            typeFilter = 'text';
+        }
+    }
+    const handleSave = (typeFilter, filterValue, operator) => {
+        if (!typeFilter && !filterValue) {
+            changeFilter(filterBy.filter((x) => x.key !== fieldFilter));
+            setOpenFilter(false);
+            return;
+        }
+        if (typeFilter === 'date') {
+            const from = filterBy.find((item) => item.key === fieldFilter && item.ope === 'greaterthanorequal');
+            if (from) {
+                from.value = filterValue?.from;
+            }
+            else {
+                filterBy.push({ key: fieldFilter, ope: 'greaterthanorequal', value: filterValue?.from });
+            }
+            const to = filterBy.find((item) => item.key === fieldFilter && item.ope === 'lessthanorequal');
+            if (to) {
+                to.value = filterValue?.to;
+            }
+            else {
+                filterBy.push({ key: fieldFilter, ope: 'lessthanorequal', value: filterValue?.to });
+            }
+        }
+        else {
+            const filter = filterBy.find((item) => item.key === fieldFilter);
+            if (filter) {
+                filter.ope = operator ?? 'equal';
+                filter.value = filterValue ?? '';
+            }
+            else {
+                filterBy.push({ key: fieldFilter, ope: operator ?? 'equal', value: filterValue ?? '' });
+            }
+        }
+        changeFilter([...filterBy]);
+        setOpenFilter(false);
+    };
+    /* eslint-disable */
+    switch (typeFilter) {
+        case 'text':
+            return jsxRuntime.jsx(StringFilterComponent, { fieldFilter: fieldFilter, optionsFilter: optionsFilter, filterBy: filterBy, column: column, handleSave: handleSave });
+        case 'numeric':
+            return jsxRuntime.jsx(NumberFilterComponent, { fieldFilter: fieldFilter, optionsFilter: optionsFilter, filterBy: filterBy, column: column, handleSave: handleSave, formatSetting: formatSetting });
+        case 'select':
+            return jsxRuntime.jsx(SelectFilterComponent, { fieldFilter: fieldFilter, optionsFilter: optionsFilter, filterBy: filterBy, column: column, handleSave: handleSave });
+        case 'date':
+            return jsxRuntime.jsx(DateRangeFilterComponent, { fieldFilter: fieldFilter, optionsFilter: optionsFilter, filterBy: filterBy, column: column, handleSave: handleSave });
+        default:
+            return jsxRuntime.jsx("div", { children: t('No filter available') });
+    }
+    /* eslint-enable */
+};
+const StringFilterComponent = ({ fieldFilter, filterBy, handleSave }) => {
+    const { t } = reactI18next.useTranslation();
+    const filter = filterBy.find((item) => item.key === fieldFilter);
+    const [operator, setOperator] = React$5.useState(filter?.ope ?? 'contains');
+    const [valueFilter, setValueFilter] = React$5.useState(filter?.value ?? '');
+    const options = [
+        { label: 'Bắt đầu bởi', value: 'startswith' },
+        { label: 'Kết thúc bởi', value: 'endswith' },
+        { label: 'Chứa', value: 'contains' },
+        { label: 'Bằng', value: 'equal' },
+        { label: 'Không bằng', value: 'notequal' }
+    ];
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("div", { className: "r-filter-popup", onKeyDown: (e) => {
+                if (e.code === 'Enter' || e.code === 'NumpadEnter') {
+                    setTimeout(() => {
+                        handleSave('text', valueFilter, operator);
+                    }, 100);
+                    e.stopPropagation();
+                }
+            }, children: [jsxRuntime.jsx(SelectTable, { value: options.find((x) => x.value === operator), options: options, onChange: (val) => {
+                        setOperator(val.value);
+                    }, placeholder: "Select" }), jsxRuntime.jsx(Input$1, { className: "my-1", value: valueFilter, onChange: (val) => {
+                        setValueFilter(val.target.value);
+                    } }), jsxRuntime.jsxs("div", { className: "d-flex justify-content-end", children: [jsxRuntime.jsx(Button$1$1, { color: "primary", style: { borderRadius: 3 }, className: "me-50 py-25 px-50 fw-bold", onClick: () => handleSave('text', valueFilter, operator), children: t('Filter') }), jsxRuntime.jsx(Button$1$1, { className: "py-25 px-50  fw-bold", outline: true, style: { borderRadius: 3 }, onClick: () => handleSave(), children: t('Clear') })] })] }) }));
+};
+const NumberFilterComponent = ({ column, filterBy, fieldFilter, handleSave, formatSetting }) => {
+    const { t } = reactI18next.useTranslation();
+    const filter = filterBy.find((item) => item.key === fieldFilter);
+    const [operator, setOperator] = React$5.useState(filter?.ope ?? 'equal');
+    const [valueFilter, setValueFilter] = React$5.useState(filter?.value ?? '');
+    const options = [
+        { label: 'Lớn hơn', value: 'greaterthan' },
+        { label: 'Lớn hơn hoặc bằng', value: 'greaterthanorequal' },
+        { label: 'Bằng', value: 'equal' },
+        { label: 'Bé hơn', value: 'lessthan' },
+        { label: 'Bé hơn hoặc bằng', value: 'lessthanorequal' }
+    ];
+    const numericFormatProps = {
+        value: !isNullOrUndefined$1(valueFilter) ? valueFilter.toString() : '',
+        thousandSeparator: checkThousandSeparator(formatSetting?.thousandSeparator, formatSetting?.decimalSeparator),
+        decimalSeparator: checkDecimalSeparator(formatSetting?.thousandSeparator, formatSetting?.decimalSeparator),
+        allowNegative: column.numericSettings?.allowNegative ?? false,
+        decimalScale: column.numericSettings?.fraction ?? 0
+    };
+    let floatValue = parseFloat(valueFilter ?? '0');
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("div", { className: "r-filter-popup", onKeyDown: (e) => {
+                if (e.code === 'Enter' || e.code === 'NumpadEnter') {
+                    setTimeout(() => {
+                        handleSave('numeric', valueFilter, operator);
+                    }, 100);
+                    e.stopPropagation();
+                }
+            }, children: [jsxRuntime.jsx(SelectTable, { value: options.find((x) => x.value === operator), options: options, onChange: (val) => {
+                        setOperator(val.value);
+                    }, placeholder: t('Select') }), jsxRuntime.jsx(NumericFormat, { style: { textAlign: column.textAlign, height: 29 }, ...numericFormatProps, defaultValue: formartNumberic(valueFilter, formatSetting?.decimalSeparator ?? ',', formatSetting?.thousandSeparator ?? '.', column.numericSettings?.fraction), className: classNames$1('form-control my-1 input-numeric'), onValueChange: (values) => {
+                        floatValue = values?.floatValue;
+                    }, onFocus: (e) => {
+                        e.target.setSelectionRange(0, e.target.innerText.length - 1);
+                    }, onBlur: () => {
+                        if (floatValue !== valueFilter) {
+                            setValueFilter(!isNaN(floatValue) ? floatValue : 0);
+                        }
+                    } }), jsxRuntime.jsxs("div", { className: "d-flex justify-content-end", children: [jsxRuntime.jsx(Button$1$1, { color: "primary", style: { borderRadius: 3 }, className: "me-50 py-25 px-50 fw-bold", onClick: () => handleSave('numeric', valueFilter, operator), children: t('Filter') }), jsxRuntime.jsx(Button$1$1, { className: "py-25 px-50  fw-bold", outline: true, style: { borderRadius: 3 }, onClick: () => handleSave(), children: t('Clear') })] })] }) }));
+};
+const SelectFilterComponent = ({ column, filterBy, handleSave, fieldFilter, optionsFilter }) => {
+    const { t } = reactI18next.useTranslation();
+    const filter = filterBy.find((item) => item.key === fieldFilter);
+    const [valueFilter, setValueFilter] = React$5.useState(filter?.value ?? '');
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("div", { className: "r-filter-popup", onKeyDown: (e) => {
+                if (e.code === 'Enter' || e.code === 'NumpadEnter') {
+                    setTimeout(() => {
+                        handleSave('select', valueFilter, 'equal');
+                    }, 100);
+                    e.stopPropagation();
+                }
+            }, children: [jsxRuntime.jsx("div", { className: "mb-1", children: jsxRuntime.jsx(SelectTable, { value: optionsFilter ? optionsFilter[column.fieldFilter ?? column.field]?.find((x) => x.value === valueFilter) : undefined, options: (optionsFilter && optionsFilter[column.fieldFilter ?? column.field]) ?? [], isClearable: true, onChange: (val) => {
+                            setValueFilter(val?.value);
+                        }, placeholder: t('Select') }) }), jsxRuntime.jsxs("div", { className: "d-flex justify-content-end", children: [jsxRuntime.jsx(Button$1$1, { color: "primary", style: { borderRadius: 3 }, className: "me-50 py-25 px-50 fw-bold", onClick: () => handleSave('select', valueFilter, 'equal'), children: t('Filter') }), jsxRuntime.jsx(Button$1$1, { className: "py-25 px-50  fw-bold", outline: true, style: { borderRadius: 3 }, onClick: () => handleSave(), children: t('Clear') })] })] }) }));
+};
+const DateRangeFilterComponent = ({ fieldFilter, filterBy, handleSave }) => {
+    const { t } = reactI18next.useTranslation();
+    const from = filterBy.find((item) => item.key === fieldFilter && item.ope === 'greaterthanorequal')?.value;
+    const to = filterBy.find((item) => item.key === fieldFilter && item.ope === 'lessthanorequal')?.value;
+    const [valueFilter, setValueFilter] = React$5.useState({ from: from ?? undefined, to: to ?? undefined });
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("div", { className: "r-filter-popup", onKeyDown: (e) => {
+                if (e.code === 'Enter' || e.code === 'NumpadEnter') {
+                    setTimeout(() => {
+                        handleSave('date', valueFilter);
+                    }, 100);
+                    e.stopPropagation();
+                }
+            }, children: [jsxRuntime.jsx("div", { className: "mb-1", children: jsxRuntime.jsx(DateRangePicker, { dateFormat: "dd/MM/yyyy", value: valueFilter, onChange: (date) => {
+                            setValueFilter(date);
+                        } }) }), jsxRuntime.jsxs("div", { className: "d-flex justify-content-end", children: [jsxRuntime.jsx(Button$1$1, { color: "primary", style: { borderRadius: 3 }, className: "me-50 py-25 px-50 fw-bold", onClick: () => handleSave('date', valueFilter), children: t('Filter') }), jsxRuntime.jsx(Button$1$1, { className: "py-25 px-50  fw-bold", outline: true, style: { borderRadius: 3 }, onClick: () => handleSave(), children: t('Clear') })] })] }) }));
+};
+
+const HeaderTableCol = (props) => {
     const { selectEnable, dataSource, setSelectedRows, col, indexCol, indexParent, objHeaderWidthFixLeft, objHeaderWidthFixRight, totalCount, selectedRows, columns, orderBy, changeFilter, filterBy, changeOrder, allowFiltering, allowSorting, container, fisrtObjWidthFixRight, lastObjWidthFixLeft, setContentColumns, formatSetting, optionsFilter, idTable, isMulti } = props;
     const { t } = reactI18next.useTranslation();
     const headerRef = React$5.useRef(null);
     const order = orderBy.find((item) => item.key === col.field);
     const [openFilter, setOpenFilter] = React$5.useState(false);
     const filter = filterBy.find((item) => item.key === col.field);
-    const herderContent = col.headerDisplay ?? (col.headerText ?? '');
+    const herderContent = col.headerDisplay ?? col.headerText ?? '';
     const handleResize = (e, { size }) => {
         if (size.width > 50) {
             const newColumns = [...columns];
@@ -38634,7 +38981,7 @@ const HeaderTableCol$1 = (props) => {
     const checkOverflow = () => {
         return headerRef.current && headerRef.current.scrollHeight > headerRef.current.clientHeight;
     };
-    return (jsxRuntime.jsx(React$5.Fragment, { children: col.visible !== false && (jsxRuntime.jsx(Resizable, { className: "r-resize", width: typeof col.width === 'number' ? col.width : Number((col.width ?? "").replaceAll(new RegExp(`[^0-9]`, "g"), '')), height: 0, onResize: handleResize, draggableOpts: { enableUserSelectHack: true }, children: jsxRuntime.jsx("th", { rowSpan: col.rowspan !== 1 ? col.rowspan : 1, colSpan: col.columns?.filter(x => x.visible !== false)?.length ?? 1, className: classNames$1(`r-headercell fix-${col.fixedType}`, { 'fixed-last': (col.fixedType === 'left' && indexCol === lastObjWidthFixLeft) || (col.fixedType === 'right' && indexCol === fisrtObjWidthFixRight) }, { 'cell-fixed': col.fixedType }), style: {
+    return (jsxRuntime.jsx(React$5.Fragment, { children: col.visible !== false && (jsxRuntime.jsx(Resizable, { className: "r-resize", width: typeof col.width === 'number' ? col.width : Number((col.width ?? '').replaceAll(new RegExp(`[^0-9]`, 'g'), '')), height: 0, onResize: handleResize, draggableOpts: { enableUserSelectHack: true }, children: jsxRuntime.jsx("th", { rowSpan: col.rowspan !== 1 ? col.rowspan : 1, colSpan: col.columns?.filter((x) => x.visible !== false)?.length ?? 1, className: classNames$1(`r-headercell fix-${col.fixedType}`, { 'fixed-last': (col.fixedType === 'left' && indexCol === lastObjWidthFixLeft) || (col.fixedType === 'right' && indexCol === fisrtObjWidthFixRight) }, { 'cell-fixed': col.fixedType }), style: {
                     top: `${indexParent * 42}px`,
                     left: col.fixedType === 'left' ? objHeaderWidthFixLeft[`${indexParent}-${indexCol ?? 0}`] : undefined,
                     right: col.fixedType === 'right' ? objHeaderWidthFixRight[`${indexParent}-${indexCol ?? 0}`] : undefined
@@ -38655,96 +39002,23 @@ const HeaderTableCol$1 = (props) => {
                     }, className: classNames$1('r-headercell-div', { 'cursor-pointer': allowSorting }), children: [col.field === 'checkbox' && (jsxRuntime.jsx(Input$1, { checked: !!(totalCount > 0 && selectedRows?.length >= totalCount), type: "checkbox", className: classNames$1('cursor-pointer', { 'd-none': !isMulti }), style: { textAlign: col.textAlign ?? 'left', marginTop: 6 }, onChange: (e) => {
                                 if (selectEnable) {
                                     if (e.target.checked) {
-                                        setSelectedRows(dataSource.map((item) => { return item; }));
+                                        setSelectedRows(dataSource.map((item) => {
+                                            return item;
+                                        }));
                                     }
                                     else {
                                         setSelectedRows([]);
                                     }
                                 }
-                            } })), col.field !== 'checkbox' && jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: 'header-content', style: { justifyContent: col.textAlign ?? 'left' }, children: [jsxRuntime.jsx("span", { id: `header-${idTable}-${indexParent}-${indexCol}`, ref: headerRef, className: 'text-content', children: t(herderContent) }), checkOverflow() && jsxRuntime.jsx(UncontrolledTooltip, { className: "r-tooltip", autohide: false, target: `header-${idTable}-${indexParent}-${indexCol}`, children: t(herderContent) })] }), col.field !== '#' && col.field !== 'command' && jsxRuntime.jsxs("div", { className: 'd-flex', children: [allowSorting && order?.direction === 'asc' && jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", className: 'ms-25', width: "10", height: "10", viewBox: "0 0 16 18", fill: "none", children: [jsxRuntime.jsx("g", { "clip-path": "url(#clip0_520_6)", children: jsxRuntime.jsx("path", { d: "M8.70711 0.292893C8.31658 -0.0976311 7.68342 -0.0976311 7.29289 0.292893L0.928932 6.65685C0.538408 7.04738 0.538408 7.68054 0.928932 8.07107C1.31946 8.46159 1.95262 8.46159 2.34315 8.07107L8 2.41421L13.6569 8.07107C14.0474 8.46159 14.6805 8.46159 15.0711 8.07107C15.4616 7.68054 15.4616 7.04738 15.0711 6.65685L8.70711 0.292893ZM8 18H9L9 1H8H7L7 18H8Z", fill: "black" }) }), jsxRuntime.jsx("defs", { children: jsxRuntime.jsx("clipPath", { id: "clip0_520_6", children: jsxRuntime.jsx("rect", { width: "16", height: "18", fill: "white" }) }) })] }), allowSorting && order?.direction === 'desc' && jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", className: 'ms-25', width: "10", height: "10", viewBox: "0 0 16 18", fill: "none", children: [jsxRuntime.jsx("g", { "clip-path": "url(#clip0_520_2)", children: jsxRuntime.jsx("path", { d: "M7.29289 17.7071C7.68342 18.0976 8.31658 18.0976 8.70711 17.7071L15.0711 11.3431C15.4616 10.9526 15.4616 10.3195 15.0711 9.92893C14.6805 9.53841 14.0474 9.53841 13.6569 9.92893L8 15.5858L2.34315 9.92893C1.95262 9.53841 1.31946 9.53841 0.928932 9.92893C0.538408 10.3195 0.538408 10.9526 0.928932 11.3431L7.29289 17.7071ZM8 0L7 0L7 17H8H9L9 0L8 0Z", fill: "black" }) }), jsxRuntime.jsx("defs", { children: jsxRuntime.jsx("clipPath", { id: "clip0_520_2", children: jsxRuntime.jsx("rect", { width: "16", height: "18", fill: "white" }) }) })] }), allowFiltering && (col.columns?.length ?? 0) === 0 && col.allowFilter !== false && jsxRuntime.jsxs(Dropdown$1$1, { isOpen: openFilter, toggle: (e) => {
+                            } })), col.field !== 'checkbox' && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: "header-content", style: { justifyContent: col.textAlign ?? 'left' }, children: [jsxRuntime.jsx("span", { id: `header-${idTable}-${indexParent}-${indexCol}`, ref: headerRef, className: "text-content", children: t(herderContent) }), checkOverflow() && (jsxRuntime.jsx(UncontrolledTooltip, { className: "r-tooltip", autohide: false, target: `header-${idTable}-${indexParent}-${indexCol}`, children: t(herderContent) }))] }), col.field !== '#' && col.field !== 'command' && (jsxRuntime.jsxs("div", { className: "d-flex", children: [allowSorting && order?.direction === 'asc' && (jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", className: "ms-25", width: "10", height: "10", viewBox: "0 0 16 18", fill: "none", children: [jsxRuntime.jsx("g", { "clip-path": "url(#clip0_520_6)", children: jsxRuntime.jsx("path", { d: "M8.70711 0.292893C8.31658 -0.0976311 7.68342 -0.0976311 7.29289 0.292893L0.928932 6.65685C0.538408 7.04738 0.538408 7.68054 0.928932 8.07107C1.31946 8.46159 1.95262 8.46159 2.34315 8.07107L8 2.41421L13.6569 8.07107C14.0474 8.46159 14.6805 8.46159 15.0711 8.07107C15.4616 7.68054 15.4616 7.04738 15.0711 6.65685L8.70711 0.292893ZM8 18H9L9 1H8H7L7 18H8Z", fill: "black" }) }), jsxRuntime.jsx("defs", { children: jsxRuntime.jsx("clipPath", { id: "clip0_520_6", children: jsxRuntime.jsx("rect", { width: "16", height: "18", fill: "white" }) }) })] })), allowSorting && order?.direction === 'desc' && (jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", className: "ms-25", width: "10", height: "10", viewBox: "0 0 16 18", fill: "none", children: [jsxRuntime.jsx("g", { "clip-path": "url(#clip0_520_2)", children: jsxRuntime.jsx("path", { d: "M7.29289 17.7071C7.68342 18.0976 8.31658 18.0976 8.70711 17.7071L15.0711 11.3431C15.4616 10.9526 15.4616 10.3195 15.0711 9.92893C14.6805 9.53841 14.0474 9.53841 13.6569 9.92893L8 15.5858L2.34315 9.92893C1.95262 9.53841 1.31946 9.53841 0.928932 9.92893C0.538408 10.3195 0.538408 10.9526 0.928932 11.3431L7.29289 17.7071ZM8 0L7 0L7 17H8H9L9 0L8 0Z", fill: "black" }) }), jsxRuntime.jsx("defs", { children: jsxRuntime.jsx("clipPath", { id: "clip0_520_2", children: jsxRuntime.jsx("rect", { width: "16", height: "18", fill: "white" }) }) })] })), allowFiltering && (col.columns?.length ?? 0) === 0 && col.allowFilter !== false && (jsxRuntime.jsxs(Dropdown$1$1, { isOpen: openFilter, toggle: (e) => {
                                                 setOpenFilter(!openFilter);
                                                 e.stopPropagation();
                                             }, onClick: (e) => {
                                                 e.stopPropagation();
-                                            }, children: [jsxRuntime.jsx(DropdownToggle$1, { tag: 'div', className: 'p-0 r-filter', children: jsxRuntime.jsxs("svg", { className: classNames$1('cursor-pointer ms-25', { active: filter }), width: "10", height: "10", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "stroke-width": "1.5", "font-size": "12", children: [jsxRuntime.jsx("path", { d: "M14.7 11.998v10.506c.052.4-.08.826-.381 1.106a1.306 1.306 0 0 1-.925.39 1.289 1.289 0 0 1-.926-.39l-2.637-2.68a1.323 1.323 0 0 1-.38-1.106v-7.826h-.04L1.85 2.16A1.348 1.348 0 0 1 2.076.293C2.325.107 2.6 0 2.888 0h18.373c.289 0 .564.107.814.293a1.348 1.348 0 0 1 .223 1.866L14.738 12H14.7Z", fill: "currentColor" }), " "] }) }), jsxRuntime.jsx(DropdownMenu$1, { container: container, className: 'formula-dropdown icon-dropdown p-0', style: {
+                                            }, children: [jsxRuntime.jsx(DropdownToggle$1, { tag: "div", className: "p-0 r-filter", children: jsxRuntime.jsxs("svg", { className: classNames$1('cursor-pointer ms-25', { active: filter }), width: "10", height: "10", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "stroke-width": "1.5", "font-size": "12", children: [jsxRuntime.jsx("path", { d: "M14.7 11.998v10.506c.052.4-.08.826-.381 1.106a1.306 1.306 0 0 1-.925.39 1.289 1.289 0 0 1-.926-.39l-2.637-2.68a1.323 1.323 0 0 1-.38-1.106v-7.826h-.04L1.85 2.16A1.348 1.348 0 0 1 2.076.293C2.325.107 2.6 0 2.888 0h18.373c.289 0 .564.107.814.293a1.348 1.348 0 0 1 .223 1.866L14.738 12H14.7Z", fill: "currentColor" }), ' '] }) }), jsxRuntime.jsx(DropdownMenu$1, { container: container, className: "formula-dropdown icon-dropdown p-0", style: {
                                                         borderRadius: 8,
                                                         zIndex: 1056
-                                                    }, children: jsxRuntime.jsx(DropdownItem$1, { className: 'p-1', style: { borderRadius: '6px' }, tag: 'div', header: true, children: jsxRuntime.jsx(RenderFilterElement, { setOpenFilter: setOpenFilter, filter: filter, filterBy: filterBy, optionsFilter: optionsFilter, formatSetting: formatSetting, changeFilter: changeFilter, column: col }) }) })] })] })] })] }) }) })) }, `header-${indexCol}`));
-};
-const RenderFilterElement = ({ filter, optionsFilter, formatSetting, filterBy, setOpenFilter, changeFilter, column }) => {
-    const { t } = reactI18next.useTranslation();
-    const [operator, setOperator] = React$5.useState(filter?.ope ?? ((!column.filterType && column.type === 'numeric') || column.filterType === 'select' ? 'equal' : 'contains'));
-    const [valueFilter, setValueFilter] = React$5.useState(filter?.value ?? '');
-    const fieldFilter = column.fieldFilter ?? column.field;
-    const RenderStringFilter = () => {
-        const options = [
-            { label: 'Bắt đầu bởi', value: 'startswith' },
-            { label: 'Kết thúc bởi', value: 'endswith' },
-            { label: 'Chứa', value: 'contains' },
-            { label: 'Bằng', value: 'equal' },
-            { label: 'Không bằng', value: 'notequal' }
-        ];
-        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(SelectTable, { value: options.find((x) => x.value === (operator)), options: options, onChange: (val) => {
-                        setOperator(val.value);
-                    }, placeholder: 'Select' }), jsxRuntime.jsx(Input$1, { className: 'my-1', value: valueFilter, onChange: (val) => {
-                        setValueFilter(val.target.value);
-                    } })] }));
-    };
-    const RenderNumberFilter = () => {
-        const options = [
-            { label: 'Lớn hơn', value: 'greaterthan' },
-            { label: 'Lớn hơn hoặc bằng', value: 'greaterthanorequal' },
-            { label: 'Bằng', value: 'equal' },
-            { label: 'Bé hơn', value: 'lessthan' },
-            { label: 'Bé hơn hoặc bằng', value: 'lessthanorequal' }
-        ];
-        const numericFormatProps = {
-            value: !isNullOrUndefined$1(valueFilter) ? valueFilter.toString() : '',
-            thousandSeparator: checkThousandSeparator(formatSetting?.thousandSeparator, formatSetting?.decimalSeparator),
-            decimalSeparator: checkDecimalSeparator(formatSetting?.thousandSeparator, formatSetting?.decimalSeparator),
-            allowNegative: column.numericSettings?.allowNegative ?? false,
-            decimalScale: column.numericSettings?.fraction ?? 0
-        };
-        let floatValue = parseFloat(valueFilter ?? '0');
-        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(SelectTable, { value: options.find((x) => x.value === (operator)), options: options, onChange: (val) => {
-                        setOperator(val.value);
-                    }, placeholder: t('Select') }), jsxRuntime.jsx(NumericFormat, { style: { textAlign: column.textAlign, height: 29 }, ...numericFormatProps, defaultValue: formartNumberic(valueFilter, formatSetting?.decimalSeparator ?? ',', formatSetting?.thousandSeparator ?? '.', column.numericSettings?.fraction), className: classNames$1('form-control my-1 input-numeric'), onValueChange: (values) => {
-                        floatValue = values?.floatValue;
-                    }, onFocus: (e) => {
-                        e.target.setSelectionRange(0, e.target.innerText.length - 1);
-                    }, onBlur: () => {
-                        if (floatValue !== valueFilter) {
-                            setValueFilter(!isNaN(floatValue) ? floatValue : 0);
-                        }
-                    } })] }));
-    };
-    const RenderSelectFilter = () => {
-        return (jsxRuntime.jsx("div", { className: 'mb-1', children: jsxRuntime.jsx(SelectTable, { value: optionsFilter ? optionsFilter[fieldFilter]?.find((x) => x.value === valueFilter) : undefined, options: (optionsFilter && optionsFilter[fieldFilter]) ?? [], isClearable: true, onChange: (val) => {
-                    setValueFilter(val?.value);
-                }, placeholder: t('Select') }) }));
-    };
-    const handleSave = () => {
-        if (filter) {
-            filter.ope = operator;
-            filter.value = valueFilter ?? '';
-        }
-        else {
-            filterBy.push({ key: fieldFilter, ope: operator, value: valueFilter ?? '' });
-        }
-        changeFilter([...filterBy]);
-        setOpenFilter(false);
-    };
-    return (jsxRuntime.jsxs("div", { className: 'r-filter-popup', onKeyDown: (e) => {
-            if (e.code === 'Enter' || e.code === 'NumpadEnter') {
-                handleSave();
-                e.stopPropagation();
-            }
-        }, children: [((!column.filterType && column.type === 'numeric') || column.filterType === 'numeric') ? jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [RenderNumberFilter(), " "] }) : (column.filterType === 'select' ? jsxRuntime.jsxs(jsxRuntime.Fragment, { children: ["  ", RenderSelectFilter(), " "] }) : RenderStringFilter()), jsxRuntime.jsxs("div", { className: 'd-flex justify-content-end', children: [jsxRuntime.jsx(Button$1$1, { color: 'primary', style: { borderRadius: 3 }, className: 'me-50 py-25 px-50 fw-bold', onClick: handleSave, children: t('Filter') }), jsxRuntime.jsx(Button$1$1, { className: 'py-25 px-50 fw-bold', color: 'white', style: { borderRadius: 3, borderWidth: 0 }, onClick: () => {
-                            if (filterBy) {
-                                changeFilter(filterBy.filter((x) => x.key !== fieldFilter));
-                            }
-                            setOpenFilter(false);
-                        }, children: t('Clear') })] })] }));
+                                                    }, children: jsxRuntime.jsx(DropdownItem$1, { className: "p-1", style: { borderRadius: '6px' }, tag: "div", header: true, children: jsxRuntime.jsx(FilterComponent, { setOpenFilter: setOpenFilter, filterBy: filterBy, optionsFilter: optionsFilter, formatSetting: formatSetting, changeFilter: changeFilter, column: col }) }) })] }))] }))] }))] }) }) })) }, `header-${indexCol}`));
 };
 
 const TableComponent = ({ idTable, dataSource, contentColumns, headerColumns, visibleColumns, selectedRows, setSelectedRows, selectedCell, startCell, editCell, gridRef, objHeaderWidthFixLeft, objHeaderWidthFixRight, objWidthFixLeft, objWidthFixRight, lastObjWidthFixLeft, fisrtObjWidthFixRight, totalCount, isMulti, selectEnable, editDisable, addDisable, defaultValue, fieldKey, fieldUniKey, formatSetting, toolbarSetting, buttonSetting, containerRef, handleDataChange, changeDataSource, handleCommandClick, handleDuplicate, handleKeyDown, onDuplicate, setSelectedCell, setStartCell, focusEditElementCell, setContentColumns, handeCopyCell, isCopying, typeDragging, rowChange, visibleContentColumns, filterBy, setFilterBy, orderBy, setOrderBy, optionsFilter, allowFiltering, allowSorting, searchSetting, searchTerm, searchClient, height, rowHeight, haveSum }) => {
@@ -38757,7 +39031,7 @@ const TableComponent = ({ idTable, dataSource, contentColumns, headerColumns, vi
     const visibleCount = Math.ceil(height / rowHeight) + 5; // buffer
     const startIndex = Math.floor(scrollTop / rowHeight);
     const endIndex = Math.min(startIndex + visibleCount, filteredData.length);
-    const offsetY = (startIndex * rowHeight);
+    const offsetY = startIndex * rowHeight;
     const rafId = React$5.useRef(null);
     React$5.useEffect(() => {
         const el = containerRef.current;
@@ -38772,17 +39046,17 @@ const TableComponent = ({ idTable, dataSource, contentColumns, headerColumns, vi
                 setScrollTop(el.scrollTop);
             });
         };
-        el.addEventListener("scroll", onScroll);
+        el.addEventListener('scroll', onScroll);
         return () => {
-            el.removeEventListener("scroll", onScroll);
+            el.removeEventListener('scroll', onScroll);
             if (rafId.current) {
                 cancelAnimationFrame(rafId.current);
             }
         };
     }, []);
-    return (jsxRuntime.jsx("div", { ref: containerRef, className: "r-gridtable", style: { maxHeight: `${height ? `${height}px` : "auto"}` }, children: jsxRuntime.jsxs("table", { style: { width: "100%" }, role: "presentation", children: [jsxRuntime.jsx(RenderColGroup, { contentColumns: visibleColumns }), jsxRuntime.jsx("thead", { className: "r-gridheader", role: "rowgroup", children: headerColumns.map((element, indexParent) => {
+    return (jsxRuntime.jsx("div", { ref: containerRef, className: "r-gridtable", style: { maxHeight: `${height ? `${height}px` : 'auto'}` }, children: jsxRuntime.jsxs("table", { style: { width: '100%' }, role: "presentation", children: [jsxRuntime.jsx(RenderColGroup, { contentColumns: visibleColumns }), jsxRuntime.jsx("thead", { className: "r-gridheader", role: "rowgroup", children: headerColumns.map((element, indexParent) => {
                         return (jsxRuntime.jsx("tr", { className: "r-row", role: "row", children: element?.map((col, index) => {
-                                return (jsxRuntime.jsx(HeaderTableCol$1, { col: col, idTable: idTable ?? "", dataSource: dataSource, indexCol: index, indexParent: indexParent, isMulti: isMulti ?? false, objHeaderWidthFixLeft: objHeaderWidthFixLeft, objHeaderWidthFixRight: objHeaderWidthFixRight, selectEnable: selectEnable ?? false, selectedRows: selectedRows, setSelectedRows: setSelectedRows, container: containerRef, filterBy: filterBy, orderBy: orderBy, optionsFilter: optionsFilter, allowFiltering: allowFiltering, allowSorting: allowSorting, formatSetting: formatSetting, changeFilter: (val) => {
+                                return (jsxRuntime.jsx(HeaderTableCol, { col: col, idTable: idTable ?? '', dataSource: dataSource, indexCol: index, indexParent: indexParent, isMulti: isMulti ?? false, objHeaderWidthFixLeft: objHeaderWidthFixLeft, objHeaderWidthFixRight: objHeaderWidthFixRight, selectEnable: selectEnable ?? false, selectedRows: selectedRows, setSelectedRows: setSelectedRows, container: containerRef, filterBy: filterBy, orderBy: orderBy, optionsFilter: optionsFilter, allowFiltering: allowFiltering, allowSorting: allowSorting, formatSetting: formatSetting, changeFilter: (val) => {
                                         setFilterBy([...val]);
                                     }, changeOrder: (val) => {
                                         setOrderBy([...val]);
@@ -38791,10 +39065,10 @@ const TableComponent = ({ idTable, dataSource, contentColumns, headerColumns, vi
                     }) }), jsxRuntime.jsxs("tbody", { className: "r-gridcontent", role: "rowgroup", children: [jsxRuntime.jsx("tr", { style: { height: offsetY } }), filteredData.slice(startIndex, endIndex).map((row) => {
                             const indexRow = row.indexRow;
                             const isSelected = selectedRows?.some((x) => x[fieldKey] === row.data[fieldKey]);
-                            return (jsxRuntime.jsx("tr", { "aria-rowindex": indexRow + 1, role: "row", style: { height: rowHeight }, className: classNames$1("r-row"), children: contentColumns.map((col, indexCol) => jsxRuntime.jsx(CellComponent, { col: col, row: row.data, idTable: idTable, gridRef: gridRef, indexRow: indexRow, indexCol: indexCol, isSelected: isSelected, objWidthFixLeft: objWidthFixLeft, objWidthFixRight: objWidthFixRight, lastObjWidthFixLeft: lastObjWidthFixLeft, fisrtObjWidthFixRight: fisrtObjWidthFixRight, selectedCell: selectedCell, startCell: startCell, editCell: editCell, editDisable: editDisable, addDisable: addDisable, fieldKey: fieldKey, defaultValue: defaultValue, dataSource: dataSource, formatSetting: formatSetting, selectEnable: selectEnable, isMulti: isMulti, selectedRows: selectedRows, containerRef: containerRef, totalCount: totalCount, toolbarSetting: toolbarSetting, buttonSetting: buttonSetting, fieldUniKey: fieldUniKey, handleDataChange: handleDataChange, changeDataSource: changeDataSource, setSelectedRows: setSelectedRows, handleCommandClick: handleCommandClick, handleDuplicate: handleDuplicate, handleKeyDown: handleKeyDown, onDuplicate: onDuplicate, setSelectedCell: setSelectedCell, setStartCell: setStartCell, focusEditElementCell: focusEditElementCell, handeCopyCell: handeCopyCell, isCopying: isCopying, typeDragging: typeDragging, contentColumns: contentColumns, rowChange: rowChange, visibleContentColumns: visibleContentColumns })) }, row.data[fieldKey] ?? indexRow));
-                        }), jsxRuntime.jsx("tr", { style: { height: totalHeight - (endIndex * rowHeight) } })] }), jsxRuntime.jsx("tfoot", { className: "r-gridfoot", children: haveSum && jsxRuntime.jsx("tr", { className: "r-row", children: contentColumns.map((col, index) => {
-                            return (jsxRuntime.jsx(FooterCol, { col: col, dataSource: dataSource, indexCol: index, objWidthFix: { ...objWidthFixLeft, ...objWidthFixRight }, formatSetting: formatSetting }));
-                        }) }) })] }) }));
+                            return (jsxRuntime.jsx("tr", { "aria-rowindex": indexRow + 1, role: "row", style: { height: rowHeight }, className: classNames$1('r-row'), children: contentColumns.map((col, indexCol) => (jsxRuntime.jsx(CellComponent, { col: col, row: row.data, idTable: idTable, gridRef: gridRef, indexRow: indexRow, indexCol: indexCol, isSelected: isSelected, objWidthFixLeft: objWidthFixLeft, objWidthFixRight: objWidthFixRight, lastObjWidthFixLeft: lastObjWidthFixLeft, fisrtObjWidthFixRight: fisrtObjWidthFixRight, selectedCell: selectedCell, startCell: startCell, editCell: editCell, editDisable: editDisable, addDisable: addDisable, fieldKey: fieldKey, defaultValue: defaultValue, dataSource: dataSource, formatSetting: formatSetting, selectEnable: selectEnable, isMulti: isMulti, selectedRows: selectedRows, containerRef: containerRef, totalCount: totalCount, toolbarSetting: toolbarSetting, buttonSetting: buttonSetting, fieldUniKey: fieldUniKey, handleDataChange: handleDataChange, changeDataSource: changeDataSource, setSelectedRows: setSelectedRows, handleCommandClick: handleCommandClick, handleDuplicate: handleDuplicate, handleKeyDown: handleKeyDown, onDuplicate: onDuplicate, setSelectedCell: setSelectedCell, setStartCell: setStartCell, focusEditElementCell: focusEditElementCell, handeCopyCell: handeCopyCell, isCopying: isCopying, typeDragging: typeDragging, contentColumns: contentColumns, rowChange: rowChange, visibleContentColumns: visibleContentColumns }))) }, row.data[fieldKey] ?? indexRow));
+                        }), jsxRuntime.jsx("tr", { style: { height: totalHeight - endIndex * rowHeight } })] }), jsxRuntime.jsx("tfoot", { className: "r-gridfoot", children: haveSum && (jsxRuntime.jsx("tr", { className: "r-row", children: contentColumns.map((col, index) => {
+                            return jsxRuntime.jsx(FooterCol, { col: col, dataSource: dataSource, indexCol: index, objWidthFix: { ...objWidthFixLeft, ...objWidthFixRight }, formatSetting: formatSetting });
+                        }) })) })] }) }));
 };
 
 const handleArrowRight = (e, params) => {
@@ -39909,7 +40183,7 @@ const TableEdit = React$5.forwardRef((props, ref) => {
             }
         }
     };
-    return (jsxRuntime.jsx(React$5.Fragment, { children: jsxRuntime.jsxs("div", { className: "r-table-edit", children: [jsxRuntime.jsxs("div", { className: "r-grid", ref: gridRef, children: [toolbarSetting?.showTopToolbar && jsxRuntime.jsx(RenderToolbarTop, { toolbarTopOption: toolbarTopOption, setOpenPopupSetupColumn: setOpenPopupSetupColumn }), jsxRuntime.jsx(TableComponent, { idTable: idTable, height: height, dataSource: dataSource, contentColumns: contentColumns, headerColumns: headerColumns, visibleColumns: visibleColumns, selectedRows: selectedRows, setSelectedRows: setSelectedRows, selectedCell: selectedCell, startCell: startCell, editCell: editCell, gridRef: gridRef, objHeaderWidthFixLeft: objHeaderWidthFixLeft, objHeaderWidthFixRight: objHeaderWidthFixRight, objWidthFixLeft: objWidthFixLeft, objWidthFixRight: objWidthFixRight, lastObjWidthFixLeft: lastObjWidthFixLeft, fisrtObjWidthFixRight: fisrtObjWidthFixRight, totalCount: totalCount, isMulti: isMulti, selectEnable: selectEnable, editDisable: editDisable, addDisable: addDisable, defaultValue: defaultValue, fieldKey: fieldKey, fieldUniKey: fieldUniKey, formatSetting: formatSetting, toolbarSetting: toolbarSetting, buttonSetting: buttonSetting, containerRef: containerRef, optionsFilter: optionsFilter, allowFiltering: allowFiltering, allowSorting: allowSorting, searchSetting: searchSetting, searchTerm: searchTerm, haveSum: haveSum, isCopying: isCopying, typeDragging: typeDragging, visibleContentColumns: visibleContentColumns, rowHeight: rowHeight, changeDataSource: changeDataSource, handleCommandClick: handleCommandClick, handleKeyDown: handleKeyDown, handeCopyCell: handeCopyCell, onDuplicate: onDuplicate, setSelectedCell: setSelectedCell, setStartCell: setStartCell, focusEditElementCell: focusEditElementCell, rowChange: rowChange, filterBy: filterBy, setFilterBy: setFilterBy, orderBy: orderBy, setOrderBy: setOrderBy, searchClient: searchClient, handleDataChange: handleDataChange, handleDuplicate: () => {
+    return (jsxRuntime.jsx(React$5.Fragment, { children: jsxRuntime.jsxs("div", { className: "r-table-edit", children: [jsxRuntime.jsxs("div", { className: "r-grid", ref: gridRef, children: [toolbarSetting?.showTopToolbar && jsxRuntime.jsx(RenderToolbarTop, { toolbarTopOption: toolbarTopOption }), jsxRuntime.jsx(TableComponent, { idTable: idTable, height: height, dataSource: dataSource, contentColumns: contentColumns, headerColumns: headerColumns, visibleColumns: visibleColumns, selectedRows: selectedRows, setSelectedRows: setSelectedRows, selectedCell: selectedCell, startCell: startCell, editCell: editCell, gridRef: gridRef, objHeaderWidthFixLeft: objHeaderWidthFixLeft, objHeaderWidthFixRight: objHeaderWidthFixRight, objWidthFixLeft: objWidthFixLeft, objWidthFixRight: objWidthFixRight, lastObjWidthFixLeft: lastObjWidthFixLeft, fisrtObjWidthFixRight: fisrtObjWidthFixRight, totalCount: totalCount, isMulti: isMulti, selectEnable: selectEnable, editDisable: editDisable, addDisable: addDisable, defaultValue: defaultValue, fieldKey: fieldKey, fieldUniKey: fieldUniKey, formatSetting: formatSetting, toolbarSetting: toolbarSetting, buttonSetting: buttonSetting, containerRef: containerRef, optionsFilter: optionsFilter, allowFiltering: allowFiltering, allowSorting: allowSorting, searchSetting: searchSetting, searchTerm: searchTerm, haveSum: haveSum, isCopying: isCopying, typeDragging: typeDragging, visibleContentColumns: visibleContentColumns, rowHeight: rowHeight, changeDataSource: changeDataSource, handleCommandClick: handleCommandClick, handleKeyDown: handleKeyDown, handeCopyCell: handeCopyCell, onDuplicate: onDuplicate, setSelectedCell: setSelectedCell, setStartCell: setStartCell, focusEditElementCell: focusEditElementCell, rowChange: rowChange, filterBy: filterBy, setFilterBy: setFilterBy, orderBy: orderBy, setOrderBy: setOrderBy, searchClient: searchClient, handleDataChange: handleDataChange, handleDuplicate: () => {
                                 handleDuplicate(dataSource, startCell.row, fieldKey, defaultValue, fieldUniKey, changeDataSource, containerRef, totalCount, toolbarSetting, buttonSetting, editDisable, addDisable, onDuplicate);
                             }, setContentColumns: (newColumns) => {
                                 setContentColumns(newColumns);
@@ -68337,6 +68611,27 @@ const TabsMenuComponent = ({ buttonWidth, tabParent, tabChild, resourceCodeParen
                             }) }) }), jsxRuntime.jsx("div", { onClick: () => handleScroll(200), className: classNames$1('btn-scroll', { 'd-none': componentWidth >= contentWidth - 20 }), children: jsxRuntime.jsx(SvgChevronRight, {}) })] })] }));
 };
 
+const ExpandAllIcon = ({ className, color = '#7F7F7F', size = 24, onClick, style }) => {
+    return (jsxRuntime.jsx("svg", { className: className ?? '', xmlns: "http://www.w3.org/2000/svg", color: color, fill: "currentColor", version: "1.1", id: "mdi-expand-all", width: size, height: size, viewBox: "0 0 24 24", style: {
+            userSelect: 'none',
+            ...style
+        }, onClick: onClick, children: jsxRuntime.jsx("path", { d: "M18,8H8V18H6V8A2,2 0 0,1 8,6H18V8M14,2H4A2,2 0 0,0 2,4V14H4V4H14V2M22,12V20A2,2 0 0,1 20,22H12A2,2 0 0,1 10,20V12A2,2 0 0,1 12,10H20A2,2 0 0,1 22,12M20,15H17V12H15V15H12V17H15V20H17V17H20V15Z" }) }));
+};
+
+const GroupIcon = ({ className, color = '#7F7F7F', size = 24, onClick, style }) => {
+    return (jsxRuntime.jsxs("svg", { className: className ?? '', xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", color: color, fill: "none", style: {
+            userSelect: 'none',
+            ...style
+        }, onClick: onClick, children: [jsxRuntime.jsx("rect", { x: "1", y: "11", width: "8", height: "2", rx: "0.8", fill: "currentColor" }), jsxRuntime.jsx("rect", { x: "4", y: "8", width: "2", height: "8", rx: "0.8", fill: "currentColor" }), jsxRuntime.jsx("mask", { id: "path-3-inside-1_547_22", fill: "white", children: jsxRuntime.jsx("rect", { x: "11", y: "17", width: "12", height: "5", rx: "1" }) }), jsxRuntime.jsx("rect", { x: "11", y: "17", width: "12", height: "5", rx: "1", stroke: "currentColor", "stroke-width": "4", mask: "url(#path-3-inside-1_547_22)" }), jsxRuntime.jsx("mask", { id: "path-4-inside-2_547_22", fill: "white", children: jsxRuntime.jsx("rect", { x: "11", y: "8", width: "12", height: "8", rx: "1" }) }), jsxRuntime.jsx("rect", { x: "11", y: "8", width: "12", height: "8", rx: "1", stroke: "currentColor", "stroke-width": "4", mask: "url(#path-4-inside-2_547_22)" }), jsxRuntime.jsx("mask", { id: "path-5-inside-3_547_22", fill: "white", children: jsxRuntime.jsx("rect", { x: "11", y: "2", width: "12", height: "5", rx: "1" }) }), jsxRuntime.jsx("rect", { x: "11", y: "2", width: "12", height: "5", rx: "1", stroke: "currentColor", "stroke-width": "4", mask: "url(#path-5-inside-3_547_22)" })] }));
+};
+
+const UnExpandAllIcon = ({ className, color = '#7F7F7F', size = 24, onClick, style }) => {
+    return (jsxRuntime.jsxs("svg", { className: className ?? '', xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", color: color, fill: "currentColor", style: {
+            userSelect: 'none',
+            ...style
+        }, onClick: onClick, children: [jsxRuntime.jsx("path", { d: "M18 8H8V18H6V8C6 7.46957 6.21071 6.96086 6.58579 6.58579C6.96086 6.21071 7.46957 6 8 6H18V8ZM14 2H4C3.46957 2 2.96086 2.21071 2.58579 2.58579C2.21071 2.96086 2 3.46957 2 4V14H4V4H14V2ZM22 12V20C22 20.5304 21.7893 21.0391 21.4142 21.4142C21.0391 21.7893 20.5304 22 20 22H12C11.4696 22 10.9609 21.7893 10.5858 21.4142C10.2107 21.0391 10 20.5304 10 20V12C10 11.4696 10.2107 10.9609 10.5858 10.5858C10.9609 10.2107 11.4696 10 12 10H20C20.5304 10 21.0391 10.2107 21.4142 10.5858C21.7893 10.9609 22 11.4696 22 12ZM20 15H17V12H15V15H12V17H15V20H17V17H20V15Z", fill: "currentColor" }), jsxRuntime.jsx("rect", { x: "14", y: "11", width: "4", height: "4", fill: "currentColor" }), jsxRuntime.jsx("rect", { x: "14", y: "17", width: "4", height: "4", fill: "currentColor" })] }));
+};
+
 const RenderContentCol = (props) => {
     const { col, indexCol, indexRow, isSelected, row, formatSetting, idTable, fisrtObjWidthFixRight, lastObjWidthFixLeft, objWidthFixLeft, objWidthFixRight, selectedRows, selectEnable, setSelectedRows, fieldKey, isMulti } = props;
     const RenderElement = () => {
@@ -68381,10 +68676,10 @@ const RenderContentCol = (props) => {
             }
             return (jsxRuntime.jsx("div", { className: classNames$1('r-rowcell-div'), children: jsxRuntime.jsxs("div", { className: classNames$1('r-rowcell-content'), style: {
                         textAlign: col.textAlign ? col.textAlign : 'left'
-                    }, children: [jsxRuntime.jsx("div", { id: `content-${idTable}-row${indexRow}col-${indexCol}`, className: "r-cell-text", children: (col.type === 'numeric' && Number(row[col.field]) < 0 ? jsxRuntime.jsxs("div", { style: { color: formatSetting?.colorNegative ?? 'red' }, children: [" ", `${formatSetting?.prefixNegative ?? '-'}${value}${formatSetting?.suffixNegative ?? ''}`] }) : value) }), col.haveToolTip && jsxRuntime.jsx(UncontrolledTooltip, { className: "r-tooltip", autohide: false, target: `content-${idTable}-row${indexRow}col-${indexCol}`, children: (col.type === 'numeric' && Number(row[col.field]) < 0 ? jsxRuntime.jsxs("div", { style: { color: formatSetting?.colorNegative ?? 'red' }, children: [" ", `${formatSetting?.prefixNegative ?? '-'}${value}${formatSetting?.suffixNegative ?? ''}`] }) : value) })] }) }));
+                    }, children: [jsxRuntime.jsx("div", { id: `content-${idTable}-row${indexRow}col-${indexCol}`, className: "r-cell-text", children: col.type === 'numeric' && Number(row[col.field]) < 0 ? jsxRuntime.jsxs("div", { style: { color: formatSetting?.colorNegative ?? 'red' }, children: [" ", `${formatSetting?.prefixNegative ?? '-'}${value}${formatSetting?.suffixNegative ?? ''}`] }) : value }), col.haveToolTip && (jsxRuntime.jsx(UncontrolledTooltip, { className: "r-tooltip", autohide: false, target: `content-${idTable}-row${indexRow}col-${indexCol}`, children: col.type === 'numeric' && Number(row[col.field]) < 0 ? jsxRuntime.jsxs("div", { style: { color: formatSetting?.colorNegative ?? 'red' }, children: [" ", `${formatSetting?.prefixNegative ?? '-'}${value}${formatSetting?.suffixNegative ?? ''}`] }) : value }))] }) }));
         }
     };
-    return jsxRuntime.jsx(jsxRuntime.Fragment, { children: (col.visible !== false && jsxRuntime.jsx("td", { className: classNames$1(`r-rowcell fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }, { 'fixed-last': (col.fixedType === 'left' && indexCol === lastObjWidthFixLeft) || (col.fixedType === 'right' && indexCol === fisrtObjWidthFixRight) }, { 'r-active': isSelected }), style: {
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: col.visible !== false && (jsxRuntime.jsx("td", { className: classNames$1(`r-rowcell fix-${col.fixedType}`, { 'cell-fixed': col.fixedType }, { 'fixed-last': (col.fixedType === 'left' && indexCol === lastObjWidthFixLeft) || (col.fixedType === 'right' && indexCol === fisrtObjWidthFixRight) }, { 'r-active': isSelected }), style: {
                 left: col.fixedType === 'left' ? objWidthFixLeft[indexCol] : undefined,
                 right: col.fixedType === 'right' ? objWidthFixRight[indexCol] : undefined
             }, onClick: (e) => {
@@ -68411,375 +68706,10 @@ const RenderContentCol = (props) => {
                     }
                     e.stopPropagation();
                 }
-            }, children: RenderElement() }, `col-${indexRow}-${indexCol}`)) });
+            }, children: RenderElement() }, `col-${indexRow}-${indexCol}`)) }));
 };
 
-const DateRangePicker = React$5.forwardRef((props, ref) => {
-    const { id, onKeyDown, className, invalid, container, onPaste, onChange, value } = props;
-    const dateFormat = props.dateFormat ?? 'dd/MM/yyyy';
-    const { from, to } = value || {};
-    const currentDate = new Date();
-    const { t } = reactI18next.useTranslation();
-    const [viewDateFrom, setViewDateFrom] = React$5.useState(from ? new Date(from) : currentDate);
-    const [viewDateTo, setViewDateTo] = React$5.useState(to ? new Date(to) : addMonths(currentDate, 1));
-    const [open, setOpen] = React$5.useState(false);
-    const formatDisplay = (f, t) => {
-        if (f && t) {
-            return `${formatDateTime(f, dateFormat)} - ${formatDateTime(t, dateFormat)}`;
-        }
-        if (f) {
-            return `${formatDateTime(f, dateFormat)} - `;
-        }
-        return '';
-    };
-    const [inputValue, setInputValue] = React$5.useState(formatDisplay(from, to));
-    const toggle = () => setOpen((prev) => !prev);
-    const handleSelect = (selected) => {
-        let newRange = { from, to };
-        if (!newRange.from || (selected && selected < newRange.from)) {
-            newRange = { from: selected, to };
-            setViewDateFrom(selected || currentDate);
-        }
-        else if (newRange.from && selected && selected > newRange.from && (!newRange.to || selected < newRange.to)) {
-            newRange = { from, to: selected };
-            setViewDateTo(selected || currentDate);
-        }
-        else if (newRange.to && selected && selected > newRange.to) {
-            newRange = { from, to: selected };
-            setViewDateTo(selected || currentDate);
-        }
-        onChange(newRange);
-        setInputValue(formatDisplay(newRange.from, newRange.to));
-    };
-    const handleChange = (e) => {
-        const v = e.target.value;
-        setInputValue(v);
-        const parts = v.split('-').map((p) => p.trim());
-        if (parts.length === 2 && parts[0].length === 10 && parts[1].length === 10) {
-            const parsedFrom = parse(parts[0], dateFormat, currentDate);
-            const parsedTo = parse(parts[1], dateFormat, currentDate);
-            if (!isNaN(parsedFrom.getTime()) && !isNaN(parsedTo.getTime())) {
-                onChange({ from: parsedFrom, to: parsedTo });
-            }
-        }
-    };
-    const optionsMonth = [
-        { value: 1, label: t('January') },
-        { value: 2, label: t('February') },
-        { value: 3, label: t('March') },
-        { value: 4, label: t('April') },
-        { value: 5, label: t('May') },
-        { value: 6, label: t('June') },
-        { value: 7, label: t('July') },
-        { value: 8, label: t('August') },
-        { value: 9, label: t('September') },
-        { value: 10, label: t('October') },
-        { value: 11, label: t('November') },
-        { value: 12, label: t('December') }
-    ];
-    const getMaskFromFormat = () => '99/99/9999 -> 99/99/9999';
-    return (jsxRuntime.jsx("div", { className: classNames$1('r-daterangepicker', { 'is-invalid': invalid }), ref: ref, id: id, children: jsxRuntime.jsxs(Dropdown$1$1, { className: className, isOpen: open, toggle: toggle, children: [jsxRuntime.jsx(DropdownToggle$1, { tag: "div", "data-toggle": "dropdown", "aria-expanded": open, className: "d-flex align-items-center", style: { cursor: 'pointer' }, children: jsxRuntime.jsx(InputMask, { mask: getMaskFromFormat(), value: inputValue, onChange: handleChange, placeholder: "dd/mm/yyyy -> dd/mm/yyyy", className: "form-control", style: { width: 230 }, onKeyDown: (e) => {
-                            if (e.code === 'Space') {
-                                setOpen(!open);
-                            }
-                            else if (onKeyDown) {
-                                const rs = onKeyDown(e);
-                                if (rs) {
-                                    setOpen(false);
-                                }
-                            }
-                        }, onPaste: (e) => {
-                            onPaste?.(e);
-                            setOpen(false);
-                        } }) }), jsxRuntime.jsxs(DropdownMenu$1, { className: "r-datepicker-popup formula-dropdown icon-dropdown p-0", container: container, style: { position: 'fixed', borderRadius: 8, zIndex: 9999 }, children: [jsxRuntime.jsxs("div", { className: "d-flex", style: { padding: 10, gap: 20 }, children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs("div", { className: "select-month-year", children: [jsxRuntime.jsx(SvgChevronLeft, { cursor: 'pointer', fontSize: 22, onClick: () => {
-                                                        const newDate = new Date(viewDateFrom);
-                                                        newDate.setMonth(viewDateFrom.getMonth() - 1);
-                                                        setViewDateFrom(newDate);
-                                                    } }), jsxRuntime.jsxs("div", { className: "d-flex", children: [jsxRuntime.jsx("div", { className: "select-month", children: jsxRuntime.jsx(SelectTable, { options: optionsMonth, onChange: (e) => {
-                                                                    const newMonth = parseInt(e.value, 10);
-                                                                    const newDate = new Date(viewDateFrom);
-                                                                    newDate.setMonth(newMonth - 1);
-                                                                    setViewDateFrom(newDate);
-                                                                }, value: optionsMonth.find((x) => x.value === viewDateFrom.getMonth() + 1) }) }), jsxRuntime.jsx("div", { className: "select-year", children: jsxRuntime.jsx(SelectTable, { options: Array.from({ length: 200 }, (_, i) => 1900 + i).map((x) => ({ value: x, label: x })), onChange: (e) => {
-                                                                    const newYear = parseInt(e.value, 10);
-                                                                    const newDate = new Date(viewDateFrom);
-                                                                    newDate.setFullYear(newYear);
-                                                                    setViewDateFrom(newDate);
-                                                                }, value: { value: viewDateFrom.getFullYear(), label: viewDateFrom.getFullYear() } }) })] }), jsxRuntime.jsx(SvgChevronRight, { cursor: 'pointer', fontSize: 22, onClick: () => {
-                                                        const newDate = new Date(viewDateFrom);
-                                                        newDate.setMonth(viewDateFrom.getMonth() + 1);
-                                                        setViewDateFrom(newDate);
-                                                    } })] }), jsxRuntime.jsx(DayPicker, { mode: "single", selected: from, onSelect: (d) => handleSelect(d), month: viewDateFrom, showOutsideDays: true, modifiers: {
-                                                inRange: (day) => !!(from && to && day && day > from && day < to),
-                                                rangeStart: from,
-                                                rangeEnd: to
-                                            }, modifiersClassNames: {
-                                                inRange: 'rdp-in-range',
-                                                rangeStart: 'rdp-selected',
-                                                rangeEnd: 'rdp-selected'
-                                            } })] }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs("div", { className: "select-month-year", children: [jsxRuntime.jsx(SvgChevronLeft, { cursor: 'pointer', fontSize: 22, onClick: () => {
-                                                        const newDate = new Date(viewDateTo);
-                                                        newDate.setMonth(viewDateTo.getMonth() - 1);
-                                                        setViewDateTo(newDate);
-                                                    } }), jsxRuntime.jsxs("div", { className: "d-flex", children: [jsxRuntime.jsx("div", { className: "select-month", children: jsxRuntime.jsx(SelectTable, { options: optionsMonth, onChange: (e) => {
-                                                                    const newMonth = parseInt(e.value, 10);
-                                                                    const newDate = new Date(viewDateTo);
-                                                                    newDate.setMonth(newMonth - 1);
-                                                                    setViewDateTo(newDate);
-                                                                }, value: optionsMonth.find((x) => x.value === viewDateTo.getMonth() + 1) }) }), jsxRuntime.jsx("div", { className: "select-year", children: jsxRuntime.jsx(SelectTable, { options: Array.from({ length: 200 }, (_, i) => 1900 + i).map((x) => ({ value: x, label: x })), onChange: (e) => {
-                                                                    const newYear = parseInt(e.value, 10);
-                                                                    const newDate = new Date(viewDateTo);
-                                                                    newDate.setFullYear(newYear);
-                                                                    setViewDateTo(newDate);
-                                                                }, value: { value: viewDateTo.getFullYear(), label: viewDateTo.getFullYear() } }) })] }), jsxRuntime.jsx(SvgChevronRight, { cursor: 'pointer', fontSize: 22, onClick: () => {
-                                                        const newDate = new Date(viewDateTo);
-                                                        newDate.setMonth(viewDateTo.getMonth() + 1);
-                                                        setViewDateTo(newDate);
-                                                    } })] }), jsxRuntime.jsx(DayPicker, { mode: "single", selected: to, onSelect: (d) => handleSelect(d), month: viewDateTo, showOutsideDays: true, modifiers: {
-                                                inRange: (day) => !!(from && to && day && day > from && day < to),
-                                                rangeStart: from,
-                                                rangeEnd: to
-                                            }, modifiersClassNames: {
-                                                inRange: 'rdp-in-range',
-                                                rangeStart: 'rdp-selected',
-                                                rangeEnd: 'rdp-selected'
-                                            } })] })] }), jsxRuntime.jsxs("div", { className: "d-flex border-top ms-50", style: { gap: 20, paddingTop: 10 }, children: [jsxRuntime.jsx("div", { className: "btn-today", onClick: () => onChange({ from: currentDate, to: currentDate }), children: t('Today') }), jsxRuntime.jsx("div", { className: "btn-today", onClick: () => onChange({ from: currentDate, to: currentDate }), children: t('Yesterday') }), jsxRuntime.jsx("div", { className: "btn-today", onClick: () => onChange({ from: currentDate, to: currentDate }), children: t('This week') }), jsxRuntime.jsx("div", { className: "btn-today", onClick: () => onChange({ from: currentDate, to: currentDate }), children: t('This month') })] })] })] }) }));
-});
-
-const FilterComponent = ({ optionsFilter, formatSetting, filterBy, setOpenFilter, changeFilter, column }) => {
-    const { t } = reactI18next.useTranslation();
-    const fieldFilter = column.fieldFilter ?? column.field;
-    let typeFilter = column.filterType;
-    if (!typeFilter) {
-        if (column.type === 'numeric') {
-            typeFilter = 'numeric';
-        }
-        else if (column.type === 'date' || column.type === 'datetime') {
-            typeFilter = 'date';
-        }
-        else if (column.type === 'select') {
-            typeFilter = 'select';
-        }
-        else {
-            typeFilter = 'text';
-        }
-    }
-    const handleSave = (typeFilter, filterValue, operator) => {
-        if (!typeFilter && !filterValue) {
-            changeFilter(filterBy.filter((x) => x.key !== fieldFilter));
-            setOpenFilter(false);
-            return;
-        }
-        if (typeFilter === 'date') {
-            const from = filterBy.find((item) => item.key === fieldFilter && item.ope === 'greaterthanorequal');
-            if (from) {
-                from.value = filterValue?.from;
-            }
-            else {
-                filterBy.push({ key: fieldFilter, ope: 'greaterthanorequal', value: filterValue?.from });
-            }
-            const to = filterBy.find((item) => item.key === fieldFilter && item.ope === 'lessthanorequal');
-            if (to) {
-                to.value = filterValue?.to;
-            }
-            else {
-                filterBy.push({ key: fieldFilter, ope: 'lessthanorequal', value: filterValue?.to });
-            }
-        }
-        else {
-            const filter = filterBy.find((item) => item.key === fieldFilter);
-            if (filter) {
-                filter.ope = operator ?? 'equal';
-                filter.value = filterValue ?? '';
-            }
-            else {
-                filterBy.push({ key: fieldFilter, ope: operator ?? 'equal', value: filterValue ?? '' });
-            }
-        }
-        changeFilter([...filterBy]);
-        setOpenFilter(false);
-    };
-    /* eslint-disable */
-    switch (typeFilter) {
-        case 'text':
-            return jsxRuntime.jsx(StringFilterComponent, { fieldFilter: fieldFilter, optionsFilter: optionsFilter, filterBy: filterBy, column: column, handleSave: handleSave });
-        case 'numeric':
-            return jsxRuntime.jsx(NumberFilterComponent, { fieldFilter: fieldFilter, optionsFilter: optionsFilter, filterBy: filterBy, column: column, handleSave: handleSave, formatSetting: formatSetting });
-        case 'select':
-            return jsxRuntime.jsx(SelectFilterComponent, { fieldFilter: fieldFilter, optionsFilter: optionsFilter, filterBy: filterBy, column: column, handleSave: handleSave });
-        case 'date':
-            return jsxRuntime.jsx(DateRangeFilterComponent, { fieldFilter: fieldFilter, optionsFilter: optionsFilter, filterBy: filterBy, column: column, handleSave: handleSave });
-        default:
-            return jsxRuntime.jsx("div", { children: t('No filter available') });
-    }
-    /* eslint-enable */
-};
-const StringFilterComponent = ({ fieldFilter, filterBy, handleSave }) => {
-    const { t } = reactI18next.useTranslation();
-    const filter = filterBy.find((item) => item.key === fieldFilter);
-    const [operator, setOperator] = React$5.useState(filter?.ope ?? 'contains');
-    const [valueFilter, setValueFilter] = React$5.useState(filter?.value ?? '');
-    const options = [
-        { label: 'Bắt đầu bởi', value: 'startswith' },
-        { label: 'Kết thúc bởi', value: 'endswith' },
-        { label: 'Chứa', value: 'contains' },
-        { label: 'Bằng', value: 'equal' },
-        { label: 'Không bằng', value: 'notequal' }
-    ];
-    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("div", { className: "r-filter-popup", onKeyDown: (e) => {
-                if (e.code === 'Enter' || e.code === 'NumpadEnter') {
-                    setTimeout(() => {
-                        handleSave('text', valueFilter, operator);
-                    }, 100);
-                    e.stopPropagation();
-                }
-            }, children: [jsxRuntime.jsx(SelectTable, { value: options.find((x) => x.value === operator), options: options, onChange: (val) => {
-                        setOperator(val.value);
-                    }, placeholder: "Select" }), jsxRuntime.jsx(Input$1, { className: "my-1", value: valueFilter, onChange: (val) => {
-                        setValueFilter(val.target.value);
-                    } }), jsxRuntime.jsxs("div", { className: "d-flex justify-content-end", children: [jsxRuntime.jsx(Button$1$1, { color: "primary", style: { borderRadius: 3 }, className: "me-50 py-25 px-50 fw-bold", onClick: () => handleSave('text', valueFilter, operator), children: t('Filter') }), jsxRuntime.jsx(Button$1$1, { className: "py-25 px-50  fw-bold", outline: true, style: { borderRadius: 3 }, onClick: () => handleSave(), children: t('Clear') })] })] }) }));
-};
-const NumberFilterComponent = ({ column, filterBy, fieldFilter, handleSave, formatSetting }) => {
-    const { t } = reactI18next.useTranslation();
-    const filter = filterBy.find((item) => item.key === fieldFilter);
-    const [operator, setOperator] = React$5.useState(filter?.ope ?? 'equal');
-    const [valueFilter, setValueFilter] = React$5.useState(filter?.value ?? '');
-    const options = [
-        { label: 'Lớn hơn', value: 'greaterthan' },
-        { label: 'Lớn hơn hoặc bằng', value: 'greaterthanorequal' },
-        { label: 'Bằng', value: 'equal' },
-        { label: 'Bé hơn', value: 'lessthan' },
-        { label: 'Bé hơn hoặc bằng', value: 'lessthanorequal' }
-    ];
-    const numericFormatProps = {
-        value: !isNullOrUndefined$1(valueFilter) ? valueFilter.toString() : '',
-        thousandSeparator: checkThousandSeparator(formatSetting?.thousandSeparator, formatSetting?.decimalSeparator),
-        decimalSeparator: checkDecimalSeparator(formatSetting?.thousandSeparator, formatSetting?.decimalSeparator),
-        allowNegative: column.numericSettings?.allowNegative ?? false,
-        decimalScale: column.numericSettings?.fraction ?? 0
-    };
-    let floatValue = parseFloat(valueFilter ?? '0');
-    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("div", { className: "r-filter-popup", onKeyDown: (e) => {
-                if (e.code === 'Enter' || e.code === 'NumpadEnter') {
-                    setTimeout(() => {
-                        handleSave('numeric', valueFilter, operator);
-                    }, 100);
-                    e.stopPropagation();
-                }
-            }, children: [jsxRuntime.jsx(SelectTable, { value: options.find((x) => x.value === operator), options: options, onChange: (val) => {
-                        setOperator(val.value);
-                    }, placeholder: t('Select') }), jsxRuntime.jsx(NumericFormat, { style: { textAlign: column.textAlign, height: 29 }, ...numericFormatProps, defaultValue: formartNumberic(valueFilter, formatSetting?.decimalSeparator ?? ',', formatSetting?.thousandSeparator ?? '.', column.numericSettings?.fraction), className: classNames$1('form-control my-1 input-numeric'), onValueChange: (values) => {
-                        floatValue = values?.floatValue;
-                    }, onFocus: (e) => {
-                        e.target.setSelectionRange(0, e.target.innerText.length - 1);
-                    }, onBlur: () => {
-                        if (floatValue !== valueFilter) {
-                            setValueFilter(!isNaN(floatValue) ? floatValue : 0);
-                        }
-                    } }), jsxRuntime.jsxs("div", { className: "d-flex justify-content-end", children: [jsxRuntime.jsx(Button$1$1, { color: "primary", style: { borderRadius: 3 }, className: "me-50 py-25 px-50 fw-bold", onClick: () => handleSave('numeric', valueFilter, operator), children: t('Filter') }), jsxRuntime.jsx(Button$1$1, { className: "py-25 px-50  fw-bold", outline: true, style: { borderRadius: 3 }, onClick: () => handleSave(), children: t('Clear') })] })] }) }));
-};
-const SelectFilterComponent = ({ column, filterBy, handleSave, fieldFilter, optionsFilter }) => {
-    const { t } = reactI18next.useTranslation();
-    const filter = filterBy.find((item) => item.key === fieldFilter);
-    const [valueFilter, setValueFilter] = React$5.useState(filter?.value ?? '');
-    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("div", { className: "r-filter-popup", onKeyDown: (e) => {
-                if (e.code === 'Enter' || e.code === 'NumpadEnter') {
-                    setTimeout(() => {
-                        handleSave('select', valueFilter, 'equal');
-                    }, 100);
-                    e.stopPropagation();
-                }
-            }, children: [jsxRuntime.jsx("div", { className: "mb-1", children: jsxRuntime.jsx(SelectTable, { value: optionsFilter ? optionsFilter[column.fieldFilter ?? column.field]?.find((x) => x.value === valueFilter) : undefined, options: (optionsFilter && optionsFilter[column.fieldFilter ?? column.field]) ?? [], isClearable: true, onChange: (val) => {
-                            setValueFilter(val?.value);
-                        }, placeholder: t('Select') }) }), jsxRuntime.jsxs("div", { className: "d-flex justify-content-end", children: [jsxRuntime.jsx(Button$1$1, { color: "primary", style: { borderRadius: 3 }, className: "me-50 py-25 px-50 fw-bold", onClick: () => handleSave('select', valueFilter, 'equal'), children: t('Filter') }), jsxRuntime.jsx(Button$1$1, { className: "py-25 px-50  fw-bold", outline: true, style: { borderRadius: 3 }, onClick: () => handleSave(), children: t('Clear') })] })] }) }));
-};
-const DateRangeFilterComponent = ({ fieldFilter, filterBy, handleSave }) => {
-    const { t } = reactI18next.useTranslation();
-    const from = filterBy.find((item) => item.key === fieldFilter && item.ope === 'greaterthanorequal')?.value;
-    const to = filterBy.find((item) => item.key === fieldFilter && item.ope === 'lessthanorequal')?.value;
-    const [valueFilter, setValueFilter] = React$5.useState({ from: from ?? undefined, to: to ?? undefined });
-    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("div", { className: "r-filter-popup", onKeyDown: (e) => {
-                if (e.code === 'Enter' || e.code === 'NumpadEnter') {
-                    setTimeout(() => {
-                        handleSave('date', valueFilter);
-                    }, 100);
-                    e.stopPropagation();
-                }
-            }, children: [jsxRuntime.jsx("div", { className: "mb-1", children: jsxRuntime.jsx(DateRangePicker, { dateFormat: "dd/MM/yyyy", value: valueFilter, onChange: (date) => {
-                            setValueFilter(date);
-                        } }) }), jsxRuntime.jsxs("div", { className: "d-flex justify-content-end", children: [jsxRuntime.jsx(Button$1$1, { color: "primary", style: { borderRadius: 3 }, className: "me-50 py-25 px-50 fw-bold", onClick: () => handleSave('date', valueFilter), children: t('Filter') }), jsxRuntime.jsx(Button$1$1, { className: "py-25 px-50  fw-bold", outline: true, style: { borderRadius: 3 }, onClick: () => handleSave(), children: t('Clear') })] })] }) }));
-};
-
-const HeaderTableCol = (props) => {
-    const { selectEnable, dataSource, setSelectedRows, col, indexCol, indexParent, objWidthFixLeft, objWidthFixRight, totalCount, selectedRows, columns, setColumns, orderBy, changeFilter, filterBy, changeOrder, allowFiltering, allowSorting, container, fisrtObjWidthFixRight, lastObjWidthFixLeft, formatSetting, optionsFilter, idTable, isMulti } = props;
-    const { t } = reactI18next.useTranslation();
-    const headerRef = React$5.useRef(null);
-    const order = orderBy.find((item) => item.key === col.field);
-    const [openFilter, setOpenFilter] = React$5.useState(false);
-    // const filter = filterBy.find((item) => item.key === (col.fieldFilter ?? col.field))
-    const handleResize = (e, { size }) => {
-        // Update the column width here
-        // You might need to update the state or call a callback to update the width
-        if (size.width > 50) {
-            const newColumns = [...columns];
-            newColumns[indexCol].width = size.width;
-            if ((columns[indexCol]?.maxWidth ?? 0) < size.width) {
-                newColumns[indexCol].maxWidth = size.width;
-            }
-            if ((columns[indexCol]?.minWidth ?? 0) > size.width) {
-                newColumns[indexCol].minWidth = size.width;
-            }
-            if (setColumns) {
-                setColumns(newColumns);
-            }
-        }
-    };
-    const checkOverflow = () => {
-        return headerRef.current && headerRef.current.scrollHeight > headerRef.current.clientHeight;
-    };
-    return (jsxRuntime.jsx(React$5.Fragment, { children: col.visible !== false && (jsxRuntime.jsx(Resizable, { className: "r-resize", width: typeof col.width === 'number' ? col.width : Number((col.width ?? '').replaceAll(new RegExp(`[^0-9]`, 'g'), '')), height: 0, onResize: handleResize, draggableOpts: { enableUserSelectHack: false }, children: jsxRuntime.jsx("th", { rowSpan: col.rowspan !== 1 ? col.rowspan : 1, colSpan: col.columns?.filter((x) => x.visible !== false)?.length ?? 1, className: classNames$1(`r-headercell fix-${col.fixedType}`, { 'fixed-last': (col.fixedType === 'left' && indexCol === lastObjWidthFixLeft) || (col.fixedType === 'right' && indexCol === fisrtObjWidthFixRight) }, { 'cell-fixed': col.fixedType }), style: {
-                    top: `${indexParent * 42}px`,
-                    left: col.fixedType === 'left' ? objWidthFixLeft[indexCol ?? 0] : undefined,
-                    right: col.fixedType === 'right' ? objWidthFixRight[indexCol ?? 0] : undefined
-                }, children: jsxRuntime.jsxs("div", { style: { justifyContent: 'space-between' }, onClick: () => {
-                        if (!!allowSorting && (col.columns?.length ?? 0) === 0) {
-                            if (order) {
-                                if (order.direction === 'asc') {
-                                    order.direction = 'desc';
-                                    changeOrder(orderBy);
-                                }
-                                else {
-                                    changeOrder(orderBy.filter((x) => x.key !== col.field));
-                                }
-                            }
-                            else {
-                                orderBy.push({ direction: 'asc', key: col.field });
-                                changeOrder(orderBy);
-                            }
-                        }
-                    }, className: classNames$1('r-headercell-div', { 'cursor-pointer': allowSorting }), children: [col.type === 'checkbox' && !col.field && (jsxRuntime.jsx(Input$1, { checked: !!(totalCount > 0 && selectedRows?.length >= totalCount), type: "checkbox", className: classNames$1('cursor-pointer', { 'd-none': !isMulti }), style: { textAlign: col.textAlign ?? 'left', marginTop: 6 }, onChange: (e) => {
-                                if (selectEnable) {
-                                    if (e.target.checked) {
-                                        setSelectedRows(dataSource.map((item) => {
-                                            return item;
-                                        }));
-                                    }
-                                    else {
-                                        setSelectedRows([]);
-                                    }
-                                }
-                            } })), col.type !== 'checkbox' && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: "header-content", style: { justifyContent: col.textAlign ?? 'left' }, children: [jsxRuntime.jsx("span", { id: `header-${idTable}-${indexParent}-${indexCol}`, ref: headerRef, className: "text-content", children: t(col.headerText ?? '') }), checkOverflow() && (jsxRuntime.jsx(UncontrolledTooltip, { className: "r-tooltip", autohide: false, target: `header-${idTable}-${indexParent}-${indexCol}`, children: t(col.headerText ?? '') }))] }), jsxRuntime.jsxs("div", { className: "d-flex align-items-center", children: [allowSorting && order?.direction === 'asc' && (jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", className: "ms-25", width: "10", height: "10", viewBox: "0 0 16 18", fill: "none", children: [jsxRuntime.jsx("g", { "clip-path": "url(#clip0_520_6)", children: jsxRuntime.jsx("path", { d: "M8.70711 0.292893C8.31658 -0.0976311 7.68342 -0.0976311 7.29289 0.292893L0.928932 6.65685C0.538408 7.04738 0.538408 7.68054 0.928932 8.07107C1.31946 8.46159 1.95262 8.46159 2.34315 8.07107L8 2.41421L13.6569 8.07107C14.0474 8.46159 14.6805 8.46159 15.0711 8.07107C15.4616 7.68054 15.4616 7.04738 15.0711 6.65685L8.70711 0.292893ZM8 18H9L9 1H8H7L7 18H8Z", fill: "black" }) }), jsxRuntime.jsx("defs", { children: jsxRuntime.jsx("clipPath", { id: "clip0_520_6", children: jsxRuntime.jsx("rect", { width: "16", height: "18", fill: "white" }) }) })] })), allowSorting && order?.direction === 'desc' && (jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", className: "ms-25", width: "10", height: "10", viewBox: "0 0 16 18", fill: "none", children: [jsxRuntime.jsx("g", { "clip-path": "url(#clip0_520_2)", children: jsxRuntime.jsx("path", { d: "M7.29289 17.7071C7.68342 18.0976 8.31658 18.0976 8.70711 17.7071L15.0711 11.3431C15.4616 10.9526 15.4616 10.3195 15.0711 9.92893C14.6805 9.53841 14.0474 9.53841 13.6569 9.92893L8 15.5858L2.34315 9.92893C1.95262 9.53841 1.31946 9.53841 0.928932 9.92893C0.538408 10.3195 0.538408 10.9526 0.928932 11.3431L7.29289 17.7071ZM8 0L7 0L7 17H8H9L9 0L8 0Z", fill: "black" }) }), jsxRuntime.jsx("defs", { children: jsxRuntime.jsx("clipPath", { id: "clip0_520_2", children: jsxRuntime.jsx("rect", { width: "16", height: "18", fill: "white" }) }) })] })), allowFiltering && (col.columns?.length ?? 0) === 0 && col.allowFilter !== false && (jsxRuntime.jsxs(Dropdown$1$1, { isOpen: openFilter, toggle: (e) => {
-                                                setOpenFilter(!openFilter);
-                                                e.stopPropagation();
-                                            }, onClick: (e) => {
-                                                e.stopPropagation();
-                                            }, children: [jsxRuntime.jsx(DropdownToggle$1, { tag: "div", className: "p-0 r-filter", children: jsxRuntime.jsxs("svg", { className: classNames$1('ms-25', { active: filterBy.some((item) => item.key === (col.fieldFilter ?? col.field)) }), width: "10", height: "10", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "stroke-width": "1.5", "font-size": "12", children: [jsxRuntime.jsx("path", { d: "M14.7 11.998v10.506c.052.4-.08.826-.381 1.106a1.306 1.306 0 0 1-.925.39 1.289 1.289 0 0 1-.926-.39l-2.637-2.68a1.323 1.323 0 0 1-.38-1.106v-7.826h-.04L1.85 2.16A1.348 1.348 0 0 1 2.076.293C2.325.107 2.6 0 2.888 0h18.373c.289 0 .564.107.814.293a1.348 1.348 0 0 1 .223 1.866L14.738 12H14.7Z", fill: "currentColor" }), ' '] }) }), jsxRuntime.jsx(DropdownMenu$1, { container: container, className: "formula-dropdown icon-dropdown p-0", style: {
-                                                        borderRadius: 8,
-                                                        zIndex: 1056
-                                                    }, children: jsxRuntime.jsx(DropdownItem$1, { className: "p-1", style: { borderRadius: '6px' }, tag: "div", header: true, children: jsxRuntime.jsx(FilterComponent, { setOpenFilter: setOpenFilter, filterBy: filterBy, optionsFilter: optionsFilter, formatSetting: formatSetting, changeFilter: changeFilter, column: col }) }) })] }))] })] }))] }) }) })) }, `header-${indexCol}`));
-};
-
-const TableView = ({ idTable, dataSource, height = 400, columns, isMutil = false, isLoading, selectEnable, formatSetting, querySetting, setColumns, pagingSetting, searchSetting, columnsAggregate, toolbarSetting, selectedItem, setSelectedItem, handleSelect, saveSettingColumn, resetDefaultColumns, settingColumns, headerComponent }) => {
+const TableView = ({ idTable, dataSource, height = 400, columns, isMutil = false, isLoading, selectEnable, formatSetting, querySetting, pagingSetting, searchSetting, columnsAggregate, toolbarSetting, selectedItem, setSelectedItem, handleSelect, saveSettingColumn, resetDefaultColumns, settingColumns, headerComponent, groupSetting, isMulti }) => {
     const { t } = reactI18next.useTranslation();
     const gridRef = React$5.useRef(null);
     const [openPopupSetupColumn, setOpenPopupSetupColumn] = React$5.useState(false);
@@ -68788,6 +68718,21 @@ const TableView = ({ idTable, dataSource, height = 400, columns, isMutil = false
     const [filterBy, setFilterBy] = React$5.useState([]);
     const [searchTerm, setSearchTerm] = React$5.useState('');
     const fieldKey = columns.find((item) => item.isPrimarykey === true)?.field ?? 'id';
+    const [contentColumns, setContentColumns] = React$5.useState([]);
+    const [groupColumns, setGroupColumns] = React$5.useState([]);
+    const [expandsAll, setExpandsAll] = React$5.useState();
+    React$5.useEffect(() => {
+        if (groupSetting?.groupColumns) {
+            setGroupColumns([...groupSetting.groupColumns]);
+        }
+        setExpandsAll(undefined);
+    }, [groupSetting?.groupColumns]);
+    const { levels: headerColumns, flatVisble, objHeaderWidthFixLeft, objHeaderWidthFixRight, objWidthFixLeft, objWidthFixRight, lastObjWidthFixLeft, fisrtObjWidthFixRight } = React$5.useMemo(() => {
+        const rs = calculateTableStructure(columns, settingColumns?.value);
+        setContentColumns(rs.flat);
+        return rs;
+    }, [columns, settingColumns]);
+    const optionGroupColumns = React$5.useMemo(() => contentColumns.filter((x) => !groupColumns.includes(x.field)).map((x) => ({ ...x, headerDisplay: t(x.headerDisplay ?? x.headerText) })), [groupColumns, contentColumns]);
     // Tính toán dữ liệu hiển thị dựa trên các điều kiện lọc, tìm kiếm và sắp xếp
     const viewData = React$5.useMemo(() => {
         if (!dataSource || dataSource.length === 0) {
@@ -68856,7 +68801,6 @@ const TableView = ({ idTable, dataSource, height = 400, columns, isMutil = false
         }
         return datas;
     }, [searchTerm, filterBy, orderBy, dataSource]);
-    const { levels: headerColumns, flat: contentColumns, flatVisble, objWidthFixLeft, objWidthFixRight, lastObjWidthFixLeft, fisrtObjWidthFixRight } = React$5.useMemo(() => calculateTableStructure(columns), [columns]);
     const handleKeyPress = (e) => {
         if (e.code === 'Enter' || e.code === 'NumpadEnter') {
             if (searchSetting?.setSearchTerm) {
@@ -68872,7 +68816,56 @@ const TableView = ({ idTable, dataSource, height = 400, columns, isMutil = false
     const searchTemplate = () => {
         return (jsxRuntime.jsx("div", { className: "me-50 r-search", children: jsxRuntime.jsx(ReactInput, { style: { width: '230px' }, value: searchSetting?.searchTerm !== undefined ? searchSetting?.searchTerm : searchTerm, setSearchTerm: searchSetting?.setSearchTerm ? searchSetting?.setSearchTerm : setSearchTerm, placeholder: t('Search'), onKeyPress: handleKeyPress }) }));
     };
+    const groupbtnTemplate = () => {
+        return (jsxRuntime.jsxs(UncontrolledDropdown, { children: [jsxRuntime.jsx(DropdownToggle$1, { tag: "div", id: "group-dropdown-toggle", style: { position: 'relative' }, onClick: (e) => e.preventDefault(), children: jsxRuntime.jsx(GroupIcon, { color: "#7F7F7F", size: 24 }) }), jsxRuntime.jsxs(DropdownMenu$1, { className: "formula-dropdown icon-dropdown p-1", children: [jsxRuntime.jsx("div", { className: "mb-1", style: { fontSize: 16, fontWeight: 500 }, children: "Nh\u00F3m d\u1EEF li\u1EC7u theo c\u1ED9t" }), jsxRuntime.jsxs("div", { className: 'form-group', children: [jsxRuntime.jsx(Label$1, { id: `label-group-1`, style: { fontWeight: 500, fontSize: 13 }, children: "M\u1EE9c 1" }), jsxRuntime.jsx("div", { className: "form-input", children: jsxRuntime.jsx(SelectTable, { options: optionGroupColumns, fieldLabel: 'headerDisplay', fieldValue: 'field', value: groupColumns[0] ? { headerDisplay: t(contentColumns.find((x) => x.field === groupColumns[0])?.headerDisplay ?? contentColumns.find((x) => x.field === groupColumns[0])?.headerText) } : undefined, onChange: (val) => {
+                                            if (val) {
+                                                groupColumns[0] = val.field;
+                                            }
+                                            else {
+                                                groupColumns.pop();
+                                            }
+                                            setGroupColumns([...groupColumns]);
+                                        }, isClearable: groupColumns?.length === 1 }) })] }), jsxRuntime.jsxs("div", { className: 'form-group', children: [jsxRuntime.jsx(Label$1, { id: `label-group-2`, style: { fontWeight: 500, fontSize: 13 }, children: "M\u1EE9c 2" }), jsxRuntime.jsx("div", { className: "form-input", children: jsxRuntime.jsx(SelectTable, { options: optionGroupColumns, fieldLabel: 'headerDisplay', fieldValue: 'field', value: groupColumns[1] ? { headerDisplay: t(contentColumns.find((x) => x.field === groupColumns[1])?.headerDisplay ?? contentColumns.find((x) => x.field === groupColumns[1])?.headerText) } : undefined, onChange: (val) => {
+                                            if (val) {
+                                                groupColumns[1] = val.field;
+                                            }
+                                            else {
+                                                groupColumns.pop();
+                                            }
+                                            setGroupColumns([...groupColumns]);
+                                        }, isClearable: groupColumns?.length === 2 }) })] }), jsxRuntime.jsxs("div", { className: 'form-group', children: [jsxRuntime.jsx(Label$1, { id: `label-group-3`, style: { fontWeight: 500, fontSize: 13 }, children: "M\u1EE9c 3" }), jsxRuntime.jsx("div", { className: "form-input", children: jsxRuntime.jsx(SelectTable, { options: optionGroupColumns, fieldLabel: 'headerDisplay', fieldValue: 'field', value: groupColumns[2] ? { headerDisplay: t(contentColumns.find((x) => x.field === groupColumns[2])?.headerDisplay ?? contentColumns.find((x) => x.field === groupColumns[2])?.headerText) } : undefined, onChange: (val) => {
+                                            if (groupSetting) {
+                                                if (val) {
+                                                    groupColumns[2] = val.field;
+                                                }
+                                                else {
+                                                    groupColumns.pop();
+                                                }
+                                                setGroupColumns([...groupColumns]);
+                                            }
+                                        }, isClearable: groupColumns?.length === 3 }) })] }), jsxRuntime.jsxs("div", { className: "border-top d-flex justify-content-end mt-1", children: [jsxRuntime.jsx(Button$1$1, { color: "primary", className: "mt-1 me-50 rounded", size: "sm", onClick: () => {
+                                        groupSetting?.onGroup({ columnGrouped: groupColumns.filter((x) => x) });
+                                        document.getElementById('group-dropdown-toggle')?.click();
+                                    }, children: `${t('Apply')}` }), jsxRuntime.jsx(Button$1$1, { color: "secondary", outline: true, className: "mt-1 rounded", size: "sm", onClick: () => {
+                                        groupSetting?.onGroup({ columnGrouped: [] });
+                                        document.getElementById('group-dropdown-toggle')?.click();
+                                    }, children: `${t('Delete')}` })] })] })] }));
+    };
+    const chooseColumnsTemplate = () => {
+        return jsxRuntime.jsx(SvgSettings, { className: "me-1 r-toolbar-icon", fontSize: 20, color: "#7F7F7F", onClick: () => setOpenPopupSetupColumn(true) });
+    };
+    const expandTemplate = () => {
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!expandsAll && (jsxRuntime.jsx(ExpandAllIcon, { onClick: () => {
+                        setExpandsAll(true);
+                    }, color: "#7F7F7F", size: 24 })), expandsAll && jsxRuntime.jsx(UnExpandAllIcon, { onClick: () => setExpandsAll(false), color: "#7F7F7F", size: 24 })] }));
+    };
     const defaultToolbarOption = searchSetting?.searchEnable ? [{ template: searchTemplate, align: 'left' }] : [];
+    if (groupSetting) {
+        defaultToolbarOption.push({ template: groupbtnTemplate, align: 'left' });
+    }
+    if (groupSetting?.groupColumns && groupSetting?.groupColumns.length > 0) {
+        defaultToolbarOption.push({ template: expandTemplate, align: 'left' });
+    }
     let toolbarTopOption = [];
     if (toolbarSetting?.toolbarOptions) {
         toolbarTopOption = [...defaultToolbarOption, ...toolbarSetting?.toolbarOptions];
@@ -68880,6 +68873,9 @@ const TableView = ({ idTable, dataSource, height = 400, columns, isMutil = false
     else {
         toolbarTopOption = [...defaultToolbarOption];
     }
+    if (settingColumns) {
+        toolbarTopOption.push({ template: chooseColumnsTemplate, align: 'right' });
+    }
     const onChangePage = (args) => {
         if (pagingSetting?.setCurrentPage) {
             if (args.currentPage === args.oldPage) {
@@ -68945,20 +68941,68 @@ const TableView = ({ idTable, dataSource, height = 400, columns, isMutil = false
             }
         }
     }, [selectedItem]);
-    return (jsxRuntime.jsxs("div", { className: "r-table-edit r-virtualized-table", children: [jsxRuntime.jsxs("div", { className: "r-grid", children: [toolbarSetting?.showTopToolbar && jsxRuntime.jsx(RenderToolbarTop, { toolbarTopOption: toolbarTopOption, setOpenPopupSetupColumn: setOpenPopupSetupColumn }), headerComponent && headerComponent(), jsxRuntime.jsxs("div", { ref: gridRef, className: "r-gridtable", style: { height: `${height ? `${height}px` : 'auto'}` }, children: [jsxRuntime.jsxs("table", { role: "presentation", style: { width: '100%' }, children: [jsxRuntime.jsx(RenderColGroup, { contentColumns: flatVisble }), jsxRuntime.jsx("thead", { className: "r-gridheader", role: "rowgroup", children: headerColumns.map((rowColumn, indexParent) => (jsxRuntime.jsx("tr", { className: "r-row", role: "row", children: rowColumn.map((column, indexColumn) => (jsxRuntime.jsx(HeaderTableCol, { idTable: idTable, col: column, dataSource: dataSource, indexCol: indexColumn, indexParent: indexParent, isMulti: isMutil ?? false, selectEnable: selectEnable ?? false, selectedRows: selectedRows, setSelectedRows: setSelectedRows, columns: contentColumns, setColumns: setColumns, objWidthFixLeft: objWidthFixLeft, objWidthFixRight: objWidthFixRight, fisrtObjWidthFixRight: fisrtObjWidthFixRight, lastObjWidthFixLeft: lastObjWidthFixLeft, orderBy: orderBy, allowFiltering: querySetting?.allowFiltering, allowSorting: querySetting?.allowSorting, filterBy: filterBy, optionsFilter: querySetting?.optionsFilter, changeFilter: (val) => {
-                                                    setFilterBy([...val]);
-                                                    if (querySetting?.changeFilter) {
-                                                        querySetting.changeFilter(val);
-                                                    }
-                                                }, changeOrder: (val) => {
-                                                    setOrderBy([...val]);
-                                                    if (querySetting?.changeOrder) {
-                                                        querySetting.changeOrder(val);
-                                                    }
-                                                }, container: gridRef, totalCount: dataSource.length }, `header-${indexParent}-${indexColumn}`))) }, `header-${-indexParent}`))) }), jsxRuntime.jsx("tbody", { className: "r-gridcontent", role: "rowgroup", children: viewData.map((row, indexRow) => {
-                                            const isSelected = selectedRows?.some((x) => x[fieldKey] === row[fieldKey]);
-                                            return (jsxRuntime.jsx("tr", { "aria-rowindex": indexRow + 1, role: "row", className: "r-row", children: contentColumns.map((column, indexCol) => (jsxRuntime.jsx(RenderContentCol, { idTable: idTable, col: column, fieldKey: fieldKey, objWidthFixLeft: objWidthFixLeft, objWidthFixRight: objWidthFixRight, fisrtObjWidthFixRight: fisrtObjWidthFixRight, lastObjWidthFixLeft: lastObjWidthFixLeft, isMulti: isMutil ?? false, selectEnable: selectEnable ?? false, selectedRows: selectedRows, setSelectedRows: setSelectedRows, formatSetting: formatSetting, indexCol: indexCol, indexRow: indexRow, isSelected: isSelected, row: row }, indexCol))) }, `row-content-${indexRow}`));
-                                        }) }), viewData.length > 0 && (jsxRuntime.jsx("tfoot", { className: "r-gridfoot", children: (columnsAggregate?.length ?? 0) > 0 ? (jsxRuntime.jsx("tr", { className: "r-row", children: contentColumns.map((col, indexCol) => {
+    const RenderContent = ({ datas, level = 0 }) => {
+        const firstColSpan = contentColumns.findIndex((x) => x.visible !== false && x.type === 'numeric');
+        return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: datas.map((row, indexRow) => {
+                const [expand, setExpand] = React$5.useState(row.expand ?? false);
+                React$5.useEffect(() => {
+                    if (expandsAll !== undefined) {
+                        setExpand(expandsAll);
+                        row.expand = expandsAll;
+                    }
+                }, [expandsAll]);
+                if (row.children?.length) {
+                    const col = contentColumns.find((x) => x.field === row.field);
+                    let value = row[col.field];
+                    if (col.type === 'numeric') {
+                        value = formartNumberic(row[col.field], formatSetting?.decimalSeparator ?? ',', formatSetting?.thousandSeparator ?? '.', col.numericSettings?.fraction, true, false) ?? 0;
+                    }
+                    else if (col.type === 'date') {
+                        value = value ? formatDateTime(value, formatSetting?.dateFormat) : '';
+                    }
+                    else if (col.type === 'datetime') {
+                        value = value ? formatDateTime(value, formatSetting?.dateFormat ?? 'DD/MM/yyyy HH:mm') : '';
+                    }
+                    if (col.template) {
+                        value = col.template(row, indexRow) ?? '';
+                    }
+                    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("tr", { "aria-rowindex": indexRow + 1, role: "row", className: "r-row", children: [jsxRuntime.jsx("td", { className: "r-rowcell r-cell-group", colSpan: firstColSpan, children: jsxRuntime.jsxs("div", { className: "r-rowcell-div", children: [jsxRuntime.jsx(SvgChevronRight, { style: { marginLeft: level * 20, transform: expand ? 'rotate(90deg)' : 'rotate(0deg)' }, fontSize: 15, onClick: () => {
+                                                        setExpand(!expand);
+                                                        setExpandsAll(undefined);
+                                                        row.expand = !expand;
+                                                    } }), t(col.headerDisplay ?? col.headerText), ": ", value, " (", row.children.length, ")"] }) }), contentColumns.map((colSum, indexCol) => {
+                                        if (indexCol < firstColSpan) {
+                                            return;
+                                        }
+                                        let sumValue = row[colSum.field];
+                                        const haveSum = row[colSum.field] !== undefined && row[colSum.field] !== null;
+                                        if (!haveSum && colSum.haveSum === true && colSum.type === 'numeric') {
+                                            sumValue = row.children.reduce(function (accumulator, currentValue) {
+                                                return Number(accumulator ?? 0) + Number(currentValue[colSum.field] ?? 0);
+                                            }, 0);
+                                        }
+                                        return (colSum.visible !== false && (jsxRuntime.jsx("td", { className: "r-rowcell r-cell-sum-group", children: jsxRuntime.jsxs("div", { className: "r-rowcell-div", style: { justifyContent: colSum.textAlign ? colSum.textAlign : 'left' }, children: [(haveSum || (colSum.haveSum === true && colSum.type === 'numeric')) && colSum.type === 'numeric' && Number(sumValue) >= 0 && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: formartNumberic(sumValue, formatSetting?.decimalSeparator ?? ',', formatSetting?.thousandSeparator ?? '.', colSum.numericSettings?.fraction, true, false) })), (haveSum || (colSum.haveSum === true && colSum.type === 'numeric')) && colSum.type === 'numeric' && Number(sumValue) < 0 && (jsxRuntime.jsxs("div", { style: { color: formatSetting?.colorNegative ?? 'red' }, children: [' ', `${formatSetting?.prefixNegative ?? '-'}${formartNumberic(sumValue, formatSetting?.decimalSeparator ?? ',', formatSetting?.thousandSeparator ?? '.', col.numericSettings?.fraction, true, false)}${formatSetting?.suffixNegative ?? ''}`] }))] }) }, `group-sum-cell-${level}-${indexCol}`)));
+                                    })] }), expand && jsxRuntime.jsx(RenderContent, { datas: row.children, level: level + 1 })] }));
+                }
+                else {
+                    const isSelected = selectedRows?.some((x) => x[fieldKey] === row[fieldKey]);
+                    return (jsxRuntime.jsx("tr", { "aria-rowindex": indexRow + 1, role: "row", className: "r-row", children: contentColumns.map((column, indexCol) => (jsxRuntime.jsx(RenderContentCol, { idTable: idTable, col: column, fieldKey: fieldKey, objWidthFixLeft: objWidthFixLeft, objWidthFixRight: objWidthFixRight, fisrtObjWidthFixRight: fisrtObjWidthFixRight, lastObjWidthFixLeft: lastObjWidthFixLeft, isMulti: isMutil ?? false, selectEnable: selectEnable ?? false, selectedRows: selectedRows, setSelectedRows: setSelectedRows, formatSetting: formatSetting, indexCol: indexCol, indexRow: indexRow, isSelected: isSelected, row: row }, indexCol))) }, `row-content-${indexRow}`));
+                }
+            }) }));
+    };
+    return (jsxRuntime.jsxs("div", { className: "r-table-edit r-virtualized-table", children: [jsxRuntime.jsxs("div", { className: "r-grid", children: [toolbarSetting?.showTopToolbar && jsxRuntime.jsx(RenderToolbarTop, { toolbarTopOption: toolbarTopOption }), headerComponent && headerComponent(), jsxRuntime.jsxs("div", { ref: gridRef, className: "r-gridtable", style: { height: `${height ? `${height}px` : 'auto'}` }, children: [jsxRuntime.jsxs("table", { role: "presentation", style: { width: '100%' }, children: [jsxRuntime.jsx(RenderColGroup, { contentColumns: flatVisble }), jsxRuntime.jsx("thead", { className: "r-gridheader", role: "rowgroup", children: headerColumns.map((rowColumn, indexParent) => {
+                                            return (jsxRuntime.jsx("tr", { className: "r-row", role: "row", children: rowColumn.map((col, index) => (jsxRuntime.jsx(HeaderTableCol, { col: col, idTable: idTable ?? '', dataSource: dataSource, indexCol: index, indexParent: indexParent, isMulti: isMulti ?? false, objHeaderWidthFixLeft: objHeaderWidthFixLeft, objHeaderWidthFixRight: objHeaderWidthFixRight, selectEnable: selectEnable ?? false, selectedRows: selectedRows, setSelectedRows: setSelectedRows, container: gridRef, filterBy: filterBy, orderBy: orderBy, optionsFilter: querySetting.optionsFilter, allowFiltering: querySetting.allowFiltering, allowSorting: querySetting.allowSorting, formatSetting: formatSetting, changeFilter: (val) => {
+                                                        setFilterBy([...val]);
+                                                        if (querySetting?.changeFilter) {
+                                                            querySetting.changeFilter(val);
+                                                        }
+                                                    }, changeOrder: (val) => {
+                                                        setOrderBy([...val]);
+                                                        if (querySetting?.changeOrder) {
+                                                            querySetting.changeOrder(val);
+                                                        }
+                                                    }, columns: contentColumns, setContentColumns: setContentColumns, fisrtObjWidthFixRight: fisrtObjWidthFixRight, lastObjWidthFixLeft: lastObjWidthFixLeft, totalCount: dataSource?.length ?? 0 }, `header-${indexParent}-${index}`))) }, `header-${-indexParent}`));
+                                        }) }), jsxRuntime.jsx("tbody", { className: "r-gridcontent", role: "rowgroup", children: jsxRuntime.jsx(RenderContent, { datas: viewData }) }), jsxRuntime.jsx("tfoot", { className: "r-gridfoot", children: (columnsAggregate?.length ?? 0) > 0 && (jsxRuntime.jsx("tr", { className: "r-row", children: contentColumns.map((col, indexCol) => {
                                                 const item = columnsAggregate?.find((x) => x.field === col.field);
                                                 let sumValue = item?.value;
                                                 if (!item && col.haveSum === true && col.type === 'numeric') {
@@ -68971,9 +69015,10 @@ const TableView = ({ idTable, dataSource, height = 400, columns, isMutil = false
                                                         right: col.fixedType === 'right' ? objWidthFixRight[indexCol] : undefined,
                                                         textAlign: col.textAlign ? col.textAlign : 'left'
                                                     }, children: jsxRuntime.jsxs("div", { className: "r-footer-div", children: [(item || (col.haveSum === true && col.type === 'numeric')) && col.type === 'numeric' && Number(sumValue) >= 0 && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: formartNumberic(sumValue, formatSetting?.decimalSeparator ?? ',', formatSetting?.thousandSeparator ?? '.', col.numericSettings?.fraction, true, false) })), (item || (col.haveSum === true && col.type === 'numeric')) && col.type === 'numeric' && Number(sumValue) < 0 && (jsxRuntime.jsxs("div", { style: { color: formatSetting?.colorNegative ?? 'red' }, children: [' ', `${formatSetting?.prefixNegative ?? '-'}${formartNumberic(sumValue, formatSetting?.decimalSeparator ?? ',', formatSetting?.thousandSeparator ?? '.', col.numericSettings?.fraction, true, false)}${formatSetting?.suffixNegative ?? ''}`] }))] }) }, `summarycell-${indexCol}`)));
-                                            }) })) : (jsxRuntime.jsx(jsxRuntime.Fragment, {})) }))] }), (viewData.length ?? 0) === 0 && !isLoading && (jsxRuntime.jsxs("div", { className: "r-no-data", children: [jsxRuntime.jsx("svg", { width: "64", height: "41", viewBox: "0 0 64 41", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsxs("g", { transform: "translate(0 1)", fill: "none", fillRule: "evenodd", children: [jsxRuntime.jsx("ellipse", { fill: "#f5f5f5", cx: "32", cy: "33", rx: "32", ry: "7" }), jsxRuntime.jsxs("g", { fillRule: "nonzero", stroke: "#d9d9d9", children: [jsxRuntime.jsx("path", { d: "M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z" }), jsxRuntime.jsx("path", { d: "M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z", fill: "#fafafa" })] })] }) }), t('No data available.')] })), isLoading && (jsxRuntime.jsx("div", { className: "r-loading-overlay", children: jsxRuntime.jsxs("div", { className: "r-loading", children: [jsxRuntime.jsx(Spinner$1, { className: "me-1" }), t('Loading...')] }) }))] })] }), pagingSetting?.allowPaging && (jsxRuntime.jsx(PagingComponent, { gridRef: gridRef, onChangePage: onChangePage, pageSize: pagingSetting?.pageSize ?? 0, currentPage: pagingSetting?.currentPage ?? 0, pageOptions: pagingSetting?.pageOptions ?? [20, 30, 50, 100], totalItem: pagingSetting?.totalItem ?? 0, onChangePageSize: onChangePageSize })), jsxRuntime.jsx(SettingColumn, { gridRef: gridRef, handleSidebar: () => {
+                                            }) })) })] }), (viewData.length ?? 0) === 0 && !isLoading && (jsxRuntime.jsxs("div", { className: "r-no-data", children: [jsxRuntime.jsx("svg", { width: "64", height: "41", viewBox: "0 0 64 41", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsxs("g", { transform: "translate(0 1)", fill: "none", fillRule: "evenodd", children: [jsxRuntime.jsx("ellipse", { fill: "#f5f5f5", cx: "32", cy: "33", rx: "32", ry: "7" }), jsxRuntime.jsxs("g", { fillRule: "nonzero", stroke: "#d9d9d9", children: [jsxRuntime.jsx("path", { d: "M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z" }), jsxRuntime.jsx("path", { d: "M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z", fill: "#fafafa" })] })] }) }), t('No data available.')] })), isLoading && (jsxRuntime.jsx("div", { className: "r-loading-overlay", children: jsxRuntime.jsxs("div", { className: "r-loading", children: [jsxRuntime.jsx(Spinner$1, { className: "me-1" }), t('Loading...')] }) }))] })] }), pagingSetting?.allowPaging && (jsxRuntime.jsx(PagingComponent, { gridRef: gridRef, onChangePage: onChangePage, pageSize: pagingSetting?.pageSize ?? 0, currentPage: pagingSetting?.currentPage ?? 0, pageOptions: pagingSetting?.pageOptions ?? [20, 30, 50, 100], totalItem: pagingSetting?.totalItem ?? 0, onChangePageSize: onChangePageSize })), jsxRuntime.jsx(SettingColumn, { gridRef: gridRef, handleSidebar: () => {
                     setOpenPopupSetupColumn(!openPopupSetupColumn);
                 }, settingColumns: settingColumns, openSidebar: openPopupSetupColumn, column: [...contentColumns], resetDefaultColumns: resetDefaultColumns, setColumn: (newColumns) => {
+                    console.log(newColumns);
                     if (saveSettingColumn) {
                         saveSettingColumn(newColumns.map((x, index) => ({ field: x.field, headerText: x.headerDisplay, visible: x.visible, fixedType: x.fixedType, width: x.width, sortOrder: index + 1 })));
                     }