@apexcura/ui-components 0.0.14-Beta185 → 0.0.14-Beta186

package/.env.defaults

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

package/dist/index.css

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

package/dist/index.d.mts

@@ -69,9 +69,6 @@ type ElementType = {
     fillText2?: string;
     labels?: any[];
     data?: any[];
-    pagination?: boolean;
-    is_detail?: boolean;
-    dateTime?: string;
 };
 
 declare const TextElement: (props: ElementType) => React$1.JSX.Element;
@@ -135,8 +132,10 @@ 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, 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,9 +69,6 @@ type ElementType = {
     fillText2?: string;
     labels?: any[];
     data?: any[];
-    pagination?: boolean;
-    is_detail?: boolean;
-    dateTime?: string;
 };
 
 declare const TextElement: (props: ElementType) => React$1.JSX.Element;
@@ -135,8 +132,10 @@ 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, 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: () => HighchartsLineChart,
   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 }
       }
-    ) : /* @__PURE__ */ import_react11.default.createElement("img", { src: "", alt: "", className: props.iconsClassName }) : svgContent && /* @__PURE__ */ import_react11.default.createElement("span", { dangerouslySetInnerHTML: { __html: svgContent } }), props.label)
+    ), props.label)
   );
 };
 
@@ -687,48 +684,18 @@ var import_antd13 = require("antd");
 
 // src/Components/ModelBody.tsx
 var import_react18 = __toESM(require("react"));
-var import_moment = __toESM(require("moment"));
 var ModelBody = (props) => {
-  return /* @__PURE__ */ import_react18.default.createElement("div", { className: props.modalContent && props.modalContent.className }, props.modalContent && props.modalContent.fields.map(
-    (eachField) => {
-      if (eachField.element === "div") {
-        return /* @__PURE__ */ import_react18.default.createElement("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("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("div", { className: eachField.className }, /* @__PURE__ */ import_react18.default.createElement(ButtonElement, { ...eachField }), eachField.dateTime ? /* @__PURE__ */ import_react18.default.createElement(
-          "p",
-          {
-            style: {
-              fontSize: "10px",
-              textAlign: eachField.source === "bot" ? "left" : "right"
-            }
-          },
-          (0, import_moment.default)(eachField.dateTime).format("LT")
-        ) : "");
-      } else {
-        return null;
-      }
+  return /* @__PURE__ */ import_react18.default.createElement("div", { className: props.modalContent && props.modalContent.className }, props.modalContent && props.modalContent.fields.map((eachField) => {
+    if (eachField.element === "div") {
+      return /* @__PURE__ */ import_react18.default.createElement("div", { className: eachField.className }, eachField.label);
+    } else if (eachField.element === "input-radio") {
+      return /* @__PURE__ */ import_react18.default.createElement("div", { className: eachField.className }, /* @__PURE__ */ import_react18.default.createElement(RadioElement, { ...eachField }));
+    } else if (eachField.element === "button") {
+      return /* @__PURE__ */ import_react18.default.createElement("div", { className: eachField.className }, /* @__PURE__ */ import_react18.default.createElement(ButtonElement, { ...eachField }));
+    } else {
+      return null;
     }
-  ));
+  }));
 };
 
 // src/Components/Model.tsx
@@ -753,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)) : "";
         })
       )
     },
@@ -777,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);
     }
@@ -804,8 +746,8 @@ var TableElement = (props) => {
     columns = [
       {
         title: "#",
-        dataIndex: "index",
-        key: "index",
+        dataIndex: "#",
+        key: "#",
         fixed: "left"
       },
       ...thead.map((col, ind) => ({
@@ -816,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]);
             }
           }
@@ -830,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 });
@@ -865,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);
       }
@@ -879,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
@@ -921,7 +829,6 @@ var import_react21 = __toESM(require("react"));
 var import_antd15 = require("antd");
 var import_dayjs = __toESM(require("dayjs"));
 var import_customParseFormat = __toESM(require("dayjs/plugin/customParseFormat.js"));
-var import_moment2 = __toESM(require("moment"));
 import_dayjs.default.extend(import_customParseFormat.default);
 var DatePickerElement = (props) => {
   const [dateState, setDateState] = (0, import_react21.useState)("");
@@ -939,13 +846,9 @@ var DatePickerElement = (props) => {
       }
     }
   };
