aq-fe-framework 0.1.214 → 0.1.215

package/dist/{chunk-4LGIOYGW.mjs → chunk-23JEDPUS.mjs}

@@ -626,152 +626,111 @@ function MySwitchTheme() {
 }
 
 // src/components/AppSpotlight/MyAppSpotlight.tsx
+import {
+  Badge,
+  Group as Group3,
+  Text as Text4,
+  TextInput as TextInput2
+} from "@mantine/core";
 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";
-
-// src/components/Layouts/BasicAppShell/useS_BasicAppShell.ts
-var useStore = createGenericStore({
-  initialState: {
-    menuCode: "",
-    moduleCode: "Module code",
-    moduleName: "Module name",
-    title: "",
-    opened: true,
-    groupMenuOpenId: []
-  },
-  storageKey: "useS_BasicAppShell"
-});
-function useS_BasicAppShell() {
-  const store = useStore();
-  const GetAQModule_query = useQ_AQ_GetAQModule();
-  function toggle() {
-    store.setProperty("opened", !store.state.opened);
-  }
-  function toggleGroupMenuOpenId(id) {
-    const currentIds = store.state.groupMenuOpenId;
-    if (currentIds.includes(id)) {
-      store.setProperty(
-        "groupMenuOpenId",
-        currentIds.filter((existingId) => existingId !== id)
-      );
-    } else {
-      store.setProperty("groupMenuOpenId", [...currentIds, id]);
-    }
-  }
-  function clearGroupMenuOpenId() {
-    store.setProperty("groupMenuOpenId", []);
-  }
-  function setDefault() {
-    var _a, _b;
-    if (!GetAQModule_query.data) return;
-    store.setProperty("faviconFileDetail", (_a = GetAQModule_query.data) == null ? void 0 : _a.faviconFileDetail);
-    store.setProperty("logoFileDetail", (_b = GetAQModule_query.data) == null ? void 0 : _b.logoFileDetail);
-  }
-  return __spreadProps(__spreadValues({}, store), {
-    toggle,
-    toggleGroupMenuOpenId,
-    clearGroupMenuOpenId,
-    setDefault
-  });
-}
-
-// src/components/AppSpotlight/MyAppSpotlight.tsx
-import { jsx as jsx16, jsxs as jsxs7 } from "react/jsx-runtime";
-function convertMenuToSpotlightActions(items, router, parentPath = "", sideBarStore, pathName) {
-  let actions = [];
-  items.forEach((item) => {
-    if (item.link) {
-      actions.push({
-        id: item.label.toLowerCase().replace(/\s+/g, "-"),
-        label: item.label,
-        description: `Chuy\u1EC3n \u0111\u1EBFn ${item.label} (Code: ${item.link})`,
-        onClick: () => {
-          sideBarStore.setProperty("title", item.label);
-          sideBarStore.setProperty("menuCode", item.link);
-          router.push(
-            pathName.split("/")[0] + "/" + pathName.split("/")[1] + "/" + item.link
-          );
-          spotlight.close();
-        },
-        rightSection: item.status ? item.status === "Prototype" ? "P" : item.status === "New" ? "N" : item.status === "Menu" ? "M" : null : null
-      });
-    }
-    if (item.links) {
-      actions = actions.concat(
-        convertMenuToSpotlightActions(
-          item.links,
-          router,
-          item.link || "",
-          sideBarStore,
-          pathName
-        )
-      );
-    }
-  });
-  return actions;
-}
+import { Fragment as Fragment4, jsx as jsx16, jsxs as jsxs7 } from "react/jsx-runtime";
 function MyAppSpotlight({ menu }) {
-  const [query, setQuery] = useState5("");
   const router = useRouter();
   const pathName = usePathname();
-  const basicAppShellStore = useS_BasicAppShell();
-  const spotlightActions = useMemo(
-    () => convertMenuToSpotlightActions(menu, router, "", basicAppShellStore, pathName),
-    [menu, router, basicAppShellStore]
-    // Add sideBarStore to the dependency array
-  );
-  return /* @__PURE__ */ jsx16(
-    Spotlight,
-    {
-      actions: spotlightActions,
-      query,
-      scrollable: true,
-      maxHeight: 800,
-      onQueryChange: setQuery,
-      shortcut: ["mod + K", "/"],
-      nothingFound: "Kh\xF4ng t\xECm th\u1EA5y trang",
-      highlightQuery: true,
-      searchProps: {
-        leftSection: /* @__PURE__ */ jsx16(IconSearch, { stroke: 1.5 }),
-        placeholder: "T\xECm ki\u1EBFm trang..."
+  const [query, setQuery] = useState5("");
+  const allChildItems = useMemo(() => {
+    const result = [];
+    const extractChildren = (items) => {
+      items.forEach((item) => {
+        if (item.link) {
+          result.push(item);
+        }
+        if (item.links) {
+          extractChildren(item.links);
+        }
+      });
+    };
+    extractChildren(menu);
+    return result;
+  }, [menu]);
+  const filteredItems = allChildItems.filter((item) => {
+    var _a, _b;
+    const lowerQuery = query.toLowerCase().trim();
+    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__ */ jsx16(
+      TextInput2,
+      {
+        mt: "md",
+        placeholder: "T\xECm menu (Ctrl + K)",
+        mx: 10,
+        component: "button",
+        onClick: spotlight.open,
+        leftSection: /* @__PURE__ */ jsx16(IconSearch, {}),
+        children: "T\xECm ki\u1EBFm (Ctrl + K)"
       }
-    }
-  );
-}
-function SpotlightTrigger() {
-  return /* @__PURE__ */ jsxs7(
-    "button",
-    {
-      onClick: spotlight.open,
-      style: {
-        background: "none",
-        border: "none",
-        cursor: "pointer",
-        display: "flex",
-        alignItems: "center",
-        gap: "8px"
-      },
-      children: [
-        /* @__PURE__ */ jsx16(IconSearch, { stroke: 1.5 }),
-        "T\xECm ki\u1EBFm (Ctrl + K)"
-      ]
-    }
-  );
+    ),
+    /* @__PURE__ */ jsxs7(
+      Spotlight.Root,
+      {
+        maxHeight: 800,
+        query,
+        onQueryChange: setQuery,
+        children: [
+          /* @__PURE__ */ jsx16(
+            Spotlight.Search,
+            {
+              placeholder: "T\xECm ki\u1EBFm menu...",
+              leftSection: /* @__PURE__ */ jsx16(IconSearch, { stroke: 1.5 })
+            }
+          ),
+          /* @__PURE__ */ jsx16(Spotlight.ActionsList, { children: filteredItems.length > 0 ? filteredItems.map((item, idx) => /* @__PURE__ */ jsx16(
+            Spotlight.Action,
+            {
+              onClick: () => {
+                router.push(
+                  `/${pathName.split("/")[1]}/${item.link}`
+                );
+                spotlight.close();
+              },
+              children: /* @__PURE__ */ jsxs7(Group3, { wrap: "nowrap", w: "100%", children: [
+                /* @__PURE__ */ jsxs7("div", { style: { flex: 1 }, children: [
+                  /* @__PURE__ */ jsx16(Text4, { children: item.label }),
+                  /* @__PURE__ */ jsxs7(Group3, { gap: 5, children: [
+                    item.note && /* @__PURE__ */ jsx16(Text4, { opacity: 0.6, size: "xs", children: item.note }),
+                    /* @__PURE__ */ jsxs7(Text4, { opacity: 0.6, size: "xs", children: [
+                      "(",
+                      item.link,
+                      ")"
+                    ] })
+                  ] })
+                ] }),
+                item.status && item.status != "Default" && /* @__PURE__ */ jsx16(Badge, { variant: "default", children: item.status })
+              ] })
+            },
+            idx
+          )) : /* @__PURE__ */ jsx16(Spotlight.Empty, { children: "Kh\xF4ng t\xECm th\u1EA5y trang..." }) })
+        ]
+      }
+    )
+  ] });
 }
 
 // src/components/Buttons/Anchor/MyAnchorViewPDF.tsx
