@esic-lab/data-core-ui 0.0.41 → 0.0.43

package/dist/index.js

@@ -365,6 +365,7 @@ __export(index_exports, {
   ColorPickerBasic: () => ColorPickerBasic,
   DataTable: () => DataTable,
   DatePickerBasic: () => DatePickerBasic,
+  DatePickerRange: () => DatePickerRange,
   FileUploader: () => FileUploader,
   FilterPopUp: () => FilterPopUp,
   GhostButton: () => GhostButton,
@@ -1285,77 +1286,331 @@ function InputFieldNumber({
 }
 
 // src/DatePicker/DatePickerBasic/DatePickerBasic.tsx
-var import_antd5 = require("antd");
+var import_react8 = require("react");
 var import_dayjs = __toESM(require_dayjs_min());
 var import_th2 = __toESM(require_th());
+var import_buddhistEra = __toESM(require_buddhistEra());
 var import_date_fns = require("date-fns");
 var import_locale = require("date-fns/locale");
-var import_th_TH = __toESM(require("antd/es/date-picker/locale/th_TH"));
-var import_buddhistEra = __toESM(require_buddhistEra());
 var import_jsx_runtime23 = require("react/jsx-runtime");
 import_dayjs.default.extend(import_buddhistEra.default);
-var buddhistLocale = {
-  ...import_th_TH.default,
-  lang: {
-    ...import_th_TH.default.lang,
-    fieldDateFormat: "BBBB-MM-DD",
-    fieldDateTimeFormat: "BBBB-MM-DD HH:mm:ss",
-    yearFormat: "BBBB",
-    cellYearFormat: "BBBB"
-  }
-};
+import_dayjs.default.locale("th");
 function DatePickerBasic({
   value,
   onChange,
-  required,
   label,
+  required,
   error,
-  placeholder = "\u0E01\u0E23\u0E38\u0E13\u0E32\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E27\u0E31\u0E19\u0E17\u0E35\u0E48",
   disabled,
-  defaultValue,
+  placeholder = "\u0E01\u0E23\u0E38\u0E13\u0E32\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E27\u0E31\u0E19\u0E17\u0E35\u0E48",
   minDate,
   maxDate,
   disabledDate,
-  className,
-  size = "middle"
+  disablePast = false
 }) {
-  const formatToThaiBE = (date) => {
+  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) => {
     const formatted = (0, import_date_fns.format)(date, "dd MMMM yyyy", { locale: import_locale.th });
-    const year = parseInt((0, import_date_fns.format)(date, "yyyy"));
-    const yearBE = year + 543;
-    return formatted.replace(/\d{4}$/, String(yearBE));
+    const year = parseInt((0, import_date_fns.format)(date, "yyyy")) + 543;
+    return formatted.replace(/\d{4}$/, String(year));
+  };
+  const monthNames = [
+    "\u0E21\u0E01\u0E23\u0E32\u0E04\u0E21",
+    "\u0E01\u0E38\u0E21\u0E20\u0E32\u0E1E\u0E31\u0E19\u0E18\u0E4C",
+    "\u0E21\u0E35\u0E19\u0E32\u0E04\u0E21",
+    "\u0E40\u0E21\u0E29\u0E32\u0E22\u0E19",
+    "\u0E1E\u0E24\u0E29\u0E20\u0E32\u0E04\u0E21",
+    "\u0E21\u0E34\u0E16\u0E38\u0E19\u0E32\u0E22\u0E19",
+    "\u0E01\u0E23\u0E01\u0E0E\u0E32\u0E04\u0E21",
+    "\u0E2A\u0E34\u0E07\u0E2B\u0E32\u0E04\u0E21",
+    "\u0E01\u0E31\u0E19\u0E22\u0E32\u0E22\u0E19",
+    "\u0E15\u0E38\u0E25\u0E32\u0E04\u0E21",
+    "\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 daysInMonth = calendar.daysInMonth();
+  const firstDayOfMonth = calendar.startOf("month").day();
+  const isDisabled = (date) => {
+    if (disablePast && date.isBefore(today, "day")) return true;
+    if (disabledDate && disabledDate(date.toDate())) return true;
+    if (minDate && date.isBefore((0, import_dayjs.default)(minDate), "day")) return true;
+    if (maxDate && date.isAfter((0, import_dayjs.default)(maxDate), "day")) return true;
+    return false;
+  };
+  const handleSelect = (d) => {
+    const selected = calendar.date(d);
+    if (isDisabled(selected)) return;
+    onChange(selected.toDate());
+    setOpen(false);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "container-input", style: { fontFamily: "Kanit", fontSize: 16 }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { children: [
+  (0, import_react8.useEffect)(() => {
+    const handleClickOutside = (e) => {
+      if (wrapperRef.current && !wrapperRef.current.contains(e.target)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { ref: wrapperRef, style: { fontFamily: "Kanit", fontSize: 16 }, className: "relative w-full", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "mb-1", children: [
       /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "body-1", children: label }),
-      required && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "text-red-500", children: "*" })
+      required && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "text-red-500 ml-1", children: "*" })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-      import_antd5.DatePicker,
+      "div",
       {
-        className: `body-1 w-full ${className ?? ""}`,
-        placeholder,
-        disabled,
-        allowClear: true,
-        size,
-        value: value ? (0, import_dayjs.default)(value) : null,
-        defaultValue: defaultValue ? (0, import_dayjs.default)(defaultValue) : void 0,
-        minDate: minDate ? (0, import_dayjs.default)(minDate) : void 0,
-        maxDate: maxDate ? (0, import_dayjs.default)(maxDate) : void 0,
-        disabledDate: (d) => disabledDate ? disabledDate(d.toDate()) : false,
-        onChange: (d) => onChange(d ? d.toDate() : null),
-        format: (d) => d ? formatToThaiBE(d.toDate()) : "",
-        locale: buddhistLocale,
-        style: { fontFamily: "Kanit", fontSize: 16 }
+        className: `border rounded px-3 py-2 cursor-pointer bg-white flex items-center ${disabled ? "opacity-50 cursor-not-allowed" : ""} ${error ? "border-red-500" : "border-gray-300"}`,
+        onClick: () => !disabled && setOpen(!open),
+        children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "flex-1", children: value ? formatThaiBE(value) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "text-gray-400", children: placeholder }) })
       }
     ),
-    error && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "text-red-500 caption-1", children: error })
+    open && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+      "div",
+      {
+        className: "absolute z-50 mt-2 w-80 p-4 bg-white shadow-xl rounded-lg border animate-fade-in",
+        style: { fontFamily: "Kanit", fontSize: 16 },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex justify-between items-center mb-3", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+              "button",
+              {
+                onClick: () => setCalendar(calendar.subtract(1, "month")),
+                className: "px-2 hover:bg-gray-100 rounded",
+                children: "\u25C0"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "font-semibold text-lg text-gray-700", children: [
+              monthNames[calendar.month()],
+              " ",
+              calendar.year() + 543
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("button", { onClick: () => setCalendar(calendar.add(1, "month")), className: "px-2 hover:bg-gray-100 rounded", children: "\u25B6" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "grid grid-cols-7 text-center text-gray-500 text-sm mb-2 font-medium", children: ["\u0E2D\u0E32", "\u0E08", "\u0E2D", "\u0E1E", "\u0E1E\u0E24", "\u0E28", "\u0E2A"].map((d) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { children: d }, d)) }),
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "grid grid-cols-7 gap-1 text-center", children: [
+            Array(firstDayOfMonth).fill(null).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", {}, `empty-${i}`)),
+            Array.from({ length: daysInMonth }, (_, i) => i + 1).map((d) => {
+              const dateObj = calendar.date(d);
+              const isDisable = isDisabled(dateObj);
+              const isSelected = current && dateObj.isSame(current, "day");
+              const isToday = dateObj.isSame(today, "day");
+              let bgClass = "hover:bg-blue-100";
+              let textClass = "text-gray-700";
+              if (isDisable) {
+                bgClass = "";
+                textClass = "text-gray-300 cursor-not-allowed";
+              } else if (isSelected) {
+                bgClass = "bg-blue-500 text-white shadow-md";
+                textClass = "text-white font-semibold";
+              } else if (isToday) {
+                bgClass = "border border-blue-500 font-bold";
+                textClass = "text-blue-600";
+              }
+              return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                "div",
+                {
+                  onClick: () => !isDisable && handleSelect(d),
+                  className: `
+                    py-1 rounded transition-all duration-200
+                    ${bgClass} ${textClass}
+                    ${!isDisable ? "cursor-pointer" : ""}
+                  `,
+                  children: d
+                },
+                d
+              );
+            })
+          ] })
+        ]
+      }
+    ),
+    error && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "text-red-500 text-xs mt-1", children: error })
   ] });
 }
 
