@esic-lab/data-core-ui 0.0.22 → 0.0.24

package/dist/index.mjs

@@ -2666,8 +2666,102 @@ function SelectFieldTag({
   );
 }
 
+// src/Select/SelectCustom/SelectCustom.tsx
+import { IconTrash } from "@tabler/icons-react";
+import { Select as Select6, ConfigProvider as ConfigProvider15 } from "antd";
+import { useState as useState7 } from "react";
+import { jsx as jsx31, jsxs as jsxs27 } from "react/jsx-runtime";
+function SelectCustom({
+  title = "\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25\u0E42\u0E04\u0E23\u0E07\u0E01\u0E32\u0E23",
+  placeholder = "\u0E01\u0E23\u0E38\u0E13\u0E32\u0E40\u0E25\u0E37\u0E2D\u0E01",
+  options,
+  require: require2 = false,
+  onChange,
+  bottomText,
+  showError,
+  errorMessage,
+  onClear
+}) {
+  const [value, setValue] = useState7([]);
+  const [valueList, setValueList] = useState7([]);
+  const handleChange = (selectedValues) => {
+    const newValues = selectedValues.filter((v) => !valueList.includes(v));
+    setValueList((prev) => {
+      const updated = [...prev, ...newValues];
+      onChange && onChange(updated);
+      return updated;
+    });
+    setValue([]);
+  };
+  const handleDelete = (val) => {
+    setValueList((prev) => {
+      const updated = prev.filter((v) => v !== val);
+      onChange && onChange(updated);
+      return updated;
+    });
+  };
+  const filteredOptions = options.filter((opt) => !valueList.includes(opt.value)).map((opt) => ({ value: opt.value, label: opt.label }));
+  return /* @__PURE__ */ jsx31(
+    ConfigProvider15,
+    {
+      theme: {
+        token: {
+          fontFamily: "Kanit",
+          fontSize: 16
+        }
+      },
+      children: /* @__PURE__ */ jsxs27("div", { className: "container-input", children: [
+        /* @__PURE__ */ jsxs27("div", { children: [
+          /* @__PURE__ */ jsx31("span", { className: "body-1", children: title }),
+          " ",
+          require2 && /* @__PURE__ */ jsx31("span", { className: "text-red-500", children: "*" })
+        ] }),
+        /* @__PURE__ */ jsx31(
+          Select6,
+          {
+            value,
+            onChange: handleChange,
+            placeholder,
+            options: filteredOptions,
+            mode: "tags",
+            onClear
+          }
+        ),
+        /* @__PURE__ */ jsxs27("div", { children: [
+          /* @__PURE__ */ jsx31("p", { className: "caption-1 text-gray-500", children: bottomText }),
+          " ",
+          showError && /* @__PURE__ */ jsx31("p", { className: "caption-1 text-red-500 ", children: errorMessage })
+        ] }),
+        /* @__PURE__ */ jsx31("div", { className: "h-[500px] w-full p-[2px] overflow-y-auto mt-2", children: valueList.map((v, index) => /* @__PURE__ */ jsxs27(
+          "div",
+          {
+            className: "flex justify-between items-center py-[2px] body-1",
+            children: [
+              /* @__PURE__ */ jsxs27("div", { className: "flex flex-row gap-[8px]", children: [
+                /* @__PURE__ */ jsxs27("p", { children: [
+                  index + 1,
+                  "."
+                ] }),
+                /* @__PURE__ */ jsx31("p", { children: v })
+              ] }),
+              /* @__PURE__ */ jsx31(
+                IconTrash,
+                {
+                  className: "cursor-pointer text-red-500",
+                  onClick: () => handleDelete(v)
+                }
+              )
+            ]
+          },
+          index
+        )) })
+      ] })
+    }
+  );
+}
+
 // src/SortFilter/SortFilter.tsx
-import { ConfigProvider as ConfigProvider15 } from "antd";
+import { ConfigProvider as ConfigProvider16 } from "antd";
 import { CalendarOutlined } from "@ant-design/icons";
 
 // src/SortFilter/DataMockSortFilter.ts
@@ -2698,9 +2792,9 @@ var quarters = [
 ];
 
 // src/SortFilter/SortFilter.tsx
