@esic-lab/data-core-ui 0.0.49 → 0.0.51

package/dist/index.d.mts

@@ -453,8 +453,9 @@ interface FileUploaderProps {
     description?: string;
     label?: string;
     value?: File[] | any[];
+    uploadText?: string;
 }
-declare function FileUploader({ onUpload, onError, onRemove, accept, maxSize, disabled, mode, description, label, value, }: FileUploaderProps): react_jsx_runtime.JSX.Element;
+declare function FileUploader({ onUpload, onError, onRemove, accept, maxSize, disabled, mode, description, label, value, uploadText, }: FileUploaderProps): react_jsx_runtime.JSX.Element;
 
 declare function setMessageApi(api: MessageInstance): void;
 declare function messageSuccess(content: string): void;

package/dist/index.d.ts

@@ -453,8 +453,9 @@ interface FileUploaderProps {
     description?: string;
     label?: string;
     value?: File[] | any[];
+    uploadText?: string;
 }
-declare function FileUploader({ onUpload, onError, onRemove, accept, maxSize, disabled, mode, description, label, value, }: FileUploaderProps): react_jsx_runtime.JSX.Element;
+declare function FileUploader({ onUpload, onError, onRemove, accept, maxSize, disabled, mode, description, label, value, uploadText, }: FileUploaderProps): react_jsx_runtime.JSX.Element;
 
 declare function setMessageApi(api: MessageInstance): void;
 declare function messageSuccess(content: string): void;

package/dist/index.js

@@ -659,20 +659,23 @@ function SwitchSelect({
 }
 
 // src/NavBar/MenuNavBar/MenuNavBar.tsx
+var import_react = require("react");
 var import_jsx_runtime12 = require("react/jsx-runtime");
 function MenuNavBar({ menus, onClick }) {
+  const [activePath, setActivePath] = (0, import_react.useState)("");
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "w-full h-full p-[10px] bg-white", children: menus?.map((menu, index) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: `p-[10px] ${index !== 0 ? "mt-[10px]" : ""}`, children: [
     /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "p-[10px] w-[202px] h-[47px] subtitle-1", children: menu.title }),
     menu?.subMenus.map((subMenu) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
       "div",
       {
-        className: "group flex justify-center items-center gap-[10px] p-[10px] w-[202px] h-[47px] rounded-[6px] subtitle-2 cursor-pointer hover:bg-red-100 active:bg-primary-500 hover:text-white active:text-white",
-        onClick: () => onClick(subMenu.path),
+        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_runtime12.jsxs)("span", { className: "flex justify-center items-center w-[24px] h-[24px] text-[20px]", children: [
-            subMenu.icon && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: `block ${subMenu.iconActive ? "group-active:hidden" : ""}`, children: subMenu.icon }),
-            subMenu.iconActive && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "hidden group-active:block", children: subMenu.iconActive })
-          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime12.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_runtime12.jsx)("span", { className: "flex ml-auto", children: subMenu.customNode && subMenu.customNode })
         ]