-// src/ColorPicker/ColorPickerBasic/ColorPicker.tsx
-var import_antd6 = require("antd");
+// src/DatePicker/DatePickerRange/DatePickerRange.tsx
+var import_react9 = require("react");
+var import_dayjs2 = __toESM(require_dayjs_min());
+var import_th3 = __toESM(require_th());
+var import_buddhistEra2 = __toESM(require_buddhistEra());
+var import_date_fns2 = require("date-fns");
+var import_locale2 = require("date-fns/locale");
 var import_jsx_runtime24 = require("react/jsx-runtime");
+import_dayjs2.default.extend(import_buddhistEra2.default);
+import_dayjs2.default.locale("th");
+function DatePickerRange({
+  value,
+  onChange,
+  label,
+  required,
+  error,
+  disabled,
+  minDate,
+  maxDate,
+  disabledDate,
+  disablePast = false
+}) {
+  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_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;
+    return formatted.replace(/\d{4}$/, String(year)).replace(/\d{2}$/, String(year).slice(2));
+  };
+  const monthNames = [
+    "\u0E21\u0E01\u0E23\u0E32\u0E04\u0E21",
+    "\u0E01\u0E38\u0E21\u0E20\u0E32\u0E1E\u0E31\u0E19\u0E18\u0E4C",
+    "\u0E21\u0E35\u0E19\u0E32\u0E04\u0E21",
+    "\u0E40\u0E21\u0E29\u0E32\u0E22\u0E19",
+    "\u0E1E\u0E24\u0E29\u0E20\u0E32\u0E04\u0E21",
+    "\u0E21\u0E34\u0E16\u0E38\u0E19\u0E32\u0E22\u0E19",
+    "\u0E01\u0E23\u0E01\u0E0E\u0E32\u0E04\u0E21",
+    "\u0E2A\u0E34\u0E07\u0E2B\u0E32\u0E04\u0E21",
+    "\u0E01\u0E31\u0E19\u0E22\u0E32\u0E22\u0E19",
+    "\u0E15\u0E38\u0E25\u0E32\u0E04\u0E21",
+    "\u0E1E\u0E24\u0E28\u0E08\u0E34\u0E01\u0E32\u0E22\u0E19",
+    "\u0E18\u0E31\u0E19\u0E27\u0E32\u0E04\u0E21"
+  ];
+  const daysInMonth = calendar.daysInMonth();
+  const firstDayOfMonth = calendar.startOf("month").day();
+  const isDisabled = (date) => {
+    if (disablePast && date.isBefore(today, "day")) return true;
+    if (disabledDate && disabledDate(date.toDate())) return true;
+    if (minDate && date.isBefore((0, import_dayjs2.default)(minDate), "day")) return true;
+    if (maxDate && date.isAfter((0, import_dayjs2.default)(maxDate), "day")) return true;
+    return false;
+  };
+  const handleSelect = (d) => {
+    const selected = calendar.date(d);
+    if (isDisabled(selected)) return;
+    const selectedDate = selected.toDate();
+    if (!startDate || startDate && endDate) {
+      onChange([selectedDate, null]);
+    } else if (startDate && !endDate) {
+      if (selected.isBefore(startDayjs, "day")) {
+        onChange([selectedDate, null]);
+      } else {
+        onChange([startDate, selectedDate]);
+        setOpen(false);
+      }
+    }
+  };
+  (0, import_react9.useEffect)(() => {
+    const handleClickOutside = (e) => {
+      if (wrapperRef.current && !wrapperRef.current.contains(e.target)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+  const ArrowIcon = () => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", className: "w-4 h-4 text-gray-400", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    "path",
+    {
+      fillRule: "evenodd",
+      d: "M12.97 3.97a.75.75 0 011.06 0l7.5 7.5a.75.75 0 010 1.06l-7.5 7.5a.75.75 0 11-1.06-1.06l6.22-6.22H3a.75.75 0 010-1.5h16.19l-6.22-6.22a.75.75 0 010-1.06z",
+      clipRule: "evenodd"
+    }
+  ) });
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { ref: wrapperRef, style: { fontFamily: "Kanit", fontSize: 16 }, className: "relative w-full", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "mb-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "body-1", children: label }),
+      required && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "text-red-500 ml-1", children: "*" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+      "div",
+      {
+        className: `border rounded px-3 py-2 cursor-pointer bg-white flex items-center justify-between gap-2 ${disabled ? "opacity-50 cursor-not-allowed" : ""} ${error ? "border-red-500" : "border-gray-300"}`,
+        onClick: () => !disabled && setOpen(!open),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: `flex-1 ${!startDate ? "text-gray-400 font-light" : "text-gray-800"}`, children: startDate ? formatThaiBE(startDate) : "\u0E27\u0E31\u0E19\u0E40\u0E23\u0E34\u0E48\u0E21\u0E15\u0E49\u0E19" }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "flex-shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ArrowIcon, {}) }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: `flex-1 text-right ${!endDate ? "text-gray-400 font-light" : "text-gray-800"}`, children: endDate ? formatThaiBE(endDate) : "\u0E27\u0E31\u0E19\u0E2A\u0E34\u0E49\u0E19\u0E2A\u0E38\u0E14" })
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+      "div",
+      {
+        className: "absolute z-50 mt-2 w-80 p-4 bg-white shadow-xl rounded-lg border animate-fade-in right-0 left-0 mx-auto sm:mx-0 sm:left-auto sm:right-auto",
+        style: { fontFamily: "Kanit", fontSize: 16 },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex justify-between items-center mb-3", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+              "button",
+              {
+                onClick: () => setCalendar(calendar.subtract(1, "month")),
+                className: "px-2 hover:bg-gray-100 rounded",
+                children: "\u25C0"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "font-semibold text-lg text-gray-700", children: [
+              monthNames[calendar.month()],
+              " ",
+              calendar.year() + 543
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("button", { onClick: () => setCalendar(calendar.add(1, "month")), className: "px-2 hover:bg-gray-100 rounded", children: "\u25B6" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "grid grid-cols-7 text-center text-gray-500 text-sm mb-2 font-medium", children: ["\u0E2D\u0E32", "\u0E08", "\u0E2D", "\u0E1E", "\u0E1E\u0E24", "\u0E28", "\u0E2A"].map((d) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { children: d }, d)) }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "grid grid-cols-7 gap-y-1 text-center", children: [
+            Array(firstDayOfMonth).fill(null).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", {}, `empty-${i}`)),
+            Array.from({ length: daysInMonth }, (_, i) => i + 1).map((d) => {
+              const currentObj = calendar.date(d);
+              const isDisable = isDisabled(currentObj);
+              const isToday = currentObj.isSame(today, "day");
+              const isStart = startDayjs && currentObj.isSame(startDayjs, "day");
+              const isEnd = endDayjs && currentObj.isSame(endDayjs, "day");
+              const isInRange = startDayjs && endDayjs && currentObj.isAfter(startDayjs, "day") && currentObj.isBefore(endDayjs, "day");
+              let bgClass = "hover:bg-blue-100";
+              let textClass = "text-gray-700";
+              if (isDisable) {
+                bgClass = "";
+                textClass = "text-gray-300 cursor-not-allowed";
+              } else if (isStart || isEnd) {
+                bgClass = "bg-blue-600 shadow-md transform scale-105";
+                textClass = "text-white font-semibold";
+              } else if (isInRange) {
+                bgClass = "bg-blue-100";
+                textClass = "text-blue-700";
+              } else if (isToday) {
+                bgClass = "border border-blue-500 font-bold";
+                textClass = "text-blue-600";
+              }
+              return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                "div",
+                {
+                  onClick: () => !isDisable && handleSelect(d),
+                  className: `
+                    h-9 w-9 flex items-center justify-center rounded-full mx-auto transition-all duration-200
+                    ${bgClass} ${textClass} 
+                    ${!isDisable ? "cursor-pointer" : ""}
+                  `,
+                  children: d
+                },
+                d
+              );
+            })
+          ] })
+        ]
+      }
+    ),
+    error && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "text-red-500 text-xs mt-1", children: error })
+  ] });
+}
+
+// src/ColorPicker/ColorPickerBasic/ColorPicker.tsx
+var import_antd5 = require("antd");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 function ColorPickerBasic({
   value,
   onChange,
@@ -1368,8 +1623,8 @@ function ColorPickerBasic({
   className,
   placeholder = "\u0E01\u0E23\u0E38\u0E13\u0E32\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E2A\u0E35"
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-    import_antd6.ConfigProvider,
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    import_antd5.ConfigProvider,
     {
       theme: {
         token: {
@@ -1377,14 +1632,14 @@ function ColorPickerBasic({
           fontSize: 16
         }
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "container-input", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "body-1", children: label }),
+      children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "container-input", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "body-1", children: label }),
           " ",
-          required && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "text-red-500", children: "*" })
+          required && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "text-red-500", children: "*" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-          import_antd6.ColorPicker,
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+          import_antd5.ColorPicker,
           {
             defaultFormat,
             className: `body-1 w-full ${className ?? ""}`,
@@ -1395,9 +1650,9 @@ function ColorPickerBasic({
             showText: (color) => {
               const hex = color.toHexString();
               if (!value) {
-                return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { children: placeholder });
+                return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { children: placeholder });
               }
-              return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("span", { children: [
+              return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("span", { children: [
                 "(",
                 hex,
                 ")"
@@ -1406,14 +1661,14 @@ function ColorPickerBasic({
             disabled
           }
         ),
-        error && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "text-red-500 caption-1", children: error })
+        error && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("p", { className: "text-red-500 caption-1", children: error })
       ] })
     }
   );
 }
 
 // src/ColorPicker/ColorPalettePickerBasic/ColorPalettePickerBasic.tsx
-var import_antd7 = require("antd");
+var import_antd6 = require("antd");
 
 // node_modules/@babel/runtime/helpers/esm/typeof.js
 function _typeof(o) {
@@ -2115,7 +2370,7 @@ var greyDark = ["#151515", "#1f1f1f", "#2d2d2d", "#393939", "#494949", "#5a5a5a"
 greyDark.primary = greyDark[5];
 
 // src/ColorPicker/ColorPalettePickerBasic/ColorPalettePickerBasic.tsx
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 function genPresets(presets = presetPalettes) {
   return Object.entries(presets).map(([label, colors]) => ({
     label,
@@ -2136,14 +2391,14 @@ function ColorPalettePickerBasic({
   placeholder = "\u0E01\u0E23\u0E38\u0E13\u0E32\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E2A\u0E35",
   onClear
 }) {
-  const { token } = import_antd7.theme.useToken();
+  const { token } = import_antd6.theme.useToken();
   const presets = genPresets({
     primary: generate(token.colorPrimary),
     red,
     green
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-    import_antd7.ConfigProvider,
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    import_antd6.ConfigProvider,
     {
       theme: {
         token: {
@@ -2151,14 +2406,14 @@ function ColorPalettePickerBasic({
           fontSize: 16
         }
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "container-input", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "body-1", children: label }),
+      children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "container-input", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "body-1", children: label }),
           " ",
-          required && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "text-red-500", children: "*" })
+          required && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "text-red-500", children: "*" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-          import_antd7.ColorPicker,
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+          import_antd6.ColorPicker,
           {
             defaultFormat,
             className: `body-1 w-full ${className ?? ""}`,
@@ -2170,9 +2425,9 @@ function ColorPalettePickerBasic({
             showText: (color) => {
               const hex = color.toHexString();
               if (!value) {
-                return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { children: placeholder });
+                return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { children: placeholder });
               }
-              return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("span", { children: [
+              return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("span", { children: [
                 "(",
                 hex,
                 ")"
@@ -2182,15 +2437,15 @@ function ColorPalettePickerBasic({
             onClear
           }
         ),
-        error && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("p", { className: "text-red-500 caption-1", children: error })
+        error && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "text-red-500 caption-1", children: error })
       ] })
     }
   );
 }
 
 // src/Select/SelectField/SelectField.tsx
-var import_antd8 = require("antd");
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_antd7 = require("antd");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 function SelectField({
   value,
   onChange,
@@ -2208,8 +2463,8 @@ function SelectField({
   className,
   onClear
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-    import_antd8.ConfigProvider,
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    import_antd7.ConfigProvider,
     {
       theme: {
         token: {
@@ -2217,14 +2472,14 @@ function SelectField({
           fontSize: 16
         }
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "container-input", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "body-1", children: label }),
+      children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "container-input", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "body-1", children: label }),
           " ",
-          required && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "text-red-500", children: "*" })
+          required && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "text-red-500", children: "*" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-          import_antd8.Select,
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+          import_antd7.Select,
           {
             showSearch: true,
             value,
@@ -2238,7 +2493,7 @@ function SelectField({
             options,
             mode,
             onSearch: handleSearch,
-            prefix: prefix ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+            prefix: prefix ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
               "span",
               {
                 style: {
@@ -2255,15 +2510,15 @@ function SelectField({
             onClear
           }
         ),
-        error && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "text-red-500 caption-1", children: error })
+        error && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("p", { className: "text-red-500 caption-1", children: error })
       ] })
     }
   );
 }
 
 // src/Select/SelectFieldGroup/SelectFieldGroup.tsx
-var import_antd9 = require("antd");
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_antd8 = require("antd");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 function SelectFieldGroup({
   value,
   onChange,
@@ -2280,22 +2535,22 @@ function SelectFieldGroup({
   handleSearch,
   className
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-    import_antd9.ConfigProvider,
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+    import_antd8.ConfigProvider,
     {
       theme: {
         token: {
           fontFamily: "Kanit"
         }
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "container-input", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "body-1", children: label }),
+      children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "container-input", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "body-1", children: label }),
           " ",
-          required && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "text-red-500", children: "*" })
+          required && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "text-red-500", children: "*" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-          import_antd9.Select,
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+          import_antd8.Select,
           {
             showSearch: true,
             value,
@@ -2309,7 +2564,7 @@ function SelectFieldGroup({
             options,
             mode,
             onSearch: handleSearch,
-            prefix: prefix ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+            prefix: prefix ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
               "span",
               {
                 style: {
@@ -2325,14 +2580,14 @@ function SelectFieldGroup({
             allowClear: true
           }
         ),
-        error && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("p", { className: "text-red-500 caption-1", children: error })
+        error && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { className: "text-red-500 caption-1", children: error })
       ] })
     }
   );
 }
 
 // src/Select/SelectFieldStatus/SelectFieldStatus.tsx
-var import_antd10 = require("antd");
+var import_antd9 = require("antd");
 
 // src/Select/SelectFieldStatus/StatusMockup.ts
 var status = [
@@ -2345,7 +2600,7 @@ var status = [
 
 // src/Select/SelectFieldStatus/SelectFieldStatus.tsx
 var import_icons = require("@ant-design/icons");
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 function SelectFieldStatus({
   value,
   onChange,
@@ -2358,8 +2613,8 @@ function SelectFieldStatus({
   className
 }) {
   const selectedItem = status.find((s) => s.value === value);
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-    import_antd10.ConfigProvider,
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    import_antd9.ConfigProvider,
     {
       theme: {
         components: {
@@ -2374,17 +2629,17 @@ function SelectFieldStatus({
           fontFamily: "Kanit"
         }
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "container-input", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "body-1", children: label }),
+      children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "container-input", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "body-1", children: label }),
           " ",
-          required && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "text-red-500", children: "*" })
+          required && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "text-red-500", children: "*" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-          import_antd10.Select,
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+          import_antd9.Select,
           {
             disabled,
-            suffixIcon: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_icons.DownOutlined, { style: { color: value ? "#fff" : "#D9D9D9" } }),
+            suffixIcon: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_icons.DownOutlined, { style: { color: value ? "#fff" : "#D9D9D9" } }),
             value,
             onChange,
             className: `body-3 custom-select flex justify-center w-full ${className ?? ""}`,
@@ -2395,14 +2650,14 @@ function SelectFieldStatus({
             showSearch: true
           }
         ),
-        error && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { className: "text-red-500 caption-1", children: error })
+        error && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { className: "text-red-500 caption-1", children: error })
       ] })
     }
   );
 }
 
 // src/Select/SelectFieldStatusReport/SelectFieldStatusReport.tsx