-  const disabledDate = (current) => {
-    return current && current > (0, import_moment2.default)();
-  };
   return /* @__PURE__ */ import_react21.default.createElement("div", null, /* @__PURE__ */ import_react21.default.createElement(
     import_antd15.DatePicker,
     {
-      disabledDate,
       placeholder: props.placeholder,
       value: dateState,
       format: { format: "DD-MM-YYYY" },
@@ -958,14 +861,13 @@ var DatePickerElement = (props) => {
 var import_react22 = __toESM(require("react"));
 var import_antd16 = require("antd");
 var import_dayjs2 = __toESM(require("dayjs"));
-var import_moment3 = __toESM(require("moment"));
 var DateRangePickerElement = (props) => {
   const { RangePicker } = import_antd16.DatePicker;
   const handleChange = (dates, dateStrings) => {
-    if (dates) {
-      props.onChange && props.onChange(dateStrings);
+    if (dates && props.onChange) {
+      props.onChange(dateStrings);
     } else {
-      props.onChange && props.onChange("clear");
+      console.log("Clear");
     }
   };
   const rangePresets = [
@@ -974,17 +876,7 @@ var DateRangePickerElement = (props) => {
     { label: "Last 30 Days", value: [(0, import_dayjs2.default)().add(-30, "d"), (0, import_dayjs2.default)()] },
     { label: "Last 90 Days", value: [(0, import_dayjs2.default)().add(-90, "d"), (0, import_dayjs2.default)()] }
   ];
-  const disabledDate = (current) => {
-    return current && current > (0, import_moment3.default)();
-  };
-  return /* @__PURE__ */ import_react22.default.createElement(import_antd16.Space, { direction: "vertical", size: 12 }, /* @__PURE__ */ import_react22.default.createElement(
-    RangePicker,
-    {
-      disabledDate,
-      presets: rangePresets,
-      onChange: handleChange
-    }
-  ));
+  return /* @__PURE__ */ import_react22.default.createElement(import_antd16.Space, { direction: "vertical", size: 12 }, /* @__PURE__ */ import_react22.default.createElement(RangePicker, { presets: rangePresets, onChange: handleChange }));
 };
 
 // src/Components/Image.tsx
@@ -1063,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)([]);
@@ -1094,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")
   ));
 };
@@ -1491,13 +1383,147 @@ 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 = (props) => {
+  let graph_data = {
+    chart: {
+      height: "50%"
+    },
+    title: {
+      text: "U.S Solar Employment Growth",
+      align: "left"
+    },
+    subtitle: {
+      text: 'By Job Category. Source: <a href="https://irecusa.org/programs/solar-jobs-census/" target="_blank">IREC</a>.',
+      align: "left"
+    },
+    yAxis: {
+      title: {
+        text: "Number of Employees"
+      }
+    },
+    xAxis: {
+      accessibility: {
+        rangeDescription: "Range: 2010 to 2020"
+      }
+    },
+    legend: {
+      layout: "vertical",
+      align: "right",
+      verticalAlign: "middle"
+    },
+    plotOptions: {
+      series: {
+        label: {
+          connectorAllowed: false
+        },
+        pointStart: 2010
+      }
+    },
+    series: [{
+      name: "Installation & Developers",
+      data: [
+        43934,
+        48656,
+        65165,
+        81827,
+        112143,
+        142383,
+        171533,
+        165174,
+        155157,
+        161454,
+        154610
+      ]
+    }, {
+      name: "Manufacturing",
+      data: [
+        24916,
+        37941,
+        29742,
+        29851,
+        32490,
+        30282,
+        38121,
+        36885,
+        33726,
+        34243,
+        31050
+      ]
+    }, {
+      name: "Sales & Distribution",
+      data: [
+        11744,
+        3e4,
+        16005,
+        19771,
+        20185,
+        24377,
+        32147,
+        30912,
+        29243,
+        29213,
+        25663
+      ]
+    }, {
+      name: "Operations & Maintenance",
+      data: [
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+        11164,
+        11218,
+        10077
+      ]
+    }, {
+      name: "Other",
+      data: [
+        21908,
+        5548,
+        8105,
+        11248,
+        8989,
+        11816,
+        18274,
+        17300,
+        13053,
+        11906,
+        10073
+      ]
+    }],
+    responsive: {
+      rules: [{
+        condition: {
+          maxWidth: 500
+        },
+        chartOptions: {
+          legend: {
+            layout: "horizontal",
+            align: "center",
+            verticalAlign: "bottom"
+          }
+        }
+      }]
+    }
+  };
+  return /* @__PURE__ */ import_react35.default.createElement("div", null, /* @__PURE__ */ import_react35.default.createElement(import_highcharts_react_official.default, { highcharts: import_highcharts.default, options: graph_data }));
+};
+
+// 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();
@@ -1566,11 +1592,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);
@@ -1632,7 +1658,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 = {
@@ -1647,6 +1673,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 }
       }
