@apexcura/ui-components 0.0.14-Beta188 → 0.0.14-Beta189

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,6 +460,9 @@ 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,6 +69,9 @@ type ElementType = {
     fillText2?: string;
     labels?: any[];
     data?: any[];
+    pagination?: boolean;
+    is_detail?: boolean;
+    dateTime?: string;
 };
 
 declare const TextElement: (props: ElementType) => React$1.JSX.Element;
@@ -132,10 +135,8 @@ declare const HorizontalBarChart: (props: ElementType) => React$1.JSX.Element;
 
 declare const LineChart: (props: ElementType) => React$1.JSX.Element;
 
-declare const HighchartsLineChart: (props: any) => React$1.JSX.Element;
-
 declare const DoubleBarChart: (props: ElementType) => React$1.JSX.Element;
 
 declare const BarChart: (props: ElementType) => React$1.JSX.Element;
 
-export { AddMoreTable, BarChart, ButtonElement, CheckboxElement, CircleDonut, CkEditor, DatePickerElement, DateRangePickerElement, DoubleBarChart, DropDownGroup, FileUpload, HighchartsLineChart, HorizontalBarChart, Image, LineChart, MultipleSelectElement, Navbar, NumberElement, OtpElement, PasswordElement, RadioElement, SelectElement, SemiCircleDonut, Sidebar, SingleCheckbox, SingleSelectElement, SwitchElement, TableElement, TabsElement, TextElement, TextareaElement, Upload };
+export { 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, SwitchElement, TableElement, TabsElement, TextElement, TextareaElement, Upload };

package/dist/index.d.ts

@@ -69,6 +69,9 @@ type ElementType = {
     fillText2?: string;
     labels?: any[];
     data?: any[];
+    pagination?: boolean;
+    is_detail?: boolean;
+    dateTime?: string;
 };
 
 declare const TextElement: (props: ElementType) => React$1.JSX.Element;
@@ -132,10 +135,8 @@ declare const HorizontalBarChart: (props: ElementType) => React$1.JSX.Element;
 
 declare const LineChart: (props: ElementType) => React$1.JSX.Element;
 
-declare const HighchartsLineChart: (props: any) => React$1.JSX.Element;
-
 declare const DoubleBarChart: (props: ElementType) => React$1.JSX.Element;
 
 declare const BarChart: (props: ElementType) => React$1.JSX.Element;
 
-export { AddMoreTable, BarChart, ButtonElement, CheckboxElement, CircleDonut, CkEditor, DatePickerElement, DateRangePickerElement, DoubleBarChart, DropDownGroup, FileUpload, HighchartsLineChart, HorizontalBarChart, Image, LineChart, MultipleSelectElement, Navbar, NumberElement, OtpElement, PasswordElement, RadioElement, SelectElement, SemiCircleDonut, Sidebar, SingleCheckbox, SingleSelectElement, SwitchElement, TableElement, TabsElement, TextElement, TextareaElement, Upload };
+export { 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, SwitchElement, TableElement, TabsElement, TextElement, TextareaElement, Upload };

package/dist/index.js

@@ -41,7 +41,6 @@ __export(src_exports, {
   DoubleBarChart: () => DoubleBarChart,
   DropDownGroup: () => DropDownGroup,
   FileUpload: () => FileUpload,
-  HighchartsLineChart: () => HighchartsLineChart,
   HorizontalBarChart: () => HorizontalBarChart,
   Image: () => Image,
   LineChart: () => LineChart,
@@ -386,10 +385,14 @@ 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;
@@ -423,7 +426,8 @@ var ButtonElement = (props) => {
         }
       }).catch((error) => console.error("Error fetching SVG:", error));
     }
-  }, [props.icon, props.className]);
+    setLoading(true);
+  }, []);
   const handleMouseEnter = () => {
     if (hoverColor && originalSvgContent) {
       const tempDiv = document.createElement("div");
@@ -451,12 +455,14 @@ 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 ? props.icon && /* @__PURE__ */ import_react11.default.createElement("img", { className: props.iconsClassName, src: props.icon, alt: props.label }) : svgContent && /* @__PURE__ */ import_react11.default.createElement(
-      "span",
+    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",
       {
-        dangerouslySetInnerHTML: { __html: svgContent }
+        className: props.iconsClassName,
+        src: props.icon,
+        alt: props.label
       }
-    ), props.label)
+    ) : svgContent && /* @__PURE__ */ import_react11.default.createElement("span", { dangerouslySetInnerHTML: { __html: svgContent } }), props.label)
   );
 };
 
