@apexcura/ui-components 0.0.14-Beta192 → 0.0.14-Beta194

package/.env.defaults

@@ -1,2 +1,2 @@
-GOOGLE_CLIENT_ID=1234
-GOOGLE_AUTH_ORIGINS=1234
+GOOGLE_CLIENT_ID=1234
+GOOGLE_AUTH_ORIGINS=1234

package/dist/index.css

@@ -460,9 +460,6 @@ video {
 :where(.css-dev-only-do-not-override-1r287do).ant-radio-button-wrapper:first-child {
   border-inline-start: 1px solid rgb(145 145 145);
 }
-:where(.css-dev-only-do-not-override-m4timi).ant-tabs-top > .ant-tabs-nav {
-  margin: 0px;
-}
 .hover\:bg-\[\#F2F2F2\]:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(242 242 242 / var(--tw-bg-opacity));

package/dist/index.d.mts

@@ -69,9 +69,6 @@ type ElementType = {
     fillText2?: string;
     labels?: any[];
     data?: any[];
-    pagination?: boolean;
-    is_detail?: boolean;
-    dateTime?: string;
 };
 
 declare const TextElement: (props: ElementType) => React$1.JSX.Element;

package/dist/index.d.ts

@@ -69,9 +69,6 @@ type ElementType = {
     fillText2?: string;
     labels?: any[];
     data?: any[];
-    pagination?: boolean;
-    is_detail?: boolean;
-    dateTime?: string;
 };
 
 declare const TextElement: (props: ElementType) => React$1.JSX.Element;

package/dist/index.js

@@ -385,14 +385,10 @@ var MultipleSelectElement = (props) => {
 var import_react11 = __toESM(require("react"));
 var ButtonElement = (props) => {
   const [svgContent, setSvgContent] = (0, import_react11.useState)(null);
-  const [originalSvgContent, setOriginalSvgContent] = (0, import_react11.useState)(
-    null
-  );
+  const [originalSvgContent, setOriginalSvgContent] = (0, import_react11.useState)(null);
   const [hoverColor, setHoverColor] = (0, import_react11.useState)(null);
-  const [loading, setLoading] = (0, import_react11.useState)(true);
   (0, import_react11.useEffect)(() => {
     if (props.icon) {
-      setLoading(false);
       fetch(props.icon).then((response) => response.text()).then((data) => {
         const tempDiv = document.createElement("div");
         tempDiv.innerHTML = data;
@@ -426,8 +422,7 @@ var ButtonElement = (props) => {
         }
       }).catch((error) => console.error("Error fetching SVG:", error));
     }
-    setLoading(true);
-  }, []);
+  }, [props.icon, props.className]);
   const handleMouseEnter = () => {
     if (hoverColor && originalSvgContent) {
       const tempDiv = document.createElement("div");
@@ -455,14 +450,12 @@ var ButtonElement = (props) => {
         cursor: props.loading ? "no-drop" : "pointer"
       }
     },
-    props.isLoading ? /* @__PURE__ */ import_react11.default.createElement(import_react11.default.Fragment, null, /* @__PURE__ */ import_react11.default.createElement("svg", { className: "animate-spin h-5 w-5 mr-3", viewBox: "0 0 24 24" }), props.label) : /* @__PURE__ */ import_react11.default.createElement(import_react11.default.Fragment, null, props.isSVGStylesOverride === false && loading ? props.icon && /* @__PURE__ */ import_react11.default.createElement(
-      "img",
+    props.isLoading ? /* @__PURE__ */ import_react11.default.createElement(import_react11.default.Fragment, null, /* @__PURE__ */ import_react11.default.createElement("svg", { className: "animate-spin h-5 w-5 mr-3", viewBox: "0 0 24 24" }), props.label) : /* @__PURE__ */ import_react11.default.createElement(import_react11.default.Fragment, null, props.isSVGStylesOverride === false ? props.icon && /* @__PURE__ */ import_react11.default.createElement("img", { className: props.iconsClassName, src: props.icon, alt: props.label }) : svgContent && /* @__PURE__ */ import_react11.default.createElement(
+      "span",
       {
-        className: props.iconsClassName,
-        src: props.icon,
-        alt: props.label
+        dangerouslySetInnerHTML: { __html: svgContent }
       }
-    ) : svgContent && /* @__PURE__ */ import_react11.default.createElement("span", { dangerouslySetInnerHTML: { __html: svgContent } }), props.label)
+    ), props.label)
   );
 };
 
@@ -690,48 +683,18 @@ 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(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;
-      }
+  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;
     }
