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

package/dist/index.mjs

@@ -359,7 +359,8 @@ function PrimaryButton({
   colorPrimaryHover = "#8895f9",
   textColor = "#ffffff",
   icon,
-  className
+  className,
+  htmlType
 }) {
   const textClass = size === "large" ? "body-1" : "body-3";
   return /* @__PURE__ */ jsx(
@@ -382,6 +383,7 @@ function PrimaryButton({
           disabled,
           icon,
           iconPosition: iconPlacement,
+          htmlType,
           children: title
         }
       )
@@ -403,7 +405,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__ */ jsx2(
@@ -431,6 +434,7 @@ function SecondaryButton({
           disabled,
           icon,
           iconPosition: iconPlacement,
+          htmlType,
           children: title
         }
       )
@@ -486,7 +490,8 @@ function TertiaryButton({
   colorPrimaryHover = "#4d5461",
   textColor = "white",
   icon,
-  className
+  className,
+  htmlType
 }) {
   const textClass = size === "large" ? "body-1" : "body-3";
   return /* @__PURE__ */ jsx5(
@@ -509,6 +514,7 @@ function TertiaryButton({
           disabled,
           icon,
           iconPosition: iconPlacement,
+          htmlType,
           children: title
         }
       )
@@ -687,39 +693,48 @@ function SwitchSelect({
 }
 
 // src/NavBar/MenuNavBar/MenuNavBar.tsx
-import { useState } from "react";
+import { useLocation } from "react-router";
 import { jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
 function MenuNavBar({ menus, onClick }) {
-  const [activePath, setActivePath] = useState("");
-  return /* @__PURE__ */ jsx13("div", { className: "w-full h-full p-[10px] bg-white", children: menus?.map((menu, index) => /* @__PURE__ */ jsxs7("div", { className: `p-[10px] ${index !== 0 ? "mt-[10px]" : ""}`, children: [
-    /* @__PURE__ */ jsx13("p", { className: "p-[10px] w-[202px] h-[47px] subtitle-1", children: menu.title }),
-    menu?.subMenus.map((subMenu) => /* @__PURE__ */ jsxs7(
-      "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__ */ jsx13("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__ */ jsx13("span", { className: "flex ml-auto", children: subMenu.customNode && subMenu.customNode })
-        ]
-      },
-      `sub_${subMenu.title}`
-    ))
-  ] }, `menu_${menu.title}`)) });
+  const location = useLocation();
+  const pathname = location.pathname;
+  return /* @__PURE__ */ jsx13("div", { className: "w-full h-full p-[10px] bg-white", children: menus?.map((menu, index) => /* @__PURE__ */ jsxs7(
+    "div",
+    {
+      className: `p-[10px] ${index !== 0 ? "mt-[10px]" : ""}`,
+      children: [
+        /* @__PURE__ */ jsx13("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__ */ jsxs7(
+            "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__ */ jsx13("span", { className: "flex justify-center items-center w-[24px] h-[24px] text-[20px]", children: isActive ? subMenu.iconActive ?? subMenu.icon : subMenu.icon }),
+                subMenu.title,
+                /* @__PURE__ */ jsx13("span", { className: "flex ml-auto", children: subMenu.customNode && subMenu.customNode })
+              ]
+            },
+            `sub_${subMenu.title}`
+          );
+        })
+      ]
+    },
+    `menu_${menu.title}`
+  )) });
 }
 
 // src/NavBar/MenuNavBar/Sidebar.tsx
 import { IconChevronLeftPipe, IconChevronRightPipe } from "@tabler/icons-react";
-import { createContext, useContext, useState as useState2 } from "react";
+import { createContext, useContext, useState } from "react";
 import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
 var SidebarContext = createContext({ expanded: false });
 function Sidebar({ children, logo }) {
-  const [expanded, setExpanded] = useState2(true);
+  const [expanded, setExpanded] = useState(true);
   return /* @__PURE__ */ jsx14("aside", { className: "h-screen", children: /* @__PURE__ */ jsxs8("nav", { className: `h-full flex flex-col bg-white border-r shadow-sm duration-150 ${expanded ? "w-64" : "w-16"}`, children: [
     /* @__PURE__ */ jsxs8("div", { className: "p-4 pb-2 flex justify-center items-center", children: [
       expanded && logo && /* @__PURE__ */ jsx14("img", { src: logo, width: 120, className: "ml-auto" }),
@@ -755,7 +770,7 @@ function TopNavBar({ onClickNoti, logo }) {
 
 // src/Table/DataTable/DataTable.tsx
 import { IconSelector, IconSortAscending, IconSortDescending } from "@tabler/icons-react";
-import { useState as useState3 } from "react";
+import { useState as useState2 } from "react";
 
 // src/Table/Pagination/Pagination.tsx
 import { IconArrowLeft, IconArrowRight } from "@tabler/icons-react";
@@ -829,8 +844,8 @@ import { Fragment, jsx as jsx17, jsxs as jsxs11 } 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] = useState3(null);
-  const [page, setPage] = useState3(1);
+  const [sortConfig, setSortConfig] = useState2(null);
+  const [page, setPage] = useState2(1);
   const onSorting = (config) => {
     if (config) {
       setSortConfig({ key: config?.key, direction: config?.direction });
@@ -886,7 +901,7 @@ function DataTable({ columns, data, onSort, isLoading }) {
 
 // src/Table/DataTable/AntDataTable.tsx
 import { ConfigProvider as ConfigProvider4, Table } from "antd";
-import { useState as useState4 } from "react";
+import { useState as useState3 } from "react";
 import { Fragment as Fragment2, jsx as jsx18 } from "react/jsx-runtime";
 function AntDataTable({
   dataSource,
@@ -901,7 +916,7 @@ function AntDataTable({
   height,
   pagination
 }) {
-  const [selectedRowKeys, setSelectedRowKeys] = useState4([]);
+  const [selectedRowKeys, setSelectedRowKeys] = useState3([]);
   const rowSelection = {
     selectedRowKeys,
     onChange: (newSelectedRowKeys) => {
@@ -940,7 +955,7 @@ function AntDataTable({
 }
 
 // src/Calendar/Calendar/Calendar.tsx
-import { useEffect, useRef, useState as useState5 } from "react";
+import { useEffect, useRef, useState as useState4 } from "react";
 import FullCalendar from "@fullcalendar/react";
 import dayGridPlugin from "@fullcalendar/daygrid";
 import timeGridPlugin from "@fullcalendar/timegrid";
@@ -950,9 +965,9 @@ import { IconChevronLeft, IconChevronRight, IconX } from "@tabler/icons-react";
 import { Fragment as Fragment3, jsx as jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
 function Calendar({ events }) {
   const calendarRef = useRef(null);
-  const [monthTitle, setMonthTitle] = useState5("");
-  const [openPopup, setOpenPopup] = useState5(false);
-  const [selectedEvent, setSelectedEvent] = useState5(null);
+  const [monthTitle, setMonthTitle] = useState4("");
+  const [openPopup, setOpenPopup] = useState4(false);
+  const [selectedEvent, setSelectedEvent] = useState4(null);
   const updateTitle = () => {
     const calendarApi = calendarRef.current?.getApi();
     if (calendarApi) {
@@ -1095,7 +1110,7 @@ function EventPopUp({ event, onClose }) {
 
 // src/Input/TextInput/TextInput.tsx
 import { IconEye, IconEyeOff } from "@tabler/icons-react";
-import { useState as useState6 } from "react";
+import { useState as useState5 } from "react";
 import { jsx as jsx20, jsxs as jsxs13 } from "react/jsx-runtime";
 function TextInput({
   label,
@@ -1108,7 +1123,7 @@ function TextInput({
   onChange,
   disabled
 }) {
-  const [showPassword, setShowPassword] = useState6(false);
+  const [showPassword, setShowPassword] = useState5(false);
   const onShowPassword = () => {
     setShowPassword(!showPassword);
   };
@@ -1293,9 +1308,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__ */ jsx23(
     ConfigProvider7,
@@ -1329,7 +1348,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__ */ jsx23("p", { className: "text-red-500 caption-1", children: error })
@@ -1342,7 +1390,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 useState7, useRef as useRef2, useEffect as useEffect2 } from "react";
+import { useState as useState6, useRef as useRef2, useEffect as useEffect2 } from "react";
 import { format } from "date-fns";
 import { th as thFns } from "date-fns/locale";
 import { jsx as jsx24, jsxs as jsxs17 } from "react/jsx-runtime";
@@ -1361,7 +1409,7 @@ function DatePickerBasic({
   disabledDate,
   disablePast = false
 }) {
-  const [open, setOpen] = useState7(false);
+  const [open, setOpen] = useState6(false);
   const wrapperRef = useRef2(null);
   const current = value ? (0, import_dayjs.default)(value) : null;
   const today = (0, import_dayjs.default)();
@@ -1384,7 +1432,7 @@ function DatePickerBasic({
     "\u0E1E\u0E24\u0E28\u0E08\u0E34\u0E01\u0E32\u0E22\u0E19",
     "\u0E18\u0E31\u0E19\u0E27\u0E32\u0E04\u0E21"
   ];
-  const [calendar, setCalendar] = useState7(current || today);
+  const [calendar, setCalendar] = useState6(current || today);
   const daysInMonth = calendar.daysInMonth();
   const firstDayOfMonth = calendar.startOf("month").day();
   const isDisabled = (date) => {
@@ -1490,7 +1538,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 useState8, useRef as useRef3, useEffect as useEffect3 } from "react";
+import { useState as useState7, 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 jsx25, jsxs as jsxs18 } from "react/jsx-runtime";
@@ -1508,13 +1556,13 @@ function DatePickerRange({
   disabledDate,
   disablePast = false
 }) {
-  const [open, setOpen] = useState8(false);
+  const [open, setOpen] = useState7(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] = useState8(startDayjs || today);
+  const [calendar, setCalendar] = useState7(startDayjs || today);
   const formatThaiBE = (date) => {
     const formatted = format2(date, "dd MMM yy", { locale: thFns2 });
     const year = parseInt(format2(date, "yyyy")) + 543;
@@ -2781,7 +2829,7 @@ function SelectFieldStatusReport({
 
 // src/Select/SelectFieldTag/SelectFieldTag.tsx
 import { Select as Select5, ConfigProvider as ConfigProvider14 } from "antd";
-import { useState as useState9 } from "react";
+import { useState as useState8 } from "react";
 import { jsx as jsx32, jsxs as jsxs25 } from "react/jsx-runtime";
 function SelectFieldTag({
   label,
@@ -2796,10 +2844,10 @@ function SelectFieldTag({
   size = "middle",
   allowClear = true
 }) {
-  const [internalValue, setInternalValue] = useState9([]);
+  const [internalValue, setInternalValue] = useState8([]);
   const isControlled = controlledValue !== void 0;
   const value = isControlled ? controlledValue : internalValue;
-  const [searchWord, setSearchWord] = useState9("");
+  const [searchWord, setSearchWord] = useState8("");
   const handleChange = (val) => {
     const trimValue = val.map((v) => v.trim());
     const filtered = trimValue.filter((v) => v.trim() !== "");
@@ -2860,7 +2908,7 @@ function SelectFieldTag({
 // src/Select/SelectCustom/SelectCustom.tsx
 import { IconTrash } from "@tabler/icons-react";
 import { Select as Select6, ConfigProvider as ConfigProvider15 } from "antd";
-import { useState as useState10 } from "react";
+import { useState as useState9 } from "react";
 import { jsx as jsx33, jsxs as jsxs26 } from "react/jsx-runtime";
 function SelectCustom({
   label = "\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25\u0E42\u0E04\u0E23\u0E07\u0E01\u0E32\u0E23",
@@ -2873,8 +2921,8 @@ function SelectCustom({
   size = "middle",
   allowClear = true
 }) {
-  const [value, setValue] = useState10([]);
-  const [valueList, setValueList] = useState10([]);
+  const [value, setValue] = useState9([]);
+  const [valueList, setValueList] = useState9([]);
   const handleChange = (selectedValues) => {
     const newValues = selectedValues.filter((v) => !valueList.includes(v));
     setValueList((prev) => {
@@ -2981,7 +3029,7 @@ var quarters = [
 ];
 
 // src/SortFilter/SortFilter.tsx
-import { useState as useState11 } from "react";
+import { useState as useState10 } from "react";
 import { IconSortDescending as IconSortDescending2, IconFilter } from "@tabler/icons-react";
 import { jsx as jsx34, jsxs as jsxs27 } from "react/jsx-runtime";
 function SortFilter({
@@ -2991,9 +3039,9 @@ function SortFilter({
   onSortClick,
   onFilterClick
 }) {
-  const [yearValue, setYearValue] = useState11();
-  const [monthValue, setMonthValue] = useState11();
-  const [quarterValue, setQuartersValue] = useState11();
+  const [yearValue, setYearValue] = useState10();
+  const [monthValue, setMonthValue] = useState10();
+  const [quarterValue, setQuartersValue] = useState10();
   return /* @__PURE__ */ jsx34(
     ConfigProvider16,
     {
@@ -3069,7 +3117,7 @@ function SortFilter({
 
 // src/Upload/FileUploader/FileUploader.tsx
 import { IconUpload, IconTrash as IconTrash2, IconFileDescription } from "@tabler/icons-react";
-import { useRef as useRef4, useState as useState12 } from "react";
+import { useRef as useRef4, useState as useState11 } from "react";
 import { Fragment as Fragment5, jsx as jsx35, jsxs as jsxs28 } from "react/jsx-runtime";
 function FileUploader({
   onUpload,
@@ -3088,9 +3136,9 @@ function FileUploader({
   attachWidth = "w-full",
   readOnly = false
 }) {
-  const [internalFileList, setInternalFileList] = useState12([]);
-  const [uploading, setUploading] = useState12(false);
-  const [dragActive, setDragActive] = useState12(false);
+  const [internalFileList, setInternalFileList] = useState11([]);
+  const [uploading, setUploading] = useState11(false);
+  const [dragActive, setDragActive] = useState11(false);
   const inputRef = useRef4(null);
   const filesToDisplay = value || internalFileList;
   const validateFile = (file) => {
@@ -3331,7 +3379,7 @@ function HeadingPage({ Heading }) {
 
 // src/Progress/ProgressBar.tsx
 import { ConfigProvider as ConfigProvider19, Progress } from "antd";
-import { useEffect as useEffect4, useRef as useRef5, useState as useState13 } from "react";
+import { useEffect as useEffect4, useRef as useRef5, useState as useState12 } from "react";
 import { jsx as jsx38, jsxs as jsxs30 } from "react/jsx-runtime";
 function ProgressBar({
   percent = 0,
@@ -3345,7 +3393,7 @@ function ProgressBar({
   steps,
   isCheckPoints
 }) {
-  const [barWidth, setBarWidth] = useState13(0);
+  const [barWidth, setBarWidth] = useState12(0);
   const progressRef = useRef5(null);
   let strokeColor = "--color-green-500";
   const defaultStrokeWidth = type === "circle" ? 13 : strokeWidth ?? 8;
@@ -3411,24 +3459,24 @@ function ProgressBar({
 
 // src/KpiSection/KpiSection.tsx
 import { ConfigProvider as ConfigProvider20, message } from "antd";
-import { useEffect as useEffect5, useState as useState15 } from "react";
+import { useEffect as useEffect5, useState as useState14 } from "react";
 
 // src/KpiSection/hooks/useGetKpiSection.ts
-import { useState as useState14 } from "react";
+import { useState as useState13 } from "react";
 import cuid from "cuid";
 function useGetKpiSection() {
-  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({
+  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({
     nameKpi: "",
     kpiValue: "",
     unitValue: ""
   });
-  const [itemErrors, setItemErrors] = useState14({});
+  const [itemErrors, setItemErrors] = useState13({});
   const options = [
     { value: "1", label: "\u0E02\u0E49\u0E2D\u0E04\u0E27\u0E32\u0E21" },
     { value: "2", label: "\u0E15\u0E31\u0E27\u0E40\u0E25\u0E02" }
@@ -3582,7 +3630,7 @@ function KpiSection({ type, onChangeKpiList }) {
     setItemErrors
   } = useGetKpiSection();
   const [messageApi2, messageContainer] = message.useMessage();
-  const [hasShownError, setHasShownError] = useState15(false);
+  const [hasShownError, setHasShownError] = useState14(false);
   useEffect5(() => {
     setMessageApi(messageApi2);
   }, [messageApi2]);
@@ -3824,7 +3872,7 @@ function AntDModal({ children, isOpen, width, onCancel }) {
 
 // src/Indicator/Indicator/Indicator.tsx
 import { IconCheck as IconCheck3, IconCirclePlus as IconCirclePlus2, IconTrash as IconTrash4, IconX as IconX3 } from "@tabler/icons-react";
-import { useState as useState16 } from "react";
+import { useState as useState15 } from "react";
 import { Input as Input4 } from "antd";
 import { Fragment as Fragment7, jsx as jsx41, jsxs as jsxs32 } from "react/jsx-runtime";
 function Indicator({
@@ -3838,24 +3886,24 @@ function Indicator({
   canEdit,
   onDeleteClick
 }) {
-  const [valueSwitch, setValueSwitch] = useState16("TEXT");
-  const [cacheData, setCacheData] = useState16({
+  const [valueSwitch, setValueSwitch] = useState15("TEXT");
+  const [cacheData, setCacheData] = useState15({
     indicatorType: type,
     inputType: valueSwitch,
     textValue: "",
     numberValue: 0,
     unit: ""
   });
-  const [cacheEditData, setCacheEditData] = useState16({
+  const [cacheEditData, setCacheEditData] = useState15({
     indicatorType: type,
     inputType: valueSwitch,
     textValue: "",
     numberValue: 0,
     unit: ""
   });
-  const [editIndex, setEditIndex] = useState16(null);
-  const [addError, setAddError] = useState16({});
-  const [editError, setEditError] = useState16({});
+  const [editIndex, setEditIndex] = useState15(null);
+  const [addError, setAddError] = useState15({});
+  const [editError, setEditError] = useState15({});
   const handleAddIndicator = () => {
     const nextErr = {};
     const textValue = (cacheData.textValue ?? "").trim();
@@ -4100,11 +4148,11 @@ function Indicator({
 
 // src/FilterPopUp/FilterPopUp.tsx
 import { IconCheck as IconCheck4, IconFilter as IconFilter2, IconTrash as IconTrash5 } from "@tabler/icons-react";
-import { useState as useState17 } from "react";
+import { useState as useState16 } from "react";
 import { jsx as jsx42, jsxs as jsxs33 } from "react/jsx-runtime";
 var FilterPopUp = (filter) => {
-  const [isAction, setIsAction] = useState17(true);
-  const [filterArray, setFilterArray] = useState17([""]);
+  const [isAction, setIsAction] = useState16(true);
+  const [filterArray, setFilterArray] = useState16([""]);
   const handleClearFilter = () => {
     setFilterArray([]);
   };
@@ -4137,7 +4185,7 @@ var FilterPopUp = (filter) => {
 };
 
 // src/ProfileSelect/ProfileSelect/ProfileSelect.tsx
-import { useEffect as useEffect7, useRef as useRef6, useState as useState18 } from "react";
+import { useEffect as useEffect7, useRef as useRef6, useState as useState17 } from "react";
 import { IconSearch, IconUsers, IconX as IconX4 } from "@tabler/icons-react";
 import { Input as Input5 } from "antd";
 import { Fragment as Fragment8, jsx as jsx43, jsxs as jsxs34 } from "react/jsx-runtime";
@@ -4149,10 +4197,10 @@ function ProfileSelect({
   onUpdateAssignUser,
   placeholder
 }) {
-  const [maxVisible, setMaxVisible] = useState18(4);
-  const [userNotAssign, setUserNotAssign] = useState18([]);
-  const [search, setSearch] = useState18("");
-  const [isShowSelect, setIsShowSelect] = useState18(false);
+  const [maxVisible, setMaxVisible] = useState17(4);
+  const [userNotAssign, setUserNotAssign] = useState17([]);
+  const [search, setSearch] = useState17("");
+  const [isShowSelect, setIsShowSelect] = useState17(false);
   const containerRef = useRef6(null);
   const selectRef = useRef6(null);
   const avatarSize = 30;
@@ -4378,7 +4426,7 @@ function ProfileSelect({
 }
 
 // src/Button/QRCode/QRCode.tsx
-import { useEffect as useEffect8, useRef as useRef7, useState as useState19 } from "react";
+import { useEffect as useEffect8, useRef as useRef7, useState as useState18 } from "react";
 import QRCode from "qrcode";
 import { jsx as jsx44, jsxs as jsxs35 } from "react/jsx-runtime";
 var QRCodeGenerator = ({
@@ -4388,8 +4436,8 @@ var QRCodeGenerator = ({
   fileBaseName = "qr-code"
 }) => {
   const canvasRef = useRef7(null);
-  const [format5, setFormat] = useState19("png");
-  const [exportSize, setExportSize] = useState19(defaultExportSize);
+  const [format5, setFormat] = useState18("png");
+  const [exportSize, setExportSize] = useState18(defaultExportSize);
   const sizeOption = [
     {
       label: "64 x 64",
@@ -4729,7 +4777,7 @@ var PieChart = ({
 };
 
 // src/GanttChart/GanttChart.tsx
-import { useEffect as useEffect11, useRef as useRef10, useState as useState20 } from "react";
+import { useEffect as useEffect11, useRef as useRef10, useState as useState19 } from "react";
 import * as d33 from "d3";
 import {
   format as format4,
@@ -4906,7 +4954,7 @@ var GanttChart = ({
   const svgRef = useRef10(null);
   const leftPanelRef = useRef10(null);
   const dataContainerRef = useRef10(null);
-  const [viewMode] = useState20("year");
+  const [viewMode] = useState19("year");
   const {
     barHeight,
     barSpacing,
@@ -5202,7 +5250,7 @@ var GanttChart = ({
 
 // src/CardKPI/CardKPI/CardKPI.tsx
 import { IconCheckbox, IconDots, IconSquare } from "@tabler/icons-react";
-import { useState as useState21 } from "react";
+import { useState as useState20 } from "react";
 import { Fragment as Fragment9, jsx as jsx49, jsxs as jsxs40 } from "react/jsx-runtime";
 function KPIRow({ item }) {
   return /* @__PURE__ */ jsxs40(
@@ -5224,7 +5272,7 @@ function CardKPI({
   indicator,
   projectId
 }) {
-  const [isOpen, setIsOpen] = useState21(false);
+  const [isOpen, setIsOpen] = useState20(false);
   return /* @__PURE__ */ jsxs40(
     "div",
     {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@esic-lab/data-core-ui",
-  "version": "0.0.68",
+  "version": "0.0.69",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
@@ -62,7 +62,6 @@
   "description": "STO-core-UI",
   "dependencies": {
     "@ant-design/icons": "^5.6.1",
-    "date-fns": "^4.1.0",
     "@fortawesome/free-solid-svg-icons": "^7.0.1",
     "@fortawesome/react-fontawesome": "^3.0.2",
     "@fullcalendar/core": "^6.1.19",
@@ -75,8 +74,10 @@
     "classnames": "^2.5.1",
     "cuid": "^3.0.0",
     "d3": "^7.9.0",
+    "date-fns": "^4.1.0",
     "fullcalendar": "^6.1.19",
-    "qrcode": "^1.5.4"
+    "qrcode": "^1.5.4",
+    "react-router": "^7.11.0"
   },
   "publishConfig": {
     "access": "public"