@@ -684,18 +690,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
@@ -720,9 +756,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;
+          }
         })
       )
     },
@@ -731,12 +780,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 [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);
     }
@@ -746,8 +807,8 @@ var TableElement = (props) => {
     columns = [
       {
         title: "#",
-        dataIndex: "#",
-        key: "#",
+        dataIndex: "index",
+        key: "index",
         fixed: "left"
       },
       ...thead.map((col, ind) => ({
@@ -758,9 +819,9 @@ var TableElement = (props) => {
         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]);
             }
           }
@@ -772,26 +833,34 @@ var TableElement = (props) => {
         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,
-    key: index + 1,
-    [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 });
@@ -799,7 +868,11 @@ 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);
       }
@@ -809,19 +882,41 @@ var TableElement = (props) => {
     import_antd14.Table,
     {
       className: props.className,
-      pagination: {
+      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
+      bordered: true,
+      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
@@ -829,6 +924,7 @@ 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)("");
@@ -846,9 +942,13 @@ 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" },
@@ -861,13 +961,15 @@ 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 {
-      console.log("Clear");
+      props.onChange && props.onChange("clear");
     }
   };
   const rangePresets = [
@@ -876,7 +978,18 @@ 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)()] }
   ];
-  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])] : void 0
+    }
+  ));
 };
 
 // src/Components/Image.tsx
@@ -955,7 +1068,7 @@ var DropDownGroup = (props) => {
 // 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)([]);
@@ -986,7 +1099,7 @@ var FileUpload = (props) => {
       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")
   ));
 };
@@ -1383,19 +1496,13 @@ var LineChart = (props) => {
   return /* @__PURE__ */ import_react34.default.createElement("div", { className: props.className }, /* @__PURE__ */ import_react34.default.createElement("canvas", { ref: chartRef }));
 };
 
-// src/Components/highchart.tsx
-var import_react35 = __toESM(require("react"));
-var HighchartsLineChart = (props) => {
-  return /* @__PURE__ */ import_react35.default.createElement("div", null, /* @__PURE__ */ import_react35.default.createElement("h1", null, "123456789"));
-};
-
 // src/Components/DoubleBarChart.tsx
-var import_react36 = __toESM(require("react"));
+var import_react35 = __toESM(require("react"));
 var import_auto2 = __toESM(require("chart.js/auto"));
 var DoubleBarChart = (props) => {
-  const chartRef = (0, import_react36.useRef)(null);
-  const chartInstance = (0, import_react36.useRef)(null);
-  (0, import_react36.useEffect)(() => {
+  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();
@@ -1464,11 +1571,11 @@ var DoubleBarChart = (props) => {
       }
     };
   }, []);
-  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("canvas", { ref: chartRef }));
+  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_react37 = __toESM(require("react"));
+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);
@@ -1530,7 +1637,7 @@ var BarChart = (props) => {
       }
     }
   };
-  return /* @__PURE__ */ import_react37.default.createElement("div", { className: props.className }, /* @__PURE__ */ import_react37.default.createElement("h1", { className: props.labelClassName }, props.label), /* @__PURE__ */ import_react37.default.createElement(import_react_chartjs_24.Bar, { data, options }));
+  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 = {
@@ -1545,7 +1652,6 @@ var BarChart = (props) => {
   DoubleBarChart,
   DropDownGroup,
   FileUpload,
-  HighchartsLineChart,
   HorizontalBarChart,
   Image,
   LineChart,

package/dist/index.mjs

@@ -319,10 +319,14 @@ 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;
@@ -356,7 +360,8 @@ var ButtonElement = (props) => {
         }
       }).catch((error) => console.error("Error fetching SVG:", error));
     }