-    ) : /* @__PURE__ */ React11.createElement("img", { src: "", alt: "", className: props.iconsClassName }) : 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
@@ -621,48 +617,18 @@ import { Modal } from "antd";
 
 // src/Components/ModelBody.tsx
 import React18 from "react";
-import moment from "moment";
 var ModelBody = (props) => {
-  return /* @__PURE__ */ React18.createElement("div", { className: props.modalContent && props.modalContent.className }, props.modalContent && props.modalContent.fields.map(
-    (eachField) => {
-      if (eachField.element === "div") {
-        return /* @__PURE__ */ React18.createElement("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("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("div", { className: eachField.className }, /* @__PURE__ */ React18.createElement(ButtonElement, { ...eachField }), eachField.dateTime ? /* @__PURE__ */ React18.createElement(
-          "p",
-          {
-            style: {
-              fontSize: "10px",
-              textAlign: eachField.source === "bot" ? "left" : "right"
-            }
-          },
-          moment(eachField.dateTime).format("LT")
-        ) : "");
-      } else {
-        return null;
-      }
+  return /* @__PURE__ */ React18.createElement("div", { className: props.modalContent && props.modalContent.className }, props.modalContent && props.modalContent.fields.map((eachField) => {
+    if (eachField.element === "div") {
+      return /* @__PURE__ */ React18.createElement("div", { className: eachField.className }, eachField.label);
+    } else if (eachField.element === "input-radio") {
+      return /* @__PURE__ */ React18.createElement("div", { className: eachField.className }, /* @__PURE__ */ React18.createElement(RadioElement, { ...eachField }));
+    } else if (eachField.element === "button") {
+      return /* @__PURE__ */ React18.createElement("div", { className: eachField.className }, /* @__PURE__ */ React18.createElement(ButtonElement, { ...eachField }));
+    } else {
+      return null;
     }
-  ));
+  }));
 };
 
 // src/Components/Model.tsx
@@ -687,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)) : "";
         })
       )
     },
@@ -711,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);
     }
@@ -738,8 +679,8 @@ var TableElement = (props) => {
     columns = [
       {
         title: "#",
-        dataIndex: "index",
-        key: "index",
+        dataIndex: "#",
+        key: "#",
         fixed: "left"
       },
       ...thead.map((col, ind) => ({
@@ -750,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]);
             }
           }
@@ -764,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 });
@@ -799,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);
       }
@@ -813,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
@@ -855,7 +762,6 @@ import React21, { useState as useState7 } from "react";
 import { DatePicker } from "antd";
 import dayjs from "dayjs";
 import customParseFormat from "dayjs/plugin/customParseFormat.js";
-import moment2 from "moment";
 dayjs.extend(customParseFormat);
 var DatePickerElement = (props) => {
   const [dateState, setDateState] = useState7("");
@@ -873,13 +779,9 @@ var DatePickerElement = (props) => {
       }
     }
   };
