@esic-lab/data-core-ui 0.0.59 → 0.0.61

package/dist/index.js

@@ -411,47 +411,91 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/Button/PrimaryButton/PrimaryButton.tsx
+var import_antd = require("antd");
 var import_jsx_runtime = require("react/jsx-runtime");
 function PrimaryButton({
   title,
   onClick,
-  iconLeft,
-  iconRight,
-  bgColor = "bg-primary-500",
-  textColor = "black",
-  disabled
+  disabled,
+  iconPlacement = "start",
+  size = "large",
+  colorPrimary = "#4e61f6",
+  colorPrimaryHover = "#8895f9",
+  textColor = "#ffffff",
+  icon
 }) {
+  const textClass = size === "large" ? "body-1" : "body-3";
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "button",
+    import_antd.ConfigProvider,
     {
-      onClick,
-      disabled,
-      className: `flex justify-center w-full h-[42px] rounded-[6px] p-[10px] body-1 transition 
-      ${disabled ? "text-gray-400 bg-gray-100 cursor-not-allowed" : `${bgColor} text-${textColor} cursor-pointer 
-             hover:brightness-95 active:brightness-90`}`,
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex justify-center items-center gap-[10px]", children: [
-        iconLeft && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: iconLeft }),
-        title,
-        iconRight && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: iconRight })
-      ] })
+      theme: {
+        token: {
+          colorPrimary,
+          colorPrimaryHover,
+          colorTextLightSolid: textColor
+        }
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_antd.Button,
+        {
+          size,
+          onClick,
+          type: "primary",
+          className: textClass,
+          disabled,
+          icon,
+          iconPosition: iconPlacement,
+          children: title
+        }
+      )
     }
   );
 }
 
 // src/Button/SecondaryButton/SecondaryButton.tsx
+var import_antd2 = require("antd");
 var import_jsx_runtime2 = require("react/jsx-runtime");
-function SecondaryButton({ title, onClick, iconLeft, iconRight, disabled }) {
+function SecondaryButton({
+  title,
+  onClick,
+  disabled,
+  iconPlacement = "start",
+  size = "large",
+  colorBgContainer = "#ffffff",
+  defaultHoverBorderColor = "#7181f8",
+  defaultHoverColor = "#7181f8",
+  textColor = "rgba(0,0,0,0.88)",
+  icon
+}) {
+  const textClass = size === "large" ? "body-1" : "body-3";
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-    "button",
+    import_antd2.ConfigProvider,
     {
-      onClick,
-      disabled,
-      className: `flex justify-center w-full h-[42px] rounded-[6px] p-[10px] border-[1px] body-1 transition ${disabled ? "text-gray-400 border-gray-400 bg-gray-100 cursor-not-allowed" : "cursor-pointer bg-white border-black text-black hover:bg-gray-100 active:bg-gray-200"}`,
-      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex justify-center items-center gap-[10px]", children: [
-        iconLeft && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { children: iconLeft }),
-        title,
-        iconRight && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { children: iconRight })
-      ] })
+      theme: {
+        components: {
+          Button: {
+            defaultHoverBorderColor,
+            defaultHoverColor
+          }
+        },
+        token: {
+          colorBgContainer,
+          colorText: textColor
+        }
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        import_antd2.Button,
+        {
+          size,
+          onClick,
+          type: "default",
+          className: textClass,
+          disabled,
+          icon,
+          iconPosition: iconPlacement,
+          children: title
+        }
+      )
     }
   );
 }
@@ -860,7 +904,7 @@ function DataTable({ columns, data, onSort, isLoading }) {
 }
 
 // src/Table/DataTable/AntDataTable.tsx