-  }, [props.icon, props.className]);
+    setLoading(true);
+  }, []);
   const handleMouseEnter = () => {
     if (hoverColor && originalSvgContent) {
       const tempDiv = document.createElement("div");
@@ -384,12 +389,14 @@ 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 ? props.icon && /* @__PURE__ */ React11.createElement("img", { className: props.iconsClassName, src: props.icon, alt: props.label }) : svgContent && /* @__PURE__ */ React11.createElement(
-      "span",
+    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",
       {
-        dangerouslySetInnerHTML: { __html: svgContent }
+        className: props.iconsClassName,
+        src: props.icon,
+        alt: props.label
       }
-    ), props.label)
+    ) : svgContent && /* @__PURE__ */ React11.createElement("span", { dangerouslySetInnerHTML: { __html: svgContent } }), props.label)
   );
 };
 
@@ -608,7 +615,7 @@ var Navbar = (props) => {
 };
 
 // src/Components/TableElement.tsx
-import React20, { useState as useState6 } from "react";
+import React20, { useState as useState6, useEffect as useEffect3 } from "react";
 import { Table as Table2 } from "antd";
 
 // src/Components/Model.tsx
@@ -617,18 +624,48 @@ 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("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;
+  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;
+      }
     }
-  }));
+  ));
 };
 
 // src/Components/Model.tsx
@@ -653,9 +690,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__ */ 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)) : "";
+        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;
+          }
         })
       )
     },
@@ -664,12 +714,24 @@ 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);
     }
@@ -679,8 +741,8 @@ var TableElement = (props) => {
     columns = [
       {
         title: "#",
-        dataIndex: "#",
-        key: "#",
+        dataIndex: "index",
+        key: "index",
         fixed: "left"
       },
       ...thead.map((col, ind) => ({
@@ -691,9 +753,9 @@ var TableElement = (props) => {
         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]);
             }
           }
@@ -705,26 +767,34 @@ var TableElement = (props) => {
         title: "View",
         dataIndex: "View",
         key: "View",
-        render: (_, record) => /* @__PURE__ */ React20.createElement(
-          "a",
-          {
-            onClick: () => {
-              setSelectedRecord(record);
-              handleChange(record);
-              setModel(true);
-            }
-          },
-          "View"
-        )
+        render: (_, record) => {
+          return /* @__PURE__ */ React20.createElement(
+            "a",
+            {
+              onClick: () => {
+                if (props.view) {
+                  setSelectedRecord(record);
+                  handleChange(record);
+                  setModel(true);
+                }
+              }
+            },
+            /* @__PURE__ */ React20.createElement(EyeOutlined, null)
+          );
+        }
       });
     }
   }
-  const dataSource = tbody && tbody.map((row, index) => ({
-    ...row,
-    key: index + 1,
-    [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 });
@@ -732,7 +802,11 @@ 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);
       }
@@ -742,19 +816,41 @@ var TableElement = (props) => {
     Table2,
     {
       className: props.className,
-      pagination: {
+      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
+      bordered: true,
+      onChange: onChangeTable
     }
-  ), model && /* @__PURE__ */ React20.createElement(ModelElement, { selectedRecord, ...props, columns, model, onCancel: () => setModel(false) }));
+  ), model && /* @__PURE__ */ React20.createElement(
+    ModelElement,
+    {
+      selectedRecord,
+      ...props,
+      columns,
+      model,
+      onCancel: () => setModel(false)
+    }
+  ));
 };
 
 // src/Components/DatePicker.tsx
@@ -762,6 +858,7 @@ 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("");
@@ -779,9 +876,13 @@ 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" },
@@ -794,13 +895,15 @@ 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 {
-      console.log("Clear");
+      props.onChange && props.onChange("clear");
     }
   };
   const rangePresets = [
@@ -809,7 +912,18 @@ var DateRangePickerElement = (props) => {
     { label: "Last 30 Days", value: [dayjs2().add(-30, "d"), dayjs2()] },
     { label: "Last 90 Days", value: [dayjs2().add(-90, "d"), dayjs2()] }
   ];
-  return /* @__PURE__ */ React22.createElement(Space, { direction: "vertical", size: 12 }, /* @__PURE__ */ React22.createElement(RangePicker, { presets: rangePresets, onChange: handleChange }));
+  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])] : void 0
+    }
+  ));
 };
 
 // src/Components/Image.tsx
@@ -973,7 +1087,7 @@ var Upload2 = (props) => {
 };
 
 // src/Components/OtpElement.tsx