-  const disabledDate = (current) => {
-    return current && current > moment2();
-  };
   return /* @__PURE__ */ React21.createElement("div", null, /* @__PURE__ */ React21.createElement(
     DatePicker,
     {
-      disabledDate,
       placeholder: props.placeholder,
       value: dateState,
       format: { format: "DD-MM-YYYY" },
@@ -892,14 +794,13 @@ var DatePickerElement = (props) => {
 import React22 from "react";
 import { DatePicker as DatePicker2, Space } from "antd";
 import dayjs2 from "dayjs";
-import moment3 from "moment";
 var DateRangePickerElement = (props) => {
   const { RangePicker } = DatePicker2;
   const handleChange = (dates, dateStrings) => {
-    if (dates) {
-      props.onChange && props.onChange(dateStrings);
+    if (dates && props.onChange) {
+      props.onChange(dateStrings);
     } else {
-      props.onChange && props.onChange("clear");
+      console.log("Clear");
     }
   };
   const rangePresets = [
@@ -908,17 +809,7 @@ var DateRangePickerElement = (props) => {
     { label: "Last 30 Days", value: [dayjs2().add(-30, "d"), dayjs2()] },
     { label: "Last 90 Days", value: [dayjs2().add(-90, "d"), dayjs2()] }
   ];
-  const disabledDate = (current) => {
-    return current && current > moment3();
-  };
-  return /* @__PURE__ */ React22.createElement(Space, { direction: "vertical", size: 12 }, /* @__PURE__ */ React22.createElement(
-    RangePicker,
-    {
-      disabledDate,
-      presets: rangePresets,
-      onChange: handleChange
-    }
-  ));
+  return /* @__PURE__ */ React22.createElement(Space, { direction: "vertical", size: 12 }, /* @__PURE__ */ React22.createElement(RangePicker, { presets: rangePresets, onChange: handleChange }));
 };
 
 // src/Components/Image.tsx
@@ -1082,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;
@@ -1119,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(
@@ -1371,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);
@@ -1382,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();
@@ -1443,13 +1334,147 @@ 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) => {
+  let graph_data = {
+    chart: {
+      height: "50%"
+    },
+    title: {
+      text: "U.S Solar Employment Growth",
+      align: "left"
+    },
+    subtitle: {
+      text: 'By Job Category. Source: <a href="https://irecusa.org/programs/solar-jobs-census/" target="_blank">IREC</a>.',
+      align: "left"
+    },
+    yAxis: {
+      title: {
+        text: "Number of Employees"
+      }
+    },
+    xAxis: {
+      accessibility: {
+        rangeDescription: "Range: 2010 to 2020"
+      }
+    },
+    legend: {
+      layout: "vertical",
+      align: "right",
+      verticalAlign: "middle"
+    },
+    plotOptions: {
+      series: {
+        label: {
+          connectorAllowed: false
+        },
+        pointStart: 2010
+      }
+    },
+    series: [{
+      name: "Installation & Developers",
+      data: [
+        43934,
+        48656,
+        65165,
+        81827,
+        112143,
+        142383,
+        171533,
+        165174,
+        155157,
+        161454,
+        154610
+      ]
+    }, {
+      name: "Manufacturing",
+      data: [
+        24916,
+        37941,
+        29742,
+        29851,
+        32490,
+        30282,
+        38121,
+        36885,
+        33726,
+        34243,
+        31050
+      ]
+    }, {
+      name: "Sales & Distribution",
+      data: [
+        11744,
+        3e4,
+        16005,
+        19771,
+        20185,
+        24377,
+        32147,
+        30912,
+        29243,
+        29213,
+        25663
+      ]
+    }, {
+      name: "Operations & Maintenance",
+      data: [
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+        11164,
+        11218,
+        10077
+      ]
+    }, {
+      name: "Other",
+      data: [
+        21908,
+        5548,
+        8105,
+        11248,
+        8989,
+        11816,
+        18274,
+        17300,
+        13053,
+        11906,
+        10073
+      ]
+    }],
+    responsive: {
+      rules: [{
+        condition: {
+          maxWidth: 500
+        },
+        chartOptions: {
+          legend: {
+            layout: "horizontal",
+            align: "center",
+            verticalAlign: "bottom"
+          }
+        }
+      }]
+    }
+  };
+  return /* @__PURE__ */ React35.createElement("div", null, /* @__PURE__ */ React35.createElement(HighchartsReact, { highcharts: Highcharts, options: graph_data }));
+};
+
 // 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();
@@ -1518,11 +1543,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,
@@ -1590,7 +1615,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,
@@ -1604,6 +1629,7 @@ export {
   DoubleBarChart,
   DropDownGroup,
   FileUpload,
+  HighchartsLineChart,
   HorizontalBarChart,
   Image,
   LineChart,

package/package.json

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