-var import_antd11 = require("antd");
+var import_antd10 = require("antd");
 
 // src/Select/SelectFieldStatusReport/StatusReportMockup.ts
 var status2 = [
@@ -2412,7 +2667,7 @@ var status2 = [
 
 // src/Select/SelectFieldStatusReport/SelectFieldStatusReport.tsx
 var import_icons2 = require("@ant-design/icons");
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 function SelectFieldStatusReport({
   value,
   onChange,
@@ -2425,8 +2680,8 @@ function SelectFieldStatusReport({
   options
 }) {
   const selectedItem = status2.find((s) => s.value === value);
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-    import_antd11.ConfigProvider,
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+    import_antd10.ConfigProvider,
     {
       theme: {
         components: {
@@ -2441,17 +2696,17 @@ function SelectFieldStatusReport({
           fontFamily: "Kanit"
         }
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "container-input", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "body-1", children: label }),
+      children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "container-input", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "body-1", children: label }),
           " ",
-          required && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "text-red-500", children: "*" })
+          required && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "text-red-500", children: "*" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-          import_antd11.Select,
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+          import_antd10.Select,
           {
             disabled,
-            suffixIcon: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_icons2.DownOutlined, { style: { color: value ? "#fff" : "#D9D9D9" } }),
+            suffixIcon: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_icons2.DownOutlined, { style: { color: value ? "#fff" : "#D9D9D9" } }),
             value,
             onChange,
             className: `body-3 custom-select flex justify-center w-full ${className ?? ""}`,
@@ -2462,16 +2717,16 @@ function SelectFieldStatusReport({
             showSearch: true
           }
         ),
-        error && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { className: "text-red-500 caption-1", children: error })
+        error && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { className: "text-red-500 caption-1", children: error })
       ] })
     }
   );
 }
 
 // src/Select/SelectFieldTag/SelectFieldTag.tsx