-  ));
+  }));
 };
 
 // src/Components/Model.tsx
@@ -756,22 +719,9 @@ var ModelElement = (props) => {
             margin: "-10px"
           }
         },
-        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;
-          }
+        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)) : "";
         })
       )
     },
@@ -780,24 +730,12 @@ 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 [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);
     }
@@ -807,8 +745,8 @@ var TableElement = (props) => {
     columns = [
       {
         title: "#",
-        dataIndex: "index",
-        key: "index",
+        dataIndex: "#",
+        key: "#",
         fixed: "left"
       },
       ...thead.map((col, ind) => ({
@@ -819,9 +757,9 @@ var TableElement = (props) => {
         render: col.render,
         sorter: {
           compare: (a, b) => {
-            if (typeof a[col.key] === "number" && typeof b[col.key] === "number") {
+            if (typeof a[col.key] === "number" && typeof a[col.key] === "number") {
               return a[col.key] - b[col.key];
-            } else if (typeof a[col.key] === "string" && typeof b[col.key] === "string") {
+            } else if (typeof a[col.key] === "string" && typeof a[col.key] === "string") {
               return a[col.key].localeCompare(b[col.key]);
             }
           }
@@ -833,34 +771,26 @@ var TableElement = (props) => {
         title: "View",
         dataIndex: "View",
         key: "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)
-          );
-        }
+        render: (_, record) => /* @__PURE__ */ import_react20.default.createElement(
+          "a",
+          {
+            onClick: () => {
+              setSelectedRecord(record);
+              handleChange(record);
+              setModel(true);
+            }
+          },
+          "View"
+        )
       });
     }
   }
-  const onChangeTable = (pagination, filters, sorter, extra) => {
-    if (extra && extra.currentDataSource) {
-      setDataSource(
-        extra.currentDataSource.map((row, index) => ({
-          ...row,
-          index: index + 1
-        }))
-      );
-    }
-  };
+  const dataSource = tbody && tbody.map((row, index) => ({
+    ...row,
+    key: index + 1,
+    [columns[0].key]: index + 1
+  }));
+  const count = dataSource ? dataSource.length : 0;
   const onChangePage = (page, pageSize) => {
     if (props.onChange) {
       props.onChange({ name: "pagination", page, pageSize });
@@ -868,11 +798,7 @@ var TableElement = (props) => {
   };
   const rowSelectionConfig = props.rowSelection ? {
     onChange: (selectedRowKeys, selectedRows) => {
-      console.log(
-        `selectedRowKeys: ${selectedRowKeys}`,
-        "selectedRows: ",
-        selectedRows
-      );
+      console.log(`selectedRowKeys: ${selectedRowKeys}`, "selectedRows: ", selectedRows);
       if (props.onChange) {
         props.onChange(selectedRows);
       }
@@ -882,41 +808,19 @@ var TableElement = (props) => {
     import_antd14.Table,
     {
       className: props.className,
-      pagination: props.pagination ? {
+      pagination: {
         showTotal: (total) => `Total: ${total} items`,
-        total: props.count,
-        showSizeChanger: props.count ? props.count > 10 : 0 > 10,
+        total: count,
+        showSizeChanger: count > 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,
-      onChange: onChangeTable
-    }
-  ), model && /* @__PURE__ */ import_react20.default.createElement(
-    ModelElement,
-    {
-      selectedRecord,
-      ...props,
-      columns,
-      model,
-      onCancel: () => setModel(false)
+      bordered: true
     }
-  ));
+  ), model && /* @__PURE__ */ import_react20.default.createElement(ModelElement, { selectedRecord, ...props, columns, model, onCancel: () => setModel(false) }));
 };
 
 // src/Components/DatePicker.tsx
@@ -924,7 +828,6 @@ 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 [dateState, setDateState] = (0, import_react21.useState)("");
@@ -942,13 +845,9 @@ var DatePickerElement = (props) => {
       }
     }
   };
-  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: dateState,
       format: { format: "DD-MM-YYYY" },
@@ -961,15 +860,13 @@ var DatePickerElement = (props) => {
 var import_react22 = __toESM(require("react"));
 var import_antd16 = require("antd");
 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 {
-      props.onChange && props.onChange("");
+      console.log("Clear");
     }
   };
   const rangePresets = [
@@ -978,18 +875,7 @@ var DateRangePickerElement = (props) => {
     { 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)()] }
   ];
-  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])]
-    }
-  ));
+  return /* @__PURE__ */ import_react22.default.createElement(import_antd16.Space, { direction: "vertical", size: 12 }, /* @__PURE__ */ import_react22.default.createElement(RangePicker, { presets: rangePresets, onChange: handleChange }));
 };
 
 // src/Components/Image.tsx