@@ -684,11 +687,11 @@ function MenuNavBar({ menus, onClick }) {
 
 // src/NavBar/MenuNavBar/Sidebar.tsx
 var import_icons_react2 = require("@tabler/icons-react");
-var import_react = require("react");
+var import_react2 = require("react");
 var import_jsx_runtime13 = require("react/jsx-runtime");
-var SidebarContext = (0, import_react.createContext)({ expanded: false });
+var SidebarContext = (0, import_react2.createContext)({ expanded: false });
 function Sidebar({ children, logo }) {
-  const [expanded, setExpanded] = (0, import_react.useState)(true);
+  const [expanded, setExpanded] = (0, import_react2.useState)(true);
   return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("aside", { className: "h-screen", children: /* @__PURE__ */ (0, import_jsx_runtime13.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_runtime13.jsxs)("div", { className: "p-4 pb-2 flex justify-center items-center", children: [
       expanded && logo && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("img", { src: logo, width: 120, className: "ml-auto" }),
@@ -724,15 +727,15 @@ function TopNavBar({ onClickNoti, logo }) {
 
 // src/Table/DataTable/DataTable.tsx
 var import_icons_react5 = require("@tabler/icons-react");
-var import_react3 = require("react");
+var import_react4 = require("react");
 
 // src/Table/Pagination/Pagination.tsx
 var import_icons_react4 = require("@tabler/icons-react");
-var import_react2 = require("react");
+var import_react3 = require("react");
 var import_jsx_runtime15 = require("react/jsx-runtime");
 function Pagination({ totalItems, itemsPerPage, currentPage, onPageChange }) {
   const totalPages = Math.ceil(totalItems / itemsPerPage);
-  const getPages = (0, import_react2.useMemo)(() => {
+  const getPages = (0, import_react3.useMemo)(() => {
     if (totalPages <= 7) {
       return Array.from({ length: totalPages }, (_, i) => i + 1);
     }
@@ -798,8 +801,8 @@ var import_jsx_runtime16 = 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_react3.useState)(null);
-  const [page, setPage] = (0, import_react3.useState)(1);
+  const [sortConfig, setSortConfig] = (0, import_react4.useState)(null);
+  const [page, setPage] = (0, import_react4.useState)(1);
   const onSorting = (config) => {
     if (config) {
       setSortConfig({ key: config?.key, direction: config?.direction });
@@ -855,7 +858,7 @@ function DataTable({ columns, data, onSort, isLoading }) {
 
 // src/Table/DataTable/AntDataTable.tsx
 var import_antd = require("antd");
-var import_react4 = require("react");
+var import_react5 = require("react");
 var import_jsx_runtime17 = require("react/jsx-runtime");
 function AntDataTable({
   dataSource,
@@ -870,7 +873,7 @@ function AntDataTable({
   height,
   pagination
 }) {
-  const [selectedRowKeys, setSelectedRowKeys] = (0, import_react4.useState)([]);
+  const [selectedRowKeys, setSelectedRowKeys] = (0, import_react5.useState)([]);
   const rowSelection = {
     selectedRowKeys,
     onChange: (newSelectedRowKeys) => {
@@ -909,8 +912,8 @@ function AntDataTable({
 }
 
 // src/Calendar/Calendar/Calendar.tsx
-var import_react5 = require("react");
-var import_react6 = __toESM(require("@fullcalendar/react"));
+var import_react6 = require("react");
+var import_react7 = __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"));
@@ -918,10 +921,10 @@ var import_th = __toESM(require("@fullcalendar/core/locales/th"));
 var import_icons_react6 = require("@tabler/icons-react");
 var import_jsx_runtime18 = require("react/jsx-runtime");
 function Calendar({ events }) {
-  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 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 updateTitle = () => {
     const calendarApi = calendarRef.current?.getApi();
     if (calendarApi) {
@@ -932,7 +935,7 @@ function Calendar({ events }) {
     const calendarApi = calendarRef.current?.getApi();
     calendarApi?.changeView(viewName);
   };
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     updateTitle();
   }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "fc w-full h-full relative z-10", children: [
@@ -1008,7 +1011,7 @@ function Calendar({ events }) {
       ] })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "relative z-10", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-      import_react6.default,
+      import_react7.default,
       {
         ref: calendarRef,
         plugins: [import_daygrid.default, import_timegrid.default, import_interaction.default],
@@ -1064,7 +1067,7 @@ function EventPopUp({ event, onClose }) {
 
 // src/Input/TextInput/TextInput.tsx
 var import_icons_react7 = require("@tabler/icons-react");
-var import_react7 = require("react");
+var import_react8 = require("react");
 var import_jsx_runtime19 = require("react/jsx-runtime");
 function TextInput({
   label,
@@ -1077,7 +1080,7 @@ function TextInput({
   onChange,
   disabled
 }) {
-  const [showPassword, setShowPassword] = (0, import_react7.useState)(false);
+  const [showPassword, setShowPassword] = (0, import_react8.useState)(false);
   const onShowPassword = () => {
     setShowPassword(!showPassword);
   };
@@ -1289,7 +1292,7 @@ function InputFieldNumber({
 }
 
 // src/DatePicker/DatePickerBasic/DatePickerBasic.tsx
-var import_react8 = require("react");
+var import_react9 = require("react");
 var import_dayjs = __toESM(require_dayjs_min());
 var import_th2 = __toESM(require_th());
 var import_buddhistEra = __toESM(require_buddhistEra());
@@ -1311,8 +1314,8 @@ function DatePickerBasic({
   disabledDate,
   disablePast = false
 }) {
-  const [open, setOpen] = (0, import_react8.useState)(false);
-  const wrapperRef = (0, import_react8.useRef)(null);
+  const [open, setOpen] = (0, import_react9.useState)(false);
+  const wrapperRef = (0, import_react9.useRef)(null);
   const current = value ? (0, import_dayjs.default)(value) : null;
   const today = (0, import_dayjs.default)();
   const formatThaiBE = (date) => {
@@ -1334,7 +1337,7 @@ function DatePickerBasic({
     "\u0E1E\u0E24\u0E28\u0E08\u0E34\u0E01\u0E32\u0E22\u0E19",
     "\u0E18\u0E31\u0E19\u0E27\u0E32\u0E04\u0E21"
   ];
-  const [calendar, setCalendar] = (0, import_react8.useState)(current || today);
+  const [calendar, setCalendar] = (0, import_react9.useState)(current || today);
   const daysInMonth = calendar.daysInMonth();
   const firstDayOfMonth = calendar.startOf("month").day();
   const isDisabled = (date) => {
@@ -1350,7 +1353,7 @@ function DatePickerBasic({
     onChange(selected.toDate());
     setOpen(false);
   };
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     const handleClickOutside = (e) => {
       if (wrapperRef.current && !wrapperRef.current.contains(e.target)) {
         setOpen(false);
@@ -1437,7 +1440,7 @@ function DatePickerBasic({
 }
 
 // src/DatePicker/DatePickerRange/DatePickerRange.tsx
-var import_react9 = require("react");
+var import_react10 = require("react");
 var import_dayjs2 = __toESM(require_dayjs_min());
 var import_th3 = __toESM(require_th());
 var import_buddhistEra2 = __toESM(require_buddhistEra());
@@ -1458,13 +1461,13 @@ function DatePickerRange({
   disabledDate,
   disablePast = false
 }) {
-  const [open, setOpen] = (0, import_react9.useState)(false);
-  const wrapperRef = (0, import_react9.useRef)(null);
+  const [open, setOpen] = (0, import_react10.useState)(false);
+  const wrapperRef = (0, import_react10.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_react9.useState)(startDayjs || today);
+  const [calendar, setCalendar] = (0, import_react10.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;
@@ -1508,7 +1511,7 @@ function DatePickerRange({
       }
     }
   };
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     const handleClickOutside = (e) => {
       if (wrapperRef.current && !wrapperRef.current.contains(e.target)) {
         setOpen(false);
@@ -2591,17 +2594,6 @@ function SelectFieldGroup({
 
 // src/Select/SelectFieldStatus/SelectFieldStatus.tsx
 var import_antd9 = require("antd");
-
-// src/Select/SelectFieldStatus/StatusMockup.ts
-var status = [
-  { value: "1", label: "\u0E40\u0E1B\u0E34\u0E14", color: "var(--color-gray-500)" },
-  { value: "2", label: "\u0E01\u0E33\u0E25\u0E31\u0E07\u0E14\u0E33\u0E40\u0E19\u0E34\u0E19\u0E01\u0E32\u0E23", color: "var(--color-yellow-400)" },
-  { value: "3", label: "\u0E23\u0E2D\u0E15\u0E23\u0E27\u0E08\u0E2A\u0E2D\u0E1A", color: "var(--color-red-400)" },
-  { value: "4", label: "\u0E40\u0E2A\u0E23\u0E47\u0E08\u0E2A\u0E34\u0E49\u0E19", color: "var(--color-green-400)" },
-  { value: "5", label: "\u0E16\u0E39\u0E01\u0E22\u0E01\u0E40\u0E25\u0E34\u0E01", color: "var(--color-gray-300)" }
-];
-
-// src/Select/SelectFieldStatus/SelectFieldStatus.tsx
 var import_icons = require("@ant-design/icons");
 var import_jsx_runtime29 = require("react/jsx-runtime");
 function SelectFieldStatus({
@@ -2615,7 +2607,7 @@ function SelectFieldStatus({
   options,
   className
 }) {
-  const selectedItem = status.find((s) => s.value === value);
+  const selectedItem = options?.find((s) => s.value === value);
   return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
     import_antd9.ConfigProvider,
     {
@@ -2663,7 +2655,7 @@ function SelectFieldStatus({
 var import_antd10 = require("antd");
 
 // src/Select/SelectFieldStatusReport/StatusReportMockup.ts
-var status2 = [
+var status = [
   { value: "1", label: "\u0E40\u0E2A\u0E23\u0E47\u0E08\u0E2A\u0E34\u0E49\u0E19", color: "var(--color-green-400)" },
   { value: "2", label: "\u0E22\u0E31\u0E07\u0E44\u0E21\u0E48\u0E40\u0E2A\u0E23\u0E47\u0E08\u0E2A\u0E34\u0E49\u0E19", color: "var(--color-red-500)" }
 ];
@@ -2682,7 +2674,7 @@ function SelectFieldStatusReport({
   className,
   options
 }) {
-  const selectedItem = status2.find((s) => s.value === value);
+  const selectedItem = status.find((s) => s.value === value);
   return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
     import_antd10.ConfigProvider,
     {
@@ -2728,7 +2720,7 @@ function SelectFieldStatusReport({
 
 // src/Select/SelectFieldTag/SelectFieldTag.tsx
 var import_antd11 = require("antd");
-var import_react10 = require("react");
+var import_react11 = require("react");
 var import_jsx_runtime31 = require("react/jsx-runtime");
 function SelectFieldTag({
   label,
@@ -2741,10 +2733,10 @@ function SelectFieldTag({
   onChange,
   onClear
 }) {
-  const [internalValue, setInternalValue] = (0, import_react10.useState)([]);
+  const [internalValue, setInternalValue] = (0, import_react11.useState)([]);
   const isControlled = controlledValue !== void 0;
   const value = isControlled ? controlledValue : internalValue;
-  const [searchWord, setSearchWord] = (0, import_react10.useState)("");
+  const [searchWord, setSearchWord] = (0, import_react11.useState)("");
   const handleChange = (val) => {
     const trimValue = val.map((v) => v.trim());
     const filtered = trimValue.filter((v) => v.trim() !== "");
@@ -2804,7 +2796,7 @@ function SelectFieldTag({
 // src/Select/SelectCustom/SelectCustom.tsx
 var import_icons_react8 = require("@tabler/icons-react");
 var import_antd12 = require("antd");
-var import_react11 = require("react");
+var import_react12 = require("react");
 var import_jsx_runtime32 = require("react/jsx-runtime");
 function SelectCustom({
   label = "\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25\u0E42\u0E04\u0E23\u0E07\u0E01\u0E32\u0E23",
@@ -2815,8 +2807,8 @@ function SelectCustom({
   error,
   onClear
 }) {
-  const [value, setValue] = (0, import_react11.useState)([]);
-  const [valueList, setValueList] = (0, import_react11.useState)([]);
+  const [value, setValue] = (0, import_react12.useState)([]);
+  const [valueList, setValueList] = (0, import_react12.useState)([]);
   const handleChange = (selectedValues) => {
     const newValues = selectedValues.filter((v) => !valueList.includes(v));
     setValueList((prev) => {
@@ -2921,7 +2913,7 @@ var quarters = [
 ];
 
 // src/SortFilter/SortFilter.tsx
-var import_react12 = require("react");
+var import_react13 = require("react");
 var import_icons_react9 = require("@tabler/icons-react");
 var import_jsx_runtime33 = require("react/jsx-runtime");
 function SortFilter({
@@ -2931,9 +2923,9 @@ function SortFilter({
   onSortClick,
   onFilterClick
 }) {
-  const [yearValue, setYearValue] = (0, import_react12.useState)();
-  const [monthValue, setMonthValue] = (0, import_react12.useState)();
-  const [quarterValue, setQuartersValue] = (0, import_react12.useState)();
+  const [yearValue, setYearValue] = (0, import_react13.useState)();
+  const [monthValue, setMonthValue] = (0, import_react13.useState)();
+  const [quarterValue, setQuartersValue] = (0, import_react13.useState)();
   return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
     import_antd13.ConfigProvider,
     {
@@ -3009,7 +3001,7 @@ function SortFilter({
 
 // src/Upload/FileUploader/FileUploader.tsx
 var import_icons_react10 = require("@tabler/icons-react");
-var import_react13 = require("react");
+var import_react14 = require("react");
 var import_jsx_runtime34 = require("react/jsx-runtime");
 function FileUploader({
   onUpload,
@@ -3021,12 +3013,13 @@ function FileUploader({
   mode = "drop",
   description,
   label,
-  value
+  value,
+  uploadText = "\u0E41\u0E19\u0E1A\u0E44\u0E1F\u0E25\u0E4C"
 }) {
-  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 [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 filesToDisplay = value || internalFileList;
   const validateFile = (file) => {
     if (accept && !accept.includes(file.type)) {
@@ -3107,7 +3100,8 @@ function FileUploader({
             " \u0E01\u0E33\u0E25\u0E31\u0E07\u0E2D\u0E31\u0E1B\u0E42\u0E2B\u0E25\u0E14"
           ] }) : /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
             /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_icons_react10.IconUpload, { size: 15, className: "text-gray-400" }),
-            " \u0E41\u0E19\u0E1A\u0E44\u0E1F\u0E25\u0E4C"
+            " ",
+            uploadText
           ] })
         }
       ) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
@@ -3250,7 +3244,7 @@ function HeadingPage({ Heading }) {
 
 // src/Progress/ProgressBar.tsx
 var import_antd17 = require("antd");
-var import_react14 = require("react");
+var import_react15 = require("react");
 var import_jsx_runtime37 = require("react/jsx-runtime");
 function ProgressBar({
   percent = 0,
@@ -3264,8 +3258,8 @@ function ProgressBar({
   steps,
   isCheckPoints
 }) {
-  const [barWidth, setBarWidth] = (0, import_react14.useState)(0);
-  const progressRef = (0, import_react14.useRef)(null);
+  const [barWidth, setBarWidth] = (0, import_react15.useState)(0);
+  const progressRef = (0, import_react15.useRef)(null);
   let strokeColor = "--color-green-500";
   const defaultStrokeWidth = type === "circle" ? 13 : strokeWidth ?? 8;
   const defaultSize = type === "circle" ? 43 : size;
@@ -3273,7 +3267,7 @@ function ProgressBar({
     const minCheckpoint = Math.min(...checkpoints);
     strokeColor = percent >= minCheckpoint ? "var(--color-green-500)" : "var(--color-red-500)";
   }
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     const inner = progressRef.current?.querySelector(".ant-progress-inner");
     if (!inner) return;
     const observer = new ResizeObserver(() => {
@@ -3330,24 +3324,24 @@ function ProgressBar({
 
 // src/KpiSection/KpiSection.tsx
 var import_antd18 = require("antd");
-var import_react16 = require("react");
+var import_react17 = require("react");
 
 // src/KpiSection/hooks/useGetKpiSection.ts
-var import_react15 = require("react");
+var import_react16 = require("react");
 var import_cuid = __toESM(require("cuid"));
 function useGetKpiSection() {
-  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)({
+  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)({
     nameKpi: "",
     kpiValue: "",
     unitValue: ""
   });
-  const [itemErrors, setItemErrors] = (0, import_react15.useState)({});
+  const [itemErrors, setItemErrors] = (0, import_react16.useState)({});
   const options = [
     { value: "1", label: "\u0E02\u0E49\u0E2D\u0E04\u0E27\u0E32\u0E21" },
     { value: "2", label: "\u0E15\u0E31\u0E27\u0E40\u0E25\u0E02" }
@@ -3501,11 +3495,11 @@ function KpiSection({ type, onChangeKpiList }) {
     setItemErrors
   } = useGetKpiSection();
   const [messageApi2, messageContainer] = import_antd18.message.useMessage();
-  const [hasShownError, setHasShownError] = (0, import_react16.useState)(false);
-  (0, import_react16.useEffect)(() => {
+  const [hasShownError, setHasShownError] = (0, import_react17.useState)(false);
+  (0, import_react17.useEffect)(() => {
     setMessageApi(messageApi2);
   }, [messageApi2]);
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (onChangeKpiList) {
       onChangeKpiList(kpiList);
     }
@@ -3743,7 +3737,7 @@ function AntDModal({ children, isOpen, width, onCancel }) {
 
 // src/Indicator/Indicator/Indicator.tsx
 var import_icons_react12 = require("@tabler/icons-react");
-var import_react17 = require("react");
+var import_react18 = require("react");
 var import_antd20 = require("antd");
 var import_jsx_runtime40 = require("react/jsx-runtime");
 function Indicator({
@@ -3757,24 +3751,24 @@ function Indicator({
   canEdit,
   onDeleteClick
 }) {
-  const [valueSwitch, setValueSwitch] = (0, import_react17.useState)("TEXT");
-  const [cacheData, setCacheData] = (0, import_react17.useState)({
+  const [valueSwitch, setValueSwitch] = (0, import_react18.useState)("TEXT");
+  const [cacheData, setCacheData] = (0, import_react18.useState)({
     indicatorType: type,
     inputType: valueSwitch,
     textValue: "",
     numberValue: 0,
     unit: ""
   });
-  const [cacheEditData, setCacheEditData] = (0, import_react17.useState)({
+  const [cacheEditData, setCacheEditData] = (0, import_react18.useState)({
     indicatorType: type,
     inputType: valueSwitch,
     textValue: "",
     numberValue: 0,
     unit: ""
   });
-  const [editIndex, setEditIndex] = (0, import_react17.useState)(null);
-  const [addError, setAddError] = (0, import_react17.useState)({});
-  const [editError, setEditError] = (0, import_react17.useState)({});
+  const [editIndex, setEditIndex] = (0, import_react18.useState)(null);
+  const [addError, setAddError] = (0, import_react18.useState)({});
+  const [editError, setEditError] = (0, import_react18.useState)({});
   const handleAddIndicator = () => {
     const nextErr = {};
     const textValue = (cacheData.textValue ?? "").trim();
@@ -4049,11 +4043,11 @@ function Indicator({
 
 // src/FilterPopUp/FilterPopUp.tsx
 var import_icons_react13 = require("@tabler/icons-react");
-var import_react18 = require("react");
+var import_react19 = require("react");
 var import_jsx_runtime41 = require("react/jsx-runtime");
 var FilterPopUp = (filter) => {
-  const [isAction, setIsAction] = (0, import_react18.useState)(true);
-  const [filterArray, setFilterArray] = (0, import_react18.useState)([""]);
+  const [isAction, setIsAction] = (0, import_react19.useState)(true);
+  const [filterArray, setFilterArray] = (0, import_react19.useState)([""]);
   const handleClearFilter = () => {
     setFilterArray([]);
   };
@@ -4086,7 +4080,7 @@ var FilterPopUp = (filter) => {
 };
 
 // src/ProfileSelect/ProfileSelect/ProfileSelect.tsx
-var import_react19 = require("react");
+var import_react20 = require("react");
 var import_icons_react14 = require("@tabler/icons-react");
 var import_antd21 = require("antd");
 var import_jsx_runtime42 = require("react/jsx-runtime");
@@ -4097,15 +4091,15 @@ function ProfileSelect({
   className,
   onUpdateAssignUser
 }) {
-  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 [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 avatarSize = 30;
   const spacing = 8;
-  (0, import_react19.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     const handler = (e) => {
       if (!selectRef?.current?.contains(e.target) && !containerRef?.current?.contains(e.target)) {
         setIsShowSelect(false);
@@ -4116,7 +4110,7 @@ function ProfileSelect({
       document.removeEventListener("mousedown", handler);
     };
   }, []);
-  (0, import_react19.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     if (!containerRef.current) return;
     const updateWidth = () => {
       if (containerRef.current) {
@@ -4132,7 +4126,7 @@ function ProfileSelect({
       resizeObserver.disconnect();
     };
   }, [allUser]);
-  (0, import_react19.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     setUserNotAssign(
       allUser.filter((u) => !assignUser.some((au) => au.id === u.id))
     );
@@ -4320,7 +4314,7 @@ function ProfileSelect({
 }
 
 // src/Button/QRCode/QRCode.tsx
-var import_react20 = require("react");
+var import_react21 = require("react");
 var import_qrcode = __toESM(require("qrcode"));
 var import_jsx_runtime43 = require("react/jsx-runtime");
 var QRCodeGenerator = ({
@@ -4329,9 +4323,9 @@ var QRCodeGenerator = ({
   defaultExportSize = 512,
   fileBaseName = "qr-code"
 }) => {
-  const canvasRef = (0, import_react20.useRef)(null);
-  const [format3, setFormat] = (0, import_react20.useState)("png");
-  const [exportSize, setExportSize] = (0, import_react20.useState)(defaultExportSize);
+  const canvasRef = (0, import_react21.useRef)(null);
+  const [format3, setFormat] = (0, import_react21.useState)("png");
+  const [exportSize, setExportSize] = (0, import_react21.useState)(defaultExportSize);
   const sizeOption = [
     {
       label: "64 x 64",
@@ -4376,7 +4370,7 @@ var QRCodeGenerator = ({
       value: "jpeg"
     }
   ];
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     if (!canvasRef.current) return;
     import_qrcode.default.toCanvas(canvasRef.current, url, { width: previewSize, margin: 1 }, (error) => {
       if (error) console.error(error);

package/dist/index.mjs

@@ -598,20 +598,23 @@ function SwitchSelect({
 }
 
 // src/NavBar/MenuNavBar/MenuNavBar.tsx
+import { useState } from "react";
 import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
 function MenuNavBar({ menus, onClick }) {
+  const [activePath, setActivePath] = useState("");
   return /* @__PURE__ */ jsx12("div", { className: "w-full h-full p-[10px] bg-white", children: menus?.map((menu, index) => /* @__PURE__ */ jsxs9("div", { className: `p-[10px] ${index !== 0 ? "mt-[10px]" : ""}`, children: [
     /* @__PURE__ */ jsx12("p", { className: "p-[10px] w-[202px] h-[47px] subtitle-1", children: menu.title }),
     menu?.subMenus.map((subMenu) => /* @__PURE__ */ jsxs9(
       "div",
       {
-        className: "group flex justify-center items-center gap-[10px] p-[10px] w-[202px] h-[47px] rounded-[6px] subtitle-2 cursor-pointer hover:bg-red-100 active:bg-primary-500 hover:text-white active:text-white",
-        onClick: () => onClick(subMenu.path),
+        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__ */ jsxs9("span", { className: "flex justify-center items-center w-[24px] h-[24px] text-[20px]", children: [
-            subMenu.icon && /* @__PURE__ */ jsx12("span", { className: `block ${subMenu.iconActive ? "group-active:hidden" : ""}`, children: subMenu.icon }),
-            subMenu.iconActive && /* @__PURE__ */ jsx12("span", { className: "hidden group-active:block", children: subMenu.iconActive })
-          ] }),
+          /* @__PURE__ */ jsx12("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__ */ jsx12("span", { className: "flex ml-auto", children: subMenu.customNode && subMenu.customNode })
         ]
@@ -623,11 +626,11 @@ function MenuNavBar({ menus, onClick }) {
 
 // src/NavBar/MenuNavBar/Sidebar.tsx
 import { IconChevronLeftPipe, IconChevronRightPipe } from "@tabler/icons-react";
-import { createContext, useContext, useState } from "react";
+import { createContext, useContext, useState as useState2 } from "react";
 import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
 var SidebarContext = createContext({ expanded: false });
 function Sidebar({ children, logo }) {
-  const [expanded, setExpanded] = useState(true);
+  const [expanded, setExpanded] = useState2(true);
   return /* @__PURE__ */ jsx13("aside", { className: "h-screen", children: /* @__PURE__ */ jsxs10("nav", { className: `h-full flex flex-col bg-white border-r shadow-sm duration-150 ${expanded ? "w-64" : "w-16"}`, children: [
     /* @__PURE__ */ jsxs10("div", { className: "p-4 pb-2 flex justify-center items-center", children: [
       expanded && logo && /* @__PURE__ */ jsx13("img", { src: logo, width: 120, className: "ml-auto" }),
@@ -663,7 +666,7 @@ function TopNavBar({ onClickNoti, logo }) {
 
 // src/Table/DataTable/DataTable.tsx
 import { IconSelector, IconSortAscending, IconSortDescending } from "@tabler/icons-react";
-import { useState as useState2 } from "react";
+import { useState as useState3 } from "react";
 
 // src/Table/Pagination/Pagination.tsx
 import { IconArrowLeft, IconArrowRight } from "@tabler/icons-react";
@@ -737,8 +740,8 @@ import { Fragment, jsx as jsx16, jsxs as jsxs13 } from "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] = useState2(null);
-  const [page, setPage] = useState2(1);
+  const [sortConfig, setSortConfig] = useState3(null);
+  const [page, setPage] = useState3(1);
   const onSorting = (config) => {
     if (config) {
       setSortConfig({ key: config?.key, direction: config?.direction });
@@ -794,7 +797,7 @@ function DataTable({ columns, data, onSort, isLoading }) {
 
 // src/Table/DataTable/AntDataTable.tsx
 import { ConfigProvider, Table } from "antd";
-import { useState as useState3 } from "react";
+import { useState as useState4 } from "react";
 import { Fragment as Fragment2, jsx as jsx17 } from "react/jsx-runtime";
 function AntDataTable({
   dataSource,
@@ -809,7 +812,7 @@ function AntDataTable({
   height,
   pagination
 }) {
-  const [selectedRowKeys, setSelectedRowKeys] = useState3([]);
+  const [selectedRowKeys, setSelectedRowKeys] = useState4([]);
   const rowSelection = {
     selectedRowKeys,
     onChange: (newSelectedRowKeys) => {
@@ -848,7 +851,7 @@ function AntDataTable({
 }
 
 // src/Calendar/Calendar/Calendar.tsx
-import { useEffect, useRef, useState as useState4 } from "react";
+import { useEffect, useRef, useState as useState5 } from "react";
 import FullCalendar from "@fullcalendar/react";
 import dayGridPlugin from "@fullcalendar/daygrid";
 import timeGridPlugin from "@fullcalendar/timegrid";
@@ -858,9 +861,9 @@ import { IconChevronLeft, IconChevronRight, IconX } from "@tabler/icons-react";
 import { Fragment as Fragment3, jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
 function Calendar({ events }) {
   const calendarRef = useRef(null);
-  const [monthTitle, setMonthTitle] = useState4("");
-  const [openPopup, setOpenPopup] = useState4(false);
-  const [selectedEvent, setSelectedEvent] = useState4(null);
+  const [monthTitle, setMonthTitle] = useState5("");
+  const [openPopup, setOpenPopup] = useState5(false);
+  const [selectedEvent, setSelectedEvent] = useState5(null);
   const updateTitle = () => {
     const calendarApi = calendarRef.current?.getApi();
     if (calendarApi) {
@@ -1003,7 +1006,7 @@ function EventPopUp({ event, onClose }) {
 
 // src/Input/TextInput/TextInput.tsx
 import { IconEye, IconEyeOff } from "@tabler/icons-react";
-import { useState as useState5 } from "react";
+import { useState as useState6 } from "react";
 import { jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
 function TextInput({
   label,
@@ -1016,7 +1019,7 @@ function TextInput({
   onChange,
   disabled
 }) {
-  const [showPassword, setShowPassword] = useState5(false);
+  const [showPassword, setShowPassword] = useState6(false);
   const onShowPassword = () => {
     setShowPassword(!showPassword);
   };
@@ -1231,7 +1234,7 @@ function InputFieldNumber({
 var import_dayjs = __toESM(require_dayjs_min());
 var import_th2 = __toESM(require_th());
 var import_buddhistEra = __toESM(require_buddhistEra());
-import { useState as useState6, useRef as useRef2, useEffect as useEffect2 } from "react";
+import { useState as useState7, useRef as useRef2, useEffect as useEffect2 } from "react";
 import { format } from "date-fns";
 import { th as thFns } from "date-fns/locale";
 import { jsx as jsx23, jsxs as jsxs19 } from "react/jsx-runtime";
@@ -1250,7 +1253,7 @@ function DatePickerBasic({
   disabledDate,
   disablePast = false
 }) {
-  const [open, setOpen] = useState6(false);
+  const [open, setOpen] = useState7(false);
   const wrapperRef = useRef2(null);
   const current = value ? (0, import_dayjs.default)(value) : null;
   const today = (0, import_dayjs.default)();
@@ -1273,7 +1276,7 @@ function DatePickerBasic({
     "\u0E1E\u0E24\u0E28\u0E08\u0E34\u0E01\u0E32\u0E22\u0E19",
     "\u0E18\u0E31\u0E19\u0E27\u0E32\u0E04\u0E21"
   ];
-  const [calendar, setCalendar] = useState6(current || today);
+  const [calendar, setCalendar] = useState7(current || today);
   const daysInMonth = calendar.daysInMonth();
   const firstDayOfMonth = calendar.startOf("month").day();
   const isDisabled = (date) => {
@@ -1379,7 +1382,7 @@ function DatePickerBasic({
 var import_dayjs2 = __toESM(require_dayjs_min());
 var import_th3 = __toESM(require_th());
 var import_buddhistEra2 = __toESM(require_buddhistEra());
-import { useState as useState7, useRef as useRef3, useEffect as useEffect3 } from "react";
+import { useState as useState8, useRef as useRef3, useEffect as useEffect3 } from "react";
 import { format as format2 } from "date-fns";
 import { th as thFns2 } from "date-fns/locale";
 import { jsx as jsx24, jsxs as jsxs20 } from "react/jsx-runtime";
@@ -1397,13 +1400,13 @@ function DatePickerRange({
   disabledDate,
   disablePast = false
 }) {
-  const [open, setOpen] = useState7(false);
+  const [open, setOpen] = useState8(false);
   const wrapperRef = useRef3(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] = useState7(startDayjs || today);
+  const [calendar, setCalendar] = useState8(startDayjs || today);
   const formatThaiBE = (date) => {
     const formatted = format2(date, "dd MMM yy", { locale: thFns2 });
     const year = parseInt(format2(date, "yyyy")) + 543;
@@ -2530,17 +2533,6 @@ function SelectFieldGroup({
 
 // src/Select/SelectFieldStatus/SelectFieldStatus.tsx
 import { Select as Select3, ConfigProvider as ConfigProvider9 } from "antd";
-
-// src/Select/SelectFieldStatus/StatusMockup.ts
-var status = [
-  { value: "1", label: "\u0E40\u0E1B\u0E34\u0E14", color: "var(--color-gray-500)" },
-  { value: "2", label: "\u0E01\u0E33\u0E25\u0E31\u0E07\u0E14\u0E33\u0E40\u0E19\u0E34\u0E19\u0E01\u0E32\u0E23", color: "var(--color-yellow-400)" },
-  { value: "3", label: "\u0E23\u0E2D\u0E15\u0E23\u0E27\u0E08\u0E2A\u0E2D\u0E1A", color: "var(--color-red-400)" },
-  { value: "4", label: "\u0E40\u0E2A\u0E23\u0E47\u0E08\u0E2A\u0E34\u0E49\u0E19", color: "var(--color-green-400)" },
-  { value: "5", label: "\u0E16\u0E39\u0E01\u0E22\u0E01\u0E40\u0E25\u0E34\u0E01", color: "var(--color-gray-300)" }
-];
-
-// src/Select/SelectFieldStatus/SelectFieldStatus.tsx
 import { DownOutlined } from "@ant-design/icons";
 import { jsx as jsx29, jsxs as jsxs25 } from "react/jsx-runtime";
 function SelectFieldStatus({
@@ -2554,7 +2546,7 @@ function SelectFieldStatus({
   options,
   className
 }) {
-  const selectedItem = status.find((s) => s.value === value);
+  const selectedItem = options?.find((s) => s.value === value);
   return /* @__PURE__ */ jsx29(
     ConfigProvider9,
     {
@@ -2602,7 +2594,7 @@ function SelectFieldStatus({
 import { Select as Select4, ConfigProvider as ConfigProvider10 } from "antd";
 
 // src/Select/SelectFieldStatusReport/StatusReportMockup.ts
-var status2 = [
+var status = [
   { value: "1", label: "\u0E40\u0E2A\u0E23\u0E47\u0E08\u0E2A\u0E34\u0E49\u0E19", color: "var(--color-green-400)" },
   { value: "2", label: "\u0E22\u0E31\u0E07\u0E44\u0E21\u0E48\u0E40\u0E2A\u0E23\u0E47\u0E08\u0E2A\u0E34\u0E49\u0E19", color: "var(--color-red-500)" }
 ];
@@ -2621,7 +2613,7 @@ function SelectFieldStatusReport({
   className,
   options
 }) {
-  const selectedItem = status2.find((s) => s.value === value);
+  const selectedItem = status.find((s) => s.value === value);
   return /* @__PURE__ */ jsx30(
     ConfigProvider10,
     {
@@ -2667,7 +2659,7 @@ function SelectFieldStatusReport({
 
 // src/Select/SelectFieldTag/SelectFieldTag.tsx
 import { Select as Select5, ConfigProvider as ConfigProvider11 } from "antd";
-import { useState as useState8 } from "react";
+import { useState as useState9 } from "react";
 import { jsx as jsx31, jsxs as jsxs27 } from "react/jsx-runtime";
 function SelectFieldTag({
   label,
@@ -2680,10 +2672,10 @@ function SelectFieldTag({
   onChange,
   onClear
 }) {
-  const [internalValue, setInternalValue] = useState8([]);
+  const [internalValue, setInternalValue] = useState9([]);
   const isControlled = controlledValue !== void 0;
   const value = isControlled ? controlledValue : internalValue;
-  const [searchWord, setSearchWord] = useState8("");
+  const [searchWord, setSearchWord] = useState9("");
   const handleChange = (val) => {
     const trimValue = val.map((v) => v.trim());
     const filtered = trimValue.filter((v) => v.trim() !== "");
@@ -2743,7 +2735,7 @@ function SelectFieldTag({
 // src/Select/SelectCustom/SelectCustom.tsx
 import { IconTrash } from "@tabler/icons-react";
 import { Select as Select6, ConfigProvider as ConfigProvider12 } from "antd";
-import { useState as useState9 } from "react";
+import { useState as useState10 } from "react";
 import { jsx as jsx32, jsxs as jsxs28 } from "react/jsx-runtime";
 function SelectCustom({
   label = "\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25\u0E42\u0E04\u0E23\u0E07\u0E01\u0E32\u0E23",
@@ -2754,8 +2746,8 @@ function SelectCustom({
   error,
   onClear
 }) {
-  const [value, setValue] = useState9([]);
-  const [valueList, setValueList] = useState9([]);
+  const [value, setValue] = useState10([]);
+  const [valueList, setValueList] = useState10([]);
   const handleChange = (selectedValues) => {
     const newValues = selectedValues.filter((v) => !valueList.includes(v));
     setValueList((prev) => {
@@ -2860,7 +2852,7 @@ var quarters = [
 ];
 
 // src/SortFilter/SortFilter.tsx
-import { useState as useState10 } from "react";
+import { useState as useState11 } from "react";
 import { IconSortDescending as IconSortDescending2, IconFilter } from "@tabler/icons-react";
 import { jsx as jsx33, jsxs as jsxs29 } from "react/jsx-runtime";
 function SortFilter({
@@ -2870,9 +2862,9 @@ function SortFilter({
   onSortClick,
   onFilterClick
 }) {
-  const [yearValue, setYearValue] = useState10();
-  const [monthValue, setMonthValue] = useState10();
-  const [quarterValue, setQuartersValue] = useState10();
+  const [yearValue, setYearValue] = useState11();
+  const [monthValue, setMonthValue] = useState11();
+  const [quarterValue, setQuartersValue] = useState11();
   return /* @__PURE__ */ jsx33(
     ConfigProvider13,
     {
@@ -2948,7 +2940,7 @@ function SortFilter({
 
 // src/Upload/FileUploader/FileUploader.tsx
 import { IconPaperclip, IconUpload, IconTrash as IconTrash2 } from "@tabler/icons-react";
-import { useRef as useRef4, useState as useState11 } from "react";
+import { useRef as useRef4, useState as useState12 } from "react";
 import { Fragment as Fragment5, jsx as jsx34, jsxs as jsxs30 } from "react/jsx-runtime";
 function FileUploader({
   onUpload,
@@ -2960,11 +2952,12 @@ function FileUploader({
   mode = "drop",
   description,
   label,
-  value
+  value,
+  uploadText = "\u0E41\u0E19\u0E1A\u0E44\u0E1F\u0E25\u0E4C"
 }) {
-  const [internalFileList, setInternalFileList] = useState11([]);
-  const [uploading, setUploading] = useState11(false);
-  const [dragActive, setDragActive] = useState11(false);
+  const [internalFileList, setInternalFileList] = useState12([]);
+  const [uploading, setUploading] = useState12(false);
+  const [dragActive, setDragActive] = useState12(false);
   const inputRef = useRef4(null);
   const filesToDisplay = value || internalFileList;
   const validateFile = (file) => {
@@ -3046,7 +3039,8 @@ function FileUploader({
             " \u0E01\u0E33\u0E25\u0E31\u0E07\u0E2D\u0E31\u0E1B\u0E42\u0E2B\u0E25\u0E14"
           ] }) : /* @__PURE__ */ jsxs30(Fragment5, { children: [
             /* @__PURE__ */ jsx34(IconUpload, { size: 15, className: "text-gray-400" }),
-            " \u0E41\u0E19\u0E1A\u0E44\u0E1F\u0E25\u0E4C"
+            " ",
+            uploadText
           ] })
         }
       ) : /* @__PURE__ */ jsx34(
@@ -3189,7 +3183,7 @@ function HeadingPage({ Heading }) {
 
 // src/Progress/ProgressBar.tsx
 import { ConfigProvider as ConfigProvider16, Progress } from "antd";
-import { useEffect as useEffect4, useRef as useRef5, useState as useState12 } from "react";
+import { useEffect as useEffect4, useRef as useRef5, useState as useState13 } from "react";
 import { jsx as jsx37, jsxs as jsxs32 } from "react/jsx-runtime";
 function ProgressBar({
   percent = 0,
@@ -3203,7 +3197,7 @@ function ProgressBar({
   steps,
   isCheckPoints
 }) {
-  const [barWidth, setBarWidth] = useState12(0);
+  const [barWidth, setBarWidth] = useState13(0);
   const progressRef = useRef5(null);
   let strokeColor = "--color-green-500";
   const defaultStrokeWidth = type === "circle" ? 13 : strokeWidth ?? 8;
@@ -3269,24 +3263,24 @@ function ProgressBar({
 
 // src/KpiSection/KpiSection.tsx
 import { ConfigProvider as ConfigProvider17, message } from "antd";
-import { useEffect as useEffect5, useState as useState14 } from "react";
+import { useEffect as useEffect5, useState as useState15 } from "react";
 
 // src/KpiSection/hooks/useGetKpiSection.ts
-import { useState as useState13 } from "react";
+import { useState as useState14 } from "react";
 import cuid from "cuid";
 function useGetKpiSection() {
-  const [nameKpi, setNameKpi] = useState13("");
-  const [kpiValue, setKpiValue] = useState13("");
-  const [unitValue, setUnitValue] = useState13("");
-  const [kpiList, setKpiList] = useState13([]);
-  const [editingBackup, setEditingBackup] = useState13({});
-  const [selected, setSelected] = useState13("2");
-  const [errors, setErrors] = useState13({
+  const [nameKpi, setNameKpi] = useState14("");
+  const [kpiValue, setKpiValue] = useState14("");
+  const [unitValue, setUnitValue] = useState14("");
+  const [kpiList, setKpiList] = useState14([]);
+  const [editingBackup, setEditingBackup] = useState14({});
+  const [selected, setSelected] = useState14("2");
+  const [errors, setErrors] = useState14({
     nameKpi: "",
     kpiValue: "",
     unitValue: ""
   });
-  const [itemErrors, setItemErrors] = useState13({});
+  const [itemErrors, setItemErrors] = useState14({});
   const options = [
     { value: "1", label: "\u0E02\u0E49\u0E2D\u0E04\u0E27\u0E32\u0E21" },
     { value: "2", label: "\u0E15\u0E31\u0E27\u0E40\u0E25\u0E02" }
@@ -3440,7 +3434,7 @@ function KpiSection({ type, onChangeKpiList }) {
     setItemErrors
   } = useGetKpiSection();
   const [messageApi2, messageContainer] = message.useMessage();
-  const [hasShownError, setHasShownError] = useState14(false);
+  const [hasShownError, setHasShownError] = useState15(false);
   useEffect5(() => {
     setMessageApi(messageApi2);
   }, [messageApi2]);
@@ -3688,7 +3682,7 @@ import {
   IconTrash as IconTrash4,
   IconX as IconX3
 } from "@tabler/icons-react";
-import { useState as useState15 } from "react";
+import { useState as useState16 } from "react";
 import { Input as Input4 } from "antd";
 import { Fragment as Fragment7, jsx as jsx40, jsxs as jsxs34 } from "react/jsx-runtime";
 function Indicator({
@@ -3702,24 +3696,24 @@ function Indicator({
   canEdit,
   onDeleteClick
 }) {
-  const [valueSwitch, setValueSwitch] = useState15("TEXT");
-  const [cacheData, setCacheData] = useState15({
+  const [valueSwitch, setValueSwitch] = useState16("TEXT");
+  const [cacheData, setCacheData] = useState16({
     indicatorType: type,
     inputType: valueSwitch,
     textValue: "",
     numberValue: 0,
     unit: ""
   });
-  const [cacheEditData, setCacheEditData] = useState15({
+  const [cacheEditData, setCacheEditData] = useState16({
     indicatorType: type,
     inputType: valueSwitch,
     textValue: "",
     numberValue: 0,
     unit: ""
   });
-  const [editIndex, setEditIndex] = useState15(null);
-  const [addError, setAddError] = useState15({});
-  const [editError, setEditError] = useState15({});
+  const [editIndex, setEditIndex] = useState16(null);
+  const [addError, setAddError] = useState16({});
+  const [editError, setEditError] = useState16({});
   const handleAddIndicator = () => {
     const nextErr = {};
     const textValue = (cacheData.textValue ?? "").trim();
@@ -3994,11 +3988,11 @@ function Indicator({
 
 // src/FilterPopUp/FilterPopUp.tsx
 import { IconCheck as IconCheck4, IconFilter as IconFilter2, IconTrash as IconTrash5 } from "@tabler/icons-react";
-import { useState as useState16 } from "react";
+import { useState as useState17 } from "react";
 import { jsx as jsx41, jsxs as jsxs35 } from "react/jsx-runtime";
 var FilterPopUp = (filter) => {
-  const [isAction, setIsAction] = useState16(true);
-  const [filterArray, setFilterArray] = useState16([""]);
+  const [isAction, setIsAction] = useState17(true);
+  const [filterArray, setFilterArray] = useState17([""]);
   const handleClearFilter = () => {
     setFilterArray([]);
   };
@@ -4031,7 +4025,7 @@ var FilterPopUp = (filter) => {
 };
 
 // src/ProfileSelect/ProfileSelect/ProfileSelect.tsx
-import { useEffect as useEffect7, useRef as useRef6, useState as useState17 } from "react";
+import { useEffect as useEffect7, useRef as useRef6, useState as useState18 } from "react";
 import { IconSearch, IconUsers, IconX as IconX4 } from "@tabler/icons-react";
 import { Input as Input5 } from "antd";
 import { Fragment as Fragment8, jsx as jsx42, jsxs as jsxs36 } from "react/jsx-runtime";
@@ -4042,10 +4036,10 @@ function ProfileSelect({
   className,
   onUpdateAssignUser
 }) {
-  const [maxVisible, setMaxVisible] = useState17(4);
-  const [userNotAssign, setUserNotAssign] = useState17([]);
-  const [search, setSearch] = useState17("");
-  const [isShowSelect, setIsShowSelect] = useState17(false);
+  const [maxVisible, setMaxVisible] = useState18(4);
+  const [userNotAssign, setUserNotAssign] = useState18([]);
+  const [search, setSearch] = useState18("");
+  const [isShowSelect, setIsShowSelect] = useState18(false);
   const containerRef = useRef6(null);
   const selectRef = useRef6(null);
   const avatarSize = 30;
@@ -4265,7 +4259,7 @@ function ProfileSelect({
 }
 
 // src/Button/QRCode/QRCode.tsx
-import { useEffect as useEffect8, useRef as useRef7, useState as useState18 } from "react";
+import { useEffect as useEffect8, useRef as useRef7, useState as useState19 } from "react";
 import QRCode from "qrcode";
 import { jsx as jsx43, jsxs as jsxs37 } from "react/jsx-runtime";
 var QRCodeGenerator = ({
@@ -4275,8 +4269,8 @@ var QRCodeGenerator = ({
   fileBaseName = "qr-code"
 }) => {
   const canvasRef = useRef7(null);
-  const [format3, setFormat] = useState18("png");
-  const [exportSize, setExportSize] = useState18(defaultExportSize);
+  const [format3, setFormat] = useState19("png");
+  const [exportSize, setExportSize] = useState19(defaultExportSize);
   const sizeOption = [
     {
       label: "64 x 64",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@esic-lab/data-core-ui",
-  "version": "0.0.49",
+  "version": "0.0.51",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",