-var import_antd12 = require("antd");
-var import_react8 = require("react");
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_antd11 = require("antd");
+var import_react10 = require("react");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 function SelectFieldTag({
   label,
   required,
@@ -2483,10 +2738,10 @@ function SelectFieldTag({
   onChange,
   onClear
 }) {
-  const [internalValue, setInternalValue] = (0, import_react8.useState)([]);
+  const [internalValue, setInternalValue] = (0, import_react10.useState)([]);
   const isControlled = controlledValue !== void 0;
   const value = isControlled ? controlledValue : internalValue;
-  const [searchWord, setSearchWord] = (0, import_react8.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() !== "");
@@ -2504,22 +2759,22 @@ function SelectFieldTag({
     }
     onChange?.([]);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-    import_antd12.ConfigProvider,
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+    import_antd11.ConfigProvider,
     {
       theme: {
         token: {
           fontFamily: "Kanit"
         }
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "container-input", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "body-1", children: label }),
+      children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "container-input", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "body-1", children: label }),
           " ",
-          required && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "text-red-500", children: "*" })
+          required && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "text-red-500", children: "*" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-          import_antd12.Select,
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+          import_antd11.Select,
           {
             mode: "tags",
             className: `body-1 flex justify-center w-full ${className ?? ""}`,
@@ -2537,7 +2792,7 @@ function SelectFieldTag({
             onClear
           }
         ),
-        error && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { className: "text-red-500 caption-1", children: error })
+        error && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { className: "text-red-500 caption-1", children: error })
       ] })
     }
   );
@@ -2545,9 +2800,9 @@ function SelectFieldTag({
 
 // src/Select/SelectCustom/SelectCustom.tsx
 var import_icons_react8 = require("@tabler/icons-react");
-var import_antd13 = require("antd");
-var import_react9 = require("react");
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_antd12 = require("antd");
+var import_react11 = 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",
   placeholder = "\u0E01\u0E23\u0E38\u0E13\u0E32\u0E40\u0E25\u0E37\u0E2D\u0E01",
@@ -2557,8 +2812,8 @@ function SelectCustom({
   error,
   onClear
 }) {
-  const [value, setValue] = (0, import_react9.useState)([]);
-  const [valueList, setValueList] = (0, import_react9.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) => {
@@ -2576,8 +2831,8 @@ function SelectCustom({
     });
   };
   const filteredOptions = options.filter((opt) => !valueList.includes(opt.value)).map((opt) => ({ value: opt.value, label: opt.label }));
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-    import_antd13.ConfigProvider,
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    import_antd12.ConfigProvider,
     {
       theme: {
         token: {
@@ -2585,14 +2840,14 @@ function SelectCustom({
           fontSize: 16
         }
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "container-input", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "body-1", children: label }),
+      children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "container-input", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "body-1", children: label }),
           " ",
-          required && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "text-red-500", children: "*" })
+          required && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "text-red-500", children: "*" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-          import_antd13.Select,
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+          import_antd12.Select,
           {
             value,
             onChange: handleChange,
@@ -2602,16 +2857,16 @@ function SelectCustom({
             onClear
           }
         ),
-        error && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { className: "text-red-500 caption-1", children: error }),
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "w-full p-[2px] overflow-y-auto", children: valueList.map((v, index) => /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex justify-between items-center py-[2px] body-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex flex-row gap-[8px]", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("p", { children: [
+        error && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { className: "text-red-500 caption-1", children: error }),
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "w-full p-[2px] overflow-y-auto", children: valueList.map((v, index) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex justify-between items-center py-[2px] body-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex flex-row gap-[8px]", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("p", { children: [
               index + 1,
               "."
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { children: v })
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { children: v })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_icons_react8.IconTrash, { className: "cursor-pointer", onClick: () => handleDelete(v) })
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_icons_react8.IconTrash, { className: "cursor-pointer", onClick: () => handleDelete(v) })
         ] }, index)) })
       ] })
     }