@@ -1068,7 +954,7 @@ var DropDownGroup = (props) => {
 // src/Components/FilesUpload.tsx
 var import_react26 = __toESM(require("react"));
 var import_antd19 = require("antd");
-var import_icons5 = require("@ant-design/icons");
+var import_icons4 = require("@ant-design/icons");
 var FileUpload = (props) => {
   const { Dragger } = import_antd19.Upload;
   const [files, setFiles] = (0, import_react26.useState)([]);
@@ -1099,7 +985,7 @@ var FileUpload = (props) => {
       showUploadList: true,
       customRequest
     },
-    /* @__PURE__ */ import_react26.default.createElement("p", null, /* @__PURE__ */ import_react26.default.createElement(import_icons5.InboxOutlined, null)),
+    /* @__PURE__ */ import_react26.default.createElement("p", null, /* @__PURE__ */ import_react26.default.createElement(import_icons4.InboxOutlined, null)),
     /* @__PURE__ */ import_react26.default.createElement("p", null, "Click or drag file to upload")
   ));
 };

package/dist/index.mjs

@@ -319,14 +319,10 @@ var MultipleSelectElement = (props) => {
 import React11, { useEffect, useState as useState4 } from "react";
 var ButtonElement = (props) => {
   const [svgContent, setSvgContent] = useState4(null);
-  const [originalSvgContent, setOriginalSvgContent] = useState4(
-    null
-  );
+  const [originalSvgContent, setOriginalSvgContent] = useState4(null);
   const [hoverColor, setHoverColor] = useState4(null);
-  const [loading, setLoading] = useState4(true);
   useEffect(() => {
     if (props.icon) {
-      setLoading(false);
       fetch(props.icon).then((response) => response.text()).then((data) => {
         const tempDiv = document.createElement("div");
         tempDiv.innerHTML = data;
@@ -360,8 +356,7 @@ var ButtonElement = (props) => {
         }
       }).catch((error) => console.error("Error fetching SVG:", error));
     }
-    setLoading(true);
-  }, []);
+  }, [props.icon, props.className]);
   const handleMouseEnter = () => {
     if (hoverColor && originalSvgContent) {
       const tempDiv = document.createElement("div");
@@ -389,14 +384,12 @@ var ButtonElement = (props) => {
         cursor: props.loading ? "no-drop" : "pointer"
       }
     },
-    props.isLoading ? /* @__PURE__ */ React11.createElement(React11.Fragment, null, /* @__PURE__ */ React11.createElement("svg", { className: "animate-spin h-5 w-5 mr-3", viewBox: "0 0 24 24" }), props.label) : /* @__PURE__ */ React11.createElement(React11.Fragment, null, props.isSVGStylesOverride === false && loading ? props.icon && /* @__PURE__ */ React11.createElement(
-      "img",
+    props.isLoading ? /* @__PURE__ */ React11.createElement(React11.Fragment, null, /* @__PURE__ */ React11.createElement("svg", { className: "animate-spin h-5 w-5 mr-3", viewBox: "0 0 24 24" }), props.label) : /* @__PURE__ */ React11.createElement(React11.Fragment, null, props.isSVGStylesOverride === false ? props.icon && /* @__PURE__ */ React11.createElement("img", { className: props.iconsClassName, src: props.icon, alt: props.label }) : svgContent && /* @__PURE__ */ React11.createElement(
+      "span",
       {
-        className: props.iconsClassName,
-        src: props.icon,
-        alt: props.label
+        dangerouslySetInnerHTML: { __html: svgContent }
       }
-    ) : svgContent && /* @__PURE__ */ React11.createElement("span", { dangerouslySetInnerHTML: { __html: svgContent } }), props.label)
+    ), props.label)
   );
 };
 
@@ -615,7 +608,7 @@ var Navbar = (props) => {
 };
 
 // src/Components/TableElement.tsx
-import React20, { useState as useState6, useEffect as useEffect3 } from "react";
+import React20, { useState as useState6 } from "react";
 import { Table as Table2 } from "antd";
 
 // src/Components/Model.tsx
