@apexcura/ui-components 0.0.14-Beta20 → 0.0.14-Beta200

package/dist/index.js

@@ -31,20 +31,27 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var src_exports = {};
 __export(src_exports, {
   AddMoreTable: () => AddMoreTable,
+  BarChart: () => BarChart,
   ButtonElement: () => ButtonElement,
   CheckboxElement: () => CheckboxElement,
+  CircleDonut: () => CircleDonut,
   CkEditor: () => CkEditor,
   DatePickerElement: () => DatePickerElement,
   DateRangePickerElement: () => DateRangePickerElement,
+  DoubleBarChart: () => DoubleBarChart,
   DropDownGroup: () => DropDownGroup,
   FileUpload: () => FileUpload,
+  HorizontalBarChart: () => HorizontalBarChart,
   Image: () => Image,
+  LineChart: () => LineChart,
   MultipleSelectElement: () => MultipleSelectElement,
   Navbar: () => Navbar,
   NumberElement: () => NumberElement,
+  OtpElement: () => OtpElement,
   PasswordElement: () => PasswordElement,
   RadioElement: () => RadioElement,
   SelectElement: () => SelectElement,
+  SemiCircleDonut: () => SemiCircleDonut,
   Sidebar: () => Sidebar,
   SingleCheckbox: () => SingleCheckbox,
   SingleSelectElement: () => SingleSelectElement,
@@ -52,7 +59,8 @@ __export(src_exports, {
   TableElement: () => TableElement,
   TabsElement: () => TabsElement,
   TextElement: () => TextElement,
-  TextareaElement: () => TextareaElement
+  TextareaElement: () => TextareaElement,
+  Upload: () => Upload2
 });
 module.exports = __toCommonJS(src_exports);
 
@@ -71,6 +79,7 @@ var TextElement = (props) => {
       placeholder: props.placeholder,
       allowClear: true,
       id: props.name,
+      value: props.value,
       prefix: props.prefix,
       type: props.type,
       status: props.status,
@@ -130,8 +139,7 @@ var NumberElement = (props) => {
     {
       placeholder: props.placeholder,
       addonBefore: props.addonBefore,
-      allowClear: true,
-      defaultValue: props.defaultValue,
+      value: props.value,
       disabled: props.disabled,
       id: props.name,
       prefix: props.prefix,
@@ -379,11 +387,14 @@ var ButtonElement = (props) => {
   return /* @__PURE__ */ import_react11.default.createElement(
     "button",
     {
-      onClick: () => props.onClick && props.onClick(),
-      className: `${props.className ? props.className : ""}`
+      onClick: props.onClick,
+      className: `${props.className ? props.className : ""}`,
+      disabled: props.loading,
+      style: {
+        cursor: props.loading ? "no-drop" : "pointer"
+      }
     },
-    props.icon && /* @__PURE__ */ import_react11.default.createElement("img", { className: props.iconsClassName, src: props.icon }),
-    props.label
+    /* @__PURE__ */ import_react11.default.createElement(import_react11.default.Fragment, null, /* @__PURE__ */ import_react11.default.createElement("span", { className: props.iconsClassName }, /* @__PURE__ */ import_react11.default.createElement("img", { src: props.icon, className: "icon-active" })), props.label)
   );
 };
 
@@ -525,10 +536,19 @@ var Sidebar = (props) => {
       props.onChange(item);
     }
   };
-  return /* @__PURE__ */ import_react13.default.createElement("div", { className: props.className, key: props.name }, /* @__PURE__ */ import_react13.default.createElement("div", null, /* @__PURE__ */ import_react13.default.createElement("img", { src: props.img, alt: "logo" })), /* @__PURE__ */ import_react13.default.createElement("ul", { className: props.listClassName }, props.items?.map((item) => {
-    return /* @__PURE__ */ import_react13.default.createElement("li", { onClick: () => {
-      handleChange(item);
-    }, key: item.label, className: `${props.listItemClassName} ${item.active && props.activeClassName}` }, /* @__PURE__ */ import_react13.default.createElement("img", { src: item.icon, className: props.className }), /* @__PURE__ */ import_react13.default.createElement("p", null, item.label));
+  return /* @__PURE__ */ import_react13.default.createElement(import_react13.default.Fragment, { key: props.name }, /* @__PURE__ */ import_react13.default.createElement("div", { className: props.imgClassName }, /* @__PURE__ */ import_react13.default.createElement("img", { src: props.img, alt: "logo" })), /* @__PURE__ */ import_react13.default.createElement("div", { className: props.listClassName }, props.items?.map((item) => {
+    return /* @__PURE__ */ import_react13.default.createElement(import_react13.default.Fragment, { key: item.label }, /* @__PURE__ */ import_react13.default.createElement(
+      ButtonElement,
+      {
+        ...item,
+        className: item.active ? props.activeClassName : props.className,
+        iconsClassName: props.iconsClassName,
+        onClick: (e) => {
+          e.preventDefault();
+          handleChange(item);
+        }
+      }
+    ));
   })));
 };
 
@@ -602,18 +622,48 @@ var import_antd13 = require("antd");
 
 // src/Components/ModelBody.tsx
 var import_react18 = __toESM(require("react"));
+var import_moment = __toESM(require("moment"));
 var ModelBody = (props) => {
-  return /* @__PURE__ */ import_react18.default.createElement("div", { className: props.modalContent && props.modalContent.className }, props.modalContent && props.modalContent.fields.map((eachField) => {
-    if (eachField.element === "div") {
-      return /* @__PURE__ */ import_react18.default.createElement("div", { className: eachField.className }, eachField.label);
-    } else if (eachField.element === "input-radio") {
-      return /* @__PURE__ */ import_react18.default.createElement("div", { className: eachField.className }, /* @__PURE__ */ import_react18.default.createElement(RadioElement, { ...eachField }));
-    } else if (eachField.element === "button") {
-      return /* @__PURE__ */ import_react18.default.createElement("div", { className: eachField.className }, /* @__PURE__ */ import_react18.default.createElement(ButtonElement, { ...eachField }));
-    } else {
-      return null;
+  return /* @__PURE__ */ import_react18.default.createElement("div", { className: props.modalContent && props.modalContent.className }, props.modalContent && props.modalContent.fields.map(
+    (eachField) => {
+      if (eachField.element === "div") {
+        return /* @__PURE__ */ import_react18.default.createElement(import_react18.default.Fragment, null, /* @__PURE__ */ import_react18.default.createElement("div", { className: eachField.className }, eachField.label), eachField.dateTime ? /* @__PURE__ */ import_react18.default.createElement(
+          "p",
+          {
+            style: {
+              fontSize: "10px",
+              textAlign: eachField.source === "bot" ? "left" : "right"
+            }
+          },
+          (0, import_moment.default)(eachField.dateTime).format("LT")
+        ) : "");
+      } else if (eachField.element === "input-radio") {
+        return /* @__PURE__ */ import_react18.default.createElement(import_react18.default.Fragment, null, /* @__PURE__ */ import_react18.default.createElement("div", { className: eachField.className }, /* @__PURE__ */ import_react18.default.createElement(RadioElement, { ...eachField })), eachField.dateTime ? /* @__PURE__ */ import_react18.default.createElement(
+          "p",
+          {
+            style: {
+              fontSize: "10px",
+              textAlign: eachField.source === "bot" ? "left" : "right"
+            }
+          },
+          (0, import_moment.default)(eachField.dateTime).format("LT")
+        ) : "");
+      } else if (eachField.element === "button") {
+        return /* @__PURE__ */ import_react18.default.createElement(import_react18.default.Fragment, null, /* @__PURE__ */ import_react18.default.createElement("div", { className: eachField.className }, /* @__PURE__ */ import_react18.default.createElement(ButtonElement, { ...eachField })), eachField.dateTime ? /* @__PURE__ */ import_react18.default.createElement(
+          "p",
+          {
+            style: {
+              fontSize: "10px",
+              textAlign: eachField.source === "bot" ? "left" : "right"
+            }
+          },
+          (0, import_moment.default)(eachField.dateTime).format("LT")
+        ) : "");
+      } else {
+        return null;
+      }
     }
-  }));
+  ));
 };
 
 // src/Components/Model.tsx
@@ -638,9 +688,22 @@ var ModelElement = (props) => {
             margin: "-10px"
           }
         },
-        Object.entries(selectedRecord).map(([key, value]) => {
-          const record = columns.filter((eachColumn) => eachColumn.key === key);
-          return record.length > 0 ? /* @__PURE__ */ import_react19.default.createElement("p", { style: { fontWeight: "500", padding: "10px" }, key }, /* @__PURE__ */ import_react19.default.createElement("span", { style: { fontWeight: "200", color: "gray", paddingRight: "10px" } }, record[0].title), String(value)) : "";
+        columns.map((eachColumn) => {
+          if (!["index", "View"].includes(eachColumn.key) && eachColumn?.["is_detail"] !== false) {
+            return /* @__PURE__ */ import_react19.default.createElement("p", { style: { fontWeight: "500", padding: "10px" } }, /* @__PURE__ */ import_react19.default.createElement(
+              "span",
+              {
+                style: {
+                  fontWeight: "200",
+                  color: "gray",
+                  paddingRight: "10px"
+                }
+              },
+              eachColumn.title
+            ), selectedRecord[eachColumn.key] !== "" ? selectedRecord[eachColumn.key] : "--");
+          } else {
+            return null;
+          }
         })
       )
     },
@@ -649,13 +712,24 @@ var ModelElement = (props) => {
 };
 
 // src/Components/TableElement.tsx
+var import_icons4 = require("@ant-design/icons");
 var TableElement = (props) => {
   const { thead, tbody } = props;
   const [selectedRecord, setSelectedRecord] = (0, import_react20.useState)({});
   const [model, setModel] = (0, import_react20.useState)(false);
-  const [selectedRowKeys, setSelectedRowKeys] = (0, import_react20.useState)([]);
+  const [dataSource, setDataSource] = (0, import_react20.useState)([]);
+  (0, import_react20.useEffect)(() => {
+    if (tbody) {
+      setDataSource(
+        tbody.map((row, index) => ({
+          ...row,
+          key: index,
+          index: index + 1
+        }))
+      );
+    }
+  }, [tbody]);
   const handleChange = (record) => {
-    console.log("record", record);
     if (props.onChange) {
       props.onChange(record);
     }
@@ -665,105 +739,151 @@ var TableElement = (props) => {
     columns = [
       {
         title: "#",
-        dataIndex: "#",
-        key: "#"
+        dataIndex: "index",
+        key: "index",
+        fixed: "left"
       },
       ...thead.map((col, ind) => ({
         title: col.label,
         dataIndex: col.name,
         key: col.key,
+        ellipsis: col.ellipsis,
         render: col.render,
         sorter: {
           compare: (a, b) => {
-            if (typeof a[col.key] === "number" && typeof a[col.key] === "number") {
+            if (typeof a[col.key] === "number" && typeof b[col.key] === "number") {
               return a[col.key] - b[col.key];
-            } else if (typeof a[col.key] === "string" && typeof a[col.key] === "string") {
+            } else if (typeof a[col.key] === "string" && typeof b[col.key] === "string") {
               return a[col.key].localeCompare(b[col.key]);
             }
           }
         }
-      })),
-      {
+      }))
+    ];
+    if (props.view) {
+      columns.push({
         title: "View",
         dataIndex: "View",
         key: "View",
-        render: (_, record) => /* @__PURE__ */ import_react20.default.createElement(
-          "a",
-          {
-            onClick: () => {
-              setSelectedRecord(record);
-              handleChange(record);
-              setModel(true);
-            }
-          },
-          "View"
-        )
-      }
-    ];
+        render: (_, record) => {
+          return /* @__PURE__ */ import_react20.default.createElement(
+            "a",
+            {
+              onClick: () => {
+                if (props.view) {
+                  setSelectedRecord(record);
+                  handleChange(record);
+                  setModel(true);
+                }
+              }
+            },
+            /* @__PURE__ */ import_react20.default.createElement(import_icons4.EyeOutlined, null)
+          );
+        }
+      });
+    }
   }
-  const dataSource = tbody && tbody.map((row, index) => ({
-    ...row,
-    [columns[0].key]: index + 1
-  }));
-  const count = dataSource ? dataSource.length : 0;
+  const onChangeTable = (pagination, filters, sorter, extra) => {
+    if (extra && extra.currentDataSource) {
+      setDataSource(
+        extra.currentDataSource.map((row, index) => ({
+          ...row,
+          index: index + 1
+        }))
+      );
+    }
+  };
   const onChangePage = (page, pageSize) => {
     if (props.onChange) {
       props.onChange({ name: "pagination", page, pageSize });
     }
   };
-  const onSelectChange = (newSelectedRowKeys) => {
-    console.log("selectedRowKeys changed: ", newSelectedRowKeys);
-    setSelectedRowKeys(newSelectedRowKeys);
-  };
   const rowSelectionConfig = props.rowSelection ? {
-    selectedRowKeys,
-    onChange: onSelectChange
+    onChange: (selectedRowKeys, selectedRows) => {
+      console.log(
+        `selectedRowKeys: ${selectedRowKeys}`,
+        "selectedRows: ",
+        selectedRows
+      );
+      if (props.onChange) {
+        props.onChange(selectedRows);
+      }
+    }
   } : void 0;
   return /* @__PURE__ */ import_react20.default.createElement(import_react20.default.Fragment, null, /* @__PURE__ */ import_react20.default.createElement(
     import_antd14.Table,
     {
-      pagination: {
+      className: props.className,
+      pagination: props.pagination ? {
         showTotal: (total) => `Total: ${total} items`,
-        total: count,
-        showSizeChanger: count > 10,
+        total: props.count,
+        showSizeChanger: props.count ? props.count > 10 : 0 > 10,
         onChange: onChangePage
+      } : false,
+      onRow: (record) => {
+        return {
+          onClick: () => {
+            if (props.view) {
+              setSelectedRecord(record);
+              handleChange(record);
+              setModel(true);
+            }
+          },
+          style: { cursor: "pointer" }
+        };
       },
+      rowSelection: rowSelectionConfig,
       dataSource,
       columns,
+      size: props.size,
       bordered: true,
-      rowSelection: rowSelectionConfig,
-      size: props.size && props.size
+      onChange: onChangeTable
+    }
+  ), model && /* @__PURE__ */ import_react20.default.createElement(
+    ModelElement,
+    {
+      selectedRecord,
+      ...props,
+      columns,
+      model,
+      onCancel: () => setModel(false)
     }
-  ), model && /* @__PURE__ */ import_react20.default.createElement(ModelElement, { selectedRecord, ...props, columns, model, onCancel: () => setModel(false) }));
+  ));
 };
 
 // src/Components/DatePicker.tsx
 var import_react21 = __toESM(require("react"));
 var import_antd15 = require("antd");
+var import_dayjs = __toESM(require("dayjs"));
+var import_customParseFormat = __toESM(require("dayjs/plugin/customParseFormat.js"));
+var import_moment2 = __toESM(require("moment"));
+import_dayjs.default.extend(import_customParseFormat.default);
 var DatePickerElement = (props) => {
-  const [date, setDate] = (0, import_react21.useState)(null);
-  const dateFormat = "DD/MM/YYYY";
-  const handleChange = (date2, dateString) => {
-    console.log(dateString);
-    if (date2) {
-      const formattedDate = date2.format(dateFormat);
-      setDate(date2);
+  const [dateState, setDateState] = (0, import_react21.useState)("");
+  const handleChange = (date, dateString) => {
+    if (date) {
+      const formattedDate = dateString;
+      setDateState(date);
       if (props.onChange) {
         props.onChange(formattedDate);
       }
     } else {
-      setDate(null);
+      setDateState("");
       if (props.onChange) {
         props.onChange("");
       }
     }
   };
+  const disabledDate = (current) => {
+    return current && current > (0, import_moment2.default)();
+  };
   return /* @__PURE__ */ import_react21.default.createElement("div", null, /* @__PURE__ */ import_react21.default.createElement(
     import_antd15.DatePicker,
     {
+      disabledDate,
       placeholder: props.placeholder,
-      value: date?.format(dateFormat),
-      variant: "borderless",
+      value: dateState,
+      format: { format: "DD-MM-YYYY" },
       onChange: handleChange
     }
   ));
@@ -772,29 +892,42 @@ var DatePickerElement = (props) => {
 // src/Components/DateRangePickerElement.tsx
 var import_react22 = __toESM(require("react"));
 var import_antd16 = require("antd");
-var import_dayjs = __toESM(require("dayjs"));
+var import_dayjs2 = __toESM(require("dayjs"));
+var import_moment3 = __toESM(require("moment"));
 var DateRangePickerElement = (props) => {
+  const { value } = props;
   const { RangePicker } = import_antd16.DatePicker;
   const handleChange = (dates, dateStrings) => {
-    if (dates && props.onChange) {
-      props.onChange(dateStrings);
+    if (dates) {
+      props.onChange && props.onChange(dateStrings);
     } else {
-      console.log("Clear");
+      props.onChange && props.onChange("");
     }
   };
   const rangePresets = [
-    { label: "Last 7 Days", value: [(0, import_dayjs.default)().add(-7, "d"), (0, import_dayjs.default)()] },
-    { label: "Last 14 Days", value: [(0, import_dayjs.default)().add(-14, "d"), (0, import_dayjs.default)()] },
-    { label: "Last 30 Days", value: [(0, import_dayjs.default)().add(-30, "d"), (0, import_dayjs.default)()] },
-    { label: "Last 90 Days", value: [(0, import_dayjs.default)().add(-90, "d"), (0, import_dayjs.default)()] }
+    { label: "Last 7 Days", value: [(0, import_dayjs2.default)().add(-7, "d"), (0, import_dayjs2.default)()] },
+    { label: "Last 14 Days", value: [(0, import_dayjs2.default)().add(-14, "d"), (0, import_dayjs2.default)()] },
+    { label: "Last 30 Days", value: [(0, import_dayjs2.default)().add(-30, "d"), (0, import_dayjs2.default)()] },
+    { label: "Last 90 Days", value: [(0, import_dayjs2.default)().add(-90, "d"), (0, import_dayjs2.default)()] }
   ];
-  return /* @__PURE__ */ import_react22.default.createElement(import_antd16.Space, { direction: "vertical", size: 12 }, /* @__PURE__ */ import_react22.default.createElement(RangePicker, { presets: rangePresets, onChange: handleChange }));
+  const disabledDate = (current) => {
+    return current && current > (0, import_moment3.default)();
+  };
+  return /* @__PURE__ */ import_react22.default.createElement(import_antd16.Space, { direction: "vertical", size: 12 }, /* @__PURE__ */ import_react22.default.createElement(
+    RangePicker,
+    {
+      disabledDate,
+      presets: rangePresets,
+      onChange: handleChange,
+      value: value && [(0, import_dayjs2.default)(value[0]), (0, import_dayjs2.default)(value[1])]
+    }
+  ));
 };
 
 // src/Components/Image.tsx
 var import_react23 = __toESM(require("react"));
 var Image = (props) => {
-  return /* @__PURE__ */ import_react23.default.createElement("div", null, /* @__PURE__ */ import_react23.default.createElement("img", { className: props.className, src: props.img, alt: "image" }));
+  return /* @__PURE__ */ import_react23.default.createElement("img", { className: props.className, src: props.img, alt: "image" });
 };
 
 // src/Components/SingleCheckbox.tsx
@@ -813,60 +946,64 @@ var SingleCheckbox = (props) => {
 var import_react25 = __toESM(require("react"));
 var import_antd18 = require("antd");
 var DropDownGroup = (props) => {
-  const [selectedValue, setSelectedValue] = (0, import_react25.useState)({ firstValue: {}, secondValue: {} });
+  const [selectedValue, setSelectedValue] = (0, import_react25.useState)({
+    firstValue: {},
+    secondValue: {},
+    temp: ""
+  });
   const handleFirstChange = (value) => {
-    const filterOption2 = props.firstOptions?.find((eachOption) => eachOption.value === value);
+    console.log(selectedValue.temp);
+    const filterOption2 = props.firstOptions?.find(
+      (eachOption) => eachOption.value === value
+    );
     setSelectedValue((prev) => {
       const newValue = { ...prev, firstValue: filterOption2 };
+      const { temp, ...rest } = newValue;
       if (newValue.firstValue) {
-        props.onChange?.(newValue);
+        props.onChange?.(rest);
       }
-      return selectedValue;
+      return newValue;
     });
   };
   const handleSecondChange = (value) => {
-    const filterOption2 = props.secondOptions?.find((eachOption) => eachOption.value === value);
+    const filterOption2 = props.secondOptions?.find(
+      (eachOption) => eachOption.value === value
+    );
     setSelectedValue((prev) => {
       const newValue = { ...prev, secondValue: filterOption2 };
+      const { temp, ...rest } = newValue;
       if (newValue.secondValue) {
-        props.onChange?.(newValue);
+        props.onChange?.(rest);
       }
-      return selectedValue;
+      return newValue;
     });
   };
-  console.log("selectedValue", selectedValue);
-  return /* @__PURE__ */ import_react25.default.createElement("div", { className: props.className, style: { display: "flex", flexDirection: "row", backgroundColor: "white", borderRadius: 10, border: "1px solid gray" } }, /* @__PURE__ */ import_react25.default.createElement(
+  return /* @__PURE__ */ import_react25.default.createElement("div", { className: props.containerClassName }, props.label && /* @__PURE__ */ import_react25.default.createElement("label", { htmlFor: props.name, className: props.labelClassName }, props.label), /* @__PURE__ */ import_react25.default.createElement("div", { className: props.subContainerClassName }, /* @__PURE__ */ import_react25.default.createElement(
     import_antd18.Select,
     {
       onChange: handleFirstChange,
       variant: props.variant,
-      options: props.firstOptions
+      options: props.firstOptions,
+      className: props.className
     }
   ), /* @__PURE__ */ import_react25.default.createElement("div", { style: { borderLeft: "1px solid gray", height: "33px" } }), /* @__PURE__ */ import_react25.default.createElement(
     import_antd18.Select,
     {
       onChange: handleSecondChange,
       variant: props.variant,
-      options: props.secondOptions
+      options: props.secondOptions,
+      className: props.className
     }
-  ));
+  )));
 };
 
 // src/Components/FilesUpload.tsx
 var import_react26 = __toESM(require("react"));
 var import_antd19 = require("antd");
-var import_icons4 = require("@ant-design/icons");
+var import_icons5 = require("@ant-design/icons");
 var FileUpload = (props) => {
   const { Dragger } = import_antd19.Upload;
   const [files, setFiles] = (0, import_react26.useState)([]);
-  const beforeUpload = (file) => {
-    const isCorrectFile = ["image/*", "video/*", "application/*"].includes(file.type);
-    if (!isCorrectFile) {
-      import_antd19.message.error(`(${file.name}) is an invalid file. Please upload files with the following extensions only (.png/.jpg/.jpeg/.pdf)`);
-      return import_antd19.Upload.LIST_IGNORE;
-    }
-    return true;
-  };
   const handleChange = ({ fileList }) => {
     setFiles(fileList);
     if (props.onChange) {
@@ -890,12 +1027,11 @@ var FileUpload = (props) => {
       maxCount: props.max_count,
       multiple: props.multiple,
       fileList: files,
-      beforeUpload,
       onChange: handleChange,
       showUploadList: true,
       customRequest
     },
-    /* @__PURE__ */ import_react26.default.createElement("p", null, /* @__PURE__ */ import_react26.default.createElement(import_icons4.InboxOutlined, null)),
+    /* @__PURE__ */ import_react26.default.createElement("p", null, /* @__PURE__ */ import_react26.default.createElement(import_icons5.InboxOutlined, null)),
     /* @__PURE__ */ import_react26.default.createElement("p", null, "Click or drag file to upload")
   ));
 };
@@ -919,23 +1055,546 @@ var onChange = (checked) => {
   console.log(`switch to ${checked}`);
 };
 var SwitchElement = () => /* @__PURE__ */ import_react28.default.createElement(import_antd21.Switch, { defaultChecked: true, onChange });
+
+// src/Components/Upload.tsx
+var import_react29 = __toESM(require("react"));
+var Upload2 = (props) => {
+  const [file, setFile] = (0, import_react29.useState)();
+  const handleFileChange = (e) => {
+    setFile(e.target.files[0]);
+    if (props.onChange) {
+      props.onChange(e.target.files[0]);
+    }
+  };
+  const handleUpload = async () => {
+    if (!file) {
+      console.error("No file selected");
+      return;
+    }
+  };
+  return /* @__PURE__ */ import_react29.default.createElement("div", { style: { marginTop: 16 } }, /* @__PURE__ */ import_react29.default.createElement("input", { type: "file", onChange: handleFileChange }), /* @__PURE__ */ import_react29.default.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: handleUpload,
+      disabled: !file,
+      style: { marginTop: 16 }
+    },
+    "Upload"
+  ));
+};
+
+// src/Components/OtpElement.tsx
+var import_react30 = __toESM(require("react"));
+var import_antd22 = require("antd");
+var OtpElement = (props) => {
+  const length = props.length;
+  const [otp, setOtp] = (0, import_react30.useState)(Array(length).fill(""));
+  const inputRefs = (0, import_react30.useRef)([]);
+  const handleChange = (e, index) => {
+    const value = e.target.value;
+    if (/^[0-9]$/.test(value) || value === "") {
+      const newOtp = [...otp];
+      newOtp[index] = value;
+      setOtp(newOtp);
+      props.onChange && props.onChange(newOtp.join(""));
+      if (value && index < length - 1) {
+        inputRefs.current[index + 1]?.focus();
+      }
+    }
+  };
+  const handleKeyDown = (e, index) => {
+    if (e.key === "Backspace" && !otp[index] && index > 0) {
+      inputRefs.current[index - 1]?.focus();
+    }
+  };
+  const handlePaste = (e) => {
+    e.preventDefault();
+    const pasteData = e.clipboardData.getData("text");
+    if (/^\d+$/.test(pasteData)) {
+      const newOtp = pasteData.split("").slice(0, length);
+      setOtp(newOtp.concat(Array(length - newOtp.length).fill("")));
+      props.onChange && props.onChange(newOtp.join(""));
+      newOtp.forEach((_, idx) => {
+        if (inputRefs.current[idx]) {
+          inputRefs.current[idx]?.focus();
+        }
+      });
+    }
+  };
+  (0, import_react30.useEffect)(() => {
+    inputRefs.current[0]?.focus();
+  }, []);
+  return /* @__PURE__ */ import_react30.default.createElement("div", { className: props.containerClassName }, Array.from({ length }).map((_, index) => /* @__PURE__ */ import_react30.default.createElement(
+    import_antd22.Input,
+    {
+      key: index,
+      className: props.className,
+      maxLength: 1,
+      value: otp[index],
+      onChange: (e) => handleChange(e, index),
+      onKeyDown: (e) => handleKeyDown(e, index),
+      onPaste: handlePaste,
+      ref: (el) => inputRefs.current[index] = el
+    }
+  )));
+};
+
+// src/Components/CircleDonut.tsx
+var import_react31 = __toESM(require("react"));
+var import_react_chartjs_2 = require("react-chartjs-2");
+var import_chart = require("chart.js");
+import_chart.Chart.register(import_chart.DoughnutController, import_chart.ArcElement, import_chart.Tooltip, import_chart.Legend);
+var CircleDonut = (props) => {
+  const data = {
+    labels: props.labels,
+    datasets: [
+      {
+        label: "Bot Conversation",
+        data: props.data,
+        backgroundColor: [
+          "#FFCB8A",
+          "#CADBBF",
+          "#8AC1BB",
+          "#FCB0CB",
+          "#CEB0FA"
+        ],
+        borderWidth: 0
+      }
+    ]
+  };
+  const options = {
+    responsive: true,
+    cutout: "80%",
+    plugins: {
+      legend: {
+        position: "left",
+        labels: {
+          font: {
+            size: 10
+          },
+          boxWidth: 15,
+          generateLabels: (chart) => {
+            const dataset = chart.data.datasets[0];
+            return chart.data.labels.map((label, index) => {
+              const value = dataset.data[index];
+              return {
+                text: `${label}: ${value}`,
+                fillStyle: dataset.backgroundColor[index]
+              };
+            });
+          }
+        }
+      },
+      tooltip: {
+        enabled: true,
+        callbacks: {
+          label: function(context) {
+            const label = context.label || "";
+            const value = context.raw || 0;
+            return `${label}: ${value}`;
+          }
+        }
+      }
+    }
+  };
+  const centerTextPlugin = {
+    id: "centerText",
+    beforeDraw: (chart) => {
+      const { ctx, chartArea: { left, right, top, bottom } } = chart;
+      const width = right - left;
+      const height = bottom - top;
+      const centerX = left + width / 2;
+      const centerY = top + height / 2;
+      ctx.save();
+      ctx.font = "7px Arial";
+      ctx.fillStyle = "blue";
+      ctx.textAlign = "center";
+      ctx.textBaseline = "middle";
+      ctx.fillText("Total Sessions", centerX, centerY - 10);
+      ctx.font = "25px Arial";
+      ctx.fillStyle = "black";
+      ctx.fillText("85", centerX, centerY + 20);
+      ctx.restore();
+    }
+  };
+  return /* @__PURE__ */ import_react31.default.createElement("div", { className: props.className }, /* @__PURE__ */ import_react31.default.createElement("h1", { className: props.labelClassName }, props.label), /* @__PURE__ */ import_react31.default.createElement(import_react_chartjs_2.Doughnut, { data, options, plugins: [centerTextPlugin] }));
+};
+
+// src/Components/SemiCircleDonut.tsx
+var import_react32 = __toESM(require("react"));
+var import_react_chartjs_22 = require("react-chartjs-2");
+var import_chart2 = require("chart.js");
+import_chart2.Chart.register(import_chart2.DoughnutController, import_chart2.ArcElement, import_chart2.Tooltip, import_chart2.Legend);
+var SemiCircleDonut = (props) => {
+  const data = {
+    labels: [
+      "Registration",
+      "Book Appointment",
+      "Diagnostic Tests",
+      "Hospital Facility",
+      "Others, Prescriptions"
+    ],
+    datasets: [
+      {
+        label: "Bot Conversation",
+        data: [30, 10, 27, 40, 12],
+        backgroundColor: [
+          "#FFCB8A",
+          "#CADBBF",
+          "#8AC1BB",
+          "#FCB0CB",
+          "#CEB0FA"
+        ],
+        borderWidth: 0
+      }
+    ]
+  };
+  const options = {
+    responsive: true,
+    circumference: 180,
+    rotation: -90,
+    cutout: "80%",
+    plugins: {
+      legend: {
+        display: false
+        // Disable the legend
+      },
+      tooltip: {
+        enabled: true,
+        callbacks: {
+          label: function(context) {
+            const label = context.label || "";
+            const value = context.raw || 0;
+            return `${label}: ${value}`;
+          }
+        }
+      }
+    }
+  };
+  const centerTextPlugin = {
+    id: "centerText",
+    beforeDraw: (chart) => {
+      const { ctx, chartArea: { left, right, top, bottom } } = chart;
+      const width = right - left;
+      const height = bottom - top;
+      const centerX = left + width / 2;
+      const centerY = top + height / 1.5;
+      const maxWidth = width * 0.8;
+      ctx.save();
+      ctx.fillStyle = "black";
+      ctx.textAlign = "center";
+      ctx.textBaseline = "middle";
+      const drawText = (text, y, fontSize) => {
+        ctx.font = `${fontSize}px Arial`;
+        const textWidth = ctx.measureText(text).width;
+        if (textWidth > maxWidth) {
+          const newFontSize = fontSize * maxWidth / textWidth;
+          ctx.font = `${newFontSize}px Arial`;
+        }
+        ctx.fillText(text, centerX, y);
+      };
+      drawText(props.fillText1, centerY - 10, 16);
+      drawText(props.fillText2, centerY + 20, 8);
+      ctx.restore();
+    }
+  };
+  return /* @__PURE__ */ import_react32.default.createElement("div", { className: props.className }, /* @__PURE__ */ import_react32.default.createElement("h1", { className: props.labelClassName }, props.label), /* @__PURE__ */ import_react32.default.createElement(import_react_chartjs_22.Doughnut, { data, options, plugins: [centerTextPlugin] }));
+};
+
+// src/Components/HorizontalBarChart.tsx
+var import_react33 = __toESM(require("react"));
+var import_react_chartjs_23 = require("react-chartjs-2");
+var import_chart3 = require("chart.js");
+import_chart3.Chart.register(import_chart3.BarElement, import_chart3.CategoryScale, import_chart3.LinearScale, import_chart3.Tooltip);
+var HorizontalBarChart = (props) => {
+  const data = {
+    labels: ["18-24", "25-34", "35-44", "45-54", "55-64", "65+"],
+    datasets: [
+      {
+        data: [30, 10, 27, 40, 12, 24],
+        backgroundColor: "#6298D5",
+        barThickness: 15
+      }
+    ]
+  };
+  const options = {
+    responsive: true,
+    indexAxis: "y",
+    scales: {
+      x: {
+        beginAtZero: true,
+        ticks: {
+          callback: function(value) {
+            return `${value}%`;
+          }
+        }
+      },
+      y: {
+        grid: {
+          display: false
+        }
+      }
+    },
+    plugins: {
+      tooltip: {
+        enabled: true,
+        callbacks: {
+          label: function(context) {
+            const label = context.label || "";
+            const value = context.raw || 0;
+            return `${label}: ${value}`;
+          }
+        }
+      },
+      legend: {
+        display: false
+      }
+    }
+  };
+  return /* @__PURE__ */ import_react33.default.createElement("div", { className: props.className }, /* @__PURE__ */ import_react33.default.createElement("h1", { className: props.labelClassName }, props.label), /* @__PURE__ */ import_react33.default.createElement(import_react_chartjs_23.Bar, { data, options }));
+};
+
+// src/Components/LineChart.tsx
+var import_react34 = __toESM(require("react"));
+var import_auto = __toESM(require("chart.js/auto"));
+var LineChart = (props) => {
+  const chartRef = (0, import_react34.useRef)(null);
+  const chartInstance = (0, import_react34.useRef)(null);
+  const data = [
+    { label: "ROI", data: [10, 13, 20, 15, 10] },
+    { label: "Engagement Rate", data: [20, 23, 30, 28, 20] },
+    { label: "Conversion Rate", data: [50, 100, 150, 180, 50] }
+  ];
+  const labels = ["Instagram", "Whatsapp", "Messages", "Telegram", "Linkedin"];
+  (0, import_react34.useEffect)(() => {
+    if (chartRef.current) {
+      if (chartInstance.current) {
+        chartInstance.current.destroy();
+      }
+      chartInstance.current = new import_auto.default(chartRef.current, {
+        type: "line",
+        data: {
+          labels,
+          datasets: data.map((dataset, index) => ({
+            label: dataset.label,
+            data: dataset.data,
+            borderColor: index === 0 ? "#FF8F00" : index === 1 ? "#F50057" : "#254AAA",
+            backgroundColor: "rgba(0, 0, 0, 0)",
+            pointBackgroundColor: index === 0 ? "#FF8F00" : index === 1 ? "#F50057" : "#254AAA",
+            pointBorderColor: "white",
+            pointStyle: "circle",
+            pointRadius: 3,
+            tension: 0.1,
+            fill: true
+          }))
+        },
+        options: {
+          plugins: {
+            legend: {
+              labels: {
+                usePointStyle: true
+              }
+            }
+          },
+          scales: {
+            x: {
+              grid: {
+                display: false
+              }
+            },
+            y: {
+              beginAtZero: true,
+              suggestedMax: 200,
+              ticks: {
+                callback: function(value) {
+                  return value + "%";
+                }
+              },
+              grid: {
+                display: true
+              }
+            }
+          }
+        }
+      });
+    }
+    return () => {
+      if (chartInstance.current) {
+        chartInstance.current.destroy();
+      }
+    };
+  }, [labels, data]);
+  return /* @__PURE__ */ import_react34.default.createElement("div", { className: props.className }, /* @__PURE__ */ import_react34.default.createElement("canvas", { ref: chartRef }));
+};
+
+// src/Components/DoubleBarChart.tsx
+var import_react35 = __toESM(require("react"));
+var import_auto2 = __toESM(require("chart.js/auto"));
+var DoubleBarChart = (props) => {
+  const chartRef = (0, import_react35.useRef)(null);
+  const chartInstance = (0, import_react35.useRef)(null);
+  (0, import_react35.useEffect)(() => {
+    if (chartRef.current) {
+      if (chartInstance.current) {
+        chartInstance.current.destroy();
+      }
+      chartInstance.current = new import_auto2.default(chartRef.current, {
+        type: "bar",
+        data: {
+          labels: [
+            "Summer Health Tips",
+            "New Services Launch",
+            "Discounts on Checkups",
+            "Wellness Webinar",
+            "LinkedIn Insights"
+          ],
+          datasets: [
+            {
+              label: "Engagement Rate",
+              data: [60, 70, 50, 80, 65],
+              // Example data for male
+              backgroundColor: "#93B8E2",
+              barThickness: 10
+            },
+            {
+              label: "Conversion Rate",
+              data: [70, 65, 75, 55, 85],
+              // Example data for female
+              backgroundColor: "#4484CD",
+              barThickness: 10
+            }
+          ]
+        },
+        options: {
+          scales: {
+            x: {
+              grid: {
+                display: false
+                // Display x-axis grid lines
+              }
+            },
+            y: {
+              beginAtZero: true,
+              suggestedMax: 100,
+              ticks: {
+                callback: function(value) {
+                  return value + "%";
+                }
+              },
+              grid: {
+                display: true
+              }
+            }
+          },
+          plugins: {
+            legend: {
+              labels: {
+                usePointStyle: true
+              }
+            }
+          }
+        }
+      });
+    }
+    return () => {
+      if (chartInstance.current) {
+        chartInstance.current.destroy();
+      }
+    };
+  }, []);
+  return /* @__PURE__ */ import_react35.default.createElement("div", { className: props.className }, /* @__PURE__ */ import_react35.default.createElement("h1", { className: props.labelClassName }, props.label), /* @__PURE__ */ import_react35.default.createElement("canvas", { ref: chartRef }));
+};
+
+// src/Components/BarChart.tsx
+var import_react36 = __toESM(require("react"));
+var import_react_chartjs_24 = require("react-chartjs-2");
+var import_chart4 = require("chart.js");
+import_chart4.Chart.register(import_chart4.BarElement, import_chart4.CategoryScale, import_chart4.LinearScale, import_chart4.Tooltip);
+var BarChart = (props) => {
+  const data = {
+    labels: [
+      "17 June",
+      "18 June",
+      "19 June",
+      "20 June",
+      "21 June",
+      "22 June",
+      "23 June"
+    ],
+    datasets: [
+      {
+        data: [30, 100, 270, 140, 120, 240],
+        backgroundColor: "#1565C0",
+        barThickness: 15
+      }
+    ]
+  };
+  const options = {
+    responsive: true,
+    scales: {
+      x: {
+        beginAtZero: true,
+        grid: {
+          display: false
+        }
+      },
+      y: {
+        grid: {
+          display: true
+        },
+        ticks: {
+          min: 0,
+          max: 400,
+          stepSize: 200,
+          callback: function(value) {
+            return `${value}`;
+          }
+        }
+      }
+    },
+    plugins: {
+      tooltip: {
+        enabled: true,
+        callbacks: {
+          label: function(context) {
+            const label = context.label || "";
+            const value = context.raw || 0;
+            return ` ${label}: ${value}`;
+          }
+        }
+      },
+      legend: {
+        display: false
+      }
+    }
+  };
+  return /* @__PURE__ */ import_react36.default.createElement("div", { className: props.className }, /* @__PURE__ */ import_react36.default.createElement("h1", { className: props.labelClassName }, props.label), /* @__PURE__ */ import_react36.default.createElement(import_react_chartjs_24.Bar, { data, options }));
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AddMoreTable,
+  BarChart,
   ButtonElement,
   CheckboxElement,
+  CircleDonut,
   CkEditor,
   DatePickerElement,
   DateRangePickerElement,
+  DoubleBarChart,
   DropDownGroup,
   FileUpload,
+  HorizontalBarChart,
   Image,
+  LineChart,
   MultipleSelectElement,
   Navbar,
   NumberElement,
+  OtpElement,
   PasswordElement,
   RadioElement,
   SelectElement,
+  SemiCircleDonut,
   Sidebar,
   SingleCheckbox,
   SingleSelectElement,
@@ -943,5 +1602,6 @@ var SwitchElement = () => /* @__PURE__ */ import_react28.default.createElement(i
   TableElement,
   TabsElement,
   TextElement,
-  TextareaElement
+  TextareaElement,
+  Upload
 });