aq-fe-framework 0.1.452 → 0.1.454

package/dist/{chunk-WUXEUR7R.mjs → chunk-562G3GRP.mjs}

@@ -4,11 +4,6 @@ import {
 import {
   utils_pdf_download
 } from "./chunk-5U2JSHSJ.mjs";
-import {
-  MyDataTable,
-  MyFlexColumn,
-  MyFlexRow
-} from "./chunk-RZBHPPQT.mjs";
 import {
   const_object_colors
 } from "./chunk-OMJJAHOC.mjs";
@@ -184,19 +179,27 @@ function MyTextInput(_a) {
   );
 }
 
+// src/components/Layouts/FlexColumn/MyFlexColumn.tsx
+import { Flex } from "@mantine/core";
+import { jsx as jsx6 } from "react/jsx-runtime";
+function MyFlexColumn(_a) {
+  var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
+  return /* @__PURE__ */ jsx6(Flex, __spreadProps(__spreadValues({ direction: "column", gap: "md" }, rest), { children }));
+}
+
 // src/components/ActionIcons/ActionIconCheck/MyActionIconCheck.tsx
 import { ActionIcon as ActionIcon2, Button, Checkbox, Modal, Switch, Text as Text2, Tooltip } from "@mantine/core";
 import { useDisclosure } from "@mantine/hooks";
 import { IconChecklist } from "@tabler/icons-react";
 import { useState } from "react";