-import { ActionIcon as ActionIcon8, Anchor, Group as Group3, Modal as Modal4, Paper as Paper2, Text as Text4 } from "@mantine/core";
+import { ActionIcon as ActionIcon8, Anchor, Group as Group4, Modal as Modal4, Paper as Paper2, Text as Text5 } from "@mantine/core";
 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 Fragment4, jsx as jsx17, 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(Fragment4, { children: [
+  return /* @__PURE__ */ jsxs8(Fragment5, { children: [
     /* @__PURE__ */ jsx17(Anchor, { onClick: disc[1].open, children: label }),
     /* @__PURE__ */ jsx17(
       Modal4,
@@ -780,8 +739,8 @@ function MyAnchorViewPDF({ label, pdfLink }) {
         opened: disc[0],
         onClose: disc[1].close,
         size: "80%",
-        title: /* @__PURE__ */ jsxs8(Group3, { children: [
-          /* @__PURE__ */ jsx17(Text4, { children: "Xem t\xE0i li\u1EC7u tr\u1EF1c ti\u1EBFp" }),
+        title: /* @__PURE__ */ jsxs8(Group4, { children: [
+          /* @__PURE__ */ jsx17(Text5, { children: "Xem t\xE0i li\u1EC7u tr\u1EF1c ti\u1EBFp" }),
           fullScreen[0] ? /* @__PURE__ */ jsx17(
             ActionIcon8,
             {
@@ -818,7 +777,7 @@ import * as XLSX from "xlsx";
 // src/components/Buttons/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 Fragment5, jsx as jsx18, 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,
@@ -841,7 +800,7 @@ function MyButtonModal(_a) {
   ]);
   const objectNameLower = objectName == null ? void 0 : objectName.toLowerCase();
   if (crudType == "default") {
-    return /* @__PURE__ */ jsxs9(Fragment5, { children: [
+    return /* @__PURE__ */ jsxs9(Fragment6, { children: [
       /* @__PURE__ */ jsx18(Button3, __spreadProps(__spreadValues({ onClick: disclosure == null ? void 0 : disclosure[1].open, color: "indigo" }, rest), { children: label })),
       /* @__PURE__ */ jsx18(
         Modal5,
@@ -857,7 +816,7 @@ function MyButtonModal(_a) {
     ] });
   }
   if (crudType == "create") {
-    return /* @__PURE__ */ jsxs9(Fragment5, { children: [
+    return /* @__PURE__ */ jsxs9(Fragment6, { children: [
       /* @__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,
@@ -873,7 +832,7 @@ function MyButtonModal(_a) {
     ] });
   }
   if (crudType == "createMultiple") {
-    return /* @__PURE__ */ jsxs9(Fragment5, { children: [
+    return /* @__PURE__ */ jsxs9(Fragment6, { children: [
       /* @__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,
@@ -889,7 +848,7 @@ function MyButtonModal(_a) {
     ] });
   }
   if (crudType == "update") {
-    return /* @__PURE__ */ jsxs9(Fragment5, { children: [
+    return /* @__PURE__ */ jsxs9(Fragment6, { children: [
       /* @__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,
@@ -905,7 +864,7 @@ function MyButtonModal(_a) {
     ] });
   }
   if (crudType == "delete") {
-    return /* @__PURE__ */ jsxs9(Fragment5, { children: [
+    return /* @__PURE__ */ jsxs9(Fragment6, { children: [
       /* @__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,
@@ -1103,21 +1062,21 @@ function MySelect(_a) {
 }
 
 // src/components/Layouts/FlexEnd/MyFlexEnd.tsx
-import { Group as Group4 } from "@mantine/core";
+import { Group as Group5 } from "@mantine/core";
 import { jsx as jsx23 } from "react/jsx-runtime";
 function MyFlexEnd(_a) {
   var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ jsx23(Group4, __spreadProps(__spreadValues({ justify: "end", mt: "md" }, rest), { children }));
+  return /* @__PURE__ */ jsx23(Group5, __spreadProps(__spreadValues({ justify: "end", mt: "md" }, rest), { children }));
 }
 
 // src/components/Buttons/ButtonImport/SelectFieldModal.tsx
-import { Button as Button5, Divider, Fieldset, Group as Group5, Modal as Modal6, SimpleGrid, Space as Space2, Table } from "@mantine/core";
+import { Button as Button5, Divider, Fieldset, Group as Group6, Modal as Modal6, SimpleGrid, Space as Space2, Table } from "@mantine/core";
 import { IconArrowBackUp, IconArrowBigLeft, IconArrowBigRight, IconSquareRoundedX } from "@tabler/icons-react";
 
 // src/components/Buttons/ButtonImport/useS_ButtonImport.ts
 import { useEffect as useEffect4, useMemo as useMemo2 } from "react";
 import * as XLSX3 from "xlsx";
-var useStore2 = createGenericStore({
+var useStore = createGenericStore({
   initialState: {
     data: [],
     title: [],
@@ -1126,7 +1085,7 @@ var useStore2 = createGenericStore({
   }
 });
 function useS_ButtonImport() {
-  const store = useStore2();
+  const store = useStore();
   function autoMap() {
     if (!store.state.data || !store.state.data.length || !store.state.fieldConfig) return;
     const sampleRow = store.state.data[0];
@@ -1290,7 +1249,7 @@ function SelectFieldModal({ stack, onImport }) {
           )) })
         ] }),
         /* @__PURE__ */ jsx24(Space2, {}),
-        /* @__PURE__ */ jsx24(Group5, { children: /* @__PURE__ */ jsx24(
+        /* @__PURE__ */ jsx24(Group6, { children: /* @__PURE__ */ jsx24(
           Button5,
           {
             onClick: () => {
@@ -1368,7 +1327,7 @@ function SelectFieldModal({ stack, onImport }) {
 }
 
 // src/components/DataDisplay/DataTable/MyDataTable.tsx
-import { Button as Button6, Group as Group6, Portal } from "@mantine/core";
+import { Button as Button6, Group as Group7, Portal } from "@mantine/core";
 import { IconDownload as IconDownload3 } from "@tabler/icons-react";
 import { download, generateCsv, mkConfig } from "export-to-csv";
 import {
@@ -1377,7 +1336,7 @@ import {
 } 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 Fragment6, jsx as jsx25, jsxs as jsxs13 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx25, jsxs as jsxs13 } from "react/jsx-runtime";
 function formatData(data, formats) {
   return data.map((row) => {
     const transformedRow = {};
@@ -1418,9 +1377,9 @@ function MyDataTable(_a) {
     columns,
     data,
     renderTopToolbarCustomActions: ({ table: table2 }) => {
-      return /* @__PURE__ */ jsxs13(Group6, { children: [
+      return /* @__PURE__ */ jsxs13(Group7, { children: [
         renderTopToolbarCustomActions && renderTopToolbarCustomActions({ table: table2 }),
-        exportAble && /* @__PURE__ */ jsx25(Fragment6, { children: /* @__PURE__ */ jsx25(
+        exportAble && /* @__PURE__ */ jsx25(Fragment7, { children: /* @__PURE__ */ jsx25(
           Button6,
           {
             color: "green.8",
@@ -1582,14 +1541,14 @@ function SelectFileModal({ onExportStructure, stack }) {
 }
 
 // src/components/Buttons/ButtonImport/MyButtonImport.tsx
-import { Fragment as Fragment7, jsx as jsx27, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx27, jsxs as jsxs15 } 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: [
+  return /* @__PURE__ */ jsxs15(Fragment8, { children: [
     /* @__PURE__ */ jsx27(Button8, { color: "teal.8", onClick: () => stack.open("select-file-page"), leftSection: /* @__PURE__ */ jsx27(IconFileImport2, {}), title: "Import", children: "Import" }),
     /* @__PURE__ */ jsxs15(Modal8.Stack, { children: [
       /* @__PURE__ */ jsx27(SelectFileModal, { stack, onExportStructure }),
@@ -1601,7 +1560,7 @@ function MyButtonImport({
 // src/components/Buttons/ButtonModal/AQSelectTableByOpenModal.tsx
 import { Button as Button9, Fieldset as Fieldset3, Modal as Modal9 } from "@mantine/core";
 import { useDisclosure as useDisclosure8 } from "@mantine/hooks";
-import { Fragment as Fragment8, jsx as jsx28, jsxs as jsxs16 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx28, jsxs as jsxs16 } from "react/jsx-runtime";
 function AQSelectTableByOpenModal(_a) {
   var _b = _a, {
     setSelectedData,
@@ -1629,7 +1588,7 @@ function AQSelectTableByOpenModal(_a) {
     "closeAfterSelect"
   ]);
   const disclosure = useDisclosure8(false);
-  return /* @__PURE__ */ jsxs16(Fragment8, { children: [
+  return /* @__PURE__ */ jsxs16(Fragment9, { children: [
     /* @__PURE__ */ jsx28(
       Button9,
       __spreadProps(__spreadValues({
@@ -1670,7 +1629,7 @@ import { useRef as useRef2 } from "react";
 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 jsx29, jsxs as jsxs17 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx29, jsxs as jsxs17 } from "react/jsx-runtime";
 function MyButtonPrintPDF(_a) {
   var _b = _a, { contentToPrint, children } = _b, rest = __objRest(_b, ["contentToPrint", "children"]);
   const printRef = useRef2(null);
@@ -1684,7 +1643,7 @@ function MyButtonPrintPDF(_a) {
     if (!contentToPrint) return;
     handlePrint();
   }
-  return /* @__PURE__ */ jsxs17(Fragment9, { children: [
+  return /* @__PURE__ */ jsxs17(Fragment10, { children: [
     /* @__PURE__ */ jsx29("div", { style: { display: "none" }, children: /* @__PURE__ */ jsx29("div", { ref: printRef, children: contentToPrint }) }),
     /* @__PURE__ */ jsx29(Button10, __spreadProps(__spreadValues({ color: "orange", onClick: handleClick, leftSection: /* @__PURE__ */ jsx29(IconPrinter2, {}) }, rest), { children }))
   ] });
@@ -1834,7 +1793,7 @@ function MyButtonPrintTablePDF(_a) {
 }
 
 // src/components/Buttons/ButtonRouterBack/MyButtonRouterBack.tsx
-import { Button as Button11 } from "@mantine/core";
+import { ActionIcon as ActionIcon9 } from "@mantine/core";
 import { IconArrowBack } from "@tabler/icons-react";
 import { useRouter as useRouter2 } from "next/navigation";
 import { jsx as jsx32 } from "react/jsx-runtime";
@@ -1842,10 +1801,10 @@ function MyButtonRouterBack(_a) {
   var _b = _a, { url, label } = _b, rest = __objRest(_b, ["url", "label"]);
   const router = useRouter2();
   return /* @__PURE__ */ jsx32(
-    Button11,
+    ActionIcon9,
     __spreadProps(__spreadValues({
+      size: "xl",
       variant: "light",
-      leftSection: /* @__PURE__ */ jsx32(IconArrowBack, { stroke: 2 }),
       onClick: () => {
         if (url) {
           router.replace(url);
@@ -1854,27 +1813,27 @@ function MyButtonRouterBack(_a) {
         router.back();
       }
     }, rest), {
-      children: label ? label : "Tr\u1EDF v\u1EC1"
+      children: /* @__PURE__ */ jsx32(IconArrowBack, { stroke: 2 })
     })
   );
 }
 
 // src/components/Buttons/ButtonViewPDF/MyButtonViewPDF.tsx
 import {
-  ActionIcon as ActionIcon9,
-  Button as Button12,
-  Group as Group7,
+  ActionIcon as ActionIcon10,
+  Button as Button11,
+  Group as Group8,
   LoadingOverlay,
   Modal as Modal10,
   Paper as Paper3,
-  Text as Text5,
+  Text as Text6,
   Tooltip as Tooltip4
 } from "@mantine/core";
 import { useDisclosure as useDisclosure9 } 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 useState7 } from "react";
-import { Fragment as Fragment10, jsx as jsx33, jsxs as jsxs19 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx33, jsxs as jsxs19 } from "react/jsx-runtime";
 function MyButtonViewPDF({
   id,
   modalSize = "80%",
@@ -1899,9 +1858,9 @@ function MyButtonViewPDF({
     },
     enabled: disc[0] == true
   });
-  return /* @__PURE__ */ jsxs19(Fragment10, { children: [
+  return /* @__PURE__ */ jsxs19(Fragment11, { children: [
     /* @__PURE__ */ jsx33(Tooltip4, { label: "Xem t\xE0i li\u1EC7u tr\u1EF1c ti\u1EBFp", children: isActionIcon ? /* @__PURE__ */ jsx33(
-      ActionIcon9,
+      ActionIcon10,
       {
         onClick: () => {
           disc[1].open();
@@ -1909,7 +1868,7 @@ function MyButtonViewPDF({
         children: /* @__PURE__ */ jsx33(IconLivePhoto2, {})
       }
     ) : /* @__PURE__ */ jsx33(
-      Button12,
+      Button11,
       {
         color: "cyan",
         onClick: () => {
@@ -1926,10 +1885,10 @@ function MyButtonViewPDF({
         opened: disc[0],
         onClose: disc[1].close,
         size: modalSize,
-        title: /* @__PURE__ */ jsxs19(Group7, { children: [
-          /* @__PURE__ */ jsx33(Text5, { children: "Xem t\xE0i li\u1EC7u tr\u1EF1c ti\u1EBFp" }),
+        title: /* @__PURE__ */ jsxs19(Group8, { children: [
+          /* @__PURE__ */ jsx33(Text6, { children: "Xem t\xE0i li\u1EC7u tr\u1EF1c ti\u1EBFp" }),
           fullScreen[0] ? /* @__PURE__ */ jsx33(
-            ActionIcon9,
+            ActionIcon10,
             {
               onClick: () => {
                 fullScreen[1](false);
@@ -1938,7 +1897,7 @@ function MyButtonViewPDF({
               children: /* @__PURE__ */ jsx33(IconMinimize3, {})
             }
           ) : /* @__PURE__ */ jsx33(
-            ActionIcon9,
+            ActionIcon10,
             {
               onClick: () => {
                 fullScreen[1](true);
@@ -6264,7 +6223,7 @@ 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 Text6 } from "@mantine/core";
+import { Paper as Paper4, Text as Text7 } from "@mantine/core";
 import "@schedule-x/theme-default/dist/index.css";
 import { useEffect as useEffect6 } from "react";
 import { jsx as jsx34, jsxs as jsxs20 } from "react/jsx-runtime";
@@ -6345,12 +6304,12 @@ function MyCalendar() {
     timeGridEvent: ({ calendarEvent }) => {
       console.log(calendarEvent);
       return /* @__PURE__ */ jsx34(Paper4, { h: "100%", bg: calendarEvent.laLichThi ? "violet.2" : "blue.2", p: 4, children: /* @__PURE__ */ jsxs20(MyFlexColumn, { gap: 1, children: [
-        /* @__PURE__ */ jsxs20(Text6, { size: "sm", fw: "bold", children: [
+        /* @__PURE__ */ jsxs20(Text7, { size: "sm", fw: "bold", children: [
           calendarEvent.laLichThi ? "(Thi) " : "(H\u1ECDc) ",
           calendarEvent.title
         ] }),
-        calendarEvent.laLichThi == false && /* @__PURE__ */ jsx34(Text6, { size: "sm", children: calendarEvent.giangvien }),
-        /* @__PURE__ */ jsx34(Text6, { size: "sm", children: calendarEvent.location })
+        calendarEvent.laLichThi == false && /* @__PURE__ */ jsx34(Text7, { size: "sm", children: calendarEvent.giangvien }),
+        /* @__PURE__ */ jsx34(Text7, { size: "sm", children: calendarEvent.location })
       ] }) });
     }
     // eventModal: ({ calendarEvent }) => {
@@ -6364,10 +6323,10 @@ function MyCalendar() {
 }
 
 // src/components/CenterFull/MyCenterFull.tsx
-import { Center as Center2, Group as Group8 } from "@mantine/core";
+import { Center as Center2, Group as Group9 } from "@mantine/core";
 import { jsx as jsx35 } from "react/jsx-runtime";
 function MyCenterFull({ children }) {
-  return /* @__PURE__ */ jsx35(Center2, { w: "100%", children: /* @__PURE__ */ jsx35(Group8, { children }) });
+  return /* @__PURE__ */ jsx35(Center2, { w: "100%", children: /* @__PURE__ */ jsx35(Group9, { children }) });
 }
 
 // src/components/Checkbox/MyCheckbox.tsx
@@ -6387,7 +6346,7 @@ function MyFlexRow(_a) {
 }
 
 // src/components/DataDisplay/Card/AQCard.tsx
-import { Badge, Card, Center as Center3, Image, Text as Text7 } from "@mantine/core";
+import { Badge as Badge2, Card, Center as Center3, Image, Text as Text8 } from "@mantine/core";
 import Link from "next/link";
 import { jsx as jsx38, jsxs as jsxs21 } from "react/jsx-runtime";
 function AQCard({
@@ -6411,16 +6370,16 @@ function AQCard({
       }
     ) }) }),
     /* @__PURE__ */ jsxs21(MyFlexRow, { justify: "space-between", mt: "md", mb: "xs", children: [
-      /* @__PURE__ */ jsx38(Text7, { fw: 500, children: title }),
-      status && /* @__PURE__ */ jsx38(Badge, { color: "violet.5", w: "150px", children: status })
+      /* @__PURE__ */ jsx38(Text8, { fw: 500, children: title }),
+      status && /* @__PURE__ */ jsx38(Badge2, { color: "violet.5", w: "150px", children: status })
     ] }),
-    /* @__PURE__ */ jsx38(Text7, { size: "sm", c: "dimmed", lineClamp: 2, children: description }),
+    /* @__PURE__ */ jsx38(Text8, { size: "sm", c: "dimmed", lineClamp: 2, children: description }),
     children
   ] });
 }
 
 // src/components/DataDisplay/CardInformation/MyCardInformation.tsx
-import { Box as Box2, Flex as Flex3, Group as Group9, Paper as Paper5, Text as Text8 } from "@mantine/core";
+import { Box as Box2, Flex as Flex3, Group as Group10, Paper as Paper5, Text as Text9 } from "@mantine/core";
 import { IconArrowDownRight, IconArrowUpRight } from "@tabler/icons-react";
 import { jsx as jsx39, jsxs as jsxs22 } from "react/jsx-runtime";
 function MyCardInformation({
@@ -6439,10 +6398,10 @@ function MyCardInformation({
       p: "md",
       radius: "md",
       children: [
-        /* @__PURE__ */ jsxs22(Group9, { justify: "space-between", children: [
+        /* @__PURE__ */ jsxs22(Group10, { justify: "space-between", children: [
           /* @__PURE__ */ jsxs22(Flex3, { direction: "column", children: [
             /* @__PURE__ */ jsx39(
-              Text8,
+              Text9,
               {
                 tt: "uppercase",
                 size: "lg",
@@ -6450,10 +6409,10 @@ function MyCardInformation({
                 children: title
               }
             ),
-            unit == "" ? /* @__PURE__ */ jsxs22(Text8, { size: "xs", style: { visibility: "hidden" }, children: [
+            unit == "" ? /* @__PURE__ */ jsxs22(Text9, { size: "xs", style: { visibility: "hidden" }, children: [
               "\u0110\u01A1n v\u1ECB: ",
               /* @__PURE__ */ jsx39("strong", { children: unit })
-            ] }) : /* @__PURE__ */ jsxs22(Text8, { size: "xs", children: [
+            ] }) : /* @__PURE__ */ jsxs22(Text9, { size: "xs", children: [
               "\u0110\u01A1n v\u1ECB: ",
               /* @__PURE__ */ jsx39("strong", { children: unit })
             ] })
@@ -6461,14 +6420,14 @@ function MyCardInformation({
           /* @__PURE__ */ jsx39(Box2, { children: icon })
         ] }),
         /* @__PURE__ */ jsxs22(
-          Group9,
+          Group10,
           {
             mt: "5",
             align: "flex-end",
             gap: "xs",
             children: [
               /* @__PURE__ */ jsx39(
-                Text8,
+                Text9,
                 {
                   fw: 700,
                   fz: "h1",
@@ -6476,7 +6435,7 @@ function MyCardInformation({
                 }
               ),
               /* @__PURE__ */ jsxs22(
-                Text8,
+                Text9,
                 {
                   mb: "2",
                   c: diff > 0 ? "teal" : "red",
@@ -6494,8 +6453,8 @@ function MyCardInformation({
             ]
           }
         ),
-        /* @__PURE__ */ jsxs22(Group9, { justify: "space-between", children: [
-          /* @__PURE__ */ jsx39(Text8, { tt: "uppercase", fz: "xs", c: "dimmed", children: description }),
+        /* @__PURE__ */ jsxs22(Group10, { justify: "space-between", children: [
+          /* @__PURE__ */ jsx39(Text9, { tt: "uppercase", fz: "xs", c: "dimmed", children: description }),
           extraControl
         ] })
       ]
@@ -6505,25 +6464,25 @@ function MyCardInformation({
 }
 
 // src/components/DataDisplay/IconText/MyIconText.tsx
-import { Group as Group10, Text as Text9 } from "@mantine/core";
+import { Group as Group11, Text as Text10 } from "@mantine/core";
 import { jsx as jsx40, jsxs as jsxs23 } from "react/jsx-runtime";
 function MyIconText({ icon: Icon, text }) {
-  return /* @__PURE__ */ jsxs23(Group10, { wrap: "nowrap", gap: 10, mt: 3, children: [
+  return /* @__PURE__ */ jsxs23(Group11, { wrap: "nowrap", gap: 10, mt: 3, children: [
     Icon && /* @__PURE__ */ jsx40(Icon, { stroke: 1.5, size: 16 }),
-    /* @__PURE__ */ jsx40(Text9, { fz: "lg", c: "dimmed", children: text })
+    /* @__PURE__ */ jsx40(Text10, { fz: "lg", c: "dimmed", children: text })
   ] });
 }
 
 // src/components/DataDisplay/KeyLabel/MyKeyLabel.tsx
-import { Group as Group11, Text as Text10 } from "@mantine/core";
+import { Group as Group12, Text as Text11 } from "@mantine/core";
 import { jsx as jsx41, jsxs as jsxs24 } from "react/jsx-runtime";
 function MyKeyLabel({ keyLabel, label }) {
-  return /* @__PURE__ */ jsxs24(Group11, { gap: 5, children: [
-    /* @__PURE__ */ jsxs24(Text10, { fw: "bold", children: [
+  return /* @__PURE__ */ jsxs24(Group12, { gap: 5, children: [
+    /* @__PURE__ */ jsxs24(Text11, { fw: "bold", children: [
       keyLabel,
       ":"
     ] }),
-    /* @__PURE__ */ jsx41(Text10, { children: label })
+    /* @__PURE__ */ jsx41(Text11, { children: label })
   ] });
 }
 
@@ -6536,21 +6495,21 @@ function MyNumberFormatter(_a) {
 }
 
 // src/components/DataDisplay/StatCard/AQStatCard1.tsx
-import { Box as Box3, Button as Button14, Flex as Flex4, 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 jsx43, jsxs as jsxs25 } 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__ */ jsx43(Fragment11, { children: /* @__PURE__ */ jsxs25(
+  return /* @__PURE__ */ jsx43(Fragment12, { children: /* @__PURE__ */ jsxs25(
     Paper6,
     {
       withBorder: true,
       p: "md",
       radius: "md",
       children: [
-        /* @__PURE__ */ jsxs25(Group12, { justify: "space-between", children: [
+        /* @__PURE__ */ jsxs25(Group13, { justify: "space-between", children: [
           /* @__PURE__ */ jsxs25(Flex4, { direction: "column", children: [
             /* @__PURE__ */ jsx43(
-              Text11,
+              Text12,
               {
                 tt: "uppercase",
                 size: "lg",
@@ -6558,10 +6517,10 @@ function AQStatCard1({ title, value, unit = "", description, icons, diff }) {
                 children: title
               }
             ),
-            unit == "" ? /* @__PURE__ */ jsxs25(Text11, { size: "xs", style: { visibility: "hidden" }, children: [
+            unit == "" ? /* @__PURE__ */ jsxs25(Text12, { size: "xs", style: { visibility: "hidden" }, children: [
               "\u0110\u01A1n v\u1ECB: ",
               /* @__PURE__ */ jsx43("strong", { children: unit })
-            ] }) : /* @__PURE__ */ jsxs25(Text11, { size: "xs", children: [
+            ] }) : /* @__PURE__ */ jsxs25(Text12, { size: "xs", children: [
               "\u0110\u01A1n v\u1ECB: ",
               /* @__PURE__ */ jsx43("strong", { children: unit })
             ] })
@@ -6569,14 +6528,14 @@ function AQStatCard1({ title, value, unit = "", description, icons, diff }) {
           /* @__PURE__ */ jsx43(Box3, { children: icons })
         ] }),
         /* @__PURE__ */ jsxs25(
-          Group12,
+          Group13,
           {
             mt: "5",
             align: "flex-end",
             gap: "xs",
             children: [
               /* @__PURE__ */ jsx43(
-                Text11,
+                Text12,
                 {
                   fw: 700,
                   fz: "h1",
@@ -6584,7 +6543,7 @@ function AQStatCard1({ title, value, unit = "", description, icons, diff }) {
                 }
               ),
               /* @__PURE__ */ jsxs25(
-                Text11,
+                Text12,
                 {
                   mb: "2",
                   c: diff > 0 ? "teal" : "red",
@@ -6602,10 +6561,10 @@ function AQStatCard1({ title, value, unit = "", description, icons, diff }) {
             ]
           }
         ),
-        /* @__PURE__ */ jsxs25(Group12, { justify: "space-between", children: [
-          /* @__PURE__ */ jsx43(Text11, { tt: "uppercase", fz: "xs", c: "dimmed", children: description }),
+        /* @__PURE__ */ jsxs25(Group13, { justify: "space-between", children: [
+          /* @__PURE__ */ jsx43(Text12, { tt: "uppercase", fz: "xs", c: "dimmed", children: description }),
           /* @__PURE__ */ jsx43(
-            Button14,
+            Button13,
             {
               variant: "light",
               size: "xs",
@@ -6621,6 +6580,54 @@ function AQStatCard1({ title, value, unit = "", description, icons, diff }) {
 
 // src/components/FaviconSetter/FaviconSetter.tsx
 import { useEffect as useEffect7 } from "react";
+
+// src/components/Layouts/BasicAppShell/useS_BasicAppShell.ts
+var useStore2 = createGenericStore({
+  initialState: {
+    menuCode: "",
+    moduleCode: "Module code",
+    moduleName: "Module name",
+    title: "",
+    opened: true,
+    groupMenuOpenId: []
+  },
+  storageKey: "useS_BasicAppShell"
+});
+function useS_BasicAppShell() {
+  const store = useStore2();
+  const GetAQModule_query = useQ_AQ_GetAQModule();
+  function toggle() {
+    store.setProperty("opened", !store.state.opened);
+  }
+  function toggleGroupMenuOpenId(id) {
+    const currentIds = store.state.groupMenuOpenId;
+    if (currentIds.includes(id)) {
+      store.setProperty(
+        "groupMenuOpenId",
+        currentIds.filter((existingId) => existingId !== id)
+      );
+    } else {
+      store.setProperty("groupMenuOpenId", [...currentIds, id]);
+    }
+  }
+  function clearGroupMenuOpenId() {
+    store.setProperty("groupMenuOpenId", []);
+  }
+  function setDefault() {
+    var _a, _b;
+    if (!GetAQModule_query.data) return;
+    store.setProperty("faviconFileDetail", (_a = GetAQModule_query.data) == null ? void 0 : _a.faviconFileDetail);
+    store.setProperty("logoFileDetail", (_b = GetAQModule_query.data) == null ? void 0 : _b.logoFileDetail);
+  }
+  return __spreadProps(__spreadValues({}, store), {
+    toggle,
+    toggleGroupMenuOpenId,
+    clearGroupMenuOpenId,
+    setDefault
+  });
+}
+
+// src/components/FaviconSetter/FaviconSetter.tsx
 function FaviconSetter() {
   var _a;
   const store = useS_BasicAppShell();
@@ -6654,7 +6661,7 @@ function MyDateInput(_a) {
 }
 
 // src/components/Inputs/Fieldset/MyFieldset.tsx
-import { Box as Box4, Fieldset as Fieldset4, Text as Text12 } from "@mantine/core";
+import { Box as Box4, Fieldset as Fieldset4, Text as Text13 } from "@mantine/core";
 import { jsx as jsx45 } from "react/jsx-runtime";
 function MyFieldset(_a) {
   var _b = _a, {
@@ -6674,7 +6681,7 @@ function MyFieldset(_a) {
           px: "xs",
           py: 2,
           style: { borderRadius: 4 },
-          children: /* @__PURE__ */ jsx45(Text12, { c: "white", fw: 500, children: title })
+          children: /* @__PURE__ */ jsx45(Text13, { c: "white", fw: 500, children: title })
         }
       ),
       children
@@ -6886,7 +6893,7 @@ function MyTextEditor(_a) {
 }
 
 // src/modules-features/authenticate/F_authenticate_Logout.tsx
-import { Button as Button15 } from "@mantine/core";
+import { Button as Button14 } from "@mantine/core";
 import { IconLogout } from "@tabler/icons-react";
 import { useRouter as useRouter3 } from "next/navigation";
 
@@ -6907,7 +6914,7 @@ 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__ */ jsx50(Button15, { onClick: () => {
+  return /* @__PURE__ */ jsx50(Button14, { onClick: () => {
     S_Authenticate.setProperty("token", "");
     router.replace(redirectURL);
   }, leftSection: /* @__PURE__ */ jsx50(IconLogout, {}), fullWidth: true, justify: "start", variant: "subtle", children: "\u0110\u0103ng xu\u1EA5t" });
@@ -6915,39 +6922,48 @@ function F_authenticate_Logout({ redirectURL = "/auth/login" }) {
 
 // src/components/Layouts/BasicAppShell/BasicAppShell.tsx
 import {
-  ActionIcon as ActionIcon10,
+  ActionIcon as ActionIcon11,
   AppShell,
-  Badge as Badge2,
+  Badge as Badge3,
   Divider as Divider2,
-  Group as Group13,
+  Group as Group14,
   Image as Image3,
   NavLink,
   ScrollArea as ScrollArea3,
-  Text as Text13,
-  TextInput as TextInput2,
+  Text as Text14,
   Tooltip as Tooltip5
 } from "@mantine/core";
 import { useFavicon, useMediaQuery } from "@mantine/hooks";
-import { spotlight as spotlight2 } from "@mantine/spotlight";
 import {
   IconLayoutSidebarLeftCollapse,
   IconLayoutSidebarLeftExpand,
-  IconLibraryMinus,
-  IconSearch as IconSearch2
+  IconLibraryMinus
 } from "@tabler/icons-react";
 import Link3 from "next/link";
 import { usePathname as usePathname2 } from "next/navigation";
-import { useEffect as useEffect9, useState as useState9 } from "react";
-import { Fragment as Fragment12, jsx as jsx51, jsxs as jsxs27 } from "react/jsx-runtime";
+import { useEffect as useEffect9, useMemo as useMemo3, useState as useState9 } from "react";
+import { Fragment as Fragment13, jsx as jsx51, jsxs as jsxs27 } from "react/jsx-runtime";
+function findBreadcrumbPath(items, currentPath, parents = []) {
+  for (const item of items) {
+    if (item.link === currentPath) {
+      return [...parents, item.label];
+    }
+    if (item.links) {
+      const found = findBreadcrumbPath(item.links, currentPath, [...parents, item.label]);
+      if (found) return found;
+    }
+  }
+  return null;
+}
 function getRightSection(status) {
   if (status === "Prototype")
-    return /* @__PURE__ */ jsx51(Badge2, { 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__ */ jsx51(Badge2, { 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__ */ jsx51(Badge2, { 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__ */ jsx51(Badge2, { 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({
@@ -6955,7 +6971,7 @@ function RenderNavLinks({
 }) {
   const basicAppShellStore = useS_BasicAppShell();
   const pathName = usePathname2();
-  return /* @__PURE__ */ jsx51(Fragment12, { children: items.map((item, index) => /* @__PURE__ */ jsx51(
+  return /* @__PURE__ */ jsx51(Fragment13, { children: items.map((item, index) => /* @__PURE__ */ jsx51(
     NavLink,
     {
       active: item.link === pathName.split("/")[2],
@@ -6973,8 +6989,6 @@ function RenderNavLinks({
           basicAppShellStore.toggleGroupMenuOpenId(item.label);
           return;
         }
-        basicAppShellStore.setProperty("menuCode", item.link);
-        basicAppShellStore.setProperty("title", item.label);
       },
       children: item.links && /* @__PURE__ */ jsx51(RenderNavLinks, { items: item.links })
     },
@@ -7041,11 +7055,27 @@ function BasicAppShell_transformMenuToEnum(prefixProjectName, menu) {
 }
 function BasicAppShell({ children, menu, extraTopRight, title }) {
   var _a, _b;
+  const pathName = usePathname2();
   const basicAppShellStore = useS_BasicAppShell();
   const media = useMediaQuery("(min-width: 72em)");
   const GetAQModule_query = useQ_AQ_GetAQModule();
   const BasicAppShell_store = useS_BasicAppShell();
   const [faviconUrl, setFaviconUrl] = useState9("");
+  const allChildItems = useMemo3(() => {
+    const result = [];
+    const extractChildren = (items) => {
+      items.forEach((item) => {
+        if (item.link) {
+          result.push(item);
+        }
+        if (item.links) {
+          extractChildren(item.links);
+        }
+      });
+    };
+    extractChildren(menu);
+    return result;
+  }, [menu]);
   useFavicon(faviconUrl);
   useEffect9(() => {
     var _a2;
@@ -7074,6 +7104,15 @@ function BasicAppShell({ children, menu, extraTopRight, title }) {
     if (!data) return;
     document.title = data.name || "";
   }, [GetAQModule_query.data]);
+  useEffect9(() => {
+    const linkItem = allChildItems.find((item) => pathName.includes(item.link));
+    const breadcrumb = findBreadcrumbPath(menu, linkItem == null ? void 0 : linkItem.link);
+    basicAppShellStore.setProperty("breadcrumb", breadcrumb);
+    basicAppShellStore.setProperty("title", linkItem == null ? void 0 : linkItem.label);
+    basicAppShellStore.setProperty("menuCode", linkItem == null ? void 0 : linkItem.link);
+    basicAppShellStore.setProperty("note", linkItem == null ? void 0 : linkItem.note);
+    basicAppShellStore.setProperty("status", linkItem == null ? void 0 : linkItem.status);
+  }, [pathName]);
   return /* @__PURE__ */ jsxs27(
     AppShell,
     {
@@ -7088,86 +7127,72 @@ function BasicAppShell({ children, menu, extraTopRight, title }) {
       },
       padding: "md",
       children: [
-        /* @__PURE__ */ jsxs27(AppShell.Header, { children: [
-          /* @__PURE__ */ jsx51(MyAppSpotlight, { menu }),
-          media ? /* @__PURE__ */ jsxs27(Group13, { h: "100%", px: "md", justify: "space-between", align: "center", children: [
-            /* @__PURE__ */ jsxs27(Group13, { h: "100%", children: [
-              /* @__PURE__ */ jsx51(
-                Tooltip5,
-                {
-                  label: basicAppShellStore.state.opened ? "\u1EA8n thanh menu" : "Hi\u1EC7n thanh menu",
-                  children: /* @__PURE__ */ jsx51(
-                    ActionIcon10,
-                    {
-                      size: "lg",
-                      radius: "md",
-                      variant: "default",
-                      onClick: basicAppShellStore.toggle,
-                      children: basicAppShellStore.state.opened ? /* @__PURE__ */ jsx51(IconLayoutSidebarLeftExpand, {}) : /* @__PURE__ */ jsx51(IconLayoutSidebarLeftCollapse, {})
-                    }
-                  )
-                }
-              ),
-              /* @__PURE__ */ jsx51(Tooltip5, { label: "\u0110\xF3ng t\u1EA5t c\u1EA3 menu", children: /* @__PURE__ */ jsx51(
-                ActionIcon10,
-                {
-                  size: "lg",
-                  radius: "md",
-                  variant: "default",
-                  onClick: () => basicAppShellStore.clearGroupMenuOpenId(),
-                  children: /* @__PURE__ */ jsx51(IconLibraryMinus, {})
-                }
-              ) })
-            ] }),
+        /* @__PURE__ */ jsx51(AppShell.Header, { children: media ? /* @__PURE__ */ jsxs27(Group14, { h: "100%", px: "md", justify: "space-between", align: "center", children: [
+          /* @__PURE__ */ jsxs27(Group14, { h: "100%", children: [
             /* @__PURE__ */ jsx51(
-              Group13,
+              Tooltip5,
               {
-                style: {
-                  position: "absolute",
-                  left: "50%",
-                  transform: "translateX(-50%)"
-                },
-                children: /* @__PURE__ */ jsx51(Text13, { c: "green", fw: "bold", size: "sm", children: title ? title : `${basicAppShellStore.state.moduleCode} - ${basicAppShellStore.state.moduleName}` })
+                label: basicAppShellStore.state.opened ? "\u1EA8n thanh menu" : "Hi\u1EC7n thanh menu",
+                children: /* @__PURE__ */ jsx51(
+                  ActionIcon11,
+                  {
+                    size: "lg",
+                    radius: "md",
+                    variant: "default",
+                    onClick: basicAppShellStore.toggle,
+                    children: basicAppShellStore.state.opened ? /* @__PURE__ */ jsx51(IconLayoutSidebarLeftExpand, {}) : /* @__PURE__ */ jsx51(IconLayoutSidebarLeftCollapse, {})
+                  }
+                )
               }
             ),
-            /* @__PURE__ */ jsxs27(Group13, { children: [
-              extraTopRight,
-              /* @__PURE__ */ jsx51(MySwitchTheme, {})
-            ] })
-          ] }) : (
-            // For mobile screens - simplified layout
-            /* @__PURE__ */ jsxs27(Group13, { h: "100%", px: "md", justify: "space-between", children: [
-              /* @__PURE__ */ jsx51(
-                ActionIcon10,
-                {
-                  size: "lg",
-                  radius: "md",
-                  variant: "default",
-                  onClick: basicAppShellStore.toggle,
-                  children: basicAppShellStore.state.opened ? /* @__PURE__ */ jsx51(IconLayoutSidebarLeftExpand, {}) : /* @__PURE__ */ jsx51(IconLayoutSidebarLeftCollapse, {})
-                }
-              ),
-              /* @__PURE__ */ jsx51(Text13, { c: "green", fw: "bold", size: "sm", children: title ? title : `${basicAppShellStore.state.moduleCode} - ${basicAppShellStore.state.moduleName}` }),
-              /* @__PURE__ */ jsxs27(Group13, { children: [
-                extraTopRight,
-                /* @__PURE__ */ jsx51(MySwitchTheme, {})
-              ] })
-            ] })
-          )
-        ] }),
-        /* @__PURE__ */ jsxs27(AppShell.Navbar, { children: [
+            /* @__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__ */ jsx51(IconLibraryMinus, {})
+              }
+            ) })
+          ] }),
           /* @__PURE__ */ jsx51(
-            TextInput2,
+            Group14,
             {
-              mt: "md",
-              placeholder: "T\xECm menu (Ctrl + K)",
-              mx: 10,
-              component: "button",
-              onClick: spotlight2.open,
-              leftSection: /* @__PURE__ */ jsx51(IconSearch2, {}),
-              children: "T\xECm ki\u1EBFm (Ctrl + K)"
+              style: {
+                position: "absolute",
+                left: "50%",
+                transform: "translateX(-50%)"
+              },
+              children: /* @__PURE__ */ jsx51(Text14, { c: "green", fw: "bold", size: "sm", children: title ? title : `${basicAppShellStore.state.moduleCode} - ${basicAppShellStore.state.moduleName}` })
             }
           ),
+          /* @__PURE__ */ jsxs27(Group14, { children: [
+            extraTopRight,
+            /* @__PURE__ */ jsx51(MySwitchTheme, {})
+          ] })
+        ] }) : (
+          // For mobile screens - simplified layout
+          /* @__PURE__ */ jsxs27(Group14, { 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__ */ jsx51(IconLayoutSidebarLeftExpand, {}) : /* @__PURE__ */ jsx51(IconLayoutSidebarLeftCollapse, {})
+              }
+            ),
+            /* @__PURE__ */ jsx51(Text14, { c: "green", fw: "bold", size: "sm", children: title ? title : `${basicAppShellStore.state.moduleCode} - ${basicAppShellStore.state.moduleName}` }),
+            /* @__PURE__ */ jsxs27(Group14, { children: [
+              extraTopRight,
+              /* @__PURE__ */ jsx51(MySwitchTheme, {})
+            ] })
+          ] })
+        ) }),
+        /* @__PURE__ */ jsxs27(AppShell.Navbar, { children: [
+          /* @__PURE__ */ jsx51(MyAppSpotlight, { menu }),
           /* @__PURE__ */ jsxs27(AppShell.Section, { grow: true, component: ScrollArea3, p: 5, children: [
             /* @__PURE__ */ jsx51(RenderNavLinks, { items: menu }),
             /* @__PURE__ */ jsx51(Divider2, {}),
@@ -7261,14 +7286,14 @@ var OBJECT_COlORS = {
 import {
   Box as Box5,
   Burger,
-  Button as Button16,
+  Button as Button15,
   Container as Container2,
   Divider as Divider3,
   Drawer,
-  Group as Group14,
+  Group as Group15,
   Image as Image4,
   ScrollArea as ScrollArea4,
-  Text as Text14,
+  Text as Text15,
   TextInput as TextInput3,
   ThemeIcon,
   UnstyledButton,
@@ -7282,7 +7307,7 @@ import {
   IconCoin,
   IconFingerprint,
   IconNotification,
-  IconSearch as IconSearch3
+  IconSearch as IconSearch2
 } from "@tabler/icons-react";
 import Link4 from "next/link";
 
@@ -7338,21 +7363,21 @@ function HeaderMegaMenu({ children, menus }) {
   const [linksOpened, { toggle: toggleLinks }] = useDisclosure10(false);
   const HeaderMegaMenuStore = useHeaderMegaMenuStore();
   const theme = useMantineTheme();
-  const links = mockdata.map((item) => /* @__PURE__ */ jsx53(UnstyledButton, { className: css_default.subLink, children: /* @__PURE__ */ jsxs28(Group14, { wrap: "nowrap", align: "flex-start", children: [
+  const links = mockdata.map((item) => /* @__PURE__ */ jsx53(UnstyledButton, { className: css_default.subLink, children: /* @__PURE__ */ jsxs28(Group15, { 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__ */ jsxs28("div", { children: [
-      /* @__PURE__ */ jsx53(Text14, { size: "sm", fw: 500, children: item.title }),
-      /* @__PURE__ */ jsx53(Text14, { size: "xs", c: "dimmed", children: item.description })
+      /* @__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(Box5, { children: [
-    /* @__PURE__ */ jsx53("header", { className: css_default.header, children: /* @__PURE__ */ jsxs28(Group14, { justify: "space-between", h: "100%", children: [
-      /* @__PURE__ */ jsxs28(Group14, { children: [
+    /* @__PURE__ */ jsx53("header", { className: css_default.header, children: /* @__PURE__ */ jsxs28(Group15, { justify: "space-between", h: "100%", children: [
+      /* @__PURE__ */ jsxs28(Group15, { children: [
         /* @__PURE__ */ jsx53(Image4, { src: "/imgs/0/IMG0LogoAQTech.png", h: 30, alt: "", w: "auto" }),
-        /* @__PURE__ */ jsx53(Group14, { h: "100%", gap: 5, visibleFrom: "sm", children: menus == null ? void 0 : menus.map((item, idx) => /* @__PURE__ */ jsx53(Button16, { 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(Group15, { 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(Group14, { children: [
-        /* @__PURE__ */ jsx53(TextInput3, { placeholder: "T\xECm ki\u1EBFm", leftSection: /* @__PURE__ */ jsx53(IconSearch3, {}), radius: "xl", w: "250px" }),
+      /* @__PURE__ */ jsxs28(Group15, { children: [
+        /* @__PURE__ */ jsx53(TextInput3, { placeholder: "T\xECm ki\u1EBFm", leftSection: /* @__PURE__ */ jsx53(IconSearch2, {}), radius: "xl", w: "250px" }),
         /* @__PURE__ */ jsx53(MySwitchTheme, {})
       ] }),
       /* @__PURE__ */ jsx53(Burger, { opened: drawerOpened, onClick: toggleDrawer, hiddenFrom: "sm" })
@@ -7370,7 +7395,7 @@ function HeaderMegaMenu({ children, menus }) {
         zIndex: 1e6,
         children: /* @__PURE__ */ jsxs28(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(Button16, { 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(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" })
         ] })
       }
@@ -7379,46 +7404,68 @@ function HeaderMegaMenu({ children, menus }) {
 }
 
 // src/components/Layouts/PageContent/MyPageContent.tsx
-import { Code, Container as Container3, Divider as Divider4, Group as Group15, Indicator, Title } from "@mantine/core";
+import { Badge as Badge4, Breadcrumbs, Code, Container as Container3, Divider as Divider4, Group as Group16, Text as Text16, Title } from "@mantine/core";
 import { jsx as jsx54, jsxs as jsxs29 } from "react/jsx-runtime";
 var getStatusColor = (status) => {
   switch (status) {
     case "Prototype":
-      return "blue";
-    case "Beta":
-      return "orange";
+      return "pink";
     default:
-      return "gray";
+      return "";
   }
 };
-var PageTitle = ({ title, status }) => {
+function PageTitle({ title, status, note }) {
   const color = getStatusColor(status);
-  return /* @__PURE__ */ jsx54(Indicator, { label: status, size: 16, inline: true, color, disabled: !status, pt: 6, children: /* @__PURE__ */ jsx54(Title, { order: 4, children: title }) });
-};
+  return /* @__PURE__ */ jsx54(Group16, { children: /* @__PURE__ */ jsxs29(MyFlexColumn, { gap: 0, children: [
+    /* @__PURE__ */ jsxs29(Group16, { align: "center", children: [
+      /* @__PURE__ */ jsx54(Title, { order: 3, children: title }),
+      status && /* @__PURE__ */ jsx54(
+        Badge4,
+        {
+          variant: "gradient",
+          gradient: { from: color, to: `${color}.5` },
+          size: "lg",
+          radius: "sm",
+          children: status
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx54(Text16, { size: "lg", c: "dimmed", fs: "italic", children: note })
+  ] }) });
+}
 function MyPageContent({
   leftTopBar,
   title,
   canBack = false,
   rightTopBar,
-  status,
   children
 }) {
+  var _a;
   const basicAppShellStore = useS_BasicAppShell();
   const finalTitle = title || basicAppShellStore.state.title;
   return /* @__PURE__ */ jsxs29(Container3, { p: 0, fluid: true, children: [
-    /* @__PURE__ */ jsxs29(Group15, { justify: "space-between", children: [
-      /* @__PURE__ */ jsxs29(Group15, { children: [
-        canBack && /* @__PURE__ */ jsx54(MyButtonRouterBack, {}),
-        /* @__PURE__ */ jsx54(PageTitle, { title: finalTitle, status }),
+    /* @__PURE__ */ jsxs29(Group16, { justify: "space-between", children: [
+      /* @__PURE__ */ jsxs29(Group16, { children: [
+        /* @__PURE__ */ jsx54(MyButtonRouterBack, {}),
+        /* @__PURE__ */ jsx54(
+          PageTitle,
+          {
+            title: finalTitle,
+            status: basicAppShellStore.state.status,
+            note: basicAppShellStore.state.note
+          }
+        ),
         leftTopBar
       ] }),
-      /* @__PURE__ */ jsxs29(Group15, { children: [
+      /* @__PURE__ */ jsxs29(Group16, { p: "md", children: [
         rightTopBar,
-        /* @__PURE__ */ jsx54(Code, { color: "var(--mantine-color-blue-light)", children: basicAppShellStore.state.menuCode })
+        /* @__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__ */ jsx54(Divider4, { my: "xs" }),
-    children
+    children,
+    /* @__PURE__ */ jsx54(Divider4, { my: "xs" }),
+    /* @__PURE__ */ jsx54(MyFlexEnd, { children: /* @__PURE__ */ jsx54(Code, { color: "var(--mantine-color-blue-light)", children: basicAppShellStore.state.menuCode }) })
   ] });
 }
 
@@ -7438,7 +7485,7 @@ function MyTab(_a) {
 }
 
 // src/components/RESTAPIComponents/DataTableSelect/MyDataTableSelect.tsx
-import { ActionIcon as ActionIcon11, Button as Button17, Fieldset as Fieldset5, Group as Group16, Modal as Modal11 } from "@mantine/core";
+import { ActionIcon as ActionIcon12, Button as Button16, Fieldset as Fieldset5, Group as Group17, Modal as Modal11 } from "@mantine/core";
 import { useDisclosure as useDisclosure11 } from "@mantine/hooks";
 import { IconX as IconX2 } from "@tabler/icons-react";
 import { jsx as jsx56, jsxs as jsxs31 } from "react/jsx-runtime";
@@ -7451,15 +7498,15 @@ function MyDataTableSelect(_a) {
       MyDataTable,
       __spreadValues({
         renderTopToolbarCustomActions: ({ table }) => {
-          return /* @__PURE__ */ jsxs31(Group16, { children: [
+          return /* @__PURE__ */ jsxs31(Group17, { children: [
             renderTopToolbarCustomActions && renderTopToolbarCustomActions({ table }),
-            /* @__PURE__ */ jsx56(Button17, { 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__ */ jsx56(MyCenterFull, { children: /* @__PURE__ */ jsx56(ActionIcon11, { color: "red", onClick: () => listState[1].remove(row.index), children: /* @__PURE__ */ jsx56(IconX2, {}) }) });
+          return /* @__PURE__ */ jsx56(MyCenterFull, { children: /* @__PURE__ */ jsx56(ActionIcon12, { color: "red", onClick: () => listState[1].remove(row.index), children: /* @__PURE__ */ jsx56(IconX2, {}) }) });
         }
       }, rest)
     ),
@@ -7467,7 +7514,7 @@ function MyDataTableSelect(_a) {
       MyDataTable,
       __spreadValues({
         renderTopToolbarCustomActions: ({ table }) => {
-          return /* @__PURE__ */ jsx56(Button17, { onClick: () => {
+          return /* @__PURE__ */ jsx56(Button16, { onClick: () => {
             table.getSelectedRowModel().rows.map((item) => listState[1].append(item.original));
             disc[1].close();
           }, children: "Ch\u1ECDn" });
@@ -7578,9 +7625,7 @@ export {
   MyActionIconUpload,
   MyActionIconViewPDF,
   MySwitchTheme,
-  useS_BasicAppShell,
   MyAppSpotlight,
-  SpotlightTrigger,
   MyAnchorViewPDF,
   MyButtonModal,
   AQButtonCreateByImportFile,
@@ -7609,6 +7654,7 @@ export {
   MyKeyLabel,
   MyNumberFormatter,
   AQStatCard1,
+  useS_BasicAppShell,
   FaviconSetter,
   MyDateInput,
   MyFieldset,