@databrainhq/plugin 0.9.5 → 0.9.7

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,7 +5616,10 @@ const FREQUENCY = [
   { value: "Weekly", label: "Weekly" },
   { value: "Monthly", label: "Monthly" }
 ];
-const RAW_CSV_OPTIONS = ["download", "email"];
+const RAW_CSV_OPTIONS = ["Url download", "Email"];
+const NONE$1 = "NONE";
+const REQUESTED = "REQUESTED";
+const AVAILABLE = "AVAILABLE";
 const ChartConfig = ({
   data,
   setXAxis,
@@ -6527,7 +6531,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";
@@ -6536,7 +6540,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,
@@ -6920,6 +6924,7 @@ const ExternalMetricRawCsvUrlsDocument = `
     id
     lastUpdatedAt
     urls
+    requestStatus
   }
 }
     `;
@@ -6958,6 +6963,19 @@ const useMetricAccessQuery = (variables, options2) => useQuery(
   fetcher(MetricAccessDocument, variables),
   options2
 );
+const RawCsvSettingsDocument = `
+    query RawCsvSettings($id: uuid = "") {
+  companyWorkspaces_by_pk(id: $id) {
+    rawCsvSettings
+    id
+  }
+}
+    `;
+const useRawCsvSettingsQuery = (variables, options2) => useQuery(
+  variables === void 0 ? ["RawCsvSettings"] : ["RawCsvSettings", variables],
+  fetcher(RawCsvSettingsDocument, variables),
+  options2
+);
 const ScheduleEmailReportDocument = `
     query ScheduleEmailReport($token: uuid = "") {
   scheduleEmailReports(where: {guestToken: {_eq: $token}}) {
@@ -7193,6 +7211,28 @@ const useUpdateAdminMetricMutation = (options2) => useMutation(
   (variables) => fetcher(UpdateAdminMetricDocument, variables)(),
   options2
 );
+const UpdateCsvDownloadStatusDocument = `
+    mutation UpdateCSVDownloadStatus($configurations: jsonb = "", $expireUrlIn: Int = 60, $externalMetricId: uuid = "", $requestStatus: String = "", $urls: jsonb = "") {
+  insert_externalMetricRawCsvUrls_one(
+    object: {configurations: $configurations, expireUrlIn: $expireUrlIn, externalMetricId: $externalMetricId, requestStatus: $requestStatus, urls: $urls}
+    on_conflict: {constraint: externalMetricRawCsvUrls_externalMetricId_key, update_columns: [configurations, error, expireUrlIn, lastUpdatedAt, requestStatus, urls]}
+  ) {
+    id
+    requestStatus
+    configurations
+    error
+    expireUrlIn
+    externalMetricId
+    lastUpdatedAt
+    urls
+  }
+}
+    `;
+const useUpdateCsvDownloadStatusMutation = (options2) => useMutation(
+  ["UpdateCSVDownloadStatus"],
+  (variables) => fetcher(UpdateCsvDownloadStatusDocument, variables)(),
+  options2
+);
 const UpdateExternalMetricDocument = `
     mutation UpdateExternalMetric($externalMetricId: uuid!, $set: externalMetrics_set_input!) {
   update_externalMetrics_by_pk(pk_columns: {id: $externalMetricId}, _set: $set) {
@@ -7321,25 +7361,26 @@ const ExternalMetricForm = ({
     })]
   });
 };
-const container$d = "_container_1brv3_1";
-const wrapper$3 = "_wrapper_1brv3_9";
-const label$3 = "_label_1brv3_17";
-const floatingLabel = "_floatingLabel_1brv3_25";
-const floatingText = "_floatingText_1brv3_31";
-const clientText = "_clientText_1brv3_39";
-const normalText = "_normalText_1brv3_47";
-const dropdown$1 = "_dropdown_1brv3_55";
-const options = "_options_1brv3_63";
-const checkedOption = "_checkedOption_1brv3_71";
-const option = "_option_1brv3_63";
-const icon$1 = "_icon_1brv3_87";
-const text$2 = "_text_1brv3_95";
-const search = "_search_1brv3_103";
-const loadMore = "_loadMore_1brv3_111";
-const loadMoreIcon = "_loadMoreIcon_1brv3_119";
+const container$d = "_container_1dkbf_1";
+const wrapper$2 = "_wrapper_1dkbf_9";
+const label$3 = "_label_1dkbf_17";
+const floatingLabel = "_floatingLabel_1dkbf_25";
+const floatingText = "_floatingText_1dkbf_31";
+const clientText = "_clientText_1dkbf_39";
+const normalText = "_normalText_1dkbf_47";
+const dropdown$1 = "_dropdown_1dkbf_55";
+const options = "_options_1dkbf_63";
+const checkedOption = "_checkedOption_1dkbf_71";
+const option = "_option_1dkbf_63";
+const icon$1 = "_icon_1dkbf_87";
+const text$1 = "_text_1dkbf_95";
+const search = "_search_1dkbf_103";
+const loadMore = "_loadMore_1dkbf_111";
+const loadMoreIcon = "_loadMoreIcon_1dkbf_119";
+const aboveList = "_aboveList_1dkbf_127";
 var styles$y = {
   container: container$d,
-  wrapper: wrapper$3,
+  wrapper: wrapper$2,
   label: label$3,
   floatingLabel,
   floatingText,
@@ -7350,10 +7391,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;
@@ -7927,6 +7969,9 @@ var index$5 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePropert
   DATE_NUM,
   FREQUENCY,
   RAW_CSV_OPTIONS,
+  NONE: NONE$1,
+  REQUESTED,
+  AVAILABLE,
   operatorList,
   RowLimitList,
   AggregateList,
@@ -8070,12 +8115,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);
@@ -8102,7 +8149,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",
@@ -8111,7 +8158,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
@@ -19902,9 +19949,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) {
@@ -25754,13 +25801,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;
@@ -25770,12 +25817,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;
   }
 }();
@@ -40910,7 +40957,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;
@@ -40918,26 +40965,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;
         }
@@ -41071,17 +41118,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
@@ -41096,20 +41143,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();
@@ -44862,15 +44909,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);
 }
@@ -48842,8 +48889,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({
@@ -50328,11 +50375,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);
   });
 }
@@ -62003,11 +62050,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);
     }
@@ -68446,8 +68493,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");
@@ -68486,11 +68533,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;
@@ -73916,10 +73963,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
     }));
   };