@@ -624,48 +617,18 @@ import { Modal } from "antd";
 
 // src/Components/ModelBody.tsx
 import React18 from "react";
-import moment from "moment";
 var ModelBody = (props) => {
-  return /* @__PURE__ */ React18.createElement("div", { className: props.modalContent && props.modalContent.className }, props.modalContent && props.modalContent.fields.map(
-    (eachField) => {
-      if (eachField.element === "div") {
-        return /* @__PURE__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement("div", { className: eachField.className }, eachField.label), eachField.dateTime ? /* @__PURE__ */ React18.createElement(
-          "p",
-          {
-            style: {
-              fontSize: "10px",
-              textAlign: eachField.source === "bot" ? "left" : "right"
-            }
-          },
-          moment(eachField.dateTime).format("LT")
-        ) : "");
-      } else if (eachField.element === "input-radio") {
-        return /* @__PURE__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement("div", { className: eachField.className }, /* @__PURE__ */ React18.createElement(RadioElement, { ...eachField })), eachField.dateTime ? /* @__PURE__ */ React18.createElement(
-          "p",
-          {
-            style: {
-              fontSize: "10px",
-              textAlign: eachField.source === "bot" ? "left" : "right"
-            }
-          },
-          moment(eachField.dateTime).format("LT")
-        ) : "");
-      } else if (eachField.element === "button") {
-        return /* @__PURE__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement("div", { className: eachField.className }, /* @__PURE__ */ React18.createElement(ButtonElement, { ...eachField })), eachField.dateTime ? /* @__PURE__ */ React18.createElement(
-          "p",
-          {
-            style: {
-              fontSize: "10px",
-              textAlign: eachField.source === "bot" ? "left" : "right"
-            }
-          },
-          moment(eachField.dateTime).format("LT")
-        ) : "");
-      } else {
-        return null;
-      }
+  return /* @__PURE__ */ React18.createElement("div", { className: props.modalContent && props.modalContent.className }, props.modalContent && props.modalContent.fields.map((eachField) => {
+    if (eachField.element === "div") {
+      return /* @__PURE__ */ React18.createElement("div", { className: eachField.className }, eachField.label);
+    } else if (eachField.element === "input-radio") {
+      return /* @__PURE__ */ React18.createElement("div", { className: eachField.className }, /* @__PURE__ */ React18.createElement(RadioElement, { ...eachField }));
+    } else if (eachField.element === "button") {
+      return /* @__PURE__ */ React18.createElement("div", { className: eachField.className }, /* @__PURE__ */ React18.createElement(ButtonElement, { ...eachField }));
+    } else {
+      return null;
     }
-  ));
+  }));
 };
 
 // src/Components/Model.tsx
@@ -690,22 +653,9 @@ var ModelElement = (props) => {
             margin: "-10px"
           }
         },
-        columns.map((eachColumn) => {
-          if (!["index", "View"].includes(eachColumn.key) && eachColumn?.["is_detail"] !== false) {
-            return /* @__PURE__ */ React19.createElement("p", { style: { fontWeight: "500", padding: "10px" } }, /* @__PURE__ */ React19.createElement(
-              "span",
-              {
-                style: {
-                  fontWeight: "200",
-                  color: "gray",
-                  paddingRight: "10px"
-                }
-              },
-              eachColumn.title
-            ), selectedRecord[eachColumn.key] !== "" ? selectedRecord[eachColumn.key] : "--");
-          } else {
-            return null;
-          }
+        Object.entries(selectedRecord).map(([key, value]) => {
+          const record = columns.filter((eachColumn) => eachColumn.key === key);
+          return record.length > 0 ? /* @__PURE__ */ React19.createElement("p", { style: { fontWeight: "500", padding: "10px" }, key }, /* @__PURE__ */ React19.createElement("span", { style: { fontWeight: "200", color: "gray", paddingRight: "10px" } }, record[0].title), String(value)) : "";
         })
       )
     },
@@ -714,24 +664,12 @@ var ModelElement = (props) => {
 };
 
 // src/Components/TableElement.tsx
