@apexcura/ui-components 0.0.14-Beta178 → 0.0.14-Beta179

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,8 @@ type ElementType = {
     fillText2?: string;
     labels?: any[];
     data?: any[];
+    pagination?: boolean;
+    is_detail?: boolean;
 };
 
 declare const TextElement: (props: ElementType) => React$1.JSX.Element;
@@ -132,10 +134,8 @@ declare const HorizontalBarChart: (props: ElementType) => React$1.JSX.Element;
 
 declare const LineChart: (props: ElementType) => React$1.JSX.Element;
 
-declare const HighchartsLineChart: (props: ElementType) => 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,8 @@ type ElementType = {
     fillText2?: string;
     labels?: any[];
     data?: any[];
+    pagination?: boolean;
+    is_detail?: boolean;
 };
 
 declare const TextElement: (props: ElementType) => React$1.JSX.Element;
@@ -132,10 +134,8 @@ declare const HorizontalBarChart: (props: ElementType) => React$1.JSX.Element;
 
 declare const LineChart: (props: ElementType) => React$1.JSX.Element;
 
-declare const HighchartsLineChart: (props: ElementType) => 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,7 +385,9 @@ 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) {
@@ -451,12 +452,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 ? props.icon ? /* @__PURE__ */ import_react11.default.createElement(
+      "img",
       {
-        dangerouslySetInnerHTML: { __html: svgContent }
+        className: props.iconsClassName,
+        src: props.icon,
+        alt: props.label
       }
-    ), props.label)
+    ) : /* @__PURE__ */ import_react11.default.createElement("img", { src: "", alt: "", className: props.iconsClassName }) : svgContent && /* @__PURE__ */ import_react11.default.createElement("span", { dangerouslySetInnerHTML: { __html: svgContent } }), props.label)
   );
 };
 
@@ -720,9 +723,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 +747,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 +774,8 @@ var TableElement = (props) => {
     columns = [
       {
         title: "#",
-        dataIndex: "#",
-        key: "#",
+        dataIndex: "index",
+        key: "index",
         fixed: "left"
       },
       ...thead.map((col, ind) => ({
@@ -758,9 +786,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 +800,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 +835,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 +849,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
@@ -955,7 +1017,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 +1048,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,21 +1445,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 import_highcharts = __toESM(require("highcharts"));
-var import_highcharts_react_official = __toESM(require("highcharts-react-official"));
-var HighchartsLineChart = (props) => {
-  return /* @__PURE__ */ import_react35.default.createElement("div", { className: props.className }, /* @__PURE__ */ import_react35.default.createElement(import_highcharts_react_official.default, { highcharts: import_highcharts.default, options: props.graph_data }));
-};
-
 // 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();
@@ -1466,11 +1520,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);
@@ -1532,7 +1586,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 = {
@@ -1547,7 +1601,6 @@ var BarChart = (props) => {
   DoubleBarChart,
   DropDownGroup,
   FileUpload,
-  HighchartsLineChart,
   HorizontalBarChart,
   Image,
   LineChart,

package/dist/index.mjs

@@ -319,7 +319,9 @@ 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) {
@@ -384,12 +386,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 ? props.icon ? /* @__PURE__ */ React11.createElement(
+      "img",
       {
-        dangerouslySetInnerHTML: { __html: svgContent }
+        className: props.iconsClassName,
+        src: props.icon,
+        alt: props.label
       }
-    ), props.label)
+    ) : /* @__PURE__ */ React11.createElement("img", { src: "", alt: "", className: props.iconsClassName }) : svgContent && /* @__PURE__ */ React11.createElement("span", { dangerouslySetInnerHTML: { __html: svgContent } }), props.label)
   );
 };
 
@@ -608,7 +612,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
@@ -653,9 +657,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 +681,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 +708,8 @@ var TableElement = (props) => {
     columns = [
       {
         title: "#",
-        dataIndex: "#",
-        key: "#",
+        dataIndex: "index",
+        key: "index",
         fixed: "left"
       },
       ...thead.map((col, ind) => ({
@@ -691,9 +720,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 +734,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 +769,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 +783,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
@@ -973,7 +1036,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 +1073,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 +1325,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 +1336,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,21 +1397,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";
-import Highcharts from "highcharts";
-import HighchartsReact from "highcharts-react-official";
-var HighchartsLineChart = (props) => {
-  return /* @__PURE__ */ React35.createElement("div", { className: props.className }, /* @__PURE__ */ React35.createElement(HighchartsReact, { highcharts: Highcharts, options: props.graph_data }));
-};
-
 // 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();
@@ -1417,11 +1472,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,
@@ -1489,7 +1544,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,
@@ -1503,7 +1558,6 @@ export {
   DoubleBarChart,
   DropDownGroup,
   FileUpload,
-  HighchartsLineChart,
   HorizontalBarChart,
   Image,
   LineChart,

package/package.json

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