@@ -81606,7 +81653,7 @@ const StackedBarChart = ({
     children: /* @__PURE__ */ jsx(EChartsReact, {
       style: {
         width: "100%",
-        height: "300px"
+        height: "90%"
       },
       option: option2,
       onEvents: {
@@ -84029,7 +84076,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) => {
@@ -84091,7 +84138,7 @@ function compareAlphanumeric(aStr, bStr) {
 const sortingFns = {
   alphanumeric,
   alphanumericCaseSensitive,
-  text: text$1,
+  text,
   textCaseSensitive,
   datetime,
   basic
@@ -85626,41 +85673,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,
@@ -85674,12 +85731,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,
@@ -85697,11 +85764,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=";
@@ -85732,8 +85807,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 : [];
@@ -85757,7 +85834,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;
@@ -85767,6 +85862,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);
@@ -85775,15 +85877,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,
@@ -85793,11 +85916,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", {
@@ -85807,13 +85934,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,
@@ -85826,58 +85950,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", {
@@ -85905,6 +86031,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"
+          })]
+        })]
       })]
     })
   });
@@ -86853,13 +87010,13 @@ var styles$o = {
 };
 const container$7 = "_container_u2z1d_1";
 const header$3 = "_header_u2z1d_9";
-const wrapper$2 = "_wrapper_u2z1d_17";
+const wrapper$1 = "_wrapper_u2z1d_17";
 const column = "_column_u2z1d_33";
 const columnText$1 = "_columnText_u2z1d_41";
 var styles$n = {
   container: container$7,
   header: header$3,
-  wrapper: wrapper$2,
+  wrapper: wrapper$1,
   "col-container": "_col-container_u2z1d_25",
   column,
   columnText: columnText$1
@@ -88237,40 +88394,33 @@ const ChartTab = ({
     })]
   });
 };
-const container$5 = "_container_wjdaz_1";
-const wrapper$1 = "_wrapper_wjdaz_9";
-const text = "_text_wjdaz_17";
-const table$2 = "_table_wjdaz_23";
+const container$5 = "_container_1r4rr_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_127xg_1";
@@ -120050,7 +120200,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);
@@ -120073,7 +120223,7 @@ var GridItem = /* @__PURE__ */ function(_React$Component) {
           onResize: this.onResize,
           transformScale,
           resizeHandles,
-          handle: resizeHandle
+          handle: resizeHandle2
         },
         child
       );
@@ -120790,7 +120940,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;
@@ -120829,7 +120979,7 @@ var ReactGridLayout = /* @__PURE__ */ function(_React$Component) {
         static: l2.static,
         droppingPosition: isDroppingItem ? droppingPosition : void 0,
         resizeHandles: resizeHandlesOptions,
-        resizeHandle
+        resizeHandle: resizeHandle2
       }, child);
     }
   }, {
@@ -121626,48 +121776,69 @@ function WidthProvideRGL(ComposedComponent) {
   module.exports.WidthProvider = WidthProvider.default;
 })(reactGridLayout);
 var styles$c = "";
