@esic-lab/data-core-ui 0.0.68 → 0.0.70

package/dist/index.js

@@ -425,7 +425,8 @@ function PrimaryButton({
   colorPrimaryHover = "#8895f9",
   textColor = "#ffffff",
   icon,
-  className
+  className,
+  htmlType
 }) {
   const textClass = size === "large" ? "body-1" : "body-3";
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -448,6 +449,7 @@ function PrimaryButton({
           disabled,
           icon,
           iconPosition: iconPlacement,
+          htmlType,
           children: title
         }
       )
@@ -469,7 +471,8 @@ function SecondaryButton({
   defaultHoverColor = "#7181f8",
   textColor = "rgba(0,0,0,0.88)",
   icon,
-  className
+  className,
+  htmlType
 }) {
   const textClass = size === "large" ? "body-1" : "body-3";
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
@@ -497,6 +500,7 @@ function SecondaryButton({
           disabled,
           icon,
           iconPosition: iconPlacement,
+          htmlType,
           children: title
         }
       )
@@ -552,7 +556,8 @@ function TertiaryButton({
   colorPrimaryHover = "#4d5461",
   textColor = "white",
   icon,
-  className
+  className,
+  htmlType
 }) {
   const textClass = size === "large" ? "body-1" : "body-3";
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
@@ -575,6 +580,7 @@ function TertiaryButton({
           disabled,
           icon,
           iconPosition: iconPlacement,
+          htmlType,
           children: title
         }
       )
@@ -753,39 +759,48 @@ function SwitchSelect({
 }
 
 // src/NavBar/MenuNavBar/MenuNavBar.tsx
-var import_react = require("react");
+var import_react_router = require("react-router");
 var import_jsx_runtime13 = require("react/jsx-runtime");
 function MenuNavBar({ menus, onClick }) {
-  const [activePath, setActivePath] = (0, import_react.useState)("");
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "w-full h-full p-[10px] bg-white", children: menus?.map((menu, index) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: `p-[10px] ${index !== 0 ? "mt-[10px]" : ""}`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "p-[10px] w-[202px] h-[47px] subtitle-1", children: menu.title }),
-    menu?.subMenus.map((subMenu) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
-      "div",
-      {
-        className: `group flex justify-center items-center gap-[10px] p-[10px] w-[202px] h-[47px] rounded-[6px] subtitle-2 cursor-pointer  
-                ${activePath === subMenu.path ? "bg-primary-500 text-white" : "hover:bg-red-100 hover:text-white"} hover:bg-red-100 active:bg-primary-500 hover:text-white active:text-white duration-100`,
-        onClick: () => {
-          onClick(subMenu.path);
-          setActivePath(subMenu.path);
-        },
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "flex justify-center items-center w-[24px] h-[24px] text-[20px]", children: activePath === subMenu.path ? subMenu.iconActive ?? subMenu.icon : subMenu.icon }),
-          subMenu.title,
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "flex ml-auto", children: subMenu.customNode && subMenu.customNode })
-        ]
-      },
-      `sub_${subMenu.title}`
-    ))
-  ] }, `menu_${menu.title}`)) });
+  const location = (0, import_react_router.useLocation)();
+  const pathname = location.pathname;
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "w-full h-full p-[10px] bg-white", children: menus?.map((menu, index) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+    "div",
+    {
+      className: `p-[10px] ${index !== 0 ? "mt-[10px]" : ""}`,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "p-[10px] w-[202px] h-[47px] subtitle-1", children: menu.title }),
+        menu?.subMenus.map((subMenu) => {
+          const isActive = pathname === subMenu.path || pathname.startsWith(subMenu.path + "/");
+          return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+            "div",
+            {
+              className: `group flex justify-center items-center gap-[10px] p-[10px] w-[202px] h-[47px] rounded-[6px] subtitle-2 cursor-pointer
+                  ${isActive ? "bg-primary-500 text-white" : "hover:bg-red-100 hover:text-white"}
+                  active:bg-primary-500 active:text-white duration-100`,
+              onClick: () => onClick(subMenu.path),
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "flex justify-center items-center w-[24px] h-[24px] text-[20px]", children: isActive ? subMenu.iconActive ?? subMenu.icon : subMenu.icon }),
+                subMenu.title,
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "flex ml-auto", children: subMenu.customNode && subMenu.customNode })
+              ]
+            },
+            `sub_${subMenu.title}`
+          );
+        })
+      ]
+    },
+    `menu_${menu.title}`
+  )) });
 }
 
 // src/NavBar/MenuNavBar/Sidebar.tsx
 var import_icons_react2 = require("@tabler/icons-react");
-var import_react2 = require("react");
+var import_react = require("react");
 var import_jsx_runtime14 = require("react/jsx-runtime");
