@apexcura/ui-components 0.0.14-Beta180 → 0.0.14-Beta182

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,8 +69,6 @@ type ElementType = {
     fillText2?: string;
     labels?: any[];
     data?: any[];
-    pagination?: boolean;
-    is_detail?: boolean;
 };
 
 declare const TextElement: (props: ElementType) => React$1.JSX.Element;
@@ -134,8 +132,12 @@ declare const HorizontalBarChart: (props: ElementType) => React$1.JSX.Element;
 
 declare const LineChart: (props: ElementType) => React$1.JSX.Element;
 
+declare class HighchartsLineChart extends React$1.Component<any, any> {
+    render(): 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, 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, HighchartsLineChart, 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,8 +69,6 @@ type ElementType = {
     fillText2?: string;
     labels?: any[];
     data?: any[];
-    pagination?: boolean;
-    is_detail?: boolean;
 };
 
 declare const TextElement: (props: ElementType) => React$1.JSX.Element;
@@ -134,8 +132,12 @@ declare const HorizontalBarChart: (props: ElementType) => React$1.JSX.Element;
 
 declare const LineChart: (props: ElementType) => React$1.JSX.Element;
 
+declare class HighchartsLineChart extends React$1.Component<any, any> {
+    render(): 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, 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, HighchartsLineChart, 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,6 +41,7 @@ __export(src_exports, {
   DoubleBarChart: () => DoubleBarChart,
   DropDownGroup: () => DropDownGroup,
   FileUpload: () => FileUpload,
+  HighchartsLineChart: () => highchart_default,
   HorizontalBarChart: () => HorizontalBarChart,
   Image: () => Image,
   LineChart: () => LineChart,
@@ -385,9 +386,7 @@ 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);
   (0, import_react11.useEffect)(() => {
     if (props.icon) {
@@ -424,7 +423,7 @@ var ButtonElement = (props) => {
         }
       }).catch((error) => console.error("Error fetching SVG:", error));
     }
-  }, []);
+  }, [props.icon, props.className]);
   const handleMouseEnter = () => {
     if (hoverColor && originalSvgContent) {
       const tempDiv = document.createElement("div");
@@ -452,14 +451,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 ? 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)
   );
 };
 
@@ -723,22 +720,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)) : "";
         })
       )
     },
@@ -747,24 +731,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);
     }
@@ -774,8 +746,8 @@ var TableElement = (props) => {
     columns = [
       {
         title: "#",
-        dataIndex: "index",
-        key: "index",
+        dataIndex: "#",
+        key: "#",
         fixed: "left"
       },
       ...thead.map((col, ind) => ({
@@ -786,9 +758,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]);
             }
           }
@@ -800,34 +772,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 });
@@ -835,11 +799,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);
       }
@@ -849,41 +809,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
@@ -1017,7 +955,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)([]);
@@ -1048,7 +986,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")
   ));
 };
@@ -1445,13 +1383,25 @@ var LineChart = (props) => {
   return /* @__PURE__ */ import_react34.default.createElement("div", { className: props.className }, /* @__PURE__ */ import_react34.default.createElement("canvas", { ref: chartRef }));
 };
 
-// src/Components/DoubleBarChart.tsx
+// src/Components/highchart.tsx
 var import_react35 = __toESM(require("react"));
+var import_highcharts = __toESM(require("highcharts"));
+var import_highcharts_react_official = __toESM(require("highcharts-react-official"));
+var HighchartsLineChart = class extends import_react35.default.Component {
+  render() {
+    let { className, graph_data } = this.props;
+    return /* @__PURE__ */ import_react35.default.createElement("div", { className }, /* @__PURE__ */ import_react35.default.createElement(import_highcharts_react_official.default, { highcharts: import_highcharts.default, options: graph_data }));
+  }
+};
+var highchart_default = HighchartsLineChart;
+
+// src/Components/DoubleBarChart.tsx
+var import_react36 = __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)(() => {
+  const chartRef = (0, import_react36.useRef)(null);
+  const chartInstance = (0, import_react36.useRef)(null);
+  (0, import_react36.useEffect)(() => {
     if (chartRef.current) {
       if (chartInstance.current) {
         chartInstance.current.destroy();
@@ -1520,11 +1470,11 @@ var DoubleBarChart = (props) => {
       }
     };
   }, []);
-  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 }));
+  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 }));
 };
 
 // src/Components/BarChart.tsx