-const fullscreen$2 = "_fullscreen_1en1r_49";
+const resizeHandle = "_resizeHandle_170un_17";
+const fullscreen$2 = "_fullscreen_170un_57";
 var styles$b = {
-  "MetricList-container": "_MetricList-container_1en1r_1",
-  "MetricList-wrapper": "_MetricList-wrapper_1en1r_9",
-  "MetricList-wrapper-move": "_MetricList-wrapper-move_1en1r_17",
-  "noMetric-container": "_noMetric-container_1en1r_25",
-  "noMetric-wrapper": "_noMetric-wrapper_1en1r_33",
-  "alt-container": "_alt-container_1en1r_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_1u57p_1";
-const listHeader = "_listHeader_1u57p_9";
-const metricName = "_metricName_1u57p_17";
-const metricTitle = "_metricTitle_1u57p_25";
-const metricDescription = "_metricDescription_1u57p_33";
-const popup = "_popup_1u57p_41";
-const metricFilter$1 = "_metricFilter_1u57p_49";
-const popupIcon = "_popupIcon_1u57p_57";
-const popupMenu = "_popupMenu_1u57p_65";
-const popupItem = "_popupItem_1u57p_73";
-const popupItemIcon = "_popupItemIcon_1u57p_81";
-const csvBtn = "_csvBtn_1u57p_89";
-const deleteBtn = "_deleteBtn_1u57p_97";
-const metricData = "_metricData_1u57p_105";
-const singleValueData = "_singleValueData_1u57p_113";
-const singleValue = "_singleValue_1u57p_113";
-const noData = "_noData_1u57p_129";
-const noDataContent = "_noDataContent_1u57p_137";
-const noDataText = "_noDataText_1u57p_145";
-const loading$1 = "_loading_1u57p_153";
-const features = "_features_1u57p_161";
-const fullscreen$1 = "_fullscreen_1u57p_169";
-const deleteModal = "_deleteModal_1u57p_177";
-const cancelBtn = "_cancelBtn_1u57p_185";
-const warningIcon = "_warningIcon_1u57p_193";
-const downloadCsv = "_downloadCsv_1u57p_201";
-const downloadCsvWrapper = "_downloadCsvWrapper_1u57p_209";
-const downloadCsvHeader = "_downloadCsvHeader_1u57p_215";
-const downloadCsvFooter = "_downloadCsvFooter_1u57p_221";
-const downloadCsvCancelBtn = "_downloadCsvCancelBtn_1u57p_229";
-const downloadCsvNote = "_downloadCsvNote_1u57p_237";
-const downloadCsvNoteText = "_downloadCsvNoteText_1u57p_245";
+const cardContainer = "_cardContainer_1qrhu_1";
+const listHeader = "_listHeader_1qrhu_9";
+const metricName = "_metricName_1qrhu_17";
+const metricTitle = "_metricTitle_1qrhu_25";
+const metricDescription = "_metricDescription_1qrhu_33";
+const popup = "_popup_1qrhu_41";
+const metricFilter$1 = "_metricFilter_1qrhu_49";
+const popupIcon = "_popupIcon_1qrhu_57";
+const popupMenu = "_popupMenu_1qrhu_65";
+const popupItem = "_popupItem_1qrhu_73";
+const popupItemIcon = "_popupItemIcon_1qrhu_81";
+const csvBtn = "_csvBtn_1qrhu_89";
+const deleteBtn = "_deleteBtn_1qrhu_97";
+const metricData = "_metricData_1qrhu_105";
+const metricTable = "_metricTable_1qrhu_113";
+const singleValueData = "_singleValueData_1qrhu_121";
+const singleValue = "_singleValue_1qrhu_121";
+const noData = "_noData_1qrhu_137";
+const noDataContent = "_noDataContent_1qrhu_145";
+const noDataText = "_noDataText_1qrhu_153";
+const loading$1 = "_loading_1qrhu_161";
+const features = "_features_1qrhu_169";
+const fullscreen$1 = "_fullscreen_1qrhu_177";
+const deleteModal = "_deleteModal_1qrhu_185";
+const cancelBtn = "_cancelBtn_1qrhu_193";
+const warningIcon = "_warningIcon_1qrhu_201";
+const downloadCsv = "_downloadCsv_1qrhu_209";
+const downloadCsvWrapper = "_downloadCsvWrapper_1qrhu_217";
+const downloadCsvHeader = "_downloadCsvHeader_1qrhu_225";
+const downloadCsvFooter = "_downloadCsvFooter_1qrhu_233";
+const downloadCsvCancelBtn = "_downloadCsvCancelBtn_1qrhu_241";
+const downloadCsvNote = "_downloadCsvNote_1qrhu_249";
+const downloadCsvExpiredNote = "_downloadCsvExpiredNote_1qrhu_257";
+const downloadCsvNoteText = "_downloadCsvNoteText_1qrhu_263";
+const downloadUrlTimeline = "_downloadUrlTimeline_1qrhu_287";
+const timeLineItem = "_timeLineItem_1qrhu_295";
+const timeLineActiveIcon = "_timeLineActiveIcon_1qrhu_303";
+const timeLineIcon = "_timeLineIcon_1qrhu_311";
+const timeLineItemline = "_timeLineItemline_1qrhu_319";
+const downloadCsvLoading = "_downloadCsvLoading_1qrhu_327";
+const downloadCsvLoadingIcon = "_downloadCsvLoadingIcon_1qrhu_335";
+const downloadCsvLoadingText = "_downloadCsvLoadingText_1qrhu_343";
+const timeLineCheckedIcon = "_timeLineCheckedIcon_1qrhu_351";
+const timeLineCheckedIconWrapper = "_timeLineCheckedIconWrapper_1qrhu_359";
+const downloadCsvBackBtnWrapper = "_downloadCsvBackBtnWrapper_1qrhu_367";
+const downloadCsvBackBtnText = "_downloadCsvBackBtnText_1qrhu_375";
+const downloadCsvHeaderText = "_downloadCsvHeaderText_1qrhu_397";
+const downloadCsvTabContainer = "_downloadCsvTabContainer_1qrhu_405";
+const downloadCsvActiveTab = "_downloadCsvActiveTab_1qrhu_413";
+const downloadCsvTab = "_downloadCsvTab_1qrhu_405";
+const downloadCsvActiveTabText = "_downloadCsvActiveTabText_1qrhu_429";
 var styles$a = {
   cardContainer,
   listHeader,
@@ -121683,6 +121854,7 @@ var styles$a = {
   csvBtn,
   deleteBtn,
   metricData,
+  metricTable,
   singleValueData,
   singleValue,
   noData,
@@ -121700,9 +121872,27 @@ var styles$a = {
   downloadCsvFooter,
   downloadCsvCancelBtn,
   downloadCsvNote,
+  downloadCsvExpiredNote,
   downloadCsvNoteText,
-  "tab-border-bottom": "_tab-border-bottom_1u57p_253",
-  "download-info-text": "_download-info-text_1u57p_261"
+  "tab-border-bottom": "_tab-border-bottom_1qrhu_271",
+  "download-info-text": "_download-info-text_1qrhu_279",
+  downloadUrlTimeline,
+  timeLineItem,
+  timeLineActiveIcon,
+  timeLineIcon,
+  timeLineItemline,
+  downloadCsvLoading,
+  downloadCsvLoadingIcon,
+  downloadCsvLoadingText,
+  timeLineCheckedIcon,
+  timeLineCheckedIconWrapper,
+  downloadCsvBackBtnWrapper,
+  downloadCsvBackBtnText,
+  downloadCsvHeaderText,
+  downloadCsvTabContainer,
+  downloadCsvActiveTab,
+  downloadCsvTab,
+  downloadCsvActiveTabText
 };
 var NoData = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMDAgMzAwIj48ZGVmcz48c3R5bGU+LmNscy0xe3N0cm9rZTojMTgyYzYwO30uY2xzLTEsLmNscy0ye2ZpbGw6bm9uZTtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7fS5jbHMtM3tmaWxsOiM1ODY1ZjY7b3BhY2l0eTouMTt9LmNscy00e2ZpbGw6I2YyZjNmNDt9LmNscy01e2ZpbGw6I2MxYzdjOTt9LmNscy02e2ZpbGw6I2RhZGVkZjt9LmNscy03e2ZpbGw6IzE4MmM2MDt9LmNscy0ye3N0cm9rZTojNTg2NWY2O3N0cm9rZS13aWR0aDo0cHg7fTwvc3R5bGU+PC9kZWZzPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0ibTIxMC41LDIwMC44M2MuNC0uNjYuNjgtMS40LjgyLTIuMiwxLjU4LTguODcsMy4xNS0xNy43NSw0LjczLTI2LjYyLDIuMDMtMTEuNDQsNC4wNi0yMi44OCw2LjA5LTM0LjMyLjcyLTQuMDgsMS43Ny04LjI1LDIuMTYtMTIuMzguNDMtNC41Ni0yLjA5LTkuNjgtNi44Ni0xMC42Ni0uMDEsMC0uMDMsMC0uMDQsMC0yLjQtLjQ5LTUuMDItLjIyLTcuNDUtLjIyaC00NC4yMmMtLjUyLDAtMi4zMy0uMzEtMi43NywwbC0yNC4yOCwxNy4yMmgtNjEuNjFjLTMuOTcsMC02Ljk5LDMuNTYtNi4zNCw3LjQ3bDkuNzUsNTkuNDJjLjUxLDMuMTEsMy4yLDUuMzksNi4zNCw1LjM5aDExNy44NiIvPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0ibTIwNywxMTQuNDN2LTguNTRjMC0zLjU1LTIuODgtNi40My02LjQzLTYuNDNoLTE3LjE5Ii8+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJtMTAzLjQ3LDk5LjQ2aC0xNS4xMmMtMy41NSwwLTYuNDMsMi44OC02LjQzLDYuNDN2MjUuNDgiLz48Zz48bGluZSBjbGFzcz0iY2xzLTIiIHgxPSIxMTQuMTIiIHkxPSI5NC4wOCIgeDI9IjE0NC44NCIgeTI9Ijk0LjA4Ii8+PGc+PHJlY3QgY2xhc3M9ImNscy02IiB4PSIxMTIuNjEiIHk9IjEwMi40MyIgd2lkdGg9IjE4Ljk3IiBoZWlnaHQ9IjMuMiIvPjxyZWN0IGNsYXNzPSJjbHMtNCIgeD0iMTM3LjYxIiB5PSIxMDIuNDMiIHdpZHRoPSI4LjkiIGhlaWdodD0iMy4yIi8+PC9nPjwvZz48cGF0aCBjbGFzcz0iY2xzLTMiIGQ9Im0xNjQuOTgsODEuNDZsLS4wOCwxNi4yOHMuMTUsMy4yNC4zLDMuNjIuNiwxLjUxLDEuMTMsMS44OCwxLjAyLjc5LDEuNzcsMS4wNi45NC40OSwyLjExLjQ5LDE4LjE3LjA0LDE4LjE3LjA0bC0yMy40MS0yMy4zN1oiLz48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Im0xODguNTEsMTA0LjkxdjkuNTIiLz48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Im0xMDMuNTMsMTMxLjM3di00NC45NWMwLTIuODQsMi4zLTUuMTUsNS4xNS01LjE1LDE4Ljc3LDAsMzcuNTQsMCw1Ni4zMSwwIi8+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJtMTY1LjAxLDgxLjI3djE4LjM1YzAsMi44NCwyLjMxLDUuMTUsNS4xNSw1LjE1aDE4LjM1cy0yMy41LTIzLjYyLTIzLjUtMjMuNVoiLz48Y2lyY2xlIGNsYXNzPSJjbHMtMSIgY3g9IjE2OC4yMSIgY3k9IjE2My4yNyIgcj0iMjQuOTYiLz48Y2lyY2xlIGNsYXNzPSJjbHMtMSIgY3g9IjE2OC4yMSIgY3k9IjE2My4yNyIgcj0iMzEuMjUiLz48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Im0xOTIuNTcsMTgzLjMzYzkuNjIsOS42MiwzMC4yOCwzMC4yOCwzMC4yOCwzMC4yOCwxLjE3LDEuMTcsMS4xNywzLjA3LDAsNC4yNHMtMy4wNywxLjE3LTQuMjQsMGMwLDAtMjAuNTgtMjAuNTgtMzAuMjItMzAuMjIiLz48Zz48cGF0aCBjbGFzcz0iY2xzLTUiIGQ9Im0xNjguNjYsMTcwLjkzYy0uNzQsMC0xLjM0LjI0LTEuODEuNzItLjQ3LjQ4LS43MSwxLjA5LS43MSwxLjgzcy4yNCwxLjMyLjcxLDEuODFjLjQ3LjQ5LDEuMDcuNzQsMS44MS43NHMxLjM0LS4yNSwxLjgxLS43NGMuNDctLjQ5LjcxLTEuMS43MS0xLjgxcy0uMjQtMS4zNC0uNzEtMS44M2MtLjQ3LS40OC0xLjA4LS43Mi0xLjgxLS43MloiLz48cGF0aCBjbGFzcz0iY2xzLTUiIGQ9Im0xNzQuNjksMTUzLjc3Yy0uNjItMS4wMi0xLjQ5LTEuODItMi42LTIuNC0xLjEyLS41Ny0yLjQtLjg2LTMuODUtLjg2LTEuNjgsMC0zLjE3LjQtNC40NywxLjE5cy0yLjI5LDEuOTQtMi45OCwzLjQzbDIuNzYsMi4yOGMuNDYtMS4wNiwxLjA3LTEuODYsMS44NS0yLjQuNzctLjU0LDEuNjUtLjgxLDIuNjQtLjgxLjc2LDAsMS40MS4xNCwxLjk3LjQxLjU1LjI4Ljk4LjY3LDEuMjgsMS4xNy4zLjUxLjQ1LDEuMS40NSwxLjc5cy0uMTYsMS4yOS0uNDcsMS44MWMtLjMxLjUyLS43NS45Mi0xLjMxLDEuMjEtLjU2LjI5LTEuMjIuNDMtMS45OC40M2gtLjkzdjYuNjZoMy4yOGwuMjYtMy43M2MuNzEtLjI0LDEuMzctLjU1LDEuOTUtLjkzLjk5LS42NCwxLjc1LTEuNDUsMi4yOS0yLjQxLjU0LS45Ny44MS0yLjA3LjgxLTMuMzEsMC0xLjMzLS4zMS0yLjUxLS45My0zLjU0WiIvPjwvZz48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Im04NS41NSwyMDMuOTdjLjY4LDIuODksMy4yNiw0Ljk2LDYuMjYsNC45NmgxMTcuNzMiLz48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Im0yMTUuMzcsMjA2LjA0Yy40Ny0uNzEuOC0xLjUyLjk1LTIuNCwxLjU4LTguODcsMy4xNS0xNy43NSw0LjczLTI2LjYyLDIuMDMtMTEuNDQsNC4wNi0yMi44OCw2LjA5LTM0LjMyLjcyLTQuMDgsMS43Ny04LjI1LDIuMTYtMTIuMzguMzktNC4xNi0xLjY4LTguNzktNS42Ny0xMC4zMSIvPjxwYXRoIGNsYXNzPSJjbHMtNyIgZD0ibTIyMy41MSwxMjAuMDhzLjQ5LDEuNjIuNTMsMS43My4zMiwyLjQ0LjMyLDIuNDRsLS4wNCwxLjkxLTEuMzgsNy4xMy0zLjM5LDE5LjMxLTIuODksMTUuOTItMi45NiwxNi43Ni0yLjQ0LDEzLjE2LS45MiwyLjY1LDQuOTgsNS4xNS44NS0yLjE1LjgxLTQuMDYsMS40OC04LjMzLDIuODItMTUuNzEsMi4xNS0xMi4xMSwxLjk0LTExLjM2LDIuNzUtMTQuNzUuODgtNC42OS4yOC0yLjU4LjA3LTIuMTItLjYtMi43NS0xLjI0LTIuMzYtMS4wOS0xLjU5LTIuMDEtMS4zMS0uOTItLjI4WiIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtNyIgcG9pbnRzPSI4NS42OCAyMDMuOTMgMjA0LjU1IDIwMy44NCAyMDkuMzUgMjA4LjczIDE0OC40OCAyMDguODggOTAuOTUgMjA5LjAyIDg5LjUgMjA4LjY2IDg3Ljk4IDIwNy45MiA4Ni44MiAyMDYuNTggODYuMDEgMjA1LjAzIDg1LjY4IDIwMy45MyIvPjwvc3ZnPg==";
 const materialSymbolsArchiveOutline = (props) => /* @__PURE__ */ jsx("svg", {
@@ -122491,7 +122681,7 @@ const MetricCard = ({
                 variant: "custom",
                 type: "button",
                 className: `${styles$a.popupItem} ${styles$a.csvBtn}`,
-                onClick: () => onDownloadRawCsv(metricItem),
+                onClick: () => onDownloadRawCsv(metricItem, filterValues2),
                 children: [/* @__PURE__ */ jsx(Icons, {
                   name: "csv-icon",
                   className: styles$a.popupItemIcon
@@ -122516,11 +122706,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();
         },
@@ -122547,6 +122734,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,
@@ -122981,6 +123171,12 @@ const LayoutAlert = ({
     })
   });
 };
+const DashboardContext = createContext({
+  isLoading: void 0,
+  data: void 0,
+  token: void 0
+});
+const useDashboardContext = () => useContext(DashboardContext);
 const timeAgo = (unixTimestamp) => {
   const now = Date.now();
   const diff2 = now - unixTimestamp;
@@ -123018,12 +123214,22 @@ const getSqlStatement = ({
   });
   return replacedStr;
 };
-const useDownloadRawCsv = (onCloseModal, metricItem) => {
+const useDownloadRawCsv = (onCloseModal, metricItem, filterValues2) => {
+  var _a2, _b2;
+  const queryClient2 = useQueryClient();
+  const { data } = useDashboardContext();
+  const { data: rawCsvSettingsData } = useRawCsvSettingsQuery(
+    {
+      id: (_a2 = data == null ? void 0 : data.workspace) == null ? void 0 : _a2.id
+    },
+    { enabled: !!((_b2 = data == null ? void 0 : data.workspace) == null ? void 0 : _b2.id) }
+  );
   const [csvDownloadUrlError, setCsvDownloadUrlError] = useState("");
   const [isLoading, setLoading] = useState(false);
   const [downloadCsvError, setError] = useState("");
   const { mutate } = useRawCsvMutation();
   const { mutate: invokeSaveRawCsvDetailsMutation } = useInvokeSaveRawCsvDetailsMutation();
+  const { mutate: updateCsvDownloadStatus } = useUpdateCsvDownloadStatusMutation();
   const { handleSubmit, register: register2 } = useForm();
   const { data: RawCsvUrlsData } = useExternalMetricRawCsvUrlsQuery(
     { externalMetricId: metricItem == null ? void 0 : metricItem.id },
@@ -123035,7 +123241,7 @@ const useDownloadRawCsv = (onCloseModal, metricItem) => {
     const expires = parseInt(params.get("Expires"), 10);
     const currentTime = Math.floor(Date.now() / 1e3);
     const secondsLeft = expires - currentTime;
-    return { isExpired: currentTime > expires, secondsLeft };
+    return { isExpired: currentTime >= expires, secondsLeft };
   };
   const getUrls = (urls) => {
     try {
@@ -123044,18 +123250,27 @@ const useDownloadRawCsv = (onCloseModal, metricItem) => {
       return [];
     }
   };
+  const rawCsvSettings = useMemo(
+    () => {
+      var _a3, _b3;
+      return {
+        expireTimeInMin: ((_b3 = (_a3 = rawCsvSettingsData == null ? void 0 : rawCsvSettingsData.companyWorkspaces_by_pk) == null ? void 0 : _a3.rawCsvSettings) == null ? void 0 : _b3.expireTimeInMin) || 30
+      };
+    },
+    [rawCsvSettingsData]
+  );
   const csvDownloadUrls = useMemo(() => {
-    var _a2;
-    if ((_a2 = RawCsvUrlsData == null ? void 0 : RawCsvUrlsData.externalMetricRawCsvUrls) == null ? void 0 : _a2.length) {
-      const urls = getUrls(RawCsvUrlsData == null ? void 0 : RawCsvUrlsData.externalMetricRawCsvUrls[0].urls);
+    if (RawCsvUrlsData == null ? void 0 : RawCsvUrlsData.externalMetricRawCsvUrls.length) {
+      const urls = getUrls(RawCsvUrlsData.externalMetricRawCsvUrls[0].urls);
       return {
         urls,
         lastUpdatedAt: timeAgo(
-          Date.parse(RawCsvUrlsData == null ? void 0 : RawCsvUrlsData.externalMetricRawCsvUrls[0].lastUpdatedAt)
+          Date.parse(RawCsvUrlsData.externalMetricRawCsvUrls[0].lastUpdatedAt)
         ),
         isExpired: urls.length ? isLinkExpired(urls[0]).isExpired : true,
-        error: RawCsvUrlsData == null ? void 0 : RawCsvUrlsData.externalMetricRawCsvUrls[0].error,
-        expireUrlIn: urls.length ? isLinkExpired(urls[0]).secondsLeft : 0
+        error: RawCsvUrlsData.externalMetricRawCsvUrls[0].error,
+        expireUrlIn: urls.length ? isLinkExpired(urls[0]).secondsLeft : 0,
+        status: RawCsvUrlsData.externalMetricRawCsvUrls[0].requestStatus
       };
     }
     return {
@@ -123063,7 +123278,8 @@ const useDownloadRawCsv = (onCloseModal, metricItem) => {
       lastUpdatedAt: 0,
       isExpired: true,
       error: null,
-      expireUrlIn: 0
+      expireUrlIn: 0,
+      status: "NONE"
     };
   }, [RawCsvUrlsData == null ? void 0 : RawCsvUrlsData.externalMetricRawCsvUrls]);
   const handleDownload = (url) => {
@@ -123106,7 +123322,7 @@ const useDownloadRawCsv = (onCloseModal, metricItem) => {
       query: sqlQuery,
       clientName,
       tenancyType,
-      values
+      values: filterValues2
     });
     mutate(
       {
@@ -123117,10 +123333,9 @@ const useDownloadRawCsv = (onCloseModal, metricItem) => {
         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;
+        onSuccess({ sendRawCsv }) {
+          const success2 = sendRawCsv == null ? void 0 : sendRawCsv.status;
+          const error2 = sendRawCsv == null ? void 0 : sendRawCsv.error;
           if (success2) {
             setError("");
             setLoading(false);
@@ -123137,17 +123352,17 @@ const useDownloadRawCsv = (onCloseModal, metricItem) => {
     );
   };
   const saveRawCsvDetails = ({
-    values,
     clientName,
-    tenancyType
+    tenancyType,
+    expirationMinutes,
+    onSuccess
   }) => {
-    setLoading(true);
-    setError("");
+    const expirationDate = new Date(Date.now() + expirationMinutes * 60 * 1e3);
     invokeSaveRawCsvDetailsMutation(
       {
-        configurations: { metricItem, fieldValues: values },
-        expireCsvFileAt: values.expireCsvFileAt,
-        expireUrlIn: parseInt(values.expireUrlIn, 10),
+        configurations: { metricItem },
+        expireCsvFileAt: expirationDate,
+        expireUrlIn: expirationMinutes * 60,
         externalMetricId: metricItem == null ? void 0 : metricItem.id,
         integrationId: metricItem == null ? void 0 : metricItem.companyIntegrationId,
         integrationName: metricItem == null ? void 0 : metricItem.integrationName,
@@ -123155,13 +123370,15 @@ const useDownloadRawCsv = (onCloseModal, metricItem) => {
           query: metricItem == null ? void 0 : metricItem.query,
           clientName,
           tenancyType,
-          values
+          values: filterValues2
         })
       },
       {
         onSuccess({ invokeSaveRawCsvDetails }) {
           if (invokeSaveRawCsvDetails == null ? void 0 : invokeSaveRawCsvDetails.statusCode) {
             setLoading(false);
+            setError("");
+            onSuccess();
             onCloseModal(false);
           } else if (invokeSaveRawCsvDetails == null ? void 0 : invokeSaveRawCsvDetails.error) {
             setLoading(false);
@@ -123178,6 +123395,65 @@ const useDownloadRawCsv = (onCloseModal, metricItem) => {
       }
     );
   };
+  const onRequestToDownload = ({
+    clientName,
+    tenancyType,
+    requestStatus
+  }) => {
+    setLoading(true);
+    setError("");
+    const expirationMinutes = rawCsvSettings.expireTimeInMin || 30;
+    updateCsvDownloadStatus(
+      {
+        configurations: metricItem,
+        expireUrlIn: expirationMinutes * 60,
+        externalMetricId: metricItem == null ? void 0 : metricItem.id,
+        requestStatus,
+        urls: "[]"
+      },
+      {
+        onSuccess({ insert_externalMetricRawCsvUrls_one }) {
+          if (insert_externalMetricRawCsvUrls_one == null ? void 0 : insert_externalMetricRawCsvUrls_one.id) {
+            saveRawCsvDetails({
+              expirationMinutes,
+              clientName,
+              tenancyType,
+              onSuccess: () => {
+                queryClient2.setQueryData(
+                  [
+                    "ExternalMetricRawCsvUrls",
+                    { externalMetricId: metricItem == null ? void 0 : metricItem.id }
+                  ],
+                  (prev) => {
+                    const prevExternalMetricRawCsvUrls = prev == null ? void 0 : prev.externalMetricRawCsvUrls;
+                    const index2 = prevExternalMetricRawCsvUrls == null ? void 0 : prevExternalMetricRawCsvUrls.findIndex(
+                      (url) => url.externalMetricId === (metricItem == null ? void 0 : metricItem.id)
+                    );
+                    if (index2 > -1) {
+                      prevExternalMetricRawCsvUrls[index2] = {
+                        ...insert_externalMetricRawCsvUrls_one
+                      };
+                    }
+                    return {
+                      ...prev,
+                      externalMetricRawCsvUrls: prevExternalMetricRawCsvUrls
+                    };
+                  }
+                );
+              }
+            });
+          } else {
+            setLoading(false);
+            setError(SOMETHING_WENT_WRONG);
+          }
+        },
+        onError() {
+          setLoading(false);
+          setError(SOMETHING_WENT_WRONG);
+        }
+      }
+    );
+  };
   return {
     isLoading,
     downloadCsvError,
@@ -123187,7 +123463,8 @@ const useDownloadRawCsv = (onCloseModal, metricItem) => {
     csvDownloadUrls,
     handleDownload,
     csvDownloadUrlError,
-    saveRawCsvDetails
+    saveRawCsvDetails,
+    onRequestToDownload
   };
 };
 const required = { required: "Required" };
@@ -123217,7 +123494,8 @@ const DownloadRawCsvModal = ({
   isShowRawCsvModal,
   metricItem,
   client,
-  companyTenancyType
+  companyTenancyType,
+  filterValues: filterValues2
 }) => {
   const [rawCsvType, setRawCsvType] = useState(RAW_CSV_OPTIONS[0]);
   const {
@@ -123227,22 +123505,50 @@ const DownloadRawCsvModal = ({
     onSubmitDownloadCsv,
     register: register2,
     csvDownloadUrls,
+    onRequestToDownload,
     handleDownload,
-    csvDownloadUrlError,
-    saveRawCsvDetails
-  } = useDownloadRawCsv(onCloseModal, metricItem);
+    csvDownloadUrlError
+  } = useDownloadRawCsv(onCloseModal, metricItem, filterValues2);
   return /* @__PURE__ */ jsx(Modal, {
     isOpen: isShowRawCsvModal,
     onClose: () => onCloseModal(false),
-    headerTitle: "Raw CSV",
+    customHeader: /* @__PURE__ */ jsxs("div", {
+      className: styles$a.downloadCsvHeader,
+      children: [/* @__PURE__ */ jsxs("div", {
+        className: styles$a.downloadCsvHeaderText,
+        children: [/* @__PURE__ */ jsx(Text, {
+          variant: "p",
+          styleClass: "primary",
+          children: "Download Raw CSV"
+        }), /* @__PURE__ */ jsx("div", {
+          className: styles$a.downloadCsvTabContainer,
+          children: RAW_CSV_OPTIONS.map((tab2) => /* @__PURE__ */ jsx(Button, {
+            variant: "custom",
+            type: "button",
+            onClick: () => {
+              setRawCsvType(tab2);
+            },
+            className: rawCsvType === tab2 ? styles$a.downloadCsvActiveTab : styles$a.downloadCsvTab,
+            children: /* @__PURE__ */ jsx(Text, {
+              styleClass: "font-14",
+              variant: "p",
+              className: rawCsvType === tab2 ? styles$a.downloadCsvActiveTabText : "",
+              children: tab2
+            })
+          }, tab2))
+        })]
+      }), /* @__PURE__ */ jsx(Button, {
+        variant: "secondary",
+        type: "button",
+        onClick: () => onCloseModal(false),
+        children: /* @__PURE__ */ jsx(Icons, {
+          name: "close-icon"
+        })
+      })]
+    }),
     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", {
+      children: [rawCsvType === RAW_CSV_OPTIONS[1] && /* @__PURE__ */ jsxs("form", {
         onSubmit: handleSubmit((values) => onSubmitDownloadCsv({
           values,
           sqlQuery: metricItem == null ? void 0 : metricItem.query,
@@ -123296,65 +123602,103 @@ const DownloadRawCsvModal = ({
             children: "Submit"
           })]
         })]
-      }), rawCsvType === RAW_CSV_OPTIONS[0] && /* @__PURE__ */ jsx("div", {
-        children: !csvDownloadUrls.isExpired ? /* @__PURE__ */ jsxs(Fragment, {
+      }), rawCsvType === RAW_CSV_OPTIONS[0] && /* @__PURE__ */ jsxs("div", {
+        children: [csvDownloadUrls.status === NONE$1 && /* @__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
+            children: [/* @__PURE__ */ jsxs("div", {
+              className: styles$a.downloadUrlTimeline,
+              children: [/* @__PURE__ */ jsxs("div", {
+                className: styles$a.timeLineItem,
+                children: [/* @__PURE__ */ jsx("span", {
+                  className: styles$a.timeLineActiveIcon,
+                  children: "1"
+                }), /* @__PURE__ */ jsx(Text, {
+                  variant: "p",
+                  styleClass: "primary",
+                  children: "Request url"
+                })]
+              }), /* @__PURE__ */ jsx("div", {
+                className: styles$a.timeLineItemline
+              }), /* @__PURE__ */ jsxs("div", {
+                className: styles$a.timeLineItem,
+                children: [/* @__PURE__ */ jsx("span", {
+                  className: styles$a.timeLineIcon,
+                  children: "2"
+                }), /* @__PURE__ */ jsx(Text, {
+                  variant: "p",
+                  styleClass: "primary",
+                  children: "Download url"
+                })]
               })]
-            }), /* @__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"]
+            }), /* @__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: "It may take some time for the url to appear as the file size may be too large, especially for larger row entities."
+                })]
               })]
-            }), csvDownloadUrlError && /* @__PURE__ */ jsx(Error$1, {
-              message: csvDownloadUrlError
             })]
+          }), 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"
-            }), csvDownloadUrls.urls.map((url) => /* @__PURE__ */ jsx(Button, {
+            }), /* @__PURE__ */ jsx(Button, {
               variant: "primary",
               type: "button",
               size: "medium",
-              onClick: () => handleDownload(url),
-              children: "Download"
-            }))]
+              onClick: () => onRequestToDownload({
+                clientName: client,
+                tenancyType: companyTenancyType,
+                requestStatus: REQUESTED
+              }),
+              children: "Request url"
+            })]
           })]
-        }) : /* @__PURE__ */ jsxs("form", {
-          onSubmit: handleSubmit((values) => saveRawCsvDetails({
-            values,
-            clientName: client,
-            tenancyType: companyTenancyType
-          })),
+        }), csvDownloadUrls.status === REQUESTED && /* @__PURE__ */ jsxs(Fragment, {
           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
+            children: [/* @__PURE__ */ jsxs("div", {
+              className: styles$a.downloadUrlTimeline,
+              children: [/* @__PURE__ */ jsxs("div", {
+                className: styles$a.timeLineItem,
+                children: [/* @__PURE__ */ jsx("span", {
+                  className: styles$a.timeLineActiveIcon,
+                  children: "1"
+                }), /* @__PURE__ */ jsx(Text, {
+                  variant: "p",
+                  styleClass: "primary",
+                  children: "Request url"
+                })]
+              }), /* @__PURE__ */ jsx("div", {
+                className: styles$a.timeLineItemline
+              }), /* @__PURE__ */ jsxs("div", {
+                className: styles$a.timeLineItem,
+                children: [/* @__PURE__ */ jsx("span", {
+                  className: styles$a.timeLineIcon,
+                  children: "2"
+                }), /* @__PURE__ */ jsx(Text, {
+                  variant: "p",
+                  styleClass: "primary",
+                  children: "Download url"
+                })]
+              })]
             }), /* @__PURE__ */ jsxs("div", {
               className: styles$a.downloadCsvNote,
               children: [/* @__PURE__ */ jsx(Icons, {
@@ -123369,32 +123713,166 @@ const DownloadRawCsvModal = ({
                 }), /* @__PURE__ */ jsx(Text, {
                   styleClass: "font-14",
                   variant: "p",
-                  children: "Please check again in some time, download link will be available."
+                  children: "It may take some time for the url to appear as the file size may be too large, especially for larger row entities."
                 })]
               })]
-            }), csvDownloadUrls.error && /* @__PURE__ */ jsx(Error$1, {
+            }), csvDownloadUrls.error ? /* @__PURE__ */ jsx(Error$1, {
               message: csvDownloadUrls.error
-            }), downloadCsvError && /* @__PURE__ */ jsx(Error$1, {
-              message: downloadCsvError
+            }) : /* @__PURE__ */ jsxs("div", {
+              className: styles$a.downloadCsvLoading,
+              children: [/* @__PURE__ */ jsx(eosIconsLoading, {
+                className: styles$a.downloadCsvLoadingIcon
+              }), /* @__PURE__ */ jsx(Text, {
+                variant: "p",
+                styleClass: "font-14",
+                className: styles$a.downloadCsvLoadingText,
+                children: "please wait while your download is being processed..."
+              })]
             })]
+          }), 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, {
+            }), csvDownloadUrls.error ? /* @__PURE__ */ jsx(Button, {
               variant: "primary",
-              type: "submit",
-              size: "small",
+              type: "button",
+              size: "medium",
+              onClick: () => onRequestToDownload({
+                clientName: client,
+                tenancyType: companyTenancyType,
+                requestStatus: REQUESTED
+              }),
+              children: "Request url"
+            }) : /* @__PURE__ */ jsx(Button, {
+              variant: "custom",
+              type: "button",
+              size: "medium",
+              isDisabled: true,
+              className: styles$a.downloadCsvCancelBtn,
+              children: "Request url"
+            })]
+          })]
+        }), csvDownloadUrls.status === AVAILABLE && /* @__PURE__ */ jsxs(Fragment, {
+          children: [/* @__PURE__ */ jsxs("div", {
+            className: styles$a.downloadCsvWrapper,
+            children: [/* @__PURE__ */ jsxs("div", {
+              className: styles$a.downloadUrlTimeline,
+              children: [/* @__PURE__ */ jsxs("div", {
+                className: styles$a.timeLineItem,
+                children: [/* @__PURE__ */ jsx("span", {
+                  className: styles$a.timeLineCheckedIconWrapper,
+                  children: /* @__PURE__ */ jsx(materialSymbolsCheckSmallRounded, {
+                    className: styles$a.timeLineCheckedIcon
+                  })
+                }), /* @__PURE__ */ jsx(Text, {
+                  variant: "p",
+                  styleClass: "primary",
+                  children: "Request url"
+                })]
+              }), /* @__PURE__ */ jsx("div", {
+                className: styles$a.timeLineItemline
+              }), /* @__PURE__ */ jsxs("div", {
+                className: styles$a.timeLineItem,
+                children: [/* @__PURE__ */ jsx("span", {
+                  className: styles$a.timeLineActiveIcon,
+                  children: "2"
+                }), /* @__PURE__ */ jsx(Text, {
+                  variant: "p",
+                  styleClass: "primary",
+                  children: "Download url"
+                })]
+              })]
+            }), csvDownloadUrls.isExpired ? /* @__PURE__ */ jsxs("div", {
+              className: styles$a.downloadCsvExpiredNote,
+              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: "Your download link has expired. Please click on Request url to generate a new download url."
+                })]
+              })]
+            }) : /* @__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__ */ jsxs(Text, {
+                  styleClass: "font-14",
+                  variant: "p",
+                  children: ["Your download may expire in", " ", (csvDownloadUrls.expireUrlIn / 60).toFixed(2), " ", "minutes. Please click Download button to download your raw CSV file."]
+                })]
+              })]
+            }), downloadCsvError && /* @__PURE__ */ jsx(Error$1, {
+              message: downloadCsvError
+            }), csvDownloadUrlError && /* @__PURE__ */ jsx(Error$1, {
+              message: csvDownloadUrlError
+            })]
+          }), /* @__PURE__ */ jsxs(ModalFooter, {
+            children: [/* @__PURE__ */ jsx("div", {
+              className: styles$a.downloadCsvBackBtnWrapper,
+              children: csvDownloadUrls.isExpired && /* @__PURE__ */ jsx(Button, {
+                variant: "secondary",
+                type: "button",
+                size: "11rem",
+                isDisabled: isLoading,
+                onClick: () => onRequestToDownload({
+                  clientName: client,
+                  tenancyType: companyTenancyType,
+                  requestStatus: REQUESTED
+                }),
+                className: styles$a.downloadCsvBackBtnText,
+                children: /* @__PURE__ */ jsxs(Text, {
+                  styleClass: "font-14a",
+                  variant: "p",
+                  className: styles$a.downloadCsvBackBtnText,
+                  children: [/* @__PURE__ */ jsx(Icons, {
+                    name: "arrow-back-icon"
+                  }), "Go back to Request url"]
+                })
+              })
+            }), /* @__PURE__ */ jsx(Button, {
+              variant: "custom",
+              type: "button",
+              className: styles$a.downloadCsvCancelBtn,
+              onClick: () => onCloseModal(false),
               isDisabled: isLoading,
-              children: "Submit"
+              children: "Cancel"
+            }), !csvDownloadUrls.isExpired && csvDownloadUrls.urls.map((url) => /* @__PURE__ */ jsx(Button, {
+              variant: "primary",
+              type: "button",
+              size: "medium",
+              onClick: () => handleDownload(url),
+              children: "Download"
+            })), csvDownloadUrls.isExpired && /* @__PURE__ */ jsx(Button, {
+              variant: "custom",
+              type: "button",
+              size: "medium",
+              isDisabled: true,
+              className: styles$a.downloadCsvCancelBtn,
+              children: "Download"
             })]
           })]
