@esic-lab/data-core-ui 0.0.76 → 0.0.77

package/dist/index.mjs

@@ -1719,28 +1719,28 @@ function DatePickerRange({
   ] });
 }
 
-// src/ColorPicker/ColorPickerBasic/ColorPicker.tsx
-import { ConfigProvider as ConfigProvider8, ColorPicker } from "antd";
+// src/TimePicker/TimePickerBasic/TimePickerBasic.tsx
+var import_dayjs3 = __toESM(require_dayjs_min());
+import { ConfigProvider as ConfigProvider8, TimePicker } from "antd";
+import thTH from "antd/locale/th_TH.js";
 import { jsx as jsx26, jsxs as jsxs19 } from "react/jsx-runtime";
-function ColorPickerBasic({
+function TimePickerBasic({
   value,
   onChange,
   required,
   label,
   error,
+  placeholder,
   disabled,
-  allowClear,
-  defaultFormat,
-  className,
-  placeholder = "\u0E01\u0E23\u0E38\u0E13\u0E32\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E2A\u0E35"
+  className
 }) {
   return /* @__PURE__ */ jsx26(
     ConfigProvider8,
     {
+      locale: thTH,
       theme: {
         token: {
-          fontFamily: "Kanit",
-          fontSize: 16
+          fontFamily: "Kanit"
         }
       },
       children: /* @__PURE__ */ jsxs19("div", { className: "container-input", children: [
@@ -1750,6 +1750,111 @@ function ColorPickerBasic({
           required && /* @__PURE__ */ jsx26("span", { className: "text-red-500", children: "*" })
         ] }),
         /* @__PURE__ */ jsx26(
+          TimePicker,
+          {
+            format: "HH:mm",
+            className: `body-1 w-full ${className ?? ""}`,
+            value: value ? (0, import_dayjs3.default)(value) : null,
+            placeholder,
+            onChange: (time) => {
+              onChange(time ? time.toDate() : null);
+            },
+            allowClear: true,
+            disabled
+          }
+        ),
+        error && /* @__PURE__ */ jsx26("p", { className: "text-red-500 caption-1", children: error })
+      ] })
+    }
+  );
+}
+
+// src/TimePicker/TimePickerRangePicker/TimerPickerRangePicker.tsx
+var import_dayjs4 = __toESM(require_dayjs_min());
+import { ConfigProvider as ConfigProvider9, TimePicker as TimePicker2 } from "antd";
+import thTH2 from "antd/locale/th_TH.js";
+import { jsx as jsx27, jsxs as jsxs20 } from "react/jsx-runtime";
+function TimePickerRangePicker({
+  value,
+  onChange,
+  placeholder = ["\u0E40\u0E23\u0E34\u0E48\u0E21\u0E15\u0E49\u0E19", "\u0E2A\u0E34\u0E49\u0E19\u0E2A\u0E38\u0E14"],
+  label,
+  required,
+  error,
+  disabled,
+  className
+}) {
+  return /* @__PURE__ */ jsx27(
+    ConfigProvider9,
+    {
+      locale: thTH2,
+      theme: {
+        token: {
+          fontFamily: "Kanit"
+        }
+      },
+      children: /* @__PURE__ */ jsxs20("div", { className: "container-input", children: [
+        /* @__PURE__ */ jsxs20("div", { children: [
+          /* @__PURE__ */ jsx27("span", { className: "body-1", children: label }),
+          " ",
+          required && /* @__PURE__ */ jsx27("span", { className: "text-red-500", children: "*" })
+        ] }),
+        /* @__PURE__ */ jsx27(
+          TimePicker2.RangePicker,
+          {
+            format: "HH:mm",
+            value: value ? [value[0] ? (0, import_dayjs4.default)(value[0]) : null, value[1] ? (0, import_dayjs4.default)(value[1]) : null] : null,
+            placeholder,
+            className: `body-1 w-full ${className ?? ""}`,
+            onChange: (dates, dateStrings) => {
+              if (!dates) {
+                onChange(null);
+              } else {
+                onChange([dates[0] ? dates[0].toDate() : null, dates[1] ? dates[1].toDate() : null]);
+              }
+            },
+            allowClear: true,
+            disabled,
+            showNow: true
+          }
+        ),
+        error && /* @__PURE__ */ jsx27("p", { className: "text-red-500 caption-1", children: error })
+      ] })
+    }
+  );
+}
+
+// src/ColorPicker/ColorPickerBasic/ColorPicker.tsx
+import { ConfigProvider as ConfigProvider10, ColorPicker } from "antd";
+import { jsx as jsx28, jsxs as jsxs21 } from "react/jsx-runtime";
+function ColorPickerBasic({
+  value,
+  onChange,
+  required,
+  label,
+  error,
+  disabled,
+  allowClear,
+  defaultFormat,
+  className,
+  placeholder = "\u0E01\u0E23\u0E38\u0E13\u0E32\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E2A\u0E35"
+}) {
+  return /* @__PURE__ */ jsx28(
+    ConfigProvider10,
+    {
+      theme: {
+        token: {
+          fontFamily: "Kanit",
+          fontSize: 16
+        }
+      },
+      children: /* @__PURE__ */ jsxs21("div", { className: "container-input", children: [
+        /* @__PURE__ */ jsxs21("div", { children: [
+          /* @__PURE__ */ jsx28("span", { className: "body-1", children: label }),
+          " ",
+          required && /* @__PURE__ */ jsx28("span", { className: "text-red-500", children: "*" })
+        ] }),
+        /* @__PURE__ */ jsx28(
           ColorPicker,
           {
             defaultFormat,
@@ -1761,9 +1866,9 @@ function ColorPickerBasic({
             showText: (color) => {
               const hex = color.toHexString();
               if (!value) {
-                return /* @__PURE__ */ jsx26("span", { children: placeholder });
+                return /* @__PURE__ */ jsx28("span", { children: placeholder });
               }
-              return /* @__PURE__ */ jsxs19("span", { children: [
+              return /* @__PURE__ */ jsxs21("span", { children: [
                 "(",
                 hex,
                 ")"
@@ -1772,14 +1877,14 @@ function ColorPickerBasic({
             disabled
           }
         ),
-        error && /* @__PURE__ */ jsx26("p", { className: "text-red-500 caption-1", children: error })
+        error && /* @__PURE__ */ jsx28("p", { className: "text-red-500 caption-1", children: error })
       ] })
     }
   );
 }
 
 // src/ColorPicker/ColorPalettePickerBasic/ColorPalettePickerBasic.tsx
-import { ConfigProvider as ConfigProvider9, ColorPicker as ColorPicker2, theme } from "antd";
+import { ConfigProvider as ConfigProvider11, ColorPicker as ColorPicker2, theme } from "antd";
 
 // node_modules/@babel/runtime/helpers/esm/typeof.js
 function _typeof(o) {
@@ -2481,7 +2586,7 @@ var greyDark = ["#151515", "#1f1f1f", "#2d2d2d", "#393939", "#494949", "#5a5a5a"
 greyDark.primary = greyDark[5];
 
 // src/ColorPicker/ColorPalettePickerBasic/ColorPalettePickerBasic.tsx
-import { jsx as jsx27, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx29, jsxs as jsxs22 } from "react/jsx-runtime";
 function genPresets(presets = presetPalettes) {
   return Object.entries(presets).map(([label, colors]) => ({
     label,
@@ -2508,8 +2613,8 @@ function ColorPalettePickerBasic({
     red,
     green
   });
-  return /* @__PURE__ */ jsx27(
-    ConfigProvider9,
+  return /* @__PURE__ */ jsx29(
+    ConfigProvider11,
     {
       theme: {
         token: {
@@ -2517,13 +2622,13 @@ function ColorPalettePickerBasic({
           fontSize: 16
         }
       },
-      children: /* @__PURE__ */ jsxs20("div", { className: "container-input", children: [
-        /* @__PURE__ */ jsxs20("div", { children: [
-          /* @__PURE__ */ jsx27("span", { className: "body-1", children: label }),
+      children: /* @__PURE__ */ jsxs22("div", { className: "container-input", children: [
+        /* @__PURE__ */ jsxs22("div", { children: [
+          /* @__PURE__ */ jsx29("span", { className: "body-1", children: label }),
           " ",
-          required && /* @__PURE__ */ jsx27("span", { className: "text-red-500", children: "*" })
+          required && /* @__PURE__ */ jsx29("span", { className: "text-red-500", children: "*" })
         ] }),
-        /* @__PURE__ */ jsx27(
+        /* @__PURE__ */ jsx29(
           ColorPicker2,
           {
             defaultFormat,
@@ -2536,9 +2641,9 @@ function ColorPalettePickerBasic({
             showText: (color) => {
               const hex = color.toHexString();
               if (!value) {
-                return /* @__PURE__ */ jsx27("span", { children: placeholder });
+                return /* @__PURE__ */ jsx29("span", { children: placeholder });
               }
-              return /* @__PURE__ */ jsxs20("span", { children: [
+              return /* @__PURE__ */ jsxs22("span", { children: [
                 "(",
                 hex,
                 ")"
@@ -2548,15 +2653,15 @@ function ColorPalettePickerBasic({
             onClear
           }
         ),
-        error && /* @__PURE__ */ jsx27("p", { className: "text-red-500 caption-1", children: error })
+        error && /* @__PURE__ */ jsx29("p", { className: "text-red-500 caption-1", children: error })
       ] })
     }
   );
 }
 
 // src/Select/SelectField/SelectField.tsx
-import { Select, ConfigProvider as ConfigProvider10 } from "antd";
-import { jsx as jsx28, jsxs as jsxs21 } from "react/jsx-runtime";
+import { Select, ConfigProvider as ConfigProvider12 } from "antd";
+import { jsx as jsx30, jsxs as jsxs23 } from "react/jsx-runtime";
 function SelectField({
   value,
   onChange,
@@ -2576,8 +2681,8 @@ function SelectField({
   size = "middle",
   allowClear = true
 }) {
-  return /* @__PURE__ */ jsx28(
-    ConfigProvider10,
+  return /* @__PURE__ */ jsx30(
+    ConfigProvider12,
     {
       theme: {
         token: {
@@ -2585,13 +2690,13 @@ function SelectField({
           fontSize: 16
         }
       },
-      children: /* @__PURE__ */ jsxs21("div", { className: "container-input", children: [
-        /* @__PURE__ */ jsxs21("div", { children: [
-          /* @__PURE__ */ jsx28("span", { className: "body-1", children: label }),
+      children: /* @__PURE__ */ jsxs23("div", { className: "container-input", children: [
+        /* @__PURE__ */ jsxs23("div", { children: [
+          /* @__PURE__ */ jsx30("span", { className: "body-1", children: label }),
           " ",
-          required && /* @__PURE__ */ jsx28("span", { className: "text-red-500", children: "*" })
+          required && /* @__PURE__ */ jsx30("span", { className: "text-red-500", children: "*" })
         ] }),
-        /* @__PURE__ */ jsx28(
+        /* @__PURE__ */ jsx30(
           Select,
           {
             size,
@@ -2607,7 +2712,7 @@ function SelectField({
             options,
             mode,
             onSearch: handleSearch,
-            prefix: prefix ? /* @__PURE__ */ jsx28(
+            prefix: prefix ? /* @__PURE__ */ jsx30(
               "span",
               {
                 style: {
@@ -2624,15 +2729,15 @@ function SelectField({
             onClear
           }
         ),
-        error && /* @__PURE__ */ jsx28("p", { className: "text-red-500 caption-1", children: error })
+        error && /* @__PURE__ */ jsx30("p", { className: "text-red-500 caption-1", children: error })
       ] })
     }
   );
 }
 
 // src/Select/SelectFieldGroup/SelectFieldGroup.tsx
-import { Select as Select2, ConfigProvider as ConfigProvider11 } from "antd";
-import { jsx as jsx29, jsxs as jsxs22 } from "react/jsx-runtime";
+import { Select as Select2, ConfigProvider as ConfigProvider13 } from "antd";
+import { jsx as jsx31, jsxs as jsxs24 } from "react/jsx-runtime";
 function SelectFieldGroup({
   value,
   onChange,
@@ -2651,21 +2756,21 @@ function SelectFieldGroup({
   size = "middle",
   allowClear = true
 }) {
-  return /* @__PURE__ */ jsx29(
-    ConfigProvider11,
+  return /* @__PURE__ */ jsx31(
+    ConfigProvider13,
     {
       theme: {
         token: {
           fontFamily: "Kanit"
         }
       },
-      children: /* @__PURE__ */ jsxs22("div", { className: "container-input", children: [
-        /* @__PURE__ */ jsxs22("div", { children: [
-          /* @__PURE__ */ jsx29("span", { className: "body-1", children: label }),
+      children: /* @__PURE__ */ jsxs24("div", { className: "container-input", children: [
+        /* @__PURE__ */ jsxs24("div", { children: [
+          /* @__PURE__ */ jsx31("span", { className: "body-1", children: label }),
           " ",
-          required && /* @__PURE__ */ jsx29("span", { className: "text-red-500", children: "*" })
+          required && /* @__PURE__ */ jsx31("span", { className: "text-red-500", children: "*" })
         ] }),
-        /* @__PURE__ */ jsx29(
+        /* @__PURE__ */ jsx31(
           Select2,
           {
             size,
@@ -2681,7 +2786,7 @@ function SelectFieldGroup({
             options,
             mode,
             onSearch: handleSearch,
-            prefix: prefix ? /* @__PURE__ */ jsx29(
+            prefix: prefix ? /* @__PURE__ */ jsx31(
               "span",
               {
                 style: {
@@ -2697,16 +2802,16 @@ function SelectFieldGroup({
             allowClear
           }
         ),
-        error && /* @__PURE__ */ jsx29("p", { className: "text-red-500 caption-1", children: error })
+        error && /* @__PURE__ */ jsx31("p", { className: "text-red-500 caption-1", children: error })
       ] })
     }
   );
 }
 
 // src/Select/SelectFieldStatus/SelectFieldStatus.tsx
-import { Select as Select3, ConfigProvider as ConfigProvider12 } from "antd";
+import { Select as Select3, ConfigProvider as ConfigProvider14 } from "antd";
 import { DownOutlined } from "@ant-design/icons";
-import { jsx as jsx30, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs25 } from "react/jsx-runtime";
 function SelectFieldStatus({
   value,
   onChange,
@@ -2721,8 +2826,8 @@ function SelectFieldStatus({
   allowClear = false
 }) {
   const selectedItem = options?.find((s) => s.value === value);
-  return /* @__PURE__ */ jsx30(
-    ConfigProvider12,
+  return /* @__PURE__ */ jsx32(
+    ConfigProvider14,
     {
       theme: {
         components: {
@@ -2737,18 +2842,18 @@ function SelectFieldStatus({
           fontFamily: "Kanit"
         }
       },
-      children: /* @__PURE__ */ jsxs23("div", { className: "container-input", children: [
-        /* @__PURE__ */ jsxs23("div", { children: [
-          /* @__PURE__ */ jsx30("span", { className: "body-1", children: label }),
+      children: /* @__PURE__ */ jsxs25("div", { className: "container-input", children: [
+        /* @__PURE__ */ jsxs25("div", { children: [
+          /* @__PURE__ */ jsx32("span", { className: "body-1", children: label }),
           " ",
-          required && /* @__PURE__ */ jsx30("span", { className: "text-red-500", children: "*" })
+          required && /* @__PURE__ */ jsx32("span", { className: "text-red-500", children: "*" })
         ] }),
-        /* @__PURE__ */ jsx30(
+        /* @__PURE__ */ jsx32(
           Select3,
           {
             size,
             disabled,
-            suffixIcon: /* @__PURE__ */ jsx30(DownOutlined, { style: { color: value ? "#fff" : "#D9D9D9" } }),
+            suffixIcon: /* @__PURE__ */ jsx32(DownOutlined, { style: { color: value ? "#fff" : "#D9D9D9" } }),
             value: value ? value : void 0,
             onChange,
             className: `body-3 custom-select flex justify-center w-full ${className ?? ""} `,
@@ -2760,14 +2865,14 @@ function SelectFieldStatus({
             allowClear
           }
         ),
-        error && /* @__PURE__ */ jsx30("p", { className: "text-red-500 caption-1", children: error })
+        error && /* @__PURE__ */ jsx32("p", { className: "text-red-500 caption-1", children: error })
       ] })
     }
   );
 }
 
 // src/Select/SelectFieldStatusReport/SelectFieldStatusReport.tsx
-import { Select as Select4, ConfigProvider as ConfigProvider13 } from "antd";
+import { Select as Select4, ConfigProvider as ConfigProvider15 } from "antd";
 
 // src/Select/SelectFieldStatusReport/StatusReportMockup.ts
 var status = [
@@ -2777,7 +2882,7 @@ var status = [
 
 // src/Select/SelectFieldStatusReport/SelectFieldStatusReport.tsx
 import { DownOutlined as DownOutlined2 } from "@ant-design/icons";
-import { jsx as jsx31, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs26 } from "react/jsx-runtime";
 function SelectFieldStatusReport({
   value,
   onChange,
@@ -2792,8 +2897,8 @@ function SelectFieldStatusReport({
   allowClear = false
 }) {
   const selectedItem = status.find((s) => s.value === value);
-  return /* @__PURE__ */ jsx31(
-    ConfigProvider13,
+  return /* @__PURE__ */ jsx33(
+    ConfigProvider15,
     {
       theme: {
         components: {
@@ -2808,18 +2913,18 @@ function SelectFieldStatusReport({
           fontFamily: "Kanit"
         }
       },
-      children: /* @__PURE__ */ jsxs24("div", { className: "container-input", children: [
-        /* @__PURE__ */ jsxs24("div", { children: [
-          /* @__PURE__ */ jsx31("span", { className: "body-1", children: label }),
+      children: /* @__PURE__ */ jsxs26("div", { className: "container-input", children: [
+        /* @__PURE__ */ jsxs26("div", { children: [
+          /* @__PURE__ */ jsx33("span", { className: "body-1", children: label }),
           " ",
-          required && /* @__PURE__ */ jsx31("span", { className: "text-red-500", children: "*" })
+          required && /* @__PURE__ */ jsx33("span", { className: "text-red-500", children: "*" })
         ] }),
-        /* @__PURE__ */ jsx31(
+        /* @__PURE__ */ jsx33(
           Select4,
           {
             size,
             disabled,
-            suffixIcon: /* @__PURE__ */ jsx31(DownOutlined2, { style: { color: value ? "#fff" : "#D9D9D9" } }),
+            suffixIcon: /* @__PURE__ */ jsx33(DownOutlined2, { style: { color: value ? "#fff" : "#D9D9D9" } }),
             value: value ? value : void 0,
             onChange,
             className: `body-3 custom-select flex justify-center w-full ${className ?? ""}`,
@@ -2831,16 +2936,16 @@ function SelectFieldStatusReport({
             allowClear
           }
         ),
-        error && /* @__PURE__ */ jsx31("p", { className: "text-red-500 caption-1", children: error })
+        error && /* @__PURE__ */ jsx33("p", { className: "text-red-500 caption-1", children: error })
       ] })
     }
   );
 }
 
 // src/Select/SelectFieldTag/SelectFieldTag.tsx
-import { Select as Select5, ConfigProvider as ConfigProvider14 } from "antd";
+import { Select as Select5, ConfigProvider as ConfigProvider16 } from "antd";
 import { useState as useState8 } from "react";
-import { jsx as jsx32, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs27 } from "react/jsx-runtime";
 function SelectFieldTag({
   label,
   required,
@@ -2875,21 +2980,21 @@ function SelectFieldTag({
     }
     onChange?.([]);
   };
-  return /* @__PURE__ */ jsx32(
-    ConfigProvider14,
+  return /* @__PURE__ */ jsx34(
+    ConfigProvider16,
     {
       theme: {
         token: {
           fontFamily: "Kanit"
         }
       },
-      children: /* @__PURE__ */ jsxs25("div", { className: "container-input", children: [
-        /* @__PURE__ */ jsxs25("div", { children: [
-          /* @__PURE__ */ jsx32("span", { className: "body-1", children: label }),
+      children: /* @__PURE__ */ jsxs27("div", { className: "container-input", children: [
+        /* @__PURE__ */ jsxs27("div", { children: [
+          /* @__PURE__ */ jsx34("span", { className: "body-1", children: label }),
           " ",
-          required && /* @__PURE__ */ jsx32("span", { className: "text-red-500", children: "*" })
+          required && /* @__PURE__ */ jsx34("span", { className: "text-red-500", children: "*" })
         ] }),
-        /* @__PURE__ */ jsx32(
+        /* @__PURE__ */ jsx34(
           Select5,
           {
             size,
@@ -2909,7 +3014,7 @@ function SelectFieldTag({
             onClear
           }
         ),
-        error && /* @__PURE__ */ jsx32("p", { className: "text-red-500 caption-1", children: error })
+        error && /* @__PURE__ */ jsx34("p", { className: "text-red-500 caption-1", children: error })
       ] })
     }
   );
@@ -2917,9 +3022,9 @@ function SelectFieldTag({
 
 // src/Select/SelectCustom/SelectCustom.tsx
 import { IconTrash } from "@tabler/icons-react";
-import { Select as Select6, ConfigProvider as ConfigProvider15 } from "antd";
+import { Select as Select6, ConfigProvider as ConfigProvider17 } from "antd";
 import { useState as useState9 } from "react";
-import { jsx as jsx33, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs28 } from "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",
@@ -2950,8 +3055,8 @@ function SelectCustom({
     });
   };
   const filteredOptions = options.filter((opt) => !valueList.includes(opt.value)).map((opt) => ({ value: opt.value, label: opt.label }));
-  return /* @__PURE__ */ jsx33(
-    ConfigProvider15,
+  return /* @__PURE__ */ jsx35(
+    ConfigProvider17,
     {
       theme: {
         token: {
@@ -2959,13 +3064,13 @@ function SelectCustom({
           fontSize: 16
         }
       },
-      children: /* @__PURE__ */ jsxs26("div", { className: "container-input", children: [
-        /* @__PURE__ */ jsxs26("div", { children: [
-          /* @__PURE__ */ jsx33("span", { className: "body-1", children: label }),
+      children: /* @__PURE__ */ jsxs28("div", { className: "container-input", children: [
+        /* @__PURE__ */ jsxs28("div", { children: [
+          /* @__PURE__ */ jsx35("span", { className: "body-1", children: label }),
           " ",
-          required && /* @__PURE__ */ jsx33("span", { className: "text-red-500", children: "*" })
+          required && /* @__PURE__ */ jsx35("span", { className: "text-red-500", children: "*" })
         ] }),
-        /* @__PURE__ */ jsx33(
+        /* @__PURE__ */ jsx35(
           Select6,
           {
             size,
@@ -2978,20 +3083,20 @@ function SelectCustom({
             allowClear
           }
         ),
-        error && /* @__PURE__ */ jsx33("p", { className: "text-red-500 caption-1", children: error }),
-        /* @__PURE__ */ jsx33("div", { className: "w-full p-[2px] overflow-y-auto", children: valueList.map((v, index) => /* @__PURE__ */ jsxs26(
+        error && /* @__PURE__ */ jsx35("p", { className: "text-red-500 caption-1", children: error }),
+        /* @__PURE__ */ jsx35("div", { className: "w-full p-[2px] overflow-y-auto", children: valueList.map((v, index) => /* @__PURE__ */ jsxs28(
           "div",
           {
             className: "flex justify-between items-center py-[2px] body-1",
             children: [
-              /* @__PURE__ */ jsxs26("div", { className: "flex flex-row gap-[8px]", children: [
-                /* @__PURE__ */ jsxs26("p", { children: [
+              /* @__PURE__ */ jsxs28("div", { className: "flex flex-row gap-[8px]", children: [
+                /* @__PURE__ */ jsxs28("p", { children: [
                   index + 1,
                   "."
                 ] }),
-                /* @__PURE__ */ jsx33("p", { children: v })
+                /* @__PURE__ */ jsx35("p", { children: v })
               ] }),
-              /* @__PURE__ */ jsx33(
+              /* @__PURE__ */ jsx35(
                 IconTrash,
                 {
                   className: "cursor-pointer",
@@ -3008,7 +3113,7 @@ function SelectCustom({
 }
 
 // src/SortFilter/SortFilter.tsx
-import { ConfigProvider as ConfigProvider16 } from "antd";
+import { ConfigProvider as ConfigProvider18 } from "antd";
 import { CalendarOutlined } from "@ant-design/icons";
 
 // src/SortFilter/DataMockSortFilter.ts
@@ -3041,7 +3146,7 @@ var quarters = [
 // src/SortFilter/SortFilter.tsx
 import { useState as useState10 } from "react";
 import { IconSortDescending as IconSortDescending2, IconFilter } from "@tabler/icons-react";
-import { jsx as jsx34, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs29 } from "react/jsx-runtime";
 function SortFilter({
   showYear = true,
   showQuarter = true,
@@ -3052,20 +3157,20 @@ function SortFilter({
   const [yearValue, setYearValue] = useState10();
   const [monthValue, setMonthValue] = useState10();
   const [quarterValue, setQuartersValue] = useState10();
-  return /* @__PURE__ */ jsx34(
-    ConfigProvider16,
+  return /* @__PURE__ */ jsx36(
+    ConfigProvider18,
     {
       theme: {
         token: {
           fontFamily: "Kanit"
         }
       },
-      children: /* @__PURE__ */ jsxs27("div", { className: "w-full flex items-center justify-between", children: [
-        /* @__PURE__ */ jsxs27("div", { className: "w-full flex gap-[10px]", children: [
-          showYear && /* @__PURE__ */ jsx34("div", { className: "w-[200px]", children: /* @__PURE__ */ jsx34(
+      children: /* @__PURE__ */ jsxs29("div", { className: "w-full flex items-center justify-between", children: [
+        /* @__PURE__ */ jsxs29("div", { className: "w-full flex gap-[10px]", children: [
+          showYear && /* @__PURE__ */ jsx36("div", { className: "w-[200px]", children: /* @__PURE__ */ jsx36(
             SelectField,
             {
-              prefix: /* @__PURE__ */ jsx34(CalendarOutlined, {}),
+              prefix: /* @__PURE__ */ jsx36(CalendarOutlined, {}),
               onChange: setYearValue,
               options: years.map((s) => ({
                 value: s.value,
@@ -3075,10 +3180,10 @@ function SortFilter({
               value: yearValue
             }
           ) }),
-          showMonth && /* @__PURE__ */ jsx34("div", { className: "w-[200px]", children: /* @__PURE__ */ jsx34(
+          showMonth && /* @__PURE__ */ jsx36("div", { className: "w-[200px]", children: /* @__PURE__ */ jsx36(
             SelectField,
             {
-              prefix: /* @__PURE__ */ jsx34(CalendarOutlined, {}),
+              prefix: /* @__PURE__ */ jsx36(CalendarOutlined, {}),
               onChange: setMonthValue,
               options: months.map((s) => ({
                 value: s.value,
@@ -3088,10 +3193,10 @@ function SortFilter({
               placeholder: "\u0E01\u0E23\u0E38\u0E13\u0E32\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E40\u0E14\u0E37\u0E2D\u0E19"
             }
           ) }),
-          showQuarter && /* @__PURE__ */ jsx34("div", { className: "w-[200px]", children: /* @__PURE__ */ jsx34(
+          showQuarter && /* @__PURE__ */ jsx36("div", { className: "w-[200px]", children: /* @__PURE__ */ jsx36(
             SelectField,
             {
-              prefix: /* @__PURE__ */ jsx34(CalendarOutlined, {}),
+              prefix: /* @__PURE__ */ jsx36(CalendarOutlined, {}),
               onChange: setQuartersValue,
               options: quarters.map((s) => ({
                 value: s.value,
@@ -3102,8 +3207,8 @@ function SortFilter({
             }
           ) })
         ] }),
-        /* @__PURE__ */ jsxs27("div", { className: "flex gap-[10px]", children: [
-          /* @__PURE__ */ jsx34(
+        /* @__PURE__ */ jsxs29("div", { className: "flex gap-[10px]", children: [
+          /* @__PURE__ */ jsx36(
             IconSortDescending2,
             {
               size: 24,
@@ -3111,7 +3216,7 @@ function SortFilter({
               onClick: onSortClick
             }
           ),
-          /* @__PURE__ */ jsx34(
+          /* @__PURE__ */ jsx36(
             IconFilter,
             {
               size: 24,
@@ -3128,7 +3233,7 @@ function SortFilter({
 // src/Upload/FileUploader/FileUploader.tsx
 import { IconUpload, IconTrash as IconTrash2, IconFileDescription } from "@tabler/icons-react";
 import { useRef as useRef4, useState as useState11 } from "react";
-import { Fragment as Fragment5, jsx as jsx35, jsxs as jsxs28 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx37, jsxs as jsxs30 } from "react/jsx-runtime";
 function FileUploader({
   onUpload,
   onError,
@@ -3214,10 +3319,10 @@ function FileUploader({
     }
     if (inputRef.current) inputRef.current.value = "";
   };
-  return /* @__PURE__ */ jsxs28("div", { className: "w-full", children: [
-    label && /* @__PURE__ */ jsx35("p", { className: "body-1", children: label }),
-    !readOnly && /* @__PURE__ */ jsxs28("div", { className: uploaderWidth, children: [
-      mode === "upload" ? /* @__PURE__ */ jsx35(
+  return /* @__PURE__ */ jsxs30("div", { className: "w-full", children: [
+    label && /* @__PURE__ */ jsx37("p", { className: "body-1", children: label }),
+    !readOnly && /* @__PURE__ */ jsxs30("div", { className: uploaderWidth, children: [
+      mode === "upload" ? /* @__PURE__ */ jsx37(
         "button",
         {
           type: "button",
@@ -3225,16 +3330,16 @@ 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__ */ jsxs28(Fragment5, { children: [
-            /* @__PURE__ */ jsx35(Loader, { size: 15 }),
+          children: uploading ? /* @__PURE__ */ jsxs30(Fragment5, { children: [
+            /* @__PURE__ */ jsx37(Loader, { size: 15 }),
             " \u0E01\u0E33\u0E25\u0E31\u0E07\u0E2D\u0E31\u0E1B\u0E42\u0E2B\u0E25\u0E14"
-          ] }) : /* @__PURE__ */ jsxs28(Fragment5, { children: [
-            /* @__PURE__ */ jsx35(IconUpload, { size: 15, className: "text-gray-400" }),
+          ] }) : /* @__PURE__ */ jsxs30(Fragment5, { children: [
+            /* @__PURE__ */ jsx37(IconUpload, { size: 15, className: "text-gray-400" }),
             " ",
             uploadText
           ] })
         }
-      ) : /* @__PURE__ */ jsx35(
+      ) : /* @__PURE__ */ jsx37(
         "div",
         {
           className: `w-full min-h-[120px] flex  justify-center items-center border-2 border-dashed rounded-md p-4 transition-colors body-1
@@ -3248,17 +3353,17 @@ function FileUploader({
           },
           onDragLeave: () => setDragActive(false),
           onDrop: handleDrop,
-          children: uploading ? /* @__PURE__ */ jsxs28("div", { className: "flex justify-center items-center gap-2", children: [
-            /* @__PURE__ */ jsx35(Loader, { size: 15 }),
+          children: uploading ? /* @__PURE__ */ jsxs30("div", { className: "flex justify-center items-center gap-2", children: [
+            /* @__PURE__ */ jsx37(Loader, { size: 15 }),
             " \u0E01\u0E33\u0E25\u0E31\u0E07\u0E2D\u0E31\u0E1B\u0E42\u0E2B\u0E25\u0E14"
-          ] }) : /* @__PURE__ */ jsxs28("div", { className: "flex flex-col items-center gap-2", children: [
-            /* @__PURE__ */ jsx35(IconUpload, { size: 20 }),
-            /* @__PURE__ */ jsx35("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__ */ jsx35("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__ */ jsxs30("div", { className: "flex flex-col items-center gap-2", children: [
+            /* @__PURE__ */ jsx37(IconUpload, { size: 20 }),
+            /* @__PURE__ */ jsx37("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__ */ jsx37("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__ */ jsx35(
+      /* @__PURE__ */ jsx37(
         "input",
         {
           type: "file",
@@ -3271,8 +3376,8 @@ function FileUploader({
         }
       )
     ] }),
-    description && /* @__PURE__ */ jsx35("p", { className: "text-gray-400 body-4", children: description }),
-    /* @__PURE__ */ jsx35("div", { className: `mt-[8px] ${attachWidth}`, children: filesToDisplay.length !== 0 && /* @__PURE__ */ jsx35("div", { className: "flex flex-col rounded-[6px] body-1 border-[1px] border-gray-300", children: filesToDisplay.map((file, index) => /* @__PURE__ */ jsxs28(
+    description && /* @__PURE__ */ jsx37("p", { className: "text-gray-400 body-4", children: description }),
+    /* @__PURE__ */ jsx37("div", { className: `mt-[8px] ${attachWidth}`, children: filesToDisplay.length !== 0 && /* @__PURE__ */ jsx37("div", { className: "flex flex-col rounded-[6px] body-1 border-[1px] border-gray-300", children: filesToDisplay.map((file, index) => /* @__PURE__ */ jsxs30(
       "div",
       {
         className: `flex px-[16px] hover:bg-primary-50 hover:cursor-pointer
@@ -3282,11 +3387,11 @@ function FileUploader({
                 ${index !== 0 ? "pt-[16px]" : ""}`,
         onClick: () => onClickFile && onClickFile(file),
         children: [
-          /* @__PURE__ */ jsxs28("div", { className: "flex gap-2 overflow-hidden", children: [
-            /* @__PURE__ */ jsx35("div", { className: "w-[24px] h-[24px] flex items-center justify-center", children: /* @__PURE__ */ jsx35(IconFileDescription, { size: 20 }) }),
-            /* @__PURE__ */ jsx35("span", { className: "truncate", children: file.name || file.fileName })
+          /* @__PURE__ */ jsxs30("div", { className: "flex gap-2 overflow-hidden", children: [
+            /* @__PURE__ */ jsx37("div", { className: "w-[24px] h-[24px] flex items-center justify-center", children: /* @__PURE__ */ jsx37(IconFileDescription, { size: 20 }) }),
+            /* @__PURE__ */ jsx37("span", { className: "truncate", children: file.name || file.fileName })
           ] }),
-          !readOnly && !disabled && /* @__PURE__ */ jsx35(
+          !readOnly && !disabled && /* @__PURE__ */ jsx37(
             IconTrash2,
             {
               size: 20,
@@ -3326,9 +3431,9 @@ function messageLoading(content, duration) {
 }
 
 // src/Breadcrumb/Breadcrumb.tsx
-import { ConfigProvider as ConfigProvider17 } from "antd";
+import { ConfigProvider as ConfigProvider19 } from "antd";
 import { Breadcrumb } from "antd";
-import { jsx as jsx36 } from "react/jsx-runtime";
+import { jsx as jsx38 } from "react/jsx-runtime";
 function Breadcrumbs({
   items,
   separator,
@@ -3336,15 +3441,15 @@ function Breadcrumbs({
   classname,
   params
 }) {
-  return /* @__PURE__ */ jsx36(
-    ConfigProvider17,
+  return /* @__PURE__ */ jsx38(
+    ConfigProvider19,
     {
       theme: {
         token: {
           fontFamily: "Kanit"
         }
       },
-      children: /* @__PURE__ */ jsx36(
+      children: /* @__PURE__ */ jsx38(
         Breadcrumb,
         {
           items,
@@ -3359,8 +3464,8 @@ function Breadcrumbs({
 }
 
 // src/HeadingPage/HeadingPage.tsx
-import { ConfigProvider as ConfigProvider18 } from "antd";
-import { jsx as jsx37, jsxs as jsxs29 } from "react/jsx-runtime";
+import { ConfigProvider as ConfigProvider20 } from "antd";
+import { jsx as jsx39, jsxs as jsxs31 } from "react/jsx-runtime";
 function HeadingPage({ Heading }) {
   const today = (/* @__PURE__ */ new Date()).toLocaleDateString("th-TH", {
     weekday: "long",
@@ -3368,17 +3473,17 @@ function HeadingPage({ Heading }) {
     month: "long",
     year: "numeric"
   });
-  return /* @__PURE__ */ jsx37(
-    ConfigProvider18,
+  return /* @__PURE__ */ jsx39(
+    ConfigProvider20,
     {
       theme: {
         token: {
           fontFamily: "Kanit"
         }
       },
-      children: /* @__PURE__ */ jsxs29("div", { className: "flex flex-col gap-[10px] px-[20px] py-[10px]", children: [
-        /* @__PURE__ */ jsx37("p", { className: "headline-5", children: Heading }),
-        /* @__PURE__ */ jsxs29("p", { className: "body-1", children: [
+      children: /* @__PURE__ */ jsxs31("div", { className: "flex flex-col gap-[10px] px-[20px] py-[10px]", children: [
+        /* @__PURE__ */ jsx39("p", { className: "headline-5", children: Heading }),
+        /* @__PURE__ */ jsxs31("p", { className: "body-1", children: [
           " \u0E27\u0E31\u0E19\u0E19\u0E35\u0E49 ",
           today
         ] })
@@ -3388,9 +3493,9 @@ function HeadingPage({ Heading }) {
 }
 
 // src/Progress/ProgressBar.tsx
-import { ConfigProvider as ConfigProvider19, Progress } from "antd";
+import { ConfigProvider as ConfigProvider21, Progress } from "antd";
 import { useEffect as useEffect4, useRef as useRef5, useState as useState12 } from "react";
-import { jsx as jsx38, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs32 } from "react/jsx-runtime";
 function ProgressBar({
   percent = 0,
   size = "default",
@@ -3421,16 +3526,16 @@ function ProgressBar({
     observer.observe(inner);
     return () => observer.disconnect();
   }, []);
-  return /* @__PURE__ */ jsx38(
-    ConfigProvider19,
+  return /* @__PURE__ */ jsx40(
+    ConfigProvider21,
     {
       theme: {
         token: {
           fontFamily: "Kanit"
         }
       },
-      children: /* @__PURE__ */ jsxs30("div", { className: "relative w-full", ref: progressRef, children: [
-        /* @__PURE__ */ jsx38(
+      children: /* @__PURE__ */ jsxs32("div", { className: "relative w-full", ref: progressRef, children: [
+        /* @__PURE__ */ jsx40(
           Progress,
           {
             className: "w-full",
@@ -3446,7 +3551,7 @@ function ProgressBar({
             strokeColor
           }
         ),
-        barWidth > 0 && isCheckPoints && type !== "circle" && checkpoints.map((cp) => /* @__PURE__ */ jsx38(
+        barWidth > 0 && isCheckPoints && type !== "circle" && checkpoints.map((cp) => /* @__PURE__ */ jsx40(
           "div",
           {
             className: "checkpoint absolute top-0",
@@ -3468,7 +3573,7 @@ function ProgressBar({
 }
 
 // src/KpiSection/KpiSection.tsx
-import { ConfigProvider as ConfigProvider20, message } from "antd";
+import { ConfigProvider as ConfigProvider22, message } from "antd";
 import { useEffect as useEffect5, useState as useState14 } from "react";
 
 // src/KpiSection/hooks/useGetKpiSection.ts
@@ -3619,7 +3724,7 @@ function useGetKpiSection() {
 
 // src/KpiSection/KpiSection.tsx
 import { IconCheck as IconCheck2, IconCirclePlus, IconPencil, IconTrash as IconTrash3, IconX as IconX2 } from "@tabler/icons-react";
-import { Fragment as Fragment6, jsx as jsx39, jsxs as jsxs31 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx41, jsxs as jsxs33 } from "react/jsx-runtime";
 function KpiSection({ type, onChangeKpiList }) {
   const {
     handleAddKpi,
@@ -3649,8 +3754,8 @@ function KpiSection({ type, onChangeKpiList }) {
       onChangeKpiList(kpiList);
     }
   }, [kpiList]);
-  return /* @__PURE__ */ jsx39(
-    ConfigProvider20,
+  return /* @__PURE__ */ jsx41(
+    ConfigProvider22,
     {
       theme: {
         token: {
@@ -3658,11 +3763,11 @@ function KpiSection({ type, onChangeKpiList }) {
           fontSize: 16
         }
       },
-      children: /* @__PURE__ */ jsxs31("div", { className: "container-input", children: [
+      children: /* @__PURE__ */ jsxs33("div", { className: "container-input", children: [
         messageContainer,
-        type === "number" && /* @__PURE__ */ jsxs31("div", { className: "space-y-4", children: [
-          /* @__PURE__ */ jsxs31("div", { className: "grid grid-cols-[1fr_200px_200px_50px] w-full gap-[24px] items-start", children: [
-            /* @__PURE__ */ jsx39(
+        type === "number" && /* @__PURE__ */ jsxs33("div", { className: "space-y-4", children: [
+          /* @__PURE__ */ jsxs33("div", { className: "grid grid-cols-[1fr_200px_200px_50px] w-full gap-[24px] items-start", children: [
+            /* @__PURE__ */ jsx41(
               InputField,
               {
                 value: nameKpi,
@@ -3674,7 +3779,7 @@ function KpiSection({ type, onChangeKpiList }) {
                 error: errors.nameKpi
               }
             ),
-            /* @__PURE__ */ jsx39(
+            /* @__PURE__ */ jsx41(
               InputField,
               {
                 value: kpiValue,
@@ -3698,7 +3803,7 @@ function KpiSection({ type, onChangeKpiList }) {
                 error: errors.kpiValue
               }
             ),
-            /* @__PURE__ */ jsx39(
+            /* @__PURE__ */ jsx41(
               InputField,
               {
                 value: unitValue,
@@ -3710,7 +3815,7 @@ function KpiSection({ type, onChangeKpiList }) {
                 error: errors.unitValue
               }
             ),
-            /* @__PURE__ */ jsx39("div", { className: `flex justify-end mt-[28px]`, children: /* @__PURE__ */ jsx39(
+            /* @__PURE__ */ jsx41("div", { className: `flex justify-end mt-[28px]`, children: /* @__PURE__ */ jsx41(
               IconCirclePlus,
               {
                 className: "w-[40px] h-[40px] cursor-pointer hover:scale-110 transition",
@@ -3719,17 +3824,17 @@ function KpiSection({ type, onChangeKpiList }) {
               }
             ) })
           ] }),
-          /* @__PURE__ */ jsx39("div", { children: kpiList.map((kpi, index) => /* @__PURE__ */ jsxs31(
+          /* @__PURE__ */ jsx41("div", { children: kpiList.map((kpi, index) => /* @__PURE__ */ jsxs33(
             "div",
             {
               className: "grid grid-cols-[30px_1fr_100px_120px_80px] items-start py-2 body-1 gap-[8px]",
               children: [
-                /* @__PURE__ */ jsxs31("p", { className: `body-1 ${kpi.isEditing ? "mt-[12px]" : ""}`, children: [
+                /* @__PURE__ */ jsxs33("p", { className: `body-1 ${kpi.isEditing ? "mt-[12px]" : ""}`, children: [
                   index + 1,
                   "."
                 ] }),
-                kpi.isEditing ? /* @__PURE__ */ jsxs31(Fragment6, { children: [
-                  /* @__PURE__ */ jsx39(
+                kpi.isEditing ? /* @__PURE__ */ jsxs33(Fragment6, { children: [
+                  /* @__PURE__ */ jsx41(
                     InputField,
                     {
                       value: kpi.name,
@@ -3739,7 +3844,7 @@ function KpiSection({ type, onChangeKpiList }) {
                       error: itemErrors[kpi.id]?.name
                     }
                   ),
-                  /* @__PURE__ */ jsx39(
+                  /* @__PURE__ */ jsx41(
                     InputField,
                     {
                       value: kpi.value?.toString(),
@@ -3764,7 +3869,7 @@ function KpiSection({ type, onChangeKpiList }) {
                       error: itemErrors[kpi.id]?.value
                     }
                   ),
-                  /* @__PURE__ */ jsx39(
+                  /* @__PURE__ */ jsx41(
                     InputField,
                     {
                       value: kpi.unit,
@@ -3774,29 +3879,29 @@ function KpiSection({ type, onChangeKpiList }) {
                       error: itemErrors[kpi.id]?.unit
                     }
                   ),
-                  /* @__PURE__ */ jsxs31(
+                  /* @__PURE__ */ jsxs33(
                     "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__ */ jsx39(
+                        /* @__PURE__ */ jsx41(
                           IconCheck2,
                           {
                             className: "w-[30px] h-[30px] cursor-pointer",
                             onClick: () => handleSave(kpi.id, type)
                           }
                         ),
-                        /* @__PURE__ */ jsx39(IconX2, { className: "w-[30px] h-[30px] cursor-pointer", onClick: () => handleCancel(kpi.id) })
+                        /* @__PURE__ */ jsx41(IconX2, { className: "w-[30px] h-[30px] cursor-pointer", onClick: () => handleCancel(kpi.id) })
                       ]
                     }
                   )
-                ] }) : /* @__PURE__ */ jsxs31(Fragment6, { children: [
-                  /* @__PURE__ */ jsx39("p", { className: "body-1", children: kpi.name }),
-                  /* @__PURE__ */ jsx39("p", { className: "body-1", children: kpi.value }),
-                  /* @__PURE__ */ jsx39("p", { className: "body-1", children: kpi.unit }),
-                  /* @__PURE__ */ jsxs31("div", { className: "flex gap-3 justify-end", children: [
-                    /* @__PURE__ */ jsx39(IconPencil, { className: "w-[30px] h-[30px] cursor-pointer", onClick: () => handleEdit(kpi.id) }),
-                    /* @__PURE__ */ jsx39(IconTrash3, { className: "w-[30px] h-[30px] cursor-pointer", onClick: () => handleDelete(kpi.id) })
+                ] }) : /* @__PURE__ */ jsxs33(Fragment6, { children: [
+                  /* @__PURE__ */ jsx41("p", { className: "body-1", children: kpi.name }),
+                  /* @__PURE__ */ jsx41("p", { className: "body-1", children: kpi.value }),
+                  /* @__PURE__ */ jsx41("p", { className: "body-1", children: kpi.unit }),
+                  /* @__PURE__ */ jsxs33("div", { className: "flex gap-3 justify-end", children: [
+                    /* @__PURE__ */ jsx41(IconPencil, { className: "w-[30px] h-[30px] cursor-pointer", onClick: () => handleEdit(kpi.id) }),
+                    /* @__PURE__ */ jsx41(IconTrash3, { className: "w-[30px] h-[30px] cursor-pointer", onClick: () => handleDelete(kpi.id) })
                   ] })
                 ] })
               ]
@@ -3804,9 +3909,9 @@ function KpiSection({ type, onChangeKpiList }) {
             kpi.id
           )) })
         ] }),
-        type === "text" && /* @__PURE__ */ jsxs31("div", { className: "space-y-4", children: [
-          /* @__PURE__ */ jsxs31("div", { className: "grid grid-cols-[1fr_50px] w-full gap-[24px] items-start", children: [
-            /* @__PURE__ */ jsx39(
+        type === "text" && /* @__PURE__ */ jsxs33("div", { className: "space-y-4", children: [
+          /* @__PURE__ */ jsxs33("div", { className: "grid grid-cols-[1fr_50px] w-full gap-[24px] items-start", children: [
+            /* @__PURE__ */ jsx41(
               InputField,
               {
                 value: nameKpi,
@@ -3818,7 +3923,7 @@ function KpiSection({ type, onChangeKpiList }) {
                 error: errors.nameKpi
               }
             ),
-            /* @__PURE__ */ jsx39("div", { className: `flex justify-end mt-[28px]`, children: /* @__PURE__ */ jsx39(
+            /* @__PURE__ */ jsx41("div", { className: `flex justify-end mt-[28px]`, children: /* @__PURE__ */ jsx41(
               IconCirclePlus,
               {
                 className: "w-[40px] h-[40px] cursor-pointer hover:scale-110 transition",
@@ -3827,13 +3932,13 @@ function KpiSection({ type, onChangeKpiList }) {
               }
             ) })
           ] }),
-          /* @__PURE__ */ jsx39("div", { children: kpiList.map((kpi, index) => /* @__PURE__ */ jsxs31("div", { className: "grid grid-cols-[30px_1fr_80px] items-start py-2 body-1 gap-[8px]", children: [
-            /* @__PURE__ */ jsxs31("p", { className: `body-1 ${kpi.isEditing ? "mt-[12px]" : ""}`, children: [
+          /* @__PURE__ */ jsx41("div", { children: kpiList.map((kpi, index) => /* @__PURE__ */ jsxs33("div", { className: "grid grid-cols-[30px_1fr_80px] items-start py-2 body-1 gap-[8px]", children: [
+            /* @__PURE__ */ jsxs33("p", { className: `body-1 ${kpi.isEditing ? "mt-[12px]" : ""}`, children: [
               index + 1,
               "."
             ] }),
-            kpi.isEditing ? /* @__PURE__ */ jsxs31(Fragment6, { children: [
-              /* @__PURE__ */ jsx39(
+            kpi.isEditing ? /* @__PURE__ */ jsxs33(Fragment6, { children: [
+              /* @__PURE__ */ jsx41(
                 InputField,
                 {
                   value: kpi.name,
@@ -3843,27 +3948,27 @@ function KpiSection({ type, onChangeKpiList }) {
                   error: itemErrors[kpi.id]?.name
                 }
               ),
-              /* @__PURE__ */ jsxs31(
+              /* @__PURE__ */ jsxs33(
                 "div",
                 {
                   className: `flex gap-2 justify-end self-center ${!!itemErrors[kpi.id]?.name ? "mt-[-12px]" : ""}`,
                   children: [
-                    /* @__PURE__ */ jsx39(
+                    /* @__PURE__ */ jsx41(
                       IconCheck2,
                       {
                         className: "w-[30px] h-[30px] cursor-pointer",
                         onClick: () => handleSave(kpi.id, type)
                       }
                     ),
-                    /* @__PURE__ */ jsx39(IconX2, { className: "w-[30px] h-[30px] cursor-pointer", onClick: () => handleCancel(kpi.id) })
+                    /* @__PURE__ */ jsx41(IconX2, { className: "w-[30px] h-[30px] cursor-pointer", onClick: () => handleCancel(kpi.id) })
                   ]
                 }
               )
-            ] }) : /* @__PURE__ */ jsxs31(Fragment6, { children: [
-              /* @__PURE__ */ jsx39("p", { className: "body-1", children: kpi.name }),
-              /* @__PURE__ */ jsxs31("div", { className: "flex gap-3 justify-end", children: [
-                /* @__PURE__ */ jsx39(IconPencil, { className: "w-[30px] h-[30px] cursor-pointer", onClick: () => handleEdit(kpi.id) }),
-                /* @__PURE__ */ jsx39(IconTrash3, { className: "w-[30px] h-[30px] cursor-pointer", onClick: () => handleDelete(kpi.id) })
+            ] }) : /* @__PURE__ */ jsxs33(Fragment6, { children: [
+              /* @__PURE__ */ jsx41("p", { className: "body-1", children: kpi.name }),
+              /* @__PURE__ */ jsxs33("div", { className: "flex gap-3 justify-end", children: [
+                /* @__PURE__ */ jsx41(IconPencil, { className: "w-[30px] h-[30px] cursor-pointer", onClick: () => handleEdit(kpi.id) }),
+                /* @__PURE__ */ jsx41(IconTrash3, { className: "w-[30px] h-[30px] cursor-pointer", onClick: () => handleDelete(kpi.id) })
               ] })
             ] })
           ] }, kpi.id)) })
@@ -3875,16 +3980,16 @@ function KpiSection({ type, onChangeKpiList }) {
 
 // src/Modal/Modal/Modal.tsx
 import { Modal } from "antd";
-import { jsx as jsx40 } from "react/jsx-runtime";
+import { jsx as jsx42 } from "react/jsx-runtime";
 function AntDModal({ children, isOpen, width, onCancel }) {
-  return /* @__PURE__ */ jsx40("div", { children: /* @__PURE__ */ jsx40(Modal, { open: isOpen, onCancel, width, centered: true, footer: null, children: /* @__PURE__ */ jsx40("div", { children }) }) });
+  return /* @__PURE__ */ jsx42("div", { children: /* @__PURE__ */ jsx42(Modal, { open: isOpen, onCancel, width, centered: true, footer: null, children: /* @__PURE__ */ jsx42("div", { children }) }) });
 }
 
 // src/Indicator/Indicator/Indicator.tsx
 import { IconCheck as IconCheck3, IconCirclePlus as IconCirclePlus2, IconTrash as IconTrash4, IconX as IconX3 } from "@tabler/icons-react";
 import { useState as useState15 } from "react";
 import { Input as Input4 } from "antd";
-import { Fragment as Fragment7, jsx as jsx41, jsxs as jsxs32 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx43, jsxs as jsxs34 } from "react/jsx-runtime";
 function Indicator({
   option = [
     { value: "TEXT", label: "\u0E02\u0E49\u0E2D\u0E04\u0E27\u0E32\u0E21" },
@@ -4010,14 +4115,14 @@ function Indicator({
       [name]: value
     }));
   };
-  return /* @__PURE__ */ jsxs32("div", { className: "w-full", children: [
-    /* @__PURE__ */ jsxs32(
+  return /* @__PURE__ */ jsxs34("div", { className: "w-full", children: [
+    /* @__PURE__ */ jsxs34(
       "div",
       {
         className: `space-x-2 grid ${valueSwitch === "TEXT" ? `grid-cols-[140px_1fr_50px]` : `grid-cols-[140px_1fr_200px_200px_50px]`} items-start`,
         children: [
-          /* @__PURE__ */ jsx41(SwitchSelect, { option, onClick: handleClick, value: valueSwitch, label: "\u0E1B\u0E23\u0E30\u0E40\u0E20\u0E17", required: true }),
-          /* @__PURE__ */ jsx41(
+          /* @__PURE__ */ jsx43(SwitchSelect, { option, onClick: handleClick, value: valueSwitch, label: "\u0E1B\u0E23\u0E30\u0E40\u0E20\u0E17", required: true }),
+          /* @__PURE__ */ jsx43(
             InputField,
             {
               label: type === "TARGET" ? "\u0E0A\u0E37\u0E48\u0E2D\u0E01\u0E25\u0E38\u0E48\u0E21\u0E40\u0E1B\u0E49\u0E32\u0E2B\u0E21\u0E32\u0E22" : `\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"}`,
@@ -4032,8 +4137,8 @@ function Indicator({
               error: addError.textValue
             }
           ),
-          valueSwitch === "NUMBER" && /* @__PURE__ */ jsxs32(Fragment7, { children: [
-            /* @__PURE__ */ jsx41(
+          valueSwitch === "NUMBER" && /* @__PURE__ */ jsxs34(Fragment7, { children: [
+            /* @__PURE__ */ jsx43(
               InputFieldNumber,
               {
                 label: type === "TARGET" ? "\u0E04\u0E48\u0E32\u0E40\u0E1B\u0E49\u0E32\u0E2B\u0E21\u0E32\u0E22" : `\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"}`,
@@ -4049,7 +4154,7 @@ function Indicator({
                 error: addError.numberValue
               }
             ),
-            /* @__PURE__ */ jsx41(
+            /* @__PURE__ */ jsx43(
               InputField,
               {
                 label: `\u0E2B\u0E19\u0E48\u0E27\u0E22`,
@@ -4065,18 +4170,18 @@ function Indicator({
               }
             )
           ] }),
-          /* @__PURE__ */ jsx41(IconCirclePlus2, { onClick: handleAddIndicator, className: "mt-8 cursor-pointer", size: 32 })
+          /* @__PURE__ */ jsx43(IconCirclePlus2, { onClick: handleAddIndicator, className: "mt-8 cursor-pointer", size: 32 })
         ]
       }
     ),
-    /* @__PURE__ */ jsx41(Fragment7, { children: arrayData.map((item, index) => /* @__PURE__ */ jsxs32(
+    /* @__PURE__ */ jsx43(Fragment7, { children: arrayData.map((item, index) => /* @__PURE__ */ jsxs34(
       "div",
       {
         className: `space-y-2 grid ${item.inputType === "TEXT" ? `grid-cols-[140px_1fr_50px_50px]` : `grid-cols-[140px_1fr_200px_150px_50px_50px]`} items-start`,
         children: [
-          /* @__PURE__ */ jsx41("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__ */ jsxs32("div", { className: "flex flex-col gap-[8px]", children: [
-            /* @__PURE__ */ jsx41(
+          /* @__PURE__ */ jsx43("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__ */ jsxs34("div", { className: "flex flex-col gap-[8px]", children: [
+            /* @__PURE__ */ jsx43(
               Input4,
               {
                 className: "body-1 mt-2",
@@ -4089,11 +4194,11 @@ function Indicator({
                 }
               }
             ),
-            editError.textValue && /* @__PURE__ */ jsx41("p", { className: "text-red-500 caption-1", children: editError.textValue })
-          ] }) : /* @__PURE__ */ jsx41("div", { className: "body-1 mt-2", children: item.textValue }),
-          item.inputType === "NUMBER" && /* @__PURE__ */ jsxs32(Fragment7, { children: [
-            index === editIndex ? /* @__PURE__ */ jsxs32("div", { className: "flex flex-col gap-[8px]", children: [
-              /* @__PURE__ */ jsx41(
+            editError.textValue && /* @__PURE__ */ jsx43("p", { className: "text-red-500 caption-1", children: editError.textValue })
+          ] }) : /* @__PURE__ */ jsx43("div", { className: "body-1 mt-2", children: item.textValue }),
+          item.inputType === "NUMBER" && /* @__PURE__ */ jsxs34(Fragment7, { children: [
+            index === editIndex ? /* @__PURE__ */ jsxs34("div", { className: "flex flex-col gap-[8px]", children: [
+              /* @__PURE__ */ jsx43(
                 Input4,
                 {
                   type: "number",
@@ -4107,10 +4212,10 @@ function Indicator({
                   }
                 }
               ),
-              editError.numberValue && /* @__PURE__ */ jsx41("p", { className: "text-red-500 caption-1", children: editError.numberValue })
-            ] }) : /* @__PURE__ */ jsx41("div", { className: "body-1 mt-2", children: item.numberValue }),
-            index === editIndex ? /* @__PURE__ */ jsxs32("div", { className: "flex flex-col gap-[8px]", children: [
-              /* @__PURE__ */ jsx41(
+              editError.numberValue && /* @__PURE__ */ jsx43("p", { className: "text-red-500 caption-1", children: editError.numberValue })
+            ] }) : /* @__PURE__ */ jsx43("div", { className: "body-1 mt-2", children: item.numberValue }),
+            index === editIndex ? /* @__PURE__ */ jsxs34("div", { className: "flex flex-col gap-[8px]", children: [
+              /* @__PURE__ */ jsx43(
                 Input4,
                 {
                   className: "body-1 mt-2",
@@ -4123,20 +4228,20 @@ function Indicator({
                   }
                 }
               ),
-              editError.unit && /* @__PURE__ */ jsx41("p", { className: "text-red-500 caption-1", children: editError.unit })
-            ] }) : /* @__PURE__ */ jsx41("div", { className: "body-1 mt-2", children: item.unit })
+              editError.unit && /* @__PURE__ */ jsx43("p", { className: "text-red-500 caption-1", children: editError.unit })
+            ] }) : /* @__PURE__ */ jsx43("div", { className: "body-1 mt-2", children: item.unit })
           ] }),
-          /* @__PURE__ */ jsx41("div", { className: "body-1 mt-2 flex", children: editIndex !== null ? editIndex === index ? /* @__PURE__ */ jsxs32("div", { className: "flex", children: [
-            /* @__PURE__ */ jsx41(
+          /* @__PURE__ */ jsx43("div", { className: "body-1 mt-2 flex", children: editIndex !== null ? editIndex === index ? /* @__PURE__ */ jsxs34("div", { className: "flex", children: [
+            /* @__PURE__ */ jsx43(
               IconCheck3,
               {
                 className: "cursor-pointer text-green-600",
                 onClick: () => handleConfirmEditIndicator(index)
               }
             ),
-            /* @__PURE__ */ jsx41(IconX3, { className: "cursor-pointer text-red-600", onClick: handleCancelEditIndicator })
+            /* @__PURE__ */ jsx43(IconX3, { className: "cursor-pointer text-red-600", onClick: handleCancelEditIndicator })
           ] }) : void 0 : false }),
-          /* @__PURE__ */ jsx41("div", { className: "body-1 mt-2 cursor-pointer", children: /* @__PURE__ */ jsx41(
+          /* @__PURE__ */ jsx43("div", { className: "body-1 mt-2 cursor-pointer", children: /* @__PURE__ */ jsx43(
             IconTrash4,
             {
               onClick: () => {
@@ -4159,7 +4264,7 @@ function Indicator({
 // src/FilterPopUp/FilterPopUp.tsx
 import { IconCheck as IconCheck4, IconFilter as IconFilter2, IconTrash as IconTrash5 } from "@tabler/icons-react";
 import { useState as useState16 } from "react";
-import { jsx as jsx42, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs35 } from "react/jsx-runtime";
 var FilterPopUp = (filter) => {
   const [isAction, setIsAction] = useState16(true);
   const [filterArray, setFilterArray] = useState16([""]);
@@ -4169,20 +4274,20 @@ var FilterPopUp = (filter) => {
   const handleSubmitFilter = () => {
     filter.handleSearch(filterArray);
   };
-  return /* @__PURE__ */ jsxs33("div", { className: "relative", children: [
-    /* @__PURE__ */ jsxs33("button", { className: "flex px-2 py-1 rounded-lg border-1", onClick: () => setIsAction(!isAction), children: [
-      /* @__PURE__ */ jsx42(IconFilter2, {}),
+  return /* @__PURE__ */ jsxs35("div", { className: "relative", children: [
+    /* @__PURE__ */ jsxs35("button", { className: "flex px-2 py-1 rounded-lg border-1", onClick: () => setIsAction(!isAction), children: [
+      /* @__PURE__ */ jsx44(IconFilter2, {}),
       "filter"
     ] }),
-    isAction ? /* @__PURE__ */ jsxs33("div", { className: "absolute bg-white p-5 rounded-lg shadow-2xl w-[600px]", children: [
-      /* @__PURE__ */ jsxs33("div", { className: "flex justify-end", children: [
-        /* @__PURE__ */ jsxs33("div", { className: "flex justify-end text-nowrap gap-2", children: [
-          /* @__PURE__ */ jsx42(GhostButton, { title: "\u0E43\u0E0A\u0E49\u0E1F\u0E34\u0E25\u0E40\u0E15\u0E2D\u0E23\u0E4C", onClick: handleSubmitFilter, iconLeft: /* @__PURE__ */ jsx42(IconCheck4, {}) }),
-          /* @__PURE__ */ jsx42(GhostButton, { title: "\u0E25\u0E49\u0E32\u0E07\u0E17\u0E31\u0E49\u0E07\u0E2B\u0E21\u0E14", onClick: handleClearFilter, iconLeft: /* @__PURE__ */ jsx42(IconTrash5, {}) })
+    isAction ? /* @__PURE__ */ jsxs35("div", { className: "absolute bg-white p-5 rounded-lg shadow-2xl w-[600px]", children: [
+      /* @__PURE__ */ jsxs35("div", { className: "flex justify-end", children: [
+        /* @__PURE__ */ jsxs35("div", { className: "flex justify-end text-nowrap gap-2", children: [
+          /* @__PURE__ */ jsx44(GhostButton, { title: "\u0E43\u0E0A\u0E49\u0E1F\u0E34\u0E25\u0E40\u0E15\u0E2D\u0E23\u0E4C", onClick: handleSubmitFilter, iconLeft: /* @__PURE__ */ jsx44(IconCheck4, {}) }),
+          /* @__PURE__ */ jsx44(GhostButton, { title: "\u0E25\u0E49\u0E32\u0E07\u0E17\u0E31\u0E49\u0E07\u0E2B\u0E21\u0E14", onClick: handleClearFilter, iconLeft: /* @__PURE__ */ jsx44(IconTrash5, {}) })
         ] }),
         ""
       ] }),
-      /* @__PURE__ */ jsx42(
+      /* @__PURE__ */ jsx44(
         SelectCustom,
         {
           options: filter.selectionFilter,
@@ -4198,7 +4303,7 @@ var FilterPopUp = (filter) => {
 import { useEffect as useEffect7, useRef as useRef6, useState as useState17 } from "react";
 import { IconSearch, IconUsers, IconX as IconX4 } from "@tabler/icons-react";
 import { Input as Input5 } from "antd";
-import { Fragment as Fragment8, jsx as jsx43, jsxs as jsxs34 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx45, jsxs as jsxs36 } from "react/jsx-runtime";
 function ProfileSelect({
   allUser,
   assignUser,
@@ -4258,22 +4363,22 @@ function ProfileSelect({
   const isSearching = normalizedSearch.length > 0;
   const noResult = filteredAssigned.length === 0 && filteredUnassigned.length === 0;
   const noUserOption = allUser.length === 0 && !isSearching;
-  return /* @__PURE__ */ jsxs34("div", { ref: containerRef, className: "relative body-1", children: [
-    mode === "icon" ? /* @__PURE__ */ jsx43("div", { children: /* @__PURE__ */ jsx43(
+  return /* @__PURE__ */ jsxs36("div", { ref: containerRef, className: "relative body-1", children: [
+    mode === "icon" ? /* @__PURE__ */ jsx45("div", { children: /* @__PURE__ */ jsx45(
       IconUsers,
       {
         size: 40,
         className: "p-2 border rounded cursor-pointer bg-white",
         onClick: () => setIsShowSelect(!isShowSelect)
       }
-    ) }) : mode === "showAssign" ? /* @__PURE__ */ jsx43(
+    ) }) : mode === "showAssign" ? /* @__PURE__ */ jsx45(
       "div",
       {
         className: `w-full h-[40px] flex items-center p-2 cursor-pointer ${className}`,
         onClick: () => setIsShowSelect(!isShowSelect),
-        children: visibleUsers.length === 0 ? placeholder ? /* @__PURE__ */ jsx43("span", { className: "body-1 text-gray-400 select-none", children: placeholder }) : null : /* @__PURE__ */ jsxs34(Fragment8, { children: [
-          /* @__PURE__ */ jsx43("div", { className: "flex -space-x-2", children: visibleUsers.map((user) => /* @__PURE__ */ jsx43("div", { className: "flex items-center", children: /* @__PURE__ */ jsxs34("label", { className: "relative group cursor-pointer", children: [
-            /* @__PURE__ */ jsx43(
+        children: visibleUsers.length === 0 ? placeholder ? /* @__PURE__ */ jsx45("span", { className: "body-1 text-gray-400 select-none", children: placeholder }) : null : /* @__PURE__ */ jsxs36(Fragment8, { children: [
+          /* @__PURE__ */ jsx45("div", { className: "flex -space-x-2", children: visibleUsers.map((user) => /* @__PURE__ */ jsx45("div", { className: "flex items-center", children: /* @__PURE__ */ jsxs36("label", { className: "relative group cursor-pointer", children: [
+            /* @__PURE__ */ jsx45(
               "img",
               {
                 src: user.profile,
@@ -4286,7 +4391,7 @@ function ProfileSelect({
                 className: "border border-white group-hover:border-3 group-hover:border-red-500 transition"
               }
             ),
-            /* @__PURE__ */ jsx43(
+            /* @__PURE__ */ jsx45(
               "span",
               {
                 className: "absolute top-0 right-0 -translate-y-2 translate-x-2 \r\n                  rounded-full bg-white opacity-0 group-hover:opacity-100 \r\n                  border-3 z-10 border-red-500 flex items-center justify-center transition",
@@ -4294,11 +4399,11 @@ function ProfileSelect({
                   e.stopPropagation();
                   onUpdateAssignUser(user, "remove");
                 },
-                children: /* @__PURE__ */ jsx43(IconX4, { className: "w-4 h-4 text-red-500" })
+                children: /* @__PURE__ */ jsx45(IconX4, { className: "w-4 h-4 text-red-500" })
               }
             )
           ] }) }, user.id)) }),
-          showPlus && /* @__PURE__ */ jsxs34(
+          showPlus && /* @__PURE__ */ jsxs36(
             "div",
             {
               className: "border border-white flex items-center justify-center bg-gray-300 text-black text-sm ml-2",
@@ -4315,8 +4420,8 @@ function ProfileSelect({
           )
         ] })
       }
-    ) : /* @__PURE__ */ jsxs34("div", { className: `w-full h-[40px] flex -space-x-2 p-2 ${className}`, children: [
-      visibleUsers.map((user) => /* @__PURE__ */ jsx43("div", { className: "flex items-center ", children: /* @__PURE__ */ jsx43("label", { className: "relative group ", children: /* @__PURE__ */ jsx43(
+    ) : /* @__PURE__ */ jsxs36("div", { className: `w-full h-[40px] flex -space-x-2 p-2 ${className}`, children: [
+      visibleUsers.map((user) => /* @__PURE__ */ jsx45("div", { className: "flex items-center ", children: /* @__PURE__ */ jsx45("label", { className: "relative group ", children: /* @__PURE__ */ jsx45(
         "img",
         {
           src: user.profile,
@@ -4329,7 +4434,7 @@ function ProfileSelect({
           className: "border border-white transition"
         }
       ) }) }, user.id)),
-      showPlus && /* @__PURE__ */ jsxs34(
+      showPlus && /* @__PURE__ */ jsxs36(
         "div",
         {
           className: "border border-white flex items-center justify-center bg-gray-300 text-black text-sm",
@@ -4345,15 +4450,15 @@ function ProfileSelect({
         }
       )
     ] }),
-    isShowSelect ? /* @__PURE__ */ jsxs34(
+    isShowSelect ? /* @__PURE__ */ jsxs36(
       "div",
       {
         className: "absolute top-12 min-w-[261px] max-w-[400px] w-full h-[314px] p-2 text-xs border-1 rounded-sm z-20 bg-white",
         ref: selectRef,
         children: [
-          /* @__PURE__ */ jsxs34("div", { className: "flex border-1 rounded-md p-2 gap-2 items-center", children: [
-            /* @__PURE__ */ jsx43(IconSearch, {}),
-            /* @__PURE__ */ jsx43(
+          /* @__PURE__ */ jsxs36("div", { className: "flex border-1 rounded-md p-2 gap-2 items-center", children: [
+            /* @__PURE__ */ jsx45(IconSearch, {}),
+            /* @__PURE__ */ jsx45(
               Input5,
               {
                 variant: "borderless",
@@ -4364,16 +4469,16 @@ function ProfileSelect({
               }
             )
           ] }),
-          /* @__PURE__ */ jsx43("div", { className: "overflow-y-auto h-[250px] pt-2 px-4 body-3", children: noUserOption ? /* @__PURE__ */ jsx43("div", { className: "flex items-center justify-center h-full text-gray-400 select-none", children: "\u0E22\u0E31\u0E07\u0E44\u0E21\u0E48\u0E21\u0E35\u0E1C\u0E39\u0E49\u0E04\u0E19\u0E43\u0E2B\u0E49\u0E40\u0E25\u0E37\u0E2D\u0E01" }) : isSearching && noResult ? /* @__PURE__ */ jsx43("div", { className: "flex items-center justify-center h-full text-gray-400 select-none", children: "\u0E44\u0E21\u0E48\u0E1E\u0E1A\u0E1C\u0E39\u0E49\u0E04\u0E19\u0E17\u0E35\u0E48\u0E15\u0E23\u0E07\u0E01\u0E31\u0E1A\u0E01\u0E32\u0E23\u0E04\u0E49\u0E19\u0E2B\u0E32" }) : /* @__PURE__ */ jsxs34(Fragment8, { children: [
-            filteredAssigned.length > 0 && /* @__PURE__ */ jsxs34(Fragment8, { children: [
-              /* @__PURE__ */ jsx43("div", { className: "mb-1", children: "\u0E2A\u0E21\u0E32\u0E0A\u0E34\u0E01\u0E17\u0E35\u0E48\u0E40\u0E25\u0E37\u0E2D\u0E01" }),
-              filteredAssigned.map((user) => /* @__PURE__ */ jsxs34(
+          /* @__PURE__ */ jsx45("div", { className: "overflow-y-auto h-[250px] pt-2 px-4 body-3", children: noUserOption ? /* @__PURE__ */ jsx45("div", { className: "flex items-center justify-center h-full text-gray-400 select-none", children: "\u0E22\u0E31\u0E07\u0E44\u0E21\u0E48\u0E21\u0E35\u0E1C\u0E39\u0E49\u0E04\u0E19\u0E43\u0E2B\u0E49\u0E40\u0E25\u0E37\u0E2D\u0E01" }) : isSearching && noResult ? /* @__PURE__ */ jsx45("div", { className: "flex items-center justify-center h-full text-gray-400 select-none", children: "\u0E44\u0E21\u0E48\u0E1E\u0E1A\u0E1C\u0E39\u0E49\u0E04\u0E19\u0E17\u0E35\u0E48\u0E15\u0E23\u0E07\u0E01\u0E31\u0E1A\u0E01\u0E32\u0E23\u0E04\u0E49\u0E19\u0E2B\u0E32" }) : /* @__PURE__ */ jsxs36(Fragment8, { children: [
+            filteredAssigned.length > 0 && /* @__PURE__ */ jsxs36(Fragment8, { children: [
+              /* @__PURE__ */ jsx45("div", { className: "mb-1", children: "\u0E2A\u0E21\u0E32\u0E0A\u0E34\u0E01\u0E17\u0E35\u0E48\u0E40\u0E25\u0E37\u0E2D\u0E01" }),
+              filteredAssigned.map((user) => /* @__PURE__ */ jsxs36(
                 "button",
                 {
                   className: "flex items-center group my-1 w-full p-1 rounded hover:bg-gray-100",
                   children: [
-                    /* @__PURE__ */ jsxs34("div", { className: "relative cursor-pointer", children: [
-                      /* @__PURE__ */ jsx43(
+                    /* @__PURE__ */ jsxs36("div", { className: "relative cursor-pointer", children: [
+                      /* @__PURE__ */ jsx45(
                         "img",
                         {
                           src: user.profile,
@@ -4386,30 +4491,30 @@ function ProfileSelect({
                           className: "border-3 border-red-500"
                         }
                       ),
-                      /* @__PURE__ */ jsx43(
+                      /* @__PURE__ */ jsx45(
                         "span",
                         {
                           className: "absolute top-0 right-0 -translate-y-2 translate-x-2 \r\n                  rounded-full bg-white opacity-0 group-hover:opacity-100 \r\n                  border-3 border-red-500 flex items-center justify-center transition",
                           onClick: () => onUpdateAssignUser(user, "remove"),
-                          children: /* @__PURE__ */ jsx43(IconX4, { className: "text-red-500", size: 15 })
+                          children: /* @__PURE__ */ jsx45(IconX4, { className: "text-red-500", size: 15 })
                         }
                       )
                     ] }),
-                    /* @__PURE__ */ jsx43("span", { className: "ml-2", children: user.name })
+                    /* @__PURE__ */ jsx45("span", { className: "ml-2", children: user.name })
                   ]
                 },
                 user.id
               ))
             ] }),
-            filteredUnassigned.length > 0 && /* @__PURE__ */ jsxs34(Fragment8, { children: [
-              /* @__PURE__ */ jsx43("div", { className: "mt-2", children: "\u0E1C\u0E39\u0E49\u0E04\u0E19" }),
-              filteredUnassigned.map((user) => /* @__PURE__ */ jsxs34(
+            filteredUnassigned.length > 0 && /* @__PURE__ */ jsxs36(Fragment8, { children: [
+              /* @__PURE__ */ jsx45("div", { className: "mt-2", children: "\u0E1C\u0E39\u0E49\u0E04\u0E19" }),
+              filteredUnassigned.map((user) => /* @__PURE__ */ jsxs36(
                 "button",
                 {
                   className: "flex items-center my-1 hover:bg-gray-100 w-full p-1 rounded",
                   onClick: () => onUpdateAssignUser(user),
                   children: [
-                    /* @__PURE__ */ jsx43(
+                    /* @__PURE__ */ jsx45(
                       "img",
                       {
                         src: user.profile,
@@ -4422,7 +4527,7 @@ function ProfileSelect({
                         className: "border"
                       }
                     ),
-                    /* @__PURE__ */ jsx43("span", { className: "ml-2", children: user.name })
+                    /* @__PURE__ */ jsx45("span", { className: "ml-2", children: user.name })
                   ]
                 },
                 user.id
@@ -4438,7 +4543,7 @@ function ProfileSelect({
 // src/Button/QRCode/QRCode.tsx
 import { useEffect as useEffect8, useRef as useRef7, useState as useState18 } from "react";
 import QRCode from "qrcode";
-import { jsx as jsx44, jsxs as jsxs35 } from "react/jsx-runtime";
+import { jsx as jsx46, jsxs as jsxs37 } from "react/jsx-runtime";
 var QRCodeGenerator = ({
   url,
   previewSize = 200,
@@ -4451,31 +4556,31 @@ var QRCodeGenerator = ({
   const sizeOption = [
     {
       label: "64 x 64",
-      value: "64"
+      value: 64
     },
     {
       label: "128 x 128",
-      value: "128"
+      value: 128
     },
     {
       label: "256 x 256",
-      value: "256"
+      value: 256
     },
     {
       label: "512 x 512",
-      value: "512"
+      value: 512
     },
     {
       label: "1024 x 1024",
-      value: "1024"
+      value: 1024
     },
     {
       label: "2048 x 2048",
-      value: "2048"
+      value: 2048
     },
     {
       label: "4096 x 4096",
-      value: "4096"
+      value: 4096
     }
   ];
   const typeOption = [
@@ -4494,9 +4599,14 @@ var QRCodeGenerator = ({
   ];
   useEffect8(() => {
     if (!canvasRef.current) return;
-    QRCode.toCanvas(canvasRef.current, url, { width: previewSize, margin: 1 }, (error) => {
-      if (error) console.error(error);
-    });
+    QRCode.toCanvas(
+      canvasRef.current,
+      url,
+      { width: previewSize, margin: 1 },
+      (error) => {
+        if (error) console.error(error);
+      }
+    );
   }, [url, previewSize]);
   const download = async () => {
     try {
@@ -4533,52 +4643,73 @@ var QRCodeGenerator = ({
     a.click();
     a.remove();
   };
-  return /* @__PURE__ */ jsxs35("div", { style: { display: "inline-flex", flexDirection: "column", gap: 8 }, className: "justify-center items-center", children: [
-    url === "" ? /* @__PURE__ */ jsx44("div", { className: "border-1 p-2 mb-2", style: { width: `${previewSize}px`, height: `${previewSize}px` } }) : /* @__PURE__ */ jsx44("canvas", { ref: canvasRef, className: "border-1 p-2 mb-2" }),
-    /* @__PURE__ */ jsxs35(
-      "div",
-      {
-        style: {
-          display: "flex",
-          gap: 8,
-          alignItems: "center",
-          flexWrap: "wrap"
-        },
-        className: "flex-col",
-        children: [
-          /* @__PURE__ */ jsxs35("div", { className: "flex gap-2 mx-2", children: [
-            /* @__PURE__ */ jsx44("label", { className: "border-1 p-2 rounded-md flex flex-col w-1/2 text-sm text-gray-400", children: /* @__PURE__ */ jsx44(
-              SelectField,
-              {
-                label: "\u0E23\u0E39\u0E1B\u0E41\u0E1A\u0E1A",
-                value: format5,
-                onChange: (e) => setFormat(e.target.value),
-                options: typeOption
-              }
-            ) }),
-            /* @__PURE__ */ jsx44("label", { className: "border-1 p-2 rounded-md flex flex-col w-1/2 text-sm text-gray-400", children: /* @__PURE__ */ jsx44(
-              SelectField,
-              {
-                label: "\u0E02\u0E19\u0E32\u0E14 (px)",
-                value: exportSize,
-                onChange: (e) => setExportSize(Number(e.target.value)),
-                options: sizeOption
-              }
-            ) })
-          ] }),
-          /* @__PURE__ */ jsx44(PrimaryButton, { onClick: download, disabled: url === "", textColor: "white", title: "\u0E14\u0E32\u0E27\u0E42\u0E2B\u0E25\u0E14\u0E23\u0E2B\u0E31\u0E2A QR" })
-        ]
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsxs37(
+    "div",
+    {
+      style: { display: "inline-flex", flexDirection: "column", gap: 8 },
+      className: "justify-center items-center",
+      children: [
+        url === "" ? /* @__PURE__ */ jsx46(
+          "div",
+          {
+            className: "border-1 p-2 mb-2",
+            style: { width: `${previewSize}px`, height: `${previewSize}px` }
+          }
+        ) : /* @__PURE__ */ jsx46("canvas", { ref: canvasRef, className: "border-1 p-2 mb-2" }),
+        /* @__PURE__ */ jsxs37(
+          "div",
+          {
+            style: {
+              display: "flex",
+              gap: 8,
+              alignItems: "center",
+              flexWrap: "wrap"
+            },
+            className: "flex-col",
+            children: [
+              /* @__PURE__ */ jsxs37("div", { className: "flex gap-2 mx-2", children: [
+                /* @__PURE__ */ jsx46("label", { className: "border-1 p-2 rounded-md flex flex-col w-1/2 text-sm text-gray-400", children: /* @__PURE__ */ jsx46(
+                  SelectField,
+                  {
+                    label: "\u0E23\u0E39\u0E1B\u0E41\u0E1A\u0E1A",
+                    value: format5,
+                    onChange: (value) => setFormat(value),
+                    options: typeOption
+                  }
+                ) }),
+                /* @__PURE__ */ jsx46("label", { className: "border-1 p-2 rounded-md flex flex-col w-1/2 text-sm text-gray-400", children: /* @__PURE__ */ jsx46(
+                  SelectField,
+                  {
+                    label: "\u0E02\u0E19\u0E32\u0E14 (px)",
+                    value: exportSize,
+                    onChange: (value) => setExportSize(Number(value)),
+                    options: sizeOption
+                  }
+                ) })
+              ] }),
+              /* @__PURE__ */ jsx46(
+                PrimaryButton,
+                {
+                  onClick: download,
+                  disabled: url === "",
+                  textColor: "white",
+                  title: "\u0E14\u0E32\u0E27\u0E42\u0E2B\u0E25\u0E14\u0E23\u0E2B\u0E31\u0E2A QR"
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
 };
 
 // src/TabPropject/TabProject/TabProject.tsx
-import { ConfigProvider as ConfigProvider21, Tabs } from "antd";
-import { jsx as jsx45, jsxs as jsxs36 } from "react/jsx-runtime";
+import { ConfigProvider as ConfigProvider23, Tabs } from "antd";
+import { jsx as jsx47, jsxs as jsxs38 } from "react/jsx-runtime";
 function TabProject({ tabOption, now, onChange }) {
-  return /* @__PURE__ */ jsx45(
-    ConfigProvider21,
+  return /* @__PURE__ */ jsx47(
+    ConfigProvider23,
     {
       theme: {
         token: {
@@ -4594,16 +4725,16 @@ function TabProject({ tabOption, now, onChange }) {
           }
         }
       },
-      children: /* @__PURE__ */ jsx45(
+      children: /* @__PURE__ */ jsx47(
         Tabs,
         {
           activeKey: now,
           onChange,
           items: tabOption.map((item) => ({
             key: item.key,
-            label: /* @__PURE__ */ jsxs36("span", { className: "tab-label flex gap-2 items-center body-1", children: [
+            label: /* @__PURE__ */ jsxs38("span", { className: "tab-label flex gap-2 items-center body-1", children: [
               item.icon,
-              /* @__PURE__ */ jsx45("span", { children: item.label })
+              /* @__PURE__ */ jsx47("span", { children: item.label })
             ] })
           }))
         }
@@ -4615,7 +4746,7 @@ function TabProject({ tabOption, now, onChange }) {
 // src/Chart/BarChart/BarChart.tsx
 import { useEffect as useEffect9, useMemo as useMemo2, useRef as useRef8 } from "react";
 import * as d3 from "d3";
-import { jsx as jsx46, jsxs as jsxs37 } from "react/jsx-runtime";
+import { jsx as jsx48, jsxs as jsxs39 } from "react/jsx-runtime";
 var defaultMargin = { top: 30, right: 200, bottom: 36, left: 50 };
 var defaultColorPalette = [
   "#4E79A7",
@@ -4797,7 +4928,7 @@ var BarChart = ({
   useEffect9(() => {
     render();
   }, [data, height, margin, modeLabel, xDomain.toString(), yDomain.toString()]);
-  return /* @__PURE__ */ jsx46("div", { ref: containerRef, style: { width: "100%" }, children: /* @__PURE__ */ jsxs37(
+  return /* @__PURE__ */ jsx48("div", { ref: containerRef, style: { width: "100%" }, children: /* @__PURE__ */ jsxs39(
     "svg",
     {
       ref: svgRef,
@@ -4805,10 +4936,10 @@ var BarChart = ({
       "aria-label": "Bar chart",
       style: { display: "block", width: "100%", height },
       children: [
-        /* @__PURE__ */ jsx46("title", { children: "Bar chart" }),
-        /* @__PURE__ */ jsx46("g", { ref: gRef, transform: `translate(${margin.left},${margin.top})` }),
-        /* @__PURE__ */ jsx46("g", { ref: xAxisRef }),
-        /* @__PURE__ */ jsx46("g", { ref: yAxisRef })
+        /* @__PURE__ */ jsx48("title", { children: "Bar chart" }),
+        /* @__PURE__ */ jsx48("g", { ref: gRef, transform: `translate(${margin.left},${margin.top})` }),
+        /* @__PURE__ */ jsx48("g", { ref: xAxisRef }),
+        /* @__PURE__ */ jsx48("g", { ref: yAxisRef })
       ]
     }
   ) });
@@ -4817,7 +4948,7 @@ var BarChart = ({
 // src/Chart/PieChart/PieChart.tsx
 import React3, { useRef as useRef9, useEffect as useEffect10 } from "react";
 import * as d32 from "d3";
-import { jsx as jsx47, jsxs as jsxs38 } from "react/jsx-runtime";
+import { jsx as jsx49, jsxs as jsxs40 } from "react/jsx-runtime";
 var defaultColors = d32.schemeCategory10;
 var PieChart = ({
   title,
@@ -4851,15 +4982,15 @@ var PieChart = ({
       return `${percentage}%`;
     });
   }, [data, width, height]);
-  return /* @__PURE__ */ jsxs38("div", { children: [
-    title && /* @__PURE__ */ jsx47("p", { className: "body-2", children: title }),
-    description && /* @__PURE__ */ jsx47("p", { className: "caption-1", children: description }),
-    /* @__PURE__ */ jsxs38("div", { className: "flex", children: [
-      /* @__PURE__ */ jsx47("svg", { ref: svgRef }),
-      /* @__PURE__ */ jsx47("div", { className: "flex flex-col gap-2 body-3 pl-[200px]", children: dataSide.map((d, i) => /* @__PURE__ */ jsxs38("div", { className: "grid grid-cols-3 gap-2 items-center body-2", children: [
-        /* @__PURE__ */ jsx47("div", { className: "w-[20px] h-[20px]", style: { backgroundColor: d.color } }),
-        /* @__PURE__ */ jsx47("div", { children: d.label }),
-        /* @__PURE__ */ jsx47("div", { children: d.value })
+  return /* @__PURE__ */ jsxs40("div", { children: [
+    title && /* @__PURE__ */ jsx49("p", { className: "body-2", children: title }),
+    description && /* @__PURE__ */ jsx49("p", { className: "caption-1", children: description }),
+    /* @__PURE__ */ jsxs40("div", { className: "flex", children: [
+      /* @__PURE__ */ jsx49("svg", { ref: svgRef }),
+      /* @__PURE__ */ jsx49("div", { className: "flex flex-col gap-2 body-3 pl-[200px]", children: dataSide.map((d, i) => /* @__PURE__ */ jsxs40("div", { className: "grid grid-cols-3 gap-2 items-center body-2", children: [
+        /* @__PURE__ */ jsx49("div", { className: "w-[20px] h-[20px]", style: { backgroundColor: d.color } }),
+        /* @__PURE__ */ jsx49("div", { children: d.label }),
+        /* @__PURE__ */ jsx49("div", { children: d.value })
       ] }, i)) })
     ] })
   ] });
@@ -4885,7 +5016,7 @@ import {
   IconHourglassEmpty,
   IconRosetteDiscountCheck
 } from "@tabler/icons-react";
-import { jsx as jsx48, jsxs as jsxs39 } from "react/jsx-runtime";
+import { jsx as jsx50, jsxs as jsxs41 } from "react/jsx-runtime";
 var LAYOUT = {
   barHeight: 40,
   barSpacing: 10,
@@ -4905,27 +5036,27 @@ var STATUS_META = {
   IN_PROGRESS: {
     color: "#FFC654",
     label: "\u0E01\u0E33\u0E25\u0E31\u0E07\u0E14\u0E33\u0E40\u0E19\u0E34\u0E19\u0E01\u0E32\u0E23",
-    icon: /* @__PURE__ */ jsx48(IconHourglassEmpty, { className: "text-[#FFC654]" })
+    icon: /* @__PURE__ */ jsx50(IconHourglassEmpty, { className: "text-[#FFC654]" })
   },
   CANCELLED: {
     color: "#D2D5DB",
     label: "\u0E22\u0E01\u0E40\u0E25\u0E34\u0E01",
-    icon: /* @__PURE__ */ jsx48(IconCircleX, { className: "text-[#D2D5DB]" })
+    icon: /* @__PURE__ */ jsx50(IconCircleX, { className: "text-[#D2D5DB]" })
   },
   SUCCESS: {
     color: "#81CF92",
     label: "\u0E14\u0E33\u0E40\u0E19\u0E34\u0E19\u0E01\u0E32\u0E23\u0E41\u0E25\u0E49\u0E27\u0E40\u0E2A\u0E23\u0E47\u0E08",
-    icon: /* @__PURE__ */ jsx48(IconRosetteDiscountCheck, { className: "text-[#81CF92]" })
+    icon: /* @__PURE__ */ jsx50(IconRosetteDiscountCheck, { className: "text-[#81CF92]" })
   },
   COMPLETED: {
     color: "#81CF92",
     label: "\u0E40\u0E2A\u0E23\u0E47\u0E08\u0E2A\u0E34\u0E49\u0E19",
-    icon: /* @__PURE__ */ jsx48(IconRosetteDiscountCheck, { className: "text-[#81CF92]" })
+    icon: /* @__PURE__ */ jsx50(IconRosetteDiscountCheck, { className: "text-[#81CF92]" })
   },
   DELAY: {
     color: "#F4827E",
     label: "\u0E25\u0E48\u0E32\u0E0A\u0E49\u0E32",
-    icon: /* @__PURE__ */ jsx48(IconClockExclamation, { className: "text-[#F4827E]" })
+    icon: /* @__PURE__ */ jsx50(IconClockExclamation, { className: "text-[#F4827E]" })
   }
 };
 var roundedRectPath = (x, y, width, height, radius) => `M${x + radius},${y} H${x + width} V${y + height} H${x + radius} A${radius},${radius},0,0,1,${x},${y + height - radius} V${y + radius} A${radius},${radius},0,0,1,${x + radius},${y}`;
@@ -4968,7 +5099,7 @@ var ProjectRow = ({ element, barHeight, barSpacing, mode }) => {
   const statusLabel = getStatusLabel(safeStatus);
   const statusIcon = STATUS_META[safeStatus]?.icon;
   const toBuddhistDate = (d) => new Date(d.getFullYear() + 543, d.getMonth(), d.getDate());
-  return /* @__PURE__ */ jsxs39(
+  return /* @__PURE__ */ jsxs41(
     "div",
     {
       style: {
@@ -4979,8 +5110,8 @@ var ProjectRow = ({ element, barHeight, barSpacing, mode }) => {
       },
       className: "body-1 grid grid-cols-[1fr_100px_130px] px-8 gap-2",
       children: [
-        /* @__PURE__ */ jsxs39("div", { className: `grid ${mode === "project" ? "grid-cols-[10px_1fr]" : "grid-cols-[1fr]"} items-center gap-2`, children: [
-          mode === "project" && /* @__PURE__ */ jsx48(
+        /* @__PURE__ */ jsxs41("div", { className: `grid ${mode === "project" ? "grid-cols-[10px_1fr]" : "grid-cols-[1fr]"} items-center gap-2`, children: [
+          mode === "project" && /* @__PURE__ */ jsx50(
             "div",
             {
               style: {
@@ -4989,12 +5120,12 @@ var ProjectRow = ({ element, barHeight, barSpacing, mode }) => {
               className: "w-[10px] h-[10px] rounded-full"
             }
           ),
-          /* @__PURE__ */ jsx48("div", { className: "line-clamp-1 break-words text-[#333]", title: element.label, children: element.label })
+          /* @__PURE__ */ jsx50("div", { className: "line-clamp-1 break-words text-[#333]", title: element.label, children: element.label })
         ] }),
-        mode === "project" ? /* @__PURE__ */ jsx48("div", { children: safeEndDate ? format4(toBuddhistDate(safeEndDate), "dd MMM yyyy", { locale: th }) : "-" }) : /* @__PURE__ */ jsx48("div", { children: `Q${getQuarter(
+        mode === "project" ? /* @__PURE__ */ jsx50("div", { children: safeEndDate ? format4(toBuddhistDate(safeEndDate), "dd MMM yyyy", { locale: th }) : "-" }) : /* @__PURE__ */ jsx50("div", { children: `Q${getQuarter(
           safeEndDate ?? /* @__PURE__ */ new Date()
         )}/${(safeEndDate?.getFullYear() ?? 0) + 543}` }),
-        /* @__PURE__ */ jsxs39("button", { className: "rounded-md subtitile-1 flex gap-2 align-start", children: [
+        /* @__PURE__ */ jsxs41("button", { className: "rounded-md subtitile-1 flex gap-2 align-start", children: [
           statusIcon,
           statusLabel
         ] })
@@ -5003,7 +5134,7 @@ var ProjectRow = ({ element, barHeight, barSpacing, mode }) => {
     element.id
   );
 };
-var RowOverlay = ({ data, barHeight, barSpacing, totalHeaderHeight }) => /* @__PURE__ */ jsx48(
+var RowOverlay = ({ data, barHeight, barSpacing, totalHeaderHeight }) => /* @__PURE__ */ jsx50(
   "div",
   {
     style: {
@@ -5017,7 +5148,7 @@ var RowOverlay = ({ data, barHeight, barSpacing, totalHeaderHeight }) => /* @__P
     children: data.map((_, i) => {
       if (i === 0) return null;
       const yPos = i * (barHeight + barSpacing) - barSpacing / 2;
-      return /* @__PURE__ */ jsx48(
+      return /* @__PURE__ */ jsx50(
         "div",
         {
           className: "",
@@ -5216,7 +5347,7 @@ var GanttChart = ({
     headersGroupLayer1Height,
     headersGroupLayer2Height
   ]);
-  return /* @__PURE__ */ jsx48(
+  return /* @__PURE__ */ jsx50(
     "div",
     {
       className: "body-1",
@@ -5230,7 +5361,7 @@ var GanttChart = ({
         backgroundColor: "#fff",
         overflow: "hidden"
       },
-      children: /* @__PURE__ */ jsxs39(
+      children: /* @__PURE__ */ jsxs41(
         "div",
         {
           style: {
@@ -5241,7 +5372,7 @@ var GanttChart = ({
             position: "relative"
           },
           children: [
-            /* @__PURE__ */ jsx48("div", { className: "z-2", children: /* @__PURE__ */ jsx48(
+            /* @__PURE__ */ jsx50("div", { className: "z-2", children: /* @__PURE__ */ jsx50(
               RowOverlay,
               {
                 data: data.length > 10 ? data : ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"],
@@ -5250,7 +5381,7 @@ var GanttChart = ({
                 totalHeaderHeight
               }
             ) }),
-            /* @__PURE__ */ jsxs39(
+            /* @__PURE__ */ jsxs41(
               "div",
               {
                 ref: leftPanelRef,
@@ -5264,8 +5395,8 @@ var GanttChart = ({
                   zIndex: 2
                 },
                 children: [
-                  /* @__PURE__ */ jsxs39("div", { ref: dataContainerRef, children: [
-                    /* @__PURE__ */ jsxs39(
+                  /* @__PURE__ */ jsxs41("div", { ref: dataContainerRef, children: [
+                    /* @__PURE__ */ jsxs41(
                       "div",
                       {
                         className: "grid body-2 grid-cols-[1fr_100px_130px] gap-2 px-8 border-b bg-white",
@@ -5278,13 +5409,13 @@ var GanttChart = ({
                           zIndex: 5
                         },
                         children: [
-                          /* @__PURE__ */ jsx48("div", { children: "\u0E42\u0E04\u0E23\u0E07\u0E01\u0E32\u0E23" }),
-                          /* @__PURE__ */ jsx48("div", { children: "\u0E01\u0E33\u0E2B\u0E19\u0E14\u0E2A\u0E48\u0E07" }),
-                          /* @__PURE__ */ jsx48("div", { children: "\u0E2A\u0E16\u0E32\u0E19\u0E30" })
+                          /* @__PURE__ */ jsx50("div", { children: "\u0E42\u0E04\u0E23\u0E07\u0E01\u0E32\u0E23" }),
+                          /* @__PURE__ */ jsx50("div", { children: "\u0E01\u0E33\u0E2B\u0E19\u0E14\u0E2A\u0E48\u0E07" }),
+                          /* @__PURE__ */ jsx50("div", { children: "\u0E2A\u0E16\u0E32\u0E19\u0E30" })
                         ]
                       }
                     ),
-                    data.map((element) => /* @__PURE__ */ jsx48(
+                    data.map((element) => /* @__PURE__ */ jsx50(
                       ProjectRow,
                       {
                         mode,
@@ -5295,7 +5426,7 @@ var GanttChart = ({
                       element.id
                     ))
                   ] }),
-                  /* @__PURE__ */ jsx48("div", { className: "z-3", children: /* @__PURE__ */ jsx48(
+                  /* @__PURE__ */ jsx50("div", { className: "z-3", children: /* @__PURE__ */ jsx50(
                     RowOverlay,
                     {
                       data,
@@ -5307,7 +5438,7 @@ var GanttChart = ({
                 ]
               }
             ),
-            /* @__PURE__ */ jsx48(
+            /* @__PURE__ */ jsx50(
               "div",
               {
                 style: {
@@ -5316,7 +5447,7 @@ var GanttChart = ({
                   position: "relative",
                   overflow: "visible"
                 },
-                children: /* @__PURE__ */ jsx48(
+                children: /* @__PURE__ */ jsx50(
                   "div",
                   {
                     style: {
@@ -5325,7 +5456,7 @@ var GanttChart = ({
                       width: "max-content",
                       zIndex: 1
                     },
-                    children: /* @__PURE__ */ jsx48("svg", { ref: svgRef })
+                    children: /* @__PURE__ */ jsx50("svg", { ref: svgRef })
                   }
                 )
               }
@@ -5340,16 +5471,16 @@ var GanttChart = ({
 // src/CardKPI/CardKPI/CardKPI.tsx
 import { IconDots, IconHourglassEmpty as IconHourglassEmpty2, IconRosetteDiscountCheck as IconRosetteDiscountCheck2 } from "@tabler/icons-react";
 import { useState as useState20 } from "react";
-import { Fragment as Fragment9, jsx as jsx49, jsxs as jsxs40 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx51, jsxs as jsxs42 } from "react/jsx-runtime";
 function KPIRow({ item }) {
-  return /* @__PURE__ */ jsxs40(
+  return /* @__PURE__ */ jsxs42(
     "div",
     {
       className: `w-full grid body-3 py-2 items-center pl-2 ${item.inputType === "NUMBER" ? "grid-cols-[1fr_100px_50px]" : "grid-cols-[1fr_50px]"}`,
       children: [
-        /* @__PURE__ */ jsx49("div", { className: "line-clamp-2", children: item.textValue }),
-        item.inputType === "NUMBER" && /* @__PURE__ */ jsx49("span", { className: "flex", children: `${item.currentValue}/${item.numberValue} ${item.unit}` }),
-        item.inputType === "NUMBER" ? /* @__PURE__ */ jsx49("div", { className: "flex", children: /* @__PURE__ */ jsx49(ProgressBar, { percent: Math.floor(item.currentValue * 100 / (item.numberValue ?? 1)), type: "circle", checkpoints: [0] }) }) : /* @__PURE__ */ jsx49(Fragment9, { children: item.currentValue !== 0 ? /* @__PURE__ */ jsx49(IconRosetteDiscountCheck2, { className: "text-green-500 flex justify-center w-full", size: 30 }) : /* @__PURE__ */ jsx49(IconHourglassEmpty2, { className: "text-yellow-500 flex justify-center w-full", size: 30 }) })
+        /* @__PURE__ */ jsx51("div", { className: "line-clamp-2", children: item.textValue }),
+        item.inputType === "NUMBER" && /* @__PURE__ */ jsx51("span", { className: "flex", children: `${item.currentValue}/${item.numberValue} ${item.unit}` }),
+        item.inputType === "NUMBER" ? /* @__PURE__ */ jsx51("div", { className: "flex", children: /* @__PURE__ */ jsx51(ProgressBar, { percent: Math.floor(item.currentValue * 100 / (item.numberValue ?? 1)), type: "circle", checkpoints: [0] }) }) : /* @__PURE__ */ jsx51(Fragment9, { children: item.currentValue !== 0 ? /* @__PURE__ */ jsx51(IconRosetteDiscountCheck2, { className: "text-green-500 flex justify-center w-full", size: 30 }) : /* @__PURE__ */ jsx51(IconHourglassEmpty2, { className: "text-yellow-500 flex justify-center w-full", size: 30 }) })
       ]
     }
   );
@@ -5362,15 +5493,15 @@ function CardKPI({
   projectId
 }) {
   const [isOpen, setIsOpen] = useState20(false);
-  return /* @__PURE__ */ jsxs40(
+  return /* @__PURE__ */ jsxs42(
     "div",
     {
       className: `border-10 p-4 rounded-md w-[420px] h-[450px] relative`,
       style: { borderColor: dataItem.projectColor },
       children: [
-        /* @__PURE__ */ jsxs40("div", { className: "grid grid-cols-[1fr_70px] justify-between items-center", children: [
-          /* @__PURE__ */ jsx49("div", { className: "line-clamp-2 subtitle-2 ", children: dataItem.name }),
-          /* @__PURE__ */ jsx49("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx49(
+        /* @__PURE__ */ jsxs42("div", { className: "grid grid-cols-[1fr_70px] justify-between items-center", children: [
+          /* @__PURE__ */ jsx51("div", { className: "line-clamp-2 subtitle-2 ", children: dataItem.name }),
+          /* @__PURE__ */ jsx51("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx51(
             "button",
             {
               type: "button",
@@ -5380,41 +5511,41 @@ function CardKPI({
             }
           ) })
         ] }),
-        /* @__PURE__ */ jsxs40("div", { className: "my-2 body-1", children: [
-          /* @__PURE__ */ jsx49("div", { className: "translate-y-2", children: "\u0E23\u0E49\u0E2D\u0E22\u0E25\u0E30\u0E02\u0E2D\u0E07\u0E01\u0E34\u0E08\u0E01\u0E23\u0E23\u0E21" }),
-          /* @__PURE__ */ jsx49(ProgressBar, { percent: overallPercent, type: "line", checkpoints: [0] })
+        /* @__PURE__ */ jsxs42("div", { className: "my-2 body-1", children: [
+          /* @__PURE__ */ jsx51("div", { className: "translate-y-2", children: "\u0E23\u0E49\u0E2D\u0E22\u0E25\u0E30\u0E02\u0E2D\u0E07\u0E01\u0E34\u0E08\u0E01\u0E23\u0E23\u0E21" }),
+          /* @__PURE__ */ jsx51(ProgressBar, { percent: overallPercent, type: "line", checkpoints: [0] })
         ] }),
-        /* @__PURE__ */ jsxs40("div", { className: "border-b", children: [
-          /* @__PURE__ */ jsx49("span", { className: "body-2 ", children: "\u0E01\u0E25\u0E38\u0E48\u0E21\u0E40\u0E1B\u0E49\u0E32\u0E2B\u0E21\u0E32\u0E22" }),
+        /* @__PURE__ */ jsxs42("div", { className: "border-b", children: [
+          /* @__PURE__ */ jsx51("span", { className: "body-2 ", children: "\u0E01\u0E25\u0E38\u0E48\u0E21\u0E40\u0E1B\u0E49\u0E32\u0E2B\u0E21\u0E32\u0E22" }),
           indicator.filter((ind) => ind.indicatorType === "TARGET").map((item, index) => {
             if (index === 2) return;
-            return /* @__PURE__ */ jsx49(KPIRow, { item });
+            return /* @__PURE__ */ jsx51(KPIRow, { item });
           })
         ] }),
-        /* @__PURE__ */ jsxs40("div", { className: "pt-2", children: [
-          /* @__PURE__ */ jsx49("span", { className: "body-2 ", children: "\u0E15\u0E31\u0E27\u0E0A\u0E35\u0E49\u0E27\u0E31\u0E14\u0E1C\u0E25\u0E1C\u0E25\u0E34\u0E15" }),
+        /* @__PURE__ */ jsxs42("div", { className: "pt-2", children: [
+          /* @__PURE__ */ jsx51("span", { className: "body-2 ", children: "\u0E15\u0E31\u0E27\u0E0A\u0E35\u0E49\u0E27\u0E31\u0E14\u0E1C\u0E25\u0E1C\u0E25\u0E34\u0E15" }),
           indicator.filter((ind) => ind.indicatorType === "OUTPUT").map((item, index) => {
             if (index === 2) return;
-            return /* @__PURE__ */ jsx49(KPIRow, { item });
+            return /* @__PURE__ */ jsx51(KPIRow, { item });
           })
         ] }),
-        indicator.filter((item) => item.indicatorType === "TARGET").length > 2 || indicator.filter((item) => item.indicatorType === "OUTPUT").length > 2 ? /* @__PURE__ */ jsx49("div", { className: "bottom-0 right-1/2 absolute text-gray-300", children: /* @__PURE__ */ jsx49(
+        indicator.filter((item) => item.indicatorType === "TARGET").length > 2 || indicator.filter((item) => item.indicatorType === "OUTPUT").length > 2 ? /* @__PURE__ */ jsx51("div", { className: "bottom-0 right-1/2 absolute text-gray-300", children: /* @__PURE__ */ jsx51(
           IconDots,
           {
             className: "cursor-pointer",
             onClick: () => setIsOpen(true)
           }
         ) }) : void 0,
-        /* @__PURE__ */ jsx49(
+        /* @__PURE__ */ jsx51(
           AntDModal,
           {
             isOpen,
             onCancel: () => setIsOpen(false),
             width: 600,
-            children: /* @__PURE__ */ jsxs40("div", { className: "mt-10", children: [
-              /* @__PURE__ */ jsxs40("div", { className: "grid grid-cols-[1fr_100px] justify-between items-center subtitle-2 ", children: [
-                /* @__PURE__ */ jsx49("div", { className: "font-medium line-clamp-2", children: dataItem.name }),
-                /* @__PURE__ */ jsx49(
+            children: /* @__PURE__ */ jsxs42("div", { className: "mt-10", children: [
+              /* @__PURE__ */ jsxs42("div", { className: "grid grid-cols-[1fr_100px] justify-between items-center subtitle-2 ", children: [
+                /* @__PURE__ */ jsx51("div", { className: "font-medium line-clamp-2", children: dataItem.name }),
+                /* @__PURE__ */ jsx51(
                   "button",
                   {
                     type: "button",
@@ -5424,17 +5555,17 @@ function CardKPI({
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsxs40("div", { className: "p-4", children: [
-                /* @__PURE__ */ jsxs40("div", { children: [
-                  /* @__PURE__ */ jsx49("span", { className: "body-1 border-b", children: "\u0E01\u0E25\u0E38\u0E48\u0E21\u0E40\u0E1B\u0E49\u0E32\u0E2B\u0E21\u0E32\u0E22" }),
+              /* @__PURE__ */ jsxs42("div", { className: "p-4", children: [
+                /* @__PURE__ */ jsxs42("div", { children: [
+                  /* @__PURE__ */ jsx51("span", { className: "body-1 border-b", children: "\u0E01\u0E25\u0E38\u0E48\u0E21\u0E40\u0E1B\u0E49\u0E32\u0E2B\u0E21\u0E32\u0E22" }),
                   indicator.filter((ind) => ind.indicatorType === "TARGET").map((item, index) => {
-                    return /* @__PURE__ */ jsx49(KPIRow, { item });
+                    return /* @__PURE__ */ jsx51(KPIRow, { item });
                   })
                 ] }),
-                /* @__PURE__ */ jsxs40("div", { children: [
-                  /* @__PURE__ */ jsx49("span", { className: "body-1 border-b", children: "\u0E15\u0E31\u0E27\u0E0A\u0E35\u0E49\u0E27\u0E31\u0E14\u0E1C\u0E25\u0E1C\u0E25\u0E34\u0E15" }),
+                /* @__PURE__ */ jsxs42("div", { children: [
+                  /* @__PURE__ */ jsx51("span", { className: "body-1 border-b", children: "\u0E15\u0E31\u0E27\u0E0A\u0E35\u0E49\u0E27\u0E31\u0E14\u0E1C\u0E25\u0E1C\u0E25\u0E34\u0E15" }),
                   indicator.filter((ind) => ind.indicatorType === "OUTPUT").map((item, index) => {
-                    return /* @__PURE__ */ jsx49(KPIRow, { item });
+                    return /* @__PURE__ */ jsx51(KPIRow, { item });
                   })
                 ] })
               ] })
@@ -5493,6 +5624,8 @@ export {
   TertiaryButton,
   TextAreaInput,
   TextInput,
+  TimePickerBasic,
+  TimePickerRangePicker,
   TopNavBar,
   messageError,
   messageInfo,