-var SidebarContext = (0, import_react2.createContext)({ expanded: false });
+var SidebarContext = (0, import_react.createContext)({ expanded: false });
 function Sidebar({ children, logo }) {
-  const [expanded, setExpanded] = (0, import_react2.useState)(true);
+  const [expanded, setExpanded] = (0, import_react.useState)(true);
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("aside", { className: "h-screen", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("nav", { className: `h-full flex flex-col bg-white border-r shadow-sm duration-150 ${expanded ? "w-64" : "w-16"}`, children: [
     /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "p-4 pb-2 flex justify-center items-center", children: [
       expanded && logo && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("img", { src: logo, width: 120, className: "ml-auto" }),
@@ -821,15 +836,15 @@ function TopNavBar({ onClickNoti, logo }) {
 
 // src/Table/DataTable/DataTable.tsx
 var import_icons_react5 = require("@tabler/icons-react");
-var import_react4 = require("react");
+var import_react3 = require("react");
 
 // src/Table/Pagination/Pagination.tsx
 var import_icons_react4 = require("@tabler/icons-react");
-var import_react3 = require("react");
+var import_react2 = require("react");
 var import_jsx_runtime16 = require("react/jsx-runtime");
 function Pagination({ totalItems, itemsPerPage, currentPage, onPageChange }) {
   const totalPages = Math.ceil(totalItems / itemsPerPage);
-  const getPages = (0, import_react3.useMemo)(() => {
+  const getPages = (0, import_react2.useMemo)(() => {
     if (totalPages <= 7) {
       return Array.from({ length: totalPages }, (_, i) => i + 1);
     }
@@ -895,8 +910,8 @@ var import_jsx_runtime17 = require("react/jsx-runtime");
 function DataTable({ columns, data, onSort, isLoading }) {
   const cols = Math.max(1, columns.length);
   const gridClass = "grid [grid-template-columns:repeat(var(--cols),minmax(0,1fr))]";
-  const [sortConfig, setSortConfig] = (0, import_react4.useState)(null);
-  const [page, setPage] = (0, import_react4.useState)(1);
+  const [sortConfig, setSortConfig] = (0, import_react3.useState)(null);
+  const [page, setPage] = (0, import_react3.useState)(1);
   const onSorting = (config) => {
     if (config) {
       setSortConfig({ key: config?.key, direction: config?.direction });
@@ -952,7 +967,7 @@ function DataTable({ columns, data, onSort, isLoading }) {
 
 // src/Table/DataTable/AntDataTable.tsx
 var import_antd4 = require("antd");
-var import_react5 = require("react");
+var import_react4 = require("react");
 var import_jsx_runtime18 = require("react/jsx-runtime");
 function AntDataTable({
   dataSource,
@@ -967,7 +982,7 @@ function AntDataTable({
   height,
   pagination
 }) {
-  const [selectedRowKeys, setSelectedRowKeys] = (0, import_react5.useState)([]);
+  const [selectedRowKeys, setSelectedRowKeys] = (0, import_react4.useState)([]);
   const rowSelection = {
     selectedRowKeys,
     onChange: (newSelectedRowKeys) => {
@@ -1006,8 +1021,8 @@ function AntDataTable({
 }
 
 // src/Calendar/Calendar/Calendar.tsx
-var import_react6 = require("react");
-var import_react7 = __toESM(require("@fullcalendar/react"));
+var import_react5 = require("react");
+var import_react6 = __toESM(require("@fullcalendar/react"));
 var import_daygrid = __toESM(require("@fullcalendar/daygrid"));
 var import_timegrid = __toESM(require("@fullcalendar/timegrid"));
 var import_interaction = __toESM(require("@fullcalendar/interaction"));
@@ -1015,10 +1030,10 @@ var import_th = __toESM(require("@fullcalendar/core/locales/th"));
 var import_icons_react6 = require("@tabler/icons-react");
 var import_jsx_runtime19 = require("react/jsx-runtime");
 function Calendar({ events }) {
-  const calendarRef = (0, import_react6.useRef)(null);
-  const [monthTitle, setMonthTitle] = (0, import_react6.useState)("");
-  const [openPopup, setOpenPopup] = (0, import_react6.useState)(false);
-  const [selectedEvent, setSelectedEvent] = (0, import_react6.useState)(null);
+  const calendarRef = (0, import_react5.useRef)(null);
+  const [monthTitle, setMonthTitle] = (0, import_react5.useState)("");
+  const [openPopup, setOpenPopup] = (0, import_react5.useState)(false);
+  const [selectedEvent, setSelectedEvent] = (0, import_react5.useState)(null);
   const updateTitle = () => {
     const calendarApi = calendarRef.current?.getApi();
     if (calendarApi) {
@@ -1029,7 +1044,7 @@ function Calendar({ events }) {
     const calendarApi = calendarRef.current?.getApi();
     calendarApi?.changeView(viewName);
   };
-  (0, import_react6.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     updateTitle();
   }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "fc w-full h-full relative z-10", children: [
@@ -1105,7 +1120,7 @@ function Calendar({ events }) {
       ] })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "relative z-10", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-      import_react7.default,
+      import_react6.default,
       {
         ref: calendarRef,
         plugins: [import_daygrid.default, import_timegrid.default, import_interaction.default],
@@ -1161,7 +1176,7 @@ function EventPopUp({ event, onClose }) {
 
 // src/Input/TextInput/TextInput.tsx
 var import_icons_react7 = require("@tabler/icons-react");
-var import_react8 = require("react");
+var import_react7 = require("react");
 var import_jsx_runtime20 = require("react/jsx-runtime");
 function TextInput({
   label,
@@ -1174,7 +1189,7 @@ function TextInput({
   onChange,
   disabled
 }) {
-  const [showPassword, setShowPassword] = (0, import_react8.useState)(false);
+  const [showPassword, setShowPassword] = (0, import_react7.useState)(false);
   const onShowPassword = () => {
     setShowPassword(!showPassword);
   };
@@ -1359,9 +1374,13 @@ function InputFieldNumber({
   };
   const defaultParser = (v) => {
     if (!v) return "";
-    const raw = v.replace(/,/g, "").replace(/\s/g, "");
-    if (!decimal) return raw.split(".")[0];
-    return raw.replace(/[^\d.]/g, "");
+    if (!decimal) {
+      return v.replace(/[^\d]/g, "");
+    }
+    const cleaned = v.replace(/[^\d.]/g, "");
+    const firstDot = cleaned.indexOf(".");
+    if (firstDot === -1) return cleaned;
+    return cleaned.slice(0, firstDot + 1) + cleaned.slice(firstDot + 1).replace(/\./g, "");
   };
   return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
     import_antd7.ConfigProvider,
@@ -1395,7 +1414,36 @@ function InputFieldNumber({
             changeOnWheel,
             formatter: formatter ?? defaultFormatter,
             parser: parser ?? defaultParser,
-            precision: decimal ? safeScale : 0
+            precision: decimal ? safeScale : 0,
+            inputMode: decimal ? "decimal" : "numeric",
+            onKeyDown: (e) => {
+              const allowed = [
+                "Backspace",
+                "Delete",
+                "ArrowLeft",
+                "ArrowRight",
+                "Tab",
+                "Enter",
+                "Home",
+                "End"
+              ];
+              if (allowed.includes(e.key)) return;
+              if (e.ctrlKey || e.metaKey) return;
+              if (!decimal) {
+                if (!/^\d$/.test(e.key)) e.preventDefault();
+              } else {
+                if (!/^\d$/.test(e.key) && e.key !== ".") e.preventDefault();
+                if (e.key === ".") {
+                  const current = String(value ?? "");
+                  if (current.includes(".")) e.preventDefault();
+                }
+              }
+            },
+            onPaste: (e) => {
+              const text = e.clipboardData.getData("text");
+              const cleaned = !decimal ? text.replace(/[^\d]/g, "") : text.replace(/[^\d.]/g, "").replace(/(\..*)\./g, "$1");
+              if (cleaned !== text) e.preventDefault();
+            }
           }
         ),
         error && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "text-red-500 caption-1", children: error })
@@ -1405,7 +1453,7 @@ function InputFieldNumber({
 }
 
 // src/DatePicker/DatePickerBasic/DatePickerBasic.tsx
-var import_react9 = require("react");
+var import_react8 = require("react");
 var import_dayjs = __toESM(require_dayjs_min());
 var import_th2 = __toESM(require_th());
 var import_buddhistEra = __toESM(require_buddhistEra());
@@ -1427,8 +1475,8 @@ function DatePickerBasic({
   disabledDate,
   disablePast = false
 }) {
-  const [open, setOpen] = (0, import_react9.useState)(false);
-  const wrapperRef = (0, import_react9.useRef)(null);
+  const [open, setOpen] = (0, import_react8.useState)(false);
+  const wrapperRef = (0, import_react8.useRef)(null);
   const current = value ? (0, import_dayjs.default)(value) : null;
   const today = (0, import_dayjs.default)();
   const formatThaiBE = (date) => {
@@ -1450,7 +1498,7 @@ function DatePickerBasic({
     "\u0E1E\u0E24\u0E28\u0E08\u0E34\u0E01\u0E32\u0E22\u0E19",
     "\u0E18\u0E31\u0E19\u0E27\u0E32\u0E04\u0E21"
   ];
-  const [calendar, setCalendar] = (0, import_react9.useState)(current || today);
+  const [calendar, setCalendar] = (0, import_react8.useState)(current || today);
   const daysInMonth = calendar.daysInMonth();
   const firstDayOfMonth = calendar.startOf("month").day();
   const isDisabled = (date) => {
@@ -1466,7 +1514,7 @@ function DatePickerBasic({
     onChange(selected.toDate());
     setOpen(false);
   };
-  (0, import_react9.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     const handleClickOutside = (e) => {
       if (wrapperRef.current && !wrapperRef.current.contains(e.target)) {
         setOpen(false);
@@ -1553,7 +1601,7 @@ function DatePickerBasic({
 }
 
 // src/DatePicker/DatePickerRange/DatePickerRange.tsx
-var import_react10 = require("react");
+var import_react9 = require("react");
 var import_dayjs2 = __toESM(require_dayjs_min());
 var import_th3 = __toESM(require_th());
 var import_buddhistEra2 = __toESM(require_buddhistEra());
@@ -1574,13 +1622,13 @@ function DatePickerRange({
   disabledDate,
   disablePast = false
 }) {
-  const [open, setOpen] = (0, import_react10.useState)(false);
-  const wrapperRef = (0, import_react10.useRef)(null);
+  const [open, setOpen] = (0, import_react9.useState)(false);
+  const wrapperRef = (0, import_react9.useRef)(null);
   const [startDate, endDate] = value;
   const startDayjs = startDate ? (0, import_dayjs2.default)(startDate) : null;
   const endDayjs = endDate ? (0, import_dayjs2.default)(endDate) : null;
   const today = (0, import_dayjs2.default)();
-  const [calendar, setCalendar] = (0, import_react10.useState)(startDayjs || today);
+  const [calendar, setCalendar] = (0, import_react9.useState)(startDayjs || today);
   const formatThaiBE = (date) => {
     const formatted = (0, import_date_fns2.format)(date, "dd MMM yy", { locale: import_locale2.th });
     const year = parseInt((0, import_date_fns2.format)(date, "yyyy")) + 543;
@@ -1624,7 +1672,7 @@ function DatePickerRange({
       }
     }
   };
-  (0, import_react10.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     const handleClickOutside = (e) => {
       if (wrapperRef.current && !wrapperRef.current.contains(e.target)) {
         setOpen(false);
@@ -2847,7 +2895,7 @@ function SelectFieldStatusReport({
 
 // src/Select/SelectFieldTag/SelectFieldTag.tsx
 var import_antd14 = require("antd");
-var import_react11 = require("react");
+var import_react10 = require("react");
 var import_jsx_runtime32 = require("react/jsx-runtime");
 function SelectFieldTag({
   label,
@@ -2862,10 +2910,10 @@ function SelectFieldTag({
   size = "middle",
   allowClear = true
 }) {
-  const [internalValue, setInternalValue] = (0, import_react11.useState)([]);
+  const [internalValue, setInternalValue] = (0, import_react10.useState)([]);
   const isControlled = controlledValue !== void 0;
   const value = isControlled ? controlledValue : internalValue;
-  const [searchWord, setSearchWord] = (0, import_react11.useState)("");
+  const [searchWord, setSearchWord] = (0, import_react10.useState)("");
   const handleChange = (val) => {
     const trimValue = val.map((v) => v.trim());
     const filtered = trimValue.filter((v) => v.trim() !== "");
@@ -2926,7 +2974,7 @@ function SelectFieldTag({
 // src/Select/SelectCustom/SelectCustom.tsx
 var import_icons_react8 = require("@tabler/icons-react");
 var import_antd15 = require("antd");
-var import_react12 = require("react");
+var import_react11 = require("react");
 var import_jsx_runtime33 = require("react/jsx-runtime");
 function SelectCustom({
   label = "\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25\u0E42\u0E04\u0E23\u0E07\u0E01\u0E32\u0E23",
@@ -2939,8 +2987,8 @@ function SelectCustom({
   size = "middle",
   allowClear = true
 }) {
-  const [value, setValue] = (0, import_react12.useState)([]);
-  const [valueList, setValueList] = (0, import_react12.useState)([]);
+  const [value, setValue] = (0, import_react11.useState)([]);
+  const [valueList, setValueList] = (0, import_react11.useState)([]);
   const handleChange = (selectedValues) => {
     const newValues = selectedValues.filter((v) => !valueList.includes(v));
     setValueList((prev) => {
@@ -3047,7 +3095,7 @@ var quarters = [
 ];
 
 // src/SortFilter/SortFilter.tsx
-var import_react13 = require("react");
+var import_react12 = require("react");
 var import_icons_react9 = require("@tabler/icons-react");
 var import_jsx_runtime34 = require("react/jsx-runtime");
 function SortFilter({
@@ -3057,9 +3105,9 @@ function SortFilter({
   onSortClick,
   onFilterClick
 }) {
-  const [yearValue, setYearValue] = (0, import_react13.useState)();
-  const [monthValue, setMonthValue] = (0, import_react13.useState)();
-  const [quarterValue, setQuartersValue] = (0, import_react13.useState)();
+  const [yearValue, setYearValue] = (0, import_react12.useState)();
+  const [monthValue, setMonthValue] = (0, import_react12.useState)();
+  const [quarterValue, setQuartersValue] = (0, import_react12.useState)();
   return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
     import_antd16.ConfigProvider,
     {
@@ -3135,7 +3183,7 @@ function SortFilter({
 
 // src/Upload/FileUploader/FileUploader.tsx
 var import_icons_react10 = require("@tabler/icons-react");
-var import_react14 = require("react");
+var import_react13 = require("react");
 var import_jsx_runtime35 = require("react/jsx-runtime");
 function FileUploader({
   onUpload,
@@ -3154,10 +3202,10 @@ function FileUploader({
   attachWidth = "w-full",
   readOnly = false
 }) {
-  const [internalFileList, setInternalFileList] = (0, import_react14.useState)([]);
-  const [uploading, setUploading] = (0, import_react14.useState)(false);
-  const [dragActive, setDragActive] = (0, import_react14.useState)(false);
-  const inputRef = (0, import_react14.useRef)(null);
+  const [internalFileList, setInternalFileList] = (0, import_react13.useState)([]);
+  const [uploading, setUploading] = (0, import_react13.useState)(false);
+  const [dragActive, setDragActive] = (0, import_react13.useState)(false);
+  const inputRef = (0, import_react13.useRef)(null);
   const filesToDisplay = value || internalFileList;
   const validateFile = (file) => {
     if (accept && !accept.includes(file.type)) {
@@ -3397,7 +3445,7 @@ function HeadingPage({ Heading }) {
 
 // src/Progress/ProgressBar.tsx
 var import_antd20 = require("antd");
-var import_react15 = require("react");
+var import_react14 = require("react");
 var import_jsx_runtime38 = require("react/jsx-runtime");
 function ProgressBar({
   percent = 0,
@@ -3411,8 +3459,8 @@ function ProgressBar({
   steps,
   isCheckPoints
 }) {
-  const [barWidth, setBarWidth] = (0, import_react15.useState)(0);
-  const progressRef = (0, import_react15.useRef)(null);
+  const [barWidth, setBarWidth] = (0, import_react14.useState)(0);
+  const progressRef = (0, import_react14.useRef)(null);
   let strokeColor = "--color-green-500";
   const defaultStrokeWidth = type === "circle" ? 13 : strokeWidth ?? 8;
   const defaultSize = type === "circle" ? 43 : size;
@@ -3420,7 +3468,7 @@ function ProgressBar({
     const minCheckpoint = Math.min(...checkpoints);
     strokeColor = percent >= minCheckpoint ? "var(--color-green-500)" : "var(--color-red-500)";
   }
-  (0, import_react15.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     const inner = progressRef.current?.querySelector(".ant-progress-inner");
     if (!inner) return;
     const observer = new ResizeObserver(() => {
@@ -3477,24 +3525,24 @@ function ProgressBar({
 
 // src/KpiSection/KpiSection.tsx
 var import_antd21 = require("antd");
-var import_react17 = require("react");
+var import_react16 = require("react");
 
 // src/KpiSection/hooks/useGetKpiSection.ts
-var import_react16 = require("react");
+var import_react15 = require("react");
 var import_cuid = __toESM(require("cuid"));
 function useGetKpiSection() {
-  const [nameKpi, setNameKpi] = (0, import_react16.useState)("");
-  const [kpiValue, setKpiValue] = (0, import_react16.useState)("");
-  const [unitValue, setUnitValue] = (0, import_react16.useState)("");
-  const [kpiList, setKpiList] = (0, import_react16.useState)([]);
-  const [editingBackup, setEditingBackup] = (0, import_react16.useState)({});
-  const [selected, setSelected] = (0, import_react16.useState)("2");
-  const [errors, setErrors] = (0, import_react16.useState)({
+  const [nameKpi, setNameKpi] = (0, import_react15.useState)("");
+  const [kpiValue, setKpiValue] = (0, import_react15.useState)("");
+  const [unitValue, setUnitValue] = (0, import_react15.useState)("");
+  const [kpiList, setKpiList] = (0, import_react15.useState)([]);
+  const [editingBackup, setEditingBackup] = (0, import_react15.useState)({});
+  const [selected, setSelected] = (0, import_react15.useState)("2");
+  const [errors, setErrors] = (0, import_react15.useState)({
     nameKpi: "",
     kpiValue: "",
     unitValue: ""
   });
-  const [itemErrors, setItemErrors] = (0, import_react16.useState)({});
+  const [itemErrors, setItemErrors] = (0, import_react15.useState)({});
   const options = [
     { value: "1", label: "\u0E02\u0E49\u0E2D\u0E04\u0E27\u0E32\u0E21" },
     { value: "2", label: "\u0E15\u0E31\u0E27\u0E40\u0E25\u0E02" }
@@ -3648,11 +3696,11 @@ function KpiSection({ type, onChangeKpiList }) {
     setItemErrors
   } = useGetKpiSection();
   const [messageApi2, messageContainer] = import_antd21.message.useMessage();
-  const [hasShownError, setHasShownError] = (0, import_react17.useState)(false);
-  (0, import_react17.useEffect)(() => {
+  const [hasShownError, setHasShownError] = (0, import_react16.useState)(false);
+  (0, import_react16.useEffect)(() => {
     setMessageApi(messageApi2);
   }, [messageApi2]);
-  (0, import_react17.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     if (onChangeKpiList) {
       onChangeKpiList(kpiList);
     }
@@ -3890,7 +3938,7 @@ function AntDModal({ children, isOpen, width, onCancel }) {
 
 // src/Indicator/Indicator/Indicator.tsx
 var import_icons_react12 = require("@tabler/icons-react");
-var import_react18 = require("react");
+var import_react17 = require("react");
 var import_antd23 = require("antd");
 var import_jsx_runtime41 = require("react/jsx-runtime");
 function Indicator({
@@ -3904,24 +3952,24 @@ function Indicator({
   canEdit,
   onDeleteClick
 }) {
-  const [valueSwitch, setValueSwitch] = (0, import_react18.useState)("TEXT");
-  const [cacheData, setCacheData] = (0, import_react18.useState)({
+  const [valueSwitch, setValueSwitch] = (0, import_react17.useState)("TEXT");
+  const [cacheData, setCacheData] = (0, import_react17.useState)({
     indicatorType: type,
     inputType: valueSwitch,
     textValue: "",
     numberValue: 0,
     unit: ""
   });
-  const [cacheEditData, setCacheEditData] = (0, import_react18.useState)({
+  const [cacheEditData, setCacheEditData] = (0, import_react17.useState)({
     indicatorType: type,
     inputType: valueSwitch,
     textValue: "",
     numberValue: 0,
     unit: ""
   });
-  const [editIndex, setEditIndex] = (0, import_react18.useState)(null);
-  const [addError, setAddError] = (0, import_react18.useState)({});
-  const [editError, setEditError] = (0, import_react18.useState)({});
+  const [editIndex, setEditIndex] = (0, import_react17.useState)(null);
+  const [addError, setAddError] = (0, import_react17.useState)({});
+  const [editError, setEditError] = (0, import_react17.useState)({});
   const handleAddIndicator = () => {
     const nextErr = {};
     const textValue = (cacheData.textValue ?? "").trim();
@@ -4166,11 +4214,11 @@ function Indicator({
 
 // src/FilterPopUp/FilterPopUp.tsx
 var import_icons_react13 = require("@tabler/icons-react");
-var import_react19 = require("react");
+var import_react18 = require("react");
 var import_jsx_runtime42 = require("react/jsx-runtime");
 var FilterPopUp = (filter) => {
-  const [isAction, setIsAction] = (0, import_react19.useState)(true);
-  const [filterArray, setFilterArray] = (0, import_react19.useState)([""]);
+  const [isAction, setIsAction] = (0, import_react18.useState)(true);
+  const [filterArray, setFilterArray] = (0, import_react18.useState)([""]);
   const handleClearFilter = () => {
     setFilterArray([]);
   };
@@ -4203,7 +4251,7 @@ var FilterPopUp = (filter) => {
 };
 
 // src/ProfileSelect/ProfileSelect/ProfileSelect.tsx
-var import_react20 = require("react");
+var import_react19 = require("react");
 var import_icons_react14 = require("@tabler/icons-react");
 var import_antd24 = require("antd");
 var import_jsx_runtime43 = require("react/jsx-runtime");
@@ -4215,15 +4263,15 @@ function ProfileSelect({
   onUpdateAssignUser,
   placeholder
 }) {
-  const [maxVisible, setMaxVisible] = (0, import_react20.useState)(4);
-  const [userNotAssign, setUserNotAssign] = (0, import_react20.useState)([]);
-  const [search, setSearch] = (0, import_react20.useState)("");
-  const [isShowSelect, setIsShowSelect] = (0, import_react20.useState)(false);
-  const containerRef = (0, import_react20.useRef)(null);
-  const selectRef = (0, import_react20.useRef)(null);
+  const [maxVisible, setMaxVisible] = (0, import_react19.useState)(4);
+  const [userNotAssign, setUserNotAssign] = (0, import_react19.useState)([]);
+  const [search, setSearch] = (0, import_react19.useState)("");
+  const [isShowSelect, setIsShowSelect] = (0, import_react19.useState)(false);
+  const containerRef = (0, import_react19.useRef)(null);
+  const selectRef = (0, import_react19.useRef)(null);
   const avatarSize = 30;
   const spacing = 8;
-  (0, import_react20.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     const handler = (e) => {
       if (!selectRef?.current?.contains(e.target) && !containerRef?.current?.contains(e.target)) {
         setIsShowSelect(false);
@@ -4234,7 +4282,7 @@ function ProfileSelect({
       document.removeEventListener("mousedown", handler);
     };
   }, []);
-  (0, import_react20.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (!containerRef.current) return;
     const updateWidth = () => {
       if (containerRef.current) {
@@ -4250,7 +4298,7 @@ function ProfileSelect({
       resizeObserver.disconnect();
     };
   }, [allUser]);
-  (0, import_react20.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     setUserNotAssign(
       allUser.filter((u) => !assignUser.some((au) => au.id === u.id))
     );
@@ -4444,7 +4492,7 @@ function ProfileSelect({
 }
 
 // src/Button/QRCode/QRCode.tsx
-var import_react21 = require("react");
+var import_react20 = require("react");
 var import_qrcode = __toESM(require("qrcode"));
 var import_jsx_runtime44 = require("react/jsx-runtime");
 var QRCodeGenerator = ({
@@ -4453,9 +4501,9 @@ var QRCodeGenerator = ({
   defaultExportSize = 512,
   fileBaseName = "qr-code"
 }) => {
-  const canvasRef = (0, import_react21.useRef)(null);
-  const [format5, setFormat] = (0, import_react21.useState)("png");
-  const [exportSize, setExportSize] = (0, import_react21.useState)(defaultExportSize);
+  const canvasRef = (0, import_react20.useRef)(null);
+  const [format5, setFormat] = (0, import_react20.useState)("png");
+  const [exportSize, setExportSize] = (0, import_react20.useState)(defaultExportSize);
   const sizeOption = [
     {
       label: "64 x 64",
@@ -4500,7 +4548,7 @@ var QRCodeGenerator = ({
       value: "jpeg"
     }
   ];
-  (0, import_react21.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     if (!canvasRef.current) return;
     import_qrcode.default.toCanvas(canvasRef.current, url, { width: previewSize, margin: 1 }, (error) => {
       if (error) console.error(error);
@@ -4621,7 +4669,7 @@ function TabProject({ tabOption, now, onChange }) {
 }
 
 // src/Chart/BarChart/BarChart.tsx
-var import_react22 = require("react");
+var import_react21 = require("react");
 var d3 = __toESM(require("d3"));
 var import_jsx_runtime46 = require("react/jsx-runtime");
 var defaultMargin = { top: 30, right: 200, bottom: 36, left: 50 };
@@ -4643,15 +4691,16 @@ var BarChart = ({
   margin = defaultMargin,
   yLabel,
   xLabel,
+  modeLabel,
   colorPalette = defaultColorPalette
 }) => {
-  const svgRef = (0, import_react22.useRef)(null);
-  const gRef = (0, import_react22.useRef)(null);
-  const xAxisRef = (0, import_react22.useRef)(null);
-  const yAxisRef = (0, import_react22.useRef)(null);
-  const containerRef = (0, import_react22.useRef)(null);
-  const widthRef = (0, import_react22.useRef)(0);
-  (0, import_react22.useEffect)(() => {
+  const svgRef = (0, import_react21.useRef)(null);
+  const gRef = (0, import_react21.useRef)(null);
+  const xAxisRef = (0, import_react21.useRef)(null);
+  const yAxisRef = (0, import_react21.useRef)(null);
+  const containerRef = (0, import_react21.useRef)(null);
+  const widthRef = (0, import_react21.useRef)(0);
+  (0, import_react21.useEffect)(() => {
     if (!containerRef.current) return;
     const ro = new ResizeObserver((entries) => {
       const cr = entries[0].contentRect;
@@ -4661,8 +4710,8 @@ var BarChart = ({
     ro.observe(containerRef.current);
     return () => ro.disconnect();
   }, []);
-  const xDomain = (0, import_react22.useMemo)(() => data.map((d) => d.x), [data]);
-  const yDomain = (0, import_react22.useMemo)(() => {
+  const xDomain = (0, import_react21.useMemo)(() => data.map((d) => d.x), [data]);
+  const yDomain = (0, import_react21.useMemo)(() => {
     const maxY = d3.max(data, (d) => d.y);
     return [0, (maxY !== void 0 ? maxY : 0) + (maxY !== void 0 ? maxY : 0) * 0.1];
   }, [data]);
@@ -4689,6 +4738,14 @@ var BarChart = ({
     );
     svg.select(".grid").lower();
     xAxisG.attr("transform", `translate(${margin.left},${height - margin.bottom})`).call(xAxis).selectAll("text").style("text-anchor", "middle").attr("dy", "1.5em").attr("fill", "currentColor").style("font-size", "14px").style("font-family", "Arial, sans-serif");
+    const labels = xAxisG.selectAll("text").attr("fill", "currentColor").style("font-size", "14px").style("font-family", "Arial, sans-serif");
+    if (modeLabel === "45") {
+      labels.attr("transform", "rotate(-45)").style("overflow", "visible").style("text-anchor", "end").attr("dx", "-0.8em").attr("dy", "0.15em");
+    } else if (modeLabel === "line") {
+      labels.attr("transform", "rotate(0)").style("text-anchor", "middle").attr("dx", "0").attr("dy", "1.5em");
+    } else {
+      labels.style("text-anchor", "middle").attr("dy", "1.5em");
+    }
     yAxisG.selectAll(".y-axis-label").data(yLabel ? [yLabel] : []).join(
       (enter) => enter.append("text").attr("class", "y-axis-label").attr("fill", "currentColor").attr("x", -margin.left + 8).attr("y", -margin.top + 20).attr("text-anchor", "start").style("font-size", "14px").style("font-family", "Arial").text((d) => d),
       (update) => update.text((d) => d)
@@ -4728,14 +4785,14 @@ var BarChart = ({
       (exit) => exit.transition(t).attr("y", margin.top + y(0)).attr("height", innerH - y(0)).remove()
     );
     g.selectAll("text.bar-label").data(data).join(
-      (enter) => enter.append("text").attr("class", "bar-label").attr("x", (d) => (x(d.x) ?? 0) + x.bandwidth() / 2).attr("y", (d) => y(d.y) - 6).attr("text-anchor", "middle").style("font-size", "50px").style("font-weight", "bold").style("font-family", "Arial, sans-serif").style("fill", (d, i) => colorPalette[i % colorPalette.length]).text((d) => d.y),
+      (enter) => enter.append("text").attr("class", "bar-label").attr("x", (d) => (x(d.x) ?? 0) + x.bandwidth() / 2).attr("y", (d) => y(d.y) - 6).attr("text-anchor", "middle").style("font-size", "50px").style("font-weight", "bold").style("font-family", "Arial, sans-serif").style("fill", (d, i) => colorPalette[i % colorPalette.length]).style("overflow", "visible").text((d) => d.y),
       (update) => update.transition(t).attr("x", (d) => (x(d.x) ?? 0) + x.bandwidth() / 2).attr("y", (d) => y(d.y) - 6).text((d) => d.y),
       (exit) => exit.remove()
     );
   };
-  (0, import_react22.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     render();
-  }, [data, height, margin, xDomain.toString(), yDomain.toString()]);
+  }, [data, height, margin, modeLabel, xDomain.toString(), yDomain.toString()]);
   return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { ref: containerRef, style: { width: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("svg", { ref: svgRef, role: "img", "aria-label": "Bar chart", style: { display: "block", width: "100%", height }, children: [
     /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("g", { ref: gRef, transform: `translate(${margin.left},${margin.top})` }),
     /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("g", { ref: xAxisRef }),
@@ -4744,7 +4801,7 @@ var BarChart = ({
 };
 
 // src/Chart/PieChart/PieChart.tsx
-var import_react23 = __toESM(require("react"));
+var import_react22 = __toESM(require("react"));
 var d32 = __toESM(require("d3"));
 var import_jsx_runtime47 = require("react/jsx-runtime");
 var defaultColors = d32.schemeCategory10;
@@ -4756,9 +4813,9 @@ var PieChart = ({
   height,
   colorPalette = defaultColors
 }) => {
-  const svgRef = (0, import_react23.useRef)(null);
-  const [dataSide, setDataSide] = import_react23.default.useState([]);
-  (0, import_react23.useEffect)(() => {
+  const svgRef = (0, import_react22.useRef)(null);
+  const [dataSide, setDataSide] = import_react22.default.useState([]);
+  (0, import_react22.useEffect)(() => {
     if (!svgRef.current) return;
     d32.select(svgRef.current).selectAll("*").remove();
     const radius = Math.min(width, height) / 2;
@@ -4795,7 +4852,7 @@ var PieChart = ({
 };
 
 // src/GanttChart/GanttChart.tsx
-var import_react24 = require("react");
+var import_react23 = require("react");
 var d33 = __toESM(require("d3"));
 var import_date_fns3 = require("date-fns");
 var import_locale3 = require("date-fns/locale");
@@ -4955,10 +5012,10 @@ var GanttChart = ({
   width,
   mode
 }) => {
-  const svgRef = (0, import_react24.useRef)(null);
-  const leftPanelRef = (0, import_react24.useRef)(null);
-  const dataContainerRef = (0, import_react24.useRef)(null);
-  const [viewMode] = (0, import_react24.useState)("year");
+  const svgRef = (0, import_react23.useRef)(null);
+  const leftPanelRef = (0, import_react23.useRef)(null);
+  const dataContainerRef = (0, import_react23.useRef)(null);
+  const [viewMode] = (0, import_react23.useState)("year");
   const {
     barHeight,
     barSpacing,
@@ -4966,7 +5023,7 @@ var GanttChart = ({
     headersGroupLayer2Height
   } = LAYOUT;
   const totalHeaderHeight = headersGroupLayer1Height + headersGroupLayer2Height;
-  (0, import_react24.useEffect)(() => {
+  (0, import_react23.useEffect)(() => {
     if (!data || !svgRef.current) return;
     const margin = { top: 0, right: 20, bottom: 20, left: 20 };
     const chartHeight = data.length * (barHeight + barSpacing) + margin.top + margin.bottom;
@@ -5254,7 +5311,7 @@ var GanttChart = ({
 
 // src/CardKPI/CardKPI/CardKPI.tsx
 var import_icons_react16 = require("@tabler/icons-react");
-var import_react25 = require("react");
+var import_react24 = require("react");
 var import_jsx_runtime49 = require("react/jsx-runtime");
 function KPIRow({ item }) {
   return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
@@ -5276,7 +5333,7 @@ function CardKPI({
   indicator,
   projectId
 }) {
-  const [isOpen, setIsOpen] = (0, import_react25.useState)(false);
+  const [isOpen, setIsOpen] = (0, import_react24.useState)(false);
   return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
     "div",
     {