-import { useState as useState7 } from "react";
+import { useState as useState8 } from "react";
 import { IconSortDescending as IconSortDescending2, IconFilter } from "@tabler/icons-react";
-import { jsx as jsx31, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs28 } from "react/jsx-runtime";
 function SortFilter({
   showYear = true,
   showQuarter = true,
@@ -2708,23 +2802,23 @@ function SortFilter({
   onSortClick,
   onFilterClick
 }) {
-  const [yearValue, setYearValue] = useState7();
-  const [monthValue, setMonthValue] = useState7();
-  const [quarterValue, setQuartersValue] = useState7();
-  return /* @__PURE__ */ jsx31(
-    ConfigProvider15,
+  const [yearValue, setYearValue] = useState8();
+  const [monthValue, setMonthValue] = useState8();
+  const [quarterValue, setQuartersValue] = useState8();
+  return /* @__PURE__ */ jsx32(
+    ConfigProvider16,
     {
       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__ */ jsx31("div", { className: "w-[200px]", children: /* @__PURE__ */ jsx31(
+      children: /* @__PURE__ */ jsxs28("div", { className: "w-full flex items-center justify-between", children: [
+        /* @__PURE__ */ jsxs28("div", { className: "w-full flex gap-[10px]", children: [
+          showYear && /* @__PURE__ */ jsx32("div", { className: "w-[200px]", children: /* @__PURE__ */ jsx32(
             SelectField,
             {
-              prefix: /* @__PURE__ */ jsx31(CalendarOutlined, {}),
+              prefix: /* @__PURE__ */ jsx32(CalendarOutlined, {}),
               onChange: setYearValue,
               options: years.map((s) => ({
                 value: s.value,
@@ -2734,10 +2828,10 @@ function SortFilter({
               value: yearValue
             }
           ) }),
-          showMonth && /* @__PURE__ */ jsx31("div", { className: "w-[200px]", children: /* @__PURE__ */ jsx31(
+          showMonth && /* @__PURE__ */ jsx32("div", { className: "w-[200px]", children: /* @__PURE__ */ jsx32(
             SelectField,
             {
-              prefix: /* @__PURE__ */ jsx31(CalendarOutlined, {}),
+              prefix: /* @__PURE__ */ jsx32(CalendarOutlined, {}),
               onChange: setMonthValue,
               options: months.map((s) => ({
                 value: s.value,
@@ -2747,10 +2841,10 @@ function SortFilter({
               placeholder: "\u0E01\u0E23\u0E38\u0E13\u0E32\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E40\u0E14\u0E37\u0E2D\u0E19"
             }
           ) }),
-          showQuarter && /* @__PURE__ */ jsx31("div", { className: "w-[200px]", children: /* @__PURE__ */ jsx31(
+          showQuarter && /* @__PURE__ */ jsx32("div", { className: "w-[200px]", children: /* @__PURE__ */ jsx32(
             SelectField,
             {
-              prefix: /* @__PURE__ */ jsx31(CalendarOutlined, {}),
+              prefix: /* @__PURE__ */ jsx32(CalendarOutlined, {}),
               onChange: setQuartersValue,
               options: quarters.map((s) => ({
                 value: s.value,
@@ -2761,8 +2855,8 @@ function SortFilter({
             }
           ) })
         ] }),
-        /* @__PURE__ */ jsxs27("div", { className: "flex gap-[10px]", children: [
-          /* @__PURE__ */ jsx31(
+        /* @__PURE__ */ jsxs28("div", { className: "flex gap-[10px]", children: [
+          /* @__PURE__ */ jsx32(
             IconSortDescending2,
             {
               size: 24,
@@ -2770,7 +2864,7 @@ function SortFilter({
               onClick: onSortClick
             }
           ),
-          /* @__PURE__ */ jsx31(
+          /* @__PURE__ */ jsx32(
             IconFilter,
             {
               size: 24,
@@ -2785,9 +2879,9 @@ function SortFilter({
 }
 
 // src/Upload/FileUploader/FileUploader.tsx
-import { IconPaperclip, IconUpload, IconTrash } from "@tabler/icons-react";
-import { useRef as useRef2, useState as useState8 } from "react";
-import { Fragment as Fragment5, jsx as jsx32, jsxs as jsxs28 } from "react/jsx-runtime";
+import { IconPaperclip, IconUpload, IconTrash as IconTrash2 } from "@tabler/icons-react";
+import { useRef as useRef2, useState as useState9 } from "react";
+import { Fragment as Fragment5, jsx as jsx33, jsxs as jsxs29 } from "react/jsx-runtime";
 function FileUploader({
   onUpload,
   onError,
@@ -2799,9 +2893,9 @@ function FileUploader({
   description,
   label
 }) {
-  const [fileList, setFileList] = useState8([]);
-  const [uploading, setUploading] = useState8(false);
-  const [dragActive, setDragActive] = useState8(false);
+  const [fileList, setFileList] = useState9([]);
+  const [uploading, setUploading] = useState9(false);
+  const [dragActive, setDragActive] = useState9(false);
   const inputRef = useRef2(null);
   const validateFile = (file) => {
     if (accept && !accept.includes(file.type)) {
@@ -2858,10 +2952,10 @@ function FileUploader({
     }
     if (inputRef.current) inputRef.current.value = "";
   };
-  return /* @__PURE__ */ jsxs28("div", { className: "w-full", children: [
-    label && /* @__PURE__ */ jsx32("p", { className: "body-1", children: label }),
-    /* @__PURE__ */ jsxs28("div", { children: [
-      mode === "upload" ? /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsxs29("div", { className: "w-full", children: [
+    label && /* @__PURE__ */ jsx33("p", { className: "body-1", children: label }),
+    /* @__PURE__ */ jsxs29("div", { children: [
+      mode === "upload" ? /* @__PURE__ */ jsx33(
         "button",
         {
           type: "button",
@@ -2869,15 +2963,15 @@ function FileUploader({
           className: `h-[34px] flex justify-center items-center gap-2 w-full rounded-[2px] border border-gray-200 body-1 
           ${disabled ? "cursor-not-allowed text-gray-400 bg-gray-100" : "cursor-pointer hover:text-primary-400 hover:border-primary-200 duration-300"}`,
           disabled: disabled ? disabled : uploading,
-          children: uploading ? /* @__PURE__ */ jsxs28(Fragment5, { children: [
-            /* @__PURE__ */ jsx32(Loader, { size: 15 }),
+          children: uploading ? /* @__PURE__ */ jsxs29(Fragment5, { children: [
+            /* @__PURE__ */ jsx33(Loader, { size: 15 }),
             " \u0E01\u0E33\u0E25\u0E31\u0E07\u0E2D\u0E31\u0E1B\u0E42\u0E2B\u0E25\u0E14"
-          ] }) : /* @__PURE__ */ jsxs28(Fragment5, { children: [
-            /* @__PURE__ */ jsx32(IconUpload, { size: 15, className: "text-gray-400" }),
+          ] }) : /* @__PURE__ */ jsxs29(Fragment5, { children: [
+            /* @__PURE__ */ jsx33(IconUpload, { size: 15, className: "text-gray-400" }),
             " \u0E41\u0E19\u0E1A\u0E44\u0E1F\u0E25\u0E4C"
           ] })
         }
-      ) : /* @__PURE__ */ jsx32(
+      ) : /* @__PURE__ */ jsx33(
         "div",
         {
           className: `min-w-[400px] min-h-[120px] flex  justify-center items-center border-2 border-dashed rounded-md p-4 transition-colors body-1
@@ -2891,17 +2985,17 @@ function FileUploader({
           },
           onDragLeave: () => setDragActive(false),
           onDrop: handleDrop,
-          children: uploading ? /* @__PURE__ */ jsxs28("div", { className: "flex justify-center items-center gap-2", children: [
-            /* @__PURE__ */ jsx32(Loader, { size: 15 }),
+          children: uploading ? /* @__PURE__ */ jsxs29("div", { className: "flex justify-center items-center gap-2", children: [
+            /* @__PURE__ */ jsx33(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__ */ jsx32(IconUpload, { size: 20 }),
-            /* @__PURE__ */ jsx32("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__ */ jsx32("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__ */ jsxs29("div", { className: "flex flex-col items-center gap-2", children: [
+            /* @__PURE__ */ jsx33(IconUpload, { size: 20 }),
+            /* @__PURE__ */ jsx33("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__ */ jsx33("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__ */ jsx32(
+      /* @__PURE__ */ jsx33(
         "input",
         {
           type: "file",
@@ -2914,14 +3008,14 @@ function FileUploader({
         }
       )
     ] }),
-    description && /* @__PURE__ */ jsx32("p", { className: "text-gray-400 body-4", children: description }),
-    /* @__PURE__ */ jsx32("div", { className: "mt-[8px]", children: fileList.length !== 0 && fileList.map((file, index) => /* @__PURE__ */ jsxs28("div", { className: "flex items-center gap-2 rounded-[4px] px-[8px] py-[4px] body-1", children: [
-      /* @__PURE__ */ jsxs28("div", { className: "flex items-center gap-2 w-[75%] overflow-hidden", children: [
-        /* @__PURE__ */ jsx32("div", { className: "w-[15px] h-[15px]", children: /* @__PURE__ */ jsx32(IconPaperclip, { size: 15 }) }),
-        /* @__PURE__ */ jsx32("span", { className: "truncate", children: file.name })
+    description && /* @__PURE__ */ jsx33("p", { className: "text-gray-400 body-4", children: description }),
+    /* @__PURE__ */ jsx33("div", { className: "mt-[8px]", children: fileList.length !== 0 && fileList.map((file, index) => /* @__PURE__ */ jsxs29("div", { className: "flex items-center gap-2 rounded-[4px] px-[8px] py-[4px] body-1", children: [
+      /* @__PURE__ */ jsxs29("div", { className: "flex items-center gap-2 w-[75%] overflow-hidden", children: [
+        /* @__PURE__ */ jsx33("div", { className: "w-[15px] h-[15px]", children: /* @__PURE__ */ jsx33(IconPaperclip, { size: 15 }) }),
+        /* @__PURE__ */ jsx33("span", { className: "truncate", children: file.name })
       ] }),
-      /* @__PURE__ */ jsx32(
-        IconTrash,
+      /* @__PURE__ */ jsx33(
+        IconTrash2,
         {
           size: 20,
           className: "ml-auto hover:text-red-500 cursor-pointer",
@@ -2954,9 +3048,9 @@ function messageLoading(content, duration) {
 }
 
 // src/Breadcrumb/Breadcrumb.tsx
-import { ConfigProvider as ConfigProvider16 } from "antd";
+import { ConfigProvider as ConfigProvider17 } from "antd";
 import { Breadcrumb } from "antd";
-import { jsx as jsx33 } from "react/jsx-runtime";
+import { jsx as jsx34 } from "react/jsx-runtime";
 function Breadcrumbs({
   items,
   separator,
@@ -2964,15 +3058,15 @@ function Breadcrumbs({
   classname,
   params
 }) {
-  return /* @__PURE__ */ jsx33(
-    ConfigProvider16,
+  return /* @__PURE__ */ jsx34(
+    ConfigProvider17,
     {
       theme: {
         token: {
           fontFamily: "Kanit"
         }
       },
-      children: /* @__PURE__ */ jsx33(
+      children: /* @__PURE__ */ jsx34(
         Breadcrumb,
         {
           items,
@@ -2987,8 +3081,8 @@ function Breadcrumbs({
 }
 
 // src/HeadingPage/HeadingPage.tsx
-import { ConfigProvider as ConfigProvider17 } from "antd";
-import { jsx as jsx34, jsxs as jsxs29 } from "react/jsx-runtime";
+import { ConfigProvider as ConfigProvider18 } from "antd";
+import { jsx as jsx35, jsxs as jsxs30 } from "react/jsx-runtime";
 function HeadingPage({ Heading }) {
   const today = (/* @__PURE__ */ new Date()).toLocaleDateString("th-TH", {
     weekday: "long",
@@ -2996,17 +3090,17 @@ function HeadingPage({ Heading }) {
     month: "long",
     year: "numeric"
   });
-  return /* @__PURE__ */ jsx34(
-    ConfigProvider17,
+  return /* @__PURE__ */ jsx35(
+    ConfigProvider18,
     {
       theme: {
         token: {
           fontFamily: "Kanit"
         }
       },
-      children: /* @__PURE__ */ jsxs29("div", { className: "flex flex-col gap-[10px] px-[20px] py-[10px]", children: [
-        /* @__PURE__ */ jsx34("p", { className: "headline-5", children: Heading }),
-        /* @__PURE__ */ jsxs29("p", { className: "body-1", children: [
+      children: /* @__PURE__ */ jsxs30("div", { className: "flex flex-col gap-[10px] px-[20px] py-[10px]", children: [
+        /* @__PURE__ */ jsx35("p", { className: "headline-5", children: Heading }),
+        /* @__PURE__ */ jsxs30("p", { className: "body-1", children: [
           " \u0E27\u0E31\u0E19\u0E19\u0E35\u0E49 ",
           today
         ] })
@@ -3016,9 +3110,9 @@ function HeadingPage({ Heading }) {
 }
 
 // src/Progress/ProgressBar.tsx
-import { ConfigProvider as ConfigProvider18, Progress } from "antd";
-import { useEffect as useEffect2, useRef as useRef3, useState as useState9 } from "react";
-import { jsx as jsx35, jsxs as jsxs30 } from "react/jsx-runtime";
+import { ConfigProvider as ConfigProvider19, Progress } from "antd";
+import { useEffect as useEffect2, useRef as useRef3, useState as useState10 } from "react";
+import { jsx as jsx36, jsxs as jsxs31 } from "react/jsx-runtime";
 function ProgressBar({
   percent = 0,
   size = "default",
@@ -3031,7 +3125,7 @@ function ProgressBar({
   steps,
   isCheckPoints
 }) {
-  const [barWidth, setBarWidth] = useState9(0);
+  const [barWidth, setBarWidth] = useState10(0);
   const progressRef = useRef3(null);
   let strokeColor = "--color-green-500";
   const defaultStrokeWidth = type === "circle" ? 13 : strokeWidth ?? 8;
@@ -3051,16 +3145,16 @@ function ProgressBar({
     observer.observe(inner);
     return () => observer.disconnect();
   }, []);
-  return /* @__PURE__ */ jsx35(
-    ConfigProvider18,
+  return /* @__PURE__ */ jsx36(
+    ConfigProvider19,
     {
       theme: {
         token: {
           fontFamily: "Kanit"
         }
       },
-      children: /* @__PURE__ */ jsxs30("div", { className: "relative w-full", ref: progressRef, children: [
-        /* @__PURE__ */ jsx35(
+      children: /* @__PURE__ */ jsxs31("div", { className: "relative w-full", ref: progressRef, children: [
+        /* @__PURE__ */ jsx36(
           Progress,
           {
             className: "w-full",
@@ -3076,7 +3170,7 @@ function ProgressBar({
             strokeColor
           }
         ),
-        barWidth > 0 && isCheckPoints && type !== "circle" && checkpoints.map((cp) => /* @__PURE__ */ jsx35(
+        barWidth > 0 && isCheckPoints && type !== "circle" && checkpoints.map((cp) => /* @__PURE__ */ jsx36(
           "div",
           {
             className: "checkpoint absolute top-0",
@@ -3098,25 +3192,25 @@ function ProgressBar({
 }
 
 // src/KpiSection/KpiSection.tsx
-import { ConfigProvider as ConfigProvider19, message } from "antd";
-import { useEffect as useEffect3, useState as useState11 } from "react";
+import { ConfigProvider as ConfigProvider20, message } from "antd";
+import { useEffect as useEffect3, useState as useState12 } from "react";
 
 // src/KpiSection/hooks/useGetKpiSection.ts
-import { useState as useState10 } from "react";
+import { useState as useState11 } from "react";
 import cuid from "cuid";
 function useGetKpiSection() {
-  const [nameKpi, setNameKpi] = useState10("");
-  const [kpiValue, setKpiValue] = useState10("");
-  const [unitValue, setUnitValue] = useState10("");
-  const [kpiList, setKpiList] = useState10([]);
-  const [editingBackup, setEditingBackup] = useState10({});
-  const [selected, setSelected] = useState10("2");
-  const [errors, setErrors] = useState10({
+  const [nameKpi, setNameKpi] = useState11("");
+  const [kpiValue, setKpiValue] = useState11("");
+  const [unitValue, setUnitValue] = useState11("");
+  const [kpiList, setKpiList] = useState11([]);
+  const [editingBackup, setEditingBackup] = useState11({});
+  const [selected, setSelected] = useState11("2");
+  const [errors, setErrors] = useState11({
     nameKpi: "",
     kpiValue: "",
     unitValue: ""
   });
-  const [itemErrors, setItemErrors] = useState10({});
+  const [itemErrors, setItemErrors] = useState11({});
   const options = [
     { value: "1", label: "\u0E02\u0E49\u0E2D\u0E04\u0E27\u0E32\u0E21" },
     { value: "2", label: "\u0E15\u0E31\u0E27\u0E40\u0E25\u0E02" }
@@ -3252,10 +3346,10 @@ import {
   IconCheck as IconCheck2,
   IconCirclePlus,
   IconPencil,
-  IconTrash as IconTrash2,
+  IconTrash as IconTrash3,
   IconX as IconX2
 } from "@tabler/icons-react";
-import { Fragment as Fragment6, jsx as jsx36, jsxs as jsxs31 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx37, jsxs as jsxs32 } from "react/jsx-runtime";
 function KpiSection({ type, onChangeKpiList }) {
   const {
     handleAddKpi,
@@ -3276,7 +3370,7 @@ function KpiSection({ type, onChangeKpiList }) {
     setItemErrors
   } = useGetKpiSection();
   const [messageApi2, messageContainer] = message.useMessage();
-  const [hasShownError, setHasShownError] = useState11(false);
+  const [hasShownError, setHasShownError] = useState12(false);
   useEffect3(() => {
     setMessageApi(messageApi2);
   }, [messageApi2]);
@@ -3285,8 +3379,8 @@ function KpiSection({ type, onChangeKpiList }) {
       onChangeKpiList(kpiList);
     }
   }, [kpiList]);
-  return /* @__PURE__ */ jsx36(
-    ConfigProvider19,
+  return /* @__PURE__ */ jsx37(
+    ConfigProvider20,
     {
       theme: {
         token: {
@@ -3294,11 +3388,11 @@ function KpiSection({ type, onChangeKpiList }) {
           fontSize: 16
         }
       },
-      children: /* @__PURE__ */ jsxs31("div", { className: "container-input", children: [
+      children: /* @__PURE__ */ jsxs32("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__ */ jsx36(
+        type === "number" && /* @__PURE__ */ jsxs32("div", { className: "space-y-4", children: [
+          /* @__PURE__ */ jsxs32("div", { className: "grid grid-cols-[1fr_200px_200px_50px] w-full gap-[24px] items-start", children: [
+            /* @__PURE__ */ jsx37(
               InputField,
               {
                 value: nameKpi,
@@ -3311,7 +3405,7 @@ function KpiSection({ type, onChangeKpiList }) {
                 errorMessage: errors.nameKpi
               }
             ),
-            /* @__PURE__ */ jsx36(
+            /* @__PURE__ */ jsx37(
               InputField,
               {
                 value: kpiValue,
@@ -3336,7 +3430,7 @@ function KpiSection({ type, onChangeKpiList }) {
                 errorMessage: errors.kpiValue
               }
             ),
-            /* @__PURE__ */ jsx36(
+            /* @__PURE__ */ jsx37(
               InputField,
               {
                 value: unitValue,
@@ -3349,26 +3443,32 @@ function KpiSection({ type, onChangeKpiList }) {
                 errorMessage: errors.unitValue
               }
             ),
-            /* @__PURE__ */ jsx36("div", { className: "absolute top-21 right-5", children: /* @__PURE__ */ jsx36(
-              IconCirclePlus,
+            /* @__PURE__ */ jsx37(
+              "div",
               {
-                className: "w-[40px] h-[40px] cursor-pointer hover:scale-110 transition",
-                stroke: 1,
-                onClick: () => handleAddKpi(type)
+                className: `flex justify-end mt-[28px]`,
+                children: /* @__PURE__ */ jsx37(
+                  IconCirclePlus,
+                  {
+                    className: "w-[40px] h-[40px] cursor-pointer hover:scale-110 transition",
+                    stroke: 1,
+                    onClick: () => handleAddKpi(type)
+                  }
+                )
               }
-            ) })
+            )
           ] }),
-          /* @__PURE__ */ jsx36("div", { children: kpiList.map((kpi, index) => /* @__PURE__ */ jsxs31(
+          /* @__PURE__ */ jsx37("div", { children: kpiList.map((kpi, index) => /* @__PURE__ */ jsxs32(
             "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__ */ jsxs32("p", { className: `body-1 ${kpi.isEditing ? "mt-[12px]" : ""}`, children: [
                   index + 1,
                   "."
                 ] }),
-                kpi.isEditing ? /* @__PURE__ */ jsxs31(Fragment6, { children: [
-                  /* @__PURE__ */ jsx36(
+                kpi.isEditing ? /* @__PURE__ */ jsxs32(Fragment6, { children: [
+                  /* @__PURE__ */ jsx37(
                     InputField,
                     {
                       value: kpi.name,
@@ -3381,7 +3481,7 @@ function KpiSection({ type, onChangeKpiList }) {
                       errorMessage: itemErrors[kpi.id]?.name
                     }
                   ),
-                  /* @__PURE__ */ jsx36(
+                  /* @__PURE__ */ jsx37(
                     InputField,
                     {
                       value: kpi.value?.toString(),
@@ -3411,7 +3511,7 @@ function KpiSection({ type, onChangeKpiList }) {
                       errorMessage: itemErrors[kpi.id]?.value
                     }
                   ),
-                  /* @__PURE__ */ jsx36(
+                  /* @__PURE__ */ jsx37(
                     InputField,
                     {
                       value: kpi.unit,
@@ -3424,19 +3524,19 @@ function KpiSection({ type, onChangeKpiList }) {
                       errorMessage: itemErrors[kpi.id]?.unit
                     }
                   ),
-                  /* @__PURE__ */ jsxs31(
+                  /* @__PURE__ */ jsxs32(
                     "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__ */ jsx36(
+                        /* @__PURE__ */ jsx37(
                           IconCheck2,
                           {
                             className: "w-[30px] h-[30px] cursor-pointer",
                             onClick: () => handleSave(kpi.id, type)
                           }
                         ),
-                        /* @__PURE__ */ jsx36(
+                        /* @__PURE__ */ jsx37(
                           IconX2,
                           {
                             className: "w-[30px] h-[30px] cursor-pointer",
@@ -3446,20 +3546,20 @@ function KpiSection({ type, onChangeKpiList }) {
                       ]
                     }
                   )
-                ] }) : /* @__PURE__ */ jsxs31(Fragment6, { children: [
-                  /* @__PURE__ */ jsx36("p", { className: "body-1", children: kpi.name }),
-                  /* @__PURE__ */ jsx36("p", { className: "body-1", children: kpi.value }),
-                  /* @__PURE__ */ jsx36("p", { className: "body-1", children: kpi.unit }),
-                  /* @__PURE__ */ jsxs31("div", { className: "flex gap-3 justify-end", children: [
-                    /* @__PURE__ */ jsx36(
+                ] }) : /* @__PURE__ */ jsxs32(Fragment6, { children: [
+                  /* @__PURE__ */ jsx37("p", { className: "body-1", children: kpi.name }),
+                  /* @__PURE__ */ jsx37("p", { className: "body-1", children: kpi.value }),
+                  /* @__PURE__ */ jsx37("p", { className: "body-1", children: kpi.unit }),
+                  /* @__PURE__ */ jsxs32("div", { className: "flex gap-3 justify-end", children: [
+                    /* @__PURE__ */ jsx37(
                       IconPencil,
                       {
                         className: "w-[30px] h-[30px] cursor-pointer",
                         onClick: () => handleEdit(kpi.id)
                       }
                     ),
-                    /* @__PURE__ */ jsx36(
-                      IconTrash2,
+                    /* @__PURE__ */ jsx37(
+                      IconTrash3,
                       {
                         className: "w-[30px] h-[30px] cursor-pointer",
                         onClick: () => handleDelete(kpi.id)
@@ -3472,9 +3572,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__ */ jsx36(
+        type === "text" && /* @__PURE__ */ jsxs32("div", { className: "space-y-4", children: [
+          /* @__PURE__ */ jsxs32("div", { className: "grid grid-cols-[1fr_50px] w-full gap-[24px] items-start", children: [
+            /* @__PURE__ */ jsx37(
               InputField,
               {
                 value: nameKpi,
@@ -3487,26 +3587,32 @@ function KpiSection({ type, onChangeKpiList }) {
                 errorMessage: errors.nameKpi
               }
             ),
-            /* @__PURE__ */ jsx36("div", { className: "absolute top-21 right-5", children: /* @__PURE__ */ jsx36(
-              IconCirclePlus,
+            /* @__PURE__ */ jsx37(
+              "div",
               {
-                className: "w-[40px] h-[40px] cursor-pointer hover:scale-110 transition",
-                stroke: 1,
-                onClick: () => handleAddKpi(type)
+                className: `flex justify-end mt-[28px]`,
+                children: /* @__PURE__ */ jsx37(
+                  IconCirclePlus,
+                  {
+                    className: "w-[40px] h-[40px] cursor-pointer hover:scale-110 transition",
+                    stroke: 1,
+                    onClick: () => handleAddKpi(type)
+                  }
+                )
               }
-            ) })
+            )
           ] }),
-          /* @__PURE__ */ jsx36("div", { children: kpiList.map((kpi, index) => /* @__PURE__ */ jsxs31(
+          /* @__PURE__ */ jsx37("div", { children: kpiList.map((kpi, index) => /* @__PURE__ */ jsxs32(
             "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__ */ jsxs32("p", { className: `body-1 ${kpi.isEditing ? "mt-[12px]" : ""}`, children: [
                   index + 1,
                   "."
                 ] }),
-                kpi.isEditing ? /* @__PURE__ */ jsxs31(Fragment6, { children: [
-                  /* @__PURE__ */ jsx36(
+                kpi.isEditing ? /* @__PURE__ */ jsxs32(Fragment6, { children: [
+                  /* @__PURE__ */ jsx37(
                     InputField,
                     {
                       value: kpi.name,
@@ -3519,19 +3625,19 @@ function KpiSection({ type, onChangeKpiList }) {
                       errorMessage: itemErrors[kpi.id]?.name
                     }
                   ),
-                  /* @__PURE__ */ jsxs31(
+                  /* @__PURE__ */ jsxs32(
                     "div",
                     {
                       className: `flex gap-2 justify-end self-center ${!!itemErrors[kpi.id]?.name ? "mt-[-12px]" : ""}`,
                       children: [
-                        /* @__PURE__ */ jsx36(
+                        /* @__PURE__ */ jsx37(
                           IconCheck2,
                           {
                             className: "w-[30px] h-[30px] cursor-pointer",
                             onClick: () => handleSave(kpi.id, type)
                           }
                         ),
-                        /* @__PURE__ */ jsx36(
+                        /* @__PURE__ */ jsx37(
                           IconX2,
                           {
                             className: "w-[30px] h-[30px] cursor-pointer",
@@ -3541,18 +3647,18 @@ function KpiSection({ type, onChangeKpiList }) {
                       ]
                     }
                   )
-                ] }) : /* @__PURE__ */ jsxs31(Fragment6, { children: [
-                  /* @__PURE__ */ jsx36("p", { className: "body-1", children: kpi.name }),
-                  /* @__PURE__ */ jsxs31("div", { className: "flex gap-3 justify-end", children: [
-                    /* @__PURE__ */ jsx36(
+                ] }) : /* @__PURE__ */ jsxs32(Fragment6, { children: [
+                  /* @__PURE__ */ jsx37("p", { className: "body-1", children: kpi.name }),
+                  /* @__PURE__ */ jsxs32("div", { className: "flex gap-3 justify-end", children: [
+                    /* @__PURE__ */ jsx37(
                       IconPencil,
                       {
                         className: "w-[30px] h-[30px] cursor-pointer",
                         onClick: () => handleEdit(kpi.id)
                       }
                     ),
-                    /* @__PURE__ */ jsx36(
-                      IconTrash2,
+                    /* @__PURE__ */ jsx37(
+                      IconTrash3,
                       {
                         className: "w-[30px] h-[30px] cursor-pointer",
                         onClick: () => handleDelete(kpi.id)
@@ -3592,6 +3698,7 @@ export {
   Radio,
   RadioGroup,
   SecondaryButton,
+  SelectCustom,
   SelectField,
   SelectFieldGroup,
   SelectFieldStatus,