npm - @esic-lab/data-core-ui - Versions diffs - 0.0.46 → 0.0.47 - Mend

@esic-lab/data-core-ui 0.0.46 → 0.0.47

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/dist/index.css CHANGED Viewed

@@ -29,6 +29,7 @@
     --color-red-600: #ee443f;
     --color-red-700: #a9302d;
     --color-yellow-400: #ffbb33;
+    --color-yellow-500: #ffaa00;
     --color-green-400: #69c57d;
     --color-green-500: #43b75d;
     --color-green-600: #3da755;
@@ -339,8 +340,8 @@
   .mt-4 {
     margin-top: calc(var(--spacing) * 4);
   }
-  .mt-7 {
-    margin-top: calc(var(--spacing) * 7);
+  .mt-8 {
+    margin-top: calc(var(--spacing) * 8);
   }
   .mt-\[-12px\] {
     margin-top: -12px;
@@ -751,6 +752,13 @@
       margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
+  .space-y-2 {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
   .space-y-4 {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
@@ -1140,6 +1148,9 @@
   .text-white {
     color: var(--color-white);
   }
+  .text-yellow-500 {
+    color: var(--color-yellow-500);
+  }
   .uppercase {
     text-transform: uppercase;
   }

package/dist/index.d.mts CHANGED Viewed

@@ -523,16 +523,22 @@ interface IndicatorProps {
     }[];
     type: "OUTPUT" | "OUTCOME";
     arrayData: IndicatorArray[];
+    canEdit?: boolean;
     setArrayData: (data: IndicatorArray[]) => void;
+    onDeleteClick?: (payload: {
+        index: number;
+        item: IndicatorArray;
+        confirm: () => void;
+    }) => void;
 }
 interface IndicatorArray {
     indicatorType: "OUTPUT" | "OUTCOME";
     inputType: "TEXT" | "NUMBER";
     textValue: string;
-    numberValue?: string;
+    numberValue?: number;
     unit?: string;
 }
-declare function Indicator({ option, type, arrayData, setArrayData, }: IndicatorProps): react_jsx_runtime.JSX.Element;
+declare function Indicator({ option, type, arrayData, setArrayData, canEdit, onDeleteClick, }: IndicatorProps): react_jsx_runtime.JSX.Element;
 interface optionSelect {
     value: string;

package/dist/index.d.ts CHANGED Viewed

@@ -523,16 +523,22 @@ interface IndicatorProps {
     }[];
     type: "OUTPUT" | "OUTCOME";
     arrayData: IndicatorArray[];
+    canEdit?: boolean;
     setArrayData: (data: IndicatorArray[]) => void;
+    onDeleteClick?: (payload: {
+        index: number;
+        item: IndicatorArray;
+        confirm: () => void;
+    }) => void;
 }
 interface IndicatorArray {
     indicatorType: "OUTPUT" | "OUTCOME";
     inputType: "TEXT" | "NUMBER";
     textValue: string;
-    numberValue?: string;
+    numberValue?: number;
     unit?: string;
 }
-declare function Indicator({ option, type, arrayData, setArrayData, }: IndicatorProps): react_jsx_runtime.JSX.Element;
+declare function Indicator({ option, type, arrayData, setArrayData, canEdit, onDeleteClick, }: IndicatorProps): react_jsx_runtime.JSX.Element;
 interface optionSelect {
     value: string;

package/dist/index.js CHANGED Viewed

@@ -3753,41 +3753,66 @@ function Indicator({
   ],
   type,
   arrayData,
-  setArrayData
+  setArrayData,
+  canEdit,
+  onDeleteClick
 }) {
   const [valueSwitch, setValueSwitch] = (0, import_react17.useState)("TEXT");
   const [cacheData, setCacheData] = (0, import_react17.useState)({
     indicatorType: type,
     inputType: valueSwitch,
     textValue: "",
-    numberValue: "",
+    numberValue: 0,
     unit: ""
   });
   const [cacheEditData, setCacheEditData] = (0, import_react17.useState)({
     indicatorType: type,
     inputType: valueSwitch,
     textValue: "",
-    numberValue: "",
+    numberValue: 0,
     unit: ""
   });
   const [editIndex, setEditIndex] = (0, import_react17.useState)(null);
+  const [addError, setAddError] = (0, import_react17.useState)({});
+  const [editError, setEditError] = (0, import_react17.useState)({});
   const handleAddIndicator = () => {
-    if (cacheData.textValue.trim() === "") return;
-    setArrayData([
-      ...arrayData,
-      valueSwitch === "TEXT" ? {
-        indicatorType: type,
-        inputType: "TEXT",
-        textValue: cacheData.textValue
-      } : cacheData
-    ]);
+    const nextErr = {};
+    const textValue = (cacheData.textValue ?? "").trim();
+    const unit = (cacheData.unit ?? "").trim();
+    if (textValue === "") {
+      nextErr.textValue = "\u0E01\u0E23\u0E38\u0E13\u0E32\u0E23\u0E30\u0E1A\u0E38\u0E0A\u0E37\u0E48\u0E2D\u0E15\u0E31\u0E27\u0E0A\u0E35\u0E49\u0E27\u0E31\u0E14";
+    }
+    if (valueSwitch === "NUMBER") {
+      const num = cacheData.numberValue;
+      if (num === void 0 || num === null || Number(num) <= 0) {
+        nextErr.numberValue = "\u0E01\u0E23\u0E38\u0E13\u0E32\u0E23\u0E30\u0E1A\u0E38\u0E04\u0E48\u0E32\u0E15\u0E31\u0E27\u0E40\u0E25\u0E02";
+      }
+      if (unit === "") {
+        nextErr.unit = "\u0E01\u0E23\u0E38\u0E13\u0E32\u0E23\u0E30\u0E1A\u0E38\u0E2B\u0E19\u0E48\u0E27\u0E22";
+      }
+    }
+    setAddError(nextErr);
+    if (Object.keys(nextErr).length > 0) return;
+    const newItem = valueSwitch === "TEXT" ? {
+      indicatorType: type,
+      inputType: "TEXT",
+      textValue
+    } : {
+      indicatorType: type,
+      inputType: "NUMBER",
+      textValue,
+      numberValue: Number(cacheData.numberValue),
+      unit
+    };
+    setArrayData([...arrayData, newItem]);
     setCacheData({
       indicatorType: type,
       inputType: valueSwitch,
       textValue: "",
-      numberValue: "",
+      numberValue: 0,
       unit: ""
     });
+    setAddError({});
   };
   const handleChangeCashData = (key, value) => {
     setCacheData((prev) => ({
@@ -3813,11 +3838,32 @@ function Indicator({
     setEditIndex(null);
   };
   const handleConfirmEditIndicator = (index) => {
-    if (cacheEditData.textValue.trim() === "") return;
+    const nextErr = {};
+    const textValue = (cacheEditData.textValue ?? "").trim();
+    const unit = (cacheEditData.unit ?? "").trim();
+    const num = cacheEditData.numberValue;
+    if (textValue === "") {
+      nextErr.textValue = "\u0E01\u0E23\u0E38\u0E13\u0E32\u0E23\u0E30\u0E1A\u0E38\u0E0A\u0E37\u0E48\u0E2D\u0E15\u0E31\u0E27\u0E0A\u0E35\u0E49\u0E27\u0E31\u0E14";
+    }
+    if (cacheEditData.inputType === "NUMBER") {
+      if (num === void 0 || num === null || Number(num) <= 0) {
+        nextErr.numberValue = "\u0E01\u0E23\u0E38\u0E13\u0E32\u0E23\u0E30\u0E1A\u0E38\u0E04\u0E48\u0E32\u0E15\u0E31\u0E27\u0E40\u0E25\u0E02";
+      }
+      if (unit === "") {
+        nextErr.unit = "\u0E01\u0E23\u0E38\u0E13\u0E32\u0E23\u0E30\u0E1A\u0E38\u0E2B\u0E19\u0E48\u0E27\u0E22";
+      }
+    }
+    setEditError(nextErr);
+    if (Object.keys(nextErr).length > 0) return;
     const newData = [...arrayData];
-    newData[index] = cacheEditData;
+    newData[index] = {
+      ...cacheEditData,
+      textValue,
+      ...cacheEditData.inputType === "NUMBER" ? { numberValue: Number(num), unit } : { numberValue: void 0, unit: void 0 }
+    };
     setArrayData(newData);
     setEditIndex(null);
+    setEditError({});
   };
   const handleChangeEditCashData = (e) => {
     const { name, value } = e.target;
@@ -3833,16 +3879,29 @@ function Indicator({
       {
         className: `space-x-2 grid ${valueSwitch === "TEXT" ? `grid-cols-[140px_1fr_50px]` : `grid-cols-[140px_1fr_200px_200px_50px]`} items-start`,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(SwitchSelect, { option, onClick: handleClick, value: valueSwitch, label: "\u0E1B\u0E23\u0E30\u0E40\u0E20\u0E17", required: true }),
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+            SwitchSelect,
+            {
+              option,
+              onClick: handleClick,
+              value: valueSwitch,
+              label: "\u0E1B\u0E23\u0E30\u0E40\u0E20\u0E17",
+              required: true
+            }
+          ),
           /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
             InputField,
             {
               label: `\u0E0A\u0E37\u0E48\u0E2D\u0E15\u0E31\u0E27\u0E0A\u0E35\u0E49\u0E27\u0E31\u0E14${type === "OUTPUT" ? "\u0E1C\u0E25\u0E1C\u0E25\u0E34\u0E15" : "\u0E1C\u0E25\u0E25\u0E31\u0E1E\u0E18\u0E4C"}`,
               value: cacheData.textValue,
               className: "h-[32px]",
-              onChange: (e) => handleChangeCashData("textValue", String(e)),
+              onChange: (val) => {
+                handleChangeCashData("textValue", val ?? "");
+                setAddError((p) => ({ ...p, textValue: void 0 }));
+              },
               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
+              required: true,
+              error: addError.textValue
             }
           ),
           valueSwitch === "NUMBER" && /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_jsx_runtime40.Fragment, { children: [
@@ -3850,11 +3909,16 @@ function Indicator({
               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 ?? "",
+                value: cacheData.numberValue ?? 0,
                 className: "h-[32px]",
-                onChange: (e) => handleChangeCashData("numberValue", String(e)),
+                onChange: (val) => {
+                  handleChangeCashData("numberValue", val ?? 0);
+                  setAddError((p) => ({ ...p, numberValue: void 0 }));
+                },
+                min: 0,
                 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
+                required: true,
+                error: addError.numberValue
               }
             ),
             /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
@@ -3863,53 +3927,83 @@ function Indicator({
                 label: `\u0E2B\u0E19\u0E48\u0E27\u0E22`,
                 value: cacheData.unit ?? "",
                 className: "h-[32px]",
-                onChange: (e) => handleChangeCashData("unit", String(e)),
+                onChange: (val) => {
+                  handleChangeCashData("unit", val ?? "");
+                  setAddError((p) => ({ ...p, unit: void 0 }));
+                },
                 placeholder: "\u0E23\u0E30\u0E1A\u0E38\u0E2B\u0E19\u0E48\u0E27\u0E22",
-                required: true
+                required: true,
+                error: addError.unit
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_icons_react12.IconCirclePlus, { onClick: handleAddIndicator, className: "mt-7 cursor-pointer", size: 32 })
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+            import_icons_react12.IconCirclePlus,
+            {
+              onClick: handleAddIndicator,
+              className: "mt-8 cursor-pointer",
+              size: 32
+            }
+          )
         ]
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_jsx_runtime40.Fragment, { children: arrayData.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
       "div",
       {
-        className: `space-y-4 grid ${item.inputType === "TEXT" ? `grid-cols-[140px_1fr_50px_50px]` : `grid-cols-[140px_1fr_200px_150px_50px_50px]`} items-start`,
+        className: `space-y-2 grid ${item.inputType === "TEXT" ? `grid-cols-[140px_1fr_50px_50px]` : `grid-cols-[140px_1fr_200px_150px_50px_50px]`} items-start`,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "body-1 mt-2", children: item.inputType === "TEXT" ? "\u0E02\u0E49\u0E2D\u0E04\u0E27\u0E32\u0E21" : "\u0E15\u0E31\u0E27\u0E40\u0E25\u0E02" }),
-          index === editIndex ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
-            import_antd20.Input,
-            {
-              className: "body-1 mt-2",
-              variant: "underlined",
-              value: cacheEditData.textValue,
-              name: "textValue",
-              onChange: (e) => handleChangeEditCashData(e)
-            }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "body-1 mt-2", children: item.textValue }),
-          item.inputType === "NUMBER" && /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_jsx_runtime40.Fragment, { children: [
-            index === editIndex ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
-              import_antd20.Input,
-              {
-                className: "body-1 mt-2",
-                variant: "underlined",
-                value: cacheEditData.numberValue,
-                name: "numberValue",
-                onChange: (e) => handleChangeEditCashData(e)
-              }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "body-1 mt-2", children: item.numberValue }),
-            index === editIndex ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+          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,
               {
                 className: "body-1 mt-2",
                 variant: "underlined",
-                value: cacheEditData.unit,
-                name: "unit",
-                onChange: (e) => handleChangeEditCashData(e)
+                value: cacheEditData.textValue,
+                name: "textValue",
+                onChange: (e) => {
+                  handleChangeEditCashData(e);
+                  setEditError((p) => ({ ...p, textValue: void 0 }));
+                }
               }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "body-1 mt-2", children: item.unit })
+            ),
+            editError.textValue && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "text-red-500 caption-1", children: editError.textValue })
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "body-1 mt-2", children: item.textValue }),
+          item.inputType === "NUMBER" && /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_jsx_runtime40.Fragment, { children: [
+            index === editIndex ? /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex flex-col gap-[8px]", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+                import_antd20.Input,
+                {
+                  type: "number",
+                  className: "body-1 mt-2",
+                  variant: "underlined",
+                  value: cacheEditData.numberValue,
+                  name: "numberValue",
+                  onChange: (e) => {
+                    handleChangeEditCashData(e);
+                    setEditError((p) => ({ ...p, numberValue: void 0 }));
+                  }
+                }
+              ),
+              editError.numberValue && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "text-red-500 caption-1", children: editError.numberValue })
+            ] }) : /* @__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,
+                {
+                  className: "body-1 mt-2",
+                  variant: "underlined",
+                  value: cacheEditData.unit,
+                  name: "unit",
+                  onChange: (e) => {
+                    handleChangeEditCashData(e);
+                    setEditError((p) => ({ ...p, unit: void 0 }));
+                  }
+                }
+              ),
+              editError.unit && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "text-red-500 caption-1", children: editError.unit })
+            ] }) : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "body-1 mt-2", children: item.unit })
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "body-1 mt-2 flex", children: editIndex !== null ? editIndex === index ? /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex", children: [
             /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
@@ -3919,11 +4013,36 @@ function Indicator({
                 onClick: () => handleConfirmEditIndicator(index)
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_icons_react12.IconX, { className: "cursor-pointer text-red-600", onClick: handleCancelEditIndicator })
-          ] }) : void 0 : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_icons_react12.IconPencil, { className: "cursor-pointer", onClick: () => handleEditIndicator(index) }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "body-1 mt-2 cursor-pointer", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_icons_react12.IconTrash, { onClick: () => handleDeleteIndicator(index) }) })
+            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+              import_icons_react12.IconX,
+              {
+                className: "cursor-pointer text-red-600",
+                onClick: handleCancelEditIndicator
+              }
+            )
+          ] }) : void 0 : canEdit && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+            import_icons_react12.IconPencil,
+            {
+              className: "cursor-pointer",
+              onClick: () => handleEditIndicator(index)
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "body-1 mt-2 cursor-pointer", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+            import_icons_react12.IconTrash,
+            {
+              onClick: () => {
+                const confirm = () => handleDeleteIndicator(index);
+                if (onDeleteClick) {
+                  onDeleteClick({ index, item, confirm });
+                } else {
+                  confirm();
+                }
+              }
+            }
+          ) })
         ]
-      }
+      },
+      index
     )) })
   ] });
 }

package/dist/index.mjs CHANGED Viewed

@@ -3681,7 +3681,13 @@ function AntDModal({ children, isOpen, width, onCancel }) {
 }
 // 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 {
+  IconCheck as IconCheck3,
+  IconCirclePlus as IconCirclePlus2,
+  IconPencil as IconPencil2,
+  IconTrash as IconTrash4,
+  IconX as IconX3
+} from "@tabler/icons-react";
 import { useState as useState15 } from "react";
 import { Input as Input4 } from "antd";
 import { Fragment as Fragment7, jsx as jsx40, jsxs as jsxs34 } from "react/jsx-runtime";
@@ -3692,41 +3698,66 @@ function Indicator({
   ],
   type,
   arrayData,
-  setArrayData
+  setArrayData,
+  canEdit,
+  onDeleteClick
 }) {
   const [valueSwitch, setValueSwitch] = useState15("TEXT");
   const [cacheData, setCacheData] = useState15({
     indicatorType: type,
     inputType: valueSwitch,
     textValue: "",
-    numberValue: "",
+    numberValue: 0,
     unit: ""
   });
   const [cacheEditData, setCacheEditData] = useState15({
     indicatorType: type,
     inputType: valueSwitch,
     textValue: "",
-    numberValue: "",
+    numberValue: 0,
     unit: ""
   });
   const [editIndex, setEditIndex] = useState15(null);
+  const [addError, setAddError] = useState15({});
+  const [editError, setEditError] = useState15({});
   const handleAddIndicator = () => {
-    if (cacheData.textValue.trim() === "") return;
-    setArrayData([
-      ...arrayData,
-      valueSwitch === "TEXT" ? {
-        indicatorType: type,
-        inputType: "TEXT",
-        textValue: cacheData.textValue
-      } : cacheData
-    ]);
+    const nextErr = {};
+    const textValue = (cacheData.textValue ?? "").trim();
+    const unit = (cacheData.unit ?? "").trim();
+    if (textValue === "") {
+      nextErr.textValue = "\u0E01\u0E23\u0E38\u0E13\u0E32\u0E23\u0E30\u0E1A\u0E38\u0E0A\u0E37\u0E48\u0E2D\u0E15\u0E31\u0E27\u0E0A\u0E35\u0E49\u0E27\u0E31\u0E14";
+    }
+    if (valueSwitch === "NUMBER") {
+      const num = cacheData.numberValue;
+      if (num === void 0 || num === null || Number(num) <= 0) {
+        nextErr.numberValue = "\u0E01\u0E23\u0E38\u0E13\u0E32\u0E23\u0E30\u0E1A\u0E38\u0E04\u0E48\u0E32\u0E15\u0E31\u0E27\u0E40\u0E25\u0E02";
+      }
+      if (unit === "") {
+        nextErr.unit = "\u0E01\u0E23\u0E38\u0E13\u0E32\u0E23\u0E30\u0E1A\u0E38\u0E2B\u0E19\u0E48\u0E27\u0E22";
+      }
+    }
+    setAddError(nextErr);
+    if (Object.keys(nextErr).length > 0) return;
+    const newItem = valueSwitch === "TEXT" ? {
+      indicatorType: type,
+      inputType: "TEXT",
+      textValue
+    } : {
+      indicatorType: type,
+      inputType: "NUMBER",
+      textValue,
+      numberValue: Number(cacheData.numberValue),
+      unit
+    };
+    setArrayData([...arrayData, newItem]);
     setCacheData({
       indicatorType: type,
       inputType: valueSwitch,
       textValue: "",
-      numberValue: "",
+      numberValue: 0,
       unit: ""
     });
+    setAddError({});
   };
   const handleChangeCashData = (key, value) => {
     setCacheData((prev) => ({
@@ -3752,11 +3783,32 @@ function Indicator({
     setEditIndex(null);
   };
   const handleConfirmEditIndicator = (index) => {
-    if (cacheEditData.textValue.trim() === "") return;
+    const nextErr = {};
+    const textValue = (cacheEditData.textValue ?? "").trim();
+    const unit = (cacheEditData.unit ?? "").trim();
+    const num = cacheEditData.numberValue;
+    if (textValue === "") {
+      nextErr.textValue = "\u0E01\u0E23\u0E38\u0E13\u0E32\u0E23\u0E30\u0E1A\u0E38\u0E0A\u0E37\u0E48\u0E2D\u0E15\u0E31\u0E27\u0E0A\u0E35\u0E49\u0E27\u0E31\u0E14";
+    }
+    if (cacheEditData.inputType === "NUMBER") {
+      if (num === void 0 || num === null || Number(num) <= 0) {
+        nextErr.numberValue = "\u0E01\u0E23\u0E38\u0E13\u0E32\u0E23\u0E30\u0E1A\u0E38\u0E04\u0E48\u0E32\u0E15\u0E31\u0E27\u0E40\u0E25\u0E02";
+      }
+      if (unit === "") {
+        nextErr.unit = "\u0E01\u0E23\u0E38\u0E13\u0E32\u0E23\u0E30\u0E1A\u0E38\u0E2B\u0E19\u0E48\u0E27\u0E22";
+      }
+    }
+    setEditError(nextErr);
+    if (Object.keys(nextErr).length > 0) return;
     const newData = [...arrayData];
-    newData[index] = cacheEditData;
+    newData[index] = {
+      ...cacheEditData,
+      textValue,
+      ...cacheEditData.inputType === "NUMBER" ? { numberValue: Number(num), unit } : { numberValue: void 0, unit: void 0 }
+    };
     setArrayData(newData);
     setEditIndex(null);
+    setEditError({});
   };
   const handleChangeEditCashData = (e) => {
     const { name, value } = e.target;
@@ -3772,16 +3824,29 @@ function Indicator({
       {
         className: `space-x-2 grid ${valueSwitch === "TEXT" ? `grid-cols-[140px_1fr_50px]` : `grid-cols-[140px_1fr_200px_200px_50px]`} items-start`,
         children: [
-          /* @__PURE__ */ jsx40(SwitchSelect, { option, onClick: handleClick, value: valueSwitch, label: "\u0E1B\u0E23\u0E30\u0E40\u0E20\u0E17", required: true }),
+          /* @__PURE__ */ jsx40(
+            SwitchSelect,
+            {
+              option,
+              onClick: handleClick,
+              value: valueSwitch,
+              label: "\u0E1B\u0E23\u0E30\u0E40\u0E20\u0E17",
+              required: true
+            }
+          ),
           /* @__PURE__ */ jsx40(
             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)),
