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

package/dist/index.js

@@ -475,6 +475,7 @@ __export(index_exports, {
   GhostButton: () => GhostButton,
   HeadingPage: () => HeadingPage,
   InputField: () => InputField,
+  KpiSection: () => KpiSection,
   Loader: () => Loader,
   MenuNavBar: () => MenuNavBar,
   PrimaryButton: () => PrimaryButton,
@@ -1170,7 +1171,8 @@ function InputField({
   addonBefore,
   addonAfter,
   defaultValue,
-  className
+  className,
+  onClear
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     import_antd2.ConfigProvider,
@@ -1197,7 +1199,8 @@ function InputField({
             allowClear: true,
             addonBefore,
             addonAfter,
-            defaultValue
+            defaultValue,
+            onClear
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { children: [
@@ -2284,7 +2287,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 } = import_antd9.theme.useToken();
   const presets = genPresets({
@@ -2328,7 +2332,8 @@ function ColorPalettePickerBasic({
                 ")"
               ] });
             },
-            disabled
+            disabled,
+            onClear
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { children: [
@@ -2360,7 +2365,8 @@ function SelectField({
   prefix,
   prefixSize = 20,
   handleSearch,
-  className
+  className,
+  onClear
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     import_antd10.ConfigProvider,
@@ -2393,7 +2399,8 @@ function SelectField({
             mode,
             onSearch: handleSearch,
             prefix: prefix ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { style: { width: prefixSize, height: prefixSize, display: "flex", alignItems: "center", justifyContent: "center" }, children: prefix }) : void 0,
-            allowClear: true
+            allowClear: true,
+            onClear
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { children: [
@@ -2544,7 +2551,8 @@ function SelectFieldStatus({
             placeholder,
             optionFilterProp: "label",
             filterOption: (input, option) => (option?.label ?? "").toString().toLowerCase().includes(input.toLowerCase()),
-            options
+            options,
+            showSearch: true
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { children: [
@@ -2579,7 +2587,8 @@ function SelectFieldStatusReport({
   disabled,
   showError,
   errorMessage,
-  className
+  className,
+  options
 }) {
   const selectedItem = status2.find((s) => s.value === value);
   return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
@@ -2614,12 +2623,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__ */ (0, import_jsx_runtime29.jsxs)("div", { children: [
@@ -2646,7 +2652,8 @@ function SelectFieldTag({
   errorMessage,
   value: controlledValue,
   className,
-  onChange
+  onChange,
+  onClear
 }) {
   const [internalValue, setInternalValue] = (0, import_react8.useState)([]);
   const isControlled = controlledValue !== void 0;
@@ -2698,7 +2705,8 @@ function SelectFieldTag({
             },
             searchValue: searchWord,
             options,
-            allowClear: true
+            allowClear: true,
+            onClear
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { children: [
@@ -3141,6 +3149,473 @@ function ProgressBar({
     }
   );
 }
+
+// src/KpiSection/KpiSection.tsx
+var import_antd20 = require("antd");
+var import_react13 = require("react");
+
+// src/KpiSection/hooks/useGetKpiSection.ts
+var import_react12 = require("react");
+var import_cuid = __toESM(require("cuid"));
+function useGetKpiSection() {
+  const [nameKpi, setNameKpi] = (0, import_react12.useState)("");
+  const [kpiValue, setKpiValue] = (0, import_react12.useState)("");
+  const [unitValue, setUnitValue] = (0, import_react12.useState)("");
+  const [kpiList, setKpiList] = (0, import_react12.useState)([]);
+  const [editingBackup, setEditingBackup] = (0, import_react12.useState)({});
+  const [selected, setSelected] = (0, import_react12.useState)("2");
+  const [errors, setErrors] = (0, import_react12.useState)({
+    nameKpi: "",
+    kpiValue: "",
+    unitValue: ""
+  });
+  const [itemErrors, setItemErrors] = (0, import_react12.useState)({});
+  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: (0, import_cuid.default)(),
+      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
+var import_icons_react10 = require("@tabler/icons-react");
+var import_jsx_runtime36 = require("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] = import_antd20.message.useMessage();
+  const [hasShownError, setHasShownError] = (0, import_react13.useState)(false);
+  (0, import_react13.useEffect)(() => {
+    setMessageApi(messageApi2);
+  }, [messageApi2]);
+  (0, import_react13.useEffect)(() => {
+    if (onChangeKpiList) {
+      onChangeKpiList(kpiList);
+    }
+  }, [kpiList]);
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    import_antd20.ConfigProvider,
+    {
+      theme: {
+        token: {
+          fontFamily: "Kanit",
+          fontSize: 16
+        }
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "container-input", children: [
+        messageContainer,
+        type === "number" && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "space-y-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "grid grid-cols-[1fr_200px_200px_50px] w-full gap-[24px] items-start", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+              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__ */ (0, import_jsx_runtime36.jsx)(
+              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__ */ (0, import_jsx_runtime36.jsx)(
+              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__ */ (0, import_jsx_runtime36.jsx)("div", { className: "absolute top-21 right-5", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+              import_icons_react10.IconCirclePlus,
+              {
+                className: "w-[40px] h-[40px] cursor-pointer hover:scale-110 transition",
+                stroke: 1,
+                onClick: () => handleAddKpi(type)
+              }
+            ) })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { children: kpiList.map((kpi, index) => /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+            "div",
+            {
+              className: "grid grid-cols-[30px_1fr_100px_120px_80px] items-start py-2 body-1 gap-[8px]",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("p", { className: `body-1 ${kpi.isEditing ? "mt-[12px]" : ""}`, children: [
+                  index + 1,
+                  "."
+                ] }),
+                kpi.isEditing ? /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                    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__ */ (0, import_jsx_runtime36.jsx)(
+                    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__ */ (0, import_jsx_runtime36.jsx)(
+                    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__ */ (0, import_jsx_runtime36.jsxs)(
+                    "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__ */ (0, import_jsx_runtime36.jsx)(
+                          import_icons_react10.IconCheck,
+                          {
+                            className: "w-[30px] h-[30px] cursor-pointer",
+                            onClick: () => handleSave(kpi.id, type)
+                          }
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                          import_icons_react10.IconX,
+                          {
+                            className: "w-[30px] h-[30px] cursor-pointer",
+                            onClick: () => handleCancel(kpi.id)
+                          }
+                        )
+                      ]
+                    }
+                  )
+                ] }) : /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { className: "body-1", children: kpi.name }),
+                  /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { className: "body-1", children: kpi.value }),
+                  /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { className: "body-1", children: kpi.unit }),
+                  /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex gap-3 justify-end", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                      import_icons_react10.IconPencil,
+                      {
+                        className: "w-[30px] h-[30px] cursor-pointer",
+                        onClick: () => handleEdit(kpi.id)
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                      import_icons_react10.IconTrash,
+                      {
+                        className: "w-[30px] h-[30px] cursor-pointer",
+                        onClick: () => handleDelete(kpi.id)
+                      }
+                    )
+                  ] })
+                ] })
+              ]
+            },
+            kpi.id
+          )) })
+        ] }),
+        type === "text" && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "space-y-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "grid grid-cols-[1fr_50px] w-full gap-[24px] items-start", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+              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__ */ (0, import_jsx_runtime36.jsx)("div", { className: "absolute top-21 right-5", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+              import_icons_react10.IconCirclePlus,
+              {
+                className: "w-[40px] h-[40px] cursor-pointer hover:scale-110 transition",
+                stroke: 1,
+                onClick: () => handleAddKpi(type)
+              }
+            ) })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { children: kpiList.map((kpi, index) => /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+            "div",
+            {
+              className: "grid grid-cols-[30px_1fr_80px] items-start py-2 body-1 gap-[8px]",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("p", { className: `body-1 ${kpi.isEditing ? "mt-[12px]" : ""}`, children: [
+                  index + 1,
+                  "."
+                ] }),
+                kpi.isEditing ? /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                    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__ */ (0, import_jsx_runtime36.jsxs)(
+                    "div",
+                    {
+                      className: `flex gap-2 justify-end self-center ${!!itemErrors[kpi.id]?.name ? "mt-[-12px]" : ""}`,
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                          import_icons_react10.IconCheck,
+                          {
+                            className: "w-[30px] h-[30px] cursor-pointer",
+                            onClick: () => handleSave(kpi.id, type)
+                          }
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                          import_icons_react10.IconX,
+                          {
+                            className: "w-[30px] h-[30px] cursor-pointer",
+                            onClick: () => handleCancel(kpi.id)
+                          }
+                        )
+                      ]
+                    }
+                  )
+                ] }) : /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { className: "body-1", children: kpi.name }),
+                  /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex gap-3 justify-end", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                      import_icons_react10.IconPencil,
+                      {
+                        className: "w-[30px] h-[30px] cursor-pointer",
+                        onClick: () => handleEdit(kpi.id)
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                      import_icons_react10.IconTrash,
+                      {
+                        className: "w-[30px] h-[30px] cursor-pointer",
+                        onClick: () => handleDelete(kpi.id)
+                      }
+                    )
+                  ] })
+                ] })
+              ]
+            },
+            kpi.id
+          )) })
+        ] })
+      ] })
+    }
+  );
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AntDataTable,
@@ -3157,6 +3632,7 @@ function ProgressBar({
   GhostButton,
   HeadingPage,
   InputField,
+  KpiSection,
   Loader,
   MenuNavBar,
   PrimaryButton,