@databrainhq/plugin 0.9.4 → 0.9.6

package/dist/index.es.js

@@ -2515,7 +2515,7 @@ function useQuery(arg1, arg2, arg3) {
 const container$h = "_container_12kmo_1";
 const fixed = "_fixed_12kmo_1";
 const flex = "_flex_12kmo_1";
-const table$4 = "_table_12kmo_1";
+const table$3 = "_table_12kmo_1";
 const grid = "_grid_12kmo_1";
 const hidden = "_hidden_12kmo_1";
 const transform = "_transform_12kmo_1";
@@ -2542,7 +2542,8 @@ var styles$L = {
   "ml-[40px]": "_ml-[40px]_12kmo_1",
   "mb-2": "_mb-2_12kmo_1",
   flex,
-  table: table$4,
+  table: table$3,
+  "!table": "_!table_12kmo_1",
   grid,
   hidden,
   "h-screen": "_h-screen_12kmo_1",
@@ -5615,6 +5616,7 @@ const FREQUENCY = [
   { value: "Weekly", label: "Weekly" },
   { value: "Monthly", label: "Monthly" }
 ];
+const RAW_CSV_OPTIONS = ["download", "email"];
 const ChartConfig = ({
   data,
   setXAxis,
@@ -6526,7 +6528,7 @@ const TextAreaField = ({
   });
 };
 const group$1 = "_group_13otg_1";
-const button$6 = "_button_13otg_9";
+const button$7 = "_button_13otg_9";
 const checkbox = "_checkbox_13otg_17";
 const enabled = "_enabled_13otg_43";
 const notenabled = "_notenabled_13otg_59";
@@ -6535,7 +6537,7 @@ const labelActive = "_labelActive_13otg_83";
 const labelInactive = "_labelInactive_13otg_91";
 var styles$A = {
   group: group$1,
-  button: button$6,
+  button: button$7,
   checkbox,
   "switch": "_switch_13otg_25",
   enabled,
@@ -6909,6 +6911,24 @@ const useExternalDashboardListQuery = (variables, options2) => useQuery(
   fetcher(ExternalDashboardListDocument, variables),
   options2
 );
+const ExternalMetricRawCsvUrlsDocument = `
+    query ExternalMetricRawCsvUrls($externalMetricId: uuid = "") {
+  externalMetricRawCsvUrls(where: {externalMetricId: {_eq: $externalMetricId}}) {
+    configurations
+    error
+    expireUrlIn
+    externalMetricId
+    id
+    lastUpdatedAt
+    urls
+  }
+}
+    `;
+const useExternalMetricRawCsvUrlsQuery = (variables, options2) => useQuery(
+  variables === void 0 ? ["ExternalMetricRawCsvUrls"] : ["ExternalMetricRawCsvUrls", variables],
+  fetcher(ExternalMetricRawCsvUrlsDocument, variables),
+  options2
+);
 const GuestTokenParamsDocument = `
     query GuestTokenParams($id: uuid = "") {
   guestTokens_by_pk(id: $id) {
@@ -7002,6 +7022,21 @@ const useUnderlyingDataMutation = (options2) => useMutation(
   (variables) => fetcher(UnderlyingDataDocument, variables)(),
   options2
 );
+const InvokeSaveRawCsvDetailsDocument = `
+    mutation InvokeSaveRawCsvDetails($configurations: json = "", $expireCsvFileAt: String = "", $externalMetricId: String = "", $integrationId: String = "", $integrationName: String = "", $query: String = "", $expireUrlIn: Int = 60) {
+  invokeSaveRawCsvDetails(
+    input: {configurations: $configurations, expireCsvFileAt: $expireCsvFileAt, externalMetricId: $externalMetricId, integrationId: $integrationId, integrationName: $integrationName, query: $query, expireUrlIn: $expireUrlIn}
+  ) {
+    error
+    statusCode
+  }
+}
+    `;
+const useInvokeSaveRawCsvDetailsMutation = (options2) => useMutation(
+  ["InvokeSaveRawCsvDetails"],
+  (variables) => fetcher(InvokeSaveRawCsvDetailsDocument, variables)(),
+  options2
+);
 const MarkArchiveMetricDocument = `
     mutation MarkArchiveMetric($id: uuid! = "", $clientId: String! = "") {
   insert_clientDeletedMetrics_one(
@@ -7287,25 +7322,26 @@ const ExternalMetricForm = ({
     })]
   });
 };
-const container$d = "_container_i9keb_1";
-const wrapper$3 = "_wrapper_i9keb_5";
-const label$3 = "_label_i9keb_9";
-const floatingLabel = "_floatingLabel_i9keb_13";
-const floatingText = "_floatingText_i9keb_16";
-const clientText = "_clientText_i9keb_20";
-const normalText = "_normalText_i9keb_24";
-const dropdown$1 = "_dropdown_i9keb_28";
-const options = "_options_i9keb_32";
-const checkedOption = "_checkedOption_i9keb_36";
-const option = "_option_i9keb_32";
-const icon$1 = "_icon_i9keb_44";
-const text$2 = "_text_i9keb_48";
-const search = "_search_i9keb_52";
-const loadMore = "_loadMore_i9keb_56";
-const loadMoreIcon = "_loadMoreIcon_i9keb_60";
+const container$d = "_container_1f7qx_1";
+const wrapper$2 = "_wrapper_1f7qx_5";
+const label$3 = "_label_1f7qx_9";
+const floatingLabel = "_floatingLabel_1f7qx_13";
+const floatingText = "_floatingText_1f7qx_16";
+const clientText = "_clientText_1f7qx_20";
+const normalText = "_normalText_1f7qx_24";
+const dropdown$1 = "_dropdown_1f7qx_28";
+const options = "_options_1f7qx_32";
+const checkedOption = "_checkedOption_1f7qx_36";
+const option = "_option_1f7qx_32";
+const icon$1 = "_icon_1f7qx_44";
+const text$1 = "_text_1f7qx_48";
+const search = "_search_1f7qx_52";
+const loadMore = "_loadMore_1f7qx_56";
+const loadMoreIcon = "_loadMoreIcon_1f7qx_60";
+const aboveList = "_aboveList_1f7qx_64";
 var styles$y = {
   container: container$d,
-  wrapper: wrapper$3,
+  wrapper: wrapper$2,
   label: label$3,
   floatingLabel,
   floatingText,
@@ -7316,10 +7352,11 @@ var styles$y = {
   checkedOption,
   option,
   icon: icon$1,
-  text: text$2,
+  text: text$1,
   search,
   loadMore,
-  loadMoreIcon
+  loadMoreIcon,
+  aboveList
 };
 const useEmbeddedDashboard = (token) => {
   var _a2, _b2;
@@ -7892,6 +7929,7 @@ var index$5 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePropert
   TIME,
   DATE_NUM,
   FREQUENCY,
+  RAW_CSV_OPTIONS,
   operatorList,
   RowLimitList,
   AggregateList,
@@ -8035,12 +8073,14 @@ const FloatingDropDown = ({
   selectedOption: selectedOption2,
   onChange,
   className,
+  buttonClass,
   options: options2,
   isDisabled,
   children: children2,
   icon: icon2,
   isSearchEnabled,
-  closeControl
+  closeControl,
+  dropdownAbove
 }) => {
   const [isShow, setIsShow] = useState(false);
   const wrapperRef = useRef(null);
@@ -8067,7 +8107,7 @@ const FloatingDropDown = ({
       type: "button",
       variant: "custom",
       isDisabled,
-      className: styles$y.wrapper,
+      className: classnames(styles$y.wrapper, buttonClass),
       onClick: () => setIsShow(!isShow),
       children: [/* @__PURE__ */ jsxs(Text, {
         variant: "p",
@@ -8076,7 +8116,7 @@ const FloatingDropDown = ({
         children: [icon2, selectedOption2.label || selectedOption2.value || "Select An Option"]
       }), /* @__PURE__ */ jsx(materialSymbolsKeyboardArrowDown, {})]
     }), isShow && !isDisabled && /* @__PURE__ */ jsxs("div", {
-      className: styles$y.dropdown,
+      className: `${dropdownAbove ? styles$y.aboveList : styles$y.dropdown}`,
       children: [isSearchEnabled && /* @__PURE__ */ jsx(SearchTab, {
         className: styles$y.search,
         setSearchKeyword
@@ -8289,9 +8329,9 @@ const MultiFilterDropdown = React__default.memo(({
     ...rest
   });
 });
-const fullscreen$2 = "_fullscreen_1wo1t_1";
+const fullscreen$3 = "_fullscreen_1wo1t_1";
 var styles$x = {
-  fullscreen: fullscreen$2
+  fullscreen: fullscreen$3
 };
 const csvlink = "_csvlink_azd6y_1";
 const noChart = "_noChart_azd6y_7";
@@ -19867,9 +19907,9 @@ function blurSeriesFromHighlightPayload(seriesModel, payload, api) {
   var el = data.getItemGraphicEl(dataIndex);
   if (!el) {
     var count2 = data.count();
-    var current = 0;
-    while (!el && current < count2) {
-      el = data.getItemGraphicEl(current++);
+    var current2 = 0;
+    while (!el && current2 < count2) {
+      el = data.getItemGraphicEl(current2++);
     }
   }
   if (el) {
@@ -25719,13 +25759,13 @@ var Task = function() {
 }();
 var iterator = function() {
   var end2;
-  var current;
+  var current2;
   var modBy;
   var modDataCount;
   var winCount;
   var it = {
     reset: function(s2, e2, sStep, sCount) {
-      current = s2;
+      current2 = s2;
       end2 = e2;
       modBy = sStep;
       modDataCount = sCount;
@@ -25735,12 +25775,12 @@ var iterator = function() {
   };
   return it;
   function sequentialNext() {
-    return current < end2 ? current++ : null;
+    return current2 < end2 ? current2++ : null;
   }
   function modNext() {
-    var dataIndex = current % winCount * modBy + Math.ceil(current / winCount);
-    var result = current >= end2 ? null : dataIndex < modDataCount ? dataIndex : current;
-    current++;
+    var dataIndex = current2 % winCount * modBy + Math.ceil(current2 / winCount);
+    var result = current2 >= end2 ? null : dataIndex < modDataCount ? dataIndex : current2;
+    current2++;
     return result;
   }
 }();
@@ -40875,7 +40915,7 @@ var LineView = function(_super) {
         var point = [symbol.x, symbol.y];
         var start2 = void 0;
         var end2 = void 0;
-        var current = void 0;
+        var current2 = void 0;
         if (clipShape) {
           if (isCoordSysPolar) {
             var polarClip = clipShape;
@@ -40883,26 +40923,26 @@ var LineView = function(_super) {
             if (isHorizontalOrRadial) {
               start2 = polarClip.startAngle;
               end2 = polarClip.endAngle;
-              current = -coord[1] / 180 * Math.PI;
+              current2 = -coord[1] / 180 * Math.PI;
             } else {
               start2 = polarClip.r0;
               end2 = polarClip.r;
-              current = coord[0];
+              current2 = coord[0];
             }
           } else {
             var gridClip = clipShape;
             if (isHorizontalOrRadial) {
               start2 = gridClip.x;
               end2 = gridClip.x + gridClip.width;
-              current = symbol.x;
+              current2 = symbol.x;
             } else {
               start2 = gridClip.y + gridClip.height;
               end2 = gridClip.y;
-              current = symbol.y;
+              current2 = symbol.y;
             }
           }
         }
-        var ratio = end2 === start2 ? 0 : (current - start2) / (end2 - start2);
+        var ratio = end2 === start2 ? 0 : (current2 - start2) / (end2 - start2);
         if (isAxisInverse) {
           ratio = 1 - ratio;
         }
@@ -41036,17 +41076,17 @@ var LineView = function(_super) {
     var polygon = this._polygon;
     var seriesModel = data.hostModel;
     var diff2 = lineAnimationDiff(this._data, data, this._stackedOnPoints, stackedOnPoints, this._coordSys, coordSys, this._valueOrigin);
-    var current = diff2.current;
+    var current2 = diff2.current;
     var stackedOnCurrent = diff2.stackedOnCurrent;
     var next = diff2.next;
     var stackedOnNext = diff2.stackedOnNext;
     if (step) {
-      current = turnPointsIntoStep(diff2.current, coordSys, step, connectNulls);
+      current2 = turnPointsIntoStep(diff2.current, coordSys, step, connectNulls);
       stackedOnCurrent = turnPointsIntoStep(diff2.stackedOnCurrent, coordSys, step, connectNulls);
       next = turnPointsIntoStep(diff2.next, coordSys, step, connectNulls);
       stackedOnNext = turnPointsIntoStep(diff2.stackedOnNext, coordSys, step, connectNulls);
     }
-    if (getBoundingDiff(current, next) > 3e3 || polygon && getBoundingDiff(stackedOnCurrent, stackedOnNext) > 3e3) {
+    if (getBoundingDiff(current2, next) > 3e3 || polygon && getBoundingDiff(stackedOnCurrent, stackedOnNext) > 3e3) {
       polyline.stopAnimation();
       polyline.setShape({
         points: next
@@ -41061,20 +41101,20 @@ var LineView = function(_super) {
       return;
     }
     polyline.shape.__points = diff2.current;
-    polyline.shape.points = current;
+    polyline.shape.points = current2;
     var target = {
       shape: {
         points: next
       }
     };
-    if (diff2.current !== current) {
+    if (diff2.current !== current2) {
       target.shape.__points = diff2.next;
     }
     polyline.stopAnimation();
     updateProps$1(polyline, target, seriesModel);
     if (polygon) {
       polygon.setShape({
-        points: current,
+        points: current2,
         stackedOnPoints: stackedOnCurrent
       });
       polygon.stopAnimation();
@@ -44827,15 +44867,15 @@ function fixMinMaxLabelShow(axisModel, labelEls, tickEls) {
 function ignoreEl(el) {
   el && (el.ignore = true);
 }
-function isTwoLabelOverlapped(current, next) {
-  var firstRect = current && current.getBoundingRect().clone();
+function isTwoLabelOverlapped(current2, next) {
+  var firstRect = current2 && current2.getBoundingRect().clone();
   var nextRect = next && next.getBoundingRect().clone();
   if (!firstRect || !nextRect) {
     return;
   }
   var mRotationBack = identity([]);
-  rotate(mRotationBack, mRotationBack, -current.rotation);
-  firstRect.applyTransform(mul([], mRotationBack, current.getLocalTransform()));
+  rotate(mRotationBack, mRotationBack, -current2.rotation);
+  firstRect.applyTransform(mul([], mRotationBack, current2.getLocalTransform()));
   nextRect.applyTransform(mul([], mRotationBack, next.getLocalTransform()));
   return firstRect.intersect(nextRect);
 }
@@ -48807,8 +48847,8 @@ var GeoView = function(_super) {
   };
   GeoView2.prototype._handleRegionClick = function(e2) {
     var eventData;
-    findEventDispatcher(e2.target, function(current) {
-      return (eventData = getECData(current).eventData) != null;
+    findEventDispatcher(e2.target, function(current2) {
+      return (eventData = getECData(current2).eventData) != null;
     }, true);
     if (eventData) {
       this._api.dispatchAction({
@@ -50293,11 +50333,11 @@ function enableAriaDecalForTree(seriesModel) {
   var tree = data.tree;
   var decalPaletteScope2 = {};
   tree.eachNode(function(node) {
-    var current = node;
-    while (current && current.depth > 1) {
-      current = current.parentNode;
+    var current2 = node;
+    while (current2 && current2.depth > 1) {
+      current2 = current2.parentNode;
     }
-    var decal = getDecalFromPalette(seriesModel.ecModel, current.name || current.dataIndex + "", decalPaletteScope2);
+    var decal = getDecalFromPalette(seriesModel.ecModel, current2.name || current2.dataIndex + "", decalPaletteScope2);
     node.setVisual("decal", decal);
   });
 }
@@ -61968,11 +62008,11 @@ function sort(children2, sortOrder) {
 function sunburstVisual(ecModel) {
   var paletteScope = {};
   function pickColor(node, seriesModel, treeHeight) {
-    var current = node;
-    while (current && current.depth > 1) {
-      current = current.parentNode;
+    var current2 = node;
+    while (current2 && current2.depth > 1) {
+      current2 = current2.parentNode;
     }
-    var color2 = seriesModel.getColorFromPalette(current.name || current.dataIndex + "", paletteScope);
+    var color2 = seriesModel.getColorFromPalette(current2.name || current2.dataIndex + "", paletteScope);
     if (node.depth > 1 && isString$1(color2)) {
       color2 = lift(color2, (node.depth - 1) / (treeHeight - 1) * 0.5);
     }
@@ -68411,8 +68451,8 @@ var DataView = function(_super) {
       viewMain.appendChild(textarea2);
     }
     var blockMetaList = result.meta;
-    var buttonContainer = document.createElement("div");
-    buttonContainer.style.cssText = "position:absolute;bottom:5px;left:0;right:0";
+    var buttonContainer2 = document.createElement("div");
+    buttonContainer2.style.cssText = "position:absolute;bottom:5px;left:0;right:0";
     var buttonStyle = "float:right;margin-right:20px;border:none;cursor:pointer;padding:2px 5px;font-size:12px;border-radius:3px";
     var closeButton = document.createElement("div");
     var refreshButton = document.createElement("div");
@@ -68451,11 +68491,11 @@ var DataView = function(_super) {
     closeButton.innerHTML = lang[1];
     refreshButton.innerHTML = lang[2];
     refreshButton.style.cssText = closeButton.style.cssText = buttonStyle;
-    !model.get("readOnly") && buttonContainer.appendChild(refreshButton);
-    buttonContainer.appendChild(closeButton);
+    !model.get("readOnly") && buttonContainer2.appendChild(refreshButton);
+    buttonContainer2.appendChild(closeButton);
     root2.appendChild(header2);
     root2.appendChild(viewMain);
-    root2.appendChild(buttonContainer);
+    root2.appendChild(buttonContainer2);
     viewMain.style.height = container2.clientHeight - 80 + "px";
     container2.appendChild(root2);
     this._dom = root2;
@@ -73881,10 +73921,10 @@ var ScrollableLegendView = function(_super) {
     var pageText = controllerGroup.childOfName("pageText");
     var pageFormatter = legendModel.get("pageFormatter");
     var pageIndex = pageInfo.pageIndex;
-    var current = pageIndex != null ? pageIndex + 1 : 0;
+    var current2 = pageIndex != null ? pageIndex + 1 : 0;
     var total = pageInfo.pageCount;
-    pageText && pageFormatter && pageText.setStyle("text", isString$1(pageFormatter) ? pageFormatter.replace("{current}", current == null ? "" : current + "").replace("{total}", total == null ? "" : total + "") : pageFormatter({
-      current,
+    pageText && pageFormatter && pageText.setStyle("text", isString$1(pageFormatter) ? pageFormatter.replace("{current}", current2 == null ? "" : current2 + "").replace("{total}", total == null ? "" : total + "") : pageFormatter({
+      current: current2,
       total
     }));
   };
@@ -81571,7 +81611,7 @@ const StackedBarChart = ({
     children: /* @__PURE__ */ jsx(EChartsReact, {
       style: {
         width: "100%",
-        height: "300px"
+        height: "90%"
       },
       option: option2,
       onEvents: {
@@ -81644,7 +81684,7 @@ const SingleValueChart = ({
   chartClickConfig,
   hideBorder
 }) => {
-  var _a2, _b2, _c2, _d;
+  var _a2, _b2;
   const subHeaderFont = {
     fontSize: `${customSettings.subHeaderFontSize || 14}px`
   };
@@ -81856,38 +81896,7 @@ const SingleValueChart = ({
         return val;
     }
   };
-  const dateFormatter = (val, formatter) => {
-    const year = val.toString().slice(0, 4);
-    const month = val.toString().slice(5, 7);
-    const date = val.toString().slice(8, 10);
-    const time2 = val.toString().slice(11, 19);
-    switch (formatter) {
-      case "dd-mm-yyyy": {
-        return `${date}-${month}-${year}`;
-      }
-      case "mm-dd-yyyy": {
-        return `${month}-${date}-${year}`;
-      }
-      case "yyyy-mm-dd": {
-        return `${year}-${month}-${date}`;
-      }
-      case "dd/mm/yyyy": {
-        return `${date}/${month}/${year}`;
-      }
-      case "mm/dd/yyyy": {
-        return `${month}/${date}/${year}`;
-      }
-      case "yyyy/mm/dd": {
-        return `${year}/${month}/${date}`;
-      }
-      case "hh:mm:ss": {
-        return time2;
-      }
-      default:
-        return val;
-    }
-  };
-  const value = ((_a2 = data[0]) == null ? void 0 : _a2.value) && (Number((_b2 = data[0]) == null ? void 0 : _b2.value) || 0).toString().length > 16 ? dateFormatter(Number((_c2 = data[0]) == null ? void 0 : _c2.value) || 0, customSettings.dateFormatter) : formattedData(Number((_d = data[0]) == null ? void 0 : _d.value) || 0, customSettings.numberFormatter);
+  const value = ((_a2 = data[0]) == null ? void 0 : _a2.value) && formattedData(Number((_b2 = data[0]) == null ? void 0 : _b2.value) || 0, customSettings.numberFormatter);
   return /* @__PURE__ */ jsxs("div", {
     className: hideBorder ? styles$v.borderLessContainer : styles$v.container,
     children: [/* @__PURE__ */ jsx("div", {
@@ -84025,7 +84034,7 @@ const alphanumeric = (rowA, rowB, columnId) => {
 const alphanumericCaseSensitive = (rowA, rowB, columnId) => {
   return compareAlphanumeric(toString$1(rowA.getValue(columnId)), toString$1(rowB.getValue(columnId)));
 };
-const text$1 = (rowA, rowB, columnId) => {
+const text = (rowA, rowB, columnId) => {
   return compareBasic(toString$1(rowA.getValue(columnId)).toLowerCase(), toString$1(rowB.getValue(columnId)).toLowerCase());
 };
 const textCaseSensitive = (rowA, rowB, columnId) => {
@@ -84087,7 +84096,7 @@ function compareAlphanumeric(aStr, bStr) {
 const sortingFns = {
   alphanumeric,
   alphanumericCaseSensitive,
-  text: text$1,
+  text,
   textCaseSensitive,
   datetime,
   basic
@@ -85622,41 +85631,51 @@ function getAccessorAttributes(accessor) {
     ...accessor
   };
 }
-const tableData = "_tableData_17lmd_7";
-const tableHeadCol$1 = "_tableHeadCol_17lmd_13";
-const tableRow$1 = "_tableRow_17lmd_19";
-const tableRowCol$1 = "_tableRowCol_17lmd_25";
-const row = "_row_17lmd_31";
-const container$b = "_container_17lmd_37";
-const table$3 = "_table_17lmd_1";
-const previewTable = "_previewTable_17lmd_49";
-const preview = "_preview_17lmd_49";
-const searchButton = "_searchButton_17lmd_61";
-const previewText = "_previewText_17lmd_67";
-const noData$1 = "_noData_17lmd_73";
-const error$2 = "_error_17lmd_79";
-const errorMsg = "_errorMsg_17lmd_85";
-const tableIcon = "_tableIcon_17lmd_91";
-const stripedRow = "_stripedRow_17lmd_97";
-const rowHover = "_rowHover_17lmd_103";
-const rightBorder = "_rightBorder_17lmd_109";
-const searchContainer = "_searchContainer_17lmd_115";
-const sortButton = "_sortButton_17lmd_121";
-const debounceInput = "_debounceInput_17lmd_127";
-const searchTab = "_searchTab_17lmd_133";
-const noDataHead = "_noDataHead_17lmd_139";
-const noDataBody = "_noDataBody_17lmd_145";
-const showSort = "_showSort_17lmd_151";
-const noSort = "_noSort_17lmd_157";
+const tableData = "_tableData_1bay1_7";
+const tableHeadCol$1 = "_tableHeadCol_1bay1_13";
+const tableRow$1 = "_tableRow_1bay1_19";
+const tableRowCol$1 = "_tableRowCol_1bay1_25";
+const row = "_row_1bay1_31";
+const container$b = "_container_1bay1_37";
+const table$2 = "_table_1bay1_1";
+const previewTable = "_previewTable_1bay1_49";
+const preview = "_preview_1bay1_49";
+const searchButton = "_searchButton_1bay1_61";
+const previewText = "_previewText_1bay1_67";
+const noData$1 = "_noData_1bay1_73";
+const error$2 = "_error_1bay1_79";
+const errorMsg = "_errorMsg_1bay1_85";
+const tableIcon = "_tableIcon_1bay1_91";
+const stripedRow = "_stripedRow_1bay1_97";
+const rowHover = "_rowHover_1bay1_103";
+const rightBorder = "_rightBorder_1bay1_109";
+const searchContainer = "_searchContainer_1bay1_115";
+const sortButton = "_sortButton_1bay1_121";
+const searchTab = "_searchTab_1bay1_127";
+const searchTabInput = "_searchTabInput_1bay1_133";
+const searchTabIcon = "_searchTabIcon_1bay1_139";
+const noDataHead = "_noDataHead_1bay1_145";
+const noDataBody = "_noDataBody_1bay1_151";
+const showSort = "_showSort_1bay1_157";
+const noSort = "_noSort_1bay1_163";
+const pagination = "_pagination_1bay1_169";
+const rowStyle = "_rowStyle_1bay1_175";
+const rowText = "_rowText_1bay1_181";
+const rowsDropdown = "_rowsDropdown_1bay1_187";
+const pageStyle = "_pageStyle_1bay1_193";
+const buttonContainer = "_buttonContainer_1bay1_199";
+const button$6 = "_button_1bay1_199";
+const paginationWrapper = "_paginationWrapper_1bay1_217";
+const current = "_current_1bay1_223";
 var styles$u = {
-  "table-loader-container": "_table-loader-container_17lmd_1",
+  "table-loader-container": "_table-loader-container_1bay1_1",
   tableData,
   tableHeadCol: tableHeadCol$1,
   tableRow: tableRow$1,
   tableRowCol: tableRowCol$1,
   row,
   container: container$b,
-  table: table$3,
+  table: table$2,
   previewTable,
   preview,
   searchButton,
@@ -85670,12 +85689,22 @@ var styles$u = {
   rightBorder,
   searchContainer,
   sortButton,
-  debounceInput,
   searchTab,
+  searchTabInput,
+  searchTabIcon,
   noDataHead,
   noDataBody,
   showSort,
-  noSort
+  noSort,
+  pagination,
+  rowStyle,
+  rowText,
+  rowsDropdown,
+  pageStyle,
+  buttonContainer,
+  button: button$6,
+  paginationWrapper,
+  current
 };
 const DebouncedInput = ({
   value: initialValue,
@@ -85693,11 +85722,19 @@ const DebouncedInput = ({
     }, debounce2);
     return () => clearTimeout(timeout);
   }, [debounce2, onChange, value]);
-  return /* @__PURE__ */ jsx("input", {
-    ...props,
-    value,
-    onChange: (e2) => setValue(e2.target.value),
-    className: styles$u.searchTab
+  return /* @__PURE__ */ jsxs("div", {
+    className: `${styles$u.searchTab} ${props.className || ""}`,
+    children: [/* @__PURE__ */ jsx("input", {
+      ...props,
+      value,
+      onChange: (e2) => setValue(e2.target.value),
+      className: styles$u.searchTabInput
+    }), /* @__PURE__ */ jsx(iconoirSearch, {
+      className: styles$u.searchTabIcon,
+      color: "#C7C7C7",
+      width: "30px",
+      height: "30px"
+    })]
   });
 };
 var TableIcon = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MDAgNTAwIj48ZGVmcz48c3R5bGU+LmNscy0xe3N0cm9rZTojMTgyYzYwO30uY2xzLTEsLmNscy0ye2ZpbGw6bm9uZTtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7fS5jbHMtM3tmaWxsOiM1ODY1ZjY7b3BhY2l0eTouMTt9LmNscy00e2ZpbGw6I2YyZjNmNDt9LmNscy01e2ZpbGw6I2MxYzdjOTt9LmNscy02e2ZpbGw6IzE4MmM2MDt9LmNscy0ye3N0cm9rZTojNTg2NWY2O3N0cm9rZS13aWR0aDo0cHg7fTwvc3R5bGU+PC9kZWZzPjxwYXRoIGNsYXNzPSJjbHMtMyIgZD0ibTI3MS4xMSwxNzkuNzJsLS4wOSwyMC4zM3MuMTksNC4wNS4zOCw0LjUyLjc1LDEuODgsMS40MSwyLjM1LDEuMjcuOTksMi4yMSwxLjMyLDEuMTguNjEsMi42NC42MSwyMi42OC4wNSwyMi42OC4wNWwtMjkuMjItMjkuMThaIi8+PGxpbmUgY2xhc3M9ImNscy0xIiB4MT0iMjAzLjcxIiB5MT0iMjA4LjAxIiB4Mj0iMjM0LjkyIiB5Mj0iMjA4LjAxIi8+PGxpbmUgY2xhc3M9ImNscy0yIiB4MT0iMjAzLjcxIiB5MT0iMTk3LjM0IiB4Mj0iMjQ4LjA0IiB5Mj0iMTk3LjM0Ii8+PHJlY3QgY2xhc3M9ImNscy0xIiB4PSIyMDIuMyIgeT0iMjMwLjM2IiB3aWR0aD0iODkuOTUiIGhlaWdodD0iNjIuNjciIHJ4PSIzLjIxIiByeT0iMy4yMSIvPjxnPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0ibTMwMC40OSwyMDguOTl2OTkuOTljMCwzLjU1LTIuODgsNi40My02LjQzLDYuNDNoLTkzLjIzYy0zLjU1LDAtNi40My0yLjg4LTYuNDMtNi40M3YtMTIzLjA3YzAtMy41NSwyLjg4LTYuNDMsNi40My02LjQzaDcwLjI5Ii8+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJtMjcxLjE1LDE3OS40OHYyMi45MWMwLDMuNTUsMi44OCw2LjQzLDYuNDMsNi40M2gyMi45MXMtMjkuMzQtMjkuNDgtMjkuMzQtMjkuMzRaIi8+PC9nPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0ibTMwNS40OSwyMTMuOTl2OTkuOTljMCwzLjU1LTIuODgsNi40My02LjQzLDYuNDNoLTkzLjIzYy0yLjk1LDAtNS40My0xLjk4LTYuMTktNC42OSIvPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0ibTMwNS40OSwyMTMuODJzLTIuMTMtMi4xNC01LjI0LTUuMjYiLz48cGF0aCBjbGFzcz0iY2xzLTYiIGQ9Im0xOTkuNTQsMzE1LjUzcy4yOCwxLjA0LjY2LDEuNi41NiwxLjA4LDEuMzIsMS42OSwyLjEyLDEuNDYsMi40LDEuNTEsMi43My4yNCwzLjg2LjE5LDIwLjM4LS4wOSwyMC4zOC0uMDloMjMuNjdzMTcuMDQtLjA1LDE3LjA0LS4wNWwxNy42OS4xNCwxMi43NS0uMTRzMS45OC0uMTksMi43OC0uNzEsMS42NS0xLjA0LDIuMTItMS44NCwxLjIyLTEuODQsMS4yNy0yLjM1LjE0LTE0LjQuMTQtMTQuNGwtLjE5LTExLjYyLjA5LTExLjk1di0yMi4xMnMtLjA1LTE4LjEyLS4wNS0xOC4xMnYtMjMuMzRzLTUuMDQtNS4yMi01LjA0LTUuMjJsLjA1LDI1LjYuMTQsMjguOTktLjA1LDEzLjg0LS4wNSw5Ljc0djEwLjRzMCw5Ljc5LDAsOS43OWMwLDAsLjE5LDMuMDYtLjQ3LDQuMDlzLTEuMzYsMi4zNS0yLjIxLDIuOTYtMi4wNywxLjE4LTQuNzEsMS4yMi0xNC44Ny4wNS0xNC44Ny4wNWwtMjEuNzktLjA1aC0xNi4wNWwtMjUuODguMDUtMTUuMDEuMTRaIi8+PGxpbmUgY2xhc3M9ImNscy0xIiB4MT0iMjAyLjYzIiB5MT0iMjM5LjAzIiB4Mj0iMjkyLjAxIiB5Mj0iMjM5LjAzIi8+PGxpbmUgY2xhc3M9ImNscy0xIiB4MT0iMjE5LjUiIHkxPSIyMzAuNjEiIHgyPSIyMTkuNzkiIHkyPSIyOTMuMDkiLz48bGluZSBjbGFzcz0iY2xzLTEiIHgxPSIyMzcuNzYiIHkxPSIyMzAuNTMiIHgyPSIyMzguMDUiIHkyPSIyOTMiLz48bGluZSBjbGFzcz0iY2xzLTEiIHgxPSIyNTYuMDIiIHkxPSIyMzAuNDUiIHgyPSIyNTYuMzEiIHkyPSIyOTIuOTIiLz48bGluZSBjbGFzcz0iY2xzLTEiIHgxPSIyNzQuMjgiIHkxPSIyMzAuMzYiIHgyPSIyNzQuNTciIHkyPSIyOTIuODQiLz48Zz48cmVjdCBjbGFzcz0iY2xzLTUiIHg9IjIwNi4xNyIgeT0iMjMyLjc5IiB3aWR0aD0iOC40NyIgaGVpZ2h0PSI0Ii8+PHJlY3QgY2xhc3M9ImNscy01IiB4PSIyMjQuMjMiIHk9IjIzMi43OSIgd2lkdGg9IjguNDciIGhlaWdodD0iNCIvPjxyZWN0IGNsYXNzPSJjbHMtNSIgeD0iMjQyLjY5IiB5PSIyMzIuNzkiIHdpZHRoPSI4LjQ3IiBoZWlnaHQ9IjQiLz48cmVjdCBjbGFzcz0iY2xzLTUiIHg9IjI2MC42MiIgeT0iMjMyLjc5IiB3aWR0aD0iOC40NyIgaGVpZ2h0PSI0Ii8+PHJlY3QgY2xhc3M9ImNscy01IiB4PSIyNzguODMiIHk9IjIzMi43OSIgd2lkdGg9IjguNDciIGhlaWdodD0iNCIvPjwvZz48Zz48cmVjdCBjbGFzcz0iY2xzLTQiIHg9IjIwNi4xNyIgeT0iMjQ0LjA4IiB3aWR0aD0iOC40NyIgaGVpZ2h0PSI0Ii8+PHJlY3QgY2xhc3M9ImNscy00IiB4PSIyMjQuMjMiIHk9IjI0NC4wOCIgd2lkdGg9IjguNDciIGhlaWdodD0iNCIvPjxyZWN0IGNsYXNzPSJjbHMtNCIgeD0iMjQyLjY5IiB5PSIyNDQuMDgiIHdpZHRoPSI4LjQ3IiBoZWlnaHQ9IjQiLz48cmVjdCBjbGFzcz0iY2xzLTQiIHg9IjI2MC42MiIgeT0iMjQ0LjA4IiB3aWR0aD0iOC40NyIgaGVpZ2h0PSI0Ii8+PHJlY3QgY2xhc3M9ImNscy00IiB4PSIyNzguODMiIHk9IjI0NC4wOCIgd2lkdGg9IjguNDciIGhlaWdodD0iNCIvPjwvZz48Zz48cmVjdCBjbGFzcz0iY2xzLTQiIHg9IjIwNi4xNyIgeT0iMjUyLjU1IiB3aWR0aD0iOC40NyIgaGVpZ2h0PSI0Ii8+PHJlY3QgY2xhc3M9ImNscy00IiB4PSIyMjQuMjMiIHk9IjI1Mi41NSIgd2lkdGg9IjguNDciIGhlaWdodD0iNCIvPjxyZWN0IGNsYXNzPSJjbHMtNCIgeD0iMjQyLjY5IiB5PSIyNTIuNTUiIHdpZHRoPSI4LjQ3IiBoZWlnaHQ9IjQiLz48cmVjdCBjbGFzcz0iY2xzLTQiIHg9IjI2MC42MiIgeT0iMjUyLjU1IiB3aWR0aD0iOC40NyIgaGVpZ2h0PSI0Ii8+PHJlY3QgY2xhc3M9ImNscy00IiB4PSIyNzguODMiIHk9IjI1Mi41NSIgd2lkdGg9IjguNDciIGhlaWdodD0iNCIvPjwvZz48Zz48cmVjdCBjbGFzcz0iY2xzLTQiIHg9IjIwNi4xNyIgeT0iMjYxLjAyIiB3aWR0aD0iOC40NyIgaGVpZ2h0PSI0Ii8+PHJlY3QgY2xhc3M9ImNscy00IiB4PSIyMjQuMjMiIHk9IjI2MS4wMiIgd2lkdGg9IjguNDciIGhlaWdodD0iNCIvPjxyZWN0IGNsYXNzPSJjbHMtNCIgeD0iMjQyLjY5IiB5PSIyNjEuMDIiIHdpZHRoPSI4LjQ3IiBoZWlnaHQ9IjQiLz48cmVjdCBjbGFzcz0iY2xzLTQiIHg9IjI2MC42MiIgeT0iMjYxLjAyIiB3aWR0aD0iOC40NyIgaGVpZ2h0PSI0Ii8+PHJlY3QgY2xhc3M9ImNscy00IiB4PSIyNzguODMiIHk9IjI2MS4wMiIgd2lkdGg9IjguNDciIGhlaWdodD0iNCIvPjwvZz48Zz48cmVjdCBjbGFzcz0iY2xzLTQiIHg9IjIwNi4xNyIgeT0iMjY5LjQ5IiB3aWR0aD0iOC40NyIgaGVpZ2h0PSI0Ii8+PHJlY3QgY2xhc3M9ImNscy00IiB4PSIyMjQuMjMiIHk9IjI2OS40OSIgd2lkdGg9IjguNDciIGhlaWdodD0iNCIvPjxyZWN0IGNsYXNzPSJjbHMtNCIgeD0iMjQyLjY5IiB5PSIyNjkuNDkiIHdpZHRoPSI4LjQ3IiBoZWlnaHQ9IjQiLz48cmVjdCBjbGFzcz0iY2xzLTQiIHg9IjI2MC42MiIgeT0iMjY5LjQ5IiB3aWR0aD0iOC40NyIgaGVpZ2h0PSI0Ii8+PHJlY3QgY2xhc3M9ImNscy00IiB4PSIyNzguODMiIHk9IjI2OS40OSIgd2lkdGg9IjguNDciIGhlaWdodD0iNCIvPjwvZz48Zz48cmVjdCBjbGFzcz0iY2xzLTQiIHg9IjIwNi4xNyIgeT0iMjc3Ljk2IiB3aWR0aD0iOC40NyIgaGVpZ2h0PSI0Ii8+PHJlY3QgY2xhc3M9ImNscy00IiB4PSIyMjQuMjMiIHk9IjI3Ny45NiIgd2lkdGg9IjguNDciIGhlaWdodD0iNCIvPjxyZWN0IGNsYXNzPSJjbHMtNCIgeD0iMjQyLjY5IiB5PSIyNzcuOTYiIHdpZHRoPSI4LjQ3IiBoZWlnaHQ9IjQiLz48cmVjdCBjbGFzcz0iY2xzLTQiIHg9IjI2MC42MiIgeT0iMjc3Ljk2IiB3aWR0aD0iOC40NyIgaGVpZ2h0PSI0Ii8+PHJlY3QgY2xhc3M9ImNscy00IiB4PSIyNzguODMiIHk9IjI3Ny45NiIgd2lkdGg9IjguNDciIGhlaWdodD0iNCIvPjwvZz48Zz48cmVjdCBjbGFzcz0iY2xzLTQiIHg9IjIwNi4xNyIgeT0iMjg2LjQzIiB3aWR0aD0iOC40NyIgaGVpZ2h0PSI0Ii8+PHJlY3QgY2xhc3M9ImNscy00IiB4PSIyMjQuMjMiIHk9IjI4Ni40MyIgd2lkdGg9IjguNDciIGhlaWdodD0iNCIvPjxyZWN0IGNsYXNzPSJjbHMtNCIgeD0iMjQyLjY5IiB5PSIyODYuNDMiIHdpZHRoPSI4LjQ3IiBoZWlnaHQ9IjQiLz48cmVjdCBjbGFzcz0iY2xzLTQiIHg9IjI2MC42MiIgeT0iMjg2LjQzIiB3aWR0aD0iOC40NyIgaGVpZ2h0PSI0Ii8+PHJlY3QgY2xhc3M9ImNscy00IiB4PSIyNzguODMiIHk9IjI4Ni40MyIgd2lkdGg9IjguNDciIGhlaWdodD0iNCIvPjwvZz48L3N2Zz4=";
@@ -85728,8 +85765,10 @@ const Table = ({
   isLoading,
   error: error2,
   tableSettings,
-  tableName
+  tableName,
+  className = ""
 }) => {
+  var _a2, _b2, _c2, _d;
   const columnHelper = createColumnHelper();
   const columns = [];
   const tableData2 = (data == null ? void 0 : data.length) ? data : [];
@@ -85753,7 +85792,25 @@ const Table = ({
   };
   const [sorting, setSorting] = useState([]);
   const [rowSelection, setRowSelection] = useState({});
+  const [rowSize, setRowSize] = useState({
+    value: "25",
+    label: "Show 25"
+  });
+  const rowSizeList = [{
+    label: "Show 25",
+    value: "25"
+  }, {
+    label: "Show 50",
+    value: "50"
+  }, {
+    label: "Show 75",
+    value: "75"
+  }, {
+    label: "Show 100",
+    value: "100"
+  }];
   const [globalFilter, setGlobalFilter] = useState("");
+  let fetchData;
   if (data) {
     for (const key in data[0]) {
       const colName = key;
@@ -85763,6 +85820,13 @@ const Table = ({
       });
       columns.push(col);
     }
+    fetchData = async (options2) => {
+      await new Promise((r2) => setTimeout(r2, 500));
+      return {
+        rows: data.slice(options2.pageIndex * options2.pageSize, (options2.pageIndex + 1) * options2.pageSize),
+        pageCount: Math.ceil(data.length / options2.pageSize)
+      };
+    };
   }
   const fuzzyFilter = (row2, columnId, value, addMeta) => {
     const itemRank = rankItem(row2.getValue(columnId), value);
@@ -85771,15 +85835,36 @@ const Table = ({
     });
     return itemRank.passed;
   };
+  const [isHovered, setHovered] = useState("");
+  const [{
+    pageIndex,
+    pageSize
+  }, setPagination] = React__default.useState({
+    pageIndex: 0,
+    pageSize: 10
+  });
+  const fetchDataOptions = {
+    pageIndex,
+    pageSize
+  };
+  const dataQuery = useQuery(["data", fetchDataOptions], () => fetchData(fetchDataOptions), {
+    keepPreviousData: true
+  });
+  const pagination2 = React__default.useMemo(() => ({
+    pageIndex,
+    pageSize
+  }), [pageIndex, pageSize]);
   const table2 = useReactTable({
-    data: tableData2,
+    data: (_b2 = (_a2 = dataQuery.data) == null ? void 0 : _a2.rows) != null ? _b2 : tableData2,
     columns,
+    pageCount: (_d = (_c2 = dataQuery.data) == null ? void 0 : _c2.pageCount) != null ? _d : -1,
     filterFns: {
       fuzzy: fuzzyFilter
     },
     state: {
       sorting,
-      globalFilter
+      globalFilter,
+      pagination: pagination2
     },
     enableGlobalFilter: true,
     onRowSelectionChange: setRowSelection,
@@ -85789,11 +85874,15 @@ const Table = ({
     getFilteredRowModel: getFilteredRowModel(),
     getSortedRowModel: getSortedRowModel(),
     onGlobalFilterChange: setGlobalFilter,
+    onPaginationChange: setPagination,
+    manualPagination: true,
     debugTable: true
   });
-  const [isHovered, setHovered] = useState("");
+  useEffect(() => {
+    table2.setPageSize(Number(rowSize.value));
+  }, [rowSize, table2]);
   return /* @__PURE__ */ jsx("div", {
-    className: styles$u.container,
+    className: `${styles$u.container} ${className}`,
     children: /* @__PURE__ */ jsxs("div", {
       className: styles$u.previewTable,
       children: [/* @__PURE__ */ jsxs("div", {
@@ -85803,13 +85892,10 @@ const Table = ({
           variant: "h1",
           className: styles$u.previewText,
           children: tableName
-        }), (tableSettings == null ? void 0 : tableSettings.enableTableSearch) && /* @__PURE__ */ jsx("div", {
-          children: /* @__PURE__ */ jsx(DebouncedInput, {
-            value: globalFilter,
-            onChange: (value) => setGlobalFilter(String(value)),
-            className: styles$u.debounceInput,
-            placeholder: "Search"
-          })
+        }), (tableSettings == null ? void 0 : tableSettings.enableTableSearch) && /* @__PURE__ */ jsx(DebouncedInput, {
+          value: globalFilter,
+          onChange: (value) => setGlobalFilter(String(value)),
+          placeholder: "Search"
         })]
       }), /* @__PURE__ */ jsxs("div", {
         className: styles$u.tableData,
@@ -85822,58 +85908,60 @@ const Table = ({
               color: "blue"
             }
           })
-        }), !!(data == null ? void 0 : data.length) && !isLoading && /* @__PURE__ */ jsxs("table", {
-          className: styles$u.table,
-          children: [/* @__PURE__ */ jsx("thead", {
-            children: table2.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx("tr", {
-              className: styles$u.row,
-              children: headerGroup.headers.map((header2) => {
-                var _a2;
-                return /* @__PURE__ */ jsx("th", {
-                  className: styles$u.tableHeadCol,
-                  colSpan: header2.colSpan,
-                  children: (tableSettings == null ? void 0 : tableSettings.enableSorting) ? /* @__PURE__ */ jsx("div", {
-                    className: header2.column.getCanSort() ? styles$u.sortButton : "",
-                    onClick: header2.column.getToggleSortingHandler(),
-                    onMouseOver: () => setHovered(header2.id),
-                    onMouseOut: () => setHovered(""),
-                    children: header2.isPlaceholder ? null : /* @__PURE__ */ jsxs("div", {
-                      style: headerStyle,
-                      children: [flexRender(header2.column.columnDef.header, header2.getContext()), /* @__PURE__ */ jsx("div", {
-                        className: isHovered === header2.id ? styles$u.showSort : styles$u.noSort,
-                        children: (_a2 = {
-                          asc: " \u{1F53C}",
-                          desc: " \u{1F53D}"
-                        }[header2.column.getIsSorted()]) != null ? _a2 : null
-                      })]
-                    })
-                  }) : /* @__PURE__ */ jsx(Fragment, {
-                    children: header2.isPlaceholder ? null : /* @__PURE__ */ jsx("div", {
-                      style: headerStyle,
-                      children: flexRender(header2.column.columnDef.header, header2.getContext())
+        }), !!(data == null ? void 0 : data.length) && !isLoading && /* @__PURE__ */ jsx(Fragment, {
+          children: /* @__PURE__ */ jsxs("table", {
+            className: styles$u.table,
+            children: [/* @__PURE__ */ jsx("thead", {
+              children: table2.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx("tr", {
+                className: styles$u.row,
+                children: headerGroup.headers.map((header2) => {
+                  var _a3;
+                  return /* @__PURE__ */ jsx("th", {
+                    className: styles$u.tableHeadCol,
+                    colSpan: header2.colSpan,
+                    children: (tableSettings == null ? void 0 : tableSettings.enableSorting) ? /* @__PURE__ */ jsx("div", {
+                      className: header2.column.getCanSort() ? styles$u.sortButton : "",
+                      onClick: header2.column.getToggleSortingHandler(),
+                      onMouseOver: () => setHovered(header2.id),
+                      onMouseOut: () => setHovered(""),
+                      children: header2.isPlaceholder ? null : /* @__PURE__ */ jsxs("div", {
+                        style: headerStyle,
+                        children: [flexRender(header2.column.columnDef.header, header2.getContext()), /* @__PURE__ */ jsx("div", {
+                          className: isHovered === header2.id ? styles$u.showSort : styles$u.noSort,
+                          children: (_a3 = {
+                            asc: " \u{1F53C}",
+                            desc: " \u{1F53D}"
+                          }[header2.column.getIsSorted()]) != null ? _a3 : null
+                        })]
+                      })
+                    }) : /* @__PURE__ */ jsx(Fragment, {
+                      children: header2.isPlaceholder ? null : /* @__PURE__ */ jsx("div", {
+                        style: headerStyle,
+                        children: flexRender(header2.column.columnDef.header, header2.getContext())
+                      })
                     })
-                  })
-                }, header2.id);
-              })
-            }, headerGroup.id))
-          }), /* @__PURE__ */ jsx("tbody", {
-            children: table2.getRowModel().rows.map((row2) => /* @__PURE__ */ jsx("tr", {
-              className: `${styles$u.tableRow} ${(tableSettings == null ? void 0 : tableSettings.showRowHover) ? styles$u.rowHover : ""} ${(tableSettings == null ? void 0 : tableSettings.enableStripedRows) && row2.id % 2 !== 0 ? styles$u.stripedRow : ""}`,
-              children: row2.getVisibleCells().map((cell) => /* @__PURE__ */ jsxs("td", {
-                className: `${styles$u.tableRowCol} ${!(tableSettings == null ? void 0 : tableSettings.hideVerticalDivider) ? styles$u.rightBorder : ""}`,
-                children: [!!tableSettings && /* @__PURE__ */ jsx("div", {
-                  style: divStyle,
-                  children: flexRender(cell.column.columnDef.cell, cell.getContext())
-                }), !tableSettings && /* @__PURE__ */ jsx("div", {
-                  style: {
-                    textAlign: "center",
-                    width: "100%"
-                  },
-                  children: flexRender(cell.column.columnDef.cell, cell.getContext())
-                })]
-              }, cell.id))
-            }, row2.id))
-          })]
+                  }, header2.id);
+                })
+              }, headerGroup.id))
+            }), /* @__PURE__ */ jsx("tbody", {
+              children: table2.getRowModel().rows.map((row2) => /* @__PURE__ */ jsx("tr", {
+                className: `${styles$u.tableRow} ${(tableSettings == null ? void 0 : tableSettings.showRowHover) ? styles$u.rowHover : ""} ${(tableSettings == null ? void 0 : tableSettings.enableStripedRows) && Number(row2.id) % 2 !== 0 ? styles$u.stripedRow : ""}`,
+                children: row2.getVisibleCells().map((cell) => /* @__PURE__ */ jsxs("td", {
+                  className: `${styles$u.tableRowCol} ${!(tableSettings == null ? void 0 : tableSettings.hideVerticalDivider) ? styles$u.rightBorder : ""}`,
+                  children: [!!tableSettings && /* @__PURE__ */ jsx("div", {
+                    style: divStyle,
+                    children: flexRender(cell.column.columnDef.cell, cell.getContext())
+                  }), !tableSettings && /* @__PURE__ */ jsx("div", {
+                    style: {
+                      textAlign: "center",
+                      width: "100%"
+                    },
+                    children: flexRender(cell.column.columnDef.cell, cell.getContext())
+                  })]
+                }, cell.id))
+              }, row2.id))
+            })]
+          })
         }), !(data == null ? void 0 : data.length) && !isLoading && !error2.length && /* @__PURE__ */ jsxs("div", {
           className: styles$u.noData,
           children: [/* @__PURE__ */ jsx("img", {
@@ -85901,6 +85989,37 @@ const Table = ({
             children: error2
           })
         })]
+      }), data && /* @__PURE__ */ jsxs("div", {
+        className: styles$u.pagination,
+        children: [/* @__PURE__ */ jsx("div", {
+          className: styles$u.rowStyle,
+          children: /* @__PURE__ */ jsx(FloatingDropDown, {
+            onChange: setRowSize,
+            selectedOption: rowSize,
+            options: rowSizeList,
+            labelVariant: "static",
+            dropdownAbove: true,
+            buttonClass: styles$u.rowsDropdown
+          })
+        }), /* @__PURE__ */ jsxs("span", {
+          className: styles$u.pageStyle,
+          children: [table2.getState().pagination.pageSize * table2.getState().pagination.pageIndex + 1, "-", data.length <= table2.getState().pagination.pageSize * (table2.getState().pagination.pageIndex + 1) ? data.length : table2.getState().pagination.pageSize * (table2.getState().pagination.pageIndex + 1), " ", "of ", data.length]
+        }), /* @__PURE__ */ jsxs("div", {
+          className: styles$u.buttonContainer,
+          children: [/* @__PURE__ */ jsx(Button, {
+            variant: "custom",
+            className: styles$u.button,
+            onClick: () => table2.previousPage(),
+            disabled: !table2.getCanPreviousPage(),
+            children: "Prev"
+          }), /* @__PURE__ */ jsx(Button, {
+            variant: "custom",
+            className: styles$u.button,
+            onClick: () => table2.nextPage(),
+            disabled: !table2.getCanNextPage(),
+            children: "Next"
+          })]
+        })]
       })]
     })
   });
@@ -86849,13 +86968,13 @@ var styles$o = {
 };
 const container$7 = "_container_1q2ss_1";
 const header$3 = "_header_1q2ss_5";
-const wrapper$2 = "_wrapper_1q2ss_9";
+const wrapper$1 = "_wrapper_1q2ss_9";
 const column = "_column_1q2ss_17";
 const columnText$1 = "_columnText_1q2ss_21";
 var styles$n = {
   container: container$7,
   header: header$3,
-  wrapper: wrapper$2,
+  wrapper: wrapper$1,
   "col-container": "_col-container_1q2ss_13",
   column,
   columnText: columnText$1
@@ -87668,47 +87787,6 @@ const ChartConfigure = ({
                   value: customSettings.subHeaderFontSize
                 })]
               })]
-            }), /* @__PURE__ */ jsxs("div", {
-              className: styles$m.seriesWrapper,
-              children: [/* @__PURE__ */ jsx(Text, {
-                variant: "h1",
-                styleClass: "primary",
-                children: "Date formatting"
-              }), /* @__PURE__ */ jsx("div", {
-                className: styles$m.valueLabelWrapper,
-                children: /* @__PURE__ */ jsx(Select, {
-                  value: customSettings.dateFormatter,
-                  options: [{
-                    label: "None",
-                    value: "none"
-                  }, {
-                    label: "dd-mm-yyyy",
-                    value: "dd-mm-yyyy"
-                  }, {
-                    label: "mm-dd-yyyy",
-                    value: "mm-dd-yyyy"
-                  }, {
-                    label: "yyyy-mm-dd",
-                    value: "yyyy-mm-dd"
-                  }, {
-                    label: "dd/mm/yyyy",
-                    value: "dd/mm/yyyy"
-                  }, {
-                    label: "mm/dd/yyyy",
-                    value: "mm/dd/yyyy"
-                  }, {
-                    label: "yyyy/mm/dd",
-                    value: "yyyy/mm/dd"
-                  }, {
-                    label: "hh:mm:ss",
-                    value: "hh:mm:ss"
-                  }],
-                  onChange: (value) => setCustomSettings((s2) => ({
-                    ...s2,
-                    dateFormatter: value
-                  }))
-                })
-              })]
             }), /* @__PURE__ */ jsxs("div", {
               className: styles$m.seriesWrapper,
               children: [/* @__PURE__ */ jsx(Text, {
@@ -88274,40 +88352,33 @@ const ChartTab = ({
     })]
   });
 };
-const container$5 = "_container_yjeiv_1";
-const wrapper$1 = "_wrapper_yjeiv_5";
-const text = "_text_yjeiv_9";
-const table$2 = "_table_yjeiv_12";
+const container$5 = "_container_epyr2_1";
 var styles$i = {
-  container: container$5,
-  wrapper: wrapper$1,
-  text,
-  table: table$2
+  container: container$5
 };
 const InputTables = ({
   previewTableDataList
 }) => {
   return /* @__PURE__ */ jsx("div", {
     className: styles$i.container,
-    children: /* @__PURE__ */ jsx("div", {
-      className: styles$i.wrapper,
-      children: previewTableDataList == null ? void 0 : previewTableDataList.map((table2) => /* @__PURE__ */ jsxs("div", {
-        className: styles$i.text,
-        children: [/* @__PURE__ */ jsx(Text, {
-          variant: "h1",
-          styleClass: "primary",
-          className: "",
-          children: table2.name
-        }), /* @__PURE__ */ jsx("div", {
-          className: styles$i.table,
-          children: /* @__PURE__ */ jsx(Table, {
-            data: table2.data,
-            error: table2.isError,
-            isLoading: false
-          })
-        })]
-      }, table2.name))
-    })
+    children: previewTableDataList == null ? void 0 : previewTableDataList.map((table2) => /* @__PURE__ */ jsx(Table, {
+      data: table2.data,
+      error: table2.isError,
+      isLoading: false,
+      tableName: table2.name,
+      tableSettings: {
+        showTableTitle: true,
+        hideVerticalDivider: false,
+        showRowHover: false,
+        enableStripedRows: false,
+        enableTableSearch: false,
+        contentAlignment: "center",
+        enableFilter: false,
+        enableSorting: false,
+        lineGap: "",
+        showTableDesc: false
+      }
+    }, table2.name))
   });
 };
 const container$4 = "_container_38zl3_1";
@@ -107939,8 +108010,8 @@ var ace$3 = { exports: {} };
         } };
       if (config.get("loadWorkerFromBlob")) {
         var blob = $workerBlob(workerUrl);
-        var URL = window.URL || window.webkitURL;
-        var blobURL = URL.createObjectURL(blob);
+        var URL2 = window.URL || window.webkitURL;
+        var blobURL = URL2.createObjectURL(blob);
         return new Worker(blobURL);
       }
       return new Worker(workerUrl);
@@ -120087,7 +120158,7 @@ var GridItem = /* @__PURE__ */ function(_React$Component) {
   }, {
     key: "mixinResizable",
     value: function mixinResizable(child, position2, isResizable) {
-      var _this$props6 = this.props, cols = _this$props6.cols, x2 = _this$props6.x, minW2 = _this$props6.minW, minH2 = _this$props6.minH, maxW2 = _this$props6.maxW, maxH2 = _this$props6.maxH, transformScale = _this$props6.transformScale, resizeHandles = _this$props6.resizeHandles, resizeHandle = _this$props6.resizeHandle;
+      var _this$props6 = this.props, cols = _this$props6.cols, x2 = _this$props6.x, minW2 = _this$props6.minW, minH2 = _this$props6.minH, maxW2 = _this$props6.maxW, maxH2 = _this$props6.maxH, transformScale = _this$props6.transformScale, resizeHandles = _this$props6.resizeHandles, resizeHandle2 = _this$props6.resizeHandle;
       var positionParams = this.getPositionParams();
       var maxWidth = (0, _calculateUtils$1.calcGridItemPosition)(positionParams, 0, 0, cols - x2, 0).width;
       var mins = (0, _calculateUtils$1.calcGridItemPosition)(positionParams, 0, 0, minW2, minH2);
@@ -120110,7 +120181,7 @@ var GridItem = /* @__PURE__ */ function(_React$Component) {
           onResize: this.onResize,
           transformScale,
           resizeHandles,
-          handle: resizeHandle
+          handle: resizeHandle2
         },
         child
       );
@@ -120827,7 +120898,7 @@ var ReactGridLayout = /* @__PURE__ */ function(_React$Component) {
       var l2 = (0, _utils$2.getLayoutItem)(this.state.layout, String(child.key));
       if (!l2)
         return null;
-      var _this$props8 = this.props, width = _this$props8.width, cols = _this$props8.cols, margin = _this$props8.margin, containerPadding = _this$props8.containerPadding, rowHeight = _this$props8.rowHeight, maxRows = _this$props8.maxRows, isDraggable = _this$props8.isDraggable, isResizable = _this$props8.isResizable, isBounded = _this$props8.isBounded, useCSSTransforms = _this$props8.useCSSTransforms, transformScale = _this$props8.transformScale, draggableCancel = _this$props8.draggableCancel, draggableHandle = _this$props8.draggableHandle, resizeHandles = _this$props8.resizeHandles, resizeHandle = _this$props8.resizeHandle;
+      var _this$props8 = this.props, width = _this$props8.width, cols = _this$props8.cols, margin = _this$props8.margin, containerPadding = _this$props8.containerPadding, rowHeight = _this$props8.rowHeight, maxRows = _this$props8.maxRows, isDraggable = _this$props8.isDraggable, isResizable = _this$props8.isResizable, isBounded = _this$props8.isBounded, useCSSTransforms = _this$props8.useCSSTransforms, transformScale = _this$props8.transformScale, draggableCancel = _this$props8.draggableCancel, draggableHandle = _this$props8.draggableHandle, resizeHandles = _this$props8.resizeHandles, resizeHandle2 = _this$props8.resizeHandle;
       var _this$state3 = this.state, mounted = _this$state3.mounted, droppingPosition = _this$state3.droppingPosition;
       var draggable = typeof l2.isDraggable === "boolean" ? l2.isDraggable : !l2.static && isDraggable;
       var resizable2 = typeof l2.isResizable === "boolean" ? l2.isResizable : !l2.static && isResizable;
@@ -120866,7 +120937,7 @@ var ReactGridLayout = /* @__PURE__ */ function(_React$Component) {
         static: l2.static,
         droppingPosition: isDroppingItem ? droppingPosition : void 0,
         resizeHandles: resizeHandlesOptions,
-        resizeHandle
+        resizeHandle: resizeHandle2
       }, child);
     }
   }, {
@@ -121663,46 +121734,51 @@ function WidthProvideRGL(ComposedComponent) {
   module.exports.WidthProvider = WidthProvider.default;
 })(reactGridLayout);
 var styles$c = "";
+const resizeHandle = "_resizeHandle_170un_17";
+const fullscreen$2 = "_fullscreen_170un_57";
 var styles$b = {
-  "MetricList-container": "_MetricList-container_15a2v_1",
-  "MetricList-wrapper": "_MetricList-wrapper_15a2v_9",
-  "MetricList-wrapper-move": "_MetricList-wrapper-move_15a2v_17",
-  "noMetric-container": "_noMetric-container_15a2v_25",
-  "noMetric-wrapper": "_noMetric-wrapper_15a2v_33",
-  "alt-container": "_alt-container_15a2v_41"
+  "MetricList-container": "_MetricList-container_170un_1",
+  "MetricList-wrapper": "_MetricList-wrapper_170un_9",
+  resizeHandle,
+  "MetricList-wrapper-move": "_MetricList-wrapper-move_170un_25",
+  "noMetric-container": "_noMetric-container_170un_33",
+  "noMetric-wrapper": "_noMetric-wrapper_170un_41",
+  "alt-container": "_alt-container_170un_49",
+  fullscreen: fullscreen$2
 };
-const cardContainer = "_cardContainer_hxh6o_1";
-const listHeader = "_listHeader_hxh6o_9";
-const metricName = "_metricName_hxh6o_17";
-const metricTitle = "_metricTitle_hxh6o_25";
-const metricDescription = "_metricDescription_hxh6o_33";
-const popup = "_popup_hxh6o_41";
-const metricFilter$1 = "_metricFilter_hxh6o_49";
-const popupIcon = "_popupIcon_hxh6o_57";
-const popupMenu = "_popupMenu_hxh6o_65";
-const popupItem = "_popupItem_hxh6o_73";
-const popupItemIcon = "_popupItemIcon_hxh6o_81";
-const csvBtn = "_csvBtn_hxh6o_89";
-const deleteBtn = "_deleteBtn_hxh6o_97";
-const metricData = "_metricData_hxh6o_105";
-const singleValueData = "_singleValueData_hxh6o_113";
-const singleValue = "_singleValue_hxh6o_113";
-const noData = "_noData_hxh6o_129";
-const noDataContent = "_noDataContent_hxh6o_137";
-const noDataText = "_noDataText_hxh6o_145";
-const loading$1 = "_loading_hxh6o_153";
-const features = "_features_hxh6o_161";
-const fullscreen$1 = "_fullscreen_hxh6o_169";
-const deleteModal = "_deleteModal_hxh6o_177";
-const cancelBtn = "_cancelBtn_hxh6o_185";
-const warningIcon = "_warningIcon_hxh6o_193";
-const downloadCsv = "_downloadCsv_hxh6o_201";
-const downloadCsvWrapper = "_downloadCsvWrapper_hxh6o_209";
-const downloadCsvHeader = "_downloadCsvHeader_hxh6o_215";
-const downloadCsvFooter = "_downloadCsvFooter_hxh6o_221";
-const downloadCsvCancelBtn = "_downloadCsvCancelBtn_hxh6o_229";
-const downloadCsvNote = "_downloadCsvNote_hxh6o_237";
-const downloadCsvNoteText = "_downloadCsvNoteText_hxh6o_245";
+const cardContainer = "_cardContainer_2m9mz_1";
+const listHeader = "_listHeader_2m9mz_9";
+const metricName = "_metricName_2m9mz_17";
+const metricTitle = "_metricTitle_2m9mz_25";
+const metricDescription = "_metricDescription_2m9mz_33";
+const popup = "_popup_2m9mz_41";
+const metricFilter$1 = "_metricFilter_2m9mz_49";
+const popupIcon = "_popupIcon_2m9mz_57";
+const popupMenu = "_popupMenu_2m9mz_65";
+const popupItem = "_popupItem_2m9mz_73";
+const popupItemIcon = "_popupItemIcon_2m9mz_81";
+const csvBtn = "_csvBtn_2m9mz_89";
+const deleteBtn = "_deleteBtn_2m9mz_97";
+const metricData = "_metricData_2m9mz_105";
+const metricTable = "_metricTable_2m9mz_113";
+const singleValueData = "_singleValueData_2m9mz_121";
+const singleValue = "_singleValue_2m9mz_121";
+const noData = "_noData_2m9mz_137";
+const noDataContent = "_noDataContent_2m9mz_145";
+const noDataText = "_noDataText_2m9mz_153";
+const loading$1 = "_loading_2m9mz_161";
+const features = "_features_2m9mz_169";
+const fullscreen$1 = "_fullscreen_2m9mz_177";
+const deleteModal = "_deleteModal_2m9mz_185";
+const cancelBtn = "_cancelBtn_2m9mz_193";
+const warningIcon = "_warningIcon_2m9mz_201";
+const downloadCsv = "_downloadCsv_2m9mz_209";
+const downloadCsvWrapper = "_downloadCsvWrapper_2m9mz_217";
+const downloadCsvHeader = "_downloadCsvHeader_2m9mz_225";
+const downloadCsvFooter = "_downloadCsvFooter_2m9mz_233";
+const downloadCsvCancelBtn = "_downloadCsvCancelBtn_2m9mz_241";
+const downloadCsvNote = "_downloadCsvNote_2m9mz_249";
+const downloadCsvNoteText = "_downloadCsvNoteText_2m9mz_257";
 var styles$a = {
   cardContainer,
   listHeader,
@@ -121718,6 +121794,7 @@ var styles$a = {
   csvBtn,
   deleteBtn,
   metricData,
+  metricTable,
   singleValueData,
   singleValue,
   noData,
@@ -121735,7 +121812,9 @@ var styles$a = {
   downloadCsvFooter,
   downloadCsvCancelBtn,
   downloadCsvNote,
-  downloadCsvNoteText
+  downloadCsvNoteText,
+  "tab-border-bottom": "_tab-border-bottom_2m9mz_265",
+  "download-info-text": "_download-info-text_2m9mz_273"
 };
 var NoData = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMDAgMzAwIj48ZGVmcz48c3R5bGU+LmNscy0xe3N0cm9rZTojMTgyYzYwO30uY2xzLTEsLmNscy0ye2ZpbGw6bm9uZTtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7fS5jbHMtM3tmaWxsOiM1ODY1ZjY7b3BhY2l0eTouMTt9LmNscy00e2ZpbGw6I2YyZjNmNDt9LmNscy01e2ZpbGw6I2MxYzdjOTt9LmNscy02e2ZpbGw6I2RhZGVkZjt9LmNscy03e2ZpbGw6IzE4MmM2MDt9LmNscy0ye3N0cm9rZTojNTg2NWY2O3N0cm9rZS13aWR0aDo0cHg7fTwvc3R5bGU+PC9kZWZzPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0ibTIxMC41LDIwMC44M2MuNC0uNjYuNjgtMS40LjgyLTIuMiwxLjU4LTguODcsMy4xNS0xNy43NSw0LjczLTI2LjYyLDIuMDMtMTEuNDQsNC4wNi0yMi44OCw2LjA5LTM0LjMyLjcyLTQuMDgsMS43Ny04LjI1LDIuMTYtMTIuMzguNDMtNC41Ni0yLjA5LTkuNjgtNi44Ni0xMC42Ni0uMDEsMC0uMDMsMC0uMDQsMC0yLjQtLjQ5LTUuMDItLjIyLTcuNDUtLjIyaC00NC4yMmMtLjUyLDAtMi4zMy0uMzEtMi43NywwbC0yNC4yOCwxNy4yMmgtNjEuNjFjLTMuOTcsMC02Ljk5LDMuNTYtNi4zNCw3LjQ3bDkuNzUsNTkuNDJjLjUxLDMuMTEsMy4yLDUuMzksNi4zNCw1LjM5aDExNy44NiIvPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0ibTIwNywxMTQuNDN2LTguNTRjMC0zLjU1LTIuODgtNi40My02LjQzLTYuNDNoLTE3LjE5Ii8+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJtMTAzLjQ3LDk5LjQ2aC0xNS4xMmMtMy41NSwwLTYuNDMsMi44OC02LjQzLDYuNDN2MjUuNDgiLz48Zz48bGluZSBjbGFzcz0iY2xzLTIiIHgxPSIxMTQuMTIiIHkxPSI5NC4wOCIgeDI9IjE0NC44NCIgeTI9Ijk0LjA4Ii8+PGc+PHJlY3QgY2xhc3M9ImNscy02IiB4PSIxMTIuNjEiIHk9IjEwMi40MyIgd2lkdGg9IjE4Ljk3IiBoZWlnaHQ9IjMuMiIvPjxyZWN0IGNsYXNzPSJjbHMtNCIgeD0iMTM3LjYxIiB5PSIxMDIuNDMiIHdpZHRoPSI4LjkiIGhlaWdodD0iMy4yIi8+PC9nPjwvZz48cGF0aCBjbGFzcz0iY2xzLTMiIGQ9Im0xNjQuOTgsODEuNDZsLS4wOCwxNi4yOHMuMTUsMy4yNC4zLDMuNjIuNiwxLjUxLDEuMTMsMS44OCwxLjAyLjc5LDEuNzcsMS4wNi45NC40OSwyLjExLjQ5LDE4LjE3LjA0LDE4LjE3LjA0bC0yMy40MS0yMy4zN1oiLz48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Im0xODguNTEsMTA0LjkxdjkuNTIiLz48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Im0xMDMuNTMsMTMxLjM3di00NC45NWMwLTIuODQsMi4zLTUuMTUsNS4xNS01LjE1LDE4Ljc3LDAsMzcuNTQsMCw1Ni4zMSwwIi8+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJtMTY1LjAxLDgxLjI3djE4LjM1YzAsMi44NCwyLjMxLDUuMTUsNS4xNSw1LjE1aDE4LjM1cy0yMy41LTIzLjYyLTIzLjUtMjMuNVoiLz48Y2lyY2xlIGNsYXNzPSJjbHMtMSIgY3g9IjE2OC4yMSIgY3k9IjE2My4yNyIgcj0iMjQuOTYiLz48Y2lyY2xlIGNsYXNzPSJjbHMtMSIgY3g9IjE2OC4yMSIgY3k9IjE2My4yNyIgcj0iMzEuMjUiLz48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Im0xOTIuNTcsMTgzLjMzYzkuNjIsOS42MiwzMC4yOCwzMC4yOCwzMC4yOCwzMC4yOCwxLjE3LDEuMTcsMS4xNywzLjA3LDAsNC4yNHMtMy4wNywxLjE3LTQuMjQsMGMwLDAtMjAuNTgtMjAuNTgtMzAuMjItMzAuMjIiLz48Zz48cGF0aCBjbGFzcz0iY2xzLTUiIGQ9Im0xNjguNjYsMTcwLjkzYy0uNzQsMC0xLjM0LjI0LTEuODEuNzItLjQ3LjQ4LS43MSwxLjA5LS43MSwxLjgzcy4yNCwxLjMyLjcxLDEuODFjLjQ3LjQ5LDEuMDcuNzQsMS44MS43NHMxLjM0LS4yNSwxLjgxLS43NGMuNDctLjQ5LjcxLTEuMS43MS0xLjgxcy0uMjQtMS4zNC0uNzEtMS44M2MtLjQ3LS40OC0xLjA4LS43Mi0xLjgxLS43MloiLz48cGF0aCBjbGFzcz0iY2xzLTUiIGQ9Im0xNzQuNjksMTUzLjc3Yy0uNjItMS4wMi0xLjQ5LTEuODItMi42LTIuNC0xLjEyLS41Ny0yLjQtLjg2LTMuODUtLjg2LTEuNjgsMC0zLjE3LjQtNC40NywxLjE5cy0yLjI5LDEuOTQtMi45OCwzLjQzbDIuNzYsMi4yOGMuNDYtMS4wNiwxLjA3LTEuODYsMS44NS0yLjQuNzctLjU0LDEuNjUtLjgxLDIuNjQtLjgxLjc2LDAsMS40MS4xNCwxLjk3LjQxLjU1LjI4Ljk4LjY3LDEuMjgsMS4xNy4zLjUxLjQ1LDEuMS40NSwxLjc5cy0uMTYsMS4yOS0uNDcsMS44MWMtLjMxLjUyLS43NS45Mi0xLjMxLDEuMjEtLjU2LjI5LTEuMjIuNDMtMS45OC40M2gtLjkzdjYuNjZoMy4yOGwuMjYtMy43M2MuNzEtLjI0LDEuMzctLjU1LDEuOTUtLjkzLjk5LS42NCwxLjc1LTEuNDUsMi4yOS0yLjQxLjU0LS45Ny44MS0yLjA3LjgxLTMuMzEsMC0xLjMzLS4zMS0yLjUxLS45My0zLjU0WiIvPjwvZz48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Im04NS41NSwyMDMuOTdjLjY4LDIuODksMy4yNiw0Ljk2LDYuMjYsNC45NmgxMTcuNzMiLz48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Im0yMTUuMzcsMjA2LjA0Yy40Ny0uNzEuOC0xLjUyLjk1LTIuNCwxLjU4LTguODcsMy4xNS0xNy43NSw0LjczLTI2LjYyLDIuMDMtMTEuNDQsNC4wNi0yMi44OCw2LjA5LTM0LjMyLjcyLTQuMDgsMS43Ny04LjI1LDIuMTYtMTIuMzguMzktNC4xNi0xLjY4LTguNzktNS42Ny0xMC4zMSIvPjxwYXRoIGNsYXNzPSJjbHMtNyIgZD0ibTIyMy41MSwxMjAuMDhzLjQ5LDEuNjIuNTMsMS43My4zMiwyLjQ0LjMyLDIuNDRsLS4wNCwxLjkxLTEuMzgsNy4xMy0zLjM5LDE5LjMxLTIuODksMTUuOTItMi45NiwxNi43Ni0yLjQ0LDEzLjE2LS45MiwyLjY1LDQuOTgsNS4xNS44NS0yLjE1LjgxLTQuMDYsMS40OC04LjMzLDIuODItMTUuNzEsMi4xNS0xMi4xMSwxLjk0LTExLjM2LDIuNzUtMTQuNzUuODgtNC42OS4yOC0yLjU4LjA3LTIuMTItLjYtMi43NS0xLjI0LTIuMzYtMS4wOS0xLjU5LTIuMDEtMS4zMS0uOTItLjI4WiIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtNyIgcG9pbnRzPSI4NS42OCAyMDMuOTMgMjA0LjU1IDIwMy44NCAyMDkuMzUgMjA4LjczIDE0OC40OCAyMDguODggOTAuOTUgMjA5LjAyIDg5LjUgMjA4LjY2IDg3Ljk4IDIwNy45MiA4Ni44MiAyMDYuNTggODYuMDEgMjA1LjAzIDg1LjY4IDIwMy45MyIvPjwvc3ZnPg==";
 const materialSymbolsArchiveOutline = (props) => /* @__PURE__ */ jsx("svg", {
@@ -122141,105 +122220,6 @@ const ChartPopup = ({
   });
 };
 var ChartPopup$1 = React__default.memo(ChartPopup);
-const getSqlStatement = ({
-  query,
-  clientName,
-  tenancyType,
-  values
-}) => {
-  const str = clientName ? tenancyType === DATABASE ? query.replace(new RegExp(DATABASE_NAME, "g"), clientName) : Number(clientName) ? query.replace(new RegExp(CLIENT_NAME_VAR_NUM, "g"), clientName) : query.replace(new RegExp(CLIENT_NAME_VAR, "g"), clientName) : query;
-  if (!values) {
-    return str;
-  }
-  const replacedStr = str.replace(/[^']+_variable/g, (match) => {
-    const value = values[match];
-    return `${value}`;
-  });
-  return replacedStr;
-};
-const useDownloadRawCsv = () => {
-  const [isShowRawCsvModal, setRawCsvModal] = useState(false);
-  const [isLoading, setLoading] = useState(false);
-  const [downloadCsvError, setError] = useState("");
-  const { mutate } = useRawCsvMutation();
-  const { handleSubmit, register: register2 } = useForm();
-  const onSubmitDownloadCsv = ({
-    companyId,
-    sqlQuery,
-    values,
-    clientName,
-    tenancyType,
-    metricName: metricName2,
-    workspaceId
-  }) => {
-    setLoading(true);
-    setError("");
-    const modifiedQuery = getSqlStatement({
-      query: sqlQuery,
-      clientName,
-      tenancyType,
-      values
-    });
-    mutate(
-      {
-        companyId,
-        recipientAddress: values.email,
-        sqlQuery: modifiedQuery,
-        metricName: metricName2,
-        workspaceId
-      },
-      {
-        onSuccess(data) {
-          var _a2, _b2;
-          const success2 = (_a2 = data.sendRawCsv) == null ? void 0 : _a2.status;
-          const error2 = (_b2 = data.sendRawCsv) == null ? void 0 : _b2.error;
-          if (success2) {
-            setError("");
-            setLoading(false);
-            setRawCsvModal(false);
-          } else if (error2) {
-            setError(error2.message);
-            setLoading(false);
-          } else {
-            setError(SOMETHING_WENT_WRONG);
-            setLoading(false);
-          }
-        }
-      }
-    );
-  };
-  return {
-    isShowRawCsvModal,
-    setRawCsvModal,
-    isLoading,
-    downloadCsvError,
-    onSubmitDownloadCsv,
-    handleSubmit,
-    register: register2
-  };
-};
-const required = { required: "Required" };
-const asEmail = {
-  ...required,
-  pattern: {
-    value: /^\S+@\S+$/i,
-    message: "Entered value does not match email format"
-  }
-};
-({
-  ...required,
-  minLength: {
-    value: 8,
-    message: "Min length is 8"
-  }
-});
-({
-  ...required,
-  minLength: {
-    value: 3,
-    message: "Min length is 3"
-  }
-});
 var styles$6 = {
   "dbc-container": "_dbc-container_1dw7c_1",
   "active-dimension": "_active-dimension_1dw7c_5"
@@ -122269,7 +122249,9 @@ const MetricCard = ({
   companyTenancyType,
   renderHeaderName,
   onArchive,
-  onEdit
+  onEdit,
+  onTableView,
+  onDownloadRawCsv
 }) => {
   var _a2;
   const chartRef = useRef(null);
@@ -122380,7 +122362,6 @@ const MetricCard = ({
   const [backGroundColor, setBackGroundColor] = useState({
     show: false
   });
-  const [isShowTablePreview, setTablePreview] = useState(false);
   const [groupedData, setGroupedData] = useState([]);
   const [drillDownSettings, setDrillDownSettings] = useState();
   const [drilledLevel, setDrilledLevel] = useState(0);
@@ -122522,17 +122503,8 @@ const MetricCard = ({
   const onDrillDown = () => {
     drilldown(columnName, chartParams, drillDownSettings, dataDb, setDrilledLevel, drilledLevel, setShowChartPopup, setGroupedData);
   };
-  const {
-    isShowRawCsvModal,
-    setRawCsvModal,
-    downloadCsvError,
-    handleSubmit,
-    isLoading,
-    onSubmitDownloadCsv,
-    register: register2
-  } = useDownloadRawCsv();
-  return /* @__PURE__ */ jsxs(Fragment, {
-    children: [/* @__PURE__ */ jsxs("div", {
+  return /* @__PURE__ */ jsx(Fragment, {
+    children: /* @__PURE__ */ jsxs("div", {
       className: styles$a.cardContainer,
       onContextMenu: (e2) => {
         e2.preventDefault();
@@ -122618,20 +122590,20 @@ const MetricCard = ({
               text: "Save As CSV",
               iconClass: styles$a.popupItemIcon
             }), !!dataDb.length && /* @__PURE__ */ jsxs(Fragment, {
-              children: [/* @__PURE__ */ jsxs(Button, {
+              children: [onTableView && /* @__PURE__ */ jsxs(Button, {
                 variant: "custom",
                 type: "button",
                 className: `${styles$a.popupItem} ${styles$a.csvBtn}`,
-                onClick: () => setTablePreview(true),
+                onClick: () => onTableView(metricItem, dataDb),
                 children: [/* @__PURE__ */ jsx(Icons, {
                   name: "table-tab-icon",
                   className: styles$a.popupItemIcon
                 }), "View As Table"]
-              }), /* @__PURE__ */ jsxs(Button, {
+              }), onDownloadRawCsv && /* @__PURE__ */ jsxs(Button, {
                 variant: "custom",
                 type: "button",
                 className: `${styles$a.popupItem} ${styles$a.csvBtn}`,
-                onClick: () => setRawCsvModal(true),
+                onClick: () => onDownloadRawCsv(metricItem),
                 children: [/* @__PURE__ */ jsx(Icons, {
                   name: "csv-icon",
                   className: styles$a.popupItemIcon
@@ -122656,11 +122628,8 @@ const MetricCard = ({
             })]
           })]
         })]
-      }), (drillDownSettings == null ? void 0 : drillDownSettings.isEnableGroupBy) && /* @__PURE__ */ jsx(DrillBreadCrumb, {
-        dimensions: drillDownSettings.selectedDimensions,
-        drilledLevel
       }), chartType2 && /* @__PURE__ */ jsxs("div", {
-        className: styles$a.metricData,
+        className: `${styles$a.metricData} ${chartType2 === "table" ? styles$a.metricTable : ""}`,
         onContextMenu: (e2) => {
           e2.preventDefault();
         },
@@ -122687,6 +122656,9 @@ const MetricCard = ({
               color: "blue"
             }
           })
+        }), (drillDownSettings == null ? void 0 : drillDownSettings.isEnableGroupBy) && /* @__PURE__ */ jsx(DrillBreadCrumb, {
+          dimensions: drillDownSettings.selectedDimensions,
+          drilledLevel
         }), (chartParams == null ? void 0 : chartParams.name) && columnName && /* @__PURE__ */ jsx(ChartPopup$1, {
           isOpen: isShowChartPopup,
           setOpen: setShowChartPopup,
@@ -122719,82 +122691,7 @@ const MetricCard = ({
           handleChartRightClick
         }) : null]
       })]
-    }), !!dataDb.length && /* @__PURE__ */ jsx(Modal, {
-      isOpen: isShowTablePreview,
-      onClose: () => setTablePreview(false),
-      headerTitle: metricItem.name,
-      children: /* @__PURE__ */ jsx("div", {
-        className: styles$a.fullscreen,
-        children: /* @__PURE__ */ jsx(Table, {
-          data: dataDb,
-          isLoading: isQueryLoading,
-          error: ""
-        })
-      })
-    }), /* @__PURE__ */ jsx(Modal, {
-      isOpen: isShowRawCsvModal,
-      onClose: () => setRawCsvModal(false),
-      headerTitle: "Download Raw csv",
-      children: /* @__PURE__ */ jsxs("form", {
-        className: styles$a.downloadCsv,
-        onSubmit: handleSubmit((values) => {
-          var _a3;
-          return onSubmitDownloadCsv({
-            values,
-            sqlQuery: metricItem.query,
-            companyId: metricItem.companyId,
-            clientName: client,
-            tenancyType: companyTenancyType,
-            metricName: metricItem == null ? void 0 : metricItem.name,
-            workspaceId: (_a3 = metricItem == null ? void 0 : metricItem.companyIntegration) == null ? void 0 : _a3.workspaceId
-          });
-        }),
-        children: [/* @__PURE__ */ jsxs("div", {
-          className: styles$a.downloadCsvWrapper,
-          children: [/* @__PURE__ */ jsx(InputField, {
-            type: "email",
-            label: "email",
-            placeholder: "enter a valid email",
-            register: register2("email", asEmail)
-          }), /* @__PURE__ */ jsx(Error$1, {
-            message: downloadCsvError
-          }), /* @__PURE__ */ jsxs("div", {
-            className: styles$a.downloadCsvNote,
-            children: [/* @__PURE__ */ jsx(Icons, {
-              name: "info-icon",
-              className: styles$a.popupItemIcon
-            }), /* @__PURE__ */ jsxs("div", {
-              className: styles$a.downloadCsvNoteText,
-              children: [/* @__PURE__ */ jsx(Text, {
-                styleClass: "primary",
-                variant: "h1",
-                children: "Note:"
-              }), /* @__PURE__ */ jsx(Text, {
-                styleClass: "font-14",
-                variant: "p",
-                children: "You will shortly receive a mail with CSV attached to the above email id, once you click on Submit"
-              })]
-            })]
-          })]
-        }), /* @__PURE__ */ jsxs(ModalFooter, {
-          children: [/* @__PURE__ */ jsx(Button, {
-            variant: "custom",
-            type: "button",
-            size: "small",
-            className: styles$a.downloadCsvCancelBtn,
-            onClick: () => setRawCsvModal(false),
-            isDisabled: isLoading,
-            children: "Cancel"
-          }), /* @__PURE__ */ jsx(Button, {
-            variant: "primary",
-            type: "submit",
-            size: "small",
-            isDisabled: isLoading,
-            children: "Submit"
-          })]
-        })]
-      })
-    })]
+    })
   });
 };
 const SingleValueCard = ({
@@ -123196,6 +123093,443 @@ const LayoutAlert = ({
     })
   });
 };
+const timeAgo = (unixTimestamp) => {
+  const now = Date.now();
+  const diff2 = now - unixTimestamp;
+  const units = [
+    { label: "year", duration: 1e3 * 60 * 60 * 24 * 365 },
+    { label: "month", duration: 1e3 * 60 * 60 * 24 * 30 },
+    { label: "week", duration: 1e3 * 60 * 60 * 24 * 7 },
+    { label: "day", duration: 1e3 * 60 * 60 * 24 },
+    { label: "hour", duration: 1e3 * 60 * 60 },
+    { label: "minute", duration: 1e3 * 60 },
+    { label: "second", duration: 1e3 },
+    { label: "millisecond", duration: 1 }
+  ];
+  for (const unit of units) {
+    const numUnitsAgo = Math.floor(diff2 / unit.duration);
+    if (numUnitsAgo >= 1) {
+      return `${numUnitsAgo} ${unit.label}${numUnitsAgo > 1 ? "s" : ""} ago`;
+    }
+  }
+  return "just now";
+};
+const getSqlStatement = ({
+  query,
+  clientName,
+  tenancyType,
+  values
+}) => {
+  const str = clientName ? tenancyType === DATABASE ? query.replace(new RegExp(DATABASE_NAME, "g"), clientName) : Number(clientName) ? query.replace(new RegExp(CLIENT_NAME_VAR_NUM, "g"), clientName) : query.replace(new RegExp(CLIENT_NAME_VAR, "g"), clientName) : query;
+  if (!values) {
+    return str;
+  }
+  const replacedStr = str.replace(/[^']+_variable/g, (match) => {
+    const value = values[match];
+    return `${value}`;
+  });
+  return replacedStr;
+};
+const useDownloadRawCsv = (onCloseModal, metricItem) => {
+  const [csvDownloadUrlError, setCsvDownloadUrlError] = useState("");
+  const [isLoading, setLoading] = useState(false);
+  const [downloadCsvError, setError] = useState("");
+  const { mutate } = useRawCsvMutation();
+  const { mutate: invokeSaveRawCsvDetailsMutation } = useInvokeSaveRawCsvDetailsMutation();
+  const { handleSubmit, register: register2 } = useForm();
+  const { data: RawCsvUrlsData } = useExternalMetricRawCsvUrlsQuery(
+    { externalMetricId: metricItem == null ? void 0 : metricItem.id },
+    { enabled: !!(metricItem == null ? void 0 : metricItem.id) }
+  );
+  const isLinkExpired = (url) => {
+    const queryString = url.split("?")[1];
+    const params = new URLSearchParams(queryString);
+    const expires = parseInt(params.get("Expires"), 10);
+    const currentTime = Math.floor(Date.now() / 1e3);
+    const secondsLeft = expires - currentTime;
+    return { isExpired: currentTime > expires, secondsLeft };
+  };
+  const getUrls = (urls) => {
+    try {
+      return JSON.parse(urls);
+    } catch {
+      return [];
+    }
+  };
+  const csvDownloadUrls = useMemo(() => {
+    if (RawCsvUrlsData == null ? void 0 : RawCsvUrlsData.externalMetricRawCsvUrls.length) {
+      const urls = getUrls(RawCsvUrlsData.externalMetricRawCsvUrls[0].urls);
+      return {
+        urls,
+        lastUpdatedAt: timeAgo(
+          Date.parse(RawCsvUrlsData.externalMetricRawCsvUrls[0].lastUpdatedAt)
+        ),
+        isExpired: urls.length ? isLinkExpired(urls[0]).isExpired : true,
+        error: RawCsvUrlsData.externalMetricRawCsvUrls[0].error,
+        expireUrlIn: urls.length ? isLinkExpired(urls[0]).secondsLeft : 0
+      };
+    }
+    return {
+      urls: [],
+      lastUpdatedAt: 0,
+      isExpired: true,
+      error: null,
+      expireUrlIn: 0
+    };
+  }, [RawCsvUrlsData == null ? void 0 : RawCsvUrlsData.externalMetricRawCsvUrls]);
+  const handleDownload = (url) => {
+    setCsvDownloadUrlError("");
+    fetch(url).then((response) => {
+      if (!response.ok) {
+        if (response.status === 403) {
+          setCsvDownloadUrlError("download link is expired");
+        } else {
+          setCsvDownloadUrlError("something went wrong");
+        }
+      }
+      return response.blob();
+    }).then((blob) => {
+      const csvUrl = URL.createObjectURL(blob);
+      const a2 = document.createElement("a");
+      a2.download = `${metricItem == null ? void 0 : metricItem.name}.csv`;
+      a2.href = csvUrl;
+      document.body.appendChild(a2);
+      a2.click();
+      document.body.removeChild(a2);
+    }).catch(() => {
+      setCsvDownloadUrlError(
+        "There was an error downloading the CSV file. Please try again later."
+      );
+    });
+  };
+  const onSubmitDownloadCsv = ({
+    companyId,
+    sqlQuery,
+    values,
+    clientName,
+    tenancyType,
+    metricName: metricName2,
+    workspaceId
+  }) => {
+    setLoading(true);
+    setError("");
+    const modifiedQuery = getSqlStatement({
+      query: sqlQuery,
+      clientName,
+      tenancyType,
+      values
+    });
+    mutate(
+      {
+        companyId,
+        recipientAddress: values.email,
+        sqlQuery: modifiedQuery,
+        metricName: metricName2,
+        workspaceId
+      },
+      {
+        onSuccess(data) {
+          var _a2, _b2;
+          const success2 = (_a2 = data.sendRawCsv) == null ? void 0 : _a2.status;
+          const error2 = (_b2 = data.sendRawCsv) == null ? void 0 : _b2.error;
+          if (success2) {
+            setError("");
+            setLoading(false);
+            onCloseModal(false);
+          } else if (error2) {
+            setError(error2.message);
+            setLoading(false);
+          } else {
+            setError(SOMETHING_WENT_WRONG);
+            setLoading(false);
+          }
+        }
+      }
+    );
+  };
+  const saveRawCsvDetails = ({
+    values,
+    clientName,
+    tenancyType
+  }) => {
+    setLoading(true);
+    setError("");
+    invokeSaveRawCsvDetailsMutation(
+      {
+        configurations: { metricItem, fieldValues: values },
+        expireCsvFileAt: values.expireCsvFileAt,
+        expireUrlIn: parseInt(values.expireUrlIn, 10),
+        externalMetricId: metricItem == null ? void 0 : metricItem.id,
+        integrationId: metricItem == null ? void 0 : metricItem.companyIntegrationId,
+        integrationName: metricItem == null ? void 0 : metricItem.integrationName,
+        query: getSqlStatement({
+          query: metricItem == null ? void 0 : metricItem.query,
+          clientName,
+          tenancyType,
+          values
+        })
+      },
+      {
+        onSuccess({ invokeSaveRawCsvDetails }) {
+          if (invokeSaveRawCsvDetails == null ? void 0 : invokeSaveRawCsvDetails.statusCode) {
+            setLoading(false);
+            onCloseModal(false);
+          } else if (invokeSaveRawCsvDetails == null ? void 0 : invokeSaveRawCsvDetails.error) {
+            setLoading(false);
+            setError(invokeSaveRawCsvDetails.error);
+          } else {
+            setLoading(false);
+            setError(SOMETHING_WENT_WRONG);
+          }
+        },
+        onError() {
+          setLoading(false);
+          setError(SOMETHING_WENT_WRONG);
+        }
+      }
+    );
+  };
+  return {
+    isLoading,
+    downloadCsvError,
+    onSubmitDownloadCsv,
+    handleSubmit,
+    register: register2,
+    csvDownloadUrls,
+    handleDownload,
+    csvDownloadUrlError,
+    saveRawCsvDetails
+  };
+};
+const required = { required: "Required" };
+const asEmail = {
+  ...required,
+  pattern: {
+    value: /^\S+@\S+$/i,
+    message: "Entered value does not match email format"
+  }
+};
+({
+  ...required,
+  minLength: {
+    value: 8,
+    message: "Min length is 8"
+  }
+});
+({
+  ...required,
+  minLength: {
+    value: 3,
+    message: "Min length is 3"
+  }
+});
+const DownloadRawCsvModal = ({
+  onCloseModal,
+  isShowRawCsvModal,
+  metricItem,
+  client,
+  companyTenancyType
+}) => {
+  const [rawCsvType, setRawCsvType] = useState(RAW_CSV_OPTIONS[0]);
+  const {
+    downloadCsvError,
+    handleSubmit,
+    isLoading,
+    onSubmitDownloadCsv,
+    register: register2,
+    csvDownloadUrls,
+    handleDownload,
+    csvDownloadUrlError,
+    saveRawCsvDetails
+  } = useDownloadRawCsv(onCloseModal, metricItem);
+  return /* @__PURE__ */ jsx(Modal, {
+    isOpen: isShowRawCsvModal,
+    onClose: () => onCloseModal(false),
+    headerTitle: "Raw CSV",
+    children: /* @__PURE__ */ jsxs("div", {
+      className: styles$a.downloadCsv,
+      children: [/* @__PURE__ */ jsx(Tab, {
+        activeTab: rawCsvType,
+        options: RAW_CSV_OPTIONS,
+        setActiveTab: setRawCsvType,
+        className: styles$a["tab-border-bottom"]
+      }), rawCsvType === RAW_CSV_OPTIONS[1] && /* @__PURE__ */ jsxs("form", {
+        onSubmit: handleSubmit((values) => onSubmitDownloadCsv({
+          values,
+          sqlQuery: metricItem == null ? void 0 : metricItem.query,
+          companyId: metricItem == null ? void 0 : metricItem.companyId,
+          clientName: client,
+          tenancyType: companyTenancyType,
+          metricName: metricItem == null ? void 0 : metricItem.name,
+          workspaceId: metricItem == null ? void 0 : metricItem.companyIntegration.workspaceId
+        })),
+        children: [/* @__PURE__ */ jsxs("div", {
+          className: styles$a.downloadCsvWrapper,
+          children: [/* @__PURE__ */ jsx(InputField, {
+            type: "email",
+            label: "email",
+            placeholder: "enter a valid email",
+            register: register2("email", asEmail)
+          }), downloadCsvError && /* @__PURE__ */ jsx(Error$1, {
+            message: downloadCsvError
+          }), /* @__PURE__ */ jsxs("div", {
+            className: styles$a.downloadCsvNote,
+            children: [/* @__PURE__ */ jsx(Icons, {
+              name: "info-icon",
+              className: styles$a.popupItemIcon
+            }), /* @__PURE__ */ jsxs("div", {
+              className: styles$a.downloadCsvNoteText,
+              children: [/* @__PURE__ */ jsx(Text, {
+                styleClass: "primary",
+                variant: "h1",
+                children: "Note:"
+              }), /* @__PURE__ */ jsx(Text, {
+                styleClass: "font-14",
+                variant: "p",
+                children: "You will shortly receive a mail with CSV attached to the above email id, once you click on Submit"
+              })]
+            })]
+          })]
+        }), /* @__PURE__ */ jsxs(ModalFooter, {
+          children: [/* @__PURE__ */ jsx(Button, {
+            variant: "custom",
+            type: "button",
+            size: "small",
+            className: styles$a.downloadCsvCancelBtn,
+            onClick: () => onCloseModal(false),
+            isDisabled: isLoading,
+            children: "Cancel"
+          }), /* @__PURE__ */ jsx(Button, {
+            variant: "primary",
+            type: "submit",
+            size: "small",
+            isDisabled: isLoading,
+            children: "Submit"
+          })]
+        })]
+      }), rawCsvType === RAW_CSV_OPTIONS[0] && /* @__PURE__ */ jsx("div", {
+        children: !csvDownloadUrls.isExpired ? /* @__PURE__ */ jsxs(Fragment, {
+          children: [/* @__PURE__ */ jsxs("div", {
+            className: styles$a.downloadCsvWrapper,
+            children: [/* @__PURE__ */ jsxs(Text, {
+              variant: "p",
+              styleClass: "primary",
+              children: ["Last download request:", /* @__PURE__ */ jsx("span", {
+                className: styles$a["download-info-text"],
+                children: csvDownloadUrls.lastUpdatedAt
+              })]
+            }), /* @__PURE__ */ jsxs(Text, {
+              variant: "p",
+              styleClass: "primary",
+              children: ["Url will expire in :", /* @__PURE__ */ jsxs("span", {
+                className: styles$a["download-info-text"],
+                children: [csvDownloadUrls.expireUrlIn, " sec"]
+              })]
+            }), csvDownloadUrlError && /* @__PURE__ */ jsx(Error$1, {
+              message: csvDownloadUrlError
+            })]
+          }), /* @__PURE__ */ jsxs(ModalFooter, {
+            children: [/* @__PURE__ */ jsx(Button, {
+              variant: "custom",
+              type: "button",
+              size: "small",
+              className: styles$a.downloadCsvCancelBtn,
+              onClick: () => onCloseModal(false),
+              isDisabled: isLoading,
+              children: "Cancel"
+            }), csvDownloadUrls.urls.map((url) => /* @__PURE__ */ jsx(Button, {
+              variant: "primary",
+              type: "button",
+              size: "medium",
+              onClick: () => handleDownload(url),
+              children: "Download"
+            }))]
+          })]
+        }) : /* @__PURE__ */ jsxs("form", {
+          onSubmit: handleSubmit((values) => saveRawCsvDetails({
+            values,
+            clientName: client,
+            tenancyType: companyTenancyType
+          })),
+          children: [/* @__PURE__ */ jsxs("div", {
+            className: styles$a.downloadCsvWrapper,
+            children: [/* @__PURE__ */ jsx(InputField, {
+              type: "date",
+              label: "File Expire",
+              placeholder: "select expire date for file",
+              register: register2("expireCsvFileAt"),
+              pattern: "(?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31))"
+            }), /* @__PURE__ */ jsx(InputField, {
+              type: "number",
+              label: "Download URL expire (sec)",
+              placeholder: "120",
+              register: register2("expireUrlIn"),
+              defaultValue: 120,
+              min: 60
+            }), /* @__PURE__ */ jsxs("div", {
+              className: styles$a.downloadCsvNote,
+              children: [/* @__PURE__ */ jsx(Icons, {
+                name: "info-icon",
+                className: styles$a.popupItemIcon
+              }), /* @__PURE__ */ jsxs("div", {
+                className: styles$a.downloadCsvNoteText,
+                children: [/* @__PURE__ */ jsx(Text, {
+                  styleClass: "primary",
+                  variant: "h1",
+                  children: "Note:"
+                }), /* @__PURE__ */ jsx(Text, {
+                  styleClass: "font-14",
+                  variant: "p",
+                  children: "Please check again in some time, download link will be available."
+                })]
+              })]
+            }), csvDownloadUrls.error && /* @__PURE__ */ jsx(Error$1, {
+              message: csvDownloadUrls.error
+            }), downloadCsvError && /* @__PURE__ */ jsx(Error$1, {
+              message: downloadCsvError
+            })]
+          }), /* @__PURE__ */ jsxs(ModalFooter, {
+            children: [/* @__PURE__ */ jsx(Button, {
+              variant: "custom",
+              type: "button",
+              size: "small",
+              className: styles$a.downloadCsvCancelBtn,
+              onClick: () => onCloseModal(false),
+              isDisabled: isLoading,
+              children: "Cancel"
+            }), /* @__PURE__ */ jsx(Button, {
+              variant: "primary",
+              type: "submit",
+              size: "small",
+              isDisabled: isLoading,
+              children: "Submit"
+            })]
+          })]
+        })
+      })]
+    })
+  });
+};
+const TableViewModal = ({
+  metricData: metricData2,
+  isOpen,
+  onClose,
+  title: title2
+}) => {
+  return /* @__PURE__ */ jsx(Modal, {
+    isOpen,
+    onClose: () => onClose(),
+    headerTitle: title2,
+    children: /* @__PURE__ */ jsx("div", {
+      className: styles$a.fullscreen,
+      children: /* @__PURE__ */ jsx(Table, {
+        data: metricData2 || [],
+        isLoading: false,
+        error: ""
+      })
+    })
+  });
+};
 const GridLayout = reactGridLayout.exports.WidthProvider(reactGridLayout.exports.Responsive);
 const ExternalMetricList = ({
   chartColors,
@@ -123216,6 +123550,7 @@ const ExternalMetricList = ({
   companyId,
   workspaceId
 }) => {
+  var _a2;
   const [isFullScreen, setFullScreen] = useState(false);
   const [archiveModal, setArchiveModal] = useState({
     id: "",
@@ -123228,6 +123563,12 @@ const ExternalMetricList = ({
   const [editModal, setEditModal] = useState({
     show: false
   });
+  const [tableViewModal, setTableViewModal] = useState({
+    show: false
+  });
+  const [rawCsvModal, setRawCsvModal] = useState({
+    show: false
+  });
   const [fullScreenChart, setFullScreenChart] = useState();
   const {
     saveLayout,
@@ -123261,12 +123602,19 @@ const ExternalMetricList = ({
         x: (cardLayout == null ? void 0 : cardLayout.x) || metric.resizeAttributes.xAxis || 0,
         y: (cardLayout == null ? void 0 : cardLayout.y) || metric.resizeAttributes.yAxis || 0,
         minW: 3,
-        minH: 6,
-        maxH: 15
+        minH: metric.chartOptions.chartType !== "single value" ? 8 : 5,
+        maxH: metric.chartOptions.chartType === "table" ? Infinity : 15
       };
     });
     return [allMetricList, layoutAttributes];
   }, [externalDashboardMetrics, layout3]);
+  useEffect(() => {
+    if (!metricsList.length || !metricsLayout.length)
+      return;
+    document.querySelectorAll(".react-resizable-handle").forEach((el) => {
+      el.classList.add(styles$b.resizeHandle);
+    });
+  }, [metricsList.length && metricsLayout.length]);
   return /* @__PURE__ */ jsx(Fragment, {
     children: metricsList.length && metricsLayout.length ? /* @__PURE__ */ jsxs(Fragment, {
       children: [/* @__PURE__ */ jsxs("div", {
@@ -123346,10 +123694,37 @@ const ExternalMetricList = ({
                 show: true,
                 metric,
                 metricData: metricData2
-              }) : void 0
+              }) : void 0,
+              onTableView: (metric, metricData2) => setTableViewModal({
+                show: true,
+                metricData: metricData2,
+                metric
+              }),
+              onDownloadRawCsv: (metric) => setRawCsvModal({
+                metric,
+                show: true
+              })
             })
           }, metricItem.id))
         })]
+      }), /* @__PURE__ */ jsx(TableViewModal, {
+        onClose: () => setTableViewModal({
+          show: false,
+          metric: void 0,
+          metricData: void 0
+        }),
+        isOpen: tableViewModal.show,
+        title: ((_a2 = tableViewModal.metric) == null ? void 0 : _a2.name) || "Table view",
+        metricData: tableViewModal.metricData
+      }), /* @__PURE__ */ jsx(DownloadRawCsvModal, {
+        client,
+        companyTenancyType,
+        isShowRawCsvModal: rawCsvModal.show,
+        metricItem: rawCsvModal.metric,
+        onCloseModal: (value) => setRawCsvModal({
+          metric: void 0,
+          show: value
+        })
       }), /* @__PURE__ */ jsx(FullScreenChart, {
         onCancel: () => setFullScreen(false),
         isShow: isFullScreen,
@@ -123515,6 +123890,8 @@ var index$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePropert
   SingleValueCard,
   ArchiveMetricModal,
   LayoutAlert,
+  TableViewModal,
+  DownloadRawCsvModal,
   MetricTable,
   Modal,
   ModalFooter,