+              onChange: (val) => {
+                handleChangeCashData("textValue", val ?? "");
+                setAddError((p) => ({ ...p, textValue: void 0 }));
+              },
               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
+              required: true,
+              error: addError.textValue
             }
           ),
           valueSwitch === "NUMBER" && /* @__PURE__ */ jsxs34(Fragment7, { children: [
@@ -3789,11 +3854,16 @@ function Indicator({
               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 ?? "",
+                value: cacheData.numberValue ?? 0,
                 className: "h-[32px]",
-                onChange: (e) => handleChangeCashData("numberValue", String(e)),
+                onChange: (val) => {
+                  handleChangeCashData("numberValue", val ?? 0);
+                  setAddError((p) => ({ ...p, numberValue: void 0 }));
+                },
+                min: 0,
                 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
+                required: true,
+                error: addError.numberValue
               }
             ),
             /* @__PURE__ */ jsx40(
@@ -3802,53 +3872,83 @@ function Indicator({
                 label: `\u0E2B\u0E19\u0E48\u0E27\u0E22`,
                 value: cacheData.unit ?? "",
                 className: "h-[32px]",
-                onChange: (e) => handleChangeCashData("unit", String(e)),
+                onChange: (val) => {
+                  handleChangeCashData("unit", val ?? "");
+                  setAddError((p) => ({ ...p, unit: void 0 }));
+                },
                 placeholder: "\u0E23\u0E30\u0E1A\u0E38\u0E2B\u0E19\u0E48\u0E27\u0E22",
-                required: true
+                required: true,
+                error: addError.unit
               }
             )
           ] }),
-          /* @__PURE__ */ jsx40(IconCirclePlus2, { onClick: handleAddIndicator, className: "mt-7 cursor-pointer", size: 32 })
+          /* @__PURE__ */ jsx40(
+            IconCirclePlus2,
+            {
+              onClick: handleAddIndicator,
+              className: "mt-8 cursor-pointer",
+              size: 32
+            }
+          )
         ]
       }
     ),
     /* @__PURE__ */ jsx40(Fragment7, { children: arrayData.map((item, index) => /* @__PURE__ */ jsxs34(
       "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`,
+        className: `space-y-2 grid ${item.inputType === "TEXT" ? `grid-cols-[140px_1fr_50px_50px]` : `grid-cols-[140px_1fr_200px_150px_50px_50px]`} items-start`,
         children: [
           /* @__PURE__ */ jsx40("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__ */ jsx40(
-            Input4,
-            {
-              className: "body-1 mt-2",
-              variant: "underlined",
-              value: cacheEditData.textValue,
-              name: "textValue",
-              onChange: (e) => handleChangeEditCashData(e)
-            }
-          ) : /* @__PURE__ */ jsx40("div", { className: "body-1 mt-2", children: item.textValue }),
-          item.inputType === "NUMBER" && /* @__PURE__ */ jsxs34(Fragment7, { children: [
-            index === editIndex ? /* @__PURE__ */ jsx40(
-              Input4,
-              {
-                className: "body-1 mt-2",
-                variant: "underlined",
-                value: cacheEditData.numberValue,
-                name: "numberValue",
-                onChange: (e) => handleChangeEditCashData(e)
-              }
-            ) : /* @__PURE__ */ jsx40("div", { className: "body-1 mt-2", children: item.numberValue }),
-            index === editIndex ? /* @__PURE__ */ jsx40(
+          index === editIndex ? /* @__PURE__ */ jsxs34("div", { className: "flex flex-col gap-[8px]", children: [
+            /* @__PURE__ */ jsx40(
               Input4,
               {
                 className: "body-1 mt-2",
                 variant: "underlined",
-                value: cacheEditData.unit,
-                name: "unit",
-                onChange: (e) => handleChangeEditCashData(e)
+                value: cacheEditData.textValue,
+                name: "textValue",
+                onChange: (e) => {
+                  handleChangeEditCashData(e);
+                  setEditError((p) => ({ ...p, textValue: void 0 }));
+                }
               }
-            ) : /* @__PURE__ */ jsx40("div", { className: "body-1 mt-2", children: item.unit })
+            ),
+            editError.textValue && /* @__PURE__ */ jsx40("p", { className: "text-red-500 caption-1", children: editError.textValue })
+          ] }) : /* @__PURE__ */ jsx40("div", { className: "body-1 mt-2", children: item.textValue }),
+          item.inputType === "NUMBER" && /* @__PURE__ */ jsxs34(Fragment7, { children: [
+            index === editIndex ? /* @__PURE__ */ jsxs34("div", { className: "flex flex-col gap-[8px]", children: [
+              /* @__PURE__ */ jsx40(
+                Input4,
+                {
+                  type: "number",
+                  className: "body-1 mt-2",
+                  variant: "underlined",
+                  value: cacheEditData.numberValue,
+                  name: "numberValue",
+                  onChange: (e) => {
+                    handleChangeEditCashData(e);
+                    setEditError((p) => ({ ...p, numberValue: void 0 }));
+                  }
+                }
+              ),
+              editError.numberValue && /* @__PURE__ */ jsx40("p", { className: "text-red-500 caption-1", children: editError.numberValue })
+            ] }) : /* @__PURE__ */ jsx40("div", { className: "body-1 mt-2", children: item.numberValue }),
+            index === editIndex ? /* @__PURE__ */ jsxs34("div", { className: "flex flex-col gap-[8px]", children: [
+              /* @__PURE__ */ jsx40(
+                Input4,
+                {
+                  className: "body-1 mt-2",
+                  variant: "underlined",
+                  value: cacheEditData.unit,
+                  name: "unit",
+                  onChange: (e) => {
+                    handleChangeEditCashData(e);
+                    setEditError((p) => ({ ...p, unit: void 0 }));
+                  }
+                }
+              ),
+              editError.unit && /* @__PURE__ */ jsx40("p", { className: "text-red-500 caption-1", children: editError.unit })
+            ] }) : /* @__PURE__ */ jsx40("div", { className: "body-1 mt-2", children: item.unit })
           ] }),
           /* @__PURE__ */ jsx40("div", { className: "body-1 mt-2 flex", children: editIndex !== null ? editIndex === index ? /* @__PURE__ */ jsxs34("div", { className: "flex", children: [
             /* @__PURE__ */ jsx40(
@@ -3858,11 +3958,36 @@ function Indicator({
                 onClick: () => handleConfirmEditIndicator(index)
               }
             ),
-            /* @__PURE__ */ jsx40(IconX3, { className: "cursor-pointer text-red-600", onClick: handleCancelEditIndicator })
-          ] }) : void 0 : /* @__PURE__ */ jsx40(IconPencil2, { className: "cursor-pointer", onClick: () => handleEditIndicator(index) }) }),
-          /* @__PURE__ */ jsx40("div", { className: "body-1 mt-2 cursor-pointer", children: /* @__PURE__ */ jsx40(IconTrash4, { onClick: () => handleDeleteIndicator(index) }) })
+            /* @__PURE__ */ jsx40(
+              IconX3,
+              {
+                className: "cursor-pointer text-red-600",
+                onClick: handleCancelEditIndicator
+              }
+            )
+          ] }) : void 0 : canEdit && /* @__PURE__ */ jsx40(
+            IconPencil2,
+            {
+              className: "cursor-pointer",
+              onClick: () => handleEditIndicator(index)
+            }
+          ) }),
+          /* @__PURE__ */ jsx40("div", { className: "body-1 mt-2 cursor-pointer", children: /* @__PURE__ */ jsx40(
+            IconTrash4,
+            {
+              onClick: () => {
+                const confirm = () => handleDeleteIndicator(index);
+                if (onDeleteClick) {
+                  onDeleteClick({ index, item, confirm });
+                } else {
+                  confirm();
+                }
+              }
+            }
+          ) })
         ]
-      }
+      },
+      index
     )) })
   ] });
 }

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@esic-lab/data-core-ui",
-  "version": "0.0.46",
+  "version": "0.0.47",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",