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

package/dist/index.mjs

@@ -1118,7 +1118,8 @@ function InputField({
   addonBefore,
   addonAfter,
   defaultValue,
-  className
+  className,
+  onClear
 }) {
   return /* @__PURE__ */ jsx18(
     ConfigProvider2,
@@ -1145,7 +1146,8 @@ function InputField({
             allowClear: true,
             addonBefore,
             addonAfter,
-            defaultValue
+            defaultValue,
+            onClear
           }
         ),
         /* @__PURE__ */ jsxs14("div", { children: [
@@ -2232,7 +2234,8 @@ function ColorPalettePickerBasic({
   allowClear,
   defaultFormat,
   className,
-  placeholder = "\u0E01\u0E23\u0E38\u0E13\u0E32\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E2A\u0E35"
+  placeholder = "\u0E01\u0E23\u0E38\u0E13\u0E32\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E2A\u0E35",
+  onClear
 }) {
   const { token } = theme.useToken();
   const presets = genPresets({
@@ -2276,7 +2279,8 @@ function ColorPalettePickerBasic({
                 ")"
               ] });
             },
-            disabled
+            disabled,
+            onClear
           }
         ),
         /* @__PURE__ */ jsxs21("div", { children: [
@@ -2308,7 +2312,8 @@ function SelectField({
   prefix,
   prefixSize = 20,
   handleSearch,
-  className
+  className,
+  onClear
 }) {
   return /* @__PURE__ */ jsx26(
     ConfigProvider10,
@@ -2341,7 +2346,8 @@ function SelectField({
             mode,
             onSearch: handleSearch,
             prefix: prefix ? /* @__PURE__ */ jsx26("span", { style: { width: prefixSize, height: prefixSize, display: "flex", alignItems: "center", justifyContent: "center" }, children: prefix }) : void 0,
-            allowClear: true
+            allowClear: true,
+            onClear
           }
         ),
         /* @__PURE__ */ jsxs22("div", { children: [
@@ -2492,7 +2498,8 @@ function SelectFieldStatus({
             placeholder,
             optionFilterProp: "label",
             filterOption: (input, option) => (option?.label ?? "").toString().toLowerCase().includes(input.toLowerCase()),
-            options
+            options,
+            showSearch: true
           }
         ),
         /* @__PURE__ */ jsxs24("div", { children: [
@@ -2527,7 +2534,8 @@ function SelectFieldStatusReport({
   disabled,
   showError,
   errorMessage,
-  className
+  className,
+  options
 }) {
   const selectedItem = status2.find((s) => s.value === value);
   return /* @__PURE__ */ jsx29(
@@ -2562,12 +2570,9 @@ function SelectFieldStatusReport({
             className: `body-3 custom-select flex justify-center w-full ${className ?? ""}`,
             placeholder,
             optionFilterProp: "label",
-            filterSort: (optionA, optionB) => (optionA?.label ?? "").toLowerCase().localeCompare((optionB?.label ?? "").toLowerCase()),
-            options: status2.map((s) => ({
-              value: s.value,
-              label: s.label,
-              color: s.color
-            }))
+            filterOption: (input, option) => (option?.label ?? "").toString().toLowerCase().includes(input.toLowerCase()),
+            options,
+            showSearch: true
           }
         ),
         /* @__PURE__ */ jsxs25("div", { children: [
@@ -2594,7 +2599,8 @@ function SelectFieldTag({
   errorMessage,
   value: controlledValue,
   className,
-  onChange
+  onChange,
+  onClear
 }) {
   const [internalValue, setInternalValue] = useState6([]);
   const isControlled = controlledValue !== void 0;
@@ -2646,7 +2652,8 @@ function SelectFieldTag({
             },
             searchValue: searchWord,
             options,
-            allowClear: true
+            allowClear: true,
+            onClear
           }
         ),
         /* @__PURE__ */ jsxs26("div", { children: [
@@ -3089,6 +3096,479 @@ function ProgressBar({
     }
   );
 }
+
+// src/KpiSection/KpiSection.tsx
+import { ConfigProvider as ConfigProvider19, message } from "antd";
+import { useEffect as useEffect3, useState as useState11 } from "react";
+
+// src/KpiSection/hooks/useGetKpiSection.ts
+import { useState as useState10 } from "react";
+import cuid from "cuid";
+function useGetKpiSection() {
+  const [nameKpi, setNameKpi] = useState10("");
+  const [kpiValue, setKpiValue] = useState10("");
+  const [unitValue, setUnitValue] = useState10("");
+  const [kpiList, setKpiList] = useState10([]);
+  const [editingBackup, setEditingBackup] = useState10({});
+  const [selected, setSelected] = useState10("2");
+  const [errors, setErrors] = useState10({
+    nameKpi: "",
+    kpiValue: "",
+    unitValue: ""
+  });
+  const [itemErrors, setItemErrors] = useState10({});
+  const options = [
+    { value: "1", label: "\u0E02\u0E49\u0E2D\u0E04\u0E27\u0E32\u0E21" },
+    { value: "2", label: "\u0E15\u0E31\u0E27\u0E40\u0E25\u0E02" }
+  ];
+  const handleAddKpi = (type) => {
+    let newErrors = { nameKpi: "", kpiValue: "", unitValue: "" };
+    let hasError = false;
+    if (!nameKpi) {
+      newErrors.nameKpi = "\u0E42\u0E1B\u0E23\u0E14\u0E23\u0E30\u0E1A\u0E38";
+      hasError = true;
+    }
+    if (type === "number") {
+      if (!kpiValue) {
+        newErrors.kpiValue = "\u0E42\u0E1B\u0E23\u0E14\u0E23\u0E30\u0E1A\u0E38";
+        hasError = true;
+      }
+      if (!unitValue) {
+        newErrors.unitValue = "\u0E42\u0E1B\u0E23\u0E14\u0E23\u0E30\u0E1A\u0E38";
+        hasError = true;
+      }
+    }
+    setErrors(newErrors);
+    if (hasError) return;
+    const newKpi = {
+      id: cuid(),
+      name: nameKpi,
+      value: kpiValue,
+      unit: unitValue,
+      isEditing: false
+    };
+    setKpiList([...kpiList, newKpi]);
+    setNameKpi("");
+    setKpiValue("");
+    setUnitValue("");
+    setErrors({ nameKpi: "", kpiValue: "", unitValue: "" });
+  };
+  const handleEdit = (id) => {
+    const current = kpiList.find((kpi) => kpi.id === id);
+    if (current) {
+      setEditingBackup((prev) => ({ ...prev, [id]: { ...current } }));
+    }
+    setKpiList(
+      (prev) => prev.map((item) => item.id === id ? { ...item, isEditing: true } : item)
+    );
+  };
+  const handleSave = (id, type) => {
+    setKpiList((prev) => {
+      return prev.map((item) => {
+        if (item.id === id) {
+          let hasError = false;
+          const errorsForItem = {};
+          if (!item.name) {
+            errorsForItem.name = "\u0E42\u0E1B\u0E23\u0E14\u0E23\u0E30\u0E1A\u0E38";
+            hasError = true;
+          }
+          if (type === "number") {
+            if (!item.value) {
+              errorsForItem.value = "\u0E42\u0E1B\u0E23\u0E14\u0E23\u0E30\u0E1A\u0E38";
+              hasError = true;
+            }
+            if (!item.unit) {
+              errorsForItem.unit = "\u0E42\u0E1B\u0E23\u0E14\u0E23\u0E30\u0E1A\u0E38";
+              hasError = true;
+            }
+          }
+          if (hasError) {
+            setItemErrors((prev2) => ({ ...prev2, [id]: errorsForItem }));
+            return item;
+          }
+          setItemErrors((prev2) => {
+            const copy = { ...prev2 };
+            delete copy[id];
+            return copy;
+          });
+          return { ...item, isEditing: false };
+        }
+        return item;
+      });
+    });
+  };
+  const handleCancel = (id) => {
+    const backup = editingBackup[id];
+    if (backup) {
+      setKpiList(
+        (prev) => prev.map(
+          (item) => item.id === id ? { ...backup, isEditing: false } : item
+        )
+      );
+      setEditingBackup((prev) => {
+        const copy = { ...prev };
+        delete copy[id];
+        return copy;
+      });
+    } else {
+      setKpiList(
+        (prev) => prev.map(
+          (item) => item.id === id ? { ...item, isEditing: false } : item
+        )
+      );
+    }
+  };
+  const handleDelete = (id) => {
+    setKpiList((prev) => prev.filter((item) => item.id !== id));
+  };
+  return {
+    handleAddKpi,
+    handleEdit,
+    handleSave,
+    handleCancel,
+    handleDelete,
+    nameKpi,
+    setNameKpi,
+    kpiValue,
+    setKpiValue,
+    unitValue,
+    setUnitValue,
+    kpiList,
+    setKpiList,
+    editingBackup,
+    setEditingBackup,
+    options,
+    selected,
+    setSelected,
+    errors,
+    setErrors,
+    itemErrors,
+    setItemErrors
+  };
+}
+
+// src/KpiSection/KpiSection.tsx
+import {
+  IconCheck as IconCheck2,
+  IconCirclePlus,
+  IconPencil,
+  IconTrash as IconTrash2,
+  IconX as IconX2
+} from "@tabler/icons-react";
+import { Fragment as Fragment6, jsx as jsx36, jsxs as jsxs31 } from "react/jsx-runtime";
+function KpiSection({ type, onChangeKpiList }) {
+  const {
+    handleAddKpi,
+    handleEdit,
+    handleSave,
+    handleCancel,
+    handleDelete,
+    nameKpi,
+    setNameKpi,
+    kpiValue,
+    setKpiValue,
+    unitValue,
+    setUnitValue,
+    kpiList,
+    setKpiList,
+    errors,
+    itemErrors,
+    setItemErrors
+  } = useGetKpiSection();
+  const [messageApi2, messageContainer] = message.useMessage();
+  const [hasShownError, setHasShownError] = useState11(false);
+  useEffect3(() => {
+    setMessageApi(messageApi2);
+  }, [messageApi2]);
+  useEffect3(() => {
+    if (onChangeKpiList) {
+      onChangeKpiList(kpiList);
+    }
+  }, [kpiList]);
+  return /* @__PURE__ */ jsx36(
+    ConfigProvider19,
+    {
+      theme: {
+        token: {
+          fontFamily: "Kanit",
+          fontSize: 16
+        }
+      },
+      children: /* @__PURE__ */ jsxs31("div", { className: "container-input", children: [
+        messageContainer,
+        type === "number" && /* @__PURE__ */ jsxs31("div", { className: "space-y-4", children: [
+          /* @__PURE__ */ jsxs31("div", { className: "grid grid-cols-[1fr_200px_200px_50px] w-full gap-[24px] items-start", children: [
+            /* @__PURE__ */ jsx36(
+              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)",
+                placeholder: "\u0E42\u0E1B\u0E23\u0E14\u0E23\u0E30\u0E1A\u0E38",
+                require: true,
+                onChange: (value) => setNameKpi(value ?? ""),
+                className: "h-[32px]",
+                showError: !!errors.nameKpi,
+                errorMessage: errors.nameKpi
+              }
+            ),
+            /* @__PURE__ */ jsx36(
+              InputField,
+              {
+                value: kpiValue,
+                title: "\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",
+                require: true,
+                onChange: (value) => {
+                  if (value === void 0 || value === "") {
+                    setKpiValue("");
+                    setHasShownError(false);
+                  } else if (/^\d*\.?\d*$/.test(value)) {
+                    setKpiValue(value);
+                    setHasShownError(false);
+                  } else {
+                    if (!hasShownError) {
+                      messageError("\u0E01\u0E23\u0E38\u0E13\u0E32\u0E01\u0E23\u0E2D\u0E01\u0E15\u0E31\u0E27\u0E40\u0E25\u0E02\u0E40\u0E17\u0E48\u0E32\u0E19\u0E31\u0E49\u0E19");
+                      setHasShownError(true);
+                    }
+                  }
+                },
+                showError: !!errors.kpiValue,
+                errorMessage: errors.kpiValue
+              }
+            ),
+            /* @__PURE__ */ jsx36(
+              InputField,
+              {
+                value: unitValue,
+                title: "\u0E2B\u0E19\u0E48\u0E27\u0E22",
+                placeholder: "\u0E42\u0E1B\u0E23\u0E14\u0E23\u0E30\u0E1A\u0E38",
+                require: true,
+                onChange: (value) => setUnitValue(value ?? ""),
+                className: "h-[32px]",
+                showError: !!errors.unitValue,
+                errorMessage: errors.unitValue
+              }
+            ),
+            /* @__PURE__ */ jsx36("div", { className: "absolute top-21 right-5", children: /* @__PURE__ */ jsx36(
+              IconCirclePlus,
+              {
+                className: "w-[40px] h-[40px] cursor-pointer hover:scale-110 transition",
+                stroke: 1,
+                onClick: () => handleAddKpi(type)
+              }
+            ) })
+          ] }),
+          /* @__PURE__ */ jsx36("div", { children: kpiList.map((kpi, index) => /* @__PURE__ */ jsxs31(
+            "div",
+            {
+              className: "grid grid-cols-[30px_1fr_100px_120px_80px] items-start py-2 body-1 gap-[8px]",
+              children: [
+                /* @__PURE__ */ jsxs31("p", { className: `body-1 ${kpi.isEditing ? "mt-[12px]" : ""}`, children: [
+                  index + 1,
+                  "."
+                ] }),
+                kpi.isEditing ? /* @__PURE__ */ jsxs31(Fragment6, { children: [
+                  /* @__PURE__ */ jsx36(
+                    InputField,
+                    {
+                      value: kpi.name,
+                      onChange: (value) => setKpiList(
+                        (prev) => prev.map(
+                          (item) => item.id === kpi.id ? { ...item, name: value ?? "" } : item
+                        )
+                      ),
+                      showError: !!itemErrors[kpi.id]?.name,
+                      errorMessage: itemErrors[kpi.id]?.name
+                    }
+                  ),
+                  /* @__PURE__ */ jsx36(
+                    InputField,
+                    {
+                      value: kpi.value?.toString(),
+                      onChange: (value) => {
+                        if (value === void 0 || value === "") {
+                          setKpiList(
+                            (prev) => prev.map(
+                              (item) => item.id === kpi.id ? { ...item, value: "" } : item
+                            )
+                          );
+                          setHasShownError(false);
+                        } else if (/^\d*\.?\d*$/.test(value)) {
+                          setKpiList(
+                            (prev) => prev.map(
+                              (item) => item.id === kpi.id ? { ...item, value } : item
+                            )
+                          );
+                          setHasShownError(false);
+                        } else {
+                          if (!hasShownError) {
+                            messageError("\u0E01\u0E23\u0E38\u0E13\u0E32\u0E01\u0E23\u0E2D\u0E01\u0E15\u0E31\u0E27\u0E40\u0E25\u0E02\u0E40\u0E17\u0E48\u0E32\u0E19\u0E31\u0E49\u0E19");
+                            setHasShownError(true);
+                          }
+                        }
+                      },
+                      showError: !!itemErrors[kpi.id]?.value,
+                      errorMessage: itemErrors[kpi.id]?.value
+                    }
+                  ),
+                  /* @__PURE__ */ jsx36(
+                    InputField,
+                    {
+                      value: kpi.unit,
+                      onChange: (value) => setKpiList(
+                        (prev) => prev.map(
+                          (item) => item.id === kpi.id ? { ...item, unit: value ?? "" } : item
+                        )
+                      ),
+                      showError: !!itemErrors[kpi.id]?.unit,
+                      errorMessage: itemErrors[kpi.id]?.unit
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs31(
+                    "div",
+                    {
+                      className: `flex gap-2 justify-end self-center ${!!itemErrors[kpi.id]?.value || !!itemErrors[kpi.id]?.unit || !!itemErrors[kpi.id]?.name ? "mt-[-12px]" : ""}`,
+                      children: [
+                        /* @__PURE__ */ jsx36(
+                          IconCheck2,
+                          {
+                            className: "w-[30px] h-[30px] cursor-pointer",
+                            onClick: () => handleSave(kpi.id, type)
+                          }
+                        ),
+                        /* @__PURE__ */ jsx36(
+                          IconX2,
+                          {
+                            className: "w-[30px] h-[30px] cursor-pointer",
+                            onClick: () => handleCancel(kpi.id)
+                          }
+                        )
+                      ]
+                    }
+                  )
+                ] }) : /* @__PURE__ */ jsxs31(Fragment6, { children: [
+                  /* @__PURE__ */ jsx36("p", { className: "body-1", children: kpi.name }),
+                  /* @__PURE__ */ jsx36("p", { className: "body-1", children: kpi.value }),
+                  /* @__PURE__ */ jsx36("p", { className: "body-1", children: kpi.unit }),
+                  /* @__PURE__ */ jsxs31("div", { className: "flex gap-3 justify-end", children: [
+                    /* @__PURE__ */ jsx36(
+                      IconPencil,
+                      {
+                        className: "w-[30px] h-[30px] cursor-pointer",
+                        onClick: () => handleEdit(kpi.id)
+                      }
+                    ),
+                    /* @__PURE__ */ jsx36(
+                      IconTrash2,
+                      {
+                        className: "w-[30px] h-[30px] cursor-pointer",
+                        onClick: () => handleDelete(kpi.id)
+                      }
+                    )
+                  ] })
+                ] })
+              ]
+            },
+            kpi.id
+          )) })
+        ] }),
+        type === "text" && /* @__PURE__ */ jsxs31("div", { className: "space-y-4", children: [
+          /* @__PURE__ */ jsxs31("div", { className: "grid grid-cols-[1fr_50px] w-full gap-[24px] items-start", children: [
+            /* @__PURE__ */ jsx36(
+              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)",
+                placeholder: "\u0E42\u0E1B\u0E23\u0E14\u0E23\u0E30\u0E1A\u0E38",
+                require: true,
+                onChange: (value) => setNameKpi(value ?? ""),
+                className: "h-[32px]",
+                showError: !!errors.nameKpi,
+                errorMessage: errors.nameKpi
+              }
+            ),
+            /* @__PURE__ */ jsx36("div", { className: "absolute top-21 right-5", children: /* @__PURE__ */ jsx36(
+              IconCirclePlus,
+              {
+                className: "w-[40px] h-[40px] cursor-pointer hover:scale-110 transition",
+                stroke: 1,
+                onClick: () => handleAddKpi(type)
+              }
+            ) })
+          ] }),
+          /* @__PURE__ */ jsx36("div", { children: kpiList.map((kpi, index) => /* @__PURE__ */ jsxs31(
+            "div",
+            {
+              className: "grid grid-cols-[30px_1fr_80px] items-start py-2 body-1 gap-[8px]",
+              children: [
+                /* @__PURE__ */ jsxs31("p", { className: `body-1 ${kpi.isEditing ? "mt-[12px]" : ""}`, children: [
+                  index + 1,
+                  "."
+                ] }),
+                kpi.isEditing ? /* @__PURE__ */ jsxs31(Fragment6, { children: [
+                  /* @__PURE__ */ jsx36(
+                    InputField,
+                    {
+                      value: kpi.name,
+                      onChange: (value) => setKpiList(
+                        (prev) => prev.map(
+                          (item) => item.id === kpi.id ? { ...item, name: value ?? "" } : item
+                        )
+                      ),
+                      showError: !!itemErrors[kpi.id]?.name,
+                      errorMessage: itemErrors[kpi.id]?.name
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs31(
+                    "div",
+                    {
+                      className: `flex gap-2 justify-end self-center ${!!itemErrors[kpi.id]?.name ? "mt-[-12px]" : ""}`,
+                      children: [
+                        /* @__PURE__ */ jsx36(
+                          IconCheck2,
+                          {
+                            className: "w-[30px] h-[30px] cursor-pointer",
+                            onClick: () => handleSave(kpi.id, type)
+                          }
+                        ),
+                        /* @__PURE__ */ jsx36(
+                          IconX2,
+                          {
+                            className: "w-[30px] h-[30px] cursor-pointer",
+                            onClick: () => handleCancel(kpi.id)
+                          }
+                        )
+                      ]
+                    }
+                  )
+                ] }) : /* @__PURE__ */ jsxs31(Fragment6, { children: [
+                  /* @__PURE__ */ jsx36("p", { className: "body-1", children: kpi.name }),
+                  /* @__PURE__ */ jsxs31("div", { className: "flex gap-3 justify-end", children: [
+                    /* @__PURE__ */ jsx36(
+                      IconPencil,
+                      {
+                        className: "w-[30px] h-[30px] cursor-pointer",
+                        onClick: () => handleEdit(kpi.id)
+                      }
+                    ),
+                    /* @__PURE__ */ jsx36(
+                      IconTrash2,
+                      {
+                        className: "w-[30px] h-[30px] cursor-pointer",
+                        onClick: () => handleDelete(kpi.id)
+                      }
+                    )
+                  ] })
+                ] })
+              ]
+            },
+            kpi.id
+          )) })
+        ] })
+      ] })
+    }
+  );
+}
 export {
   AntDataTable,
   Breadcrumbs,
@@ -3104,6 +3584,7 @@ export {
   GhostButton,
   HeadingPage,
   InputField,
+  KpiSection,
   Loader,
   MenuNavBar,
   PrimaryButton,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@esic-lab/data-core-ui",
-  "version": "0.0.20",
+  "version": "0.0.22",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -64,8 +64,9 @@
     "@tabler/icons-react": "^3.35.0",
     "antd": "^5.27.3",
     "classnames": "^2.5.1",
-    "fullcalendar": "^6.1.19",
+    "cuid": "^3.0.0",
     "d3": "^7.9.0",
+    "fullcalendar": "^6.1.19",
     "qrcode": "^1.5.4"
   },
   "publishConfig": {