@@ -2619,7 +2874,7 @@ function SelectCustom({
 }
 
 // src/SortFilter/SortFilter.tsx
-var import_antd14 = require("antd");
+var import_antd13 = require("antd");
 var import_icons3 = require("@ant-design/icons");
 
 // src/SortFilter/DataMockSortFilter.ts
@@ -2650,9 +2905,9 @@ var quarters = [
 ];
 
 // src/SortFilter/SortFilter.tsx
-var import_react10 = require("react");
+var import_react12 = require("react");
 var import_icons_react9 = require("@tabler/icons-react");
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 function SortFilter({
   showYear = true,
   showQuarter = true,
@@ -2660,23 +2915,23 @@ function SortFilter({
   onSortClick,
   onFilterClick
 }) {
-  const [yearValue, setYearValue] = (0, import_react10.useState)();
-  const [monthValue, setMonthValue] = (0, import_react10.useState)();
-  const [quarterValue, setQuartersValue] = (0, import_react10.useState)();
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-    import_antd14.ConfigProvider,
+  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_runtime33.jsx)(
+    import_antd13.ConfigProvider,
     {
       theme: {
         token: {
           fontFamily: "Kanit"
         }
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "w-full flex items-center justify-between", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "w-full flex gap-[10px]", children: [
-          showYear && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "w-[200px]", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "w-full flex items-center justify-between", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "w-full flex gap-[10px]", children: [
+          showYear && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "w-[200px]", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
             SelectField,
             {
-              prefix: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_icons3.CalendarOutlined, {}),
+              prefix: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_icons3.CalendarOutlined, {}),
               onChange: setYearValue,
               options: years.map((s) => ({
                 value: s.value,
@@ -2686,10 +2941,10 @@ function SortFilter({
               value: yearValue
             }
           ) }),
-          showMonth && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "w-[200px]", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+          showMonth && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "w-[200px]", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
             SelectField,
             {
-              prefix: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_icons3.CalendarOutlined, {}),
+              prefix: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_icons3.CalendarOutlined, {}),
               onChange: setMonthValue,
               options: months.map((s) => ({
                 value: s.value,
@@ -2699,10 +2954,10 @@ function SortFilter({
               placeholder: "\u0E01\u0E23\u0E38\u0E13\u0E32\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E40\u0E14\u0E37\u0E2D\u0E19"
             }
           ) }),
-          showQuarter && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "w-[200px]", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+          showQuarter && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "w-[200px]", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
             SelectField,
             {
-              prefix: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_icons3.CalendarOutlined, {}),
+              prefix: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_icons3.CalendarOutlined, {}),
               onChange: setQuartersValue,
               options: quarters.map((s) => ({
                 value: s.value,
@@ -2713,8 +2968,8 @@ function SortFilter({
             }
           ) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex gap-[10px]", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex gap-[10px]", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
             import_icons_react9.IconSortDescending,
             {
               size: 24,
@@ -2722,7 +2977,7 @@ function SortFilter({
               onClick: onSortClick
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
             import_icons_react9.IconFilter,
             {
               size: 24,
@@ -2738,8 +2993,8 @@ function SortFilter({
 
 // src/Upload/FileUploader/FileUploader.tsx
 var import_icons_react10 = require("@tabler/icons-react");
-var import_react11 = require("react");
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_react13 = require("react");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 function FileUploader({
   onUpload,
   onError,
@@ -2751,10 +3006,10 @@ function FileUploader({
   description,
   label
 }) {
-  const [fileList, setFileList] = (0, import_react11.useState)([]);
-  const [uploading, setUploading] = (0, import_react11.useState)(false);
-  const [dragActive, setDragActive] = (0, import_react11.useState)(false);
-  const inputRef = (0, import_react11.useRef)(null);
+  const [fileList, setFileList] = (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 validateFile = (file) => {
     if (accept && !accept.includes(file.type)) {
       onError?.(`Invalid file type. file: ${file.name}`);
@@ -2810,10 +3065,10 @@ function FileUploader({
     }
     if (inputRef.current) inputRef.current.value = "";
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "w-full", children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { className: "body-1", children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { children: [
-      mode === "upload" ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "w-full", children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "body-1", children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { children: [
+      mode === "upload" ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
         "button",
         {
           type: "button",
@@ -2821,15 +3076,15 @@ function FileUploader({
           className: `h-[34px] flex justify-center items-center gap-2 w-full rounded-[2px] border border-gray-200 body-1 
           ${disabled ? "cursor-not-allowed text-gray-400 bg-gray-100" : "cursor-pointer hover:text-primary-400 hover:border-primary-200 duration-300"}`,
           disabled: disabled ? disabled : uploading,
-          children: uploading ? /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Loader, { size: 15 }),
+          children: uploading ? /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Loader, { size: 15 }),
             " \u0E01\u0E33\u0E25\u0E31\u0E07\u0E2D\u0E31\u0E1B\u0E42\u0E2B\u0E25\u0E14"
-          ] }) : /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_icons_react10.IconUpload, { size: 15, className: "text-gray-400" }),
+          ] }) : /* @__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"
           ] })
         }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+      ) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
         "div",
         {
           className: `min-w-[400px] min-h-[120px] flex  justify-center items-center border-2 border-dashed rounded-md p-4 transition-colors body-1
@@ -2843,17 +3098,17 @@ function FileUploader({
           },
           onDragLeave: () => setDragActive(false),
           onDrop: handleDrop,
-          children: uploading ? /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex justify-center items-center gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Loader, { size: 15 }),
+          children: uploading ? /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex justify-center items-center gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Loader, { size: 15 }),
             " \u0E01\u0E33\u0E25\u0E31\u0E07\u0E2D\u0E31\u0E1B\u0E42\u0E2B\u0E25\u0E14"
-          ] }) : /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex flex-col items-center gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_icons_react10.IconUpload, { size: 20 }),
-            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "body-1", children: "\u0E04\u0E25\u0E34\u0E01\u0E2B\u0E23\u0E37\u0E2D\u0E25\u0E32\u0E01\u0E44\u0E1F\u0E25\u0E4C\u0E21\u0E32\u0E17\u0E35\u0E48\u0E1A\u0E23\u0E34\u0E40\u0E27\u0E13\u0E19\u0E35\u0E49\u0E40\u0E1E\u0E37\u0E48\u0E2D\u0E2D\u0E31\u0E1B\u0E42\u0E2B\u0E25\u0E14" }),
-            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "text-gray-400 body-3", children: "\u0E23\u0E2D\u0E07\u0E23\u0E31\u0E1A\u0E01\u0E32\u0E23\u0E2D\u0E31\u0E1B\u0E42\u0E2B\u0E25\u0E14\u0E41\u0E1A\u0E1A\u0E40\u0E14\u0E35\u0E48\u0E22\u0E27\u0E2B\u0E23\u0E37\u0E2D\u0E2B\u0E25\u0E32\u0E22\u0E44\u0E1F\u0E25\u0E4C" })
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex flex-col items-center gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_icons_react10.IconUpload, { size: 20 }),
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "body-1", children: "\u0E04\u0E25\u0E34\u0E01\u0E2B\u0E23\u0E37\u0E2D\u0E25\u0E32\u0E01\u0E44\u0E1F\u0E25\u0E4C\u0E21\u0E32\u0E17\u0E35\u0E48\u0E1A\u0E23\u0E34\u0E40\u0E27\u0E13\u0E19\u0E35\u0E49\u0E40\u0E1E\u0E37\u0E48\u0E2D\u0E2D\u0E31\u0E1B\u0E42\u0E2B\u0E25\u0E14" }),
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "text-gray-400 body-3", children: "\u0E23\u0E2D\u0E07\u0E23\u0E31\u0E1A\u0E01\u0E32\u0E23\u0E2D\u0E31\u0E1B\u0E42\u0E2B\u0E25\u0E14\u0E41\u0E1A\u0E1A\u0E40\u0E14\u0E35\u0E48\u0E22\u0E27\u0E2B\u0E23\u0E37\u0E2D\u0E2B\u0E25\u0E32\u0E22\u0E44\u0E1F\u0E25\u0E4C" })
           ] })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
         "input",
         {
           type: "file",
@@ -2866,13 +3121,13 @@ function FileUploader({
         }
       )
     ] }),
-    description && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { className: "text-gray-400 body-4", children: description }),
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "mt-[8px]", children: fileList.length !== 0 && fileList.map((file, index) => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex items-center gap-2 rounded-[4px] px-[8px] py-[4px] body-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex items-center gap-2 w-[75%] overflow-hidden", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "w-[15px] h-[15px]", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_icons_react10.IconPaperclip, { size: 15 }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "truncate", children: file.name })
+    description && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "text-gray-400 body-4", children: description }),
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "mt-[8px]", children: fileList.length !== 0 && fileList.map((file, index) => /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex items-center gap-2 rounded-[4px] px-[8px] py-[4px] body-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex items-center gap-2 w-[75%] overflow-hidden", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "w-[15px] h-[15px]", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_icons_react10.IconPaperclip, { size: 15 }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "truncate", children: file.name })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
         import_icons_react10.IconTrash,
         {
           size: 20,
@@ -2906,9 +3161,9 @@ function messageLoading(content, duration) {
 }
 
 // src/Breadcrumb/Breadcrumb.tsx
+var import_antd14 = require("antd");
 var import_antd15 = require("antd");
-var import_antd16 = require("antd");
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 function Breadcrumbs({
   items,
   separator,
@@ -2916,16 +3171,16 @@ function Breadcrumbs({
   classname,
   params
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-    import_antd15.ConfigProvider,
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+    import_antd14.ConfigProvider,
     {
       theme: {
         token: {
           fontFamily: "Kanit"
         }
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-        import_antd16.Breadcrumb,
+      children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        import_antd15.Breadcrumb,
         {
           items,
           separator,
@@ -2939,8 +3194,8 @@ function Breadcrumbs({
 }
 
 // src/HeadingPage/HeadingPage.tsx
-var import_antd17 = require("antd");
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_antd16 = require("antd");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 function HeadingPage({ Heading }) {
   const today = (/* @__PURE__ */ new Date()).toLocaleDateString("th-TH", {
     weekday: "long",
@@ -2948,17 +3203,17 @@ function HeadingPage({ Heading }) {
     month: "long",
     year: "numeric"
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-    import_antd17.ConfigProvider,
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    import_antd16.ConfigProvider,
     {
       theme: {
         token: {
           fontFamily: "Kanit"
         }
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex flex-col gap-[10px] px-[20px] py-[10px]", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "headline-5", children: Heading }),
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("p", { className: "body-1", children: [
+      children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex flex-col gap-[10px] px-[20px] py-[10px]", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { className: "headline-5", children: Heading }),
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("p", { className: "body-1", children: [
           " \u0E27\u0E31\u0E19\u0E19\u0E35\u0E49 ",
           today
         ] })
@@ -2968,9 +3223,9 @@ function HeadingPage({ Heading }) {
 }
 
 // src/Progress/ProgressBar.tsx
-var import_antd18 = require("antd");
-var import_react12 = require("react");
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_antd17 = require("antd");
+var import_react14 = require("react");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 function ProgressBar({
   percent = 0,
   size = "default",
@@ -2983,8 +3238,8 @@ function ProgressBar({
   steps,
   isCheckPoints
 }) {
-  const [barWidth, setBarWidth] = (0, import_react12.useState)(0);
-  const progressRef = (0, import_react12.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;
@@ -2992,7 +3247,7 @@ function ProgressBar({
     const minCheckpoint = Math.min(...checkpoints);
     strokeColor = percent >= minCheckpoint ? "var(--color-green-500)" : "var(--color-red-500)";
   }
-  (0, import_react12.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     const inner = progressRef.current?.querySelector(".ant-progress-inner");
     if (!inner) return;
     const observer = new ResizeObserver(() => {
@@ -3001,17 +3256,17 @@ function ProgressBar({
     observer.observe(inner);
     return () => observer.disconnect();
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-    import_antd18.ConfigProvider,
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+    import_antd17.ConfigProvider,
     {
       theme: {
         token: {
           fontFamily: "Kanit"
         }
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "relative w-full", ref: progressRef, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-          import_antd18.Progress,
+      children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "relative w-full", ref: progressRef, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+          import_antd17.Progress,
           {
             className: "w-full",
             percent,
@@ -3026,7 +3281,7 @@ function ProgressBar({
             strokeColor
           }
         ),
-        barWidth > 0 && isCheckPoints && type !== "circle" && checkpoints.map((cp) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+        barWidth > 0 && isCheckPoints && type !== "circle" && checkpoints.map((cp) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
           "div",
           {
             className: "checkpoint absolute top-0",
@@ -3048,25 +3303,25 @@ function ProgressBar({
 }
 
 // src/KpiSection/KpiSection.tsx
-var import_antd19 = require("antd");
-var import_react14 = require("react");
+var import_antd18 = require("antd");
+var import_react16 = require("react");
 
 // src/KpiSection/hooks/useGetKpiSection.ts
-var import_react13 = require("react");
+var import_react15 = require("react");
 var import_cuid = __toESM(require("cuid"));
 function useGetKpiSection() {
-  const [nameKpi, setNameKpi] = (0, import_react13.useState)("");
-  const [kpiValue, setKpiValue] = (0, import_react13.useState)("");
-  const [unitValue, setUnitValue] = (0, import_react13.useState)("");
-  const [kpiList, setKpiList] = (0, import_react13.useState)([]);
-  const [editingBackup, setEditingBackup] = (0, import_react13.useState)({});
-  const [selected, setSelected] = (0, import_react13.useState)("2");
-  const [errors, setErrors] = (0, import_react13.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_react13.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" }
@@ -3199,7 +3454,7 @@ function useGetKpiSection() {
 
 // src/KpiSection/KpiSection.tsx
 var import_icons_react11 = require("@tabler/icons-react");
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 function KpiSection({ type, onChangeKpiList }) {
   const {
     handleAddKpi,
@@ -3219,18 +3474,18 @@ function KpiSection({ type, onChangeKpiList }) {
     itemErrors,
     setItemErrors
   } = useGetKpiSection();
-  const [messageApi2, messageContainer] = import_antd19.message.useMessage();
-  const [hasShownError, setHasShownError] = (0, import_react14.useState)(false);
-  (0, import_react14.useEffect)(() => {
+  const [messageApi2, messageContainer] = import_antd18.message.useMessage();
+  const [hasShownError, setHasShownError] = (0, import_react16.useState)(false);
+  (0, import_react16.useEffect)(() => {
     setMessageApi(messageApi2);
   }, [messageApi2]);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     if (onChangeKpiList) {
       onChangeKpiList(kpiList);
     }
   }, [kpiList]);
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
-    import_antd19.ConfigProvider,
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+    import_antd18.ConfigProvider,
     {
       theme: {
         token: {
@@ -3238,11 +3493,11 @@ function KpiSection({ type, onChangeKpiList }) {
           fontSize: 16
         }
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "container-input", children: [
+      children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "container-input", children: [
         messageContainer,
-        type === "number" && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "space-y-4", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "grid grid-cols-[1fr_200px_200px_50px] w-full gap-[24px] items-start", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+        type === "number" && /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "space-y-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "grid grid-cols-[1fr_200px_200px_50px] w-full gap-[24px] items-start", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
               InputField,
               {
                 value: nameKpi,
@@ -3254,7 +3509,7 @@ function KpiSection({ type, onChangeKpiList }) {
                 error: errors.nameKpi
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
               InputField,
               {
                 value: kpiValue,
@@ -3278,7 +3533,7 @@ function KpiSection({ type, onChangeKpiList }) {
                 error: errors.kpiValue
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
               InputField,
               {
                 value: unitValue,
@@ -3290,7 +3545,7 @@ function KpiSection({ type, onChangeKpiList }) {
                 error: errors.unitValue
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: `flex justify-end mt-[28px]`, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: `flex justify-end mt-[28px]`, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
               import_icons_react11.IconCirclePlus,
               {
                 className: "w-[40px] h-[40px] cursor-pointer hover:scale-110 transition",
@@ -3299,17 +3554,17 @@ function KpiSection({ type, onChangeKpiList }) {
               }
             ) })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { children: kpiList.map((kpi, index) => /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { children: kpiList.map((kpi, index) => /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
             "div",
             {
               className: "grid grid-cols-[30px_1fr_100px_120px_80px] items-start py-2 body-1 gap-[8px]",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("p", { className: `body-1 ${kpi.isEditing ? "mt-[12px]" : ""}`, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("p", { className: `body-1 ${kpi.isEditing ? "mt-[12px]" : ""}`, children: [
                   index + 1,
                   "."
                 ] }),
-                kpi.isEditing ? /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+                kpi.isEditing ? /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_jsx_runtime38.Fragment, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
                     InputField,
                     {
                       value: kpi.name,
@@ -3319,7 +3574,7 @@ function KpiSection({ type, onChangeKpiList }) {
                       error: itemErrors[kpi.id]?.name
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
                     InputField,
                     {
                       value: kpi.value?.toString(),
@@ -3344,7 +3599,7 @@ function KpiSection({ type, onChangeKpiList }) {
                       error: itemErrors[kpi.id]?.value
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
                     InputField,
                     {
                       value: kpi.unit,
@@ -3354,29 +3609,29 @@ function KpiSection({ type, onChangeKpiList }) {
                       error: itemErrors[kpi.id]?.unit
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+                  /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
                     "div",
                     {
                       className: `flex gap-2 justify-end self-center ${!!itemErrors[kpi.id]?.value || !!itemErrors[kpi.id]?.unit || !!itemErrors[kpi.id]?.name ? "mt-[-12px]" : ""}`,
                       children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+                        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
                           import_icons_react11.IconCheck,
                           {
                             className: "w-[30px] h-[30px] cursor-pointer",
                             onClick: () => handleSave(kpi.id, type)
                           }
                         ),
-                        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_icons_react11.IconX, { className: "w-[30px] h-[30px] cursor-pointer", onClick: () => handleCancel(kpi.id) })
+                        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_icons_react11.IconX, { className: "w-[30px] h-[30px] cursor-pointer", onClick: () => handleCancel(kpi.id) })
                       ]
                     }
                   )
-                ] }) : /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "body-1", children: kpi.name }),
-                  /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "body-1", children: kpi.value }),
-                  /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "body-1", children: kpi.unit }),
-                  /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex gap-3 justify-end", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_icons_react11.IconPencil, { className: "w-[30px] h-[30px] cursor-pointer", onClick: () => handleEdit(kpi.id) }),
-                    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_icons_react11.IconTrash, { className: "w-[30px] h-[30px] cursor-pointer", onClick: () => handleDelete(kpi.id) })
+                ] }) : /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_jsx_runtime38.Fragment, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { className: "body-1", children: kpi.name }),
+                  /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { className: "body-1", children: kpi.value }),
+                  /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { className: "body-1", children: kpi.unit }),
+                  /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex gap-3 justify-end", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_icons_react11.IconPencil, { className: "w-[30px] h-[30px] cursor-pointer", onClick: () => handleEdit(kpi.id) }),
+                    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_icons_react11.IconTrash, { className: "w-[30px] h-[30px] cursor-pointer", onClick: () => handleDelete(kpi.id) })
                   ] })
                 ] })
               ]
@@ -3384,9 +3639,9 @@ function KpiSection({ type, onChangeKpiList }) {
             kpi.id
           )) })
         ] }),
-        type === "text" && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "space-y-4", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "grid grid-cols-[1fr_50px] w-full gap-[24px] items-start", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+        type === "text" && /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "space-y-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "grid grid-cols-[1fr_50px] w-full gap-[24px] items-start", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
               InputField,
               {
                 value: nameKpi,
@@ -3398,7 +3653,7 @@ function KpiSection({ type, onChangeKpiList }) {
                 error: errors.nameKpi
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: `flex justify-end mt-[28px]`, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: `flex justify-end mt-[28px]`, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
               import_icons_react11.IconCirclePlus,
               {
                 className: "w-[40px] h-[40px] cursor-pointer hover:scale-110 transition",
@@ -3407,13 +3662,13 @@ function KpiSection({ type, onChangeKpiList }) {
               }
             ) })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { children: kpiList.map((kpi, index) => /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "grid grid-cols-[30px_1fr_80px] items-start py-2 body-1 gap-[8px]", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("p", { className: `body-1 ${kpi.isEditing ? "mt-[12px]" : ""}`, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { children: kpiList.map((kpi, index) => /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "grid grid-cols-[30px_1fr_80px] items-start py-2 body-1 gap-[8px]", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("p", { className: `body-1 ${kpi.isEditing ? "mt-[12px]" : ""}`, children: [
               index + 1,
               "."
             ] }),
-            kpi.isEditing ? /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+            kpi.isEditing ? /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_jsx_runtime38.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
                 InputField,
                 {
                   value: kpi.name,
@@ -3423,27 +3678,27 @@ function KpiSection({ type, onChangeKpiList }) {
                   error: itemErrors[kpi.id]?.name
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
                 "div",
                 {
                   className: `flex gap-2 justify-end self-center ${!!itemErrors[kpi.id]?.name ? "mt-[-12px]" : ""}`,
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
                       import_icons_react11.IconCheck,
                       {
                         className: "w-[30px] h-[30px] cursor-pointer",
                         onClick: () => handleSave(kpi.id, type)
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_icons_react11.IconX, { className: "w-[30px] h-[30px] cursor-pointer", onClick: () => handleCancel(kpi.id) })
+                    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_icons_react11.IconX, { className: "w-[30px] h-[30px] cursor-pointer", onClick: () => handleCancel(kpi.id) })
                   ]
                 }
               )
-            ] }) : /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "body-1", children: kpi.name }),
-              /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex gap-3 justify-end", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_icons_react11.IconPencil, { className: "w-[30px] h-[30px] cursor-pointer", onClick: () => handleEdit(kpi.id) }),
-                /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_icons_react11.IconTrash, { className: "w-[30px] h-[30px] cursor-pointer", onClick: () => handleDelete(kpi.id) })
+            ] }) : /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_jsx_runtime38.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { className: "body-1", children: kpi.name }),
+              /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex gap-3 justify-end", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_icons_react11.IconPencil, { className: "w-[30px] h-[30px] cursor-pointer", onClick: () => handleEdit(kpi.id) }),
+                /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_icons_react11.IconTrash, { className: "w-[30px] h-[30px] cursor-pointer", onClick: () => handleDelete(kpi.id) })
               ] })
             ] })
           ] }, kpi.id)) })
@@ -3454,17 +3709,17 @@ function KpiSection({ type, onChangeKpiList }) {
 }
 
 // src/Modal/Modal/Modal.tsx
-var import_antd20 = require("antd");
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_antd19 = require("antd");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 function AntDModal({ children, isOpen, width, onCancel }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_antd20.Modal, { open: isOpen, onCancel, width, centered: true, footer: null, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { children }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_antd19.Modal, { open: isOpen, onCancel, width, centered: true, footer: null, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { children }) }) });
 }
 
 // src/Indicator/Indicator/Indicator.tsx
 var import_icons_react12 = require("@tabler/icons-react");
-var import_react15 = require("react");
-var import_antd21 = require("antd");
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_react17 = require("react");
+var import_antd20 = require("antd");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 function Indicator({
   option = [
     { value: "TEXT", label: "\u0E02\u0E49\u0E2D\u0E04\u0E27\u0E32\u0E21" },
@@ -3474,22 +3729,22 @@ function Indicator({
   arrayData,
   setArrayData
 }) {
-  const [valueSwitch, setValueSwitch] = (0, import_react15.useState)("TEXT");
-  const [cacheData, setCacheData] = (0, import_react15.useState)({
+  const [valueSwitch, setValueSwitch] = (0, import_react17.useState)("TEXT");
+  const [cacheData, setCacheData] = (0, import_react17.useState)({
     indicatorType: type,
     inputType: valueSwitch,
     textValue: "",
     numberValue: "",
     unit: ""
   });
-  const [cacheEditData, setCacheEditData] = (0, import_react15.useState)({
+  const [cacheEditData, setCacheEditData] = (0, import_react17.useState)({
     indicatorType: type,
     inputType: valueSwitch,
     textValue: "",
     numberValue: "",
     unit: ""
   });
-  const [editIndex, setEditIndex] = (0, import_react15.useState)(null);
+  const [editIndex, setEditIndex] = (0, import_react17.useState)(null);
   const handleAddIndicator = () => {
     if (cacheData.textValue.trim() === "") return;
     setArrayData([
@@ -3546,14 +3801,14 @@ function Indicator({
     }));
     console.log(cacheEditData);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "w-full", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "w-full", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
       "div",
       {
         className: `space-x-2 grid ${valueSwitch === "TEXT" ? `grid-cols-[140px_1fr_50px]` : `grid-cols-[140px_1fr_200px_200px_50px]`} items-start`,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(SwitchSelect, { option, onClick: handleClick, value: valueSwitch, label: "\u0E1B\u0E23\u0E30\u0E40\u0E20\u0E17", required: true }),
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(SwitchSelect, { option, onClick: handleClick, value: valueSwitch, label: "\u0E1B\u0E23\u0E30\u0E40\u0E20\u0E17", required: true }),
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
             InputField,
             {
               label: `\u0E0A\u0E37\u0E48\u0E2D\u0E15\u0E31\u0E27\u0E0A\u0E35\u0E49\u0E27\u0E31\u0E14${type === "OUTPUT" ? "\u0E1C\u0E25\u0E1C\u0E25\u0E34\u0E15" : "\u0E1C\u0E25\u0E25\u0E31\u0E1E\u0E18\u0E4C"}`,
@@ -3564,8 +3819,8 @@ function Indicator({
               required: true
             }
           ),
-          valueSwitch === "NUMBER" && /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+          valueSwitch === "NUMBER" && /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_jsx_runtime40.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
               InputFieldNumber,
               {
                 label: `\u0E04\u0E48\u0E32\u0E40\u0E1B\u0E49\u0E32\u0E2B\u0E21\u0E32\u0E22${type === "OUTPUT" ? "\u0E1C\u0E25\u0E1C\u0E25\u0E34\u0E15" : "\u0E1C\u0E25\u0E25\u0E31\u0E1E\u0E18\u0E4C"}`,
@@ -3576,7 +3831,7 @@ function Indicator({
                 required: true
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
               InputField,
               {
                 label: `\u0E2B\u0E19\u0E48\u0E27\u0E22`,
@@ -3588,18 +3843,18 @@ function Indicator({
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_icons_react12.IconCirclePlus, { onClick: handleAddIndicator, className: "mt-7 cursor-pointer", size: 32 })
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_icons_react12.IconCirclePlus, { onClick: handleAddIndicator, className: "mt-7 cursor-pointer", size: 32 })
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_jsx_runtime39.Fragment, { children: arrayData.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_jsx_runtime40.Fragment, { children: arrayData.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
       "div",
       {
         className: `space-y-4 grid ${item.inputType === "TEXT" ? `grid-cols-[140px_1fr_50px_50px]` : `grid-cols-[140px_1fr_200px_150px_50px_50px]`} items-start`,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "body-1 mt-2", children: item.inputType === "TEXT" ? "\u0E02\u0E49\u0E2D\u0E04\u0E27\u0E32\u0E21" : "\u0E15\u0E31\u0E27\u0E40\u0E25\u0E02" }),
-          index === editIndex ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-            import_antd21.Input,
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "body-1 mt-2", children: item.inputType === "TEXT" ? "\u0E02\u0E49\u0E2D\u0E04\u0E27\u0E32\u0E21" : "\u0E15\u0E31\u0E27\u0E40\u0E25\u0E02" }),
+          index === editIndex ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+            import_antd20.Input,
             {
               className: "body-1 mt-2",
               variant: "underlined",
@@ -3607,10 +3862,10 @@ function Indicator({
               name: "textValue",
               onChange: (e) => handleChangeEditCashData(e)
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "body-1 mt-2", children: item.textValue }),
-          item.inputType === "NUMBER" && /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
-            index === editIndex ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-              import_antd21.Input,
+          ) : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "body-1 mt-2", children: item.textValue }),
+          item.inputType === "NUMBER" && /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_jsx_runtime40.Fragment, { children: [
+            index === editIndex ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+              import_antd20.Input,
               {
                 className: "body-1 mt-2",
                 variant: "underlined",
@@ -3618,9 +3873,9 @@ function Indicator({
                 name: "numberValue",
                 onChange: (e) => handleChangeEditCashData(e)
               }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "body-1 mt-2", children: item.numberValue }),
-            index === editIndex ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-              import_antd21.Input,
+            ) : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "body-1 mt-2", children: item.numberValue }),
+            index === editIndex ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+              import_antd20.Input,
               {
                 className: "body-1 mt-2",
                 variant: "underlined",
@@ -3628,19 +3883,19 @@ function Indicator({
                 name: "unit",
                 onChange: (e) => handleChangeEditCashData(e)
               }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "body-1 mt-2", children: item.unit })
+            ) : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "body-1 mt-2", children: item.unit })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "body-1 mt-2 flex", children: editIndex !== null ? editIndex === index ? /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "flex", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "body-1 mt-2 flex", children: editIndex !== null ? editIndex === index ? /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
               import_icons_react12.IconCheck,
               {
                 className: "cursor-pointer text-green-600",
                 onClick: () => handleConfirmEditIndicator(index)
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_icons_react12.IconX, { className: "cursor-pointer text-red-600", onClick: handleCancelEditIndicator })
-          ] }) : void 0 : /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_icons_react12.IconPencil, { className: "cursor-pointer", onClick: () => handleEditIndicator(index) }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "body-1 mt-2 cursor-pointer", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_icons_react12.IconTrash, { onClick: () => handleDeleteIndicator(index) }) })
+            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_icons_react12.IconX, { className: "cursor-pointer text-red-600", onClick: handleCancelEditIndicator })
+          ] }) : void 0 : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_icons_react12.IconPencil, { className: "cursor-pointer", onClick: () => handleEditIndicator(index) }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "body-1 mt-2 cursor-pointer", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_icons_react12.IconTrash, { onClick: () => handleDeleteIndicator(index) }) })
         ]
       }
     )) })
@@ -3649,31 +3904,31 @@ function Indicator({
 
 // src/FilterPopUp/FilterPopUp.tsx
 var import_icons_react13 = require("@tabler/icons-react");
-var import_react16 = require("react");
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_react18 = require("react");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 var FilterPopUp = (filter) => {
-  const [isAction, setIsAction] = (0, import_react16.useState)(true);
-  const [filterArray, setFilterArray] = (0, import_react16.useState)([""]);
+  const [isAction, setIsAction] = (0, import_react18.useState)(true);
+  const [filterArray, setFilterArray] = (0, import_react18.useState)([""]);
   const handleClearFilter = () => {
     setFilterArray([]);
   };
   const handleSubmitFilter = () => {
     filter.handleSearch(filterArray);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "relative", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("button", { className: "flex px-2 py-1 rounded-lg border-1", onClick: () => setIsAction(!isAction), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_icons_react13.IconFilter, {}),
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "relative", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("button", { className: "flex px-2 py-1 rounded-lg border-1", onClick: () => setIsAction(!isAction), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_icons_react13.IconFilter, {}),
       "filter"
     ] }),
-    isAction ? /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "absolute bg-white p-5 rounded-lg shadow-2xl w-[600px]", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex justify-end", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex justify-end text-nowrap gap-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(GhostButton, { title: "\u0E43\u0E0A\u0E49\u0E1F\u0E34\u0E25\u0E40\u0E15\u0E2D\u0E23\u0E4C", onClick: handleSubmitFilter, iconLeft: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_icons_react13.IconCheck, {}) }),
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(GhostButton, { title: "\u0E25\u0E49\u0E32\u0E07\u0E17\u0E31\u0E49\u0E07\u0E2B\u0E21\u0E14", onClick: handleClearFilter, iconLeft: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_icons_react13.IconTrash, {}) })
+    isAction ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "absolute bg-white p-5 rounded-lg shadow-2xl w-[600px]", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex justify-end", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex justify-end text-nowrap gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(GhostButton, { title: "\u0E43\u0E0A\u0E49\u0E1F\u0E34\u0E25\u0E40\u0E15\u0E2D\u0E23\u0E4C", onClick: handleSubmitFilter, iconLeft: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_icons_react13.IconCheck, {}) }),
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(GhostButton, { title: "\u0E25\u0E49\u0E32\u0E07\u0E17\u0E31\u0E49\u0E07\u0E2B\u0E21\u0E14", onClick: handleClearFilter, iconLeft: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_icons_react13.IconTrash, {}) })
         ] }),
         ""
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
         SelectCustom,
         {
           options: filter.selectionFilter,
@@ -3696,6 +3951,7 @@ var FilterPopUp = (filter) => {
   ColorPickerBasic,
   DataTable,
   DatePickerBasic,
+  DatePickerRange,
   FileUploader,
   FilterPopUp,
   GhostButton,