-var import_antd = require("antd");
+var import_antd3 = require("antd");
 var import_react5 = require("react");
 var import_jsx_runtime17 = require("react/jsx-runtime");
 function AntDataTable({
@@ -889,7 +933,7 @@ function AntDataTable({
     onFilter(filters);
   };
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_jsx_runtime17.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-    import_antd.ConfigProvider,
+    import_antd3.ConfigProvider,
     {
       theme: {
         components: {},
@@ -899,7 +943,7 @@ function AntDataTable({
         }
       },
       children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-        import_antd.Table,
+        import_antd3.Table,
         {
           dataSource,
           columns,
@@ -1121,9 +1165,9 @@ function TextInput({
 }
 
 // src/Input/TextArea/TextArea.tsx
-var import_antd2 = require("antd");
+var import_antd4 = require("antd");
 var import_jsx_runtime20 = require("react/jsx-runtime");
-var { TextArea } = import_antd2.Input;
+var { TextArea } = import_antd4.Input;
 function TextAreaInput({
   label,
   height = 4,
@@ -1138,7 +1182,7 @@ function TextAreaInput({
   disabled
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_jsx_runtime20.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-    import_antd2.ConfigProvider,
+    import_antd4.ConfigProvider,
     {
       theme: {
         components: {},
@@ -1176,7 +1220,7 @@ function TextAreaInput({
 }
 
 // src/Input/InputField/InputField.tsx
-var import_antd3 = require("antd");
+var import_antd5 = require("antd");
 var import_jsx_runtime21 = require("react/jsx-runtime");
 function InputField({
   value,
@@ -1194,7 +1238,7 @@ function InputField({
   statickey
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-    import_antd3.ConfigProvider,
+    import_antd5.ConfigProvider,
     {
       theme: {
         token: {
@@ -1207,10 +1251,10 @@ function InputField({
           " ",
           required && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "text-red-500", children: "*" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_antd3.Space.Compact, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_antd5.Space.Compact, { children: [
           statickey && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "items-center flex px-2 bg-gray-300 rounded-l-md body-1", children: statickey }),
           /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-            import_antd3.Input,
+            import_antd5.Input,
             {
               value,
               placeholder,
@@ -1232,7 +1276,7 @@ function InputField({
 }
 
 // src/Input/InputFieldNumber/InputFieldNumber.tsx
-var import_antd4 = require("antd");
+var import_antd6 = require("antd");
 var import_jsx_runtime22 = require("react/jsx-runtime");
 function InputFieldNumber({
   value,
@@ -1255,7 +1299,7 @@ function InputFieldNumber({
   parser
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-    import_antd4.ConfigProvider,
+    import_antd6.ConfigProvider,
     {
       theme: {
         token: {
@@ -1269,7 +1313,7 @@ function InputFieldNumber({
           required && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "text-red-500", children: "*" })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-          import_antd4.InputNumber,
+          import_antd6.InputNumber,
           {
             value: value ?? void 0,
             onChange: (val) => onChange(val),
@@ -1284,8 +1328,17 @@ function InputFieldNumber({
             controls,
             size,
             changeOnWheel,
-            formatter,
-            parser
+            formatter: formatter ?? ((value2) => {
+              if (value2 === void 0 || value2 === null || value2 === "")
+                return "";
+              const num = Number(value2);
+              if (isNaN(num)) return "";
+              return num.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+            }),
+            parser: parser ?? ((value2) => {
+              if (!value2) return "";
+              return value2.replace(/,/g, "");
+            })
           }
         ),
         error && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "text-red-500 caption-1", children: error })
@@ -1618,7 +1671,7 @@ function DatePickerRange({
 }
 
 // src/ColorPicker/ColorPickerBasic/ColorPicker.tsx
-var import_antd5 = require("antd");
+var import_antd7 = require("antd");
 var import_jsx_runtime25 = require("react/jsx-runtime");
 function ColorPickerBasic({
   value,
@@ -1633,7 +1686,7 @@ function ColorPickerBasic({
   placeholder = "\u0E01\u0E23\u0E38\u0E13\u0E32\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E2A\u0E35"
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-    import_antd5.ConfigProvider,
+    import_antd7.ConfigProvider,
     {
       theme: {
         token: {
@@ -1648,7 +1701,7 @@ function ColorPickerBasic({
           required && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "text-red-500", children: "*" })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-          import_antd5.ColorPicker,
+          import_antd7.ColorPicker,
           {
             defaultFormat,
             className: `body-1 w-full ${className ?? ""}`,
@@ -1677,7 +1730,7 @@ function ColorPickerBasic({
 }
 
 // src/ColorPicker/ColorPalettePickerBasic/ColorPalettePickerBasic.tsx
-var import_antd6 = require("antd");
+var import_antd8 = require("antd");
 
 // node_modules/@babel/runtime/helpers/esm/typeof.js
 function _typeof(o) {
@@ -2400,14 +2453,14 @@ function ColorPalettePickerBasic({
   placeholder = "\u0E01\u0E23\u0E38\u0E13\u0E32\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E2A\u0E35",
   onClear
 }) {
-  const { token } = import_antd6.theme.useToken();
+  const { token } = import_antd8.theme.useToken();
   const presets = genPresets({
     primary: generate(token.colorPrimary),
     red,
     green
   });
   return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-    import_antd6.ConfigProvider,
+    import_antd8.ConfigProvider,
     {
       theme: {
         token: {
@@ -2422,7 +2475,7 @@ function ColorPalettePickerBasic({
           required && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "text-red-500", children: "*" })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-          import_antd6.ColorPicker,
+          import_antd8.ColorPicker,
           {
             defaultFormat,
             className: `body-1 w-full ${className ?? ""}`,
@@ -2453,7 +2506,7 @@ function ColorPalettePickerBasic({
 }
 
 // src/Select/SelectField/SelectField.tsx
-var import_antd7 = require("antd");
+var import_antd9 = require("antd");
 var import_jsx_runtime27 = require("react/jsx-runtime");
 function SelectField({
   value,
@@ -2470,10 +2523,12 @@ function SelectField({
   prefixSize = 20,
   handleSearch,
   className,
-  onClear
+  onClear,
+  size = "middle",
+  allowClear = true
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-    import_antd7.ConfigProvider,
+    import_antd9.ConfigProvider,
     {
       theme: {
         token: {
@@ -2488,8 +2543,9 @@ function SelectField({
           required && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "text-red-500", children: "*" })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-          import_antd7.Select,
+          import_antd9.Select,
           {
+            size,
             showSearch: true,
             value: value ? value : void 0,
             defaultValue,
@@ -2515,7 +2571,7 @@ function SelectField({
                 children: prefix
               }
             ) : void 0,
-            allowClear: true,
+            allowClear,
             onClear
           }
         ),
@@ -2526,7 +2582,7 @@ function SelectField({
 }
 
 // src/Select/SelectFieldGroup/SelectFieldGroup.tsx
-var import_antd8 = require("antd");
+var import_antd10 = require("antd");
 var import_jsx_runtime28 = require("react/jsx-runtime");
 function SelectFieldGroup({
   value,
@@ -2542,10 +2598,12 @@ function SelectFieldGroup({
   prefix,
   prefixSize = 20,
   handleSearch,
-  className
+  className,
+  size = "middle",
+  allowClear = true
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-    import_antd8.ConfigProvider,
+    import_antd10.ConfigProvider,
     {
       theme: {
         token: {
@@ -2559,8 +2617,9 @@ function SelectFieldGroup({
           required && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "text-red-500", children: "*" })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-          import_antd8.Select,
+          import_antd10.Select,
           {
+            size,
             showSearch: true,
             value: value ? value : void 0,
             defaultValue,
@@ -2586,7 +2645,7 @@ function SelectFieldGroup({
                 children: prefix
               }
             ) : void 0,
-            allowClear: true
+            allowClear
           }
         ),
         error && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { className: "text-red-500 caption-1", children: error })
@@ -2596,7 +2655,7 @@ function SelectFieldGroup({
 }
 
 // src/Select/SelectFieldStatus/SelectFieldStatus.tsx
-var import_antd9 = require("antd");
+var import_antd11 = require("antd");
 var import_icons = require("@ant-design/icons");
 var import_jsx_runtime29 = require("react/jsx-runtime");
 function SelectFieldStatus({
@@ -2608,11 +2667,13 @@ function SelectFieldStatus({
   disabled,
   error,
   options,
-  className
+  className,
+  size = "middle",
+  allowClear = false
 }) {
   const selectedItem = options?.find((s) => s.value === value);
   return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-    import_antd9.ConfigProvider,
+    import_antd11.ConfigProvider,
     {
       theme: {
         components: {
@@ -2634,8 +2695,9 @@ function SelectFieldStatus({
           required && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "text-red-500", children: "*" })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-          import_antd9.Select,
+          import_antd11.Select,
           {
+            size,
             disabled,
             suffixIcon: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_icons.DownOutlined, { style: { color: value ? "#fff" : "#D9D9D9" } }),
             value: value ? value : void 0,
@@ -2645,7 +2707,8 @@ function SelectFieldStatus({
             optionFilterProp: "label",
             filterOption: (input, option) => (option?.label ?? "").toString().toLowerCase().includes(input.toLowerCase()),
             options,
-            showSearch: true
+            showSearch: true,
+            allowClear
           }
         ),
         error && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { className: "text-red-500 caption-1", children: error })
@@ -2655,7 +2718,7 @@ function SelectFieldStatus({
 }
 
 // src/Select/SelectFieldStatusReport/SelectFieldStatusReport.tsx
-var import_antd10 = require("antd");
+var import_antd12 = require("antd");
 
 // src/Select/SelectFieldStatusReport/StatusReportMockup.ts
 var status = [
@@ -2675,11 +2738,13 @@ function SelectFieldStatusReport({
   disabled,
   error,
   className,
-  options
+  options,
+  size = "middle",
+  allowClear = false
 }) {
   const selectedItem = status.find((s) => s.value === value);
   return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-    import_antd10.ConfigProvider,
+    import_antd12.ConfigProvider,
     {
       theme: {
         components: {
@@ -2701,8 +2766,9 @@ function SelectFieldStatusReport({
           required && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "text-red-500", children: "*" })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-          import_antd10.Select,
+          import_antd12.Select,
           {
+            size,
             disabled,
             suffixIcon: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_icons2.DownOutlined, { style: { color: value ? "#fff" : "#D9D9D9" } }),
             value: value ? value : void 0,
@@ -2712,7 +2778,8 @@ function SelectFieldStatusReport({
             optionFilterProp: "label",
             filterOption: (input, option) => (option?.label ?? "").toString().toLowerCase().includes(input.toLowerCase()),
             options,
-            showSearch: true
+            showSearch: true,
+            allowClear
           }
         ),
         error && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { className: "text-red-500 caption-1", children: error })
@@ -2722,7 +2789,7 @@ function SelectFieldStatusReport({
 }
 
 // src/Select/SelectFieldTag/SelectFieldTag.tsx
-var import_antd11 = require("antd");
+var import_antd13 = require("antd");
 var import_react11 = require("react");
 var import_jsx_runtime31 = require("react/jsx-runtime");
 function SelectFieldTag({
@@ -2734,7 +2801,9 @@ function SelectFieldTag({
   value: controlledValue,
   className,
   onChange,
-  onClear
+  onClear,
+  size = "middle",
+  allowClear = true
 }) {
   const [internalValue, setInternalValue] = (0, import_react11.useState)([]);
   const isControlled = controlledValue !== void 0;
@@ -2758,7 +2827,7 @@ function SelectFieldTag({
     onChange?.([]);
   };
   return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-    import_antd11.ConfigProvider,
+    import_antd13.ConfigProvider,
     {
       theme: {
         token: {
@@ -2772,8 +2841,9 @@ function SelectFieldTag({
           required && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "text-red-500", children: "*" })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-          import_antd11.Select,
+          import_antd13.Select,
           {
+            size,
             mode: "tags",
             className: `body-1 flex justify-center w-full ${className ?? ""}`,
             placeholder,
@@ -2786,7 +2856,7 @@ function SelectFieldTag({
             },
             searchValue: searchWord,
             options,
-            allowClear: true,
+            allowClear,
             onClear
           }
         ),
@@ -2798,7 +2868,7 @@ function SelectFieldTag({
 
 // src/Select/SelectCustom/SelectCustom.tsx
 var import_icons_react8 = require("@tabler/icons-react");
-var import_antd12 = require("antd");
+var import_antd14 = require("antd");
 var import_react12 = require("react");
 var import_jsx_runtime32 = require("react/jsx-runtime");
 function SelectCustom({
@@ -2808,7 +2878,9 @@ function SelectCustom({
   required = false,
   onChange,
   error,
-  onClear
+  onClear,
+  size = "middle",
+  allowClear = true
 }) {
   const [value, setValue] = (0, import_react12.useState)([]);
   const [valueList, setValueList] = (0, import_react12.useState)([]);
@@ -2830,7 +2902,7 @@ function SelectCustom({
   };
   const filteredOptions = options.filter((opt) => !valueList.includes(opt.value)).map((opt) => ({ value: opt.value, label: opt.label }));
   return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-    import_antd12.ConfigProvider,
+    import_antd14.ConfigProvider,
     {
       theme: {
         token: {
@@ -2845,14 +2917,16 @@ function SelectCustom({
           required && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "text-red-500", children: "*" })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-          import_antd12.Select,
+          import_antd14.Select,
           {
+            size,
             value: value ? value : void 0,
             onChange: handleChange,
             placeholder,
             options: filteredOptions,
             mode: "tags",
-            onClear
+            onClear,
+            allowClear
           }
         ),
         error && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { className: "text-red-500 caption-1", children: error }),
@@ -2885,7 +2959,7 @@ function SelectCustom({
 }
 
 // src/SortFilter/SortFilter.tsx
-var import_antd13 = require("antd");
+var import_antd15 = require("antd");
 var import_icons3 = require("@ant-design/icons");
 
 // src/SortFilter/DataMockSortFilter.ts
@@ -2930,7 +3004,7 @@ function SortFilter({
   const [monthValue, setMonthValue] = (0, import_react13.useState)();
   const [quarterValue, setQuartersValue] = (0, import_react13.useState)();
   return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-    import_antd13.ConfigProvider,
+    import_antd15.ConfigProvider,
     {
       theme: {
         token: {
@@ -3203,8 +3277,8 @@ function messageLoading(content, duration) {
 }
 
 // src/Breadcrumb/Breadcrumb.tsx
-var import_antd14 = require("antd");
-var import_antd15 = require("antd");
+var import_antd16 = require("antd");
+var import_antd17 = require("antd");
 var import_jsx_runtime35 = require("react/jsx-runtime");
 function Breadcrumbs({
   items,
@@ -3214,7 +3288,7 @@ function Breadcrumbs({
   params
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-    import_antd14.ConfigProvider,
+    import_antd16.ConfigProvider,
     {
       theme: {
         token: {
@@ -3222,7 +3296,7 @@ function Breadcrumbs({
         }
       },
       children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-        import_antd15.Breadcrumb,
+        import_antd17.Breadcrumb,
         {
           items,
           separator,
@@ -3236,7 +3310,7 @@ function Breadcrumbs({
 }
 
 // src/HeadingPage/HeadingPage.tsx
-var import_antd16 = require("antd");
+var import_antd18 = require("antd");
 var import_jsx_runtime36 = require("react/jsx-runtime");
 function HeadingPage({ Heading }) {
   const today = (/* @__PURE__ */ new Date()).toLocaleDateString("th-TH", {
@@ -3246,7 +3320,7 @@ function HeadingPage({ Heading }) {
     year: "numeric"
   });
   return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-    import_antd16.ConfigProvider,
+    import_antd18.ConfigProvider,
     {
       theme: {
         token: {
@@ -3265,7 +3339,7 @@ function HeadingPage({ Heading }) {
 }
 
 // src/Progress/ProgressBar.tsx
-var import_antd17 = require("antd");
+var import_antd19 = require("antd");
 var import_react15 = require("react");
 var import_jsx_runtime37 = require("react/jsx-runtime");
 function ProgressBar({
@@ -3299,7 +3373,7 @@ function ProgressBar({
     return () => observer.disconnect();
   }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
-    import_antd17.ConfigProvider,
+    import_antd19.ConfigProvider,
     {
       theme: {
         token: {
@@ -3308,7 +3382,7 @@ function ProgressBar({
       },
       children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "relative w-full", ref: progressRef, children: [
         /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
-          import_antd17.Progress,
+          import_antd19.Progress,
           {
             className: "w-full",
             percent,
@@ -3345,7 +3419,7 @@ function ProgressBar({
 }
 
 // src/KpiSection/KpiSection.tsx
-var import_antd18 = require("antd");
+var import_antd20 = require("antd");
 var import_react17 = require("react");
 
 // src/KpiSection/hooks/useGetKpiSection.ts
@@ -3516,7 +3590,7 @@ function KpiSection({ type, onChangeKpiList }) {
     itemErrors,
     setItemErrors
   } = useGetKpiSection();
-  const [messageApi2, messageContainer] = import_antd18.message.useMessage();
+  const [messageApi2, messageContainer] = import_antd20.message.useMessage();
   const [hasShownError, setHasShownError] = (0, import_react17.useState)(false);
   (0, import_react17.useEffect)(() => {
     setMessageApi(messageApi2);
@@ -3527,7 +3601,7 @@ function KpiSection({ type, onChangeKpiList }) {
     }
   }, [kpiList]);
   return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
-    import_antd18.ConfigProvider,
+    import_antd20.ConfigProvider,
     {
       theme: {
         token: {
@@ -3751,16 +3825,16 @@ function KpiSection({ type, onChangeKpiList }) {
 }
 
 // src/Modal/Modal/Modal.tsx
-var import_antd19 = require("antd");
+var import_antd21 = require("antd");
 var import_jsx_runtime39 = require("react/jsx-runtime");
 function AntDModal({ children, isOpen, width, onCancel }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_antd19.Modal, { open: isOpen, onCancel, width, centered: true, footer: null, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { children }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_antd21.Modal, { open: isOpen, onCancel, width, centered: true, footer: null, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { children }) }) });
 }
 
 // src/Indicator/Indicator/Indicator.tsx
 var import_icons_react12 = require("@tabler/icons-react");
 var import_react18 = require("react");
-var import_antd20 = require("antd");
+var import_antd22 = require("antd");
 var import_jsx_runtime40 = require("react/jsx-runtime");
 function Indicator({
   option = [
@@ -3972,7 +4046,7 @@ function Indicator({
           /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "body-1 mt-2", children: item.inputType === "TEXT" ? "\u0E02\u0E49\u0E2D\u0E04\u0E27\u0E32\u0E21" : "\u0E15\u0E31\u0E27\u0E40\u0E25\u0E02" }),
           index === editIndex ? /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex flex-col gap-[8px]", children: [
             /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
-              import_antd20.Input,
+              import_antd22.Input,
               {
                 className: "body-1 mt-2",
                 variant: "underlined",
@@ -3989,7 +4063,7 @@ function Indicator({
           item.inputType === "NUMBER" && /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_jsx_runtime40.Fragment, { children: [
             index === editIndex ? /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex flex-col gap-[8px]", children: [
               /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
-                import_antd20.Input,
+                import_antd22.Input,
                 {
                   type: "number",
                   className: "body-1 mt-2",
@@ -4006,7 +4080,7 @@ function Indicator({
             ] }) : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "body-1 mt-2", children: item.numberValue }),
             index === editIndex ? /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex flex-col gap-[8px]", children: [
               /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
-                import_antd20.Input,
+                import_antd22.Input,
                 {
                   className: "body-1 mt-2",
                   variant: "underlined",
@@ -4104,7 +4178,7 @@ var FilterPopUp = (filter) => {
 // src/ProfileSelect/ProfileSelect/ProfileSelect.tsx
 var import_react20 = require("react");
 var import_icons_react14 = require("@tabler/icons-react");
-var import_antd21 = require("antd");
+var import_antd23 = require("antd");
 var import_jsx_runtime42 = require("react/jsx-runtime");
 function ProfileSelect({
   allUser,
@@ -4162,6 +4236,9 @@ function ProfileSelect({
   const filteredUnassigned = normalizedSearch ? userNotAssign.filter(
     (u) => u.name.toLowerCase().includes(normalizedSearch)
   ) : userNotAssign;
+  const isSearching = normalizedSearch.length > 0;
+  const noResult = filteredAssigned.length === 0 && filteredUnassigned.length === 0;
+  const noUserOption = allUser.length === 0 && !isSearching;
   return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { ref: containerRef, className: "relative body-1", children: [
     mode === "icon" ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
       import_icons_react14.IconUsers,
@@ -4258,7 +4335,7 @@ function ProfileSelect({
           /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex border-1 rounded-md p-2 gap-2 items-center", children: [
             /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_icons_react14.IconSearch, {}),
             /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-              import_antd21.Input,
+              import_antd23.Input,
               {
                 variant: "borderless",
                 placeholder: "\u0E04\u0E49\u0E19\u0E2B\u0E32\u0E0A\u0E37\u0E48\u0E2D",
@@ -4268,15 +4345,15 @@ function ProfileSelect({
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "overflow-y-auto h-[250px] pt-2 px-4 body-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "overflow-y-auto h-[250px] pt-2 px-4 body-3", children: noUserOption ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "flex items-center justify-center h-full text-gray-400 select-none", children: "\u0E22\u0E31\u0E07\u0E44\u0E21\u0E48\u0E21\u0E35\u0E1C\u0E39\u0E49\u0E04\u0E19\u0E43\u0E2B\u0E49\u0E40\u0E25\u0E37\u0E2D\u0E01" }) : isSearching && noResult ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "flex items-center justify-center h-full text-gray-400 select-none", children: "\u0E44\u0E21\u0E48\u0E1E\u0E1A\u0E1C\u0E39\u0E49\u0E04\u0E19\u0E17\u0E35\u0E48\u0E15\u0E23\u0E07\u0E01\u0E31\u0E1A\u0E01\u0E32\u0E23\u0E04\u0E49\u0E19\u0E2B\u0E32" }) : /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_jsx_runtime42.Fragment, { children: [
             filteredAssigned.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_jsx_runtime42.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { children: "\u0E2A\u0E21\u0E32\u0E0A\u0E34\u0E01\u0E17\u0E35\u0E48\u0E40\u0E25\u0E37\u0E2D\u0E01" }),
+              /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "mb-1", children: "\u0E2A\u0E21\u0E32\u0E0A\u0E34\u0E01\u0E17\u0E35\u0E48\u0E40\u0E25\u0E37\u0E2D\u0E01" }),
               filteredAssigned.map((user) => /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
                 "button",
                 {
                   className: "flex items-center group my-1 w-full p-1 rounded hover:bg-gray-100",
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "relative  cursor-pointer", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "relative cursor-pointer", children: [
                       /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                         "img",
                         {
@@ -4293,7 +4370,7 @@ function ProfileSelect({
                       /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                         "span",
                         {
-                          className: "absolute top-0 right-0 -translate-y-2 translate-x-2 \r\n               rounded-full bg-white opacity-0 group-hover:opacity-100 \r\n               border-3 border-red-500 flex items-center justify-center transition",
+                          className: "absolute top-0 right-0 -translate-y-2 translate-x-2 \r\n                  rounded-full bg-white opacity-0 group-hover:opacity-100 \r\n                  border-3 border-red-500 flex items-center justify-center transition",
                           onClick: () => onUpdateAssignUser(user, "remove"),
                           children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_icons_react14.IconX, { className: "text-red-500", size: 15 })
                         }
@@ -4305,32 +4382,34 @@ function ProfileSelect({
                 user.id
               ))
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { children: "\u0E1C\u0E39\u0E49\u0E04\u0E19 " }),
-            filteredUnassigned.map((user) => /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
-              "button",
-              {
-                className: "flex items-center my-1 hover:bg-gray-100 w-full p-1 rounded",
-                onClick: () => onUpdateAssignUser(user),
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-                    "img",
-                    {
-                      src: user.profile,
-                      alt: user.name,
-                      style: {
-                        width: avatarSize,
-                        height: avatarSize,
-                        borderRadius: "50%"
-                      },
-                      className: "border "
-                    }
-                  ),
-                  /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "ml-2", children: user.name })
-                ]
-              },
-              user.id
-            ))
-          ] })
+            filteredUnassigned.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_jsx_runtime42.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "mt-2", children: "\u0E1C\u0E39\u0E49\u0E04\u0E19" }),
+              filteredUnassigned.map((user) => /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+                "button",
+                {
+                  className: "flex items-center my-1 hover:bg-gray-100 w-full p-1 rounded",
+                  onClick: () => onUpdateAssignUser(user),
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+                      "img",
+                      {
+                        src: user.profile,
+                        alt: user.name,
+                        style: {
+                          width: avatarSize,
+                          height: avatarSize,
+                          borderRadius: "50%"
+                        },
+                        className: "border"
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "ml-2", children: user.name })
+                  ]
+                },
+                user.id
+              ))
+            ] })
+          ] }) })
         ]
       }
     ) : null
@@ -4476,11 +4555,11 @@ var QRCodeGenerator = ({
 };
 
 // src/TabPropject/TabProject/TabProject.tsx
-var import_antd22 = require("antd");
+var import_antd24 = require("antd");
 var import_jsx_runtime44 = require("react/jsx-runtime");
 function TabProject({ tabOption, now, onChange }) {
   return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-    import_antd22.ConfigProvider,
+    import_antd24.ConfigProvider,
     {
       theme: {
         token: {
@@ -4497,7 +4576,7 @@ function TabProject({ tabOption, now, onChange }) {
         }
       },
       children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-        import_antd22.Tabs,
+        import_antd24.Tabs,
         {
           activeKey: now,
           onChange,