@esic-lab/data-core-ui 0.0.30 → 0.0.32

package/dist/index.mjs

@@ -324,6 +324,28 @@ var require_th = __commonJS({
   }
 });
 
+// node_modules/dayjs/plugin/buddhistEra.js
+var require_buddhistEra = __commonJS({
+  "node_modules/dayjs/plugin/buddhistEra.js"(exports, module) {
+    "use strict";
+    !(function(t, e) {
+      "object" == typeof exports && "undefined" != typeof module ? module.exports = e() : "function" == typeof define && define.amd ? define(e) : (t = "undefined" != typeof globalThis ? globalThis : t || self).dayjs_plugin_buddhistEra = e();
+    })(exports, (function() {
+      "use strict";
+      return function(t, e) {
+        var n = e.prototype, i = n.format;
+        n.format = function(t2) {
+          var e2 = this, n2 = (t2 || "YYYY-MM-DDTHH:mm:ssZ").replace(/(\[[^\]]+])|BBBB|BB/g, (function(t3, n3) {
+            var i2, o = String(e2.$y + 543), f = "BB" === t3 ? [o.slice(-2), 2] : [o, 4];
+            return n3 || (i2 = e2.$utils()).s.apply(i2, f.concat(["0"]));
+          }));
+          return i.bind(this)(n2);
+        };
+      };
+    }));
+  }
+});
+
 // node_modules/dayjs/plugin/customParseFormat.js
 var require_customParseFormat = __commonJS({
   "node_modules/dayjs/plugin/customParseFormat.js"(exports, module) {
@@ -671,23 +693,55 @@ function Switch({ label, checked, onChange, disabled }) {
   ] });
 }
 
-// src/NavBar/MenuNavBar/MenuNavBar.tsx
+// src/Switch/SwitchSelect/SwitchSelect.tsx
 import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