-import React30, { useState as useState11, useRef, useEffect as useEffect3 } from "react";
+import React30, { useState as useState11, useRef, useEffect as useEffect4 } from "react";
 import { Input as Input3 } from "antd";
 var OtpElement = (props) => {
   const length = props.length;
@@ -1010,7 +1124,7 @@ var OtpElement = (props) => {
       });
     }
   };
-  useEffect3(() => {
+  useEffect4(() => {
     inputRefs.current[0]?.focus();
   }, []);
   return /* @__PURE__ */ React30.createElement("div", { className: props.containerClassName }, Array.from({ length }).map((_, index) => /* @__PURE__ */ React30.createElement(
@@ -1262,7 +1376,7 @@ var HorizontalBarChart = (props) => {
 };
 
 // src/Components/LineChart.tsx
-import React34, { useEffect as useEffect4, useRef as useRef2 } from "react";
+import React34, { useEffect as useEffect5, useRef as useRef2 } from "react";
 import Chart from "chart.js/auto";
 var LineChart = (props) => {
   const chartRef = useRef2(null);
@@ -1273,7 +1387,7 @@ var LineChart = (props) => {
     { label: "Conversion Rate", data: [50, 100, 150, 180, 50] }
   ];
   const labels = ["Instagram", "Whatsapp", "Messages", "Telegram", "Linkedin"];
-  useEffect4(() => {
+  useEffect5(() => {
     if (chartRef.current) {
       if (chartInstance.current) {
         chartInstance.current.destroy();
@@ -1334,19 +1448,13 @@ var LineChart = (props) => {
   return /* @__PURE__ */ React34.createElement("div", { className: props.className }, /* @__PURE__ */ React34.createElement("canvas", { ref: chartRef }));
 };
 
-// src/Components/highchart.tsx
-import React35 from "react";
-var HighchartsLineChart = (props) => {
-  return /* @__PURE__ */ React35.createElement("div", null, /* @__PURE__ */ React35.createElement("h1", null, "123456789"));
-};
-
 // src/Components/DoubleBarChart.tsx
-import React36, { useEffect as useEffect5, useRef as useRef3 } from "react";
+import React35, { useEffect as useEffect6, useRef as useRef3 } from "react";
 import Chart2 from "chart.js/auto";
 var DoubleBarChart = (props) => {
   const chartRef = useRef3(null);
   const chartInstance = useRef3(null);
-  useEffect5(() => {
+  useEffect6(() => {
     if (chartRef.current) {
       if (chartInstance.current) {
         chartInstance.current.destroy();
@@ -1415,11 +1523,11 @@ var DoubleBarChart = (props) => {
       }
     };
   }, []);
-  return /* @__PURE__ */ React36.createElement("div", { className: props.className }, /* @__PURE__ */ React36.createElement("h1", { className: props.labelClassName }, props.label), /* @__PURE__ */ React36.createElement("canvas", { ref: chartRef }));
+  return /* @__PURE__ */ React35.createElement("div", { className: props.className }, /* @__PURE__ */ React35.createElement("h1", { className: props.labelClassName }, props.label), /* @__PURE__ */ React35.createElement("canvas", { ref: chartRef }));
 };
 
 // src/Components/BarChart.tsx
-import React37 from "react";
+import React36 from "react";
 import { Bar as Bar2 } from "react-chartjs-2";
 import {
   Chart as ChartJS4,
@@ -1487,7 +1595,7 @@ var BarChart = (props) => {
       }
     }
   };
-  return /* @__PURE__ */ React37.createElement("div", { className: props.className }, /* @__PURE__ */ React37.createElement("h1", { className: props.labelClassName }, props.label), /* @__PURE__ */ React37.createElement(Bar2, { data, options }));
+  return /* @__PURE__ */ React36.createElement("div", { className: props.className }, /* @__PURE__ */ React36.createElement("h1", { className: props.labelClassName }, props.label), /* @__PURE__ */ React36.createElement(Bar2, { data, options }));
 };
 export {
   AddMoreTable,
@@ -1501,7 +1609,6 @@ export {
   DoubleBarChart,
   DropDownGroup,
   FileUpload,
-  HighchartsLineChart,
   HorizontalBarChart,
   Image,
   LineChart,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apexcura/ui-components",
-  "version": "0.0.14-Beta188",
+  "version": "0.0.14-Beta189",
   "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: [],
+}
+