-import { Fragment, jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx7, jsxs as jsxs2 } from "react/jsx-runtime";
 function MyActionIconCheck(_a) {
   var _b = _a, { modalSize = "50%", comment = "" } = _b, rest = __objRest(_b, ["modalSize", "comment"]);
   const disc = useDisclosure(false);
   const fullScreen = useState(false);
   const hSize = useState("50vh");
   return /* @__PURE__ */ jsxs2(Fragment, { children: [
-    /* @__PURE__ */ jsx6(Tooltip, { label: "Xem t\xE0i li\u1EC7u tr\u1EF1c ti\u1EBFp", children: /* @__PURE__ */ jsx6(ActionIcon2, __spreadProps(__spreadValues({ color: "cyan", onClick: disc[1].open }, rest), { children: /* @__PURE__ */ jsx6(IconChecklist, { size: 24, color: "blue" }) })) }),
+    /* @__PURE__ */ jsx7(Tooltip, { label: "Xem t\xE0i li\u1EC7u tr\u1EF1c ti\u1EBFp", children: /* @__PURE__ */ jsx7(ActionIcon2, __spreadProps(__spreadValues({ color: "cyan", onClick: disc[1].open }, rest), { children: /* @__PURE__ */ jsx7(IconChecklist, { size: 24, color: "blue" }) })) }),
     /* @__PURE__ */ jsxs2(
       Modal,
       {
@@ -204,9 +207,9 @@ function MyActionIconCheck(_a) {
         opened: disc[0],
         onClose: disc[1].close,
         size: modalSize,
-        title: /* @__PURE__ */ jsx6(Text2, { children: "Ki\u1EC3m tra h\u1ED3 s\u01A1 \u0111\xE3 \u0111\u0103ng k\xFD" }),
+        title: /* @__PURE__ */ jsx7(Text2, { children: "Ki\u1EC3m tra h\u1ED3 s\u01A1 \u0111\xE3 \u0111\u0103ng k\xFD" }),
         children: [
-          /* @__PURE__ */ jsx6(
+          /* @__PURE__ */ jsx7(
             Switch,
             {
               defaultChecked: true,
@@ -214,9 +217,9 @@ function MyActionIconCheck(_a) {
             }
           ),
           /* @__PURE__ */ jsxs2(MyFlexColumn, { children: [
-            /* @__PURE__ */ jsx6(MyTextInput, { label: "Nh\u1EADn x\xE9t" }),
-            /* @__PURE__ */ jsx6(Checkbox, { label: "G\u1EEDi mail th\xF4ng b\xE1o" }),
-            /* @__PURE__ */ jsx6(Button, { children: "C\u1EADp nh\u1EADp" })
+            /* @__PURE__ */ jsx7(MyTextInput, { label: "Nh\u1EADn x\xE9t" }),
+            /* @__PURE__ */ jsx7(Checkbox, { label: "G\u1EEDi mail th\xF4ng b\xE1o" }),
+            /* @__PURE__ */ jsx7(Button, { children: "C\u1EADp nh\u1EADp" })
           ] })
         ]
       }
@@ -227,41 +230,41 @@ function MyActionIconCheck(_a) {
 // src/components/Button/Button/MyButton.tsx
 import { Button as Button2 } from "@mantine/core";
 import { IconDeviceFloppy as IconDeviceFloppy2, IconEdit as IconEdit2, IconFileExport, IconFileImport, IconPlus as IconPlus2, IconPrinter, IconTrash as IconTrash2, IconX } from "@tabler/icons-react";
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx8 } from "react/jsx-runtime";
 function MyButton(_a) {
   var _b = _a, { children, crudType = "default" } = _b, rest = __objRest(_b, ["children", "crudType"]);
   if (crudType == "default") {
-    return /* @__PURE__ */ jsx7(Button2, __spreadProps(__spreadValues({ color: "indigo" }, rest), { children }));
+    return /* @__PURE__ */ jsx8(Button2, __spreadProps(__spreadValues({ color: "indigo" }, rest), { children }));
   }
   if (crudType == "create") {
-    return /* @__PURE__ */ jsx7(Button2, __spreadProps(__spreadValues({ color: "indigo", type: "submit", leftSection: /* @__PURE__ */ jsx7(IconPlus2, {}) }, rest), { children: children ? children : "L\u01B0u" }));
+    return /* @__PURE__ */ jsx8(Button2, __spreadProps(__spreadValues({ color: "indigo", type: "submit", leftSection: /* @__PURE__ */ jsx8(IconPlus2, {}) }, rest), { children: children ? children : "L\u01B0u" }));
   }
   if (crudType == "createMultiple") {
-    return /* @__PURE__ */ jsx7(Button2, __spreadProps(__spreadValues({ color: "green", type: "submit", leftSection: /* @__PURE__ */ jsx7(IconPlus2, {}) }, rest), { children: children ? children : "Th\xEAm danh s\xE1ch" }));
+    return /* @__PURE__ */ jsx8(Button2, __spreadProps(__spreadValues({ color: "green", type: "submit", leftSection: /* @__PURE__ */ jsx8(IconPlus2, {}) }, rest), { children: children ? children : "Th\xEAm danh s\xE1ch" }));
   }
   if (crudType == "delete") {
-    return /* @__PURE__ */ jsx7(Button2, __spreadProps(__spreadValues({ color: "red", leftSection: /* @__PURE__ */ jsx7(IconTrash2, {}) }, rest), { children: children ? children : "X\xE1c nh\u1EADn x\xF3a" }));
+    return /* @__PURE__ */ jsx8(Button2, __spreadProps(__spreadValues({ color: "red", leftSection: /* @__PURE__ */ jsx8(IconTrash2, {}) }, rest), { children: children ? children : "X\xE1c nh\u1EADn x\xF3a" }));
   }
   if (crudType == "update") {
-    return /* @__PURE__ */ jsx7(Button2, __spreadProps(__spreadValues({ color: "yellow", type: "submit", leftSection: /* @__PURE__ */ jsx7(IconEdit2, {}) }, rest), { children: children ? children : "Ch\u1EC9nh s\u1EEDa" }));
+    return /* @__PURE__ */ jsx8(Button2, __spreadProps(__spreadValues({ color: "yellow", type: "submit", leftSection: /* @__PURE__ */ jsx8(IconEdit2, {}) }, rest), { children: children ? children : "Ch\u1EC9nh s\u1EEDa" }));
   }
   if (crudType == "save") {
-    return /* @__PURE__ */ jsx7(Button2, __spreadProps(__spreadValues({ color: "blue", type: "submit", leftSection: /* @__PURE__ */ jsx7(IconDeviceFloppy2, {}) }, rest), { children: children ? children : "L\u01B0u" }));
+    return /* @__PURE__ */ jsx8(Button2, __spreadProps(__spreadValues({ color: "blue", type: "submit", leftSection: /* @__PURE__ */ jsx8(IconDeviceFloppy2, {}) }, rest), { children: children ? children : "L\u01B0u" }));
   }
   if (crudType == "import") {
-    return /* @__PURE__ */ jsx7(Button2, __spreadProps(__spreadValues({ color: "green.8", leftSection: /* @__PURE__ */ jsx7(IconFileImport, {}) }, rest), { children: children ? children : "Import" }));
+    return /* @__PURE__ */ jsx8(Button2, __spreadProps(__spreadValues({ color: "green.8", leftSection: /* @__PURE__ */ jsx8(IconFileImport, {}) }, rest), { children: children ? children : "Import" }));
   }
   if (crudType == "print") {
-    return /* @__PURE__ */ jsx7(Button2, __spreadProps(__spreadValues({ color: "orange.7", leftSection: /* @__PURE__ */ jsx7(IconPrinter, {}) }, rest), { children: children ? children : "In" }));
+    return /* @__PURE__ */ jsx8(Button2, __spreadProps(__spreadValues({ color: "orange.7", leftSection: /* @__PURE__ */ jsx8(IconPrinter, {}) }, rest), { children: children ? children : "In" }));
   }
   if (crudType == "export") {
-    return /* @__PURE__ */ jsx7(Button2, __spreadProps(__spreadValues({ color: "green.8", leftSection: /* @__PURE__ */ jsx7(IconFileExport, {}) }, rest), { children: children ? children : "Export" }));
+    return /* @__PURE__ */ jsx8(Button2, __spreadProps(__spreadValues({ color: "green.8", leftSection: /* @__PURE__ */ jsx8(IconFileExport, {}) }, rest), { children: children ? children : "Export" }));
   }
   if (crudType == "cancel") {
-    return /* @__PURE__ */ jsx7(Button2, __spreadProps(__spreadValues({ color: "gray", leftSection: /* @__PURE__ */ jsx7(IconX, {}) }, rest), { children: children ? children : "H\u1EE7y thao t\xE1c" }));
+    return /* @__PURE__ */ jsx8(Button2, __spreadProps(__spreadValues({ color: "gray", leftSection: /* @__PURE__ */ jsx8(IconX, {}) }, rest), { children: children ? children : "H\u1EE7y thao t\xE1c" }));
   }
   if (crudType == "select") {
-    return /* @__PURE__ */ jsx7(Button2, __spreadProps(__spreadValues({}, rest), { children: children ? children : "Ch\u1ECDn" }));
+    return /* @__PURE__ */ jsx8(Button2, __spreadProps(__spreadValues({}, rest), { children: children ? children : "Ch\u1ECDn" }));
   }
 }
 
@@ -274,7 +277,7 @@ import { useState as useState2 } from "react";
 // src/components/ActionIcons/ActionIconModal/MyActionIconModal.tsx
 import { ActionIcon as ActionIcon3, Modal as Modal2 } from "@mantine/core";
 import { IconEdit as IconEdit3, IconPlus as IconPlus3, IconTrash as IconTrash3 } from "@tabler/icons-react";
-import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx9, jsxs as jsxs3 } from "react/jsx-runtime";
 function MyActionIconModal(_a) {
   var _b = _a, {
     fullScreen = false,
@@ -295,8 +298,8 @@ function MyActionIconModal(_a) {
   ]);
   if (!crudType) {
     return /* @__PURE__ */ jsxs3(Fragment2, { children: [
-      /* @__PURE__ */ jsx8(ActionIcon3, __spreadProps(__spreadValues({ onClick: disclosure == null ? void 0 : disclosure[1].open, color: "indigo" }, rest), { children: icon })),
-      /* @__PURE__ */ jsx8(
+      /* @__PURE__ */ jsx9(ActionIcon3, __spreadProps(__spreadValues({ onClick: disclosure == null ? void 0 : disclosure[1].open, color: "indigo" }, rest), { children: icon })),
+      /* @__PURE__ */ jsx9(
         Modal2,
         {
           fullScreen,
@@ -304,15 +307,15 @@ function MyActionIconModal(_a) {
           title,
           opened: disclosure == null ? void 0 : disclosure[0],
           onClose: disclosure[1].close,
-          children: /* @__PURE__ */ jsx8(MyFlexColumn, { children })
+          children: /* @__PURE__ */ jsx9(MyFlexColumn, { children })
         }
       )
     ] });
   }
   if (crudType == "create") {
     return /* @__PURE__ */ jsxs3(Fragment2, { children: [
-      /* @__PURE__ */ jsx8(ActionIcon3, __spreadProps(__spreadValues({ onClick: disclosure == null ? void 0 : disclosure[1].open }, rest), { children: icon ? icon : /* @__PURE__ */ jsx8(IconPlus3, {}) })),
-      /* @__PURE__ */ jsx8(
+      /* @__PURE__ */ jsx9(ActionIcon3, __spreadProps(__spreadValues({ onClick: disclosure == null ? void 0 : disclosure[1].open }, rest), { children: icon ? icon : /* @__PURE__ */ jsx9(IconPlus3, {}) })),
+      /* @__PURE__ */ jsx9(
         Modal2,
         {
           fullScreen,
@@ -320,15 +323,15 @@ function MyActionIconModal(_a) {
           title: title ? title : "T\u1EA1o d\u1EEF li\u1EC7u m\u1EDBi",
           opened: disclosure == null ? void 0 : disclosure[0],
           onClose: disclosure[1].close,
-          children: /* @__PURE__ */ jsx8(MyFlexColumn, { children })
+          children: /* @__PURE__ */ jsx9(MyFlexColumn, { children })
         }
       )
     ] });
   }
   if (crudType == "update") {
     return /* @__PURE__ */ jsxs3(Fragment2, { children: [
-      /* @__PURE__ */ jsx8(ActionIcon3, __spreadProps(__spreadValues({ onClick: disclosure == null ? void 0 : disclosure[1].open, color: "yellow" }, rest), { children: icon ? icon : /* @__PURE__ */ jsx8(IconEdit3, {}) })),
-      /* @__PURE__ */ jsx8(
+      /* @__PURE__ */ jsx9(ActionIcon3, __spreadProps(__spreadValues({ onClick: disclosure == null ? void 0 : disclosure[1].open, color: "yellow" }, rest), { children: icon ? icon : /* @__PURE__ */ jsx9(IconEdit3, {}) })),
+      /* @__PURE__ */ jsx9(
         Modal2,
         {
           fullScreen,
@@ -336,15 +339,15 @@ function MyActionIconModal(_a) {
           title: title ? title : "S\u1EEDa d\u1EEF li\u1EC7u",
           opened: disclosure == null ? void 0 : disclosure[0],
           onClose: disclosure[1].close,
-          children: /* @__PURE__ */ jsx8(MyFlexColumn, { children })
+          children: /* @__PURE__ */ jsx9(MyFlexColumn, { children })
         }
       )
     ] });
   }
   if (crudType == "delete") {
     return /* @__PURE__ */ jsxs3(Fragment2, { children: [
-      /* @__PURE__ */ jsx8(ActionIcon3, __spreadProps(__spreadValues({ onClick: disclosure == null ? void 0 : disclosure[1].open, color: "red" }, rest), { children: icon ? icon : /* @__PURE__ */ jsx8(IconTrash3, {}) })),
-      /* @__PURE__ */ jsx8(
+      /* @__PURE__ */ jsx9(ActionIcon3, __spreadProps(__spreadValues({ onClick: disclosure == null ? void 0 : disclosure[1].open, color: "red" }, rest), { children: icon ? icon : /* @__PURE__ */ jsx9(IconTrash3, {}) })),
+      /* @__PURE__ */ jsx9(
         Modal2,
         {
           fullScreen,
@@ -352,15 +355,15 @@ function MyActionIconModal(_a) {
           title: title ? title : "X\xF3a d\u1EEF li\u1EC7u",
           opened: disclosure == null ? void 0 : disclosure[0],
           onClose: disclosure[1].close,
-          children: /* @__PURE__ */ jsx8(MyFlexColumn, { children })
+          children: /* @__PURE__ */ jsx9(MyFlexColumn, { children })
         }
       )
     ] });
   }
   if (crudType == "check") {
     return /* @__PURE__ */ jsxs3(Fragment2, { children: [
-      /* @__PURE__ */ jsx8(ActionIcon3, __spreadProps(__spreadValues({ onClick: disclosure == null ? void 0 : disclosure[1].open, color: "green" }, rest), { children: icon ? icon : /* @__PURE__ */ jsx8(IconTrash3, {}) })),
-      /* @__PURE__ */ jsx8(
+      /* @__PURE__ */ jsx9(ActionIcon3, __spreadProps(__spreadValues({ onClick: disclosure == null ? void 0 : disclosure[1].open, color: "green" }, rest), { children: icon ? icon : /* @__PURE__ */ jsx9(IconTrash3, {}) })),
+      /* @__PURE__ */ jsx9(
         Modal2,
         {
           fullScreen,
@@ -368,7 +371,7 @@ function MyActionIconModal(_a) {
           title: title ? title : "Ki\u1EC3m tra",
           opened: disclosure == null ? void 0 : disclosure[0],
           onClose: disclosure[1].close,
-          children: /* @__PURE__ */ jsx8(MyFlexColumn, { children })
+          children: /* @__PURE__ */ jsx9(MyFlexColumn, { children })
         }
       )
     ] });
@@ -376,7 +379,7 @@ function MyActionIconModal(_a) {
 }
 
 // src/components/ActionIcons/ActionIconCRUD/MyActionIconDelete.tsx
-import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs4 } from "react/jsx-runtime";
 function MyActionIconDelete(_a) {
   var _b = _a, {
     onSubmit,
@@ -452,7 +455,7 @@ function MyActionIconDelete(_a) {
       crudType: "delete"
     }, rest), {
       children: [
-        /* @__PURE__ */ jsx9(
+        /* @__PURE__ */ jsx10(
           Highlight,
           {
             highlight: contextData || [],
@@ -466,7 +469,7 @@ function MyActionIconDelete(_a) {
           }
         ),
         /* @__PURE__ */ jsxs4(Group, { grow: true, children: [
-          /* @__PURE__ */ jsx9(
+          /* @__PURE__ */ jsx10(
             MyButton,
             {
               crudType: "delete",
@@ -474,7 +477,7 @@ function MyActionIconDelete(_a) {
               loading: loadingState[0]
             }
           ),
-          /* @__PURE__ */ jsx9(
+          /* @__PURE__ */ jsx10(
             MyButton,
             {
               crudType: "cancel",
@@ -491,7 +494,7 @@ function MyActionIconDelete(_a) {
 import { useDisclosure as useDisclosure3 } from "@mantine/hooks";
 import { useQueryClient as useQueryClient2 } from "@tanstack/react-query";
 import { useEffect as useEffect2 } from "react";
-import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
 function MyActionIconUpdate(_a) {
   var _b = _a, {
     resetFormWhenclose,
@@ -563,11 +566,11 @@ function MyActionIconUpdate(_a) {
     if (disc[0] == true) return;
     form.reset();
   }, [disc[0]]);
-  return /* @__PURE__ */ jsx10(MyActionIconModal, __spreadProps(__spreadValues({ disclosure: disc, crudType: "update" }, rest), { children: /* @__PURE__ */ jsx10("form", { onSubmit: form.onSubmit((values) => {
+  return /* @__PURE__ */ jsx11(MyActionIconModal, __spreadProps(__spreadValues({ disclosure: disc, crudType: "update" }, rest), { children: /* @__PURE__ */ jsx11("form", { onSubmit: form.onSubmit((values) => {
     mutation.mutate(values);
   }), children: /* @__PURE__ */ jsxs5(MyFlexColumn, { children: [
     children,
-    /* @__PURE__ */ jsx10(
+    /* @__PURE__ */ jsx11(
       MyButton,
       {
         type: "submit",
@@ -580,9 +583,9 @@ function MyActionIconUpdate(_a) {
 // src/components/ActionIcons/ActionIconDownloadPDF/MyActionIconDownloadPDF.tsx
 import { ActionIcon as ActionIcon4, Tooltip as Tooltip2 } from "@mantine/core";
 import { IconDownload } from "@tabler/icons-react";
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 function MyActionIconDownloadPDF({ pdfLink = "https://datafiles.chinhphu.vn/cpp/files/vbpq/2021/07/17-bgd.signed.pdf" }) {
-  return /* @__PURE__ */ jsx11(Tooltip2, { label: "Nh\u1EA5p \u0111\u1EC3 t\u1EA3i xu\u1ED1ng", children: /* @__PURE__ */ jsx11(ActionIcon4, { onClick: async () => await utils_pdf_download(pdfLink), color: "red", children: /* @__PURE__ */ jsx11(IconDownload, {}) }) });
+  return /* @__PURE__ */ jsx12(Tooltip2, { label: "Nh\u1EA5p \u0111\u1EC3 t\u1EA3i xu\u1ED1ng", children: /* @__PURE__ */ jsx12(ActionIcon4, { onClick: async () => await utils_pdf_download(pdfLink), color: "red", children: /* @__PURE__ */ jsx12(IconDownload, {}) }) });
 }
 
 // src/components/ActionIcons/ActionIconUpload/MyActionIconUpload.tsx
@@ -590,10 +593,10 @@ import { ActionIcon as ActionIcon5 } from "@mantine/core";
 import { Dropzone, MIME_TYPES } from "@mantine/dropzone";
 import { IconCloudUpload } from "@tabler/icons-react";
 import { useRef } from "react";
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
 function MyActionIconUpload() {
   const openRef = useRef(null);
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx13(
     Dropzone,
     {
       openRef,
@@ -601,7 +604,7 @@ function MyActionIconUpload() {
       },
       radius: "md",
       accept: [MIME_TYPES.pdf],
-      children: /* @__PURE__ */ jsx12(ActionIcon5, { children: /* @__PURE__ */ jsx12(IconCloudUpload, {}) })
+      children: /* @__PURE__ */ jsx13(ActionIcon5, { children: /* @__PURE__ */ jsx13(IconCloudUpload, {}) })
     }
   );
 }
@@ -611,7 +614,7 @@ import { ActionIcon as ActionIcon6, Group as Group2, Modal as Modal3, Paper, Tex
 import { useDisclosure as useDisclosure4 } from "@mantine/hooks";
 import { IconLivePhoto, IconMaximize, IconMinimize } from "@tabler/icons-react";
 import { useState as useState3 } from "react";
-import { Fragment as Fragment3, jsx as jsx13, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx14, jsxs as jsxs6 } from "react/jsx-runtime";
 function MyActionIconViewPDF(_a) {
   var _b = _a, {
     modalSize = "80%",
@@ -624,8 +627,8 @@ function MyActionIconViewPDF(_a) {
   const fullScreen = useState3(false);
   const hSize = useState3("80vh");
   return /* @__PURE__ */ jsxs6(Fragment3, { children: [
-    /* @__PURE__ */ jsx13(Tooltip3, { label: "Xem t\xE0i li\u1EC7u tr\u1EF1c ti\u1EBFp", children: /* @__PURE__ */ jsx13(ActionIcon6, __spreadProps(__spreadValues({ color: "cyan", onClick: disc[1].open }, rest), { children: /* @__PURE__ */ jsx13(IconLivePhoto, {}) })) }),
-    /* @__PURE__ */ jsx13(
+    /* @__PURE__ */ jsx14(Tooltip3, { label: "Xem t\xE0i li\u1EC7u tr\u1EF1c ti\u1EBFp", children: /* @__PURE__ */ jsx14(ActionIcon6, __spreadProps(__spreadValues({ color: "cyan", onClick: disc[1].open }, rest), { children: /* @__PURE__ */ jsx14(IconLivePhoto, {}) })) }),
+    /* @__PURE__ */ jsx14(
       Modal3,
       {
         fullScreen: fullScreen[0],
@@ -633,28 +636,28 @@ function MyActionIconViewPDF(_a) {
         onClose: disc[1].close,
         size: modalSize,
         title: /* @__PURE__ */ jsxs6(Group2, { children: [
-          /* @__PURE__ */ jsx13(Text3, { children: "Xem t\xE0i li\u1EC7u tr\u1EF1c ti\u1EBFp" }),
-          fullScreen[0] ? /* @__PURE__ */ jsx13(
+          /* @__PURE__ */ jsx14(Text3, { children: "Xem t\xE0i li\u1EC7u tr\u1EF1c ti\u1EBFp" }),
+          fullScreen[0] ? /* @__PURE__ */ jsx14(
             ActionIcon6,
             {
               onClick: () => {
                 fullScreen[1](false);
                 hSize[1]("80vh");
               },
-              children: /* @__PURE__ */ jsx13(IconMinimize, {})
+              children: /* @__PURE__ */ jsx14(IconMinimize, {})
             }
-          ) : /* @__PURE__ */ jsx13(
+          ) : /* @__PURE__ */ jsx14(
             ActionIcon6,
             {
               onClick: () => {
                 fullScreen[1](true);
                 hSize[1]("90vh");
               },
-              children: /* @__PURE__ */ jsx13(IconMaximize, {})
+              children: /* @__PURE__ */ jsx14(IconMaximize, {})
             }
           )
         ] }),
-        children: /* @__PURE__ */ jsx13(Paper, { h: hSize[0], p: "lg", children: /* @__PURE__ */ jsx13("iframe", { src: pdfLink, width: "100%", height: "100%" }) })
+        children: /* @__PURE__ */ jsx14(Paper, { h: hSize[0], p: "lg", children: /* @__PURE__ */ jsx14("iframe", { src: pdfLink, width: "100%", height: "100%" }) })
       }
     )
   ] });
@@ -664,7 +667,7 @@ function MyActionIconViewPDF(_a) {
 import { useEffect as useEffect3, useState as useState4 } from "react";
 import { ActionIcon as ActionIcon7, useComputedColorScheme, useMantineColorScheme } from "@mantine/core";
 import { IconMoon, IconSun } from "@tabler/icons-react";
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { jsx as jsx15 } from "react/jsx-runtime";
 function MySwitchTheme() {
   const { setColorScheme } = useMantineColorScheme();
   const computedColorScheme = useComputedColorScheme("light", {
@@ -675,7 +678,7 @@ function MySwitchTheme() {
     setMounted(true);
   }, []);
   if (!mounted) return null;
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx15(
     ActionIcon7,
     {
       onClick: () => setColorScheme(computedColorScheme === "light" ? "dark" : "light"),
@@ -683,7 +686,7 @@ function MySwitchTheme() {
       size: "lg",
       radius: "md",
       "aria-label": "Toggle color scheme",
-      children: computedColorScheme === "dark" ? /* @__PURE__ */ jsx14(IconSun, { width: "22px", height: "22px", stroke: 1.5 }) : /* @__PURE__ */ jsx14(IconMoon, { width: "22px", height: "22px", stroke: 1.5 })
+      children: computedColorScheme === "dark" ? /* @__PURE__ */ jsx15(IconSun, { width: "22px", height: "22px", stroke: 1.5 }) : /* @__PURE__ */ jsx15(IconMoon, { width: "22px", height: "22px", stroke: 1.5 })
     }
   );
 }
@@ -699,7 +702,7 @@ import { Spotlight, spotlight } from "@mantine/spotlight";
 import { IconSearch } from "@tabler/icons-react";
 import { usePathname, useRouter } from "next/navigation";
 import { useMemo, useState as useState5 } from "react";
-import { Fragment as Fragment4, jsx as jsx15, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx16, jsxs as jsxs7 } from "react/jsx-runtime";
 function MyAppSpotlight({ menu }) {
   const router = useRouter();
   const pathName = usePathname();
@@ -725,7 +728,7 @@ function MyAppSpotlight({ menu }) {
     return item.label.toLowerCase().includes(lowerQuery) || ((_a = item.note) == null ? void 0 : _a.toLowerCase().includes(lowerQuery)) || ((_b = item.link) == null ? void 0 : _b.toLowerCase().includes(lowerQuery));
   });
   return /* @__PURE__ */ jsxs7(Fragment4, { children: [
-    /* @__PURE__ */ jsx15(
+    /* @__PURE__ */ jsx16(
       TextInput2,
       {
         mt: "md",
@@ -733,7 +736,7 @@ function MyAppSpotlight({ menu }) {
         mx: 10,
         component: "button",
         onClick: spotlight.open,
-        leftSection: /* @__PURE__ */ jsx15(IconSearch, {}),
+        leftSection: /* @__PURE__ */ jsx16(IconSearch, {}),
         children: "T\xECm ki\u1EBFm (Ctrl + K)"
       }
     ),
@@ -743,14 +746,14 @@ function MyAppSpotlight({ menu }) {
         query,
         onQueryChange: setQuery,
         children: [
-          /* @__PURE__ */ jsx15(
+          /* @__PURE__ */ jsx16(
             Spotlight.Search,
             {
               placeholder: "T\xECm ki\u1EBFm menu...",
-              leftSection: /* @__PURE__ */ jsx15(IconSearch, { stroke: 1.5 })
+              leftSection: /* @__PURE__ */ jsx16(IconSearch, { stroke: 1.5 })
             }
           ),
-          /* @__PURE__ */ jsx15(Spotlight.ActionsList, { mah: "70vh", children: filteredItems.length > 0 ? filteredItems.map((item, idx) => /* @__PURE__ */ jsx15(
+          /* @__PURE__ */ jsx16(Spotlight.ActionsList, { mah: "70vh", children: filteredItems.length > 0 ? filteredItems.map((item, idx) => /* @__PURE__ */ jsx16(
             Spotlight.Action,
             {
               onClick: () => {
@@ -761,9 +764,9 @@ function MyAppSpotlight({ menu }) {
               },
               children: /* @__PURE__ */ jsxs7(Group3, { wrap: "nowrap", w: "100%", children: [
                 /* @__PURE__ */ jsxs7("div", { style: { flex: 1 }, children: [
-                  /* @__PURE__ */ jsx15(Text4, { children: item.label }),
+                  /* @__PURE__ */ jsx16(Text4, { children: item.label }),
                   /* @__PURE__ */ jsxs7(Group3, { gap: 5, children: [
-                    item.note && /* @__PURE__ */ jsx15(Text4, { opacity: 0.6, size: "xs", children: item.note }),
+                    item.note && /* @__PURE__ */ jsx16(Text4, { opacity: 0.6, size: "xs", children: item.note }),
                     /* @__PURE__ */ jsxs7(Text4, { opacity: 0.6, size: "xs", children: [
                       "(",
                       item.link,
@@ -771,11 +774,11 @@ function MyAppSpotlight({ menu }) {
                     ] })
                   ] })
                 ] }),
-                item.status && item.status != "Default" && /* @__PURE__ */ jsx15(Badge, { variant: "default", children: item.status })
+                item.status && item.status != "Default" && /* @__PURE__ */ jsx16(Badge, { variant: "default", children: item.status })
               ] })
             },
             idx
-          )) : /* @__PURE__ */ jsx15(Spotlight.Empty, { children: "Kh\xF4ng t\xECm th\u1EA5y trang..." }) })
+          )) : /* @__PURE__ */ jsx16(Spotlight.Empty, { children: "Kh\xF4ng t\xECm th\u1EA5y trang..." }) })
         ]
       }
     )
@@ -787,14 +790,14 @@ import { ActionIcon as ActionIcon8, Anchor, Group as Group4, Modal as Modal4, Pa
 import { useDisclosure as useDisclosure5 } from "@mantine/hooks";
 import { IconMaximize as IconMaximize2, IconMinimize as IconMinimize2 } from "@tabler/icons-react";
 import { useState as useState6 } from "react";
-import { Fragment as Fragment5, jsx as jsx16, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx17, jsxs as jsxs8 } from "react/jsx-runtime";
 function MyAnchorViewPDF({ label, pdfLink }) {
   const disc = useDisclosure5(false);
   const fullScreen = useState6(false);
   const hSize = useState6("80vh");
   return /* @__PURE__ */ jsxs8(Fragment5, { children: [
-    /* @__PURE__ */ jsx16(Anchor, { onClick: disc[1].open, children: label }),
-    /* @__PURE__ */ jsx16(
+    /* @__PURE__ */ jsx17(Anchor, { onClick: disc[1].open, children: label }),
+    /* @__PURE__ */ jsx17(
       Modal4,
       {
         fullScreen: fullScreen[0],
@@ -802,28 +805,28 @@ function MyAnchorViewPDF({ label, pdfLink }) {
         onClose: disc[1].close,
         size: "80%",
         title: /* @__PURE__ */ jsxs8(Group4, { children: [
-          /* @__PURE__ */ jsx16(Text5, { children: "Xem t\xE0i li\u1EC7u tr\u1EF1c ti\u1EBFp" }),
-          fullScreen[0] ? /* @__PURE__ */ jsx16(
+          /* @__PURE__ */ jsx17(Text5, { children: "Xem t\xE0i li\u1EC7u tr\u1EF1c ti\u1EBFp" }),
+          fullScreen[0] ? /* @__PURE__ */ jsx17(
             ActionIcon8,
             {
               onClick: () => {
                 fullScreen[1](false);
                 hSize[1]("80vh");
               },
-              children: /* @__PURE__ */ jsx16(IconMinimize2, {})
+              children: /* @__PURE__ */ jsx17(IconMinimize2, {})
             }
-          ) : /* @__PURE__ */ jsx16(
+          ) : /* @__PURE__ */ jsx17(
             ActionIcon8,
             {
               onClick: () => {
                 fullScreen[1](true);
                 hSize[1]("90vh");
               },
-              children: /* @__PURE__ */ jsx16(IconMaximize2, {})
+              children: /* @__PURE__ */ jsx17(IconMaximize2, {})
             }
           )
         ] }),
-        children: /* @__PURE__ */ jsx16(Paper2, { h: hSize[0], children: /* @__PURE__ */ jsx16("iframe", { src: pdfLink, width: "100%", height: "100%" }) })
+        children: /* @__PURE__ */ jsx17(Paper2, { h: hSize[0], children: /* @__PURE__ */ jsx17("iframe", { src: pdfLink, width: "100%", height: "100%" }) })
       }
     )
   ] });
@@ -839,7 +842,7 @@ import * as XLSX from "xlsx";
 // src/components/Button/ButtonModal/MyButtonModal.tsx
 import { Button as Button3, Modal as Modal5 } from "@mantine/core";
 import { IconEdit as IconEdit4, IconPlus as IconPlus4, IconTrash as IconTrash4 } from "@tabler/icons-react";
-import { Fragment as Fragment6, jsx as jsx17, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx18, jsxs as jsxs9 } from "react/jsx-runtime";
 function MyButtonModal(_a) {
   var _b = _a, {
     fullScreen = false,
@@ -863,8 +866,8 @@ function MyButtonModal(_a) {
   const objectNameLower = objectName == null ? void 0 : objectName.toLowerCase();
   if (crudType == "default") {
     return /* @__PURE__ */ jsxs9(Fragment6, { children: [
-      /* @__PURE__ */ jsx17(Button3, __spreadProps(__spreadValues({ onClick: disclosure == null ? void 0 : disclosure[1].open, color: "indigo" }, rest), { children: label })),
-      /* @__PURE__ */ jsx17(
+      /* @__PURE__ */ jsx18(Button3, __spreadProps(__spreadValues({ onClick: disclosure == null ? void 0 : disclosure[1].open, color: "indigo" }, rest), { children: label })),
+      /* @__PURE__ */ jsx18(
         Modal5,
         {
           fullScreen,
@@ -872,15 +875,15 @@ function MyButtonModal(_a) {
           title,
           opened: disclosure == null ? void 0 : disclosure[0],
           onClose: disclosure[1].close,
-          children: /* @__PURE__ */ jsx17(MyFlexColumn, { children })
+          children: /* @__PURE__ */ jsx18(MyFlexColumn, { children })
         }
       )
     ] });
   }
   if (crudType == "create") {
     return /* @__PURE__ */ jsxs9(Fragment6, { children: [
-      /* @__PURE__ */ jsx17(Button3, __spreadProps(__spreadValues({ onClick: disclosure == null ? void 0 : disclosure[1].open, leftSection: /* @__PURE__ */ jsx17(IconPlus4, {}) }, rest), { children: label ? label : `Th\xEAm` })),
-      /* @__PURE__ */ jsx17(
+      /* @__PURE__ */ jsx18(Button3, __spreadProps(__spreadValues({ onClick: disclosure == null ? void 0 : disclosure[1].open, leftSection: /* @__PURE__ */ jsx18(IconPlus4, {}) }, rest), { children: label ? label : `Th\xEAm` })),
+      /* @__PURE__ */ jsx18(
         Modal5,
         {
           fullScreen,
@@ -888,15 +891,15 @@ function MyButtonModal(_a) {
           title: title ? title : `T\u1EA1o ${objectNameLower} m\u1EDBi`,
           opened: disclosure == null ? void 0 : disclosure[0],
           onClose: disclosure[1].close,
-          children: /* @__PURE__ */ jsx17(MyFlexColumn, { children })
+          children: /* @__PURE__ */ jsx18(MyFlexColumn, { children })
         }
       )
     ] });
   }
   if (crudType == "createMultiple") {
     return /* @__PURE__ */ jsxs9(Fragment6, { children: [
-      /* @__PURE__ */ jsx17(Button3, __spreadProps(__spreadValues({ onClick: disclosure == null ? void 0 : disclosure[1].open, color: "green", leftSection: /* @__PURE__ */ jsx17(IconPlus4, {}) }, rest), { children: label ? label : `Import ${objectNameLower}` })),
-      /* @__PURE__ */ jsx17(
+      /* @__PURE__ */ jsx18(Button3, __spreadProps(__spreadValues({ onClick: disclosure == null ? void 0 : disclosure[1].open, color: "green", leftSection: /* @__PURE__ */ jsx18(IconPlus4, {}) }, rest), { children: label ? label : `Import ${objectNameLower}` })),
+      /* @__PURE__ */ jsx18(
         Modal5,
         {
           fullScreen,
@@ -904,15 +907,15 @@ function MyButtonModal(_a) {
           title: title ? title : `Th\xEAm danh s\xE1ch ${objectNameLower}`,
           opened: disclosure == null ? void 0 : disclosure[0],
           onClose: disclosure[1].close,
-          children: /* @__PURE__ */ jsx17(MyFlexColumn, { children })
+          children: /* @__PURE__ */ jsx18(MyFlexColumn, { children })
         }
       )
     ] });
   }
   if (crudType == "update") {
     return /* @__PURE__ */ jsxs9(Fragment6, { children: [
-      /* @__PURE__ */ jsx17(Button3, __spreadProps(__spreadValues({ onClick: disclosure == null ? void 0 : disclosure[1].open, color: "yellow", leftSection: /* @__PURE__ */ jsx17(IconEdit4, {}) }, rest), { children: label ? label : `Ch\u1EC9nh s\u1EEDa ${objectNameLower}` })),
-      /* @__PURE__ */ jsx17(
+      /* @__PURE__ */ jsx18(Button3, __spreadProps(__spreadValues({ onClick: disclosure == null ? void 0 : disclosure[1].open, color: "yellow", leftSection: /* @__PURE__ */ jsx18(IconEdit4, {}) }, rest), { children: label ? label : `Ch\u1EC9nh s\u1EEDa ${objectNameLower}` })),
+      /* @__PURE__ */ jsx18(
         Modal5,
         {
           fullScreen,
@@ -920,15 +923,15 @@ function MyButtonModal(_a) {
           title: title ? title : `Ch\u1EC9nh s\u1EEDa ${objectNameLower}`,
           opened: disclosure == null ? void 0 : disclosure[0],
           onClose: disclosure[1].close,
-          children: /* @__PURE__ */ jsx17(MyFlexColumn, { children })
+          children: /* @__PURE__ */ jsx18(MyFlexColumn, { children })
         }
       )
     ] });
   }
   if (crudType == "delete") {
     return /* @__PURE__ */ jsxs9(Fragment6, { children: [
-      /* @__PURE__ */ jsx17(Button3, __spreadProps(__spreadValues({ onClick: disclosure == null ? void 0 : disclosure[1].open, color: "red", leftSection: /* @__PURE__ */ jsx17(IconTrash4, {}) }, rest), { children: label ? label : `X\xF3a ${objectNameLower}` })),
-      /* @__PURE__ */ jsx17(
+      /* @__PURE__ */ jsx18(Button3, __spreadProps(__spreadValues({ onClick: disclosure == null ? void 0 : disclosure[1].open, color: "red", leftSection: /* @__PURE__ */ jsx18(IconTrash4, {}) }, rest), { children: label ? label : `X\xF3a ${objectNameLower}` })),
+      /* @__PURE__ */ jsx18(
         Modal5,
         {
           fullScreen,
@@ -936,7 +939,7 @@ function MyButtonModal(_a) {
           title: title ? title : `X\xF3a ${objectNameLower}`,
           opened: disclosure == null ? void 0 : disclosure[0],
           onClose: disclosure[1].close,
-          children: /* @__PURE__ */ jsx17(MyFlexColumn, { children })
+          children: /* @__PURE__ */ jsx18(MyFlexColumn, { children })
         }
       )
     ] });
@@ -944,7 +947,7 @@ function MyButtonModal(_a) {
 }
 
 // src/components/Button/ButtonCRUD/AQButtonCreateByImportFile.tsx
-import { jsx as jsx18, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs10 } from "react/jsx-runtime";
 function AQButtonCreateByImportFile(_a) {
   var _b = _a, {
     form,
@@ -993,12 +996,12 @@ function AQButtonCreateByImportFile(_a) {
     };
     reader.readAsArrayBuffer(file);
   };
-  return /* @__PURE__ */ jsx18(MyButtonModal, __spreadProps(__spreadValues({ disclosure: disc, crudType: "createMultiple" }, rest), { children: /* @__PURE__ */ jsx18("form", { onSubmit: form.onSubmit((values) => {
+  return /* @__PURE__ */ jsx19(MyButtonModal, __spreadProps(__spreadValues({ disclosure: disc, crudType: "createMultiple" }, rest), { children: /* @__PURE__ */ jsx19("form", { onSubmit: form.onSubmit((values) => {
   }), children: /* @__PURE__ */ jsxs10(MyFlexColumn, { children: [
-    /* @__PURE__ */ jsx18(
+    /* @__PURE__ */ jsx19(
       FileInput,
       {
-        leftSection: /* @__PURE__ */ jsx18(IconFileTypeXls, {}),
+        leftSection: /* @__PURE__ */ jsx19(IconFileTypeXls, {}),
         accept: ".xlsx",
         description: "\u0110\u1ECBnh d\u1EA1ng h\u1EE3p l\u1EC7: .xlsx",
         label: "Ch\u1ECDn file",
@@ -1007,7 +1010,7 @@ function AQButtonCreateByImportFile(_a) {
         placeholder: "Ch\u1ECDn file"
       }
     ),
-    /* @__PURE__ */ jsx18(MyButton, { type: "submit", crudType: "createMultiple" })
+    /* @__PURE__ */ jsx19(MyButton, { type: "submit", crudType: "createMultiple" })
   ] }) }) }));
 }
 
@@ -1015,7 +1018,7 @@ function AQButtonCreateByImportFile(_a) {
 import { Button as Button4 } from "@mantine/core";
 import { IconDownload as IconDownload2 } from "@tabler/icons-react";
 import * as XLSX2 from "xlsx";
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx20 } from "react/jsx-runtime";
 function AQButtonExportData({
   isAllData,
   objectName,
@@ -1041,7 +1044,7 @@ function AQButtonExportData({
     XLSX2.utils.book_append_sheet(workbook, worksheet, "Exported Data");
     XLSX2.writeFile(workbook, `${objectName}.xlsx`);
   };
-  return /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsx20(
     Button4,
     {
       disabled: data.length === 0,
@@ -1051,7 +1054,7 @@ function AQButtonExportData({
         event.preventDefault();
         handleExport();
       },
-      leftSection: /* @__PURE__ */ jsx19(IconDownload2, {}),
+      leftSection: /* @__PURE__ */ jsx20(IconDownload2, {}),
       children: "Export"
     }
   );
@@ -1060,7 +1063,7 @@ function AQButtonExportData({
 // src/components/Button/ButtonCRUD/MyButtonCreate.tsx
 import { useDisclosure as useDisclosure7 } from "@mantine/hooks";
 import { useQueryClient as useQueryClient4 } from "@tanstack/react-query";
-import { jsx as jsx20, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs11 } from "react/jsx-runtime";
 function MyButtonCreate(_a) {
   var _b = _a, {
     form,
@@ -1124,11 +1127,11 @@ function MyButtonCreate(_a) {
       }
     })
   });
-  return /* @__PURE__ */ jsx20(MyButtonModal, __spreadProps(__spreadValues({ disclosure, crudType: "create" }, rest), { children: /* @__PURE__ */ jsx20("form", { onSubmit: form.onSubmit((values) => {
+  return /* @__PURE__ */ jsx21(MyButtonModal, __spreadProps(__spreadValues({ disclosure, crudType: "create" }, rest), { children: /* @__PURE__ */ jsx21("form", { onSubmit: form.onSubmit((values) => {
     mutation.mutate(values);
   }), children: /* @__PURE__ */ jsxs11(MyFlexColumn, { children: [
     children,
-    /* @__PURE__ */ jsx20(MyButton, { type: "submit", crudType: "save" })
+    /* @__PURE__ */ jsx21(MyButton, { type: "submit", crudType: "save" })
   ] }) }) }));
 }
 
@@ -1137,7 +1140,7 @@ import { Group as Group5, Highlight as Highlight2 } from "@mantine/core";
 import { useDisclosure as useDisclosure8 } from "@mantine/hooks";
 import { useMutation as useMutation2, useQueryClient as useQueryClient5 } from "@tanstack/react-query";
 import { useState as useState7 } from "react";
-import { jsx as jsx21, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs12 } from "react/jsx-runtime";
 function MyButtonDeleteList(_a) {
   var _b = _a, {
     onSubmit,
@@ -1184,7 +1187,7 @@ function MyButtonDeleteList(_a) {
       disabled: contextData == void 0 || contextData.length == 0
     }, rest), {
       children: [
-        /* @__PURE__ */ jsx21(
+        /* @__PURE__ */ jsx22(
           Highlight2,
           {
             highlight: contextData || [],
@@ -1198,7 +1201,7 @@ function MyButtonDeleteList(_a) {
           }
         ),
         /* @__PURE__ */ jsxs12(Group5, { grow: true, children: [
-          /* @__PURE__ */ jsx21(
+          /* @__PURE__ */ jsx22(
             MyButton,
             {
               crudType: "delete",
@@ -1206,7 +1209,7 @@ function MyButtonDeleteList(_a) {
               loading: loadingState[0]
             }
           ),
-          /* @__PURE__ */ jsx21(
+          /* @__PURE__ */ jsx22(
             MyButton,
             {
               crudType: "cancel",
@@ -1220,23 +1223,23 @@ function MyButtonDeleteList(_a) {
 }
 
 // src/components/Button/ButtonImport/MyButtonImport.tsx
-import { Button as Button7, Modal as Modal8, useModalsStack as useModalsStack3 } from "@mantine/core";
+import { Button as Button8, Modal as Modal8, useModalsStack as useModalsStack3 } from "@mantine/core";
 import { IconFileImport as IconFileImport2 } from "@tabler/icons-react";
 
 // src/components/Combobox/Select/MySelect.tsx
 import { Select } from "@mantine/core";
-import { jsx as jsx22 } from "react/jsx-runtime";
+import { jsx as jsx23 } from "react/jsx-runtime";
 function MySelect(_a) {
   var _b = _a, { label } = _b, rest = __objRest(_b, ["label"]);
-  return /* @__PURE__ */ jsx22(Select, __spreadValues({ label, placeholder: label ? `Ch\u1ECDn ${label == null ? void 0 : label.toLowerCase()}` : "" }, rest));
+  return /* @__PURE__ */ jsx23(Select, __spreadValues({ label, placeholder: label ? `Ch\u1ECDn ${label == null ? void 0 : label.toLowerCase()}` : "" }, rest));
 }
 
 // src/components/Layouts/FlexEnd/MyFlexEnd.tsx
 import { Group as Group6 } from "@mantine/core";
-import { jsx as jsx23 } from "react/jsx-runtime";
+import { jsx as jsx24 } from "react/jsx-runtime";
 function MyFlexEnd(_a) {
   var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ jsx23(Group6, __spreadProps(__spreadValues({ justify: "end", mt: "md" }, rest), { children }));
+  return /* @__PURE__ */ jsx24(Group6, __spreadProps(__spreadValues({ justify: "end", mt: "md" }, rest), { children }));
 }
 
 // src/components/Button/ButtonImport/SelectFieldModal.tsx
@@ -1394,7 +1397,7 @@ function useS_ButtonImport() {
 }
 
 // src/components/Button/ButtonImport/SelectFieldModal.tsx
-import { jsx as jsx24, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs13 } from "react/jsx-runtime";
 function SelectFieldModal({ stack, onImport }) {
   var _a, _b;
   const store = useS_ButtonImport();
@@ -1402,91 +1405,91 @@ function SelectFieldModal({ stack, onImport }) {
     /* @__PURE__ */ jsxs13(SimpleGrid, { cols: { base: 1, lg: 2 }, children: [
       /* @__PURE__ */ jsxs13(Fieldset, { legend: "Danh s\xE1ch tr\u01B0\u1EDDng th\xF4ng tin", children: [
         /* @__PURE__ */ jsxs13(Table, { stickyHeader: true, stickyHeaderOffset: 60, children: [
-          /* @__PURE__ */ jsx24(Table.Thead, { bg: "cyan", children: /* @__PURE__ */ jsxs13(Table.Tr, { children: [
-            /* @__PURE__ */ jsx24(Table.Th, { children: "M\xE3 field" }),
-            /* @__PURE__ */ jsx24(Table.Th, { children: "T\xEAn field" })
+          /* @__PURE__ */ jsx25(Table.Thead, { bg: "cyan", children: /* @__PURE__ */ jsxs13(Table.Tr, { children: [
+            /* @__PURE__ */ jsx25(Table.Th, { children: "M\xE3 field" }),
+            /* @__PURE__ */ jsx25(Table.Th, { children: "T\xEAn field" })
           ] }) }),
-          /* @__PURE__ */ jsx24(Table.Tbody, { children: (_a = store.state.fieldConfig) == null ? void 0 : _a.filter((item) => item.isSelected == false || item.isSelected == void 0).map((item, idx) => /* @__PURE__ */ jsxs13(
+          /* @__PURE__ */ jsx25(Table.Tbody, { children: (_a = store.state.fieldConfig) == null ? void 0 : _a.filter((item) => item.isSelected == false || item.isSelected == void 0).map((item, idx) => /* @__PURE__ */ jsxs13(
             Table.Tr,
             {
               style: { cursor: "pointer" },
               children: [
-                /* @__PURE__ */ jsx24(Table.Td, { onClick: () => store.changeSelected(item.fieldKey.toString(), true), children: item.fieldKey.toString() }),
-                /* @__PURE__ */ jsx24(Table.Td, { onClick: () => store.changeSelected(item.fieldKey.toString(), true), children: item.fieldName })
+                /* @__PURE__ */ jsx25(Table.Td, { onClick: () => store.changeSelected(item.fieldKey.toString(), true), children: item.fieldKey.toString() }),
+                /* @__PURE__ */ jsx25(Table.Td, { onClick: () => store.changeSelected(item.fieldKey.toString(), true), children: item.fieldName })
               ]
             },
             idx
           )) })
         ] }),
-        /* @__PURE__ */ jsx24(Space2, {}),
-        /* @__PURE__ */ jsx24(Group7, { children: /* @__PURE__ */ jsx24(
+        /* @__PURE__ */ jsx25(Space2, {}),
+        /* @__PURE__ */ jsx25(Group7, { children: /* @__PURE__ */ jsx25(
           Button5,
           {
             onClick: () => {
               store.changeAllSelected(true);
             },
-            leftSection: /* @__PURE__ */ jsx24(IconArrowBigRight, {}),
+            leftSection: /* @__PURE__ */ jsx25(IconArrowBigRight, {}),
             children: "Chuy\u1EC3n t\u1EA5t c\u1EA3"
           }
         ) })
       ] }),
       /* @__PURE__ */ jsxs13(Fieldset, { legend: "Danh s\xE1ch tr\u01B0\u1EDDng th\xF4ng tin \u0111\u01B0\u1EE3c ch\u1ECDn", children: [
         /* @__PURE__ */ jsxs13(Table, { stickyHeader: true, stickyHeaderOffset: 60, children: [
-          /* @__PURE__ */ jsx24(Table.Thead, { children: /* @__PURE__ */ jsxs13(Table.Tr, { children: [
-            /* @__PURE__ */ jsx24(Table.Th, { children: "M\xE3 field" }),
-            /* @__PURE__ */ jsx24(Table.Th, { children: "T\xEAn field" }),
-            /* @__PURE__ */ jsx24(Table.Th, { children: "C\u1ED9t map" })
+          /* @__PURE__ */ jsx25(Table.Thead, { children: /* @__PURE__ */ jsxs13(Table.Tr, { children: [
+            /* @__PURE__ */ jsx25(Table.Th, { children: "M\xE3 field" }),
+            /* @__PURE__ */ jsx25(Table.Th, { children: "T\xEAn field" }),
+            /* @__PURE__ */ jsx25(Table.Th, { children: "C\u1ED9t map" })
           ] }) }),
-          /* @__PURE__ */ jsx24(Table.Tbody, { children: (_b = store.state.fieldConfig) == null ? void 0 : _b.filter((item) => item.isSelected == true).map((item, idx) => /* @__PURE__ */ jsxs13(
+          /* @__PURE__ */ jsx25(Table.Tbody, { children: (_b = store.state.fieldConfig) == null ? void 0 : _b.filter((item) => item.isSelected == true).map((item, idx) => /* @__PURE__ */ jsxs13(
             Table.Tr,
             {
               style: { cursor: "pointer" },
               children: [
-                /* @__PURE__ */ jsx24(Table.Td, { onClick: () => store.changeSelected(item.fieldKey.toString(), false), children: item.fieldKey.toString() }),
-                /* @__PURE__ */ jsx24(Table.Td, { onClick: () => store.changeSelected(item.fieldKey.toString(), false), children: item.fieldName }),
-                /* @__PURE__ */ jsx24(Table.Td, { children: /* @__PURE__ */ jsx24(MySelect, { data: store.state.title, value: item.fieldToMap, onChange: (e4) => store.setFieldToMap(item.fieldKey.toString(), e4) }) })
+                /* @__PURE__ */ jsx25(Table.Td, { onClick: () => store.changeSelected(item.fieldKey.toString(), false), children: item.fieldKey.toString() }),
+                /* @__PURE__ */ jsx25(Table.Td, { onClick: () => store.changeSelected(item.fieldKey.toString(), false), children: item.fieldName }),
+                /* @__PURE__ */ jsx25(Table.Td, { children: /* @__PURE__ */ jsx25(MySelect, { data: store.state.title, value: item.fieldToMap, onChange: (e4) => store.setFieldToMap(item.fieldKey.toString(), e4) }) })
               ]
             },
             idx
           )) })
         ] }),
-        /* @__PURE__ */ jsx24(Space2, {}),
-        /* @__PURE__ */ jsx24(
+        /* @__PURE__ */ jsx25(Space2, {}),
+        /* @__PURE__ */ jsx25(
           Button5,
           {
             onClick: () => {
               store.changeAllSelected(false);
             },
-            leftSection: /* @__PURE__ */ jsx24(IconArrowBigLeft, {}),
+            leftSection: /* @__PURE__ */ jsx25(IconArrowBigLeft, {}),
             children: "Chuy\u1EC3n t\u1EA5t c\u1EA3 v\u1EC1"
           }
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsx24(Divider, {}),
+    /* @__PURE__ */ jsx25(Divider, {}),
     /* @__PURE__ */ jsxs13(MyFlexEnd, { children: [
-      /* @__PURE__ */ jsx24(
+      /* @__PURE__ */ jsx25(
         Button5,
         {
-          leftSection: /* @__PURE__ */ jsx24(IconArrowBackUp, {}),
+          leftSection: /* @__PURE__ */ jsx25(IconArrowBackUp, {}),
           onClick: () => stack.close("select-field-page"),
           color: "gray.7",
           children: "Quay l\u1EA1i"
         }
       ),
-      /* @__PURE__ */ jsx24(
+      /* @__PURE__ */ jsx25(
         Button5,
         {
           color: "blue.8",
-          leftSection: /* @__PURE__ */ jsx24(IconArrowBigRight, {}),
+          leftSection: /* @__PURE__ */ jsx25(IconArrowBigRight, {}),
           onClick: onImport,
           children: "Ti\u1EBFp t\u1EE5c / Import"
         }
       ),
-      /* @__PURE__ */ jsx24(
+      /* @__PURE__ */ jsx25(
         Button5,
         {
-          leftSection: /* @__PURE__ */ jsx24(IconSquareRoundedX, {}),
+          leftSection: /* @__PURE__ */ jsx25(IconSquareRoundedX, {}),
           onClick: () => stack.closeAll(),
           color: "red.6",
           children: "\u0110\xF3ng"
@@ -1496,21 +1499,172 @@ function SelectFieldModal({ stack, onImport }) {
   ] }));
 }
 
+// src/components/DataDisplay/DataTable/MyDataTable.tsx
+import { Alert, Button as Button6, Center as Center2, Group as Group8, Portal, Text as Text6 } from "@mantine/core";
+import { IconBug, IconDownload as IconDownload3 } from "@tabler/icons-react";
+import { download, generateCsv, mkConfig } from "export-to-csv";
+import {
+  MantineReactTable,
+  useMantineReactTable
+} from "mantine-react-table";
+import { MRT_Localization_VI } from "mantine-react-table/locales/vi/index.cjs";
+import { useEffect as useEffect5 } from "react";
+import { Fragment as Fragment7, jsx as jsx26, jsxs as jsxs14 } from "react/jsx-runtime";
+function formatData(data, formats) {
+  return data.map((row) => {
+    const transformedRow = {};
+    Object.entries(row).forEach(([key, value]) => {
+      const formatFn = formats[key];
+      if (value instanceof Date) {
+        transformedRow[key] = formatFn ? formatFn(value.toISOString()) : value.toISOString();
+      } else if (value !== null && typeof value === "object") {
+        transformedRow[key] = formatFn ? formatFn(JSON.stringify(value)) : JSON.stringify(value);
+      } else {
+        transformedRow[key] = formatFn ? formatFn(value) : value;
+      }
+    });
+    return transformedRow;
+  });
+}
+function MyDataTable(_a) {
+  var _b = _a, {
+    formats = {},
+    exportAble = false,
+    csvConfigProps,
+    rowActionSize,
+    columns,
+    data,
+    renderTopToolbarCustomActions,
+    setSelectedRow,
+    isError,
+    isLoading,
+    pagination,
+    initialState,
+    state: state
+  } = _b, rest = __objRest(_b, [
+    "formats",
+    "exportAble",
+    "csvConfigProps",
+    "rowActionSize",
+    "columns",
+    "data",
+    "renderTopToolbarCustomActions",
+    "setSelectedRow",
+    "isError",
+    "isLoading",
+    "pagination",
+    "initialState",
+    // setPagination,
+    "state"
+  ]);
+  const { renderRowActions } = __spreadValues({}, rest);
+  const csvConfig = mkConfig(__spreadValues({
+    fieldSeparator: ",",
+    decimalSeparator: ".",
+    useKeysAsHeaders: (csvConfigProps == null ? void 0 : csvConfigProps.columnHeaders) ? false : true
+  }, csvConfigProps));
+  const handleExport = (rows) => {
+    if (rows.length == 0) {
+      const transformedData = formatData(data, formats);
+      const csv2 = generateCsv(csvConfig)(transformedData);
+      download(csvConfig)(csv2);
+      return;
+    }
+    const rowData = rows.map((row) => row.original);
+    const transformedRows = formatData(rowData, formats);
+    const csv = generateCsv(csvConfig)(transformedRows);
+    download(csvConfig)(csv);
+  };
+  const table = useMantineReactTable(__spreadValues({
+    columns,
+    data,
+    renderTopToolbarCustomActions: ({ table: table2 }) => {
+      return /* @__PURE__ */ jsxs14(Group8, { children: [
+        renderTopToolbarCustomActions && renderTopToolbarCustomActions({ table: table2 }),
+        exportAble && /* @__PURE__ */ jsx26(Fragment7, { children: /* @__PURE__ */ jsx26(
+          Button6,
+          {
+            color: "green.8",
+            onClick: () => handleExport(table2.getSelectedRowModel().rows),
+            leftSection: /* @__PURE__ */ jsx26(IconDownload3, {}),
+            variant: "filled",
+            children: "Export"
+          }
+        ) })
+      ] });
+    },
+    manualPagination: pagination ? true : false,
+    enableRowNumbers: true,
+    enableRowSelection: exportAble,
+    enableEditing: renderRowActions ? true : false,
+    positionActionsColumn: "last",
+    enableColumnResizing: true,
+    layoutMode: "semantic",
+    displayColumnDefOptions: {
+      "mrt-row-actions": {
+        header: "Thao t\xE1c",
+        size: rowActionSize
+      },
+      "mrt-row-numbers": {
+        Header: "STT",
+        size: 1
+      }
+    },
+    enableColumnPinning: true,
+    initialState: __spreadValues(__spreadValues({
+      density: "md",
+      columnPinning: { right: ["mrt-row-actions"] },
+      columnVisibility: {
+        modifiedWhen: false,
+        modifiedFullName: false
+      }
+    }, pagination ? {} : { pagination: { pageIndex: 0, pageSize: 30 } }), initialState),
+    mantineTableHeadCellProps: {
+      style: {
+        verticalAlign: "middle",
+        paddingTop: "2px",
+        paddingBottom: "2px"
+      }
+    },
+    mantineTableBodyCellProps: {
+      style: {
+        paddingTop: "2px",
+        paddingBottom: "2px"
+      }
+    },
+    localization: MRT_Localization_VI,
+    renderEmptyRowsFallback: () => isError ? /* @__PURE__ */ jsx26(Alert, { icon: /* @__PURE__ */ jsx26(IconBug, {}), color: "red", title: "C\xF3 l\u1ED7i x\u1EA3y ra!", m: "md" }) : /* @__PURE__ */ jsxs14(Center2, { p: "md", children: [
+      " ",
+      /* @__PURE__ */ jsx26(Text6, { c: "gray", fw: "600", size: "15px", fs: "italic", children: "Kh\xF4ng c\xF3 d\u1EEF li\u1EC7u!" })
+    ] }),
+    state: __spreadValues(__spreadValues({
+      showSkeletons: isLoading
+    }, pagination ? { pagination } : {}), state),
+    mantineTableContainerProps: { style: { maxHeight: "65vh" } },
+    enableStickyHeader: true
+  }, rest));
+  useEffect5(() => {
+    setSelectedRow && setSelectedRow(table.getSelectedRowModel().rows.map((row) => row.original));
+  }, [table.getState().rowSelection]);
+  if (data == void 0) return;
+  return /* @__PURE__ */ jsx26("main", { style: { position: "relative", zIndex: 1 }, children: table.getState().isFullScreen ? /* @__PURE__ */ jsx26(Portal, { children: /* @__PURE__ */ jsx26(MantineReactTable, { table }) }) : /* @__PURE__ */ jsx26(MantineReactTable, { table }) });
+}
+
 // src/components/Button/ButtonImport/SelectFileModal.tsx
-import { Button as Button6, Fieldset as Fieldset2, FileInput as FileInput2, Modal as Modal7, NumberInput, Select as Select2, SimpleGrid as SimpleGrid2 } from "@mantine/core";
+import { Button as Button7, Fieldset as Fieldset2, FileInput as FileInput2, Modal as Modal7, NumberInput, Select as Select2, SimpleGrid as SimpleGrid2 } from "@mantine/core";
 import { IconArrowBigRight as IconArrowBigRight2, IconSquareRoundedX as IconSquareRoundedX2 } from "@tabler/icons-react";
-import { jsx as jsx25, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs15 } from "react/jsx-runtime";
 function SelectFileModal({ onExportStructure, stack }) {
   var _a;
   const store = useS_ButtonImport();
-  return /* @__PURE__ */ jsxs14(
+  return /* @__PURE__ */ jsxs15(
     Modal7,
     __spreadProps(__spreadValues({
       title: "Import",
       fullScreen: true
     }, stack.register("select-file-page")), {
       children: [
-        /* @__PURE__ */ jsx25(
+        /* @__PURE__ */ jsx27(
           FileInput2,
           {
             value: store.state.file,
@@ -1520,8 +1674,8 @@ function SelectFileModal({ onExportStructure, stack }) {
             clearable: true
           }
         ),
-        /* @__PURE__ */ jsxs14(SimpleGrid2, { cols: { base: 1, md: 2, lg: 2, xl: 4 }, children: [
-          /* @__PURE__ */ jsx25(
+        /* @__PURE__ */ jsxs15(SimpleGrid2, { cols: { base: 1, md: 2, lg: 2, xl: 4 }, children: [
+          /* @__PURE__ */ jsx27(
             NumberInput,
             {
               label: "D\xF2ng ti\xEAu \u0111\u1EC1 b\u1EAFt \u0111\u1EA7u t\u1EEB",
@@ -1529,7 +1683,7 @@ function SelectFileModal({ onExportStructure, stack }) {
               onChange: (e4) => store.setProperty("startTitleIndex", e4)
             }
           ),
-          /* @__PURE__ */ jsx25(
+          /* @__PURE__ */ jsx27(
             NumberInput,
             {
               label: "D\xF2ng d\u1EEF li\u1EC7u b\u1EAFt \u0111\u1EA7u t\u1EEB",
@@ -1537,7 +1691,7 @@ function SelectFileModal({ onExportStructure, stack }) {
               onChange: (e4) => store.setProperty("startDataIndex", e4)
             }
           ),
-          /* @__PURE__ */ jsx25(
+          /* @__PURE__ */ jsx27(
             Select2,
             {
               readOnly: true,
@@ -1546,7 +1700,7 @@ function SelectFileModal({ onExportStructure, stack }) {
               defaultValue: "100.000"
             }
           ),
-          /* @__PURE__ */ jsx25(
+          /* @__PURE__ */ jsx27(
             Select2,
             {
               readOnly: true,
@@ -1556,37 +1710,37 @@ function SelectFileModal({ onExportStructure, stack }) {
             }
           )
         ] }),
-        /* @__PURE__ */ jsx25(Fieldset2, { legend: "Danh s\xE1ch tr\u01B0\u1EDDng th\xF4ng tin trong file d\u1EEF li\u1EC7u", children: store.state.data && /* @__PURE__ */ jsx25(
+        /* @__PURE__ */ jsx27(Fieldset2, { legend: "Danh s\xE1ch tr\u01B0\u1EDDng th\xF4ng tin trong file d\u1EEF li\u1EC7u", children: store.state.data && /* @__PURE__ */ jsx27(
           MyDataTable,
           {
             columns: store.columns,
             data: store.state.data
           }
         ) }),
-        /* @__PURE__ */ jsxs14(MyFlexEnd, { children: [
-          /* @__PURE__ */ jsx25(
-            Button6,
+        /* @__PURE__ */ jsxs15(MyFlexEnd, { children: [
+          /* @__PURE__ */ jsx27(
+            Button7,
             {
               color: "teal.8",
               onClick: onExportStructure,
               children: "Xu\u1EA5t file c\u1EA5u tr\xFAc"
             }
           ),
-          /* @__PURE__ */ jsx25(
-            Button6,
+          /* @__PURE__ */ jsx27(
+            Button7,
             {
               disabled: ((_a = store.state.data) == null ? void 0 : _a.length) == 0,
               color: "blue.8",
-              leftSection: /* @__PURE__ */ jsx25(IconArrowBigRight2, {}),
+              leftSection: /* @__PURE__ */ jsx27(IconArrowBigRight2, {}),
               onClick: () => stack.open("select-field-page"),
               children: "Ti\u1EBFp t\u1EE5c"
             }
           ),
-          /* @__PURE__ */ jsx25(
-            Button6,
+          /* @__PURE__ */ jsx27(
+            Button7,
             {
               color: "red.6",
-              leftSection: /* @__PURE__ */ jsx25(IconSquareRoundedX2, {}),
+              leftSection: /* @__PURE__ */ jsx27(IconSquareRoundedX2, {}),
               onClick: stack.closeAll,
               children: "\u0110\xF3ng"
             }
@@ -1598,26 +1752,26 @@ function SelectFileModal({ onExportStructure, stack }) {
 }
 
 // src/components/Button/ButtonImport/MyButtonImport.tsx
-import { Fragment as Fragment7, jsx as jsx26, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx28, jsxs as jsxs16 } from "react/jsx-runtime";
 function MyButtonImport({
   onExportStructure,
   onImport
 }) {
   const stack = useModalsStack3(["select-file-page", "select-field-page", "implement-page"]);
   const store = useS_ButtonImport();
-  return /* @__PURE__ */ jsxs15(Fragment7, { children: [
-    /* @__PURE__ */ jsx26(Button7, { color: "teal.8", onClick: () => stack.open("select-file-page"), leftSection: /* @__PURE__ */ jsx26(IconFileImport2, {}), title: "Import", children: "Import" }),
-    /* @__PURE__ */ jsxs15(Modal8.Stack, { children: [
-      /* @__PURE__ */ jsx26(SelectFileModal, { stack, onExportStructure }),
-      /* @__PURE__ */ jsx26(SelectFieldModal, { stack, onImport: () => onImport(store.getDataFinal()) })
+  return /* @__PURE__ */ jsxs16(Fragment8, { children: [
+    /* @__PURE__ */ jsx28(Button8, { color: "teal.8", onClick: () => stack.open("select-file-page"), leftSection: /* @__PURE__ */ jsx28(IconFileImport2, {}), title: "Import", children: "Import" }),
+    /* @__PURE__ */ jsxs16(Modal8.Stack, { children: [
+      /* @__PURE__ */ jsx28(SelectFileModal, { stack, onExportStructure }),
+      /* @__PURE__ */ jsx28(SelectFieldModal, { stack, onImport: () => onImport(store.getDataFinal()) })
     ] })
   ] });
 }
 
 // src/components/Button/ButtonModal/AQSelectTableByOpenModal.tsx
-import { Button as Button8, Fieldset as Fieldset3, Modal as Modal9 } from "@mantine/core";
+import { Button as Button9, Fieldset as Fieldset3, Modal as Modal9 } from "@mantine/core";
 import { useDisclosure as useDisclosure9 } from "@mantine/hooks";
-import { Fragment as Fragment8, jsx as jsx27, jsxs as jsxs16 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx29, jsxs as jsxs17 } from "react/jsx-runtime";
 function AQSelectTableByOpenModal(_a) {
   var _b = _a, {
     setSelectedData,
@@ -1645,16 +1799,16 @@ function AQSelectTableByOpenModal(_a) {
     "closeAfterSelect"
   ]);
   const disclosure = useDisclosure9(false);
-  return /* @__PURE__ */ jsxs16(Fragment8, { children: [
-    /* @__PURE__ */ jsx27(
-      Button8,
+  return /* @__PURE__ */ jsxs17(Fragment9, { children: [
+    /* @__PURE__ */ jsx29(
+      Button9,
       __spreadProps(__spreadValues({
         onClick: disclosure[1].open
       }, rest), {
         children: label ? label : `Ch\u1ECDn t\u1EEB danh s\xE1ch`
       })
     ),
-    /* @__PURE__ */ jsx27(
+    /* @__PURE__ */ jsx29(
       Modal9,
       {
         fullScreen,
@@ -1662,11 +1816,11 @@ function AQSelectTableByOpenModal(_a) {
         title,
         opened: disclosure == null ? void 0 : disclosure[0],
         onClose: disclosure[1].close,
-        children: /* @__PURE__ */ jsx27(MyFlexColumn, { children: /* @__PURE__ */ jsx27(Fieldset3, { legend: listLabel ? listLabel : "Danh s\xE1ch", children: /* @__PURE__ */ jsx27(
+        children: /* @__PURE__ */ jsx29(MyFlexColumn, { children: /* @__PURE__ */ jsx29(Fieldset3, { legend: listLabel ? listLabel : "Danh s\xE1ch", children: /* @__PURE__ */ jsx29(
           MyDataTable,
           __spreadValues({
             renderTopToolbarCustomActions: ({ table }) => {
-              return /* @__PURE__ */ jsx27(Button8, { onClick: () => {
+              return /* @__PURE__ */ jsx29(Button9, { onClick: () => {
                 setSelectedData(table.getSelectedRowModel().rows.map((row) => row.original));
                 closeAfterSelect && disclosure[1].close();
               }, children: "Ch\u1ECDn" });
@@ -1683,10 +1837,10 @@ function AQSelectTableByOpenModal(_a) {
 
 // src/components/Button/ButtonPrintPDF/MyButtonPrintPDF.tsx
 import { useRef as useRef2 } from "react";
-import { Button as Button9 } from "@mantine/core";
+import { Button as Button10 } from "@mantine/core";
 import { IconPrinter as IconPrinter2 } from "@tabler/icons-react";
 import { useReactToPrint } from "react-to-print";
-import { Fragment as Fragment9, jsx as jsx28, jsxs as jsxs17 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx30, jsxs as jsxs18 } from "react/jsx-runtime";
 function MyButtonPrintPDF(_a) {
   var _b = _a, { contentToPrint, children } = _b, rest = __objRest(_b, ["contentToPrint", "children"]);
   const printRef = useRef2(null);
@@ -1700,16 +1854,16 @@ function MyButtonPrintPDF(_a) {
     if (!contentToPrint) return;
     handlePrint();
   }
-  return /* @__PURE__ */ jsxs17(Fragment9, { children: [
-    /* @__PURE__ */ jsx28("div", { style: { display: "none" }, children: /* @__PURE__ */ jsx28("div", { ref: printRef, children: contentToPrint }) }),
-    /* @__PURE__ */ jsx28(Button9, __spreadProps(__spreadValues({ color: "orange", onClick: handleClick, leftSection: /* @__PURE__ */ jsx28(IconPrinter2, {}) }, rest), { children }))
+  return /* @__PURE__ */ jsxs18(Fragment10, { children: [
+    /* @__PURE__ */ jsx30("div", { style: { display: "none" }, children: /* @__PURE__ */ jsx30("div", { ref: printRef, children: contentToPrint }) }),
+    /* @__PURE__ */ jsx30(Button10, __spreadProps(__spreadValues({ color: "orange", onClick: handleClick, leftSection: /* @__PURE__ */ jsx30(IconPrinter2, {}) }, rest), { children }))
   ] });
 }
 
 // src/components/Layouts/HtmlWrapper/MyHtmlWrapper.tsx
 import { ScrollArea, TypographyStylesProvider } from "@mantine/core";
 import pako from "pako";
-import { jsx as jsx29 } from "react/jsx-runtime";
+import { jsx as jsx31 } from "react/jsx-runtime";
 function MyHtmlWrapper(_a) {
   var _b = _a, { html, mah, zip = false } = _b, rest = __objRest(_b, ["html", "mah", "zip"]);
   const extractHtmlFromZip = () => {
@@ -1718,7 +1872,7 @@ function MyHtmlWrapper(_a) {
     const cleanedHtml = decompressedData == null ? void 0 : decompressedData.replaceAll(" font-family:'Times New Roman'; font-size:1em;", "");
     return cleanedHtml.replaceAll(" font-family:'Times New Roman'; font-size:1em;", "");
   };
-  return /* @__PURE__ */ jsx29(ScrollArea.Autosize, { mah, children: /* @__PURE__ */ jsx29(TypographyStylesProvider, __spreadProps(__spreadValues({}, rest), { children: /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsx31(ScrollArea.Autosize, { mah, children: /* @__PURE__ */ jsx31(TypographyStylesProvider, __spreadProps(__spreadValues({}, rest), { children: /* @__PURE__ */ jsx31(
     "div",
     {
       dangerouslySetInnerHTML: {
@@ -1730,7 +1884,7 @@ function MyHtmlWrapper(_a) {
 
 // src/components/Button/ButtonPrintPDFTable/MyButtonPrintTablePDF.tsx
 import { Box, Table as Table2 } from "@mantine/core";
-import { jsx as jsx30, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs19 } from "react/jsx-runtime";
 function MyButtonPrintTablePDF(_a) {
   var _b = _a, {
     printConfig,
@@ -1756,8 +1910,8 @@ function MyButtonPrintTablePDF(_a) {
   };
   const rows = data == null ? void 0 : data.map((item, index) => {
     if (!(printConfig == null ? void 0 : printConfig.fields)) return null;
-    return /* @__PURE__ */ jsxs18(Table2.Tr, { children: [
-      printConfig.showRowNumbers && /* @__PURE__ */ jsx30(Table2.Td, { ta: "center", px: "xs", style: { border: "1px solid lightgray" }, children: index + 1 }),
+    return /* @__PURE__ */ jsxs19(Table2.Tr, { children: [
+      printConfig.showRowNumbers && /* @__PURE__ */ jsx32(Table2.Td, { ta: "center", px: "xs", style: { border: "1px solid lightgray" }, children: index + 1 }),
       printConfig.fields.map((field) => {
         let value = item[field.fieldName];
         if (field.formatFunction) {
@@ -1767,30 +1921,30 @@ function MyButtonPrintTablePDF(_a) {
         }
         const alignment = field.isCenter === false ? "left" : "center";
         if (typeof value === "string" && (value.includes("<") || value.includes("&lt;"))) {
-          return /* @__PURE__ */ jsx30(
+          return /* @__PURE__ */ jsx32(
             Table2.Td,
             {
               px: "xs",
               ta: alignment,
               style: { border: "1px solid lightgray" },
-              children: /* @__PURE__ */ jsx30(MyHtmlWrapper, { html: value })
+              children: /* @__PURE__ */ jsx32(MyHtmlWrapper, { html: value })
             },
             field.fieldName
           );
         }
         if (value === "true" || value === "false") {
-          return /* @__PURE__ */ jsx30(
+          return /* @__PURE__ */ jsx32(
             Table2.Td,
             {
               ta: alignment,
               px: "xs",
               style: { border: "1px solid lightgray" },
-              children: /* @__PURE__ */ jsx30("input", { type: "checkbox", checked: value === "true", readOnly: true })
+              children: /* @__PURE__ */ jsx32("input", { type: "checkbox", checked: value === "true", readOnly: true })
             },
             field.fieldName
           );
         }
-        return /* @__PURE__ */ jsx30(
+        return /* @__PURE__ */ jsx32(
           Table2.Td,
           {
             ta: alignment,
@@ -1814,18 +1968,18 @@ function MyButtonPrintTablePDF(_a) {
       minute: "2-digit"
     });
     const tableTitle = (printConfig == null ? void 0 : printConfig.title) || "B\u1EA3ng d\u1EEF li\u1EC7u";
-    return /* @__PURE__ */ jsxs18(Box, { p: "lg", children: [
-      /* @__PURE__ */ jsxs18("div", { style: { textAlign: "center", marginTop: "10px", fontStyle: "italic", color: "#666" }, children: [
+    return /* @__PURE__ */ jsxs19(Box, { p: "lg", children: [
+      /* @__PURE__ */ jsxs19("div", { style: { textAlign: "center", marginTop: "10px", fontStyle: "italic", color: "#666" }, children: [
         "Ng\xE0y in: ",
         formattedDate
       ] }),
-      /* @__PURE__ */ jsx30("h2", { style: { textAlign: "center", fontSize: "24px", fontWeight: "bold", marginBottom: "20px" }, children: tableTitle }),
-      /* @__PURE__ */ jsxs18(Table2, { withColumnBorders: true, highlightOnHover: true, style: { border: "1px solid lightgray" }, children: [
-        /* @__PURE__ */ jsx30(Table2.Thead, { children: /* @__PURE__ */ jsxs18(Table2.Tr, { children: [
-          printConfig.showRowNumbers && /* @__PURE__ */ jsx30(Table2.Th, { style: { border: "1px solid lightgray" }, w: "10%", ta: "center", px: "xs", children: "STT" }),
+      /* @__PURE__ */ jsx32("h2", { style: { textAlign: "center", fontSize: "24px", fontWeight: "bold", marginBottom: "20px" }, children: tableTitle }),
+      /* @__PURE__ */ jsxs19(Table2, { withColumnBorders: true, highlightOnHover: true, style: { border: "1px solid lightgray" }, children: [
+        /* @__PURE__ */ jsx32(Table2.Thead, { children: /* @__PURE__ */ jsxs19(Table2.Tr, { children: [
+          printConfig.showRowNumbers && /* @__PURE__ */ jsx32(Table2.Th, { style: { border: "1px solid lightgray" }, w: "10%", ta: "center", px: "xs", children: "STT" }),
           printConfig.fields.map((field) => {
             const alignment = field.isCenter === false ? "left" : "center";
-            return /* @__PURE__ */ jsx30(
+            return /* @__PURE__ */ jsx32(
               Table2.Th,
               {
                 style: { border: "1px solid lightgray" },
@@ -1837,11 +1991,11 @@ function MyButtonPrintTablePDF(_a) {
             );
           })
         ] }) }),
-        /* @__PURE__ */ jsx30(Table2.Tbody, { children: rows })
+        /* @__PURE__ */ jsx32(Table2.Tbody, { children: rows })
       ] })
     ] });
   };
-  return /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsx32(
     MyButtonPrintPDF,
     __spreadValues({
       contentToPrint: renderContent()
@@ -1853,11 +2007,11 @@ function MyButtonPrintTablePDF(_a) {
 import { ActionIcon as ActionIcon9 } from "@mantine/core";
 import { IconArrowBack } from "@tabler/icons-react";
 import { useRouter as useRouter2 } from "next/navigation";
-import { jsx as jsx31 } from "react/jsx-runtime";
+import { jsx as jsx33 } from "react/jsx-runtime";
 function MyButtonRouterBack(_a) {
   var _b = _a, { url, label } = _b, rest = __objRest(_b, ["url", "label"]);
   const router = useRouter2();
-  return /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsx33(
     ActionIcon9,
     __spreadProps(__spreadValues({
       size: "xl",
@@ -1870,7 +2024,7 @@ function MyButtonRouterBack(_a) {
         router.back();
       }
     }, rest), {
-      children: /* @__PURE__ */ jsx31(IconArrowBack, { stroke: 2 })
+      children: /* @__PURE__ */ jsx33(IconArrowBack, { stroke: 2 })
     })
   );
 }
@@ -1878,19 +2032,19 @@ function MyButtonRouterBack(_a) {
 // src/components/Button/ButtonViewPDF/MyButtonViewPDF.tsx
 import {
   ActionIcon as ActionIcon10,
-  Button as Button10,
-  Group as Group8,
+  Button as Button11,
+  Group as Group9,
   LoadingOverlay,
   Modal as Modal10,
   Paper as Paper3,
-  Text as Text6,
+  Text as Text7,
   Tooltip as Tooltip4
 } from "@mantine/core";
 import { useDisclosure as useDisclosure10 } from "@mantine/hooks";
 import { IconLivePhoto as IconLivePhoto2, IconMaximize as IconMaximize3, IconMinimize as IconMinimize3 } from "@tabler/icons-react";
 import { useQuery } from "@tanstack/react-query";
 import { useState as useState8 } from "react";
-import { Fragment as Fragment10, jsx as jsx32, jsxs as jsxs19 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx34, jsxs as jsxs20 } from "react/jsx-runtime";
 function MyButtonViewPDF({
   id,
   modalSize = "80%",
@@ -1915,57 +2069,57 @@ function MyButtonViewPDF({
     },
     enabled: disc[0] == true
   });
-  return /* @__PURE__ */ jsxs19(Fragment10, { children: [
-    /* @__PURE__ */ jsx32(Tooltip4, { label: "Xem t\xE0i li\u1EC7u tr\u1EF1c ti\u1EBFp", children: isActionIcon ? /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsxs20(Fragment11, { children: [
+    /* @__PURE__ */ jsx34(Tooltip4, { label: "Xem t\xE0i li\u1EC7u tr\u1EF1c ti\u1EBFp", children: isActionIcon ? /* @__PURE__ */ jsx34(
       ActionIcon10,
       {
         onClick: () => {
           disc[1].open();
         },
-        children: /* @__PURE__ */ jsx32(IconLivePhoto2, {})
+        children: /* @__PURE__ */ jsx34(IconLivePhoto2, {})
       }
-    ) : /* @__PURE__ */ jsx32(
-      Button10,
+    ) : /* @__PURE__ */ jsx34(
+      Button11,
       {
         color: "cyan",
         onClick: () => {
           disc[1].open();
         },
-        leftSection: /* @__PURE__ */ jsx32(IconLivePhoto2, {}),
+        leftSection: /* @__PURE__ */ jsx34(IconLivePhoto2, {}),
         children: label
       }
     ) }),
-    /* @__PURE__ */ jsx32(
+    /* @__PURE__ */ jsx34(
       Modal10,
       {
         fullScreen: fullScreen[0],
         opened: disc[0],
         onClose: disc[1].close,
         size: modalSize,
-        title: /* @__PURE__ */ jsxs19(Group8, { children: [
-          /* @__PURE__ */ jsx32(Text6, { children: "Xem t\xE0i li\u1EC7u tr\u1EF1c ti\u1EBFp" }),
-          fullScreen[0] ? /* @__PURE__ */ jsx32(
+        title: /* @__PURE__ */ jsxs20(Group9, { children: [
+          /* @__PURE__ */ jsx34(Text7, { children: "Xem t\xE0i li\u1EC7u tr\u1EF1c ti\u1EBFp" }),
+          fullScreen[0] ? /* @__PURE__ */ jsx34(
             ActionIcon10,
             {
               onClick: () => {
                 fullScreen[1](false);
                 hSize[1]("80vh");
               },
-              children: /* @__PURE__ */ jsx32(IconMinimize3, {})
+              children: /* @__PURE__ */ jsx34(IconMinimize3, {})
             }
-          ) : /* @__PURE__ */ jsx32(
+          ) : /* @__PURE__ */ jsx34(
             ActionIcon10,
             {
               onClick: () => {
                 fullScreen[1](true);
                 hSize[1]("90vh");
               },
-              children: /* @__PURE__ */ jsx32(IconMaximize3, {})
+              children: /* @__PURE__ */ jsx34(IconMaximize3, {})
             }
           )
         ] }),
-        children: /* @__PURE__ */ jsxs19(Paper3, { h: hSize[0], p: "lg", pos: "relative", children: [
-          /* @__PURE__ */ jsx32(
+        children: /* @__PURE__ */ jsxs20(Paper3, { h: hSize[0], p: "lg", pos: "relative", children: [
+          /* @__PURE__ */ jsx34(
             LoadingOverlay,
             {
               visible: query.isLoading,
@@ -1973,14 +2127,14 @@ function MyButtonViewPDF({
               overlayProps: { radius: "sm", blur: 2 }
             }
           ),
-          query.data ? /* @__PURE__ */ jsx32(
+          query.data ? /* @__PURE__ */ jsx34(
             "iframe",
             {
               src: `data:application/pdf;base64, ${filePath ? (_a = query.data) == null ? void 0 : _a.fileBase64String : (_c = (_b = query.data) == null ? void 0 : _b.fileDetail) == null ? void 0 : _c.fileBase64String}`,
               width: "100%",
               height: "100%"
             }
-          ) : /* @__PURE__ */ jsx32("iframe", { src, width: "100%", height: "100%" })
+          ) : /* @__PURE__ */ jsx34("iframe", { src, width: "100%", height: "100%" })
         ] })
       }
     )
@@ -6332,10 +6486,10 @@ var createViewMonthAgenda = () => createPreactView(config);
 import { createEventModalPlugin } from "@schedule-x/event-modal";
 import { createEventsServicePlugin } from "@schedule-x/events-service";
 import { ScheduleXCalendar, useNextCalendarApp } from "@schedule-x/react";
-import { Paper as Paper4, Text as Text7 } from "@mantine/core";
+import { Paper as Paper4, Text as Text8 } from "@mantine/core";
 import "@schedule-x/theme-default/dist/index.css";
-import { useEffect as useEffect5 } from "react";
-import { jsx as jsx33, jsxs as jsxs20 } from "react/jsx-runtime";
+import { useEffect as useEffect6 } from "react";
+import { jsx as jsx35, jsxs as jsxs21 } from "react/jsx-runtime";
 function MyCalendar() {
   const plugins = [createEventsServicePlugin(), createEventModalPlugin()];
   const calendar = useNextCalendarApp({
@@ -6406,19 +6560,19 @@ function MyCalendar() {
       }
     ]
   }, plugins);
-  useEffect5(() => {
+  useEffect6(() => {
     calendar == null ? void 0 : calendar.events.getAll();
   }, []);
-  return /* @__PURE__ */ jsx33("div", { children: /* @__PURE__ */ jsx33(ScheduleXCalendar, { calendarApp: calendar, customComponents: {
+  return /* @__PURE__ */ jsx35("div", { children: /* @__PURE__ */ jsx35(ScheduleXCalendar, { calendarApp: calendar, customComponents: {
     timeGridEvent: ({ calendarEvent }) => {
       console.log(calendarEvent);
-      return /* @__PURE__ */ jsx33(Paper4, { h: "100%", bg: calendarEvent.laLichThi ? "violet.2" : "blue.2", p: 4, children: /* @__PURE__ */ jsxs20(MyFlexColumn, { gap: 1, children: [
-        /* @__PURE__ */ jsxs20(Text7, { size: "sm", fw: "bold", children: [
+      return /* @__PURE__ */ jsx35(Paper4, { h: "100%", bg: calendarEvent.laLichThi ? "violet.2" : "blue.2", p: 4, children: /* @__PURE__ */ jsxs21(MyFlexColumn, { gap: 1, children: [
+        /* @__PURE__ */ jsxs21(Text8, { size: "sm", fw: "bold", children: [
           calendarEvent.laLichThi ? "(Thi) " : "(H\u1ECDc) ",
           calendarEvent.title
         ] }),
-        calendarEvent.laLichThi == false && /* @__PURE__ */ jsx33(Text7, { size: "sm", children: calendarEvent.giangvien }),
-        /* @__PURE__ */ jsx33(Text7, { size: "sm", children: calendarEvent.location })
+        calendarEvent.laLichThi == false && /* @__PURE__ */ jsx35(Text8, { size: "sm", children: calendarEvent.giangvien }),
+        /* @__PURE__ */ jsx35(Text8, { size: "sm", children: calendarEvent.location })
       ] }) });
     }
     // eventModal: ({ calendarEvent }) => {
@@ -6432,24 +6586,32 @@ function MyCalendar() {
 }
 
 // src/components/CenterFull/MyCenterFull.tsx
-import { Center as Center2, Group as Group9 } from "@mantine/core";
-import { jsx as jsx34 } from "react/jsx-runtime";
+import { Center as Center3, Group as Group10 } from "@mantine/core";
+import { jsx as jsx36 } from "react/jsx-runtime";
 function MyCenterFull({ children }) {
-  return /* @__PURE__ */ jsx34(Center2, { w: "100%", children: /* @__PURE__ */ jsx34(Group9, { children }) });
+  return /* @__PURE__ */ jsx36(Center3, { w: "100%", children: /* @__PURE__ */ jsx36(Group10, { children }) });
 }
 
 // src/components/Checkbox/MyCheckbox.tsx
 import { Checkbox as Checkbox2 } from "@mantine/core";
-import { jsx as jsx35 } from "react/jsx-runtime";
+import { jsx as jsx37 } from "react/jsx-runtime";
 function MyCheckbox(_a) {
   var rest = __objRest(_a, []);
-  return /* @__PURE__ */ jsx35(Checkbox2, __spreadValues({}, rest));
+  return /* @__PURE__ */ jsx37(Checkbox2, __spreadValues({}, rest));
+}
+
+// src/components/Layouts/FlexRow/MyFlexRow.tsx
+import { Flex as Flex2 } from "@mantine/core";
+import { jsx as jsx38 } from "react/jsx-runtime";
+function MyFlexRow(_a) {
+  var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
+  return /* @__PURE__ */ jsx38(Flex2, __spreadProps(__spreadValues({ gap: "md", align: "center" }, rest), { children }));
 }
 
 // src/components/DataDisplay/Card/AQCard.tsx
-import { Badge as Badge2, Card, Center as Center3, Image, Text as Text8 } from "@mantine/core";
+import { Badge as Badge2, Card, Center as Center4, Image, Text as Text9 } from "@mantine/core";
 import Link from "next/link";
-import { jsx as jsx36, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs22 } from "react/jsx-runtime";
 function AQCard({
   imgSrc = "https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/images/bg-8.png",
   title,
@@ -6459,8 +6621,8 @@ function AQCard({
   status,
   href = ""
 }) {
-  return /* @__PURE__ */ jsxs21(Card, { shadow: "sm", padding: "lg", radius: "md", withBorder: true, component: Link, href, children: [
-    /* @__PURE__ */ jsx36(Card.Section, { children: /* @__PURE__ */ jsx36(Center3, { children: /* @__PURE__ */ jsx36(
+  return /* @__PURE__ */ jsxs22(Card, { shadow: "sm", padding: "lg", radius: "md", withBorder: true, component: Link, href, children: [
+    /* @__PURE__ */ jsx39(Card.Section, { children: /* @__PURE__ */ jsx39(Center4, { children: /* @__PURE__ */ jsx39(
       Image,
       {
         src: imgSrc,
@@ -6470,19 +6632,19 @@ function AQCard({
         alt: "Norway"
       }
     ) }) }),
-    /* @__PURE__ */ jsxs21(MyFlexRow, { justify: "space-between", mt: "md", mb: "xs", children: [
-      /* @__PURE__ */ jsx36(Text8, { fw: 500, children: title }),
-      status && /* @__PURE__ */ jsx36(Badge2, { color: "violet.5", w: "150px", children: status })
+    /* @__PURE__ */ jsxs22(MyFlexRow, { justify: "space-between", mt: "md", mb: "xs", children: [
+      /* @__PURE__ */ jsx39(Text9, { fw: 500, children: title }),
+      status && /* @__PURE__ */ jsx39(Badge2, { color: "violet.5", w: "150px", children: status })
     ] }),
-    /* @__PURE__ */ jsx36(Text8, { size: "sm", c: "dimmed", lineClamp: 2, children: description }),
+    /* @__PURE__ */ jsx39(Text9, { size: "sm", c: "dimmed", lineClamp: 2, children: description }),
     children
   ] });
 }
 
 // src/components/DataDisplay/CardInformation/MyCardInformation.tsx
-import { Box as Box2, Flex, Group as Group10, Paper as Paper5, Text as Text9 } from "@mantine/core";
+import { Box as Box2, Flex as Flex3, Group as Group11, Paper as Paper5, Text as Text10 } from "@mantine/core";
 import { IconArrowDownRight, IconArrowUpRight } from "@tabler/icons-react";
-import { jsx as jsx37, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs23 } from "react/jsx-runtime";
 function MyCardInformation({
   title,
   value,
@@ -6492,17 +6654,17 @@ function MyCardInformation({
   diff = 0,
   extraControl
 }) {
-  return /* @__PURE__ */ jsxs22(
+  return /* @__PURE__ */ jsxs23(
     Paper5,
     {
       withBorder: true,
       p: "md",
       radius: "md",
       children: [
-        /* @__PURE__ */ jsxs22(Group10, { justify: "space-between", children: [
-          /* @__PURE__ */ jsxs22(Flex, { direction: "column", children: [
-            /* @__PURE__ */ jsx37(
-              Text9,
+        /* @__PURE__ */ jsxs23(Group11, { justify: "space-between", children: [
+          /* @__PURE__ */ jsxs23(Flex3, { direction: "column", children: [
+            /* @__PURE__ */ jsx40(
+              Text10,
               {
                 tt: "uppercase",
                 size: "lg",
@@ -6510,52 +6672,52 @@ function MyCardInformation({
                 children: title
               }
             ),
-            unit == "" ? /* @__PURE__ */ jsxs22(Text9, { size: "xs", style: { visibility: "hidden" }, children: [
+            unit == "" ? /* @__PURE__ */ jsxs23(Text10, { size: "xs", style: { visibility: "hidden" }, children: [
               "\u0110\u01A1n v\u1ECB: ",
-              /* @__PURE__ */ jsx37("strong", { children: unit })
-            ] }) : /* @__PURE__ */ jsxs22(Text9, { size: "xs", children: [
+              /* @__PURE__ */ jsx40("strong", { children: unit })
+            ] }) : /* @__PURE__ */ jsxs23(Text10, { size: "xs", children: [
               "\u0110\u01A1n v\u1ECB: ",
-              /* @__PURE__ */ jsx37("strong", { children: unit })
+              /* @__PURE__ */ jsx40("strong", { children: unit })
             ] })
           ] }),
-          /* @__PURE__ */ jsx37(Box2, { children: icon })
+          /* @__PURE__ */ jsx40(Box2, { children: icon })
         ] }),
-        /* @__PURE__ */ jsxs22(
-          Group10,
+        /* @__PURE__ */ jsxs23(
+          Group11,
           {
             mt: "5",
             align: "flex-end",
             gap: "xs",
             children: [
-              /* @__PURE__ */ jsx37(
-                Text9,
+              /* @__PURE__ */ jsx40(
+                Text10,
                 {
                   fw: 700,
                   fz: "h1",
                   children: value
                 }
               ),
-              /* @__PURE__ */ jsxs22(
-                Text9,
+              /* @__PURE__ */ jsxs23(
+                Text10,
                 {
                   mb: "2",
                   c: diff > 0 ? "teal" : "red",
                   fz: "h2",
                   fw: 500,
                   children: [
-                    /* @__PURE__ */ jsxs22("span", { children: [
+                    /* @__PURE__ */ jsxs23("span", { children: [
                       diff,
                       "%"
                     ] }),
-                    diff > 0 ? /* @__PURE__ */ jsx37(IconArrowUpRight, {}) : /* @__PURE__ */ jsx37(IconArrowDownRight, {})
+                    diff > 0 ? /* @__PURE__ */ jsx40(IconArrowUpRight, {}) : /* @__PURE__ */ jsx40(IconArrowDownRight, {})
                   ]
                 }
               )
             ]
           }
         ),
-        /* @__PURE__ */ jsxs22(Group10, { justify: "space-between", children: [
-          /* @__PURE__ */ jsx37(Text9, { tt: "uppercase", fz: "xs", c: "dimmed", children: description }),
+        /* @__PURE__ */ jsxs23(Group11, { justify: "space-between", children: [
+          /* @__PURE__ */ jsx40(Text10, { tt: "uppercase", fz: "xs", c: "dimmed", children: description }),
           extraControl
         ] })
       ]
@@ -6565,39 +6727,39 @@ function MyCardInformation({
 }
 
 // src/components/DataDisplay/IconText/MyIconText.tsx
-import { Group as Group11, Text as Text10 } from "@mantine/core";
-import { jsx as jsx38, jsxs as jsxs23 } from "react/jsx-runtime";
+import { Group as Group12, Text as Text11 } from "@mantine/core";
+import { jsx as jsx41, jsxs as jsxs24 } from "react/jsx-runtime";
 function MyIconText({ icon: Icon, text }) {
-  return /* @__PURE__ */ jsxs23(Group11, { wrap: "nowrap", gap: 10, mt: 3, children: [
-    Icon && /* @__PURE__ */ jsx38(Icon, { stroke: 1.5, size: 16 }),
-    /* @__PURE__ */ jsx38(Text10, { fz: "lg", c: "dimmed", children: text })
+  return /* @__PURE__ */ jsxs24(Group12, { wrap: "nowrap", gap: 10, mt: 3, children: [
+    Icon && /* @__PURE__ */ jsx41(Icon, { stroke: 1.5, size: 16 }),
+    /* @__PURE__ */ jsx41(Text11, { fz: "lg", c: "dimmed", children: text })
   ] });
 }
 
 // src/components/DataDisplay/NumberFormatter/MyNumberFormatter.tsx
 import { NumberFormatter } from "@mantine/core";
-import { jsx as jsx39 } from "react/jsx-runtime";
+import { jsx as jsx42 } from "react/jsx-runtime";
 function MyNumberFormatter(_a) {
   var rest = __objRest(_a, []);
-  return /* @__PURE__ */ jsx39(NumberFormatter, __spreadValues({ thousandSeparator: true, suffix: " VN\u0110" }, rest));
+  return /* @__PURE__ */ jsx42(NumberFormatter, __spreadValues({ thousandSeparator: true, suffix: " VN\u0110" }, rest));
 }
 
 // src/components/DataDisplay/StatCard/AQStatCard1.tsx
-import { Box as Box3, Button as Button12, Flex as Flex2, Group as Group12, Paper as Paper6, Text as Text11 } from "@mantine/core";
+import { Box as Box3, Button as Button13, Flex as Flex4, Group as Group13, Paper as Paper6, Text as Text12 } from "@mantine/core";
 import { IconArrowDownRight as IconArrowDownRight2, IconArrowUpRight as IconArrowUpRight2 } from "@tabler/icons-react";
-import { Fragment as Fragment11, jsx as jsx40, jsxs as jsxs24 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx43, jsxs as jsxs25 } from "react/jsx-runtime";
 function AQStatCard1({ title, value, unit = "", description, icons, diff }) {
-  return /* @__PURE__ */ jsx40(Fragment11, { children: /* @__PURE__ */ jsxs24(
+  return /* @__PURE__ */ jsx43(Fragment12, { children: /* @__PURE__ */ jsxs25(
     Paper6,
     {
       withBorder: true,
       p: "md",
       radius: "md",
       children: [
-        /* @__PURE__ */ jsxs24(Group12, { justify: "space-between", children: [
-          /* @__PURE__ */ jsxs24(Flex2, { direction: "column", children: [
-            /* @__PURE__ */ jsx40(
-              Text11,
+        /* @__PURE__ */ jsxs25(Group13, { justify: "space-between", children: [
+          /* @__PURE__ */ jsxs25(Flex4, { direction: "column", children: [
+            /* @__PURE__ */ jsx43(
+              Text12,
               {
                 tt: "uppercase",
                 size: "lg",
@@ -6605,54 +6767,54 @@ function AQStatCard1({ title, value, unit = "", description, icons, diff }) {
                 children: title
               }
             ),
-            unit == "" ? /* @__PURE__ */ jsxs24(Text11, { size: "xs", style: { visibility: "hidden" }, children: [
+            unit == "" ? /* @__PURE__ */ jsxs25(Text12, { size: "xs", style: { visibility: "hidden" }, children: [
               "\u0110\u01A1n v\u1ECB: ",
-              /* @__PURE__ */ jsx40("strong", { children: unit })
-            ] }) : /* @__PURE__ */ jsxs24(Text11, { size: "xs", children: [
+              /* @__PURE__ */ jsx43("strong", { children: unit })
+            ] }) : /* @__PURE__ */ jsxs25(Text12, { size: "xs", children: [
               "\u0110\u01A1n v\u1ECB: ",
-              /* @__PURE__ */ jsx40("strong", { children: unit })
+              /* @__PURE__ */ jsx43("strong", { children: unit })
             ] })
           ] }),
-          /* @__PURE__ */ jsx40(Box3, { children: icons })
+          /* @__PURE__ */ jsx43(Box3, { children: icons })
         ] }),
-        /* @__PURE__ */ jsxs24(
-          Group12,
+        /* @__PURE__ */ jsxs25(
+          Group13,
           {
             mt: "5",
             align: "flex-end",
             gap: "xs",
             children: [
-              /* @__PURE__ */ jsx40(
-                Text11,
+              /* @__PURE__ */ jsx43(
+                Text12,
                 {
                   fw: 700,
                   fz: "h1",
                   children: value
                 }
               ),
-              /* @__PURE__ */ jsxs24(
-                Text11,
+              /* @__PURE__ */ jsxs25(
+                Text12,
                 {
                   mb: "2",
                   c: diff > 0 ? "teal" : "red",
                   fz: "h2",
                   fw: 500,
                   children: [
-                    /* @__PURE__ */ jsxs24("span", { children: [
+                    /* @__PURE__ */ jsxs25("span", { children: [
                       diff,
                       "%"
                     ] }),
-                    diff > 0 ? /* @__PURE__ */ jsx40(IconArrowUpRight2, {}) : /* @__PURE__ */ jsx40(IconArrowDownRight2, {})
+                    diff > 0 ? /* @__PURE__ */ jsx43(IconArrowUpRight2, {}) : /* @__PURE__ */ jsx43(IconArrowDownRight2, {})
                   ]
                 }
               )
             ]
           }
         ),
-        /* @__PURE__ */ jsxs24(Group12, { justify: "space-between", children: [
-          /* @__PURE__ */ jsx40(Text11, { tt: "uppercase", fz: "xs", c: "dimmed", children: description }),
-          /* @__PURE__ */ jsx40(
-            Button12,
+        /* @__PURE__ */ jsxs25(Group13, { justify: "space-between", children: [
+          /* @__PURE__ */ jsx43(Text12, { tt: "uppercase", fz: "xs", c: "dimmed", children: description }),
+          /* @__PURE__ */ jsx43(
+            Button13,
             {
               variant: "light",
               size: "xs",
@@ -6667,7 +6829,7 @@ function AQStatCard1({ title, value, unit = "", description, icons, diff }) {
 }
 
 // src/components/FaviconSetter/FaviconSetter.tsx
-import { useEffect as useEffect6 } from "react";
+import { useEffect as useEffect7 } from "react";
 
 // src/components/Layouts/BasicAppShell/useS_BasicAppShell.ts
 var useStore2 = createGenericStore({
@@ -6719,7 +6881,7 @@ function useS_BasicAppShell() {
 function FaviconSetter() {
   var _a;
   const store = useS_BasicAppShell();
-  useEffect6(() => {
+  useEffect7(() => {
     var _a2, _b, _c;
     if (!((_a2 = store.state.faviconFileDetail) == null ? void 0 : _a2.fileBase64String)) return;
     try {
@@ -6742,20 +6904,20 @@ function FaviconSetter() {
 
 // src/components/Inputs/DateInput/MyDateInput.tsx
 import { DateInput } from "@mantine/dates";
-import { jsx as jsx41 } from "react/jsx-runtime";
+import { jsx as jsx44 } from "react/jsx-runtime";
 function MyDateInput(_a) {
   var _b = _a, { label } = _b, rest = __objRest(_b, ["label"]);
-  return /* @__PURE__ */ jsx41(DateInput, __spreadValues({ label, placeholder: label ? `Ch\u1ECDn ${label == null ? void 0 : label.toLowerCase()}` : "" }, rest));
+  return /* @__PURE__ */ jsx44(DateInput, __spreadValues({ label, placeholder: label ? `Ch\u1ECDn ${label == null ? void 0 : label.toLowerCase()}` : "" }, rest));
 }
 
 // src/components/Inputs/Fieldset/MyFieldset.tsx
 import {
   Fieldset as Fieldset4,
-  Group as Group13,
-  Text as Text12,
+  Group as Group14,
+  Text as Text13,
   useMantineColorScheme as useMantineColorScheme2
 } from "@mantine/core";
-import { jsx as jsx42, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs26 } from "react/jsx-runtime";
 function MyFieldset(_a) {
   var _b = _a, {
     children,
@@ -6784,10 +6946,10 @@ function MyFieldset(_a) {
   const mergedStyles = typeof styles === "function" ? styles : __spreadProps(__spreadValues({}, styles), {
     legend: __spreadValues(__spreadValues({}, defaultLegendStyles), styles == null ? void 0 : styles.legend)
   });
-  return /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsx45(
     Fieldset4,
     __spreadProps(__spreadValues({
-      legend: customLegend != null ? customLegend : /* @__PURE__ */ jsx42(Group13, { gap: "xs", children: /* @__PURE__ */ jsxs25(Text12, { fw: 600, children: [
+      legend: customLegend != null ? customLegend : /* @__PURE__ */ jsx45(Group14, { gap: "xs", children: /* @__PURE__ */ jsxs26(Text13, { fw: 600, children: [
         " ",
         title,
         " "
@@ -6802,13 +6964,13 @@ function MyFieldset(_a) {
 // src/components/Inputs/FileInput/MyFileInput.tsx
 import { FileInput as FileInput3 } from "@mantine/core";
 import { IconFile } from "@tabler/icons-react";
-import { jsx as jsx43 } from "react/jsx-runtime";
+import { jsx as jsx46 } from "react/jsx-runtime";
 function MyFileInput(_a) {
   var _b = _a, { label } = _b, rest = __objRest(_b, ["label"]);
-  return /* @__PURE__ */ jsx43(
+  return /* @__PURE__ */ jsx46(
     FileInput3,
     __spreadValues({
-      rightSection: /* @__PURE__ */ jsx43(IconFile, {}),
+      rightSection: /* @__PURE__ */ jsx46(IconFile, {}),
       label,
       placeholder: label ? `Ch\u1ECDn ${label == null ? void 0 : label.toLowerCase()}` : ""
     }, rest)
@@ -6818,26 +6980,26 @@ function MyFileInput(_a) {
 // src/components/Inputs/NumberInput/MyNumberInput.tsx
 import { NumberInput as NumberInput2 } from "@mantine/core";
 import { IconNumbers } from "@tabler/icons-react";
-import { jsx as jsx44 } from "react/jsx-runtime";
+import { jsx as jsx47 } from "react/jsx-runtime";
 function MyNumberInput(_a) {
   var _b = _a, { minValue, label } = _b, rest = __objRest(_b, ["minValue", "label"]);
-  return /* @__PURE__ */ jsx44(
+  return /* @__PURE__ */ jsx47(
     NumberInput2,
     __spreadValues({
       label,
       min: minValue ? minValue : 0,
       placeholder: label ? `Nh\u1EADp ${label == null ? void 0 : label.toLowerCase()}` : "",
-      rightSection: /* @__PURE__ */ jsx44(IconNumbers, {})
+      rightSection: /* @__PURE__ */ jsx47(IconNumbers, {})
     }, rest)
   );
 }
 
 // src/components/Inputs/TextArea/MyTextArea.tsx
 import { Textarea } from "@mantine/core";
-import { jsx as jsx45 } from "react/jsx-runtime";
+import { jsx as jsx48 } from "react/jsx-runtime";
 function MyTextArea(_a) {
   var _b = _a, { label } = _b, rest = __objRest(_b, ["label"]);
-  return /* @__PURE__ */ jsx45(Textarea, __spreadValues({ label, placeholder: label ? `Nh\u1EADp ${label == null ? void 0 : label.toLowerCase()}` : "" }, rest));
+  return /* @__PURE__ */ jsx48(Textarea, __spreadValues({ label, placeholder: label ? `Nh\u1EADp ${label == null ? void 0 : label.toLowerCase()}` : "" }, rest));
 }
 
 // src/components/Inputs/TextEditor/MyTextEditor.tsx
@@ -6852,8 +7014,8 @@ import TextAlign from "@tiptap/extension-text-align";
 import Underline from "@tiptap/extension-underline";
 import { useEditor } from "@tiptap/react";
 import StarterKit from "@tiptap/starter-kit";
-import { useEffect as useEffect7, useState as useState9 } from "react";
-import { jsx as jsx46, jsxs as jsxs26 } from "react/jsx-runtime";
+import { useEffect as useEffect8, useState as useState9 } from "react";
+import { jsx as jsx49, jsxs as jsxs27 } from "react/jsx-runtime";
 function MyTextEditor(_a) {
   var _b = _a, {
     autoHiddenToolBar = false,
@@ -6954,48 +7116,48 @@ function MyTextEditor(_a) {
       }
     }
   }, rest));
-  useEffect7(() => {
+  useEffect8(() => {
     if (editor && value !== editor.getHTML()) {
       editor.commands.setContent(value);
     }
   }, [value, editor]);
-  return /* @__PURE__ */ jsx46(Input.Wrapper, __spreadProps(__spreadValues({ label, flex: 1, error, withAsterisk }, inputWrapperProps), { children: /* @__PURE__ */ jsxs26(RichTextEditor, __spreadProps(__spreadValues({ editor, style: { border: error && "1px solid #e03131" } }, richTextEditorProps), { children: [
-    /* @__PURE__ */ jsxs26(RichTextEditor.Toolbar, { hidden: hiddenToolBar, sticky: true, stickyOffset: 60, children: [
-      /* @__PURE__ */ jsxs26(RichTextEditor.ControlsGroup, { children: [
-        /* @__PURE__ */ jsx46(RichTextEditor.Bold, {}),
-        /* @__PURE__ */ jsx46(RichTextEditor.Italic, {}),
-        /* @__PURE__ */ jsx46(RichTextEditor.Underline, {}),
-        /* @__PURE__ */ jsx46(RichTextEditor.Strikethrough, {}),
-        /* @__PURE__ */ jsx46(RichTextEditor.ClearFormatting, {}),
-        /* @__PURE__ */ jsx46(RichTextEditor.Highlight, {}),
-        /* @__PURE__ */ jsx46(RichTextEditor.Code, {})
+  return /* @__PURE__ */ jsx49(Input.Wrapper, __spreadProps(__spreadValues({ label, flex: 1, error, withAsterisk }, inputWrapperProps), { children: /* @__PURE__ */ jsxs27(RichTextEditor, __spreadProps(__spreadValues({ editor, style: { border: error && "1px solid #e03131" } }, richTextEditorProps), { children: [
+    /* @__PURE__ */ jsxs27(RichTextEditor.Toolbar, { hidden: hiddenToolBar, sticky: true, stickyOffset: 60, children: [
+      /* @__PURE__ */ jsxs27(RichTextEditor.ControlsGroup, { children: [
+        /* @__PURE__ */ jsx49(RichTextEditor.Bold, {}),
+        /* @__PURE__ */ jsx49(RichTextEditor.Italic, {}),
+        /* @__PURE__ */ jsx49(RichTextEditor.Underline, {}),
+        /* @__PURE__ */ jsx49(RichTextEditor.Strikethrough, {}),
+        /* @__PURE__ */ jsx49(RichTextEditor.ClearFormatting, {}),
+        /* @__PURE__ */ jsx49(RichTextEditor.Highlight, {}),
+        /* @__PURE__ */ jsx49(RichTextEditor.Code, {})
       ] }),
-      /* @__PURE__ */ jsxs26(RichTextEditor.ControlsGroup, { children: [
-        /* @__PURE__ */ jsx46(RichTextEditor.H1, {}),
-        /* @__PURE__ */ jsx46(RichTextEditor.H2, {}),
-        /* @__PURE__ */ jsx46(RichTextEditor.H3, {}),
-        /* @__PURE__ */ jsx46(RichTextEditor.H4, {})
+      /* @__PURE__ */ jsxs27(RichTextEditor.ControlsGroup, { children: [
+        /* @__PURE__ */ jsx49(RichTextEditor.H1, {}),
+        /* @__PURE__ */ jsx49(RichTextEditor.H2, {}),
+        /* @__PURE__ */ jsx49(RichTextEditor.H3, {}),
+        /* @__PURE__ */ jsx49(RichTextEditor.H4, {})
       ] }),
-      /* @__PURE__ */ jsxs26(RichTextEditor.ControlsGroup, { children: [
-        /* @__PURE__ */ jsx46(RichTextEditor.Blockquote, {}),
-        /* @__PURE__ */ jsx46(RichTextEditor.Hr, {}),
-        /* @__PURE__ */ jsx46(RichTextEditor.BulletList, {}),
-        /* @__PURE__ */ jsx46(RichTextEditor.OrderedList, {}),
-        /* @__PURE__ */ jsx46(RichTextEditor.Subscript, {}),
-        /* @__PURE__ */ jsx46(RichTextEditor.Superscript, {})
+      /* @__PURE__ */ jsxs27(RichTextEditor.ControlsGroup, { children: [
+        /* @__PURE__ */ jsx49(RichTextEditor.Blockquote, {}),
+        /* @__PURE__ */ jsx49(RichTextEditor.Hr, {}),
+        /* @__PURE__ */ jsx49(RichTextEditor.BulletList, {}),
+        /* @__PURE__ */ jsx49(RichTextEditor.OrderedList, {}),
+        /* @__PURE__ */ jsx49(RichTextEditor.Subscript, {}),
+        /* @__PURE__ */ jsx49(RichTextEditor.Superscript, {})
       ] }),
-      /* @__PURE__ */ jsxs26(RichTextEditor.ControlsGroup, { children: [
-        /* @__PURE__ */ jsx46(RichTextEditor.Link, {}),
-        /* @__PURE__ */ jsx46(RichTextEditor.Unlink, {})
+      /* @__PURE__ */ jsxs27(RichTextEditor.ControlsGroup, { children: [
+        /* @__PURE__ */ jsx49(RichTextEditor.Link, {}),
+        /* @__PURE__ */ jsx49(RichTextEditor.Unlink, {})
       ] }),
-      /* @__PURE__ */ jsxs26(RichTextEditor.ControlsGroup, { children: [
-        /* @__PURE__ */ jsx46(RichTextEditor.AlignLeft, {}),
-        /* @__PURE__ */ jsx46(RichTextEditor.AlignCenter, {}),
-        /* @__PURE__ */ jsx46(RichTextEditor.AlignJustify, {}),
-        /* @__PURE__ */ jsx46(RichTextEditor.AlignRight, {})
+      /* @__PURE__ */ jsxs27(RichTextEditor.ControlsGroup, { children: [
+        /* @__PURE__ */ jsx49(RichTextEditor.AlignLeft, {}),
+        /* @__PURE__ */ jsx49(RichTextEditor.AlignCenter, {}),
+        /* @__PURE__ */ jsx49(RichTextEditor.AlignJustify, {}),
+        /* @__PURE__ */ jsx49(RichTextEditor.AlignRight, {})
       ] })
     ] }),
-    /* @__PURE__ */ jsx46(
+    /* @__PURE__ */ jsx49(
       ScrollArea2.Autosize,
       {
         onMouseDown: () => {
@@ -7010,14 +7172,14 @@ function MyTextEditor(_a) {
           setHiddenToolBar(false);
         },
         style: { cursor: "text", maxHeight: "400px" },
-        children: /* @__PURE__ */ jsx46(RichTextEditor.Content, { mih: contentHeight })
+        children: /* @__PURE__ */ jsx49(RichTextEditor.Content, { mih: contentHeight })
       }
     )
   ] })) }));
 }
 
 // src/modules-features/authenticate/F_authenticate_Logout.tsx
-import { Button as Button13 } from "@mantine/core";
+import { Button as Button14 } from "@mantine/core";
 import { IconLogout } from "@tabler/icons-react";
 import { useRouter as useRouter3 } from "next/navigation";
 
@@ -7032,14 +7194,14 @@ function useS_authenticate() {
 }
 
 // src/modules-features/authenticate/F_authenticate_Logout.tsx
-import { jsx as jsx47 } from "react/jsx-runtime";
+import { jsx as jsx50 } from "react/jsx-runtime";
 function F_authenticate_Logout({ redirectURL = "/auth/login" }) {
   const router = useRouter3();
   const S_Authenticate = useS_authenticate();
-  return /* @__PURE__ */ jsx47(Button13, { onClick: () => {
+  return /* @__PURE__ */ jsx50(Button14, { onClick: () => {
     S_Authenticate.setProperty("token", "");
     router.replace(redirectURL);
-  }, leftSection: /* @__PURE__ */ jsx47(IconLogout, {}), fullWidth: true, justify: "start", variant: "subtle", children: "\u0110\u0103ng xu\u1EA5t" });
+  }, leftSection: /* @__PURE__ */ jsx50(IconLogout, {}), fullWidth: true, justify: "start", variant: "subtle", children: "\u0110\u0103ng xu\u1EA5t" });
 }
 
 // src/components/Layouts/BasicAppShell/BasicAppShell.tsx
@@ -7048,11 +7210,11 @@ import {
   AppShell,
   Badge as Badge3,
   Divider as Divider2,
-  Group as Group14,
+  Group as Group15,
   Image as Image3,
   NavLink,
   ScrollArea as ScrollArea3,
-  Text as Text13,
+  Text as Text14,
   Tooltip as Tooltip5
 } from "@mantine/core";
 import { useFavicon, useMediaQuery } from "@mantine/hooks";
@@ -7063,8 +7225,8 @@ import {
 } from "@tabler/icons-react";
 import Link3 from "next/link";
 import { usePathname as usePathname2 } from "next/navigation";
-import { useEffect as useEffect8, useMemo as useMemo3, useState as useState10 } from "react";
-import { Fragment as Fragment12, jsx as jsx48, jsxs as jsxs27 } from "react/jsx-runtime";
+import { useEffect as useEffect9, useMemo as useMemo3, useState as useState10 } from "react";
+import { Fragment as Fragment13, jsx as jsx51, jsxs as jsxs28 } from "react/jsx-runtime";
 function findBreadcrumbPath(items, currentPath, parents = []) {
   for (const item of items) {
     if (item.link === currentPath) {
@@ -7079,13 +7241,13 @@ function findBreadcrumbPath(items, currentPath, parents = []) {
 }
 function getRightSection(status) {
   if (status === "Prototype")
-    return /* @__PURE__ */ jsx48(Badge3, { styles: { root: { cursor: "pointer" } }, radius: "xs", color: "pink", circle: true, children: "P" });
+    return /* @__PURE__ */ jsx51(Badge3, { styles: { root: { cursor: "pointer" } }, radius: "xs", color: "pink", circle: true, children: "P" });
   if (status === "New")
-    return /* @__PURE__ */ jsx48(Badge3, { styles: { root: { cursor: "pointer" } }, radius: "xs", circle: true, children: "N" });
+    return /* @__PURE__ */ jsx51(Badge3, { styles: { root: { cursor: "pointer" } }, radius: "xs", circle: true, children: "N" });
   if (status === "Menu")
-    return /* @__PURE__ */ jsx48(Badge3, { styles: { root: { cursor: "pointer" } }, radius: "xs", color: "gray", circle: true, children: "M" });
+    return /* @__PURE__ */ jsx51(Badge3, { styles: { root: { cursor: "pointer" } }, radius: "xs", color: "gray", circle: true, children: "M" });
   if (status === "Change")
-    return /* @__PURE__ */ jsx48(Badge3, { styles: { root: { cursor: "pointer" } }, radius: "xs", color: "green", circle: true, children: "C" });
+    return /* @__PURE__ */ jsx51(Badge3, { styles: { root: { cursor: "pointer" } }, radius: "xs", color: "green", circle: true, children: "C" });
   return null;
 }
 function RenderNavLinks({
@@ -7095,14 +7257,14 @@ function RenderNavLinks({
   const pathName = usePathname2();
   const index = pathName.split("/", 2).join("/").length;
   const extractPathName = pathName.slice(index).replace("/", "");
-  return /* @__PURE__ */ jsx48(Fragment12, { children: items.map((item, index2) => /* @__PURE__ */ jsx48(
+  return /* @__PURE__ */ jsx51(Fragment13, { children: items.map((item, index2) => /* @__PURE__ */ jsx51(
     NavLink,
     {
       active: extractPathName === item.link,
       component: Link3,
       opened: basicAppShellStore.state.groupMenuOpenId.includes(item.label),
       href: `/${pathName.split("/")[1]}/${item.link}` || "#",
-      label: /* @__PURE__ */ jsxs27(MyFlexRow, { justify: "space-between", children: [
+      label: /* @__PURE__ */ jsxs28(MyFlexRow, { justify: "space-between", children: [
         item.label,
         " ",
         getRightSection(item.status)
@@ -7114,7 +7276,7 @@ function RenderNavLinks({
           return;
         }
       },
-      children: item.links && /* @__PURE__ */ jsx48(RenderNavLinks, { items: item.links })
+      children: item.links && /* @__PURE__ */ jsx51(RenderNavLinks, { items: item.links })
     },
     index2
   )) });
@@ -7201,7 +7363,7 @@ function BasicAppShell({ children, menu, extraTopRight, title }) {
     return result;
   }, [menu]);
   useFavicon(faviconUrl);
-  useEffect8(() => {
+  useEffect9(() => {
     var _a2;
     const data = GetAQModule_query.data;
     if (!data) return;
@@ -7223,12 +7385,12 @@ function BasicAppShell({ children, menu, extraTopRight, title }) {
       };
     }
   }, [GetAQModule_query.data]);
-  useEffect8(() => {
+  useEffect9(() => {
     const data = GetAQModule_query.data;
     if (!data) return;
     document.title = data.name || "";
   }, [GetAQModule_query.data]);
-  useEffect8(() => {
+  useEffect9(() => {
     const linkItem = allChildItems.find((item) => pathName.includes(item.link));
     const breadcrumb = findBreadcrumbPath(menu, linkItem == null ? void 0 : linkItem.link);
     basicAppShellStore.setProperty("breadcrumb", breadcrumb);
@@ -7237,7 +7399,7 @@ function BasicAppShell({ children, menu, extraTopRight, title }) {
     basicAppShellStore.setProperty("note", linkItem == null ? void 0 : linkItem.note);
     basicAppShellStore.setProperty("status", linkItem == null ? void 0 : linkItem.status);
   }, [pathName]);
-  return /* @__PURE__ */ jsxs27(
+  return /* @__PURE__ */ jsxs28(
     AppShell,
     {
       header: { height: 60 },
@@ -7251,77 +7413,77 @@ function BasicAppShell({ children, menu, extraTopRight, title }) {
       },
       padding: "md",
       children: [
-        /* @__PURE__ */ jsx48(AppShell.Header, { children: media ? /* @__PURE__ */ jsxs27(Group14, { h: "100%", px: "md", justify: "space-between", align: "center", children: [
-          /* @__PURE__ */ jsxs27(Group14, { h: "100%", children: [
-            /* @__PURE__ */ jsx48(
+        /* @__PURE__ */ jsx51(AppShell.Header, { children: media ? /* @__PURE__ */ jsxs28(Group15, { h: "100%", px: "md", justify: "space-between", align: "center", children: [
+          /* @__PURE__ */ jsxs28(Group15, { h: "100%", children: [
+            /* @__PURE__ */ jsx51(
               Tooltip5,
               {
                 label: basicAppShellStore.state.opened ? "\u1EA8n thanh menu" : "Hi\u1EC7n thanh menu",
-                children: /* @__PURE__ */ jsx48(
+                children: /* @__PURE__ */ jsx51(
                   ActionIcon11,
                   {
                     size: "lg",
                     radius: "md",
                     variant: "default",
                     onClick: basicAppShellStore.toggle,
-                    children: basicAppShellStore.state.opened ? /* @__PURE__ */ jsx48(IconLayoutSidebarLeftExpand, {}) : /* @__PURE__ */ jsx48(IconLayoutSidebarLeftCollapse, {})
+                    children: basicAppShellStore.state.opened ? /* @__PURE__ */ jsx51(IconLayoutSidebarLeftExpand, {}) : /* @__PURE__ */ jsx51(IconLayoutSidebarLeftCollapse, {})
                   }
                 )
               }
             ),
-            /* @__PURE__ */ jsx48(Tooltip5, { label: "\u0110\xF3ng t\u1EA5t c\u1EA3 menu", children: /* @__PURE__ */ jsx48(
+            /* @__PURE__ */ jsx51(Tooltip5, { label: "\u0110\xF3ng t\u1EA5t c\u1EA3 menu", children: /* @__PURE__ */ jsx51(
               ActionIcon11,
               {
                 size: "lg",
                 radius: "md",
                 variant: "default",
                 onClick: () => basicAppShellStore.clearGroupMenuOpenId(),
-                children: /* @__PURE__ */ jsx48(IconLibraryMinus, {})
+                children: /* @__PURE__ */ jsx51(IconLibraryMinus, {})
               }
             ) })
           ] }),
-          /* @__PURE__ */ jsx48(
-            Group14,
+          /* @__PURE__ */ jsx51(
+            Group15,
             {
               style: {
                 position: "absolute",
                 left: "50%",
                 transform: "translateX(-50%)"
               },
-              children: /* @__PURE__ */ jsx48(Text13, { c: "green", fw: "bold", size: "sm", children: title ? title : `${basicAppShellStore.state.moduleCode} - ${basicAppShellStore.state.moduleName}` })
+              children: /* @__PURE__ */ jsx51(Text14, { c: "green", fw: "bold", size: "sm", children: title ? title : `${basicAppShellStore.state.moduleCode} - ${basicAppShellStore.state.moduleName}` })
             }
           ),
-          /* @__PURE__ */ jsxs27(Group14, { children: [
+          /* @__PURE__ */ jsxs28(Group15, { children: [
             extraTopRight,
-            /* @__PURE__ */ jsx48(MySwitchTheme, {})
+            /* @__PURE__ */ jsx51(MySwitchTheme, {})
           ] })
         ] }) : (
           // For mobile screens - simplified layout
-          /* @__PURE__ */ jsxs27(Group14, { h: "100%", px: "md", justify: "space-between", children: [
-            /* @__PURE__ */ jsx48(
+          /* @__PURE__ */ jsxs28(Group15, { h: "100%", px: "md", justify: "space-between", children: [
+            /* @__PURE__ */ jsx51(
               ActionIcon11,
               {
                 size: "lg",
                 radius: "md",
                 variant: "default",
                 onClick: basicAppShellStore.toggle,
-                children: basicAppShellStore.state.opened ? /* @__PURE__ */ jsx48(IconLayoutSidebarLeftExpand, {}) : /* @__PURE__ */ jsx48(IconLayoutSidebarLeftCollapse, {})
+                children: basicAppShellStore.state.opened ? /* @__PURE__ */ jsx51(IconLayoutSidebarLeftExpand, {}) : /* @__PURE__ */ jsx51(IconLayoutSidebarLeftCollapse, {})
               }
             ),
-            /* @__PURE__ */ jsx48(Text13, { c: "green", fw: "bold", size: "sm", children: title ? title : `${basicAppShellStore.state.moduleCode} - ${basicAppShellStore.state.moduleName}` }),
-            /* @__PURE__ */ jsxs27(Group14, { children: [
+            /* @__PURE__ */ jsx51(Text14, { c: "green", fw: "bold", size: "sm", children: title ? title : `${basicAppShellStore.state.moduleCode} - ${basicAppShellStore.state.moduleName}` }),
+            /* @__PURE__ */ jsxs28(Group15, { children: [
               extraTopRight,
-              /* @__PURE__ */ jsx48(MySwitchTheme, {})
+              /* @__PURE__ */ jsx51(MySwitchTheme, {})
             ] })
           ] })
         ) }),
-        /* @__PURE__ */ jsxs27(AppShell.Navbar, { children: [
-          /* @__PURE__ */ jsx48(MyAppSpotlight, { menu }),
-          /* @__PURE__ */ jsx48(AppShell.Section, { grow: true, component: ScrollArea3, p: 5, children: /* @__PURE__ */ jsx48(RenderNavLinks, { items: menu }) }),
-          /* @__PURE__ */ jsxs27(AppShell.Section, { px: "md", children: [
-            /* @__PURE__ */ jsx48(Divider2, {}),
-            /* @__PURE__ */ jsx48(F_authenticate_Logout, {}),
-            /* @__PURE__ */ jsx48(
+        /* @__PURE__ */ jsxs28(AppShell.Navbar, { children: [
+          /* @__PURE__ */ jsx51(MyAppSpotlight, { menu }),
+          /* @__PURE__ */ jsx51(AppShell.Section, { grow: true, component: ScrollArea3, p: 5, children: /* @__PURE__ */ jsx51(RenderNavLinks, { items: menu }) }),
+          /* @__PURE__ */ jsxs28(AppShell.Section, { px: "md", children: [
+            /* @__PURE__ */ jsx51(Divider2, {}),
+            /* @__PURE__ */ jsx51(F_authenticate_Logout, {}),
+            /* @__PURE__ */ jsx51(
               Image3,
               {
                 fit: "contain",
@@ -7335,7 +7497,7 @@ function BasicAppShell({ children, menu, extraTopRight, title }) {
             )
           ] })
         ] }),
-        /* @__PURE__ */ jsx48(
+        /* @__PURE__ */ jsx51(
           AppShell.Main,
           {
             bg: "light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-8))",
@@ -7389,25 +7551,25 @@ function utils_layout_getItemsWithoutLinks(menu) {
 }
 
 // src/components/Layouts/Container/MyContainer.tsx
-import { Container, Flex as Flex3 } from "@mantine/core";
-import { jsx as jsx49 } from "react/jsx-runtime";
+import { Container, Flex as Flex5 } from "@mantine/core";
+import { jsx as jsx52 } from "react/jsx-runtime";
 function MyContainer(_a) {
   var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ jsx49(Container, __spreadProps(__spreadValues({ fluid: true }, rest), { children: /* @__PURE__ */ jsx49(Flex3, { direction: "column", children }) }));
+  return /* @__PURE__ */ jsx52(Container, __spreadProps(__spreadValues({ fluid: true }, rest), { children: /* @__PURE__ */ jsx52(Flex5, { direction: "column", children }) }));
 }
 
 // src/components/Layouts/HeaderMegaMenu/HeaderMegaMenu.tsx
 import {
   Box as Box4,
   Burger,
-  Button as Button14,
+  Button as Button15,
   Container as Container2,
   Divider as Divider3,
   Drawer,
-  Group as Group15,
+  Group as Group16,
   Image as Image4,
   ScrollArea as ScrollArea4,
-  Text as Text14,
+  Text as Text15,
   TextInput as TextInput3,
   ThemeIcon,
   UnstyledButton,
@@ -7439,7 +7601,7 @@ function useHeaderMegaMenuStore() {
 }
 
 // src/components/Layouts/HeaderMegaMenu/HeaderMegaMenu.tsx
-import { jsx as jsx50, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx53, jsxs as jsxs29 } from "react/jsx-runtime";
 var mockdata = [
   {
     icon: IconCode,
@@ -7477,27 +7639,27 @@ function HeaderMegaMenu({ children, menus }) {
   const [linksOpened, { toggle: toggleLinks }] = useDisclosure11(false);
   const HeaderMegaMenuStore = useHeaderMegaMenuStore();
   const theme = useMantineTheme();
-  const links = mockdata.map((item) => /* @__PURE__ */ jsx50(UnstyledButton, { className: css_default.subLink, children: /* @__PURE__ */ jsxs28(Group15, { wrap: "nowrap", align: "flex-start", children: [
-    /* @__PURE__ */ jsx50(ThemeIcon, { size: 34, variant: "default", radius: "md", children: /* @__PURE__ */ jsx50(item.icon, { size: 22, color: theme.colors.blue[6] }) }),
-    /* @__PURE__ */ jsxs28("div", { children: [
-      /* @__PURE__ */ jsx50(Text14, { size: "sm", fw: 500, children: item.title }),
-      /* @__PURE__ */ jsx50(Text14, { size: "xs", c: "dimmed", children: item.description })
+  const links = mockdata.map((item) => /* @__PURE__ */ jsx53(UnstyledButton, { className: css_default.subLink, children: /* @__PURE__ */ jsxs29(Group16, { wrap: "nowrap", align: "flex-start", children: [
+    /* @__PURE__ */ jsx53(ThemeIcon, { size: 34, variant: "default", radius: "md", children: /* @__PURE__ */ jsx53(item.icon, { size: 22, color: theme.colors.blue[6] }) }),
+    /* @__PURE__ */ jsxs29("div", { children: [
+      /* @__PURE__ */ jsx53(Text15, { size: "sm", fw: 500, children: item.title }),
+      /* @__PURE__ */ jsx53(Text15, { size: "xs", c: "dimmed", children: item.description })
     ] })
   ] }) }, item.title));
-  return /* @__PURE__ */ jsxs28(Box4, { children: [
-    /* @__PURE__ */ jsx50("header", { className: css_default.header, children: /* @__PURE__ */ jsxs28(Group15, { justify: "space-between", h: "100%", children: [
-      /* @__PURE__ */ jsxs28(Group15, { children: [
-        /* @__PURE__ */ jsx50(Image4, { src: "/imgs/0/IMG0LogoAQTech.png", h: 30, alt: "", w: "auto" }),
-        /* @__PURE__ */ jsx50(Group15, { h: "100%", gap: 5, visibleFrom: "sm", children: menus == null ? void 0 : menus.map((item, idx) => /* @__PURE__ */ jsx50(Button14, { component: Link4, href: item.href, variant: HeaderMegaMenuStore.state.name == item.label ? "light" : "subtle", onClick: () => HeaderMegaMenuStore.setState({ name: item.label }), children: item.label }, idx)) })
+  return /* @__PURE__ */ jsxs29(Box4, { children: [
+    /* @__PURE__ */ jsx53("header", { className: css_default.header, children: /* @__PURE__ */ jsxs29(Group16, { justify: "space-between", h: "100%", children: [
+      /* @__PURE__ */ jsxs29(Group16, { children: [
+        /* @__PURE__ */ jsx53(Image4, { src: "/imgs/0/IMG0LogoAQTech.png", h: 30, alt: "", w: "auto" }),
+        /* @__PURE__ */ jsx53(Group16, { h: "100%", gap: 5, visibleFrom: "sm", children: menus == null ? void 0 : menus.map((item, idx) => /* @__PURE__ */ jsx53(Button15, { component: Link4, href: item.href, variant: HeaderMegaMenuStore.state.name == item.label ? "light" : "subtle", onClick: () => HeaderMegaMenuStore.setState({ name: item.label }), children: item.label }, idx)) })
       ] }),
-      /* @__PURE__ */ jsxs28(Group15, { children: [
-        /* @__PURE__ */ jsx50(TextInput3, { placeholder: "T\xECm ki\u1EBFm", leftSection: /* @__PURE__ */ jsx50(IconSearch2, {}), radius: "xl", w: "250px" }),
-        /* @__PURE__ */ jsx50(MySwitchTheme, {})
+      /* @__PURE__ */ jsxs29(Group16, { children: [
+        /* @__PURE__ */ jsx53(TextInput3, { placeholder: "T\xECm ki\u1EBFm", leftSection: /* @__PURE__ */ jsx53(IconSearch2, {}), radius: "xl", w: "250px" }),
+        /* @__PURE__ */ jsx53(MySwitchTheme, {})
       ] }),
-      /* @__PURE__ */ jsx50(Burger, { opened: drawerOpened, onClick: toggleDrawer, hiddenFrom: "sm" })
+      /* @__PURE__ */ jsx53(Burger, { opened: drawerOpened, onClick: toggleDrawer, hiddenFrom: "sm" })
     ] }) }),
-    /* @__PURE__ */ jsx50(Container2, { fluid: true, pt: "sm", pb: "md", bg: const_object_colors.mantineBackgroundSecondary, mih: "93vh", children }),
-    /* @__PURE__ */ jsx50(
+    /* @__PURE__ */ jsx53(Container2, { fluid: true, pt: "sm", pb: "md", bg: const_object_colors.mantineBackgroundSecondary, mih: "93vh", children }),
+    /* @__PURE__ */ jsx53(
       Drawer,
       {
         opened: drawerOpened,
@@ -7507,10 +7669,10 @@ function HeaderMegaMenu({ children, menus }) {
         title: "Navigation",
         hiddenFrom: "sm",
         zIndex: 1e6,
-        children: /* @__PURE__ */ jsxs28(ScrollArea4, { h: "calc(100vh - 80px", mx: "-md", children: [
-          /* @__PURE__ */ jsx50(Divider3, { my: "sm" }),
-          /* @__PURE__ */ jsx50(MyFlexColumn, { h: "100%", gap: 0, children: menus == null ? void 0 : menus.map((item, idx) => /* @__PURE__ */ jsx50(Button14, { component: Link4, href: item.href, variant: HeaderMegaMenuStore.state.name == item.label ? "light" : "subtle", onClick: () => HeaderMegaMenuStore.setState({ name: item.label }), children: item.label }, idx)) }),
-          /* @__PURE__ */ jsx50(Divider3, { my: "sm" })
+        children: /* @__PURE__ */ jsxs29(ScrollArea4, { h: "calc(100vh - 80px", mx: "-md", children: [
+          /* @__PURE__ */ jsx53(Divider3, { my: "sm" }),
+          /* @__PURE__ */ jsx53(MyFlexColumn, { h: "100%", gap: 0, children: menus == null ? void 0 : menus.map((item, idx) => /* @__PURE__ */ jsx53(Button15, { component: Link4, href: item.href, variant: HeaderMegaMenuStore.state.name == item.label ? "light" : "subtle", onClick: () => HeaderMegaMenuStore.setState({ name: item.label }), children: item.label }, idx)) }),
+          /* @__PURE__ */ jsx53(Divider3, { my: "sm" })
         ] })
       }
     )
@@ -7518,8 +7680,8 @@ function HeaderMegaMenu({ children, menus }) {
 }
 
 // src/components/Layouts/PageContent/MyPageContent.tsx
-import { Badge as Badge4, Breadcrumbs, Container as Container3, Divider as Divider4, Group as Group16, Text as Text15, Title } from "@mantine/core";
-import { jsx as jsx51, jsxs as jsxs29 } from "react/jsx-runtime";
+import { Badge as Badge4, Breadcrumbs, Container as Container3, Divider as Divider4, Group as Group17, Text as Text16, Title } from "@mantine/core";
+import { jsx as jsx54, jsxs as jsxs30 } from "react/jsx-runtime";
 var getStatusColor = (status) => {
   switch (status) {
     case "Prototype":
@@ -7530,10 +7692,10 @@ var getStatusColor = (status) => {
 };
 function PageTitle({ title, status, note }) {
   const color = getStatusColor(status);
-  return /* @__PURE__ */ jsx51(Group16, { children: /* @__PURE__ */ jsxs29(MyFlexColumn, { gap: 0, children: [
-    /* @__PURE__ */ jsxs29(Group16, { align: "center", children: [
-      /* @__PURE__ */ jsx51(Title, { order: 3, children: title }),
-      status && /* @__PURE__ */ jsx51(
+  return /* @__PURE__ */ jsx54(Group17, { children: /* @__PURE__ */ jsxs30(MyFlexColumn, { gap: 0, children: [
+    /* @__PURE__ */ jsxs30(Group17, { align: "center", children: [
+      /* @__PURE__ */ jsx54(Title, { order: 3, children: title }),
+      status && /* @__PURE__ */ jsx54(
         Badge4,
         {
           variant: "gradient",
@@ -7544,7 +7706,7 @@ function PageTitle({ title, status, note }) {
         }
       )
     ] }),
-    /* @__PURE__ */ jsx51(Text15, { size: "lg", c: "dimmed", fs: "italic", children: note })
+    /* @__PURE__ */ jsx54(Text16, { size: "lg", c: "dimmed", fs: "italic", children: note })
   ] }) });
 }
 function MyPageContent({
@@ -7557,11 +7719,11 @@ function MyPageContent({
   var _a;
   const basicAppShellStore = useS_BasicAppShell();
   const finalTitle = title || basicAppShellStore.state.title;
-  return /* @__PURE__ */ jsxs29(Container3, { p: 0, fluid: true, children: [
-    /* @__PURE__ */ jsxs29(Group16, { justify: "space-between", children: [
-      /* @__PURE__ */ jsxs29(Group16, { children: [
-        /* @__PURE__ */ jsx51(MyButtonRouterBack, {}),
-        /* @__PURE__ */ jsx51(
+  return /* @__PURE__ */ jsxs30(Container3, { p: 0, fluid: true, children: [
+    /* @__PURE__ */ jsxs30(Group17, { justify: "space-between", children: [
+      /* @__PURE__ */ jsxs30(Group17, { children: [
+        /* @__PURE__ */ jsx54(MyButtonRouterBack, {}),
+        /* @__PURE__ */ jsx54(
           PageTitle,
           {
             title: finalTitle,
@@ -7571,63 +7733,63 @@ function MyPageContent({
         ),
         leftTopBar
       ] }),
-      /* @__PURE__ */ jsxs29(Group16, { p: "md", children: [
+      /* @__PURE__ */ jsxs30(Group17, { p: "md", children: [
         rightTopBar,
-        /* @__PURE__ */ jsx51(Breadcrumbs, { separatorMargin: "7", children: (_a = basicAppShellStore.state.breadcrumb) == null ? void 0 : _a.map((item, idx) => /* @__PURE__ */ jsx51(Text15, { fw: "600", c: "blue", children: item }, idx)) })
+        /* @__PURE__ */ jsx54(Breadcrumbs, { separatorMargin: "7", children: (_a = basicAppShellStore.state.breadcrumb) == null ? void 0 : _a.map((item, idx) => /* @__PURE__ */ jsx54(Text16, { fw: "600", c: "blue", children: item }, idx)) })
       ] })
     ] }),
-    /* @__PURE__ */ jsx51(Divider4, { my: "xs" }),
+    /* @__PURE__ */ jsx54(Divider4, { my: "xs" }),
     children,
-    /* @__PURE__ */ jsx51(Divider4, { my: "xs" })
+    /* @__PURE__ */ jsx54(Divider4, { my: "xs" })
   ] });
 }
 
 // src/components/Layouts/Tab/MyTab.tsx
 import { rem, Space as Space3, Tabs } from "@mantine/core";
-import { jsx as jsx52, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx55, jsxs as jsxs31 } from "react/jsx-runtime";
 function MyTab(_a) {
   var _b = _a, { tabList, children } = _b, rest = __objRest(_b, ["tabList", "children"]);
   const iconStyle = { width: rem(20), height: rem(20) };
-  return /* @__PURE__ */ jsxs30(Tabs, __spreadProps(__spreadValues({ defaultValue: tabList[0].label }, rest), { children: [
-    /* @__PURE__ */ jsx52(Tabs.List, { children: tabList.map((item, idx) => {
-      return /* @__PURE__ */ jsx52(Tabs.Tab, { value: item.label, leftSection: item.icon && /* @__PURE__ */ jsx52(item.icon, { style: iconStyle }), children: item.label }, idx);
+  return /* @__PURE__ */ jsxs31(Tabs, __spreadProps(__spreadValues({ defaultValue: tabList[0].label }, rest), { children: [
+    /* @__PURE__ */ jsx55(Tabs.List, { children: tabList.map((item, idx) => {
+      return /* @__PURE__ */ jsx55(Tabs.Tab, { value: item.label, leftSection: item.icon && /* @__PURE__ */ jsx55(item.icon, { style: iconStyle }), children: item.label }, idx);
     }) }),
-    /* @__PURE__ */ jsx52(Space3, { my: "md" }),
+    /* @__PURE__ */ jsx55(Space3, { my: "md" }),
     children
   ] }));
 }
 
 // src/components/RESTAPIComponents/DataTableSelect/MyDataTableSelect.tsx
-import { ActionIcon as ActionIcon12, Button as Button15, Fieldset as Fieldset5, Group as Group17, Modal as Modal11 } from "@mantine/core";
+import { ActionIcon as ActionIcon12, Button as Button16, Fieldset as Fieldset5, Group as Group18, Modal as Modal11 } from "@mantine/core";
 import { useDisclosure as useDisclosure12 } from "@mantine/hooks";
 import { IconX as IconX2 } from "@tabler/icons-react";
-import { jsx as jsx53, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx56, jsxs as jsxs32 } from "react/jsx-runtime";
 function MyDataTableSelect(_a) {
   var _b = _a, { modalSize, renderTopToolbarCustomActions, data, selectButtonlabel, listState, columns, listLabel } = _b, rest = __objRest(_b, ["modalSize", "renderTopToolbarCustomActions", "data", "selectButtonlabel", "listState", "columns", "listLabel"]);
   const disc = useDisclosure12(false);
   if (data == void 0) return "\u0110ang t\u1EA3i...";
-  return /* @__PURE__ */ jsxs31(Fieldset5, { legend: listLabel ? listLabel : "Danh s\xE1ch", children: [
-    /* @__PURE__ */ jsx53(
+  return /* @__PURE__ */ jsxs32(Fieldset5, { legend: listLabel ? listLabel : "Danh s\xE1ch", children: [
+    /* @__PURE__ */ jsx56(
       MyDataTable,
       __spreadValues({
         renderTopToolbarCustomActions: ({ table }) => {
-          return /* @__PURE__ */ jsxs31(Group17, { children: [
+          return /* @__PURE__ */ jsxs32(Group18, { children: [
             renderTopToolbarCustomActions && renderTopToolbarCustomActions({ table }),
-            /* @__PURE__ */ jsx53(Button15, { onClick: disc[1].open, children: selectButtonlabel || "Ch\u1ECDn t\u1EEB danh s\xE1ch" })
+            /* @__PURE__ */ jsx56(Button16, { onClick: disc[1].open, children: selectButtonlabel || "Ch\u1ECDn t\u1EEB danh s\xE1ch" })
           ] });
         },
         columns,
         data: listState[0],
         renderRowActions: ({ row }) => {
-          return /* @__PURE__ */ jsx53(MyCenterFull, { children: /* @__PURE__ */ jsx53(ActionIcon12, { color: "red", onClick: () => listState[1].remove(row.index), children: /* @__PURE__ */ jsx53(IconX2, {}) }) });
+          return /* @__PURE__ */ jsx56(MyCenterFull, { children: /* @__PURE__ */ jsx56(ActionIcon12, { color: "red", onClick: () => listState[1].remove(row.index), children: /* @__PURE__ */ jsx56(IconX2, {}) }) });
         }
       }, rest)
     ),
-    /* @__PURE__ */ jsx53(Modal11, { opened: disc[0], onClose: disc[1].close, size: modalSize || "80%", children: /* @__PURE__ */ jsx53(
+    /* @__PURE__ */ jsx56(Modal11, { opened: disc[0], onClose: disc[1].close, size: modalSize || "80%", children: /* @__PURE__ */ jsx56(
       MyDataTable,
       __spreadValues({
         renderTopToolbarCustomActions: ({ table }) => {
-          return /* @__PURE__ */ jsx53(Button15, { onClick: () => {
+          return /* @__PURE__ */ jsx56(Button16, { onClick: () => {
             table.getSelectedRowModel().rows.map((item) => listState[1].append(item.original));
             disc[1].close();
           }, children: "Ch\u1ECDn" });
@@ -7643,7 +7805,7 @@ function MyDataTableSelect(_a) {
 // src/components/RESTAPIComponents/SelectAPIGet/MySelectAPIGet.tsx
 import { Select as Select3 } from "@mantine/core";
 import { useQuery as useQuery2 } from "@tanstack/react-query";
-import { jsx as jsx54 } from "react/jsx-runtime";
+import { jsx as jsx57 } from "react/jsx-runtime";
 function MySelectAPIGet(_a) {
   var _b = _a, { apiGet, label = "", dataMapper } = _b, rest = __objRest(_b, ["apiGet", "label", "dataMapper"]);
   var _a2;
@@ -7662,7 +7824,7 @@ function MySelectAPIGet(_a) {
       label: `${item.code}-${item.name}`
     };
   });
-  return /* @__PURE__ */ jsx54(
+  return /* @__PURE__ */ jsx57(
     Select3,
     __spreadValues({
       label,
@@ -7677,7 +7839,7 @@ import { useNextCalendarApp as useNextCalendarApp2, ScheduleXCalendar as Schedul
 import { createEventsServicePlugin as createEventsServicePlugin2 } from "@schedule-x/events-service";
 import { useState as useState11 } from "react";
 import { createEventModalPlugin as createEventModalPlugin2 } from "@schedule-x/event-modal";
-import { jsx as jsx55 } from "react/jsx-runtime";
+import { jsx as jsx58 } from "react/jsx-runtime";
 function MyScheduleX({
   values,
   timeGridEvent,
@@ -7702,7 +7864,7 @@ function MyScheduleX({
     events: values,
     plugins: [eventsService, eventModalPlugin]
   });
-  return /* @__PURE__ */ jsx55(
+  return /* @__PURE__ */ jsx58(
     ScheduleXCalendar2,
     {
       calendarApp: calendar,
@@ -7716,9 +7878,9 @@ function MyScheduleX({
 
 // src/components/Skeletons/SkeletonTable/MySkeletonTable.tsx
 import { Skeleton } from "@mantine/core";
-import { jsx as jsx56 } from "react/jsx-runtime";
+import { jsx as jsx59 } from "react/jsx-runtime";
 function MySkeletonTable({ h: h4 = 500 }) {
-  return /* @__PURE__ */ jsx56(Skeleton, { h: h4 });
+  return /* @__PURE__ */ jsx59(Skeleton, { h: h4 });
 }
 
 export {
@@ -7728,6 +7890,7 @@ export {
   MyBoxesBackground,
   MyActionIcon,
   MyTextInput,
+  MyFlexColumn,
   MyActionIconCheck,
   MyButton,
   MyActionIconModal,
@@ -7748,6 +7911,7 @@ export {
   MyFlexEnd,
   useS_ButtonImport,
   SelectFieldModal,
+  MyDataTable,
   SelectFileModal,
   MyButtonImport,
   AQSelectTableByOpenModal,
@@ -7759,6 +7923,7 @@ export {
   MyCalendar,
   MyCenterFull,
   MyCheckbox,
+  MyFlexRow,
   AQCard,
   MyCardInformation,
   MyIconText,