-var import_react36 = __toESM(require("react"));
+var import_react37 = __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);
@@ -1586,7 +1536,7 @@ var BarChart = (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(import_react_chartjs_24.Bar, { data, options }));
+  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 }));
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
@@ -1601,6 +1551,7 @@ var BarChart = (props) => {
   DoubleBarChart,
   DropDownGroup,
   FileUpload,
+  HighchartsLineChart,
   HorizontalBarChart,
   Image,
   LineChart,

package/dist/index.mjs

@@ -319,9 +319,7 @@ 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);
   useEffect(() => {
     if (props.icon) {
@@ -358,7 +356,7 @@ var ButtonElement = (props) => {
         }
       }).catch((error) => console.error("Error fetching SVG:", error));
     }
-  }, []);
+  }, [props.icon, props.className]);
   const handleMouseEnter = () => {
     if (hoverColor && originalSvgContent) {
       const tempDiv = document.createElement("div");
@@ -386,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 ? 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)
   );
 };
 
@@ -612,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
@@ -657,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)) : "";
         })
       )
     },
@@ -681,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);
     }
@@ -708,8 +679,8 @@ var TableElement = (props) => {
     columns = [
       {
         title: "#",
-        dataIndex: "index",
-        key: "index",
+        dataIndex: "#",
+        key: "#",
         fixed: "left"
       },
       ...thead.map((col, ind) => ({
@@ -720,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]);
             }
           }
@@ -734,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 });
@@ -769,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);
       }
@@ -783,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
@@ -1036,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;
@@ -1073,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(
@@ -1325,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);
@@ -1336,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();
@@ -1397,13 +1334,25 @@ 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";
+import Highcharts from "highcharts";
+import HighchartsReact from "highcharts-react-official";
+var HighchartsLineChart = class extends React35.Component {
+  render() {
+    let { className, graph_data } = this.props;
+    return /* @__PURE__ */ React35.createElement("div", { className }, /* @__PURE__ */ React35.createElement(HighchartsReact, { highcharts: Highcharts, options: graph_data }));
+  }
+};
+var highchart_default = HighchartsLineChart;
+
 // src/Components/DoubleBarChart.tsx
-import React35, { useEffect as useEffect6, useRef as useRef3 } from "react";
+import React36, { 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();
@@ -1472,11 +1421,11 @@ var DoubleBarChart = (props) => {
       }
     };
   }, []);
-  return /* @__PURE__ */ React35.createElement("div", { className: props.className }, /* @__PURE__ */ React35.createElement("h1", { className: props.labelClassName }, props.label), /* @__PURE__ */ React35.createElement("canvas", { ref: chartRef }));
+  return /* @__PURE__ */ React36.createElement("div", { className: props.className }, /* @__PURE__ */ React36.createElement("h1", { className: props.labelClassName }, props.label), /* @__PURE__ */ React36.createElement("canvas", { ref: chartRef }));
 };
 
 // src/Components/BarChart.tsx
-import React36 from "react";
+import React37 from "react";
 import { Bar as Bar2 } from "react-chartjs-2";
 import {
   Chart as ChartJS4,
@@ -1544,7 +1493,7 @@ var BarChart = (props) => {
       }
     }
   };
-  return /* @__PURE__ */ React36.createElement("div", { className: props.className }, /* @__PURE__ */ React36.createElement("h1", { className: props.labelClassName }, props.label), /* @__PURE__ */ React36.createElement(Bar2, { data, options }));
+  return /* @__PURE__ */ React37.createElement("div", { className: props.className }, /* @__PURE__ */ React37.createElement("h1", { className: props.labelClassName }, props.label), /* @__PURE__ */ React37.createElement(Bar2, { data, options }));
 };
 export {
   AddMoreTable,
@@ -1558,6 +1507,7 @@ export {
   DoubleBarChart,
   DropDownGroup,
   FileUpload,
+  highchart_default as HighchartsLineChart,
   HorizontalBarChart,
   Image,
   LineChart,

package/package.json

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