-import { EyeOutlined } from "@ant-design/icons";
 var TableElement = (props) => {
   const { thead, tbody } = props;
   const [selectedRecord, setSelectedRecord] = useState6({});
   const [model, setModel] = useState6(false);
-  const [dataSource, setDataSource] = useState6([]);
-  useEffect3(() => {
-    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);
     }
@@ -741,8 +679,8 @@ var TableElement = (props) => {
     columns = [
       {
         title: "#",
-        dataIndex: "index",
-        key: "index",
+        dataIndex: "#",
+        key: "#",
         fixed: "left"
       },
       ...thead.map((col, ind) => ({
@@ -753,9 +691,9 @@ var TableElement = (props) => {
         render: col.render,
         sorter: {
           compare: (a, b) => {
-            if (typeof a[col.key] === "number" && typeof b[col.key] === "number") {
+            if (typeof a[col.key] === "number" && typeof a[col.key] === "number") {
               return a[col.key] - b[col.key];
-            } else if (typeof a[col.key] === "string" && typeof b[col.key] === "string") {
+            } else if (typeof a[col.key] === "string" && typeof a[col.key] === "string") {
               return a[col.key].localeCompare(b[col.key]);
             }
           }
@@ -767,34 +705,26 @@ var TableElement = (props) => {
         title: "View",
         dataIndex: "View",
         key: "View",
-        render: (_, record) => {
-          return /* @__PURE__ */ React20.createElement(
-            "a",
-            {
-              onClick: () => {
-                if (props.view) {
-                  setSelectedRecord(record);
-                  handleChange(record);
-                  setModel(true);
-                }
-              }
-            },
-            /* @__PURE__ */ React20.createElement(EyeOutlined, null)
-          );
-        }
+        render: (_, record) => /* @__PURE__ */ React20.createElement(
+          "a",
+          {
+            onClick: () => {
+              setSelectedRecord(record);
+              handleChange(record);
+              setModel(true);
+            }
+          },
+          "View"
+        )
       });
     }
   }
-  const onChangeTable = (pagination, filters, sorter, extra) => {
-    if (extra && extra.currentDataSource) {
-      setDataSource(
-        extra.currentDataSource.map((row, index) => ({
-          ...row,
-          index: index + 1
-        }))
-      );
-    }
-  };
+  const dataSource = tbody && tbody.map((row, index) => ({
+    ...row,
+    key: index + 1,
+    [columns[0].key]: index + 1
+  }));
+  const count = dataSource ? dataSource.length : 0;
   const onChangePage = (page, pageSize) => {
     if (props.onChange) {
       props.onChange({ name: "pagination", page, pageSize });
@@ -802,11 +732,7 @@ var TableElement = (props) => {
   };
   const rowSelectionConfig = props.rowSelection ? {
     onChange: (selectedRowKeys, selectedRows) => {
-      console.log(
-        `selectedRowKeys: ${selectedRowKeys}`,
-        "selectedRows: ",
-        selectedRows
-      );
+      console.log(`selectedRowKeys: ${selectedRowKeys}`, "selectedRows: ", selectedRows);
       if (props.onChange) {
         props.onChange(selectedRows);
       }
@@ -816,41 +742,19 @@ var TableElement = (props) => {
     Table2,
     {
       className: props.className,
-      pagination: props.pagination ? {
+      pagination: {
         showTotal: (total) => `Total: ${total} items`,
-        total: props.count,
-        showSizeChanger: props.count ? props.count > 10 : 0 > 10,
+        total: count,
+        showSizeChanger: count > 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,
-      onChange: onChangeTable
-    }
-  ), model && /* @__PURE__ */ React20.createElement(
-    ModelElement,
-    {
-      selectedRecord,
-      ...props,
-      columns,
-      model,
-      onCancel: () => setModel(false)
+      bordered: true
     }
-  ));
+  ), model && /* @__PURE__ */ React20.createElement(ModelElement, { selectedRecord, ...props, columns, model, onCancel: () => setModel(false) }));
 };
 
 // src/Components/DatePicker.tsx
@@ -858,7 +762,6 @@ import React21, { useState as useState7 } from "react";
 import { DatePicker } from "antd";
 import dayjs from "dayjs";
 import customParseFormat from "dayjs/plugin/customParseFormat.js";
-import moment2 from "moment";
 dayjs.extend(customParseFormat);
 var DatePickerElement = (props) => {
   const [dateState, setDateState] = useState7("");
@@ -876,13 +779,9 @@ var DatePickerElement = (props) => {
       }
     }
   };
-  const disabledDate = (current) => {
-    return current && current > moment2();
-  };
   return /* @__PURE__ */ React21.createElement("div", null, /* @__PURE__ */ React21.createElement(
     DatePicker,
     {
-      disabledDate,
       placeholder: props.placeholder,
       value: dateState,
       format: { format: "DD-MM-YYYY" },
@@ -895,15 +794,13 @@ var DatePickerElement = (props) => {
 import React22 from "react";
 import { DatePicker as DatePicker2, Space } from "antd";
 import dayjs2 from "dayjs";
-import moment3 from "moment";
 var DateRangePickerElement = (props) => {
-  const { value } = props;
   const { RangePicker } = DatePicker2;
   const handleChange = (dates, dateStrings) => {
-    if (dates) {
-      props.onChange && props.onChange(dateStrings);
+    if (dates && props.onChange) {
+      props.onChange(dateStrings);
     } else {
-      props.onChange && props.onChange("");
+      console.log("Clear");
     }
   };
   const rangePresets = [
@@ -912,18 +809,7 @@ var DateRangePickerElement = (props) => {
     { label: "Last 30 Days", value: [dayjs2().add(-30, "d"), dayjs2()] },
     { label: "Last 90 Days", value: [dayjs2().add(-90, "d"), dayjs2()] }
   ];
-  const disabledDate = (current) => {
-    return current && current > moment3();
-  };
-  return /* @__PURE__ */ React22.createElement(Space, { direction: "vertical", size: 12 }, /* @__PURE__ */ React22.createElement(
-    RangePicker,
-    {
-      disabledDate,
-      presets: rangePresets,
-      onChange: handleChange,
-      value: value && [dayjs2(value[0]), dayjs2(value[1])]
-    }
-  ));
+  return /* @__PURE__ */ React22.createElement(Space, { direction: "vertical", size: 12 }, /* @__PURE__ */ React22.createElement(RangePicker, { presets: rangePresets, onChange: handleChange }));
 };
 
 // src/Components/Image.tsx
@@ -1087,7 +973,7 @@ var Upload2 = (props) => {
 };
 
 // src/Components/OtpElement.tsx
-import React30, { useState as useState11, useRef, useEffect as useEffect4 } from "react";
+import React30, { useState as useState11, useRef, useEffect as useEffect3 } from "react";
 import { Input as Input3 } from "antd";
 var OtpElement = (props) => {
   const length = props.length;
@@ -1124,7 +1010,7 @@ var OtpElement = (props) => {
       });
     }
   };
-  useEffect4(() => {
+  useEffect3(() => {
     inputRefs.current[0]?.focus();
   }, []);
   return /* @__PURE__ */ React30.createElement("div", { className: props.containerClassName }, Array.from({ length }).map((_, index) => /* @__PURE__ */ React30.createElement(
@@ -1376,7 +1262,7 @@ var HorizontalBarChart = (props) => {
 };
 
 // src/Components/LineChart.tsx
-import React34, { useEffect as useEffect5, useRef as useRef2 } from "react";
+import React34, { useEffect as useEffect4, useRef as useRef2 } from "react";
 import Chart from "chart.js/auto";
 var LineChart = (props) => {
   const chartRef = useRef2(null);
@@ -1387,7 +1273,7 @@ var LineChart = (props) => {
     { label: "Conversion Rate", data: [50, 100, 150, 180, 50] }
   ];
   const labels = ["Instagram", "Whatsapp", "Messages", "Telegram", "Linkedin"];
-  useEffect5(() => {
+  useEffect4(() => {
     if (chartRef.current) {
       if (chartInstance.current) {
         chartInstance.current.destroy();
@@ -1449,12 +1335,12 @@ var LineChart = (props) => {
 };
 
 // src/Components/DoubleBarChart.tsx
-import React35, { useEffect as useEffect6, useRef as useRef3 } from "react";
+import React35, { useEffect as useEffect5, useRef as useRef3 } from "react";
 import Chart2 from "chart.js/auto";
 var DoubleBarChart = (props) => {
   const chartRef = useRef3(null);
   const chartInstance = useRef3(null);
-  useEffect6(() => {
+  useEffect5(() => {
     if (chartRef.current) {
       if (chartInstance.current) {
         chartInstance.current.destroy();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apexcura/ui-components",
-  "version": "0.0.14-Beta192",
+  "version": "0.0.14-Beta194",
   "description": "Apex cura React components library",
   "keywords": [
     "apex cura",

package/postcss.config.js

@@ -1,6 +1,6 @@
-module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

package/tailwind.config.js

@@ -1,10 +1,10 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  
-  content: ['./src/**/*.{js,jsx,ts,tsx}'],
-  theme: {
-    extend: {},
-  },
-  plugins: [],
-}
-
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  
+  content: ['./src/**/*.{js,jsx,ts,tsx}'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+