+function SwitchSelect({
+  option,
+  onClick,
+  value,
+  label,
+  required,
+  color
+}) {
+  return /* @__PURE__ */ jsxs8("div", { className: "flex flex-col container-input", children: [
+    label && /* @__PURE__ */ jsxs8("p", { className: `body-1`, children: [
+      label,
+      " ",
+      required && /* @__PURE__ */ jsx11("span", { className: "text-red-500", children: "*" })
+    ] }),
+    /* @__PURE__ */ jsx11("div", { className: "flex", children: option.map((item, index) => /* @__PURE__ */ jsx11(
+      "button",
+      {
+        onClick: () => onClick(item.value),
+        className: `
+            body-1 border-y-1 border-primary-500 cursor-pointer h-[32px] px-2
+        ${item.value === value ? `${color ? `bg-[${color}]` : `bg-primary-500`} text-white` : "bg-white text-primary-500"}
+        ${index === 0 ? "border-l-1 rounded-l-lg" : index === option.length - 1 ? "border-r-1 rounded-r-lg" : "border-x-1"}
+        `,
+        children: item.label
+      },
+      item.value
+    )) })
+  ] });
+}
+
+// src/NavBar/MenuNavBar/MenuNavBar.tsx
+import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
 function MenuNavBar({ menus, onClick }) {
-  return /* @__PURE__ */ jsx11("div", { className: "w-full h-full p-[10px] bg-white", children: menus?.map((menu, index) => /* @__PURE__ */ jsxs8("div", { className: `p-[10px] ${index !== 0 ? "mt-[10px]" : ""}`, children: [
-    /* @__PURE__ */ jsx11("p", { className: "p-[10px] w-[202px] h-[47px] subtitle-1", children: menu.title }),
-    menu?.subMenus.map((subMenu) => /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsx12("div", { className: "w-full h-full p-[10px] bg-white", children: menus?.map((menu, index) => /* @__PURE__ */ jsxs9("div", { className: `p-[10px] ${index !== 0 ? "mt-[10px]" : ""}`, children: [
+    /* @__PURE__ */ jsx12("p", { className: "p-[10px] w-[202px] h-[47px] subtitle-1", children: menu.title }),
+    menu?.subMenus.map((subMenu) => /* @__PURE__ */ jsxs9(
       "div",
       {
         className: "group flex justify-center items-center gap-[10px] p-[10px] w-[202px] h-[47px] rounded-[6px] subtitle-2 cursor-pointer hover:bg-red-100 active:bg-primary-500 hover:text-white active:text-white",
         onClick: () => onClick(subMenu.path),
         children: [
-          /* @__PURE__ */ jsxs8("span", { className: "flex justify-center items-center w-[24px] h-[24px] text-[20px]", children: [
-            subMenu.icon && /* @__PURE__ */ jsx11("span", { className: `block ${subMenu.iconActive ? "group-active:hidden" : ""}`, children: subMenu.icon }),
-            subMenu.iconActive && /* @__PURE__ */ jsx11("span", { className: "hidden group-active:block", children: subMenu.iconActive })
+          /* @__PURE__ */ jsxs9("span", { className: "flex justify-center items-center w-[24px] h-[24px] text-[20px]", children: [
+            subMenu.icon && /* @__PURE__ */ jsx12("span", { className: `block ${subMenu.iconActive ? "group-active:hidden" : ""}`, children: subMenu.icon }),
+            subMenu.iconActive && /* @__PURE__ */ jsx12("span", { className: "hidden group-active:block", children: subMenu.iconActive })
           ] }),
           subMenu.title,
-          /* @__PURE__ */ jsx11("span", { className: "flex ml-auto", children: subMenu.customNode && subMenu.customNode })
+          /* @__PURE__ */ jsx12("span", { className: "flex ml-auto", children: subMenu.customNode && subMenu.customNode })
         ]
       },
       `sub_${subMenu.title}`
@@ -698,39 +752,39 @@ function MenuNavBar({ menus, onClick }) {
 // src/NavBar/MenuNavBar/Sidebar.tsx
 import { IconChevronLeftPipe, IconChevronRightPipe } from "@tabler/icons-react";
 import { createContext, useContext, useState } from "react";
-import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
 var SidebarContext = createContext({ expanded: false });
 function Sidebar({ children, logo }) {
   const [expanded, setExpanded] = useState(true);
-  return /* @__PURE__ */ jsx12("aside", { className: "h-screen", children: /* @__PURE__ */ jsxs9("nav", { className: `h-full flex flex-col bg-white border-r shadow-sm duration-150 ${expanded ? "w-64" : "w-16"}`, children: [
-    /* @__PURE__ */ jsxs9("div", { className: "p-4 pb-2 flex justify-center items-center", children: [
-      expanded && logo && /* @__PURE__ */ jsx12("img", { src: logo, width: 120, className: "ml-auto" }),
-      /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx13("aside", { className: "h-screen", children: /* @__PURE__ */ jsxs10("nav", { className: `h-full flex flex-col bg-white border-r shadow-sm duration-150 ${expanded ? "w-64" : "w-16"}`, children: [
+    /* @__PURE__ */ jsxs10("div", { className: "p-4 pb-2 flex justify-center items-center", children: [
+      expanded && logo && /* @__PURE__ */ jsx13("img", { src: logo, width: 120, className: "ml-auto" }),
+      /* @__PURE__ */ jsx13(
         "button",
         {
           className: "p-1.5 rounded-lg bg-gray-50 hover:bg-gray-100 cursor-pointer ml-auto",
           onClick: () => setExpanded((curr) => !curr),
-          children: expanded ? /* @__PURE__ */ jsx12(IconChevronLeftPipe, {}) : /* @__PURE__ */ jsx12(IconChevronRightPipe, {})
+          children: expanded ? /* @__PURE__ */ jsx13(IconChevronLeftPipe, {}) : /* @__PURE__ */ jsx13(IconChevronRightPipe, {})
         }
       )
     ] }),
-    /* @__PURE__ */ jsx12(SidebarContext.Provider, { value: { expanded }, children: /* @__PURE__ */ jsx12("ul", { className: "flex-1 px-3", children }) })
+    /* @__PURE__ */ jsx13(SidebarContext.Provider, { value: { expanded }, children: /* @__PURE__ */ jsx13("ul", { className: "flex-1 px-3", children }) })
   ] }) });
 }
 
 // src/NavBar/TopNavBar/TopNavBar.tsx
 import { IconBellRinging } from "@tabler/icons-react";
-import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
 function TopNavBar({ onClickNoti, logo }) {
-  return /* @__PURE__ */ jsxs10("div", { className: "w-full h-full flex", children: [
-    /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-[20px] p-[10px]", children: [
+  return /* @__PURE__ */ jsxs11("div", { className: "w-full h-full flex", children: [
+    /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-[20px] p-[10px]", children: [
       logo,
-      /* @__PURE__ */ jsx13("p", { className: "subtitle-1", children: "Project Management" })
+      /* @__PURE__ */ jsx14("p", { className: "subtitle-1", children: "Project Management" })
     ] }),
-    /* @__PURE__ */ jsxs10("div", { className: "flex items-center ml-auto gap-[20px] p-[10px]", children: [
-      /* @__PURE__ */ jsx13("div", { children: "Search" }),
-      /* @__PURE__ */ jsx13("div", { children: /* @__PURE__ */ jsx13(IconBellRinging, { onClick: onClickNoti, className: "cursor-pointer" }) }),
-      /* @__PURE__ */ jsx13("div", { className: "w-[40px] h-[40px] bg-gray-400 rounded-full cursor-pointer" })
+    /* @__PURE__ */ jsxs11("div", { className: "flex items-center ml-auto gap-[20px] p-[10px]", children: [
+      /* @__PURE__ */ jsx14("div", { children: "Search" }),
+      /* @__PURE__ */ jsx14("div", { children: /* @__PURE__ */ jsx14(IconBellRinging, { onClick: onClickNoti, className: "cursor-pointer" }) }),
+      /* @__PURE__ */ jsx14("div", { className: "w-[40px] h-[40px] bg-gray-400 rounded-full cursor-pointer" })
     ] })
   ] });
 }
@@ -742,7 +796,7 @@ import { useState as useState2 } from "react";
 // src/Table/Pagination/Pagination.tsx
 import { IconArrowLeft, IconArrowRight } from "@tabler/icons-react";
 import { useMemo } from "react";
-import { jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
 function Pagination({ totalItems, itemsPerPage, currentPage, onPageChange }) {
   const totalPages = Math.ceil(totalItems / itemsPerPage);
   const getPages = useMemo(() => {
@@ -766,21 +820,21 @@ function Pagination({ totalItems, itemsPerPage, currentPage, onPageChange }) {
     return pages;
   }, [totalPages, currentPage]);
   if (totalPages <= 1) return null;
-  return /* @__PURE__ */ jsxs11("div", { className: "flex items-center justify-center gap-2 mt-4 body-1", children: [
-    /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsxs12("div", { className: "flex items-center justify-center gap-2 mt-4 body-1", children: [
+    /* @__PURE__ */ jsxs12(
       "button",
       {
         className: "px-3 py-1 disabled:opacity-50 flex gap-[8px] cursor-pointer",
         disabled: currentPage === 1,
         onClick: () => onPageChange(currentPage - 1),
         children: [
-          /* @__PURE__ */ jsx14(IconArrowLeft, {}),
+          /* @__PURE__ */ jsx15(IconArrowLeft, {}),
           "\u0E22\u0E49\u0E2D\u0E19\u0E01\u0E25\u0E31\u0E1A"
         ]
       }
     ),
     getPages.map(
-      (page, i) => typeof page === "string" ? /* @__PURE__ */ jsx14("span", { className: "px-2", children: page }, i) : /* @__PURE__ */ jsx14(
+      (page, i) => typeof page === "string" ? /* @__PURE__ */ jsx15("span", { className: "px-2", children: page }, i) : /* @__PURE__ */ jsx15(
         "button",
         {
           className: `w-[32px] h-[32px] rounded-[8px] px-3 py-1 cursor-pointer 
@@ -791,7 +845,7 @@ function Pagination({ totalItems, itemsPerPage, currentPage, onPageChange }) {
         i
       )
     ),
-    /* @__PURE__ */ jsxs11(
+    /* @__PURE__ */ jsxs12(
       "button",
       {
         className: "px-3 py-1 disabled:opacity-50 flex gap-[8px] cursor-pointer",
@@ -799,7 +853,7 @@ function Pagination({ totalItems, itemsPerPage, currentPage, onPageChange }) {
         onClick: () => onPageChange(currentPage + 1),
         children: [
           "\u0E16\u0E31\u0E14\u0E44\u0E1B",
-          /* @__PURE__ */ jsx14(IconArrowRight, {})
+          /* @__PURE__ */ jsx15(IconArrowRight, {})
         ]
       }
     )
@@ -807,7 +861,7 @@ function Pagination({ totalItems, itemsPerPage, currentPage, onPageChange }) {
 }
 
 // src/Table/DataTable/DataTable.tsx
-import { Fragment, jsx as jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx16, jsxs as jsxs13 } from "react/jsx-runtime";
 function DataTable({ columns, data, onSort, isLoading }) {
   const cols = Math.max(1, columns.length);
   const gridClass = "grid [grid-template-columns:repeat(var(--cols),minmax(0,1fr))]";
@@ -819,14 +873,14 @@ function DataTable({ columns, data, onSort, isLoading }) {
       onSort();
     }
   };
-  return /* @__PURE__ */ jsxs12("div", { className: "border rounded-md w-full h-full", children: [
-    /* @__PURE__ */ jsx15("div", { className: `${gridClass} font-semibold border-b border-gray-200`, style: { ["--cols"]: cols }, children: columns.map((col, i) => {
+  return /* @__PURE__ */ jsxs13("div", { className: "border rounded-md w-full h-full", children: [
+    /* @__PURE__ */ jsx16("div", { className: `${gridClass} font-semibold border-b border-gray-200`, style: { ["--cols"]: cols }, children: columns.map((col, i) => {
       const isActive = sortConfig?.key === col.accessor;
       const direction = isActive ? sortConfig?.direction : null;
-      return /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-[8px] py-[8px] px-[16px] body-4 truncate", children: [
+      return /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-[8px] py-[8px] px-[16px] body-4 truncate", children: [
         col.header,
-        col.sortable && /* @__PURE__ */ jsxs12(Fragment, { children: [
-          direction === null && /* @__PURE__ */ jsx15(
+        col.sortable && /* @__PURE__ */ jsxs13(Fragment, { children: [
+          direction === null && /* @__PURE__ */ jsx16(
             IconSelector,
             {
               size: 15,
@@ -834,7 +888,7 @@ function DataTable({ columns, data, onSort, isLoading }) {
               onClick: () => onSorting({ key: col.accessor, direction: "asc" })
             }
           ),
-          direction === "asc" && /* @__PURE__ */ jsx15(
+          direction === "asc" && /* @__PURE__ */ jsx16(
             IconSortAscending,
             {
               size: 15,
@@ -842,7 +896,7 @@ function DataTable({ columns, data, onSort, isLoading }) {
               onClick: () => onSorting({ key: col.accessor, direction: "desc" })
             }
           ),
-          direction === "desc" && /* @__PURE__ */ jsx15(
+          direction === "desc" && /* @__PURE__ */ jsx16(
             IconSortDescending,
             {
               size: 15,
@@ -853,29 +907,32 @@ function DataTable({ columns, data, onSort, isLoading }) {
         ] })
       ] }, i);
     }) }),
-    isLoading ? /* @__PURE__ */ jsx15("div", { className: "flex justify-center items-center w-full h-full", children: /* @__PURE__ */ jsx15(Loader, {}) }) : /* @__PURE__ */ jsx15(Fragment, { children: data.map((row, i) => /* @__PURE__ */ jsx15(
+    isLoading ? /* @__PURE__ */ jsx16("div", { className: "flex justify-center items-center w-full h-full", children: /* @__PURE__ */ jsx16(Loader, {}) }) : /* @__PURE__ */ jsx16(Fragment, { children: data.map((row, i) => /* @__PURE__ */ jsx16(
       "div",
       {
         className: `${gridClass} ${data.length - 1 !== i ? "border-b border-gray-200" : ""} items-center`,
         style: { ["--cols"]: cols },
-        children: columns.map((col, c) => /* @__PURE__ */ jsx15("div", { className: "py-[8px] px-[16px] body-3 truncate", children: typeof col.accessor === "function" ? col.accessor(row) : String(row[col.accessor]) }, c))
+        children: columns.map((col, c) => /* @__PURE__ */ jsx16("div", { className: "py-[8px] px-[16px] body-3 truncate", children: typeof col.accessor === "function" ? col.accessor(row) : String(row[col.accessor]) }, c))
       },
       i
     )) }),
-    /* @__PURE__ */ jsx15("div", { children: /* @__PURE__ */ jsx15(Pagination, { currentPage: page, itemsPerPage: 5, totalItems: 10, onPageChange: setPage }) })
+    /* @__PURE__ */ jsx16("div", { children: /* @__PURE__ */ jsx16(Pagination, { currentPage: page, itemsPerPage: 5, totalItems: 10, onPageChange: setPage }) })
   ] });
 }
 
 // src/Table/DataTable/AntDataTable.tsx
 import { ConfigProvider, Table } from "antd";
 import { useState as useState3 } from "react";
-import { Fragment as Fragment2, jsx as jsx16 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx17 } from "react/jsx-runtime";
 function AntDataTable({
   dataSource,
   columns,
   pageSize = 10,
   rowCheckbox,
   onRowSelect,
+  // onFilteredDataChange,
+  onFilter,
+  onChange,
   width,
   height,
   pagination
@@ -888,7 +945,11 @@ function AntDataTable({
       onRowSelect && onRowSelect(newSelectedRowKeys);
     }
   };
-  return /* @__PURE__ */ jsx16(Fragment2, { children: /* @__PURE__ */ jsx16(
+  const handleChange = (paginationArgs, filters, sorter, extra) => {
+    onChange?.(paginationArgs, filters, sorter, extra);
+    onFilter(filters);
+  };
+  return /* @__PURE__ */ jsx17(Fragment2, { children: /* @__PURE__ */ jsx17(
     ConfigProvider,
     {
       theme: {
@@ -898,12 +959,13 @@ function AntDataTable({
           fontSize: 14
         }
       },
-      children: /* @__PURE__ */ jsx16(
+      children: /* @__PURE__ */ jsx17(
         Table,
         {
           dataSource,
           columns,
           rowSelection: rowCheckbox ? rowSelection : void 0,
+          onChange: handleChange,
           pagination: pagination ? { position: ["bottomCenter"], pageSize } : false,
           style: { width },
           scroll: { y: height }
@@ -921,7 +983,7 @@ import timeGridPlugin from "@fullcalendar/timegrid";
 import interactionPlugin from "@fullcalendar/interaction";
 import thLocale from "@fullcalendar/core/locales/th";
 import { IconChevronLeft, IconChevronRight, IconX } from "@tabler/icons-react";
-import { Fragment as Fragment3, jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
 function Calendar({ events }) {
   const calendarRef = useRef(null);
   const [monthTitle, setMonthTitle] = useState4("");
@@ -940,11 +1002,11 @@ function Calendar({ events }) {
   useEffect(() => {
     updateTitle();
   }, []);
-  return /* @__PURE__ */ jsxs13("div", { className: "fc w-full h-full relative z-10", children: [
-    /* @__PURE__ */ jsxs13("div", { className: "flex mb-[8px]", children: [
-      /* @__PURE__ */ jsx17("p", { className: "headline-5", children: monthTitle }),
-      /* @__PURE__ */ jsxs13("div", { className: "flex gap-[10px] ml-auto", children: [
-        /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsxs14("div", { className: "fc w-full h-full relative z-10", children: [
+    /* @__PURE__ */ jsxs14("div", { className: "flex mb-[8px]", children: [
+      /* @__PURE__ */ jsx18("p", { className: "headline-5", children: monthTitle }),
+      /* @__PURE__ */ jsxs14("div", { className: "flex gap-[10px] ml-auto", children: [
+        /* @__PURE__ */ jsx18(
           "p",
           {
             className: "w-[80px] h-[35px] border-[1px] flex justify-center items-center rounded-[2px] body-3 cursor-pointer",
@@ -955,7 +1017,7 @@ function Calendar({ events }) {
             children: "\u0E27\u0E31\u0E19\u0E19\u0E35\u0E49"
           }
         ),
-        /* @__PURE__ */ jsx17(
+        /* @__PURE__ */ jsx18(
           "p",
           {
             className: "w-[80px] h-[35px] border-[1px] flex justify-center items-center rounded-[2px] body-3 cursor-pointer",
@@ -966,7 +1028,7 @@ function Calendar({ events }) {
             children: "Month"
           }
         ),
-        /* @__PURE__ */ jsx17(
+        /* @__PURE__ */ jsx18(
           "p",
           {
             className: "w-[80px] h-[35px] border-[1px] flex justify-center items-center rounded-[2px] body-3 cursor-pointer",
@@ -977,7 +1039,7 @@ function Calendar({ events }) {
             children: "Week"
           }
         ),
-        /* @__PURE__ */ jsx17(
+        /* @__PURE__ */ jsx18(
           "p",
           {
             className: "w-[80px] h-[35px] border-[1px] flex justify-center items-center rounded-[2px] body-3 cursor-pointer",
@@ -988,7 +1050,7 @@ function Calendar({ events }) {
             children: "Day"
           }
         ),
-        /* @__PURE__ */ jsx17(
+        /* @__PURE__ */ jsx18(
           "button",
           {
             className: "cursor-pointer",
@@ -996,10 +1058,10 @@ function Calendar({ events }) {
               calendarRef.current?.getApi().prev();
               updateTitle();
             },
-            children: /* @__PURE__ */ jsx17(IconChevronLeft, {})
+            children: /* @__PURE__ */ jsx18(IconChevronLeft, {})
           }
         ),
-        /* @__PURE__ */ jsx17(
+        /* @__PURE__ */ jsx18(
           "button",
           {
             className: "cursor-pointer",
@@ -1007,12 +1069,12 @@ function Calendar({ events }) {
               calendarRef.current?.getApi().next();
               updateTitle();
             },
-            children: /* @__PURE__ */ jsx17(IconChevronRight, {})
+            children: /* @__PURE__ */ jsx18(IconChevronRight, {})
           }
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsx17("div", { className: "relative z-10", children: /* @__PURE__ */ jsx17(
+    /* @__PURE__ */ jsx18("div", { className: "relative z-10", children: /* @__PURE__ */ jsx18(
       FullCalendar,
       {
         ref: calendarRef,
@@ -1041,28 +1103,28 @@ function Calendar({ events }) {
           });
         },
         eventContent: (arg) => {
-          return /* @__PURE__ */ jsx17(Fragment3, { children: /* @__PURE__ */ jsx17("div", { className: "flex items-center h-[28px] p-[4px] border-green-500 border-l-[10px] bg-red-400 rounded text-left text-white caption-1", children: arg.event.title }) });
+          return /* @__PURE__ */ jsx18(Fragment3, { children: /* @__PURE__ */ jsx18("div", { className: "flex items-center h-[28px] p-[4px] border-green-500 border-l-[10px] bg-red-400 rounded text-left text-white caption-1", children: arg.event.title }) });
         },
         moreLinkContent: (arg) => `+${arg.num} \u0E23\u0E32\u0E22\u0E01\u0E32\u0E23`
       }
     ) }),
-    openPopup && /* @__PURE__ */ jsx17("div", { className: "fixed inset-0 flex justify-center items-center bg-black/50 z-50", children: /* @__PURE__ */ jsx17(EventPopUp, { event: selectedEvent, onClose: () => setOpenPopup(false) }) })
+    openPopup && /* @__PURE__ */ jsx18("div", { className: "fixed inset-0 flex justify-center items-center bg-black/50 z-50", children: /* @__PURE__ */ jsx18(EventPopUp, { event: selectedEvent, onClose: () => setOpenPopup(false) }) })
   ] });
 }
 function EventPopUp({ event, onClose }) {
-  return /* @__PURE__ */ jsxs13("div", { className: "w-[500px] h-auto rounded-2xl bg-white relative z-50 shadow-2xl overflow-hidden", children: [
-    /* @__PURE__ */ jsx17("button", { className: "absolute top-3 right-3 rounded-full p-1 hover:bg-gray-200 transition", onClick: onClose, children: /* @__PURE__ */ jsx17(IconX, { className: "w-6 h-6 text-gray-600" }) }),
-    /* @__PURE__ */ jsx17("div", { className: "bg-red-400 text-left text-white px-6 py-4 headline-5", children: /* @__PURE__ */ jsx17("h2", { className: "text-lg font-semibold", children: event.title }) }),
-    /* @__PURE__ */ jsxs13("div", { className: "flex flex-col w-full p-6 gap-3 text-gray-700 body-3", children: [
-      /* @__PURE__ */ jsxs13("p", { children: [
-        /* @__PURE__ */ jsx17("span", { className: "font-medium", children: "\u0E40\u0E23\u0E34\u0E48\u0E21: " }),
+  return /* @__PURE__ */ jsxs14("div", { className: "w-[500px] h-auto rounded-2xl bg-white relative z-50 shadow-2xl overflow-hidden", children: [
+    /* @__PURE__ */ jsx18("button", { className: "absolute top-3 right-3 rounded-full p-1 hover:bg-gray-200 transition", onClick: onClose, children: /* @__PURE__ */ jsx18(IconX, { className: "w-6 h-6 text-gray-600" }) }),
+    /* @__PURE__ */ jsx18("div", { className: "bg-red-400 text-left text-white px-6 py-4 headline-5", children: /* @__PURE__ */ jsx18("h2", { className: "text-lg font-semibold", children: event.title }) }),
+    /* @__PURE__ */ jsxs14("div", { className: "flex flex-col w-full p-6 gap-3 text-gray-700 body-3", children: [
+      /* @__PURE__ */ jsxs14("p", { children: [
+        /* @__PURE__ */ jsx18("span", { className: "font-medium", children: "\u0E40\u0E23\u0E34\u0E48\u0E21: " }),
         event?.start?.toLocaleString?.() || String(event?.start)
       ] }),
-      /* @__PURE__ */ jsxs13("p", { children: [
-        /* @__PURE__ */ jsx17("span", { className: "font-medium", children: "\u0E2A\u0E34\u0E49\u0E19\u0E2A\u0E38\u0E14: " }),
+      /* @__PURE__ */ jsxs14("p", { children: [
+        /* @__PURE__ */ jsx18("span", { className: "font-medium", children: "\u0E2A\u0E34\u0E49\u0E19\u0E2A\u0E38\u0E14: " }),
         event?.end?.toLocaleString?.() || String(event?.end)
       ] }),
-      /* @__PURE__ */ jsx17("h3", { className: "text-sm font-semibold text-gray-500 uppercase mb-2 hover:underline cursor-pointer", children: "\u0E23\u0E32\u0E22\u0E25\u0E30\u0E40\u0E2D\u0E35\u0E22\u0E14\u0E40\u0E1E\u0E34\u0E48\u0E21\u0E40\u0E15\u0E34\u0E21" })
+      /* @__PURE__ */ jsx18("h3", { className: "text-sm font-semibold text-gray-500 uppercase mb-2 hover:underline cursor-pointer", children: "\u0E23\u0E32\u0E22\u0E25\u0E30\u0E40\u0E2D\u0E35\u0E22\u0E14\u0E40\u0E1E\u0E34\u0E48\u0E21\u0E40\u0E15\u0E34\u0E21" })
     ] })
   ] });
 }
@@ -1070,7 +1132,7 @@ function EventPopUp({ event, onClose }) {
 // src/Input/TextInput/TextInput.tsx
 import { IconEye, IconEyeOff } from "@tabler/icons-react";
 import { useState as useState5 } from "react";
-import { jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
 function TextInput({
   label,
   placeholder,
@@ -1087,18 +1149,18 @@ function TextInput({
     setShowPassword(!showPassword);
   };
   const inputType = type === "password" ? showPassword ? "text" : "password" : "text";
-  return /* @__PURE__ */ jsxs14("div", { children: [
-    label && /* @__PURE__ */ jsxs14("p", { className: "body-1 mb-[8px]", children: [
+  return /* @__PURE__ */ jsxs15("div", { children: [
+    label && /* @__PURE__ */ jsxs15("p", { className: "body-1 mb-[8px]", children: [
       label,
-      required && /* @__PURE__ */ jsx18("span", { className: "text-red-600", children: "\xA0*" })
+      required && /* @__PURE__ */ jsx19("span", { className: "text-red-500", children: "\xA0*" })
     ] }),
-    /* @__PURE__ */ jsxs14(
+    /* @__PURE__ */ jsxs15(
       "div",
       {
         className: `border-[1px] rounded-[8px] w-full h-[40px] flex justify-center items-center 
-        ${disabled ? "bg-gray-100 text-gray-400" : error ? "border-red-600" : ""}`,
+        ${disabled ? "bg-gray-100 text-gray-400" : error ? "border-red-500" : ""}`,
         children: [
-          /* @__PURE__ */ jsx18(
+          /* @__PURE__ */ jsx19(
             "input",
             {
               className: `w-full h-full px-[16px] ${disabled ? "cursor-not-allowed" : ""}`,
@@ -1111,17 +1173,17 @@ function TextInput({
               disabled
             }
           ),
-          type === "password" && (showPassword ? /* @__PURE__ */ jsx18(IconEye, { className: "text-gray-600 mr-[8px] cursor-pointer", onClick: onShowPassword }) : /* @__PURE__ */ jsx18(IconEyeOff, { className: "text-gray-600 mr-[8px] cursor-pointer", onClick: onShowPassword }))
+          type === "password" && (showPassword ? /* @__PURE__ */ jsx19(IconEye, { className: "text-gray-600 mr-[8px] cursor-pointer", onClick: onShowPassword }) : /* @__PURE__ */ jsx19(IconEyeOff, { className: "text-gray-600 mr-[8px] cursor-pointer", onClick: onShowPassword }))
         ]
       }
     ),
-    error && /* @__PURE__ */ jsx18("p", { className: "text-red-600 body-1", children: error })
+    error && /* @__PURE__ */ jsx19("p", { className: "text-red-500 body-1", children: error })
   ] });
 }
 
 // src/Input/TextArea/TextArea.tsx
 import { ConfigProvider as ConfigProvider2, Input } from "antd";
-import { Fragment as Fragment4, jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
 var { TextArea } = Input;
 function TextAreaInput({
   label,
@@ -1136,7 +1198,7 @@ function TextAreaInput({
   error,
   disabled
 }) {
-  return /* @__PURE__ */ jsx19(Fragment4, { children: /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsx20(Fragment4, { children: /* @__PURE__ */ jsx20(
     ConfigProvider2,
     {
       theme: {
@@ -1146,13 +1208,13 @@ function TextAreaInput({
           fontSize: 16
         }
       },
-      children: /* @__PURE__ */ jsxs15("div", { children: [
-        label && /* @__PURE__ */ jsxs15("p", { className: "body-1 mb-[8px]", children: [
+      children: /* @__PURE__ */ jsxs16("div", { children: [
+        label && /* @__PURE__ */ jsxs16("p", { className: "body-1 mb-[8px]", children: [
           label,
           " ",
-          required && /* @__PURE__ */ jsx19("span", { className: "text-red-500", children: "\xA0*" })
+          required && /* @__PURE__ */ jsx20("span", { className: "text-red-500", children: "\xA0*" })
         ] }),
-        /* @__PURE__ */ jsx19(
+        /* @__PURE__ */ jsx20(
           TextArea,
           {
             value,
@@ -1168,31 +1230,31 @@ function TextAreaInput({
             disabled
           }
         ),
-        error && /* @__PURE__ */ jsx19("p", { className: "text-red-600 body-1", children: error })
+        error && /* @__PURE__ */ jsx20("p", { className: "text-red-500 body-1", children: error })
       ] })
     }
   ) });
 }
 
 // src/Input/InputField/InputField.tsx
-import { ConfigProvider as ConfigProvider3, Input as Input2 } from "antd";
-import { jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
+import { ConfigProvider as ConfigProvider3, Input as Input2, Space } from "antd";
+import { jsx as jsx21, jsxs as jsxs17 } from "react/jsx-runtime";
 function InputField({
   value,
   onChange,
   placeholder = "\u0E42\u0E1B\u0E23\u0E14\u0E23\u0E30\u0E1A\u0E38",
-  title,
+  label,
   required,
-  bottomText,
   disabled,
   error,
   addonBefore,
   addonAfter,
   defaultValue,
   className,
-  onClear
+  onClear,
+  statickey
 }) {
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx21(
     ConfigProvider3,
     {
       theme: {
@@ -1200,32 +1262,31 @@ function InputField({
           fontFamily: "Kanit"
         }
       },
-      children: /* @__PURE__ */ jsxs16("div", { className: "container-input", children: [
-        /* @__PURE__ */ jsxs16("div", { children: [
-          /* @__PURE__ */ jsx20("span", { className: "body-1", children: title }),
+      children: /* @__PURE__ */ jsxs17("div", { className: "container-input", children: [
+        /* @__PURE__ */ jsxs17("div", { children: [
+          /* @__PURE__ */ jsx21("span", { className: "body-1", children: label }),
           " ",
-          required && /* @__PURE__ */ jsx20("span", { className: "text-red-500", children: "*" })
+          required && /* @__PURE__ */ jsx21("span", { className: "text-red-500", children: "*" })
         ] }),
-        /* @__PURE__ */ jsx20(
-          Input2,
-          {
-            value,
-            placeholder,
-            disabled,
-            className: `body-1 w-full ${className ?? ""}`,
-            onChange: (e) => onChange(e.target.value || void 0),
-            allowClear: true,
-            addonBefore,
-            addonAfter,
-            defaultValue,
-            onClear
-          }
-        ),
-        /* @__PURE__ */ jsxs16("div", { children: [
-          /* @__PURE__ */ jsx20("p", { className: "caption-1 text-gray-500", children: bottomText }),
-          " ",
-          error && /* @__PURE__ */ jsx20("p", { className: "caption-1 text-red-500 ", children: error })
-        ] })
+        /* @__PURE__ */ jsxs17(Space.Compact, { children: [
+          statickey && /* @__PURE__ */ jsx21("span", { className: "items-center flex px-2 bg-gray-300 rounded-l-md body-1", children: statickey }),
+          /* @__PURE__ */ jsx21(
+            Input2,
+            {
+              value,
+              placeholder,
+              disabled,
+              className: `body-1 w-full ${className ?? ""}`,
+              onChange: (e) => onChange(e.target.value || void 0),
+              allowClear: true,
+              addonBefore,
+              addonAfter,
+              defaultValue,
+              onClear
+            }
+          )
+        ] }),
+        error && /* @__PURE__ */ jsx21("p", { className: "text-red-500 caption-1", children: error })
       ] })
     }
   );
@@ -1233,12 +1294,12 @@ function InputField({
 
 // src/Input/InputFieldNumber/InputFieldNumber.tsx
 import { ConfigProvider as ConfigProvider4, InputNumber } from "antd";
-import { jsx as jsx21, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs18 } from "react/jsx-runtime";
 function InputFieldNumber({
   value,
   onChange,
   placeholder = "\u0E42\u0E1B\u0E23\u0E14\u0E23\u0E30\u0E1A\u0E38",
-  title,
+  label,
   required,
   disabled,
   error,
@@ -1254,7 +1315,7 @@ function InputFieldNumber({
   formatter,
   parser
 }) {
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx22(
     ConfigProvider4,
     {
       theme: {
@@ -1262,20 +1323,20 @@ function InputFieldNumber({
           fontFamily: "Kanit"
         }
       },
-      children: /* @__PURE__ */ jsxs17("div", { className: "container-input", children: [
-        /* @__PURE__ */ jsxs17("div", { children: [
-          /* @__PURE__ */ jsx21("span", { className: "body-1", children: title }),
+      children: /* @__PURE__ */ jsxs18("div", { className: "container-input", children: [
+        /* @__PURE__ */ jsxs18("div", { children: [
+          /* @__PURE__ */ jsx22("span", { className: "body-1", children: label }),
           " ",
-          required && /* @__PURE__ */ jsx21("span", { className: "text-red-500", children: "*" })
+          required && /* @__PURE__ */ jsx22("span", { className: "text-red-500", children: "*" })
         ] }),
-        /* @__PURE__ */ jsx21(
+        /* @__PURE__ */ jsx22(
           InputNumber,
           {
             value: value ?? void 0,
             onChange: (val) => onChange(val),
             placeholder,
             disabled,
-            className: `body-1 w-full ${className ?? ""}`,
+            className: `body-1 !w-full ${className ?? ""}`,
             addonBefore,
             addonAfter,
             defaultValue,
@@ -1288,7 +1349,7 @@ function InputFieldNumber({
             parser
           }
         ),
-        error && /* @__PURE__ */ jsx21("p", { className: "text-red-500 caption-1", children: error })
+        error && /* @__PURE__ */ jsx22("p", { className: "text-red-500 caption-1", children: error })
       ] })
     }
   );
@@ -1297,15 +1358,19 @@ function InputFieldNumber({
 // src/DatePicker/DatePickerBasic/DatePickerBasic.tsx
 var import_dayjs = __toESM(require_dayjs_min());
 var import_th2 = __toESM(require_th());
+var import_buddhistEra = __toESM(require_buddhistEra());
 import { ConfigProvider as ConfigProvider5, DatePicker } from "antd";
+import th from "antd/es/date-picker/locale/th_TH";
 import thTH from "antd/locale/th_TH";
-import { jsx as jsx22, jsxs as jsxs18 } from "react/jsx-runtime";
+import { th as thFns } from "date-fns/locale";
+import { format } from "date-fns";
+import { jsx as jsx23, jsxs as jsxs19 } from "react/jsx-runtime";
+import_dayjs.default.extend(import_buddhistEra.default);
 function DatePickerBasic({
   value,
   onChange,
   required,
-  title,
-  bottomText,
+  label,
   error,
   placeholder = "\u0E01\u0E23\u0E38\u0E13\u0E32\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E27\u0E31\u0E19\u0E17\u0E35\u0E48",
   disabled,
@@ -1318,7 +1383,17 @@ function DatePickerBasic({
 }) {
   const dateFormat = "DD/MM/YYYY";
   import_dayjs.default.locale("th_TH");
-  return /* @__PURE__ */ jsx22(
+  const buddhistLocale = {
+    ...th,
+    lang: {
+      ...th.lang,
+      fieldDateFormat: "BBBB-MM-DD",
+      fieldDateTimeFormat: "BBBB-MM-DD HH:mm:ss",
+      yearFormat: "BBBB",
+      cellYearFormat: "BBBB"
+    }
+  };
+  return /* @__PURE__ */ jsx23(
     ConfigProvider5,
     {
       locale: thTH,
@@ -1328,13 +1403,13 @@ function DatePickerBasic({
           fontSize: 16
         }
       },
-      children: /* @__PURE__ */ jsxs18("div", { className: "container-input", children: [
-        /* @__PURE__ */ jsxs18("div", { children: [
-          /* @__PURE__ */ jsx22("span", { className: "body-1", children: title }),
+      children: /* @__PURE__ */ jsxs19("div", { className: "container-input", children: [
+        /* @__PURE__ */ jsxs19("div", { children: [
+          /* @__PURE__ */ jsx23("span", { className: "body-1", children: label }),
           " ",
-          required && /* @__PURE__ */ jsx22("span", { className: "text-red-500", children: "*" })
+          required && /* @__PURE__ */ jsx23("span", { className: "text-red-500", children: "*" })
         ] }),
-        /* @__PURE__ */ jsx22(
+        /* @__PURE__ */ jsx23(
           DatePicker,
           {
             className: `body-1 w-full ${className ?? ""}`,
@@ -1343,19 +1418,19 @@ function DatePickerBasic({
             onChange,
             allowClear: true,
             disabled,
-            format: dateFormat,
+            format: (date) => date ? format(date.toDate(), "dd/MM/yyyy", { locale: thFns }).replace(
+              /\d{4}$/,
+              (y) => String(parseInt(y) + 543)
+            ) : "",
             defaultValue,
-            minDate,
-            maxDate,
-            disabledDate,
-            size
+            disabledDate: (d) => disabledDate ? disabledDate(d.toDate()) : false,
+            minDate: minDate ? (0, import_dayjs.default)(minDate) : void 0,
+            maxDate: maxDate ? (0, import_dayjs.default)(maxDate) : void 0,
+            size,
+            locale: buddhistLocale
           }
         ),
-        /* @__PURE__ */ jsxs18("div", { children: [
-          /* @__PURE__ */ jsx22("p", { className: "caption-1 text-gray-500", children: bottomText }),
-          " ",
-          error && /* @__PURE__ */ jsx22("p", { className: "caption-1 text-red-500 ", children: error })
-        ] })
+        error && /* @__PURE__ */ jsx23("p", { className: "text-red-500 caption-1", children: error })
       ] })
     }
   );
@@ -1367,15 +1442,17 @@ var import_customParseFormat = __toESM(require_customParseFormat());
 var import_dayjs2 = __toESM(require_dayjs_min());
 import { ConfigProvider as ConfigProvider6, DatePicker as DatePicker2 } from "antd";
 import thTH2 from "antd/locale/th_TH";
-import { jsx as jsx23, jsxs as jsxs19 } from "react/jsx-runtime";
+import th2 from "antd/es/date-picker/locale/th_TH";
+import { format as format2 } from "date-fns";
+import { th as thFns2 } from "date-fns/locale";
+import { jsx as jsx24, jsxs as jsxs20 } from "react/jsx-runtime";
 import_dayjs2.default.extend(import_customParseFormat.default);
 function DatePickerRangePicker({
   value,
   onChange,
   placeholder = ["\u0E40\u0E23\u0E34\u0E48\u0E21\u0E15\u0E49\u0E19", "\u0E2A\u0E34\u0E49\u0E19\u0E2A\u0E38\u0E14"],
-  title,
+  label,
   required,
-  bottomText,
   error,
   disabled,
   minDate,
@@ -1388,7 +1465,17 @@ function DatePickerRangePicker({
 }) {
   const dateFormat = "DD/MM/YYYY";
   import_dayjs2.default.locale("th_TH");
-  return /* @__PURE__ */ jsx23(
+  const buddhistLocale = {
+    ...th2,
+    lang: {
+      ...th2.lang,
+      fieldDateFormat: "BBBB-MM-DD",
+      fieldDateTimeFormat: "BBBB-MM-DD HH:mm:ss",
+      yearFormat: "BBBB",
+      cellYearFormat: "BBBB"
+    }
+  };
+  return /* @__PURE__ */ jsx24(
     ConfigProvider6,
     {
       locale: thTH2,
@@ -1398,135 +1485,156 @@ function DatePickerRangePicker({
           fontSize: 16
         }
       },
-      children: /* @__PURE__ */ jsxs19("div", { className: "container-input", children: [
-        /* @__PURE__ */ jsxs19("div", { children: [
-          /* @__PURE__ */ jsx23("span", { className: "body-1", children: title }),
+      children: /* @__PURE__ */ jsxs20("div", { className: "container-input", children: [
+        /* @__PURE__ */ jsxs20("div", { children: [
+          /* @__PURE__ */ jsx24("span", { className: "body-1", children: label }),
           " ",
-          required && /* @__PURE__ */ jsx23("span", { className: "text-red-500", children: "*" })
+          required && /* @__PURE__ */ jsx24("span", { className: "text-red-500", children: "*" })
         ] }),
-        /* @__PURE__ */ jsx23(
+        /* @__PURE__ */ jsx24(
           DatePicker2.RangePicker,
           {
-            format: dateFormat,
-            value,
+            format: (date) => date ? format2(date.toDate(), "dd/MM/yyyy", { locale: thFns2 }).replace(
+              /\d{4}$/,
+              (y) => String(parseInt(y) + 543)
+            ) : "",
+            value: value ? [value[0] ? (0, import_dayjs2.default)(value[0]) : null, value[1] ? (0, import_dayjs2.default)(value[1]) : null] : null,
             placeholder,
             className: `body-1 w-full ${className ?? ""}`,
-            onChange,
+            onChange: (dates, dateStrings) => {
+              if (!dates) {
+                onChange(null);
+              } else {
+                onChange([dates[0] ? dates[0].toDate() : null, dates[1] ? dates[1].toDate() : null]);
+              }
+            },
             allowClear: true,
             disabled,
-            minDate,
-            maxDate,
-            disabledDate,
+            minDate: minDate ? (0, import_dayjs2.default)(minDate) : void 0,
+            maxDate: maxDate ? (0, import_dayjs2.default)(maxDate) : void 0,
+            disabledDate: (d) => disabledDate ? disabledDate(d.toDate()) : false,
             size,
             onOpenChange,
-            onCalendarChange
+            onCalendarChange: (dates, dateStrings, info) => {
+              if (!dates) {
+                onCalendarChange?.([null, null], dateStrings, info);
+              } else {
+                onCalendarChange?.(
+                  [dates[0] ? dates[0].toDate() : null, dates[1] ? dates[1].toDate() : null],
+                  dateStrings,
+                  info
+                );
+              }
+            },
+            locale: buddhistLocale
           }
         ),
-        /* @__PURE__ */ jsxs19("div", { children: [
-          /* @__PURE__ */ jsx23("p", { className: "caption-1 text-gray-500", children: bottomText }),
-          " ",
-          error && /* @__PURE__ */ jsx23("p", { className: "caption-1 text-red-500 ", children: error })
-        ] })
+        error && /* @__PURE__ */ jsx24("p", { className: "text-red-500 caption-1", children: error })
       ] })
     }
   );
 }
 
 // src/TimePicker/TimePickerBasic/TimePickerBasic.tsx
+var import_dayjs3 = __toESM(require_dayjs_min());
 import { ConfigProvider as ConfigProvider7, TimePicker } from "antd";
-import { jsx as jsx24, jsxs as jsxs20 } from "react/jsx-runtime";
+import thTH3 from "antd/locale/th_TH";
+import { jsx as jsx25, jsxs as jsxs21 } from "react/jsx-runtime";
 function TimePickerBasic({
   value,
   onChange,
   required,
-  title,
-  bottomText,
+  label,
   error,
   placeholder,
   disabled,
   className
 }) {
-  return /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx25(
     ConfigProvider7,
     {
+      locale: thTH3,
       theme: {
         token: {
           fontFamily: "Kanit"
         }
       },
-      children: /* @__PURE__ */ jsxs20("div", { className: "container-input", children: [
-        /* @__PURE__ */ jsxs20("div", { children: [
-          /* @__PURE__ */ jsx24("span", { className: "body-1", children: title }),
+      children: /* @__PURE__ */ jsxs21("div", { className: "container-input", children: [
+        /* @__PURE__ */ jsxs21("div", { children: [
+          /* @__PURE__ */ jsx25("span", { className: "body-1", children: label }),
           " ",
-          required && /* @__PURE__ */ jsx24("span", { className: "text-red-500", children: "*" })
+          required && /* @__PURE__ */ jsx25("span", { className: "text-red-500", children: "*" })
         ] }),
-        /* @__PURE__ */ jsx24(
+        /* @__PURE__ */ jsx25(
           TimePicker,
           {
             format: "HH:mm",
             className: `body-1 w-full ${className ?? ""}`,
-            value,
+            value: value ? (0, import_dayjs3.default)(value) : null,
             placeholder,
-            onChange,
+            onChange: (time) => {
+              onChange(time ? time.toDate() : null);
+            },
             allowClear: true,
             disabled
           }
         ),
-        /* @__PURE__ */ jsxs20("div", { children: [
-          /* @__PURE__ */ jsx24("p", { className: "caption-1 text-gray-500", children: bottomText }),
-          " ",
-          error && /* @__PURE__ */ jsx24("p", { className: "caption-1 text-red-500 ", children: error })
-        ] })
+        error && /* @__PURE__ */ jsx25("p", { className: "text-red-500 caption-1", children: error })
       ] })
     }
   );
 }
 
 // src/TimePicker/TimePickerRangePicker/TimerPickerRangePicker.tsx
+var import_dayjs4 = __toESM(require_dayjs_min());
 import { ConfigProvider as ConfigProvider8, TimePicker as TimePicker2 } from "antd";
-import { jsx as jsx25, jsxs as jsxs21 } from "react/jsx-runtime";
+import thTH4 from "antd/locale/th_TH";
+import { jsx as jsx26, jsxs as jsxs22 } from "react/jsx-runtime";
 function TimePickerRangePicker({
   value,
   onChange,
   placeholder = ["\u0E40\u0E23\u0E34\u0E48\u0E21\u0E15\u0E49\u0E19", "\u0E2A\u0E34\u0E49\u0E19\u0E2A\u0E38\u0E14"],
-  title,
+  label,
   required,
-  bottomText,
   error,
   disabled,
   className
 }) {
-  return /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx26(
     ConfigProvider8,
     {
+      locale: thTH4,
       theme: {
         token: {
           fontFamily: "Kanit"
         }
       },
-      children: /* @__PURE__ */ jsxs21("div", { className: "container-input", children: [
-        /* @__PURE__ */ jsxs21("div", { children: [
-          /* @__PURE__ */ jsx25("span", { className: "body-1", children: title }),
+      children: /* @__PURE__ */ jsxs22("div", { className: "container-input", children: [
+        /* @__PURE__ */ jsxs22("div", { children: [
+          /* @__PURE__ */ jsx26("span", { className: "body-1", children: label }),
           " ",
-          required && /* @__PURE__ */ jsx25("span", { className: "text-red-500", children: "*" })
+          required && /* @__PURE__ */ jsx26("span", { className: "text-red-500", children: "*" })
         ] }),
-        /* @__PURE__ */ jsx25(
+        /* @__PURE__ */ jsx26(
           TimePicker2.RangePicker,
           {
             format: "HH:mm",
-            value,
+            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,
+            onChange: (dates, dateStrings) => {
+              if (!dates) {
+                onChange(null);
+              } else {
+                onChange([dates[0] ? dates[0].toDate() : null, dates[1] ? dates[1].toDate() : null]);
+              }
+            },
             allowClear: true,
-            disabled
+            disabled,
+            showNow: true
           }
         ),
-        /* @__PURE__ */ jsxs21("div", { children: [
-          /* @__PURE__ */ jsx25("p", { className: "caption-1 text-gray-500", children: bottomText }),
-          " ",
-          error && /* @__PURE__ */ jsx25("p", { className: "caption-1 text-red-500 ", children: error })
-        ] })
+        error && /* @__PURE__ */ jsx26("p", { className: "text-red-500 caption-1", children: error })
       ] })
     }
   );
@@ -1534,13 +1642,12 @@ function TimePickerRangePicker({
 
 // src/ColorPicker/ColorPickerBasic/ColorPicker.tsx
 import { ConfigProvider as ConfigProvider9, ColorPicker } from "antd";
-import { jsx as jsx26, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs23 } from "react/jsx-runtime";
 function ColorPickerBasic({
   value,
   onChange,
   required,
-  title,
-  bottomText,
+  label,
   error,
   disabled,
   allowClear,
@@ -1548,7 +1655,7 @@ function ColorPickerBasic({
   className,
   placeholder = "\u0E01\u0E23\u0E38\u0E13\u0E32\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E2A\u0E35"
 }) {
-  return /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsx27(
     ConfigProvider9,
     {
       theme: {
@@ -1557,13 +1664,13 @@ function ColorPickerBasic({
           fontSize: 16
         }
       },
-      children: /* @__PURE__ */ jsxs22("div", { className: "container-input", children: [
-        /* @__PURE__ */ jsxs22("div", { children: [
-          /* @__PURE__ */ jsx26("span", { className: "body-1", children: title }),
+      children: /* @__PURE__ */ jsxs23("div", { className: "container-input", children: [
+        /* @__PURE__ */ jsxs23("div", { children: [
+          /* @__PURE__ */ jsx27("span", { className: "body-1", children: label }),
           " ",
-          required && /* @__PURE__ */ jsx26("span", { className: "text-red-500", children: "*" })
+          required && /* @__PURE__ */ jsx27("span", { className: "text-red-500", children: "*" })
         ] }),
-        /* @__PURE__ */ jsx26(
+        /* @__PURE__ */ jsx27(
           ColorPicker,
           {
             defaultFormat,
@@ -1575,9 +1682,9 @@ function ColorPickerBasic({
             showText: (color) => {
               const hex = color.toHexString();
               if (!value) {
-                return /* @__PURE__ */ jsx26("span", { children: placeholder });
+                return /* @__PURE__ */ jsx27("span", { children: placeholder });
               }
-              return /* @__PURE__ */ jsxs22("span", { children: [
+              return /* @__PURE__ */ jsxs23("span", { children: [
                 "(",
                 hex,
                 ")"
@@ -1586,11 +1693,7 @@ function ColorPickerBasic({
             disabled
           }
         ),
-        /* @__PURE__ */ jsxs22("div", { children: [
-          /* @__PURE__ */ jsx26("p", { className: "caption-1 text-gray-500", children: bottomText }),
-          " ",
-          error && /* @__PURE__ */ jsx26("p", { className: "caption-1 text-red-500 ", children: error })
-        ] })
+        error && /* @__PURE__ */ jsx27("p", { className: "text-red-500 caption-1", children: error })
       ] })
     }
   );
@@ -2299,7 +2402,7 @@ var greyDark = ["#151515", "#1f1f1f", "#2d2d2d", "#393939", "#494949", "#5a5a5a"
 greyDark.primary = greyDark[5];
 
 // src/ColorPicker/ColorPalettePickerBasic/ColorPalettePickerBasic.tsx
-import { jsx as jsx27, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs24 } from "react/jsx-runtime";
 function genPresets(presets = presetPalettes) {
   return Object.entries(presets).map(([label, colors]) => ({
     label,
@@ -2311,8 +2414,7 @@ function ColorPalettePickerBasic({
   value,
   onChange,
   required,
-  title,
-  bottomText,
+  label,
   error,
   disabled,
   allowClear,
@@ -2327,7 +2429,7 @@ function ColorPalettePickerBasic({
     red,
     green
   });
-  return /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsx28(
     ConfigProvider10,
     {
       theme: {
@@ -2336,13 +2438,13 @@ function ColorPalettePickerBasic({
           fontSize: 16
         }
       },
-      children: /* @__PURE__ */ jsxs23("div", { className: "container-input", children: [
-        /* @__PURE__ */ jsxs23("div", { children: [
-          /* @__PURE__ */ jsx27("span", { className: "body-1", children: title }),
+      children: /* @__PURE__ */ jsxs24("div", { className: "container-input", children: [
+        /* @__PURE__ */ jsxs24("div", { children: [
+          /* @__PURE__ */ jsx28("span", { className: "body-1", children: label }),
           " ",
-          required && /* @__PURE__ */ jsx27("span", { className: "text-red-500", children: "*" })
+          required && /* @__PURE__ */ jsx28("span", { className: "text-red-500", children: "*" })
         ] }),
-        /* @__PURE__ */ jsx27(
+        /* @__PURE__ */ jsx28(
           ColorPicker2,
           {
             defaultFormat,
@@ -2355,9 +2457,9 @@ function ColorPalettePickerBasic({
             showText: (color) => {
               const hex = color.toHexString();
               if (!value) {
-                return /* @__PURE__ */ jsx27("span", { children: placeholder });
+                return /* @__PURE__ */ jsx28("span", { children: placeholder });
               }
-              return /* @__PURE__ */ jsxs23("span", { children: [
+              return /* @__PURE__ */ jsxs24("span", { children: [
                 "(",
                 hex,
                 ")"
@@ -2367,11 +2469,7 @@ function ColorPalettePickerBasic({
             onClear
           }
         ),
-        /* @__PURE__ */ jsxs23("div", { children: [
-          /* @__PURE__ */ jsx27("p", { className: "caption-1 text-gray-500", children: bottomText }),
-          " ",
-          error && /* @__PURE__ */ jsx27("p", { className: "caption-1 text-red-500 ", children: error })
-        ] })
+        error && /* @__PURE__ */ jsx28("p", { className: "text-red-500 caption-1", children: error })
       ] })
     }
   );
@@ -2379,14 +2477,13 @@ function ColorPalettePickerBasic({
 
 // src/Select/SelectField/SelectField.tsx
 import { Select, ConfigProvider as ConfigProvider11 } from "antd";
-import { jsx as jsx28, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx29, jsxs as jsxs25 } from "react/jsx-runtime";
 function SelectField({
   value,
   onChange,
   placeholder = "\u0E42\u0E1B\u0E23\u0E14\u0E23\u0E30\u0E1A\u0E38",
-  title,
+  label,
   required,
-  bottomText,
   error,
   disabled,
   defaultValue,
@@ -2398,7 +2495,7 @@ function SelectField({
   className,
   onClear
 }) {
-  return /* @__PURE__ */ jsx28(
+  return /* @__PURE__ */ jsx29(
     ConfigProvider11,
     {
       theme: {
@@ -2407,13 +2504,13 @@ function SelectField({
           fontSize: 16
         }
       },
-      children: /* @__PURE__ */ jsxs24("div", { className: "container-input", children: [
-        /* @__PURE__ */ jsxs24("div", { children: [
-          /* @__PURE__ */ jsx28("span", { className: "body-1", children: title }),
+      children: /* @__PURE__ */ jsxs25("div", { className: "container-input", children: [
+        /* @__PURE__ */ jsxs25("div", { children: [
+          /* @__PURE__ */ jsx29("span", { className: "body-1", children: label }),
           " ",
-          required && /* @__PURE__ */ jsx28("span", { className: "text-red-500", children: "*" })
+          required && /* @__PURE__ */ jsx29("span", { className: "text-red-500", children: "*" })
         ] }),
-        /* @__PURE__ */ jsx28(
+        /* @__PURE__ */ jsx29(
           Select,
           {
             showSearch: true,
@@ -2428,7 +2525,7 @@ function SelectField({
             options,
             mode,
             onSearch: handleSearch,
-            prefix: prefix ? /* @__PURE__ */ jsx28(
+            prefix: prefix ? /* @__PURE__ */ jsx29(
               "span",
               {
                 style: {
@@ -2445,11 +2542,7 @@ function SelectField({
             onClear
           }
         ),
-        /* @__PURE__ */ jsxs24("div", { children: [
-          /* @__PURE__ */ jsx28("p", { className: "caption-1 text-gray-500", children: bottomText }),
-          " ",
-          error && /* @__PURE__ */ jsx28("p", { className: "caption-1 text-red-500 ", children: error })
-        ] })
+        error && /* @__PURE__ */ jsx29("p", { className: "text-red-500 caption-1", children: error })
       ] })
     }
   );
@@ -2457,14 +2550,13 @@ function SelectField({
 
 // src/Select/SelectFieldGroup/SelectFieldGroup.tsx
 import { Select as Select2, ConfigProvider as ConfigProvider12 } from "antd";
-import { jsx as jsx29, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs26 } from "react/jsx-runtime";
 function SelectFieldGroup({
   value,
   onChange,
   placeholder = "\u0E42\u0E1B\u0E23\u0E14\u0E23\u0E30\u0E1A\u0E38",
-  title,
+  label,
   required,
-  bottomText,
   error,
   disabled,
   defaultValue,
@@ -2475,7 +2567,7 @@ function SelectFieldGroup({
   handleSearch,
   className
 }) {
-  return /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsx30(
     ConfigProvider12,
     {
       theme: {
@@ -2483,13 +2575,13 @@ function SelectFieldGroup({
           fontFamily: "Kanit"
         }
       },
-      children: /* @__PURE__ */ jsxs25("div", { className: "container-input", children: [
-        /* @__PURE__ */ jsxs25("div", { children: [
-          /* @__PURE__ */ jsx29("span", { className: "body-1", children: title }),
+      children: /* @__PURE__ */ jsxs26("div", { className: "container-input", children: [
+        /* @__PURE__ */ jsxs26("div", { children: [
+          /* @__PURE__ */ jsx30("span", { className: "body-1", children: label }),
           " ",
-          required && /* @__PURE__ */ jsx29("span", { className: "text-red-500", children: "*" })
+          required && /* @__PURE__ */ jsx30("span", { className: "text-red-500", children: "*" })
         ] }),
-        /* @__PURE__ */ jsx29(
+        /* @__PURE__ */ jsx30(
           Select2,
           {
             showSearch: true,
@@ -2504,7 +2596,7 @@ function SelectFieldGroup({
             options,
             mode,
             onSearch: handleSearch,
-            prefix: prefix ? /* @__PURE__ */ jsx29(
+            prefix: prefix ? /* @__PURE__ */ jsx30(
               "span",
               {
                 style: {
@@ -2520,11 +2612,7 @@ function SelectFieldGroup({
             allowClear: true
           }
         ),
-        /* @__PURE__ */ jsxs25("div", { children: [
-          /* @__PURE__ */ jsx29("p", { className: "caption-1 text-gray-500", children: bottomText }),
-          " ",
-          error && /* @__PURE__ */ jsx29("p", { className: "caption-1 text-red-500 ", children: error })
-        ] })
+        error && /* @__PURE__ */ jsx30("p", { className: "text-red-500 caption-1", children: error })
       ] })
     }
   );
@@ -2544,21 +2632,20 @@ var status = [
 
 // src/Select/SelectFieldStatus/SelectFieldStatus.tsx
 import { DownOutlined } from "@ant-design/icons";
-import { jsx as jsx30, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs27 } from "react/jsx-runtime";
 function SelectFieldStatus({
   value,
   onChange,
   placeholder,
-  title,
+  label,
   required,
-  bottomText,
   disabled,
   error,
   options,
   className
 }) {
   const selectedItem = status.find((s) => s.value === value);
-  return /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsx31(
     ConfigProvider13,
     {
       theme: {
@@ -2574,17 +2661,17 @@ function SelectFieldStatus({
           fontFamily: "Kanit"
         }
       },
-      children: /* @__PURE__ */ jsxs26("div", { className: "container-input", children: [
-        /* @__PURE__ */ jsxs26("div", { children: [
-          /* @__PURE__ */ jsx30("span", { className: "body-1", children: title }),
+      children: /* @__PURE__ */ jsxs27("div", { className: "container-input", children: [
+        /* @__PURE__ */ jsxs27("div", { children: [
+          /* @__PURE__ */ jsx31("span", { className: "body-1", children: label }),
           " ",
-          required && /* @__PURE__ */ jsx30("span", { className: "text-red-500", children: "*" })
+          required && /* @__PURE__ */ jsx31("span", { className: "text-red-500", children: "*" })
         ] }),
-        /* @__PURE__ */ jsx30(
+        /* @__PURE__ */ jsx31(
           Select3,
           {
             disabled,
-            suffixIcon: /* @__PURE__ */ jsx30(DownOutlined, { style: { color: value ? "#fff" : "#D9D9D9" } }),
+            suffixIcon: /* @__PURE__ */ jsx31(DownOutlined, { style: { color: value ? "#fff" : "#D9D9D9" } }),
             value,
             onChange,
             className: `body-3 custom-select flex justify-center w-full ${className ?? ""}`,
@@ -2595,11 +2682,7 @@ function SelectFieldStatus({
             showSearch: true
           }
         ),
-        /* @__PURE__ */ jsxs26("div", { children: [
-          /* @__PURE__ */ jsx30("p", { className: "caption-1 text-gray-500", children: bottomText }),
-          " ",
-          error && /* @__PURE__ */ jsx30("p", { className: "caption-1 text-red-500 ", children: error })
-        ] })
+        error && /* @__PURE__ */ jsx31("p", { className: "text-red-500 caption-1", children: error })
       ] })
     }
   );
@@ -2616,21 +2699,20 @@ var status2 = [
 
 // src/Select/SelectFieldStatusReport/SelectFieldStatusReport.tsx
 import { DownOutlined as DownOutlined2 } from "@ant-design/icons";
-import { jsx as jsx31, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs28 } from "react/jsx-runtime";
 function SelectFieldStatusReport({
   value,
   onChange,
   placeholder,
-  title,
+  label,
   required,
-  bottomText,
   disabled,
   error,
   className,
   options
 }) {
   const selectedItem = status2.find((s) => s.value === value);
-  return /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsx32(
     ConfigProvider14,
     {
       theme: {
@@ -2646,17 +2728,17 @@ function SelectFieldStatusReport({
           fontFamily: "Kanit"
         }
       },
-      children: /* @__PURE__ */ jsxs27("div", { className: "container-input", children: [
-        /* @__PURE__ */ jsxs27("div", { children: [
-          /* @__PURE__ */ jsx31("span", { className: "body-1", children: title }),
+      children: /* @__PURE__ */ jsxs28("div", { className: "container-input", children: [
+        /* @__PURE__ */ jsxs28("div", { children: [
+          /* @__PURE__ */ jsx32("span", { className: "body-1", children: label }),
           " ",
-          required && /* @__PURE__ */ jsx31("span", { className: "text-red-500", children: "*" })
+          required && /* @__PURE__ */ jsx32("span", { className: "text-red-500", children: "*" })
         ] }),
-        /* @__PURE__ */ jsx31(
+        /* @__PURE__ */ jsx32(
           Select4,
           {
             disabled,
-            suffixIcon: /* @__PURE__ */ jsx31(DownOutlined2, { style: { color: value ? "#fff" : "#D9D9D9" } }),
+            suffixIcon: /* @__PURE__ */ jsx32(DownOutlined2, { style: { color: value ? "#fff" : "#D9D9D9" } }),
             value,
             onChange,
             className: `body-3 custom-select flex justify-center w-full ${className ?? ""}`,
@@ -2667,11 +2749,7 @@ function SelectFieldStatusReport({
             showSearch: true
           }
         ),
-        /* @__PURE__ */ jsxs27("div", { children: [
-          /* @__PURE__ */ jsx31("p", { className: "caption-1 text-gray-500", children: bottomText }),
-          " ",
-          error && /* @__PURE__ */ jsx31("p", { className: "caption-1 text-red-500 ", children: error })
-        ] })
+        error && /* @__PURE__ */ jsx32("p", { className: "text-red-500 caption-1", children: error })
       ] })
     }
   );
@@ -2680,11 +2758,10 @@ function SelectFieldStatusReport({
 // src/Select/SelectFieldTag/SelectFieldTag.tsx
 import { Select as Select5, ConfigProvider as ConfigProvider15 } from "antd";
 import { useState as useState6 } from "react";
-import { jsx as jsx32, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs29 } from "react/jsx-runtime";
 function SelectFieldTag({
-  title,
+  label,
   required,
-  bottomText,
   placeholder,
   options,
   error,
@@ -2714,7 +2791,7 @@ function SelectFieldTag({
     }
     onChange?.([]);
   };
-  return /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsx33(
     ConfigProvider15,
     {
       theme: {
@@ -2722,13 +2799,13 @@ function SelectFieldTag({
           fontFamily: "Kanit"
         }
       },
-      children: /* @__PURE__ */ jsxs28("div", { className: "container-input", children: [
-        /* @__PURE__ */ jsxs28("div", { children: [
-          /* @__PURE__ */ jsx32("span", { className: "body-1", children: title }),
+      children: /* @__PURE__ */ jsxs29("div", { className: "container-input", children: [
+        /* @__PURE__ */ jsxs29("div", { children: [
+          /* @__PURE__ */ jsx33("span", { className: "body-1", children: label }),
           " ",
-          required && /* @__PURE__ */ jsx32("span", { className: "text-red-500", children: "*" })
+          required && /* @__PURE__ */ jsx33("span", { className: "text-red-500", children: "*" })
         ] }),
-        /* @__PURE__ */ jsx32(
+        /* @__PURE__ */ jsx33(
           Select5,
           {
             mode: "tags",
@@ -2747,11 +2824,7 @@ function SelectFieldTag({
             onClear
           }
         ),
-        /* @__PURE__ */ jsxs28("div", { children: [
-          /* @__PURE__ */ jsx32("p", { className: "caption-1 text-gray-500", children: bottomText }),
-          " ",
-          error && /* @__PURE__ */ jsx32("p", { className: "caption-1 text-red-500 ", children: error })
-        ] })
+        error && /* @__PURE__ */ jsx33("p", { className: "text-red-500 caption-1", children: error })
       ] })
     }
   );
@@ -2761,14 +2834,13 @@ function SelectFieldTag({
 import { IconTrash } from "@tabler/icons-react";
 import { Select as Select6, ConfigProvider as ConfigProvider16 } from "antd";
 import { useState as useState7 } from "react";
-import { jsx as jsx33, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs30 } from "react/jsx-runtime";
 function SelectCustom({
-  title = "\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25\u0E42\u0E04\u0E23\u0E07\u0E01\u0E32\u0E23",
+  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",
   options,
   required = false,
   onChange,
-  bottomText,
   error,
   onClear
 }) {
@@ -2791,7 +2863,7 @@ function SelectCustom({
     });
   };
   const filteredOptions = options.filter((opt) => !valueList.includes(opt.value)).map((opt) => ({ value: opt.value, label: opt.label }));
-  return /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsx34(
     ConfigProvider16,
     {
       theme: {
@@ -2800,13 +2872,13 @@ function SelectCustom({
           fontSize: 16
         }
       },
-      children: /* @__PURE__ */ jsxs29("div", { className: "container-input", children: [
-        /* @__PURE__ */ jsxs29("div", { children: [
-          /* @__PURE__ */ jsx33("span", { className: "body-1", children: title }),
+      children: /* @__PURE__ */ jsxs30("div", { className: "container-input", children: [
+        /* @__PURE__ */ jsxs30("div", { children: [
+          /* @__PURE__ */ jsx34("span", { className: "body-1", children: label }),
           " ",
-          required && /* @__PURE__ */ jsx33("span", { className: "text-red-500", children: "*" })
+          required && /* @__PURE__ */ jsx34("span", { className: "text-red-500", children: "*" })
         ] }),
-        /* @__PURE__ */ jsx33(
+        /* @__PURE__ */ jsx34(
           Select6,
           {
             value,
@@ -2817,20 +2889,16 @@ function SelectCustom({
             onClear
           }
         ),
-        /* @__PURE__ */ jsxs29("div", { children: [
-          /* @__PURE__ */ jsx33("p", { className: "caption-1 text-gray-500", children: bottomText }),
-          " ",
-          error && /* @__PURE__ */ jsx33("p", { className: "caption-1 text-red-500 ", children: error })
-        ] }),
-        /* @__PURE__ */ jsx33("div", { className: "w-full p-[2px] overflow-y-auto", children: valueList.map((v, index) => /* @__PURE__ */ jsxs29("div", { className: "flex justify-between items-center py-[2px] body-1", children: [
-          /* @__PURE__ */ jsxs29("div", { className: "flex flex-row gap-[8px]", children: [
-            /* @__PURE__ */ jsxs29("p", { children: [
+        error && /* @__PURE__ */ jsx34("p", { className: "text-red-500 caption-1", children: error }),
+        /* @__PURE__ */ jsx34("div", { className: "w-full p-[2px] overflow-y-auto", children: valueList.map((v, index) => /* @__PURE__ */ jsxs30("div", { className: "flex justify-between items-center py-[2px] body-1", children: [
+          /* @__PURE__ */ jsxs30("div", { className: "flex flex-row gap-[8px]", children: [
+            /* @__PURE__ */ jsxs30("p", { children: [
               index + 1,
               "."
             ] }),
-            /* @__PURE__ */ jsx33("p", { children: v })
+            /* @__PURE__ */ jsx34("p", { children: v })
           ] }),
-          /* @__PURE__ */ jsx33(IconTrash, { className: "cursor-pointer", onClick: () => handleDelete(v) })
+          /* @__PURE__ */ jsx34(IconTrash, { className: "cursor-pointer", onClick: () => handleDelete(v) })
         ] }, index)) })
       ] })
     }
@@ -2871,7 +2939,7 @@ var quarters = [
 // src/SortFilter/SortFilter.tsx
 import { useState as useState8 } from "react";
 import { IconSortDescending as IconSortDescending2, IconFilter } from "@tabler/icons-react";
-import { jsx as jsx34, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs31 } from "react/jsx-runtime";
 function SortFilter({
   showYear = true,
   showQuarter = true,
@@ -2882,7 +2950,7 @@ function SortFilter({
   const [yearValue, setYearValue] = useState8();
   const [monthValue, setMonthValue] = useState8();
   const [quarterValue, setQuartersValue] = useState8();
-  return /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsx35(
     ConfigProvider17,
     {
       theme: {
@@ -2890,12 +2958,12 @@ function SortFilter({
           fontFamily: "Kanit"
         }
       },
-      children: /* @__PURE__ */ jsxs30("div", { className: "w-full flex items-center justify-between", children: [
-        /* @__PURE__ */ jsxs30("div", { className: "w-full flex gap-[10px]", children: [
-          showYear && /* @__PURE__ */ jsx34("div", { className: "w-[200px]", children: /* @__PURE__ */ jsx34(
+      children: /* @__PURE__ */ jsxs31("div", { className: "w-full flex items-center justify-between", children: [
+        /* @__PURE__ */ jsxs31("div", { className: "w-full flex gap-[10px]", children: [
+          showYear && /* @__PURE__ */ jsx35("div", { className: "w-[200px]", children: /* @__PURE__ */ jsx35(
             SelectField,
             {
-              prefix: /* @__PURE__ */ jsx34(CalendarOutlined, {}),
+              prefix: /* @__PURE__ */ jsx35(CalendarOutlined, {}),
               onChange: setYearValue,
               options: years.map((s) => ({
                 value: s.value,
@@ -2905,10 +2973,10 @@ function SortFilter({
               value: yearValue
             }
           ) }),
-          showMonth && /* @__PURE__ */ jsx34("div", { className: "w-[200px]", children: /* @__PURE__ */ jsx34(
+          showMonth && /* @__PURE__ */ jsx35("div", { className: "w-[200px]", children: /* @__PURE__ */ jsx35(
             SelectField,
             {
-              prefix: /* @__PURE__ */ jsx34(CalendarOutlined, {}),
+              prefix: /* @__PURE__ */ jsx35(CalendarOutlined, {}),
               onChange: setMonthValue,
               options: months.map((s) => ({
                 value: s.value,
@@ -2918,10 +2986,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__ */ jsx35("div", { className: "w-[200px]", children: /* @__PURE__ */ jsx35(
             SelectField,
             {
-              prefix: /* @__PURE__ */ jsx34(CalendarOutlined, {}),
+              prefix: /* @__PURE__ */ jsx35(CalendarOutlined, {}),
               onChange: setQuartersValue,
               options: quarters.map((s) => ({
                 value: s.value,
@@ -2932,8 +3000,8 @@ function SortFilter({
             }
           ) })
         ] }),
-        /* @__PURE__ */ jsxs30("div", { className: "flex gap-[10px]", children: [
-          /* @__PURE__ */ jsx34(
+        /* @__PURE__ */ jsxs31("div", { className: "flex gap-[10px]", children: [
+          /* @__PURE__ */ jsx35(
             IconSortDescending2,
             {
               size: 24,
@@ -2941,7 +3009,7 @@ function SortFilter({
               onClick: onSortClick
             }
           ),
-          /* @__PURE__ */ jsx34(
+          /* @__PURE__ */ jsx35(
             IconFilter,
             {
               size: 24,
@@ -2958,7 +3026,7 @@ function SortFilter({
 // src/Upload/FileUploader/FileUploader.tsx
 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 jsx35, jsxs as jsxs31 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx36, jsxs as jsxs32 } from "react/jsx-runtime";
 function FileUploader({
   onUpload,
   onError,
@@ -2991,7 +3059,7 @@ function FileUploader({
   const handleRemoveFile = async (index) => {
     try {
       if (onRemove) {
-        await onRemove();
+        await onRemove(index);
       }
       const updatedList = [...fileList];
       updatedList.splice(index, 1);
@@ -3029,10 +3097,10 @@ function FileUploader({
     }
     if (inputRef.current) inputRef.current.value = "";
   };
-  return /* @__PURE__ */ jsxs31("div", { className: "w-full", children: [
-    label && /* @__PURE__ */ jsx35("p", { className: "body-1", children: label }),
-    /* @__PURE__ */ jsxs31("div", { children: [
-      mode === "upload" ? /* @__PURE__ */ jsx35(
+  return /* @__PURE__ */ jsxs32("div", { className: "w-full", children: [
+    label && /* @__PURE__ */ jsx36("p", { className: "body-1", children: label }),
+    /* @__PURE__ */ jsxs32("div", { children: [
+      mode === "upload" ? /* @__PURE__ */ jsx36(
         "button",
         {
           type: "button",
@@ -3040,15 +3108,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__ */ jsxs31(Fragment5, { children: [
-            /* @__PURE__ */ jsx35(Loader, { size: 15 }),
+          children: uploading ? /* @__PURE__ */ jsxs32(Fragment5, { children: [
+            /* @__PURE__ */ jsx36(Loader, { size: 15 }),
             " \u0E01\u0E33\u0E25\u0E31\u0E07\u0E2D\u0E31\u0E1B\u0E42\u0E2B\u0E25\u0E14"
-          ] }) : /* @__PURE__ */ jsxs31(Fragment5, { children: [
-            /* @__PURE__ */ jsx35(IconUpload, { size: 15, className: "text-gray-400" }),
+          ] }) : /* @__PURE__ */ jsxs32(Fragment5, { children: [
+            /* @__PURE__ */ jsx36(IconUpload, { size: 15, className: "text-gray-400" }),
             " \u0E41\u0E19\u0E1A\u0E44\u0E1F\u0E25\u0E4C"
           ] })
         }
-      ) : /* @__PURE__ */ jsx35(
+      ) : /* @__PURE__ */ jsx36(
         "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
@@ -3062,17 +3130,17 @@ function FileUploader({
           },
           onDragLeave: () => setDragActive(false),
           onDrop: handleDrop,
-          children: uploading ? /* @__PURE__ */ jsxs31("div", { className: "flex justify-center items-center gap-2", children: [
-            /* @__PURE__ */ jsx35(Loader, { size: 15 }),
+          children: uploading ? /* @__PURE__ */ jsxs32("div", { className: "flex justify-center items-center gap-2", children: [
+            /* @__PURE__ */ jsx36(Loader, { size: 15 }),
             " \u0E01\u0E33\u0E25\u0E31\u0E07\u0E2D\u0E31\u0E1B\u0E42\u0E2B\u0E25\u0E14"
-          ] }) : /* @__PURE__ */ jsxs31("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__ */ jsxs32("div", { className: "flex flex-col items-center gap-2", children: [
+            /* @__PURE__ */ jsx36(IconUpload, { size: 20 }),
+            /* @__PURE__ */ jsx36("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__ */ jsx36("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__ */ jsx36(
         "input",
         {
           type: "file",
@@ -3085,13 +3153,13 @@ function FileUploader({
         }
       )
     ] }),
-    description && /* @__PURE__ */ jsx35("p", { className: "text-gray-400 body-4", children: description }),
-    /* @__PURE__ */ jsx35("div", { className: "mt-[8px]", children: fileList.length !== 0 && fileList.map((file, index) => /* @__PURE__ */ jsxs31("div", { className: "flex items-center gap-2 rounded-[4px] px-[8px] py-[4px] body-1", children: [
-      /* @__PURE__ */ jsxs31("div", { className: "flex items-center gap-2 w-[75%] overflow-hidden", children: [
-        /* @__PURE__ */ jsx35("div", { className: "w-[15px] h-[15px]", children: /* @__PURE__ */ jsx35(IconPaperclip, { size: 15 }) }),
-        /* @__PURE__ */ jsx35("span", { className: "truncate", children: file.name })
+    description && /* @__PURE__ */ jsx36("p", { className: "text-gray-400 body-4", children: description }),
+    /* @__PURE__ */ jsx36("div", { className: "mt-[8px]", children: fileList.length !== 0 && fileList.map((file, index) => /* @__PURE__ */ jsxs32("div", { className: "flex items-center gap-2 rounded-[4px] px-[8px] py-[4px] body-1", children: [
+      /* @__PURE__ */ jsxs32("div", { className: "flex items-center gap-2 w-[75%] overflow-hidden", children: [
+        /* @__PURE__ */ jsx36("div", { className: "w-[15px] h-[15px]", children: /* @__PURE__ */ jsx36(IconPaperclip, { size: 15 }) }),
+        /* @__PURE__ */ jsx36("span", { className: "truncate", children: file.name })
       ] }),
-      /* @__PURE__ */ jsx35(
+      /* @__PURE__ */ jsx36(
         IconTrash2,
         {
           size: 20,
@@ -3127,7 +3195,7 @@ function messageLoading(content, duration) {
 // src/Breadcrumb/Breadcrumb.tsx
 import { ConfigProvider as ConfigProvider18 } from "antd";
 import { Breadcrumb } from "antd";
-import { jsx as jsx36 } from "react/jsx-runtime";
+import { jsx as jsx37 } from "react/jsx-runtime";
 function Breadcrumbs({
   items,
   separator,
@@ -3135,7 +3203,7 @@ function Breadcrumbs({
   classname,
   params
 }) {
-  return /* @__PURE__ */ jsx36(
+  return /* @__PURE__ */ jsx37(
     ConfigProvider18,
     {
       theme: {
@@ -3143,7 +3211,7 @@ function Breadcrumbs({
           fontFamily: "Kanit"
         }
       },
-      children: /* @__PURE__ */ jsx36(
+      children: /* @__PURE__ */ jsx37(
         Breadcrumb,
         {
           items,
@@ -3159,7 +3227,7 @@ function Breadcrumbs({
 
 // src/HeadingPage/HeadingPage.tsx
 import { ConfigProvider as ConfigProvider19 } from "antd";
-import { jsx as jsx37, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx38, jsxs as jsxs33 } from "react/jsx-runtime";
 function HeadingPage({ Heading }) {
   const today = (/* @__PURE__ */ new Date()).toLocaleDateString("th-TH", {
     weekday: "long",
@@ -3167,7 +3235,7 @@ function HeadingPage({ Heading }) {
     month: "long",
     year: "numeric"
   });
-  return /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsx38(
     ConfigProvider19,
     {
       theme: {
@@ -3175,9 +3243,9 @@ function HeadingPage({ Heading }) {
           fontFamily: "Kanit"
         }
       },
-      children: /* @__PURE__ */ jsxs32("div", { className: "flex flex-col gap-[10px] px-[20px] py-[10px]", children: [
-        /* @__PURE__ */ jsx37("p", { className: "headline-5", children: Heading }),
-        /* @__PURE__ */ jsxs32("p", { className: "body-1", children: [
+      children: /* @__PURE__ */ jsxs33("div", { className: "flex flex-col gap-[10px] px-[20px] py-[10px]", children: [
+        /* @__PURE__ */ jsx38("p", { className: "headline-5", children: Heading }),
+        /* @__PURE__ */ jsxs33("p", { className: "body-1", children: [
           " \u0E27\u0E31\u0E19\u0E19\u0E35\u0E49 ",
           today
         ] })
@@ -3189,7 +3257,7 @@ function HeadingPage({ Heading }) {
 // src/Progress/ProgressBar.tsx
 import { ConfigProvider as ConfigProvider20, Progress } from "antd";
 import { useEffect as useEffect2, useRef as useRef3, useState as useState10 } from "react";
-import { jsx as jsx38, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs34 } from "react/jsx-runtime";
 function ProgressBar({
   percent = 0,
   size = "default",
@@ -3220,7 +3288,7 @@ function ProgressBar({
     observer.observe(inner);
     return () => observer.disconnect();
   }, []);
-  return /* @__PURE__ */ jsx38(
+  return /* @__PURE__ */ jsx39(
     ConfigProvider20,
     {
       theme: {
@@ -3228,8 +3296,8 @@ function ProgressBar({
           fontFamily: "Kanit"
         }
       },
-      children: /* @__PURE__ */ jsxs33("div", { className: "relative w-full", ref: progressRef, children: [
-        /* @__PURE__ */ jsx38(
+      children: /* @__PURE__ */ jsxs34("div", { className: "relative w-full", ref: progressRef, children: [
+        /* @__PURE__ */ jsx39(
           Progress,
           {
             className: "w-full",
@@ -3245,7 +3313,7 @@ function ProgressBar({
             strokeColor
           }
         ),
-        barWidth > 0 && isCheckPoints && type !== "circle" && checkpoints.map((cp) => /* @__PURE__ */ jsx38(
+        barWidth > 0 && isCheckPoints && type !== "circle" && checkpoints.map((cp) => /* @__PURE__ */ jsx39(
           "div",
           {
             className: "checkpoint absolute top-0",
@@ -3418,7 +3486,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 jsxs34 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx40, jsxs as jsxs35 } from "react/jsx-runtime";
 function KpiSection({ type, onChangeKpiList }) {
   const {
     handleAddKpi,
@@ -3448,7 +3516,7 @@ function KpiSection({ type, onChangeKpiList }) {
       onChangeKpiList(kpiList);
     }
   }, [kpiList]);
-  return /* @__PURE__ */ jsx39(
+  return /* @__PURE__ */ jsx40(
     ConfigProvider21,
     {
       theme: {
@@ -3457,15 +3525,15 @@ function KpiSection({ type, onChangeKpiList }) {
           fontSize: 16
         }
       },
-      children: /* @__PURE__ */ jsxs34("div", { className: "container-input", children: [
+      children: /* @__PURE__ */ jsxs35("div", { className: "container-input", children: [
         messageContainer,
-        type === "number" && /* @__PURE__ */ jsxs34("div", { className: "space-y-4", children: [
-          /* @__PURE__ */ jsxs34("div", { className: "grid grid-cols-[1fr_200px_200px_50px] w-full gap-[24px] items-start", children: [
-            /* @__PURE__ */ jsx39(
+        type === "number" && /* @__PURE__ */ jsxs35("div", { className: "space-y-4", children: [
+          /* @__PURE__ */ jsxs35("div", { className: "grid grid-cols-[1fr_200px_200px_50px] w-full gap-[24px] items-start", children: [
+            /* @__PURE__ */ jsx40(
               InputField,
               {
                 value: nameKpi,
-                title: "\u0E0A\u0E37\u0E48\u0E2D\u0E1C\u0E25\u0E25\u0E31\u0E1E\u0E18\u0E4C\u0E17\u0E35\u0E48\u0E04\u0E32\u0E14\u0E2B\u0E27\u0E31\u0E07 (KPI)",
+                label: "\u0E0A\u0E37\u0E48\u0E2D\u0E1C\u0E25\u0E25\u0E31\u0E1E\u0E18\u0E4C\u0E17\u0E35\u0E48\u0E04\u0E32\u0E14\u0E2B\u0E27\u0E31\u0E07 (KPI)",
                 placeholder: "\u0E42\u0E1B\u0E23\u0E14\u0E23\u0E30\u0E1A\u0E38",
                 required: true,
                 onChange: (value) => setNameKpi(value ?? ""),
@@ -3473,11 +3541,11 @@ function KpiSection({ type, onChangeKpiList }) {
                 error: errors.nameKpi
               }
             ),
-            /* @__PURE__ */ jsx39(
+            /* @__PURE__ */ jsx40(
               InputField,
               {
                 value: kpiValue,
-                title: "\u0E1C\u0E25\u0E25\u0E31\u0E1E\u0E18\u0E4C\u0E17\u0E35\u0E48\u0E04\u0E32\u0E14\u0E2B\u0E27\u0E31\u0E07 (KPI)",
+                label: "\u0E1C\u0E25\u0E25\u0E31\u0E1E\u0E18\u0E4C\u0E17\u0E35\u0E48\u0E04\u0E32\u0E14\u0E2B\u0E27\u0E31\u0E07 (KPI)",
                 placeholder: "\u0E42\u0E1B\u0E23\u0E14\u0E23\u0E30\u0E1A\u0E38",
                 required: true,
                 onChange: (value) => {
@@ -3497,11 +3565,11 @@ function KpiSection({ type, onChangeKpiList }) {
                 error: errors.kpiValue
               }
             ),
-            /* @__PURE__ */ jsx39(
+            /* @__PURE__ */ jsx40(
               InputField,
               {
                 value: unitValue,
-                title: "\u0E2B\u0E19\u0E48\u0E27\u0E22",
+                label: "\u0E2B\u0E19\u0E48\u0E27\u0E22",
                 placeholder: "\u0E42\u0E1B\u0E23\u0E14\u0E23\u0E30\u0E1A\u0E38",
                 required: true,
                 onChange: (value) => setUnitValue(value ?? ""),
@@ -3509,7 +3577,7 @@ function KpiSection({ type, onChangeKpiList }) {
                 error: errors.unitValue
               }
             ),
-            /* @__PURE__ */ jsx39("div", { className: `flex justify-end mt-[28px]`, children: /* @__PURE__ */ jsx39(
+            /* @__PURE__ */ jsx40("div", { className: `flex justify-end mt-[28px]`, children: /* @__PURE__ */ jsx40(
               IconCirclePlus,
               {
                 className: "w-[40px] h-[40px] cursor-pointer hover:scale-110 transition",
@@ -3518,17 +3586,17 @@ function KpiSection({ type, onChangeKpiList }) {
               }
             ) })
           ] }),
-          /* @__PURE__ */ jsx39("div", { children: kpiList.map((kpi, index) => /* @__PURE__ */ jsxs34(
+          /* @__PURE__ */ jsx40("div", { children: kpiList.map((kpi, index) => /* @__PURE__ */ jsxs35(
             "div",
             {
               className: "grid grid-cols-[30px_1fr_100px_120px_80px] items-start py-2 body-1 gap-[8px]",
               children: [
-                /* @__PURE__ */ jsxs34("p", { className: `body-1 ${kpi.isEditing ? "mt-[12px]" : ""}`, children: [
+                /* @__PURE__ */ jsxs35("p", { className: `body-1 ${kpi.isEditing ? "mt-[12px]" : ""}`, children: [
                   index + 1,
                   "."
                 ] }),
-                kpi.isEditing ? /* @__PURE__ */ jsxs34(Fragment6, { children: [
-                  /* @__PURE__ */ jsx39(
+                kpi.isEditing ? /* @__PURE__ */ jsxs35(Fragment6, { children: [
+                  /* @__PURE__ */ jsx40(
                     InputField,
                     {
                       value: kpi.name,
@@ -3538,7 +3606,7 @@ function KpiSection({ type, onChangeKpiList }) {
                       error: itemErrors[kpi.id]?.name
                     }
                   ),
-                  /* @__PURE__ */ jsx39(
+                  /* @__PURE__ */ jsx40(
                     InputField,
                     {
                       value: kpi.value?.toString(),
@@ -3563,7 +3631,7 @@ function KpiSection({ type, onChangeKpiList }) {
                       error: itemErrors[kpi.id]?.value
                     }
                   ),
-                  /* @__PURE__ */ jsx39(
+                  /* @__PURE__ */ jsx40(
                     InputField,
                     {
                       value: kpi.unit,
@@ -3573,29 +3641,29 @@ function KpiSection({ type, onChangeKpiList }) {
                       error: itemErrors[kpi.id]?.unit
                     }
                   ),
-                  /* @__PURE__ */ jsxs34(
+                  /* @__PURE__ */ jsxs35(
                     "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__ */ jsx40(
                           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__ */ jsx40(IconX2, { className: "w-[30px] h-[30px] cursor-pointer", onClick: () => handleCancel(kpi.id) })
                       ]
                     }
                   )
-                ] }) : /* @__PURE__ */ jsxs34(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__ */ jsxs34("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__ */ jsxs35(Fragment6, { children: [
+                  /* @__PURE__ */ jsx40("p", { className: "body-1", children: kpi.name }),
+                  /* @__PURE__ */ jsx40("p", { className: "body-1", children: kpi.value }),
+                  /* @__PURE__ */ jsx40("p", { className: "body-1", children: kpi.unit }),
+                  /* @__PURE__ */ jsxs35("div", { className: "flex gap-3 justify-end", children: [
+                    /* @__PURE__ */ jsx40(IconPencil, { className: "w-[30px] h-[30px] cursor-pointer", onClick: () => handleEdit(kpi.id) }),
+                    /* @__PURE__ */ jsx40(IconTrash3, { className: "w-[30px] h-[30px] cursor-pointer", onClick: () => handleDelete(kpi.id) })
                   ] })
                 ] })
               ]
@@ -3603,13 +3671,13 @@ function KpiSection({ type, onChangeKpiList }) {
             kpi.id
           )) })
         ] }),
-        type === "text" && /* @__PURE__ */ jsxs34("div", { className: "space-y-4", children: [
-          /* @__PURE__ */ jsxs34("div", { className: "grid grid-cols-[1fr_50px] w-full gap-[24px] items-start", children: [
-            /* @__PURE__ */ jsx39(
+        type === "text" && /* @__PURE__ */ jsxs35("div", { className: "space-y-4", children: [
+          /* @__PURE__ */ jsxs35("div", { className: "grid grid-cols-[1fr_50px] w-full gap-[24px] items-start", children: [
+            /* @__PURE__ */ jsx40(
               InputField,
               {
                 value: nameKpi,
-                title: "\u0E0A\u0E37\u0E48\u0E2D\u0E1C\u0E25\u0E25\u0E31\u0E1E\u0E18\u0E4C\u0E17\u0E35\u0E48\u0E04\u0E32\u0E14\u0E2B\u0E27\u0E31\u0E07 (KPI)",
+                label: "\u0E0A\u0E37\u0E48\u0E2D\u0E1C\u0E25\u0E25\u0E31\u0E1E\u0E18\u0E4C\u0E17\u0E35\u0E48\u0E04\u0E32\u0E14\u0E2B\u0E27\u0E31\u0E07 (KPI)",
                 placeholder: "\u0E42\u0E1B\u0E23\u0E14\u0E23\u0E30\u0E1A\u0E38",
                 required: true,
                 onChange: (value) => setNameKpi(value ?? ""),
@@ -3617,7 +3685,7 @@ function KpiSection({ type, onChangeKpiList }) {
                 error: errors.nameKpi
               }
             ),
-            /* @__PURE__ */ jsx39("div", { className: `flex justify-end mt-[28px]`, children: /* @__PURE__ */ jsx39(
+            /* @__PURE__ */ jsx40("div", { className: `flex justify-end mt-[28px]`, children: /* @__PURE__ */ jsx40(
               IconCirclePlus,
               {
                 className: "w-[40px] h-[40px] cursor-pointer hover:scale-110 transition",
@@ -3626,13 +3694,13 @@ function KpiSection({ type, onChangeKpiList }) {
               }
             ) })
           ] }),
-          /* @__PURE__ */ jsx39("div", { children: kpiList.map((kpi, index) => /* @__PURE__ */ jsxs34("div", { className: "grid grid-cols-[30px_1fr_80px] items-start py-2 body-1 gap-[8px]", children: [
-            /* @__PURE__ */ jsxs34("p", { className: `body-1 ${kpi.isEditing ? "mt-[12px]" : ""}`, children: [
+          /* @__PURE__ */ jsx40("div", { children: kpiList.map((kpi, index) => /* @__PURE__ */ jsxs35("div", { className: "grid grid-cols-[30px_1fr_80px] items-start py-2 body-1 gap-[8px]", children: [
+            /* @__PURE__ */ jsxs35("p", { className: `body-1 ${kpi.isEditing ? "mt-[12px]" : ""}`, children: [
               index + 1,
               "."
             ] }),
-            kpi.isEditing ? /* @__PURE__ */ jsxs34(Fragment6, { children: [
-              /* @__PURE__ */ jsx39(
+            kpi.isEditing ? /* @__PURE__ */ jsxs35(Fragment6, { children: [
+              /* @__PURE__ */ jsx40(
                 InputField,
                 {
                   value: kpi.name,
@@ -3642,27 +3710,27 @@ function KpiSection({ type, onChangeKpiList }) {
                   error: itemErrors[kpi.id]?.name
                 }
               ),
-              /* @__PURE__ */ jsxs34(
+              /* @__PURE__ */ jsxs35(
                 "div",
                 {
                   className: `flex gap-2 justify-end self-center ${!!itemErrors[kpi.id]?.name ? "mt-[-12px]" : ""}`,
                   children: [
-                    /* @__PURE__ */ jsx39(
+                    /* @__PURE__ */ jsx40(
                       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__ */ jsx40(IconX2, { className: "w-[30px] h-[30px] cursor-pointer", onClick: () => handleCancel(kpi.id) })
                   ]
                 }
               )
-            ] }) : /* @__PURE__ */ jsxs34(Fragment6, { children: [
-              /* @__PURE__ */ jsx39("p", { className: "body-1", children: kpi.name }),
-              /* @__PURE__ */ jsxs34("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__ */ jsxs35(Fragment6, { children: [
+              /* @__PURE__ */ jsx40("p", { className: "body-1", children: kpi.name }),
+              /* @__PURE__ */ jsxs35("div", { className: "flex gap-3 justify-end", children: [
+                /* @__PURE__ */ jsx40(IconPencil, { className: "w-[30px] h-[30px] cursor-pointer", onClick: () => handleEdit(kpi.id) }),
+                /* @__PURE__ */ jsx40(IconTrash3, { className: "w-[30px] h-[30px] cursor-pointer", onClick: () => handleDelete(kpi.id) })
               ] })
             ] })
           ] }, kpi.id)) })
@@ -3674,10 +3742,235 @@ function KpiSection({ type, onChangeKpiList }) {
 
 // src/Modal/Modal/Modal.tsx
 import { Modal } from "antd";
-import { jsx as jsx40 } from "react/jsx-runtime";
+import { jsx as jsx41 } 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__ */ jsx41("div", { children: /* @__PURE__ */ jsx41(Modal, { open: isOpen, onCancel, width, centered: true, footer: null, children: /* @__PURE__ */ jsx41("div", { children }) }) });
+}
+
+// src/Indicator/Indicator/Indicator.tsx
+import { IconCheck as IconCheck3, IconCirclePlus as IconCirclePlus2, IconPencil as IconPencil2, IconTrash as IconTrash4, IconX as IconX3 } from "@tabler/icons-react";
+import { useState as useState13 } from "react";
+import { Input as Input4 } from "antd";
+import { Fragment as Fragment7, jsx as jsx42, jsxs as jsxs36 } from "react/jsx-runtime";
+function Indicator({
+  option = [
+    { value: "TEXT", label: "\u0E02\u0E49\u0E2D\u0E04\u0E27\u0E32\u0E21" },
+    { value: "NUMBER", label: "\u0E15\u0E31\u0E27\u0E40\u0E25\u0E02" }
+  ],
+  type,
+  arrayData,
+  setArrayData
+}) {
+  const [valueSwitch, setValueSwitch] = useState13("TEXT");
+  const [cacheData, setCacheData] = useState13({
+    indicatorType: type,
+    inputType: valueSwitch,
+    textValue: "",
+    numberValue: "",
+    unit: ""
+  });
+  const [cacheEditData, setCacheEditData] = useState13({
+    indicatorType: type,
+    inputType: valueSwitch,
+    textValue: "",
+    numberValue: "",
+    unit: ""
+  });
+  const [editIndex, setEditIndex] = useState13(null);
+  const handleAddIndicator = () => {
+    if (cacheData.textValue.trim() === "") return;
+    setArrayData([
+      ...arrayData,
+      valueSwitch === "TEXT" ? {
+        indicatorType: type,
+        inputType: "TEXT",
+        textValue: cacheData.textValue
+      } : cacheData
+    ]);
+    setCacheData({
+      indicatorType: type,
+      inputType: valueSwitch,
+      textValue: "",
+      numberValue: "",
+      unit: ""
+    });
+  };
+  const handleChangeCashData = (key, value) => {
+    setCacheData((prev) => ({
+      ...prev,
+      [key]: value
+    }));
+    console.log(cacheData);
+  };
+  const handleClick = (active) => {
+    handleChangeCashData("inputType", active);
+    setValueSwitch(active);
+  };
+  const handleDeleteIndicator = (index) => {
+    const newData = arrayData.filter((_, i) => i !== index);
+    setArrayData(newData);
+    setEditIndex(null);
+  };
+  const handleEditIndicator = (index) => {
+    setCacheEditData(arrayData[index]);
+    setEditIndex(index);
+  };
+  const handleCancelEditIndicator = () => {
+    setEditIndex(null);
+  };
+  const handleConfirmEditIndicator = (index) => {
+    if (cacheEditData.textValue.trim() === "") return;
+    const newData = [...arrayData];
+    newData[index] = cacheEditData;
+    setArrayData(newData);
+    setEditIndex(null);
+  };
+  const handleChangeEditCashData = (e) => {
+    const { name, value } = e.target;
+    setCacheEditData((prev) => ({
+      ...prev,
+      [name]: value
+    }));
+    console.log(cacheEditData);
+  };
+  return /* @__PURE__ */ jsxs36("div", { className: "w-full", children: [
+    /* @__PURE__ */ jsxs36(
+      "div",
+      {
+        className: `space-x-2 grid ${valueSwitch === "TEXT" ? `grid-cols-[140px_1fr_50px]` : `grid-cols-[140px_1fr_200px_200px_50px]`} items-start`,
+        children: [
+          /* @__PURE__ */ jsx42(SwitchSelect, { option, onClick: handleClick, value: valueSwitch, label: "\u0E1B\u0E23\u0E30\u0E40\u0E20\u0E17", required: true }),
+          /* @__PURE__ */ jsx42(
+            InputField,
+            {
+              label: `\u0E0A\u0E37\u0E48\u0E2D\u0E15\u0E31\u0E27\u0E0A\u0E35\u0E49\u0E27\u0E31\u0E14${type === "OUTPUT" ? "\u0E1C\u0E25\u0E1C\u0E25\u0E34\u0E15" : "\u0E1C\u0E25\u0E25\u0E31\u0E1E\u0E18\u0E4C"}`,
+              value: cacheData.textValue,
+              className: "h-[32px]",
+              onChange: (e) => handleChangeCashData("textValue", String(e)),
+              placeholder: `\u0E23\u0E30\u0E1A\u0E38\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"}`,
+              required: true
+            }
+          ),
+          valueSwitch === "NUMBER" && /* @__PURE__ */ jsxs36(Fragment7, { children: [
+            /* @__PURE__ */ jsx42(
+              InputFieldNumber,
+              {
+                label: `\u0E04\u0E48\u0E32\u0E40\u0E1B\u0E49\u0E32\u0E2B\u0E21\u0E32\u0E22${type === "OUTPUT" ? "\u0E1C\u0E25\u0E1C\u0E25\u0E34\u0E15" : "\u0E1C\u0E25\u0E25\u0E31\u0E1E\u0E18\u0E4C"}`,
+                value: cacheData.numberValue ?? "",
+                className: "h-[32px]",
+                onChange: (e) => handleChangeCashData("numberValue", String(e)),
+                placeholder: `\u0E23\u0E30\u0E1A\u0E38\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"}`,
+                required: true
+              }
+            ),
+            /* @__PURE__ */ jsx42(
+              InputField,
+              {
+                label: `\u0E2B\u0E19\u0E48\u0E27\u0E22`,
+                value: cacheData.unit ?? "",
+                className: "h-[32px]",
+                onChange: (e) => handleChangeCashData("unit", String(e)),
+                placeholder: "\u0E23\u0E30\u0E1A\u0E38\u0E2B\u0E19\u0E48\u0E27\u0E22",
+                required: true
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx42(IconCirclePlus2, { onClick: handleAddIndicator, className: "mt-7 cursor-pointer", size: 32 })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx42(Fragment7, { children: arrayData.map((item, index) => /* @__PURE__ */ jsxs36(
+      "div",
+      {
+        className: `space-y-4 grid ${item.inputType === "TEXT" ? `grid-cols-[140px_1fr_50px_50px]` : `grid-cols-[140px_1fr_200px_150px_50px_50px]`} items-start`,
+        children: [
+          /* @__PURE__ */ jsx42("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__ */ jsx42(
+            Input4,
+            {
+              className: "body-1 mt-2",
+              variant: "underlined",
+              value: cacheEditData.textValue,
+              name: "textValue",
+              onChange: (e) => handleChangeEditCashData(e)
+            }
+          ) : /* @__PURE__ */ jsx42("div", { className: "body-1 mt-2", children: item.textValue }),
+          item.inputType === "NUMBER" && /* @__PURE__ */ jsxs36(Fragment7, { children: [
+            index === editIndex ? /* @__PURE__ */ jsx42(
+              Input4,
+              {
+                className: "body-1 mt-2",
+                variant: "underlined",
+                value: cacheEditData.numberValue,
+                name: "numberValue",
+                onChange: (e) => handleChangeEditCashData(e)
+              }
+            ) : /* @__PURE__ */ jsx42("div", { className: "body-1 mt-2", children: item.numberValue }),
+            index === editIndex ? /* @__PURE__ */ jsx42(
+              Input4,
+              {
+                className: "body-1 mt-2",
+                variant: "underlined",
+                value: cacheEditData.unit,
+                name: "unit",
+                onChange: (e) => handleChangeEditCashData(e)
+              }
+            ) : /* @__PURE__ */ jsx42("div", { className: "body-1 mt-2", children: item.unit })
+          ] }),
+          /* @__PURE__ */ jsx42("div", { className: "body-1 mt-2 flex", children: editIndex !== null ? editIndex === index ? /* @__PURE__ */ jsxs36("div", { className: "flex", children: [
+            /* @__PURE__ */ jsx42(
+              IconCheck3,
+              {
+                className: "cursor-pointer text-green-600",
+                onClick: () => handleConfirmEditIndicator(index)
+              }
+            ),
+            /* @__PURE__ */ jsx42(IconX3, { className: "cursor-pointer text-red-600", onClick: handleCancelEditIndicator })
+          ] }) : void 0 : /* @__PURE__ */ jsx42(IconPencil2, { className: "cursor-pointer", onClick: () => handleEditIndicator(index) }) }),
+          /* @__PURE__ */ jsx42("div", { className: "body-1 mt-2 cursor-pointer", children: /* @__PURE__ */ jsx42(IconTrash4, { onClick: () => handleDeleteIndicator(index) }) })
+        ]
+      }
+    )) })
+  ] });
 }
+
+// src/FilterPopUp/FilterPopUp.tsx
+import { IconCheck as IconCheck4, IconFilter as IconFilter2, IconTrash as IconTrash5 } from "@tabler/icons-react";
+import { useState as useState14 } from "react";
+import { jsx as jsx43, jsxs as jsxs37 } from "react/jsx-runtime";
+var FilterPopUp = (filter) => {
+  const [isAction, setIsAction] = useState14(true);
+  const [filterArray, setFilterArray] = useState14([""]);
+  const handleClearFilter = () => {
+    setFilterArray([]);
+  };
+  const handleSubmitFilter = () => {
+    filter.handleSearch(filterArray);
+  };
+  return /* @__PURE__ */ jsxs37("div", { className: "relative", children: [
+    /* @__PURE__ */ jsxs37("button", { className: "flex px-2 py-1 rounded-lg border-1", onClick: () => setIsAction(!isAction), children: [
+      /* @__PURE__ */ jsx43(IconFilter2, {}),
+      "filter"
+    ] }),
+    isAction ? /* @__PURE__ */ jsxs37("div", { className: "absolute bg-white p-5 rounded-lg shadow-2xl w-[600px]", children: [
+      /* @__PURE__ */ jsxs37("div", { className: "flex justify-end", children: [
+        /* @__PURE__ */ jsxs37("div", { className: "flex justify-end text-nowrap gap-2", children: [
+          /* @__PURE__ */ jsx43(GhostButton, { title: "\u0E43\u0E0A\u0E49\u0E1F\u0E34\u0E25\u0E40\u0E15\u0E2D\u0E23\u0E4C", onClick: handleSubmitFilter, iconLeft: /* @__PURE__ */ jsx43(IconCheck4, {}) }),
+          /* @__PURE__ */ jsx43(GhostButton, { title: "\u0E25\u0E49\u0E32\u0E07\u0E17\u0E31\u0E49\u0E07\u0E2B\u0E21\u0E14", onClick: handleClearFilter, iconLeft: /* @__PURE__ */ jsx43(IconTrash5, {}) })
+        ] }),
+        ""
+      ] }),
+      /* @__PURE__ */ jsx43(
+        SelectCustom,
+        {
+          options: filter.selectionFilter,
+          onChange: (list) => setFilterArray(list),
+          label: "\u0E04\u0E49\u0E19\u0E2B\u0E32\u0E15\u0E31\u0E27\u0E40\u0E25\u0E37\u0E2D\u0E01"
+        }
+      )
+    ] }) : void 0
+  ] });
+};
 export {
   AntDModal,
   AntDataTable,
@@ -3691,8 +3984,10 @@ export {
   DatePickerBasic,
   DatePickerRangePicker,
   FileUploader,
+  FilterPopUp,
   GhostButton,
   HeadingPage,
+  Indicator,
   InputField,
   InputFieldNumber,
   KpiSection,
@@ -3712,6 +4007,7 @@ export {
   Sidebar,
   SortFilter,
   Switch,
+  SwitchSelect,
   TabSelectionButton,
   TextAreaInput,
   TextInput,