-        })
+        })]
       })]
     })
   });
@@ -123491,12 +123969,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", {
@@ -123582,9 +124067,10 @@ const ExternalMetricList = ({
                 metricData: metricData2,
                 metric
               }),
-              onDownloadRawCsv: (metric) => setRawCsvModal({
+              onDownloadRawCsv: (metric, filterValues2) => setRawCsvModal({
                 metric,
-                show: true
+                show: true,
+                filterValues: filterValues2
               })
             })
           }, metricItem.id))
@@ -123606,7 +124092,8 @@ const ExternalMetricList = ({
         onCloseModal: (value) => setRawCsvModal({
           metric: void 0,
           show: value
-        })
+        }),
+        filterValues: rawCsvModal.filterValues
       }), /* @__PURE__ */ jsx(FullScreenChart, {
         onCancel: () => setFullScreen(false),
         isShow: isFullScreen,
@@ -123911,12 +124398,6 @@ const TagInputField = ({
     })
   });
 };
-const DashboardContext = createContext({
-  isLoading: void 0,
-  data: void 0,
-  token: void 0
-});
-const useDashboardContext = () => useContext(DashboardContext);
 const getTimezoneOffset = (timezone, date) => {
   const localOffset = date.getTimezoneOffset() * -1;
   const targetOffset = new Date(